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