source: spip-zone/_squelettes_/scolaspip/trunk/css/base_scolaspip.less @ 96845

Last change on this file since 96845 was 96845, checked in by johan.pustoch@…, 3 years ago

liens parfois tronqué car blocs trop larges (menu rubriques), couleur des spip_out hover annulée, up de z

  • Property svn:executable set to *
File size: 7.4 KB
Line 
1@import "css/variables.less";
2@import "css/mixins.less";
3
4/* structure de la page */
5#header .container{
6        min-height : 110px;
7        position  : relative;
8        #nom_site_spip {
9                margin-bottom : 10px;
10                padding-top: 10px;
11        }
12        .spip_logos { margin-bottom : 0px; }
13        .bandeau_complet{
14                .spip_logos {margin: 11px 19px 11px 0;}
15        }
16        .logo-institution{
17                position:absolute;
18                right:10px;
19                top:5px;
20        }
21        .infos {
22                margin-bottom : 5px;
23        }
24}
25#nav {
26        z-index: 200;
27        .container {
28                max-width: 1170px;
29                .navbar-inner {
30                        padding-left : 0px;
31                        .spip_logo{margin-right: 10px;}
32                }
33        }
34}
35#aside {
36        margin-left : 20px;
37        .well.rubriques{
38                margin: 0 0 2em 0;
39                padding: 1em .5em 1em 1em;
40                list-style: none;
41                li{
42                        margin: 0;
43                        padding: 0;
44                }
45                ul{
46                        margin: 0 0 .5em .5em;
47                        padding:0 0 0 1.3em;
48                        list-style: none;
49                        border-left:1px solid @grayLight;
50                        width: auto;
51                }
52                h4{
53                        margin-bottom: .4em;
54                        a.toggle{
55                                display: inline-block;
56                                vertical-align: middle;
57                                width: 20px;
58                                height: 1em;
59                                background: url('../img/deplierbas.png') no-repeat left bottom;
60                                &.collapsed{
61                                        background: url('../img/deplierhaut.png') no-repeat left bottom;
62                                }
63                                &.on{
64                                        background: url('../img/deplierbas.png') no-repeat left bottom;
65                                        &.collapsed{background: url('../img/deplierhaut.png') no-repeat left bottom;}
66                                }
67                        }
68                        a.branche{
69                                display: inline-block;
70                                max-width: 200px;
71                                vertical-align: middle;
72                        }
73                }
74                h4.feuille {
75                        a{
76                                padding-left: 20px;
77                                background: url('../img/deplierbas.png') no-repeat left center;
78                        }
79                }
80        }
81        .sites {
82                ul {
83                        margin : 0px;
84                        li {
85                                display : inline; 
86                                list-style:none;
87                                img { margin : 5px 10px; }
88                        }
89                }
90        }
91}
92#footer {
93        .colophon{ 
94                display: inline-block;
95                vertical-align: top;
96                padding: 0 4%;
97                p{margin: .3em 0;}
98                width: 70%;
99        }
100        .generator {
101                display: inline-block;
102                text-align: right;
103                vertical-align: top;
104                position: relative;
105                top: inherit;
106                right: inherit;
107                max-width: inherit;
108                img{margin:0 1em 1em 0;display: inline-block;}
109                width: 20%;
110        }
111}
112.page_sommaire {
113        #content{
114                .inner-content{
115                        padding-left: 0;
116                }
117                .tweets {
118                        margin-top : 20px;
119                }
120        }
121        #video p {
122                text-align : center;
123        }
124}
125.page_breve,.page_article{
126    #content{
127        .hyperlien{
128            background-color:@grayLighter;
129                        padding:.5em 1em;
130                        margin: 1em 0 0 5%;
131                        display: inline-block;
132        }
133    }
134}
135.page_article,.page_evenement{
136    #content{
137                .evenement{
138                        .h3-like{font-size: 1.4em;}
139                        .banner{display: none;}
140                }
141    }
142}
143.page_plan{
144    #content{
145        .main ul.plan{
146            list-style:none;
147            font-size: 1.2em;
148            li{
149                a{
150                    display: block;
151                    &:hover{background-color: @grayLighter;}
152                }
153            }
154            ul{
155                list-style:none;
156                font-size: 90%;
157            }
158        }
159    }
160}
161.article .publication{
162        display : block;
163}
164.cartouche {
165        h1 .titre { 
166                display : block;
167        }
168        .spip_logos{
169                float : left; 
170                margin-left : 0px; 
171                margin-right : 20px;
172        }
173}
174.chapo {
175        font-weight: normal;
176        font-size: 1.1em;
177}
178hr {
179        height : 2px;
180        background-color : #aaa;
181}
182#content{
183        .inner-content{
184                padding-left: 2em;
185                .span4.offset,.span6,.span9{margin-left: 0;}
186        }
187        .comment{
188                padding-bottom: 0;
189                .comment-meta {
190                        padding-left: 50px;
191                        background: none;
192                        .item{display: none;}
193                        .permalink{
194                                right: 10px;
195                                &.diese{top:30px;}
196                                &.in-reply-to{top:35px;right: 25px;bottom: inherit;}
197                        }
198                }
199                .comment-reply {
200                        visibility : visible;
201                        margin :5px 10px 10px 10px;
202                }
203        }
204    .spip_out{
205        padding-right:20px;
206        background-image:url(img/spip_out.gif);
207        background-repeat:no-repeat;
208        background-position:right;
209    }
210}
211
212/* carousel (page d'accueil ou de rubrique) */
213.carousel {
214        font-size: 1.25em;
215        padding: 25px 70px 45px 80px;
216        margin-bottom: 2.28571em;
217        line-height: 1.42857em;
218        background-color: #DDD;
219        .border-radius(6px);
220        position: relative;
221        .carousel-inner {
222                height : 230px;
223                .spip_logos{
224                        float : right; 
225                        margin-left : 10px; 
226                        margin-bottom : 10px;
227                }
228        }
229        .carousel-stop {
230                float : left;
231                margin-left:0;
232                li{
233                        display : inline; 
234                        list-style:none;
235                        font-size:1.7em;
236                        color: #999;
237                        &:hover{
238                                color: #333;
239                                cursor: pointer;
240                        }
241                }
242        }
243        .carousel-indicators { 
244                top: inherit;
245        bottom:8px;
246                right: inherit;
247        left: 45%;
248                float: none;
249                li { 
250                        background-color : transparent !important;
251                        color: #999;
252                        height: auto;
253                        width: auto;
254                        display: inline-block;
255                        margin: 0 5px;
256                        padding: 0;
257                        float: none;
258                        text-indent: inherit;
259                        cursor: pointer;
260                        font-size: 40px;
261                        font-family: helvetica,arial,sans-serif;
262                        &.active{
263                                color : #333;
264                                cursor: default;
265                        }
266                        &:hover {
267                                color : #333;
268                        }
269                }
270        }
271        .carousel-control {
272                font-size : 25px;
273                margin-top: 0px;
274                width:35px;
275                height: 38px;
276                padding-top: 2px;
277                &.right {
278                        padding-left: 5px;
279                }
280                &.left {
281                        padding-right: 5px;
282                }
283        }
284}
285
286/* Formulaire de recherche*/
287.form-search .input-append .search-query,.form-search .input-prepend .btn {
288        .border-radius(4px 0 0 4px);
289}
290.form-search .input-append .btn,.form-search .input-prepend .search-query{
291        .border-radius(0 4px 4px 0);
292}
293.spip_documents {
294        &.oembed{
295                margin-top : 0.3em;
296                margin-bottom : 0;
297                .oe-play-button{
298                        button {
299                                background-color : rgba(22,22,22,0.6);
300                                .border-radius(3px);
301                                &:before{border-width : 1px;.border-radius(3px);}
302                        }
303                        &:hover button {
304                                background-color : rgba(22,22,22,0.6);
305                        }
306                }
307                .oembed {
308                        background-color : transparent;
309                        border : none;
310                }
311        }
312}
313
314/* Bouton retour haut de page*/
315#backtotop{
316    cursor:pointer;
317    background-color: @grayDark;
318    .opacity(50);
319    &:hover{.opacity(100);}
320    color : #FFF;
321    text-align : center;
322    z-index : 200;
323    display: none;
324    position: fixed;
325    font-family:helvetica,arial,sans-serif;
326    width: 45px;
327    height: 37px;
328    font-size : 30px;
329    padding-top : 8px;
330    border : 2px solid white;
331    .border-radius(25px);
332    bottom: 20px;
333    right: 20px;
334}
335/* Divers */
336.spip_flash_link,.invisible{
337    display : none;
338}
339.selection {
340        overflow : hidden; 
341        margin-bottom : 40px;
342        }
343#calendar {
344        padding : 10px; 
345        padding-top :0px;
346        h2 {
347                display :none;
348        }
349}
350.liste{
351        &.syndics{
352                a {
353                        .spip_logo{margin: 5px 10px 5px 5px;}
354                        h3{padding: 5px;}
355                }
356        }
357        &.evenements {
358                .liste-items.evenements {
359                        .item {
360                                .entry-content {
361                                        max-height: inherit;
362                                }
363                        }
364                }
365        }
366}
367.menu.rubriques{
368        .menu-liste{ 
369                font-size : 1.5em;
370                line-height : 1.8em;
371                .menu-liste{
372                        font-size : .8em;
373                        margin-left: 20px;
374                        li{
375                                border: none;
376                        }
377                }
378        }
379}
380.liste-items .item , .secondary .liste-items .item{padding : 5px;}
381.weel {padding : 12px;}
382
383.comment-reply {
384        visibility : visible;
385        margin :0 1em 1em 1em;
386}
387
388/* Ajout fonctions responsive*/
389@media (max-width: 767px){
390        body #aside { 
391                margin-left:0px;
392        }
393        .well {
394                background-color : transparent; 
395                border : none;
396        }
397        #nav {
398                background-color : transparent; 
399                background-image : none; 
400                border : none;
401        }
402        #header {
403                border-bottom:3px solid #94C11F;
404                min-height : 70px;
405                .logo-institution img {
406                        width : 50%; 
407                        height : 50%;
408                }
409        } 
410}
411
412@media (min-width: 768px) and (max-width: 979px){ 
413        body #aside { margin-left:10px;}
414        #nav .container {width : 724px;}
415        #header {
416                min-height : 80px;
417                .logo-institution img {width : 75%; height : 75%;}
418        } 
419       
420}
421@media (min-width: 980px) and (max-width: 1199px) {
422        body #aside { margin-left:10px;}
423        #nav .container {width : 940px;}       
424}
425@media (min-width: 1200px) { 
426        body #aside {margin-left:20px;}
427}
Note: See TracBrowser for help on using the repository browser.