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

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

bricoles, paginations et mises en formes

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