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

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

got rid of the last three very inefficient css rules

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