Mercurial > hg > soundsoftware-site
comparison public/stylesheets/calendar.css @ 14:1d32c0a0efbf
* Update to SVN trunk (revisions 3892-4040)
author | Chris Cannam |
---|---|
date | Wed, 25 Aug 2010 16:30:24 +0100 |
parents | 513646585e45 |
children |
comparison
equal
deleted
inserted
replaced
4:9cc62779c13a | 14:1d32c0a0efbf |
---|---|
6 margin-left: 4px; | 6 margin-left: 4px; |
7 } | 7 } |
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; |
15 cursor: default; | 15 cursor: default; |
16 background: #fafbfc; | 16 background: #fafbfc; |
17 font-family: tahoma,verdana,sans-serif; | 17 font-family: tahoma,verdana,sans-serif; |
18 } | 18 } |
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; |
35 color: #000; | 35 color: #000; |
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; |
115 background: #fff; | 115 background: #fff; |
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; |
171 left: 0px; | 171 left: 0px; |
172 width: 4em; | 172 width: 4em; |
176 color: #000; | 176 color: #000; |
177 font-size: 90%; | 177 font-size: 90%; |
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; |
237 } | 237 } |