|
1 /* styles for the calendar views |
|
2 * |
|
3 * :organization: Logilab |
|
4 * :copyright: 2003-2008 LOGILAB S.A. (Paris, FRANCE), all rights reserved. |
|
5 * :contact: http://www.logilab.fr/ -- mailto:contact@logilab.fr |
|
6 */ |
|
7 |
|
8 /******************************************************************************/ |
|
9 /* one month calendar */ |
|
10 /******************************************************************************/ |
|
11 |
|
12 table.omcalendar { |
|
13 background: #eeeeff; |
|
14 width: 100%; |
|
15 table-layout: fixed; |
|
16 border: 1px solid #ccc; |
|
17 border-collapse: separate; |
|
18 } |
|
19 |
|
20 table.omcalendar tr th { |
|
21 background: #e7e7e7; |
|
22 color: #2952A3; |
|
23 font-weight: bold; |
|
24 border-bottom: 1px solid #ddd; |
|
25 } |
|
26 |
|
27 table.omcalendar tr td { |
|
28 border: 1px solid #f0faff; |
|
29 padding: 0px; |
|
30 font-family: Arial, Sans-Serif; |
|
31 color: #2952A3; |
|
32 background: #fff; |
|
33 border-bottom: 1px solid #ddd; |
|
34 } |
|
35 |
|
36 table.omcalendar tr td a { |
|
37 font-family: Arial, Sans-Serif; |
|
38 color: #2952A3; |
|
39 } |
|
40 |
|
41 table.omcalendar tr td div.cellContent { |
|
42 margin: 0px; |
|
43 padding: 0px; |
|
44 } |
|
45 |
|
46 table.omcalendar tr td div.calCellTitle { |
|
47 width: 100%; |
|
48 } |
|
49 |
|
50 table.omcalendar tr td div.calCellTitle div.day { |
|
51 display: block; |
|
52 float: left; |
|
53 clear: both; |
|
54 text-align: left; |
|
55 } |
|
56 |
|
57 table.omcalendar tr td div.calCellTitle div.cmd { |
|
58 /* display: none; |
|
59 float: right; |
|
60 clear: both; */ |
|
61 text-align: right; |
|
62 } |
|
63 |
|
64 table.omcalendar tr td div.calCellTitle div.cmd a { |
|
65 display: none; |
|
66 } |
|
67 |
|
68 table.omcalendar tr td:hover div.calCellTitle div.cmd a { |
|
69 /* XXX to tweak (doesn't work! what a surprise)*/ |
|
70 display: inline; |
|
71 float: right; |
|
72 clear: none; |
|
73 text-align: right; |
|
74 } |
|
75 |
|
76 table.omcalendar tr td div.calCellTitle div.stopper { |
|
77 clear:pos; |
|
78 } |
|
79 |
|
80 table.omcalendar tr td { |
|
81 padding: 3px 0.5em 1em; |
|
82 } |
|
83 |
|
84 table.omcalendar tr td div.task { |
|
85 border-top: 1px solid #ddd; |
|
86 height: 2.5ex; |
|
87 } |
|
88 |
|
89 table.omcalendar tr td div.task div.tooltip { |
|
90 display: none; |
|
91 } |
|
92 |
|
93 table.omcalendar tr td:hover div.task:hover div.tooltip { |
|
94 font-style: normal; |
|
95 display: block; |
|
96 position: absolute; |
|
97 padding: 5px; |
|
98 color: #000; |
|
99 border: 1px solid #bbb; |
|
100 background: #ffc; |
|
101 width:200px; |
|
102 z-index: 100; |
|
103 overflow: visible; |
|
104 } |
|
105 |
|
106 |
|
107 table.omcalendar tr td.outOfRange { background-color: #ddd; } |
|
108 |
|
109 |
|
110 table.omcalendar div.col0 { background-color: #FFB117; } |
|
111 table.omcalendar div.col1 { background-color: #FFF07D; } |
|
112 table.omcalendar div.col2 { background-color: #E0FF7D; } |
|
113 table.omcalendar div.col3 { background-color: #C1FF7D; } |
|
114 table.omcalendar div.col4 { background-color: #02FF7D; } |
|
115 table.omcalendar div.col5 { background-color: #7DFF97; } |
|
116 table.omcalendar div.colb { background-color: #7DFFC6; } |
|
117 table.omcalendar div.col7 { background-color: #7DDBFF; } |
|
118 table.omcalendar div.col8 { background-color: #7DACFF; } |
|
119 table.omcalendar div.col9 { background-color: #7D8DFF; } |
|
120 table.omcalendar div.cola { background-color: #9C7DFF; } |
|
121 table.omcalendar div.col6 { background-color: #BC7DFF; } |
|
122 |
|
123 table.omcalendar div.col0:hover { background-color: #EFE117; } |
|
124 table.omcalendar div.col1:hover { background-color: #EFE07D; } |
|
125 table.omcalendar div.col2:hover { background-color: #E0DF7D; } |
|
126 table.omcalendar div.col3:hover { background-color: #C1DF7D; } |
|
127 table.omcalendar div.col4:hover { background-color: #02DF7D; } |
|
128 table.omcalendar div.col5:hover { background-color: #70EF97; } |
|
129 table.omcalendar div.colb:hover { background-color: #70EFC6; } |
|
130 table.omcalendar div.col7:hover { background-color: #70DBEF; } |
|
131 table.omcalendar div.col8:hover { background-color: #70ACEF; } |
|
132 table.omcalendar div.col9:hover { background-color: #708DEF; } |
|
133 table.omcalendar div.cola:hover { background-color: #9C70EF; } |
|
134 table.omcalendar div.col6:hover { background-color: #BC70EF; } |
|
135 |
|
136 |
|
137 /******************************************************************************/ |
|
138 /* one week calendar */ |
|
139 /******************************************************************************/ |
|
140 |
|
141 table#week { |
|
142 min-height: 600px; |
|
143 width: 100%; |
|
144 table-layout: auto; |
|
145 |
|
146 } |
|
147 |
|
148 |
|
149 table#week tr td div.hour { |
|
150 vertical-align: top; |
|
151 height: 8ex; |
|
152 width: 100%; |
|
153 position: relative; |
|
154 border-bottom: 1px dotted #ccc; |
|
155 /*padding-top: 1ex;*/ |
|
156 } |
|
157 |
|
158 table#week tr th.today { |
|
159 color: red; |
|
160 } |
|
161 |
|
162 table#week tr td div.hourline { |
|
163 height: 0px; |
|
164 width: 100%; |
|
165 position: relative; |
|
166 border-bottom: 1px dotted #ccc; |
|
167 z-index: 10; |
|
168 left: 0; |
|
169 } |
|
170 |
|
171 table#week tr td { |
|
172 vertical-align: top; |
|
173 height: 96ex; |
|
174 width: 14.2%; |
|
175 position: relative; |
|
176 } |
|
177 |
|
178 table#week tr td div.columndiv { |
|
179 position: relative; |
|
180 height: 102%; |
|
181 } |
|
182 |
|
183 table#week tr td div.columndiv div.task { |
|
184 position: absolute; |
|
185 overflow: hidden; |
|
186 } |
|
187 |
|
188 table#week tr td div.columndiv div.task div.bottommarker { |
|
189 position: absolute; |
|
190 bottom: 0; |
|
191 width: 100%; |
|
192 left: 0; |
|
193 z-index: 5; |
|
194 background: transparent; |
|
195 } |
|
196 table#week tr td div.columndiv div.task div.bottommarkerline { |
|
197 background: red; |
|
198 z-index: 5; |
|
199 padding: 0; |
|
200 } |
|
201 table#week tr td div.columndiv div.task:hover { |
|
202 overflow: visible; |
|
203 } |
|
204 |
|
205 table#week tr th.transparent { |
|
206 background: transparent; |
|
207 border: none; |
|
208 } |
|
209 |
|
210 |
|
211 /******************************************************************************/ |
|
212 /* XXX old calendar views, to remove once old_calendar.py is removed */ |
|
213 /******************************************************************************/ |
|
214 |
|
215 table.calendarPageHeader, |
|
216 table.smallCalendars, |
|
217 table.bigCalendars { |
|
218 width: 90%; |
|
219 border-collapse:separate; |
|
220 margin: 0px 1em; |
|
221 } |
|
222 |
|
223 |
|
224 table.smallCalendars td.calendar{ |
|
225 width: 33%; |
|
226 } |
|
227 |
|
228 td.calendar table { |
|
229 margin: 1em 2em; |
|
230 width: 80%; |
|
231 } |
|
232 |
|
233 .calendar th.month { |
|
234 font-weight:bold; |
|
235 padding-bottom:0.2em; |
|
236 background: #cfceb7; |
|
237 } |
|
238 |
|
239 .calendar th.month a{ |
|
240 font: bold 110% Georgia, Verdana; |
|
241 color : #fff; |
|
242 } |
|
243 |
|
244 table.weekCalendar{ |
|
245 } |
|
246 |
|
247 table.weekCalendar th{ |
|
248 text-align : left; |
|
249 padding: 0.6em 0.4em; |
|
250 } |
|
251 |
|
252 table.weekCalendar td{ |
|
253 padding: 0.2em 0.4em } |
|
254 |
|
255 .semesterCalendar .amCell, .semesterCalendar .amCellEmpty{ |
|
256 margin-bottom:0; |
|
257 border-style: none; |
|
258 border-right:thin dotted; |
|
259 } |
|
260 |
|
261 table.semesterCalendar th{ |
|
262 padding: 0.6em 0.4em; |
|
263 } |
|
264 |
|
265 .semesterCalendar .pmCell, .semesterCalendar .pmCellEmpty{ |
|
266 border: none; |
|
267 border-left:1px dotted #ccc; |
|
268 } |
|
269 |
|
270 .weeknum{ |
|
271 width:10% |
|
272 } |
|
273 |
|
274 .cell, .cellEmpty{ |
|
275 border:1px solid #ccc; |
|
276 padding: 3px 0.5em 2em; |
|
277 width:10%; |
|
278 } |
|
279 |
|
280 .cellDay{ |
|
281 border:1px solid #ccc; |
|
282 border-bottom : none; |
|
283 padding: 3px 0.5em 3px; |
|
284 width:10%;} |
|
285 |
|
286 .amCell, .pmCell, |
|
287 .amCellEmpty, .pmCellEmpty{ |
|
288 padding: 3px 0.5em 3px; |
|
289 border:1px solid #ccc; |
|
290 border-top:none; |
|
291 width:10%; |
|
292 } |
|
293 |
|
294 .amCell, .amCellEmpty{ |
|
295 border-bottom:none; |
|
296 } |
|
297 |
|
298 .pmCell, .pmCellEmpty{ |
|
299 border-top:none; |
|
300 } |
|
301 |
|
302 .cellTitle { |
|
303 font: bold 100% Arial, sans-serif; |
|
304 } |
|
305 |
|
306 .weekTitle { |
|
307 padding:1em; |
|
308 } |
|
309 |
|
310 .weekCell, .weekEmptyCell { |
|
311 border-top: 0px; |
|
312 } |
|
313 |
|
314 .cell span.cellTitle, |
|
315 .cellEmpty span.cellTitle { |
|
316 background-color:transparent; |
|
317 } |
|
318 |
|
319 div.cellContent{ |
|
320 padding: 0.1em; |
|
321 font-size:90%; |
|
322 } |
|
323 |
|
324 .weeknum, th.weekday{ |
|
325 padding:0.2em 0.4em; |
|
326 color : #666; |
|
327 font-size:90%;} |
|
328 |
|
329 div.event{ |
|
330 padding : 0.1em 0px; |
|
331 margin:0.2em 0px; |
|
332 background: #eee; |
|
333 } |
|
334 |
|
335 td.prev { |
|
336 text-align: left; |
|
337 } |
|
338 |
|
339 td.next { |
|
340 text-align: right; |
|
341 } |