Projekt

Obecné

Profil

Stáhnout (26 KB) Statistiky
| Větev: | Revize:
1
@import 'bootstrap-4.5.3/_functions.scss';
2
@import 'bootstrap-4.5.3/_variables.scss';
3
@import 'bootstrap-4.5.3/mixins/_breakpoints.scss';
4

    
5
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
6

    
7

    
8

    
9
// ---------------------------------------- COLORS SETTINGS ----------------------------------------
10

    
11
// images filepath directory
12
$images-dir: '../img/';
13

    
14
// text color
15
$text-color: #ffffff;
16

    
17
// website main colors
18
$primary-bg-color: #0048A9;
19
$primary-bg-color-darker: #004fb3;
20
$secondary-bg-color: #0b155a;
21

    
22
// heatmap - header background colors
23
$heatmap-nav-border-color: #1c6cc0;
24
$heatmap-nav-button-bg-color: #0057be;
25

    
26
// heatmap - controls (map locations, timeline) background colors
27
$heatmap-controls-primary-bg: rgba(11, 21, 90, .7);
28
$heatmap-controls-secondary-bg: rgba(11, 21, 90, 1);
29

    
30
// heatmap - <input> elements background color on hover
31
$input-bg-hover:rgba(255, 255, 255, .1);
32

    
33
// heatmap - <form> dropdown even items background color
34
$dropdown-even-items-bg: rgba(0, 0, 0, .05);
35

    
36
// heatmap - popup buttons background colors
37
$heatmap-popup-btn-bg: $input-bg-hover;
38
$heatmap-popup-btn-hover-bg: rgba(125, 125, 125, .1);
39

    
40

    
41

    
42
// ---------------------------------------- STYLE ----------------------------------------
43

    
44
html, body {
45
  position: relative;
46
  height: 96.2%;
47
  font-family: 'Be Vietnam', sans-serif;
48
  color: $text-color;
49
  background: $secondary-bg-color;
50

    
51
  &.intro {
52
    @include media-breakpoint-down(sm) {
53
      height: calc(100% - 45px);
54
    }
55
  }
56
}
57

    
58

    
59
// LINKS
60
a {
61
  color: $text-color;
62
  outline: none;
63

    
64
  &:hover {
65
    color: $text-color;
66
  }
67
}
68

    
69

    
70
// HEADINGS
71
h1 {
72
  text-transform: uppercase;
73
  font-size: 21px;
74
  font-weight: 700;
75
  letter-spacing: .53px;
76

    
77
  @include media-breakpoint-up(lg) {
78
    line-height: 55px;
79
  }
80
}
81

    
82
h2 {
83
  font-size: 16px;
84
  font-weight: 400;
85
  letter-spacing: .4px;
86

    
87
  @include media-breakpoint-up(lg) {
88
    margin: 0;
89
  }
90
}
91

    
92
h3 {
93
  font-size: 38px;
94
  font-weight: 800;
95
  letter-spacing: .95px;
96

    
97
  @include media-breakpoint-down(xs) {
98
    font-size: 28px;
99
  }
100
}
101

    
102

    
103
// SEPARATOR
104
hr {
105
  width: 300px;
106
  text-align: left;
107
  margin: 30px 0;
108
  border-top: 2px solid $text-color;
109

    
110
  @include media-breakpoint-down(lg) {
111
    width: 90%;
112
  }
113

    
114
  @include media-breakpoint-down(xs) {
115
    margin: 15px 0;
116
  }
117
}
118

    
119

    
120
// HEADER
121
header {
122
  height: 70px;
123
  background: $primary-bg-color;
124

    
125

    
126
  // HEADER - LOGO
127
  .logo {
128
    width: 450px;
129
    height: 181px;
130
    position: absolute;
131
    top: 70px;
132
    left: 0;
133
    z-index: 2;
134
    background: url($images-dir + 'header-bg.png');
135

    
136
    @media (max-width: 1400px) {
137
      display: none;
138
    }
139

    
140
    img {
141
      height: 100px;
142
      position: relative;
143
      top: -50px;
144
      left: 50px;
145
    }
146
  }
147

    
148
  nav.navbar {
149
    height: 70px;
150
    position: relative;
151
  }
152

    
153
  .navbar-toggler-icon {
154
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
155
  }
156

    
157
  .navbar-brand.shifted {
158
    @media (min-width: 1401px) {
159
      position: absolute;
160
      top: 0;
161
      left: 450px;
162
    }
163

    
164
    @include media-breakpoint-down(lg) {
165
      left: 20px;
166
    }
167
  }
168

    
169
  @include media-breakpoint-down(md) {
170
    #navigation {
171
      width: 100%;
172
      padding: 20px;
173
      position: absolute;
174
      top: 70px;
175
      left: 0;
176
      z-index: 1001;
177
      opacity: .98;
178
      background: $primary-bg-color-darker;
179
    }
180
  }
181

    
182
  .nav-item {
183
    margin-right: 40px;
184

    
185
    @media (max-width: 1480px) {
186
      margin-right: 30px;
187
    }
188

    
189
    @media (max-width: 1440px) {
190
      margin-right: 15px;
191
    }
192

    
193
    @include media-breakpoint-down(lg) {
194
      margin-right: 30px;
195
    }
196

    
197
    @include media-breakpoint-down(md) {
198
      margin-right: 0;
199
    }
200

    
201
    .active {
202
      font-weight: 800;
203
    }
204

    
205
    &.button {
206
      .nav-link {
207
        padding-left: 22px;
208
        padding-right: 22px;
209
        border: 1px solid $text-color;
210
        border-radius: 20px;
211

    
212
        &:hover {
213
          background: $primary-bg-color-darker;
214
        }
215
      }
216
    }
217
  }
218

    
219
  .navbar-button {
220
    padding: .5rem 22px;
221
    margin-right: 40px;
222
    border: 1px solid $text-color;
223
    border-radius: 20px;
224
    text-decoration: none;
225

    
226
    @include media-breakpoint-down(md) {
227
      display: none;
228
    }
229

    
230
    &:hover {
231
      background: $primary-bg-color-darker;
232
    }
233
  }
234

    
235
  .btn-secondary {
236
    height: 100%;
237
    font-size: 16px;
238
    text-transform: uppercase;
239
    font-weight: 800;
240
    letter-spacing: .4px;
241
    border-radius: 0;
242
    border: $primary-bg-color;
243
    background: $primary-bg-color-darker;
244

    
245
    &:hover {
246
      background: $primary-bg-color !important;
247
    }
248
  }
249
}
250

    
251

    
252

    
253
// ---------------------------------------- INTRO PAGE ----------------------------------------
254

    
255

    
256
// INTRO PAGE - SWIPER WRAPPER
257
.swiper-container {
258
  height: 100%;
259
  position: relative;
260

    
261
  .btn-primary {
262
    width: 300px;
263
    height: 50px;
264
    line-height: 32px;
265
    position: relative;
266
    padding-left: 30px;
267
    margin-top: 40px;
268
    text-align: left;
269
    font-size: 16px;
270
    text-transform: uppercase;
271
    letter-spacing: 0.4px;
272
    border-radius: 30px;
273
    border: 1px solid $secondary-bg-color;
274
    background: $secondary-bg-color;
275
  
276
    &:hover, &:focus, &:active {
277
      border: 1px solid $primary-bg-color;
278
      background: $primary-bg-color !important;
279
    }
280
  
281
    @include media-breakpoint-down(xs) {
282
      width: 100%;
283
      max-width: 270px;
284
      height: auto;
285
      margin-top: 20px;
286
    }
287
  }
288
  
289
  .btn-secondary {
290
    background: $secondary-bg-color;
291
  
292
    &:hover, &:focus, &:active {
293
      background: $input-bg-hover !important;
294
    }
295
  }
296
}
297

    
298

    
299
// INTRO PAGE - SLIDES BACKGROUND IMAGES
300
.swiper-slide {
301
  display: flex;
302
  justify-content: center;
303
  align-items: center;
304

    
305
  &.slide-bg-1 {
306
    background: url($images-dir + 'bg-1.jpg') no-repeat top center;
307
    background-size: cover;
308
  }
309

    
310
  &.slide-bg-2 {
311
    background: url($images-dir + 'bg-2.jpg') no-repeat bottom center;
312
    background-size: cover;
313
  }
314

    
315
  &.slide-bg-3 {
316
    background: url($images-dir + 'bg-3.jpg') no-repeat bottom center;
317
    background-size: cover;
318

    
319
    .slide-text {
320
      width: 100%;
321
    }
322
  }
323

    
324
  @include media-breakpoint-down(sm) {
325
    .container {
326
      max-width: 100%;
327
      height: 100%;
328
      overflow-y: scroll;
329
    }
330
  }
331
}
332

    
333

    
334
// INTRO PAGE - SLIDE TEXT
335
.slide-text {
336
  width: 600px;
337
  padding-bottom: 160px;
338
  position: relative;
339

    
340
  @include media-breakpoint-down(lg) {
341
    width: 100%;
342
  }
343

    
344
  @include media-breakpoint-down(lg) {
345
    padding-bottom: 80px;
346
  }
347

    
348
  .slide-index {
349
    display: inline-block;
350
    padding-bottom: 20px;
351
    font-size: 72px;
352
    font-weight: 800;
353

    
354
    @include media-breakpoint-down(xs) {
355
      padding-bottom: 10px;
356
      font-size: 48px;
357
    }
358
  }
359

    
360
  .btn-primary {
361
    z-index: 1000;
362

    
363
    &:after {
364
      content: "";
365
      display: inline-block;
366
      width: 10px;
367
      height: 16px;
368
      position: absolute;
369
      top: 16px;
370
      right: 20px;
371
      background: url($images-dir + 'btn-play.svg') no-repeat top right;
372
    }
373
  }
374

    
375
  p {
376
    font-size: 18px;
377
    font-weight: 600;
378

    
379
    @include media-breakpoint-down(xs) {
380
      font-size: 16px;
381
    }
382

    
383
    a {
384
      text-decoration: underline;
385

    
386
      &:hover {
387
        text-decoration: none;
388
      }
389
    }
390
  }
391
}
392

    
393

    
394
// INTRO PAGE - SLIDES PAGINATION BUTTONS
395
.swiper-pagination-buttons {
396
  width: 200px;
397
  height: 56px;
398
  padding: 6px;
399
  position: absolute;
400
  right: 150px;
401
  bottom: 20px;
402
  z-index: 1;
403
  border-radius: 100px;
404
  background: $secondary-bg-color;
405

    
406
  @include media-breakpoint-down(lg) {
407
    right: 20px;
408
  }
409

    
410
  @include media-breakpoint-down(sm) {
411
    width: 120px;
412
  }
413

    
414
  @include media-breakpoint-down(xs) {
415
    bottom: 10px;
416
  }
417

    
418
  .btn-prev, .btn-next {
419
    display: inline-block;
420
    width: 45px;
421
    height: 45px;
422
    position: relative;
423
    border-radius: 50%;
424
    border: 2px solid $text-color;
425

    
426
    &:after {
427
      content: "";
428
      display: inline-block;
429
      width: 7px;
430
      height: 12px;
431
      position: absolute;
432
      top: calc(50% - 6px);
433
      left: calc(50% - 4px);
434
    }
435
  }
436

    
437
  .btn-prev:after {
438
    background: url($images-dir + 'btn-prev.svg') no-repeat top right;
439
  }
440

    
441
  .btn-next {
442
    float: right;
443

    
444
    &:after {
445
      background: url($images-dir + 'btn-next.svg') no-repeat top right;
446
    }
447
  }
448
}
449

    
450

    
451
// INTRO PAGE - PAGINATION BULLETS
452
.swiper-pagination-bullets {
453
  display: inline-block;
454
  width: auto !important;
455
  height: 30px;
456
  position: absolute;
457
  left: 20px !important;
458
  bottom: 30px !important;
459
  border-radius: 100px;
460
  opacity: 0.8;
461
  background: $secondary-bg-color;
462

    
463
  @include media-breakpoint-up(lg) {
464
    left: 50% !important;
465
    transform: translateX(-50%);
466
  }
467

    
468
  @include media-breakpoint-down(xs) {
469
    display: none;
470
  }
471

    
472
  &:before {
473
    content: "";
474
    width: 100px;
475
    position: absolute;
476
    top: 13px;
477
    left: 15px;
478
    z-index: 1;
479
    border-top: 2px solid $text-color;
480
  }
481

    
482
  .swiper-pagination-bullet {
483
    width: 20px;
484
    height: 20px;
485
    position: relative;
486
    margin: 4px 15px !important;
487
    opacity: 1;
488
    border: 2px solid $secondary-bg-color;
489
    background: $secondary-bg-color;
490

    
491
    &:before {
492
      content: "";
493
      display: inline-block;
494
      width: 6px;
495
      height: 6px;
496
      position: absolute;
497
      top: 5px;
498
      left: 5px;
499
      border-radius: 50%;
500
      background: $text-color;
501
    }
502

    
503
    &:first-of-type {
504
      margin-left: 5px !important;
505
    }
506

    
507
    &:last-of-type {
508
      margin-right: 5px !important;
509
    }
510
  }
511

    
512
  .swiper-pagination-bullet-active {
513
    border: 2px solid $text-color;
514
  }
515
}
516

    
517

    
518
// INTRO PAGE - SAMPLE MAP POINTS
519
.map-point {
520
  width: 50px;
521
  height: 50px;
522
  z-index: 1;
523
  position: absolute;
524
  border-radius: 50%;
525
  cursor: pointer;
526
  border: 2px solid $text-color;
527

    
528
  @media not all and (min-width: 1900px) and (max-width: 2100px) {
529
    display: none;
530
  }
531

    
532
  &:before {
533
    content: "";
534
    display: inline-block;
535
    width: 16px;
536
    height: 16px;
537
    position: absolute;
538
    top: calc(50% - 8px);
539
    left: calc(50% - 8px);
540
    background: url($images-dir + 'map-point-plus.svg') no-repeat;
541
  }
542

    
543
  &:hover {
544
    &:before {
545
      z-index: 1;
546
      top: calc(50% - 1px);
547
      background: url($images-dir + 'map-point-minus.svg') no-repeat;
548
    }
549

    
550
    .desc {
551
      display: block;
552
      width: 220px;
553
      padding: 10px 20px;
554
      z-index: 0;
555
      opacity: 0.75;
556
      border-radius: 25px 0 25px 0;
557
      background: $secondary-bg-color;
558
    }
559
  }
560

    
561
  .desc {
562
    display: none;
563
  }
564

    
565
  p {
566
    font-size: 14px;
567
    font-weight: 400;
568

    
569
    &:last-of-type {
570
      margin-bottom: 10px;
571
    }
572
  }
573

    
574
  strong {
575
    display: inline-block;
576
    width: 100%;
577
    padding: 0 0 20px 40px;
578
    font-size: 16px;
579
  }
580

    
581
  .circle {
582
    width: 50px;
583
    height: 50px;
584
    position: absolute;
585
    top: -2px;
586
    left: -2px;
587
    border-radius: 50%;
588
    border: 2px solid $text-color;
589
  }
590

    
591
  &.point-1 {
592
    top: 470px;
593
    right: 32.2%;
594
  }
595

    
596
  &.point-2 {
597
    top: 688px;
598
    right: 21.2%;
599
  }
600

    
601
  &.point-3 {
602
    bottom: 430px;
603
    right: 20.8%;
604
  }
605
}
606

    
607

    
608
// INTRO PAGE - ADDITIONAL SLIDES BACKGROUND
609
.slide-background {
610
  width: 650px;
611
  height: 290px;
612
  z-index: 1;
613
  position: absolute;
614
  bottom: 0;
615
  left: 0;
616
  background: url($images-dir + 'footer-bg.svg') no-repeat;
617

    
618
  @include media-breakpoint-down(md) {
619
    width: 320px;
620
    height: 143px;
621
    background-size: 100%;
622
  }
623
}
624

    
625

    
626
// INTRO PAGE - ABOUT - COPYRIGHT
627
div.copyright {
628
  p {
629
    font-weight: 400;
630
  }
631

    
632
  span {
633
    font-size: 17px;
634
  }
635
}
636

    
637

    
638
// INTRO PAGE - ABOUT - PARTNERS LOGOS
639
p.logos-partners {
640
  margin-top: 40px;
641
  text-align: right;
642

    
643
  a {
644
    text-decoration: none;
645

    
646
    img {
647
      margin-left: 50px;
648
      height: 80px;
649

    
650
      @media only screen and (max-width: 430px) {
651
        height: 70px;
652
        margin-left: 0;
653
      }
654

    
655
      @media only screen and (max-width: 340px) {
656
        height: 60px;
657
      }
658
    }
659

    
660
    &:first-of-type img {
661
      margin-left: 0;
662
    }
663
  }
664
}
665

    
666

    
667

    
668
// ---------------------------------------- HEATMAP PAGE ----------------------------------------
669

    
670

    
671
// HEATMAP PAGE - WRAPPER
672
#heatmap {
673
  height: 100%;
674
}
675

    
676

    
677
// HEATMAP PAGE - FORM IN HEADER
678
header.map {
679
  @include media-breakpoint-down(md) {
680
    .navbar-nav {
681
      width: 100%;
682
    }
683
  }
684

    
685
  form {
686
    display: flex;
687
    margin: auto;
688
  }
689

    
690
  label {
691
    margin: 0 0 0 15px;
692
    font-size: 16px;
693
    letter-spacing: .4px;
694
  }
695

    
696
  input {
697
    letter-spacing: .4px;
698
    color: $text-color;
699
    border-color: $primary-bg-color;
700
    background: $primary-bg-color;
701

    
702
    &::placeholder {
703
      color: $text-color;
704
      opacity: 1;
705
    }
706

    
707
    &:hover {
708
      background: $input-bg-hover;
709
    }
710

    
711
    &:focus {
712
      background: $text-color;
713
      color: $black;
714
    }
715
  }
716

    
717

    
718
  // HEATMAP PAGE - FORM - ITEMS
719
  .nav-item {
720
    padding: 5px;
721
    margin: auto 0;
722
    border-right: 1px solid $heatmap-nav-border-color;
723

    
724
    @include media-breakpoint-down(md) {
725
      margin-bottom: 10px;
726
      border: 0;
727
    }
728

    
729
    &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
730
      width: 300px;
731
      
732
      @media (max-width: 1500px) {
733
        width: 280px;
734
      }
735

    
736
      @media (max-width: 1400px) {
737
        width: 230px;
738
      }
739

    
740
      @media (max-width: 1400px) {
741
        max-width: 230px;
742
        width: auto;
743
      }
744

    
745
      @include media-breakpoint-down(md) {
746
        max-width: none;
747
      }
748
    }
749

    
750

    
751
    // HEATMAP PAGE - FORM - DROPDOWNS (TIME, DATASETS)
752
    .dropdown {
753
      min-width: 200px;
754

    
755
      .btn {
756
        width: 100%;
757
        text-align: left;
758
        letter-spacing: .4px;
759
        color: $text-color;
760
        background: $primary-bg-color;
761

    
762
        &:hover {
763
          background: $input-bg-hover;
764
        }
765
      }
766

    
767
      .dropdown-menu {
768
        width: 100%;
769
        max-height: 300px;
770
        overflow-y: auto;
771
        z-index: 1001;
772

    
773
        .dropdown-item {
774
          &:active {
775
            background: $primary-bg-color;
776
          }
777
          
778
          label {
779
            width: 100% !important;
780
            margin-left: 0;
781
            cursor: pointer;
782
          }
783
        }
784
      }
785

    
786
      #dropdown-time .dropdown-item:nth-of-type(even) {
787
        background: $dropdown-even-items-bg;
788

    
789
        &:active {
790
          background: $primary-bg-color;
791
        }
792
      }
793

    
794
      input[type="radio"]:checked ~ label {
795
        font-weight: 800;
796
      }
797
    }
798

    
799

    
800
    // HEATMAP PAGE - FORM - DATASETS DROPDOWN
801
    &:nth-child(3) {
802
      padding: 0;
803
      margin: 0;
804
      border: 0;
805

    
806
      @include media-breakpoint-down(md) {
807
        padding: 5px;
808
      }
809

    
810
      .dropdown {
811
        display: flex;
812
        height: 100%;
813

    
814
        @include media-breakpoint-down(md) {
815
          flex-direction: column;
816
        }
817

    
818
        .dropdown-menu {
819
          top: calc(100% - 5px);
820
        }
821

    
822
        button {
823
          padding-left: 20px;
824
          border-radius: 0;
825

    
826
          @include media-breakpoint-down(md) {
827
            padding-left: 12px;
828
            border-radius: 5px;
829
          }
830
        }
831
      }
832
    }
833

    
834

    
835
    // HEATMAP PAGE - FORM - SUBMIT BUTTON
836
    &:last-child {
837
      margin-top: 0;
838
      margin-bottom: 0;
839
      border-left: 1px solid $heatmap-nav-border-color;
840
      background: $heatmap-nav-button-bg-color;
841

    
842
      @include media-breakpoint-down(md) {
843
        margin: 10px 5px 0 5px;
844
        border-radius: 5px;
845
        border: 0;
846
      }
847

    
848
      &:hover {
849
        background: $primary-bg-color-darker;
850
      }
851
    
852
      .btn-secondary {
853
        display: inline-block;
854
        outline: none;
855
        padding: 0 30px;
856
        background: url($images-dir + 'btn-refresh.svg') no-repeat center center;
857

    
858
        &:hover {
859
          background: url($images-dir + 'btn-refresh.svg') no-repeat center center !important;
860
        }
861

    
862
        @include media-breakpoint-down(md) {
863
          width: 100%;
864
          padding: 20px;
865
          border-radius: 5px;
866
        }
867
      }
868
    }
869
  }
870
}
871

    
872

    
873
// HEATMAP PAGE - CONTROLS - MAP LOCATIONS - WRAPPER
874
.map-locations {
875
  position: absolute;
876
  top: 95px;
877
  right: 25px;
878
  z-index: 1000;
879
  border-radius: 22px;
880
  background-color: $heatmap-controls-primary-bg;
881

    
882
  .mobile {
883
    display: none;
884
  }
885

    
886
  @include media-breakpoint-down(md) {
887
    top: 90px;
888
    right: 20px;
889

    
890
    .desktop {
891
      display: none;
892
    }
893

    
894
    .mobile {
895
      display: inline-block;
896
    }
897
  }
898

    
899
  @include media-breakpoint-down(xs) {
900
    max-width: 240px;
901
    max-height: 70%;
902
    top: 80px;
903
    right: 10px;
904
  }
905

    
906

    
907
  // HEATMAP PAGE - CONTROLS - MAP LOCATIONS
908
  .menu {
909
    width: 100%;
910
    display: inline-block;
911
    position: relative;
912
    padding: 10px 60px 13px 16px;
913
    text-decoration: none;
914
    border-radius: 50px;
915
    opacity: 1;
916
    background: $secondary-bg-color;
917

    
918
    .circle {
919
      display: inline-block;
920
      width: 40px;
921
      height: 40px;
922
      position: absolute;
923
      top: 3px;
924
      right: 3px;
925
      border-radius: 50%;
926
      border: 2px solid $text-color;
927

    
928
      &:after {
929
        content: "";
930
        display: inline-block;
931
        width: 16px;
932
        height: 16px;
933
        position: absolute;
934
        top: calc(50% - 8px);
935
        left: calc(50% - 8px);
936
        background: url($images-dir + 'map-point-plus.svg') no-repeat;
937
      }
938
    }
939
  }
940

    
941

    
942
  // HEATMAP PAGE - CONTROLS - MAP LOCATIONS - LOCATIONS LIST
943
  .locations {
944
    z-index: 1000;
945

    
946
    ul {
947
      margin-top: 10px;
948
      padding-left: 36px;
949
      padding-right: 20px;
950
      font-size: 15px;
951
      list-style-image: url($images-dir + 'li-bullet.svg');
952

    
953
      @include media-breakpoint-down(xs) {
954
        max-height: 244px;
955
        overflow-y: scroll;
956
        font-size: 13.5px;
957
      }
958
    }
959

    
960
    li {
961
      margin-bottom: 10px;
962
      cursor: pointer;
963

    
964
      &:hover {
965
        text-decoration: underline;
966
      }
967
    }
968
  }
969
}
970

    
971

    
972
// HEATMAP PAGE - CONTROLS - PLAYER, TIMELINE
973
.player {
974
  width: 100%;
975
  display: flex;
976
  justify-content: center;
977
  align-items: center;
978
  position: absolute;
979
  left: 50%;
980
  transform: translateX(-50%);
981
  bottom: -40px;
982
  z-index: 1000;
983

    
984
  @include media-breakpoint-down(xs) {
985
    bottom: -30px;
986
  }
987

    
988

    
989
  // HEATMAP PAGE - CONTROLS - ANIMATION BUTTONS
990
  .next-btn, .prev-btn, .animate-btn, .lock-btn {
991
    display: inline-block;
992
    width: 42px;
993
    height: 42px;
994
    margin-right: 20px;
995
    position: relative;
996
    border-radius: 50%;
997
    opacity: .7;
998
    border: 2px solid $text-color;
999
    box-shadow: 0 0 0 4px $secondary-bg-color;
1000
    background: $secondary-bg-color;
1001
    cursor: pointer;
1002

    
1003
    @media (max-width: 320px) {
1004
      margin-right: 15px;
1005
    }
1006

    
1007
    &:hover {
1008
      opacity: 1;
1009
    }
1010

    
1011
    &:after {
1012
      content: "";
1013
      display: inline-block;
1014
      width: 7px;
1015
      height: 12px;
1016
      position: absolute;
1017
      top: calc(50% - 6px);
1018
      left: calc(50% - 4px);
1019
    }
1020
  }
1021

    
1022

    
1023
  // HEATMAP PAGE - CONTROLS - START/PAUSE ANIMATION
1024
  .animate-btn {
1025
    width: 57px;
1026
    height: 57px;
1027
    opacity: 1;
1028

    
1029
    @include media-breakpoint-down(md) {
1030
      order: 3;
1031
    }
1032

    
1033
    &:hover {
1034
      opacity: .7;
1035
    }
1036

    
1037
    &:after {
1038
      width: 10px;
1039
      height: 16px;
1040
      top: calc(50% - 8px);
1041
    }
1042

    
1043
    &.play:after {
1044
      left: calc(50% - 3px);
1045
      background: url($images-dir + 'btn-play.svg') no-repeat;
1046
    }
1047
  
1048
    &.pause:after {
1049
      left: calc(50% - 5px);
1050
      background: url($images-dir + 'btn-pause.png') no-repeat;
1051
    }
1052
  }
1053

    
1054

    
1055
  // HEATMAP PAGE - CONTROLS - NEXT STEP ANIMATION
1056
  .next-btn {
1057
    @include media-breakpoint-down(md) {
1058
      order: 3;
1059
    }
1060

    
1061
    @include media-breakpoint-down(xs) {
1062
      margin-right: 0;
1063
    }
1064

    
1065
    &:after {
1066
      background: url($images-dir + 'btn-next.svg') no-repeat;
1067
    }
1068
  }
1069

    
1070

    
1071
  // HEATMAP PAGE - CONTROLS - PREVIOUS STEP ANIMATION
1072
  .prev-btn {
1073
    @include media-breakpoint-down(md) {
1074
      order: 2;
1075
    }
1076

    
1077
    &:after {
1078
      background: url($images-dir + 'btn-prev.svg') no-repeat;
1079
    }
1080
  }
1081

    
1082

    
1083
  // HEATMAP PAGE - CONTROLS - TIMELINE WRAPPER
1084
  .timeline-wrapper {
1085
    display: flex;
1086
    
1087
    @media (max-width: 390px) {
1088
      display: block;
1089
      text-align: center;
1090
      margin-right: 10px;
1091
    }
1092
  }
1093

    
1094

    
1095
  // HEATMAP PAGE - CONTROLS - TIMELINE DATE
1096
  .date {
1097
    display: flex;
1098
    align-items: center;
1099
    align-content: center;
1100
    font-size: 15px;
1101
    margin-right: 10px;
1102
    text-align: center;
1103
    border-radius: 15px;
1104
    cursor: pointer;
1105
    background: $heatmap-controls-primary-bg;
1106
    
1107
    @media (max-width: 390px) {
1108
      margin-right: 0;
1109
    }
1110

    
1111
    &:hover .lock-btn:after {
1112
      background-position: 0 0;
1113
    }
1114

    
1115
    &.lock {
1116
      background: $heatmap-controls-secondary-bg;
1117

    
1118
      &:hover .lock-btn:after {
1119
        background-position: -8px 0;
1120
      }
1121
      
1122
      .lock-btn {
1123
        border: 0;
1124
        box-shadow: none;
1125

    
1126
        &:after {
1127
          background-position: 0 0;
1128
        }
1129
      }
1130
    }
1131

    
1132
    span {
1133
      padding: 3px 6px 4px 12px;
1134
    }
1135

    
1136

    
1137
    // HEATMAP PAGE - CONTROLS - TIMELINE DATE - LOCK DATE BUTTON
1138
    .lock-btn {
1139
      width: 26px;
1140
      height: 26px;
1141
      margin-right: 2px;
1142
      opacity: 1;
1143
      border: 1px solid $text-color;
1144

    
1145
      &:after {
1146
        content: '';
1147
        display: inline-block;
1148
        width: 8px;
1149
        height: 11px;
1150
        background: url($images-dir + 'btn-lock.svg') no-repeat -8px 0;
1151
        background-size: cover;
1152
      }
1153

    
1154
      &:hover:after {
1155
        background-position: 0 0;
1156
      }
1157
    }
1158
  }
1159

    
1160
  
1161
  // HEATMAP PAGE - CONTROLS - TIMELINE
1162
  .timeline {
1163
    display: flex;
1164
    height: 30px;
1165
    flex-direction: row;
1166
    position: relative;
1167
    border-radius: 100px;
1168
    background-color: $heatmap-controls-primary-bg;
1169

    
1170
    @include media-breakpoint-down(md) {
1171
      padding: 0;
1172
      order: 1;
1173
      margin-right: 20px;
1174
    }
1175

    
1176
    @media (max-width: 390px) {
1177
      display: inline-block;
1178
      margin: 4px 0 0 0;
1179
    }
1180

    
1181
    
1182
    // HEATMAP PAGE - CONTROLS - TIMELINE - ONE HOUR ITEM
1183
    .hour {
1184
      cursor: pointer;
1185

    
1186
      @include media-breakpoint-down(md) {
1187
        display: none;
1188
      }
1189

    
1190
      &:nth-of-type(2) {
1191
        margin-left: 10px;
1192
      }
1193

    
1194
      &:before {
1195
        content: "";
1196
        display: inline-block;
1197
        width: 6px;
1198
        height: 6px;
1199
        border-radius: 50%;
1200
        background: $text-color;
1201
      }
1202

    
1203
      &:after {
1204
        content: "";
1205
        display: inline-block;
1206
        position: relative;
1207
        top: -2px;
1208
        width: 20px;
1209
        height: 2px;
1210
        background: $text-color;
1211
      }
1212
    }
1213

    
1214
    
1215
    // HEATMAP PAGE - CONTROLS - TIMELINE - LAST ITEM
1216
    .end-dot:before {
1217
      content: "";
1218
      display: inline-block;
1219
      width: 6px;
1220
      height: 6px;
1221
      margin-right: 10px;
1222
      border-radius: 50%;
1223
      background: $text-color;
1224

    
1225
      @include media-breakpoint-down(md) {
1226
        display: none;
1227
      }
1228
    }
1229
  }
1230

    
1231

    
1232
  // HEATMAP PAGE - CONTROLS - TIMELINE - TIME
1233
  .time {
1234
    display: flex;
1235
    justify-content: center;
1236
    align-items: center;
1237
    width: 64px;
1238
    padding: 3px 0 4px 0;
1239
    z-index: 1000;
1240
    font-size: 15px;
1241
    border-radius: 15px;
1242
    cursor: ew-resize;
1243
    background: $secondary-bg-color;
1244

    
1245
    @include media-breakpoint-up(lg) {
1246
      position: absolute;
1247

    
1248
      &.hour-0 {left: 0;}
1249
      &.hour-1 {left: 25px;}
1250
      &.hour-2 {left: 50px;}
1251
      &.hour-3 {left: 75px;}
1252
      &.hour-4 {left: 100px;}
1253
      &.hour-5 {left: 125px;}
1254
      &.hour-6 {left: 150px;}
1255
      &.hour-7 {left: 175px;}
1256
      &.hour-8 {left: 200px;}
1257
      &.hour-9 {left: 225px;}
1258
      &.hour-10 {left: 250px;}
1259
      &.hour-11 {left: 275px;}
1260
      &.hour-12 {left: 300px;}
1261
      &.hour-13 {left: 325px;}
1262
      &.hour-14 {left: 350px;}
1263
      &.hour-15 {left: 375px;}
1264
      &.hour-16 {left: 400px;}
1265
      &.hour-17 {left: 425px;}
1266
      &.hour-18 {left: 450px;}
1267
      &.hour-19 {left: 475px;}
1268
      &.hour-20 {left: 500px;}
1269
      &.hour-21 {left: 525px;}
1270
      &.hour-22 {left: 550px;}
1271
      &.hour-23 {left: 585px;}
1272
    }
1273

    
1274

    
1275
    // HEATMAP PAGE - CONTROLS - TIMELINE - LOADER
1276
    .custom-spinner-border {
1277
      margin: 3px 0 4px 0;
1278
    }
1279
  }
1280
}
1281

    
1282

    
1283
// HEATMAP PAGE - POPUPS
1284
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
1285
  font-family: 'Be Vietnam', sans-serif;
1286
  text-align: center;
1287
  color: $text-color;
1288

    
1289
  
1290
  // HEATMAP PAGE - POPUPS - LOCATION/DATASET NAME
1291
  strong {
1292
    display: inline-block;
1293
    margin-bottom: 8px;
1294
  }
1295

    
1296
  
1297
  // HEATMAP PAGE - POPUPS - DATASET VALUE
1298
  #place-intesity {
1299
    display: flex;
1300
    align-items: center;
1301
    justify-content: center;
1302
    font-family: monospace;
1303
    font-size: 24pt;
1304
    font-weight: 700;
1305

    
1306
    #sum-number {
1307
      margin-left: 5px;
1308
      font-size: 11pt;
1309
    }
1310
  }
1311

    
1312
  
1313
  // HEATMAP PAGE - POPUPS - PAGINATION
1314
  .popup-pagination {
1315
    display: flex;
1316
    margin: 1em 0 1em 0;
1317

    
1318
    button {
1319
      height: 32px;
1320
      width: 32px;
1321
      border: 0;
1322
      border-radius: 24px;
1323
      background: url($images-dir + 'btn-prev.svg') $heatmap-popup-btn-bg no-repeat center center;
1324
      transition: background 0.3s ease-out;
1325
      outline: none !important;
1326

    
1327
      &:hover {
1328
        background: url($images-dir + 'btn-prev.svg') $heatmap-popup-btn-hover-bg no-repeat center center;
1329
      }
1330
      
1331
      &.next {
1332
        background: url($images-dir + 'btn-next.svg') $heatmap-popup-btn-bg no-repeat center center;
1333

    
1334
        &:hover {
1335
          background: url($images-dir + 'btn-next.svg') $heatmap-popup-btn-hover-bg no-repeat center center;
1336
        }
1337
      }
1338
    }
1339

    
1340
    
1341
    // HEATMAP PAGE - POPUPS - PAGINATION - COUNT PAGES
1342
    p {
1343
      margin: auto;
1344
    }
1345
  }
1346
}
(8-8/9)