[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 #565;
   7    font-size: 11px;
   8    color: #000;
   9    cursor: default;
  10    background: #efe;
  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    background: #676;
  20    color: #fff;
  21    font-size: 90%;
  22  }
  23  
  24  .calendar .nav {
  25    background: #676 url(menuarrow.gif) no-repeat 100% 100%;
  26  }
  27  
  28  .calendar thead .title { /* This holds the current "month, year" */
  29    font-weight: bold;      /* Pressing it will take you to the current date */
  30    text-align: center;
  31    padding: 2px;
  32    background: #250;
  33    color: #efa;
  34  }
  35  
  36  .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  37  }
  38  
  39  .calendar thead .name { /* Cells <TD> containing the day names */
  40    border-bottom: 1px solid #565;
  41    padding: 2px;
  42    text-align: center;
  43    color: #000;
  44  }
  45  
  46  .calendar thead .weekend { /* How a weekend day name shows in header */
  47    color: #a66;
  48  }
  49  
  50  .calendar thead .hilite { /* How do the buttons in header appear when hover */
  51    background-color: #afa;
  52    color: #000;
  53    border: 1px solid #084;
  54    padding: 1px;
  55  }
  56  
  57  .calendar thead .active { /* Active (pressed) buttons in header */
  58    background-color: #7c7;
  59    padding: 2px 0px 0px 2px;
  60  }
  61  
  62  .calendar thead .daynames { /* Row <TR> containing the day names */
  63    background: #dfb;
  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: #564;
  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 #8a8;
  85    background: #dfb;
  86  }
  87  
  88  .calendar tbody .rowhilite td {
  89    background: #dfd;
  90  }
  91  
  92  .calendar tbody .rowhilite td.wn {
  93    background: #efe;
  94  }
  95  
  96  .calendar tbody td.hilite { /* Hovered cells <TD> */
  97    background: #efd;
  98    padding: 1px 3px 1px 1px;
  99    border: 1px solid #bbb;
 100  }
 101  
 102  .calendar tbody td.active { /* Active (pressed) cells <TD> */
 103    background: #dec;
 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: #f8fff8;
 112    color: #000;
 113  }
 114  
 115  .calendar tbody td.weekend { /* Cells showing weekend days */
 116    color: #a66;
 117  }
 118  
 119  .calendar tbody td.today { font-weight: bold; color: #0a0; }
 120  
 121  .calendar tbody .disabled { color: #999; }
 122  
 123  .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 124    visibility: hidden;
 125  }
 126  
 127  .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 128    display: none;
 129  }
 130  
 131  /* The footer part -- status bar and "Close" button */
 132  
 133  .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 134    text-align: center;
 135    background: #565;
 136    color: #fff;
 137  }
 138  
 139  .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 140    padding: 2px;
 141    background: #250;
 142    color: #efa;
 143  }
 144  
 145  .calendar tfoot .hilite { /* Hover style for buttons in footer */
 146    background: #afa;
 147    border: 1px solid #084;
 148    color: #000;
 149    padding: 1px;
 150  }
 151  
 152  .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 153    background: #7c7;
 154    padding: 2px 0px 0px 2px;
 155  }
 156  
 157  /* Combo boxes (menus that display months/years for direct selection) */
 158  
 159  .calendar .combo {
 160    position: absolute;
 161    display: none;
 162    top: 0px;
 163    left: 0px;
 164    width: 4em;
 165    cursor: default;
 166    border: 1px solid #565;
 167    background: #efd;
 168    color: #000;
 169    font-size: 90%;
 170    z-index: 100;
 171  }
 172  
 173  .calendar .combo .label,
 174  .calendar .combo .label-IEfix {
 175    text-align: center;
 176    padding: 1px;
 177  }
 178  
 179  .calendar .combo .label-IEfix {
 180    width: 4em;
 181  }
 182  
 183  .calendar .combo .hilite {
 184    background: #af8;
 185  }
 186  
 187  .calendar .combo .active {
 188    border-top: 1px solid #6a4;
 189    border-bottom: 1px solid #6a4;
 190    background: #efe;
 191    font-weight: bold;
 192  }
 193  
 194  .calendar td.time {
 195    border-top: 1px solid #8a8;
 196    padding: 1px 0px;
 197    text-align: center;
 198    background-color: #dfb;
 199  }
 200  
 201  .calendar td.time .hour,
 202  .calendar td.time .minute,
 203  .calendar td.time .ampm {
 204    padding: 0px 3px 0px 4px;
 205    border: 1px solid #898;
 206    font-weight: bold;
 207    background-color: #fff;
 208  }
 209  
 210  .calendar td.time .ampm {
 211    text-align: center;
 212  }
 213  
 214  .calendar td.time .colon {
 215    padding: 0px 2px 0px 3px;
 216    font-weight: bold;
 217  }
 218  
 219  .calendar td.time span.hilite {
 220    border-color: #000;
 221    background-color: #686;
 222    color: #fff;
 223  }
 224  
 225  .calendar td.time span.active {
 226    border-color: #f00;
 227    background-color: #000;
 228    color: #0f0;
 229  }