[Sommaire] [Imprimer]

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