Projekt

Obecné

Profil

Stáhnout (26 KB) Statistiky
| Větev: | Revize:
1 fdba469a Martin Sebela
@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 500e20aa msebela
5 bb2d43b5 Martin Sebela
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
6
7 660f24a7 Martin Sebela
8
9
// ---------------------------------------- COLORS SETTINGS ----------------------------------------
10
11
// text color
12
$text-color: #ffffff;
13
14
// main page colors
15 bb2d43b5 Martin Sebela
$primary-bg-color: #0048A9;
16
$primary-bg-color-darker: #004fb3;
17
$secondary-bg-color: #0b155a;
18
19 660f24a7 Martin Sebela
// input elements background color on hover
20
$input-bg-hover:rgba(255, 255, 255, .1);
21 bb2d43b5 Martin Sebela
22 660f24a7 Martin Sebela
// heatmap header background colors
23
$heatmap-nav-border-color: #1c6cc0;
24 6b7c4d1c Martin Sebela
$heatmap-nav-button-bg-color: #0057be;
25
26 660f24a7 Martin Sebela
// 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 popup buttons background colors
31
$heatmap-popup-btn-bg: $input-bg-hover;
32
$heatmap-popup-btn-hover-bg: rgba(125, 125, 125, .1);
33
34
// heatmap drowdopn even items background color
35
$dropdown-even-items-bg: rgba(0, 0, 0, .05);
36
37
// images filepath directory
38 500e20aa msebela
$images-dir: '../img/';
39
40
41 660f24a7 Martin Sebela
42
// ---------------------------------------- STYLE ----------------------------------------
43
44 500e20aa msebela
html, body {
45
  position: relative;
46
  height: 96.2%;
47 bb2d43b5 Martin Sebela
  font-family: 'Be Vietnam', sans-serif;
48 660f24a7 Martin Sebela
  color: $text-color;
49 bb2d43b5 Martin Sebela
  background: $secondary-bg-color;
50 500e20aa msebela
51 351696d5 Martin Sebela
  &.intro {
52
    @include media-breakpoint-down(sm) {
53 3c909967 Martin Sebela
      height: calc(100% - 45px);
54 351696d5 Martin Sebela
    }
55 500e20aa msebela
  }
56
}
57
58 660f24a7 Martin Sebela
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 500e20aa msebela
header {
122
  height: 70px;
123 bb2d43b5 Martin Sebela
  background: $primary-bg-color;
124 500e20aa msebela
125 660f24a7 Martin Sebela
126
  // HEADER - LOGO
127 500e20aa msebela
  .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 c236b33a msebela
      z-index: 1001;
177 dd652e61 Martin Sebela
      opacity: .98;
178 bb2d43b5 Martin Sebela
      background: $primary-bg-color-darker;
179 500e20aa msebela
    }
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 660f24a7 Martin Sebela
        border: 1px solid $text-color;
210 500e20aa msebela
        border-radius: 20px;
211
212
        &:hover {
213 52b74f24 Martin Sebela
          background: $primary-bg-color-darker;
214 500e20aa msebela
        }
215
      }
216
    }
217
  }
218
219 c236b33a msebela
  .navbar-button {
220
    padding: .5rem 22px;
221 351696d5 Martin Sebela
    margin-right: 40px;
222 660f24a7 Martin Sebela
    border: 1px solid $text-color;
223 c236b33a msebela
    border-radius: 20px;
224
    text-decoration: none;
225
226
    @include media-breakpoint-down(md) {
227
      display: none;
228
    }
229
230
    &:hover {
231 52b74f24 Martin Sebela
      background: $primary-bg-color-darker;
232 c236b33a msebela
    }
233
  }
234
235 500e20aa msebela
  .btn-secondary {
236
    height: 100%;
237
    font-size: 16px;
238
    text-transform: uppercase;
239
    font-weight: 800;
240 52b74f24 Martin Sebela
    letter-spacing: .4px;
241 500e20aa msebela
    border-radius: 0;
242 bb2d43b5 Martin Sebela
    border: $primary-bg-color;
243 52b74f24 Martin Sebela
    background: $primary-bg-color-darker;
244 500e20aa msebela
245
    &:hover {
246 bb2d43b5 Martin Sebela
      background: $primary-bg-color !important;
247 500e20aa msebela
    }
248
  }
249
}
250
251
252
253 660f24a7 Martin Sebela
// ---------------------------------------- INTRO PAGE ----------------------------------------
254 500e20aa msebela
255
256 660f24a7 Martin Sebela
// INTRO PAGE - SWIPER WRAPPER
257
.swiper-container {
258
  height: 100%;
259
  position: relative;
260 500e20aa msebela
261 660f24a7 Martin Sebela
  .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 500e20aa msebela
  }
288 660f24a7 Martin Sebela
  
289
  .btn-secondary {
290
    background: $secondary-bg-color;
291
  
292
    &:hover, &:focus, &:active {
293
      background: $input-bg-hover !important;
294
    }
295 500e20aa msebela
  }
296
}
297
298
299 660f24a7 Martin Sebela
// INTRO PAGE - SLIDES BACKGROUND IMAGES
300 500e20aa msebela
.swiper-slide {
301
  display: flex;
302
  justify-content: center;
303
  align-items: center;
304
305
  &.slide-bg-1 {
306 4e003182 Martin Sebela
    background: url($images-dir + 'bg-1.jpg') no-repeat top center;
307 500e20aa msebela
    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 212d3445 Martin Sebela
      width: 100%;
321 500e20aa msebela
    }
322
  }
323 4e003182 Martin Sebela
324
  @include media-breakpoint-down(sm) {
325
    .container {
326
      max-width: 100%;
327
      height: 100%;
328
      overflow-y: scroll;
329
    }
330
  }
331 500e20aa msebela
}
332
333 660f24a7 Martin Sebela
334
// INTRO PAGE - SLIDE TEXT
335 500e20aa msebela
.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 3c909967 Martin Sebela
    z-index: 1000;
362
363 500e20aa msebela
    &: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 212d3445 Martin Sebela
383
    a {
384
      text-decoration: underline;
385
386
      &:hover {
387
        text-decoration: none;
388
      }
389
    }
390 500e20aa msebela
  }
391
}
392
393 660f24a7 Martin Sebela
394
// INTRO PAGE - SLIDES PAGINATION BUTTONS
395 500e20aa msebela
.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 bb2d43b5 Martin Sebela
  background: $secondary-bg-color;
405 500e20aa msebela
406
  @include media-breakpoint-down(lg) {
407
    right: 20px;
408
  }
409
410
  @include media-breakpoint-down(sm) {
411
    width: 120px;
412
  }
413
414 3c909967 Martin Sebela
  @include media-breakpoint-down(xs) {
415
    bottom: 10px;
416
  }
417
418 500e20aa msebela
  .btn-prev, .btn-next {
419
    display: inline-block;
420
    width: 45px;
421
    height: 45px;
422
    position: relative;
423
    border-radius: 50%;
424 660f24a7 Martin Sebela
    border: 2px solid $text-color;
425 500e20aa msebela
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 660f24a7 Martin Sebela
451
// INTRO PAGE - PAGINATION BULLETS
452 500e20aa msebela
.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 bb2d43b5 Martin Sebela
  background: $secondary-bg-color;
462 500e20aa msebela
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 660f24a7 Martin Sebela
    border-top: 2px solid $text-color;
480 500e20aa msebela
  }
481
482
  .swiper-pagination-bullet {
483
    width: 20px;
484
    height: 20px;
485
    position: relative;
486
    margin: 4px 15px !important;
487
    opacity: 1;
488 bb2d43b5 Martin Sebela
    border: 2px solid $secondary-bg-color;
489
    background: $secondary-bg-color;
490 500e20aa msebela
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 660f24a7 Martin Sebela
      background: $text-color;
501 500e20aa msebela
    }
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 660f24a7 Martin Sebela
    border: 2px solid $text-color;
514 500e20aa msebela
  }
515
}
516
517
518 660f24a7 Martin Sebela
// INTRO PAGE - SAMPLE MAP POINTS
519 500e20aa msebela
.map-point {
520
  width: 50px;
521
  height: 50px;
522
  z-index: 1;
523
  position: absolute;
524
  border-radius: 50%;
525
  cursor: pointer;
526 660f24a7 Martin Sebela
  border: 2px solid $text-color;
527 500e20aa msebela
528 4e003182 Martin Sebela
  @media not all and (min-width: 1900px) and (max-width: 2100px) {
529 500e20aa msebela
    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 4e003182 Martin Sebela
      width: 220px;
553 500e20aa msebela
      padding: 10px 20px;
554
      z-index: 0;
555
      opacity: 0.75;
556
      border-radius: 25px 0 25px 0;
557 bb2d43b5 Martin Sebela
      background: $secondary-bg-color;
558 500e20aa msebela
    }
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 660f24a7 Martin Sebela
    border: 2px solid $text-color;
589 500e20aa msebela
  }
590
591
  &.point-1 {
592 31e22cb9 Martin Sebela
    top: 470px;
593
    right: 32.2%;
594 500e20aa msebela
  }
595
596
  &.point-2 {
597 31e22cb9 Martin Sebela
    top: 688px;
598
    right: 21.2%;
599 500e20aa msebela
  }
600
601
  &.point-3 {
602 4e003182 Martin Sebela
    bottom: 430px;
603
    right: 20.8%;
604 500e20aa msebela
  }
605
}
606
607 6b7c4d1c Martin Sebela
608 660f24a7 Martin Sebela
// INTRO PAGE - ADDITIONAL SLIDES BACKGROUND
609 6b7c4d1c Martin Sebela
.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 660f24a7 Martin Sebela
// INTRO PAGE - ABOUT - COPYRIGHT
627 6b7c4d1c Martin Sebela
div.copyright {
628
  p {
629
    font-weight: 400;
630
  }
631
632
  span {
633
    font-size: 17px;
634
  }
635
}
636
637
638 660f24a7 Martin Sebela
// INTRO PAGE - ABOUT - PARTNERS LOGOS
639 6b7c4d1c Martin Sebela
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 660f24a7 Martin Sebela
// ---------------------------------------- HEATMAP PAGE ----------------------------------------
669 6b7c4d1c Martin Sebela
670
671 660f24a7 Martin Sebela
// HEATMAP PAGE - WRAPPER
672 500e20aa msebela
#heatmap {
673
  height: 100%;
674
}
675
676 c236b33a msebela
677 660f24a7 Martin Sebela
// HEATMAP PAGE - FORM IN HEADER
678 6b7c4d1c Martin Sebela
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 660f24a7 Martin Sebela
    color: $text-color;
699 6b7c4d1c Martin Sebela
    border-color: $primary-bg-color;
700
    background: $primary-bg-color;
701
702
    &::placeholder {
703 660f24a7 Martin Sebela
      color: $text-color;
704 6b7c4d1c Martin Sebela
      opacity: 1;
705
    }
706 660f24a7 Martin Sebela
707
    &:hover {
708
      background: $input-bg-hover;
709
    }
710
711
    &:focus {
712
      background: $text-color;
713
      color: $black;
714
    }
715 6b7c4d1c Martin Sebela
  }
716
717 660f24a7 Martin Sebela
718
  // HEATMAP PAGE - FORM - ITEMS
719 6b7c4d1c Martin Sebela
  .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 660f24a7 Martin Sebela
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 6b7c4d1c Martin Sebela
    &: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 660f24a7 Martin Sebela
835
    // HEATMAP PAGE - FORM - SUBMIT BUTTON
836 6b7c4d1c Martin Sebela
    &: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 660f24a7 Martin Sebela
// HEATMAP PAGE - CONTROLS - MAP LOCATIONS - WRAPPER
874 c236b33a msebela
.map-locations {
875
  position: absolute;
876 3c909967 Martin Sebela
  top: 95px;
877
  right: 25px;
878 c236b33a msebela
  z-index: 1000;
879
  border-radius: 22px;
880 660f24a7 Martin Sebela
  background-color: $heatmap-controls-primary-bg;
881 c236b33a msebela
882 dd652e61 Martin Sebela
  .mobile {
883
    display: none;
884
  }
885
886 351696d5 Martin Sebela
  @include media-breakpoint-down(md) {
887
    top: 90px;
888
    right: 20px;
889 dd652e61 Martin Sebela
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 4e003182 Martin Sebela
    max-height: 70%;
902 dd652e61 Martin Sebela
    top: 80px;
903
    right: 10px;
904 351696d5 Martin Sebela
  }
905
906 660f24a7 Martin Sebela
907
  // HEATMAP PAGE - CONTROLS - MAP LOCATIONS
908 c236b33a msebela
  .menu {
909 dd652e61 Martin Sebela
    width: 100%;
910 351696d5 Martin Sebela
    display: inline-block;
911 c236b33a msebela
    position: relative;
912
    padding: 10px 60px 13px 16px;
913 351696d5 Martin Sebela
    text-decoration: none;
914 c236b33a msebela
    border-radius: 50px;
915
    opacity: 1;
916 bb2d43b5 Martin Sebela
    background: $secondary-bg-color;
917 c236b33a msebela
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 660f24a7 Martin Sebela
      border: 2px solid $text-color;
927 c236b33a msebela
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 660f24a7 Martin Sebela
942
  // HEATMAP PAGE - CONTROLS - MAP LOCATIONS - LOCATIONS LIST
943 c236b33a msebela
  .locations {
944 351696d5 Martin Sebela
    z-index: 1000;
945
946 c236b33a msebela
    ul {
947 351696d5 Martin Sebela
      margin-top: 10px;
948 c236b33a msebela
      padding-left: 36px;
949
      padding-right: 20px;
950
      font-size: 15px;
951
      list-style-image: url($images-dir + 'li-bullet.svg');
952 351696d5 Martin Sebela
953
      @include media-breakpoint-down(xs) {
954 4e003182 Martin Sebela
        max-height: 244px;
955
        overflow-y: scroll;
956 351696d5 Martin Sebela
        font-size: 13.5px;
957
      }
958 c236b33a msebela
    }
959
960
    li {
961
      margin-bottom: 10px;
962
      cursor: pointer;
963 dd652e61 Martin Sebela
964
      &:hover {
965
        text-decoration: underline;
966
      }
967 c236b33a msebela
    }
968
  }
969
}
970
971
972 660f24a7 Martin Sebela
// HEATMAP PAGE - CONTROLS - PLAYER, TIMELINE
973 c236b33a msebela
.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 351696d5 Martin Sebela
  @include media-breakpoint-down(xs) {
985
    bottom: -30px;
986
  }
987
988 660f24a7 Martin Sebela
989
  // HEATMAP PAGE - CONTROLS - ANIMATION BUTTONS
990 863ca316 Martin Sebela
  .next-btn, .prev-btn, .animate-btn, .lock-btn {
991 c236b33a msebela
    display: inline-block;
992 351696d5 Martin Sebela
    width: 42px;
993
    height: 42px;
994 c236b33a msebela
    margin-right: 20px;
995
    position: relative;
996
    border-radius: 50%;
997
    opacity: .7;
998 660f24a7 Martin Sebela
    border: 2px solid $text-color;
999 bb2d43b5 Martin Sebela
    box-shadow: 0 0 0 4px $secondary-bg-color;
1000
    background: $secondary-bg-color;
1001 c236b33a msebela
    cursor: pointer;
1002
1003 6b7c4d1c Martin Sebela
    @media (max-width: 320px) {
1004
      margin-right: 15px;
1005
    }
1006
1007 351696d5 Martin Sebela
    &:hover {
1008
      opacity: 1;
1009
    }
1010
1011 c236b33a msebela
    &: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 660f24a7 Martin Sebela
1023
  // HEATMAP PAGE - CONTROLS - START/PAUSE ANIMATION
1024 863ca316 Martin Sebela
  .animate-btn {
1025 351696d5 Martin Sebela
    width: 57px;
1026
    height: 57px;
1027 c236b33a msebela
    opacity: 1;
1028
1029 dd652e61 Martin Sebela
    @include media-breakpoint-down(md) {
1030
      order: 3;
1031
    }
1032
1033 351696d5 Martin Sebela
    &:hover {
1034
      opacity: .7;
1035
    }
1036
1037 c236b33a msebela
    &:after {
1038
      width: 10px;
1039
      height: 16px;
1040
      top: calc(50% - 8px);
1041
    }
1042 212d3445 Martin Sebela
1043 863ca316 Martin Sebela
    &.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 a48642fb vastja
  }
1053
1054 660f24a7 Martin Sebela
1055
  // HEATMAP PAGE - CONTROLS - NEXT STEP ANIMATION
1056 863ca316 Martin Sebela
  .next-btn {
1057 dd652e61 Martin Sebela
    @include media-breakpoint-down(md) {
1058
      order: 3;
1059
    }
1060
1061 4e003182 Martin Sebela
    @include media-breakpoint-down(xs) {
1062
      margin-right: 0;
1063
    }
1064
1065 dd652e61 Martin Sebela
    &:after {
1066
      background: url($images-dir + 'btn-next.svg') no-repeat;
1067
    }
1068 c236b33a msebela
  }
1069
1070 660f24a7 Martin Sebela
1071
  // HEATMAP PAGE - CONTROLS - PREVIOUS STEP ANIMATION
1072 863ca316 Martin Sebela
  .prev-btn {
1073 dd652e61 Martin Sebela
    @include media-breakpoint-down(md) {
1074
      order: 2;
1075
    }
1076
1077
    &:after {
1078
      background: url($images-dir + 'btn-prev.svg') no-repeat;
1079
    }
1080 c236b33a msebela
  }
1081
1082 660f24a7 Martin Sebela
1083
  // HEATMAP PAGE - CONTROLS - TIMELINE WRAPPER
1084 863ca316 Martin Sebela
  .timeline-wrapper {
1085 4e003182 Martin Sebela
    display: flex;
1086
    
1087
    @media (max-width: 390px) {
1088
      display: block;
1089
      text-align: center;
1090
      margin-right: 10px;
1091
    }
1092
  }
1093
1094 660f24a7 Martin Sebela
1095
  // HEATMAP PAGE - CONTROLS - TIMELINE DATE
1096 4e003182 Martin Sebela
  .date {
1097 b7a21811 Martin Sebela
    display: flex;
1098
    align-items: center;
1099
    align-content: center;
1100 4e003182 Martin Sebela
    font-size: 15px;
1101
    margin-right: 10px;
1102
    text-align: center;
1103
    border-radius: 15px;
1104
    cursor: pointer;
1105 660f24a7 Martin Sebela
    background: $heatmap-controls-primary-bg;
1106 863ca316 Martin Sebela
    
1107 4e003182 Martin Sebela
    @media (max-width: 390px) {
1108
      margin-right: 0;
1109
    }
1110
1111 863ca316 Martin Sebela
    &:hover .lock-btn:after {
1112
      background-position: 0 0;
1113 b7a21811 Martin Sebela
    }
1114 863ca316 Martin Sebela
1115 1774c06d Tomáš Ballák
    &.lock {
1116 660f24a7 Martin Sebela
      background: $heatmap-controls-secondary-bg;
1117 863ca316 Martin Sebela
1118
      &:hover .lock-btn:after {
1119
        background-position: -8px 0;
1120
      }
1121
      
1122
      .lock-btn {
1123
        border: 0;
1124 1774c06d Tomáš Ballák
        box-shadow: none;
1125 863ca316 Martin Sebela
1126 1774c06d Tomáš Ballák
        &:after {
1127
          background-position: 0 0;
1128
        }
1129
      }
1130
    }
1131 863ca316 Martin Sebela
1132
    span {
1133
      padding: 3px 6px 4px 12px;
1134
    }
1135
1136 660f24a7 Martin Sebela
1137
    // HEATMAP PAGE - CONTROLS - TIMELINE DATE - LOCK DATE BUTTON
1138 863ca316 Martin Sebela
    .lock-btn {
1139 b7a21811 Martin Sebela
      width: 26px;
1140
      height: 26px;
1141
      margin-right: 2px;
1142
      opacity: 1;
1143 660f24a7 Martin Sebela
      border: 1px solid $text-color;
1144 b7a21811 Martin Sebela
1145
      &:after {
1146
        content: '';
1147
        display: inline-block;
1148
        width: 8px;
1149
        height: 11px;
1150 1774c06d Tomáš Ballák
        background: url($images-dir + 'btn-lock.svg') no-repeat -8px 0;
1151 b7a21811 Martin Sebela
        background-size: cover;
1152
      }
1153 863ca316 Martin Sebela
1154
      &:hover:after {
1155
        background-position: 0 0;
1156
      }
1157 4e003182 Martin Sebela
    }
1158
  }
1159
1160 660f24a7 Martin Sebela
  
1161
  // HEATMAP PAGE - CONTROLS - TIMELINE
1162 351696d5 Martin Sebela
  .timeline {
1163
    display: flex;
1164
    height: 30px;
1165
    flex-direction: row;
1166
    position: relative;
1167
    border-radius: 100px;
1168 660f24a7 Martin Sebela
    background-color: $heatmap-controls-primary-bg;
1169 351696d5 Martin Sebela
1170
    @include media-breakpoint-down(md) {
1171
      padding: 0;
1172 dd652e61 Martin Sebela
      order: 1;
1173
      margin-right: 20px;
1174 351696d5 Martin Sebela
    }
1175
1176 4e003182 Martin Sebela
    @media (max-width: 390px) {
1177
      display: inline-block;
1178
      margin: 4px 0 0 0;
1179
    }
1180
1181 660f24a7 Martin Sebela
    
1182
    // HEATMAP PAGE - CONTROLS - TIMELINE - ONE HOUR ITEM
1183 351696d5 Martin Sebela
    .hour {
1184 ec5e3220 Martin Sebela
      cursor: pointer;
1185
1186 351696d5 Martin Sebela
      @include media-breakpoint-down(md) {
1187
        display: none;
1188
      }
1189
1190 ec5e3220 Martin Sebela
      &:nth-of-type(2) {
1191
        margin-left: 10px;
1192
      }
1193
1194 351696d5 Martin Sebela
      &:before {
1195
        content: "";
1196
        display: inline-block;
1197
        width: 6px;
1198
        height: 6px;
1199
        border-radius: 50%;
1200 660f24a7 Martin Sebela
        background: $text-color;
1201 351696d5 Martin Sebela
      }
1202
1203
      &:after {
1204
        content: "";
1205
        display: inline-block;
1206
        position: relative;
1207
        top: -2px;
1208
        width: 20px;
1209
        height: 2px;
1210 660f24a7 Martin Sebela
        background: $text-color;
1211 351696d5 Martin Sebela
      }
1212
    }
1213
1214 660f24a7 Martin Sebela
    
1215
    // HEATMAP PAGE - CONTROLS - TIMELINE - LAST ITEM
1216 351696d5 Martin Sebela
    .end-dot:before {
1217
      content: "";
1218
      display: inline-block;
1219
      width: 6px;
1220
      height: 6px;
1221 ec5e3220 Martin Sebela
      margin-right: 10px;
1222 351696d5 Martin Sebela
      border-radius: 50%;
1223 660f24a7 Martin Sebela
      background: $text-color;
1224 351696d5 Martin Sebela
1225
      @include media-breakpoint-down(md) {
1226
        display: none;
1227
      }
1228
    }
1229
  }
1230
1231 660f24a7 Martin Sebela
1232
  // HEATMAP PAGE - CONTROLS - TIMELINE - TIME
1233 c236b33a msebela
  .time {
1234
    display: flex;
1235
    justify-content: center;
1236
    align-items: center;
1237 ec5e3220 Martin Sebela
    width: 64px;
1238 c236b33a msebela
    padding: 3px 0 4px 0;
1239 351696d5 Martin Sebela
    z-index: 1000;
1240 ec5e3220 Martin Sebela
    font-size: 15px;
1241 c236b33a msebela
    border-radius: 15px;
1242 ec5e3220 Martin Sebela
    cursor: ew-resize;
1243 bb2d43b5 Martin Sebela
    background: $secondary-bg-color;
1244 d51166e8 ballakt
1245 351696d5 Martin Sebela
    @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 500e20aa msebela
1274 660f24a7 Martin Sebela
1275
    // HEATMAP PAGE - CONTROLS - TIMELINE - LOADER
1276 6b7c4d1c Martin Sebela
    .custom-spinner-border {
1277
      margin: 3px 0 4px 0;
1278 500e20aa msebela
    }
1279
  }
1280 dd652e61 Martin Sebela
}
1281
1282 c892003d Martin Sebela
1283 660f24a7 Martin Sebela
// HEATMAP PAGE - POPUPS
1284 dd652e61 Martin Sebela
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
1285
  font-family: 'Be Vietnam', sans-serif;
1286
  text-align: center;
1287 660f24a7 Martin Sebela
  color: $text-color;
1288 dd652e61 Martin Sebela
1289 660f24a7 Martin Sebela
  
1290
  // HEATMAP PAGE - POPUPS - LOCATION/DATASET NAME
1291 6b7c4d1c Martin Sebela
  strong {
1292 dd652e61 Martin Sebela
    display: inline-block;
1293
    margin-bottom: 8px;
1294
  }
1295
1296 660f24a7 Martin Sebela
  
1297
  // HEATMAP PAGE - POPUPS - DATASET VALUE
1298 6b7c4d1c Martin Sebela
  #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 660f24a7 Martin Sebela
  
1313
  // HEATMAP PAGE - POPUPS - PAGINATION
1314 6b7c4d1c Martin Sebela
  .popup-pagination {
1315 dd652e61 Martin Sebela
    display: flex;
1316
    margin: 1em 0 1em 0;
1317
1318 6b7c4d1c Martin Sebela
    button {
1319 dd652e61 Martin Sebela
      height: 32px;
1320
      width: 32px;
1321
      border: 0;
1322
      border-radius: 24px;
1323 660f24a7 Martin Sebela
      background: url($images-dir + 'btn-prev.svg') $heatmap-popup-btn-bg no-repeat center center;
1324 dd652e61 Martin Sebela
      transition: background 0.3s ease-out;
1325
      outline: none !important;
1326
1327
      &:hover {
1328 660f24a7 Martin Sebela
        background: url($images-dir + 'btn-prev.svg') $heatmap-popup-btn-hover-bg no-repeat center center;
1329 dd652e61 Martin Sebela
      }
1330
      
1331
      &.next {
1332 660f24a7 Martin Sebela
        background: url($images-dir + 'btn-next.svg') $heatmap-popup-btn-bg no-repeat center center;
1333 dd652e61 Martin Sebela
1334
        &:hover {
1335 660f24a7 Martin Sebela
          background: url($images-dir + 'btn-next.svg') $heatmap-popup-btn-hover-bg no-repeat center center;
1336 dd652e61 Martin Sebela
        }
1337
      }
1338
    }
1339
1340 660f24a7 Martin Sebela
    
1341
    // HEATMAP PAGE - POPUPS - PAGINATION - COUNT PAGES
1342 6b7c4d1c Martin Sebela
    p {
1343
      margin: auto;
1344 bb2d43b5 Martin Sebela
    }
1345 1cf1413d ballakt
  }
1346 500e20aa msebela
}