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

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

Pas de justification sur le texte, c'est mal, et pas de césure auto (et ajustements à la marge)

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