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

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

Plutôt des points aussi pour la présentation textuelle des catégorie (tcharles)

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