source: spip-zone/_squelettes_/escal/branche_V3/config.css.html @ 87628

Last change on this file since 87628 was 87628, checked in by jcvilleneuve@…, 5 years ago

EscalV3 : nouvelle option : on peut fixer le menu horizontal lors du scroll vers le bas + nbre de pixels maxi lors de l'import des images pour ne pas bloquer GD2

File size: 17.0 KB
Line 
1#CACHE{0}
2#HTTP_HEADER{Content-Type: text/css;}
3
4/* ======================================================================
5                          LES ELEMENTS
6   ======================================================================*/
7[(#CONFIG{escal/config/pointeurbody}|oui)
8body {
9cursor: [url((#CHEMIN{#CONFIG{escal/config/pointeurbody}}))], auto;
10}]
11[(#CONFIG{escal/config/pointeura}|oui)
12a {
13cursor: [url((#CHEMIN{#CONFIG{escal/config/pointeura}}))], auto;
14}]
15
16[(#CONFIG{escal/config/ombres}|non)
17#ombre-droite {
18        background: [url((#CHEMIN{images/ombre-droitegris.png}))] repeat-y scroll right center;
19        width: [(#CONFIG{escal/config/largeurlayoutbase,950}|plus{34})]px;
20}
21#ombre-gauche {
22        background: [url((#CHEMIN{images/ombre-gauchegris.png}))] repeat-y scroll left center;
23        margin: 0 auto;
24        width: [(#CONFIG{escal/config/largeurlayoutbase,950}|plus{34})]px;
25}]
26
27[(#CONFIG{escal/config/ombres}|=={gris}|oui)
28#ombre-droite {
29        background: [url((#CHEMIN{images/ombre-droitegris.png}))] repeat-y scroll right center;
30  width: [(#CONFIG{escal/config/largeurlayoutbase,950}|plus{34})]px; 
31}
32#ombre-gauche {
33        background: [url((#CHEMIN{images/ombre-gauchegris.png}))] repeat-y scroll left center;
34        margin: 0 auto;
35        width: [(#CONFIG{escal/config/largeurlayoutbase,950}|plus{34})]px;
36}]
37
38[(#CONFIG{escal/config/ombres}|=={blanc}|oui)
39#ombre-droite {
40        background: [url((#CHEMIN{images/ombre-droiteblanc.png}))] repeat-y scroll right center;
41        width: [(#CONFIG{escal/config/largeurlayoutbase,950}|plus{34})]px;
42}
43#ombre-gauche {
44        background: [url((#CHEMIN{images/ombre-gaucheblanc.png}))] repeat-y scroll left center;
45        margin: 0 auto;
46        width: [(#CONFIG{escal/config/largeurlayoutbase,950}|plus{34})]px;
47}]
48
49[(#CONFIG{escal/config/ombres}|=={non}|oui)
50#ombre-droite {
51        background: none;
52}
53#ombre-gauche {
54        background: none;
55}]
56
57
58
59div#bandeau {
60        text-align: [(#CONFIG{escal/config/alignbandeau, left})];
61}
62
63[(#CONFIG{escal/config/nomsite}|=={non}|oui)
64#nom-site-spip {
65  display:  none;
66}]
67
68#nom-site-spip {
69  font-size: [(#CONFIG{escal/config/nomsitetaille,50})]px;
70}
71[(#CONFIG{escal/config/slogansite}|=={non}|oui)
72#slogan-site-spip {
73  display:  none;
74}]
75#slogan-site-spip {
76  font-size: [(#CONFIG{escal/config/slogansitetaille,25})]px;
77}
78[(#CONFIG{escal/config/descriptifsite}|=={non}|oui)
79#descriptif-site-spip {
80  display:  none;
81}]
82#descriptif-site-spip {
83  font-size: [(#CONFIG{escal/config/descriptifsitetaille,12})]px;
84}
85[(#CONFIG{escal/config/nomsite}|=={non}|oui)
86  [(#CONFIG{escal/config/slogansite}|=={non}|oui)
87    [(#CONFIG{escal/config/descriptifsite}|=={non}|oui)
88#titrepage{
89  display:  none;
90  }]]]
91#entete .menu.floatable {
92    width: #CONFIG{escal/config/largeurlayoutbase,950}px;
93}
94.laune ul.anchors li a {
95        height: [(#CONFIG{escal/config/hauteurblocsune,85})]px;
96}
97[(#CONFIG{escal/config/nbrecol}|non)
98.laune ul.anchors li {
99        width: 50%;
100}
101]
102[(#CONFIG{escal/config/nbrecol}|=={1}|oui)
103.laune ul.anchors li {
104        width: 100%;
105}
106]
107[(#CONFIG{escal/config/nbrecol}|=={2}|oui)
108.laune ul.anchors li {
109        width: 50%;
110}
111]
112[(#CONFIG{escal/config/nbrecol}|=={3}|oui)
113.laune ul.anchors li {
114        width: 33%;
115}
116]
117
118#scrollup3 {
119        height: [(#CONFIG{escal/config/hauteurannoncedefil,210})]px;
120}
121
122.annoncedefil {
123 height: [(#CONFIG{escal/config/hauteurannoncedefil,210}|moins{35})]px;
124}
125/* noisette inc-photos */
126/***********************/
127
128#scrollup2 {
129        height: [(#CONFIG{escal/config/largeurimagenoisettes,170})]px;
130  width: #CONFIG{escal/config/largeurimagenoisettes,170}px;
131  margin: auto;
132}
133.headline2 {
134        top: [(#CONFIG{escal/config/largeurimagenoisettes,170})]px;
135  height: [(#CONFIG{escal/config/largeurimagenoisettes,170})]px;
136}
137
138/* ======================================================================
139                          LES ICONES
140   ======================================================================*/
141
142/* articles du menu horizontal */
143#menu ul li.article {
144        background: url(#CHEMIN{images/artmenu.png}) no-repeat top left;
145}
146
147/* menu vertical */
148#menuV ul#accueilmenu li {
149  background: url(#CHEMIN{images/accueil.png}) no-repeat top left;
150}
151#menuV ul.rubriques li {
152        background: url(#CHEMIN{images/rubnormal.png}) no-repeat top left;
153}
154#menuV ul.rubriques li.on {
155        background: url(#CHEMIN{images/rubexpose.png}) no-repeat top left;
156}
157#menuV ul.articles li {
158        background: url(#CHEMIN{images/artnormal.png}) no-repeat top left;
159}
160#menuV ul.articles li.on {
161        background: url(#CHEMIN{/images/artexpose.png}) no-repeat top left;
162}
163
164/* liens */
165a.spip_out {
166        background: transparent url(#CHEMIN{images/spip_out.gif}) no-repeat scroll right center;
167}
168a.spip_mail{
169        background: transparent url(#CHEMIN{images/mail.gif}) no-repeat scroll right center;
170}
171
172/* noisettes dépliables/repliables */
173.toggleimage1 {;
174        background: transparent url(#CHEMIN{images/loupeplus.png}) no-repeat scroll right center;
175}
176.toggleimage2 {
177        background: transparent url(#CHEMIN{images/loupemoins.png}) no-repeat scroll right center;
178}
179
180/* formulaire de recherche */
181.formulaire_recherche input.text {
182        background: url(#CHEMIN{images/loupe.gif}) no-repeat;
183}
184
185/* ombre trombinoscope */
186        background: url(#CHEMIN{images/ombre.gif}) no-repeat bottom right;
187}
188
189/* noisette rainette */
190li.meteo {
191        list-style-image: url(#CHEMIN{images/fleche_droite.png})
192}
193/* ======================================================================
194                          LES COULEURS   (pour tout le site)
195   ======================================================================*/
196
197/* les fonds */
198/*************/
199body {
200  background-color: [ (#CONFIG{escal/config/couleurfond,#DFDFDF})];
201  [(#CONFIG{escal/config/imagefond}|?{
202    background-image: url([(#CHEMIN{#CONFIG{escal/config/imagefond}})]);
203    ,
204    [(#CONFIG{escal/config/imagefond2}|?{
205      background-image: url([(#CHEMIN{#CONFIG{escal/config/imagefond2}})]);
206      ,
207      background-image: none;
208      })]
209  })]
210  [(#CONFIG{escal/config/imagefondunique}|=={oui})
211  background-repeat:no-repeat;
212  background-attachment:fixed;
213  background-position: top center;
214  -webkit-background-size: cover; /* pour Chrome et Safari */
215  -moz-background-size: cover; /* pour Firefox */
216  -o-background-size: cover; /* pour Opera */
217  background-size: cover; /* version standardisée */
218  ]
219}
220/* fond des pages */
221div#conteneur{
222 background-color: [(#CONFIG{escal/config/couleurpage,#FFFFFF})];
223 color:  [(#CONFIG{escal/config/couleurpage}|?{#[(#CONFIG{escal/config/couleur2}|couleur_extreme|couleur_inverser)],#000000})];
224
225}
226/* bloc a la une */
227ul.onglets li a.active, ul.onglets li a.active:hover, .laune, .laune .fragment a,
228.contenu_1, .contenu_2, .contenu_3, .contenu_4, .contenu_5, .contenu_6, .contenu_7, .contenu_8, .contenu_9, .contenu_10,
229#cadre-plan, #cadre-plan a, .texte#accueil{
230        background-color: [(#CONFIG{escal/config/couleurune,#336699})];
231        color:  [(#CONFIG{escal/config/couleurune}|?{#[(#CONFIG{escal/config/couleurune}|couleur_extreme|couleur_inverser)],#FFFFFF})];
232}
233/* onglets inactifs */
234ul.onglets li a{
235  background-color: [(#CONFIG{escal/config/couleuruneinact,#82ADE2})];
236  color:  [(#CONFIG{escal/config/couleuruneinact}|?{#[(#CONFIG{escal/config/couleuruneinact}|couleur_extreme|couleur_inverser)],#000000})];
237}
238/* articles en une */
239.laune ul.anchors li a {
240        background-color: [(#CONFIG{escal/config/couleuruneart,#DAE6F6})];
241        color:  [(#CONFIG{escal/config/couleuruneart}|?{#[(#CONFIG{escal/config/couleuruneart}|couleur_extreme|couleur_inverser)],#000000})];
242}
243
244/* gris */
245.calendar_not_this_month,
246#ariane-forum, table.forum tr.rub-forum,
247#forum-site .descriptif, #forum-site .texte {
248  background-color: [(#CONFIG{escal/config/couleur1,#DFDFDF})];
249  color:  [(#CONFIG{escal/config/couleur1}|?{#[(#CONFIG{escal/config/couleur1}|couleur_extreme|couleur_inverser)],#000000})];
250}
251
252/* blanc */
253#cadre-article, .cadre-sous-rubrique, .cadre-articles-rubrique, .texte-insert,
254table #nav-agenda, .fc-content,
255.valeur2, .valeur3,
256table.forum, .forum-thread, .forum_reponse,
257.trombino, .entry-content, #mentions {
258 background-color: [(#CONFIG{escal/config/couleur2,#FFFFFF})];
259 color:  [(#CONFIG{escal/config/couleur2}|?{#[(#CONFIG{escal/config/couleur2}|couleur_extreme|couleur_inverser)],#000000})];
260
261}
262
263/* bleu fonce de base */
264#cadre-rubrique, #cadre-titre-article, #cadre-titre-article a, .accueil .cadre-chemin, .accueil .cadre-chemin a,
265table.forum th,
266#menu, ul#menu ul, ul#menu li a,
267#menuV2 ul.menulist a:hover, #menuV2 ul.menulist li.smenu:hover,
268#menuV2 ul.menulist li.smenu>a:hover{
269        background-color: [(#CONFIG{escal/config/couleur3,#336699})];
270        color:  [(#CONFIG{escal/config/couleur3}|?{#[(#CONFIG{escal/config/couleur3}|couleur_extreme|couleur_inverser)],#FFFFFF})];
271}
272 .cadre-chemin a
273 {
274        background-color: [(#CONFIG{escal/config/couleur3,#336699})];
275        color:  [(#CONFIG{escal/config/couleur3}|?{#[(#CONFIG{escal/config/couleur3}|couleur_extreme|couleur_inverser)],#FFFFFF})] !important;
276}
277/* bleu tres fonce */
278.laune ul.anchors li a:hover, #menu li:hover > a, ul#menu ul li:hover, .cadre-chemin a:hover {
279        background-color: [(#CONFIG{escal/config/couleur4,#224466})];
280        color:  [(#CONFIG{escal/config/couleur4}|?{#[(#CONFIG{escal/config/couleur4}|couleur_extreme|couleur_inverser)],#FFFFFF})];
281}
282/* bleu clair */
283.identification-light:hover, .formulaire_recherche input.text:hover,
284table.spip tr.row_first,
285#menuV2 ul.menulist, #menuV2 ul.menulist ul, #menuV2 ul.menulist a,
286.titre-message,
287#formulaire_forum div, .formulaire_spip.formulaire_forum, .small_mini,
288.calendar_head_mini, #entete-evenement, #nouvel-evenement{
289  background-color: [(#CONFIG{escal/config/couleur5,#82ADE2})];
290  color:  [(#CONFIG{escal/config/couleur5}|?{#[(#CONFIG{escal/config/couleur5}|couleur_extreme|couleur_inverser)],#000000})];
291}
292
293/* gris-bleu tres clair */
294.identification-light, .formulaire_recherche input.text,
295table.spip tr.row_even, table.forum tr.art-forum,
296#formulaire-contact,
297.calendar_this_month,
298#documents_portfolio, #ps,
299.forum_reponse .titre-message, #formulaire_forum input.barre,
300#signatures li {
301        background-color: [(#CONFIG{escal/config/couleur6,#EFEFEF})];
302        color:  [(#CONFIG{escal/config/couleur6}|?{#[(#CONFIG{escal/config/couleur6}|couleur_extreme|couleur_inverser)],#000000})];
303}
304
305/* un autre bleu */
306ul#menu li .on, ul#menu li .on > a, #menu li:hover > a.on,  ul#menu ul li.on:hover,
307#formulaire_forum div#previsu, #formulaire_forum div#previsu .forum-message, #formulaire_forum div#previsu .forum-chapo,
308.calendar_this_day,
309table.spip tr.row_odd  {
310        background-color: [(#CONFIG{escal/config/couleur7,#BBCCDD})];
311        color:  [(#CONFIG{escal/config/couleur7}|?{#[(#CONFIG{escal/config/couleur7}|couleur_extreme|couleur_inverser)],#000000})];
312}
313
314/* couleur 8 réservée pour les cadres latéraux - voir plus bas  */
315
316/* bandeau */
317div#entete {
318        background-color: [(#CONFIG{escal/config/couleur9,#336699})];
319        color:  [(#CONFIG{escal/config/couleur9}|?{#[(#CONFIG{escal/config/couleur9}|couleur_extreme|couleur_inverser)],#FFFFFF})];
320}
321
322/* orange */
323.annonce,.annoncedefil, .headline3, .calendar_mini_event, .spip_surligne {
324        background-color: [(#CONFIG{escal/config/couleur10,#EC7942})];
325  color:  [(#CONFIG{escal/config/couleur10}|?{#[(#CONFIG{escal/config/couleur10}|couleur_extreme|couleur_inverser)],#FFFFFF})];
326}
327
328/* le pied */
329#pied {
330        background-color: [(#CONFIG{escal/config/couleur11,#BBCCDD})];
331        color:  [(#CONFIG{escal/config/couleur11}|?{#[(#CONFIG{escal/config/couleur11}|couleur_extreme|couleur_inverser)],#000000})];
332}
333
334/* les caracteres */
335/******************/
336
337
338a:link{
339        color: [(#CONFIG{escal/config/texte1,#000099})];
340}
341a:visited {
342        color: [(#CONFIG{escal/config/texte2,#000099})];
343}
344a:hover, ul.onglets li a:hover,
345#cadre-plan a:hover, table.forum a:hover {
346        color: [(#CONFIG{escal/config/texte3,#FF8000})];
347}
348#nom-site-spip, #slogan-site-spip, #descriptif-site-spip, .annoncedefil .caractencadre-spip {
349  color: [(#CONFIG{escal/config/texte01,#FFFFFF})];
350}
351
352#ariane-forum, #ariane-forum a,
353table.forum tr.rub-forum td, table.forum a, table.forum tr.art-forum td  {
354        color: [(#CONFIG{escal/config/texte4,#336699})];
355}
356
357.alerte1, .alerte {
358        color: [(#CONFIG{escal/config/texte5,#FF0000})];
359}
360
361
362/* les bordures */
363/****************/
364
365ul#menu li a, ul#menu ul {
366        border-color: [(#CONFIG{escal/config/bord1,#CCCCCC})];
367}
368ul.onglets li a {
369  border: 1px solid [(#CONFIG{escal/config/couleuruneinact,#82ADE2})];
370  border-top : 1px solid white;
371}
372ul.onglets li a.active {
373  border: 1px solid [(#CONFIG{escal/config/couleurune,#336699})];
374}
375.cadre-articles-rubrique, .cadre-sous-rubrique, #cadre-article, #documents_portfolio,
376.forum-thread, .forum_reponse,
377#formulaire-contact, .valeur2, .valeur3,
378#signatures li, #signatures li p.message {
379        border-color: [(#CONFIG{escal/config/bord2,#CCCCCC})];
380}
381
382table.spip, table.spip td {
383        border-color: [(#CONFIG{escal/config/bord3,#FFFFFF})];
384}
385
386#menuV2 ul.menulist li {
387        border-color: [(#CONFIG{escal/config/bord4,#FFFFFF})];
388}
389.formulaire_recherche input.text,
390.identification-light,
391ul#menu li a:hover,
392.calendar_mini_event  {
393        border-color: [(#CONFIG{escal/config/bord5,#CCCCCC})];
394}
395
396#ariane-forum, table.forum {
397        border-color: [(#CONFIG{escal/config/bord6,#006699})];
398}
399/*********************************************/
400/*    Les arrondis                           */
401/*********************************************/
402ul#menu li a, ul#menu ul, ul#menu ul li {
403  border-radius: [(#CONFIG{escal/config/arrondi1,10px})];
404}
405#menuV2 ul.menulist, #menuV2 ul.menulist a {
406  border-radius: [(#CONFIG{escal/config/arrondi2,10px})];
407}
408ul.onglets li a {
409  border-radius: [(#CONFIG{escal/config/arrondi31,8px 8px 0px 0px})];
410}
411.laune ul.anchors li a {
412  border-radius: [(#CONFIG{escal/config/arrondi32,5px})];
413}
414h1.cadre {
415  border-radius: [(#CONFIG{escal/config/arrondi41,0px 50px 0px 0px})];
416}
417div.texte {
418  border-radius: [(#CONFIG{escal/config/arrondi42,0px 0px 0px 10px / 0px 0px 0px 100px})];
419}
420.identification-light, .formulaire_recherche input.text {
421  border-radius: [(#CONFIG{escal/config/arrondi5,10px})];
422}
423.annonce, .annoncedefil, .headline3 {
424  border-radius: [(#CONFIG{escal/config/arrondi6,15px})];
425}
426#entete-evenement, #nouvel-evenement {
427  border-radius: [(#CONFIG{escal/config/arrondi7,8px 8px 0 0})];
428}
429
430/************************************************************************/
431/*    fixation de la barre d'outils sauf si écran de moins de 950px     */
432/************************************************************************/
433@media all and (min-width: 950px) {
434[(#CONFIG{escal/config/espace}|=={haut}|oui)
435[(#CONFIG{escal/config/fixespace}|=={oui}|oui)
436#espace {
437  position: fixed;
438  width: 950px;
439  background-color: #336699;
440  z-index: 100;
441
442#entete{
443padding-top: 30px;
444}
445.identification-light, .formulaire_recherche input.text {
446  border-radius: 0;
447}
448]]}
449
450/*********************************************/
451/*    Les cadres latéraux                    */
452/*********************************************/
453
454div.cadre-couleur h1.cadre {
455  background-color: [(#CONFIG{escal/config/couleur5,#82ADE2})];
456  color:  [(#CONFIG{escal/config/couleur5}|?{#[(#CONFIG{escal/config/couleur5}|couleur_extreme|couleur_inverser)],#000000})];
457}
458div.cadre-couleur .texte {
459        background-color: [(#CONFIG{escal/config/couleur8,#DAE6F6})];
460        color:  [(#CONFIG{escal/config/couleur8}|?{#[(#CONFIG{escal/config/couleur8}|couleur_extreme|couleur_inverser)],#000000})];
461  border-color: [(#CONFIG{escal/config/couleur5,#82ADE2})];
462}
463[(#CONFIG{escal/config/bordcadres}|=={non}|oui)
464div.cadre-couleur .texte {
465  border: none;
466}]
467 /* la noisette inc-liste_auteurs */
468 /*********************************/
469[(#CONFIG{escal/config/iconesauteurs}|=={non}|non)
470.legende_admin{
471  background: [url((#CHEMIN{images/admin.png}))];
472  padding-left: 20px;
473  background-repeat : no-repeat;
474}
475.legende_redacteur{
476        background-image: [url((#CHEMIN{images/redacteur.png}))];
477  padding-left: 20px;
478  background-repeat : no-repeat;
479}
480.legende_visiteur{
481        background-image: [url((#CHEMIN{images/visiteur.png}))];
482  padding-left: 20px;
483  background-repeat : no-repeat;
484}
485]
486.legende_admin, .admin a{
487  color: [(#CONFIG{escal/config/couleuradmin,#FF0066})] !important;
488}
489.legende_redacteur, .redacteur a{
490  color: [(#CONFIG{escal/config/couleurredacteur,#009933})] !important; 
491}
492.legende_visiteur, .visiteur a{
493  color: [(#CONFIG{escal/config/couleurvisiteur,#000000})] !important;
494}
495/*********************************************/
496/*    La page contact                        */
497/*********************************************/
498[(#CONFIG{escal/config/checkbox}|=={non}|oui)
499li#checkbox {
500  display: none;
501}
502]
503/**************************/
504/* Le modele image_fluide */
505/**************************/
506
507dl.image_fluide{
508  width:100%;
509  margin:auto;
510}
511dl.image_fluide img{
512  width:100%;
513  margin: auto;
514  position: static; 
515  height: auto;
516  -ms-interpolation-mode: bicubic;
517  box-sizing: border-box;
518}
519
520/***************************************/
521/* personnalisation du plugin galleria */
522/***************************************/
523.galleria-container {
524 background-color: [(#CONFIG{escal/config/galleriafond,#FFFFFF})];
525}
526.galleria-info-link, .galleria-info-text,
527.galleria-thumb-nav-left,  .galleria-thumb-nav-right {
528        background-color: [(#CONFIG{escal/config/galleriaencarts,#336699})];
529}
530.galleria-info-title, .galleria-info-description {
531        color: [(#CONFIG{escal/config/galleriacoulpolice,#FFFFFF})];
532}
533.galleria-info-title {
534        font-size: [(#CONFIG{escal/config/galleriatailletitre,14})]px;
535}
536.galleria-counter {
537  color: grey !important;
538  opacity: 100 !important;
539}
Note: See TracBrowser for help on using the repository browser.