Subversion Repositories eFlore/Applications.cel

Rev

Rev 3638 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3638 delphine 1 
@CHARSET "UTF-8";
2 
 
3 
body {
4 
  font-family: Muli,sans-serif;
5 
  font-size: 0.8rem;
6 
  font-weight: 300;
7 
}
8 
 
9 
#zone-appli {
10 
  padding: 2rem;
11 
  border-radius: 0.3rem;
12 
  background-color: rgba(255, 255, 255, 0.9);
13 
  margin: 2rem auto;
14 
}
15 
 
16 
#zone-appli .zone-alerte{
17 
  width: 100%;
18 
}
19 
 
20 
#logo {
21 
  max-width: 100%;
3712 idir 22 
  color: transparent;
3638 delphine 23 
}
24 
 
25 
h1, h2, h3, h4, h5 {
26 
  font-family: Muli,sans-serif;
27 
  color: #606060;
28 
  font-weight: 700;
29 
}
30 
 
31 
form {
32 
  font-family: Muli,sans-serif;
33 
  float: none;
34 
}
35 
 
36 
h1 {
37 
  font-weight: 700;
38 
  font-size: 2rem;
39 
}
40 
 
41 
h2 {
42 
  font-weight: 700;
43 
  line-height: 1.15;
44 
  font-size: 1.5rem;
45 
}
46 
 
47 
h3 {
48 
  font-size: 1.2rem;
49 
}
50 
 
51 
ul {
52 
  padding-inline-start: 0;
53 
}
54 
 
55 
#zone-appli .obligatoire::before {
56 
  content: '*';
57 
  position: absolute;
58 
  left: 0;
59 
}
60 
 
61 
.btn.focus,
62 
.btn:focus {
63 
  box-shadow: none;
64 
}
65 
 
66 
.btn.btn-primary,
67 
.btn.btn-info,
68 
.btn.btn-success,
69 
.btn.btn-danger,
70 
.btn.btn-inverse {
71 
  color: #fff !important;
72 
}
73 
 
74 
.btn.btn-primary,
75 
.btn.btn-info,
76 
.btn.btn-success,
77 
.btn.btn-danger,
78 
.btn.btn-inverse,
79 
.btn.btn-outline-primary,
80 
.btn.btn-outline-info,
81 
.btn.btn-outline-success,
82 
.btn.btn-outline-danger,
83 
.btn.btn-outline-inverse {
84 
  border-radius: 0.15rem;
85 
}
86 
 
87 
button {
88 
  -moz-border-bottom-colors: none;
89 
  -moz-border-left-colors: none;
90 
  -moz-border-right-colors: none;
91 
  -moz-border-top-colors: none;
92 
  background-color: #a2b93b;
93 
  border-bottom-color: currentcolor;
94 
  border-bottom-left-radius: 0.2rem;
95 
  border-bottom-right-radius: 0.2rem;
96 
  border-bottom-style: none;
97 
  border-bottom-width: 0;
98 
  border-image-outset: 0 0 0 0;
99 
  border-image-repeat: stretch stretch;
100 
  border-image-slice: 100% 100% 100% 100%;
101 
  border-image-source: none;
102 
  border-image-width: 1 1 1 1;
103 
  border-left-color: currentcolor;
104 
  border-left-style: none;
105 
  border-left-width: 0;
106 
  border-right-color: currentcolor;
107 
  border-right-style: none;
108 
  border-right-width: 0;
109 
  border-top-color: currentcolor;
110 
  border-top-left-radius: 0.2rem;
111 
  border-top-right-radius: 0.2rem;
112 
  border-top-style: none;
113 
  border-top-width: 0;
114 
  color: #fff;
115 
  cursor: pointer;
116 
  display: inline-block;
117 
  font-family: Ubuntu,sans-serif;
118 
  font-size: 1.3rem;
119 
  font-weight: 500;
120 
  letter-spacing: 0.1rem;
121 
  line-height: 1.5rem;
122 
  padding-bottom: 1.25rem;
123 
  padding-left: 2rem;
124 
  padding-right: 2rem;
125 
  padding-top: 1.25rem;
126 
  text-align: center;
127 
  text-decoration-color: currentcolor;
128 
  text-decoration-line: none;
129 
  text-decoration-style: solid;
130 
  text-transform: uppercase;
131 
  transition-delay: 0s;
132 
  transition-duration: 0.2s;
133 
  transition-property: background;
134 
  transition-timing-function: ease;
135 
}
136 
 
137 
.mb2,
138 
.mb-3 {
139 
  align-self: start;
140 
}
141 
 
142 
label,
143 
#zone-appli .list-label {
144 
  color: #606060;
145 
  display: block;
146 
  font-size: 0.9rem;
147 
  font-weight: 700;
148 
}
149 
 
150 
#zone-appli .form-inline label,
151 
#zone-appli .form-inline .list-label {
152 
  align-items: start;
153 
  align-self: start;
154 
  justify-content: left;
155 
  align-content: flex-start;
156 
}
157 
 
158 
#zone-appli .hidden,
159 
#fenetre-modal .hidden {
160 
  display: none !important;
161 
}
162 
 
163 
#zone-appli .warning {
164 
  color: #ff5d55;
165 
  font-weight: 700;
166 
}
167 
 
168 
#photos-conteneur label.label-file.error,
169 
.control-group.error #connexion,
170 
.control-group.error #inscription,
171 
.control-group.error #bouton-anonyme,
172 
.control-group.error .geoloc,
173 
.control-group.error input,
174 
.control-group.error select,
175 
.control-group.error textarea {
176 
  box-shadow: 0 0 1.5px 1px red;
177 
  border-color: #b94a48;
178 
  color: #b94a48;
179 
}
180 
 
181 
.control-group .erreur,
182 
.control-group.error,
183 
span.error {
184 
  color: #b94a48 !important;
185 
}
186 
 
187 
#zone-appli .centre {
188 
  margin: 0 auto !important;
189 
  justify-content: center !important;
190 
}
191 
 
192 
#zone-appli .droite {
193 
  float: right;
194 
}
195 
 
196 
#zone-appli .info {
197 
  padding: 1rem;
198 
  background-color: #ccecf1;
199 
  border-color: #7ccedb;
200 
  color: #006979;
201 
  fill: #006979;
202 
  border-radius: 0.2rem;
203 
}
204 
 
205 
#zone-appli .clear {
206 
  clear: both;
207 
  height: 0; overflow: hidden; /* Précaution pour IE 7 */
208 
}
209 
 
210 
#zone-appli .ui-widget{
211 
  font-family: Muli,sans-serif;
212 
}
213 
 
214 
#zone-appli .form-inline .form-control {
215 
  width: 100%;
216 
}
217 
 
218 
#zone-appli #logo_hires {
219 
  display: none;
220 
}
221 
 
222 
#zone-appli .logo-tb {
223 
  position:absolute;
224 
  left: 10px;
225 
  top: 10px;
226 
}
227 
 
228 
#zone-appli .bloc-top {
229 
  border-top: 1px solid rgba(0,0,0,.1);
230 
  padding-top: 1rem;
231 
}
232 
 
233 
#zone-appli .bloc-bottom {
234 
  border-bottom: 1px solid rgba(0,0,0,.1);
235 
  padding-bottom: 1rem;
236 
}
237 
 
238 
.unstyled {
239 
  list-style-type: none;
240 
  overflow-y: auto;
241 
  overflow-x: initial;
242 
  height: 8rem;
243 
  padding: 1rem;
244 
}
245 
 
246 
#zone-appli #formulaire form {
247 
  margin-bottom: 1.5rem;
248 
}
249 
 
250 
input[type="checkbox"],
251 
input[type="radio"],
252 
input.radio,
253 
input.checkbox {
254 
  vertical-align:text-top;
255 
  padding: 0;
256 
  margin-right: 10px;
257 
  position:relative;
258 
  overflow:hidden;
259 
  top:2px;
260 
}
261 
 
262 
/*************************************************************************/
263 
 
264 
form#form-observateur,
265 
form#form-observation {
266 
  min-width: 100%;
267 
  margin-left: 0;
268 
  margin-right: 0;
269 
}
270 
 
271 
.volet {
272 
  height: 5rem;
273 
}
274 
 
275 
#identite {
276 
  height: auto;
277 
}
278 
 
279 
#bouton-connexion,
280 
#creation-compte {
281 
  display: -ms-flexbox;
282 
  display: flex;
283 
  height: 5rem;
284 
  -webkit-box-flex: 1;
285 
  -webkit-flex: 0 0 50%;
286 
  -ms-flex: 0 0 50%;
287 
  flex: 0 0 50%;
288 
  max-width: 50%;
289 
  -ms-flex-flow: row wrap;
290 
  flex-flow: row wrap;
291 
  min-height: 1px;
292 
  padding-right: 15px;
293 
  padding-left: 15px;
294 
  justify-content: left;
295 
  align-items: flex-start;
296 
  align-content: flex-middle;
297 
}
298 
 
299 
#ajouter-obs,
300 
#transmettre-obs {
301 
  color: #fff;
302 
  background-color: #b2cb43;
303 
  border: none;
304 
  border-radius: 0.1rem;
305 
}
306 
 
307 
#transmettre-obs:focus,
308 
#transmettre-obs:hover,
309 
#ajouter-obs:focus,
310 
#ajouter-obs:hover {
311 
  background-color: #a2b93b;
312 
  border: none;
313 
}
314 
 
315 
#utilisateur-connecte.volet {
316 
  padding-left: 2rem;
317 
}
318 
 
319 
#utilisateur-connecte.volet > a {
320 
  margin-left: 0;
321 
}
322 
 
323 
#utilisateur-connecte.volet #profil-utilisateur,
324 
#utilisateur-connecte.volet #deconnexion {
325 
  padding: 0 0.75rem;
326 
  margin: 0.2rem 0;
327 
}
328 
 
329 
#utilisateur-connecte.volet .volet-menu a {
330 
  font-size: 0.8rem;
331 
  font-weight: 400;
332 
  color: #606060;
333 
  background: inherit;
334 
  text-decoration: none;
335 
  display: block;
336 
  width: 100%;
337 
  padding-left: 5px;
338 
  line-height: 25px;
339 
  outline: 0;
340 
}
341 
 
342 
#utilisateur-connecte.volet #profil-utilisateur:hover,
343 
#utilisateur-connecte.volet #deconnexion:hover,
344 
#utilisateur-connecte.volet #profil-utilisateur:focus,
345 
#utilisateur-connecte.volet #deconnexion:focus {
346 
  background: #b2cb43;
347 
}
348 
 
349 
#utilisateur-connecte.volet .volet-menu a:hover,
350 
#utilisateur-connecte.volet .volet-menu a:focus {
351 
  color: #fff;
352 
}
353 
 
354 
#utilisateur-connecte .volet-menu {
355 
  position: absolute;
356 
  z-index: 1000;
357 
  min-width: auto;
358 
  list-style: none;
359 
  background-color: #fff;
360 
  border: 1px solid #ccc;
361 
  border: 1px solid rgba(0, 0, 0, 0.15);
362 
  border-radius: 4px;
363 
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
364 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
365 
}
366 
 
367 
.volet-menu div a {
368 
  color: #222;
369 
}
370 
 
371 
#utilisateur-connecte .volet-toggle::after {
372 
  font-family: "Font Awesome 5 Free";
373 
  font-size: 0.8rem;
374 
  font-weight: 900;
375 
  content: '\f0d7'
376 
}
377 
 
378 
/*******************************************/
379 
 
380 
.label-file {
381 
  overflow: hidden;
382 
  position: relative;
383 
  cursor: pointer;
384 
  border-radius: 0.25rem;
385 
  font-weight: 400;
386 
  font-size: 0.9rem;
387 
  text-align: center;
388 
  white-space: nowrap;
389 
  vertical-align: middle;
390 
  -webkit-user-select: none;
391 
  -moz-user-select: none;
392 
  -ms-user-select: none;
393 
  user-select: none;
394 
  border: 1px solid transparent;
395 
  padding: .375rem .75rem;
396 
  line-height: 1.5;
397 
  transition:
398 
    color .15s ease-in-out,
399 
    background-color .15s ease-in-out,
400 
    border-color .15s ease-in-out,
401 
    box-shadow .15s ease-in-out;
402 
  margin: 0;
403 
}
404 
 
405 
.label-file [type=file] {
406 
  cursor: inherit;
407 
  display: block;
408 
  font-size: 999px;
409 
  filter: alpha(opacity=0);
410 
  min-height: 100%;
411 
  min-width: 100%;
412 
  opacity: 0;
413 
  position: absolute;
414 
  right: 0;
415 
  text-align: right;
416 
  top: 0;
417 
}
418 
 
419 
.label-file [type=file] {
420 
  cursor: pointer;
421 
}
422 
 
423 
/*************************************/
424 
 
425 
#miniatures .miniature {
426 
  position: relative;
427 
  display: inline-block;
428 
  margin-bottom: 3rem;
429 
}
430 
 
431 
#miniatures .miniature .miniature-img {
432 
  width: 10vw;
433 
  vertical-align: top;
434 
}
435 
 
436 
#miniatures .miniature .effacer-miniature {
437 
  display: flex;
438 
  position: absolute;
439 
  left: 0;
440 
  right: 0;
441 
  bottom: -1.9rem;
442 
  font-size: 1rem;
443 
  background-color: #ff5d55;
444 
  opacity: 1;
445 
  color: #ffffff;
446 
  padding: 0;
447 
  margin: 0;
448 
  width: 100%;
449 
  height: 2rem;
450 
  align-items:center;
451 
  justify-content: center;
452 
  cursor: pointer;
453 
  border-bottom-right-radius: 0.2rem;
454 
  border-bottom-left-radius: 0.2rem;
455 
}
456 
 
457 
#miniatures .miniature .effacer-miniature:hover {
458 
  background-color: #ff847e;
459 
}
460 
.obs {
461 
  height: 10rem;
462 
  padding: 1rem;
463 
  border-radius: 0.25rem;
464 
  background-color: #fbfbfb;
465 
  border: 1px solid #eee;
466 
  overflow: hidden;
467 
}
468 
 
469 
.obs .nom-sci {
470 
  font-size: 1rem;
471 
}
472 
 
473 
.defilement-miniatures .defilement-miniatures-cache,
474 
.defilement-miniatures .miniature-cachee {
475 
  display: none;
476 
}
477 
 
478 
.defilement-miniatures {
479 
  display: flex;
480 
  align-items:center;
481 
  justify-content: center;
482 
  height: 8rem;
483 
}
484 
.defilement-miniatures figure {
485 
  display: inline-block;
486 
  min-height: 8rem;
487 
  line-height: 8rem;
488 
  text-align: center;
489 
  min-width: 80%;
490 
  width: 80%;
491 
  margin:0 auto;
492 
  padding: 0;
493 
}
494 
 
495 
.miniature-selectionnee {
496 
  vertical-align: middle;
497 
  max-height: 8rem;
498 
  max-width: 80%;
499 
}
500 
 
501 
.defilement-miniatures-gauche,
502 
.defilement-miniatures-droite {
503 
  display: inline-block;
504 
  color: #5bc0de;
505 
  vertical-align: middle;
506 
  outline-style: none;
507 
}
508 
 
509 
.defilement-miniatures-gauche:active,
510 
.defilement-miniatures-droite:active,
511 
.defilement-miniatures-gauche:focus,
512 
.defilement-miniatures-droite:focus {
513 
  color: #499fb7;
514 
}
515 
 
516 
.defilement-miniatures-gauche:hover,
517 
.defilement-miniatures-droite:hover {
518 
  color: #499fb7;
519 
}
520 
 
521 
#zone-prenom-nom #prenom,
522 
#zone-prenom-nom #nom {
523 
  z-index: 0;
524 
}
525 
 
526 
#transmettre-obs{
527 
  text-align: right;
528 
}
529 
 
530 
#zone-liste-obs h2.transmission-title {
531 
  display: inline-block;
532 
}
533 
 
534 
footer a {
535 
  display: inline-block;
536 
}
537 
 
538 
.help-button {
539 
  float: right;
540 
}
541 
 
542 
#image-fond {
543 
  position: fixed;
544 
  top:0;
545 
  bottom: 0;
546 
  left: 0;
547 
  right: 0;
548 
  z-index: -1;
549 
  min-width: 100%;
550 
  background-attachment: fixed;
551 
  margin: 0;
552 
  padding: 0;
553 
}
554 
 
555 
.modal-open,
556 
body.modal-open {
557 
  overflow: inherit !important;
558 
}
559 
 
560 
.modal-footer,
561 
.modal-header {
562 
  border-top: none;
563 
  border-bottom: none;
564 
}
565 
 
566 
.modal-dialog {
567 
  max-width: 90vw;
568 
}
569 
 
570 
.modal-content img {
571 
  display: none;
572 
}
573 
 
574 
.modal-body {
575 
  padding: 0;
576 
  margin:0 auto;
577 
  text-align: center;
578 
}
579 
 
580 
/*************************************/
581 
 
582 
@media screen and ( max-width: 768px ) {
583 
 
584 
  #titre-projet {
585 
    font-size: 1.5rem;
586 
  }
587 
 
588 
  h2 {
589 
    font-size: 1.3rem;
590 
  }
591 
 
592 
  #logo {
593 
    max-width: 80%;
594 
  }
595 
 
596 
  #bouton-connexion,
597 
  #creation-compte {
598 
    display: block;
599 
    width: 100%;
600 
    position: static;
601 
  }
602 
  #miniatures .miniature .miniature-img {
603 
    width: 22.9vw;
604 
  }
605 
  #miniatures .miniature .effacer-miniature {
606 
    font-size: 0.8rem;
607 
  }
608 
 
609 
  #transmettre-obs.droite {
610 
    float: none;
611 
  }
612 
 
613 
  .obs {
614 
    height: auto;
615 
  }
616 
 
617 
  .obs .unstyled {
618 
    font-size: 0.6rem;
619 
  }
620 
 
621 
  .obs .nom-sci {
622 
    font-size: 0.8rem;
623 
  }
624 
 
625 
  .supprimer-obs {
626 
    overflow: hidden;
627 
  }
628 
 
629 
  #image-fond {
630 
    display: none;
631 
  }
632 
 
633 
  #fenetre-modal {
634 
    padding: 0 !important;
635 
  }
636 
 
637 
  .modal-dialog {
638 
    max-width: unset;
639 
    top: 0;
640 
    bottom: 0;
641 
    left: 0;
642 
    right: 0;
643 
    margin: 0;
644 
  }
645 
 
646 
  .modal-dialog-centered {
647 
    min-height: 100vh;
648 
  }
649 
 
650 
  .modal-content {
651 
    border: none;
652 
    border-radius: 0;
653 
    top: 0;
654 
    bottom: 0;
655 
    left: 0;
656 
    right: 0;
657 
    min-width: 100vw;
658 
    min-height: 100vh;
659 
    padding-right: 15px;
660 
  }
661 
}