Subversion Repositories eFlore/Applications.cel

Rev

Rev 3166 | Rev 3171 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3122 delphine 1 
@CHARSET "UTF-8";
2 
 
3167 idir 3 
.clear {
4 
  clear: both;
5 
  height: 0;
3164 idir 6 
 
3167 idir 7 
  /* Précaution pour IE 7 */
8 
  overflow: hidden;
9 
}
10 
 
3164 idir 11 
h1#widget-titre::before {
3167 idir 12 
  content: "";
13 
  display: block;
14 
  height: 100%;
15 
  position: absolute;
16 
  left: -5rem;
17 
  width: 0.4rem;
3122 delphine 18 
}
3164 idir 19 
 
20 
h1#widget-titre {
3167 idir 21 
  font-size: 2.6rem;
22 
  font-weight: 700;
23 
  line-height: 3.2rem;
24 
  margin: 0;
25 
  position: relative;
26 
  color: #232323;
27 
  font-family: Ubuntu,sans-serif;
3164 idir 28 
}
29 
 
3167 idir 30 
h2 {
31 
  font-family: Muli,sans-serif;
32 
  font-size: 21.5px;
33 
  font-weight: 700;
34 
  line-height: 1.15;
3164 idir 35 
}
36 
 
3167 idir 37 
div.widget-blocks {
38 
  box-sizing: border-box;
39 
  padding: 1rem;
3122 delphine 40 
}
41 
 
3167 idir 42 
.message {
43 
  background-color: #f8f5ef;
44 
  color: #232323;
45 
  padding: 1rem;
46 
}
47 
 
48 
/* Aperçu du widget */
49 
.widget-renderer {
50 
  border:none;
51 
  padding: 3rem;
52 
  height: 300rem;
53 
  min-height: 100%;
54 
  width: 90%;
55 
  pointer-events: none;
56 
  overflow: hidden
57 
}
58 
 
59 
.register-section{
60 
  margin-bottom: 1rem;
61 
}
62 
 
63 
/* Formulaires du nouveau widget*/
64 
#group-settings-form {
65 
  font-family: Muli,sans-serif;
66 
  float: none;
67 
  margin-bottom: 2rem;
68 
  position: absolute;
69 
}
70 
 
3164 idir 71 
#group-settings-form label {
3167 idir 72 
  color: #606060;
73 
  display: block;
74 
  font-size: 1.5rem;
75 
  margin-bottom: 0.4rem;
76 
  margin-top: 2rem;
77 
  font-weight: 700;
3122 delphine 78 
}
79 
 
3167 idir 80 
#group-settings-form #langue{
81 
  width: 100%;
82 
  border: 0.1rem solid #ddd;
83 
  border-radius: 0.3rem;
84 
  padding: 1rem;
85 
  overflow: hidden;
86 
}
87 
 
88 
/* Styles des champs required*/
3164 idir 89 
#group-settings-form .register-section input[required],
3167 idir 90 
#group-settings-form .register-section select[required],
91 
#group-settings-form #new-fields input[required],
92 
#group-settings-form #new-fields select[required] {
93 
  border: 0.2rem solid rgba(0, 159, 184, 0.5);
3122 delphine 94 
}
95 
 
3167 idir 96 
/* Positionnement visuel du bouton submit pour qu'il reste
97 
sous les nouveaux champs alors que dans le dom
98 
il est positionné avant les nouveaux champs */
99 
#group-settings-form #submit-button {
100 
  position: absolute;
101 
  bottom: -50px;
3164 idir 102 
}
103 
 
3167 idir 104 
/**** Styles des boutons ajouter et supprimer ****/
105 
#group-settings-form #add-fields.button,
106 
#group-settings-form .add-value-button.button {
107 
  background-color: #009fb8;
3164 idir 108 
}
109 
 
3167 idir 110 
#group-settings-form #add-fields.button:hover,
111 
#group-settings-form #add-fields.button:focus,
112 
#group-settings-form .add-value-button.button:hover,
113 
#group-settings-form .add-value-button.button:focus {
114 
  background-color: rgba(0, 159, 184, 0.7);
3122 delphine 115 
}
116 
 
3167 idir 117 
#group-settings-form .remove-field.button,
118 
#group-settings-form .remove-value.button {
119 
  background-color: #ff5d55;
3164 idir 120 
}
121 
 
3167 idir 122 
#group-settings-form .remove-field.button:hover,
123 
#group-settings-form .remove-field.button:focus,
124 
#group-settings-form .remove-value.button:hover,
125 
#group-settings-form .remove-value.button:focus {
126 
  background-color: rgba(255, 93, 85, 0.7);
3164 idir 127 
}
3167 idir 128 
/*************************************************/
3164 idir 129 
 
3167 idir 130 
/**** Style des select ****/
131 
#group-settings-form select {
132 
  background-color: #fff;
133 
  border:  0.1rem solid #ddd;
134 
}
3164 idir 135 
 
3167 idir 136 
#group-settings-form select,
137 
#group-settings-form select[required] {
138 
 
139 
  width: 100%;
140 
  color:#333;
141 
  border-radius: 0.3rem;
142 
  padding:0.5rem;
143 
  text-transform:none;
144 
 
145 
  /* On retire la 'flèche' par defaut */
146 
  -webkit-appearance: none;
147 
  -moz-appearance: none;
148 
  -ms-appearance: none;
149 
  -o-appearance: none;
150 
  appearance: none;
3164 idir 151 
}
152 
 
3167 idir 153 
#group-settings-form .select-wrapper,
154 
#group-settings-form #new-fields .select-wrapper {
155 
  position: relative;
3122 delphine 156 
}
157 
 
3167 idir 158 
#group-settings-form .select-wrapper::after {
159 
  /* Ajout et style d'une "flèche bas" */
160 
  content: '⌄';
161 
  pointer-events: none;
162 
  position: absolute;
163 
  top: 0;
164 
  right: 0.5rem;
165 
  font-size: 3rem;
166 
  font-weight: 900;
167 
  color: #606060;
3164 idir 168 
}
169 
 
3167 idir 170 
#group-settings-form #new-fields .select-wrapper::after {
171 
  /* correction de la position de la flèche
172 
  dans le formulaire des champs ajoutés*/
173 
  top: -10px;
3164 idir 174 
}
3167 idir 175 
/**************************/
3164 idir 176 
 
3167 idir 177 
/**** Affichage des nouveaux champs ****/
178 
 
179 
/* Mieux distinguer les différentes strates */
180 
#group-settings-form .new-field,
181 
#group-settings-form .new-value {
182 
  margin: 1rem 0;
183 
  padding: 2rem;
184 
  border-radius: 0.3rem;
185 
  background-color: #F8F5EF;
3164 idir 186 
}
187 
 
3167 idir 188 
/* Mieux distinguer les différentes strates */
189 
#group-settings-form .field-details {
190 
  margin: 1rem 0;
191 
  padding: 2rem;
192 
  border-radius: 0.3rem;
193 
  background-color: #fcfbf9;
3164 idir 194 
}
3167 idir 195 
/********************************************/
3164 idir 196 
 
3167 idir 197 
/**** Style des input type "file" ****/
198 
/* styles de base */
199 
#group-settings-form .input-file-container,
200 
#group-settings-form #new-fields .input-file-container {
3164 idir 201 
  position: relative;
3166 idir 202 
  width: 100%;
3164 idir 203 
}
3167 idir 204 
 
205 
#group-settings-form .label-file,
206 
#group-settings-form #new-fields .label-file {
3164 idir 207 
  display: block;
3166 idir 208 
  padding: 1rem;
3164 idir 209 
  background: #009FB8;
210 
  color: #fff !important;
3166 idir 211 
  font-size: 1.5rem;
3164 idir 212 
  cursor: pointer;
3166 idir 213 
  border-radius: 0.2rem;
3164 idir 214 
}
3167 idir 215 
 
216 
#group-settings-form .input-file,
217 
#group-settings-form #new-fields .input-file {
3164 idir 218 
  position: absolute;
219 
  top: 0; left: 0;
3166 idir 220 
  width: 80%;
221 
  padding: 1rem;
222 
  margin: auto;
3164 idir 223 
  opacity: 0;
224 
  cursor: pointer;
225 
}
226 
 
227 
/* quelques styles d'interactions */
3167 idir 228 
#group-settings-form .input-file:hover + .label-file,
229 
#group-settings-form .input-file:focus + .label-file,
230 
#group-settings-form .label-file:hover,
231 
#group-settings-form .label-file:focus,
232 
#group-settings-form #new-fields .input-file:hover + .label-file,
233 
#group-settings-form #new-fields .input-file:focus + .label-file,
234 
#group-settings-form #new-fields .label-file:hover,
235 
#group-settings-form #new-fields .label-file:focus {
236 
  background: rgba(0, 159, 184, 0.7);
3164 idir 237 
  color: #fff;
238 
}
239 
 
240 
/* styles du retour visuel */
3167 idir 241 
#group-settings-form .file-return:not(:empty)::before,
242 
#group-settings-form #new-fields .file-return:not(:empty)::before {
3166 idir 243 
  content:'Nom du fichier: ';
244 
  font-size: 1rem;
3164 idir 245 
}
3166 idir 246 
 
3167 idir 247 
#group-settings-form .file-return:not(:empty) img,
248 
#group-settings-form #new-fields .file-return:not(:empty) img {
3166 idir 249 
  margin: 1rem auto;
250 
  display: block;
3164 idir 251 
}
3166 idir 252 
 
3167 idir 253 
#group-settings-form .file-return,
254 
#group-settings-form #new-fields .file-return {
3164 idir 255 
  font-style: italic;
3166 idir 256 
  font-size: 1.5rem;
3164 idir 257 
  font-weight: bold;
258 
}
3167 idir 259 
/*************************************/