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

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

Traiter les champs .email comme les autres

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 textarea,
276.formulaire_spip .obligatoire select,
277.formulaire_spip .obligatoire .choix {
278        font-weight: bold;
279}
280.formulaire_spip textarea {
281        line-height: 1.6;
282}
283.formulaire_spip .choix {
284        border-bottom: none;
285        display: flex;
286        align-items: flex-start;
287}
288.formulaire_spip .choix > input {
289        margin-top: 0.4em;
290}
291.formulaire_spip .choix > label {
292        width: auto;
293}
294
295/* Labels plus larges */
296
297.formulaire_spip .editer,
298.formulaire_spip .editer.gauche {
299        padding-#ENV{left}: 170px;
300}
301.formulaire_spip .editer.droite {
302        padding-right: 170px;
303}
304.formulaire_spip .editer > label,
305.formulaire_spip .editer.gauche > label {
306        width: 144px;
307        margin-#ENV{left}: -160px;
308        margin-top: 0.5em;
309        display: inline-block;
310        float: #ENV{left};
311}
312.formulaire_spip .editer.droite > label {
313        margin-right: -160px;
314}
315
316/* Labels longs */
317
318.formulaire_spip .long_label {padding-#ENV{left}:280px;}
319.formulaire_spip .long_label > label {width: 260px;margin-#ENV{left}:-270px;}
320
321/* Formulaires avec label en haut */
322/* les cas particuliers des edition pleines largeur */
323
324.formulaire_spip .editer_parent,
325.formulaire_spip .editer_groupe_mot,
326.formulaire_spip .editer_descriptif,
327.formulaire_spip .editer_chapo,
328.formulaire_spip .editer_texte,
329.formulaire_spip .editer_ps,
330.formulaire_spip .haut,
331.formulaire_spip .pleine_largeur { padding-#ENV{left}:10px;}
332
333.formulaire_spip .editer_parent label,
334.formulaire_spip .editer_groupe_mot label,
335.formulaire_spip .editer_descriptif label,
336.formulaire_spip .editer_chapo label,
337.formulaire_spip .editer_texte label,
338.formulaire_spip .editer_ps label,
339.formulaire_spip .haut label,
340.formulaire_spip .pleine_largeur>label {display: block;float: none;width:auto;margin-#ENV{left}: 0;}
341
342/* Fieldsets et legends */
343
344.formulaire_spip h3.legend,
345.formulaire_spip legend {
346        font-weight: normal;
347        font-size:   1.1em;
348        padding: 0.5em 10px;
349        margin-bottom: .34625em;
350}
351.formulaire_spip legend {
352        width: calc(100% - 1em);
353        display: block;
354        overflow: hidden;
355}
356.formulaire_spip fieldset {
357        border: none;
358        border-top: none; /* à garder */
359}
360
361.lat .formulaire_spip .editer {
362        padding: .34625em 10px;
363}
364.lat .formulaire_spip .editer label {
365        margin-bottom: .5em;
366}
367
368.formulaire_dater .editer > label {
369        margin-top: 0;
370}
371.formulaire_dater .long_label {
372        margin-top: .5em;
373}
374
375/*--------------------------------------
376  En dessous de 980px, les formulaires
377  passent sur une seule colonne
378----------------------------------------*/
379
380@media (max-width: 980px) {
381       
382        .formulaire_spip .editer-groupe,
383        .formulaire_spip fieldset,
384        .formulaire_spip fieldset .editer-groupe,
385        .formulaire_spip .editer .boutons,
386        .formulaire_spip .legend {
387                margin-left: 0;
388                margin-right: 0;
389        }
390       
391        .formulaire_spip .editer,
392        .formulaire_spip .editer.gauche,
393        .formulaire_spip .editer.droite {
394                padding: 0.5em 0;       
395        }
396        .formulaire_spip .editer_parent {
397                padding-left: 0.5em;
398                padding-right: 0.5em;
399        }
400       
401        .formulaire_spip .editer label,
402        .formulaire_spip .editer.gauche label,
403        .formulaire_spip .editer.droite label {
404                display: block;
405                width: auto;
406                float: none;
407                margin: 0 0 0.25em 0;
408        }
409       
410        .formulaire_spip .choix {
411                border-top: none;
412                border-bottom: none;
413        }
414        .formulaire_spip .choix label {
415                display: inline-block;
416                margin-bottom: 0;
417                vertical-align: middle;
418                margin-#ENV{left}: 0.25em;
419        }
420       
421        .formulaire_spip h3:not(.titrem) {
422                margin-top: 1em;
423                margin-bottom: 1em;
424        }
425
426        /* supprimer la largeur fixe de 600px */
427        body.large.edition #contenu,
428        .articles_edit.large #contenu,
429        .mots_edit.large #contenu,
430        .breves_edit.large #contenu,
431        .rubriques_edit.large #contenu {
432                width:auto;
433        }
434        .large #contenu {
435                margin-left: 0;
436        }
437
438}
439
440
441/*
442  CSS copiée du plugin prive_fluide de tcharlss
443  Nécessite une surcharge de prive/squelettes/body pour supprimer le div entourant #extra et l'intégrer dans #navigation
444*/
445
446/*=======================================
447  redimensionnement de l'espace privé
448========================================*/
449
450/*
451  Grande largeur pour tout le monde, on ignore les préférences utilisateur
452*/
453
454body,
455body.large {
456        min-width: auto;
457}
458
459.largeur, #conteneur, .table_page,
460.large .largeur, .large #conteneur, .large .table_page {
461        width: auto !important;
462        max-width: 1100px;
463}
464
465#bando_haut .largeur,
466#haut,
467#conteneur,
468#pied .largeur,
469.table_page {
470        padding: 0;
471}
472
473#bando_haut > div,
474#page .largeur {
475        padding: 0 1em;
476}
477
478#bando_outils,
479#bando_haut #bando_liens_rapides {
480        width: auto;
481}
482
483/*=======================================
484  Layout
485========================================*/
486
487/*
488  On passe les 3 items #contenu, #navigation et #extra en flexbox.
489  De base, une colonne et on place #contenu en premier.
490*/
491
492#conteneur {
493        display: -webkit-box;
494        display: -ms-flexbox;
495        display: flex;
496        -webkit-box-orient: vertical;
497        -webkit-box-direction: normal;
498        -ms-flex-direction: column;
499        flex-direction: column;
500}
501
502#contenu, #navigation, #extra {
503        float: none;
504        width: auto;
505}
506
507/* ordre des items */
508#contenu {
509        -webkit-box-ordinal-group: 2;
510        -ms-flex-order: 1;
511        order: 1;
512        margin-#ENV{left}: 0;
513}
514
515#navigation {
516        -webkit-box-ordinal-group: 3;
517        -ms-flex-order: 2;
518        order: 2;
519}
520
521#extra {
522        -webkit-box-ordinal-group: 4;
523        -ms-flex-order: 3;
524        order: 3;
525}
526
527/*=======================================
528  Responsive
529========================================*/
530
531/*
532    On passe en colonnes au-delà de 780px
533    Cette valeur est tirée de la largeur minimale de la page par défaut dans les styles vanilla de SPIP.
534    Quand #navigation ou #extra sont vides, le contenu central s'adapte pour prendre tout l'espace disponible.
535    Malheureusement on ne peut pas mettre de largeur en pourcentage pour les colonnes, sinon on a des colonnes fantomes en absence de contenu.
536*/
537
538@media (min-width: 780px) {
539
540        /* Conteneur */
541        #conteneur {
542                -webkit-box-orient: horizontal;
543                -webkit-box-direction: normal;
544                -ms-flex-direction: row;
545                flex-direction: row;
546        }
547
548        #contenu, #navigation, #extra {
549                width: auto !important;
550        }
551
552        /* contenu principal */
553        #contenu {
554                width: 70% !important;
555                -webkit-box-flex: 1;
556                -ms-flex-positive: 1;
557                flex-grow: 1;
558                -webkit-box-ordinal-group: 3;
559                -ms-flex-order: 2;
560                order: 2;
561                margin-#ENV{left}: 30px !important;
562        }
563
564        /* colonne */
565        #navigation, #extra {
566                width: initial !important; /* pas de colonne fantome en abscence de contenu */
567                /*width: 30% !important;*/
568                -webkit-box-flex: 0;
569                -ms-flex-positive: 0;
570                flex-grow: 0; /* pas de colonne fantome en abscence de contenu */
571                -ms-flex-negative: 1;
572                flex-shrink: 1;
573                -webkit-box-ordinal-group: 2;
574                -ms-flex-order: 1;
575                order: 1;
576        }
577        /* Hack : on met une largeur au contenu des colonnes latérales,
578        ainsi quand elles sont vides, elles se collapsent */
579        #navigation > .ajaxbloc > *,
580        #navigation > :not(.ajaxbloc),
581        #extra > .ajaxbloc > *,
582        #extra > :not(.ajaxbloc) {
583                width: calc(8em + 12vw);
584        }
585       
586        /* largeur de colonne : on cible le premier contenu pour éviter une colonne fantome en abscence de contenu */
587        #navigation > .ajaxbloc:first-child > * {
588                /* width: 18 rem; */
589        }
590}
591
592/*
593  Bandeau identité sur petits écrans : chaque bloc sur une seule ligne
594 */
595@media (max-width: 780px) {
596        #bando_identite p.nom_site_spip,
597        #bando_identite p.session {
598                display: flex;
599                justify-content: space-between;
600                flex-wrap: wrap;
601                width: 100%;
602                float: none;
603                text-align:#ENV{left};
604        }
605
606        #bando_identite p.nom_site_spip a,
607        #bando_identite p.session a {
608                white-space: nowrap;
609        }
610}
Note: See TracBrowser for help on using the repository browser.