Dotclear


Ignore:
Timestamp:
06/09/11 12:18:49 (14 years ago)
Author:
kozlika
Branch:
themes
Message:

Ductile - Full Css, step 1

File:
1 edited

Legend:

Unmodified
Added
Removed

  • themes/ductile/style.css

    r346 r347  
    22 
    33/* Ductile 
    4 Dotclear theme by Dotclear Team 
    5 Version de chantier 
     4     Dotclear theme by Dotclear Team 
     5     Version de chantier 
    66*/ 
    77 
    8 /* ------------------------------------------------------- imports */ 
     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------------------------------------------------------------------ */ 
    933 
    1034@import url(rebase.css); 
    … …  
    1539     background: #fff; 
    1640     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
    17      color: #151515; 
    18      } 
    19  
    20 /* ------------------------------------------------------- liens */ 
     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 
    2161a { 
    2262     color: #666; 
    2363     } 
    2464a:hover, a:focus { 
    25      background: #eee; 
     65     background-color: #eee; 
    2666     text-decoration: none; 
    2767     } 
    2868 
    29 /* ------------------------------------------------------- page */ 
     69/* ------------------------------------------------------------ 
     70     3. PAGE 
     71------------------------------------------------------------- */ 
     72 
    3073#page { 
    3174     position: relative; 
    3275     } 
    3376 
    34 /* ------------------------------------------------------- top */ 
     77/* ------------------------------------------------------------ 
     78     4. HAUT DE PAGE 
     79------------------------------------------------------------- */ 
     80 
    3581h1 a { 
    3682     text-decoration: none; 
    … …  
    4692#prelude a { 
    4793     color: #fff; 
    48 } 
     94     } 
    4995#prelude a:focus { 
    5096     color: #666; 
    51 } 
    52  
    53 /* ------------------------------------------------------- billets */ 
    54 .post { 
    55      background: transparent url(img/filet.png) repeat-x left bottom; 
    56      } 
    57 .day-date { 
    58      display: none; 
    59      } 
    60 h2.post-title { 
    61      margin-bottom: .33em; 
    62 } 
    63 h2.post-title a { 
    64      font-weight: normal; 
    65      font-style: italic; 
    66      text-decoration: none; 
    67      } 
    68 .post-info, .post-tags, .post-info-co, .read-it { 
    69      line-height: 1.2;    
    70      margin: .33em 0; 
    71      } 
    72 .post-info, .post-tags { 
    73      font-size: .875em; 
    74      padding: 0; 
    75      } 
    76 .post-info a, .post-tags a, .post-info-co a { 
    77      white-space: nowrap; 
    78      } 
    79 .post-tags a { 
    80      padding-right: 1em; 
    81      padding-left: 14px; 
    82      background: #fff no-repeat left center url(img/tag.png); 
    83      } 
    84 .post-tags li { 
    85      display: inline; 
    86      } 
    87 .post-content { 
    88      padding-bottom: 9px; 
    89      } 
    90 .read-it { 
    91      text-align: right; 
    92      margin: 0 0 .25em 0; 
    93      } 
    94 .post-info-co { 
    95      margin: 0; 
    96      background: #fff; 
    97      display: inline; 
    98      font-size: 0.875em; 
    99      font-style: italic; 
    100      } 
    101 .post-info-co a { 
    102      text-decoration: none; 
    103      padding-right: 1em; 
    104      padding-left: 28px; 
    105      background-color: #fff; 
    106      background-repeat: no-repeat; 
    107      background-position: left center; 
    108      } 
    109 .post-info-co a.comment_count { 
    110      background-image: url(img/comment.png); 
    111      } 
    112 .post-info-co a.ping_count { 
    113      background-image: url(img/ping.png); 
    114      } 
    115 .post-info-co a.attach_count { 
    116      background-image: url(img/attach.png);   
    117      } 
    118  
    119 /* ------------------------------------------------------- sidebar */ 
    120 #sidebar { 
    121      font-size: 0.875em; 
    122      } 
    123 #sidebar h2 { 
     97     } 
     98 
     99/* ------------------------------------------------------------ 
     100     5. WRAPPER MAIN CONTENT 
     101------------------------------------------------------------- */ 
     102 
     103#wrapper { } 
     104#main { } 
     105#content { } 
     106 
     107/* ------------------------------------------------------- content-info */ 
     108#content-info { 
     109     margin-top: 4em; 
     110     font-size: .875em; 
     111     font-family: "helvetica neue", helvetica, sans-serif; 
     112     } 
     113#content-info h2 {  
    124114     font-size: 1.2em; 
    125      margin: 0; 
    126      font-weight: normal; 
    127      } 
    128 #sidebar h3 { 
     115     } 
     116#subcategories { 
     117     font-size: .875em; 
     118     font-family: "helvetica neue", helvetica, sans-serif; 
     119     } 
     120#subcategories h3 {  
    129121     font-size: 1.1em; 
    130      margin-bottom: 0; 
    131      font-weight: normal; 
    132      } 
    133 #sidebar ul { 
    134      margin: .75em 0 .5em 4px; 
    135      list-style-type: none; 
    136      padding: 0; 
    137      } 
    138 #sidebar ul li ul { 
    139      margin-top: .5em; 
    140      } 
    141 #sidebar ul li { 
    142      padding-left: 16px; 
    143      background: transparent url(img/square.png) no-repeat 0 .5em; 
    144      } 
    145 #sidebar ul li ul li { 
    146      background-image: url(img/square2.png); 
    147      } 
    148 #sidebar ul li ul li ul li { 
    149      background-image: url(img/square3.png); 
    150      } 
    151 #blognav > div, #blogextra > div { 
    152      background: #f3f2e9; 
    153      margin-bottom: 1em; 
    154      padding: 4px 8px; 
    155      -moz-box-shadow: 2px 2px 4px #bbb; 
    156      -webkit-box-shadow: 2px 2px 4px #bbb; 
    157      -o-box-shadow: 2px 2px 4px #bbb; 
    158      box-shadow: 2px 2px 4px #bbb; 
    159      -moz-border-radius: 4px; 
    160      -webkit-border-radius: 4px; 
    161      border-radius: 4px; 
    162      } 
    163       
    164 /* recherche */ 
    165 #search p { 
    166      background: #fff;  
    167      text-align: right; 
    168      border: 1px solid #ddd; 
    169      vertical-align: middle; 
    170      padding: 0; 
    171      } 
    172 #search input {  
    173      margin: 0; 
    174      border: none; 
    175      background: transparent; 
    176      height: 2em; 
    177      } 
    178 #search #q { 
    179      float: left; 
    180      width: 80%; 
    181      } 
    182 #search #q:focus { 
    183      background: #fcfcf9; 
    184      } 
    185 #search .submit { 
    186      background: #706F6F; 
    187      color: #fff; 
    188      vertical-align: top; 
    189      width: 20%; 
    190122     font-variant: small-caps; 
    191123     } 
    192 #search .submit:hover, #search .submit:focus { 
    193      background: #333; 
    194      } 
    195  
    196 /* ------------------------------------------------------- pagination */ 
    197 #navlinks, .pagination { 
     124#content-info p,  
     125#content-info ul,  
     126#subcategories ul {  
     127     margin: .5em 0; 
     128     } 
     129 
     130/* ------------------------------------------------------- pagination, navlinks */ 
     131#navlinks,  
     132.pagination { 
    198133     margin-bottom: 1em; 
    199134     padding: 4px 8px; 
    … …  
    211146     } 
    212147#navlinks { 
    213      margin-top: 2.2em; 
    214      } 
    215 #navlinks a, .pagination a { 
     148     margin-top: 4em; 
     149     } 
     150#navlinks a,  
     151.pagination a { 
    216152     padding: 0 1em; 
    217153     } 
     154 
     155/* ------------------------------------------------------------ 
     156     6. BILLETS 
     157------------------------------------------------------------- */ 
     158 
     159.post { 
     160     background: transparent url(img/filet.png) repeat-x left bottom; 
     161     } 
     162.day-date { 
     163     display: none; 
     164     } 
     165h2.post-title { 
     166     font-weight: normal; 
     167     margin-bottom: .33em; 
     168     color: #909090; 
     169     line-height: 1; 
     170     font-size: 3em; 
     171     } 
     172h2.post-title a { 
     173     font-weight: normal; 
     174     font-style: italic; 
     175     text-decoration: none; 
     176     color: #ad3f4c; 
     177     } 
     178.post h3,  
     179.post h4,  
     180.post h5 
     181.post h6 { 
     182     font-variant: small-caps; 
     183     font-weight: normal; 
     184     color: #666; 
     185     } 
     186.post-info,  
     187.post-tags,  
     188.post-info-co,  
     189.read-it,  
     190.page-info { 
     191     line-height: 1.2;    
     192     margin: .33em 0; 
     193     } 
     194.post-info,  
     195.post-tags { 
     196     font-size: .875em; 
     197     padding: 0; 
     198     } 
     199.post-info a,  
     200.post-tags a,  
     201.post-info-co a { 
     202     white-space: nowrap; 
     203     } 
     204.post-tags a { 
     205     padding-right: 1em; 
     206     padding-left: 14px; 
     207     background: #fff no-repeat left center url(img/tag.png); 
     208     } 
     209.post-tags li { 
     210     display: inline; 
     211     } 
     212.post-content { 
     213     padding-bottom: 9px; 
     214     } 
     215.post ul { 
     216     list-style-type: square; 
     217     } 
     218.footnotes { 
     219     font-size: .875em; 
     220     } 
     221.read-it { 
     222     text-align: right; 
     223     margin: 0 0 .25em 0; 
     224     } 
     225.read-it a { 
     226     color: #ad3f4c; 
     227     } 
     228.post-info-co,  
     229.page-info { 
     230     margin: 0; 
     231     background: #fff; 
     232     display: inline; 
     233     font-size: 0.875em; 
     234     font-style: italic; 
     235     padding-right: .5em; 
     236     } 
     237.post-info-co a { 
     238     text-decoration: none; 
     239     padding-right: 1em; 
     240     padding-left: 28px; 
     241     background-color: #fff; 
     242     background-repeat: no-repeat; 
     243     background-position: left center; 
     244     } 
     245.post-info-co a.comment_count { 
     246     background-image: url(img/comment.png); 
     247     } 
     248.post-info-co a.ping_count { 
     249     background-image: url(img/ping.png); 
     250     } 
     251.post-info-co a.attach_count { 
     252     background-image: url(img/attach.png);   
     253     } 
     254 
     255/* ------------------------------------------------------------ 
     256     7. COMMENTAIRES, PINGS 
     257------------------------------------------------------------- */ 
     258 
     259/* ------------------------------------------------------- commentaires et rétroliens */ 
     260#comments,  
     261#pings,  
     262#comment-form, 
     263#comments-feed {  
     264     color: #4c4c85; 
     265     font-family: "helvetica neue", helvetica, sans-serif;   
     266     font-size: .875em; 
     267     } 
     268#comment-form { 
     269     padding: 1em; 
     270     background: #eef; 
     271     margin-top: 1em; 
     272     color: #333; 
     273     border: 1px solid #ddf; 
     274     } 
     275#pr { 
     276     padding: 1em; 
     277     border: 1px dashed #4c4c85; 
     278     margin-bottom: 1em; 
     279     } 
     280#comments h3,  
     281#pings h3,  
     282#pr h3,  
     283#comment-form h3 {  
     284     margin-top: 2em; 
     285     color: #666; 
     286     } 
     287#comment-form h3 { 
     288     margin-top: 0; 
     289     } 
     290#comments dl { } 
     291#comments dt {  
     292     padding-bottom: .2em; 
     293     border-bottom: 1px solid #ccc; 
     294     margin-top: 1.5em; 
     295     line-height: 1.1; 
     296     } 
     297#comments dd { } 
     298#comments .first { } 
     299#comments .odd { } 
     300#comments .me {  
     301     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
     302     color: #333; 
     303     font-size: 1.14em; 
     304     } 
     305a.comment-number { 
     306     font-size: 2em; 
     307     font-weight: normal; 
     308     font-style: italic; 
     309     text-decoration: none; 
     310     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
     311     color: #909090; 
     312     } 
     313 
     314#pings dl { } 
     315#pings dt {  
     316     border-bottom: 1px solid #ccc; 
     317     margin-top: 1.5em; 
     318     line-height: 1.1; 
     319     padding-bottom: .2em; 
     320     } 
     321#pings dd { } 
     322#pings .first { } 
     323#pings .odd { } 
     324 
     325#pr dl { } 
     326#pr dd { } 
     327 
     328/* ------------------------------------------------------- formulaire des commentaires */ 
     329#comment-form fieldset { } 
     330.field {  
     331     margin-bottom: 1em; 
     332     } 
     333.field label {  
     334     display: block; 
     335     font-size: .875em; 
     336     color: #666; 
     337     text-indent: 6px; 
     338     } 
     339.field input,  
     340.field textarea { 
     341     display: block; 
     342     font-size: 100%; 
     343     border: 1px solid #ccc; 
     344     text-indent: 4px; 
     345     background: #fff; 
     346     -webkit-border-radius: 3px;  
     347     -moz-border-radius: 3px; 
     348     border-radius: 3px; 
     349     } 
     350.field textarea {  
     351     font-family: "helvetica neue", helvetica, sans-serif; 
     352     font-size: .875em; 
     353     padding: .5em 1em;   
     354     } 
     355.field input:focus,  
     356.field textarea:focus { 
     357     background: #fff; 
     358     } 
     359#comment-form input[type=submit],  
     360#comment-form input[type=reset] { 
     361     font-size: .875em; 
     362     display: inline-block; 
     363     text-transform: capitalize; 
     364     font-weight: bold; 
     365     text-align: center; 
     366     padding: .33em .66em; 
     367     text-shadow: 0 1px 1px rgba(0,0,0,.3); 
     368     -webkit-border-radius: 5px;  
     369     -moz-border-radius: 5px; 
     370     border-radius: 5px; 
     371     border: solid 1px #777; 
     372     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
     373     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
     374     box-shadow: 0 1px 2px rgba(0,0,0,.2); 
     375     color: #eee; 
     376     background: #555; 
     377     background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555)); 
     378     background: -moz-linear-gradient(top, #777, #555); 
     379     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#555555');  
     380     } 
     381#comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus, 
     382#comment-form input[type=reset]:hover, #comment-form input[type=reset]:focus { 
     383     background: #777; 
     384     background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#777)); 
     385     background: -moz-linear-gradient(top, #555, #777); 
     386     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#777777'); 
     387     text-decoration: none; 
     388     } 
     389#c_content { 
     390     width: 95%; 
     391     padding: 4px; 
     392     } 
     393 
     394.form-help {  
     395     margin-top: 0; 
     396     font-size: .875em; 
     397     font-style: italic; 
     398     } 
     399 
     400#ping-url {  
     401     background: #efefef; 
     402     border-right: 1px solid #aaa; 
     403     border-bottom: 1px solid #aaa; 
     404     font-size: .81em; 
     405     padding-left: .5em; 
     406     } 
     407#comments-feed {  
     408     margin-top: 2em;  
     409     } 
     410 
     411/* ------------------------------------------------------------ 
     412     8. SIDEBAR 
     413------------------------------------------------------------- */ 
     414 
     415#sidebar { 
     416     font-size: 0.875em; 
     417     } 
     418#sidebar h2 { 
     419     font-size: 1.2em; 
     420     margin: 0; 
     421     font-weight: normal; 
     422     } 
     423#sidebar h3 { 
     424     font-size: 1.1em; 
     425     margin-bottom: 0; 
     426     font-weight: normal; 
     427     } 
     428#sidebar ul { 
     429     margin: .75em 0 .5em 4px; 
     430     list-style-type: none; 
     431     padding: 0; 
     432     } 
     433#sidebar ul li ul { 
     434     margin-top: .5em; 
     435     } 
     436#sidebar ul li { 
     437     padding-left: 16px; 
     438     background: transparent url(img/square.png) no-repeat 0 .5em; 
     439     } 
     440#sidebar ul li ul li { 
     441     background-image: url(img/square2.png); 
     442     } 
     443#sidebar ul li ul li ul li { 
     444     background-image: url(img/square3.png); 
     445     } 
     446#blognav > div,  
     447#blogextra > div { 
     448     background: #f3f2e9; 
     449     margin-bottom: 1em; 
     450     padding: 4px 8px; 
     451     -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.2); 
     452     -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.2); 
     453     -o-box-shadow: 2px 2px 4px rgba(0,0,0,.2); 
     454     box-shadow: 2px 2px 4px rgba(0,0,0,.2); 
     455     } 
    218456      
    219 /* ------------------------------------------------------- footer */ 
     457/* ------------------------------------------------------- recherche */ 
     458#search p { 
     459     background: #fff;  
     460     text-align: right; 
     461     border: 1px solid #ddd; 
     462     vertical-align: middle; 
     463     padding: 0; 
     464     } 
     465#search input {  
     466     margin: 0; 
     467     border: none; 
     468     background: transparent; 
     469     height: 2em; 
     470     } 
     471#search #q { 
     472     float: left; 
     473     width: 80%; 
     474     } 
     475#search #q:focus { 
     476     background: #fcfcf9; 
     477     } 
     478#search .submit { 
     479     background: #706F6F; 
     480     color: #fff; 
     481     vertical-align: top; 
     482     width: 20%; 
     483     font-variant: small-caps; 
     484     } 
     485#search .submit:hover,  
     486#search .submit:focus { 
     487     background: #333; 
     488     } 
     489      
     490/* ------------------------------------------------------------ 
     491     9. FOOTER 
     492------------------------------------------------------------- */ 
     493 
    220494#footer { 
    221495     clear: both; 
    … …  
    227501     margin: 0; 
    228502     text-align: right; 
    229 } 
     503     } 
    230504#footer a { 
    231505     color: #fff; 
    232506     } 
    233 #footer a:hover, #footer a:focus { 
     507#footer a:hover,  
     508#footer a:focus { 
    234509     background: #333; 
     510     } 
     511      
     512/* ------------------------------------------------------------ 
     513     10. CLASSES COMMUNES 
     514------------------------------------------------------------- */ 
     515 
     516/* ------------------------------------------------------- RSS */ 
     517.feed {  
     518     padding-left: 20px; 
     519     background : transparent url(img/feed.png) no-repeat left center; 
     520     } 
     521 
     522/* ------------------------------------------------------- tags */     
     523.dc-tags .content-inner,  
     524.dc-tags .content-inner ul { 
     525     font-size: 1.25em; 
     526     margin: 0; 
     527     padding: 0; 
     528     } 
     529.dc-tags #content ul li,  
     530.dc-tags #content ul li a,  
     531#sidebar .tags ul li,  
     532#sidebar .tags ul li a { 
     533     display : inline; 
     534     width : auto; 
     535     padding-left : 0; 
     536     padding-right : .5em; 
     537     background-color : transparent; 
     538     background-image: none; 
     539     text-decoration: none; 
     540     line-height : 1.5em; 
     541     } 
     542.tags ul li a:hover { 
     543     background-image :none; 
     544     } 
     545.dc-tags .tag0, .tags .tag0 { font-size: 85%; } 
     546.dc-tags .tag10, .tags .tag10 { font-size: 90%; } 
     547.dc-tags .tag20, .tags .tag20 { font-size: 95%; } 
     548.dc-tags .tag30, .tags .tag30 { font-size: 100%; } 
     549.dc-tags .tag40, .tags .tag40 { font-size: 105%; } 
     550.dc-tags .tag50, .tags .tag50 { font-size: 110%; } 
     551.dc-tags .tag60, .tags .tag60 { font-size: 115%; } 
     552.dc-tags .tag70, .tags .tag70 { font-size: 120%; } 
     553.dc-tags .tag80, .tags .tag80 { font-size: 125%; } 
     554.dc-tags .tag90, .tags .tag90 { font-size: 130%; } 
     555.dc-tags .tag100, .tags .tag100 { font-size: 135%; } 
     556 
     557/* ------------------------------------------------------- messages d'erreur */ 
     558.error { 
     559     border : 1px solid #c44; 
     560     background : #df0; 
     561     padding : 0.5em; 
     562     } 
     563.error ul { 
     564     padding-left : 20px; 
     565     } 
     566.error li { 
     567     list-style : square; 
     568     } 
     569 
     570/* ------------------------------------------------------- class à dispo pour billets */ 
     571.left { float: left; margin-right : 1em; } 
     572.right { float: right; margin-left : 1em; } 
     573.center { margin-left : auto; margin-right : auto; } 
     574.left-text { text-align : left; } 
     575.right-text { text-align : right; } 
     576.center-text { text-align : center; } 
     577.little-text { font-size : .875em;} 
     578.little-upper-text { font-size : .875em; text-transform : uppercase; } 
     579 
     580 
     581/* ------------------------------------------------------------ 
     582     11. PAGES SPECIFIQUES 
     583------------------------------------------------------------- */ 
     584 
     585.dc-home { } 
     586.dc-post { } 
     587.dc-categories { } 
     588.dc-category { } 
     589.dc-archive { } 
     590.dc-archive-month { } 
     591.dc-tags { } 
     592.dc-tag { } 
     593.dc-404 { } 
     594.dc-search { } 
     595 
     596 
     597/* --------------------------------------------------- 
     598  12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS 
     599--------------------------------------------------- */ 
     600.post,  
     601.footnotes,  
     602.attachments,  
     603.post-info-co,  
     604#comments, #footer { 
     605     clear:both; 
    235606     } 
    236607 
    … …  
    240611.post-content img, .post-excerpt img { 
    241612     border: 1px solid #ccc; 
    242 } 
    243 code, pre { 
    244      background: #dfdfdf; 
    245      border-right: 1px solid #aaa; 
    246      border-bottom: 1px solid #aaa; 
    247 } 
     613     } 
Note: See TracChangeset for help on using the changeset viewer.

Sites map