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

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

intégration des breadcrumb 'à la SPIPr' + refonte CSS autour de la génération des couleurs + multiples débuguages

File size: 5.4 KB
Line 
1#CACHE{0} [(#REM) dev => 0 ; prod => 3600*24*30 ]
2#HTTP_HEADER{Content-Type: text/css; charset=#CHARSET}
3
4[(#REM) Couleur principale & nuances
5- utilise le plugin couleur_rubrique d'ARNO*
6- sinon utilise la variable 'couleur_primary' suivante
7]<BOUCLE_couleur_r(RUBRIQUES){tout}>
8  [(#SET{[couleur_r(#ID_RUBRIQUE)],[(#ID_RUBRIQUE|couleur_rubrique)] })]
9</BOUCLE_couleur_r>
10<BOUCLE_couleur_a(ARTICLES){tout}>
11  [(#SET{[couleur_a(#ID_ARTICLE)],[(#ID_RUBRIQUE|couleur_rubrique)] })]
12</BOUCLE_couleur_a>
13[(#SET{couleur_primary,337AB7})]
14[(#SET{couleur,[(#GET{couleur_a#ID_ARTICLE}|sinon{[(#GET{couleur_r#ID_RUBRIQUE})]}|sinon{[(#ID_RUBRIQUE|couleur_site)]}|sinon{[(#GET{couleur_primary})]})] })]
15[(#SET{couleur_eclaircir_2,[(#GET{couleur}|couleur_eclaircir|couleur_eclaircir)]})]
16[(#SET{couleur_eclaircir_1,[(#GET{couleur}|couleur_eclaircir)]})]
17[(#SET{couleur_foncer_1,[(#GET{couleur}|couleur_foncer)]})]
18[(#SET{couleur_foncer_2,[(#GET{couleur}|couleur_foncer|couleur_foncer)]})]
19[(#SET{couleur_inverser,[(#GET{couleur}|couleur_inverser)]})]
20
21[(#REM) Liens ]
22a:link, a:visited, a:active, a:hover, a:focus, button, .btn, button:hover, .btn:hover {
23  -webkit-transition: All .6s ease-in;
24  moz-transition: All .6s ease-in;
25  o-transition: All .6s ease-in;
26  transition: All .6s ease-in;
27}
28a, a:active, a:visited { color: [#(#GET{couleur_foncer_1})]; }
29a:focus, a:hover, a:active { color: [#(#GET{couleur})]; }
30/*a.btn, a.fa { text-decoration:none!important; }*/
31.btn-primary {
32  background-color: [#(#GET{couleur})];
33  background-image: -webkit-gradient(linear,left 0,left 100%,from([#(#GET{couleur})]),to([#(#GET{couleur_foncer_1})]));
34  background-image: -webkit-linear-gradient(top,[#(#GET{couleur})] 0,[#(#GET{couleur_foncer_1})] 100%);
35  background-image: -moz-linear-gradient(top,[#(#GET{couleur})] 0,[#(#GET{couleur_foncer_1})] 100%);
36  background-image: linear-gradient(to bottom,[#(#GET{couleur})] 0,[#(#GET{couleur_foncer_1})] 100%);
37  background-repeat: repeat-x;
38  border-color: [#(#GET{couleur_foncer_2})];
39  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff[#(#GET{couleur})]',endColorstr='#ff[#(#GET{couleur_foncer_1})]',GradientType=0);
40  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
41}
42.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
43  border-color: [#(#GET{couleur_foncer_2})]!important;
44  background-color: [#(#GET{couleur_foncer_1})]!important;
45  background-position: 0 -15px!important;
46}
47
48[(#REM) btn sociaux aux couleurs officielles
49        à adapter (color ou background-color)
50        selon icons utilisés (socicon-*, fa-* ou fa-*-square)
51]
52        [(#REM) les + utilisés]
53        a.btn-social {color:#FFFFFF!important;}
54        .btn-fb {background-color:#47639E;}
55        .btn-tw {background-color:#55ACEE;}
56        .btn-li {background-color:#0077B5;}
57        .btn-gp {background-color:#DD4B39;}
58        .btn-yt {background-color:#e02a20;}
59        .btn-ig {background-color:#000000;}
60
61        [(#REM) services streaming]
62        .btn-bcp {background-color:#619aa9;}
63        .btn-scd {background-color:#fe3801;}
64        .btn-dzr {background-color:#32323d;}
65        .btn-spy {background-color:#7bb342;}
66        .btn-itu {background-color:#ff5e51;}
67
68p { margin:1em 0; }
69
70.pull-left {margin-right:1em;}
71.pull-right {margin-left:1em;}
72
73.navbar-brand {padding:10px 15px;}
74
75.top { position:fixed; bottom:1em; right:1em;}
76
77
78.bs-content, .bs-extra {padding:20px 0;}
79.bs-header {padding:80px 0;}
80.bs-footer {padding:40px 0;}
81
82.breadcrumb, .well, .jumbotron {background-color: [#(#GET{couleur_eclaircir_1})];}
83.bs-header .jumbotron {background-color:[#(#GET{couleur_foncer_2})];}
84
85.bs-header {
86  color:#FFFFFF;
87  background-color: [#(#GET{couleur})];   
88  [background-position:50% 50%;
89  background-size:cover;
90  background-attachment:fixed;
91  background-repeat:no-repeat;
92  background-image:url('(#LOGO_SITE_SPIP_SURVOL
93                            |image_reduire{1900,0}
94                            |image_gamma{-50}
95                            |extraire_attribut{src}
96                          )');]
97}
98.bs-extra { background-color: #EFEFEF; }
99.bs-extra#extra2 { background-color: [#(#GET{couleur_eclaircir_2})]; }
100.bs-footer { background-color: [#(#GET{couleur_foncer_2})]; color: #FFFFFF; }
101
102<BOUCLE_article_bs_header(ARTICLES){tout}>
103  .bs-header.article#ID_ARTICLE {
104
105    background-color: [#(#GET{couleur})];
106    [background-image:url('(#LOGO_ARTICLE_SURVOL
107                              |sinon{#LOGO_RUBRIQUE_SURVOL}
108                              |sinon{#LOGO_SITE_SPIP_SURVOL}
109                              |image_reduire{1900,0}
110                              |image_gamma{-50}
111                              |extraire_attribut{src}
112                          )');]
113  }
114</BOUCLE_article_bs_header>
115
116
117<BOUCLE_rubrique_bs_header(RUBRIQUES){tout}>
118  .bs-header.rubrique#ID_RUBRIQUE {
119
120    background-color: [#(#GET{couleur})];
121    [background-image:url('(#LOGO_RUBRIQUE_SURVOL
122                              |sinon{#LOGO_SITE_SPIP_SURVOL}
123                              |image_reduire{1900,0}
124                              |image_gamma{-50}
125                              |extraire_attribut{src}
126                          )');]
127
128  }
129</BOUCLE_rubrique_bs_header>
130
131<BOUCLE_mot_bs_header(MOTS){tout}>
132  .bs-header.mot#ID_MOT {
133    [background-image:url('(#LOGO_MOT_SURVOL
134                              |sinon{ #LOGO_SITE_SPIP_SURVOL }
135                              |image_reduire{1900,0}
136                              |image_gamma{-50}
137                              |extraire_attribut{src}
138                          )');]
139  }
140</BOUCLE_mot_bs_header>
141
142
143
Note: See TracBrowser for help on using the repository browser.