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

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

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