|
1 /* styles for the calendar views |
|
2 * |
|
3 * :organization: Logilab |
|
4 * :copyright: 2003-2010 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 { |
|
77 padding: 3px 0.5em 1em; |
|
78 } |
|
79 |
|
80 table.omcalendar tr td div.task { |
|
81 border-top: 1px solid #ddd; |
|
82 height: 2.5ex; |
|
83 } |
|
84 |
|
85 table.omcalendar tr td div.task div.tooltip { |
|
86 display: none; |
|
87 } |
|
88 |
|
89 table.omcalendar tr td:hover div.task:hover div.tooltip { |
|
90 font-style: normal; |
|
91 display: block; |
|
92 position: absolute; |
|
93 padding: 5px; |
|
94 color: #000; |
|
95 border: 1px solid #bbb; |
|
96 background: #ffc; |
|
97 width:200px; |
|
98 z-index: 100; |
|
99 overflow: visible; |
|
100 } |
|
101 |
|
102 |
|
103 table.omcalendar tr td.outOfRange { background-color: #ddd; } |
|
104 table.omcalendar tr td.today { border: 2px solid #2952A3; } |
|
105 |
|
106 |
|
107 table.omcalendar div.col0 { background-color: #FFB117; } |
|
108 table.omcalendar div.col1 { background-color: #FFF07D; } |
|
109 table.omcalendar div.col2 { background-color: #E0FF7D; } |
|
110 table.omcalendar div.col3 { background-color: #C1FF7D; } |
|
111 table.omcalendar div.col4 { background-color: #02FF7D; } |
|
112 table.omcalendar div.col5 { background-color: #7DFF97; } |
|
113 table.omcalendar div.colb { background-color: #7DFFC6; } |
|
114 table.omcalendar div.col7 { background-color: #7DDBFF; } |
|
115 table.omcalendar div.col8 { background-color: #7DACFF; } |
|
116 table.omcalendar div.col9 { background-color: #7D8DFF; } |
|
117 table.omcalendar div.cola { background-color: #9C7DFF; } |
|
118 table.omcalendar div.col6 { background-color: #BC7DFF; } |
|
119 |
|
120 table.omcalendar div.col0:hover { background-color: #EFE117; } |
|
121 table.omcalendar div.col1:hover { background-color: #EFE07D; } |
|
122 table.omcalendar div.col2:hover { background-color: #E0DF7D; } |
|
123 table.omcalendar div.col3:hover { background-color: #C1DF7D; } |
|
124 table.omcalendar div.col4:hover { background-color: #02DF7D; } |
|
125 table.omcalendar div.col5:hover { background-color: #70EF97; } |
|
126 table.omcalendar div.colb:hover { background-color: #70EFC6; } |
|
127 table.omcalendar div.col7:hover { background-color: #70DBEF; } |
|
128 table.omcalendar div.col8:hover { background-color: #70ACEF; } |
|
129 table.omcalendar div.col9:hover { background-color: #708DEF; } |
|
130 table.omcalendar div.cola:hover { background-color: #9C70EF; } |
|
131 table.omcalendar div.col6:hover { background-color: #BC70EF; } |
|
132 |
|
133 |
|
134 /******************************************************************************/ |
|
135 /* one week calendar */ |
|
136 /******************************************************************************/ |
|
137 |
|
138 table#week { |
|
139 min-height: 600px; |
|
140 width: 100%; |
|
141 table-layout: auto; |
|
142 |
|
143 } |
|
144 |
|
145 |
|
146 table#week tr td div.hour { |
|
147 vertical-align: top; |
|
148 height: 8ex; |
|
149 width: 100%; |
|
150 position: relative; |
|
151 border-bottom: 1px dotted #ccc; |
|
152 /*padding-top: 1ex;*/ |
|
153 } |
|
154 |
|
155 table#week tr th.today { |
|
156 color: red; |
|
157 } |
|
158 |
|
159 table#week tr td div.hourline { |
|
160 height: 0px; |
|
161 width: 100%; |
|
162 position: relative; |
|
163 border-bottom: 1px dotted #ccc; |
|
164 z-index: 10; |
|
165 left: 0; |
|
166 } |
|
167 |
|
168 table#week tr td { |
|
169 vertical-align: top; |
|
170 height: 96ex; |
|
171 width: 14.2%; |
|
172 position: relative; |
|
173 } |
|
174 |
|
175 table#week tr td div.columndiv { |
|
176 position: relative; |
|
177 height: 102%; |
|
178 } |
|
179 |
|
180 table#week tr td div.columndiv div.task { |
|
181 position: absolute; |
|
182 overflow: hidden; |
|
183 } |
|
184 |
|
185 table#week tr td div.columndiv div.task div.bottommarker { |
|
186 position: absolute; |
|
187 bottom: 0; |
|
188 width: 100%; |
|
189 left: 0; |
|
190 z-index: 5; |
|
191 background: transparent; |
|
192 } |
|
193 table#week tr td div.columndiv div.task div.bottommarkerline { |
|
194 background: red; |
|
195 z-index: 5; |
|
196 padding: 0; |
|
197 } |
|
198 table#week tr td div.columndiv div.task:hover { |
|
199 overflow: visible; |
|
200 } |
|
201 |
|
202 table#week tr th.transparent { |
|
203 background: transparent; |
|
204 border: none; |
|
205 } |
|
206 |
|
207 |
|
208 /******************************************************************************/ |
|
209 /* XXX old calendar views, to remove once old_calendar.py is removed */ |
|
210 /******************************************************************************/ |
|
211 |
|
212 table.calendarPageHeader, |
|
213 table.smallCalendars, |
|
214 table.bigCalendars { |
|
215 width: 90%; |
|
216 border-collapse:separate; |
|
217 margin: 0px 1em; |
|
218 } |
|
219 |
|
220 |
|
221 table.smallCalendars td.calendar{ |
|
222 width: 33%; |
|
223 } |
|
224 |
|
225 td.calendar table { |
|
226 margin: 1em 2em; |
|
227 width: 80%; |
|
228 } |
|
229 |
|
230 .calendar th.month { |
|
231 font-weight:bold; |
|
232 padding-bottom:0.2em; |
|
233 background: %(incontextBoxBodyBgColor)s; |
|
234 border-top-left-radius: 6px; |
|
235 border-top-right-radius: 6px; |
|
236 } |
|
237 |
|
238 .calendar th.month a{ |
|
239 font: bold 110% Georgia, Verdana; |
|
240 color : #fff; |
|
241 } |
|
242 |
|
243 table.weekCalendar{ |
|
244 } |
|
245 |
|
246 table.weekCalendar th{ |
|
247 text-align : left; |
|
248 padding: 0.6em 0.4em; |
|
249 } |
|
250 |
|
251 table.weekCalendar td{ |
|
252 padding: 0.2em 0.4em } |
|
253 |
|
254 .semesterCalendar .amCell, .semesterCalendar .amCellEmpty{ |
|
255 margin-bottom:0; |
|
256 border-style: none; |
|
257 border-right:thin dotted; |
|
258 } |
|
259 |
|
260 table.semesterCalendar th{ |
|
261 padding: 0.6em 0.4em; |
|
262 } |
|
263 |
|
264 .semesterCalendar .pmCell, .semesterCalendar .pmCellEmpty{ |
|
265 border: none; |
|
266 border-left:1px dotted #ccc; |
|
267 } |
|
268 |
|
269 .weeknum{ |
|
270 width:10% |
|
271 } |
|
272 |
|
273 .cell, .cellEmpty{ |
|
274 border:1px solid #ccc; |
|
275 padding: 3px 0.5em 2em; |
|
276 width:10%; |
|
277 } |
|
278 |
|
279 .cellDay{ |
|
280 border:1px solid #ccc; |
|
281 border-bottom : none; |
|
282 padding: 3px 0.5em 3px; |
|
283 width:10%;} |
|
284 |
|
285 .amCell, .pmCell, |
|
286 .amCellEmpty, .pmCellEmpty{ |
|
287 padding: 3px 0.5em 3px; |
|
288 border:1px solid #ccc; |
|
289 border-top:none; |
|
290 width:10%; |
|
291 } |
|
292 |
|
293 .amCell, .amCellEmpty{ |
|
294 border-bottom:none; |
|
295 } |
|
296 |
|
297 .pmCell, .pmCellEmpty{ |
|
298 border-top:none; |
|
299 } |
|
300 |
|
301 .cellTitle { |
|
302 font: bold 100% Arial, sans-serif; |
|
303 } |
|
304 |
|
305 .weekTitle { |
|
306 padding:1em; |
|
307 } |
|
308 |
|
309 .weekCell, .weekEmptyCell { |
|
310 border-top: 0px; |
|
311 } |
|
312 |
|
313 .cell span.cellTitle, |
|
314 .cellEmpty span.cellTitle { |
|
315 background-color:transparent; |
|
316 } |
|
317 |
|
318 div.cellContent{ |
|
319 padding: 0.1em; |
|
320 font-size:90%; |
|
321 } |
|
322 |
|
323 .weeknum, th.weekday{ |
|
324 padding:0.2em 0.4em; |
|
325 color : #666; |
|
326 font-size:90%;} |
|
327 |
|
328 div.event{ |
|
329 padding : 0.1em 0px; |
|
330 margin:0.2em 0px; |
|
331 background: #eee; |
|
332 } |
|
333 |
|
334 td.prev { |
|
335 text-align: left; |
|
336 } |
|
337 |
|
338 td.next { |
|
339 text-align: right; |
|
340 } |
|
341 |
|
342 /* ------------------------- */ |
|
343 /* tooltips for fullcalendar */ |
|
344 |
|
345 a.calevent div.tooltip { |
|
346 display: none; /* tooltip hidden */ |
|
347 } |
|
348 |
|
349 a.calevent:hover { |
|
350 z-index: auto !important; /* in order that the tooltip from the above .calevent div can be put over this div*/ |
|
351 } |
|
352 |
|
353 a.calevent { |
|
354 display: inline; |
|
355 font-size: none; |
|
356 font-weight: bold; |
|
357 } |
|
358 |
|
359 a.calevent:hover div.tooltip{ |
|
360 display: block; |
|
361 position: absolute; |
|
362 z-index: 10; |
|
363 color: black; |
|
364 border:1px solid black; |
|
365 background: white; |
|
366 padding: 5px; |
|
367 overflow: visible; |
|
368 width: 200px; |
|
369 } |
|
370 |
|
371 div.tooltip a{ |
|
372 border: none; |
|
373 background: none; |
|
374 color: #2952A3; |
|
375 text-decoration: none; |
|
376 } |
|
377 |
|
378 div.tooltip a:hover{ |
|
379 text-decoration: underline; |
|
380 } |
|
381 |
|
382 |
|
383 div.fc-view{ |
|
384 overflow: visible; |
|
385 } |