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 }