plekit/datepicker/datepicker.css

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