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

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

Pétouille d'alignement de puce.

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