source: spip-zone/_plugins_/themes_interface_privee/style_prive_wpip.html @ 42248

Last change on this file since 42248 was 42248, checked in by arno@…, 10 years ago

Utilisation des nouveaux pseudo-styles de css-imbriques. Suppression d'un certain nombre d'images calculées au profit de gradients CSS.

File size: 9.7 KB
Line 
1[(#REM)
2
3        Ce squelette definit les styles de l'espace prive
4
5        Note: l'entete "Vary:" sert a repousser l'entete par
6        defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
7        genant en cas de "rotation du cookie de session" apres
8        un changement d'IP (effet de clignotement).
9
10        ATTENTION: il faut absolument le charset sinon Firefox croit que
11        c'est du text/html !
12]
13#CACHE{3600*100,cache-client}
14#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
15#HTTP_HEADER{Vary: Accept-Encoding}
16
17
18
19#SET{claire,##ENV{couleur_claire,edf3fe}}
20#SET{foncee,##ENV{couleur_foncee,3874b0}}
21#SET{left,#ENV{ltr}|choixsiegal{left,left,right}}
22#SET{right,#ENV{ltr}|choixsiegal{left,right,left}}
23#SET{rtl,#ENV{ltr}|choixsiegal{left,'',_rtl}}
24#SET{rtl_inv,#ENV{ltr}|choixsiegal{right,'',_rtl}}
25#SET{chemin_img_pack,#EVAL{_DIR_IMG_PACK}}
26
27
28body {
29        font-family: 'Lucida Grande', Verdana, Arial, 'Bitstream Vera Sans', sans-serif;
30        background-color: #f9f9f9;
31}
32
33h1, h2, h3, .bandeau_couleur, .bandeau_couleur_sous, a.icone26, a.cellule-h-texte, div.onglet, div.onglet_on, div.onglet_off, .arial0, .arial1, .arial11, .arial2, .cadre, .cadre-formulaire, .cadre-formulaire-editer, a.foncee, a.foncee:hover, a.claire, a.claire:hover, span.creer, span.lang_base   {
34        font-family: 'Lucida Grande', Verdana, Arial, 'Bitstream Vera Sans', sans-serif;
35}
36
37.formulaire_spip input.text,
38.formulaire_spip input.password,
39.formulaire_spip textarea,
40.formulaire_spip select
41{
42        font-family: 'Lucida Grande', Verdana, Arial, 'Bitstream Vera Sans', sans-serif;
43}
44
45#bandeau-principal {
46        border-bottom: 1px solid #666;
47       
48
49        li.cellule48 {
50                font-weight: normal;
51        }
52        .boutons_admin a.boutons_admin {
53                padding-bottom: 5px;
54        }
55
56        .bandeau_sec {
57                border-color: #666;
58                border-width: 1px;
59
60                -spip-border-bottom-left-radius: 6px;
61                -spip-border-bottom-right-radius: 6px;
62                               
63                li.cellule36 {
64                        font-weight: normal;
65
66                        a:hover {
67                                img {
68                                        border: 1px solid #eee;
69                                        background-color: #fff;
70                                }
71                        }
72                }
73        }
74
75        a span.icon_fond {
76                background-color: #aaa;
77        }
78               
79        a:hover span.icon_fond {
80                background-color: [#(#ENV{couleur_claire})];
81        }
82}
83
84#bandeau_couleur {
85        background-color: #464646;
86        background: url([(#CHEMIN{images/dark-grad.gif})]) top repeat-x;
87        border: 0px;
88        color: white;
89        padding-top: 5px;
90        padding-bottom: 5px;
91       
92        a, a.icone26 {
93                color: white;
94        }
95
96        a.icone26 img {
97                background-color: #aaa;
98        }
99        a.icone26:hover img {
100                background-color: #GET{claire};
101        }
102       
103        .bandeau_couleur_sous {
104                top: 5px;
105                border: 1px solid #dfdfdf;
106                background-color: #f1f1f1;
107                border-top: 0px;
108                color: #464646;
109                -spip-border-bottom-left-radius: 6px;
110                -spip-border-bottom-right-radius: 6px;
111
112                . :hover {
113                        -spip-box-shadow:  0px 0px 2px #999;
114                }
115               
116                a {
117                        color: #464646;
118                }
119        }
120       
121}
122
123
124.plan-articles, .plan-articles-bloques {
125        border-color: #dfdfdf;
126}
127.plan-articles a, .plan-articles-bloques .publie, .plan-articles-bloques .prepa, .plan-articles-bloques .prop, .plan-articles-bloques .refuse, .plan-articles-bloques .poubelle {
128        background-color: white;
129        -spip-transition-property: background-color color border-color;
130        -spip-transition-duration: 0.2s;
131       
132}
133.plan-articles a:hover {
134        background-color: #f8f8f8;
135}
136
137div.bandeau_rubriques {
138        background-color: white;
139}
140a.bandeau_rub  {
141        border-color: #dfdfdf;
142        background-image: url(#GET{chemin_img_pack}rubrique-12.gif);
143}
144div.petit-secteur, a.petit-secteur {
145        background-image: url(#GET{chemin_img_pack}secteur-12.gif);
146}
147div.brt { background: url(#GET{chemin_img_pack}triangle-droite[(#GET{rtl})].gif) [(#GET{right})] center no-repeat; }
148
149a.bandeau_rub:hover {
150        background-color: #f8f8f8;     
151}
152
153.icone36 {
154        a img, img {
155                -spip-border-radius: 6px;
156        }
157}
158
159.icone36 a img, a.icone36 img, .icone36 a:hover img, a.icone36:hover img {
160        border: 0px;
161        margin-bottom: -12px;
162        background-color: transparent;
163        display: none;
164}
165
166.icone36 a img:only-child, a.icone36 img:only-child, .icone36 a:hover img:only-child, a.icone36:hover img:only-child {
167        display: inline;
168}
169
170.danger, a.cellule-h-texte {
171        background: none;
172}
173
174.icone36 {
175        width: auto;
176        margin-left: 10px;
177        margin-right: 10px;
178}
179
180.icone36 a span, a.icone36 span {
181        -spip-border-radius: 10px;
182        border: 1px solid #ddd;
183        padding: 3px 10px;
184        width: auto;
185        font-weight: normal;
186        font-size: 11px;
187        text-shadow: white 0px 1px 0px;
188        color: #464646;
189        background-color: #ddd;
190        height: auto;
191       
192        -spip-transition-property: background-color color border-color;
193        -spip-transition-duration: 0.2s;
194       
195        . :hover {
196                color: black;
197                border-color: #888;
198                text-shadow: black 0px -1px 0px;
199                background: #666;
200                color: white;
201        }
202}
203
204.cadre, .dater {
205        border-color: #dfdfdf;
206        -spip-border-radius: 6px;
207       
208        . :hover {
209                -spip-box-shadow:  0px 0px 2px #ccc;
210        }
211
212        .titrem {
213                background: url(#CHEMIN{images/gray-grad.png});
214                padding-top: 6px;
215                padding-bottom: 6px;
216                text-shadow: white 0px 1px 0px;
217               
218        }
219        .deplie, .deplie, .depliant, .replie {
220                a.titremancre {
221                        border-#GET{left}: 1px solid #ddd;
222                        margin-#GET{left}: 10px;
223                        margin-#GET{right}: 0px;
224                        padding-#GET{left}: 16px;
225                        background-position: top #GET{right};
226                       
227                        -spip-opacity:0.5;
228                       
229                        float: #GET{right};
230                       
231                        . :hover {
232                                -spip-opacity: 1;
233                        }
234
235                }
236        }
237        .replie a.titremancre {
238                background-image: url(#GET{chemin_img_pack}deplierhaut[(#GET{rtl_inv})].gif);
239        }
240}
241
242.cadre-sous_rub {
243        background-color: #ededed;
244}
245
246.cadre-couleur-foncee {
247        border: 1px solid [(#GET{claire})];
248}
249
250.cadre-forum {
251        border-color: #dfdfdf;
252        -spip-border-bottom-left-radius: 0px;
253        -spip-border-bottom-right-radius: 0px;
254}
255.cadre-thread-forum {
256        -spip-border-radius: 0px;
257}
258
259.fiche_objet, .no_onglets .fiche_objet {
260        border-color: #dfdfdf;
261        -spip-border-radius: 6px;
262}
263
264div.liste, div.cadre-liste {
265        border-color: #dfdfdf;
266        -spip-border-bottom-left-radius: 0px;
267        -spip-border-bottom-right-radius: 0px;
268
269        table {
270       
271                .tr_liste {
272                        -spip-transition-property: background-color color border-color;
273                        -spip-transition-duration: 0.2s;
274                        background-color: white;
275                       
276                        td {
277                                border-color:#dfdfdf;
278                        }
279                }
280                .tr_liste_over, .tr_liste:hover {
281                        background-color: #f8f8f8;
282                       
283                }
284        }
285       
286        .titrem.hover {
287                background-color: #eee;
288        }
289
290        .tranches {
291                padding: 4px 0px 4px 10px;     
292                background-color: #dfdfdf;
293                border-color: #f0f0f0;
294                border-top: 0;
295        }
296}
297
298
299.entete-formulaire {
300        margin-bottom: 20px;
301        padding: 10px;
302        border: 1px solid #dfdfdf;
303        -spip-border-radius: 6px;
304}
305
306
307div.onglet_off {
308        background-color: #464646;
309        border-color: #464646;
310}
311div.onglet {
312        background-color: inherit;
313        background: url(#CHEMIN{images/gray-grad.png});         
314        border-color: #dfdfdf;
315       
316        a {
317                color: #aaa;
318        }
319}
320div.onglet_on {
321        background-color: #[(#ENV{couleur_claire}|couleur_eclaircir)];
322}
323
324.dater {
325        border: 1px solid #dfdfdf;
326        -spip-border-radius: 6px;
327        color: #666;
328        margin-top: 20px;
329}
330.dater .hover, .editer_mot .hover, .editer_auteurs .hover { background-color: #eee; }
331
332
333.formulaire_spip {
334        border: 0px;
335        padding: 0px;
336       
337        li {
338                padding-right: 0px;
339                padding-left: 0px;
340               
341                label {
342                        color: #444;
343                        text-shadow: white 0px 1px 0px;
344                       
345                }
346        }
347       
348        li, li.gauche {
349                padding-#GET{left}: 130px;
350        }
351
352
353
354        li .erreur_message {
355                border-color: #dfdfdf;
356                -spip-border-top-left-radius: 6px;
357                -spip-border-top-right-radius: 6px;
358        }
359       
360        .erreur_message + .explication {
361                -spip-border-top-left-radius: 0px;
362                -spip-border-top-right-radius: 0px;             
363        }
364       
365        .explication {
366                border-color: #dfdfdf;
367                background: url(#CHEMIN{images/gray-grad.png});
368                -spip-border-top-left-radius: 6px;
369                -spip-border-top-right-radius: 6px;
370        }
371       
372        .erreur_message + input[type=text], .erreur_message + input[type=password], .erreur_message + textarea, .explication + input[type=text], .explication + input[type=password], .explication + textarea
373        {
374                -spip-border-top-left-radius: 0px;
375                -spip-border-top-right-radius: 0px;
376        }
377
378        li.editer_parent, li.editer_groupe_mot, li.editer_descriptif, li.editer_chapo, li.editer_texte, li.editer_ps, li.editer_url_zip_plugin2, li.haut
379        {
380                padding-#GET{left}:0px;
381                padding-top:10px;
382        }       
383        .editer_titre.obligatoire {
384                input {
385                        font-size: 200%;
386                        font-weight: normal;
387                }
388        }
389       
390        p.boutons {
391                background-color: inherit;
392                border: 0px;
393                padding-#GET{right}: 0px;
394        }
395               
396}
397
398.formulaire_spip li.editer_parent {
399        border: 1px solid #dfdfdf;     
400        background-color: #ededed;
401        padding-#GET{left}: 10px;
402        padding-#GET{right}: 10px;
403        -spip-border-radius: 6px;
404}
405.formulaire_spip li.editer_groupe_mot, .formulaire_editer_auteur li.editer_statut {
406        background-color: inherit;
407}
408
409
410.formulaire_spip fieldset {
411        border: 1px solid #dfdfdf;     
412        margin-#GET{left}: 0px;
413        margin-bottom: 10px;
414        -spip-border-radius: 6px;
415       
416        legend, h3.legend {
417                background: url(#CHEMIN{images/gray-grad.png});
418                padding: 6px;
419        }
420       
421        li {
422                padding-#GET{right}: 10px;
423                margin-#GET{left}: 10px;
424               
425                input.text, input.password, textarea.textarea {
426                        border: 1px solid #dfdfdf;             
427                }
428        }
429
430
431       
432}
433.formulaire_editer_article li.editer_liens_sites {
434        border: 0px;
435}
436
437input[type=text], input[type=password], textarea {
438        border: 1px solid #dfdfdf;
439        -spip-border-radius: 6px;
440}
441
442input[type="submit"] {
443        background-color: [#(#ENV{couleur_foncee}|couleur_luminance{0.3})];
444        -spip-gradient: top, [#(#ENV{couleur_foncee}|couleur_luminance{0.2})], [#(#ENV{couleur_foncee}|couleur_luminance{0.4})];
445        border: 1px solid [#(#ENV{couleur_foncee}|couleur_luminance{0.6})];
446        padding: 3px 10px;
447        font-weight: bold;
448        color: black;
449        -spip-border-radius: 10px;
450        -spip-transition-property: background-color color border-color;
451        -spip-transition-duration: 0.2s;
452
453}
454input[type="submit"]:hover {
455        color: white;
456        background-color: [#(#ENV{couleur_foncee}|couleur_luminance{0.7})];
457        -spip-gradient: top, [#(#ENV{couleur_foncee}|couleur_luminance{0.6})], [#(#ENV{couleur_foncee}|couleur_luminance{0.8})];
458        border: 1px solid [#(#ENV{couleur_foncee}|couleur_luminance{0.7})];
459        -spip-box-shadow: 0px 0px 3px #555555;
460}
461
462.configuration #contenu .cadre-trait-couleur .titrem { color: #444; }
463
464
465#FILTRE{css_imbriques_decouper}
Note: See TracBrowser for help on using the repository browser.