source: trunk/prototype/modules/calendar/css/layout.css @ 5592

Revision 5592, 17.5 KB checked in by acoutinho, 12 years ago (diff)

Ticket #2434 - Implementacao de compartilhamento de agendas (agendas usuario e agendas publicas)

Line 
1/*
2        Document   : layout.css
3        Created on : 10/09/2011, 10:12:49
4        Author     : prognus
5        Description: contains all styles related to element positioning and elements dimension
6*/
7
8
9
10/* -- main page styles -- */
11
12/*      body {
13                margin:0;
14                font-size: 14px;
15                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
16                font-family: Arial,Helvetica,sans-serif;
17        }*/
18
19#wrap {
20/*      background-image: url(images/calendar-top-bg-mini.png);
21        background-repeat: no-repeat;*/
22        width: 100%;
23        max-width: 1100px;
24        min-width: 985px;
25        margin: 0 auto;
26}
27
28#wrap .search-field {
29        max-width: 180px;
30        width: 180px;
31/*      margin: 5px 0 5px 290px;*/
32        float: right;
33}
34
35#wrap .search-field input {
36        width: 160px;
37        padding: 0 0 0 3px;
38}
39
40.block-horizontal-toolbox {
41        width: 100%;
42        height: 30px;
43/*      margin: 5px 0;*/
44}
45
46.block-vertical-toolbox {
47        width: 19%;
48        max-width: 200px;
49        min-width: 190px;
50        float: left;
51        padding: 0;
52}
53
54.block-vertical-toolbox .mini-calendar {
55        padding: 5px 0;
56        margin:10px 0;
57}
58
59.block-top {
60/*      background-image: url(images/calendar-body-bg.png);
61        background-repeat: repeat-x;*/
62        width: 100%;
63        height: 100px;
64}
65
66#tabs {
67        width: 80%;
68        max-width: 900px;
69        min-width: 785px;
70        float: right;
71        padding-top: 0;
72}
73
74#tabs,
75#tabs .ui-tabs-nav {
76        padding-top: 0;
77}
78
79#tabs > li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
80
81
82.button.config-menu {
83        float: right;
84        padding: 11px 5px;
85        width: 40px;
86        height: 5px;
87}
88
89.fg-menu-container {
90        z-index: 999;
91        min-width: 134px !important;
92}
93
94.fg-menu-container.evt-option{
95        min-width: 85px !important;
96        padding: 0;
97}
98
99.fg-menu-container.evt-option a{
100        padding: 0.1em 3%;
101}
102
103.ui-icon.ui-icon-gear {
104        background-image: url(../img/cog.png);
105    background-position: 0 0;
106}
107
108.expresso-calendar-container dl
109.expresso-calendar-container dt,
110.expresso-calendar-container dl dd {
111        margin: 0; padding: 0;
112}
113
114.expresso-calendar-container #trash {
115        width: 150px;
116        height: 150px;
117        bottom: 0px;
118        position: fixed;
119}
120
121/* -- generic HTML elements styles -- */
122
123input {
124        margin-top: 2px;
125        margin-bottom: 2px;
126}
127
128/* -- generic class styles -- */
129
130.clear { clear: both; }
131
132.editable{
133        background-color: white;
134        outline: 0px solid transparent;
135        border: 1px #CCC solid;
136}
137
138p.input-group span {display: inline-block; vertical-align: text-top;}
139p.input-group label {display: inline-block; vertical-align: text-top;}
140p.input-group ul li * {vertical-align: bottom; margin-bottom: 5px;}
141p.input-group label.for-textarea {display: inline-block; vertical-align: top;}
142p.input-group {
143  margin: 5px 0 !important;
144}
145
146.messages .message { text-align: left; }
147
148.button.tiny{
149        height: 15px;
150}
151.button.tiny.ui-button-icon-only {
152    width: 15px;
153}
154
155.button.small {
156        height: 24px;
157}
158.button.small.ui-button-icon-only {
159    width: 24px;
160}
161
162.fields-left {display: inline-block; width: 200px;}
163.fields-right {display: inline-block; width: 300px;}
164
165.ui-icon-float-right { float:right; }
166.ui-icon-float-left { float:left; }
167
168fieldset.input-field-rounded {
169        border:1px solid #CFCFCF;
170        padding: 5px;
171}
172
173fieldset.input-field-rounded input{
174        margin: 0px;
175        display: inline-block;
176        border: none;
177}
178
179fieldset.input-field-rounded span {
180        display: inline-block;
181        margin:0 0 -3px 5px;
182}
183
184/* search area definition */
185fieldset.search-field {
186        border:1px solid #CFCFCF;
187        padding: 3px;
188}
189
190fieldset.search-field input{
191        margin: 0px;
192        display: inline-block;
193        border: none;
194        width: 215px;
195}
196
197fieldset.search-field span {
198        display: inline-block;
199        margin:0 0 -3px 0px;
200        cursor: pointer;
201}
202/* #search area definition */
203
204
205/* -- fullcalendar styles -- */
206
207.fc-view{
208        overflow: visible;
209}
210
211.fc-grid.fc-view-year .fc-day-number {
212        text-align: center;
213        float: none;
214}
215
216/* -- event details styles -- */
217
218.new-event-win.active {
219         width:700px;height:510px;text-align:left;
220}
221
222.new-event-win > .content.ui-tabs.ui-widget-content {
223        border: none;
224}
225
226.new-event-win ul.attendee-permissions-list, li.attendee-permissions-list{text-align: left;}
227
228li.attendee-permissions-list input{width: 20px !important; margin: 3px 0 0 0; !important}
229
230p.request-update{display: inline; position: relative; top: 2px;}
231
232
233p.request-update label{width: 150px !important;}
234
235.new-event-win .menu-addevent {
236        text-align: right;
237}
238
239fieldset.block-add-attendee .add-attendee-search { max-width: 250px; margin: 5px;}
240fieldset.block-add-attendee .add-attendee-search input { max-width: 220px; width: 220px;}
241fieldset.block-add-attendee .search-result-list { width: 255px; max-height: 215px; overflow: auto;}
242fieldset.block-add-attendee .search-result-list .ui-widget-content { border: none;}
243fieldset.block-add-attendee .search-result-list .empty { margin-left: 5px; }
244
245.block-attendee-list, .block-add-attendee { float:left;}
246.block-attendee-list { width:400px; margin-right: 5px; }
247.block-add-attendee { width:260px; margin-right: 5px; }
248.block-attendee-list dd, .block-add-attendee dd { border: 1px solid #BFBFBF; }
249.block-attendee-list dt, .block-add-attendee dt { background-color:#FFF; margin: 5px 0 -6px 5px; font-weight: bold; display: table;  position: relative;}
250.block-attendee-list dd.attendee-list { height: 196px; }
251.block-attendee-list dd.attendee-list ul { max-height: 186px; overflow: auto; margin-top: 10px;}
252.block-attendee-list dd.attendee-list-add {border-top:none !important; border:1px solid #BFBFBF;}
253.block-attendee-list dd.attendee-list-add fieldset.add-attendee-input { border:none !important; margin: 0; padding: 0 }
254.block-attendee-list dd.attendee-list-brief { border:none !important; margin: 5px 0; color:#777; }
255
256dl.block-add-attendee {
257        float: right;
258        display: block;
259}
260
261dl.block-add-attendee dd.add-attendee {
262        width: 260px;
263        min-height: 260px;
264        display: block;
265}
266
267ul.attendees-count {clear:left; float:left;}
268.attendees-count li {display: inline;}
269.attendees-count li:after {content:", "}
270.attendees-count li label {font-weight: bold;}
271
272.attendees-list .me select.status { margin:10px 5px 5px 5px; }
273.attendees-list .me .add-attendee-search { max-width: 155px; width:155px; display: inline; padding: 0; margin: 10px 0 5px 0;}
274
275.attendees-list .me .add-attendee-options { max-height: 16px; height:16px;  max-width: 50px; width:50px; display: inline; padding: 0; margin: 0 0 5px 0;}
276.attendees-list .me .add-attendee-options-read { max-height: 16px; height:16px;  max-width: 16px; width:16px; display: inline; padding: 0; margin: 0 0 5px 0;}
277
278.attendees-list .me .add-attendee-options-button {position: absolute; top: 171px;}
279.attendees-list .hover-attendee { background-color: #DFEFFC;}
280/*
281.attendees-list .attendee-options-button-edit { position: absolute; top:0; right:25px;}
282.attendees-list .attendee-options-button-key { position: absolute; top:0; right:45px;}
283.attendees-list .attendee-options-button-delegate { position: absolute; top:0; right:65px;}
284*/
285
286.attendee-options{ position: absolute; top: 0; left: 287px; background-color: white; z-index: 100; width: 90px; background-color: #FFF; padding: 0 20px 0 3px; text-align: right;}
287.attendees-list .not-attendee { height:16px; }
288
289.list-delegates{margin: 0 0 0 25px;}
290
291.status-delegate{position: absolute; left:3px;}
292
293.attendees-list .me .add-attendee-search input { max-width: 125px; }
294.attendees-list li.organizer, .attendees-list li.me-delegated  {margin-bottom: 3px;}
295.attendees-list .organizer .button.swap {
296        float: right;
297        margin-top: -1.5em;
298}
299
300.name-status-delegated{text-decoration: line-through; padding: 0 0 0 18px;}
301.name-status-delegated-delegated{text-decoration: line-through; padding: 0 0 0 12px;}
302.name-status-delegated-none{ padding: 0 0 0 12;}
303
304.name-status{padding: 0 0 0 18px;}
305
306.name-special{padding: 0 0 0 33px;}
307.name-special-delegated{text-decoration: line-through; padding: 0 0 0 33px;}
308
309.open-delegate{position: absolute; left: 20px; display: block; cursor: hand;}
310.space-status{position: absolute; left: 20px; display: block;}
311.space-special{position: absolute; left: 35px; display: block;}
312.space-special-delegated{position: absolute; left: 20px; display: block;}
313
314.attendee-permissions-change{background-image: url(../../../plugins/jquery/images/ui-icons_f9bd01_256x240.png) !important;}
315.attendee-permissions-change-button{border: 1px solid #79B7E7 !important; background: #F5F8F9 !important; font-weight: bold !important; color: #E17009 !important;}
316
317.attendee-permissions-conflict{opacity: 0.5}
318
319dd.attendee-list ul.attendee-list li {
320/*      display: table;*/
321    overflow: hidden;
322        position: relative;
323}
324dd.attendee-list ul.attendee-list li input,
325dd.attendee-list ul.attendee-list li span,
326dd.attendee-list ul.attendee-list li label {
327        display: table-cell;
328}
329dd.attendee-list ul.attendee-list li label.name,
330dd.attendee-list ul.attendee-list li label.mail {
331        width: 99999px;
332        min-width: 99999px;
333        vertical-align: middle;
334}
335dd.attendee-list ul.attendee-list li label[title=''] { display:none }
336/*
337dd.attendee-list ul.attendee-list li .button.close {
338        position: absolute;
339    right: 5px;
340    top: 0;
341}
342*/
343/*
344.attendees-list li .ui-icon-float-right {
345        opacity:0.1;
346        filter:alpha(opacity=10);
347}
348.attendees-list li.hover .ui-icon-float-right {
349        opacity:1;
350        filter:alpha(opacity=100);
351}*/
352
353/* -- configurations styles -- */
354
355.configurations-basic label {
356        width: 200px;
357}
358
359.configurations-notifications label {
360        width: 350px;
361}
362
363.accordion-user-calendars .ui-accordion-header {
364        margin-bottom: 2px;
365}
366
367.accordion-user-calendars .ui-accordion-header legend{
368        font-size: 60%;
369    margin-left: 30px;
370    padding: 0.4em;;
371}
372.user-calendar.ui-accordion-content {
373        margin-top: -11px;
374}
375
376/* -- preferences styles -- */
377p.default-alarm-event {margin-bottom: 10px; margin-top: -8px;}
378.preferences-win.active p.input-group label { display: inline-block; width: 300px;}
379.preferences-win.active p.input-group ul li label { width: auto; }
380/*.preferences-win.active input[type="text"] { vertical-align:top; }*/
381
382/* -- import/export dialog styles -- */
383
384.import-export-win p.input-group label { display: inline-block; width: 100px;}
385.import-export-win span.tip {
386    display: block;
387    margin: 3px 0 10px 100px;
388    clear: both;
389    font-size: 0.9em;
390}
391.import-export-win form { padding: 10px; }
392.import-export-win p.input-group * { float:left; }
393
394/* -- calendar list styles -- */
395
396.my-calendars .button.new {
397  float:right;
398  width: 15px;
399  height: 15px;
400}
401
402.my-calendars .status-list {
403        display: inline-block;
404        margin: 0px 0pc -4px -5px;
405        cursor: pointer;
406}
407
408.my-calendars .list-calendars-item{
409        position: relative;
410        overflow: hidden;
411}
412.my-calendars .list-calendars-item div{
413        overflow:hidden;
414        width:6000px;
415        display:table;
416}
417
418.my-calendars .cal-list-options-btn{
419        position: absolute;
420        top: 2px;
421        right: 2px;
422}
423
424.evt-list-options.my-evt-list-options{
425        position: absolute;
426        width: 110px;
427        display: block;
428       
429}
430
431
432.colors-options { padding-left: 5px; }
433.colors-options .color-selected { text-indent: -10px; /*padding: 1px 0px 0px 8px;*/ }
434.colors-options .color-selected .ui-button-text { padding: 0px 0px 0px 8px; font-size: 30px; line-height: 0.4em; }
435.colors-options .cal-colors-options-btn {
436        float:left;
437        width: 17px;
438        height: 17px;
439        margin-bottom: 2px;
440        margin-top:2px;
441        background-position: -500px -10px;
442}
443.my-calendars {
444  font-size: 12px;
445  padding-top: 3px;
446  padding-bottom: 3px;
447  cursor: pointer;
448}
449
450.user-list .hover-user { background-color: #DFEFFC;}
451
452.user-acls-shared-calendar{
453        width: 130px;
454        float: right;
455        margin-right: 20px;
456}
457
458.user-acls-shared-calendar.calendar{
459        text-align: right;
460}
461
462
463.calendars-list .search-field.calendar-shared-search {
464        max-width: 193px !important;
465        width: 193px !important;
466        float: right;
467}
468
469.calendars-list .search-field input.search{
470        width:165px !important;
471}
472
473.calendars-list .status-list-shared{
474        display: inline-block;
475        margin: 0 0 -4px -5px;
476        cursor: pointer;
477}
478
479.calendars-list .title-signed-calendars{
480        cursor: pointer;
481}
482
483.my-calendars a.new-calendar .ui-button-text {
484    padding: 0;
485}
486
487.new-calendar-shared{
488        float: right;
489}
490
491.signed-calendars {
492        font-size: 12px;
493        padding-top: 3px;
494        padding-bottom: 3px;
495}
496
497dl.block-add-user {
498        max-width: 290px;
499        min-height: 260px;
500        display: block;
501        float:right;
502        margin: 0 10px 10px 0;
503}
504
505dl.block-add-calendar {
506        max-width: 290px;
507        min-height: 185px;
508        display: block;
509        float:right;
510        margin: 0 10px 10px 0;
511}
512
513dl.block-public-calendar {
514        max-width: 290px;
515        min-height: 30px;
516        display: block;
517        float:right;
518        margin: 0 10px 1px 0;
519}
520
521fieldset.block-add-user, .block-add-user li{
522        border: none;
523}
524
525fieldset.add-user-search{
526        margin: 0 0 5px 0;
527}
528
529dl.block-user-list{
530        float:left;
531        margin: 0 0 10px 10px;
532}
533
534dt.user-list{
535        width: 117px;
536        margin-right: 5px;
537}
538
539dt.calendar-list{
540        width: 144px;
541        margin-right: 5px;
542}
543
544dt.calendar-shared, dt.user-list, dt.add-user, dt.calendar-list, dt.calendar-public{
545        background-color: white;
546        margin: 5px 0 -6px 5px;
547        font-weight: bold;
548        display: table;
549        position: relative;
550}
551
552dd.add-user{height: 240px;}
553dd.add-user-calendar{height: 192px;}
554
555dd.calendar-public{height: 23px;}
556
557dd.add-user-calendar, dd.calendar, dd.user-list, dd.add-user, dd.calendar-list, dd.calendar-public{
558        border: 1px solid #BFBFBF;
559        border-image: initial;
560        width: 330px;
561        padding: 7px 0px 4px 4px;
562}
563
564dd.add-user-calendar ul{
565        width: 250px;
566        max-height: 166px;
567}
568
569dd.add-user-calendar, dd.add-user,  dd.calendar-public{
570        width: 250px;
571}
572
573div.shared-calendar fieldset.shared-calendar-configure{
574        margin-top: 10px;
575}
576
577.add-user fieldset.block-add-user{
578        width: 245px;
579}
580
581dd.user-list{
582        height: 193px;
583}
584
585dd.calendar-list{
586        height: 240px;
587}
588
589.list-calendars { vertical-align: middle; }
590.list-calendars .cal-list-img { float: right; }
591.list-calendars .cal-list-options-btn {
592        width: 10px;
593        height: 10px;
594        display: inline;
595        float: right;
596        padding: 3px;
597        -webkit-border-radius: 4px;
598        -moz-border-radius: 4px;
599        border-radius: 4px;
600}
601
602ul.list-calendars li.list-calendars-item {
603        background-color: #F7FCFF;
604        border: 1px solid #ccc;
605        height: 15px;
606        line-height: 15px;
607        margin: 2px 0;
608        padding: 3px;
609        -webkit-border-radius: 4px;
610        -moz-border-radius: 4px;
611        border-radius: 4px;
612}
613
614ul.list-calendars li li { background-color: #fff; }
615ul.list-calendars li label { vertical-align: middle; }
616ul.list-calendars li input { vertical-align: middle; }
617ul.list-calendars li a { vertical-align: middle; }
618ul.list-calendars li.list-calendars-item .cal-list-options ul.fg-menu li { background-color: #CC0000 !important; color: red !important; }
619
620
621/* -- event list styles -- */
622
623.events-list-win.empty {
624        line-height: 270px;
625    text-align: center;
626    width: 100%;
627}
628
629.events-list-win a {
630        font-size:12px;
631}
632.details-event-list p.input-group { margin: 7px 0 0 0; text-align: justify; }
633.details-event-list p.input-group label { font-weight: bold; width: 14% }
634.details-event-list p.input-group .large { width: 85%; }
635.fields-details-event-list {
636        padding: 5px;   
637}
638
639.list-events-paginator .fc-header-title{margin-left: 150px; font-size: 1em;}
640.header-paginator{margin-top: -15px;}
641.header-paginator .fc-button-content{font-size: 11px;}
642.header-paginator-right{font-size: 11px;}
643.header-paginator .fc-header-left .fc-button-inner{height: 20px; width: 29px;}
644.header-paginator .fc-header-left .fc-button-inner.fc-state-hover{border-color: #999;}
645.header-paginator .fc-header-left .fc-button-inner.fc-state-down{border-color: #555; background: #777;}
646.header-paginator .fc-header-left .fc-button-inner .fc-button-content{line-height: 1.6em; padding: .2em .6em; font-size: 11px;}
647
648/* -- all tips general and specific styles -- */
649
650.qtip-content fieldset { text-align: right;}
651.qtip-content fieldset input { text-align: left; width: 190px;}
652.qtip-content .menu-container.footer-container { background-color: inherit; text-align: right; padding: 0; margin:5px 0 0 0;}
653.qtip-content .menu-container.footer-container .ui-button-text-only .ui-button-text {
654    font-size: 0.8em;
655    padding: 0.1em 0.6em;
656}
657.qtip-title .ui-button-icon-only {
658    height: 1.5em !important;
659    width: 1.5em !important;
660}
661.qtip-title .qtip-button { margin: -5px -10px 0 -15px }
662.attendee-list-add .add-attendee-input input { width: 370px; }
663
664.qtip-content .add-attendee-search { max-width: 155px; width:155px; display: inline; padding: 0; margin: 10px 0 5px 0;}
665.qtip-content .add-attendee-search input { max-width: 125px; }
666
667/* -- other general styles -- */
668
669.event-alarms-list .button.remove,
670.configurations-alarms .button.remove {
671    left: 6px;
672    top: 6px;
673}
674
675.button.add.button-add-attachment{margin: -9px 0 0 8px;}
676.button.upload{margin-bottom: 4px;}
677div.fileupload-buttonbar{padding: 0.2em 0.5em }
678.archive-error{color: #F00;}
679
680.progress.in-progress{width: 100px; height: 12px;}
681
682
683.lbl-archive-nome, .lbl-archive-size{font-weight: bold !important;}
684.lbl-archive-nome{width:40px !important;}
685.row.fileupload-buttonbar{margin-top: -14px; padding: 0.2em 0.7em;}
686
687.archive-nome{width: 73px;}
688.archive-nome label{display: block; position: absolute; left: 136px; top: 194px;}
689.archive-size{min-width:70px; max-width:75px;}
690
691
692.input-group.date-info input {
693        width: 100px;
694}
695
696.input-group.event-info input {
697        width: 600px;
698}
699
700/* -- alarm dysplay -- */
701
702.new-event-alarm{
703        margin: 5px;   
704        font: bold;
705}
706
707.title-event-alarm{
708        margin: 5px;
709}
710
711.description-event-alarm{
712        margin: 5px;
713}
714
715.inicialize-event-alarm{
716        margin: 5px;
717}
718
719.ZebraDialog{
720        z-index: 9999 !important;
721}
722
723.ZebraDialogOverlay{
724        z-index: 9990 !important;
725}
726
727/* CANDIDATOS A EXCLUSÃO */
728/*
729#external-events {
730        float: left;
731        width: 150px;
732        padding: 0 10px;
733        border: 1px solid #ccc;
734        background: #eee;
735        text-align: left;
736}
737
738#external-events h4 {
739        font-size: 16px;
740        margin-top: 0;
741        padding-top: 1em;
742}
743
744.external-event {
745        margin: 10px 0;
746        padding: 2px 4px;
747        background: #3366CC;
748        color: #fff;
749        font-size: .85em;
750        cursor: pointer;
751}
752
753#external-events p {
754        margin: 1.5em 0;
755        font-size: 11px;
756        color: #666;
757}
758
759#external-events p input {
760        margin: 0;
761        vertical-align: middle;
762}
763
764#dialog label, #dialog input { display:block; }
765#dialog label { margin-top: 0.5em; }
766#dialog input, #dialog textarea { width: 95%; }
767        */
Note: See TracBrowser for help on using the repository browser.