skins/jscalendar/calendar-tas.css

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