source: trunk/admin/themes/default/default-layout.css @ 5293

Last change on this file since 5293 was 5293, checked in by patdenice, 14 years ago

Feature 1533: Change "General" by "Options" in Configuration menu.
Change "Default Display" tab by "Guest Settings" tab.
Add display tab in Configuration/Option menu.

Allow to activate/deactivate a lot of display features:

On main page:
# Display only recently posted images
# Sort order
# Display all elements in all sub-categories
# Display a calendar by posted date
# Display a calendar by creation date
# Slideshow

On photo page:
# Show file metadata
# slideshow
# Add this image to your favorites
# Navigation Bar
# Navigation Thumbnails

  • Property svn:eol-style set to LF
File size: 17.1 KB
Line 
1
2/* History tables */
3TABLE.table2 {
4        border: 1px solid #111;
5        margin: 1em auto;
6        padding: 0;
7}
8
9TABLE.table2 TD, TABLE.table2 TH {
10        padding: 0 5px;
11}
12
13TABLE.table2 TR {
14        text-align: left;
15}
16
17TABLE.table2 THEAD TD { padding:7px 10px 3px 10px; }
18TABLE.table2 TR.throw { text-align: center; }
19TABLE.table2 { margin:0pt auto; }
20.sort { display:block; padding:8px 5px 0px 1px; clear: right; text-align:left; }
21
22
23.hour {
24        white-space: pre;
25}
26
27.number {
28        text-align: right;
29}
30
31TABLE#dailyStats {
32        width: 60%;
33}
34
35TABLE#detailedStats {
36        width: 99%;
37}
38
39/* Plugins tables */
40TABLE.plugins { min-width: 400px; }
41TABLE.plugins A { border: 0; }
42TABLE.plugins TR TD { padding: 4px 10px; }
43TABLE.plugins TR TD.pluginState { padding: 4px 16px; }
44
45TABLE.plugins TR TD.active {
46        background: url(icon/plugin_active.gif) no-repeat center left;
47        background-color: inherit; /* IE need it */
48}
49
50TABLE.plugins TR TD.inactive {
51        background: url(icon/plugin_inactive.gif) no-repeat center left;
52        background-color: inherit; /* IE need it */
53}
54
55TABLE.plugins ul.pluginsActions {
56        float: left;
57        padding: 0;
58        margin: 0;
59        width: 60px;
60        list-style: none;
61        text-align: center;
62}
63
64TABLE.plugins ul.pluginsActions li { display: inline; }
65
66/* categoryOrdering */
67SELECT.categoryList {
68        width: 100%;
69}
70 
71FORM#categoryOrdering {
72        padding-left: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
73        padding-right: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
74}
75FORM#categoryOrdering p {
76        text-align: left;
77        margin-top: 1em;
78        margin-bottom: 1em;
79}
80UL.categoryUl {
81        list-style: none;
82        padding: 0;
83        margin: 0;
84}
85
86LI.categoryLi {
87        width: 100%;
88        border: 1px solid #666;
89        padding: 0px 5px;
90        margin-bottom: 5px;
91}
92
93FORM#categoryOrdering UL.categoryActions {
94        float: right;
95        margin-top: 5px;
96}
97/* */
98
99FORM#catModify TABLE { width: auto; }
100
101FIELDSET.elementEdit A {
102        display: block;
103        float: right;
104}
105
106TABLE.doubleSelect {
107        text-align: center;
108        margin: 0 auto;
109        width: 100%;
110}
111
112TABLE.doubleSelect TD {
113        padding: 0 3px;
114        width: 50%;
115}
116
117TABLE.doubleSelect SELECT.categoryList {
118        width: 100%; max-width: 100%; overflow-x: auto;
119}
120
121FORM#categoryPermissions LI {
122        display:inline;
123        white-space: nowrap;
124}
125
126FIELDSET#mainConfCheck SPAN.property,
127FIELDSET#historyConf SPAN.property,
128FIELDSET#commentsConf SPAN.property,
129FIELDSET#uploadConf SPAN.property,
130FIELDSET#indexDisplayConf SPAN.property,
131FIELDSET#pictureDisplayConf SPAN.property {
132        float: right;
133        text-align: left;
134}
135FIELDSET#mainConfCheck INPUT,
136FIELDSET#historyConf INPUT,
137FIELDSET#commentsConf INPUT,
138FIELDSET#uploadConf INPUT,
139FIELDSET#indexDisplayConf INPUT,
140FIELDSET#pictureDisplayConf INPUT {
141        float: none;
142}
143
144FIELDSET#mainConf SPAN.property {
145        width: 25%;
146}
147FIELDSET#mainConf TEXTAREA.description {
148        width: 70%;
149}
150
151FIELDSET#mainConfCheck SPAN.property,
152FIELDSET#historyConf SPAN.property,
153FIELDSET#indexDisplayConf SPAN.property,
154FIELDSET#pictureDisplayConf SPAN.property {
155        width: 90%;
156}
157FIELDSET#mainConfCheck INPUT,
158FIELDSET#historyConf INPUT,
159FIELDSET#commentsConf INPUT,
160FIELDSET#indexDisplayConf INPUT,
161FIELDSET#pictureDisplayConf INPUT {
162        margin-left: 5%;
163}
164FIELDSET#uploadConf SELECT {
165        float: right;
166        margin: 2px 10px 0px;
167}
168FIELDSET#uploadConf INPUT {
169        float: right;
170        margin: 5px 10px 0px;
171}
172FIELDSET#uploadConf SPAN.property {
173        width: 65%;
174}
175FIELDSET#commentsConf SPAN.property {
176        width: 85%;
177}
178
179.statBar {
180        height: 10px;
181        background-color: #ff7700;
182        border: 1px solid #666;
183}
184
185.over{
186position: relative;
187z-index: 0;
188}
189
190.over:hover{
191background-color: transparent;
192z-index: 50;
193}
194
195.over SPAN{ /*CSS for enlarged image*/
196position: absolute;
197background-color: #222;
198padding: 5px;
199left: -1000px;
200border: 1px solid #ff3363;
201visibility: hidden;
202color: black;
203text-decoration: none;
204}
205
206.over SPAN IMG{ /*CSS for enlarged image*/
207border-width: 0;
208padding: 2px;
209}
210
211.over:hover SPAN{ /*CSS for enlarged image on hover*/
212visibility: visible;
213top: 0;
214left: 60px; /*position where enlarged image should offset horizontally */
215}
216
217BODY {
218        margin: 5px;
219        padding: 0;
220        font-size: 0.8em;
221        font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
222        text-align: center; /* be nice to IE5 */
223}
224
225H1 {
226color:#eee;
227letter-spacing:1px;
228text-align: left;
229font-size: 150%;
230font-weight: normal;
231font-style:italic;
232padding: 8px 0 0 10px;
233margin: 0;
234float:left;
235}
236
237#pwgHead {color:#aaa;}
238#pwgHead A {color:#ccc;}
239#pwgHead A:hover {color:#fff;border-bottom:1px solid #fff}
240#pwgHead A#instructions:hover {border:none;}
241
242#headActions {float:right; height:46px; line-height:46px; margin-right:10px;}
243
244A {
245        text-decoration:none;
246        border-bottom: 0;
247}
248A:hover {
249        border-bottom: 1px solid #FF3363;
250}
251A.button, A.button:hover { 
252        border: 0; 
253}
254IMG {
255        border: none;
256}
257
258HR.separation {
259        visibility: hidden;
260        clear: both;
261}
262
263/** General defaults **/
264INPUT, SELECT {
265        margin: 0;
266        font-size: 1em; /* <= some browsers don't set it correctly */
267}
268UL, DL, OL { text-align: left;}
269TABLE { /* horizontaly centered */
270        margin-left: auto;
271        margin-right: auto;
272}
273/* for debugging purpose */
274PRE { text-align:left; }
275
276/** forms **/
277
278FORM { padding: 0em; }
279
280FORM P {
281        text-align: center;
282        margin-top: 2em;
283        margin-bottom: 2em;
284}
285
286FORM FIELDSET P {
287        margin-top: 1em;
288        margin-bottom: 0;
289}
290
291.small {
292        font-size: 80%;
293}
294
295TEXTAREA.description {
296        height: 6em;
297        width: 40em;
298        overflow: auto;
299}
300
301SELECT.categoryList {
302        height: 20em;
303        width: auto;
304}
305
306DIV.comment BLOCKQUOTE {
307        padding: 0.5em;
308        overflow: auto; /* no solution for IE6 */
309        min-height: 2.75em;     /* fix a Gecko bug whith scrollbar and 1 line only */
310}
311
312
313/**
314 * Filter forms are displayed label by label with the input (or select...)
315 * below the label. Use an UL to make a group (radiobox for instance).
316 * Use a SPAN to group objects in line
317 */
318FIELDSET {
319        padding: 1em;
320        margin: 1em;
321        overflow: hidden; /* <- makes Opera happy */
322}
323
324FORM.filter FIELDSET UL {
325        margin: 0;
326}
327FORM.filter FIELDSET UL,
328FORM.filter FIELDSET LABEL {
329        display: block;
330        float: left;
331        margin-right: 1em;
332        padding: 0;
333}
334
335FORM.filter FIELDSET LI {
336        list-style: none;
337        margin-bottom: 0.5em;
338}
339
340FORM.filter FIELDSET LI LABEL {
341        display: inline;
342        float: none;
343}
344
345FORM.filter FIELDSET UL.tagSelection LABEL {
346        display: inline;
347        float: none;
348        margin-right:0.5em;/*reduce from above*/
349}
350
351/* cannot use FIELDSET>LABEL because of IE<=6 */
352FORM.filter FIELDSET LABEL INPUT,
353FORM.filter FIELDSET LABEL SELECT,
354FORM.filter FIELDSET LABEL SPAN,
355FORM.filter FIELDSET LABEL TEXTAREA {
356        display: block;
357        margin: 0.5em 0;
358}
359FORM.filter FIELDSET * LABEL INPUT,
360FORM.filter FIELDSET * LABEL SELECT,
361FORM.filter FIELDSET * LABEL TEXTAREA,
362FORM.filter FIELDSET LABEL SPAN INPUT,
363FORM.filter FIELDSET LABEL SPAN SELECT,
364FORM.filter FIELDSET LABEL SPAN TEXTAREA {
365        display: inline;
366        vertical-align: top;
367        margin: 0 0.5em 0 0;
368}
369
370FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT {
371        margin-right:0;
372}
373
374/* following declaration is important to avoid strange FF behaviour */
375FORM.filter FIELDSET LABEL SPAN SELECT {
376        margin: 0;
377}
378
379FORM.filter FIELDSET P
380{
381        clear: left;
382        display: block;
383}
384
385FORM.filter INPUT[type="submit"] {
386        margin-top: 1.8em;
387}
388
389FORM.properties UL, FORM#update UL {
390        list-style-type: none;
391        margin: 0;
392        padding: 0;
393}
394
395FORM.properties LI, FORM#update UL {
396        margin-bottom: 0.5em;
397        padding: 0;
398        line-height: 1.8em;
399        clear: left;
400}
401
402FORM.properties SPAN.property {
403        font-weight: bold;
404        float: left;
405        width: 50%;
406        text-align: right;
407        margin: 0;
408        padding: 0 0.5em 0 0;
409}
410
411#theHeader H1 {
412        margin-bottom: 0.5em;
413}
414
415/* button tools */
416UL.actions {
417        text-indent: 0;
418        list-style: none;
419}
420UL.actions LI {
421        display: inline;
422}
423UL.actions A {
424        border: none;
425}
426
427UL.tagSelection {
428        width: 99%;
429        margin: 1em 0 1em 0;
430        padding: 0;
431}
432
433UL.tagSelection LI {
434        display:inline-block;
435        width:150px!important;
436        overflow:hidden;
437        white-space: nowrap;
438}
439
440/* jQuery tooltips */
441.cluetip-default #cluetip-outer {
442        position: relative;
443        border: 1px solid #111111;
444        color: #dddddd;
445        background-color: #222222;
446        text-align: left;
447}
448.cluetip-default h3#cluetip-title {
449        margin: 0 0 5px;
450        padding: 8px;
451        color: #666666;
452        background-color: #d3d3d3;
453        font-size: 1.1em;
454        font-weight: bold;
455}
456.cluetip-default #cluetip-inner {
457        padding: 10px;
458}
459
460/* jQuery datepicker */
461img.ui-datepicker-trigger {
462        cursor : pointer;
463}
464
465/* jQuery FCBKcomplete */
466/* TextboxList sample CSS */
467ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; }
468*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
469ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;}
470ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; }
471ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
472ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
473ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */
474ul.holder li.bit-input input.smallinput { width: 20px; }
475
476/* Facebook demo CSS */     
477#add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; }
478form ol li { list-style-type: none; }
479form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; }
480form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; }
481form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; }
482form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; }
483form ul.holder { width: 500px; }
484form ul { margin: 0 !important }
485ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;}
486#apple-list ul.holder li.bit-input { margin: 0; }
487#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
488ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
489ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
490ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url(icon/fcbkcomplete_close.gif); }
491ul.holder li.bit-box a.closebutton:hover { background-position: 7px; }
492ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; }
493
494/* Autocompleter */
495
496.facebook-auto { display: none; position: absolute; width: 512px; background: #eee; }
497.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; }
498.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999}
499.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee }
500.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; }
501.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; }
502.facebook-auto ul li.auto-focus em { background: none; }
503.deleted { background-color:#4173CC !important; color:#ffffff !important;}
504.hidden { display:none;}
505
506#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; }
507.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;}
508
509/* Add photos, direct mode */
510#uploadBoxes P {
511  margin:0;
512  margin-bottom:2px;
513  padding:0;
514}
515
516#batchLink {
517  text-align:center;
518}
519
520.category_selection {
521  min-height:65px;
522  margin-top:5px;
523}
524
525.category_selection TABLE {
526  margin:0;
527}
528
529#photosAddContent FIELDSET {
530  width:650px;
531  margin:0 auto 20px auto;
532}
533
534#photosAddContent P {
535  margin:0;
536}
537
538#photosAddContent TH {
539  text-align:right;
540  padding-right: 5px;
541}
542
543#uploadFormSettings input[type="text"] {
544  text-align:right;
545}
546
547#uploadFormSettings TH {
548  width:50%;
549}
550
551#pwgHead {
552  background-color:#464646;
553  height:46px;
554}
555
556html, body {height:100%; margin:0; padding:0;}
557#the_page {min-height:100%; position:relative; padding:0;margin:0;}
558#pwgMain {padding:10px;padding-bottom:60px;}
559
560#footer {
561  position:absolute;
562  bottom:0;
563  width:100%;
564  height:46px;
565  background: url(images/logo.png) no-repeat bottom left;
566  background-color:#464646;
567  color:#aaa;
568  line-height:46px;
569}
570
571#footer A {color:#ccc;}
572#footer A:hover {color:#fff;border-bottom:1px solid #fff;}
573
574#adminHome {
575  text-align:center;
576  margin-bottom:15px;
577  line-height:30px;
578  width:200px;
579  margin-left:5px;
580  -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
581}
582
583#adminHome A {display:block; font-size:1.1em; font-weight:bold;}
584#adminHome A {border:none;}
585
586#piwigoInfos {float:left; margin-left:100px;}
587#pageInfos {float:right; margin-right:10px;}
588
589/* TipTip CSS - Version 1.2 */
590
591#tiptip_holder {
592        display: none;
593        position: absolute;
594        top: 0;
595        left: 0;
596        z-index: 99999;
597}
598
599#tiptip_holder.tip_top {
600        padding-bottom: 5px;
601}
602
603#tiptip_holder.tip_bottom {
604        padding-top: 5px;
605}
606
607#tiptip_holder.tip_right {
608        padding-left: 5px;
609}
610
611#tiptip_holder.tip_left {
612        padding-right: 5px;
613}
614
615#tiptip_content {
616        font-size: 11px;
617        color: #fff;
618        text-shadow: 0 0 2px #000;
619        padding: 4px 8px;
620        border: 1px solid rgba(255,255,255,0.25);
621        background-color: rgb(25,25,25);
622        background-color: rgba(25,25,25,0.92);
623        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
624        border-radius: 3px;
625        -webkit-border-radius: 3px;
626        -moz-border-radius: 3px;
627        box-shadow: 0 0 3px #555;
628        -webkit-box-shadow: 0 0 3px #555;
629        -moz-box-shadow: 0 0 3px #555;
630}
631
632#tiptip_arrow, #tiptip_arrow_inner {
633        position: absolute;
634        border-color: transparent;
635        border-style: solid;
636        border-width: 6px;
637        height: 0;
638        width: 0;
639}
640
641#tiptip_holder.tip_top #tiptip_arrow {
642        border-top-color: #fff;
643        border-top-color: rgba(255,255,255,0.35);
644}
645
646#tiptip_holder.tip_bottom #tiptip_arrow {
647        border-bottom-color: #fff;
648        border-bottom-color: rgba(255,255,255,0.35);
649}
650
651#tiptip_holder.tip_right #tiptip_arrow {
652        border-right-color: #fff;
653        border-right-color: rgba(255,255,255,0.35);
654}
655
656#tiptip_holder.tip_left #tiptip_arrow {
657        border-left-color: #fff;
658        border-left-color: rgba(255,255,255,0.35);
659}
660
661#tiptip_holder.tip_top #tiptip_arrow_inner {
662        margin-top: -7px;
663        margin-left: -6px;
664        border-top-color: rgb(25,25,25);
665        border-top-color: rgba(25,25,25,0.92);
666}
667
668#tiptip_holder.tip_bottom #tiptip_arrow_inner {
669        margin-top: -5px;
670        margin-left: -6px;
671        border-bottom-color: rgb(25,25,25);
672        border-bottom-color: rgba(25,25,25,0.92);
673}
674
675#tiptip_holder.tip_right #tiptip_arrow_inner {
676        margin-top: -6px;
677        margin-left: -5px;
678        border-right-color: rgb(25,25,25);
679        border-right-color: rgba(25,25,25,0.92);
680}
681
682#tiptip_holder.tip_left #tiptip_arrow_inner {
683        margin-top: -6px;
684        margin-left: -7px;
685        border-left-color: rgb(25,25,25);
686        border-left-color: rgba(25,25,25,0.92);
687}
688
689/* Webkit Hacks  */
690@media screen and (-webkit-min-device-pixel-ratio:0) { 
691        #tiptip_content {
692                padding: 4px 8px 5px 8px;
693                background-color: rgba(45,45,45,0.88);
694        }
695        #tiptip_holder.tip_bottom #tiptip_arrow_inner { 
696                border-bottom-color: rgba(45,45,45,0.88);
697        }
698        #tiptip_holder.tip_top #tiptip_arrow_inner { 
699                border-top-color: rgba(20,20,20,0.92);
700        }
701}
702
703/* Set the width of the menubar for the galery */
704#menubar {
705  width: 18em;
706}
707.content {
708  margin-left: 20em;  /* = #menubar width + 2em */
709}
710/* Set minimum width of the page before getting a scrollbar */
711/* IE5 and IE6 don't get that */
712BODY {
713  min-width: 60em;  /* ~ 3* #menubar width */
714}
715BODY#thePopuphelpPage {
716  min-width: 0;
717}
718
719/* Set some sizes according to your maximum thumbnail width and height */
720.content UL.thumbnails SPAN,
721.content UL.thumbnails SPAN.wrap2 A,
722.content UL.thumbnails LABEL,
723.content DIV.thumbnailCategory DIV.illustration {
724  width: 140px;      /* max thumbnail width + 2px */
725}
726.content UL.thumbnails SPAN.wrap2,
727.content DIV.thumbnailCategory DIV.description {
728  height: 140px;    /* max thumbnail height + 2px */
729}
730
731
732/* Category thumbnails on main page */
733.content UL.thumbnailCategories LI {
734  width: 49.7%;    /* 49.7% for 2 per line, 33.2% for 3 per line*/
735}
736
737/* Set defaults for thumbnails legend */
738.content UL.thumbnails SPAN.thumbLegend {
739  display: block;  /* display: none; if you don't want legend */
740  height: 4em;    /* legend height (don't set auto to be Gecko friendly)*/
741}
742
743.themeBox {display:inline-block; text-align:center; height:180px; background-color:#eee; margin:5px; -moz-border-radius:5px;}
744
745.themeBox IMG {border:1px solid white; margin:0 15px;}
746.themeName {font-size:1.1em; margin:5px 0;}
747.themeActions {margin:5px 0; font-size:12px;}
748.themeActions A {}
749
750#themesContent .themeBox IMG {width:150px; height:120px;}
751#themesContent H3 {font-size:16px; text-align:left; border-bottom:1px solid #444; letter-spacing:1px; margin:5px;}
752.themeBoxes {min-height:0;text-align:left;}
753
754h2 { letter-spacing:2px; font-weight:bold;}
755h2:lang(en) { text-transform:capitalize; }
756
757#pluginsMenuSeparator {width:80%; margin:5px auto;}
758
759#helpContent P {text-align:left; margin-left:10px;}
760#helpContent LI, #ftpPage LI {margin-top:10px;}
761#helpContent P.nextStepLink {text-align:center; font-weight:bold; margin-bottom:20px;}
762
763#configContent FIELDSET {border:none;}
Note: See TracBrowser for help on using the repository browser.