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

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

fixes sur css et debug pagination

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