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

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

ajustement css sur barrenav

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
80.navbar-brand {padding:10px 15px;}
81
82  .remonter { position:fixed; bottom:0.85em; right:0.85em;}
83  [.breadcrumb {
84    background-color: #(#ID_RUBRIQUE
85      |couleur_rubrique
86      |sinon{ [(#ID_RUBRIQUE|couleur_site|couleur_eclaircir|couleur_eclaircir)] }
87      |couleur_eclaircir
88      |couleur_eclaircir
89    );
90  }]
91
92[(#REM) STRUCTURE ]
93[(#REM)
94        Wrapper pour le contenu de la page, permettant de fixer le footer en bas de l'écran
95        Commenter pour "libérer" le footer
96]
97#wrap {
98  min-height: 100%;
99  height: auto;
100  [(#REM) Negative indent footer by its height ]
101  margin: 0 auto -60px;
102  [(#REM)  bottom by footer height ]
103  padding: 0 0 60px;
104}
105
106[(#REM) Header des pages ]
107
108  .bs-header {
109    color: #cdbfe3;
110    background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"})];
111    padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
112    font-size: 16px;
113    text-align: center;
114    text-shadow: 0 1px 0 rgba(0,0,0,.15);
115    background-position:50% 50%;
116    background-attachment:fixed;
117    background-repeat:no-repeat;
118    [background-image:url('(#LOGO_SITE_SPIP_SURVOL
119                              |image_reduire{1900,0}
120                              |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
121                              |image_gamma{-100}
122                              |extraire_attribut{src}
123                            )');]
124  }
125
126      [(#REM) Pages articles ]
127      <BOUCLE_article_bs_header(ARTICLES){id_article = #ENV{id_article}}>
128        .page_article .bs-header {
129          background-color: [#(#ID_RUBRIQUE
130                              |couleur_rubrique
131                              |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
132                              |sinon{"EFEFEF"}
133                            )];
134          [background-image:url('(#LOGO_ARTICLE_SURVOL
135                                    |sinon{#LOGO_RUBRIQUE_SURVOL}
136                                    |sinon{#LOGO_SITE_SPIP_SURVOL}
137                                    |image_reduire{1900,0}
138                                    |image_sepia{ [(#ID_RUBRIQUE
139                                                      |couleur_rubrique
140                                                      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
141                                                      |sinon{"EFEFEF"}
142                                                  )] }
143                                    |image_gamma{-100}
144                                    |extraire_attribut{src}
145                                )')!important;]
146
147        }
148      </BOUCLE_article_bs_header>
149
150      [(#REM) Pages rubriques ]
151      <BOUCLE_rubrique_bs_header(RUBRIQUES){id_rubrique = #ENV{id_rubrique}}>
152        .page_rubrique .bs-header {
153          background-color: [#(#ID_RUBRIQUE
154                              |couleur_rubrique
155                              |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
156                              |sinon{"EFEFEF"}
157                            )];
158          [background-image:url('(#LOGO_RUBRIQUE_SURVOL
159                                    |sinon{#LOGO_SITE_SPIP_SURVOL}
160                                    |image_reduire{1900,0}
161                                    |image_sepia{ [(#ID_RUBRIQUE
162                                                      |couleur_rubrique
163                                                      |sinon{ [(#ID_RUBRIQUE|couleur_site)] }
164                                                      |sinon{"EFEFEF"}
165                                                  )] }
166                                    |image_gamma{-100}
167                                    |extraire_attribut{src}
168                                )');]
169
170        }
171      </BOUCLE_rubrique_bs_header>
172
173    [(#REM) Pages mots ]
174    <BOUCLE_mot_bs_header(MOTS){id_mot=#ENV{id_mot}}>
175      .bs-header {
176        [background-image:url('(#LOGO_MOT
177                                  |sinon{ #LOGO_SITE_SPIP_SURVOL }
178                                  |image_reduire{1900,0}
179                                  |image_sepia{ [(#ID_RUBRIQUE|couleur_site|sinon{"EFEFEF"})] }
180                                  |image_gamma{-100}
181                                  |extraire_attribut{src}
182                              )')!important;]
183      }
184    </BOUCLE_mot_bs_header>
185
186  .bs-header h1 {
187    color: #fff;
188  }
189  .bs-header p {
190    font-weight: 300;
191    line-height: 1.5;
192  }
193  .bs-header .container {
194    position: relative;
195  }
196
197  @media (min-width: 768px) {
198    .bs-header {
199      font-size: 21px;
200      text-align: left;
201    }
202    .bs-header h1 {
203      font-size: 60px;
204      line-height: 1;
205    }
206  }
207
208  @media (min-width: 992px) {
209    .bs-header h1,
210    .bs-header p {
211      [(#REM) margin-right: 380px;]
212    }
213  }
214
215
216[(#REM) Footer ]
217
218  .bs-footer {
219    background-color: [#(#ID_RUBRIQUE{0}|couleur_site|sinon{"EFEFEF"}|couleur_foncer|couleur_foncer)];
220    color: #FFFFFF;
221  }
222
223  .bs-footer a { color: #FFFFFF!important; text-decoration:underline; }
224  .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.