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

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

Ne pas mettre les onglets sur la page thread s’il n’y a pas de réponse.
Intégration différente du coup du formulaire de forum.

File size: 8.3 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
90.ligneSujet {
91        display:flex;
92        @for $i from 1 to length($couleur-chapitre-vif) + 1 {
93                &.c#{$i} .ligneSujet__enbref .categorie .fa {
94                        color: nth($couleur-chapitre-vif, $i);
95                }
96        }
97        .ligneSujet__enbref {
98                font-size: .9em;
99                text-align:right;
100                width:5em;
101                flex: 0 0 5em; /* 999 votes */
102                padding-right:1em;
103                margin-right:1em;
104                border-right:4px solid $couleur-gris5;
105                .categorie {}
106                .nb_votes {
107                        display: block;
108                        .fa {
109                                color: $couleur-votes;
110                        }
111                        &.votes_plus .fa {
112                                color: $couleur-votes-plus;
113                        }
114                        &.votes_moins .fa {
115                                color: $couleur-votes-moins;
116                        }
117                }
118                .nb_comments {
119                        display: block;
120                        .fa {
121                                color: $couleur-gris4;
122                        }
123                        &.comments_0 .fa {
124                                color: $couleur-nocomment;
125                        }
126                }
127                .resolu {
128                        display: block;
129                        .fa {
130                                color: $couleur-resolu;
131                        }
132                }
133        }
134        .ligneSujet__description {
135                flex-grow: 1;
136                .titre {
137                        margin-bottom: 0;
138                }
139        }
140        &:not(.complet) {
141                .ligneSujet__description {
142                        p { margin-bottom:0; }
143                }
144        }
145
146        .publication {
147                background:$couleur-gris5;
148                padding:.2em .3em;
149                margin: .2em 0;
150                display:flex;
151                flex-direction: row;
152                font-size: .9em;
153
154                .publication__logo {
155                        width: 20px;
156                        flex: 0 0 20px;
157                        img { vertical-align: top; margin-top:1px; }
158                }
159                .publication__auteur {
160                        margin-left:.5em;
161                        flex-grow: 1;
162                }
163                .publication_date {
164                        width:16em;
165                        flex: 0 0 16em;
166                        text-align:right;
167                }
168        }
169}
170
171.contentExtra__main {
172        background:    white;
173        padding:       1em;
174        @include media($bp-medium-up) {
175                padding: em(48px) 5% em(48px) 0;
176                .extra__forum {  padding-left:5%; }
177        }
178        @include media($bp-large-up) {
179                padding: em(48px) 12.5% em(48px) 5%;
180                .extra__forum { padding-left:9%; }
181        }
182        margin-bottom: em(16px);
183
184}
185
186.body--thread {
187        .contentMain__main {
188                @include media($bp-medium-up) {
189                        padding-left:0;
190                }
191                @include media($bp-large-up) {
192                        padding-left:5%;
193                }
194        }
195        .ligneSujet__enbref {
196                .nb_comments { margin-bottom:1em; }
197                .resolu { font-size:2em; }
198        }
199        .contentMain__main .ligneSujet__enbref,
200        .meme_auteur .ligneSujet__enbref {
201                border-right:4px solid $couleur-meme-auteur;
202        }
203}
204
205.contentNav {
206        .contentNav__user {
207                background: white;
208                padding: em(24px);
209                margin-bottom: 4px;
210                .username { display:block; }
211                .bio { font-size: .9em; }
212                .user--links {
213                        list-style-type: none;
214                        margin:.5em 0 0 0;
215                        & > li {
216                                &:not(:last-child) { margin-bottom:.5em; }
217                                .fa {
218                                        padding-right: .3em;
219                                }
220                        }
221                }
222        }
223        .contentNav__main {
224                margin-bottom:5px;
225                padding-top: em(8px);
226                padding-bottom: em(8px);
227
228                .contentNav__racine {
229                        margin-left:  em(-8px);
230
231                        .contentNav__article {
232                                padding:0;
233                                margin-bottom:.5em;
234
235                                a {
236                                        padding: .2em .5em .2em 1em;
237                                        margin:.5em 0;
238                                        color: $couleur-lien;
239
240                                        .titre {
241                                                margin-bottom:0; display:block;
242                                        }
243                                        &:hover, &:focus {
244                                                text-decoration: none;
245                                                .titre { text-decoration: underline; }
246                                        }
247                                }
248                                &.active {
249                                        border-left-width: 10px;
250                                        margin-left: -5px;
251                                        & > a {
252                                                background: none;
253                                                &:hover,
254                                                &:focus {
255                                                        color: $couleur-nav;
256                                                }
257                                        }
258                                }
259
260                        }
261                }
262        }
263
264        .bouton.block-link-parent .fa {
265                width:     em(14px);
266                float:     right;
267                right:     1em;
268                position:  absolute;
269                top:       50%;
270                transform: translateY(-50%);
271        }
272        .bouton_faq .fa { color: $couleur-faq; }
273}
274
275.onglets {
276        display:flex;
277        /*border-bottom:1px solid $couleur-bordure;*/
278        font-size:.9em;
279        padding-left:5em;
280        a {
281                text-align:center;
282                padding:.3em .7em;
283                background-color: $couleur-gris5;
284                margin-right:4px;
285                &.on {
286                        background-color: $couleur-lien-hover;
287                        color:white;
288                }
289                &:hover, &:focus {
290                        background-color: $couleur-lien;
291                        color:white;
292                        text-decoration:none;
293                }
294                .label, .badge {
295                        background-color: $couleur-lien;
296                        transition: background-color 0.3s, color 0.3s;
297                }
298                &.on, &:hover, &:focus {
299                        .fa {
300                                color: white !important;
301                                transition: color 0.3s;
302                        }
303                        .label, .badge {
304                                background:white;
305                                color: $couleur-lien !important;
306                                .fa { color: $couleur-lien !important; }
307                        }
308                }
309                .fa.votes { color: $couleur-votes-plus; margin-right:.2em; }
310                .fa.sans_reponse { color: $couleur-nocomment; margin-right:.2em; }
311                .fa.faq { color: $couleur-faq; margin-right:.2em; }
312        }
313        & + .onglets {
314                margin-top:.5em;
315        }
316        a.on .badge,
317        a.on .label {
318                background:white
319        }
320}
321
322.label, .badge {
323        background-color: $couleur-gris4;
324        color: #fff;
325        font-size: 0.75em;
326        line-height: 1.75;
327        font-weight: bold;
328        padding: 0px 7px;
329        text-align: center;
330        vertical-align: baseline;
331        white-space: nowrap;
332}
333.badge {
334        border-radius: 10px;
335        display: inline-block;
336}
337.label {
338        border-radius: 4px;
339        display: inline;
340}
341
342/* présentation d’un auteur */
343.shortdesc {
344        display:flex;
345        flex-direction: row;
346        .shortdesc--logo {
347                width:120px;
348        }
349}
350
351/* Colorer pour rendre visible tous les formulaires */
352.formulaire_spip:not(.formulaire_recherche) {
353        background: $couleur-gris5;
354        padding:1em;
355}
356
357/* Comprimer le formulaire de login */
358.formulaire_login {
359        position:relative;
360        #pass_securise { float:right; }
361        .editer_password .details { margin-bottom:0; }
362        .editer_session { margin-bottom:0; }
363        fieldset { margin:0; }
364        .boutons { margin-top:0; padding:0; position:absolute; bottom:1em; right:1em; }
365}
366
367/* pas d’intro dans la modale de login */
368#cboxContent {
369        .contentLogin {
370                .cartouche { display:none; }
371        }
372}
373
374.formulaire_forum {
375        margin-top:1em;
376        .explication {
377                font-size:.8em;
378        }
379        .titre_groupe {
380                font-weight: normal;
381                display:inline-block;
382        }
383        .choix_mots {
384                margin-left:1em;
385                margin-bottom:1em;
386                columns:3;
387                @include media($bp-medium) {
388                        columns:2;
389                }
390                @include media($bp-small) {
391                        columns:1;
392                }
393        }
394        .editer_notification {
395                border: 1px solid #ddd;
396                border-radius: 5px;
397                background: rgba(255,255,255,.3);
398                padding-left: 1em;
399                margin-bottom: 0;
400                .choix label {
401                        font-size: .9em;
402                }
403        }
404        fieldset.commentaire { margin-bottom: 0; }
405}
406
407.formulaire_jaime_jaimepas {
408        margin:0; padding:0;
409        background:none;
410        fieldset, .editer-groupe, .editer {
411                margin:0; padding:0;
412                background:none;
413        }
414        .editer {
415                line-height:1em;
416                .fa {
417                        font-size:2em;
418                        color:$couleur-gris5;
419                }
420                & button:hover, & button:focus {
421                        .fa {
422                                transition: color 0.3s;
423                                color:$couleur-lien;
424                        }
425                }
426                .nb_votes {
427                        font-size:1.5em;
428                        position: relative;
429                        right: -.6em;
430                        text-align: center;
431                        margin-top: .3em;
432                        color: $couleur-votes;
433                }
434        }
435}
436
437.depliable {
438        position: relative;
439        margin-left:1em;
440        cursor: pointer;
441        &:before {
442                content: '';
443                position: absolute;
444                top: 0.5em;
445                transform: rotate(180deg);
446                left: -0.8em;
447                width: 0;
448                height: 0;
449                /* flèche à droite */
450                border-left: 4px solid transparent;
451                border-right: 4px solid transparent;
452                border-bottom: 6px solid $couleur-nav-fleche;
453                transform: rotate(90deg);
454                transition-property: position, transform, border-color;
455                transition-duration: 0.2s;
456        }
457
458        &:not(.ouverte) {
459                &:hover:before,
460                &:focus:before {
461                        border-bottom-color: $couleur-nav-fleche-hover;
462                }
463        }
464        &.ouverte {
465                &:before {
466                        // triangle vers le bas
467                        transform: rotate(180deg);
468                        border-bottom-color: $couleur-nav-fleche-hover;
469                }
470        }
471}
Note: See TracBrowser for help on using the repository browser.