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