source: spip-zone/_squelettes_/spipr-educ/trunk/css/spipr.educ.less @ 113889

Last change on this file since 113889 was 113889, checked in by dominique.lepaisant@…, 20 months ago

Compatiblite avec le plugin Menus

  • Property svn:executable set to *
File size: 37.0 KB
Line 
1@import "css/variables.less";
2@import "css/mixins.less";
3
4body{
5    background-color:@white;
6    font-family:@sansFontFamily;
7    text-rendering: optimizeLegibility;
8    text-rendering: geometricPrecision;
9    font-smooth: always;
10    font-smoothing: antialiased;
11    -moz-osx-font-smoothing: grayscale;
12    -moz-font-smoothing: antialiased;
13    -webkit-font-smoothing: antialiased;
14    -webkit-font-smoothing: subpixel-antialiased;
15    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
16    .spip-admin-bloc,.spip-admin-float{
17        right:0%;
18    } 
19}
20a{
21    &:hover,&:focus,&:active{
22        text-decoration:underline;
23        background-color:transparent;
24        outline:none;
25    }
26    // Hover/focus state, but only for links
27    &.label,&.badge{
28        color:@white;
29        vertical-align:baseline;
30        white-space:inherit;
31        background-color:@color2;
32    }
33    &.label:hover,&.label:focus,&.badge:hover,&.badge:focus{
34        background-color:lighten(@color2,10%);
35    }
36}
37#content iframe{margin:1em auto;display:block;}
38
39select,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"],
40input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{
41    color: @grayDark;
42    // Focus state
43    &:focus{
44        border-color:lighten(@color2, 25%);
45        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
46    }
47}
48h2,h2.h2,.secondary h2.h2,h1,.surtitre,.soustitre{
49    font-family:@sansFontFamily;
50    color:@black;
51    font-weight: normal;
52    letter-spacing: .1em;
53}
54h1 small, .h1 small, .h1-like small{color:@grayDark;}
55h2.h2 small,.secondary h2.h2 small{display:inline;}
56h3.spip{
57    background-color:white;
58    padding:0.5em 0.5em 0.4em;
59    margin:1em 0 .5em 0;
60    font-family:@sansFontFamily;
61    font-size:1.8em;
62    font-weight: normal;
63}
64table.spip{
65    thead{
66        tr{
67            &.row_first{
68                border-left:1px solid @tableBorder;
69                border-right:1px solid @tableBorder;
70                th{
71                    color:@color3;
72                    text-align: left;
73                    vertical-align: middle;
74                }
75            }
76        }
77    }
78    tr{
79        border-left:1px solid @tableBorder;
80        border-right:1px solid @tableBorder;
81        &.row_first{
82            border-left:none;
83            border-right:none;
84        }
85        &:first-child{
86            border-top:1px solid @tableBorder;
87            td,th{border-top:none;}
88        }
89        &:last-child{
90            border-bottom:1px solid @tableBorder;
91        }
92        td,th{
93            padding:.3em .6em;
94            &.numeric{ 
95                color:@red;
96                text-align:center;
97            }
98        }
99    }
100}
101ol.spip ol.spip{margin-bottom:.5em;}
102/* surcharge des règles issue de bootstrap + on surcharge les images dans le /img de notre dossier css */
103[class^="icon-"],
104[class*=" icon-"]{
105  background-image:url("img/@{iconSpritePath}");
106  margin-top: 3px;
107}
108.icon-white,
109.nav-pills > .active > a > [class^="icon-"],
110.nav-pills > .active > a > [class*=" icon-"],
111.nav-list > .active > a > [class^="icon-"],
112.nav-list > .active > a > [class*=" icon-"],
113.navbar-inverse .nav > .active > a > [class^="icon-"],
114.navbar-inverse .nav > .active > a > [class*=" icon-"],
115.dropdown-menu > li > a:hover > [class^="icon-"],
116.dropdown-menu > li > a:focus > [class^="icon-"],
117.dropdown-menu > li > a:hover > [class*=" icon-"],
118.dropdown-menu > li > a:focus > [class*=" icon-"],
119.dropdown-menu > .active > a > [class^="icon-"],
120.dropdown-menu > .active > a > [class*=" icon-"],
121.dropdown-submenu:hover > a > [class^="icon-"],
122.dropdown-submenu:focus > a > [class^="icon-"],
123.dropdown-submenu:hover > a > [class*=" icon-"],
124.dropdown-submenu:focus > a > [class*=" icon-"]{
125    background-image:url("img/@{iconWhiteSpritePath}");
126}
127.navbar .nav > li > a {padding: 9px 10px;}
128.navbar .nav > li.item-picto > a {padding: 9px 15px;}
129/* icones en sprite css */
130[class^="icon-nav"], [class*=" icon-nav"]{
131    background-image:url("img/sprite.png");
132    height:22px;
133    width:22px;
134    background-repeat:no-repeat;
135    display:inline-block;
136    vertical-align:text-top; 
137    margin:0;
138    &:hover{background-color:@grayDark;}
139}
140.icone{
141    display: inline-block;
142    vertical-align: middle;
143    padding:5px;
144    width: 30px;
145    height: 30px;
146    .border-radius(20px);
147    background-color: @color2 ;
148    &:hover,&:active,&:focus{background-color: @color2 ;}
149}
150
151/* blocs de la page */
152
153#header{
154    border-bottom:1px solid @white;
155    position:relative;
156    text-align:left;
157    .container{
158        position:relative;
159    }
160    background-color:@white;
161    header{
162        h1#logo_site_spip{
163            letter-spacing: 2px;
164            font-family:@sansFontFamily;
165            line-height:1em;
166            margin:.5em 0;
167            font-size:2.6em;
168            color:@color2;
169            .spip_logos{
170                margin:0 25px 0 0;
171            }
172            #nom_site_spip{
173                margin-top: 0;
174            }
175            #slogan_site_spip{
176                font-size:60%;
177                display: block;
178                max-width: 80%;
179                padding:10px 0 0 0;
180                color:@color2;
181            }
182        }
183    }
184    #logo-institution{
185        padding:1em 0 0 0;
186        margin:0 0 .8em 0;
187    }
188    .form-search{
189        position:absolute;
190        bottom:.5em;
191        right:3%;
192        padding:2px 0 0 0;
193        border-bottom:0;
194        margin:0 1em;
195        .formulaire_spip{
196            margin:0 0 -2px 0;
197            padding:5px;
198            label{display:none;}
199            .input-append{
200                input.search.search-query{
201                    width:160px;
202                    .border-radius(1em);
203                    height:24px;
204                }
205                .btn{display:none;}
206            }
207        }
208    }
209}
210#nav{
211    margin-bottom:0px;
212    .menu-container,
213    .menu-conteneur{
214        border-top:1px solid @color1;
215        border-bottom:1px solid @white;
216        .border-radius(0);
217        .nav{
218            margin:0 auto;
219            float:none;
220            .dropdown-menu {
221                min-width: 240px;
222                .border-radius(@baseBorderRadius);
223                .box-shadow(0 2px 2px rgba(0,0,0,.2));
224            }
225            .item{               
226                li.item{
227                    text-transform:none;
228                    background:none;
229                    list-style: none;
230                    a{
231                        display: block;
232                        &:hover,&:focus,&:active{background-color:@color2;color:@white;}
233                    }
234                }
235                &.tout_voir{text-align:right;}
236                .on,&.on{font-weight: normal;}
237                &.item-picto {
238                    >a{
239                        &.icon-nav-home{
240                            background-position:12px -30px;
241                            &:hover,&:focus,&:active{background-position:12px 9px;}
242                        }
243                        &.icon-nav-calendar{
244                            background-position:-25px -30px;
245                            &:hover,&:focus,&:active{background-position:-27px 9px;}
246                        }
247                        &.icon-nav-contact{
248                            background-position:-187px -30px;
249                            &:hover,&:focus,&:active{background-position:-187px 9px;}
250                        }
251                        &.icon-nav-themes{
252                            background-position:-266px -30px;
253                            &:hover,&:focus,&:active{background-position:-266px 9px;}
254                        }
255                        &.icon-nav-star{
256                            background-position:-228px -30px;
257                            &:hover,&:focus,&:active{background-position:-228px 9px;}
258                        }
259                    }
260                }
261            }
262        }
263    }
264}
265#content,#aside{
266    .spip_out{
267        padding-right:20px;
268        background-image:url(img/spip_out.gif);
269        background-repeat:no-repeat;
270        background-position:right;
271    }
272    .spip_surligne{background-color: yellow;}
273    .liste{
274        .liste-items {
275            margin-bottom:0;
276            li.item{
277                border-top:1px solid @grayLighter;
278                border-bottom:1px solid @grayLighter;
279                article{
280                    .introduction li{list-style:url('img/puce1.png');}
281                }
282            }
283        }
284        .postmeta.tags{
285            border: none;
286            display: inherit;
287            margin-left: 1em;
288            margin-bottom: 0;
289            ul{
290                margin: 0;
291                text-align: left !important;
292                li{
293                    span.label{font-size: .8em;border:1px dotted @color1;color: @color1;background: none; margin:0 1em .5em 0;}
294                }
295            }
296        }
297    }
298    .tags{
299        padding-bottom:.6em;
300        ul{
301            margin:0 0 1em 0;
302            li{
303                padding:0;
304                margin:0;
305                a{
306                    display:inline-block;
307                    padding:.3em 1.2em .5em .7em;
308                    margin-top:.5em;
309                    .border-radius(@baseBorderRadius);
310                    margin-right:.5em;
311                }
312            }
313        }
314    }
315    div.pagination{
316        text-align:right;
317        margin-right:1.5em;
318        margin-bottom:0;
319        .label{
320            color: @white;
321            background-color: @color1;
322            .border-radius(0);
323        }
324        ul{
325            .border-radius(0);
326        }
327        ul:not(.pager) > li:first-child > a,ul:not(.pager) > li:first-child > span{
328          .border-left-radius(@baseBorderRadius);
329        }
330        ul:not(.pager) > li:last-child > a,ul:not(.pager) > li:last-child > span{
331          .border-right-radius(@baseBorderRadius);
332        }
333        ul > .disabled > span, ul > .disabled > a, ul > .disabled > a:hover, ul > .disabled > a:focus,
334        .pager> .disabled > span, .pager > .disabled > a, .pager > .disabled > a:hover, .pager > .disabled > a:focus,
335        .pager> li > span, .pager > li > a, .pager > li > a:hover, .pager > li > a:focus{
336            background-color:@paginationBackground;
337        }
338        ul > li > a,ul > li > span{
339            border-top-width:2px;
340            border-bottom-width:0;
341            border-left-width:2px;
342        }
343        ul > li > a,ul > li > span{
344            border-color:@white;
345            color:@white;
346        }
347        .icon-fast-forward{
348            background-image:url("img/@{iconWhiteSpritePath}");
349        }
350    }
351}
352.postmeta {
353    border: 1px solid @grayLighter;
354    margin-bottom: 2em;
355    small{display: block;text-align: center;}
356    .liste{
357        margin-bottom: 0;
358        p{padding-top: .7em;}
359        .tags{
360            margin-top: .7em;
361            display:block;
362            .sep{display:none;}
363        }
364    }
365}
366.pswp .pswp__bg { background-color: @color3;}
367.pswp__caption {
368    .pswp__caption__center{
369                max-width: 80%;
370                dt,dd{width: inherit !important;}
371        }
372}
373
374#content{
375    hr{clear: both;visibility: hidden;}
376    .breadcrumb{
377        border-bottom:1px solid lighten(@gray,50%);
378        background-color:transparent;
379        .active{color: @gray;}
380        li>.divider{color: @gray;}
381        .border-radius(0);
382    }
383    header.cartouche{
384        h1{color:darken(@color1,15%);}
385        .surtitre{
386            font-size:1.5em;
387            margin-bottom:.5em;
388            color:@grayDark;
389        }
390        .soustitre{
391            font-size:.9em;
392            color:@grayDark;
393        }
394    }
395    .texte p{
396        margin-bottom:.6em;
397    }
398    .chapo{
399        font-size:1.2em;
400        padding:1em 1em;
401        margin:1.5em 0;
402    }
403    .hyperlien{
404        background-color:white;
405        padding:.5em 1em;
406        margin: 1em 0 1.5em 5%;
407        border-left:1px solid @grayLight;
408        display: inline-block;
409    }
410    .cs_blocs{
411        .blocs_titre{
412            font-size: 1.5em;
413            background: none;
414            padding-left: 2em;
415            &:before{content: '▼  ';font-size: 1.2em;color: @color2;}
416            &:after{content: ' (cliquez pour masquer)';font-size: .7em;color: @black;}
417            &.blocs_replie{
418                margin-bottom: 1.5em;
419                &:before{content: '▶ ';font-size: .9em;}
420                &:after{content: ' (cliquez pour afficher)';}
421            }
422        }
423        .blocs_slide{
424            margin-left:4em;
425            margin-top: .6em;
426            margin-bottom: 1.5em;
427            padding:1em 2em 1em 2em;
428            min-height:40px;
429            background-color: @grayLighter;
430            border-left: 3px solid @color2;
431        }
432    }
433    blockquote{
434        &.spip{
435            margin-left:2.5em;
436            margin-top: .6em;
437            padding:1em 4em 1em 4em;
438            min-height:40px;
439            .border-radius(@borderRadiusLarge);
440            background:darken(white,2%) url(img/quote.png) no-repeat left 10px ;
441            background-image:url(img/quote.png),url(img/quote_rotated.png) ;
442            background-position:left 10px, right bottom ;
443            background-repeat:no-repeat,no-repeat;
444            border:none;
445            transition: 0.4s ease-in-out 0.2s;
446            &:hover{
447                background-color:white;
448                transition: 0.4s ease-in-out 0s;
449            }
450            small{
451                display:inline;
452                color:inherit;
453                &:before{content:'';}
454            }
455        }
456        &.spip_poesie{
457            margin-left: 50px;
458            padding-left: 30px;
459            margin-right: 50px;
460            div {
461                text-indent: 0;
462                margin-left: 0;
463            }
464        }
465    }
466    .menu.rubriques{
467        ul.menu-items{
468            margin-left:0;
469            .menu-items{
470                margin-left:2.5em;
471            }
472            li.item{
473                padding:0;
474                list-style:none;
475                a{
476                    display:block;
477                    padding:.5em 1em .5em 1em;
478                    &.lien_pagination {
479                        padding:4px 12px;
480                    }
481                }
482            }
483        }
484    }
485    .spip_transcript_link{
486        padding-bottom:1em;
487    }
488    .liste li.item{
489        .texte,.introduction{
490            strong{font-weight:bold;}
491        }
492    }
493    dl.spip_documents{
494        font-size:.8em;
495        dt{
496            line-height:1.3em;
497            &.spip_doc_titre{padding-top:.8em;}
498        }
499    }
500    .carte_gis{
501        margin:1em 0 2em 2em;
502        float:right;
503    }
504    .center{text-align:center;}
505    .box_modalbox iframe{margin-top:0;margin-bottom:0;}
506
507    /* Portfolio */
508    .documents_portfolio{
509        clear:both;
510        margin:/*@margin-bottom*/1.5em/*/@*/ auto;
511        text-align:center;
512        .spip_logos{
513            float:none;
514            margin:6px 3px 10px 3px;
515            border:1px solid lighten(@color2,30%);
516        }
517        a{
518            &.on,&:hover,&:focus,&:active{
519                .spip_logos{
520                    border-color:@color2;
521                }
522            }
523        }
524    }
525    ul.spip{
526        list-style:outside url('img/puce1.png');
527        margin-top:.2em;
528        margin-bottom:1em;
529        margin-left: 60px;
530        li{
531            margin-top:.4em;
532            margin-bottom:.4em;
533            ul{
534                list-style:url('img/puce2.png');
535                margin-left: 30px;
536                ul{list-style:url('img/puce3.png');}
537            }
538        }
539    }
540    footer{
541        clear:both;
542        margin-top:2em;
543        .notes{
544            border-top:1px solid @grayLighter;
545            border-bottom:1px solid @grayLighter;
546            padding-bottom:1em;
547            max-width:inherit;
548            >h2{border:none;}
549        }
550        .publication{margin-top:1.5em;}
551    }
552}
553#aside {
554    padding-top:2em;
555    .hyperlien{
556        background-color:white;
557        padding:.5em;
558        margin: .5em 0 0 .5em;
559        border-left:1px solid @grayLight;
560        display: block;
561    }
562    .liste{
563        .banner{display:none;}
564        .liste-items {
565            .entry-content{
566                max-height:inherit;
567                overflow: inherit;
568            }
569            .spip_logos{max-width: inherit;}
570        }
571    }
572    ul.spip{
573        margin-left: 30px;
574    }
575}
576
577#footer{
578    border:none;
579    margin-top:3em;
580    padding-top:0;
581    background:@grayLighter;
582    .colophon{
583        padding:1.3em 0;
584        margin:0;
585        text-align:center;
586        font-variant:small-caps;
587        font-size:1.4em;
588        color:@grayDark;
589    }
590    ul.liste-items{
591        border:none;
592        li.item{
593            display:inline;
594            border:none;
595            padding:0 1.5em;
596        }
597    }
598}
599
600
601/* Divers */
602
603.boutons_options{
604    text-align:center;
605    margin:1.5em 0 1.5em 0 !important;
606    h2,h3{
607        margin:3em 0 0 0;
608        padding:0 .5em 0 0;
609        text-align:left;
610        display:inline-block;
611    }
612    div.socialtags{
613        display:inline-block;
614        margin-top:.5em;
615    }
616    .socialtags-hovers{opacity:1;}
617    div.bouton{
618        display:inline-block;
619        width:40px;
620        height:40px;
621        padding:0 0 0 14px;
622        &.article_print{
623            padding-left:0;
624            img{cursor:pointer;}
625        }
626    }
627    img:hover{transform:scale(1);}
628    img{width:40px;height:40px;transform:scale(.85);}   
629}
630.disabled{
631    .opacity(60);
632}
633.bt{
634    margin-top:1.5em;
635    a{
636        font-size:1.8em;
637        font-variant: small-caps;
638        padding:.2em .7em .3em .7em;
639        background:@color1;
640        .border-radius(@baseBorderRadius);
641        &:hover,&:active,&:focus{
642            background:darken(@color1,5%);
643        }
644    }
645}
646.spip_flash_link{
647    display:none;
648}
649.spip_documents {
650        &.oembed{
651                margin-top: 0.3em;
652                margin-bottom: 0;
653                .oe-play-button{
654                        button {
655                                background-color: @grayDarkerAlpha;
656                                .border-radius(3px);
657                                &:before{border-width: 1px;.border-radius(3px);}
658                        }
659                        &:hover button {
660                                background-color: @grayDarkAlpha;
661                        }
662                }
663                .oembed {
664                        background-color: transparent;
665                        border: none;
666                }
667        }
668}
669#backtotop{
670    display:none;
671    bottom:20px;
672    right:10px;
673    height:40px;
674    padding-top:10px;
675    width:50px;
676    text-align:center;
677    position:fixed;
678    z-index:1;
679    color:@white;
680    font-size:30px;
681    background-color:@color2;
682    cursor:pointer;
683    font-family:helvetica,arial,sans-serif;
684    .border-radius(25px);
685    .opacity(60);
686    &:hover{.opacity(100);background-color:@color1;}
687}
688ul.nuage{
689    margin-bottom: 1em;
690    font-size: 1.4em;
691    text-align: center;
692    border-bottom: 1px solid @grayLighter;
693    border-top: 1px solid @grayLighter;
694    padding: 1em 0;
695    li{
696        display: inline-block;
697        margin: .2em .5em;
698        a{line-height: 1.2em;}
699    }
700}
701*::-moz-selection {
702    background-color: @color1;
703    color: #fff;
704    text-shadow: none;
705}
706*::selection {
707    background-color: @color1;
708    color: #fff;
709    text-shadow: none;
710}
711.spip_documents {
712        &.oembed{
713        background: transparent;
714        border: none;
715                margin-top: 0.3em;
716                margin-bottom: 1.5em;
717                .oe-play-button{
718                        button {
719                                background-color: @grayDarkerAlpha;
720                                .border-radius(3px);
721                                &:before{border-width: 1px;.border-radius(@borderRadiusSmall);}
722                &:after {border-left:20px solid @white;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left: -7px;}
723                        }
724                        &:hover button {
725                                background-color: @grayDarkAlpha;
726                        }
727                }
728                .oembed {
729                        background-color: transparent;
730                        border: none;
731            padding: 0;
732                }
733        }
734    &.oembed_scolawebtv_de_l_acad__mie_de_versailles {
735        .oembed.oe-rich{
736            background-color: darken(@white,3%);
737            padding: 1em;
738            .border-radius(@borderRadiusSmall);
739        }
740        .rwd-rich-container iframe {z-index:inherit;}
741        .loading{background-image: none !important;}
742        .oe-play-button{
743                        button {
744                background-color: lighten(@grayDarkAlpha,30%);
745            }
746        }
747    }
748}
749.liste{
750    background:@white;
751    &.offset,.offset{margin-left: 0;}
752    &.short{
753        ul.liste-items{
754            li.item{
755                a{display: block;}
756            }
757        }
758        &.sites{
759            li{text-align:center;}
760            .spip_logos{
761                display:inherit;
762                max-width:inherit;
763                float:none;
764                margin-left:auto;
765                margin-right:auto;
766            }
767            .small.right{display:inherit;}
768            .publication{display:none;}
769        }
770    }
771    &.long{
772        ul.liste-items,ul.menu-items{
773            li.item{
774                .publication{
775                    display:inherit;
776                    float: right;
777                    margin-left: 2em;
778                    .opacity(100);
779                }
780            }
781        }
782    }
783    ul.liste-items,ul.menu-items{
784        li.item{
785            padding:1em 1em 1em 1.5em;
786            border:none;
787            border-left: 7px solid transparent;
788            transition:all 0.2s ease-in-out 0.0s;
789            &:hover{
790                border-left-color: @color1;
791                background-color:rgba(0,0,0,.04);
792                transition:all 0.2s ease-in-out 0.0s;
793            }
794            a:hover {text-decoration: none;}
795            strong.h3-like{
796                margin-bottom: 0;
797                font-size:1.1em;
798                font-weight:normal;
799                line-height: 1.7em;
800                >a{display:block;font-size:1.2em;}
801            }
802            .publication{
803                display:none;
804                font-size:.9em;
805                text-align:right;
806                padding-right:1em;
807            }
808            &.divider{
809                padding-top:.6em;
810                text-align:right;
811            }
812            .entry .entry-title,.spip_logos{margin-bottom:0;}
813        }
814    }
815    &.videos{
816        ul.liste-items{
817            li.item{ border: none;}
818        }
819    }
820    &.sites ul.liste-items li.item .entry .entry-title{text-align: center;}
821    &.documents_joints{
822        margin:2em 0;
823        border-top-width:1px;
824        .entry.document{
825            .spip_logos{margin-left:0;}
826            .entry-content{padding:.2em 1em; }
827        }
828    }   
829    &.evenements{
830        .label-inverse,.badge-inverse{background-color:@color1;}
831        .item.item.fini{
832            background: @grayLighter url('img/hachure.png');
833            .evenement{
834                .banner{
835                    .opacity(50);
836                }
837                .entry-title a {
838                    color: darken(@linkColor,20%);
839                }
840                .entry-content{max-height:inherit;}
841            }
842        }
843        .evenement{
844            margin-bottom:1em !important;
845            .url{padding-left:0;}
846            .banner{
847                margin-top:.3em;
848                margin-bottom:.3em;
849                .opacity(100);
850                .label{
851                    .border-radius(50%);
852                    padding:13px 0 13px 0;
853                    min-height:55px;
854                }
855            }
856            .category{
857                color:@white;
858                padding:5px 10px 5px 5px;
859                margin-right:.5em;
860                background-color:@color2;
861                i{margin-left:5px;}
862            }
863            .meta-publi{
864                text-align:right;
865                .sep{display:none;}
866            }
867            span{
868                padding-left:0;
869            }
870        }
871    }
872    &.tweets{
873        border-bottom: 1px solid @grayLighter;
874        h2.h2{border-bottom: 1px solid @grayLighter;}
875    }
876    &.breves {
877        .h3-like a{
878            &:after{
879                content: " ▲";
880                font-family: helvetica,arial,sans-serif;
881                font-size: 1.2em;
882            }
883            &.ouvrable{
884                &:after{content: " ▼";}
885            }
886        }
887        &.long{
888            ul.liste-items {
889                li.item {
890                    .publication{display: none;}
891                }
892            }
893        }
894    }
895    &.articles-dossier{
896        margin-top: 3em;
897    }
898    h2.h2{
899        margin:0;
900        padding:.4em 1em .4em 1em;
901        font-size:1.6em;
902        font-variant: small-caps;
903        font-weight:bold;
904        text-align:center;
905        small{color: @gray;}
906    }
907    .introduction{font-size:.9em;margin-top:.5em;}
908    .pagination{
909        margin-left:1em;
910        ul > li > a,ul > li > span{
911            color:@white;
912        }
913    }
914}
915/* enluminures typo */
916h4.spip{
917    color: @color2;
918    font-size: 1.5em;
919    margin-bottom: .5em;
920    margin-top: 1em;
921    a{color:@linkColor;}
922}
923h5.spip{
924    color: @color1;
925    font-size: 1.3em;
926    margin-bottom: .5em;
927    margin-top: 1em;
928    a{color:@linkColor;}
929}
930.texteencadre-spip{
931    font-size: 1.5em;
932    background-color: @color3;
933    color: @white;
934    font-size: 1.2em;
935    padding: 1em 1.5em;
936    border: none;
937    a{
938        color:@white !important;
939        text-decoration: underline;
940    }
941}
942.caractencadre-spip{color: @color3;}
943.caractencadre2-spip{color: darken(@color1,20%);}
944
945
946/* Pages spécifiques */
947.page_sommaire{
948    #nav{
949        .menu-container{
950            .nav{
951                .item-picto{
952                    &.home a.icon-nav-home{background-color: @navbarInverseLinkBackgroundActive;}
953                }
954            }
955           
956        }
957    }
958    .breadcrumb{display: none;}
959    #content{
960        .selection{margin-top: 2em;}
961    }
962    .editorial{
963        article{
964            margin-top: 2em;
965            margin-bottom: 0;
966            h3{text-align: center;}
967            .chapo{font-weight: normal;margin: 0;}
968            .spip_logo{float:right;margin:  0 0 1em 1em;}
969        }
970        article>div{
971            background: url('img/li-hover.png');
972            background-repeat: repeat-y ;
973            background-position: -8px 0;
974            border-top: 1px solid @grayLight;
975            border-bottom: 1px solid @grayLight;
976            padding: 1em 1em 0 1em;
977            &:hover{
978                background-color:rgba(0,0,0,.04);
979                background-position: 0 0;
980                transition:all 0.2s ease-in-out 0.0s;
981            }
982        }
983    }
984    .liste{
985        h2{
986            font-size:1.6em;
987            font-variant: small-caps;
988            &.h2{font-weight:normal;}
989            border-bottom: 0px solid @grayLighter;
990        }
991        &.evenements {
992            .bt a{
993                color:@white;
994            }
995            .category{display: none;}
996        }
997    }
998    .aside .liste{
999        ul.liste-items li span{
1000            /* padding-left:inherit; */
1001        }
1002    }
1003    #aside{
1004        .liste{
1005            &.videos{
1006                text-align: center;
1007                .liste-items{
1008                    .item{
1009                        padding: 1em 0 0 0;
1010                        background: none;
1011                        h3{margin-bottom: .5em;}
1012                        &:hover{
1013                            background: none;
1014                        }
1015                    }
1016                }
1017                .oembed_video {
1018                    .oembed.oe-video{margin: 0 -15px;}
1019                    .spip_doc_titre{display: none;}
1020                 }
1021                .spip_documents.oembed {
1022                    margin-bottom: 0;
1023                }
1024            }
1025        }
1026    }
1027    #footer{
1028        margin-top:0;
1029    }
1030}
1031
1032.page_article{
1033    .content{
1034        .main{
1035            margin-bottom:2em;
1036        }
1037        span.tags{
1038            margin-top:0;
1039            li{margin-bottom:1.5em;}
1040        }
1041        .evenement .url{
1042            color:inherit;
1043            cursor:inherit;
1044            text-decoration:none;
1045        }
1046        .formulaire_formidable{
1047            margin-bottom:0;
1048        }
1049        .pagination_precedent_suivant{
1050            ul.liste-items{
1051                list-style: none;
1052                margin: 4em 0;
1053                padding: 1em 0;
1054                li.item{
1055                    display: inline-block;
1056                    clear: none;
1057                    padding: 0;
1058                    &.right{text-align: right;}
1059                    a{
1060                        padding: 1em 2em;
1061                        display: block;
1062                        span{
1063                            &.normal{color: @black;}
1064                            &.big{display: block;}
1065                        }
1066                    }
1067                }
1068            }
1069        }
1070    }
1071    .ps h2{
1072        visibility:hidden;
1073    }
1074    .aside{
1075        &.secondary{
1076            padding-top:2.5em;
1077        }
1078    }
1079}
1080.page_breve,.page_article{
1081    #content{
1082        .hyperlien{
1083            background-color:@grayLighter;
1084        }
1085    }
1086}
1087.page_rubrique{
1088    .icone-rss,.icone{display: none;}
1089    .liste.menu.rubriques{
1090        ul.inline{
1091            margin: 0;
1092            li.item.span2{
1093                border-top:1px solid @grayLighter; 
1094                margin: -1px 6px 0 0;
1095                min-width: 180px;
1096                min-height: 4em;
1097                text-align: center;
1098                vertical-align: top;
1099                float: none;
1100                display: inline-block;
1101            }
1102        }
1103    }
1104}
1105.page_site{
1106    .aside{
1107        &.secondary{padding-top:2.5em;}
1108        .liste{
1109            &.sites{
1110                .liste-items{
1111                    li.item{
1112                        border:none;
1113                    }
1114                }
1115            }
1116        }
1117    }
1118    #content{
1119        .hyperlien{
1120            margin: 1em 0 1.5em 0;
1121            font-size: 1.3em;
1122        }
1123        .liste.syndic{
1124            border:1px solid @grayLighter;
1125            ul.liste-items{
1126                li{
1127                    padding:1em ;
1128                    h3{margin-bottom:.3em;}
1129                    a{
1130                        padding:.5em 0;
1131                        &.spip_out{padding-right:20px;}
1132                    }
1133                    .small{
1134                        a{display:inline;padding:0;}
1135                    }
1136                }
1137            }
1138        }
1139    }
1140}
1141.page_plan{
1142    #content{
1143        .main ul.plan{
1144            list-style:none;
1145            font-size: 1.2em;
1146            li{
1147                a{
1148                    display: block;
1149                    &:hover{background-color: @grayLighter;}
1150                }
1151            }
1152            ul{
1153                list-style:none;
1154                font-size: 90%;
1155            }
1156        }
1157    }
1158}
1159.page_mot,.page_recherche{
1160    #content{
1161        .liste{
1162            .tags ul li.item{
1163                padding:.5em 1em;
1164                &:hover{background:transparent;}
1165                > a{
1166                    display:inline ;
1167                    padding:.4em 1em;
1168                }
1169            }
1170            li a{
1171                display:block;
1172            }
1173        }
1174    }
1175}
1176.page_mot {
1177    #content{
1178        .liste{
1179            &:nth-child(4n+1){margin-left:0;clear: left;}
1180        }
1181    }
1182}
1183.page_recherche {
1184    #content{
1185        .liste{
1186            &:nth-child(3n+1){margin-left:0;clear: left;}
1187        }
1188    }
1189}
1190.page_star,.page_rubrique,.page_mot,.page_sites{
1191    #content .liste,.liste{
1192        h2.h2{
1193            text-align:left;
1194            font-size:1.5em;
1195        }
1196    }
1197}
1198.page_site .aside .liste.sites,
1199.page_auteur .aside .liste.auteurs,
1200.page_article .aside .liste.articles
1201{
1202    border:1px solid @grayLighter;
1203    .item:last-child{border-bottom:none;}
1204}
1205.page_agenda {
1206    #content {
1207        div.pagination{
1208            ul > .disabled > span, ul > .disabled > a, ul > .disabled > a:hover, ul > .disabled > a:focus,
1209            .pager> .disabled > span, .pager > .disabled > a, .pager > .disabled > a:hover, .pager > .disabled > a:focus,
1210            .pager> li > span, .pager > li > a
1211            {
1212                .border-radius(0);
1213            }
1214        }
1215    }
1216}
1217.page_agenda,.page_jour{
1218    #nav{
1219        .btagenda{
1220            background-color:@navbarInverseLinkBackgroundActive;
1221        }
1222    }
1223    .aside{
1224        h2{display:none;}
1225        .well{
1226            background-color:transparent;
1227            margin-bottom:0;
1228            border:none;
1229            box-shadow:none;
1230        }
1231        .calendriermini{
1232            margin-bottom:0 ;
1233            background-color:transparent;
1234            .calendar-container{
1235                padding:0 1em;
1236            }
1237            .ui-widget-header,.ui-widget-content{
1238                background-color:transparent;
1239                border:none;
1240            }
1241            .ui-state-highlight a{
1242                background:@color2;
1243                color:@white;
1244                border:none;
1245            }
1246            .ui-datepicker-today a{}
1247            table .ui-state-highlight a:hover{
1248                background:@yellow;
1249                color:#636;
1250            }
1251        }
1252    }
1253}
1254.page_contact,.page_auteur{
1255    #nav{
1256        .btcontact{
1257            background-color:@navbarInverseLinkBackgroundActive;
1258        }
1259    }
1260}
1261.page_sites{
1262    #nav{
1263        .btsites{
1264            background-color:@navbarInverseLinkBackgroundActive;
1265        }
1266    }
1267}
1268.page_mentions{
1269    #content span.intitule{
1270        font-variant:small-caps;
1271    }
1272}
1273.page_mots{
1274    #nav{
1275        .menu-container{
1276            .nav{
1277                .item-picto{
1278                    &.btthemes a.icon-nav-themes{background-color: @color1;}
1279                }
1280            }
1281        }
1282    }
1283    #content{
1284        li.item{
1285            border: none !important;
1286            a{display: block;}
1287        }
1288    }
1289}
1290
1291// @media 
1292@media (max-width:1200px){
1293    #header{
1294        header{
1295            h1#logo_site_spip{
1296                #slogan_site_spip{
1297                    margin-top:2px;
1298                    letter-spacing: 1px;
1299                }
1300                .spip_logo{display: inline-block;}
1301                #nom_site_spip{
1302                    display: inline-block;
1303                }
1304            }
1305        }
1306    }
1307    #nav{
1308        .nav{
1309            margin:0 auto;
1310            float:none;
1311            width:960px;
1312        }
1313    }
1314    .carousel {
1315        .item {
1316            article{
1317                strong a{
1318                    font-size: 1.3em !important;
1319                    span.surtitre{font-size: 1em;}
1320                }
1321            }
1322        }
1323    }
1324}
1325@media (min-width:1200px) {
1326    #nav{
1327        .nav{
1328            margin:0 auto;
1329            float:none;
1330            width:1200px;
1331        }
1332    }
1333}
1334@media (min-width:767px) {
1335    #nav{
1336        .dropdown-menu{
1337            ul{
1338                margin-left: 1em;
1339                a{padding-left: 1em;}
1340            }
1341        }
1342    }
1343}
1344@media (min-width:767px) and (max-width:1200px) {
1345    #header{
1346        header{
1347            h1#logo_site_spip{
1348                margin:.5em 0 .5em 0;
1349                font-size:2.2em;
1350                .spip_logos{
1351                    margin:0 25px 0 10px;
1352                }
1353                #nom_site_spip{padding-left:25px}
1354                #slogan_site_spip{
1355                    padding:10px 0 0 25px;
1356                }
1357            }
1358        }
1359    }
1360    #nav{
1361        .nav{
1362            margin:0 auto;
1363            float:none;
1364            width:960px;
1365        }
1366    }
1367    .carousel .spip_logos {max-width: 50%;}
1368}
1369@media (min-width:767px) and (max-width:979px){
1370    #header{
1371        .form-search{position: relative;top:inherit;bottom: inherit;right: inherit;left: inherit;}
1372    }
1373}
1374@media (max-width:979px){
1375    #header{
1376        header{
1377            h1#logo_site_spip{
1378                font-size:2em;
1379                #slogan_site_spip{
1380                    font-size:70%;
1381                }
1382            }
1383        }
1384        .form-search{right: 0; }
1385    }
1386    #nav{
1387        .nav{
1388            margin:0;
1389            float:left;
1390            width:auto;
1391        }
1392    }
1393    .carousel {
1394        .item {
1395            article{
1396                strong a{
1397                    font-size: 1em !important;
1398                    span.surtitre{font-size:1em;}
1399                }
1400                img{max-width: 25%;}
1401                .introduction{padding-right: 50px !important;}
1402            }
1403        }
1404    }
1405}
1406@media (min-width:767px){
1407    .page_sommaire {
1408        #content{
1409            .liste.long.evenements {
1410                .liste-items{
1411                    .evenement {
1412                        padding-left: 6em;
1413                        .banner{margin: 0 0 0 -6.5em;}
1414                    }
1415                }
1416            }
1417        }
1418    }
1419}
1420@media (max-width:767px){
1421    #header{
1422        #logo-institution {
1423            padding: 0;
1424            margin: 0;
1425        }
1426        header{
1427            h1#logo_site_spip{
1428                letter-spacing: inherit;
1429                .spip_logos{margin-left: 0;}
1430            }
1431        }
1432        .form-search{
1433            bottom: 10px;
1434            right:5%;
1435        }
1436    }
1437    .aside{ padding-top:0; }
1438    #aside .liste{
1439        &.sites .spip_logos{float: left;margin-right: 11px;}
1440    }
1441    .carousel .spip_logos {max-width: 50%;}
1442}
1443@media (max-width:640px){
1444    #header{
1445        header h1#logo_site_spip{
1446            padding-left:.5em;
1447            #slogan_site_spip{
1448                font-size: 80%;
1449            }
1450        }
1451    }
1452}
1453@media (max-width:480px){
1454    .carousel .spip_logos {display: none;}
1455}
1456@media print{
1457    page-break-inside:avoid;
1458    body{padding:0 2em 4em 2em;}
1459    #nav,.aside,#footer, .breadcrumb,#header blockquote,.authors,.socialtags,#slogan_site_spip,.noprint{display:none;}
1460    #header{
1461        display:block;
1462        padding-top:10px;
1463    }
1464    #content{
1465        width:auto;
1466        font-size:.8em;
1467        .surtitre{margin-bottom:0;}
1468        .main{clear:right;padding:0 0 20px 0;}
1469    }
1470}
Note: See TracBrowser for help on using the repository browser.