source: spip-zone/_galaxie_/galactic/galactic_forum/scss/galactic_theme.scss @ 105997

Last change on this file since 105997 was 105997, checked in by marcimat@…, 3 years ago

Un tout début de version Galactic de forum.spip.net.

Seule une toute petite partie est codée pour l’instant.

  • Utilise fontawesome pour les icones.
File size: 5.1 KB
Line 
1
2// MENU DE CHOIX DES LANGUES
3// sur deux colonnes
4
5.menu-lang.open,
6.menu-lang__items {
7        width: 20em;
8}
9
10.menu-lang__items {
11        -moz-column-count:    2;
12        -webkit-column-count: 2;
13        column-count:         2;
14}
15
16.menu-lang__item {
17        padding: 0.2em 1em;
18}
19
20// Couleur du logo
21.header__nav svg * {
22        fill: $couleur-nav;
23}
24
25// Colonne droite
26.article__statut {
27        p {
28                .nb_sujets,
29                .nb_resolus,
30                .visiteurs_connectes {
31                        &:after {
32                                content: ' — ';
33                                padding: 0 0.3em;
34                        }
35                        &:last-child:after {
36                                content: '';
37                        }
38                }
39        }
40}
41.body--article, .body--rubrique {
42        .article__statut {
43                margin-top:1em;
44        }
45}
46
47.listCategories {
48        list-style-type: none;
49        margin-left:0;
50
51        .listCategories__item {
52                border-left: 5px solid $couleur-chapitre-defaut-vif;
53                padding:.3em 0 .3em 1em;
54                margin-bottom:1em;
55
56                p { margin-bottom:0; }
57                @for $i from 1 to length($couleur-chapitre-vif) + 1 {
58                        &.c#{$i} {
59                                border-left-color: nth($couleur-chapitre-vif, $i);
60                        }
61                }
62        }
63}
64
65.contentMain__main {
66        margin-bottom:4px; /* Séparation avec contentExtra */
67        .listCategories {
68                display:flex;
69                flex-direction: row;
70                flex-wrap:wrap;
71                justify-content: space-between;
72                .listCategories__item {
73                        width:47%;
74                }
75        }
76}
77
78.listeSujets {
79        list-style-type:none;
80        margin-left:0;
81        margin-top:2em;
82        margin-bottom:4em;
83        & > .item:not(:last-child) {
84                /*border-bottom:1px solid $couleur-bordure;*/
85                padding-bottom:1.5em;
86                margin-bottom:1.5em;
87        }
88
89        .ligneSujet {
90                display:flex;
91                @for $i from 1 to length($couleur-chapitre-vif) + 1 {
92                        &.c#{$i} .ligneSujet__enbref .categorie .fa {
93                                color: nth($couleur-chapitre-vif, $i);
94                        }
95                }
96                .ligneSujet__enbref {
97                        font-size: .9em;
98                        text-align:right;
99                        width:5em;
100                        flex: 0 0 5em; /* 999 votes */
101                        padding-right:1em;
102                        .categorie {}
103                        .nb_votes {
104                                display: block;
105                                .fa {
106                                        color: $couleur-votes;
107                                }
108                                &.votes_0 .fa {
109                                        color: $couleur-gris4;
110                                }
111                        }
112                        .nb_comments {
113                                display: block;
114                                .fa {
115                                        color: $couleur-gris4;
116                                }
117                                &.comments_0 .fa {
118                                        color: $couleur-nocomment;
119                                }
120                                &.resolu .fa {
121                                        color: $couleur-resolu;
122                                }
123                        }
124                }
125                .ligneSujet__description {
126                        flex-grow: 1;
127                        .titre { margin-bottom:0;}
128                        p { margin-bottom:0; }
129                }
130
131                .publication {
132                        background:$couleur-gris5;
133                        padding:.2em .3em;
134                        margin: .2em 0;
135                        display:flex;
136                        flex-direction: row;
137                        font-size: .9em;
138
139                        .publication__logo {
140                                width: 20px;
141                                flex: 0 0 20px;
142                                img { vertical-align: top; margin-top:1px; }
143                        }
144                        .publication__auteur {
145                                margin-left:.5em;
146                                flex-grow: 1;
147                        }
148                        .publication_date {
149                                width:16em;
150                                flex: 0 0 16em;
151                                text-align:right;
152                        }
153                }
154        }
155
156}
157
158.contentExtra__main {
159        background:    white;
160        padding:       1em;
161        @include media($bp-medium-up) {
162                padding: em(48px) 5%;
163        }
164        @include media($bp-large-up) {
165                padding: em(48px) 12.5%;
166        }
167        margin-bottom: em(16px);
168}
169
170.contentNav {
171        .contentNav__user {
172                background: white;
173                padding: em(24px);
174                margin-bottom: 4px;
175                .username { display:block; }
176                .bio { font-size: .9em; }
177                .user--links {
178                        list-style-type: none;
179                        margin:.5em 0 0 0;
180                        & > li {
181                                &:not(:last-child) { margin-bottom:.5em; }
182                                .fa {
183                                        padding-right: .3em;
184                                }
185                        }
186                }
187        }
188        .contentNav__main {
189                margin-bottom:5px;
190                padding-top: em(8px);
191                padding-bottom: em(8px);
192
193                .contentNav__racine {
194                        margin-left:  em(-8px);
195
196                        .contentNav__article {
197                                padding:0;
198                                margin-bottom:.5em;
199
200                                a {
201                                        padding: .2em .5em .2em 1em;
202                                        margin:.5em 0;
203                                        color: $couleur-lien;
204
205                                        .titre {
206                                                margin-bottom:0; display:block;
207                                        }
208                                        &:hover, &:focus {
209                                                text-decoration: none;
210                                                .titre { text-decoration: underline; }
211                                        }
212                                }
213                                &.active {
214                                        border-left-width: 10px;
215                                        margin-left: -5px;
216                                        & > a {
217                                                background: none;
218                                                &:hover,
219                                                &:focus {
220                                                        color: $couleur-nav;
221                                                }
222                                        }
223                                }
224
225                        }
226                }
227        }
228
229        .bouton.block-link-parent .fa {
230                width:     em(14px);
231                float:     right;
232                right:     1em;
233                position:  absolute;
234                top:       50%;
235                transform: translateY(-50%);
236        }
237        .bouton_faq .fa { color: $couleur-faq; }
238}
239
240.onglets {
241        display:flex;
242        /*border-bottom:1px solid $couleur-bordure;*/
243        font-size:.9em;
244        padding-left:5em;
245        a {
246                text-align:center;
247                padding:.3em 1em;
248                background-color: $couleur-gris5;
249                margin-right:4px;
250                &.on {
251                        background-color: $couleur-lien-hover;
252                        color:white;
253                }
254                &:hover, &:focus {
255                        background-color: $couleur-lien;
256                        color:white;
257                        text-decoration:none;
258                }
259                .fa.votes { color: $couleur-votes; margin-right:.2em; }
260                .fa.sans_reponse { color: $couleur-nocomment; margin-right:.2em; }
261        }
262}
263
264/* présentation d’un auteur */
265.shortdesc {
266        display:flex;
267        flex-direction: row;
268        .shortdesc--logo {
269                width:120px;
270        }
271}
272
273/* Colorer pour rendre visible tous les formulaires */
274.formulaire_spip:not(.formulaire_recherche) {
275        background: $couleur-gris5;
276        padding:1em;
277}
278
279/* Comprimer le formulaire de login */
280.formulaire_login {
281        position:relative;
282        #pass_securise { float:right; }
283        .editer_password .details { margin-bottom:0; }
284        .editer_session { margin-bottom:0; }
285        fieldset { margin:0; }
286        .boutons { margin-top:0; padding:0; position:absolute; bottom:1em; right:1em; }
287}
288
289#cboxContent {
290        .contentLogin {
291                .cartouche { display:none; }
292        }
293}
Note: See TracBrowser for help on using the repository browser.