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

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

ameliorations + corrections des appels CDN : https (sinon reponse 403) et upgrade vers BS 3.3.1

File size: 7.4 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_reduire{1900,0}
116                              |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
117                              |image_gamma{-100}
118                              |extraire_attribut{src}
119                            )');]
120  }
121
122      [(#REM) Pages articles ]
123      <BOUCLE_article_bs_header(ARTICLES){id_article = #ENV{id_article}}>
124        .page_article .bs-header {
125          background-color: [#(#ID_RUBRIQUE
126                              |couleur_rubrique
127                              |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
128                              |sinon{"EFEFEF"}
129                            )];
130          [background-image:url('(#LOGO_ARTICLE_SURVOL
131                                    |sinon{#LOGO_RUBRIQUE_SURVOL}
132                                    |sinon{#LOGO_SITE_SPIP_SURVOL}
133                                    |image_reduire{1900,0}
134                                    |image_sepia{ [(#ID_RUBRIQUE
135                                                      |couleur_rubrique
136                                                      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
137                                                      |sinon{"EFEFEF"}
138                                                  )] }
139                                    |image_gamma{-100}
140                                    |extraire_attribut{src}
141                                )')!important;]
142
143        }
144      </BOUCLE_article_bs_header>
145
146      [(#REM) Pages rubriques ]
147      <BOUCLE_rubrique_bs_header(RUBRIQUES){id_rubrique = #ENV{id_rubrique}}>
148        .page_rubrique .bs-header {
149          background-color: [#(#ID_RUBRIQUE
150                              |couleur_rubrique
151                              |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
152                              |sinon{"EFEFEF"}
153                            )];
154          [background-image:url('(#LOGO_RUBRIQUE_SURVOL
155                                    |sinon{#LOGO_SITE_SPIP_SURVOL}
156                                    |image_reduire{1900,0}
157                                    |image_sepia{ [(#ID_RUBRIQUE
158                                                      |couleur_rubrique
159                                                      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
160                                                      |sinon{"EFEFEF"}
161                                                  )] }
162                                    |image_gamma{-100}
163                                    |extraire_attribut{src}
164                                )');]
165
166        }
167      </BOUCLE_rubrique_bs_header>
168
169    [(#REM) Pages mots ]
170    <BOUCLE_mot_bs_header(MOTS){id_mot=#ENV{id_mot}}>
171      .bs-header {
172        [background-image:url('(#LOGO_MOT
173                                  |sinon{ #LOGO_SITE_SPIP_SURVOL }
174                                  |image_reduire{1900,0}
175                                  |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
176                                  |image_gamma{-100}
177                                  |extraire_attribut{src}
178                              )')!important;]
179      }
180    </BOUCLE_mot_bs_header>
181
182  .bs-header h1 {
183    color: #fff;
184  }
185  .bs-header p {
186    font-weight: 300;
187    line-height: 1.5;
188  }
189  .bs-header .container {
190    position: relative;
191  }
192
193  @media (min-width: 768px) {
194    .bs-header {
195      font-size: 21px;
196      text-align: left;
197    }
198    .bs-header h1 {
199      font-size: 60px;
200      line-height: 1;
201    }
202  }
203
204  @media (min-width: 992px) {
205    .bs-header h1,
206    .bs-header p {
207      [(#REM) margin-right: 380px;]
208    }
209  }
210
211
212[(#REM) Footer ]
213
214  .bs-footer {
215    background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"}|couleur_foncer|couleur_foncer)];
216    color: #FFFFFF;
217  }
218
219  .bs-footer a { color: #FFFFFF!important; text-decoration:underline; }
220  .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.