Subversion Repositories eFlore/Applications.cel

Rev

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