3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 /*******************************************
12 ******************************************/
14 /* -----------------------------------------
15 * Shared calendar view containers
17 .x-panel-tbar .ext-cal-toolbar {
19 border-bottom-width: 0 !important;
21 .x-panel-tbar .ext-cal-toolbar .x-btn button {
25 .x-panel-tbar .ext-cal-toolbar .x-toolbar-cell {
31 font-family: helvetica, arial, sans-serif;
32 border-bottom:1px solid #ddd;
33 border-right:1px solid #ddd;
50 /* Background layout table for week rows */
60 /* Month names subheader */
61 .ext-cal-hd-days-tbl {
71 .ext-cal-month-hd .ext-cal-hd-days-tbl {
72 border-top: 1px solid #99BBE8;
74 .x-calendar-nonav .ext-cal-month-hd .ext-cal-hd-days-tbl {
77 .ext-cal-month-hd .ext-cal-hd-day {
78 border-left: 1px solid #DDD;
82 border-bottom: 1px solid #bcf;
90 /* -----------------------------------------
91 * Day/week-specific styles
93 .ext-cal-dayview .ext-cal-hd-days-tbl {
96 background-color: #CDDCEF;
102 .ext-cal-hd-days-td {
105 .ext-cal-dayview .ext-cal-hd-ct {
108 .ext-cal-dayview .ext-cal-gutter {
111 .ext-cal-dayview .ext-cal-gutter-rt {
114 .ext-ie .ext-cal-dayview .ext-cal-gutter-rt {
118 background-color: #fff;
121 border-color: #e3e9ff #e3e9ff #e3e9ff #e3e9ff;
123 border-width: 0 1px 1px 0;
125 .ext-cal-hd-ad-inner {
129 .x-calendar-nonav .ext-cal-hd-ad-inner {
132 .x-calendar-nonav .ext-cal-hd-ct {
133 border-top: 1px solid #99BBE8;
135 .ext-cal-dayview .ext-cal-dtitle {
136 padding: 8px 1px 2px;
138 .ext-cal-hd-ad-bg-tbl {
144 .ext-cal-hd-ad .st-c {
145 padding: 1px 1px 0 1px
147 .ext-cal-dayview .ext-cal-body-ct {
154 .ext-cal-dayview .ext-cal-body-ct .ext-cal-bg-tbl {
157 .ext-cal-dayview .ext-cal-bg-tbl {
158 background-color: #fff;
160 border-bottom: 1px solid #bcf;
161 border-right: 1px solid #bcf;
163 .ext-cal-dayview .ext-cal-bg-rows {
168 .ext-cal-dayview .ext-cal-bg-rows-inner {
172 .ext-ie .ext-cal-dayview .ext-cal-bg-rows-inner,
173 .ext-gecko .ext-cal-dayview .ext-cal-bg-rows-inner {
174 top: -1; /* row line alignment fix */
176 .ext-cal-dayview .ext-cal-bg-row {
179 .ext-cal-dayview .ext-cal-bg-row-div {
180 border-bottom: 1px dotted #ddd;
181 border-top: 1px solid #ddd;
186 .ext-cal-dayview .ext-row-1 {
190 background-color: #f6f9fc;
196 .ext-cal-day-time-inner {
198 border-bottom: 1px solid #ddd;
199 padding: 3px 4px 0 0;
202 border-left: 1px solid #ddd;
205 .ext-cal-day-col-inner {
209 .ext-cal-day-col-gutter {
214 .ext-ie .ext-cal-day-col-gutter,
215 .ext-opera .ext-cal-day-col-gutter {
218 .ext-ie6 .ext-cal-day-col-gutter {
222 /* -----------------------------------------
223 * Month-specific styles
225 .ext-cal-monthview .ext-cal-hd-ct {
232 .ext-cal-monthview .ext-cal-body-ct {
243 .ext-cal-monthview .ext-cal-noheader .ext-cal-hd-ct {
246 .ext-cal-monthview .ext-cal-noheader .ext-cal-body-ct {
250 /* Month view week link boxes */
251 .ext-cal-monthview .ext-cal-week-link,
252 .ext-cal-monthview .ext-cal-week-link-hd {
259 border-top: 1px solid #DDD;
260 border-right: 1px solid #DDD;
267 .ext-cal-monthview .ext-cal-week-link-hd {
268 border-top: 1px solid #99BBE8;
270 .x-calendar-nonav .ext-cal-monthview .ext-cal-week-link-hd {
273 .ext-cal-week-links .ext-cal-bg-tbl {
276 .ext-cal-week-links .ext-cal-evt-tbl,
277 .ext-cal-week-links .ext-cal-hd-days-tbl {
280 .ext-cal-monthview .ext-week-link-over {
285 /* Hide the nav bar if specified */
286 .ext-cal-hide-navbar .ext-cal-hd-ct {
289 .ext-cal-hide-navbar .ext-cal-body-ct {
293 /* Outer wrapping div for week rows */
301 .ext-cal-monthview .ext-cal-wk-ct {
304 /* Background table cell */
306 border-left: 1px solid #ddd;
310 /*border-left: 1px solid #BBCCFF;*/
319 background: #D1EAEF !important;
321 /* Event container table */
328 /* Event title cell (includes today, prev & next month) */
330 font-family: helvetica, arial, sans-serif;
331 border-top:1px solid #ddd;
341 td.ext-cal-dtitle-first {
342 border-top: 1px solid #DDD;
344 td.ext-cal-dtitle div {
345 padding: 2px 4px 1px;
347 /* Today's title cell */
348 td.ext-cal-dtitle-today div {
352 /* Today time span */
353 .ext-cal-dtitle-time {
356 /* Today's background cell */
360 /* Prev/next month title cells */
361 .ext-cal-dtitle-prev div,
362 .ext-cal-dtitle-next div {
365 /* Prev/next month background cells */
372 font-family:Verdana,sans-serif;
373 padding:1px 1px 0 2px;
376 /* Event overflow more link */
381 .ext-cal-ev-more a:visited {
382 font-family: verdana;
397 /* Default rounded event div (Gecko/Webkit/W3C) */
398 .ext-cal-evr { /* rounded */
399 -moz-border-radius:5px;
400 -webkit-border-radius:5px;
403 padding: 2px 1px 2px 5px;
405 text-overflow: ellipsis;
408 .ext-cal-day-col .ext-cal-evr {
412 /* Nested event divs (IE/Opera) */
413 .ext-cal-evo { /* outer */
414 border-top: 1px solid;
415 border-bottom: 1px solid;
422 .ext-cal-day-col .ext-cal-evo {
425 .ext-cal-evm { /* middle */
426 border-left: 1px solid;
427 border-right: 1px solid;
434 .ext-cal-evi { /* inner */
440 /* Day view event styles */
441 .ext-cal-day-col .ext-cal-evt {
446 -moz-user-select: none;
455 .ext-ie6 .ext-cal-evt dl {
463 word-wrap: break-word;
467 -moz-border-radius: 3px;
468 -webkit-border-radius: 3px
473 .ext-cal-day-col .ext-cal-evt a:link,
474 .ext-cal-day-col .ext-cal-evt a:visited,
475 .ext-cal-day-col .ext-cal-evt a:active {
476 text-decoration: none;
484 border-top-width: 1px;
485 border-top-style: solid;
487 .ext-opera .ext-cal-evb,
488 .ext-strict .ext-ie .ext-cal-evb {
492 /* Event spanning -- overrides rounded corners */
493 .ext-cal-ev-spanboth,
494 .ext-cal-ev-spanleft,
495 .ext-cal-ev-spanright {
496 -moz-border-radius:0;
497 -webkit-border-radius:0;
501 .ext-cal-ev-spanleft {
502 -moz-border-radius-topright:5px;
503 -moz-border-radius-bottomright:5px;
504 -webkit-border-top-right-radius:5px;
505 -webkit-border-bottom-right-radius:5px;
506 border-top-right-radius:5px;
507 border-bottom-right-radius:5px;
510 .ext-cal-ev-spanright {
511 -moz-border-radius-topleft:5px;
512 -moz-border-radius-bottomleft:5px;
513 -webkit-border-top-left-radius:5px;
514 -webkit-border-bottom-left-radius:5px;
515 border-top-left-radius:5px;
516 border-bottom-left-radius:5px;
520 .ext-cal-ev-spanboth .ext-cal-evm {
523 .ext-cal-ev-spanright .ext-cal-evm {
526 .ext-cal-ev-spanleft .ext-cal-evm {
532 /* background-image:url(../images/default/calendar-sprites.gif);
533 background-repeat:no-repeat;
534 display: inline-block;
542 background-position:-1px -11px;
546 background-position:0 -11px;
549 .ext-ie .ext-cal-spr {
553 /* Generic calendar icons */
555 background-image:url(../images/default/calendar-sprites.gif);
556 background-repeat:no-repeat;
557 display:inline-block;
564 background-position:0 0;
567 background-position:-14px 0;
570 /* Calendar DD styles */
581 background-color: #C3D9FF;
591 .ext-evt-over .ext-cal-evm {
593 filter: alpha(opacity=80);
596 /* Calendar Picker */
597 .ext-calendar-picker .x-form-text {
600 .ext-calendar-picker .x-combo-list-item {
603 .ext-cal-picker-icon {
607 -moz-border-radius:8px;
608 -webkit-border-radius:8px;
612 /* This is the selected icon that always shows: */
613 .ext-cal-picker-mainicon {
621 * Event resize handle
630 text-align: center; /* needed for IE quirks mode */
633 .ext-gecko .ext-evt-rsz,
634 .ext-webkit .ext-evt-rsz {
639 border-top:3px double;
650 /* no opacity for ie by default */
652 .ext-evt-over .ext-evt-rsz-h {
655 .ext-ie .ext-evt-rsz-h {
658 .ext-strict .ext-ie8 .ext-evt-rsz-h {
660 filter:alpha(opacity=50);
664 * Calendar event colors
673 .ext-ie .ext-color-1-ad,
674 .ext-opera .ext-color-1-ad {
677 .ext-cal-day-col .ext-color-1,
678 .ext-dd-drag-proxy .ext-color-1,
680 .ext-color-1-ad .ext-cal-evm,
681 .ext-color-1 .ext-cal-picker-icon,
683 .ext-color-1-x .ext-cal-evb {
686 .ext-color-1-x .ext-cal-evb,
688 border-color: #29527A;
692 .ext-ie .ext-color-2-ad,
693 .ext-opera .ext-color-2-ad {
696 .ext-cal-day-col .ext-color-2,
697 .ext-dd-drag-proxy .ext-color-2,
699 .ext-color-2-ad .ext-cal-evm,
700 .ext-color-2 .ext-cal-picker-icon,
702 .ext-color-2-x .ext-cal-evb {
705 .ext-color-2-x .ext-cal-evb,
707 border-color: #711616;
710 .ext-ie .ext-color-3-ad,
711 .ext-opera .ext-color-3-ad {
714 .ext-cal-day-col .ext-color-3,
715 .ext-dd-drag-proxy .ext-color-3,
717 .ext-color-3-ad .ext-cal-evm,
718 .ext-color-3 .ext-cal-picker-icon,
720 .ext-color-3-x .ext-cal-evb {
723 .ext-color-3-x .ext-cal-evb,
725 border-color: #8C500B;
728 .ext-cal-day-col .ext-cal-evt {
731 .ext-cal-day-col .ext-cal-evr,
732 .ext-cal-day-col .ext-cal-evi {
736 /* Shim for drag/drop operations on calendar views */
745 filter:alpha(opacity=40);
749 .ext-cal-event-win a:link,
750 .ext-cal-event-win a:visited {
754 /* StatusProxy override styles */
757 font: normal 11px arial, helvetica, sans-serif;
759 border-color: #ddd #bbb #bbb #ddd;
760 background-color:#fff;
765 .ext-dd-ghost-ct .x-dd-drag-ghost{
771 .ext-dd-ghost-ct .ext-evt-rsz {
775 /*******************************************
777 * Calendar navigation picker styles
779 ******************************************/
780 .ext-cal-nav-picker {
781 border-style: none none solid;
782 border-color: #99BBE8;
784 .ext-cal-nav-picker .x-date-left,
785 .ext-cal-nav-picker .x-date-middle,
786 .ext-cal-nav-picker .x-date-right {
787 background: url(../../../../resources/images/default/toolbar/bg.gif) repeat-x;
789 .ext-cal-nav-picker .x-date-left a {
790 background-image: url(../../../../resources/images/default/grid/page-prev.gif);
792 .ext-cal-nav-picker .x-date-right a {
793 background-image: url(../../../../resources/images/default/grid/page-next.gif);
795 .ext-cal-nav-picker .x-date-middle {
798 .ext-cal-nav-picker .x-date-middle .x-btn-text {
802 .ext-cal-nav-picker .x-date-middle .x-btn-mc em.x-btn-arrow {
803 background-image: url(../../../../resources/images/default/button/arrow.gif);
804 background-position: right 4px;
806 .ext-cal-nav-picker .x-date-inner {
807 border-top: 1px solid #BBCCFF;
809 .ext-cal-nav-picker .x-date-inner th {
811 border-bottom: 1px solid #BBCCFF;
813 .ext-cal-nav-picker .x-date-inner .x-date-today a {
814 border-color: #BFA52F;
818 /*******************************************
820 * Calendar form styles
822 ******************************************/
823 .ext-gecko .ext-cal-event-win .x-window-body .x-form-item {
826 .ext-evt-edit-form .x-form-item {
829 .ext-evt-edit-form .x-panel-bbar .x-toolbar {
830 border-bottom: 1px solid #99BBE8;
832 .ext-evt-edit-form .x-panel-header {
833 background: transparent url(../images/default/ext-cal-edit-hd.png) repeat-x;
834 padding: 9px 0 4px !important;
835 font-size: 13px !important;
836 font-family: helvetica, arial, sans-serif;
838 border-bottom: 1px solid #BBCCFF;
840 .ext-evt-edit-form .x-panel-fbar {
843 border: 1px solid #BBCCFF;
846 /*******************************************
848 * DateRangeField styles
850 ******************************************/
851 .ext-dt-range label {
854 .ext-dt-range .x-form-check-wrap {
857 .ext-dt-range .x-table-layout-cell {