Dotclear

source: themes/ductile/style.css @ 360:30bb82ca4426

Revision 360:30bb82ca4426, 16.8 KB checked in by kozlika, 14 years ago (diff)

Ductile, jour 4, ready.

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

Sites map