[Sommaire] [Imprimer]

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