source: spip-zone/_squelettes_/spipr-educ/trunk/css/spipr_educ.less.html @ 119752

Last change on this file since 119752 was 119752, checked in by olivier.gautier@…, 2 years ago

L'académie de Rouen est maintenant académie de Normandie.
Un bloc d'authentification sur la page de sommaire pour le plugin Accès Restreint

File size: 51.5 KB
Line 
1// Quelques inclusions utiles
2@import "css/responsive-utilities.less";
3@import "css/spip.variables.less";
4@import "css/mixins.less";
5
6
7/* Ici les variables issues de bootstrap2, fichier d'origine variables.less, on réorganise et y ajoute certains éléments si nécessaire... */
8//
9// Variables
10// --------------------------------------------------
11
12
13// Global values
14// --------------------------------------------------
15
16
17// Grays
18// -------------------------
19@black:                 #000;
20@grayDarker:            #222;
21@grayDark:              #333;
22@gray:                  #555;
23@grayLight:             #999;
24@grayLighter:           #eee;
25@white:                 #fff;
26
27
28// Accent colors
29// -------------------------
30@blue:                  #049cdb;
31@blueDark:              #0064cd;
32@green:                 #46a546;
33@red:                   #9d261d;
34@yellow:                #ffc40d;
35@orange:                #f89406;
36@pink:                  #c3325f;
37@purple:                #7a43b6;
38
39
40// Scaffolding
41// -------------------------
42
43@import "css/scaffolding.less";
44@import "css/type.less";
45
46<BOUCLE_graphisme_couleur_fond(spipr_educ){nom = graphisme_couleur_fond} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
47[@bodyBackground: (#PARAMETRE8|?{#PARAMETRE8, "#fff"}); // Couleur générale de l'écran]
48[.container {background-color:(#PARAMETRE1|?{#PARAMETRE1, "#fff"});} // Fond de page]
49[#header {background-color:(#PARAMETRE2);}      // Entête, non proposé par défaut]
50[#wrapper {background-color:(#PARAMETRE3);} // 3 colonnes de contenu, non proposé par défaut]
51[#content {background-color:(#PARAMETRE4);} // Colonne de contenus, non proposé par défaut]
52[#aside {background-color:(#PARAMETRE5);} // Colonne secondaire, non proposé par défaut]
53[#extra {background-color:(#PARAMETRE6);} // Colonne tertiaire, non proposé par défaut]
54[#footer {background-color:(#PARAMETRE7);} // Pied de page, non proposé par défaut]
55</BOUCLE_graphisme_couleur_fond>
56
57
58<BOUCLE_graphisme_couleur_textes(spipr_educ){nom = graphisme_couleur_textes} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
59[@textColor: (#PARAMETRE1|?{#PARAMETRE1, "@grayDark"}); // Couleur du texte]
60[@linkColor: (#PARAMETRE2|?{#PARAMETRE2, "#08c"}); // Couleur des liens]
61[@linkColorHover: (#PARAMETRE3|?{#PARAMETRE3, "darken(@linkColor, 15%)"}); // Couleur des liens lors du survol]
62[.header .accueil #nom_site_spip {color: (#PARAMETRE4|?{#PARAMETRE4, "@linkColor"});} // Couleur du titre du site dans l'entête]
63[#slogan_site_spip {color: (#PARAMETRE5|?{#PARAMETRE5, "@textColor"});}]
64[@headingsColor: (#PARAMETRE6|?{#PARAMETRE6, "inherit"});]
65</BOUCLE_graphisme_couleur_textes>
66
67<BOUCLE_graphisme_typographie(spipr_educ){nom = graphisme_typographie} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
68[@sansFontFamily: (#PARAMETRE1|?{#PARAMETRE1, '"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif'}); // Typo sans]
69[@serifFontFamily: (#PARAMETRE2|?{#PARAMETRE2, 'Georgia, Cambria, "Times New Roman", Times, serif'}); // Typo serif]
70[@monoFontFamily: (#PARAMETRE3|?{#PARAMETRE3, '"Courier New", Courier, monospace'}); // Typo serif]
71[@headingsFontFamily: (#PARAMETRE4|?{#PARAMETRE4, '@baseFontFamily'}); // Typo des titres]
72[@baseFontSize: (#PARAMETRE5|?{#PARAMETRE5, '14'})px; // Hauteur de base des caractères]
73@baseFontFamily:        @serifFontFamily;       // Police de base
74@altFontFamily:         @sansFontFamily;        // Police alternative
75[@baseLineHeight: (#PARAMETRE6|?{#PARAMETRE6, '20'})px; // Hauteur de base des lignes]
76</BOUCLE_graphisme_typographie>
77
78@headingsFontWeight:    normal;    // Voir s'il faut aussi pouvoir paramétrer cela...
79
80
81// Component sizing
82// -------------------------
83// Based on 14px font-size and 20px line-height
84
85@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
86@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
87@fontSizeMini:          @baseFontSize * 0.75; // ~11px
88
89@paddingLarge:          11px 19px; // 44px
90@paddingSmall:          2px 10px;  // 26px
91@paddingMini:           0 6px;   // 22px
92
93@baseBorderRadius:      4px;
94@borderRadiusLarge:     6px;
95@borderRadiusSmall:     3px;
96
97
98// Tables
99// -------------------------
100
101@import "css/tables.less";
102
103<BOUCLE_graphisme_tableaux(spipr_educ){nom = graphisme_tableaux} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
104[@tableBackground: (#PARAMETRE1|?{#PARAMETRE1, "#ffffff"}); // Couleur de fond des lignes impaires]
105[@tableBackgroundAccent: (#PARAMETRE2|?{#PARAMETRE2, "#f9f9f9"}); // Couleur de fond des lignes paires]
106[@tableBackgroundHover: (#PARAMETRE3|?{#PARAMETRE3, "#f5f5f5"}); // Couleur de fond des lignes au survol]
107[@tableBorder: (#PARAMETRE5|?{#PARAMETRE5, "#dddddd"}); // Couleur des bordures]
108[(#PARAMETRE4|=={oui}|?{'
109// On prend le contenu de la classe table-bordered dans tables.css et appliqué à table.spip
110table.spip {
111  border: 1px solid @tableBorder;
112  border-collapse: separate; // Done so we can round those corners!
113  *border-collapse: collapse; // IE7 can t round corners anyway
114  border-left: 0;
115  .border-radius(@baseBorderRadius);
116  th,
117  td {
118    border-left: 1px solid @tableBorder;
119  }
120  // Prevent a double border
121  caption + thead tr:first-child th,
122  caption + tbody tr:first-child th,
123  caption + tbody tr:first-child td,
124  colgroup + thead tr:first-child th,
125  colgroup + tbody tr:first-child th,
126  colgroup + tbody tr:first-child td,
127  thead:first-child tr:first-child th,
128  tbody:first-child tr:first-child th,
129  tbody:first-child tr:first-child td {
130    border-top: 0;
131  }
132  // For first th/td in the first row in the first thead or tbody
133  thead:first-child tr:first-child > th:first-child,
134  tbody:first-child tr:first-child > td:first-child,
135  tbody:first-child tr:first-child > th:first-child {
136    .border-top-left-radius(@baseBorderRadius);
137  }
138  // For last th/td in the first row in the first thead or tbody
139  thead:first-child tr:first-child > th:last-child,
140  tbody:first-child tr:first-child > td:last-child,
141  tbody:first-child tr:first-child > th:last-child {
142    .border-top-right-radius(@baseBorderRadius);
143  }
144  // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
145  thead:last-child tr:last-child > th:first-child,
146  tbody:last-child tr:last-child > td:first-child,
147  tbody:last-child tr:last-child > th:first-child,
148  tfoot:last-child tr:last-child > td:first-child,
149  tfoot:last-child tr:last-child > th:first-child {
150    .border-bottom-left-radius(@baseBorderRadius);
151  }
152  // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
153  thead:last-child tr:last-child > th:last-child,
154  tbody:last-child tr:last-child > td:last-child,
155  tbody:last-child tr:last-child > th:last-child,
156  tfoot:last-child tr:last-child > td:last-child,
157  tfoot:last-child tr:last-child > th:last-child {
158    .border-bottom-right-radius(@baseBorderRadius);
159  }
160
161  // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
162  tfoot + tbody:last-child tr:last-child td:first-child {
163    .border-bottom-left-radius(0);
164  }
165  tfoot + tbody:last-child tr:last-child td:last-child {
166    .border-bottom-right-radius(0);
167  }
168
169  // Special fixes to round the left border on the first td/th
170  caption + thead tr:first-child th:first-child,
171  caption + tbody tr:first-child td:first-child,
172  colgroup + thead tr:first-child th:first-child,
173  colgroup + tbody tr:first-child td:first-child {
174    .border-top-left-radius(@baseBorderRadius);
175  }
176  caption + thead tr:first-child th:last-child,
177  caption + tbody tr:first-child td:last-child,
178  colgroup + thead tr:first-child th:last-child,
179  colgroup + tbody tr:first-child td:last-child {
180    .border-top-right-radius(@baseBorderRadius);
181  }
182
183}
184',''})]
185</BOUCLE_graphisme_tableaux>
186
187// Pagination
188// -------------------------
189
190@import "css/pagination.less";
191
192<BOUCLE_graphisme_pagination(spipr_educ){nom = graphisme_pagination} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
193[@paginationBackground: (#PARAMETRE1|?{#PARAMETRE1, "#ffffff"}); // Couleur de fond]
194[@paginationActiveBackground: (#PARAMETRE2|?{#PARAMETRE2, "#dddddd"}); // Couleur de fond de la pagination en cours]
195[@paginationBorder: (#PARAMETRE3|?{#PARAMETRE3, "#f5f5f5"}); // Couleur des bordures]
196[.pagination {(#PARAMETRE5)}]
197</BOUCLE_graphisme_pagination>
198
199
200//  Breadcrumb
201// -------------------------
202
203@import "css/breadcrumbs.less";
204
205<BOUCLE_graphisme_breadcrumb(spipr_educ){nom = graphisme_fil_ariane} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
206.breadcrumb {
207        [background-color: (#PARAMETRE1|?{#PARAMETRE1, "#fefefe"}); // Couleur de fond]
208        .border-radius(@baseBorderRadius);
209        > li {
210        [text-shadow: 0 1px 0 (#PARAMETRE2|?{#PARAMETRE2, "#ffffff"}); // Couleur de l'ombre]
211    > .divider {
212                [color: (#PARAMETRE3|?{#PARAMETRE3, "#cccccc"}); // Couleur du séparateur >]
213    }
214        }
215        > .active {
216                [color: (#PARAMETRE4|?{#PARAMETRE4, "#999999"}); // Couleur de l'élément actif]
217        }
218        [(#PARAMETRE5|?{#PARAMETRE5,''}) // Insertion de règle CSS spécifique pour .breadcrumb]
219}
220</BOUCLE_graphisme_breadcrumb>
221
222// Navbar
223// -------------------------
224@import "css/navbar.less";
225@import "css/responsive-navbar.less";
226
227
228<BOUCLE_graphisme_menu_horizontal(spipr_educ){nom = graphisme_menu_horizontal} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
229@navbarCollapseWidth:             767px;
230@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
231
232[@navbarHeight: (#PARAMETRE10|?{#PARAMETRE10, "38"})px; // Hauteur du menu]
233
234// Devrait logiquement être inutile sous SPIPr-educ qui utilise l'habillage inverse
235@navbarBackgroundHighlight:       #ffffff;
236@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
237@navbarBorder:                    darken(@navbarBackground, 12%);
238
239@navbarText:                      #777;
240@navbarLinkColor:                 #777;
241@navbarLinkColorHover:            @grayDark;
242@navbarLinkColorActive:           @gray;
243@navbarLinkBackgroundHover:       transparent;
244@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
245
246@navbarBrandColor:                @navbarLinkColor;
247
248// Inverted navbar : celle utilisée dans SPIPr-educ
249[@navbarInverseBackground: (#PARAMETRE1|?{#PARAMETRE1, "#111111"}); // Couleur de fond basse]
250[@navbarInverseBackgroundHighlight: (#PARAMETRE2|?{#PARAMETRE2, "#222222"}); // Couleur de fond haute]
251[@navbarInverseBorder: (#PARAMETRE3|?{#PARAMETRE3, "#252525"}); // Couleur de bordure]
252[@navbarInverseText: (#PARAMETRE4|?{#PARAMETRE4, "#999999"}); // Couleur des textes]
253[@navbarInverseLinkColor: (#PARAMETRE5|?{#PARAMETRE5, "#999999"}); // Couleur des liens]
254[@navbarInverseLinkColorHover: (#PARAMETRE6|?{#PARAMETRE6, "#ffffff"}); // Couleur des liens au survol]
255[@navbarInverseLinkColorActive: (#PARAMETRE7|?{#PARAMETRE7, "#ffffff"}); // Couleur des liens du secteur actif]
256[@navbarInverseLinkBackgroundHover: (#PARAMETRE8|?{#PARAMETRE8, "#797979"}); // Couleur de fond des liens au survol]
257[@navbarInverseLinkBackgroundActive: (#PARAMETRE9|?{#PARAMETRE9, "#111111"}); // Couleur de fond du secteur actif]
258
259@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
260@navbarInverseSearchBackgroundFocus:     @white;
261@navbarInverseSearchBorder:              @navbarInverseBackground;
262@navbarInverseSearchPlaceholderColor:    #ccc;
263@navbarInverseBrandColor:                @navbarInverseLinkColor;
264</BOUCLE_graphisme_menu_horizontal>
265
266/* Pour NavBar, en provenance de SPIPr-educ */
267/* surcharge des règles issue de bootstrap + on surcharge les images dans le /img de notre dossier css */
268
269#nav > .navbar-inner {padding-left: 0;padding-right: 0}
270
271[class^="icon-"],
272[class*=" icon-"]{
273        background-image:url("@{iconSpritePath}");
274        margin-top: 3px;
275}
276.icon-white,
277.nav-pills > .active > a > [class^="icon-"],
278.nav-pills > .active > a > [class*=" icon-"],
279.nav-list > .active > a > [class^="icon-"],
280.nav-list > .active > a > [class*=" icon-"],
281.navbar-inverse .nav > .active > a > [class^="icon-"],
282.navbar-inverse .nav > .active > a > [class*=" icon-"],
283.dropdown-menu > li > a:hover > [class^="icon-"],
284.dropdown-menu > li > a:focus > [class^="icon-"],
285.dropdown-menu > li > a:hover > [class*=" icon-"],
286.dropdown-menu > li > a:focus > [class*=" icon-"],
287.dropdown-menu > .active > a > [class^="icon-"],
288.dropdown-menu > .active > a > [class*=" icon-"],
289.dropdown-submenu:hover > a > [class^="icon-"],
290.dropdown-submenu:focus > a > [class^="icon-"],
291.dropdown-submenu:hover > a > [class*=" icon-"],
292.dropdown-submenu:focus > a > [class*=" icon-"]{
293        background-image:url("@{iconWhiteSpritePath}");
294}
295
296.navbar .nav > li > a {
297        padding: 9px 10px;
298}
299.navbar .nav > li.item-picto > a {
300        padding: 9px 15px;
301}
302
303/* icones en sprite css */
304[class^="icon-nav"], [class*=" icon-nav"]{
305    background-image:url("#URL_SITE_SPIP/[(#CHEMIN{css/img/sprite.png})]");
306    height:22px;
307    width:22px;
308    background-repeat:no-repeat;
309    display:inline-block;
310    vertical-align:text-top;
311    margin:0;
312    &:hover{background-color:@grayDark;}
313}
314.item-picto{
315        display:inline-block;
316}
317
318#nav{
319        .menu-container{
320        // border-top:1px solid @blue;
321        // border-bottom:1px solid @blue;
322        .border-radius(0);
323        .nav{
324            margin:0 auto;
325            float:none;
326            .dropdown-menu {
327                min-width: 240px;
328                .border-radius(@baseBorderRadius);
329                .box-shadow(0 2px 2px rgba(0,0,0,.2));
330            }
331            .item{               
332                // li.item{
333                //    text-transform:none;
334                //    background:none;
335                //    list-style: none;
336                //    a{
337                //        display: block;
338                //        &:hover,&:focus,&:active{background-color:@blue;color:@white;}
339                //    }
340                // }
341                &.tout_voir{text-align:right;}
342                // .on,&.on{font-weight: normal;}
343                &.item-picto {
344                    >a{
345                        &.icon-nav-home{
346                            background-position:12px -30px;
347                            &:hover,&:focus,&:active{background-position:12px 9px;}
348                        }
349                        &.icon-nav-calendar{
350                            background-position:-25px -30px;
351                            &:hover,&:focus,&:active{background-position:-27px 9px;}
352                        }
353                        &.icon-nav-contact{
354                            background-position:-187px -30px;
355                            &:hover,&:focus,&:active{background-position:-187px 9px;}
356                        }
357                        &.icon-nav-themes{
358                            background-position:-266px -30px;
359                            &:hover,&:focus,&:active{background-position:-266px 9px;}
360                        }
361                        &.icon-nav-star{
362                            background-position:-228px -30px;
363                            &:hover,&:focus,&:active{background-position:-228px 9px;}
364                        }
365                    }
366                }
367            }
368        }
369    }
370}
371
372// Dropdowns
373// -------------------------
374
375@import "css/dropdowns.less";
376
377<BOUCLE_graphisme_menu_deroulant(spipr_educ){nom = graphisme_menu_deroulant} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
378
379[@dropdownBackground: (#PARAMETRE1|?{#PARAMETRE1, "#ffffff"}); // Couleur de fond des items]
380[@dropdownBorder: (#PARAMETRE2|?{#PARAMETRE2, "#aaaaaa"}); // Couleur de fond de la bordure]
381[@dropdownDividerTop: (#PARAMETRE3|?{#PARAMETRE3, "#e5e5e5"}); // Couleur des lignes de séparation horizontale hautes]
382[@dropdownDividerBottom: (#PARAMETRE4|?{#PARAMETRE4, "#ffffff"}); // Couleur des lignes de séparation horizontale basses]
383[@dropdownLinkColor: (#PARAMETRE5|?{#PARAMETRE5, "#333333"}); // Couleur des items]
384[@dropdownLinkColorHover: (#PARAMETRE6|?{#PARAMETRE6, "#ffffff"}); // Couleur des items]
385[@dropdownLinkColorActive: (#PARAMETRE7|?{#PARAMETRE7, "#ffffff"}); // Couleur des items]
386[@dropdownLinkBackgroundActive: (#PARAMETRE8|?{#PARAMETRE8, "#0088cc"}); // Couleur des items]
387[@dropdownLinkBackgroundHover: (#PARAMETRE9|?{#PARAMETRE9, "#0088cc"}); // Couleur des items]
388[#nav .menu-container .nav .item .on,&.on (#PARAMETRE10|=={non}|?{'{font-weight: normal;}',''})]
389</BOUCLE_graphisme_menu_deroulant>
390
391// Buttons
392// -------------------------
393
394
395@import "css/buttons.less";
396
397@btnBackground:                     @white;
398@btnBackgroundHighlight:            darken(@btnBackground, 10%);
399@btnBorder:                         #bbb;
400
401@btnPrimaryBackground:              @linkColor;
402@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
403
404@btnInfoBackground:                 #5bc0de;
405@btnInfoBackgroundHighlight:        #2f96b4;
406
407@btnSuccessBackground:              #62c462;
408@btnSuccessBackgroundHighlight:     #51a351;
409
410@btnWarningBackground:              lighten(@orange, 15%);
411@btnWarningBackgroundHighlight:     @orange;
412
413@btnDangerBackground:               #ee5f5b;
414@btnDangerBackgroundHighlight:      #bd362f;
415
416@btnInverseBackground:              #444;
417@btnInverseBackgroundHighlight:     @grayDarker;
418
419
420// Forms
421// -------------------------
422
423@inputBackground:               @white;
424@inputBorder:                   #ccc;
425@inputBorderRadius:             @baseBorderRadius;
426@inputDisabledBackground:       @grayLighter;
427@formActionsBackground:         #f5f5f5;
428@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
429
430
431
432
433
434// COMPONENT VARIABLES
435// --------------------------------------------------
436
437
438// Z-index master list
439// -------------------------
440// Used for a bird's eye view of components dependent on the z-axis
441// Try to avoid customizing these :)
442@zindexDropdown:          1000;
443@zindexPopover:           1010;
444@zindexTooltip:           1030;
445@zindexFixedNavbar:       1030;
446@zindexModalBackdrop:     1040;
447@zindexModal:             1050;
448
449
450// Sprite icons path
451// -------------------------
452@iconSpritePath:          "[(#CHEMIN{css/img/glyphicons-halflings.png})]";
453@iconWhiteSpritePath:     "[(#CHEMIN{css/img/glyphicons-halflings-white.png})]";
454
455
456// Input placeholder text color
457// -------------------------
458@placeholderText:         @grayLight;
459
460
461// Hr border color
462// -------------------------
463@hrBorder:                @grayLighter;
464
465
466// Horizontal forms & lists
467// -------------------------
468@horizontalComponentOffset:       180px;
469
470
471// Wells
472// -------------------------
473@wellBackground:                  #f5f5f5;
474
475
476// Hero unit
477// -------------------------
478// A définir directement depuis la partie structure car élément spécifique (voir s'il faut un style commun avec l'éditorial ou non)
479
480@import "css/hero-unit.less";
481
482<BOUCLE_graphisme_editorial_hero(spipr_educ){nom = graphisme_editorial_hero} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
483[@heroUnitBackground: (#PARAMETRE1|?{#PARAMETRE1, "#eeeeee"}); // Couleur de fond]
484[@heroUnitHeadingColor: (#PARAMETRE2|?{#PARAMETRE2, "#0088cc"}); // Couleur de fond des titres]
485[@heroUnitLeadColor: (#PARAMETRE3|?{#PARAMETRE3, "#333333"}); // Couleur de fond des textes]
486.hero-unit .postmeta {clear: both;}
487[#sommaire_article_hero .item, #sommaire_editorial .item {(#PARAMETRE4)}]
488</BOUCLE_graphisme_editorial_hero>
489
490// Form states and alerts
491// -------------------------
492@warningText:             #c09853;
493@warningBackground:       #fcf8e3;
494@warningBorder:           darken(spin(@warningBackground, -10), 3%);
495
496@errorText:               #b94a48;
497@errorBackground:         #f2dede;
498@errorBorder:             darken(spin(@errorBackground, -10), 3%);
499
500@successText:             #468847;
501@successBackground:       #dff0d8;
502@successBorder:           darken(spin(@successBackground, -10), 5%);
503
504@infoText:                #3a87ad;
505@infoBackground:          #d9edf7;
506@infoBorder:              darken(spin(@infoBackground, -10), 7%);
507
508
509// Tooltips and popovers
510// -------------------------
511@tooltipColor:            #fff;
512@tooltipBackground:       #000;
513@tooltipArrowWidth:       5px;
514@tooltipArrowColor:       @tooltipBackground;
515
516@popoverBackground:       #fff;
517@popoverArrowWidth:       10px;
518@popoverArrowColor:       #fff;
519@popoverTitleBackground:  darken(@popoverBackground, 3%);
520
521// Special enhancement for popovers
522@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
523@popoverArrowOuterColor:  rgba(0,0,0,.25);
524
525
526
527// GRID
528// --------------------------------------------------
529
530
531// Default 940px grid
532// -------------------------
533@gridColumns:             12;
534@gridColumnWidth:         60px;
535@gridGutterWidth:         20px;
536@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
537
538// 1200px min
539@gridColumnWidth1200:     70px;
540@gridGutterWidth1200:     30px;
541@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
542
543// 768px-979px
544@gridColumnWidth768:      42px;
545@gridGutterWidth768:      20px;
546@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
547
548
549// Fluid grid
550// -------------------------
551@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
552@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
553
554// 1200px min
555@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
556@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
557
558// 768px-979px
559@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
560@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
561
562
563
564
565/* Quelques éléments spécifiques à SPIPr */
566
567.header {position: relative;}
568.header .spip_logos {float:left;margin: @paddingLarge;margin-left: 0;margin-top:0;}
569.header .accueil {}
570#logo_site_spip {line-height: 1em;}
571#slogan_site_spip {display: block;}
572
573.header .formulaire_menu_lang {width: 100%;}
574.header .formulaire_menu_lang select {width: 100%;}
575
576
577
578.formulaire_recherche,.secondary .formulaire_recherche {padding-right: 42px+2*14px;} /* provisionner la largeur du bouton+padding sur le input.search */
579.formulaire_recherche form .input-append {width:100%;}
580.formulaire_recherche form input.search {width:100%;}
581
582.footer {
583        .clearfix;
584        margin-top:4em;
585        padding-top: 2em;
586        border-top:2px solid;
587        padding-bottom: 2em;
588        margin-bottom:0;
589        text-align: left;
590        position:relative;
591        .colophon {padding-right: 100px}
592        .generator {position: absolute;top:2em;right:0;max-width: 100px;}
593}
594
595.cartouche {margin-bottom: @emLineHeight;}
596.content.primary {min-height: 320px;}
597.content {
598  .postmeta .tags .inline {display: inline;}
599}
600
601.icone{
602    display: inline-block;
603    vertical-align: middle;
604    padding:5px;
605    width: 30px;
606    height: 30px;
607    .border-radius(20px);
608    background-color: @blue ;
609    &:hover,&:active,&:focus{background-color: @blue ;}
610}
611
612
613[(#REM) Styles du carousel]
614//
615// Carousel
616// --------------------------------------------------
617
618@import "css/carousel.less";
619
620<BOUCLE_graphisme_carousel(spipr_educ){nom = graphisme_carousel} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
621/* Carousel base class */
622.carousel{
623    position: relative;
624    font-size:1.1em;
625    margin:0 0 1em 0;
626    padding:0 0 0 0;
627        [border: 1px solid (#PARAMETRE3|?{#PARAMETRE3, "#eeeeee"}); // Couleur de la bordure]
628    height:240px;
629        [color: (#PARAMETRE2|?{#PARAMETRE2, "#333333"}); // Couleur des textes]
630        [background-color: (#PARAMETRE1|?{#PARAMETRE1, "#eeeeee"}); // Couleur de fond]
631    .carousel-inner {
632        overflow: hidden;
633        width: 100%;
634        position: relative;   
635        > .item {
636            strong.h3-like{
637                                font-weight:normal;
638                                a span.titre {
639                                        [color: (#PARAMETRE4|?{#PARAMETRE4, "#0088cc"}); // Couleur du titre]
640                                }
641                                > span.spip_logo.spip_logos {
642                                        &, span.img {float:right; margin-right:0; padding-right:0;}
643                                }
644                        }
645            overflow:auto;
646            display: none;
647            position: relative;
648            .transition(.6s ease-in-out left);
649            // Account for jankitude on images
650            > img,
651            > a > img {
652                display: block;
653            }
654            article{
655                width:100%;
656                height:240px;
657                overflow:hidden;
658                margin-bottom:0;
659                .introduction{padding:0 1em 1em 2em;}
660                a{
661                    display:block;
662                    padding:0 0 0 1em ;
663                    font-size:1.5em;
664                    font-weight:bold;
665                    line-height:1em;
666                    &:hover{text-decoration:none;}
667                    .spip_logos{margin:0;}
668                    .titre{display: block;padding-top:.8em;}
669                }
670            }           
671        }
672        > .active,
673        > .next,
674        > .prev { display: block; }
675        > .active {
676            left: 0;
677        }
678        > .next,
679        > .prev {
680            position: absolute;
681            top: 0;
682            width: 100%;
683        }
684        > .next {
685            left: 100%;
686        }
687        > .prev {
688            left: -100%;
689        }
690        > .next.left,
691        > .prev.right {
692            left: 0;
693        }
694        > .active.left {
695            left: -100%;
696        }
697        > .active.right {
698            left: 100%;
699        }
700    }
701    // Left/right controls for nav
702    // ---------------------------
703    .carousel-control {
704                z-index:1100;
705                [color: (#PARAMETRE5|?{#PARAMETRE5, "#ffffff"}); // Couleur des flèches gauche et droite de navigation]
706        // background-color: @color2;
707                [background-color: (#PARAMETRE6|?{#PARAMETRE6, "#bbbbbb"}); // Couleur de fond des flèches de navigation]
708        // &:hover,&:focus{background-color: darken(@color1,10%);}
709                [&:hover,&:focus{color: (#PARAMETRE10|?{#PARAMETRE10, "#ffffff"});} // Couleur des flèches de navigation au survol]
710                [&:hover,&:focus{background-color: (#PARAMETRE7|?{#PARAMETRE7, "#aaaaaa"});} // Couleur de fond des flèches de navigation au survol]
711        position: absolute;
712        bottom: 5px;
713        top:inherit;
714        left: 5px;
715        height:30px;
716        width:30px;
717        margin: 0;
718        padding: 8px 12px 12px 8px;
719        font-size:30px;
720        font-family:helvetica,arial,sans-serif;
721        font-weight: 100;
722        line-height:1;
723        text-align: center;
724        border: 0;
725        .border-radius(30px);
726        .opacity(0);
727        transition:opacity 0.3s ease-in-out  0.2s;
728        // Reposition the right one
729        &.right {
730          left: auto;
731          right: 5px;
732          padding: 8px 8px 12px 12px;
733        }
734        // Hover/focus state
735        &:hover,&:focus {
736            text-decoration: none;
737        }
738    }
739    ol.carousel-indicators,ul.carousel-stop{
740        display:block;
741                z-index: 5;
742        margin: 0;
743        list-style: none;
744        li{
745            // color: lighten(@color2,5%);
746                        [color: (#PARAMETRE8|?{#PARAMETRE8, "#bbbbbb"}); // Couleur des points indicateurs]
747            cursor: pointer;
748            display: inline;
749            text-indent: inherit;
750            height: auto;
751            width: auto;
752            background-color: transparent !important;
753            float: none;
754            // &:hover,&:active,&:focus{color: darken(@color1,20%);background: none;}
755                        &:hover,&:active,&:focus{
756                                color: @red; // Inutile ?
757                                background: none;
758                        }
759        }
760    }
761        .container-carousel-indicators {
762                display:block;
763                position:absolute;
764                bottom:18px;
765                width:100%;
766                height:24px;
767        }
768<BOUCLE_graphisme_carousel_2(spipr_educ){nom = graphisme_carousel_2} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
769    ol.carousel-indicators{
770        position: absolute;
771        left: 46%;
772        li{
773            font-size:1.5em;
774            margin:0 5px 0 5px;
775            padding: 0 0 0 0;
776            display: inline-block;
777            .border-radius(5px);
778            // &.active{color: lighten(@color1,10%);}
779                        [&.active{color: (#PARAMETRE1|?{#PARAMETRE1, "#dddddd"});} // Couleur du point de l'indicateur actif]
780        }
781    }
782    .carousel-stop{
783        position: absolute;
784        bottom:4px;
785        left:38%;
786        margin-left: 0;
787        margin-bottom: 0;
788        font-family: helvetica,arial,sans-serif;
789        li{
790            font-size:1.5em;
791        }
792    }
793    &:hover{
794        .carousel-indicators,.carousel-stop{
795            li{
796                // color: @color2;
797                                color: #bbb;
798                // &.active,&.active:hover{color: @color1;}
799                                [&.active,&.active:hover {color: (#PARAMETRE2|?{#PARAMETRE2, "#0088cc"});} // Couleur du point de l'indicateur actif lors du survol du bloc]
800                // &:hover,&:active,&:focus{color: darken(@color1,10%);}
801</BOUCLE_graphisme_carousel_2>
802                                [&:hover,&:active,&:focus{color: (#PARAMETRE9|?{#PARAMETRE9, "#005577"});} // Couleur des point de l'indicateur lors du survol du bloc]
803            }
804        }
805        .carousel-control {
806            .opacity(70);
807            transition: opacity 0.3s ease-in-out  0;
808        }
809    }
810        <BOUCLE_graphisme_carousel_css(spipr_educ){nom = graphisme_carousel_2} {type = graphisme} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
811    #PARAMETRE3
812        </BOUCLE_graphisme_carousel_css>
813}
814</BOUCLE_graphisme_carousel>
815
816// Des styles pour le boutons de retour au haut de page en provenance de SPIPr-Dane
817// -----------------------------------------------------
818// On définira plus tard les couleurs en s'appuyant sur celles du site (définies précédemment)
819#backtotop {
820                display:none;
821                bottom:20px;
822                right:10px;
823                height:40px;
824                padding-top:10px;
825                width:50px;
826                text-align:center;
827                position:fixed;
828                z-index:1;
829                color:#fafafa;
830                font-size:30px;
831                background-color:#3b597a;
832                cursor:pointer;
833                font-family:helvetica,arial,sans-serif;
834                -webkit-border-radius:25px;
835                -moz-border-radius:25px;
836                border-radius:25px;
837                opacity:0.6;
838                filter:alpha(opacity=60);
839}
840#backtotop:hover {
841        opacity:1;
842        filter:alpha(opacity=100);
843        background-color:#d13827;
844}
845
846
847[(#REM) Gestion des layoutgala]
848
849[(#REM) Gestion du layout pour une largeur comprise entre 980 et 1200px]
850<BOUCLE_layout_grand(SPIPR_EDUC){nom = layout_grand} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
851[@import "css/layoutgala/(#PARAMETRE1)";]
852[#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth,@gridGutterWidth);
853</BOUCLE_layout_grand>
854
855[(#REM) Gestion du layout pour une largeur supérieure à 1200px]
856<BOUCLE_layout1200(SPIPR_EDUC){nom = layout_1200} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
857[@import "css/layoutgala/(#PARAMETRE1)";]
858@media (min-width: 1200px) {
859[#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth1200,@gridGutterWidth1200);
860}
861</BOUCLE_layout1200>
862
863[(#REM) Gestion du layout pour une largeur comprise entre 768 et 979px]
864<BOUCLE_layout_moyen(SPIPR_EDUC){nom = layout_moyen} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
865[@import "css/layoutgala/(#PARAMETRE1)";]
866@media (min-width: 768px) and (max-width: 979px) {
867[#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth768,@gridGutterWidth768);
868}
869</BOUCLE_layout_moyen>
870
871[(#REM) Gestion du layout pour une largeur inférieure à 768px]
872<BOUCLE_layout_petit(SPIPR_EDUC){nom = layout_petit} {nom_sauvegarde = en_cours_d_utilisation_SPIPr}>
873[@import "css/layoutgala/(#PARAMETRE1)";]
874@media (max-width: 767px) {
875[#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth768,@gridGutterWidth768);
876}
877</BOUCLE_layout_petit>
878
879[(#REM) Pour une largeur inférieure à 450 pixels, on verticalise tout : colonnes secondaireet tertiaire en pleine largeur, l'une en-dessous de l'autre.
880On agrandit par ailleurs la hauteur du carousel, l'image utilisant toute la hauteur initialement disponible.]
881@media (max-width: 450px) {
882        #aside {float:none;width:100%;}
883        #extra {float:none;width:100%;}
884        #aside .carousel,#aside .carousel .carousel-inner .item article, #content .carousel,#content .carousel .carousel-inner .item article, #extra .carousel,#extra .carousel .carousel-inner .item article {height:400px;}
885}
886
887[(#REM) Intégrer ici le module de marges : tout d'abord un test pour savoir s'il en faut, ensuite extraire les CSS nécessaires]
888<BOUCLE_marges(SPIPR_EDUC){nom = graphisme_marges} {nom_sauvegarde = en_cours_d_utilisation_SPIPr} {parametre1 = oui}>
889<?php
890        include_spip('inc/spipr_educ_gestion_margin');
891        echo spipr_educ_gestion_margin();
892?>
893</BOUCLE_marges>
894
895[(#REM) Règles CSS ou LESS spécifiques aux formulaires]
896<BOUCLE_formulaires(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = graphisme_formulaires}>
897        #formulaire_contact, div#formulaire_forum, div#formulaire_inscription, .formulaire_login, .formulaire_spip {
898                textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
899                        [color:(#PARAMETRE2);]
900                }
901                &, & p.boutons, & fieldset, & legend, & label, select,
902                {
903                        &, & p {
904                                [background-color:(#PARAMETRE1);]
905                                [color:(#PARAMETRE2);]
906                        }
907                }
908        }
909        #formulaire_contact, div#formulaire_forum, div#formulaire_inscription, .formulaire_login {
910                [border:1px solid (#PARAMETRE3);]
911                [(#PARAMETRE4)]
912        }
913</BOUCLE_formulaires>
914[(#REM) Pour que le formulaire de login ne déborde pas de sa colonne dans le cas d'une noisette accès restreint]
915.formulaire_login form input.text, .formulaire_login form input.password {width:80%; max-width:320px;}
916
917[(#REM) Règles CSS ou LESS spécifiques aux blocs particuliers]
918
919        #SET{blocs_specifiques,#ARRAY{0,'sommaire_derniers_articles',1,'sommaire_dernieres_breves',2,'sommaire_articles_syndiques',3,'sommaire_evenements',4,'sommaire_forums',5,'rubrique_articles',6,'rubrique_breves',7,'rubrique_sites',8,'rubrique_evenements',9,'article_evenements',10,'article_meme_rubrique',11,'breve_evenements',12,'breve_meme_rubrique',13,'site_articles_syndiques',14,'site_autres_sites',15,'site_evenements',16,'auteur_articles',17,'auteur_autres_auteurs',18,'auteur_evenements',19,'autre_evenements',20,'sommaire_nuage'}}
920
921        <BOUCLE_css_blocs_specifiques(DATA){source table,#GET{blocs_specifiques}}>
922                #SET{valeur_bloc,#VALEUR}
923                <BOUCLE_bloc_specifique(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom=#GET{valeur_bloc}}>
924                        [#(#GET{valeur_bloc}){#PARAMETRE6}]
925                </BOUCLE_bloc_specifique>
926        </BOUCLE_css_blocs_specifiques>
927       
928        [(#REM) On passe au menu vertical]
929        <BOUCLE_menu_vertical(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = graphisme_menu_vertical}>
930                #sommaire_menu_navigation.well,
931                #rubrique_menu_navigation.well,
932                #article_menu_navigation.well,
933                #auteur_menu_navigation.well,
934                #autre_menu_navigation.well,
935                #breve_menu_navigation.well,
936                #site_menu_navigation.well
937                {
938                        [border-color:(#PARAMETRE1);]
939                        [background-color:(#PARAMETRE2);]
940                        [color:(#PARAMETRE3);]
941                        a {
942                                [color:(#PARAMETRE4);]
943                                &:hover {
944                                        [color:(#PARAMETRE5);]
945                                        [background-color:(#PARAMETRE6);]
946                                }
947                        }
948                        li.active a.on {
949                                        [color:(#PARAMETRE7);]
950                                        [background-color:(#PARAMETRE8|?{#PARAMETRE8, "@linkColor"});]
951                        }
952                        #PARAMETRE9
953                }
954        </BOUCLE_menu_vertical>
955
956[(#REM) Règles CSS ou LESS concernant des blocs personnels]
957        #SET{blocs_accessibilite,#ARRAY{0,'sommaire_dyslexie',1,'rubrique_dyslexie',2,'article_dyslexie',3,'breve_dyslexie',4,'site_dyslexie',5,'auteur_dyslexie',6,'autre_dyslexie'}}
958       
959        <BOUCLE_css_blocs_accessibilite(DATA){source table,#GET{blocs_accessibilite}}>
960                #SET{valeur_bloc,#VALEUR}
961                <BOUCLE_css_accessibilite(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom=#GET{valeur_bloc}}>
962                        [div#(#GET{valeur_bloc}){
963                                [background-color:(#PARAMETRE5);]
964                                [&, legend {
965                                        color:(#PARAMETRE6);
966                                }]
967                                [border:1px solid (#PARAMETRE7);]
968                                #PARAMETRE8
969                        }]
970                </BOUCLE_css_accessibilite>
971        </BOUCLE_css_blocs_accessibilite>
972       
973       
974        [(#REM) Règles CSS ou LESS concernant des blocs personnels]
975        #SET{blocs_personnels,#ARRAY{0,'sommaire_bloc_perso_1',1,'sommaire_bloc_perso_2',2,'sommaire_bloc_perso_3',3,'article_bloc_perso_1',4,'article_bloc_perso_2',5,'article_bloc_perso_3',6,'rubrique_bloc_perso_1',7,'rubrique_bloc_perso_2',8,'rubrique_bloc_perso_3',9,'breve_bloc_perso_1',10,'breve_bloc_perso_2',11,'breve_bloc_perso_3',12,'site_bloc_perso_1',13,'site_bloc_perso_2',14,'site_bloc_perso_3',15,'auteur_bloc_perso_1',16,'auteur_bloc_perso_2',17,'auteur_bloc_perso_3',18,'autre_bloc_perso_1',19,'autre_bloc_perso_2',20,'autre_bloc_perso_3'}}
976
977        <BOUCLE_css_blocs_personnels(DATA){source table,#GET{blocs_personnels}}>
978                #SET{valeur_bloc,#VALEUR}
979                <BOUCLE_css_personnels(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom=#GET{valeur_bloc}}{type=graphisme}>
980                        [div#(#GET{valeur_bloc}){
981                                [background-color:(#PARAMETRE1);]
982                                [border:1px solid (#PARAMETRE2);]
983                                h2.h2 {
984                                        [color:(#PARAMETRE3);]
985                                        [background-color:(#PARAMETRE4);]
986                                }
987                                [.item {color:(#PARAMETRE5);}]
988                                #PARAMETRE6
989                        }]
990                </BOUCLE_css_personnels>
991        </BOUCLE_css_blocs_personnels>
992
993[(#REM) Images de fond]
994#SET{les_secteurs_de_fond, #ARRAY{fond_ecran,body,fond_page,.container,fond_entete,#header,fond_barre_menu,#nav .navbar-inner,fond_breadcrumb,ul.breadcrumb,fond_pied,#footer}}
995<BOUCLE_image_fond(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom IN fond_ecran,fond_page,fond_entete,fond_barre_menu,fond_breadcrumb,fond_pied}>
996[(#PARAMETRE1|?{
997[(#GET{les_secteurs_de_fond}|table_valeur{#NOM}) {
998        [background-image : url(#URL_SITE_SPIP/(#EVAL{_DIR_IMG})spipr_educ/#PARAMETRE1)];
999        background-position : [(#PARAMETRE5|?{#PARAMETRE5,#PARAMETRE4})] [(#PARAMETRE3|?{#PARAMETRE3,#PARAMETRE2})];
1000        background-repeat : #PARAMETRE6;
1001        background-attachment : #PARAMETRE7;
1002}]
1003, ""})]
1004</BOUCLE_image_fond>
1005
1006[(#REM) Styles pour le bloc de prise en charge de la police dyslexie et l'interlignage double]
1007.dyslexie {
1008        &, legend, code, pre, .spip_code, input, button, select, textarea, .navbar-search .search-query, #fancybox-title, .panorama-panel h2, .panorama-title, h2.panorama-carte a, h2.panorama-panier a, .documents-lieu h2, .portfolio-container .portfolio-title, h1, .h1, .h1-like, h2, .h2, .h2-like, h3, .h3, .h3-like, h4, .h4, .h4-like, h5, .h5, .h5-like, h6, .h6, .h6-like, .secondary h1, .secondary .h1, .secondary .h1-like, .secondary h2, .secondary .h2, .secondary .h2-like, .secondary h3, .secondary .h3, .secondary .h3-like, .secondary h4, .secondary .h4, .secondary .h4-like, .secondary h5, .secondary .h5, .secondary .h5-like, .ui-widget button, .ui-widget,
1009        {
1010                font-family : opendyslexic, arial;
1011        }
1012}
1013.accessibilite_interlignage {
1014        &, h1 small, .h1 small, .h1-like small, h2 small, .h2 small, .h2-like small, h3 small, .h3 small, .h3-like small, h4 small, .h4 small, .h4-like small, h5 small, .h5 small, .h5-like small, h6 small, .h6 small, .h6-like small, blockquote small, .lead, #descriptif_site_spip, .hero-unit, div#content p,
1015        {
1016                line-height:2;
1017        }
1018}
1019ul#liste_dyslexie, ul#liste_interlignage {
1020        list-style: none;
1021        li {
1022                input {float:left; width:15%;}
1023                label {float:left; width:80%;}
1024        }
1025}
1026
1027[(#REM) Style du bloc des logos des sites partenaires]
1028<BOUCLE_bloc_logos(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = graphisme_bloc_logos} {type = graphisme}>
1029#bloc_logos {
1030        [background-color:(#PARAMETRE7);]
1031        [border:1px solid (#PARAMETRE8);]
1032        [h2.h2 {
1033                color:(#PARAMETRE6);
1034        }]
1035        ul {
1036                text-align:center;
1037                padding-bottom:0;
1038                margin-bottom:0;
1039                li {padding:5%;}
1040                a img {
1041                        [min-height:(#PARAMETRE3)px;]
1042                        [min-width:(#PARAMETRE1)px;]
1043                        max-width:100%;
1044                }
1045        }
1046        #PARAMETRE9
1047}
1048</BOUCLE_bloc_logos>
1049
1050[(#REM) Style du bloc des liens des sites partenaires]
1051<BOUCLE_bloc_liens_partenaires(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = graphisme_liens_partenaires} {type = graphisme}>
1052#liens_partenaires {
1053        [(#PARAMETRE8|=={oui}|?{'padding:6px;',''})]
1054        [background-color:(#PARAMETRE3);]
1055        [border:1px solid (#PARAMETRE4);]
1056        [h2.h2 {
1057                color:(#PARAMETRE2);
1058        }]
1059        [color:(#PARAMETRE5);]
1060        a {
1061                [(#PARAMETRE8|=={oui}|?{'margin:0 10px;',''})]
1062                [color:(#PARAMETRE5);]
1063                &:hover {
1064                        [color:(#PARAMETRE6);]
1065                        [background-color:(#PARAMETRE9);]
1066                }
1067        }
1068        ul {
1069                padding-left:10px;
1070                padding-right:10px;
1071                a {
1072                        [color:(#PARAMETRE5);]
1073                        &:hover {
1074                                [color:(#PARAMETRE6);]
1075                        }
1076                }
1077        }
1078        #PARAMETRE7
1079}
1080</BOUCLE_bloc_liens_partenaires>
1081
1082[(#REM) Style du bloc du compteur graphique du sommaire]
1083<BOUCLE_sommaire_compteur(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = sommaire_compteur} {type = graphisme}>
1084#compteurgraphiquetotalspipreduc.list {
1085        [background-color:(#PARAMETRE1);]
1086        [border:1px solid (#PARAMETRE2);]
1087        h2.h2{
1088                [color:(#PARAMETRE3);]
1089                [background-color:(#PARAMETRE4);]
1090        }
1091        #PARAMETRE5
1092}
1093</BOUCLE_sommaire_compteur>
1094
1095[(#REM) Style du bloc du compteur graphique des articles]
1096<BOUCLE_article_compteur(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = article_compteur} {type = graphisme}>
1097#compteurgraphiquespipreduc.list {
1098        [background-color:(#PARAMETRE1);]
1099        [border:1px solid (#PARAMETRE2);]
1100        h2.h2{
1101                [color:(#PARAMETRE3);]
1102                [background-color:(#PARAMETRE4);]
1103        }
1104        #PARAMETRE5
1105}
1106</BOUCLE_article_compteur>
1107
1108[(#REM) Ajouter un margin en-dessous du bloc d'accessibilité]
1109#sommaire_dyslexie,#article_dyslexie,#rubrique_dyslexie,#breve_dyslexie,#auteur_dyslexie,#site_dyslexie,#autre_dyslexie {margin-bottom:30px;}
1110
1111[(#REM) Un peu d'espace sous les liens de traduction]
1112#article_cartouche div.postmeta {margin-bottom:16px;}
1113
1114[(#REM) Open-dys, Generated by Font Squirrel (https://www.fontsquirrel.com) on June 20, 2016]
1115
1116@font-face {
1117    font-family: 'opendyslexic';
1118    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-bolditalic-webfont.eot})]');
1119    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-bolditalic-webfont.eot})?#iefix]') format('embedded-opentype'),
1120         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-bolditalic-webfont.woff2})]') format('woff2'),
1121         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-bolditalic-webfont.woff})]') format('woff'),
1122         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-bolditalic-webfont.ttf})]') format('truetype'),
1123         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-bolditalic-webfont.svg})#opendyslexicaltabold_italic]') format('svg');
1124    font-weight: 700;
1125    font-style: italic;
1126}
1127
1128@font-face {
1129    font-family: 'opendyslexic';
1130    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.eot})]');
1131    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.eot})?#iefix]') format('embedded-opentype'),
1132         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.woff2})]') format('woff2'),
1133         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.woff})]') format('woff'),
1134         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.ttf})]') format('truetype'),
1135         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.svg})#opendyslexicaltaitalic]') format('svg');
1136    font-weight: 300;
1137    font-style: italic;
1138}
1139
1140@font-face {
1141    font-family: 'opendyslexic';
1142    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.eot})]');
1143    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.eot})?#iefix]') format('embedded-opentype'),
1144         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.woff2})]') format('woff2'),
1145         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.woff})]') format('woff'),
1146         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.ttf})]') format('truetype'),
1147         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.svg})#opendyslexicaltaregular]') format('svg');
1148    font-weight: 300;
1149    font-style: normal;
1150}
1151
1152
1153@font-face {
1154    font-family: 'opendyslexic';
1155    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.eot})]');
1156    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.eot})?#iefix']) format('embedded-opentype'),
1157         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.woff2})]') format('woff2'),
1158         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.woff})]') format('woff'),
1159         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.ttf})]') format('truetype'),
1160         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.svg})#opendyslexicaltaregular]') format('svg');
1161    font-weight:normal;
1162    font-style:normal;
1163    font-variant:normal;
1164}
1165
1166@font-face {
1167    font-family: 'opendyslexic';
1168    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.eot})]');
1169    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.eot})?#iefix]') format('embedded-opentype'),
1170         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.woff2})]') format('woff2'),
1171         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.woff})]') format('woff'),
1172         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.ttf})]') format('truetype'),
1173         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-italic-webfont.svg})#opendyslexicaltaitalic]') format('svg');
1174    font-weight: 400;
1175    font-style: italic;
1176}
1177
1178@font-face {
1179    font-family: 'opendyslexic';
1180    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.eot})]');
1181    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.eot})?#iefix]') format('embedded-opentype'),
1182         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.woff2})]') format('woff2'),
1183         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.woff})]') format('woff'),
1184         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.ttf})]') format('truetype'),
1185         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicalta-regular-webfont.svg})#opendyslexicaltaregular]') format('svg');
1186    font-weight: 400;
1187    font-style: normal;
1188}
1189
1190@font-face {
1191    font-family: 'opendyslexic';
1192    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-bolditalic-webfont.eot})]');
1193    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-bolditalic-webfont.eot})?#iefix]') format('embedded-opentype'),
1194         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-bolditalic-webfont.woff2})]') format('woff2'),
1195         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-bolditalic-webfont.woff})]') format('woff'),
1196         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-bolditalic-webfont.ttf})]') format('truetype'),
1197         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-bolditalic-webfont.svg})#opendyslexicbold_italic]') format('svg');
1198    font-weight: 700;
1199    font-style: italic;
1200}
1201
1202
1203@font-face {
1204    font-family: 'opendyslexic';
1205    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.eot})]');
1206    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.eot})?#iefix]') format('embedded-opentype'),
1207         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.woff2})]') format('woff2'),
1208         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.woff})]') format('woff'),
1209         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.ttf})]') format('truetype'),
1210         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.svg})#opendyslexicitalic]') format('svg');
1211    font-weight: 300;
1212    font-style: italic;
1213}
1214
1215@font-face {
1216    font-family: 'opendyslexic';
1217    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.eot})]');
1218    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.eot})?#iefix]') format('embedded-opentype'),
1219         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.woff2})]') format('woff2'),
1220         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.woff})]') format('woff'),
1221         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.ttf})]') format('truetype'),
1222         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.svg})#opendyslexicmonoregular]') format('svg');
1223    font-weight: 300;
1224    font-style: normal;
1225}
1226
1227@font-face {
1228    font-family: 'opendyslexic';
1229    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-regular-webfont.eot})]');
1230    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-regular-webfont.eot})?#iefix]') format('embedded-opentype'),
1231         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-regular-webfont.woff2})]') format('woff2'),
1232         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-regular-webfont.woff})]') format('woff'),
1233         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-regular-webfont.ttf})]') format('truetype'),
1234         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-regular-webfont.svg})#opendyslexicregular]') format('svg');
1235    font-weight: 300;
1236    font-style: normal;
1237
1238}
1239
1240@font-face {
1241    font-family: 'opendyslexic';
1242    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.eot})]');
1243    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.eot})?#iefix]') format('embedded-opentype'),
1244         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.woff2})]') format('woff2'),
1245         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.woff})]') format('woff'),
1246         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.ttf})]') format('truetype'),
1247                 url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexic-italic-webfont.svg})#opendyslexicitalic]') format('svg');
1248    font-weight: 400;
1249    font-style: italic;
1250}
1251
1252@font-face {
1253    font-family: 'opendyslexic';
1254    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.eot})]');
1255    src: url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.eot})?#iefix]') format('embedded-opentype'),
1256         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.woff2})]') format('woff2'),
1257         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.woff})]') format('woff'),
1258         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.ttf})]') format('truetype'),
1259         url('[#URL_SITE_SPIP/(#CHEMIN{css/font/opendyslexicmono-regular-webfont.svg})#opendyslexicmonoregular]') format('svg');
1260    font-weight: 400;
1261    font-style: normal;
1262}
1263
1264[(#REM) Contraindre le fil Twitter dans sa colonne sous Safari]
1265.twitter-timeline {
1266        width:100vw !important;
1267}
1268
1269[(#REM) Ajout des CSS définies pour le bloc des compétences numériques]
1270<BOUCLE_article_competences_crcn(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = article_competences_crcn} {type = bloc de base}>
1271[(#PARAMETRE7)]
1272</BOUCLE_article_competences_crcn>
1273
1274[(#REM) Règles CSS ou LESS spécifiques, toujours en dernier]
1275<BOUCLE_css_perso(SPIPR_EDUC){nom_sauvegarde = en_cours_d_utilisation_SPIPr}{nom = graphisme_css}>
1276#PARAMETRE1
1277</BOUCLE_css_perso>
Note: See TracBrowser for help on using the repository browser.