public/stylesheets/calendar.css

   1 /* The main calendar widget.  DIV containing a table. */
   2
   3 img.calendar-trigger {
   4     cursor: pointer;
   5     vertical-align: middle;
   6     margin-left: 4px;
   7 }
   8
   9 div.calendar { position: relative; z-index: 30;}
  10
  11 div.calendar, div.calendar table {
  12   border: 1px solid #556;
  13   font-size: 11px;
  14   color: #000;
  15   cursor: default;
  16   background: #fafbfc;
  17   font-family: tahoma,verdana,sans-serif;
  18 }
  19
  20 /* Header part -- contains navigation buttons and day names. */
  21
  22 div.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  23   text-align: center;    /* They are the navigation buttons */
  24   padding: 2px;          /* Make the buttons seem like they're pressing */
  25 }
  26
  27 div.calendar .nav {
  28   background: #467aa7;
  29 }
  30
  31 div.calendar thead .title { /* This holds the current "month, year" */
  32   font-weight: bold;      /* Pressing it will take you to the current date */
  33   text-align: center;
  34   background: #fff;
  35   color: #000;
  36   padding: 2px;
  37 }
  38
  39 div.calendar thead .headrow { /* Row <TR> containing navigation buttons */
  40   background: #467aa7;
  41   color: #fff;
  42 }
  43
  44 div.calendar thead .daynames { /* Row <TR> containing the day names */
  45   background: #bdf;
  46 }
  47
  48 div.calendar thead .name { /* Cells <TD> containing the day names */
  49   border-bottom: 1px solid #556;
  50   padding: 2px;
  51   text-align: center;
  52   color: #000;
  53 }
  54
  55 div.calendar thead .weekend { /* How a weekend day name shows in header */
  56   color: #a66;
  57 }
  58
  59 div.calendar thead .hilite { /* How do the buttons in header appear when hover */
  60   background-color: #80b0da;
  61   color: #000;
  62   padding: 1px;
  63 }
  64
  65 div.calendar thead .active { /* Active (pressed) buttons in header */
  66   background-color: #77c;
  67   padding: 2px 0px 0px 2px;
  68 }
  69
  70 /* The body part -- contains all the days in month. */
  71
  72 div.calendar tbody .day { /* Cells <TD> containing month days dates */
  73   width: 2em;
  74   color: #456;
  75   text-align: right;
  76   padding: 2px 4px 2px 2px;
  77 }
  78 div.calendar tbody .day.othermonth {
  79   font-size: 80%;
  80   color: #bbb;
  81 }
  82 div.calendar tbody .day.othermonth.oweekend {
  83   color: #fbb;
  84 }
  85
  86 div.calendar table .wn {
  87   padding: 2px 3px 2px 2px;
  88   border-right: 1px solid #000;
  89   background: #bdf;
  90 }
  91
  92 div.calendar tbody .rowhilite td {
  93   background: #def;
  94 }
  95
  96 div.calendar tbody .rowhilite td.wn {
  97   background: #80b0da;
  98 }
  99
 100 div.calendar tbody td.hilite { /* Hovered cells <TD> */
 101   background: #80b0da;
 102   padding: 1px 3px 1px 1px;
 103   border: 1px solid #bbb;
 104 }
 105
 106 div.calendar tbody td.active { /* Active (pressed) cells <TD> */
 107   background: #cde;
 108   padding: 2px 2px 0px 2px;
 109 }
 110
 111 div.calendar tbody td.selected { /* Cell showing today date */
 112   font-weight: bold;
 113   border: 1px solid #000;
 114   padding: 1px 3px 1px 1px;
 115   background: #fff;
 116   color: #000;
 117 }
 118
 119 div.calendar tbody td.weekend { /* Cells showing weekend days */
 120   color: #a66;
 121 }
 122
 123 div.calendar tbody td.today { /* Cell showing selected date */
 124   font-weight: bold;
 125   color: #f00;
 126 }
 127
 128 div.calendar tbody .disabled { color: #999; }
 129
 130 div.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 131   visibility: hidden;
 132 }
 133
 134 div.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 135   display: none;
 136 }
 137
 138 /* The footer part -- status bar and "Close" button */
 139
 140 div.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 141   text-align: center;
 142   background: #556;
 143   color: #fff;
 144 }
 145
 146 div.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 147   background: #fff;
 148   color: #445;
 149   border-top: 1px solid #556;
 150   padding: 1px;
 151 }
 152
 153 div.calendar tfoot .hilite { /* Hover style for buttons in footer */
 154   background: #aaf;
 155   border: 1px solid #04f;
 156   color: #000;
 157   padding: 1px;
 158 }
 159
 160 div.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 161   background: #77c;
 162   padding: 2px 0px 0px 2px;
 163 }
 164
 165 /* Combo boxes (menus that display months/years for direct selection) */
 166
 167 div.calendar .combo {
 168   position: absolute;
 169   display: none;
 170   top: 0px;
 171   left: 0px;
 172   width: 4em;
 173   cursor: default;
 174   border: 1px solid #655;
 175   background: #def;
 176   color: #000;
 177   font-size: 90%;
 178   z-index: 100;
 179 }
 180
 181 div.calendar .combo .label,
 182 div.calendar .combo .label-IEfix {
 183   text-align: center;
 184   padding: 1px;
 185 }
 186
 187 div.calendar .combo .label-IEfix {
 188   width: 4em;
 189 }
 190
 191 div.calendar .combo .hilite {
 192   background: #acf;
 193 }
 194
 195 div.calendar .combo .active {
 196   border-top: 1px solid #46a;
 197   border-bottom: 1px solid #46a;
 198   background: #eef;
 199   font-weight: bold;
 200 }
 201
 202 div.calendar td.time {
 203   border-top: 1px solid #000;
 204   padding: 1px 0px;
 205   text-align: center;
 206   background-color: #f4f0e8;
 207 }
 208
 209 div.calendar td.time .hour,
 210 div.calendar td.time .minute,
 211 div.calendar td.time .ampm {
 212   padding: 0px 3px 0px 4px;
 213   border: 1px solid #889;
 214   font-weight: bold;
 215   background-color: #fff;
 216 }
 217
 218 div.calendar td.time .ampm {
 219   text-align: center;
 220 }
 221
 222 div.calendar td.time .colon {
 223   padding: 0px 2px 0px 3px;
 224   font-weight: bold;
 225 }
 226
 227 div.calendar td.time span.hilite {
 228   border-color: #000;
 229   background-color: #667;
 230   color: #fff;
 231 }
 232
 233 div.calendar td.time span.active {
 234   border-color: #f00;
 235   background-color: #000;
 236   color: #0f0;
 237 }