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

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

feature 2038: simplification of CSS rules

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