Dotclear

source: admin/style/default.css @ 1338:e1db18007775

Revision 1338:e1db18007775, 28.8 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

geek != sad -> Some more pretty css for about:config and user:preferences

Line 
1/*
2# -- BEGIN LICENSE BLOCK ---------------------------------------
3#
4# This file is part of Dotclear 2.
5#
6# Copyright (c) 2003-2013 Olivier Meunier & Association Dotclear
7# Licensed under the GPL version 2.0 license.
8# See LICENSE file or
9# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
10#
11# -- END LICENSE BLOCK -----------------------------------------
12*/
13
14/* ------------------------------------------------------------------ html */
15html {
16     font-size: 62.5%;
17}
18body {
19     font: 1.2rem/1.5 Arial,Helvetica,sans-serif;
20     color: #333;
21     background: #fff;
22     margin: 0;
23     padding: 0;
24}
25
26a, a:link, a:visited {
27     color: #2373A8;
28     text-decoration: none;
29     border-bottom: 1px dotted #f90;
30}
31a:hover, a:active, a:focus {
32     text-decoration: underline;
33}
34a img, a:link img, a:visited img { 
35     border:none;
36}
37
38h1, h2, h3, h4, h5, h6, p {
39     margin-top: 0;
40     margin-bottom: 1rem;
41}
42h2 {
43     color: #666;
44     font-size: 1.8rem;
45     padding: 0 0 1.8rem;
46     font-weight: normal;
47}
48h2 a:link, h2 a:visited {
49     color: #666;
50     border-color: #000;
51}
52.page-title {
53     color: #d30e60;
54}
55#content > h2 {
56     padding: 0 1.8rem .6rem;
57     margin: 0 -1.8rem 1rem;
58     background: #fff url(bg_h2.png) repeat-x center bottom;
59}
60h3 {
61     color: #575859;
62     font-size: 1.4rem;
63}
64p, div.p {
65     margin: 0 0 1em 0;
66}
67hr {
68     height: 1px;
69     border-width: 1px 0 0;
70     border-color: #999;
71     border-style: solid;
72}
73pre, code {
74     font: 100% "Andale Mono","Courier New",monospace;
75}
76pre {
77     white-space: pre;
78     white-space: -moz-pre-wrap;
79     white-space: -hp-pre-wrap;
80     white-space: -o-pre-wrap;
81     white-space: -pre-wrap;
82     white-space: pre-wrap;
83     white-space: pre-line;
84     word-wrap: break-word;
85}
86abbr {
87     cursor: help;
88}
89
90/* LAYOUT
91-------------------------------------------------------- */
92/* header */
93#header {
94     background: #575859;
95     position: relative;
96     border-bottom: 4px solid #A2CBE9;
97     width: 100%;
98}
99#prelude {
100     line-height: 1.9;
101     margin: 0;
102     padding: 0;
103     overflow: hidden;
104     position: absolute;
105     top: 3em;
106     left: 0;
107     background: #A2CBE9;
108     width: 14.5em;
109     }
110#prelude li {
111     list-style-type: none;
112     margin: 0;
113     background:transparent;
114}
115#prelude li a {
116     padding-left: 1.6rem;
117     background: #A2CBE9;
118     color: #000;
119     border-bottom-color: #A2CBE9;
120}
121#top {
122     margin: 0;
123     padding: 0;
124     width: 14.5em;
125     float: left;
126}
127#top h1 {
128     padding: 0;
129     margin: 0;
130     height: 3.6rem;
131     text-indent: -1000px;
132}
133#top h1 a {
134     position: absolute;
135     top: 0;
136     left: 0;
137     width: 17.4rem;
138     height: 3.6rem;
139     border: none;
140     color: #fff;
141}
142#top h1 a:link {
143     background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
144}
145#top h1 a:hover, #top h1 a:focus {
146     background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 -94px; 
147}
148#info-boxes {
149     font-size: 1em;
150     line-height: 3em;
151}
152#info-box1 {
153     margin: 0;
154     padding: 0 3px 0 1.8rem;
155     color: #fff;
156     display: inline-block;
157}
158#info-box2 {
159     margin: 0;
160     padding: 0 1.3em 0 0;
161     color: #fff;
162     float: right;
163     text-align: right;
164}
165#info-box1 p {
166     margin: 0;
167     display: inline;
168}
169#info-box1 select {
170     width: 14.5em;
171}
172#info-box1 a img, #info-box2 a img {
173     vertical-align: middle;
174     padding-left: .3em;
175     }
176#info-boxes a {
177     font-weight: bold;
178     color: #fff;
179     border-bottom-color: #ccc;
180     margin-left: .3em;
181     margin-right: .3em;
182     white-space: nowrap;
183     font-weight: normal;
184}
185#info-box1 a {
186     margin-left: 1.33em;
187}
188#info-box2 a.active {
189     border-bottom-color: #fff;
190     margin: 0;
191     padding: 1.2em .5em;
192     background-color: #fff;
193     color: #333;
194     font-weight: bold;
195}
196#info-box2 span {
197     color: #999;
198}
199/* main blocks */
200#wrapper {
201     width: 100%;
202}
203#main {
204     width: 100%;
205     float: right;
206     margin-left: -14.5em;
207     margin-top: 0;
208     background: #fff url(bg_menu.png);
209}
210#content {
211     margin: 0 0 0 14.5em;
212     padding: .9rem 1.8rem 1.8rem;
213     background: #fff;
214}
215     /* Micro clearfix thx to Nicolas Gallagher */
216     #content:before, #content:after {content:"";display:table;}
217     #content:after {clear:both;}
218/* -------------------------------------------------- layout - multipart */
219.three-cols {
220}
221.three-cols .col {
222     width: 32.3%;
223     float: left;
224     margin-left: 1%;
225}
226.three-cols .col:first-child {
227     width: 33.3%;
228     margin-left: 0;
229}
230.two-cols {
231     position: static;
232}
233.two-cols .col {
234     width: 49%;
235     margin-left: 2%;
236     float: left;
237}
238.two-cols .col:first-child {
239     width: 49%;
240     margin-left: 0;
241}
242.two-cols .col70{
243     width: 69%;
244     margin-left: 0;
245     float: left;
246}
247.two-cols .col30 {
248     width: 28%;
249     margin-left: 2%;
250     float: left;
251}
252/* -------------------------------------------------------------- layout - onglets */
253.part-tabs ul {
254     padding: .5em 0 .3em 1rem;
255     border-bottom: 1px solid #ccc;
256}
257.part-tabs li {
258     list-style: none;
259     margin: 0;
260     display: inline;
261}
262.part-tabs li a {
263     padding: .5em 1em;
264     margin-right: .5em;
265     border: 1px solid #ccc;
266     border-bottom: none;
267     background: #efefef;
268     text-decoration: none;
269     color: #000;
270     background-color:#ededed;
271}
272.part-tabs li a:hover, .part-tabs li a:focus {
273     color: #000;
274     background: #fff;
275     border-bottom-color: #fff;
276}
277.part-tabs li.part-tabs-active a {
278     background: #fff;
279     border: 1px solid #d30e60;
280     color: #d30e60;
281     font-weight: bold;
282     border-bottom-color: #fff;
283}
284/* ------------------------------------------------------------------ main-menu */
285#main-menu {
286     width: 14.5em;
287     float: left;
288     margin:0;
289     padding-top: .5em;
290     padding-bottom: 1em;
291     background: #f7f7f7;
292}
293#main-menu h3 {
294     margin: 0;
295     padding: 1.2rem 0 1rem 2.2rem;
296     text-indent: -1.6rem;
297     color: #666;
298     font-size: 1.4rem;
299}
300#main-menu h3 img[alt="cacher"] {
301     vertical-align: top;
302}
303#main-menu ul {
304     margin: 0 0 1.8rem 0;
305     padding: 0;
306     list-style: none;
307}
308#main-menu li {
309     display: block;
310     margin: 0.5em 0 0;
311     padding: .3rem 0 0 30px;
312     background-repeat: no-repeat;
313     background-position: 8px .3em;
314}
315#main-menu a {
316     color: #333;
317     border-bottom-color: #ccc;
318}
319#main-menu .active a {
320     border-bottom: none;
321     color: #d30e60;
322}
323#main-menu .active {
324     font-weight: bolder;
325}
326#search-menu {
327     padding: .3rem .4rem 0;
328     font-size: 100%
329}
330#search-menu p {
331     display: inline-block;
332     border: 1px solid #999;
333     border-radius: .6em;
334     position: relative;
335     height: 2rem;
336     overflow: hidden;
337}
338#search-menu #q {
339     width: 12rem;
340     border-bottom-left-radius: .6em;
341     border-top-left-radius: .6em;
342     background: transparent url(search.png) no-repeat 4px center;
343     text-indent: 18px;
344     height: 2rem;
345     padding: 0 2px; 
346     border: none;
347}
348#search-menu input[type="submit"] {
349     padding: 0 0.3rem;
350     background: #dfdfdf;
351     border-color: #999;
352     color: #666;
353     border-bottom-right-radius: .6em;
354     border-top-right-radius: .6em;
355     border-top-left-radius: 0;
356     border-bottom-left-radius: 0;
357     text-shadow: none;
358     height: 2rem;
359     border: none;
360     border-left: 1px solid #aaa;
361     font-size: 1rem;
362}
363#search-menu input[type="submit"]:hover,
364#search-menu input[type="submit"]:focus {
365     background: #575859;
366     color: #fff;
367}
368#favorites-menu, #blog-menu, #system-menu, #plugins-menu {
369     border-bottom: 1px dashed #A2CBE9;
370}
371#favorites-menu h3 {
372     color: #000;
373     font-variant: small-caps;
374}
375#favorites-menu a {
376     color: #333;
377}
378/* ------------------------------------------------------------------ footer */
379#footer {
380     clear: both;
381     padding: .6rem 1.2rem .6rem 0;
382     text-align: right;
383     border-top: .1rem solid #ccc;
384}
385#footer p {
386     margin: 0;
387     padding: 0 1em;
388     font-size: 1em;
389}
390#footer p span.credit {
391     font-size: 1rem;
392     font-weight: normal;
393}
394/* ---------------------------------------------------------------------------- auth.php */
395#login-screen {
396     display: block;
397     width: 18em;
398     margin: 1.5em auto 0;
399     font-size: 1.4rem;
400}
401#login-screen h1 {
402     text-indent: -2000px;
403     background: transparent url(dc_logos/w-dotclear240.png) no-repeat top left;
404     height: 66px;
405     margin-bottom: .5em;
406     margin-left: 0;
407}
408#login-screen fieldset, #login-screen .fieldset {
409     border: 1px solid #A8DC26;
410     padding: 1em 1em 0 1em;
411     border-radius: 4px;
412}
413#login-screen legend {
414     border: 1px solid #A8DC26;
415}
416#login-screen input[type=text], #login-screen input[type=password], #login-screen input[type=submit] {
417     width: 100%;
418}
419#login-screen #issue {
420     margin-left: 1.5rem;
421     font-size: 1.2rem;
422}
423#login-screen #issue strong {font-weight: normal;}
424
425
426/* ------------------------------------------------------------------ dashboard */
427#dashboard-main {
428     float: left;
429     overflow: hidden;
430     padding: 1em 2% 1em 0;
431     width: 70%;
432}
433#dashboard-main.fullwidth {
434     width: 100%;
435     padding: 1em 0;
436     float: none;
437}
438#icons {
439     overflow: hidden;
440     padding-bottom: 1em;
441     text-align: center;
442}
443#icons p {
444     width: 210px;
445     text-align: center;
446     margin: 2em 0;
447     display:inline-block;
448}
449#icons a,
450#icons a:link,
451#icons a:visited,
452#icons a:hover,
453#icons a:focus {
454     border-bottom-width: 0px;
455     text-decoration: none;
456}
457#icons a span {
458     border-bottom: 1px dotted #f90;
459}
460#icons a:focus span, #icons a:hover span {
461     text-decoration: underline;
462}
463#quick {
464     clear: left;
465     margin-top: 2em;
466}
467#quick h3 {
468     margin-bottom: 0.2em;
469     font-size: 1.2em;
470}
471#quick p.qinfo {
472     margin: -.7em -1em 1em;
473     background: #eef url(info.png) no-repeat .2em .2em;
474     border: 1px solid #99f;
475     padding: .2em 1em .1em 24px;
476     color: #666;
477}
478#dashboard-items {
479     float: left;
480     width: 27%;
481     overflow: hidden;
482     padding-bottom: 1em;
483     padding-top: 3em;
484}
485#dashboard-items img {
486     vertical-align: middle;
487}
488#dashboard-items ul {
489     display: block;
490     padding-left: 1.5em;
491     list-style: square;
492}
493#dashboard-items li {
494     margin: 0.25em 0 0 0;
495     color: #666;
496}
497#news dt {
498     font-weight: bold;
499     margin: 0 0 0.4em 0;
500}
501#news dd {
502     margin: 0 0 1em 0;
503}
504#news dd p {
505     margin: 0.2em 0 0 0;
506}
507
508#upg-notify {
509}
510#upg-notify ul {
511     padding-left: 15px;
512}
513#upg-notify li {
514     color: #fff;
515}
516/* ------------------------------------------------------------------ post */
517#entry-wrapper {
518     float: left;
519     width: 100%;
520     margin-right: -18em;
521}
522#entry-content {
523     margin-right: 19em;
524     margin-left: 1.2rem;
525}
526#entry-sidebar {
527     width: 17em;
528     float: right;
529}
530#comments {
531     clear: both;
532}
533/* ------------------------------------------------------------------ categories */
534#categories {
535     margin: 1em 0 2em;
536}
537#categories ul {
538     list-style: none;
539     margin: 0;
540     padding: 0;
541}
542#categories li {
543     margin: .5em 0;
544     padding: .3em 1.5em;
545     border: 1px solid #ccc;
546     border-left: 1em solid #E5E3DA;
547     border-radius: .3em;
548}
549#categories h4 {
550     margin: 0;
551}
552#categories h4 span {
553     font-weight: normal;
554}
555#categories li p {
556     margin: 0;
557}
558select#del_cat {
559     width: 100%;
560}
561/* ------------------------------------------------------------------ media */
562#media-icon {
563     float: left;
564}
565#media-details {
566     margin-left: 70px;
567}
568#media-details ul {
569     display: block;
570     margin-left: 0;
571     padding: 0;
572}
573#media-details li {
574     list-style: square inside;
575     margin: 0;
576     padding: 0;
577}
578#media-original-image {
579     overflow: auto;
580}
581#media-original-image.overheight {
582     height: 500px;
583}
584#add-file-f {
585     position: relative;
586}
587#add-file-f .more-file {
588     position:absolute;
589     right: 0.5em;
590     background: #999;
591     color: #fff;
592     border: none;
593}
594.media-list {
595     position: static;
596}
597.media-col-0 {
598     clear: left;
599}
600.media-item {
601     position: relative;
602     border-top: 1px solid #ccc;
603     margin-bottom: 1em;
604     padding: 5px 0;
605}
606div.media-list .media-item {
607     width: 49%;
608     float: left;
609     margin-right: 1%;
610}
611a.media-icon {
612     display: block;
613     border-bottom: none;
614     float: left;
615}
616.media-icon img {
617     display: block;
618}
619.media-item ul {
620     display: block;
621     list-style: none;
622     margin: 0 0 0 60px;
623     padding: 0;
624}
625li.media-action {
626     display: block;
627     position: absolute;
628     top: 5px;
629     right: 5px;
630     height: 16px;
631}
632li.media-action a {
633     border: none;
634}
635li.media-action form {
636     display: inline;
637}
638li.media-action input {
639     border: none;
640}
641/* ------------------------------------------------------------------ preferences */
642#my-favs ul {
643     list-style-type: none;
644     margin-left: 0;
645     padding-left: 0;
646     line-height: 1.2;
647}
648#my-favs li {
649     display: block;
650     float: left;
651     width: 164px;
652     margin-top: 1em;
653     margin-bottom: 1.5em;
654}
655#my-favs label {height: 2.5em;width:140px;margin-top:.3em;}
656#my-favs label input {display:inline;}
657#my-favs img {
658     display: block;
659}
660#my-favs input.position {
661     margin: 0 0 .4em .2em;
662}
663#available-favs input, #available-favs label, #available-favs label span {
664     white-space: normal;
665     display: inline;
666}
667#default-favs h3 {
668     margin-top: 2em;
669     margin-bottom: 1em;
670}
671.fav-list {
672     list-style-type: none;
673     margin-left: 0;
674     padding-left: 0;
675}
676.fav-list li {
677     line-height: 2;
678     margin-left: 0;
679     padding-left: 0;
680     position: relative;
681}
682.fav-list img {
683     vertical-align: middle;
684     margin-right: .2em;
685}
686#available-favs label span.zoom {
687     display: none;
688}
689#available-favs li:hover label span.zoom {
690     display: block;
691     position: absolute;
692     bottom: 0;
693     left: 10em;
694     background-color: #f5f5f5;
695     border: 1px solid #ddd;
696     padding: .2em;
697     border-radius: .5em;
698}
699/* -------------------------------------------------------------------- Themes */
700#themes {
701     border-bottom: 1px solid #ccc;
702     margin: 1em 0;
703}
704#themes div.theme-details {
705     clear: left;
706     border-top: 1px solid #ccc;
707     padding: 1em 0;
708}
709#themes div.theme-details:hover {
710     background: #eee;
711}
712#themes div.theme-details div.theme-shot {
713     float: left;
714}
715#themes div.theme-details div.theme-shot img {
716     display: block;
717     width: 57px;
718     height: 50px;
719     border: 1px solid #ccc;
720}
721#themes div.theme-details div.theme-info {
722     margin-left: 67px;
723}
724#themes div.theme-details div.theme-info span.theme-desc {
725     display: block;
726}
727#themes div.theme-details div.theme-info span.theme-version {
728     color: #666;
729}
730#themes div.theme-details div.theme-actions {
731     margin-left: 67px;
732}
733/* Themes list, JS version */
734#themes-wrapper {
735}
736#theme-box {
737     border: 1px solid #999;
738     border-left: none;
739     padding: 5px;
740     float: right;
741     height: 420px;
742     width: 320px;
743     overflow: auto;
744}
745#theme-box div.theme-shot img {
746     display: block;
747     margin: 0 0 0 10px;
748     width: 280px;
749     height: 245px;
750     border: 1px solid #ccc;
751}
752#theme-box div.theme-info {
753     margin: 1em 0 0 10px;
754}
755#theme-box h3 {
756     margin: 0;
757}
758#theme-box div.theme-info span {
759     display: block;
760}
761#theme-box span.theme-version {
762     color: #666;
763}
764#theme-box span.theme-parent-ok {
765     color: #666;
766}
767#theme-box span.theme-parent-missing {
768     color: #c00;
769     font-weight:bold;
770}
771#theme-box div.theme-actions {
772     margin-left: 10px;
773}
774#themes-wrapper #themes {
775     border: 1px solid #999;
776     overflow: auto;
777     height: 420px;
778     padding: 5px;
779     margin: 0;
780}
781#themes div.theme-details-js {
782     float: left;
783     width: 120px;
784     height: 150px;
785     margin: 0 10px 20px;
786     padding: 10px 10px 0;
787     text-align: center;
788     background: #f3f3f3;
789     border: 1px solid #f3f3f3;
790     cursor: pointer;
791     border-radius: 4px;
792}
793#themes div.theme-details-js label {
794     cursor: pointer;
795}
796#themes div.theme-details-js.theme-selected {
797     background: #E5E3DA;
798     border: 1px solid #999;
799}
800#themes div.theme-details-js div.theme-shot img {
801     width: 120px;
802     height: 105px;
803     border: 1px solid #fff;
804}
805#themes div.theme-details-js h3 {
806     font-family: inherit;
807     font-weight: normal;
808     margin: 0;
809     padding: 0;
810}
811/* ----------------------------------------------------------  Plugins list */
812#plugins td.action {
813     vertical-align: middle;
814}
815
816select.l10n option {
817     padding-left: 16px;
818}
819option.avail10n {
820     background: transparent url(../images/check-on.png) no-repeat 0 50%;
821}
822/* ------------------------------------------------------------------ contextual help */
823#help {
824     margin-top: 4em;
825     background: #f5f5f5;
826     z-index: 100;
827}
828#help-button {
829     background: transparent url(../images/page_help.png) no-repeat 6px center;
830     position: absolute;
831     top: 3.6rem;
832     right: 0px;
833     padding: 0 2rem 0 3rem;
834     cursor: pointer;
835     color: #2373A8;
836     line-height: 4.2rem;
837}
838#help-button span {
839     padding: .6rem 0 .1rem 0;
840     border-bottom: 1px solid #2373A8;
841}
842.help-box {
843     display: none;
844}
845.help-box ul {
846     padding-left: 20px;
847     margin-left: 0;
848}
849#content.with-help #help-button {
850     right: 28.2rem;
851     background-color: #f5f5f5;
852     position: fixed;
853     border-top: 2px solid #FFD478;
854     border-left: 2px solid #FFD478;
855     border-bottom: 2px solid #FFD478;
856     border-bottom-left-radius: 1rem;
857     border-top-left-radius: 1rem;
858}
859#content.with-help #help {
860     display: block;
861     position: absolute;
862     top: 3.6rem;
863     right: 0;
864     width: 28rem;
865     border-left: 2px solid #FFD478;
866     border-top: 2px solid #FFD478;
867     margin-top: 0;
868     padding: 10px 0 0 0;
869     overflow: auto;
870}
871#content.with-help .help-content {
872     padding: 0 5px 1em 5px;
873}
874.help-content dt {
875     font-weight: bold;
876     color: #626262;
877     margin: 0;
878}
879.help-content dd {
880     margin: 0.3em 0 1.5em 0;
881}
882/* ------------------------------------------------------------------ popups */
883body.popup #wrapper, body.popup #top {
884     width: 100%;
885     padding: 0;
886}
887body.popup #wrapper {
888     float: none;
889     margin:0;
890     display: block;
891}
892body.popup h1, body.popup #top {
893     margin: 0;
894     border-bottom: 1px solid;
895     font-weight: normal;
896     color: #fff;
897     background: #575859;
898     font-size: 1.5em;
899     text-indent: .6rem;
900     line-height: 1.3em;
901}
902body.popup #main {
903     margin-bottom: 1em 0;
904}
905body.popup #content {
906     margin: 0;
907     padding: .6rem 0 !important;
908}
909body.popup #content h2 {
910     margin: 0 0 1em;
911}
912body.popup #footer p {
913     border: none;
914}
915/* ------------------------------------------------------------------ messages */
916div.error, p.error, 
917div.message, p.message, 
918div.static-msg, p.static-msg {
919     padding: 0.5em 0.5em 0.5em 48px;
920     margin-bottom: 1em;
921     border-radius: 8px;
922}
923p.error, p.message, p.static-msg {
924     padding-top: 1rem;
925     padding-bottom: 1rem;
926}
927div.error, p.error {
928     background: #ffdec8 url(msg-error.png) no-repeat .7em .7em;
929     color: #000;
930}
931div.message, p.message, 
932div.static-msg, p.static-msg {
933     background: #666 url(msg-std.png) no-repeat .7em .7em;
934     color: #fff;
935}
936div.message a, p.message a, 
937div.static-msg a, p.static-msg a {
938     color: #fff;
939}
940#content > .message, #content > .error {
941     margin-right: 14em
942}
943/* ------------------------------------------------------------------ navigation */
944.anchor-nav {
945     background: #575859;
946     color: #fff;
947     padding: .4rem 1.2rem;
948     float: right;
949}
950.nav_prevnext {
951     margin-bottom: 2em;
952     color: #ccc;
953}
954.nav_prevnext a, a.back {
955     border: 1px solid #ccc;
956     padding: .2rem .5rem;
957     background-color: #eef;
958}
959a.back:before {
960     content: "\ab\a0";
961}
962
963/* ------------------------------------------------------------------ debug */
964#debug {
965     position: absolute;
966     top: 0;
967     width: 100%;
968     height: 4px;
969     background: #d99;
970}
971#debug div {
972     display: none;
973     padding: 3px 0.5em 2px;
974}
975#debug p {
976     margin: 0.5em 0;
977}
978#debug:hover {
979     height: auto;
980}
981#debug:hover div {
982     display: block;
983}
984/* -------------------------------------------------------------------- CLASSES COMMUNES */
985
986.no-margin {
987     margin: 0;
988}
989
990/* paragraphe pour bouton Nouveau bidule */
991p.top-add {
992     text-align: right;
993     margin: 0;
994     }
995p.top-add a {
996     padding: .3em 1em .3em .5em;
997     font-weight: bold;
998}
999p.top-add a img {
1000     padding-right: .3em;
1001     vertical-align: middle;
1002}
1003/* Si quelque chose a besoin d'être caché sauf pour les revues d'écran */
1004.hidden {
1005    position: absolute !important;
1006    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
1007    clip: rect(1px, 1px, 1px, 1px);
1008    padding: 0 !important;
1009    border: 0 !important;
1010    height: 1px !important;
1011    width: 1px !important;
1012    overflow: hidden;
1013    }
1014.clear {
1015     clear: both;
1016}
1017.lclear {
1018     clear: left;
1019}
1020div.clearer {
1021     height: 1px;
1022     font-size: 1px;
1023}
1024.hide {
1025     display: none;
1026}
1027.right {
1028     text-align: right;
1029}
1030.frame-shrink {
1031     border: 1px solid #666;
1032     padding: 0.5em;
1033     margin-bottom: 1em;
1034     height: 120px;
1035     overflow: auto;
1036}
1037.grid {
1038     background: transparent repeat url('grid.png') 0 0;
1039}
1040.line p {
1041     margin: 0;
1042}
1043.offline {
1044     color: #666;
1045}
1046ul.nice {
1047     margin: 1em 0;
1048     padding: 0 0 0 2em;
1049     list-style: square;
1050}
1051ul.nice li {
1052     margin:0;
1053     padding: 0;
1054}
1055.zip-dl {
1056     background: transparent url(package.png) no-repeat 0 50%;
1057     padding: 5px 0 5px 20px;
1058}
1059/* pas trouvé dans le code */
1060.comment {
1061     border-top: 2px solid #ccc;
1062     margin-bottom: 1em;
1063     padding: 2em 0 1em 0;
1064     position: relative;
1065}
1066.comment form p {
1067     margin: 0;
1068     position: absolute;
1069     top: 2px;
1070     right: 0;
1071}
1072.distrib img {
1073     display: block;
1074     float: right;
1075     margin-top: -1em;
1076}
1077/* TABLES
1078-------------------------------------------------------- */
1079table {
1080     font-size: 1.2rem;
1081     border-collapse: collapse;
1082     margin: 0 0 1em 0;
1083}
1084tr.line:hover {
1085     background: #f3f3f3;
1086}
1087caption {
1088     color: #333;
1089     font-weight: bold;
1090     text-align: left;
1091     margin-bottom: .5em;
1092}
1093
1094th, td {
1095     border-width: 0 0 1px 0;
1096     border-style: solid;
1097     border-color: #e3e3e3;
1098     padding: .4rem .5rem;
1099     vertical-align: top;
1100}
1101th {
1102     text-align: left;
1103     border-bottom-color: #aaa;
1104}
1105.noborder td, td.noborder, .noborder th, th.noborder {
1106     border-width: 0;
1107}
1108table .maximal, table.maximal {
1109     width: 100%;
1110}
1111table .minimal {
1112     width: 1px;
1113}
1114table .nowrap {
1115     white-space: nowrap;
1116     vertical-align: top;
1117}
1118table.settings, table.prefs {
1119     width: 80%;
1120     border: 1px solid #999;
1121     margin-bottom: 3em; 
1122}
1123table.settings th, table.prefs th {
1124     background: #eef;
1125}
1126table.settings th:first-child, table.prefs th:first-child {
1127     width: 20%;
1128}
1129table.settings th + th, table.prefs th + th {
1130     width: 30%;
1131}
1132table.settings th + th + th, table.prefs th + th + th {
1133     width: 10%;
1134}
1135table.settings th:last-child, table.prefs th:last-child {
1136     width: 40%;
1137}
1138td.status {
1139     vertical-align: middle;
1140}
1141td.status img {
1142     margin-bottom: -2px;
1143}
1144td.status a {
1145     border: none;
1146}
1147
1148tr.line img.expand {
1149     margin-right: 10px;
1150     margin-bottom: -2px;
1151}
1152tr.line input {
1153     vertical-align: middle;
1154}
1155tr.expand td {
1156     border-bottom: none;
1157}
1158td.expand {
1159     padding: 1em;
1160}
1161
1162.dragable {
1163     border-collapse: separate;
1164}
1165.dragable tbody td {
1166
1167}
1168.handle {
1169     padding: 0;
1170}
1171.handler {
1172     cursor: move;
1173     background: transparent url(drag.png) no-repeat 0 50%;
1174     padding-left: 15px;
1175}
1176/* ----------------------------------------------------------------- FORMS */
1177form {
1178     display: block;
1179     margin: 0;
1180     padding: 0;
1181}
1182fieldset, .fieldset {
1183     display: block;
1184     margin: 0 0 1em 0;
1185     padding: 1em 0.5em;
1186     border-width: 1px 0;
1187     border-style: solid;
1188     border-color: #ccc;
1189     background: #f5f5f5;
1190}
1191legend {
1192     font-weight: bold;
1193     padding: 0.2em 0.6em;
1194     border-width: 1px;
1195     border-style: solid;
1196     border-color: #ccc;
1197     background: #f5f5f5;
1198     margin-bottom: 0.5em;
1199}
1200optgroup {
1201     font-weight: bold;
1202     font-style: normal;
1203}
1204option {
1205     font-weight: normal;
1206}
1207input, textarea, select {
1208     background: #f9f9f9;
1209     color: #000;
1210     border-width: 1px;
1211     border-style: solid;
1212     border-color: #666 #ccc #ccc #999;
1213}
1214input.invalid, textarea.invalid, select.invalid {
1215     border: 1px solid red;
1216     background: #fff; 
1217     color: red;
1218     box-shadow: 0 0 0 1px rgba(218, 62, 90, 0.3)
1219}
1220input, textarea, select, option {
1221     font: 100% "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
1222}
1223input[type=text], input[type=password], textarea {
1224     padding: 2px 0;
1225     margin-right: .3em;
1226}
1227textarea {
1228     padding: 2px 0;
1229}
1230input[type=checkbox], input[type=radio], input[type=file] {
1231     border: none;
1232     margin: 0;
1233     padding: 0;
1234     background: transparent;
1235}
1236label {
1237     display: block;
1238}
1239label input, label select, label span {
1240     display: block;
1241}
1242p.form-note {
1243     font-style:italic;
1244     margin-top: -.7em;
1245     color: #666;
1246}
1247span.form-note {
1248     font-style:italic;
1249     font-weight: normal;
1250     color: #666;
1251}
1252p.form-note.warn, p.form-note.info, p.warning {
1253     font-style: normal;
1254     padding: .2em 1em .1em 24px;
1255}
1256p.form-note.warn, p.warning {
1257     background: #ffd url(warning.png) no-repeat .3em .3em;
1258     border: 1px solid #f0c020;
1259}
1260p.form-note.info {
1261     background: #eef url(info.png) no-repeat .3em .2em;
1262     border: 1px solid #99f;
1263}
1264.form-note a {border-bottom: 1px solid #99f;}
1265
1266label.classic {
1267     display: inline;
1268}
1269label.classic input, label span input, label.classic select, label span select {
1270     display: inline;
1271}
1272
1273label.area, p.area {
1274     width: inherit !important;
1275}
1276.area textarea {
1277     display: block;
1278     width: 100%;
1279     resize: vertical;
1280}
1281label.required {
1282     font-weight: bold;
1283}
1284label.required abbr {
1285     color: #dd0000;
1286     font-size: 1.3em;
1287}
1288label.inline {
1289     display: inline;
1290}
1291p.field {
1292     position: relative;
1293     
1294}
1295p.field label {
1296     display: block;
1297     width: 14em;
1298}
1299p.field input, p.field select {
1300     display: inline;
1301     position: absolute;
1302     left: 14.5em;
1303     top: 0;
1304}
1305label .maximal, textarea.maximal, input.maximal {
1306     width: 100%;
1307}
1308textarea.maximal {
1309     resize: vertical;
1310}
1311
1312a.form-control {
1313     display: none;
1314     font-weight: bold;
1315     background: url(magnifier.png) no-repeat 0 0;
1316     color: green;
1317     padding-left: 20px;
1318}
1319.constrained {
1320     margin: 0;
1321     padding: 0;
1322     border: none;
1323     background: transparent;
1324}
1325
1326/* --------------------------------------------------------------- buttons */
1327/* commun */
1328input[type=submit],
1329input[type=reset],
1330input[type=button],
1331a.button,
1332a.submit {
1333     display: inline-block;
1334     outline: none;
1335     cursor: pointer;
1336     text-align: center;
1337     text-decoration: none;
1338     padding: .1em .5em;
1339     text-shadow: 0 1px 1px rgba(0,0,0,.3);
1340     border-radius: .2em;
1341     margin-bottom: .1em;
1342}
1343/* validation */
1344input[type=submit],
1345input[type=button],
1346a.submit {
1347     color: #fff;
1348     border: 1px solid #2373A8;
1349     background: #2373A8;
1350     background: -webkit-gradient(linear, left top, left bottom, from(#2C8FD1), to(#2373A8));
1351     background: -moz-linear-gradient(top,  #2C8FD1,  #2373A8);
1352}
1353input[type=submit]:hover,
1354input[type=button]:hover,
1355a.submit:hover,
1356input[type=submit]:focus,
1357input[type=button]:focus,
1358a.submit:focus {
1359     background: #2373A8;
1360     background: -webkit-gradient(linear, left top, left bottom, from(#2373A8), to(#2C8FD1));
1361     background: -moz-linear-gradient(top,  #2373A8,  #2C8FD1);
1362     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2373A8', endColorstr='#2C8FD1');
1363     border: 1px solid #2C8FD1;
1364}
1365/* suppression et reset */
1366a.button,
1367input[type=submit].reset,
1368input[type=submit].delete {
1369     border: 1px solid #ccc;
1370     background: #f5f5f5;
1371     color: #000;
1372     background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#dfdfdf));
1373     background: -moz-linear-gradient(top,  #f5f5f5,  #dfdfdf);
1374     text-shadow: none;
1375     }
1376a.button:hover,
1377input[type=reset]:hover,
1378input[type=submit].reset:hover,
1379input[type=submit].delete:hover,
1380a.button:focus,
1381input[type=reset]:focus,
1382input[type=submit].reset:focus,
1383input[type=submit].delete:focus {
1384     background: #dfdfdf;
1385     background: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#f5f5f5));
1386     background: -moz-linear-gradient(top,  #dfdfdf,  #f5f5f5);
1387     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#f5f5f5');
1388     }
1389a.delete,
1390input.delete,
1391input[type=submit].delete {
1392     color: #c00;
1393     padding-bottom: .1em;
1394}
1395#entry-content .delete {
1396     margin-left: 1em;
1397}
1398a.delete:hover,
1399input.delete:hover,
1400input[type=submit].delete:hover,
1401a.delete:focus,
1402input.delete:focus,
1403input[type=submit].delete:focus {
1404     border-color: #c00;
1405}
1406/* finasseries */
1407input[type=button] {
1408     padding: .1em;
1409}
1410#info-box a.button {
1411     padding: 0 .5em;
1412     margin-left: 2em;
1413}
1414.button.add {
1415     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
1416     background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
1417     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
1418     background-color:#9dce2c;
1419     border:1px solid #83c41a;
1420     padding:.6rem 1.8rem;
1421     text-shadow:1px 1px 0 #689324;
1422     color: #000;
1423     text-shadow: 1px 1px 0 #BBDB58;
1424     font-weight: normal;
1425     font-size: 1.4rem;
1426}
1427.button.add:hover, .button.add:focus {
1428     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
1429     background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
1430     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
1431     background-color:#8cb82b;
1432     border:1px solid #83c41a;
1433}
1434.button-add:focus {
1435     outline: dotted 1px;
1436}
1437.button.add:active {
1438     position:relative;
1439     top:1px;
1440}
1441
1442/* jQuery Autocomplete plugin */
1443.ac_results {
1444     padding: 0px;
1445     border: 1px dotted #f90;
1446     background-color: white;
1447     overflow: hidden;
1448     z-index: 99999;
1449}
1450.ac_results ul {
1451     width: 100%;
1452     list-style-position: outside;
1453     list-style: none;
1454     padding: 0;
1455     margin: 0;
1456}
1457.ac_results li {
1458     margin: 0px;
1459     padding: 2px 5px;
1460     cursor: default;
1461     display: block;
1462     font: menu;
1463     font-size: 1em;
1464     line-height: 16px;
1465     overflow: hidden;
1466}
1467.ac_loading {
1468     background: transparent url('loader.gif') right center no-repeat;
1469}
1470.ac_over {
1471     background-color: #06c;
1472     color: white;
1473}
1474
1475/* ---------------------------------------------------------------------------
1476     Media queries vite fait en attendant la reprise complète du layout
1477---------------------------------------------------------------------------- */
1478@media screen and (max-width: 920px) {
1479     #top, #top h1 a {width: 42px !important; height:100%; overflow: hidden;}
1480     #top h1 a:link {
1481          background: transparent url(dc_logos/b-dotclear120.png) no-repeat -180px 6px; 
1482          border-right: 1px solid #ccc;
1483     }
1484     #top h1 a:hover, #top h1 a:focus {
1485          background: url(dc_logos/b-dotclear120.png) no-repeat -180px -94px;
1486          border-right: 1px solid #A2CBE9;
1487     }
1488}
1489@media screen and (max-width: 800px) {
1490     #top, #info-boxes, #info-box1, #info-box2 {
1491          display:inline-block;
1492          vertical-align:middle;
1493          margin:0;
1494          padding:0;
1495          line-height: 3.2rem;
1496     }
1497     #info-box1 select {width: 14rem;}
1498     #main-menu, #main, #content, #content h2, #entry-wrapper, #entry-sidebar, #entry-content, .two-cols .col, .two-cols .col:first-child {
1499     display:block;
1500     width: 98%;
1501     margin:0 auto;
1502     padding:0;
1503     float:none;
1504     text-align: left;
1505     clear: both;
1506     }
1507     #content {
1508          width: 100%;
1509          padding-top: .5em;
1510     }
1511}
1512@media screen and (max-width: 720px) {
1513     .smallscreen {display: none;}
1514     #help-button {width:20px; overflow: hidden;}
1515     #info-box1 {margin-left: 1rem;}
1516}
1517@media screen and (max-width: 492px) {
1518     #header {height:3.6rem;}
1519     #wrapper {font-size: 1.6rem;}
1520     .page-title, #info-boxes, .media-item {display: inline-block;}
1521     div.media-list .media-item {width: 90%; float: none}
1522     #info-box1 p.nomobile, label.nomobile {display: none;}
1523     #help-button {height:26px; width:26px; background-color: #A2CBE9; padding: 0; margin:0;font-size: 1rem;line-height: 68px}
1524}
Note: See TracBrowser for help on using the repository browser.

Sites map