source: spip-zone/_plugins_/prive_fluide_remix/trunk/prive/style_prive_plugin_prive_fluide_remix.html @ 110763

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

Un remix de l'espace prive fluide de tcharlss

Le corps de typo de base passe à 1em (16px), y compris dans la minipres (fournie dans le plugin)
La police de base passe sur Lato, plus lisible et mieux proportionnée.

La largeur total du contenu est fixée à 1200px maxi, et tout le contenu sur 2 colonnes à partir de 780px.
Ça donne environ 80 caractères par ligne dans la zone d'édition ou de preview d'un article.

On a un peu plus de place, la colonne "label" des formulaires est donc un peu élargie en conséquence.

Suppression de pas mal d'icones inutiles pour alléger un peu l'interface.

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