[Sommaire] [Imprimer]

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