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

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

Nepas aligner en haut les puces de statut

File size: 14.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*,
20*:before,
21*:after {
22        box-sizing: border-box;
23}
24
25span.icone a img,
26.puce_objet_popup img {
27        box-sizing: content-box;
28}
29
30@font-face {
31        font-family: 'Lato';
32        src: url('#CHEMIN{webfonts/lato-black-webfont.woff2}') format('woff2'),
33        url('#CHEMIN{webfonts/lato-black-webfont.woff}') format('woff');
34        font-weight: 900;
35        font-style: normal;
36}
37
38@font-face {
39        font-family: 'Lato';
40        src: url('#CHEMIN{webfonts/lato-blackitalic-webfont.woff2}') format('woff2'),
41        url('#CHEMIN{webfonts/lato-blackitalic-webfont.woff}') format('woff');
42        font-weight: 900;
43        font-style: italic;
44}
45
46@font-face {
47        font-family: 'Lato';
48        src: url('#CHEMIN{webfonts/lato-bold-webfont.woff2}') format('woff2'),
49        url('#CHEMIN{webfonts/lato-bold-webfont.woff}') format('woff');
50        font-weight: 700;
51        font-style: normal;
52}
53
54@font-face {
55        font-family: 'Lato';
56        src: url('#CHEMIN{webfonts/lato-bolditalic-webfont.woff2}') format('woff2'),
57        url('#CHEMIN{webfonts/lato-bolditalic-webfont.woff}') format('woff');
58        font-weight: 700;
59        font-style: italic;
60}
61
62@font-face {
63        font-family: 'Lato';
64        src: url('#CHEMIN{webfonts/lato-italic-webfont.woff2}') format('woff2'),
65        url('#CHEMIN{webfonts/lato-italic-webfont.woff}') format('woff');
66        font-weight: normal;
67        font-style: italic;
68}
69
70@font-face {
71        font-family: 'Lato';
72        src: url('#CHEMIN{webfonts/lato-regular-webfont.woff2}') format('woff2'),
73        url('#CHEMIN{webfonts/lato-regular-webfont.woff}') format('woff');
74        font-weight: normal;
75        font-style: normal;
76}
77
78/*=======================================
79  remix de l'espace privé
80========================================*/
81
82/*---------------------------------------
83  typo générale : Lato, 16px (1em)
84----------------------------------------*/
85
86body {
87        font-family: 'Lato', 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
88        font-size: 1em;
89}
90
91#wysiwyg {
92        margin-bottom: 1.5em;
93}
94/* pas de justification, c'est mal, et pas de césure auto */
95#wysiwyg .champ,.preview {
96        font-size: 1.1em;
97        -moz-hyphens:none;
98        -webkit-hyphens:none;
99        -khtml-hyphens:none;
100        -ms-hyphens:none;
101        -o-hyphens:none;
102        hyphens:none;
103        text-align: #ENV{left};
104}
105#wysiwyg .contenu_email {
106        margin:0;
107}
108#wysiwyg .contenu_texte {
109        max-width: 75ch; /* 75 caractères par ligne */
110        margin-left: auto;
111        margin-right: auto;
112}
113#wysiwyg.revision {
114        word-break: break-all;
115}
116
117#chemin {
118        font-size: 0.85em;
119}
120
121#chemin strong.on {
122        font-weight: normal;
123}
124
125div.en_lignes {
126        font-size: 0.85em;
127}
128
129.item_picker .liste a.choisir {
130        top: .3em;
131}
132
133.icone a b,
134.box .icone a b,
135.icone .submit b,
136.box .icone .submit b {
137        height: auto;   
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.liste-objets tr td {
161        font-size: 1em;
162}
163.liste-objets tr > td.secondaire,
164.liste-objets tr > td:not(.principale):not(.titre) {
165        font-size: .9em;
166}
167.liste-objets tr > td > span {
168        font-size: inherit;
169}
170.liste-objets tr > .date,
171.liste-objets tr > .auteur {
172        min-width: 130px;
173}
174.liste-objets strong.caption,
175.liste-objets table caption strong.caption {
176        font-size: 1em !important;
177        background-position-y: center;
178}
179.liste-objets td .spip_logo {
180        float: right;
181}
182
183.inner .liste-objets.articles {
184        margin-bottom: 0;
185}
186
187/* espacer un peu les liens */
188.pagination {
189        padding: 4px 8px !important;
190        font-size: 0.9em !important;
191}
192.pagination a, .pagination strong.on {
193        padding: 0 6px !important;
194}
195
196.highlight > .inner {
197        box-shadow: none;
198}
199
200.hd, .bd {
201        padding: 10px;
202}
203
204
205.liste-items .item:last-child {
206        border-bottom: none;   
207}
208
209/* Liste des plugins */
210
211.liste-plugins .box .inner .hd {
212        border-radius: 0;
213}
214.liste-plugins .box .inner .hd h3 {
215        color: white;
216}
217.liste-plugins .liste-items .item .check {
218        float:#ENV{right};
219}
220.liste-plugins .liste-items {
221        margin-left: 0;
222        margin-right: 0;
223}
224.liste-plugins .liste-items .item {
225        padding-left: 56px;
226        padding-right: 34px;
227}
228.liste-plugins .liste-items .item .icon {
229        left: 12px;
230        top: 12px;
231}
232.liste-plugins .liste-items .item .cfg_link.cfg_link {
233        top: 0.6925em;
234}
235/*--------------------------------------
236  boites documents joints 
237----------------------------------------*/
238
239#documents_joints .item .titrem,
240#documents_joints .item .raccourcis,
241#documents_joints .item .actions,
242#documents_joints .item div.mode {
243        font-size: 0.85em;
244}
245
246#documents_joints .item .tourner button {
247        padding: 1px 4px;
248}
249
250/*--------------------------------------
251  Virer la plupart des icones 
252  sauf les boites de rubriques et
253  dans les barres d'onglets
254----------------------------------------*/
255
256a.plus_info,
257.cadre-icone {
258        display: none;
259}
260
261.sous-rub .cadre-icone,
262.barre_onglet .cadre-icone {
263        display: block;
264}
265
266.sous-rub h3.titrem a.titremancre {
267        padding: 8px 10px;
268        background-position: center;
269}
270
271.barre_onglet .cadre-icone {
272        top: 3px;
273        #ENV{left}: 6px;
274}
275
276.barre_onglet .cadre-icone + a,
277.barre_onglet .cadre-icone + strong {
278        padding-#ENV{left}: 38px;
279}
280
281/*--------------------------------------
282  Formulaires
283----------------------------------------*/
284
285.formulaire_spip {
286        padding: 0;
287}
288.formulaire_spip .editer-groupe.editer-groupe,
289.formulaire_spip .boutons,
290.formulaire_spip .titrem,
291.formulaire_spip .legend {
292        margin-left: 0;
293        margin-right: 0;
294}
295.formulaire_spip .fieldset fieldset,
296.formulaire_spip fieldset {
297        margin: 1.5em 0;
298        padding-left: 0;
299        padding-right: 0;
300}
301
302.formulaire_spip .notice,
303.formulaire_spip .reponse_formulaire {
304        margin-left: 10px;
305        margin-right: 10px;
306}
307
308.formulaire_spip .reponse_formulaire, .error, .success, .notice, .information {
309        background-position: 4px 10px;
310}
311
312.formulaire_spip  .editer-groupe {
313        padding: 0;
314}
315
316.entete-formulaire > .icone.#ENV{left} {
317        margin-#ENV{right}: 1em;
318}
319
320.formulaire_spip input.text,
321.formulaire_spip input.email,
322.formulaire_spip input.password,
323.formulaire_spip textarea,
324.formulaire_spip select,
325.formulaire_spip .choix,
326.formulaire_spip .saisie_choix_grille table {
327        width: 100%;
328        background: white;
329        padding: 0.5em;
330        border: 1px solid #ddd;
331        border-radius: 4px;
332        font-size: inherit;
333        font-family: inherit;
334}
335.saisie_choix_grille th, .saisie_choix_grille td {
336        padding: .25em;
337}
338
339.formulaire_spip .obligatoire input.text,
340.formulaire_spip .obligatoire input.email,
341.formulaire_spip .obligatoire select,
342.formulaire_spip .obligatoire .choix {
343        font-weight: bold;
344}
345.formulaire_spip textarea {
346        line-height: 1.6;
347}
348.formulaire_spip .choix {
349        border-bottom: none;
350        display: flex;
351        align-items: flex-start;
352}
353.formulaire_spip .choix > input {
354        margin-top: 0.4em;
355}
356.formulaire_spip .choix > label {
357        width: auto;
358}
359
360.formulaire_spip .liste-objets {
361        margin-left: 0;
362        margin-right: 0;
363}
364.formulaire_spip .toggle_box_link {
365        font-size: 0.9em;
366}
367.formulaire_spip .toggle_box_link button {
368        font-size: 1em;
369}
370
371/* Labels plus larges */
372
373.formulaire_spip .editer {
374        padding: .34625em 10px;
375        padding-#ENV{left}: 170px;
376}
377
378.formulaire_spip .editer > label,
379.formulaire_spip .editer.gauche > label {
380        width: 144px;
381        margin-#ENV{left}: -160px;
382        margin-top: 0.3em;
383        display: inline-block;
384        float: #ENV{left};
385}
386.formulaire_spip .editer.droite > label {
387        margin-right: -160px;
388}
389
390/* Labels longs */
391
392.formulaire_spip .long_label {padding-#ENV{left}:280px;}
393.formulaire_spip .long_label > label {width: 260px;margin-#ENV{left}:-270px;}
394
395.formulaire_spip .editer_parent .rubrique_actuelle {
396        clear: none;
397}
398
399/* Fieldsets et legends */
400
401.formulaire_spip h3.legend,
402.formulaire_spip legend {
403        font-weight: normal;
404        font-size:   1.1em;
405        padding: 0.5em 10px;
406        margin-bottom: .34625em;
407}
408.formulaire_spip legend {
409        width: 100%;
410        display: block;
411        overflow: hidden;
412}
413.formulaire_spip fieldset {
414        border: none;
415        border-top: none; /* à garder */
416}
417.formulaire_spip .fieldset {
418        margin-bottom: 1.5em;
419}
420
421/* specificités de certains formulaires */
422
423.fiche_objet .formulaire_spip.formulaire_dater {
424        background: #f5f5f5;
425        margin: 1em 0 1.5em 0;
426        padding: 5px;
427}
428.formulaire_spip.formulaire_dater label,
429.formulaire_spip.formulaire_dater .affiche {
430        font-size: 80%;
431        font-weight: normal;
432        color: #555;
433}
434.formulaire_spip.formulaire_dater .aide.popin {
435        display: none;
436}
437.formulaire_dater .editer {
438        padding-top: 0;
439        padding-bottom: 0;
440}
441.formulaire_dater .editer > label {
442        margin-top: 0;
443}
444.formulaire_dater .long_label {
445        margin-top: .25em;
446}
447
448.formulaire_editer_auteur .editer.editer_statut {
449        margin-bottom: 10px;
450}
451.formulaire_editer_auteur .editer.editer_statut .instituer_auteur {
452        margin-left: 0;
453}
454
455.formulaire_configurer_urls .editer_type_urls .choix {
456        display: block;
457}
458
459.formulaire_spip.formulaire_traduire .editer > label {
460        margin-top: 0;
461}
462
463.lat .formulaire_spip,
464.lat .formulaire_spip fieldset {
465        padding: 0;
466}
467.lat .formulaire_spip .editer {
468        padding: .34625em 10px;
469}
470.lat .formulaire_spip .editer-groupe,
471.lat .formulaire_spip fieldset,
472.lat .formulaire_spip .boutons,
473.lat .formulaire_spip .titrem,
474.lat .formulaire_spip .legend {
475        margin-right: 0;
476        margin-left: 0;
477}
478.lat .formulaire_spip select,
479.lat .formulaire_spip input.text,
480.lat .formulaire_spip input.search,
481.lat .formulaire_spip input.date,
482.lat .formulaire_spip textarea {
483        width:100%;
484        padding:.25em;
485}
486.lat .formulaire_spip .boutons {
487        border-top: none;
488}
489.lat .formulaire_spip .submit {
490        padding-left: 0.5em;
491        padding-right: 0.5em;
492        margin-bottom: 0;
493}
494.lat .formulaire_editer_logo .editer_logo_on.logo_upload {
495        background: none;
496}
497
498/*--------------------------------------
499  En dessous de 980px, les formulaires
500  passent sur une seule colonne
501----------------------------------------*/
502
503@media (max-width: 980px) {
504       
505        .formulaire_spip .editer-groupe,
506        .formulaire_spip fieldset,
507        .formulaire_spip fieldset .editer-groupe,
508        .formulaire_spip .editer .boutons,
509        .formulaire_spip .legend {
510                margin-left: 0;
511                margin-right: 0;
512        }
513       
514        .formulaire_spip .editer,
515        .formulaire_spip .editer.gauche,
516        .formulaire_spip .editer.droite {
517                padding: 0.5em 0;       
518        }
519        .formulaire_spip .editer_parent {
520                padding-left: 0.5em;
521                padding-right: 0.5em;
522        }
523       
524        .formulaire_spip .editer label,
525        .formulaire_spip .editer.gauche label,
526        .formulaire_spip .editer.droite label {
527                display: block;
528                width: auto;
529                float: none;
530                margin: 0 0 0.25em 0;
531        }
532       
533        .formulaire_spip .choix {
534                border-top: none;
535                border-bottom: none;
536        }
537        .formulaire_spip .choix label {
538                display: inline-block;
539                margin-bottom: 0;
540                vertical-align: middle;
541                margin-#ENV{left}: 0.25em;
542        }
543       
544        .formulaire_spip h3:not(.titrem) {
545                margin-top: 1em;
546                margin-bottom: 1em;
547        }
548
549        /* supprimer la largeur fixe de 600px */
550        body.large.edition #contenu,
551        .articles_edit.large #contenu,
552        .mots_edit.large #contenu,
553        .breves_edit.large #contenu,
554        .rubriques_edit.large #contenu {
555                width:auto;
556        }
557        .large #contenu {
558                margin-left: 0;
559        }
560
561}
562
563
564/*
565  CSS copiée du plugin prive_fluide de tcharlss
566  Nécessite une surcharge de prive/squelettes/body pour supprimer le div entourant #extra et l'intégrer dans #navigation
567*/
568
569/*=======================================
570  redimensionnement de l'espace privé
571========================================*/
572
573/*
574  Grande largeur pour tout le monde, on ignore les préférences utilisateur
575*/
576
577body,
578body.large {
579        min-width: auto;
580}
581
582.largeur, #conteneur, .table_page,
583.large .largeur, .large #conteneur, .large .table_page {
584        width: auto !important;
585        max-width: 1300px;
586}
587
588#bando_haut .largeur,
589#haut,
590#conteneur,
591#pied .largeur,
592.table_page {
593        padding: 0;
594}
595
596#bando_haut > div,
597#page .largeur {
598        padding: 0 1em;
599}
600
601#bando_outils,
602#bando_haut #bando_liens_rapides {
603        width: auto;
604}
605
606/*=======================================
607  Layout
608========================================*/
609
610/*
611  On passe les 3 items #contenu, #navigation et #extra en flexbox.
612  De base, une colonne et on place #contenu en premier.
613*/
614
615#conteneur {
616        display: flex;
617        flex-direction: column;
618        -webkit-flex-direction: column;
619}
620
621#contenu, #navigation, #extra {
622        float: none;
623        width: auto;
624}
625
626/* ordre des items */
627#contenu {
628        order: 1;
629        margin-#ENV{left}: 0;
630}
631
632#navigation {
633        order: 2;
634}
635
636#extra {
637        order: 3;
638}
639
640/*=======================================
641  Responsive
642========================================*/
643
644/*
645    On passe en colonnes au-delà de 780px
646    Cette valeur est tirée de la largeur minimale de la page par défaut dans les styles vanilla de SPIP.
647    Quand #navigation ou #extra sont vides, le contenu central s'adapte pour prendre tout l'espace disponible.
648    Malheureusement on ne peut pas mettre de largeur en pourcentage pour les colonnes, sinon on a des colonnes fantomes en absence de contenu.
649*/
650
651@media (min-width: 780px) {
652
653        /* Conteneur */
654        #conteneur {
655                flex-direction: row;
656        }
657
658        #contenu, #navigation, #extra {
659                width: auto !important;
660        }
661
662        /* contenu principal */
663        #contenu {
664                width: 70% !important;
665                flex-grow: 1;
666                order: 2;
667                margin-#ENV{left}: 30px !important;
668        }
669
670        /* colonne */
671        #navigation, #extra {
672                width: initial !important; /* pas de colonne fantome en abscence de contenu */
673                /*width: 30% !important;*/
674                flex-grow: 0; /* pas de colonne fantome en abscence de contenu */
675                flex-shrink: 1;
676                order: 1;
677        }
678        /* Hack : on met une largeur au contenu des colonnes latérales,
679        ainsi quand elles sont vides, elles se collapsent */
680        #navigation > .ajaxbloc > *,
681        #navigation > :not(.ajaxbloc),
682        #extra > .ajaxbloc > *,
683        #extra > :not(.ajaxbloc) {
684                width: calc(8em + 12vw);
685        }
686       
687        /* largeur de colonne : on cible le premier contenu pour éviter une colonne fantome en abscence de contenu */
688        #navigation > .ajaxbloc:first-child > * {
689                /* width: 18 rem; */
690        }
691}
692
693/*
694  Bandeau identité sur petits écrans : chaque bloc sur une seule ligne
695 */
696@media (max-width: 780px) {
697        #bando_identite p.nom_site_spip,
698        #bando_identite p.session {
699                display: flex;
700                justify-content: space-between;
701                flex-wrap: wrap;
702                width: 100%;
703                float: none;
704                text-align:#ENV{left};
705        }
706
707        #bando_identite p.nom_site_spip a,
708        #bando_identite p.session a {
709                white-space: nowrap;
710        }
711}
Note: See TracBrowser for help on using the repository browser.