css/dateinput.css

   1 /* taken from: http://flowplayer.org/tools/dateinput/index.html#skinning */
   2
   3 /* the input field */
   4 .date {
   5         border:1px solid #ccc;
   6         font-size:18px;
   7         padding:4px;
   8         text-align:center;
   9         width:194px;
  10
  11         -moz-box-shadow:0 0 10px #eee inset;
  12         -webkit-box-shadow:0 0 10px #eee inset;
  13 }
  14
  15 /* calendar root element */
  16 #calroot {
  17         /* place on top of other elements. set a higher value if nessessary */
  18         z-index:10000;
  19
  20         margin-top:-1px;
  21         width:198px;
  22         padding:2px;
  23         background-color:#fff;
  24         font-size:11px;
  25         border:1px solid #ccc;
  26
  27         -moz-border-radius:5px;
  28         -webkit-border-radius:5px;
  29
  30         -moz-box-shadow: 0 0 15px #666;
  31         -webkit-box-shadow: 0 0 15px #666;
  32 }
  33
  34 /* head. contains title, prev/next month controls and possible month/year selectors */
  35 #calhead {
  36         padding:2px 0;
  37         height:22px;
  38 }
  39
  40 #caltitle {
  41         font-size:14px;
  42         color:#0150D1;
  43         float:left;
  44         text-align:center;
  45         width:155px;
  46         line-height:20px;
  47         text-shadow:0 1px 0 #ddd;
  48 }
  49
  50 #calnext, #calprev {
  51         display:block;
  52         width:20px;
  53         height:20px;
  54         background:transparent url(../pics/prev.png) no-repeat scroll center center;
  55         float:left;
  56         cursor:pointer;
  57 }
  58
  59 #calnext {
  60         background-image:url(../pics/next.png);
  61         float:right;
  62 }
  63
  64 #calprev.caldisabled, #calnext.caldisabled {
  65         visibility:hidden;
  66 }
  67
  68 /* year/month selector */
  69 #caltitle select {
  70         font-size:10px;
  71 }
  72
  73 /* names of the days */
  74 #caldays {
  75         height:14px;
  76         border-bottom:1px solid #ddd;
  77 }
  78
  79 #caldays span {
  80         display:block;
  81         float:left;
  82         width:28px;
  83         text-align:center;
  84 }
  85
  86 /* container for weeks */
  87 #calweeks {
  88         background-color:#fff;
  89         margin-top:4px;
  90 }
  91
  92 /* single week */
  93 .calweek {
  94         clear:left;
  95         height:22px;
  96 }
  97
  98 /* single day */
  99 .calweek a {
 100         display:block;
 101         float:left;
 102         width:27px;
 103         height:20px;
 104         text-decoration:none;
 105         font-size:11px;
 106         margin-left:1px;
 107         text-align:center;
 108         line-height:20px;
 109         color:#666;
 110         -moz-border-radius:3px;
 111         -webkit-border-radius:3px;
 112 }
 113
 114 /* different states */
 115 .calweek a:hover, .calfocus {
 116         background-color:#ddd;
 117 }
 118
 119 /* sunday */
 120 a.calsun {
 121         color:red;
 122 }
 123
 124 /* offmonth day */
 125 a.caloff {
 126         color:#ccc;
 127 }
 128
 129 a.caloff:hover {
 130         background-color:rgb(245, 245, 250);
 131 }
 132
 133
 134 /* unselecteble day */
 135 a.caldisabled {
 136         background-color:#efefef !important;
 137         color:#ccc      !important;
 138         cursor:default;
 139 }
 140
 141 /* current day */
 142 #calcurrent {
 143         background-color:#498CE2;
 144         color:#fff;
 145 }
 146
 147 /* today */
 148 #caltoday {
 149         background-color:#333;
 150         color:#fff;
 151 }