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

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

Masquer les colonnes vides, formulaires sur une colonne sur petits écrans, et ajustements

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