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

Last change on this file since 112010 was 112010, checked in by nicod@…, 2 years ago

Style des fieldsets, pas de bold sur les textarea obligatoires

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