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