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

Last change on this file since 12881 was 12881, checked in by rvelices, 12 years ago

revert css name change from previous commit

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