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

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

Style des formulaires dans la colonne de gauche (un peu plus compacts et homogènes)

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