Dotclear

source: admin/style/default.css @ 1311:b57043a88153

Revision 1311:b57043a88153, 28.6 KB checked in by Anne Kozlika <kozlika@…>, 11 years ago (diff)

Responsive enhancement + je sais plus quoi.

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

Sites map