source: spip-zone/_squelettes_/spipr-dane/trunk/css/spipr-dane.less @ 114446

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

Oubli css menus item class on

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