| @@ -1,237 +1,237 | |||
|
|
1 | 1 | /* The main calendar widget. DIV containing a table. */ |
|
|
2 | 2 | |
|
|
3 | 3 | img.calendar-trigger { |
|
|
4 | 4 | cursor: pointer; |
|
|
5 | 5 | vertical-align: middle; |
|
|
6 | 6 | margin-left: 4px; |
|
|
7 | 7 | } |
|
|
8 | 8 | |
|
|
9 | 9 | div.calendar { position: relative; z-index: 30;} |
|
|
10 | 10 | |
|
|
11 | .calendar, .calendar table { | |
|
|
11 | div.calendar, div.calendar table { | |
|
|
12 | 12 | border: 1px solid #556; |
|
|
13 | 13 | font-size: 11px; |
|
|
14 | 14 | color: #000; |
|
|
15 | 15 | cursor: default; |
|
|
16 | 16 | background: #fafbfc; |
|
|
17 | 17 | font-family: tahoma,verdana,sans-serif; |
|
|
18 | 18 | } |
|
|
19 | 19 | |
|
|
20 | 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 | 23 | text-align: center; /* They are the navigation buttons */ |
|
|
24 | 24 | padding: 2px; /* Make the buttons seem like they're pressing */ |
|
|
25 | 25 | } |
|
|
26 | 26 | |
|
|
27 | .calendar .nav { | |
|
|
27 | div.calendar .nav { | |
|
|
28 | 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 | 32 | font-weight: bold; /* Pressing it will take you to the current date */ |
|
|
33 | 33 | text-align: center; |
|
|
34 | 34 | background: #fff; |
|
|
35 | 35 | color: #000; |
|
|
36 | 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 | 40 | background: #467aa7; |
|
|
41 | 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 | 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 | 49 | border-bottom: 1px solid #556; |
|
|
50 | 50 | padding: 2px; |
|
|
51 | 51 | text-align: center; |
|
|
52 | 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 | 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 | 60 | background-color: #80b0da; |
|
|
61 | 61 | color: #000; |
|
|
62 | 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 | 66 | background-color: #77c; |
|
|
67 | 67 | padding: 2px 0px 0px 2px; |
|
|
68 | 68 | } |
|
|
69 | 69 | |
|
|
70 | 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 | 73 | width: 2em; |
|
|
74 | 74 | color: #456; |
|
|
75 | 75 | text-align: right; |
|
|
76 | 76 | padding: 2px 4px 2px 2px; |
|
|
77 | 77 | } |
|
|
78 | .calendar tbody .day.othermonth { | |
|
|
78 | div.calendar tbody .day.othermonth { | |
|
|
79 | 79 | font-size: 80%; |
|
|
80 | 80 | color: #bbb; |
|
|
81 | 81 | } |
|
|
82 | .calendar tbody .day.othermonth.oweekend { | |
|
|
82 | div.calendar tbody .day.othermonth.oweekend { | |
|
|
83 | 83 | color: #fbb; |
|
|
84 | 84 | } |
|
|
85 | 85 | |
|
|
86 | .calendar table .wn { | |
|
|
86 | div.calendar table .wn { | |
|
|
87 | 87 | padding: 2px 3px 2px 2px; |
|
|
88 | 88 | border-right: 1px solid #000; |
|
|
89 | 89 | background: #bdf; |
|
|
90 | 90 | } |
|
|
91 | 91 | |
|
|
92 | .calendar tbody .rowhilite td { | |
|
|
92 | div.calendar tbody .rowhilite td { | |
|
|
93 | 93 | background: #def; |
|
|
94 | 94 | } |
|
|
95 | 95 | |
|
|
96 | .calendar tbody .rowhilite td.wn { | |
|
|
96 | div.calendar tbody .rowhilite td.wn { | |
|
|
97 | 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 | 101 | background: #80b0da; |
|
|
102 | 102 | padding: 1px 3px 1px 1px; |
|
|
103 | 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 | 107 | background: #cde; |
|
|
108 | 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 | 112 | font-weight: bold; |
|
|
113 | 113 | border: 1px solid #000; |
|
|
114 | 114 | padding: 1px 3px 1px 1px; |
|
|
115 | 115 | background: #fff; |
|
|
116 | 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 | 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 | 124 | font-weight: bold; |
|
|
125 | 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 | 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 | 135 | display: none; |
|
|
136 | 136 | } |
|
|
137 | 137 | |
|
|
138 | 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 | 141 | text-align: center; |
|
|
142 | 142 | background: #556; |
|
|
143 | 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 | 147 | background: #fff; |
|
|
148 | 148 | color: #445; |
|
|
149 | 149 | border-top: 1px solid #556; |
|
|
150 | 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 | 154 | background: #aaf; |
|
|
155 | 155 | border: 1px solid #04f; |
|
|
156 | 156 | color: #000; |
|
|
157 | 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 | 161 | background: #77c; |
|
|
162 | 162 | padding: 2px 0px 0px 2px; |
|
|
163 | 163 | } |
|
|
164 | 164 | |
|
|
165 | 165 | /* Combo boxes (menus that display months/years for direct selection) */ |
|
|
166 | 166 | |
|
|
167 | .calendar .combo { | |
|
|
167 | div.calendar .combo { | |
|
|
168 | 168 | position: absolute; |
|
|
169 | 169 | display: none; |
|
|
170 | 170 | top: 0px; |
|
|
171 | 171 | left: 0px; |
|
|
172 | 172 | width: 4em; |
|
|
173 | 173 | cursor: default; |
|
|
174 | 174 | border: 1px solid #655; |
|
|
175 | 175 | background: #def; |
|
|
176 | 176 | color: #000; |
|
|
177 | 177 | font-size: 90%; |
|
|
178 | 178 | z-index: 100; |
|
|
179 | 179 | } |
|
|
180 | 180 | |
|
|
181 | .calendar .combo .label, | |
|
|
182 | .calendar .combo .label-IEfix { | |
|
|
181 | div.calendar .combo .label, | |
|
|
182 | div.calendar .combo .label-IEfix { | |
|
|
183 | 183 | text-align: center; |
|
|
184 | 184 | padding: 1px; |
|
|
185 | 185 | } |
|
|
186 | 186 | |
|
|
187 | .calendar .combo .label-IEfix { | |
|
|
187 | div.calendar .combo .label-IEfix { | |
|
|
188 | 188 | width: 4em; |
|
|
189 | 189 | } |
|
|
190 | 190 | |
|
|
191 | .calendar .combo .hilite { | |
|
|
191 | div.calendar .combo .hilite { | |
|
|
192 | 192 | background: #acf; |
|
|
193 | 193 | } |
|
|
194 | 194 | |
|
|
195 | .calendar .combo .active { | |
|
|
195 | div.calendar .combo .active { | |
|
|
196 | 196 | border-top: 1px solid #46a; |
|
|
197 | 197 | border-bottom: 1px solid #46a; |
|
|
198 | 198 | background: #eef; |
|
|
199 | 199 | font-weight: bold; |
|
|
200 | 200 | } |
|
|
201 | 201 | |
|
|
202 | .calendar td.time { | |
|
|
202 | div.calendar td.time { | |
|
|
203 | 203 | border-top: 1px solid #000; |
|
|
204 | 204 | padding: 1px 0px; |
|
|
205 | 205 | text-align: center; |
|
|
206 | 206 | background-color: #f4f0e8; |
|
|
207 | 207 | } |
|
|
208 | 208 | |
|
|
209 | .calendar td.time .hour, | |
|
|
210 | .calendar td.time .minute, | |
|
|
211 | .calendar td.time .ampm { | |
|
|
209 | div.calendar td.time .hour, | |
|
|
210 | div.calendar td.time .minute, | |
|
|
211 | div.calendar td.time .ampm { | |
|
|
212 | 212 | padding: 0px 3px 0px 4px; |
|
|
213 | 213 | border: 1px solid #889; |
|
|
214 | 214 | font-weight: bold; |
|
|
215 | 215 | background-color: #fff; |
|
|
216 | 216 | } |
|
|
217 | 217 | |
|
|
218 | .calendar td.time .ampm { | |
|
|
218 | div.calendar td.time .ampm { | |
|
|
219 | 219 | text-align: center; |
|
|
220 | 220 | } |
|
|
221 | 221 | |
|
|
222 | .calendar td.time .colon { | |
|
|
222 | div.calendar td.time .colon { | |
|
|
223 | 223 | padding: 0px 2px 0px 3px; |
|
|
224 | 224 | font-weight: bold; |
|
|
225 | 225 | } |
|
|
226 | 226 | |
|
|
227 | .calendar td.time span.hilite { | |
|
|
227 | div.calendar td.time span.hilite { | |
|
|
228 | 228 | border-color: #000; |
|
|
229 | 229 | background-color: #667; |
|
|
230 | 230 | color: #fff; |
|
|
231 | 231 | } |
|
|
232 | 232 | |
|
|
233 | .calendar td.time span.active { | |
|
|
233 | div.calendar td.time span.active { | |
|
|
234 | 234 | border-color: #f00; |
|
|
235 | 235 | background-color: #000; |
|
|
236 | 236 | color: #0f0; |
|
|
237 | 237 | } |
General Comments 0
You need to be logged in to leave comments.
Login now