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

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

Formulaire traduire plus compact

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