Changeset 62686 in spip-zone


Ignore:
Timestamp:
Jun 18, 2012, 9:59:13 PM (7 years ago)
Author:
claffont@…
Message:

Nettoyage et re-organisation de la css

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _themes_/zpip-1/Brownie/habillage.css

    r62517 r62686  
    11/* --------------------------------------------------------------
    22
    3    .css
    4    Surcharge de style.css - Utiliser par defaut dans la dist
    5 
    6 -------------------------------------------------------------- */
    7 
    8 
    9 
    10 /* http://meyerweb.com/eric/tools/css/reset/
    11    v2.0 | 20110126
    12    License: none (public domain)
    13 */
     3   habillage.css
     4   Adaptation de la version Brownie pour Zcore
     5
     6----------------------------------------------------------------- */
    147
    158html, body, div, span, applet, object, iframe,
     
    2518figure, figcaption, footer, header, hgroup,
    2619menu, nav, output, ruby, section, summary,
    27 time, mark, audio, video {
    28         margin: 0;
    29         padding: 0;
    30         border: 0;
    31         font-size: 100%;
    32         font: inherit;
    33         vertical-align: baseline;
    34 }
     20time, mark, audio, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; }
     21
    3522/* HTML5 display-role reset for older browsers */
    3623article, aside, details, figcaption, figure,
    37 footer, header, hgroup, menu, nav, section {
    38         display: block;
    39 }
    40 body {
    41         line-height: 1;
    42 }
    43 ol, ul {
    44         list-style: none;
    45 }
    46 blockquote, q {
    47         quotes: none;
    48 }
     24footer, header, hgroup, menu, nav, section { display: block; }
     25body { line-height: 1; }
     26ol, ul { list-style: none; }
     27blockquote, q { quotes: none; }
    4928blockquote:before, blockquote:after,
    50 q:before, q:after {
    51         content: '';
    52         content: none;
    53 }
    54 table {
    55         border-collapse: collapse;
    56         border-spacing: 0;
    57 }
    58 
    59 /* Bicubic resizing for non-native sized IMG:
    60    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
     29q:before, q:after { content: ''; content: none; }
     30table { border-collapse: collapse; border-spacing: 0; }
     31
     32/* Bicubic resizing for non-native sized IMG */
    6133.ie7 img { -ms-interpolation-mode: bicubic; }
    6234
    63 /* end */
    64 
    65 
    66 /* --------------------------------------------------------------
    67 
    68    typo.css
    69    Base typographique
    70    Cf.: http://www.spip-contrib.net/3820
    71 
    72 -------------------------------------------------------------- */
    73 
    74 html { font-size: 100.01%; } /* pour IE < 6 */
    75 /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html */
    76 body { background: #FFFFFF; font: 1em/1.5em Georgia, Cambria, Times New Roman, Times, serif; color: #222222; }
     35::selection { background: #2e2823; color: #fff; }
     36::-moz-selection { background: #2e2823; color: #fff; }
     37
     38body.wait *, body.wait { cursor:wait !important; }
     39
     40
     41/* --------------------------------------------------------------
     42    Base typographique
     43----------------------------------------------------------------- */
     44
     45html { font-size: 100.01%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
     46body { background: #fff; color: #74665B; font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif; text-align: center; }
     47
     48/* ------------------------------------------
     49/* Habillage des elements du contenu
     50/* ------------------------------------------ */
    7751
    7852/* Titraille / Intertitres */
    79 h1,.h1,
    80 h2,.h2,
    81 h3,.h3,
    82 h4,.h4,
    83 h5,.h5,
    84 h6,.h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
    85 hr { height: 1px; margin: 1.5em 0; border: 0; background: #222222; color: #222222; }
     53h1, h2, h3, h4, h5, h6,
     54.h1, .h2, .h3, .h4, .h5, .h6 { color: #262626; display: block; margin: 0; padding: 0; font-family: Helvetica, Arial, Tahoma, sans-serif; font-size: 100%; font-weight: 600; }
     55hr { border: 0; background: #D9D9D9; color: #222222; height: 1px; margin: 1.5em 0; }
    8656
    8757h1,.h1 { font-size: 2em; line-height: 1.5; margin-bottom: .75em; }
     
    9868big, .big { font-size: 130%; }
    9969abbr[title], acronym[title] { border-bottom: .1em dotted; cursor: help; }
    100 @media print { abbr[title]:after { content: " (" attr(title) ")"; } }
     70
    10171dfn { font-weight: bold; font-style: italic; }
    10272del, .del { background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through; }
     
    136106
    137107pre,code,kbd,samp,var,tt { font-family: 'Courier New', Courier, monospace; font-size: 1em; }
    138 pre { margin: 1.5em 0;
    139   /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
    140   white-space: pre;           /* CSS 2.0 */
    141   white-space: pre-wrap;      /* CSS 2.1 */
    142   white-space: pre-line;      /* CSS 3.0 */
    143   white-space: -pre-wrap;     /* Opera 4-6 */
    144   white-space: -o-pre-wrap;   /* Opera 7 */
    145   white-space: -moz-pre-wrap; /* Mozilla */
    146   white-space: -hp-pre-wrap;  /* HP Printers */
    147   word-wrap: break-word;      /* IE 5+ */
     108pre {
     109    margin: 1.5em 0;
     110    white-space: pre;           /* CSS 2.0 */
     111    white-space: pre-wrap;      /* CSS 2.1 */
     112    white-space: pre-line;      /* CSS 3.0 */
     113    white-space: -pre-wrap;     /* Opera 4-6 */
     114    white-space: -o-pre-wrap;   /* Opera 7 */
     115    white-space: -moz-pre-wrap; /* Mozilla */
     116    white-space: -hp-pre-wrap;  /* HP Printers */
     117    word-wrap: break-word;      /* IE 5+ */
    148118}
    149119kbd { background-color: #222222; color: #FFFFFF; }
     
    155125
    156126/* Liens */
    157 a {}
    158 a:hover {}
     127a {
     128    color: #d93e39; padding: 1px 3px; text-decoration: none;
     129    -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
     130}
     131a:focus, a:hover, a:active { background-color: #d93e39; color: #fff; text-decoration: none; }
     132a.spip_out, a.spip_glossaire { background: url("img/spip_out.gif") no-repeat scroll right center; color: #46839B; padding-right: 12px; }
     133a.spip_out:hover { background-color: #46839B; color: #fff; }
    159134a[hreflang]:after { content: "\0000a0(" attr(hreflang) ")"; }
    160 @media print {
    161   a, a:visited { color: #222222; text-decoration: underline; }
    162   .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
    163 }
    164 
    165135.on { font-weight: bold; }
    166136
    167 /**
    168 * Print styles from HTML5 Boilerplate
    169 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
    170 */
    171 
    172 @media print {
    173   pre, blockquote { page-break-inside: avoid; }
    174   thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    175   tr, img { page-break-inside: avoid; }
    176   @page { margin: 0.5cm; }
    177   p, h2, h3 { orphans: 3; widows: 3; }
    178   h2, h3 { page-break-after: avoid; }
    179 }
    180 
    181 /**
    182 * Base typo sur petits ecrans
    183 * Cf.: http://www.alsacreations.com/astuce/lire/1177
    184 */
    185 
    186 @media (max-width: 640px) {
    187 
    188   /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
    189   img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
    190   /* conserver le ratio des images, necessaire car attribut height existant */
    191   img { height: auto; }
    192 
    193   /* gestion des mots longs */
    194   textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* cesure forcee */ }
    195   code, pre, samp { white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */ }
    196 
    197 }
    198 
    199 @media screen and (max-width:640px) and (orientation: landscape) {
    200   body { -webkit-text-size-adjust: 70%; }
    201 }
    202 
    203 /* end */
    204 
    205 /* --------------------------------------------------------------
    206 
    207    form.css
     137
     138/* --------------------------------------------------------------
    208139   Base pour formulaires
    209    Cf.: http://www.spip-contrib.net/3820
    210 
    211 -------------------------------------------------------------- */
    212 
    213 input,textarea,select,button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; }
    214 
    215 legend { font-weight: bold; }
     140----------------------------------------------------------------- */
     141
     142fieldset {
     143    margin: 0; width: 100%;
     144    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
     145}
     146.ie fieldset { padding-top: 0; }
     147input, textarea, select, button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; }
     148textarea { overflow: auto; width: 100%; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
     149legend { display: none; }
     150label { color: #262626; display: block; font-weight: bold; }
    216151
    217152/* Hand cursor on clickable input elements */
    218 input[type="submit"],input.submit,
    219 input[type="button"],input.button,
    220 input[type="image"],input.image,
    221 button { cursor: pointer; }
    222 
    223 textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
    224 
    225 .ie fieldset { padding-top: 0; }
    226 .ie6 legend,
    227 .ie7 legend { margin-left: -7px; } /* Preciser la couleur des legend et du fond pour IE/Win */
    228 .ie button,
    229 .ie input.submit,
    230 .ie input.button { position: relative; }
    231 
    232 button { width: auto; overflow: visible; } /* Make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
     153input[type="submit"], input.submit,
     154input[type="button"], input.button,
     155input[type="image"], input.image,
     156button { cursor: pointer; overflow: visible; width: auto; }
     157.ie button, .ie input.submit, .ie input.button { position: relative; }
    233158
    234159/* Success, info, notice and error/alert boxes (from BluePrint) */
    235 
    236 .reponse,
    237 .error,
    238 .alert,
    239 .notice,
    240 .success,
    241 .info     { padding: .8em; margin-bottom: 1.5em; border: 2px solid #ddd; }
    242 
    243 .error,
    244 .alert      { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
    245 .notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
    246 .success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
    247 .info     { background: #d5edf8; color: #205791; border-color: #92cae4; }
    248 
    249 .error a,
    250 .alert a      { color: #8a1f11; }
    251 .notice a   { color: #514721; }
    252 .success a    { color: #264409; }
    253 .info a     { color: #205791; }
    254 
    255 /* Print */
    256 @media print {
    257   form { display: none; }
    258 }
    259 
    260 /* end */
    261 
    262 /* --------------------------------------------------------------
    263 
     160.reponse, .error, .alert, .notice, .success, .info {
     161    padding: .8em; margin-bottom: 1.5em; border: 2px solid #ddd;
     162    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
     163}
     164
     165.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
     166.notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
     167.success { background: #e6efc2; color: #264409; border-color: #c6d880; }
     168.info { background: #d5edf8; color: #205791; border-color: #92cae4; }
     169
     170.error p, .alert p, .notice p, .success p, .info p { margin-bottom: 0; }
     171
     172.error a, .alert a { color: #8a1f11; }
     173.notice a { color: #514721; }
     174.success a { color: #264409; }
     175.info a { color: #205791; }
     176
     177
     178/* --------------------------------------------------------------
    264179   Styles associes au code genere par SPIP
    265 
    266 -------------------------------------------------------------- */
     180----------------------------------------------------------------- */
    267181
    268182/* Listes SPIP */
    269 ul.spip,
    270 ol.spip { margin-left: 50px; }
     183ul.spip, ol.spip { margin-left: 50px; }
    271184ul.spip { list-style-type: square; }
    272185li ul.spip { list-style-type: disc; }
     
    274187ol.spip { list-style-type: decimal; }
    275188
    276 dl.spip dt,
    277 dl.spip dd { padding-left: 50px; }
    278 dl.spip dt { clear: both; }
     189dl.spip dt, dl.spip dd { padding-left: 50px; }
     190dl.spip dt { background: url("img/def.png") no-repeat 25px .5em; clear: both; }
    279191dl.spip dd {}
    280192
    281193/* Tableaux SPIP */
    282194table.spip { width: 100%; }
    283 table.spip caption {}
     195table.spip caption { background: none; border-bottom: 1px solid; font-weight: bold; text-align: left; }
    284196table.spip tr.row_first th {}
    285197table.spip tr.odd td {}
    286198table.spip tr.even td {}
     199table.spip thead th { background: none; border: 1px solid; border-width: 1px 0; }
     200table.spip tbody tr th, table.spip tr td { background: none; }
     201table.spip tbody tr.odd th, table.spip tr.odd td { background: #F9F4E1; }
     202table.spip tfoot { border-top: 1px solid; }
    287203
    288204/* Citations, code et poesie */
    289 blockquote.spip { min-height: 40px; background: url(img/quote.png) no-repeat; }
     205blockquote, blockquote.spip, .spip_poesie { border-left: 4px solid #D8C0A8; min-height: 40px; color: #666; font-style: italic; line-height: 1.4; padding: 0 25px; }
    290206.spip_poesie { border-left: 1px solid; }
    291207.spip_poesie div { margin-left: 50px; text-indent: -50px; }
    292 .spip_code,
    293 .spip_cadre { font-family: 'Courier New', Courier, monospace; font-size: 1em; }
     208.spip_code, .spip_cadre { background-color: #fff; color: #777; font-family: 'Courier New', Courier, monospace; font-size: 1em; }
     209.spip_cadre {  border: 1px solid #ddd; }
    294210
    295211/* Enluminures typo V3 / Cf.: http://www.spip-contrib.net/3118 */
     
    317233
    318234/* Formulaires */
    319 .formulaire_spip {}
     235.formulaire_spip {
     236    background: #f8f8f8; border: 1px solid #f0f0f; clear: both; margin: 1.5em 0; padding: 2em 1em 1em;
     237    -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
     238}
     239.aside .formulaire_spip { margin-top: 1em; padding: 2em 1em 1em; }
    320240.formulaire_spip li { clear: both; margin-bottom: 0.75em; }
     241input.text,textarea {
     242    background-color: #fff; border: 1px solid lightgrey; margin-bottom: 1em; padding: 4px; width: 100%;
     243    -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
     244    -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
     245}
     246.content input.text { width: 50%; }
     247
    321248.formulaire_spip .boutons { clear: both; margin: 0; padding: 0; text-align: right; }
    322249.formulaire_spip .boutons input,
    323250.formulaire_spip .boutons button {}
    324 @media print {
    325         .formulaire_spip { display: none; }
    326 }
    327251
    328252/* Barre typo */
     
    340264.reponse_formulaire_erreur a { color: #8a1f11; }
    341265
    342 .erreur_message { color: red; }
     266.erreur_message { color: red; display: block; }
    343267
    344268li.erreur input[type="text"], li.erreur input.text,
     
    350274/* Formulaire de recherche */
    351275.formulaire_recherche * { display: inline; }
     276.formulaire_recherche { background: none; border: none; margin: 0 !important; padding: 0 !important; width: 100%; }
     277.formulaire_recherche .text { background: url("img/recherche.png") no-repeat left center; padding-left: 20px; width: 100%; }
     278.ie6 .formulaire_recherche .text, .ie7 .formulaire_recherche .text { width: 89%; }
     279.aside .formulaire_recherche { position: absolute; top: 0; left: 0; }
     280.aside .formulaire_recherche input.submit { display: none; }
     281
     282/* Selection des langues */
     283.formulaire_menu_lang {  background: none; margin: 0; padding: 0; }
     284.formulaire_menu_lang { display: block; margin-left: 370px; position: absolute; top: .6em; left: 50%; }
     285
     286/* Choix des mots-clefs */
     287ul.choix_mots { display: block; list-style: none; margin: 0; padding: 0; }
     288ul.choix_mots li { clear: none; display: block; float: left; margin: 0; padding: 1%; width: 30%; }
     289ul.choix_mots li label { display: inline; font-weight: normal; }
     290
     291.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/
     292
     293/* Formulaire de login dans une page */
     294.formulaire_login ul li { clear: left; }
     295.formulaire_login .editer_password .details { display: block; }
     296.formulaire_login #spip_logo_auteur { float: right; }
     297
     298/* Fomulaire de contact */
     299.formulaire_ecrire_auteur {}
     300.formulaire_ecrire_auteur .saisie_sujet_message_auteur input.text { width: 100%; }
    352301
    353302/* Paragraphes */
     
    355304
    356305/* Pagination */
    357 .pagination { clear: both; text-align: center; }
    358 @media print {
    359         .pagination { display: none; }
    360 }
     306.pagination { clear: both; margin-bottom: 1.5em; overflow: hidden; text-align: center; }
     307.pagination a, .pagination .on {
     308    background: #F9F4E1; color: #707070; font-size: 1em; line-height: 1;
     309    display: block; float:left; margin: 0 10px 0 0; padding: 8px 15px; text-align: center; text-decoration: none;
     310    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
     311}
     312.pagination a:focus, .pagination a:hover, .pagination a:active, .pagination .on { background: #d93e39; color: #fff; }
     313.pagination .sep { display: none; }
     314#pagination_articles { padding: 0; }
    361315
    362316/* Liens de SPIP */
     
    367321a.spip_url {} /* liens url sortants */
    368322a.spip_glossaire {} /* liens vers encyclopedie */
    369 @media print {
    370         a.spip_out:after,
    371         a.spip_url:after { content: " (" attr(href) ")"; }
    372 }
    373323
    374324/* Boutons d'admin */
    375325.ie6 .spip-admin,
    376326.ie6 #spip-admin { display: none; }
    377 @media print {
    378         .spip-admin,
    379         #spip-admin { display: none; }
    380 }
    381 
    382 /* end */
    383 
    384 
    385 /* --------------------------------------------------------------
    386 
    387    button.css
    388    Style des boutons (a, input, button)
    389 
    390 -------------------------------------------------------------- */
    391 
    392 
    393 /* Affichage sur petits ecrans
    394  * Note : On ne modifie pas les boutons pour
    395          les petits ecrans.
    396 ------------------------------------------ */
    397 @media (min-width: 640px) {
    398     .submit { position: relative; display: inline-block; width: auto; padding: 5px 1em 6px; overflow: visible; cursor: pointer;
    399     background: #888 url(img/varicelle-sprite.png) left top repeat-x;
    400     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    401     border: 0;
    402     -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
    403     font-size: 100%; line-height: 1; font-weight: bold; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    404     .ie6.submit { background-image: none; border: none; color: #FFF !important; }
    405 
    406     .submit,
    407     .submit:visited,
    408     .submit * { color: #FFF; text-decoration: none; }
    409 
    410     .submit:hover { background-color: #777; color: #FFF; text-decoration: none; }
    411 }
    412 /* end */
    413 
    414 
    415 /* --------------------------------------------------------------
    416 
    417    layout.css
    418    Disposition des blocs principaux
    419    cf.: http://romy.tetue.net/structure-html-de-base
    420 
    421 -------------------------------------------------------------- */
    422 
    423 body { background: #fff; color:#666; font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif; text-align: center; }
    424 .page { }
    425 
    426 .header { background: #403830 url(img/header-bg.jpg) repeat-x; padding: 90px 0 20px 0; }
    427 .main { clear: both; }
    428 .footer { background: #403830; border-top: 1px solid #453C34; clear: both; margin-top: 1.5em; padding: 2em 0; position: relative; }
    429 
    430 .wrapper { clear: both; float: left; width: 70%; }
    431 .content { min-height: 350px; }
    432 
    433 .page_404 .content { background: url(img/404.png) no-repeat 0 100px; }
    434 .page_404 .chapo { font-family: 'Courier New', Courier, monospace; font-size: 2em; line-height: 1.5;  margin-top: 130px; margin-left: 200px; width: 350px;}
    435 .aside { float: right; overflow: hidden; width: 26%; }
    436 
    437 
    438 /* Centrer le layout
    439 ------------------------------------------ */
    440 .header .accueil,
    441 .menu-conteneur,
    442 .main, .nav,
    443 .footer .colophon { margin: 0 auto; position: relative; text-align: left; width: 900px; }
    444 
    445 
    446 /* Gabarit d'impression
    447 ------------------------------------------ */
    448 @media print {
    449     .page,
    450     .wrapper,
    451     .content { width: auto; }
    452     .nav,
    453     #hierarchie,
    454     .aside,
    455     .footer { display: none; }
    456 }
    457 
    458 /* Affichage sur petits ecrans
    459 * Cf.: http://www.alsacreations.com/astuce/lire/1177
    460 ------------------------------------------ */
    461 @media (max-width: 900px) {
    462 
    463     /* Afficher le contenu en Plein ecran
    464     ------------------------------------------ */
    465     .header .accueil,
    466     .menu-conteneur, .main, .nav,
    467     .footer .colophon {  overflow: visible; width: auto!important; }
    468 
    469     .page { margin: 0; }
    470     .header, .main, .footer { padding-left: 1em; padding-right: 1em; }
    471 }
    472 
    473 @media (max-width: 640px) {
    474 
    475     body { background: white; font: 11px/1.5 Helvetica, Arial, Tahoma, sans-serif; }
    476 
    477     /* Passer tous les elements de largeur fixe en largeur automatique */
    478     body,
    479     .page,
    480     .header,
    481     .main,
    482     .footer,
    483     .wrapper,
    484     .content,
    485     .aside { clear: both; float: none !important; margin: auto!important; padding: auto!important; width: auto!important; }
    486 
    487     /* On remonte le header et on cache les icons */
    488     .header { background-position: -0 -60px; padding: 20px 10px; }
    489     .socialtags { display:none;}
    490 
    491     /* header du calendrier full-calendar */
    492     table.fc-header td { display: block; text-align: left; border: 1px solid red }
    493 
    494     /* Pas de hauteur minimum pour les mobiles */
    495     .content { min-height: inherit; }
    496 
    497 }
    498 
    499 /* end */
    500 
    501 /* --------------------------------------------------------------
    502 
    503    theme.css
    504    Definition des styles pour Brownie
    505 
    506 -------------------------------------------------------------- */
    507 
    508 ::selection { background: #2e2823; color: #FFFFFF; }
    509 ::-moz-selection { background: #2e2823; color: #FFFFFF; }
    510 
    511 body.wait *, body.wait { cursor:wait !important; }
    512 
    513 /* ------------------------------------------
    514 /* Habillage des elements du contenu
    515 /* ------------------------------------------ */
    516 
    517 body { color: #74665B; -webkit-font-smoothing: antialiased; }
    518 
    519 /* Titraille / Intertitres */
    520 h1, h2, h3, h4, h5, h6,
    521 .h1, .h2, .h3, .h4, .h5, .h6 { color: #262626; font-family: Helvetica, Arial, Tahoma, sans-serif; font-weight: 600; }
    522 hr { background: #D9D9D9; }
    523 
     327
     328/* Fil d'ariane */
     329#hierarchie { clear: both; color: #453C34; font-size: .9em; }
     330#hierarchie * { font-weight: normal; }
     331
     332/* Contenu */
    524333.cartouche { margin-bottom: 1.5em; }
    525334.cartouche .spip_logos { background: #fff; padding-right: 1em; padding-bottom: .5em; }
     
    529338.soustitre {}
    530339
    531 /* Listes SPIP */
    532 dl.spip dt { background: url("img/def.png") no-repeat 25px .5em; }
    533 dl.spip dt, dl.spip dd { padding-left: 50px; }
    534 
    535 /* Tableaux SPIP */
    536 table.spip caption {  background: none; border-bottom: 1px solid; font-weight: bold; text-align: left; }
    537 table.spip thead th { background: none; border: 1px solid; border-width: 1px 0; }
    538 table.spip tbody tr th, table.spip tr td { background: none; }
    539 table.spip tbody tr.odd th, table.spip tr.odd td { background: #F9F4E1; }
    540 table.spip tfoot { border-top: 1px solid; }
    541 
    542 /* Citations, code et poesie */
    543 .spip_code { color: #777; }
    544 .spip_cadre { background-color: #fff; border: 1px solid #ddd; color: #777; }
    545 blockquote, blockquote.spip, .spip_poesie { background: none; border-left: 4px solid #D8C0A8; color: #666; font-style: italic; line-height: 1.4; padding: 0 25px; }
    546 
    547 /* Fil d'ariane */
    548 #hierarchie { clear: both; color: #453C34; font-size: .9em; }
    549 #hierarchie * { font-weight: normal; }
    550 
    551340/* Date */
    552341.info-publi .published,
     
    555344.aside .menu_breves small { background: url("img/blog_date.png") no-repeat center left; border: 0; color: #a6a6a6; font-size: 11px; font-style: normal; line-height: 11px; margin-bottom: .6em; padding: 3px 0 0 18px; }
    556345
    557 @media print {
    558     abbr[title].published:after { content: ""; }
    559     abbr[title].dtreviewed:after { content: ""; }
    560 }
    561346.info-publi { color: #a6a6a6; font-size: .9em; font-style: italic; margin: 1.5em 0 0; }
    562347.traductions { border: 1px dotted lightgrey; font-size: .9em; line-height: 1.5; margin: 1.5em 0; padding: 1em; text-align: center }
     
    573358
    574359
    575 /* Couleurs des liens
    576 ---------------------------------------------- */
    577 a {
    578     color: #d93e39; padding: 1px 3px; text-decoration: none;
    579     -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
    580 }
    581 a:focus, a:hover, a:active { background-color: #d93e39; color: #fff; text-decoration: none; }
    582 a.spip_out, a.spip_glossaire { background: url("img/spip_out.gif") no-repeat scroll right center; color: #46839B; padding-right: 12px; }
    583 a.spip_out:hover { background-color: #46839B; color: #fff; }
    584 
    585 
    586 /* Formulaires : variantes et cas particuliers
    587 ----------------------------------------------- */
    588 .formulaire_spip {
    589     background: #f8f8f8; border: 1px solid #f0f0f; clear: both; margin: 1.5em 0; padding: 2em 1em 1em;
    590     -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
    591 }
    592 .aside .formulaire_spip { margin-top: 1em; padding: 2em 1em 1em; }
    593 fieldset {
    594     margin: 0; width: 100%;
    595     -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
    596 }
    597 legend { display: none; }
    598 label { color: #262626; display: block; font-weight: bold; }
    599 .erreur_message { display: block; }
    600 input.text,textarea {
    601     background-color: #fff; border: 1px solid lightgrey; margin-bottom: 1em; padding: 4px; width: 100%;
    602     -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
    603     -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
    604 }
    605 .content input.text { width: 50%; }
    606 textarea { width: 100%; }
    607 
    608 /* Success, info, notice and error/alert boxes (from BluePrint) */
    609 .error, .alert, .notice, .success, .info { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    610 .error p, .alert p, .notice p, .success p, .info p { margin-bottom: 0; }
    611 
    612 /* Selection des langues */
    613 .formulaire_menu_lang {  background: none; margin: 0; padding: 0; }
    614 .formulaire_menu_lang { display: block; margin-left: 370px; position: absolute; top: .6em; left: 50%; }
    615 
    616 /* Formulaires de recherche (site / petitions) */
    617 .formulaire_recherche { background: none; border: none; margin: 0 !important; padding: 0 !important; width: 100%; }
    618 .formulaire_recherche .text { background: url("img/recherche.png") no-repeat left center; padding-left: 20px; width: 100%; }
    619 .ie6 .formulaire_recherche .text, .ie7 .formulaire_recherche .text { width: 89%; }
    620 .aside .formulaire_recherche { position: absolute; top: 0; left: 0; }
    621 .aside .formulaire_recherche input.submit { display: none; }
    622 
    623 /* Choix des mots-clefs */
    624 ul.choix_mots { display: block; list-style: none; margin: 0; padding: 0; }
    625 ul.choix_mots li { clear: none; display: block; float: left; margin: 0; padding: 1%; width: 30%; }
    626 ul.choix_mots li label { display: inline; font-weight: normal; }
    627 
    628 .formulaire_spip .bugajaxie { display: none; } /*IE/Win*/
    629 
    630 /* Formulaire de login dans une page */
    631 .formulaire_login ul li { clear: left; }
    632 .formulaire_login .editer_password .details { display: block; }
    633 .formulaire_login #spip_logo_auteur { float: right; }
    634 
    635 /* Fomulaire de contact */
    636 .formulaire_ecrire_auteur {}
    637 .formulaire_ecrire_auteur .saisie_sujet_message_auteur input.text { width: 100%; }
    638 
    639 
    640 /* Habillage des forums
    641 ---------------------------------------------- */
     360/* --------------------------------------------------------------
     361   Blocs principaux
     362----------------------------------------------------------------- */
     363
     364.header { background: #403830 url(img/header-bg.jpg) repeat-x; padding: 90px 0 20px 0; }
     365.main { clear: both; }
     366.footer { background: #403830; border-top: 1px solid #453C34; clear: both; margin-top: 1.5em; padding: 2em 0; position: relative; }
     367
     368.wrapper { clear: both; float: left; width: 70%; }
     369.content { min-height: 350px; }
     370
     371.page_404 .content { background: url(img/404.png) no-repeat 0 100px; }
     372.page_404 .chapo { font-family: 'Courier New', Courier, monospace; font-size: 2em; line-height: 1.5;  margin-top: 130px; margin-left: 200px; width: 350px;}
     373.aside { float: right; overflow: hidden; width: 26%; }
     374
     375/* Centrer le layout */
     376.header .accueil, .menu-conteneur, .main, .nav, .footer .colophon { margin: 0 auto; position: relative; text-align: left; width: 900px; }
     377
     378
     379/* --------------------------------------------------------------
     380   Habillage des forums
     381----------------------------------------------------------------- */
    642382
    643383/* Habillage des forums */
     
    647387.comments-list .comment .comment { border-style:dashed; border-color: #e6e6e6; }
    648388.comment-fil ul {}
     389.nb_commentaires {
     390    background-image: url(img/recent_post_comments.png); background-repeat: no-repeat; background-position: left top;
     391    display: inline-block; font-size: 11px; padding-left: 15px; position: absolute; bottom: 6px; right: 19px; }
    649392
    650393/* comments list */
     
    681424
    682425
    683 /* ------------------------------------------
    684 /* Sous-navigation et autres menus
    685 /* ------------------------------------------ */
     426/* --------------------------------------------------------------
     427  Sous-navigation et autres menus
     428----------------------------------------------------------------- */
    686429
    687430/* Habillage general des menus de nav */
     
    699442.aside { padding-top: 60px; position: relative; }
    700443.aside .menu, .aside .liste { border-top: 1px solid #ccc; margin-top: 1em; padding:2em 0.75em 0.75em; }
    701 .aside .menu a, .aside .liste a { display: block; padding-left:20px; margin-left: -20px; }
     444.aside .liste h2 a { color: #262626; }
     445.aside .liste h2 a:focus, .aside .liste h2 a:hover, .aside .liste h2 a:active { background-color: #d93e39; color: #fff; text-decoration: none; }
     446.aside .menu a, .aside .liste a { display: block; }
    702447.aside .menu ul, .aside .liste ul { margin-bottom: 0; }
    703 .aside .menu li, .aside .liste li { border-bottom: 0; color: #A6A6A6; margin-bottom: .4em; }
     448.aside .menu li, .aside .liste li { border-bottom: 0; color: #A6A6A6; margin-bottom: .2em; }
    704449.aside .menu p, .aside .liste p { color: #666; }
    705450
     
    715460.cboxElement:hover { background: none; }
    716461.cboxElement:hover img { border-color: red; }
    717 
    718 /* Pagination */
    719 .pagination { margin-bottom: 1.5em; overflow: hidden; }
    720 .pagination a, .pagination .on {
    721     background: #F9F4E1; color: #707070; font-size: 1em; line-height: 1;
    722     display: block; float:left; margin: 0 10px 0 0; padding: 8px 15px; text-align: center; text-decoration: none;
    723     -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    724 }
    725 .pagination a:focus, .pagination a:hover, .pagination a:active, .pagination .on { background: #d93e39; color: #fff; }
    726 .pagination .sep { display: none; }
    727 #pagination_articles { padding: 0; }
    728462
    729463
     
    736470.header #nom_site_spip a, .header #nom_site_spip a:focus, .header #nom_site_spip a:hover, .header #nom_site_spip a:active { background: transparent; text-decoration: none; color: #F9F4E1; padding: 0; }
    737471.header #slogan_site_spip { color: #D8C0A8; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;   }
    738 
    739 /* Barre de navigation
    740 .nav { }
    741 .nav ul {}
    742 .nav ul li { }
    743 .nav ul li a { }
    744 .nav ul li a:focus,
    745 .nav ul li a:hover,
    746 .nav ul li a:active { } */
    747472
    748473/* Navigation principale - Utilisation du plugin Menu */
     
    770495/* Navigation principale - Utilisation du plugin Menu */
    771496.mnav { display: inline-block; margin: 1em 0; width: 100%; }
    772 @media print {
    773     /*  Ne pas imprimer les menus */
    774     .menu-conteneur,
    775     .mnav { display: none; }
    776 }
    777 
    778497
    779498/* Pied de page
     
    784503
    785504
    786 /* ------------------------------------------
    787505/* Sous-navigation et autres menus
    788 /* ------------------------------------------ */
     506------------------------------------------ */
    789507
    790508/* Listes d'articles et extraits introductifs */
     
    821539@-ms-keyframes moveFromRight { from { -ms-transform: translateX(100%); } to { -ms-transform: translateX(0%); } }
    822540
     541
     542/* --------------------------------------------------------------
     543  Pages
     544----------------------------------------------------------------- */
     545
    823546/* Page Sommaire */
    824547.content .liste .liste-items .entry-title { margin-bottom: 1em; }
    825548.page_sommaire .content .liste .liste-items .entry-title a { background:none!important; color: #000; display: block; font-size: 1.4em; height:100%; margin: 0; padding: 0; overflow: hidden; }
    826549.page_sommaire .content .liste .liste-items .entry-title a:hover { background: none; color: #D93E39; }
    827 .content .liste .liste-items .info-publi { float: left; display:inline-block; position: absolute; bottom: 20px; right: 19px; }
     550.content .liste .liste-items .info-publi { float: left; display:inline-block; position: absolute; bottom: 25px; right: 19px; }
    828551
    829552.page_sommaire .content .liste .liste-items .spip_logos {
     
    852575}
    853576
    854 
    855577/* Page Contact */
    856578.page_contact .formulaire_spip { background: none; border: none; }
     
    869591.socialtags a:focus, .socialtags a:hover, .socialtags a:active { background-color: transparent!important; }
    870592
    871 /* ------------------------------------------
    872 /* Autres medias
    873 /* ------------------------------------------ */
     593
     594/* --------------------------------------------------------------
     595  Autres medias
     596----------------------------------------------------------------- */
    874597
    875598@media print {
    876599
    877 /*  Ne pas imprimer */
    878 .spip-admin,
    879 .spip-admin-float,
    880 .spip-previsu,
    881 .repondre,
    882 .formulaire_spip { display: none; }
    883 
    884 /* MobileMenu Plugin - Cacher le select*/
    885 .mnav { display: none; }
    886 
    887 /* Souligner et expliciter les liens */
    888 a { color: #600; text-decoration: underline !important; }
    889 a.spip_out:after,
    890 a.spip_glossaire:after,
    891 a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }
    892 
    893 }
    894 
    895 /* Affichage sur petits ecrans
    896 * Cf.: http://www.alsacreations.com/astuce/lire/1177
    897 ------------------------------------------ */
     600    pre, blockquote { page-break-inside: avoid; }
     601    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
     602    tr, img { page-break-inside: avoid; }
     603    @page { margin: 0.5cm; }
     604    p, h2, h3 { orphans: 3; widows: 3; }
     605    h2, h3 { page-break-after: avoid; }
     606   
     607    abbr[title]:after { content: " (" attr(title) ")"; }
     608    abbr[title].published:after { content: ""; }
     609    abbr[title].dtreviewed:after { content: ""; }
     610
     611    /*  Ne pas imprimer */
     612    .spip-admin,
     613    .spip-admin-float,
     614    .spip-previsu,
     615    .repondre,
     616    .pagination,
     617    .spip-admin, #spip-admin,
     618    #hierarchie,
     619    .aside, .footer,
     620    .nav, .menu-conteneur, .mnav,
     621    form, .formulaire_spip { display: none; }
     622   
     623    /* MobileMenu Plugin - Cacher le select*/
     624    .mnav { display: none; }
     625   
     626    /* Souligner et expliciter les liens */
     627    a { color: #600; text-decoration: underline !important; }
     628    a.spip_out:after,
     629    a.spip_glossaire:after,
     630    a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }
     631    a, a:visited { color: #222222; text-decoration: underline; }
     632    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
     633    a.spip_out:after, a.spip_url:after { content: " (" attr(href) ")"; }
     634
     635    .page, .wrapper, .content { width: auto; }
     636}
     637
     638/* ----------------------------------------------------------------- */
    898639@media (max-width: 900px) {
    899640    /* Plugin : Social Tags */
     
    905646    /* Navigation principale - Utilisation du plugin Menu */
    906647    #nav > ul > li:last-child, .menu-conteneur > ul > li:last-child { margin-right: 10px; }
    907 }
    908 
     648
     649    /* Afficher le contenu en Plein ecran */
     650    .header .accueil,
     651    .menu-conteneur, .main, .nav,
     652    .footer .colophon {  overflow: visible; width: auto!important; }
     653
     654    .page { margin: 0; }
     655    .header, .main, .footer { padding-left: 1em; padding-right: 1em; }
     656}
     657
     658/* ----------------------------------------------------------------- */
    909659@media (max-width: 640px) {
     660
     661    body { background: white; font: 11px/1.5 Helvetica, Arial, Tahoma, sans-serif; }
     662
     663    /* Passer tous les elements de largeur fixe en largeur automatique */
     664    body,
     665    .page,
     666    .header,
     667    .main,
     668    .footer,
     669    .wrapper,
     670    .content,
     671    .aside { clear: both; float: none !important; margin: auto!important; padding: auto!important; width: auto!important; }
     672
     673    /* On remonte le header et on cache les icons */
     674    .header { background-position: -0 -26px; padding: 0; height: 120px; }
     675    .header .accueil { padding-top: 50px; padding-left: 10px; }
     676    .socialtags { display:none;}
     677
     678    /* header du calendrier full-calendar */
     679    table.fc-header td { display: block; text-align: left; border: 1px solid red }
     680
     681    /* Menu Lang */
     682    .formulaire_menu_lang label { display: none; }
     683
     684    /* Pas de hauteur minimum pour les mobiles */
     685    .content { min-height: inherit; }
     686
     687    /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
     688    img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
     689    /* conserver le ratio des images, necessaire car attribut height existant */
     690    img { height: auto; }
     691   
     692    /* gestion des mots longs */
     693    textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* cesure forcee */ }
     694    code, pre, samp { white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */ }
    910695
    911696    .hyperlien { background-position: 5px 1.4em; padding: 1em 1em 1em 30px; }
     
    918703
    919704    /* Barre de navigation */
    920     #nav, .menu-conteneur { background-color:#403830; border-bottom: 1px solid #222; margin-bottom: 1.5em; text-align: center; top: auto; }
     705    #nav, .menu-conteneur { background-color:#403830; margin-bottom: 1.5em; text-align: center; top: auto; }
    921706    #nav ul, .menu-conteneur ul { float: none; }
    922707    #nav ul li, .menu-conteneur ul li { border-top: 1px solid #fff; width: 100%; }
     
    930715
    931716    .liste-items ul { margin: 0; }
    932     .liste-items li { padding: 1em; }
     717    .lire-la-suite-titre { display: none; }
    933718
    934719    .content input.text { width: 100%!important; }
     
    949734}
    950735
    951 /* end */
     736@media screen and (max-width:640px) and (orientation: landscape) { body { -webkit-text-size-adjust: 70%; } }
     737
     738@media (min-width: 480px) {
     739    .submit {
     740        position: relative; display: inline-block; width: auto; padding: 5px 1em 6px; overflow: visible; cursor: pointer;
     741        background: #888 url(img/varicelle-sprite.png) left top repeat-x;
     742        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     743        border: 0;
     744        -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
     745        font-size: 100%; line-height: 1; font-weight: bold; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
     746    }
     747    .ie6.submit { background-image: none; border: none; color: #FFF !important; }
     748
     749    .submit,
     750    .submit:visited,
     751    .submit * { color: #FFF; text-decoration: none; }
     752    .submit:hover { background-color: #777; color: #FFF; text-decoration: none; }
     753}
Note: See TracChangeset for help on using the changeset viewer.