| @@ -8,7 +8,7 img.calendar-trigger { | |||||
| 8 |
|
8 | |||
| 9 | div.calendar { position: relative; z-index: 30;} |
|
9 | div.calendar { position: relative; z-index: 30;} | |
| 10 |
|
10 | |||
| 11 | .calendar, .calendar table { |
|
11 | div.calendar, div.calendar table { | |
| 12 | border: 1px solid #556; |
|
12 | border: 1px solid #556; | |
| 13 | font-size: 11px; |
|
13 | font-size: 11px; | |
| 14 | color: #000; |
|
14 | color: #000; | |
| @@ -19,16 +19,16 div.calendar { position: relative; z-index: 30;} | |||||
| 19 |
|
19 | |||
| 20 | /* Header part -- contains navigation buttons and day names. */ |
|
20 | /* Header part -- contains navigation buttons and day names. */ | |
| 21 |
|
21 | |||
| 22 | .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ |
|
22 | div.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ | |
| 23 | text-align: center; /* They are the navigation buttons */ |
|
23 | text-align: center; /* They are the navigation buttons */ | |
| 24 | padding: 2px; /* Make the buttons seem like they're pressing */ |
|
24 | padding: 2px; /* Make the buttons seem like they're pressing */ | |
| 25 | } |
|
25 | } | |
| 26 |
|
26 | |||
| 27 | .calendar .nav { |
|
27 | div.calendar .nav { | |
| 28 | background: #467aa7; |
|
28 | background: #467aa7; | |
| 29 | } |
|
29 | } | |
| 30 |
|
30 | |||
| 31 | .calendar thead .title { /* This holds the current "month, year" */ |
|
31 | div.calendar thead .title { /* This holds the current "month, year" */ | |
| 32 | font-weight: bold; /* Pressing it will take you to the current date */ |
|
32 | font-weight: bold; /* Pressing it will take you to the current date */ | |
| 33 | text-align: center; |
|
33 | text-align: center; | |
| 34 | background: #fff; |
|
34 | background: #fff; | |
| @@ -36,79 +36,79 div.calendar { position: relative; z-index: 30;} | |||||
| 36 | padding: 2px; |
|
36 | padding: 2px; | |
| 37 | } |
|
37 | } | |
| 38 |
|
38 | |||
| 39 | .calendar thead .headrow { /* Row <TR> containing navigation buttons */ |
|
39 | div.calendar thead .headrow { /* Row <TR> containing navigation buttons */ | |
| 40 | background: #467aa7; |
|
40 | background: #467aa7; | |
| 41 | color: #fff; |
|
41 | color: #fff; | |
| 42 | } |
|
42 | } | |
| 43 |
|
43 | |||
| 44 | .calendar thead .daynames { /* Row <TR> containing the day names */ |
|
44 | div.calendar thead .daynames { /* Row <TR> containing the day names */ | |
| 45 | background: #bdf; |
|
45 | background: #bdf; | |
| 46 | } |
|
46 | } | |
| 47 |
|
47 | |||
| 48 | .calendar thead .name { /* Cells <TD> containing the day names */ |
|
48 | div.calendar thead .name { /* Cells <TD> containing the day names */ | |
| 49 | border-bottom: 1px solid #556; |
|
49 | border-bottom: 1px solid #556; | |
| 50 | padding: 2px; |
|
50 | padding: 2px; | |
| 51 | text-align: center; |
|
51 | text-align: center; | |
| 52 | color: #000; |
|
52 | color: #000; | |
| 53 | } |
|
53 | } | |
| 54 |
|
54 | |||
| 55 | .calendar thead .weekend { /* How a weekend day name shows in header */ |
|
55 | div.calendar thead .weekend { /* How a weekend day name shows in header */ | |
| 56 | color: #a66; |
|
56 | color: #a66; | |
| 57 | } |
|
57 | } | |
| 58 |
|
58 | |||
| 59 | .calendar thead .hilite { /* How do the buttons in header appear when hover */ |
|
59 | div.calendar thead .hilite { /* How do the buttons in header appear when hover */ | |
| 60 | background-color: #80b0da; |
|
60 | background-color: #80b0da; | |
| 61 | color: #000; |
|
61 | color: #000; | |
| 62 | padding: 1px; |
|
62 | padding: 1px; | |
| 63 | } |
|
63 | } | |
| 64 |
|
64 | |||
| 65 | .calendar thead .active { /* Active (pressed) buttons in header */ |
|
65 | div.calendar thead .active { /* Active (pressed) buttons in header */ | |
| 66 | background-color: #77c; |
|
66 | background-color: #77c; | |
| 67 | padding: 2px 0px 0px 2px; |
|
67 | padding: 2px 0px 0px 2px; | |
| 68 | } |
|
68 | } | |
| 69 |
|
69 | |||
| 70 | /* The body part -- contains all the days in month. */ |
|
70 | /* The body part -- contains all the days in month. */ | |
| 71 |
|
71 | |||
| 72 | .calendar tbody .day { /* Cells <TD> containing month days dates */ |
|
72 | div.calendar tbody .day { /* Cells <TD> containing month days dates */ | |
| 73 | width: 2em; |
|
73 | width: 2em; | |
| 74 | color: #456; |
|
74 | color: #456; | |
| 75 | text-align: right; |
|
75 | text-align: right; | |
| 76 | padding: 2px 4px 2px 2px; |
|
76 | padding: 2px 4px 2px 2px; | |
| 77 | } |
|
77 | } | |
| 78 | .calendar tbody .day.othermonth { |
|
78 | div.calendar tbody .day.othermonth { | |
| 79 | font-size: 80%; |
|
79 | font-size: 80%; | |
| 80 | color: #bbb; |
|
80 | color: #bbb; | |
| 81 | } |
|
81 | } | |
| 82 | .calendar tbody .day.othermonth.oweekend { |
|
82 | div.calendar tbody .day.othermonth.oweekend { | |
| 83 | color: #fbb; |
|
83 | color: #fbb; | |
| 84 | } |
|
84 | } | |
| 85 |
|
85 | |||
| 86 | .calendar table .wn { |
|
86 | div.calendar table .wn { | |
| 87 | padding: 2px 3px 2px 2px; |
|
87 | padding: 2px 3px 2px 2px; | |
| 88 | border-right: 1px solid #000; |
|
88 | border-right: 1px solid #000; | |
| 89 | background: #bdf; |
|
89 | background: #bdf; | |
| 90 | } |
|
90 | } | |
| 91 |
|
91 | |||
| 92 | .calendar tbody .rowhilite td { |
|
92 | div.calendar tbody .rowhilite td { | |
| 93 | background: #def; |
|
93 | background: #def; | |
| 94 | } |
|
94 | } | |
| 95 |
|
95 | |||
| 96 | .calendar tbody .rowhilite td.wn { |
|
96 | div.calendar tbody .rowhilite td.wn { | |
| 97 | background: #80b0da; |
|
97 | background: #80b0da; | |
| 98 | } |
|
98 | } | |
| 99 |
|
99 | |||
| 100 | .calendar tbody td.hilite { /* Hovered cells <TD> */ |
|
100 | div.calendar tbody td.hilite { /* Hovered cells <TD> */ | |
| 101 | background: #80b0da; |
|
101 | background: #80b0da; | |
| 102 | padding: 1px 3px 1px 1px; |
|
102 | padding: 1px 3px 1px 1px; | |
| 103 | border: 1px solid #bbb; |
|
103 | border: 1px solid #bbb; | |
| 104 | } |
|
104 | } | |
| 105 |
|
105 | |||
| 106 | .calendar tbody td.active { /* Active (pressed) cells <TD> */ |
|
106 | div.calendar tbody td.active { /* Active (pressed) cells <TD> */ | |
| 107 | background: #cde; |
|
107 | background: #cde; | |
| 108 | padding: 2px 2px 0px 2px; |
|
108 | padding: 2px 2px 0px 2px; | |
| 109 | } |
|
109 | } | |
| 110 |
|
110 | |||
| 111 | .calendar tbody td.selected { /* Cell showing today date */ |
|
111 | div.calendar tbody td.selected { /* Cell showing today date */ | |
| 112 | font-weight: bold; |
|
112 | font-weight: bold; | |
| 113 | border: 1px solid #000; |
|
113 | border: 1px solid #000; | |
| 114 | padding: 1px 3px 1px 1px; |
|
114 | padding: 1px 3px 1px 1px; | |
| @@ -116,55 +116,55 div.calendar { position: relative; z-index: 30;} | |||||
| 116 | color: #000; |
|
116 | color: #000; | |
| 117 | } |
|
117 | } | |
| 118 |
|
118 | |||
| 119 | .calendar tbody td.weekend { /* Cells showing weekend days */ |
|
119 | div.calendar tbody td.weekend { /* Cells showing weekend days */ | |
| 120 | color: #a66; |
|
120 | color: #a66; | |
| 121 | } |
|
121 | } | |
| 122 |
|
122 | |||
| 123 | .calendar tbody td.today { /* Cell showing selected date */ |
|
123 | div.calendar tbody td.today { /* Cell showing selected date */ | |
| 124 | font-weight: bold; |
|
124 | font-weight: bold; | |
| 125 | color: #f00; |
|
125 | color: #f00; | |
| 126 | } |
|
126 | } | |
| 127 |
|
127 | |||
| 128 | .calendar tbody .disabled { color: #999; } |
|
128 | div.calendar tbody .disabled { color: #999; } | |
| 129 |
|
129 | |||
| 130 | .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ |
|
130 | div.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ | |
| 131 | visibility: hidden; |
|
131 | visibility: hidden; | |
| 132 | } |
|
132 | } | |
| 133 |
|
133 | |||
| 134 | .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ |
|
134 | div.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ | |
| 135 | display: none; |
|
135 | display: none; | |
| 136 | } |
|
136 | } | |
| 137 |
|
137 | |||
| 138 | /* The footer part -- status bar and "Close" button */ |
|
138 | /* The footer part -- status bar and "Close" button */ | |
| 139 |
|
139 | |||
| 140 | .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ |
|
140 | div.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ | |
| 141 | text-align: center; |
|
141 | text-align: center; | |
| 142 | background: #556; |
|
142 | background: #556; | |
| 143 | color: #fff; |
|
143 | color: #fff; | |
| 144 | } |
|
144 | } | |
| 145 |
|
145 | |||
| 146 | .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */ |
|
146 | div.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */ | |
| 147 | background: #fff; |
|
147 | background: #fff; | |
| 148 | color: #445; |
|
148 | color: #445; | |
| 149 | border-top: 1px solid #556; |
|
149 | border-top: 1px solid #556; | |
| 150 | padding: 1px; |
|
150 | padding: 1px; | |
| 151 | } |
|
151 | } | |
| 152 |
|
152 | |||
| 153 | .calendar tfoot .hilite { /* Hover style for buttons in footer */ |
|
153 | div.calendar tfoot .hilite { /* Hover style for buttons in footer */ | |
| 154 | background: #aaf; |
|
154 | background: #aaf; | |
| 155 | border: 1px solid #04f; |
|
155 | border: 1px solid #04f; | |
| 156 | color: #000; |
|
156 | color: #000; | |
| 157 | padding: 1px; |
|
157 | padding: 1px; | |
| 158 | } |
|
158 | } | |
| 159 |
|
159 | |||
| 160 | .calendar tfoot .active { /* Active (pressed) style for buttons in footer */ |
|
160 | div.calendar tfoot .active { /* Active (pressed) style for buttons in footer */ | |
| 161 | background: #77c; |
|
161 | background: #77c; | |
| 162 | padding: 2px 0px 0px 2px; |
|
162 | padding: 2px 0px 0px 2px; | |
| 163 | } |
|
163 | } | |
| 164 |
|
164 | |||
| 165 | /* Combo boxes (menus that display months/years for direct selection) */ |
|
165 | /* Combo boxes (menus that display months/years for direct selection) */ | |
| 166 |
|
166 | |||
| 167 | .calendar .combo { |
|
167 | div.calendar .combo { | |
| 168 | position: absolute; |
|
168 | position: absolute; | |
| 169 | display: none; |
|
169 | display: none; | |
| 170 | top: 0px; |
|
170 | top: 0px; | |
| @@ -178,59 +178,59 div.calendar { position: relative; z-index: 30;} | |||||
| 178 | z-index: 100; |
|
178 | z-index: 100; | |
| 179 | } |
|
179 | } | |
| 180 |
|
180 | |||
| 181 | .calendar .combo .label, |
|
181 | div.calendar .combo .label, | |
| 182 | .calendar .combo .label-IEfix { |
|
182 | div.calendar .combo .label-IEfix { | |
| 183 | text-align: center; |
|
183 | text-align: center; | |
| 184 | padding: 1px; |
|
184 | padding: 1px; | |
| 185 | } |
|
185 | } | |
| 186 |
|
186 | |||
| 187 | .calendar .combo .label-IEfix { |
|
187 | div.calendar .combo .label-IEfix { | |
| 188 | width: 4em; |
|
188 | width: 4em; | |
| 189 | } |
|
189 | } | |
| 190 |
|
190 | |||
| 191 | .calendar .combo .hilite { |
|
191 | div.calendar .combo .hilite { | |
| 192 | background: #acf; |
|
192 | background: #acf; | |
| 193 | } |
|
193 | } | |
| 194 |
|
194 | |||
| 195 | .calendar .combo .active { |
|
195 | div.calendar .combo .active { | |
| 196 | border-top: 1px solid #46a; |
|
196 | border-top: 1px solid #46a; | |
| 197 | border-bottom: 1px solid #46a; |
|
197 | border-bottom: 1px solid #46a; | |
| 198 | background: #eef; |
|
198 | background: #eef; | |
| 199 | font-weight: bold; |
|
199 | font-weight: bold; | |
| 200 | } |
|
200 | } | |
| 201 |
|
201 | |||
| 202 | .calendar td.time { |
|
202 | div.calendar td.time { | |
| 203 | border-top: 1px solid #000; |
|
203 | border-top: 1px solid #000; | |
| 204 | padding: 1px 0px; |
|
204 | padding: 1px 0px; | |
| 205 | text-align: center; |
|
205 | text-align: center; | |
| 206 | background-color: #f4f0e8; |
|
206 | background-color: #f4f0e8; | |
| 207 | } |
|
207 | } | |
| 208 |
|
208 | |||
| 209 | .calendar td.time .hour, |
|
209 | div.calendar td.time .hour, | |
| 210 | .calendar td.time .minute, |
|
210 | div.calendar td.time .minute, | |
| 211 | .calendar td.time .ampm { |
|
211 | div.calendar td.time .ampm { | |
| 212 | padding: 0px 3px 0px 4px; |
|
212 | padding: 0px 3px 0px 4px; | |
| 213 | border: 1px solid #889; |
|
213 | border: 1px solid #889; | |
| 214 | font-weight: bold; |
|
214 | font-weight: bold; | |
| 215 | background-color: #fff; |
|
215 | background-color: #fff; | |
| 216 | } |
|
216 | } | |
| 217 |
|
217 | |||
| 218 | .calendar td.time .ampm { |
|
218 | div.calendar td.time .ampm { | |
| 219 | text-align: center; |
|
219 | text-align: center; | |
| 220 | } |
|
220 | } | |
| 221 |
|
221 | |||
| 222 | .calendar td.time .colon { |
|
222 | div.calendar td.time .colon { | |
| 223 | padding: 0px 2px 0px 3px; |
|
223 | padding: 0px 2px 0px 3px; | |
| 224 | font-weight: bold; |
|
224 | font-weight: bold; | |
| 225 | } |
|
225 | } | |
| 226 |
|
226 | |||
| 227 | .calendar td.time span.hilite { |
|
227 | div.calendar td.time span.hilite { | |
| 228 | border-color: #000; |
|
228 | border-color: #000; | |
| 229 | background-color: #667; |
|
229 | background-color: #667; | |
| 230 | color: #fff; |
|
230 | color: #fff; | |
| 231 | } |
|
231 | } | |
| 232 |
|
232 | |||
| 233 | .calendar td.time span.active { |
|
233 | div.calendar td.time span.active { | |
| 234 | border-color: #f00; |
|
234 | border-color: #f00; | |
| 235 | background-color: #000; |
|
235 | background-color: #000; | |
| 236 | color: #0f0; |
|
236 | color: #0f0; | |
General Comments 0
You need to be logged in to leave comments.
Login now