[Sommaire] [Imprimer]

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