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
}