|
1 /* |
|
2 * FullCalendar v1.4.8 Stylesheet |
|
3 * |
|
4 * Feel free to edit this file to customize the look of FullCalendar. |
|
5 * When upgrading to newer versions, please upgrade this file as well, |
|
6 * porting over any customizations afterwards. |
|
7 * |
|
8 * Date: Sat Oct 16 17:10:03 2010 -0700 |
|
9 * |
|
10 */ |
|
11 |
|
12 |
|
13 /* TODO: make font sizes look the same in all doctypes */ |
|
14 |
|
15 |
|
16 .fc, |
|
17 .fc .fc-header, |
|
18 .fc .fc-content { |
|
19 font-size: 1em; |
|
20 } |
|
21 |
|
22 .fc { |
|
23 direction: ltr; |
|
24 text-align: left; |
|
25 } |
|
26 |
|
27 .fc table { |
|
28 border-collapse: collapse; |
|
29 border-spacing: 0; |
|
30 } |
|
31 |
|
32 .fc td, .fc th { |
|
33 padding: 0; |
|
34 vertical-align: top; |
|
35 } |
|
36 |
|
37 |
|
38 |
|
39 /* Header |
|
40 ------------------------------------------------------------------------*/ |
|
41 |
|
42 table.fc-header { |
|
43 width: 100%; |
|
44 } |
|
45 |
|
46 .fc-header-left { |
|
47 width: 25%; |
|
48 } |
|
49 |
|
50 .fc-header-left table { |
|
51 float: left; |
|
52 } |
|
53 |
|
54 .fc-header-center { |
|
55 width: 50%; |
|
56 text-align: center; |
|
57 } |
|
58 |
|
59 .fc-header-center table { |
|
60 margin: 0 auto; |
|
61 } |
|
62 |
|
63 .fc-header-right { |
|
64 width: 25%; |
|
65 } |
|
66 |
|
67 .fc-header-right table { |
|
68 float: right; |
|
69 } |
|
70 |
|
71 .fc-header-title { |
|
72 margin-top: 0; |
|
73 white-space: nowrap; |
|
74 } |
|
75 |
|
76 .fc-header-space { |
|
77 padding-left: 10px; |
|
78 } |
|
79 |
|
80 /* right-to-left */ |
|
81 |
|
82 .fc-rtl .fc-header-title { |
|
83 direction: rtl; |
|
84 } |
|
85 |
|
86 |
|
87 |
|
88 /* Buttons |
|
89 ------------------------------------------------------------------------*/ |
|
90 |
|
91 .fc-header .fc-state-default, |
|
92 .fc-header .ui-state-default { |
|
93 margin-bottom: 1em; |
|
94 cursor: pointer; |
|
95 } |
|
96 |
|
97 .fc-header .fc-state-default { |
|
98 border-width: 1px 0; |
|
99 padding: 0 1px; |
|
100 } |
|
101 |
|
102 .fc-header .fc-state-default, |
|
103 .fc-header .fc-state-default a { |
|
104 border-style: solid; |
|
105 } |
|
106 |
|
107 .fc-header .fc-state-default a { |
|
108 display: block; |
|
109 border-width: 0 1px; |
|
110 margin: 0 -1px; |
|
111 width: 100%; |
|
112 text-decoration: none; |
|
113 } |
|
114 |
|
115 .fc-header .fc-state-default span { |
|
116 display: block; |
|
117 border-style: solid; |
|
118 border-width: 1px 0 1px 1px; |
|
119 padding: 3px 5px; |
|
120 } |
|
121 |
|
122 .fc-header .ui-state-default { |
|
123 padding: 4px 6px; |
|
124 } |
|
125 |
|
126 .fc-header .fc-state-default span, |
|
127 .fc-header .ui-state-default span { |
|
128 white-space: nowrap; |
|
129 } |
|
130 |
|
131 /* for adjacent buttons */ |
|
132 |
|
133 .fc-header .fc-no-right { |
|
134 padding-right: 0; |
|
135 } |
|
136 |
|
137 .fc-header .fc-no-right a { |
|
138 margin-right: 0; |
|
139 border-right: 0; |
|
140 } |
|
141 |
|
142 .fc-header .ui-no-right { |
|
143 border-right: 0; |
|
144 } |
|
145 |
|
146 /* for fake rounded corners */ |
|
147 |
|
148 .fc-header .fc-corner-left { |
|
149 margin-left: 1px; |
|
150 padding-left: 0; |
|
151 } |
|
152 |
|
153 .fc-header .fc-corner-right { |
|
154 margin-right: 1px; |
|
155 padding-right: 0; |
|
156 } |
|
157 |
|
158 /* DEFAULT button COLORS */ |
|
159 |
|
160 .fc-header .fc-state-default, |
|
161 .fc-header .fc-state-default a { |
|
162 border-color: #777; /* outer border */ |
|
163 color: #333; |
|
164 } |
|
165 |
|
166 .fc-header .fc-state-default span { |
|
167 border-color: #fff #fff #d1d1d1; /* inner border */ |
|
168 background: #e8e8e8; |
|
169 } |
|
170 |
|
171 /* PRESSED button COLORS (down and active) */ |
|
172 |
|
173 .fc-header .fc-state-active a { |
|
174 color: #fff; |
|
175 } |
|
176 |
|
177 .fc-header .fc-state-down span, |
|
178 .fc-header .fc-state-active span { |
|
179 background: #888; |
|
180 border-color: #808080 #808080 #909090; /* inner border */ |
|
181 } |
|
182 |
|
183 /* DISABLED button COLORS */ |
|
184 |
|
185 .fc-header .fc-state-disabled a { |
|
186 color: #999; |
|
187 } |
|
188 |
|
189 .fc-header .fc-state-disabled, |
|
190 .fc-header .fc-state-disabled a { |
|
191 border-color: #ccc; /* outer border */ |
|
192 } |
|
193 |
|
194 .fc-header .fc-state-disabled span { |
|
195 border-color: #fff #fff #f0f0f0; /* inner border */ |
|
196 background: #f0f0f0; |
|
197 } |
|
198 |
|
199 |
|
200 |
|
201 /* Content Area & Global Cell Styles |
|
202 ------------------------------------------------------------------------*/ |
|
203 |
|
204 .fc-widget-content { |
|
205 border: 1px solid #ccc; /* outer border color */ |
|
206 } |
|
207 |
|
208 .fc-content { |
|
209 clear: both; |
|
210 } |
|
211 |
|
212 .fc-content .fc-state-default { |
|
213 border-style: solid; |
|
214 border-color: #ccc; /* inner border color */ |
|
215 } |
|
216 |
|
217 .fc-content .fc-state-highlight { /* today */ |
|
218 background: #ffc; |
|
219 } |
|
220 |
|
221 .fc-content .fc-not-today { /* override jq-ui highlight (TODO: ui-widget-content) */ |
|
222 background: none; |
|
223 } |
|
224 |
|
225 .fc-cell-overlay { /* semi-transparent rectangle while dragging */ |
|
226 background: #9cf; |
|
227 opacity: .2; |
|
228 filter: alpha(opacity=20); /* for IE */ |
|
229 } |
|
230 |
|
231 .fc-view { /* prevents dragging outside of widget */ |
|
232 width: 100%; |
|
233 overflow: hidden; |
|
234 } |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 /* Global Event Styles |
|
241 ------------------------------------------------------------------------*/ |
|
242 |
|
243 .fc-event, |
|
244 .fc-agenda .fc-event-time, |
|
245 .fc-event a { |
|
246 border-style: solid; |
|
247 border-color: #36c; /* default BORDER color (probably the same as background-color) */ |
|
248 background-color: #36c; /* default BACKGROUND color */ |
|
249 color: #fff; /* default TEXT color */ |
|
250 } |
|
251 |
|
252 /* Use the 'className' CalEvent property and the following |
|
253 * example CSS to change event color on a per-event basis: |
|
254 * |
|
255 * .myclass, |
|
256 * .fc-agenda .myclass .fc-event-time, |
|
257 * .myclass a { |
|
258 * background-color: black; |
|
259 * border-color: black; |
|
260 * color: red; |
|
261 * } |
|
262 */ |
|
263 |
|
264 .fc-event { |
|
265 text-align: left; |
|
266 } |
|
267 |
|
268 .fc-event a { |
|
269 overflow: hidden; |
|
270 font-size: .85em; |
|
271 text-decoration: none; |
|
272 cursor: pointer; |
|
273 } |
|
274 |
|
275 .fc-event-editable { |
|
276 cursor: pointer; |
|
277 } |
|
278 |
|
279 .fc-event-time, |
|
280 .fc-event-title { |
|
281 padding: 0 1px; |
|
282 } |
|
283 |
|
284 /* for fake rounded corners */ |
|
285 |
|
286 .fc-event a { |
|
287 display: block; |
|
288 position: relative; |
|
289 width: 100%; |
|
290 height: 100%; |
|
291 } |
|
292 |
|
293 /* right-to-left */ |
|
294 |
|
295 .fc-rtl .fc-event a { |
|
296 text-align: right; |
|
297 } |
|
298 |
|
299 /* resizable */ |
|
300 |
|
301 .fc .ui-resizable-handle { |
|
302 display: block; |
|
303 position: absolute; |
|
304 z-index: 99999; |
|
305 border: 0 !important; /* important overrides pre jquery ui 1.7 styles */ |
|
306 background: url(data:image/gif;base64,AAAA) !important; /* hover fix for IE */ |
|
307 } |
|
308 |
|
309 |
|
310 |
|
311 /* Horizontal Events |
|
312 ------------------------------------------------------------------------*/ |
|
313 |
|
314 .fc-event-hori { |
|
315 border-width: 1px 0; |
|
316 margin-bottom: 1px; |
|
317 } |
|
318 |
|
319 .fc-event-hori a { |
|
320 border-width: 0; |
|
321 } |
|
322 |
|
323 /* for fake rounded corners */ |
|
324 |
|
325 .fc-content .fc-corner-left { |
|
326 margin-left: 1px; |
|
327 } |
|
328 |
|
329 .fc-content .fc-corner-left a { |
|
330 margin-left: -1px; |
|
331 border-left-width: 1px; |
|
332 } |
|
333 |
|
334 .fc-content .fc-corner-right { |
|
335 margin-right: 1px; |
|
336 } |
|
337 |
|
338 .fc-content .fc-corner-right a { |
|
339 margin-right: -1px; |
|
340 border-right-width: 1px; |
|
341 } |
|
342 |
|
343 /* resizable */ |
|
344 |
|
345 .fc-event-hori .ui-resizable-e { |
|
346 top: 0 !important; /* importants override pre jquery ui 1.7 styles */ |
|
347 right: -3px !important; |
|
348 width: 7px !important; |
|
349 height: 100% !important; |
|
350 cursor: e-resize; |
|
351 } |
|
352 |
|
353 .fc-event-hori .ui-resizable-w { |
|
354 top: 0 !important; |
|
355 left: -3px !important; |
|
356 width: 7px !important; |
|
357 height: 100% !important; |
|
358 cursor: w-resize; |
|
359 } |
|
360 |
|
361 .fc-event-hori .ui-resizable-handle { |
|
362 _padding-bottom: 14px; /* IE6 had 0 height */ |
|
363 } |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 /* Month View, Basic Week View, Basic Day View |
|
369 ------------------------------------------------------------------------*/ |
|
370 |
|
371 .fc-grid table { |
|
372 width: 100%; |
|
373 } |
|
374 |
|
375 .fc .fc-grid th { |
|
376 border-width: 0 0 0 1px; |
|
377 text-align: center; |
|
378 } |
|
379 |
|
380 .fc .fc-grid td { |
|
381 border-width: 1px 0 0 1px; |
|
382 } |
|
383 |
|
384 .fc-grid th.fc-leftmost, |
|
385 .fc-grid td.fc-leftmost { |
|
386 border-left: 0; |
|
387 } |
|
388 |
|
389 .fc-grid .fc-day-number { |
|
390 float: right; |
|
391 padding: 0 2px; |
|
392 } |
|
393 |
|
394 .fc-grid .fc-other-month .fc-day-number { |
|
395 opacity: 0.3; |
|
396 filter: alpha(opacity=30); /* for IE */ |
|
397 /* opacity with small font can sometimes look too faded |
|
398 might want to set the 'color' property instead |
|
399 making day-numbers bold also fixes the problem */ |
|
400 } |
|
401 |
|
402 .fc-grid .fc-day-content { |
|
403 clear: both; |
|
404 padding: 2px 2px 0; /* distance between events and day edges */ |
|
405 } |
|
406 |
|
407 /* event styles */ |
|
408 |
|
409 .fc-grid .fc-event-time { |
|
410 font-weight: bold; |
|
411 } |
|
412 |
|
413 /* right-to-left */ |
|
414 |
|
415 .fc-rtl .fc-grid { |
|
416 direction: rtl; |
|
417 } |
|
418 |
|
419 .fc-rtl .fc-grid .fc-day-number { |
|
420 float: left; |
|
421 } |
|
422 |
|
423 .fc-rtl .fc-grid .fc-event-time { |
|
424 float: right; |
|
425 } |
|
426 |
|
427 /* Agenda Week View, Agenda Day View |
|
428 ------------------------------------------------------------------------*/ |
|
429 |
|
430 .fc .fc-agenda th, |
|
431 .fc .fc-agenda td { |
|
432 border-width: 1px 0 0 1px; |
|
433 } |
|
434 |
|
435 .fc .fc-agenda .fc-leftmost { |
|
436 border-left: 0; |
|
437 } |
|
438 |
|
439 .fc-agenda tr.fc-first th, |
|
440 .fc-agenda tr.fc-first td { |
|
441 border-top: 0; |
|
442 } |
|
443 |
|
444 .fc-agenda-head tr.fc-last th { |
|
445 border-bottom-width: 1px; |
|
446 } |
|
447 |
|
448 .fc .fc-agenda-head td, |
|
449 .fc .fc-agenda-body td { |
|
450 background: none; |
|
451 } |
|
452 |
|
453 .fc-agenda-head th { |
|
454 text-align: center; |
|
455 } |
|
456 |
|
457 /* the time axis running down the left side */ |
|
458 |
|
459 .fc-agenda .fc-axis { |
|
460 width: 50px; |
|
461 padding: 0 4px; |
|
462 vertical-align: middle; |
|
463 white-space: nowrap; |
|
464 text-align: right; |
|
465 font-weight: normal; |
|
466 } |
|
467 |
|
468 /* all-day event cells at top */ |
|
469 |
|
470 .fc-agenda-head tr.fc-all-day th { |
|
471 height: 35px; |
|
472 } |
|
473 |
|
474 .fc-agenda-head td { |
|
475 padding-bottom: 10px; |
|
476 } |
|
477 |
|
478 .fc .fc-divider div { |
|
479 font-size: 1px; /* for IE6/7 */ |
|
480 height: 2px; |
|
481 } |
|
482 |
|
483 .fc .fc-divider .fc-state-default { |
|
484 background: #eee; /* color for divider between all-day and time-slot events */ |
|
485 } |
|
486 |
|
487 /* body styles */ |
|
488 |
|
489 .fc .fc-agenda-body td div { |
|
490 height: 20px; /* slot height */ |
|
491 } |
|
492 |
|
493 .fc .fc-agenda-body tr.fc-minor th, |
|
494 .fc .fc-agenda-body tr.fc-minor td { |
|
495 border-top-style: dotted; |
|
496 } |
|
497 |
|
498 .fc-agenda .fc-day-content { |
|
499 padding: 2px 2px 0; /* distance between events and day edges */ |
|
500 } |
|
501 |
|
502 /* vertical background columns */ |
|
503 |
|
504 .fc .fc-agenda-bg .ui-state-highlight { |
|
505 background-image: none; /* tall column, don't want repeating background image */ |
|
506 } |
|
507 |
|
508 |
|
509 |
|
510 /* Vertical Events |
|
511 ------------------------------------------------------------------------*/ |
|
512 |
|
513 .fc-event-vert { |
|
514 border-width: 0 1px; |
|
515 } |
|
516 |
|
517 .fc-event-vert a { |
|
518 border-width: 0; |
|
519 } |
|
520 |
|
521 /* for fake rounded corners */ |
|
522 |
|
523 .fc-content .fc-corner-top { |
|
524 margin-top: 1px; |
|
525 } |
|
526 |
|
527 .fc-content .fc-corner-top a { |
|
528 margin-top: -1px; |
|
529 border-top-width: 1px; |
|
530 } |
|
531 |
|
532 .fc-content .fc-corner-bottom { |
|
533 margin-bottom: 1px; |
|
534 } |
|
535 |
|
536 .fc-content .fc-corner-bottom a { |
|
537 margin-bottom: -1px; |
|
538 border-bottom-width: 1px; |
|
539 } |
|
540 |
|
541 /* event content */ |
|
542 |
|
543 .fc-event-vert span { |
|
544 display: block; |
|
545 position: relative; |
|
546 z-index: 2; |
|
547 } |
|
548 |
|
549 .fc-event-vert span.fc-event-time { |
|
550 white-space: nowrap; |
|
551 _white-space: normal; |
|
552 overflow: hidden; |
|
553 border: 0; |
|
554 font-size: 10px; |
|
555 } |
|
556 |
|
557 .fc-event-vert span.fc-event-title { |
|
558 line-height: 13px; |
|
559 } |
|
560 |
|
561 .fc-event-vert span.fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */ |
|
562 position: absolute; |
|
563 z-index: 1; |
|
564 top: 0; |
|
565 left: 0; |
|
566 width: 100%; |
|
567 height: 100%; |
|
568 background: #fff; |
|
569 opacity: .3; |
|
570 filter: alpha(opacity=30); /* for IE */ |
|
571 } |
|
572 |
|
573 /* resizable */ |
|
574 |
|
575 .fc-event-vert .ui-resizable-s { |
|
576 bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */ |
|
577 width: 100% !important; |
|
578 height: 8px !important; |
|
579 line-height: 8px !important; |
|
580 font-size: 11px !important; |
|
581 font-family: monospace; |
|
582 text-align: center; |
|
583 cursor: s-resize; |
|
584 } |
|
585 |
|
586 |