-312 Removals
+239 Additions

Created by:phpboost

1/* -------------------------------------- 1/* --------------------------------------
2 form.css 2 form.css
3Contient les elements : 3Contient les elements :
4 - button, 4 - button,
5 - formulaire, 5 - formulaire,
6-----------------------------------------*/ 6---------------------------------------- */
7 7
8 8
9/* -- Boutons et class boutons -- */ 9/* -- Boutons et class boutons -- */
10/* ------------------------------ */ 10/* ------------------------------ */
11 11
12/* --- Normal --- */ 12/* --- Normal --- */
13button, 13button,
14.button { 14.button {
15 padding: 0.3em 1em; 15 margin: 0.618em;
16 padding: 0.309em 1em;
16 height: auto; 17 height: auto;
17 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%); 18 border-width: 1px;
18 background-color: #F1F1F1;
19 border-style: solid; 19 border-style: solid;
20 border-width: 1px; 20 border-color: transparent;
21 border-color: #E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD;
22 border-radius: 1px;
23 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
24 color: #777777;
25 text-align: center; 21 text-align: center;
26 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
27 white-space: nowrap; 22 white-space: nowrap;
28 transition: all 0.2s linear; 23 transition: all 0.2s linear;
29} 24}
30 25
31button:hover, 26button:hover,
32.button-hover { 27.button-hover {
33 background-color: #F9F9F9;
34 transition: all 0.3s linear; 28 transition: all 0.3s linear;
35} 29}
36 30
37button:active, 31button:active,
38.button-active { 32.button-active {
39 background-color: #F5F5F5;
40 border-color: #DDDDDD;
41 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
42 transition: all 0.2s linear; 33 transition: all 0.2s linear;
43} 34}
44 35
45/* --- Petit bouton --- */ 36/* --- Petit bouton --- */
46button.small, 37button.small,
47.button-small { 38.button-small {
48 padding: 0.2em 0.5em; 39 padding: 0.228em 0.618em;
49 font-size: 1.1rem; 40 font-size: 0.809em;
50}
51
52/* --- Bouton de formulaire --- */
53button.submit {
54 background-color: #366493;
55 border-color: #1E5083;
56 color: #F1F1F1;
57 text-shadow: none;
58}
59
60button.submit:hover {
61 background-color: #517BA6;
62 border-color: #366493;
63 color: #FFFFFF;
64} 41}
65 42
66/* --- Bouton basic --- */ 43/* --- Bouton basic --- */
67.basic-button { 44.basic-button {
68 display: inline-block; 45 display: inline-block;
69 margin: 1px; 46 margin: 0.1618em;
70 padding: 1px 6px; 47 padding: 0.1618em 0.309em;
71 border: none; 48 border: none;
72 font-weight: bold; 49 font-weight: bold;
73 color: #FFFFFF;
74} 50}
75 51
76.basic-button:hover { 52.basic-button:hover {
77 color: #FAFAFA;
78 text-decoration: none; 53 text-decoration: none;
79} 54}
80 55
81/* --- Bouton basic avec couleur de base --- */
82.basic-button { background-color: #366493; }
83.basic-button:hover { background-color: #517BA6; }
84
85/* --- Bouton basic avec couleur alternative --- */
86.basic-button.alt { background-color: #E2A447; }
87.basic-button.alt:hover { background-color: #FFC672; }
88
89/* --- field button --- */
90.field-button {
91 display: inline-block;
92 font-size: 0;
93 white-space: nowrap;
94}
95
96.field-button button {
97 margin-left: -1px;
98 padding: 4px 8px;
99 font-size: 11px;
100}
101
102 56
103/* -- Formulaires -- */ 57/* -- Formulaires -- */
104/* ----------------- */ 58/* ----------------- */
105.fieldset-mini { 59.fieldset-mini {
106 margin: 20px auto auto auto; 60 margin: 1.309em auto auto auto;
107 width: 540px; 61 width: 540px;
108} 62}
109 63
110fieldset { 64fieldset {
111 margin: 1.5em 0; 65 margin: 1.618em 0;
112 background: none; 66 background: none;
113 border: none; 67 border: none;
114} 68}
115 69
116fieldset img { 70fieldset img {
117 max-width: 250px; 71 max-width: 250px;
118} 72}
119 73
120@media (min-width: 769px) { 74@media (min-width: 769px) {
121 fieldset img { 75 fieldset img {
122 max-width: 450px; 76 max-width: 320px;
77 }
78}
79
80@media (min-width: 1366px) {
81 fieldset img {
82 max-width: 420px;
123 } 83 }
124} 84}
125 85
126fieldset.fieldset-submit { 86.fieldset-submit {
127 width: 100%;
128 background: none;
129 border: none;
130 text-align: center; 87 text-align: center;
131} 88}
132 89
133fieldset.fieldset-submit legend { 90.fieldset-submit legend {
134 display: none; 91 display: none;
135} 92}
136 93
137.horizontal-fieldset-desc, 94.horizontal-fieldset-desc,
138.horizontal-fieldset-element { 95.horizontal-fieldset-element {
139 display: inline-block; 96 display: inline-block;
140 vertical-align: middle; 97 vertical-align: middle;
98 margin-right: 1em;
141} 99}
142 100
143.horizontal-fieldset-desc + .horizontal-fieldset-element { 101.horizontal-fieldset-desc + .horizontal-fieldset-element {
144 max-width: 100%; 102 max-width: 100%;
145} 103}
146 104
147.horizontal-fieldset-element .form-field-select { 105.horizontal-fieldset-element .form-field-select {
148 max-width: none; 106 max-width: none;
149} 107}
150 108
151optgroup { 109optgroup {
152 border: none; 110 border: none;
153 border-bottom: 1px solid #5B5A5A; 111 border-bottom-width: 1px;
112 border-bottom-style: solid;
113 border-color: transparent;
154 font-weight: bold; 114 font-weight: bold;
155} 115}
156 116
157option { 117option {
158 padding: 0 3px; 118 padding: 0 0.228em;
159} 119}
160 120
161legend { 121legend {
162 display: block; 122 display: block;
163 margin: 0 0 0.6em 0; 123 margin: 0 0 0.809em 0;
124 padding: 0 0.809em;
164 width: 100%; 125 width: 100%;
165 border-bottom: 1px solid #DDDDDD; 126 border-bottom-width: 1px;
127 border-bottom-style: solid;
128 border-color: transparent;
166 text-transform: none; 129 text-transform: none;
167 color: #474747;
168 font-size: 1.5em; 130 font-size: 1.5em;
169} 131}
170 132
171/* --- Previsualisation --- */ 133legend > h1 {
134 font-size: inherit;
135}
136
137/* --- Previsualisation AJAX --- */
172.xmlhttprequest-preview { 138.xmlhttprequest-preview {
173 padding: 0 2px; 139 overflow: auto;
174 background-color: #FFFFFF; 140 height: 220px;
175 border: 1px solid #CCCCCC; 141 margin: 0.228em auto .1618em auto;
176 color: #2E3B5F; 142 padding: 0.1618em 0.228em;
143 border-width: 1px;
144 border-style: solid;
145 border-color: transparent;
177} 146}
178 147
179.xmlhttprequest-preview img { 148.xmlhttprequest-preview img {
180 max-width: 600px; 149 max-width: 600px;
181} 150}
182 151
183/* --- Elements de saisie --- */ 152/* --- Elements de saisie --- */
184input[type=text], 153[type=text],
185input[type=email], 154[type=email],
186input[type=url], 155[type=url],
187input[type=number], 156[type=number],
188input[type=color], 157[type=color],
189input[type=tel], 158[type=tel],
190input[type=search], 159[type=search],
191input[type=password], 160[type=password],
192input[type=file], 161[type=file],
193textarea, 162textarea,
194select { 163select {
195 padding: 4px 18px 4px 6px; 164 padding: 0.309em 0.618em;
196 background-color: #FFFFFF; 165 border-width: 1px;
197 border: 1px solid #CCCCCC; 166 border-style: solid;
198 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01); 167 border-color: transparent;
199 color: #555555; 168 margin-bottom: 0.1618em;
200} 169 max-width: 100%;
201
202input[type=text]:hover,
203input[type=email]:hover,
204input[type=url]:hover,
205input[type=number]:hover,
206input[type=color]:hover,
207input[type=tel]:hover,
208input[type=search]:hover,
209input[type=password]:hover,
210input[type=file]:hover,
211textarea:hover,
212select:hover {
213 background-color: #FFFFFF;
214 border: 1px solid #BBBBBB;
215 color: #333333;
216} 170}
217 171
218input[type=text]:focus, 172[type=text]:focus,
219input[type=email]:focus, 173[type=email]:focus,
220input[type=url]:focus, 174[type=url]:focus,
221input[type=number]:focus, 175[type=number]:focus,
222input[type=color]:focus, 176[type=color]:focus,
223input[type=tel]:focus, 177[type=tel]:focus,
224input[type=search]:focus, 178[type=search]:focus,
225input[type=password]:focus, 179[type=password]:focus,
226input[type=file]:focus, 180[type=file]:focus,
227textarea:focus, 181textarea:focus,
228select:focus { 182select:focus {
229 border-color: #BBBBBB;
230 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
231 outline: 0; 183 outline: 0;
232 color: #222222;
233} 184}
234 185
235input[type=color] { 186[type=color] {
236 padding: 0 2px 0 2px; 187 padding: 0 0.1618em;
237 width: 25px; 188 width: 1.482em;
189}
190
191.field-smaller { width: 29px; }
192.field-small { width: 77px; }
193.field-large { width: 200px; }
194.field-xlarge { width: 250px; }
195
196.form-field-date,
197.form-field-datetime {
198 display: -ms-flexbox;
199 display: -webkit-flex;
200 display: flex;
201 -webkit-flex-direction: row;
202 -ms-flex-direction: row;
203 flex-direction: row;
204 -webkit-flex-wrap: nowrap;
205 -ms-flex-wrap: nowrap;
206 flex-wrap: nowrap;
238} 207}
239 208
240form input:focus:invalid, 209.form-field-date .input-date {
241form textarea:focus:invalid, 210 width: 80%;
242form .constraint-status-right input,
243form .constraint-status-right textarea {
244 border-color: rgba(196, 60, 43, 0.3);
245 box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
246} 211}
247 212
248form input:focus:valid, 213.form-field-datetime .input-date {
249form textarea:focus:valid, 214 width: 40%;
250form .constraint-status-right input,
251form .constraint-status-right textarea {
252 border-color: rgba(71, 137, 72, 0.3);
253 box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
254} 215}
255 216
256input.field-smaller { width: 29px; } 217.form-field-datetime .label-time {
257input.field-small { width: 77px; } 218 width: 18%;
258input.field-large { width: 200px; } 219 position: relative;
259input.field-xlarge { width: 250px; } 220 display: inline-block;
221}
260 222
261input.input-date { width: 100px; } 223.form-field-datetime .label-time input {
262input.input-hours { width: 50px; } 224 padding: 0.309em;
263input.input-minutes { width: 50px; } 225 width: 100%;
226}
264 227
265input[name$="_hours"] { width: 50px; } 228.label-time:after {
266input[name$="_minutes"] { width: 50px; } 229 position: absolute;
230 bottom: 18%;
231 left: 103%;
232 content: attr(data-time);
233}
267 234
268/* --- Cache le generateur de mot de passe sur chrome --- */ 235/* --- Cache le generateur de mot de passe sur chrome --- */
269.cip-icon-key-small { 236.cip-icon-key-small {
270 display: none !important; 237 display: none !important;
271} 238}
272 239
273/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */ 240/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */
274.form-element, 241.form-element,
275.form-element-textarea { 242.form-element-textarea {
276 position: relative; 243 position: relative;
277 margin: 0 1em 1em 1em; 244 margin: 0 0.618em 0.618em 0.618em;
278} 245}
279 246
280@media (min-width: 769px) { 247@media (min-width: 769px) {
281 div#main.main-with-left.main-with-right section .form-element, 248 #main.main-with-left.main-with-right section .form-element,
282 div#main.main-with-left.main-with-right section .form-element-textarea { 249 #main.main-with-left.main-with-right section .form-element-textarea {
283 margin: 5px 0; 250 margin: 0.309em 0;
284 } 251 }
285} 252}
286 253
287.fieldset-description { 254.fieldset-description {
288 margin: 0 1em 1.5em 1em; 255 margin: 0 1em 0.618em 1em;
289}
290
291@media (max-width: 768px) {
292 .form-element,
293 .form-element-textarea {
294 margin: 0 0.6em 1em 0.6em;
295 }
296
297 .fieldset-description {
298 margin: 0 0.6em 1.3em 0.6em;
299 }
300} 256}
301 257
302@media (max-width: 480px) { 258@media (min-width: 769px) {
303 .form-element, 259 .form-element,
304 .form-element-textarea { 260 .form-element-textarea {
305 margin: 0 0.6em 0.5em 0.6em; 261 margin: 0 1.618em 1em 1.618em;
306 } 262 }
307 263
308 .fieldset-description { 264 .fieldset-description {
309 margin: 0 0.6em 0.9em 0.6em; 265 margin: 0 1.618em 1.482em 1.618em;
310 }
311}
312
313@media (max-width: 768px) {
314 .form-element-textarea + div.center button,
315 .fieldset-content > div.center button {
316 margin-top: 5px;
317 } 266 }
318} 267}
319 268
320.form-element [id$="user_avatar"] img { 269.form-element [id$="user_avatar"] img {
321 max-width: 200px; 270 max-width: 200px;
322} 271}
323 272
324.form-field { 273.form-field {
325 position: relative; 274 position: relative;
326 display: inline-block; 275 display: inline-block;
327 max-width: 600px; 276 width: 100%;
328}
329
330@media (max-width:360px) {
331 .form-field {
332 max-width: 270px;
333 }
334} 277}
335 278
336.form-field-free-large { 279.form-field-free-large {
337 width: 100%; 280 width: 100%;
338 max-width: none; 281 max-width: none;
339} 282}
340 283
341.form-field-action-link { 284.form-field-action-link {
342 text-align: center; 285 text-align: center;
343} 286}
344 287
345/* --- Label pour les checkbox et radio --- */ 288/* --- Label pour les checkbox et radio --- */
346.form-field label { 289.form-field label {
347 display: block; 290 display: block;
348 margin: 0 10px 0 0; 291 margin: 0 0.618em 0 0;
349} 292}
350 293
351/* --- Label pour les inputs [for] et pour les elements sans associations --- */ 294/* --- Label pour les inputs [for] et pour les elements sans associations --- */
352.form-element > label { 295.form-element > label {
353 display: inline-block; 296 display: inline-block;
354 padding-right: 10px; 297 padding: 0 0.618em 0.618em 0;
355 width: 40%; 298 width: 100%;
356 text-align: left; 299 text-align: left;
357 vertical-align: top; 300 vertical-align: top;
358} 301}
359 302
360.field-description { 303@media (min-width: 1025px) {
361 display: block; 304 .form-field {
362 font-size: 0.8em; 305 width: calc(60% - 0.309em);
363 line-height: 12px; 306 }
364}
365
366@media (max-width: 768px) {
367 .form-element > label { 307 .form-element > label {
368 width: 100%; 308 width: 40%;
369 }
370
371 span.field-description {
372 display: inline-block;
373 font-size: 0.7em;
374 font-style: italic;
375 } 309 }
376} 310}
377 311
378@media (min-width: 769px) { 312.field-description {
379 .form-field-select { 313 display: inline-block;
380 max-width: 59%; 314 font-size: 0.618em;
381 } 315 font-style: italic;
382} 316}
383 317
384.form-field-select select { 318.form-field-select select,
319.form-field-multi-select select {
385 max-width: 100%; 320 max-width: 100%;
386} 321}
387 322
323@media (min-width: 769px) {
324 .field-description {
325 display: block;
326 font-size: 0.809em;
327 font-style: normal;
328 }
329}
330
388input[disabled=disabled], 331input[disabled=disabled],
389input[disabled=disabled]:hover, 332input[disabled=disabled]:hover,
390input[disabled=disabled]:focus, 333input[disabled=disabled]:focus,
391textarea[disabled=disabled], 334textarea[disabled=disabled],
392textarea[disabled=disabled]:hover, 335textarea[disabled=disabled]:hover,
393textarea[disabled=disabled]:focus, 336textarea[disabled=disabled]:focus,
394select[disabled=disabled], 337select[disabled=disabled],
395select[disabled=disabled]:hover, 338select[disabled=disabled]:hover,
396select[disabled=disabled]:focus { 339select[disabled=disabled]:focus,
397 background-color: #F1F1F1;
398 border: 1px solid #CCCCCC;
399 color: #AAAAAA;
400 cursor: not-allowed;
401}
402
403input[readonly=readonly], 340input[readonly=readonly],
404input[readonly=readonly]:hover, 341input[readonly=readonly]:hover,
405input[readonly=readonly]:focus, 342input[readonly=readonly]:focus,
406textarea[readonly=readonly], 343textarea[readonly=readonly],
407textarea[readonly=readonly]:hover, 344textarea[readonly=readonly]:hover,
408textarea[readonly=readonly]:focus, 345textarea[readonly=readonly]:focus,
409select[readonly=readonly], 346select[readonly=readonly],
410select[readonly=readonly]:hover, 347select[readonly=readonly]:hover,
411select[readonly=readonly]:focus { 348select[readonly=readonly]:focus {
412 background-color: #FAFAFA; 349 border-width: 1px;
413 border: 1px solid #CCCCCC; 350 border-style: solid;
414 color: #888888; 351 border-color: transparent;
352 cursor: not-allowed;
415} 353}
416 354
417.form-field-checkbox { 355.form-field-checkbox {
418 display: inline-block; 356 display: inline-block;
419} 357}
420 358
421/* --- Textarea --- */ 359/* --- Textarea --- */
422.form-field-textarea { 360.form-field-textarea {
423 position: relative; 361 position: relative;
424 display: inline; 362 display: inline;
425 margin: 5px auto; 363 margin: 0.309em auto;
426 width: 99%; 364 width: 99%;
427} 365}
428 366
429textarea { 367textarea {
430 width: 100%; 368 width: 100%;
431 overflow: auto; 369 overflow: auto;
432 resize: vertical; 370 resize: vertical;
433} 371}
434 372
435.form-element-textarea textarea { 373.form-element-textarea textarea {
436 width: 100%; 374 width: 100%;
437} 375}
438 376
439.form-element-textarea .form-field-textarea { 377.form-element-textarea .form-field-textarea {
440 display: block; 378 display: block;
441} 379}
442 380
443.form-element .form-field-textarea { 381.form-element .form-field-textarea {
444 display: inline-block; 382 display: inline-block;
445} 383}
446 384
447.form-element-textarea .form-field-textarea div { 385.form-element-textarea .form-field-textarea div {
448 float: left; 386 float: left;
449} 387}
450 388
451.form-element-preview, .form-element-reset { 389.form-element-preview, .form-element-reset {
452 margin: 5px auto 0 auto; 390 margin: 0.309em auto 0 auto;
453 text-align: center; 391 text-align: center;
454 display: inline; 392 display: inline;
455} 393}
456 394
457/* --- choix des permissions --- */ 395/* --- choix des permissions --- */
458.form-element-auth .form-field { 396.form-element-auth .form-field {
459 display: inline-block; 397 display: inline-block;
460 margin: 2px 0 0 0; 398 margin: 0.1618em 0 0 0;
461} 399}
462 400
463.form-element-auth .form-field div[class^="advanced-auth"] { 401.form-element-auth .form-field div[class^="advanced-auth"] {
464 float:left; 402 float:left;
465} 403}
466 404
467.form-element-auth .field-description { 405.form-element-auth .field-description {
468 display: inline; 406 display: inline;
469 font-style: italic; 407 font-style: italic;
470} 408}
471 409
472.advanced-auth-group select { 410.advanced-auth-group select {
473 padding-right: 5px; 411 padding-right: 0.309em;
474 max-width: 153px; 412 margin-right: 0.618em;
475 overflow-x: auto; 413 overflow-x: auto;
476} 414}
477 415
478.advanced-auth-select select { 416.advanced-auth-select select {
479 padding-right: 5px; 417 padding-right: 0.309em;
480 max-width: 132px; 418 max-width: 132px;
481 word-wrap: normal; 419 word-wrap: normal;
482 overflow-x: auto; 420 overflow-x: auto;
483} 421}
484 422
485.advanced-auth-select { 423.advanced-auth-select {
486 margin-left:5px; 424 margin-left:0.309em;
487} 425}
488 426
489.advanced-auth-input { 427.advanced-auth-input {
490 margin-left: 5px; 428 margin-left: 0.309em;
491 width: auto; 429 width: auto;
492} 430}
493 431
494.advanced-auth-input input { 432.advanced-auth-input input {
495 padding: 4px 24px 4px 6px; 433 padding: 0.228em 1.482em 0.228em 0.309em;
496} 434}
497 435
498.advanced-auth-input button { 436.advanced-auth-input button {
499 margin-left: -29px; 437 margin: 0 0 0.1618em -0.456em;
500 padding: 5px 5px 6px 5px; 438 padding: 0.456em 0.309em 0.456em;
501 border-width: 0 0 0 1px;
502} 439}
503 440
504.advanced-auth-input-result { 441.advanced-auth-input-result {
505 margin: 2px 0 0 0; 442 margin: 0.1618em 0 0 0;
506 width: 138px; 443 padding: 0.1618em;
507 height: 100px; 444 height: 6.854em;
508} 445}
509 446
510.bbcode ~ .form-field-textarea textarea { 447.bbcode ~ .form-field-textarea textarea {
511 border-width: 0 1px 1px 1px; 448 border-width: 0 1px 1px 1px;
512} 449}
513 450
514@media (min-width: 769px) { 451@media (min-width: 769px) {
515 .form-element-textarea-small { 452 .form-element-textarea-small {
516 width: 49%; 453 width: 49%;
517 } 454 }
518 455
519 .form-element .form-field-textarea { 456 .form-element .form-field-textarea {
520 width: 59%; 457 width: 59%;
521 } 458 }
522} 459}
523 460
524@media (max-width: 480px) { 461@media (max-width: 480px) {
525 .form-element-auth .form-field .advanced-auth-input { 462 .form-element-auth .form-field .advanced-auth-input {
526 float: none; 463 float: none;
527 margin: 5px 0 0 0;
528 } 464 }
529} 465}
530 466
531/* --- Verification des contraintes de formulaire --- */ 467/* --- Verification des contraintes de formulaire --- */
532.constraint-status-error input,
533.constraint-status-error textarea {
534 border-color: rgba(196, 60, 43, 0.3);
535 box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
536 color: #C43C35;
537}
538
539.constraint-status-error input:hover,
540.constraint-status-error input:focus,
541.constraint-status-error textarea:hover,
542.constraint-status-error textarea:focus {
543 border-color: rgba(196, 60, 43, 0.5);
544 box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
545 color: #C43C35;
546}
547
548.text-status-constraint { 468.text-status-constraint {
549 position:absolute; 469 position:absolute;
550 display: block; 470 display: block;
551 z-index: 1; 471 z-index: 1;
552 padding: 6px 5px; 472 padding: 0.309em;
553 left: 5px; 473 top: 110%;
554 min-width: 20em; 474 border-width: 1px;
555 background-color: #FEFEFE; 475 border-style: solid;
556 border: 1px solid #EAEAEA; 476 border-color: transparent;
557 box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3); 477 font-size: 0.809em;
558 font-size: 0.8em;
559 font-weight: bold; 478 font-weight: bold;
560 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
561}
562
563input + .text-status-constraint {
564 top: 25px;
565} 479}
566 480
567.text-status-constraint:after, 481.text-status-constraint:after,
568.text-status-constraint:before { 482.text-status-constraint:before {
569 content: " "; 483 content: " ";
570 position: absolute; 484 position: absolute;
571} 485}
572 486
573.text-status-constraint:before { 487.text-status-constraint:before {
574 left: 8px; 488 left: 8px;
575 top: -9px; 489 top: -9px;
576 border-bottom: 9px solid rgba(230, 230, 230, 1); 490 border-width: 0 9px 9px 9px;
577 border-left: 9px solid transparent; 491 border-style: solid;
578 border-right: 9px solid transparent; 492 border-color: transparent;
579} 493}
580 494
581.text-status-constraint:after { 495.text-status-constraint:after {
582 left: 9px; 496 left: 9px;
583 top: -8px; 497 top: -8px;
584 border-bottom: 8px solid rgba(250, 250, 250, 1); 498 border-width: 0 8px 8px 8px;
585 border-left: 8px solid transparent; 499 border-style: solid;
586 border-right: 8px solid transparent; 500 border-color: transparent;
587} 501}
588 502
589div.field-required:after, 503.field-required:after,
590div.picture-status-constraint:after { 504.picture-status-constraint:after {
591 display: inline-block; 505 display: inline-block;
592 position: absolute; 506 position: absolute;
593 right: 4px; 507 left: -16px;
594 font: normal normal normal 14px/1 FontAwesome; 508 font-family: 'Font Awesome 5 Free';
509 font-weight: 900;
595 font-size: inherit; 510 font-size: inherit;
596 text-rendering: auto; 511 text-rendering: auto;
597 -webkit-font-smoothing: antialiased; 512 -webkit-font-smoothing: antialiased;
598 -moz-osx-font-smoothing: grayscale; 513 -moz-osx-font-smoothing: grayscale;
599} 514}
600 515
601div.field-required:after { 516.field-required:after {
602 top: 10px; 517 top: 14px;
603 opacity: 0.6; 518 opacity: 0.6;
604 color: #C43C35; 519 font-size: 0.809rem;
605 font-size: 0.8rem;
606 content: "\f069"; 520 content: "\f069";
521 display: table;
607} 522}
608 523
609.form-field-date.field-required:after, 524.form-field-date.field-required:after,
610.form-field-date.picture-status-constraint:after { 525.form-field-date.picture-status-constraint:after {
611 right: 24px; 526 right: 24px;
612} 527}
613 528
614.form-field-select.field-required:after, 529.form-field-select.field-required:after,
615.form-field-number.field-required:after, 530.form-field-number.field-required:after,
616.form-field-decimal.field-required:after { 531.form-field-decimal.field-required:after {
617 right: -10px; 532 right: -10px;
618} 533}
619 534
620.form-field-datetime.field-required:after { 535.form-field-datetime.field-required:after {
621 right: -15px; 536 right: -15px;
622} 537}
623 538
624.form-field-checkbox.field-required:after { 539.form-field-checkbox.field-required:after {
625 right: -20px; 540 right: -20px;
626 top: 0; 541 top: 0;
627} 542}
628 543
629.form-field-upload-file.field-required:after { 544.form-field-upload-file.field-required:after {
630 right: 43px; 545 right: 43px;
631 top: 12px; 546 top: 12px;
632} 547}
633 548
634.constraint-status-right .form-field-upload-file.picture-status-constraint:after { 549.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
635 right: 40px; 550 right: 40px;
636 top: 8px; 551 top: 8px;
637} 552}
638 553
639.constraint-status-right .form-field-color:after, 554.constraint-status-right .form-field-color:after,
640.constraint-status-right .form-field-select:after, 555.constraint-status-right .form-field-select:after,
641.constraint-status-right .form-field-number:after, 556.constraint-status-right .form-field-number:after,
642.constraint-status-right .form-field-decimal:after { 557.constraint-status-right .form-field-decimal:after {
643 right: -20px; 558 right: -20px;
644} 559}
645 560
646.constraint-statuts-right .form-field-checkbox:after { 561.constraint-statuts-right .form-field-checkbox:after {
647 top: 4px; 562 top: 4px;
648} 563}
649 564
650.constraint-statuts-right .form-field-datetime:after { 565.constraint-statuts-right .form-field-datetime:after {
651 right: -22px; 566 right: -22px;
652} 567}
653 568
654.form-field-number input, 569.form-field-number input,
655.form-field-decimal input, 570.form-field-decimal input,
656.form-field-datetime input { 571.form-field-datetime input {
657 padding-right: 2px; 572 padding-right: 2px;
658} 573}
659 574
660.form-element-date .constraint-status-error div.field-required:after, 575.form-element-date .constraint-status-error .field-required:after,
661.form-element-date .constraint-status-right div.field-required:after { 576.form-element-date .constraint-status-right .field-required:after {
662 right: 10px; 577 right: 10px;
663} 578}
664 579
665.form-field-textarea.field-required:after, 580.form-field-textarea.field-required:after,
666.constraint-status-right .form-field-textarea.field-required:after, 581.constraint-status-right .form-field-textarea.field-required:after,
667.constraint-status-right .form-field-textarea.field-required:after { 582.constraint-status-right .form-field-textarea.field-required:after {
668 top: 45%; 583 top: 45%;
669} 584}
670 585
671.constraint-status-right div.field-required:after { 586.constraint-status-right .field-required:after {
672 content: " "; 587 content: " ";
673} 588}
674 589
675.constraint-status-right div.form-field-checkbox.picture-status-constraint:after { 590.constraint-status-right .form-field-checkbox.picture-status-constraint:after {
676 top: 0; 591 top: 0;
677} 592}
678 593
679.constraint-status-right div.picture-status-constraint:after { 594.constraint-status-right .picture-status-constraint:after {
680 opacity: 1; 595 opacity: 1;
681 font-size: 1.5rem; 596 font-size: 1.5rem;
682 top: 6px; 597 top: 10px;
683} 598}
684 599
685.constraint-status-error .form-field-textarea .picture-status-constraint:after, 600.constraint-status-error .form-field-textarea .picture-status-constraint:after,
686.constraint-status-right .form-field-textarea .picture-status-constraint:after { 601.constraint-status-right .form-field-textarea .picture-status-constraint:after {
687 top: 40%; 602 top: 40%;
688} 603}
689 604
690.constraint-status-right div.picture-status-constraint:after { 605.constraint-status-right .picture-status-constraint:after {
691 content: "\f00c"; 606 content: "\f00c";
692 color: #57A957;
693} 607}
694 608
695.constraint-status-error i.picture-status-constraint { 609.constraint-status-error i.picture-status-constraint {
696 content: "\f056"; 610 content: "\f056";
697 color: #C43C35;
698} 611}
699 612
700.form-field-multi-select.field-required:after { 613.form-field-multi-select.field-required:after {
701 display: none; 614 display: none;
702} 615}
703 616
704.constraint-status-right .form-field-multi-select select {
705 border-color: rgba(71, 137, 72, 0.3);
706 box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
707}
708
709.form-field-radio-button.field-required:after, 617.form-field-radio-button.field-required:after,
710.form-field-multiple-checkbox.field-required:after { 618.form-field-multiple-checkbox.field-required:after {
711 top: 4px; 619 top: 8px;
712 right: -16px; 620 right: -16px;
713} 621}
714 622
715.form-field-radio { 623.form-field-radio {
716 display: inline-block; 624 display: inline-block;
717} 625}
718 626
627.required-fields-text {
628 text-align: center;
629}
630
719/* --- HTML Table--- */ 631/* --- HTML Table--- */
720.html-table-header-sortable { 632.html-table-header-sortable {
721 float: right; 633 display: none;
634}
635
636.html-table-header-sortable .fa {
637 margin-bottom: 0.228em;
722} 638}
723 639
724@media (max-width: 768px) { 640@media (min-width: 769px) {
725 .html-table-header-sortable { 641 .html-table-header-sortable {
726 display: none; 642 display: inline-block;
727 } 643 }
728} 644}
729 645
730.html-table-header-sortable .fa-caret-up { margin-bottom: -4px; }
731.html-table-header-sortable .fa-caret-down { margin-top: -12px; }
732
733.html-table-header-sortable .sort-active {
734 color: #AAAAAA;
735}
736
737/* --- Auto-completion --- */ 646/* --- Auto-completion --- */
738.autocomplete-suggestions { 647.autocomplete-suggestions {
739 background-color: #FFFFFF; 648 border-width: 1px;
740 border: 1px solid #999999; 649 border-style: solid;
650 border-color: transparent;
741 overflow: auto; 651 overflow: auto;
742} 652}
743 653
744.autocomplete-suggestions strong { 654.autocomplete-suggestions strong {
745 font-weight: normal; 655 font-weight: normal;
746 color: #3399FF;
747} 656}
748 657
749.autocomplete-suggestion { 658.autocomplete-suggestion {
750 padding: 2px 5px; 659 padding: 0.1618em 0.309em;
751 white-space: nowrap; 660 white-space: nowrap;
752 overflow: hidden; 661 overflow: hidden;
753 cursor: pointer; 662 cursor: pointer;
754}
755
756.autocomplete-selected {
757 background-color: #F0F0F0;
758} 663}
759 664
760.autocomplete-no-suggestion { 665.autocomplete-no-suggestion {
761 text-align: center; 666 text-align: center;
762} 667}
763 668
764div[id*='keyword'] .form-autocompleter-container input { 669div[id*='keyword'] .form-autocompleter-container input {
765 max-width: calc(100% - 20px); 670 max-width: calc(100% - 1.309em);
766} 671}
767 672
768/* --- Lined textarea --- */ 673/* --- Lined textarea --- */
769.linedwrap { 674.linedwrap {
770 max-width: 100%; 675 max-width: 100%;
771} 676}
772 677
773.linedtextarea { 678.linedtextarea {
774 display: inline-block; 679 display: inline-block;
775 margin: 0; 680 margin: 0;
776 padding: 0 0 0 10px; 681 padding: 0 0 0 0.618em;
777 width: calc(100% - 60px); 682 width: calc(100% - 60px);
778 height: 100%; 683 height: 100%;
779 background-color: #FFFFFF;
780} 684}
781 685
782.linedtextarea textarea, 686.linedtextarea textarea,
783.linedwrap .codelines .lineno { 687.linedwrap .codelines .lineno {
784 font-size: 10pt; 688 font-size: 10pt;
785 font-family: monospace; 689 font-family: monospace;
786 line-height: normal !important; 690 line-height: normal !important;
787} 691}
788 692
789.linedtextarea textarea { 693.linedtextarea textarea {
790 margin: 0; 694 margin: 0;
791 padding: 5px 0 0 0; 695 padding: 0.309em 0 0 0;
792 width: 100% !important; 696 width: 100% !important;
793 height: 100%; 697 height: 100%;
794 border: 0; 698 border: 0;
795} 699}
796 700
797.linedwrap .lines { 701.linedwrap .lines {
798 display: inline-block; 702 display: inline-block;
799 overflow: hidden; 703 overflow: hidden;
800 margin-top: 0; 704 margin-top: 0;
801 padding: 5px 0 0 0; 705 padding: 0.309em 0 0 0;
802 width: 50px; 706 width: 50px;
803 height: 100%; 707 height: 100%;
804 background-color: #FFFFFF; 708 border-width: 0 1px 0 0;
805 border-right: 1px solid #C0C0C0; 709 border-style: solid;
710 border-color: transparent;
806} 711}
807 712
808.linedwrap .codelines .lineno { 713.linedwrap .codelines .lineno {
809 padding: 0.0em 0.5em 0 0; 714 padding: 0.0em 0.618em 0 0;
810 text-align: right; 715 text-align: right;
811 color: #AAAAAA;
812 white-space: nowrap; 716 white-space: nowrap;
813} 717}
814 718
815.linedwrap .codelines .lineselect { 719.auth-setter {
816 color: red; 720 display: -ms-flexbox;
721 display: -webkit-flex;
722 display: flex;
723 -webkit-flex-direction: row;
724 -ms-flex-direction: row;
725 flex-direction: row;
726 -webkit-flex-wrap: wrap;
727 -ms-flex-wrap: wrap;
728 flex-wrap: wrap;
729}
730
731@media (min-width: 769px) {
732 .form-element-auth {
733 width: 50%;
734 margin: 0 0 2.618em;
735 }
736 .form-element-auth > label {
737 width: 100%;
738 display: block;
739 font-size: large;
740 }
817} 741}
Editor
Original Text
Changed Text
Recommended videos