plekit/datepicker/datepicker.css

   1 /* This is a very basic stylesheet for the date-picker. Feel free to create your own. */\r
   2 \r
   3 /* The wrapper div */\r
   4 div.datePicker\r
   5         {\r
   6         position:absolute;        \r
   7         z-index:9999;\r
   8         text-align:center;\r
   9 \r
  10         /* Change the font-size to suit your design's CSS. The following line is for the demo that has a 12px font-size defined on the body tag */\r
  11         font:900 0.8em/1em Verdana, Sans-Serif;\r
  12 \r
  13         /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */\r
  14         /* font:900 77%/77% Verdana, sans-serif; */\r
  15         \r
  16         /* Or, if you prefer a pixel precision */\r
  17         /* font:900 12px/12px Verdana, sans-serif; */\r
  18         \r
  19         background:transparent;\r
  20 \r
  21         /* Mozilla & Webkit extensions to stop text-selection. Remove if you wish to validate the CSS */\r
  22         -moz-user-select:none;\r
  23         -khtml-user-select:none;                 \r
  24         }    \r
  25 /* You can add focus effects (for everything but IE6) like so: */\r
  26 div.datePicker:focus\r
  27         {\r
  28         /* Naughty, naughty - but we add a highlight using the table's border colour */\r
  29         outline:none;\r
  30         }\r
  31 div.datePicker:focus table\r
  32         {\r
  33         border-color:#aaa;\r
  34         }\r
  35 /* Make the wrapper div larger if weeks are to be displayed */\r
  36 div.weeks-displayed\r
  37         {\r
  38         /* min-width:28em; \r
  39         width:28em; */\r
  40         }\r
  41 /* Styles for the static datePickers */\r
  42 div.static-datepicker\r
  43         {\r
  44         position:relative;        \r
  45         top:5px;\r
  46         left:0;\r
  47         }\r
  48 div.datePicker table\r
  49         {\r
  50         width:auto;\r
  51         height:auto;\r
  52         }\r
  53 /* Draggable datepickers */\r
  54 div.datePicker tfoot th.drag-enabled,\r
  55 div.datePicker thead th.drag-enabled,\r
  56 div.datePicker thead th.drag-enabled span\r
  57         {\r
  58         cursor:move;\r
  59         }\r
  60 /* The iframe hack to cover selectlists in Internet Explorer <= v6 */\r
  61 iframe.iehack\r
  62         {\r
  63         position:absolute;\r
  64         background:#fff;\r
  65         z-index:9998;\r
  66         padding:0;\r
  67         border:0;\r
  68         display:none;\r
  69         margin:0;\r
  70         }\r
  71 /* The "button" created beside each input for non-static datePickers */\r
  72 a.date-picker-control:link,\r
  73 a.date-picker-control:visited\r
  74         {\r
  75         position:relative;\r
  76         /* Moz & FF */\r
  77         display: -moz-inline-stack;\r
  78         border:0 none;\r
  79         padding:0;\r
  80         margin:0 0 0 4px;\r
  81         background:transparent url(../media/cal-grey.gif) no-repeat 50% 50%;\r
  82         min-width:16px;\r
  83         line-height:1;\r
  84         cursor:pointer;\r
  85         visibility:visible;\r
  86         text-decoration:none;\r
  87         vertical-align:top;\r
  88         }\r
  89 a.date-picker-control:hover,\r
  90 a.date-picker-control:active,\r
  91 a.date-picker-control:focus,\r
  92 a.dp-button-active:link,\r
  93 a.dp-button-active:visited,\r
  94 a.dp-button-active:hover,\r
  95 a.dp-button-active:active,\r
  96 a.dp-button-active:focus\r
  97         {\r
  98         background:transparent url(../media/cal.gif) no-repeat 50% 50% !important;\r
  99         }\r
 100 /* Feed IE6 the following rule, IE7 should handle the min-width declared above */\r
 101 * html a.date-picker-control\r
 102         {\r
 103         width:16px;\r
 104         }\r
 105 /* IE, Safari & Opera. Seperate CSS rule seems to be required. */\r
 106 a.date-picker-control\r
 107         {\r
 108         display:inline-block;\r
 109         }\r
 110 a.date-picker-control span\r
 111         {\r
 112         display:block;\r
 113         width:16px;\r
 114         height:16px;\r
 115         margin:auto 0;\r
 116         }\r
 117 /* Default "button" styles */\r
 118 div.datePicker thead th span\r
 119         {\r
 120         display:block;\r
 121         padding:0;\r
 122         margin:0;\r
 123         text-align:center;\r
 124         line-height:1em;\r
 125         border:0 none;\r
 126         background:transparent;\r
 127         font-weight:bold;\r
 128         cursor:pointer;\r
 129         }\r
 130 /* The "month, year" display */\r
 131 div.datePicker th span.month-display,\r
 132 div.datePicker th span.year-display\r
 133         {\r
 134         display:inline;\r
 135         text-transform:uppercase;\r
 136         letter-spacing:1px;\r
 137         font:normal 1.2em Verdana, Sans-Serif;\r
 138         cursor:default;          \r
 139         }\r
 140 /* Next & Previous (month, year) buttons */\r
 141 div.datePicker th span.prev-but,\r
 142 div.datePicker th span.next-but\r
 143         {\r
 144         font-weight:lighter;\r
 145         font-size:2.4em;\r
 146         font-family: georgia, times new roman, palatino, times, bookman, serif;\r
 147         cursor:pointer !important;\r
 148         }\r
 149 /* Hover effect for Next & Previous (month, year) buttons */\r
 150 div.datePicker th span.prev-but:hover,\r
 151 div.datePicker th span.next-but:hover,\r
 152 div.datePicker th span.today-but:hover\r
 153         {\r
 154         color:#a84444;\r
 155         }\r
 156 /* Today button */\r
 157 div.datePicker th span.today-but\r
 158         {\r
 159         text-align:center;\r
 160         margin:0 auto;\r
 161         font:normal 1em Verdana, Sans-Serif;\r
 162         width:100%;\r
 163         text-decoration:none;\r
 164         padding-top:0.3em;\r
 165         text-transform:uppercase;\r
 166         vertical-align:middle;\r
 167         cursor:pointer !important          \r
 168         }\r
 169 /* Disabled Today button - IE6 will not see this rule as it should */\r
 170 div.datePicker th span.today-but.fd-disabled\r
 171         {\r
 172         display:none;\r
 173         }\r
 174 /* Disabled buttons */\r
 175 div.datePicker th span.prev-but.fd-disabled:hover,\r
 176 div.datePicker th span.next-but.fd-disabled:hover,\r
 177 div.datePicker thead th span.fd-disabled\r
 178         {\r
 179         color:#aaa;\r
 180         cursor:default !important; \r
 181         display:block; /* required to get IE6 to play ball */\r
 182         }\r
 183 \r
 184 /* The mon, tue, wed etc day buttons */\r
 185 div.datePicker th span.fd-day-header\r
 186         {\r
 187         text-align:center;\r
 188         margin:0 auto;\r
 189         font:900 1em Verdana, Sans-Serif;\r
 190         text-decoration:none;\r
 191         text-transform:lowercase;\r
 192         cursor:pointer;          \r
 193         }\r
 194 /* The table */\r
 195 div.datePicker table\r
 196         {               \r
 197         margin:0;\r
 198         padding:0px;\r
 199         border:1px solid #ccc;        \r
 200         background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;\r
 201         text-align:center;\r
 202         border-spacing:2px;\r
 203         padding:0.3em; \r
 204         width:auto;             \r
 205         empty-cells:show;               \r
 206         -moz-border-radius:0.8em;        \r
 207         }\r
 208 /* Common TD & TH styling */\r
 209 div.datePicker table td,\r
 210 div.datePicker table tbody th\r
 211         {                 \r
 212         border:0 none;\r
 213         padding:0;\r
 214         text-align:center;\r
 215         vertical-align:middle;               \r
 216         cursor:pointer;\r
 217         background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;\r
 218         width:3em;\r
 219         height:3em;         \r
 220         outline:none;        \r
 221         border:1px solid #ccc;\r
 222         text-transform:none;\r
 223         -moz-border-radius:2px;\r
 224         -webkit-border-radius:2px;\r
 225         border-radius:2px;\r
 226         }\r
 227 div.datePicker table th\r
 228         {\r
 229         border:0 none;\r
 230         padding:0;        \r
 231         font-weight:bold;\r
 232         color:#222;\r
 233         text-align:center;\r
 234         vertical-align:middle; \r
 235         text-transform:none;        \r
 236         }\r
 237 div.datePicker table thead th\r
 238         {\r
 239         height:auto !important;\r
 240         }\r
 241 div.datePicker table tbody th\r
 242         {                          \r
 243         border:1px solid #dcdcdc;        \r
 244         }\r
 245 /* Week number display */\r
 246 div.datePicker table thead th.date-picker-week-header,\r
 247 div.datePicker table tbody th.date-picker-week-header\r
 248         {\r
 249         font-style:oblique;  \r
 250         background:transparent;\r
 251         cursor:default;         \r
 252         }\r
 253 div.datePicker table thead th.date-picker-week-header\r
 254         {\r
 255         cursor:help;\r
 256         border:0 none;\r
 257         padding:0 0 0.2em 0;\r
 258         }\r
 259 /* tfoot status bar */\r
 260 div.datePicker tfoot th\r
 261         {\r
 262         cursor:default;\r
 263         font-weight:normal;\r
 264         text-transform:uppercase;\r
 265         letter-spacing:0.1em;\r
 266         border:0 none;\r
 267         background:transparent;\r
 268         height:2.8em;\r
 269         }\r
 270 /* TD cell that is _not_ used to display a day of the month */\r
 271 div.datePicker table tbody td.date-picker-unused\r
 272         {\r
 273         background:#fff url(../media/backstripes.gif);\r
 274         border-color:#dcdcdc;          \r
 275         cursor:default !important;\r
 276         }\r
 277 \r
 278 /* The TH cell used to display the "month, year" title */\r
 279 div.datePicker table thead th.date-picker-title\r
 280         {\r
 281         width:auto;\r
 282         height:auto;\r
 283         padding:0.4em 0;\r
 284         }\r
 285 /* The "mon tue wed etc" day header styles */\r
 286 div.datePicker table thead th.date-picker-day-header\r
 287         {\r
 288         text-transform:lowercase;\r
 289         cursor:help;\r
 290         height:auto;\r
 291         }\r
 292 /* The "todays date" style */\r
 293 div.datePicker table tbody td.date-picker-today\r
 294         {\r
 295         background:#fff url(../media/bullet2.gif) no-repeat 0 0;\r
 296         color:rgb(100,100,100) !important;\r
 297         }\r
 298 \r
 299 div.datePicker table tbody td.month-out.date-picker-highlight \r
 300         {\r
 301         color:#aa8866 !important;\r
 302         }\r
 303 /* The "highlight days" style */\r
 304 div.datePicker table tbody td.date-picker-highlight,\r
 305 div.datePicker table thead th.date-picker-highlight\r
 306         {\r
 307         color:#a86666 !important;\r
 308         }\r
 309 /* The "active cursor" style */\r
 310 div.datePicker table tbody td.date-picker-hover\r
 311         {\r
 312         background:#fff url(../media/bg_header.jpg) no-repeat 0 0;\r
 313         cursor:pointer;\r
 314         border-color:rgb(100,130,170) !important;\r
 315         color:rgb(100,130,170);                 \r
 316         }\r
 317 /* The "disabled days" style */\r
 318 div.datePicker table tbody td.day-disabled\r
 319         {          \r
 320         background:#fff url(../media/backstripes.gif) no-repeat 0 0;\r
 321         color:#aaa !important;\r
 322         cursor:default;\r
 323         text-decoration:line-through;\r
 324         } \r
 325 div.datePicker table tbody td.month-out \r
 326         {\r
 327         border-color:#ddd;\r
 328         color:#aaa !important;\r
 329         background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;                       \r
 330         } \r
 331 /* The "selected date" style */\r
 332 div.datePicker table tbody td.date-picker-selected-date\r
 333         {\r
 334         color:#333 !important;\r
 335         border-color:#333 !important;\r
 336         }\r
 337 /* The date "out of range" style */\r
 338 div.datePicker table tbody td.out-of-range,\r
 339 div.datePicker table tbody td.not-selectable\r
 340         {\r
 341         color:#ccc !important;\r
 342         font-style:oblique;\r
 343         background:#fcfcfc !important;\r
 344         cursor:default !important;\r
 345         opacity:0.6;\r
 346         } \r
 347 /* Week number "out of range" && "month-out" styles */\r
 348 div.datePicker table tbody th.month-out,\r
 349 div.datePicker table tbody th.out-of-range\r
 350         {\r
 351         color:#aaa !important;\r
 352         font-style:oblique;\r
 353         background:#fcfcfc !important;          \r
 354         }\r
 355 div.datePicker table tbody th.out-of-range\r
 356         {\r
 357         opacity:0.6;\r
 358         }  \r
 359 /* Used when the entire grid is full but next/prev months cannot be selected */\r
 360 div.datePicker table tbody td.not-selectable\r
 361         {\r
 362         opacity:0.8;\r
 363         }\r
 364 div.datePicker table tbody tr\r
 365         {\r
 366         display:table-row;\r
 367         }\r
 368 div.datePicker table tfoot sup\r
 369         {\r
 370         font-size:0.8em;\r
 371         letter-spacing:normal;\r
 372         text-transform:none;\r
 373         height: 0;\r
 374         line-height: 1;\r
 375         position: relative;\r
 376         top: -0.2em;    \r
 377         vertical-align: baseline !important;\r
 378         vertical-align: bottom;  \r
 379         }\r
 380 /* INTERNET EXPLORER WOES\r
 381    ======================\r
 382    \r
 383    Hover Effects\r
 384    -------------\r
 385    \r
 386    Cannot deal with :focus and so the datePicker script adds the class "dp-row-highlight" to the\r
 387    row currently being hovered over. This should enable you to add hover effects if desired.\r
 388    \r
 389    e.g. the following rule will highlight the cell borders in another colour when a row is moused over,\r
 390    it looks like crap though so I didn't include the rule within the demo:\r
 391    \r
 392 div.datePicker table tbody tr.dp-row-highlight td\r
 393         {\r
 394         border-color:#aaa;\r
 395         }\r
 396 */\r
 397 \r
 398 /* Remove the images for Internet Explorer <= v6 using the "* html" hack - (NTS: move this to it's own file) \r
 399    This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes\r
 400    which means that they are downloaded for every cell for every table - nasty shit indeed! */    \r
 401 * html div.datePicker table td\r
 402         {\r
 403         background-image:none;\r
 404         }\r
 405 * html div.datePicker table td.date-picker-unused\r
 406         {\r
 407         background:#f2f2f2;\r
 408         }        \r
 409 @media screen and (-webkit-min-device-pixel-ratio:0) {\r
 410         div.datePicker table\r
 411                 {\r
 412                 border-spacing:0.3em;\r
 413                 /* Naughty, naughty */\r
 414                 -webkit-box-shadow:0px 0px 5px #aaa;\r
 415                 -webkit-border-radius:0.8em;\r
 416                 }\r
 417         div.static-datepicker table\r
 418                 {\r
 419                 -webkit-box-shadow:0 0 0 transparent;\r
 420                 }\r
 421         div.static-datepicker:focus table\r
 422                 {\r
 423                 -webkit-box-shadow:0px 0px 5px #aaa;\r
 424                 }\r
 425         div.datePicker table td,\r
 426         div.datePicker table tbody th\r
 427                 {\r
 428                 padding:0.1em;\r
 429                 -webkit-border-radius:2px;\r
 430                 }\r
 431         div.datePicker table tbody td.date-picker-hover\r
 432                 {\r
 433                 text-shadow:0px 0px 1px #fff;\r
 434                 -webkit-box-shadow:0px 0px 1px rgb(100,130,170);\r
 435                 }\r
 436 \r
 437 }\r
 438 \r