source: trunk/themes/default/theme.css @ 8119

Last change on this file since 8119 was 8119, checked in by rvelices, 13 years ago

css sprites - almost done - still to implement nice colors and hover effect for clear and sylvia

  • Property svn:eol-style set to LF
File size: 13.9 KB
Line 
1@import "iconset.css";
2/**
3 * Menubar
4 */
5#menubar {
6        float: left;
7        margin: 0 0 10px 1em;
8        padding: 0;
9        display: inline;
10        width: 18em;
11}
12
13#menubar DL, #menubar DT, #menubar DD {
14        margin: 0; padding: 0; display: block;
15}
16
17#menubar .button {
18        margin: -2px 2px 2px;
19        width: auto;
20        padding: 0;
21        text-indent: 0;
22        list-style: none;
23        text-align: center;
24        float: right;
25}
26
27/* H2 properties copied here */
28#menubar DT {
29        font-weight: bold;
30        padding: 5px;
31        font-size: 120%;
32        text-align: center;
33}
34
35#menubar UL,
36#menubar FORM,
37#menubar P {
38        font-size: 92%;
39        margin: 10px 0 10px 5px;
40}
41#menubar UL {
42        list-style-type: square;
43        list-style-position: inside;
44        padding: 0 0 0 2px;
45}
46#menubar UL UL {
47        font-size: 100%;
48        margin-top: 0;
49        margin-bottom: 0;
50}
51
52/*IE6 needs override because of > selector*/
53#menubar LI.selected>A {
54        font-weight: bold;
55}
56
57#menubar .menuInfoCatByChild {
58        font-size: 80%;
59        font-style: italic;
60}
61
62#menubar INPUT {
63        text-indent: 2px;
64}
65
66/* quickconnect form */
67FORM#quickconnect {
68        margin: 5px;
69        padding: 0;
70}
71
72FORM#quickconnect FIELDSET {
73        margin: 0;
74        padding: 0; /*IE6 requires padding 0*/
75}
76
77FORM#quickconnect FIELDSET DIV {
78        margin: 8px 5px;
79        padding: 0;
80}
81
82#menubar #menuTagCloud {
83        text-align: center;
84        margin: 5px 0;
85}
86
87#menubar #menuTagCloud SPAN {
88        white-space: nowrap;
89        margin-right: 5px;
90}
91
92/**
93 * Content
94 */
95.content {
96        margin: 1em;
97}
98
99#theCategoryPage .content
100{
101        margin-left: 20em;  /* = #menubar width + 2em */
102}
103
104.content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/
105
106.content .navigationBar, .content .additional_info, .content .calendarBar {
107        margin: 8px 4px;
108        text-align: center;
109}
110
111.content .pageNumberSelected {
112        font-style: italic;
113        font-weight: bold;
114}
115
116.content .additional_info {
117        font-size: 110%;
118}
119
120.content DIV.titrePage {
121        padding: 0 0 3px;
122}
123
124/* actions */
125UL.categoryActions {
126        margin: 0 2px;
127        width: auto;
128        padding: 0;
129        text-indent: 0;
130        list-style: none;
131        text-align: center;
132        float: right;
133}
134
135UL.categoryActions LI {
136        display: inline;
137}
138
139/* begin chronology/calendar elements*/
140.content .calendarViews {
141        display: block;
142        float: right;
143        margin: 2px 0 0;
144}
145
146.calItem, .calItemEmpty {
147        font-weight: bold;
148        margin: 0 1px;
149        border: 1px solid gray;
150}
151
152.calItem A { border:0 }
153
154.content .calendarCalBar {
155        margin: 10px;
156        text-align: left;
157}
158
159.calCalHead {
160        font-weight: bold;
161        font-size: 110%;
162        margin: 0 2px;
163}
164
165.calCal { margin: 0 2px; }
166
167/* nice looking month calendar*/
168TABLE.calMonth {
169        border: 0;
170        border-collapse: collapse;
171        margin-bottom: 10px;    /*<-IE ignores this */
172}
173
174TD.calDayCellFull, TD.calDayCellEmpty {
175        vertical-align: top;
176        font-weight: bold;
177        font-size: 18px;
178        border: 1px solid gray;
179}
180
181TD.calDayHead {
182  font-weight: bold;
183  font-size: 12px;
184        text-align: center;
185}
186
187.calImg {
188        overflow: hidden;
189        vertical-align: bottom;
190        z-index: 1;
191        position: relative; /*<- this required by IE*/
192}
193
194.calImg IMG {
195        position: relative;
196        border: 0;
197}
198
199.calBackDate {
200        padding-left: 4px;
201        padding-top: 0;
202        z-index: 2;
203        position: absolute;
204        vertical-align: top;
205        color: #000;
206}
207
208.calForeDate {
209        padding-left: 5px;
210        padding-top: 1px;
211        z-index: 3;
212        position: absolute;
213        vertical-align: top;
214        color: #fff;
215}
216
217/* Category thumbnails on main page, CSS code inspired from MOD subcatify */
218.content UL.thumbnailCategories {
219        margin: 0;
220        padding: 0;
221        list-style: none;
222        overflow: hidden;
223        width: 100%;
224}
225
226.content UL.thumbnailCategories LI {
227        margin:0;
228        padding:0;
229        float:left;
230}
231
232.content DIV.thumbnailCategory {
233        display:block;
234        padding: 2px 0 0 2px;
235        margin: 5px;
236}
237
238.content DIV.thumbnailCategory DIV.description {
239        font-size: 90%;
240        overflow: auto;
241        /*width: inherit;*/
242}
243
244.content DIV.thumbnailCategory DIV.description H3 {
245        text-align: left;
246        background: transparent;
247        margin: 0;
248        padding: 0.1em;
249        font-size: 120%;
250}
251
252.content DIV.thumbnailCategory DIV.description P {
253        margin: 0;
254}
255
256.content DIV.thumbnailCategory DIV.illustration {
257        text-align: left;
258        margin: 2px 0 0 2px;
259        float: left;
260}
261
262
263/* User comments */
264DIV#comments {
265        padding-left: 5px;
266        padding-right: 5px;
267}
268
269DIV#comments DIV.description {
270        font-size: 100%;
271}
272
273/* Thumbnails */
274UL.thumbnails SPAN.thumbLegend {
275        font-size: 90%;
276        overflow: hidden;/* oversized legend is clipped */
277}
278
279/* Thumbnail "elastic" layout */
280UL.thumbnails {
281        margin: 0;
282        padding: 0;
283        list-style: none;
284        text-align: center;     /* to center the whole collection in .content */
285}
286UL.thumbnails LI { display: inline }
287
288UL.thumbnails SPAN.wrap1 {
289        margin: 0 5px 5px 5px;
290        display: table-cell; display: inline-table;
291        display: inline-block;/* Why 3 display option ??? */
292        vertical-align: top;    /* OK with Opera and IE6 not Geko */
293        text-align: center;             /* to center the thumbnail and legend in Geko/Opera */
294}
295UL.thumbnails SPAN.wrap2 {
296        margin: 0;                      /* important reset the margins */
297        display: table-cell;/* block prevents vertical-align here */
298        vertical-align: middle;/* Ok with Opera and Geko not IE6 */
299        border-radius: 4px;     /* round corners with CSS3 compliant browsers */
300        -moz-border-radius: 4px;        /* round corners with Geko */
301        -webkit-border-radius: 4px; /* Safari webkit project */
302}
303UL.thumbnails SPAN.wrap2 A,
304UL.thumbnails LABEL {
305        display: block;
306        border-bottom: 0;
307}
308UL.thumbnails IMG {
309        margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
310}
311
312/**
313 * Picture
314 */
315#imageHeaderBar {
316        padding-top: 2px;
317        padding-bottom: 2px;
318        margin-top: 4px;
319        overflow: hidden;
320        width: 100%;
321}
322
323#imageHeaderBar .browsePath {
324        float: left;
325        margin-left: 10px;
326}
327
328#imageHeaderBar .imageNumber {
329        float: right;
330        margin-right: 10px;
331}
332
333#imageHeaderBar H2 {
334        text-align: center;
335        padding: 0;
336        clear: both;
337}
338
339#imageToolBar {
340        text-align: center;
341        clear: both;
342        margin-bottom: 4px;
343        padding: 0;
344        height: 28px;
345}
346
347#imageToolBar .actionButtons { float: left; }
348#imageToolBar .navigationButtons   { float: right; }
349#imageToolBar .pwg-button {width:42px;}
350
351
352#theImage {
353        clear: left;
354        text-align: center;
355}
356
357#theImage>IMG {
358        display: block;
359        margin: 0 auto;
360        border: 0;
361}
362
363#linkPrev {
364        float: left;
365        margin-right: 10px;
366        margin-left: 5px;
367}
368
369#linkNext {
370        float: right;
371        margin-right: 5px;
372        margin-left: 10px;
373}
374
375TABLE.infoTable .label {
376        font-weight: bold;
377        text-align: right;
378        padding-right: 0.5em;
379}
380
381TABLE.infoTable TD.value UL {
382        margin: 0;
383        padding: 0 0 0 1.5em;
384        list-style-type: square;
385}
386
387.thumbnailCategories LI { list-style: none; }
388
389.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty  {
390        padding:0;
391        border:0;
392        color:inherit;
393        background-color:transparent !important;        /* Konqueror doesn't accept transparent here */
394}
395
396.rateButton, .rateButtonStarFull, .rateButtonStarEmpty {
397        cursor: pointer;
398}
399
400.rateButtonSelected {
401        font-weight:bold;
402        font-size:120%;
403}
404
405.rateButtonStarFull {
406        background: url('icon/rating-stars.gif') no-repeat scroll; background-position:-16px center; width:16px;
407}
408
409.rateButtonStarEmpty {
410        background: url('icon/rating-stars.gif') no-repeat scroll; background-position:0 center; width:16px;
411}
412
413
414/**
415 * Default Layout
416 */
417BODY {
418        margin: 5px;
419        padding: 0;
420        font-size: 0.8em;
421        font-family: Arial,Helvetica,sans-serif;
422        min-width: 60em;  /* ~ 3* #menubar width; width of the page before getting a scrollbar; IE6 doesn't get that*/
423}
424
425#thePopuphelpPage {
426        min-width: 0; /*reset the min width*/
427}
428
429
430H1 {
431        text-align: center;
432        font-size: 150%;
433        font-weight: bold;
434        padding: 0;
435        margin: 0.5em 0 1em 0;
436}
437
438H2 {
439        margin: 0;
440        padding: 5px 0.5em;
441        text-align: left;
442        font-size: 120%;
443}
444
445A {
446        text-decoration:none;
447}
448A:hover {
449        border-bottom: 1px solid #858460;
450}
451
452IMG {
453        border: 0;
454}
455
456HR.separation {
457        visibility: hidden;
458        clear: both;
459}
460
461#copyright {
462        clear: both;
463        font-size: 83%;
464        text-align: center;
465        margin: 0 0 10px 0;
466}
467
468INPUT, SELECT {
469        margin: 0;
470        font-size: 1em; /* <= some browsers don't set it correctly */
471}
472
473TABLE { /* horizontaly centered */
474        margin-left: auto;
475        margin-right: auto;
476}
477
478
479FORM { padding: 0; margin: 0; }
480
481FORM P {
482        text-align: center;
483        margin-top: 2em;
484        margin-bottom: 2em;
485}
486
487FORM FIELDSET P {
488        margin-top: 1em;
489        margin-bottom: 0;
490}
491
492SELECT.categoryList {
493        height: 20em;
494        width: 500px;
495}
496
497
498/**
499 * Filter forms are displayed label by label with the input (or select...)
500 * below the label. Use an UL to make a group (radiobox for instance).
501 * Use a SPAN to group objects in line
502 */
503FIELDSET {
504        padding: 1em;
505        margin: 1em;
506        overflow: hidden; /* <- makes Opera happy */
507}
508
509FORM.filter FIELDSET UL {
510  margin: 0;
511}
512FORM.filter FIELDSET UL,
513FORM.filter FIELDSET LABEL {
514        display: block;
515        float: left;
516        margin-right: 1em;
517        padding: 0;
518}
519
520FORM.filter FIELDSET LI {
521        list-style: none;
522        margin-bottom: 0.5em;
523}
524
525FORM.filter FIELDSET LI LABEL {
526        display: inline;
527        float: none;
528}
529
530FORM.filter FIELDSET UL.tagSelection LABEL {
531        display: inline;
532        float: none;
533        margin-right:0.5em;/*reduce from above*/
534}
535
536/* cannot use FIELDSET>LABEL because of IE<=6 */
537FORM.filter FIELDSET LABEL INPUT,
538FORM.filter FIELDSET LABEL SELECT,
539FORM.filter FIELDSET LABEL SPAN,
540FORM.filter FIELDSET LABEL TEXTAREA {
541  display: block;
542  margin: 0.5em 0;
543}
544FORM.filter FIELDSET * LABEL INPUT,
545FORM.filter FIELDSET * LABEL SELECT,
546FORM.filter FIELDSET * LABEL TEXTAREA,
547FORM.filter FIELDSET LABEL SPAN INPUT,
548FORM.filter FIELDSET LABEL SPAN SELECT,
549FORM.filter FIELDSET LABEL SPAN TEXTAREA {
550        display: inline;
551        vertical-align: top;
552        margin: 0 0.5em 0 0;
553}
554
555FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT {
556        margin-right:0;
557}
558
559/* following declaration is important to avoid strange FF behaviour */
560FORM.filter FIELDSET LABEL SPAN SELECT {
561        margin: 0;
562}
563
564FORM.filter FIELDSET P
565{
566        clear: left;
567        display: block;
568}
569
570FORM.filter INPUT[type="submit"] {
571        margin-top: 1em;
572}
573
574FORM.properties UL {
575        list-style-type: none;
576        margin: 0;
577        padding: 0;
578}
579
580FORM.properties LI {
581        margin-bottom: 0.5em;
582        padding: 0;
583        line-height: 1.8em;
584        clear: left;
585}
586
587FORM.properties SPAN.property {
588        font-weight: bold;
589        float: left;
590        width: 50%;
591        text-align: right;
592        margin: 0;
593        padding: 0 0.5em 0 0;
594}
595
596/* button tools */
597UL.actions {
598        text-indent: 0;
599        list-style: none;
600}
601UL.actions LI {
602        display: inline;
603}
604UL.actions A, UL.actions IMG {
605        border: none;
606}
607
608UL.tagSelection {
609        width: 99%;
610        margin: 1em 0;
611        padding: 0;
612}
613
614UL.tagSelection LI {
615        display:inline-block;
616        width:150px!important;
617        overflow:hidden;
618        white-space: nowrap;
619}
620
621#fullTagCloud {
622        font-size: 120%;
623        text-align: justify;
624        padding: 0;
625        margin: 1em 2em;
626}
627
628#fullTagCloud SPAN {
629        white-space: nowrap;
630        margin: 0 2px;
631}
632
633
634.tagLevel5 { font-size: 150% !important; }
635.tagLevel4 { font-size: 140% !important; }
636.tagLevel3 { font-size: 120% !important; }
637.tagLevel2 { font-size: 100% !important; }
638.tagLevel1 { font-size: 90%  !important; }
639
640
641/* Popup help page */
642#thePopuphelpPage #copyright {
643        display: none;
644}
645
646#thePopuphelpPage P, #theNotificationPage P {
647        padding: 0.5em;
648}
649
650#theNotificationPage DL, #thePopuphelpPage DL {
651        margin: 0 25px 25px; 
652}
653
654TR.tagLine {
655        border-bottom: 1px solid #ddd;
656}
657TD.nbEntries {
658        text-align: right;
659        font-style: italic;
660        font-size: 90%;
661}
662
663FIELDSET.tagLetter {
664        border: 1px solid #d3d3d3;
665        width: 200px;
666        margin: 0.5em;
667        padding: 10px;
668}
669
670LEGEND.tagLetterLegend {
671        border: 1px solid #d3d3d3;
672        font-size:120%;
673        font-weight: bold;
674        padding: 0 5px;
675        font-style: normal;
676}
677
678TABLE.tagLetterContent {
679        width:100%;
680        font-size:80%;
681        border-collapse : collapse;
682}
683
684#theHeader {text-align: center;}
685
686.content #comments UL.thumbnailCategories LI { width:99%; }
687
688/* jQuery datepicker */
689IMG.ui-datepicker-trigger {
690        cursor : pointer;
691}
692
693/* Set some sizes according to your maximum thumbnail width and height */
694UL.thumbnails SPAN,
695UL.thumbnails SPAN.wrap2 A,
696UL.thumbnails LABEL,
697.content DIV.thumbnailCategory DIV.illustration {
698  width: 140px;      /* max thumbnail width + 2px */
699}
700UL.thumbnails SPAN.wrap2,
701.content DIV.thumbnailCategory DIV.description {
702  height: 140px;    /* max thumbnail height + 2px */
703}
704
705
706/* Category thumbnails on main page */
707.content UL.thumbnailCategories LI {
708  width: 49.7%;    /* 49.7% for 2 per line, 33.2% for 3 per line*/
709}
710
711/* Set defaults for thumbnails legend */
712UL.thumbnails SPAN.thumbLegend {
713  display: block;  /* display: none; if you don't want legend */
714  height: 4em;    /* legend height (don't set auto to be Gecko friendly)*/
715}
716
717/**
718 * Default colors
719 */
720
721 /* So that non-links are slightly greyed out */
722.content .navigationBar, .calItemEmpty, TD.calDayCellEmpty {
723        color: #b0b0b0;
724}
725
726/* Tables & forms */
727/* IE <= 6 is so bad with this that you can't merge with the following rule */
728INPUT[type="text"], INPUT[type="password"], INPUT[type="button"],
729INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {
730        color: #000;
731        background-color: #d3d3d3;      /* lightgrey */
732}
733
734INPUT.text, INPUT.password, INPUT.button,
735INPUT.submit, INPUT.reset, INPUT.file,
736SELECT, TEXTAREA {
737        color: #000;
738        background-color: #d3d3d3;      /* lightgrey */
739}
740
741INPUT:focus, SELECT:focus, TEXTAREA:focus, INPUT.focus, FORM .focus {
742        background-color: #f5f5f5;      /* whitesmoke */
743}
744
745/* some theme set a border on INPUT  which is not pretty for radio/checkbox */
746INPUT[type="radio"], INPUT[type="checkbox"] {
747        border: none;   /* <= Opera needs this */
748}
749
750INPUT.radio, INPUT.checkbox {
751        border: none;   /* <= IE6 needs this */
752}
753
754
755.errors { /* Errors display */
756        color: red;
757        background-color: #ffe1e1;
758        font-weight: bold;
759        margin: 5px;
760        border: 1px solid red;
761        background-image: url(icon/errors.png);
762        background-repeat: no-repeat;
763        background-position: top right;
764        padding: 10px 50px 10px 10px;
765}
766
767/* Informations box */
768.infos {
769        color: #002000;
770        background-color: #98fb98; /* palegreen */
771        background-image: url(icon/infos.png);
772        background-repeat: no-repeat;
773        background-position: top right;
774        margin: 5px;
775        padding: 10px 50px 10px 10px;
776}
777
778/* Header message like upgrade or adviser mode */
779.header_msgs {
780        text-align:center;
781        font-weight: bold;
782        color:#696969;  /* dimgray */
783        background-color: #d3d3d3;
784        margin: 1px;
785        padding: 1px;
786}
787
788/* Header notes box */
789.header_notes {
790        border: 1px solid #aaa;
791        text-align: center;
792        background-image: url(icon/note.png);
793        background-repeat: no-repeat;
794        background-position: top left;
795        font-weight: bold;
796        margin: 14px;
797        padding: 5px 0 0 0;
798}
799
800LEGEND {
801        font-style: italic;
802}
803
804#piwigoAbout {width:600px;margin:0 auto;}
805#linkToPiwigo {text-align:center;}
806
Note: See TracBrowser for help on using the repository browser.