source: spip-zone/_plugins_/prive_fluide/branches/prive_fluide_plus/prive/style_prive_plugin_prive_fluide_plus.html @ 110829

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

Surcharge de l'espace privé fluide en version 100% de large : travail principalement sur les formulaires

File size: 5.0 KB
Line 
1[(#REM)<style>/*
2
3        Surcharges de l'Espace prive fluide de Tcharlss
4       
5        - Tous les champs de formulaires forcés sur deux colonnes, avec des labels plus larges
6        - En dessous de 980px, les formualires sur une seule colonne
7
8*/]#CACHE{3600*100,cache-client}
9#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
10#HTTP_HEADER{Vary: Accept-Encoding}
11
12
13/*--------------------------------------
14  Partons sur de bonnes bases
15----------------------------------------*/
16
17*, *:before, *:after {
18        -webkit-box-sizing: border-box;
19        -moz-box-sizing: border-box;
20        box-sizing: border-box;
21}
22
23/*
24        en corrigeant certaines incohérences
25*/
26
27.icone a img {
28        box-sizing: content-box;
29}
30
31/*--------------------------------------
32  Formulaires
33----------------------------------------*/
34
35.formulaire_spip > h3.titrem {
36        margin-bottom: 0;
37}
38
39.formulaire_spip input.text,
40.formulaire_spip input.password,
41.formulaire_spip input.file,
42.formulaire_spip textarea,
43.formulaire_spip select,
44.formulaire_spip .choix {
45        background: white;
46        padding: 0.5em;
47        border: 1px solid #ddd;
48        border-radius: 4px;
49        width: 100%;
50        max-width: 45em;
51}
52.formulaire_spip input.file {
53        border: none;
54}
55.formulaire_spip .editer .explication {
56        /* .explication est en font-size à 90% */
57        max-width: calc(45em / 0.9);
58}
59.formulaire_spip .choix {
60        border-bottom: none;
61        display: flex;
62        align-items: flex-start;
63}
64.formulaire_spip .choix > input {
65        margin-top: 0.4em;
66}
67.formulaire_spip .choix > label {
68        width: auto;
69}
70
71/*
72        Labels plus larges
73*/
74
75.formulaire_spip .editer_parent,
76.formulaire_spip .editer_groupe_mot,
77.formulaire_spip .editer_descriptif,
78.formulaire_spip .editer_chapo,
79.formulaire_spip .editer_texte,
80.formulaire_spip .editer_ps,
81.formulaire_spip .editer,
82.formulaire_spip .editer.gauche {
83        padding-#ENV{left}: 175px;
84}
85
86.formulaire_spip .editer_parent label,
87.formulaire_spip .editer_groupe_mot label,
88.formulaire_spip .editer_descriptif label,
89.formulaire_spip .editer_chapo label,
90.formulaire_spip .editer_texte label,
91.formulaire_spip .editer_ps label,
92.formulaire_spip .haut label,
93.formulaire_spip .pleine_largeur>label,
94.formulaire_spip .editer > label {
95        display: inline-block;
96        float: #ENV{left};
97        width: 155px;
98        margin-#ENV{left}: -160px;
99        margin-top: 0.25em;
100}
101
102/*
103        Ne pas centrer les textarea ni le #wysiwyg ...
104*/
105
106#wysiwyg,
107.formulaire_spip textarea,
108.formulaire_spip .edition {
109        display: inline-block;
110        max-width: 45em !important;
111        margin-left: 0 !important;
112        margin-right: 0 !important;
113}
114
115/*
116        mais laisser une marge en preview.
117       
118        #wysiwyg .champ, .preview sont en font-size en 1.2em,
119        donc on recalcule la largeur pour avoir à peut près le même nombre de caractères par ligne qu'en mode édition
120       
121        Et pas de justification, c'est mal.
122*/
123
124.fiche_objet #wysiwyg {
125        margin-left: 15px !important;
126        max-width: calc(45em * 1.2) !important;
127}
128#wysiwyg .champ,.preview {
129        text-align: #ENV{left};
130}
131#wysiwyg .contenu_descriptif,
132#wysiwyg .contenu_nom_site,
133#wysiwyg .contenu_bio,
134#wysiwyg .contenu_ps {
135        margin-left: -10px;
136        margin-right: -10px;
137}
138
139/*
140        Labels longs
141*/
142
143.formulaire_spip .long_label {padding-#ENV{left}:280px;}
144.formulaire_spip .long_label > label {width: 260px;margin-#ENV{left}:-270px;}
145
146
147/*
148        Fieldsets et legends
149*/
150
151.formulaire_spip h3.legend,
152.formulaire_spip legend {
153        font-weight: normal;
154        font-size:   1.1em;
155        padding: 0.5em 10px;
156        margin-left: 0;
157        margin-right: 0;
158        margin-bottom: .34625em;
159}
160.formulaire_spip legend {
161        width: calc(100% - 1em);
162        display: block;
163        overflow: hidden;
164}
165.formulaire_spip fieldset {
166        border: none;
167        border-top: none; /* à garder */
168}
169
170.formulaire_editer_article .editer.editer_liens_sites fieldset {
171        padding-left: 0;
172        padding-right: 0;
173}
174
175/*
176        Colonne de gauche (#navigation)
177*/
178
179.lat .formulaire_spip .editer label {
180        margin-bottom: 0.5em;
181}
182.lat .formulaire_spip .editer {
183        padding: .34625em 10px;
184}
185
186/*--------------------------------------
187  En dessous de 980px, les formulaires
188  passent sur une seule colonne
189----------------------------------------*/
190
191@media (max-width: 980px) {
192       
193        .formulaire_spip .editer-groupe,
194        .formulaire_spip fieldset,
195        .formulaire_spip fieldset .editer-groupe,
196        .formulaire_spip .editer .boutons,
197        .formulaire_spip .legend {
198                margin-left: 0;
199                margin-right: 0;
200        }
201
202        .formulaire_spip .editer,
203        .formulaire_spip .editer.gauche,
204        .formulaire_spip .editer.droite {
205                padding: 0.5em 0;
206        }
207
208        .formulaire_editer_article .editer.editer_liens_sites,
209        .formulaire_spip .editer_parent {
210                padding-left: 10px;
211                padding-right: 10px;
212                margin-left: -10px;
213                margin-right: -10px;
214        }
215        .formulaire_editer_article .editer.editer_liens_sites h3.legend {
216                margin-left: -10px;
217                margin-right: -10px;
218        }
219
220        .formulaire_spip .editer label,
221        .formulaire_spip .editer.gauche label,
222        .formulaire_spip .editer.droite label {
223                display: block;
224                width: auto;
225                float: none;
226                margin: 0 0 0.25em 0;
227        }
228
229        .formulaire_spip .choix {
230                border-top: none;
231                border-bottom: none;
232        }
233
234        .formulaire_spip .choix label {
235                display: inline-block;
236                margin-bottom: 0;
237                vertical-align: middle;
238                margin-#ENV{left}: 0.25em;
239        }
240
241        .formulaire_spip h3:not(.titrem) {
242                margin-top: 1em;
243                margin-bottom: 1em;
244        }
245
246}
Note: See TracBrowser for help on using the repository browser.