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

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

Petits ajustements : taille des champs textes, marges sur des labels

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