Dotclear

source: themes/ductile/style.css @ 391:77ce8f145513

Revision 391:77ce8f145513, 16.8 KB checked in by kozlika, 14 years ago (diff)

Ductile, bugfix for colorpicker. Workaround on colorpicker.js with an old bug. Needs javascript sorcerer.

(La ligne 38 ne fonctionne pas comme elle le devrait.)

Line 
1@charset "UTF-8";
2
3/* Ductile
4     Dotclear theme by Dotclear Team
5     Version de chantier
6*/
7
8/* Infos
9Plan de cette feuille :
101. Structure, imports
112. Liens, html
123. Page
134. Haut de page
145. Wrapper, main, content
156. Billets
167. Commentaires et rétroliens
178. Sidebar
189. Footer
1910. Classes communes
2011. Pages spécifiques
2112. Clearers
22
23Couleurs :
24Typo: #222 courant, #4c4c85 commentaires
25Liens: #666 courant, #ad3f4c titre billet et Lire la suite
26Fond formulaire comm: #eef
27Fond sidebar: #ededed
28
29Thanks to:
30Colorzilla wysiwyg gradient editor http://www.colorzilla.com/gradient-editor/
31*/
32
33/* -----------------------------------------------------------------
34     1. STRUCTURE - IMPORTS
35------------------------------------------------------------------ */
36
37@import url(rebase.css);
38@import url(mediaqueries.css);
39
40/* ------------------------------------------------------- body */
41body {
42     background: #fff;
43     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
44     color: #222;
45     }
46
47/* ------------------------------------------------------------
48     2. LIENS & Complément balises HTML
49------------------------------------------------------------- */
50del {
51     color: #800000;
52     }
53blockquote {
54     border: 2px solid #eef;
55     padding: 1px 1em .5em;
56     }
57code, pre {
58     background: #efefef;
59     border-right: 1px solid #aaa;
60     border-bottom: 1px solid #aaa;
61     font-size: .81em;
62     }
63
64a {
65     color: #666;
66     }
67a:hover, a:focus {
68     background-color: #ebebee;
69     text-decoration: none;
70     }
71
72/* ------------------------------------------------------------
73     3. PAGE
74------------------------------------------------------------- */
75
76#page {
77     position: relative;
78     }
79
80/* ------------------------------------------------------------
81     4. HAUT DE PAGE
82------------------------------------------------------------- */
83#header {
84     text-shadow: 0 1px 1px rgba(0,0,0,.2);
85     line-height: 1;
86     }
87h1 {
88     font-variant: small-caps;
89     }
90h1 a {
91     text-decoration: none;
92     color: #333;
93     }
94#prelude {
95     position: absolute;
96     margin: 0;
97     top: 0;
98     left: 3px;
99     color: #fff;
100     font-size: .875em;
101     list-style-type: none;
102     }
103#prelude li {
104     display: inline;
105     }
106#prelude a, #prelude a:hover, #prelude a:visited {
107     position:absolute;
108     left:0;
109     top:-500px;
110     width:1px;
111     height:1px;
112     overflow:hidden;
113     }
114#prelude a:active, #prelude a:focus {
115     position:static;
116     width:auto;
117     height:auto;
118     }
119#blogdesc {
120     margin: 0 0 0 32px;
121     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
122     font-style: italic;
123     color: #909090;
124     text-shadow: none;
125     }
126#supranav {
127     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
128     padding: 0 0 0 4px;
129     list-style-type: none;
130     line-height: 1.25;
131     font-size: .875em;
132     }
133#supranav li {
134     text-transform: uppercase;
135     vertical-align: top;
136     }
137#supranav li a {
138     text-decoration: none;
139     white-space: nowrap;
140     margin-bottom: 4px;
141     -webkit-border-bottom-left-radius: 7px;
142     -moz-border-radius-bottomleft: 7px;
143     border-bottom-left-radius: 7px;   
144     background: transparent url(img/menu.png) no-repeat right top;
145 }
146#supranav li a:hover, #supranav li a:active, #supranav li a:focus {
147     background-color: #ebebee;
148     background-position: right -150px;
149     }
150#supranav li.active a {
151     background-position: right -150px;
152     }
153#supranav li a span {
154     display: block;
155     text-transform: none;
156     text-shadow: none;
157     font-family: georgia;
158     font-style:italic;
159     }
160
161/* ------------------------------------------------------------
162     5. WRAPPER MAIN CONTENT
163------------------------------------------------------------- */
164
165#wrapper { clear:both; }
166#main { }
167#content { 
168     padding-bottom: 2em; 
169     }
170
171/* ------------------------------------------------------- content-info */
172#content-info {
173     margin-top: 4em;
174     font-size: .875em;
175     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
176     }
177#content-info h2 { 
178     font-size: 1.2em;
179     }
180#subcategories {
181     font-size: .875em;
182     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
183     }
184#subcategories h3 { 
185     font-size: 1.1em;
186     font-variant: small-caps;
187     }
188#content-info p, 
189#content-info ul, 
190#subcategories ul { 
191     margin: .5em 0;
192     }
193
194/* ------------------------------------------------------- pagination, navlinks */
195#navlinks, 
196.pagination {
197     margin-bottom: 1em;
198     padding: 4px 8px;
199     text-align: center;
200     font-size: .875em;
201     color: #000;
202     background: rgb(244,244,245);
203     background: -moz-linear-gradient(top, rgba(244,244,245,1) 0%, rgba(215,215,220,1) 100%);
204     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,245,1)), color-stop(100%,rgba(215,215,220,1)));
205     background: -webkit-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
206     background: -o-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
207     background: -ms-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
208     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f5', endColorstr='#d7d7dc',GradientType=0 );
209     background: linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
210     -moz-border-radius: 4px;
211     -webkit-border-radius: 4px;
212     border-radius: 4px;
213     border-right: 1px solid #aaa;
214     border-bottom: 1px solid #ccc;
215     }
216#navlinks {
217     margin-top: 4em;
218     }
219#navlinks a, 
220.pagination a {
221     padding: 0 1em;
222     white-space: nowrap;
223     }
224
225/* ------------------------------------------------------------
226     6. BILLETS
227------------------------------------------------------------- */
228
229.post {
230     background: transparent url(img/filet.png) repeat-x left bottom;
231     }
232.day-date {
233     display: none;
234     }
235.post-title {
236     margin-bottom: .33em;
237     color: #000;
238     line-height: 1.17;
239     }
240.post-title a {
241     text-decoration: none;
242     color: #ad3f4c;
243     }
244.post h3, 
245.post h4, 
246.post h5
247.post h6 {
248     font-variant: small-caps;
249     font-weight: normal;
250     color: #666;
251     }
252.post-info, 
253.post-tags, 
254.post-info-co, 
255.read-it, 
256.page-info {
257     line-height: 1.2;   
258     margin: .33em 0;
259     }
260.post-info, 
261.post-tags {
262     font-size: .875em;
263     padding: 0;
264     }
265.post-info a, 
266.post-tags a, 
267.post-info-co a {
268     white-space: nowrap;
269     }
270.post-tags a {
271     padding-right: 1em;
272     padding-left: 14px;
273     background: #fff no-repeat left center url(img/tag.png);
274     }
275.post-tags li {
276     display: inline;
277     }
278.post-content {
279     padding-bottom: 9px;
280     }
281.post ul {
282     list-style-type: square;
283     }
284.footnotes {
285     font-size: .875em;
286     }
287.read-it {
288     text-align: right;
289     margin: 0 0 .25em 0;
290     }
291.read-it a {
292     color: #ad3f4c;
293     }
294.post-info-co, 
295.page-info {
296     margin: 0;
297     background: #fff;
298     display: inline;
299     font-size: 0.875em;
300     font-style: italic;
301     padding-right: .5em;
302     }
303.post-info-co a {
304     text-decoration: none;
305     padding-right: 1em;
306     padding-left: 28px;
307     background-color: #fff;
308     background-repeat: no-repeat;
309     background-position: left center;
310     }
311.post-info-co a.comment_count {
312     background-image: url(img/comment.png);
313     }
314.post-info-co a.ping_count {
315     background-image: url(img/ping.png);
316     }
317.post-info-co a.attach_count {
318     background-image: url(img/attach.png); 
319     }
320#attachments {
321     font-size: .875em;
322     border-bottom: 1px solid #999;
323     margin: 0 0 2em;
324     }
325#attachments h3 {
326     font-variant: small-caps;
327     font-weight: normal;
328     color: #666;
329     }
330#attachments ul {
331     list-style-type: none;
332     margin: 0 0 1em;
333     padding: 0;
334     }
335#attachments ul li {
336     padding-left: 24px;
337     background: #fff url(img/download.png) no-repeat;
338     }
339
340/* ------------------------------------------------------------
341     7. COMMENTAIRES, PINGS
342------------------------------------------------------------- */
343
344/* ------------------------------------------------------- commentaires et rétroliens */
345#comments, 
346#pings, 
347#comment-form,
348#comments-feed { 
349     color: #4c4c85;
350     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
351     font-size: .875em;
352     }
353#comment-form {
354     padding: 1em;
355     background: #eef;
356     margin-top: 1em;
357     color: #333;
358     border: 1px solid #ddf;
359     }
360#pr {
361     padding: 1em;
362     border: 1px dashed #4c4c85;
363     margin-bottom: 1em;
364     }
365#comments h3, 
366#pings h3, 
367#pr h3, 
368#comment-form h3 { 
369     margin-top: 2em;
370     color: #666;
371     }
372#comment-form h3 {
373     margin-top: 0;
374     }
375#comments dl { }
376#comments dt { 
377     padding-bottom: .2em;
378     border-bottom: 1px solid #ccc;
379     margin-top: 1.5em;
380     line-height: 1.1;
381     }
382#comments dd { }
383#comments .first { }
384#comments .odd { }
385#comments .me { 
386     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
387     color: #333;
388     font-size: 1.14em;
389     }
390.comment-number {
391     font-size: 2em;
392     font-weight: normal;
393     font-style: italic;
394     text-decoration: none;
395     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
396     color: #909090;
397     }
398
399#pings dl { }
400#pings dt { 
401     border-bottom: 1px solid #ccc;
402     margin-top: 1.5em;
403     line-height: 1.1;
404     padding-bottom: .2em;
405     }
406#pings dd { }
407#pings .first { }
408#pings .odd { }
409
410#pr dl { }
411#pr dd { }
412
413/* ------------------------------------------------------- formulaire des commentaires */
414#comment-form fieldset { }
415.field { 
416     margin-bottom: 1em;
417     }
418.field label { 
419     display: block;
420     font-size: .875em;
421     color: #666;
422     text-indent: 6px;
423     }
424.field input, 
425.field textarea {
426     display: block;
427     font-size: 100%;
428     border: 1px solid #ccc;
429     text-indent: 4px;
430     background: #fff;
431     -webkit-border-radius: 3px; 
432     -moz-border-radius: 3px;
433     border-radius: 3px;
434     }
435.field textarea { 
436     font-family: sans-serif;
437     padding: .5em 1em; 
438     }
439.field input:focus, 
440.field textarea:focus {
441     background: #fff;
442     }
443#comment-form input[type=submit], 
444#comment-form input[type=reset] {
445     font-size: .875em;
446     display: inline-block;
447     text-transform: capitalize;
448     font-weight: bold;
449     text-align: center;
450     padding: .33em .66em;
451     text-shadow: 0 1px 1px rgba(0,0,0,.3);
452     -webkit-border-radius: 5px; 
453     -moz-border-radius: 5px;
454     border-radius: 5px;
455     border: solid 1px #777;
456     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
457     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
458     box-shadow: 0 1px 2px rgba(0,0,0,.2);
459     background: rgb(119,119,119);
460     background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(85,85,85,1) 100%);
461     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(119,119,119,1)), color-stop(100%,rgba(85,85,85,1)));
462     background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
463     background: -o-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
464     background: -ms-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
465     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#555555',GradientType=0 );
466     color: #eee;
467     }
468#comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus,
469#comment-form input[type=reset]:hover, #comment-form input[type=reset]:focus {
470     background: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
471     background: rgb(85,85,85);
472     background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 100%);
473     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1)));
474     background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
475     background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
476     background: -ms-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
477     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#777777',GradientType=0 );
478     background: linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
479     text-decoration: none;
480     }
481#c_content {
482     width: 95%;
483     padding: 4px;
484     }
485
486.form-help { 
487     margin-top: 0;
488     font-size: .875em;
489     font-style: italic;
490     }
491
492#ping-url { 
493     background: #efefef;
494     border-right: 1px solid #aaa;
495     border-bottom: 1px solid #aaa;
496     font-size: .81em;
497     padding-left: .5em;
498     }
499#comments-feed { 
500     margin-top: 2em; 
501     }
502
503/* ------------------------------------------------------------
504     8. SIDEBAR
505------------------------------------------------------------- */
506
507#sidebar {
508     font-size: 0.875em;
509     }
510#sidebar h2 {
511     font-size: 1.1em;
512     margin: 0;
513     font-weight: normal;
514     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
515     color: #333;
516     }
517#sidebar h3 {
518     font-size: 1em;
519     margin-bottom: 0;
520     font-weight: normal;
521     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
522     color: #333;
523     }
524#sidebar ul {
525     margin: .75em 0 .5em 4px;
526     list-style-type: none;
527     padding: 0;
528     }
529#sidebar ul li ul {
530     margin-top: .5em;
531     }
532#sidebar ul li {
533     padding-left: 16px;
534     background: transparent url(img/square.png) no-repeat 0 .5em;
535     }
536#sidebar ul li ul li {
537     background-image: url(img/square2.png);
538     }
539#sidebar ul li ul li ul li {
540     background-image: url(img/square3.png);
541     }
542#sidebar .syndicate ul li {
543     background-image: none;
544     padding-left: 0;
545}
546#blognav > div, 
547#blogextra > div {
548     background: #ededed;
549     margin-bottom: 1em;
550     padding: 4px 8px;
551     -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
552     -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
553     -o-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
554     box-shadow: 2px 2px 4px rgba(0,0,0,.2);
555     }
556     
557/* ------------------------------------------------------- recherche */
558#search p {
559     background: #fff; 
560     text-align: right;
561     border: 1px solid #ddd;
562     vertical-align: middle;
563     padding: 0;
564     }
565#search input { 
566     margin: 0;
567     border: none;
568     background: transparent;
569     height: auto;
570     line-height: 2em;
571     }
572#q {
573     float: left;
574     width: 78%;
575     font-size: 100%;
576     padding-left: 2px;
577     }
578#q:focus {
579     background: #fcfcf9;
580     }
581#search .submit {
582     background: #706F6F;
583     color: #fff;
584     vertical-align: top;
585     width: 20%;
586     font-variant: small-caps;
587     height: 2em;
588     }
589#search .submit:hover, 
590#search .submit:focus {
591     background: #333;
592     }
593     
594/* ------------------------------------------------------------
595     9. FOOTER
596------------------------------------------------------------- */
597
598#footer {
599     clear: both;
600     background: #686867;
601     color: #fff;
602     }
603#footer p {
604     padding: .66em 2em;
605     margin: 0;
606     text-align: right;
607     font-size: .875em;
608     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
609     }
610#footer a {
611     color: #fff;
612     }
613#footer a:hover, 
614#footer a:focus {
615     background: #686867;
616     }
617#stickers {
618     list-style-type: none;
619     margin: 0;
620     }
621     
622/* ------------------------------------------------------------
623     10. CLASSES COMMUNES
624------------------------------------------------------------- */
625
626/* ------------------------------------------------------- RSS */
627.feed { 
628     padding-left: 20px;
629     background : transparent url(img/feed.png) no-repeat left center;
630     }
631
632/* ------------------------------------------------------- tags */   
633.dc-tags .content-inner, 
634.dc-tags .content-inner ul {
635     font-size: 1.25em;
636     margin: 0;
637     padding: 0;
638     }
639.dc-tags #content ul li, 
640.dc-tags #content ul li a, 
641#sidebar .tags ul li, 
642#sidebar .tags ul li a {
643     display : inline;
644     width : auto;
645     padding-left : 0;
646     padding-right : .5em;
647     background-color : transparent;
648     background-image: none;
649     text-decoration: none;
650     line-height : 1.5em;
651     }
652.tags ul li a:hover {
653     background-image :none;
654     }
655.dc-tags .tag0, .tags .tag0 { font-size: 85%; }
656.dc-tags .tag10, .tags .tag10 { font-size: 90%; }
657.dc-tags .tag20, .tags .tag20 { font-size: 95%; }
658.dc-tags .tag30, .tags .tag30 { font-size: 100%; }
659.dc-tags .tag40, .tags .tag40 { font-size: 105%; }
660.dc-tags .tag50, .tags .tag50 { font-size: 110%; }
661.dc-tags .tag60, .tags .tag60 { font-size: 115%; }
662.dc-tags .tag70, .tags .tag70 { font-size: 120%; }
663.dc-tags .tag80, .tags .tag80 { font-size: 125%; }
664.dc-tags .tag90, .tags .tag90 { font-size: 130%; }
665.dc-tags .tag100, .tags .tag100 { font-size: 135%; }
666
667/* ------------------------------------------------------- messages d'erreur */
668.error {
669     border : 1px solid #c44;
670     background : #df0;
671     padding : 0.5em;
672     }
673.error ul {
674     padding-left : 20px;
675     }
676.error li {
677     list-style : square;
678     }
679
680/* ------------------------------------------------------- class à dispo pour billets */
681.left { float: left; margin-right : 1em; }
682.right { float: right; margin-left : 1em; }
683.center { margin-left : auto; margin-right : auto; }
684.left-text { text-align : left; }
685.right-text { text-align : right; }
686.center-text { text-align : center; }
687.little-text { font-size : .875em;}
688.little-upper-text { font-size : .875em; text-transform : uppercase; }
689
690
691/* ------------------------------------------------------------
692     11. PAGES SPECIFIQUES
693------------------------------------------------------------- */
694
695.dc-home { }
696.dc-post { }
697.dc-category { }
698.dc-archive { }
699.dc-archive-month h2.post-title {
700     font-size: 1.3em;
701     }
702.dc-archive { }
703.dc-tags { }
704.dc-tag { }
705.dc-404 { }
706.dc-search { }
707
708
709/* ---------------------------------------------------
710  12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
711--------------------------------------------------- */
712.post, 
713.footnotes, 
714#attachments, 
715.post-info-co, 
716#comments, #footer {
717     clear:both;
718     }
719
720/* ================================================
721     personnalisations blog chantier
722================================================ */
723.post-content img, .post-excerpt img {
724     border: 1px solid #ccc;
725     }
Note: See TracBrowser for help on using the repository browser.

Sites map