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

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

Suite aux retours sur le ticket https://core.spip.net/issues/4148 :

  • les legend, h3.legend un peu plus discrets (b_b)
  • le menu principal en bold (b_b)
  • le scroll horizontal qui apparaissait (chankalan)

et un peu plus d'emphase sur les titres de liste d'objets et de formulaires, vu qu'il n'y a plus d'icones

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