source: spip-zone/_squelettes_/zktx-kore/trunk/css/zktx.css.html @ 85652

Last change on this file since 85652 was 85652, checked in by l.oiseau2nuit@…, 5 years ago

integration BS3

File size: 6.0 KB
Line 
1#CACHE{0}
2[(#REM)
3  état = dev => CACHE{0}
4  état = prod => CACHE{3600*24*30}
5]
6#HTTP_HEADER{Content-Type: text/css;}
7
8[(#REM) Feuille de style Zktx
9        * surcharge des styles boostrap
10        * dynamique (d'où l'extension .css.html)
11]
12
13body {  padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
14
15[(#REM) Liens hypertextes ]
16  a:link, a:visited
17  nutzme{ [color: #(#ID_RUBRIQUE
18      |couleur_rubrique
19      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
20      |couleur_inverser
21      |couleur_foncer
22    );]
23    [(#REM) text-decoration:underline; ]
24  }
25
26  a:active, a:hover, a:focus {
27    [color: #(#ID_RUBRIQUE
28      |couleur_rubrique
29      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
30      |couleur_inverser
31    );]
32    text-decoration:none;
33    [(#REM) text-shadow: 0px 0px 2px #111;]
34  }
35
36[(#REM) Niveaux de titres ]
37  [h2, .h2 {
38        color: #(#ID_RUBRIQUE
39                |couleur_rubrique
40                |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
41                |sinon{"111111"}
42        );
43  }]
44
45  h3, .h3 {font-weight:normal; margin-bottom:0.75em;}
46
47[(#REM) balises ]
48  p { margin:0 0 1em 0; }
49
50[(#REM) Helper class ]
51  [(#REM) .pull-left, .pull-right {margin-bottom:0.75em;} ]
52  .pull-left {margin-right:1em;}
53  .pull-right {margin-left:1em;}
54
55[(#REM) Boutons]
56  a.btn { text-decoration:none!important; }
57  [(#SET{grad, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]})] })]
58  [(#SET{grad_foncer, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]}|couleur_foncer)] })]
59  [(#SET{grad_bordure, [#(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_RUBRIQUE|couleur_site)]}|couleur_foncer|couleur_foncer)] })]
60
61  .btn-primary {
62    background-image: -webkit-gradient(linear,left 0,left 100%,from(#GET{grad}),to(#GET{grad_foncer}));
63    background-image: -webkit-linear-gradient(top,#GET{grad} 0,#GET{grad_foncer} 100%);
64    background-image: -moz-linear-gradient(top,#GET{grad} 0,#GET{grad_foncer} 100%);
65    background-image: linear-gradient(to bottom,#GET{grad} 0,#GET{grad_foncer} 100%);
66    background-repeat: repeat-x;
67    border-color: #GET{grad_bordure};
68    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#GET{grad}',endColorstr='#ff#GET{grad_foncer}',GradientType=0);
69    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
70  }
71  .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
72    color: #fff;
73    border-color: #GET{grad_bordure};
74    background-color: #GET{grad_foncer};
75    background-position: 0 -15px;
76  }
77
78[(#REM) Navigations et ergonomie ]
79  .remonter { position:fixed; bottom:0.85em; right:0.85em;}
80  [.breadcrumb {
81    background-color: #(#ID_RUBRIQUE
82      |couleur_rubrique
83      |sinon{ [(#ID_RUBRIQUE|couleur_site|couleur_eclaircir|couleur_eclaircir)] }
84      |couleur_eclaircir
85      |couleur_eclaircir
86    );
87  }]
88
89[(#REM) STRUCTURE ]
90[(#REM)
91        Wrapper pour le contenu de la page, permettant de fixer le footer en bas de l'écran
92        Commenter pour "libérer" le footer
93]
94#wrap {
95  min-height: 100%;
96  height: auto;
97  [(#REM) Negative indent footer by its height ]
98  margin: 0 auto -60px;
99  [(#REM)  bottom by footer height ]
100  padding: 0 0 60px;
101}
102
103[(#REM) Header des pages ]
104
105  .bs-header {
106    color: #cdbfe3;
107    background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"})];
108    padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
109    font-size: 16px;
110    text-align: center;
111    text-shadow: 0 1px 0 rgba(0,0,0,.15);
112    background-position:50% 50%;
113    background-repeat:no-repeat;
114    [background-image:url('(#LOGO_SITE_SPIP_SURVOL
115                              |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
116                              |image_gamma{-100}
117                              |extraire_attribut{src}
118                            )');]
119  }
120
121      [(#REM) Pages rubriques ]
122      <BOUCLE_rubrique_bs_header(RUBRIQUES){id_rubrique = #ENV{id_rubrique}}>
123        .bs-header {
124          background-color: [#(#ID_RUBRIQUE
125                              |couleur_rubrique
126                              |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
127                              |sinon{"EFEFEF"}
128                            )];
129          [background-image:url('(#LOGO_RUBRIQUE_SURVOL
130                                    |sinon{#LOGO_SITE_SPIP_SURVOL}
131                                    |image_sepia{ [(#ID_RUBRIQUE
132                                                      |couleur_rubrique
133                                                      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
134                                                      |sinon{"EFEFEF"}
135                                                  )] }
136                                    |image_gamma{-100}
137                                    |extraire_attribut{src}
138                                )');]
139
140        }
141      </BOUCLE_rubrique_bs_header>
142
143    [(#REM) Pages mots ]
144    <BOUCLE_mot_bs_header(MOTS){id_mot=#ENV{id_mot}}>
145      .bs-header {
146        [background-image:url('(#LOGO_MOT
147                                  |sinon{ #LOGO_SITE_SPIP_SURVOL }
148                                  |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
149                                  |image_gamma{-100}
150                                  |extraire_attribut{src}
151                              )')!important;]
152      }
153    </BOUCLE_mot_bs_header>
154
155  .bs-header h1 {
156    color: #fff;
157  }
158  .bs-header p {
159    font-weight: 300;
160    line-height: 1.5;
161  }
162  .bs-header .container {
163    position: relative;
164  }
165
166  @media (min-width: 768px) {
167    .bs-header {
168      font-size: 21px;
169      text-align: left;
170    }
171    .bs-header h1 {
172      font-size: 60px;
173      line-height: 1;
174    }
175  }
176
177  @media (min-width: 992px) {
178    .bs-header h1,
179    .bs-header p {
180      margin-right: 380px;
181    }
182  }
183
184
185[(#REM) Footer ]
186
187  .bs-footer {
188    background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"}|couleur_foncer|couleur_foncer)];
189    color: #FFFFFF;
190  }
191
192  .bs-footer a { color: #FFFFFF!important; text-decoration:underline; }
193  .bs-footer a:hover, .bs-footer a:active, .bs-footer a:focus {text-shadow:1px 1px 8px #EFEFEF;}
Note: See TracBrowser for help on using the repository browser.