Dotclear

source: themes/ductile/style.css @ 354:dd1476ad9a88

Revision 354:dd1476ad9a88, 14.4 KB checked in by kozlika, 14 years ago (diff)

Ductile, jour 4, première passe.

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

Sites map