Changeset 108095 in spip-zone


Ignore:
Timestamp:
Dec 18, 2017, 5:46:46 AM (19 months ago)
Author:
l.oiseau2nuit@…
Message:

refactoring CSS / work in progress

Location:
_squelettes_/zktx-kore/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/zktx-kore/trunk/content/article.html

    r105340 r108095  
    1515
    1616                <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
    17                         [<header class="page-header #EDIT{chapo} surlignable strong">(#CHAPO|abs_url)</header>]
     17                        [<header class="page-header #EDIT{chapo} surlignable lead">(#CHAPO|abs_url)</header>]
    1818
    1919                        [<p class="#EDIT{hyperlien} hyperlien"><a target="_blank" class="btn btn-lg btn-primary" href="(#URL_SITE)">[(#NOM_SITE|sinon{"<:voir_en_ligne:>"})]</a></p>]
  • _squelettes_/zktx-kore/trunk/css/zktx.css.html

    r108008 r108095  
    44  état = prod => CACHE{3600*24*30}
    55]
    6 #HTTP_HEADER{Content-Type: text/css;}
     6#HTTP_HEADER{Content-Type: text/css; charset=#CHARSET}
    77
    8 [(#REM) Feuille de style Zktx
    9         * surcharge des styles boostrap
    10         * dynamique (d'où l'extension .css.html)
    11 ]
     8a:link, a:visited, a:active, a:hover, a:focus, button, .btn, button:hover, .btn:hover {
     9  -webkit-transition: All .6s ease-in;
     10  moz-transition: All .6s ease-in;
     11  o-transition: All .6s ease-in;
     12  transition: All .6s ease-in;
     13}
    1214
    13 body {  padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
     15a:link, a:visited { [color: #(#ID_RUBRIQUE
     16    |couleur_rubrique
     17    |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     18    |couleur_inverser
     19    |couleur_foncer
     20  );]
     21}
     22a:active, a:hover, a:focus {
     23  [color: #(#ID_RUBRIQUE
     24    |couleur_rubrique
     25    |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     26    |couleur_inverser
     27  );]
     28}
    1429
    1530
    16 [(#REM) Liens hypertextes ]
    17  
    18   a:link, a:visited, a:active, a:hover, a:focus, button, .btn, button:hover, .btn:hover {
    19     -webkit-transition: All .6s ease-in;
    20     moz-transition: All .6s ease-in;
    21     o-transition: All .6s ease-in;
    22     transition: All .6s ease-in;
    23   }
     31[h2, .h2 {
     32        color: #(#ID_RUBRIQUE
     33                |couleur_rubrique
     34                |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     35                |sinon{"111111"}
     36        );
     37}]
    2438
    25   a:link, a:visited { [color: #(#ID_RUBRIQUE
    26       |couleur_rubrique
    27       |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    28       |couleur_inverser
    29       |couleur_foncer
    30     );]
    31     [(#REM) text-decoration:underline; ]
    32   }
    33   a:active, a:hover, a:focus {
    34     [color: #(#ID_RUBRIQUE
    35       |couleur_rubrique
    36       |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    37       |couleur_inverser
    38     );]
    39     text-decoration:none;
    40     [(#REM) text-shadow: 0px 0px 2px #111;]
    41   }
     39p { margin:0 0 1em 0; }
    4240
    43 [(#REM) Niveaux de titres ]
    44   [h2, .h2 {
    45         color: #(#ID_RUBRIQUE
    46                 |couleur_rubrique
    47                 |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    48                 |sinon{"111111"}
    49         );
    50   }]
     41[(#REM) .pull-left, .pull-right {margin-bottom:0.75em;} ]
     42.pull-left {margin-right:1em;}
     43.pull-right {margin-left:1em;}
    5144
    52   h3, .h3 {font-weight:normal; margin-bottom:0.75em;}
     45a.btn { text-decoration:none!important; }
    5346
    54 [(#REM) balises ]
    55   p { margin:0 0 1em 0; }
     47[(#SET{grad, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]})] })]
     48[(#SET{grad_foncer, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]}|couleur_foncer)] })]
     49[(#SET{grad_bordure, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]}|couleur_foncer|couleur_foncer)] })]
    5650
    57 [(#REM) Helper class ]
    58   [(#REM) .pull-left, .pull-right {margin-bottom:0.75em;} ]
    59   .pull-left {margin-right:1em;}
    60   .pull-right {margin-left:1em;}
    61 
    62 [(#REM) Boutons]
    63   a.btn { text-decoration:none!important; }
    64   [(#SET{grad, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]})] })]
    65   [(#SET{grad_foncer, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]}|couleur_foncer)] })]
    66   [(#SET{grad_bordure, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]}|couleur_foncer|couleur_foncer)] })]
    67 
    68   .btn-primary {
    69     background-image: -webkit-gradient(linear,left 0,left 100%,from(#GET{grad}),to(#GET{grad_foncer}));
    70     background-image: -webkit-linear-gradient(top,#GET{grad} 0,#GET{grad_foncer} 100%);
    71     background-image: -moz-linear-gradient(top,#GET{grad} 0,#GET{grad_foncer} 100%);
    72     background-image: linear-gradient(to bottom,#GET{grad} 0,#GET{grad_foncer} 100%);
    73     background-repeat: repeat-x;
    74     border-color: #GET{grad_bordure};
    75     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#GET{grad}',endColorstr='#ff#GET{grad_foncer}',GradientType=0);
    76     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    77   }
    78   .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    79     color: #fff;
    80     border-color: #GET{grad_bordure};
    81     background-color: #GET{grad_foncer};
    82     background-position: 0 -15px;
    83   }
    84 
    85 [(#REM) Navigations et ergonomie ]
     51.btn-primary {
     52  background-image: -webkit-gradient(linear,left 0,left 100%,from(#GET{grad}),to(#GET{grad_foncer}));
     53  background-image: -webkit-linear-gradient(top,#GET{grad} 0,#GET{grad_foncer} 100%);
     54  background-image: -moz-linear-gradient(top,#GET{grad} 0,#GET{grad_foncer} 100%);
     55  background-image: linear-gradient(to bottom,#GET{grad} 0,#GET{grad_foncer} 100%);
     56  background-repeat: repeat-x;
     57  border-color: #GET{grad_bordure};
     58  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#GET{grad}',endColorstr='#ff#GET{grad_foncer}',GradientType=0);
     59  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
     60}
     61.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
     62  color: #fff;
     63  border-color: #GET{grad_bordure};
     64  background-color: #GET{grad_foncer};
     65  background-position: 0 -15px;
     66}
    8667
    8768.navbar-brand {padding:10px 15px;}
    8869
    89   .remonter { position:fixed; bottom:0.85em; right:0.85em;}
    90   [.breadcrumb {
    91     background-color: #(#ID_RUBRIQUE
    92       |couleur_rubrique
    93       |sinon{ [(#ID_RUBRIQUE|couleur_site|couleur_eclaircir|couleur_eclaircir)] }
    94       |couleur_eclaircir
    95       |couleur_eclaircir
    96     );
    97   }]
     70.remonter { position:fixed; bottom:0.85em; right:0.85em;}
     71[.breadcrumb {
     72  background-color: #(#ID_RUBRIQUE
     73    |couleur_rubrique
     74    |sinon{ [(#ID_RUBRIQUE|couleur_site|couleur_eclaircir|couleur_eclaircir)] }
     75    |couleur_eclaircir
     76    |couleur_eclaircir
     77  );
     78}]
    9879
    99 [(#REM) STRUCTURE ]
    100 [(#REM)
    101         Wrapper pour le contenu de la page, permettant de fixer le footer en bas de l'écran
    102         Commenter pour "libérer" le footer
    103 ]
    104 #wrap {
    105   min-height: 100%;
    106   height: auto;
    107   [(#REM) Negative indent footer by its height ]
    108   margin: 0 auto -60px;
    109   [(#REM)  bottom by footer height ]
    110   padding: 0 0 60px;
     80
     81.bs-header, .bs-content, .bs-footer {padding:40px 0;}
     82.bs-header {padding-top:80px;}
     83
     84
     85
     86
     87.bs-header {
     88  background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"})];
     89  color: [#(#ID_RUBRIQUE{0}|couleur_site|couleur_inverser|sinon{"111111"})];
     90 
     91  [background-position:50% 50%;
     92  background-attachment:fixed;
     93  background-repeat:no-repeat;
     94  background-image:url('(#LOGO_SITE_SPIP_SURVOL
     95                            |image_reduire{1900,0}
     96                            |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
     97                            |image_gamma{-100}
     98                            |extraire_attribut{src}
     99                          )');]
     100}
     101.bs-footer {
     102  background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"}|couleur_foncer|couleur_foncer)];
     103  color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"FFFFFF"}|couleur_eclaircir|couleur_eclaircir)];
    111104}
    112105
    113 [(#REM) Header des pages ]
    114106
    115   .bs-header {
    116     color: #cdbfe3;
    117     background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"})];
    118     padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
    119     font-size: 16px;
    120     text-align: center;
    121     text-shadow: 0 1px 0 rgba(0,0,0,.15);
    122     background-position:50% 50%;
    123     background-attachment:fixed;
    124     background-repeat:no-repeat;
    125     [background-image:url('(#LOGO_SITE_SPIP_SURVOL
     107
     108<BOUCLE_article_bs_header(ARTICLES){tout}>
     109  .bs-header.article#ID_ARTICLE {
     110                color: [#(#ID_RUBRIQUE
     111                        |couleur_rubrique
     112                        |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     113                        |couleur_inverser
     114                        |sinon{"111111"}
     115                      )];
     116    background-color: [#(#ID_RUBRIQUE
     117                        |couleur_rubrique
     118                        |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     119                        |sinon{"EFEFEF"}
     120                      )];
     121    [background-image:url('(#LOGO_ARTICLE_SURVOL
     122                              |sinon{#LOGO_RUBRIQUE_SURVOL}
     123                              |sinon{#LOGO_SITE_SPIP_SURVOL}
     124                              |image_reduire{1900,0}
     125                              |image_sepia{ [(#ID_RUBRIQUE
     126                                                |couleur_rubrique
     127                                                |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     128                                                |sinon{"EFEFEF"}
     129                                            )] }
     130                              |image_gamma{-100}
     131                              |extraire_attribut{src}
     132                          )')!important;]
     133  }
     134</BOUCLE_article_bs_header>
     135
     136
     137<BOUCLE_rubrique_bs_header(RUBRIQUES){tout}>
     138  .bs-header.rubrique#ID_RUBRIQUE {
     139                color: [#(#ID_RUBRIQUE
     140                        |couleur_rubrique
     141                        |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     142                        |couleur_inverser
     143                        |sinon{"111111"}
     144                      )];
     145    background-color: [#(#ID_RUBRIQUE
     146                        |couleur_rubrique
     147                        |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     148                        |sinon{"EFEFEF"}
     149                      )];
     150    [background-image:url('(#LOGO_RUBRIQUE_SURVOL
     151                              |sinon{#LOGO_SITE_SPIP_SURVOL}
     152                              |image_reduire{1900,0}
     153                              |image_sepia{ [(#ID_RUBRIQUE
     154                                                |couleur_rubrique
     155                                                |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
     156                                                |sinon{"EFEFEF"}
     157                                            )] }
     158                              |image_gamma{-100}
     159                              |extraire_attribut{src}
     160                          )');]
     161
     162  }
     163</BOUCLE_rubrique_bs_header>
     164
     165<BOUCLE_mot_bs_header(MOTS){tout}>
     166  .bs-header.mot#ID_MOT {
     167    [background-image:url('(#LOGO_MOT_SURVOL
     168                              |sinon{ #LOGO_SITE_SPIP_SURVOL }
    126169                              |image_reduire{1900,0}
    127170                              |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
    128171                              |image_gamma{-100}
    129172                              |extraire_attribut{src}
    130                             )');]
     173                          )')!important;]
    131174  }
    132 
    133       [(#REM) Pages articles ]
    134       <BOUCLE_article_bs_header(ARTICLES){tout}>
    135         .bs-header.article#ID_ARTICLE {
    136           background-color: [#(#ID_RUBRIQUE
    137                               |couleur_rubrique
    138                               |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    139                               |sinon{"EFEFEF"}
    140                             )];
    141           [background-image:url('(#LOGO_ARTICLE_SURVOL
    142                                     |sinon{#LOGO_RUBRIQUE_SURVOL}
    143                                     |sinon{#LOGO_SITE_SPIP_SURVOL}
    144                                     |image_reduire{1900,0}
    145                                     |image_sepia{ [(#ID_RUBRIQUE
    146                                                       |couleur_rubrique
    147                                                       |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    148                                                       |sinon{"EFEFEF"}
    149                                                   )] }
    150                                     |image_gamma{-100}
    151                                     |extraire_attribut{src}
    152                                 )')!important;]
    153 
    154         }
    155       </BOUCLE_article_bs_header>
    156 
    157       [(#REM) Pages rubriques ]
    158       <BOUCLE_rubrique_bs_header(RUBRIQUES){tout}>
    159         .bs-header.rubrique#ID_RUBRIQUE {
    160           background-color: [#(#ID_RUBRIQUE
    161                               |couleur_rubrique
    162                               |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    163                               |sinon{"EFEFEF"}
    164                             )];
    165           [background-image:url('(#LOGO_RUBRIQUE_SURVOL
    166                                     |sinon{#LOGO_SITE_SPIP_SURVOL}
    167                                     |image_reduire{1900,0}
    168                                     |image_sepia{ [(#ID_RUBRIQUE
    169                                                       |couleur_rubrique
    170                                                       |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
    171                                                       |sinon{"EFEFEF"}
    172                                                   )] }
    173                                     |image_gamma{-100}
    174                                     |extraire_attribut{src}
    175                                 )');]
    176 
    177         }
    178       </BOUCLE_rubrique_bs_header>
    179 
    180     [(#REM) Pages mots ]
    181     <BOUCLE_mot_bs_header(MOTS){id_mot}>
    182       .bs-header.mot#ID_MOT {
    183         [background-image:url('(#LOGO_MOT
    184                                   |sinon{ #LOGO_SITE_SPIP_SURVOL }
    185                                   |image_reduire{1900,0}
    186                                   |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
    187                                   |image_gamma{-100}
    188                                   |extraire_attribut{src}
    189                               )')!important;]
    190       }
    191     </BOUCLE_mot_bs_header>
    192 
    193   .bs-header h1 {
    194     color: #fff;
    195   }
    196   .bs-header p {
    197     font-weight: 300;
    198     line-height: 1.5;
    199   }
    200   .bs-header .container {
    201     position: relative;
    202   }
    203 
    204   @media (min-width: 768px) {
    205     .bs-header {
    206       font-size: 21px;
    207       text-align: left;
    208     }
    209     .bs-header h1 {
    210       font-size: 60px;
    211       line-height: 1;
    212     }
    213   }
    214 
    215   @media (min-width: 992px) {
    216     .bs-header h1,
    217     .bs-header p {
    218       [(#REM) margin-right: 380px;]
    219     }
    220   }
     175</BOUCLE_mot_bs_header>
    221176
    222177
    223 [(#REM) Footer ]
    224178
    225   .bs-footer {
    226     background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"}|couleur_foncer|couleur_foncer)];
    227     color: #FFFFFF;
    228   }
    229 
Note: See TracChangeset for help on using the changeset viewer.