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

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

Suite de 114486, dont le log n'a rien à voir (erreur de commit)
Pétouilles sur l'affichage des formulaires et fieldsets, listes d'objets, et rangement

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