Dotclear

source: admin/style/default.css @ 447:012faa0e1648

Revision 447:012faa0e1648, 22.3 KB checked in by kozlika, 14 years ago (diff)

[Accessibility] Add skip links (aka prelude), first in source.

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

Sites map