source: spip-zone/_plugins_/prive_fluide/branches/remix/prive/style_prive_plugin_prive_fluide_remix.html @ 114486

Last change on this file since 114486 was 114486, checked in by nicod@…, 18 months ago

Gérer les secteurs (mots clés)

File size: 14.6 KB
Line 
1[(#REM)
2<style>/*
3
4  Ce squelette remixe les styles de l'espace prive
5
6  Note: l'entete "Vary:" sert a repousser l'entete par
7  defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
8  genant en cas de "rotation du cookie de session" apres
9  un changement d'IP (effet de clignotement).
10
11  ATTENTION: il faut absolument le charset sinon Firefox croit que
12  c'est du text/html !
13*/
14]
15#CACHE{3600 *100, cache-client}
16#HTTP_HEADER{Content-Type: text/css;charset=iso-8859-15}
17#HTTP_HEADER{Vary: Accept-Encoding}
18
19*,
20*:before,
21*:after {
22        box-sizing: border-box;
23}
24
25span.icone a img,
26.puce_objet_popup img {
27        box-sizing: content-box;
28}
29
30@font-face {
31        font-family: 'Lato';
32        src: url('#CHEMIN{webfonts/lato-black-webfont.woff2}') format('woff2'),
33        url('#CHEMIN{webfonts/lato-black-webfont.woff}') format('woff');
34        font-weight: 900;
35        font-style: normal;
36}
37
38@font-face {
39        font-family: 'Lato';
40        src: url('#CHEMIN{webfonts/lato-blackitalic-webfont.woff2}') format('woff2'),
41        url('#CHEMIN{webfonts/lato-blackitalic-webfont.woff}') format('woff');
42        font-weight: 900;
43        font-style: italic;
44}
45
46@font-face {
47        font-family: 'Lato';
48        src: url('#CHEMIN{webfonts/lato-bold-webfont.woff2}') format('woff2'),
49        url('#CHEMIN{webfonts/lato-bold-webfont.woff}') format('woff');
50        font-weight: 700;
51        font-style: normal;
52}
53
54@font-face {
55        font-family: 'Lato';
56        src: url('#CHEMIN{webfonts/lato-bolditalic-webfont.woff2}') format('woff2'),
57        url('#CHEMIN{webfonts/lato-bolditalic-webfont.woff}') format('woff');
58        font-weight: 700;
59        font-style: italic;
60}
61
62@font-face {
63        font-family: 'Lato';
64        src: url('#CHEMIN{webfonts/lato-italic-webfont.woff2}') format('woff2'),
65        url('#CHEMIN{webfonts/lato-italic-webfont.woff}') format('woff');
66        font-weight: normal;
67        font-style: italic;
68}
69
70@font-face {
71        font-family: 'Lato';
72        src: url('#CHEMIN{webfonts/lato-regular-webfont.woff2}') format('woff2'),
73        url('#CHEMIN{webfonts/lato-regular-webfont.woff}') format('woff');
74        font-weight: normal;
75        font-style: normal;
76}
77
78/*=======================================
79  remix de l'espace privé
80========================================*/
81
82/*---------------------------------------
83  typo générale : Lato, 16px (1em)
84----------------------------------------*/
85
86body {
87        font-family: 'Lato', 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
88        font-size: 1em;
89}
90
91/* prévisualisation du contenu éditorial */
92#wysiwyg {
93        max-width: 45em; /* ~70 caractères par ligne */
94}
95/* pas de justification, c'est mal, et pas de césure auto */
96#wysiwyg .champ,.preview {
97        font-size: 1.1em;
98        -moz-hyphens:none;
99        -webkit-hyphens:none;
100        -khtml-hyphens:none;
101        -ms-hyphens:none;
102        -o-hyphens:none;
103        hyphens:none;
104        text-align: #ENV{left};
105}
106
107
108.liste-objets tr td {
109        font-size: 1em;
110}
111.liste-objets tr > td.secondaire,
112.liste-objets tr > td:not(.principale):not(.titre) {
113        font-size: .9em;
114}
115.liste-objets tr > td > span {
116        font-size: inherit;
117}
118.liste-objets tr > .date,
119.liste-objets tr > .auteur {
120        min-width: 130px;
121}
122
123.formulaire_spip .toggle_box_link {
124        font-size: 0.9em;
125}
126
127.formulaire_spip .toggle_box_link button {
128        font-size: 1em;
129}
130
131#chemin {
132        font-size: 0.85em;
133}
134
135#chemin strong.on {
136        font-weight: normal;
137}
138
139div.en_lignes {
140        font-size: 0.85em;
141}
142
143.liste-objets table caption strong.caption {
144        font-size: 1.1em;
145}
146
147.item_picker .liste a.choisir {
148        top: .3em;
149}
150
151.inner .hd + .bd > *:first-child {
152        padding-top: .3em;
153}
154/*--------------------------------------
155  bandeau principal 
156----------------------------------------*/
157
158#bando_identite {
159        font-size: 0.9em;
160        letter-spacing: inherit;
161}
162
163#bando_navigation ul.deroulant > li a {
164        font-size: 0.9em;
165}
166
167/*--------------------------------------
168  boites, listes 
169----------------------------------------*/
170
171.liste-objets {
172        border-radius: 5px;
173}
174
175.inner .liste-objets.articles {
176        margin-bottom: 0;
177}
178
179/* espacer un peu les liens */
180.pagination {
181        padding: 4px 8px !important;
182        font-size: 0.9em !important;
183}
184
185.pagination a, .pagination strong.on {
186        padding: 0 6px !important;
187}
188
189h3.titrem,
190.lat .formulaire_spip h3.titrem {
191        padding-top: 12px;
192        padding-bottom: 12px;
193        font-size: 1.1em;
194}
195
196.highlight > .inner {
197        box-shadow: none;
198}
199
200.inner .hd + .bd {
201        padding-top: 0;
202}
203
204.liste-plugins .liste-items {
205        margin-left: 0;
206        margin-right: 0;
207}
208
209/*--------------------------------------
210  boites documents joints 
211----------------------------------------*/
212
213#documents_joints .item .titrem,
214#documents_joints .item .raccourcis,
215#documents_joints .item .actions,
216#documents_joints .item div.mode {
217        font-size: 0.85em;
218}
219
220#documents_joints .item .tourner button {
221        padding: 1px 4px;
222}
223
224.formulaire_editer_logo > h3.titrem,
225.formulaire_joindre_document > h3.titrem {
226        margin-bottom: 0;
227}
228
229/*--------------------------------------
230  Virer la plupart des icones 
231  sauf les boites de rubriques et
232  dans les barres d'onglets
233----------------------------------------*/
234
235.liste-objets .caption {
236        background-image: none !important;
237        padding-#ENV{left}: inherit !important;
238}
239
240a.plus_info,
241.cadre-icone {
242        display: none;
243}
244
245.sous-rub .cadre-icone,
246.barre_onglet .cadre-icone {
247        display: block;
248}
249
250.sous-rub h3.titrem a.titremancre {
251        padding: 8px 10px;
252        background-position: center;
253}
254
255.barre_onglet .cadre-icone {
256        top: 3px;
257        #ENV{left}: 6px;
258}
259
260.barre_onglet .cadre-icone + a,
261.barre_onglet .cadre-icone + strong {
262        padding-#ENV{left}: 38px;
263}
264
265/*--------------------------------------
266  Formulaires
267----------------------------------------*/
268
269.formulaire_spip {
270        padding: 0;
271}
272.formulaire_spip .editer-groupe,
273.formulaire_spip .boutons,
274.formulaire_spip .titrem,
275.formulaire_spip .legend {
276        margin-left: 0;
277        margin-right: 0;
278}
279.formulaire_spip .fieldset fieldset,
280.formulaire_spip fieldset {
281        margin-left: -10px;
282        margin-right: -10px;
283        margin-top: 1.5em;
284        margin-bottom: 1.5em;
285}
286.formulaire_spip .fieldset fieldset .editer-groupe,
287.formulaire_spip fieldset .editer-groupe {
288        margin-left: 0;
289        margin-right: 0;
290}
291.formulaire_spip  .editer-groupe {
292        padding: 0;
293}
294
295.entete-formulaire > .icone.#ENV{left} {
296        margin-#ENV{right}: 1em;
297}
298
299.formulaire_spip input.text,
300.formulaire_spip input.email,
301.formulaire_spip input.password,
302.formulaire_spip textarea,
303.formulaire_spip select,
304.formulaire_spip .choix {
305        width: 100%;
306        background: white;
307        padding: 0.5em;
308        border: 1px solid #ddd;
309        border-radius: 4px;
310        font-size: inherit;
311        font-family: inherit;
312}
313.formulaire_spip .obligatoire input.text,
314.formulaire_spip .obligatoire input.email,
315.formulaire_spip .obligatoire select,
316.formulaire_spip .obligatoire .choix {
317        font-weight: bold;
318}
319.formulaire_spip textarea {
320        line-height: 1.6;
321}
322.formulaire_spip .choix {
323        border-bottom: none;
324        display: flex;
325        align-items: flex-start;
326}
327.formulaire_spip .choix > input {
328        margin-top: 0.4em;
329}
330.formulaire_spip .choix > label {
331        width: auto;
332}
333
334/* Labels plus larges */
335
336.formulaire_spip .editer,
337.formulaire_spip .editer.gauche {
338        padding-#ENV{left}: 170px;
339}
340.formulaire_spip .editer.droite {
341        padding-right: 170px;
342}
343.formulaire_spip .editer > label,
344.formulaire_spip .editer.gauche > label {
345        width: 144px;
346        margin-#ENV{left}: -160px;
347        margin-top: 0.5em;
348        display: inline-block;
349        float: #ENV{left};
350}
351.formulaire_spip .editer.droite > label {
352        margin-right: -160px;
353}
354
355/* Labels longs */
356
357.formulaire_spip .long_label {padding-#ENV{left}:280px;}
358.formulaire_spip .long_label > label {width: 260px;margin-#ENV{left}:-270px;}
359
360/* Formulaires avec label en haut */
361/* les cas particuliers des edition pleines largeur */
362
363.formulaire_spip .editer_parent,
364.formulaire_spip .editer_groupe_mot,
365.formulaire_spip .editer_descriptif,
366.formulaire_spip .editer_chapo,
367.formulaire_spip .editer_texte,
368.formulaire_spip .editer_ps,
369.formulaire_spip .haut,
370.formulaire_spip .pleine_largeur { padding-#ENV{left}:10px;}
371
372.formulaire_spip .editer_parent label,
373.formulaire_spip .editer_groupe_mot label,
374.formulaire_spip .editer_descriptif label,
375.formulaire_spip .editer_chapo label,
376.formulaire_spip .editer_texte label,
377.formulaire_spip .editer_ps label,
378.formulaire_spip .haut label,
379.formulaire_spip .pleine_largeur>label {display: block;float: none;width:auto;margin-#ENV{left}: 0;}
380
381/* Fieldsets et legends */
382
383.formulaire_spip h3.legend,
384.formulaire_spip legend {
385        font-weight: normal;
386        font-size:   1.1em;
387        padding: 0.5em 10px;
388        margin-bottom: .34625em;
389}
390.formulaire_spip legend {
391        width: 100%;
392        display: block;
393        overflow: hidden;
394}
395.formulaire_spip fieldset {
396        border: none;
397        border-top: none; /* à garder */
398}
399.formulaire_spip .fieldset {
400        margin-bottom: 1.5em;
401}
402
403/* specificités de certains formulaires */
404
405.formulaire_spip.formulaire_dater {
406        background: #f5f5f5;
407}
408.formulaire_spip.formulaire_dater label,
409.formulaire_spip.formulaire_dater .affiche {
410        font-size: 80%;
411        font-weight: normal;
412        color: #555;
413}
414.formulaire_spip.formulaire_dater .aide.popin {
415        display: none;
416}
417.formulaire_dater .editer > label {
418        margin-top: 0;
419}
420.formulaire_dater .long_label {
421        margin-top: .25em;
422}
423
424.formulaire_editer_auteur .editer.editer_statut {
425        margin-bottom: 10px;
426}
427.formulaire_editer_auteur .editer.editer_statut .instituer_auteur {
428        margin-left: 0;
429}
430
431.formulaire_configurer_urls .editer_type_urls .choix {
432        display: block;
433}
434.formulaire_spip.formulaire_traduire .editer {
435        padding-top: 0;
436        padding-bottom: 0;
437}
438.formulaire_spip.formulaire_traduire .editer > label {
439        margin-top: 0;
440}
441
442.lat .formulaire_spip h3.titrem {
443        margin-bottom: 0;
444}
445.lat .formulaire_spip .editer {
446        padding: .34625em 10px;
447}
448.lat .formulaire_spip .editer label {
449        margin-top: 0;
450        margin-bottom: .25em;
451        margin-left: 0;
452}
453.lat .formulaire_spip select,
454.lat .formulaire_spip input.text,
455.lat .formulaire_spip input.search,
456.lat .formulaire_spip input.date,
457.lat .formulaire_spip textarea {
458        width:100%;
459        padding:.25em;
460}
461.lat .formulaire_spip .boutons {
462        border-top: none;
463}
464.lat .formulaire_spip .submit {
465        margin-bottom: 0;
466}
467.lat .formulaire_editer_logo .editer_logo_on.logo_upload {
468        background: none;
469}
470
471/*--------------------------------------
472  En dessous de 980px, les formulaires
473  passent sur une seule colonne
474----------------------------------------*/
475
476@media (max-width: 980px) {
477       
478        .formulaire_spip .editer-groupe,
479        .formulaire_spip fieldset,
480        .formulaire_spip fieldset .editer-groupe,
481        .formulaire_spip .editer .boutons,
482        .formulaire_spip .legend {
483                margin-left: 0;
484                margin-right: 0;
485        }
486       
487        .formulaire_spip .editer,
488        .formulaire_spip .editer.gauche,
489        .formulaire_spip .editer.droite {
490                padding: 0.5em 0;       
491        }
492        .formulaire_spip .editer_parent {
493                padding-left: 0.5em;
494                padding-right: 0.5em;
495        }
496       
497        .formulaire_spip .editer label,
498        .formulaire_spip .editer.gauche label,
499        .formulaire_spip .editer.droite label {
500                display: block;
501                width: auto;
502                float: none;
503                margin: 0 0 0.25em 0;
504        }
505       
506        .formulaire_spip .choix {
507                border-top: none;
508                border-bottom: none;
509        }
510        .formulaire_spip .choix label {
511                display: inline-block;
512                margin-bottom: 0;
513                vertical-align: middle;
514                margin-#ENV{left}: 0.25em;
515        }
516       
517        .formulaire_spip h3:not(.titrem) {
518                margin-top: 1em;
519                margin-bottom: 1em;
520        }
521
522        /* supprimer la largeur fixe de 600px */
523        body.large.edition #contenu,
524        .articles_edit.large #contenu,
525        .mots_edit.large #contenu,
526        .breves_edit.large #contenu,
527        .rubriques_edit.large #contenu {
528                width:auto;
529        }
530        .large #contenu {
531                margin-left: 0;
532        }
533
534}
535
536
537/*
538  CSS copiée du plugin prive_fluide de tcharlss
539  Nécessite une surcharge de prive/squelettes/body pour supprimer le div entourant #extra et l'intégrer dans #navigation
540*/
541
542/*=======================================
543  redimensionnement de l'espace privé
544========================================*/
545
546/*
547  Grande largeur pour tout le monde, on ignore les préférences utilisateur
548*/
549
550body,
551body.large {
552        min-width: auto;
553}
554
555.largeur, #conteneur, .table_page,
556.large .largeur, .large #conteneur, .large .table_page {
557        width: auto !important;
558        max-width: 1100px;
559}
560
561#bando_haut .largeur,
562#haut,
563#conteneur,
564#pied .largeur,
565.table_page {
566        padding: 0;
567}
568
569#bando_haut > div,
570#page .largeur {
571        padding: 0 1em;
572}
573
574#bando_outils,
575#bando_haut #bando_liens_rapides {
576        width: auto;
577}
578
579/*=======================================
580  Layout
581========================================*/
582
583/*
584  On passe les 3 items #contenu, #navigation et #extra en flexbox.
585  De base, une colonne et on place #contenu en premier.
586*/
587
588#conteneur {
589        display: -webkit-box;
590        display: -ms-flexbox;
591        display: flex;
592        -webkit-box-orient: vertical;
593        -webkit-box-direction: normal;
594        -ms-flex-direction: column;
595        flex-direction: column;
596}
597
598#contenu, #navigation, #extra {
599        float: none;
600        width: auto;
601}
602
603/* ordre des items */
604#contenu {
605        -webkit-box-ordinal-group: 2;
606        -ms-flex-order: 1;
607        order: 1;
608        margin-#ENV{left}: 0;
609}
610
611#navigation {
612        -webkit-box-ordinal-group: 3;
613        -ms-flex-order: 2;
614        order: 2;
615}
616
617#extra {
618        -webkit-box-ordinal-group: 4;
619        -ms-flex-order: 3;
620        order: 3;
621}
622
623/*=======================================
624  Responsive
625========================================*/
626
627/*
628    On passe en colonnes au-delà de 780px
629    Cette valeur est tirée de la largeur minimale de la page par défaut dans les styles vanilla de SPIP.
630    Quand #navigation ou #extra sont vides, le contenu central s'adapte pour prendre tout l'espace disponible.
631    Malheureusement on ne peut pas mettre de largeur en pourcentage pour les colonnes, sinon on a des colonnes fantomes en absence de contenu.
632*/
633
634@media (min-width: 780px) {
635
636        /* Conteneur */
637        #conteneur {
638                -webkit-box-orient: horizontal;
639                -webkit-box-direction: normal;
640                -ms-flex-direction: row;
641                flex-direction: row;
642        }
643
644        #contenu, #navigation, #extra {
645                width: auto !important;
646        }
647
648        /* contenu principal */
649        #contenu {
650                width: 70% !important;
651                -webkit-box-flex: 1;
652                -ms-flex-positive: 1;
653                flex-grow: 1;
654                -webkit-box-ordinal-group: 3;
655                -ms-flex-order: 2;
656                order: 2;
657                margin-#ENV{left}: 30px !important;
658        }
659
660        /* colonne */
661        #navigation, #extra {
662                width: initial !important; /* pas de colonne fantome en abscence de contenu */
663                /*width: 30% !important;*/
664                -webkit-box-flex: 0;
665                -ms-flex-positive: 0;
666                flex-grow: 0; /* pas de colonne fantome en abscence de contenu */
667                -ms-flex-negative: 1;
668                flex-shrink: 1;
669                -webkit-box-ordinal-group: 2;
670                -ms-flex-order: 1;
671                order: 1;
672        }
673        /* Hack : on met une largeur au contenu des colonnes latérales,
674        ainsi quand elles sont vides, elles se collapsent */
675        #navigation > .ajaxbloc > *,
676        #navigation > :not(.ajaxbloc),
677        #extra > .ajaxbloc > *,
678        #extra > :not(.ajaxbloc) {
679                width: calc(8em + 12vw);
680        }
681       
682        /* largeur de colonne : on cible le premier contenu pour éviter une colonne fantome en abscence de contenu */
683        #navigation > .ajaxbloc:first-child > * {
684                /* width: 18 rem; */
685        }
686}
687
688/*
689  Bandeau identité sur petits écrans : chaque bloc sur une seule ligne
690 */
691@media (max-width: 780px) {
692        #bando_identite p.nom_site_spip,
693        #bando_identite p.session {
694                display: flex;
695                justify-content: space-between;
696                flex-wrap: wrap;
697                width: 100%;
698                float: none;
699                text-align:#ENV{left};
700        }
701
702        #bando_identite p.nom_site_spip a,
703        #bando_identite p.session a {
704                white-space: nowrap;
705        }
706}
Note: See TracBrowser for help on using the repository browser.