source: spip-zone/_squelettes_/sarkaspip3/css/elements.css.html @ 24474

Last change on this file since 24474 was 24474, checked in by eric@…, 11 years ago

Factorisation et simplication des css du centre de la page

  • Property svn:eol-style set to native
File size: 16.2 KB
Line 
1/* ELEMENTS.CSS                                                         */
2/* Cette feuille contient:                                              */
3/* - les styles de la partie centrale du site                           */
4/* -------------------------------------------------------------------- */
5
6/* Intitule (h1) de chaque page */
7.intitule_page {margin: 5px 0 30px; color: #808080; font-size: 2.4em; font-weight: bold;}
8
9/* Boutons de changements de look d'une page */
10.bouton_page a {display: block; float: right; margin: -5px 10px 0 0; padding: 0; border: 0; width: 24px; height: 24px;}
11.bouton_page a:hover {border: 1px solid #6262A4;}
12
13/* Styles generiques des pages de type plan
14   ----------------------------------------
15        - Plan de site
16        - Agenda annuel
17        - Galerie chronologique
18        - Breves
19        - Herbier
20*/
21.plan { margin-top: 30px;}
22.plan h2 {display: inline; font-weight: bold; margin: 0.5em 0 0; font-size: 1.9em; line-height: 1.4em;}
23.plan h2 a { padding-left:15px }
24.plan h2 a:hover {[background-image: url((#CHEMIN{images/puce0.jpg})); ]background-position: left center; background-repeat: no-repeat; text-decoration: none;}
25.plan .objet_date {color: #990000;}
26.plan ul { list-style-type: none; padding: 0 0 0 20px; margin: 0;}
27.plan li {line-height: 1.4em; padding-left:10px;}
28.plan a.objet_titre{color: #6262A4; padding: 0 0 0 10px; font-size: 1.1em;}
29.plan a.objet_titre:hover {[background-image: url((#CHEMIN{images/puce-n0.gif})); ]background-position: left center; background-repeat: no-repeat; text-decoration: underline;}
30/* Styles specifiques de la page Breves */
31.plan a.titre#breve{color: #808080;}
32/* Styles specifiques de la page Herbier */
33.plan hr {border: 0; border-top: 1px solid #6262A4; margin-left: 10px; margin-right: 10px;}
34.plan .description {color: #808080; font-size: 11px; margin-left: 20px; margin-top: 0;}
35.plan a img {float: right; margin-left: 10px; margin-right: 10px; border: 4px solid #F0F0FA;}
36.plan a:hover img {border-color: #6262A4;}
37.plan#herbier_panorama a img {float: left;      margin: 10px 10px; border: 4px solid #F0F0FA;}
38.plan#herbier_panorama a:hover img {border-color: #6262A4;}
39.bouton_page a#herbier_liste {[background: url((#CHEMIN{images/herbier_liste.gif})) no-repeat; ]float: right;}
40.bouton_page a#herbier_panorama {[background: url((#CHEMIN{images/herbier_panorama.gif})) no-repeat; ]float: right;}
41
42/* Styles generiques des pages de type rubrique et article
43   -------------------------------------------------------
44        - Rubrique
45        - Article
46        - Evenement
47        - Album
48*/
49.titre h1 {color: #6262A4; font-weight: bold; margin: 0 0 5px; border-bottom: 2px solid #6262A4; padding-bottom: 5px;}
50/* Styles des boutons de fonction des pages article, evenement, album... */
51a.fonction {display: block; float: right; width: 24px; height: 24px; margin-left: 10px;}
52#imprimer {[background-image: url((#CHEMIN{images/article_imprimer.gif})); ]background-repeat: no-repeat;}
53#commenter {[background-image: url((#CHEMIN{images/article_commenter.gif})); ]background-repeat: no-repeat;}
54#creer_pdf {[background-image: url((#CHEMIN{images/article_pdf.gif})); ]background-repeat: no-repeat;}
55#voir_commentaires {[background-image: url((#CHEMIN{images/article_commentaires.gif})); ]background-repeat: no-repeat;}
56a.fonction.repondre_commentaire {width: 16px; height: 16px; margin-right: 0;[ background-image: url((#CHEMIN{images/commentaire_repondre.gif})); ]background-repeat: no-repeat;}
57
58/* Styles generiques des cartouches pour article (inclus evenement, album) et forum */
59.cartouche {
60        color: #6262A4; font-weight: normal; font-size: 1.1em; line-height: 1.1em; text-align: right;
61        margin: 0 0 30px 10px; padding: 0; float: right;}
62
63/* Styles generiques des descriptions pour rubrique et article (inclus evenement, album) */
64.description {margin: 10px 0 30px; font-size: 1.2em; line-height: 1em;}
65
66.description li {margin-left: 10px;     line-height: 1.4em;}
67.description a {text-decoration: none;}
68.description a:hover {text-decoration: underline;}
69.description p {font-size: 1em;}
70
71.description .soustitre {float: left; color: #6262A4; line-height: 1em; font-size: 1.4em; font-weight: bold; font-style: italic; margin: 0; padding: 0;}
72.description .chapo {color: #6262A4; margin: 0 0 30px; font-style: italic;}
73.description .lien_site {margin: 10px 0 20px; padding-top: 10px; font-size: 1em; border-top: 1px dotted #6262A4;}
74.description .ps {margin: 10px 0 20px; padding-top: 10px; font-size: 1em; border-top: 1px dotted #6262A4;}
75.description .notes {margin: 10px 0 20px; padding-top: 10px; font-size: 1em; border-top: 1px dotted #6262A4;}
76
77/* Styles generiques des portfolios: images et documents pour rubrique et article (inclus evenement, album) */
78.portfolio {clear: both; margin-bottom: 30px; padding-top: 2px;}
79.portfolio h2 {font-size: 1.9em; line-height: 1em; font-weight: bold; margin: 0 0 10px; color: #6262A4; border-bottom: 2px solid #6262A4; padding: 0 0 5px 20px;}
80#documents_joints.portfolio h2 {[background: url((#CHEMIN{images/portfolio_documents.gif})) top left no-repeat;]}
81#images_jointes.portfolio h2 {[background: url((#CHEMIN{images/portfolio_images.gif})) top left no-repeat;]}
82.portfolio a img {margin: 10px 10px; border: 4px solid #F0F0FA;}
83.portfolio a:hover img {border-color: #6262A4;}
84
85.portfolio dl {[width: (#EVAL{_SARKASPIP_CONFIG_LARGEUR_DOCUMENT})px; ]height: 11em; text-align: center; margin: 10px; float: left;}
86.portfolio dt {[width: (#EVAL{_SARKASPIP_CONFIG_LARGEUR_DOCUMENT})px; ]font-weight: bold;}
87.portfolio dt a img {border: 0;}
88.portfolio dd {[width: (#EVAL{_SARKASPIP_CONFIG_LARGEUR_DOCUMENT})px; ]margin: 0; padding: 0;}
89
90/* Styles de base specifiques a la rubrique */
91.rubrique {margin: 0; padding-bottom: 10px;}
92.rubrique .titre {}
93.rubrique .titre h1 {color: #990000; margin: 0 0 35px; border-color: #990000;}
94/* Styles de la description, specifiques de la page rubrique */
95      /*.rubrique .description a {color: #990000;}*/
96.rubrique .description .notes {border-color: #990000;}
97/* Styles du portfolio specifiques de la page rubrique */
98.rubrique .portfolio {}
99.rubrique .portfolio h2 {color: #990000; border-color: #990000;}
100.rubrique .portfolio a:hover img {border-color: #990000;}
101.rubrique .portfolio dt a:hover img {border: 0;}
102
103/* Styles de base specifiques des pages article, evenement, album... */
104.article {margin: 0; padding-bottom: 10px;}
105.article .titre {}
106.article .titre h1 {}
107/* Styles de la description, specifiques aux pages article */
108      /*.article .description a {color: #6262A4;}*/
109.article .description .notes {}
110/* Styles du portfolio specifiques des pages article, evenement, album... */
111.article .portfolio {}
112.article .portfolio h2 {}
113
114#edito.article {border: 2px solid #808080; background-color: #EEEEEE; margin: 0 0 30px; padding: 5px 10px; text-align: justify;}
115#edito.article .titre, #edito.article .surtitre, #edito.article .soustitre {color: #6262A4}
116#edito.article .titre h1 {border: 0}
117/*
118#edito.article .image .spip_logos {float: right;}
119*/
120#edito.article a.fonction {display: none; }
121#edito.article .cartouche {color: #000000; font-size: 1.2em}
122
123#evenement.article .cartouche {text-align: left; font-size: 1.2em; float: left; margin: 0 10px 30px 0;}
124
125/* Hack IE6 : sur-titre, titre, sous-titre de l'article invisible */
126* html .article, * html #edito.article,
127* html .article .titre, * html #edito.article .titre,
128* html .article .soustitre, * html #edito.article .soustitre {height : 1px;}
129 
130/* Hack IE7 : sur-titre, titre, sous-titre de l'article invisible */
131*+html .article, *+html #edito.article,
132*+html .article .titre, *+html #edito.article .titre,
133*+html .article .soustitre, *+html #edito.article .soustitre {height : 1px;} 
134
135.auteur {margin: 0; padding-bottom: 10px;}
136
137/* Syles des commentaires de l'article */
138.commentaires {padding: 0 0 10px 0; margin: 0 0 30px 0;}
139.commentaires h2 {[background: url((#CHEMIN{images/commentaires.gif})) top left no-repeat;]
140        font-size: 1.9em; line-height: 1.2em; font-weight: bold; color: #6262A4; border-bottom: 2px solid #6262A4; padding: 0 0 5px 20px; margin: 0;}
141.commentaires .message {border-top: 1px dotted #6262A4; margin: 0; padding: 10px 0 10px;}
142.commentaires .message:hover {background: #f0f0fa;}
143.commentaires #n1.message {border-top: 0; padding: 20px 0 10px;}
144.commentaires .message .gravatar{float:left}
145.commentaires .message .cartouche_simple{margin-left: 50px; font-size: 1.1em; color: #6262A4;}
146.commentaires .message .texte{margin-left : 50px; padding-top: 5px;font-size:1.2em;}
147
148/* Styles des extraits d'articles */
149#articles_recents.portfolio h2,
150#article_commentaire.portfolio h2,
151#articles_rubrique.portfolio h2 {color: #6262A4; border-bottom: 2px solid #6262A4; padding: 0 0 5px 20px;
152        [background: url((#CHEMIN{images/liste_articles.gif})) top left no-repeat;]}
153.extrait {background: #FFFFFF; margin: 0 0 20px;        padding: 0 0 10px 15px; border-left: 5px solid #6262A4; border-bottom: 1px solid #6262A4;}
154.extrait .cartouche {}
155.extrait .complements {color: #990000;  font-weight: normal; margin: 10px 0 5px; font-size: 1.1em;}
156.extrait h3 a.titre {
157        display: block; padding-top: 5px; margin: 0;
158        color: #6262A4; font-size: 1.6em; font-weight: bold; line-height:1em; text-decoration: none;}
159.extrait h3 a.titre:hover {text-decoration: underline;}
160.extrait .introduction {margin: 10px 0 0; font-size:1.2em; line-height : 1.4em;}
161.extrait .lire_suite {text-align: left; margin: 10px 0 0; font-size: 1.1em;}
162.extrait .lire_suite a {padding: 0 0 5px 20px;[ background: url((#CHEMIN{images/lire_suite.gif})) left center no-repeat;]}
163      /*.extrait a {color: #990000;     text-decoration: none;}
164        .extrait a:hover {text-decoration: underline;}*/
165/*
166.extrait .image .spip_logos {float: left; margin-top: 0;}
167*/
168
169/* Styles generiques des autres pages
170   ----------------------------------
171        - Galerie
172*/
173.galerie_planche       {}
174.galerie_planche ul {margin : 0; padding : 0;list-style-type:none;}
175.galerie_planche li {width: 45% ;float : left; border-bottom:2px dotted #808080;margin-bottom : 20px; padding-bottom : 20px;}
176.galerie_planche li.modulo1 {margin-right: 30px;}
177.galerie_planche li.modulo0 {margin-right: 0;}
178.galerie_planche h2 {font-weight:bold; font-size : 1.2em; margin-bottom : 5px;}
179.galerie_planche .logo {float : right;}
180.galerie_planche .logo a {color: #FFFFFF;text-align:right;}
181.galerie_planche .logo a img {float:right; border : 1px solid #FFFFFF;margin-bottom: 5px}
182.galerie_planche .logo a .loupe {clear : both; display : block; [background: transparent url((#CHEMIN{images/loupe.gif}))no-repeat scroll right bottom; ]padding-right:17px; height: 14px}
183.galerie_planche .logo a:hover {color: #808080; text-decoration: none;}
184.galerie_planche .logo a:hover img {border : 1px solid #808080;}
185.galerie_planche introduction {margin: 0;}
186
187/* Styles generiques des messages d'erreur
188   -------------------------------------------------------
189        - Avertissement
190        - Information
191        - Erreur
192*/
193.message_erreur { margin-top: 30px;     font-size: 1.2em; font-weight: bold; color: red;}
194
195/* FIN DES STYLES REVUS */
196
197
198/* Styles des petitions de l'article */
199* html #signer_petition.petition {padding-bottom: 30px;}
200#articles-freres.petition {background: #EEEEEE; }
201
202/*
203.sommaire {margin: 0; width: 100%;}
204*/
205
206
207/*
208.derniers-articles {
209          background: #FFFFFF;
210        margin: 0 0 20px;
211        padding: 0 0 10px 0;
212       
213}
214*/
215
216
217#visualisation .detail {
218        border-bottom: 1px solid #FFFFFF;
219        border-left: 1px solid #FFFFFF;
220        padding: 1px;
221        background: #6262A4;
222        color: #FFFFFF;
223        font-size: 1.2em;
224        font-weight:normal;
225        line-height:1em;
226}
227
228/*
229.en-tete {
230        font-weight: bold;
231        margin: 0 10px 10px 0;
232        padding-top:10px;
233}
234*/
235/*
236#articles_recents, #article_rubrique, #articles_auteur, #reponse_suite_article {
237        padding-left:10px;
238        padding-bottom:1px;
239        padding-top:1px;
240        margin-right:0;
241        background-color: #6262A4;
242        font-size : 2em;
243        line-height:1.4em;
244        }
245*/
246/*#article_rubrique {
247        padding-top: 0 ;
248        padding-left:10px}*/
249#forum {
250        color: #990000;
251        font-size: 1.9em;
252        font-weight: bold;
253        margin: 0 0 5px 0;
254}
255#docu_rubrique {color: #990000;}
256#img_rubrique{color: #990000;}
257
258/* content --> documents joints (aux articles et aux rubriques) */
259#content .doc {
260        padding: 10px;
261        color: #990000;
262        background: #FFFFFF;
263        margin: 0;
264}
265
266#content .doc .spip_logos {
267        margin: 5px 0 0 0;
268        border:0;
269}
270
271#content .doc a {
272        display:block;
273        margin: 0 0 5px 0;
274}
275
276/* content --> images jointes (aux articles et aux rubriques) */
277#content .doc .vignette {
278        font-size: 1em;
279        margin: 10px;
280        padding: 10px 0 10px 0;
281        border:0;
282}
283
284#content .doc ul {
285        list-style-type: none;
286        padding: 0;
287        margin: 0;
288        color: #000000;
289}
290
291/* mise en forme du formulaire de petition */  /*Mise en forme utilisée aussi pour "les articles dans la meme rubrique" */
292/*.petition {
293        border: 2px solid #6262A4;
294        padding: 10px;
295        margin: 0 0 10px 0;
296}
297#signer_petition{font-size:1.2em;}
298
299.petition .en-tete {
300        color: #6262A4;
301        font-size: 1.9em;
302        margin: 0 0 5px 0;
303}
304*/
305
306#articles-freres { background: #EEEEEE; }
307#articles-freres .en-tete{font-weight: normal ;}
308#articles-freres ol {color: #6262A4;font-size:1.3em;line-height:1em;}
309#articles-freres .frere a {  /* lien vers les articles frères sauf l'article en cours */
310        color: #6262A4;
311        font-weight: bold;
312}
313#articles-freres .frere a:hover {text-decoration: underline;}
314#articles-freres .frere .date { color: #990000;}
315#articles-freres .en-cours { /* affichage du titre de l'article en cours (sans lien) */
316        color: #808080;
317}
318*/
319
320#signatures {
321        background: #EEEEEE;
322}
323
324#signatures td {
325        border: 1px solid #6262A4;
326        margin: 0;
327        padding: 2px 5px 2px 5px;
328        empty-cells: hide;
329        font-size: 1.2em;
330        line-height:1.1em;
331}
332#signatures thead {
333        background: #6262A4;
334        font-weight: bold;
335        color: #FFFFFF;
336}
337
338/* ~~~~~~~~~~~~ forum ~~~~~~~~~~~~ */
339.forum {
340        border: none;
341        padding: 0;
342        margin: 0;
343        /*font-size: 100%;*/
344}
345.forum a.article-forum {
346        font-size: 1.4em;
347        font-weight: bold;
348}
349
350.forum_fils {margin-left : 20px;}
351
352/*.visualisation {
353        border: 1px solid #6262A4;
354        margin: 10px 0 0 0;
355}
356.visualisation .titre {
357        border-bottom: 1px solid #FFFFFF;
358        font-size: 1.5em;
359        line-height: 1.2em;
360        font-weight: bold;
361        text-align: left;
362        color: #FFFFFF;
363        padding: 2px 10px 2px 10px;
364        background: #6262A4;
365}
366.visualisation .texte {padding: 10px;font-size:1.3em;}*/
367
368
369
370
371/* ~~~~~~~~~~~~ galerie/albums ~~~~~~~~~~~~ */
372/*.galerie {
373        font-size: 24px;*/                                                      /* ?????????   A VERIFIER*/
374/*      margin: 0;
375}
376.galerie-album .galerie-album{
377        font-size: 12px;
378        padding: 0 0 10px 0;
379        border-top: 2px solid #6262A4;
380}*/
381#planche.galerie-album  {min-height: 500px; _height: 220px;}
382* html #planche.galerie-album, *+html #planche.galerie-album  {height: 220px;}
383
384.galerie-album  .vignette {
385        display: block;
386        float: left;
387        width: 220px;
388}
389.galerie-album  .vignette .spip_logos {
390        padding: 10px;
391        display: block;
392        background: #EEEEEE;
393        border-left: 2px solid #6262A4;
394        border-right: 2px solid #6262A4;
395        border-bottom: 2px solid #6262A4;
396}
397.galerie-album   a.titre {
398        display: block;
399        color: #6262A4;
400        /*font-size: 130%;*/
401        font-weight: bold;
402        margin: 0 10px 0 10px;
403        text-decoration: none;
404        padding-top: 5px;
405}
406
407.galerie-album   a.titre:hover {
408        text-decoration: underline;
409}
410.galerie-album .introduction {
411        color: #000000;
412        margin: 10px 10px 0 10px;
413}
414.galerie-album .texte {
415        display: block;
416        float: left;
417        margin: 10px;
418}
419.galerie-album a.suite {
420        text-align: right;
421        display: block;
422        padding-right : 25px;
423}
424
425/* ~~~~~~~~~~~~ album ~~~~~~~~~~~~ */
426.album_menu a:hover {text-decoration: none !important;}
427
428.album_menu {
429        margin-top:25px;
430        padding-top:10px;
431        padding-bottom:10px;
432        border-top:2px #6262A4 solid;
433        width:100%;
434        color: #6262A4;
435        font-family: Courier, monospace;
436}
437
438.album_vignette {
439        width: 100%;
440        text-align: center;
441}
442
443.album_vignette a:hover {text-decoration: none !important;}
444
445* html .album_vignette a.image-vignette, *+html .album_vignette a.image-vignette {/*hack pour ie : permet de creer le fond bleu des vignettes et l'espacement entre elles*/
446        background-color: #E0E0E0;
447        padding: 0;
448        margin: 5px;
449        height: 100px;
450}
451/*style valable pour ff, equivalent au style precedent pour ie*/
452
453.album_vignette table{
454        text-align: center;
455        margin : auto;
456}
457
458.album_vignette TD{
459        background-color: #E0E0E0;
460        height : 130px ;
461        width : 130px;
462        padding : 5px;
463        margin :0;
464}
465
466/* ~~~~~~~~~~~~ auteur ~~~~~~~~~~~~ */
467.auteur {}
468
469.indentation {padding-left: 30px;}
470.redimensionnement {/*font-size: 11px;*/}
471
472/* ~~~~~~~~~~~~ Recherche ~~~~~~~~~~~~ */
473.elements-trouves {
474        color: #990000;
475        /*font-size: 150%;*/
476        font-weight: bold;
477        margin: 0 0 15px 0;
478        padding: 0;
479        text-decoration: underline;
480}
481
Note: See TracBrowser for help on using the repository browser.