Dotclear

source: themes/ductile/style.css @ 386:c309e69e93ae

Revision 386:c309e69e93ae, 16.8 KB checked in by kozlika, 14 years ago (diff)

Ductile, jour 5 in progress. Sidebar width now in em unit (and other background-color). Some mobile screen adjustments.

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 { }
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     }
235h2.post-title {
236     font-weight: normal;
237     margin-bottom: .33em;
238     color: #000;
239     line-height: 1.17;
240     }
241h2.post-title a {
242     font-weight: normal;
243     font-style: italic;
244     text-decoration: none;
245     color: #ad3f4c;
246     }
247.post h3, 
248.post h4, 
249.post h5
250.post h6 {
251     font-variant: small-caps;
252     font-weight: normal;
253     color: #666;
254     }
255.post-info, 
256.post-tags, 
257.post-info-co, 
258.read-it, 
259.page-info {
260     line-height: 1.2;   
261     margin: .33em 0;
262     }
263.post-info, 
264.post-tags {
265     font-size: .875em;
266     padding: 0;
267     }
268.post-info a, 
269.post-tags a, 
270.post-info-co a {
271     white-space: nowrap;
272     }
273.post-tags a {
274     padding-right: 1em;
275     padding-left: 14px;
276     background: #fff no-repeat left center url(img/tag.png);
277     }
278.post-tags li {
279     display: inline;
280     }
281.post-content {
282     padding-bottom: 9px;
283     }
284.post ul {
285     list-style-type: square;
286     }
287.footnotes {
288     font-size: .875em;
289     }
290.read-it {
291     text-align: right;
292     margin: 0 0 .25em 0;
293     }
294.read-it a {
295     color: #ad3f4c;
296     }
297.post-info-co, 
298.page-info {
299     margin: 0;
300     background: #fff;
301     display: inline;
302     font-size: 0.875em;
303     font-style: italic;
304     padding-right: .5em;
305     }
306.post-info-co a {
307     text-decoration: none;
308     padding-right: 1em;
309     padding-left: 28px;
310     background-color: #fff;
311     background-repeat: no-repeat;
312     background-position: left center;
313     }
314.post-info-co a.comment_count {
315     background-image: url(img/comment.png);
316     }
317.post-info-co a.ping_count {
318     background-image: url(img/ping.png);
319     }
320.post-info-co a.attach_count {
321     background-image: url(img/attach.png); 
322     }
323#attachments {
324     font-size: .875em;
325     border-bottom: 1px solid #999;
326     margin: 0 0 2em;
327     }
328#attachments h3 {
329     font-variant: small-caps;
330     font-weight: normal;
331     color: #666;
332     }
333#attachments ul {
334     list-style-type: none;
335     margin: 0 0 1em;
336     padding: 0;
337     }
338#attachments ul li {
339     padding-left: 24px;
340     background: #fff url(img/download.png) no-repeat;
341     }
342
343/* ------------------------------------------------------------
344     7. COMMENTAIRES, PINGS
345------------------------------------------------------------- */
346
347/* ------------------------------------------------------- commentaires et rétroliens */
348#comments, 
349#pings, 
350#comment-form,
351#comments-feed { 
352     color: #4c4c85;
353     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
354     font-size: .875em;
355     }
356#comment-form {
357     padding: 1em;
358     background: #eef;
359     margin-top: 1em;
360     color: #333;
361     border: 1px solid #ddf;
362     }
363#pr {
364     padding: 1em;
365     border: 1px dashed #4c4c85;
366     margin-bottom: 1em;
367     }
368#comments h3, 
369#pings h3, 
370#pr h3, 
371#comment-form h3 { 
372     margin-top: 2em;
373     color: #666;
374     }
375#comment-form h3 {
376     margin-top: 0;
377     }
378#comments dl { }
379#comments dt { 
380     padding-bottom: .2em;
381     border-bottom: 1px solid #ccc;
382     margin-top: 1.5em;
383     line-height: 1.1;
384     }
385#comments dd { }
386#comments .first { }
387#comments .odd { }
388#comments .me { 
389     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
390     color: #333;
391     font-size: 1.14em;
392     }
393a.comment-number {
394     font-size: 2em;
395     font-weight: normal;
396     font-style: italic;
397     text-decoration: none;
398     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
399     color: #909090;
400     }
401
402#pings dl { }
403#pings dt { 
404     border-bottom: 1px solid #ccc;
405     margin-top: 1.5em;
406     line-height: 1.1;
407     padding-bottom: .2em;
408     }
409#pings dd { }
410#pings .first { }
411#pings .odd { }
412
413#pr dl { }
414#pr dd { }
415
416/* ------------------------------------------------------- formulaire des commentaires */
417#comment-form fieldset { }
418.field { 
419     margin-bottom: 1em;
420     }
421.field label { 
422     display: block;
423     font-size: .875em;
424     color: #666;
425     text-indent: 6px;
426     }
427.field input, 
428.field textarea {
429     display: block;
430     font-size: 100%;
431     border: 1px solid #ccc;
432     text-indent: 4px;
433     background: #fff;
434     -webkit-border-radius: 3px; 
435     -moz-border-radius: 3px;
436     border-radius: 3px;
437     }
438.field textarea { 
439     font-family: sans-serif;
440     padding: .5em 1em; 
441     }
442.field input:focus, 
443.field textarea:focus {
444     background: #fff;
445     }
446#comment-form input[type=submit], 
447#comment-form input[type=reset] {
448     font-size: .875em;
449     display: inline-block;
450     text-transform: capitalize;
451     font-weight: bold;
452     text-align: center;
453     padding: .33em .66em;
454     text-shadow: 0 1px 1px rgba(0,0,0,.3);
455     -webkit-border-radius: 5px; 
456     -moz-border-radius: 5px;
457     border-radius: 5px;
458     border: solid 1px #777;
459     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
460     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
461     box-shadow: 0 1px 2px rgba(0,0,0,.2);
462     background: rgb(119,119,119);
463     background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(85,85,85,1) 100%);
464     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(119,119,119,1)), color-stop(100%,rgba(85,85,85,1)));
465     background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
466     background: -o-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
467     background: -ms-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
468     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#555555',GradientType=0 );
469     color: #eee;
470     }
471#comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus,
472#comment-form input[type=reset]:hover, #comment-form input[type=reset]:focus {
473     background: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
474     background: rgb(85,85,85);
475     background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 100%);
476     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1)));
477     background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
478     background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
479     background: -ms-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
480     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#777777',GradientType=0 );
481     background: linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
482     text-decoration: none;
483     }
484#c_content {
485     width: 95%;
486     padding: 4px;
487     }
488
489.form-help { 
490     margin-top: 0;
491     font-size: .875em;
492     font-style: italic;
493     }
494
495#ping-url { 
496     background: #efefef;
497     border-right: 1px solid #aaa;
498     border-bottom: 1px solid #aaa;
499     font-size: .81em;
500     padding-left: .5em;
501     }
502#comments-feed { 
503     margin-top: 2em; 
504     }
505
506/* ------------------------------------------------------------
507     8. SIDEBAR
508------------------------------------------------------------- */
509
510#sidebar {
511     font-size: 0.875em;
512     }
513#sidebar h2 {
514     font-size: 1.1em;
515     margin: 0;
516     font-weight: normal;
517     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
518     color: #333;
519     }
520#sidebar h3 {
521     font-size: 1em;
522     margin-bottom: 0;
523     font-weight: normal;
524     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
525     color: #333;
526     }
527#sidebar ul {
528     margin: .75em 0 .5em 4px;
529     list-style-type: none;
530     padding: 0;
531     }
532#sidebar ul li ul {
533     margin-top: .5em;
534     }
535#sidebar ul li {
536     padding-left: 16px;
537     background: transparent url(img/square.png) no-repeat 0 .5em;
538     }
539#sidebar ul li ul li {
540     background-image: url(img/square2.png);
541     }
542#sidebar ul li ul li ul li {
543     background-image: url(img/square3.png);
544     }
545#sidebar .syndicate ul li {
546     background-image: none;
547     padding-left: 0;
548}
549#blognav > div, 
550#blogextra > div {
551     background: #ededed;
552     margin-bottom: 1em;
553     padding: 4px 8px;
554     -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
555     -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
556     -o-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
557     box-shadow: 2px 2px 4px rgba(0,0,0,.2);
558     }
559     
560/* ------------------------------------------------------- recherche */
561#search p {
562     background: #fff; 
563     text-align: right;
564     border: 1px solid #ddd;
565     vertical-align: middle;
566     padding: 0;
567     }
568#search input { 
569     margin: 0;
570     border: none;
571     background: transparent;
572     height: auto;
573     line-height: 2em;
574     }
575#search #q {
576     float: left;
577     width: 78%;
578     font-size: 100%;
579     padding-left: 2px;
580     }
581#search #q:focus {
582     background: #fcfcf9;
583     }
584#search .submit {
585     background: #706F6F;
586     color: #fff;
587     vertical-align: top;
588     width: 20%;
589     font-variant: small-caps;
590     height: 2em;
591     }
592#search .submit:hover, 
593#search .submit:focus {
594     background: #333;
595     }
596     
597/* ------------------------------------------------------------
598     9. FOOTER
599------------------------------------------------------------- */
600
601#footer {
602     clear: both;
603     background: #686867;
604     color: #fff;
605     }
606#footer p {
607     padding: .66em 2em;
608     margin: 0;
609     text-align: right;
610     font-size: .875em;
611     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
612     }
613#footer a {
614     color: #fff;
615     }
616#footer a:hover, 
617#footer a:focus {
618     background: #686867;
619     }
620#stickers {
621     list-style-type: none;
622     margin: 0;
623     }
624     
625/* ------------------------------------------------------------
626     10. CLASSES COMMUNES
627------------------------------------------------------------- */
628
629/* ------------------------------------------------------- RSS */
630.feed { 
631     padding-left: 20px;
632     background : transparent url(img/feed.png) no-repeat left center;
633     }
634
635/* ------------------------------------------------------- tags */   
636.dc-tags .content-inner, 
637.dc-tags .content-inner ul {
638     font-size: 1.25em;
639     margin: 0;
640     padding: 0;
641     }
642.dc-tags #content ul li, 
643.dc-tags #content ul li a, 
644#sidebar .tags ul li, 
645#sidebar .tags ul li a {
646     display : inline;
647     width : auto;
648     padding-left : 0;
649     padding-right : .5em;
650     background-color : transparent;
651     background-image: none;
652     text-decoration: none;
653     line-height : 1.5em;
654     }
655.tags ul li a:hover {
656     background-image :none;
657     }
658.dc-tags .tag0, .tags .tag0 { font-size: 85%; }
659.dc-tags .tag10, .tags .tag10 { font-size: 90%; }
660.dc-tags .tag20, .tags .tag20 { font-size: 95%; }
661.dc-tags .tag30, .tags .tag30 { font-size: 100%; }
662.dc-tags .tag40, .tags .tag40 { font-size: 105%; }
663.dc-tags .tag50, .tags .tag50 { font-size: 110%; }
664.dc-tags .tag60, .tags .tag60 { font-size: 115%; }
665.dc-tags .tag70, .tags .tag70 { font-size: 120%; }
666.dc-tags .tag80, .tags .tag80 { font-size: 125%; }
667.dc-tags .tag90, .tags .tag90 { font-size: 130%; }
668.dc-tags .tag100, .tags .tag100 { font-size: 135%; }
669
670/* ------------------------------------------------------- messages d'erreur */
671.error {
672     border : 1px solid #c44;
673     background : #df0;
674     padding : 0.5em;
675     }
676.error ul {
677     padding-left : 20px;
678     }
679.error li {
680     list-style : square;
681     }
682
683/* ------------------------------------------------------- class à dispo pour billets */
684.left { float: left; margin-right : 1em; }
685.right { float: right; margin-left : 1em; }
686.center { margin-left : auto; margin-right : auto; }
687.left-text { text-align : left; }
688.right-text { text-align : right; }
689.center-text { text-align : center; }
690.little-text { font-size : .875em;}
691.little-upper-text { font-size : .875em; text-transform : uppercase; }
692
693
694/* ------------------------------------------------------------
695     11. PAGES SPECIFIQUES
696------------------------------------------------------------- */
697
698.dc-home { }
699.dc-post { }
700.dc-category { }
701.dc-archive { }
702.dc-archive-month h2.post-title {
703     font-size: 1.3em;
704     }
705.dc-archive { }
706.dc-tags { }
707.dc-tag { }
708.dc-404 { }
709.dc-search { }
710
711
712/* ---------------------------------------------------
713  12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
714--------------------------------------------------- */
715.post, 
716.footnotes, 
717#attachments, 
718.post-info-co, 
719#comments, #footer {
720     clear:both;
721     }
722
723/* ================================================
724     personnalisations blog chantier
725================================================ */
726.post-content img, .post-excerpt img {
727     border: 1px solid #ccc;
728     }
Note: See TracBrowser for help on using the repository browser.

Sites map