Revize 660f24a7
Přidáno uživatelem Martin Sebela před více než 3 roky(ů)
| website/public/css/style.scss | ||
|---|---|---|
| 4 | 4 |
|
| 5 | 5 |
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
|
| 6 | 6 |
|
| 7 |
|
|
| 8 |
|
|
| 9 |
// ---------------------------------------- COLORS SETTINGS ---------------------------------------- |
|
| 10 |
|
|
| 11 |
// text color |
|
| 12 |
$text-color: #ffffff; |
|
| 13 |
|
|
| 14 |
// main page colors |
|
| 7 | 15 |
$primary-bg-color: #0048A9; |
| 8 | 16 |
$primary-bg-color-darker: #004fb3; |
| 9 |
$input-bg-hover: #336dba; |
|
| 10 | 17 |
$secondary-bg-color: #0b155a; |
| 11 | 18 |
|
| 12 |
$primary-text-color: #ffffff; |
|
| 19 |
// input elements background color on hover |
|
| 20 |
$input-bg-hover:rgba(255, 255, 255, .1); |
|
| 13 | 21 |
|
| 14 |
$heatmap-nav-border-color: #1C6CC0; |
|
| 22 |
// heatmap header background colors |
|
| 23 |
$heatmap-nav-border-color: #1c6cc0; |
|
| 15 | 24 |
$heatmap-nav-button-bg-color: #0057be; |
| 16 | 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 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 |
|
| 17 | 38 |
$images-dir: '../img/'; |
| 18 | 39 |
|
| 19 | 40 |
|
| 41 |
|
|
| 42 |
// ---------------------------------------- STYLE ---------------------------------------- |
|
| 43 |
|
|
| 20 | 44 |
html, body {
|
| 21 | 45 |
position: relative; |
| 22 | 46 |
height: 96.2%; |
| 23 | 47 |
font-family: 'Be Vietnam', sans-serif; |
| 24 |
color: $primary-text-color;
|
|
| 48 |
color: $text-color; |
|
| 25 | 49 |
background: $secondary-bg-color; |
| 26 | 50 |
|
| 27 | 51 |
&.intro {
|
| ... | ... | |
| 31 | 55 |
} |
| 32 | 56 |
} |
| 33 | 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 |
|
| 34 | 121 |
header {
|
| 35 | 122 |
height: 70px; |
| 36 | 123 |
background: $primary-bg-color; |
| 37 | 124 |
|
| 125 |
|
|
| 126 |
// HEADER - LOGO |
|
| 38 | 127 |
.logo {
|
| 39 | 128 |
width: 450px; |
| 40 | 129 |
height: 181px; |
| ... | ... | |
| 117 | 206 |
.nav-link {
|
| 118 | 207 |
padding-left: 22px; |
| 119 | 208 |
padding-right: 22px; |
| 120 |
border: 1px solid $primary-text-color;
|
|
| 209 |
border: 1px solid $text-color; |
|
| 121 | 210 |
border-radius: 20px; |
| 122 | 211 |
|
| 123 | 212 |
&:hover {
|
| ... | ... | |
| 130 | 219 |
.navbar-button {
|
| 131 | 220 |
padding: .5rem 22px; |
| 132 | 221 |
margin-right: 40px; |
| 133 |
border: 1px solid $primary-text-color;
|
|
| 222 |
border: 1px solid $text-color; |
|
| 134 | 223 |
border-radius: 20px; |
| 135 | 224 |
text-decoration: none; |
| 136 | 225 |
|
| ... | ... | |
| 159 | 248 |
} |
| 160 | 249 |
} |
| 161 | 250 |
|
| 162 |
h1 {
|
|
| 163 |
text-transform: uppercase; |
|
| 164 |
font-size: 21px; |
|
| 165 |
font-weight: 700; |
|
| 166 |
letter-spacing: .53px; |
|
| 167 |
|
|
| 168 |
@include media-breakpoint-up(lg) {
|
|
| 169 |
line-height: 55px; |
|
| 170 |
} |
|
| 171 |
} |
|
| 172 |
|
|
| 173 |
h2 {
|
|
| 174 |
font-size: 16px; |
|
| 175 |
font-weight: 400; |
|
| 176 |
letter-spacing: .4px; |
|
| 177 | 251 |
|
| 178 |
@include media-breakpoint-up(lg) {
|
|
| 179 |
margin: 0; |
|
| 180 |
} |
|
| 181 |
} |
|
| 182 | 252 |
|
| 183 |
h3 {
|
|
| 184 |
font-size: 38px; |
|
| 185 |
font-weight: 800; |
|
| 186 |
letter-spacing: .95px; |
|
| 253 |
// ---------------------------------------- INTRO PAGE ---------------------------------------- |
|
| 187 | 254 |
|
| 188 |
@include media-breakpoint-down(xs) {
|
|
| 189 |
font-size: 28px; |
|
| 190 |
} |
|
| 191 |
} |
|
| 192 | 255 |
|
| 193 |
a {
|
|
| 194 |
color: $primary-text-color; |
|
| 195 |
outline: none; |
|
| 196 |
|
|
| 197 |
&:hover {
|
|
| 198 |
color: $primary-text-color; |
|
| 199 |
} |
|
| 200 |
} |
|
| 201 |
|
|
| 202 |
hr {
|
|
| 203 |
width: 300px; |
|
| 204 |
text-align: left; |
|
| 205 |
margin: 30px 0; |
|
| 206 |
border-top: 2px solid $primary-text-color; |
|
| 256 |
// INTRO PAGE - SWIPER WRAPPER |
|
| 257 |
.swiper-container {
|
|
| 258 |
height: 100%; |
|
| 259 |
position: relative; |
|
| 207 | 260 |
|
| 208 |
@include media-breakpoint-down(lg) {
|
|
| 209 |
width: 90%; |
|
| 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 |
} |
|
| 210 | 287 |
} |
| 211 |
|
|
| 212 |
@include media-breakpoint-down(xs) {
|
|
| 213 |
margin: 15px 0; |
|
| 288 |
|
|
| 289 |
.btn-secondary {
|
|
| 290 |
background: $secondary-bg-color; |
|
| 291 |
|
|
| 292 |
&:hover, &:focus, &:active {
|
|
| 293 |
background: $input-bg-hover !important; |
|
| 294 |
} |
|
| 214 | 295 |
} |
| 215 | 296 |
} |
| 216 | 297 |
|
| 217 |
.swiper-container {
|
|
| 218 |
height: 100%; |
|
| 219 |
position: relative; |
|
| 220 |
} |
|
| 221 | 298 |
|
| 222 |
// OBRÁZKY VE SLIDECH NA ÚVODNÍ STRÁNCE
|
|
| 299 |
// INTRO PAGE - SLIDES BACKGROUND IMAGES
|
|
| 223 | 300 |
.swiper-slide {
|
| 224 | 301 |
display: flex; |
| 225 | 302 |
justify-content: center; |
| ... | ... | |
| 253 | 330 |
} |
| 254 | 331 |
} |
| 255 | 332 |
|
| 256 |
// TEXT VE SLIDU NA ÚVODNÍ STRÁNCE |
|
| 333 |
|
|
| 334 |
// INTRO PAGE - SLIDE TEXT |
|
| 257 | 335 |
.slide-text {
|
| 258 | 336 |
width: 600px; |
| 259 | 337 |
padding-bottom: 160px; |
| ... | ... | |
| 312 | 390 |
} |
| 313 | 391 |
} |
| 314 | 392 |
|
| 315 |
// STRÁNKOVÁNÍ (TLAČÍTKA) SLIDŮ |
|
| 393 |
|
|
| 394 |
// INTRO PAGE - SLIDES PAGINATION BUTTONS |
|
| 316 | 395 |
.swiper-pagination-buttons {
|
| 317 | 396 |
width: 200px; |
| 318 | 397 |
height: 56px; |
| ... | ... | |
| 342 | 421 |
height: 45px; |
| 343 | 422 |
position: relative; |
| 344 | 423 |
border-radius: 50%; |
| 345 |
border: 2px solid $primary-text-color;
|
|
| 424 |
border: 2px solid $text-color; |
|
| 346 | 425 |
|
| 347 | 426 |
&:after {
|
| 348 | 427 |
content: ""; |
| ... | ... | |
| 368 | 447 |
} |
| 369 | 448 |
} |
| 370 | 449 |
|
| 371 |
// STRÁNKOVÁNÍ (POZICE) SLIDŮ |
|
| 450 |
|
|
| 451 |
// INTRO PAGE - PAGINATION BULLETS |
|
| 372 | 452 |
.swiper-pagination-bullets {
|
| 373 | 453 |
display: inline-block; |
| 374 | 454 |
width: auto !important; |
| ... | ... | |
| 396 | 476 |
top: 13px; |
| 397 | 477 |
left: 15px; |
| 398 | 478 |
z-index: 1; |
| 399 |
border-top: 2px solid $primary-text-color;
|
|
| 479 |
border-top: 2px solid $text-color; |
|
| 400 | 480 |
} |
| 401 | 481 |
|
| 402 | 482 |
.swiper-pagination-bullet {
|
| ... | ... | |
| 417 | 497 |
top: 5px; |
| 418 | 498 |
left: 5px; |
| 419 | 499 |
border-radius: 50%; |
| 420 |
background: $primary-text-color;
|
|
| 500 |
background: $text-color; |
|
| 421 | 501 |
} |
| 422 | 502 |
|
| 423 | 503 |
&:first-of-type {
|
| ... | ... | |
| 430 | 510 |
} |
| 431 | 511 |
|
| 432 | 512 |
.swiper-pagination-bullet-active {
|
| 433 |
border: 2px solid $primary-text-color; |
|
| 434 |
} |
|
| 435 |
} |
|
| 436 |
|
|
| 437 |
.btn-primary {
|
|
| 438 |
width: 300px; |
|
| 439 |
height: 50px; |
|
| 440 |
line-height: 32px; |
|
| 441 |
position: relative; |
|
| 442 |
padding-left: 30px; |
|
| 443 |
margin-top: 40px; |
|
| 444 |
text-align: left; |
|
| 445 |
font-size: 16px; |
|
| 446 |
text-transform: uppercase; |
|
| 447 |
letter-spacing: 0.4px; |
|
| 448 |
border-radius: 30px; |
|
| 449 |
border: 1px solid $secondary-bg-color; |
|
| 450 |
background: $secondary-bg-color; |
|
| 451 |
|
|
| 452 |
&:hover, &:focus, &:active {
|
|
| 453 |
border: 1px solid $primary-bg-color; |
|
| 454 |
background: $primary-bg-color !important; |
|
| 455 |
} |
|
| 456 |
|
|
| 457 |
@include media-breakpoint-down(xs) {
|
|
| 458 |
width: 100%; |
|
| 459 |
max-width: 270px; |
|
| 460 |
height: auto; |
|
| 461 |
margin-top: 20px; |
|
| 513 |
border: 2px solid $text-color; |
|
| 462 | 514 |
} |
| 463 | 515 |
} |
| 464 | 516 |
|
| 465 |
.btn-secondary {
|
|
| 466 |
background: $secondary-bg-color; |
|
| 467 | 517 |
|
| 468 |
&:hover, &:focus, &:active {
|
|
| 469 |
background: #7378A0 !important; |
|
| 470 |
} |
|
| 471 |
} |
|
| 472 |
|
|
| 473 |
// UKÁZKOVÉ BODY NA MAPĚ |
|
| 518 |
// INTRO PAGE - SAMPLE MAP POINTS |
|
| 474 | 519 |
.map-point {
|
| 475 | 520 |
width: 50px; |
| 476 | 521 |
height: 50px; |
| ... | ... | |
| 478 | 523 |
position: absolute; |
| 479 | 524 |
border-radius: 50%; |
| 480 | 525 |
cursor: pointer; |
| 481 |
border: 2px solid $primary-text-color;
|
|
| 526 |
border: 2px solid $text-color; |
|
| 482 | 527 |
|
| 483 | 528 |
@media not all and (min-width: 1900px) and (max-width: 2100px) {
|
| 484 | 529 |
display: none; |
| ... | ... | |
| 540 | 585 |
top: -2px; |
| 541 | 586 |
left: -2px; |
| 542 | 587 |
border-radius: 50%; |
| 543 |
border: 2px solid $primary-text-color;
|
|
| 588 |
border: 2px solid $text-color; |
|
| 544 | 589 |
} |
| 545 | 590 |
|
| 546 | 591 |
&.point-1 {
|
| ... | ... | |
| 560 | 605 |
} |
| 561 | 606 |
|
| 562 | 607 |
|
| 563 |
// DODATEČNÉ POZADÍ NA KAŽDÉM ZE SLIDŮ
|
|
| 608 |
// INTRO PAGE - ADDITIONAL SLIDES BACKGROUND
|
|
| 564 | 609 |
.slide-background {
|
| 565 | 610 |
width: 650px; |
| 566 | 611 |
height: 290px; |
| ... | ... | |
| 578 | 623 |
} |
| 579 | 624 |
|
| 580 | 625 |
|
| 581 |
// COPYRIGHT |
|
| 626 |
// INTRO PAGE - ABOUT - COPYRIGHT
|
|
| 582 | 627 |
div.copyright {
|
| 583 | 628 |
p {
|
| 584 | 629 |
font-weight: 400; |
| ... | ... | |
| 590 | 635 |
} |
| 591 | 636 |
|
| 592 | 637 |
|
| 593 |
// LOGA V SEKCI "O PROJEKTU"
|
|
| 638 |
// INTRO PAGE - ABOUT - PARTNERS LOGOS
|
|
| 594 | 639 |
p.logos-partners {
|
| 595 | 640 |
margin-top: 40px; |
| 596 | 641 |
text-align: right; |
| ... | ... | |
| 620 | 665 |
|
| 621 | 666 |
|
| 622 | 667 |
|
| 623 |
// ---------------------------------------- HEATMAPA ----------------------------------------
|
|
| 668 |
// ---------------------------------------- HEATMAP PAGE ----------------------------------------
|
|
| 624 | 669 |
|
| 625 | 670 |
|
| 626 |
// WRAPPER HEATMAPY
|
|
| 671 |
// HEATMAP PAGE - WRAPPER
|
|
| 627 | 672 |
#heatmap {
|
| 628 | 673 |
height: 100%; |
| 629 | 674 |
} |
| 630 | 675 |
|
| 631 | 676 |
|
| 632 |
// HLAVIČKA (FORMULÁŘ) NA STRÁNCE S HEATMAPOU
|
|
| 677 |
// HEATMAP PAGE - FORM IN HEADER
|
|
| 633 | 678 |
header.map {
|
| 634 | 679 |
@include media-breakpoint-down(md) {
|
| 635 | 680 |
.navbar-nav {
|
| ... | ... | |
| 650 | 695 |
|
| 651 | 696 |
input {
|
| 652 | 697 |
letter-spacing: .4px; |
| 653 |
color: $primary-text-color;
|
|
| 698 |
color: $text-color; |
|
| 654 | 699 |
border-color: $primary-bg-color; |
| 655 | 700 |
background: $primary-bg-color; |
| 656 | 701 |
|
| 657 | 702 |
&::placeholder {
|
| 658 |
color: $primary-text-color;
|
|
| 703 |
color: $text-color; |
|
| 659 | 704 |
opacity: 1; |
| 660 | 705 |
} |
| 706 |
|
|
| 707 |
&:hover {
|
|
| 708 |
background: $input-bg-hover; |
|
| 709 |
} |
|
| 710 |
|
|
| 711 |
&:focus {
|
|
| 712 |
background: $text-color; |
|
| 713 |
color: $black; |
|
| 714 |
} |
|
| 661 | 715 |
} |
| 662 | 716 |
|
| 663 |
// JEDNOTLIVÉ POLOŽKY FORMULÁŘE |
|
| 717 |
|
|
| 718 |
// HEATMAP PAGE - FORM - ITEMS |
|
| 664 | 719 |
.nav-item {
|
| 665 | 720 |
padding: 5px; |
| 666 | 721 |
margin: auto 0; |
| ... | ... | |
| 692 | 747 |
} |
| 693 | 748 |
} |
| 694 | 749 |
|
| 695 |
// WRAPPER U VÝBĚRU DATOVÝCH SAD |
|
| 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 |
|
| 696 | 801 |
&:nth-child(3) {
|
| 697 | 802 |
padding: 0; |
| 698 | 803 |
margin: 0; |
| ... | ... | |
| 726 | 831 |
} |
| 727 | 832 |
} |
| 728 | 833 |
|
| 729 |
// TLAČÍTKO PRO ODESLÁNÍ FORMULÁŘE PRO ZMĚNU PARAMETRŮ HEATMAPY |
|
| 834 |
|
|
| 835 |
// HEATMAP PAGE - FORM - SUBMIT BUTTON |
|
| 730 | 836 |
&:last-child {
|
| 731 | 837 |
margin-top: 0; |
| 732 | 838 |
margin-bottom: 0; |
| ... | ... | |
| 760 | 866 |
} |
| 761 | 867 |
} |
| 762 | 868 |
} |
| 763 |
|
|
| 764 |
// DATEPICKER |
|
| 765 |
input {
|
|
| 766 |
&:hover {
|
|
| 767 |
background: rgba(255, 255, 255, .2); |
|
| 768 |
} |
|
| 769 |
|
|
| 770 |
&:focus {
|
|
| 771 |
background: $primary-text-color; |
|
| 772 |
color: $black; |
|
| 773 |
} |
|
| 774 |
} |
|
| 775 |
|
|
| 776 |
// MENU PRO VÝBĚR ČASU/DATOVÝCH SAD |
|
| 777 |
.dropdown {
|
|
| 778 |
min-width: 200px; |
|
| 779 |
|
|
| 780 |
.btn {
|
|
| 781 |
width: 100%; |
|
| 782 |
text-align: left; |
|
| 783 |
letter-spacing: .4px; |
|
| 784 |
color: $primary-text-color; |
|
| 785 |
background: $primary-bg-color; |
|
| 786 |
|
|
| 787 |
&:hover {
|
|
| 788 |
background: $input-bg-hover; |
|
| 789 |
} |
|
| 790 |
} |
|
| 791 |
|
|
| 792 |
.dropdown-menu {
|
|
| 793 |
width: 100%; |
|
| 794 |
max-height: 300px; |
|
| 795 |
overflow-y: auto; |
|
| 796 |
z-index: 1001; |
|
| 797 |
|
|
| 798 |
.dropdown-item {
|
|
| 799 |
&:active {
|
|
| 800 |
background: $primary-bg-color; |
|
| 801 |
} |
|
| 802 |
|
|
| 803 |
label {
|
|
| 804 |
width: 100% !important; |
|
| 805 |
margin-left: 0; |
|
| 806 |
cursor: pointer; |
|
| 807 |
} |
|
| 808 |
} |
|
| 809 |
} |
|
| 810 |
|
|
| 811 |
#dropdown-time .dropdown-item:nth-of-type(even) {
|
|
| 812 |
background: rgba(0,0,0,.05); |
|
| 813 |
|
|
| 814 |
&:active {
|
|
| 815 |
background: $primary-bg-color; |
|
| 816 |
} |
|
| 817 |
} |
|
| 818 |
|
|
| 819 |
input[type="radio"]:checked ~ label {
|
|
| 820 |
font-weight: 800; |
|
| 821 |
} |
|
| 822 |
} |
|
| 823 | 869 |
} |
| 824 | 870 |
} |
| 825 | 871 |
|
| 826 | 872 |
|
| 827 |
// MENU SE SEZNAMEM LOKACÍ NA MAPĚ
|
|
| 873 |
// HEATMAP PAGE - CONTROLS - MAP LOCATIONS - WRAPPER
|
|
| 828 | 874 |
.map-locations {
|
| 829 | 875 |
position: absolute; |
| 830 | 876 |
top: 95px; |
| 831 | 877 |
right: 25px; |
| 832 | 878 |
z-index: 1000; |
| 833 | 879 |
border-radius: 22px; |
| 834 |
background-color: rgba(11, 21, 90, .7);
|
|
| 880 |
background-color: $heatmap-controls-primary-bg;
|
|
| 835 | 881 |
|
| 836 |
// KRATŠÍ NADPIS PRO MENŠÍ ROZLIŠENÍ |
|
| 837 | 882 |
.mobile {
|
| 838 | 883 |
display: none; |
| 839 | 884 |
} |
| ... | ... | |
| 858 | 903 |
right: 10px; |
| 859 | 904 |
} |
| 860 | 905 |
|
| 861 |
// NADPIS PRO OTEVŘENÍ / SKRYTÍ SEZNAMU LOKACÍ |
|
| 906 |
|
|
| 907 |
// HEATMAP PAGE - CONTROLS - MAP LOCATIONS |
|
| 862 | 908 |
.menu {
|
| 863 | 909 |
width: 100%; |
| 864 | 910 |
display: inline-block; |
| ... | ... | |
| 869 | 915 |
opacity: 1; |
| 870 | 916 |
background: $secondary-bg-color; |
| 871 | 917 |
|
| 872 |
// IKONKA V NADPISU |
|
| 873 | 918 |
.circle {
|
| 874 | 919 |
display: inline-block; |
| 875 | 920 |
width: 40px; |
| ... | ... | |
| 878 | 923 |
top: 3px; |
| 879 | 924 |
right: 3px; |
| 880 | 925 |
border-radius: 50%; |
| 881 |
border: 2px solid $primary-text-color;
|
|
| 926 |
border: 2px solid $text-color; |
|
| 882 | 927 |
|
| 883 | 928 |
&:after {
|
| 884 | 929 |
content: ""; |
| ... | ... | |
| 893 | 938 |
} |
| 894 | 939 |
} |
| 895 | 940 |
|
| 896 |
// SEZNAM LOKACÍ |
|
| 941 |
|
|
| 942 |
// HEATMAP PAGE - CONTROLS - MAP LOCATIONS - LOCATIONS LIST |
|
| 897 | 943 |
.locations {
|
| 898 | 944 |
z-index: 1000; |
| 899 | 945 |
|
| ... | ... | |
| 923 | 969 |
} |
| 924 | 970 |
|
| 925 | 971 |
|
| 926 |
// DOLNÍ OVLÁDACÍ PANEL HEATMAPY
|
|
| 972 |
// HEATMAP PAGE - CONTROLS - PLAYER, TIMELINE
|
|
| 927 | 973 |
.player {
|
| 928 | 974 |
width: 100%; |
| 929 | 975 |
display: flex; |
| ... | ... | |
| 939 | 985 |
bottom: -30px; |
| 940 | 986 |
} |
| 941 | 987 |
|
| 942 |
// TLAČÍTKA PRO OVLÁDÁNÍ ANIMACE HEATMAPY |
|
| 988 |
|
|
| 989 |
// HEATMAP PAGE - CONTROLS - ANIMATION BUTTONS |
|
| 943 | 990 |
.next-btn, .prev-btn, .animate-btn, .lock-btn {
|
| 944 | 991 |
display: inline-block; |
| 945 | 992 |
width: 42px; |
| ... | ... | |
| 948 | 995 |
position: relative; |
| 949 | 996 |
border-radius: 50%; |
| 950 | 997 |
opacity: .7; |
| 951 |
border: 2px solid $primary-text-color;
|
|
| 998 |
border: 2px solid $text-color; |
|
| 952 | 999 |
box-shadow: 0 0 0 4px $secondary-bg-color; |
| 953 | 1000 |
background: $secondary-bg-color; |
| 954 | 1001 |
cursor: pointer; |
| ... | ... | |
| 972 | 1019 |
} |
| 973 | 1020 |
} |
| 974 | 1021 |
|
| 975 |
// TLAČÍTKO START / STOP ANIMACE |
|
| 1022 |
|
|
| 1023 |
// HEATMAP PAGE - CONTROLS - START/PAUSE ANIMATION |
|
| 976 | 1024 |
.animate-btn {
|
| 977 | 1025 |
width: 57px; |
| 978 | 1026 |
height: 57px; |
| ... | ... | |
| 1003 | 1051 |
} |
| 1004 | 1052 |
} |
| 1005 | 1053 |
|
| 1006 |
// TLAČÍTKO DALŠÍ KROK ANIMACE |
|
| 1054 |
|
|
| 1055 |
// HEATMAP PAGE - CONTROLS - NEXT STEP ANIMATION |
|
| 1007 | 1056 |
.next-btn {
|
| 1008 | 1057 |
@include media-breakpoint-down(md) {
|
| 1009 | 1058 |
order: 3; |
| ... | ... | |
| 1018 | 1067 |
} |
| 1019 | 1068 |
} |
| 1020 | 1069 |
|
| 1021 |
// TLAČÍTKO PŘEDCHOZÍ KROK ANIMACE |
|
| 1070 |
|
|
| 1071 |
// HEATMAP PAGE - CONTROLS - PREVIOUS STEP ANIMATION |
|
| 1022 | 1072 |
.prev-btn {
|
| 1023 | 1073 |
@include media-breakpoint-down(md) {
|
| 1024 | 1074 |
order: 2; |
| ... | ... | |
| 1029 | 1079 |
} |
| 1030 | 1080 |
} |
| 1031 | 1081 |
|
| 1032 |
// WRAPPER ČASOVÉ OSY |
|
| 1082 |
|
|
| 1083 |
// HEATMAP PAGE - CONTROLS - TIMELINE WRAPPER |
|
| 1033 | 1084 |
.timeline-wrapper {
|
| 1034 | 1085 |
display: flex; |
| 1035 | 1086 |
|
| ... | ... | |
| 1040 | 1091 |
} |
| 1041 | 1092 |
} |
| 1042 | 1093 |
|
| 1043 |
// DATUM |
|
| 1094 |
|
|
| 1095 |
// HEATMAP PAGE - CONTROLS - TIMELINE DATE |
|
| 1044 | 1096 |
.date {
|
| 1045 | 1097 |
display: flex; |
| 1046 | 1098 |
align-items: center; |
| ... | ... | |
| 1050 | 1102 |
text-align: center; |
| 1051 | 1103 |
border-radius: 15px; |
| 1052 | 1104 |
cursor: pointer; |
| 1053 |
background: rgba(11, 21, 90, .7);
|
|
| 1105 |
background: $heatmap-controls-primary-bg;
|
|
| 1054 | 1106 |
|
| 1055 | 1107 |
@media (max-width: 390px) {
|
| 1056 | 1108 |
margin-right: 0; |
| ... | ... | |
| 1061 | 1113 |
} |
| 1062 | 1114 |
|
| 1063 | 1115 |
&.lock {
|
| 1064 |
background: rgba(11, 21, 90, 1);
|
|
| 1116 |
background: $heatmap-controls-secondary-bg;
|
|
| 1065 | 1117 |
|
| 1066 | 1118 |
&:hover .lock-btn:after {
|
| 1067 | 1119 |
background-position: -8px 0; |
| ... | ... | |
| 1081 | 1133 |
padding: 3px 6px 4px 12px; |
| 1082 | 1134 |
} |
| 1083 | 1135 |
|
| 1084 |
// ZÁMEČEK PRO UZAMČENÍ ANIMACE V KONKRÉTNÍM DATU |
|
| 1136 |
|
|
| 1137 |
// HEATMAP PAGE - CONTROLS - TIMELINE DATE - LOCK DATE BUTTON |
|
| 1085 | 1138 |
.lock-btn {
|
| 1086 | 1139 |
width: 26px; |
| 1087 | 1140 |
height: 26px; |
| 1088 | 1141 |
margin-right: 2px; |
| 1089 | 1142 |
opacity: 1; |
| 1090 |
border: 1px solid $primary-text-color;
|
|
| 1143 |
border: 1px solid $text-color; |
|
| 1091 | 1144 |
|
| 1092 | 1145 |
&:after {
|
| 1093 | 1146 |
content: ''; |
| ... | ... | |
| 1104 | 1157 |
} |
| 1105 | 1158 |
} |
| 1106 | 1159 |
|
| 1107 |
// ČASOVÁ OSA |
|
| 1160 |
|
|
| 1161 |
// HEATMAP PAGE - CONTROLS - TIMELINE |
|
| 1108 | 1162 |
.timeline {
|
| 1109 | 1163 |
display: flex; |
| 1110 | 1164 |
height: 30px; |
| 1111 | 1165 |
flex-direction: row; |
| 1112 | 1166 |
position: relative; |
| 1113 | 1167 |
border-radius: 100px; |
| 1114 |
background-color: rgba(11, 21, 90, .7);
|
|
| 1168 |
background-color: $heatmap-controls-primary-bg;
|
|
| 1115 | 1169 |
|
| 1116 | 1170 |
@include media-breakpoint-down(md) {
|
| 1117 | 1171 |
padding: 0; |
| ... | ... | |
| 1124 | 1178 |
margin: 4px 0 0 0; |
| 1125 | 1179 |
} |
| 1126 | 1180 |
|
| 1127 |
// JEDEN DÍLEK ČASOVÉ OSY |
|
| 1181 |
|
|
| 1182 |
// HEATMAP PAGE - CONTROLS - TIMELINE - ONE HOUR ITEM |
|
| 1128 | 1183 |
.hour {
|
| 1129 | 1184 |
cursor: pointer; |
| 1130 | 1185 |
|
| ... | ... | |
| 1142 | 1197 |
width: 6px; |
| 1143 | 1198 |
height: 6px; |
| 1144 | 1199 |
border-radius: 50%; |
| 1145 |
background: $primary-text-color;
|
|
| 1200 |
background: $text-color; |
|
| 1146 | 1201 |
} |
| 1147 | 1202 |
|
| 1148 | 1203 |
&:after {
|
| ... | ... | |
| 1152 | 1207 |
top: -2px; |
| 1153 | 1208 |
width: 20px; |
| 1154 | 1209 |
height: 2px; |
| 1155 |
background: $primary-text-color;
|
|
| 1210 |
background: $text-color; |
|
| 1156 | 1211 |
} |
| 1157 | 1212 |
} |
| 1158 | 1213 |
|
| 1159 |
// POSLEDNÍ DÍLEK ČASOVÉ OSY |
|
| 1214 |
|
|
| 1215 |
// HEATMAP PAGE - CONTROLS - TIMELINE - LAST ITEM |
|
| 1160 | 1216 |
.end-dot:before {
|
| 1161 | 1217 |
content: ""; |
| 1162 | 1218 |
display: inline-block; |
| ... | ... | |
| 1164 | 1220 |
height: 6px; |
| 1165 | 1221 |
margin-right: 10px; |
| 1166 | 1222 |
border-radius: 50%; |
| 1167 |
background: $primary-text-color;
|
|
| 1223 |
background: $text-color; |
|
| 1168 | 1224 |
|
| 1169 | 1225 |
@include media-breakpoint-down(md) {
|
| 1170 | 1226 |
display: none; |
| ... | ... | |
| 1172 | 1228 |
} |
| 1173 | 1229 |
} |
| 1174 | 1230 |
|
| 1175 |
// ČAS NA ČASOVÉ OSE |
|
| 1231 |
|
|
| 1232 |
// HEATMAP PAGE - CONTROLS - TIMELINE - TIME |
|
| 1176 | 1233 |
.time {
|
| 1177 | 1234 |
display: flex; |
| 1178 | 1235 |
justify-content: center; |
| ... | ... | |
| 1214 | 1271 |
&.hour-23 {left: 585px;}
|
| 1215 | 1272 |
} |
| 1216 | 1273 |
|
| 1217 |
// NAČÍTÁNÍ |
|
| 1274 |
|
|
| 1275 |
// HEATMAP PAGE - CONTROLS - TIMELINE - LOADER |
|
| 1218 | 1276 |
.custom-spinner-border {
|
| 1219 | 1277 |
margin: 3px 0 4px 0; |
| 1220 | 1278 |
} |
| ... | ... | |
| 1222 | 1280 |
} |
| 1223 | 1281 |
|
| 1224 | 1282 |
|
| 1225 |
// POPUP O KONKRÉTNÍM BODĚ V HEATMAPĚ
|
|
| 1283 |
// HEATMAP PAGE - POPUPS
|
|
| 1226 | 1284 |
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
| 1227 | 1285 |
font-family: 'Be Vietnam', sans-serif; |
| 1228 | 1286 |
text-align: center; |
| 1229 |
color: $primary-text-color;
|
|
| 1287 |
color: $text-color; |
|
| 1230 | 1288 |
|
| 1231 |
// INFORMACE O LOKACI / NÁZEV DATASETU |
|
| 1289 |
|
|
| 1290 |
// HEATMAP PAGE - POPUPS - LOCATION/DATASET NAME |
|
| 1232 | 1291 |
strong {
|
| 1233 | 1292 |
display: inline-block; |
| 1234 | 1293 |
margin-bottom: 8px; |
| 1235 | 1294 |
} |
| 1236 | 1295 |
|
| 1237 |
// HODNOTA V POPUPU |
|
| 1296 |
|
|
| 1297 |
// HEATMAP PAGE - POPUPS - DATASET VALUE |
|
| 1238 | 1298 |
#place-intesity {
|
| 1239 | 1299 |
display: flex; |
| 1240 | 1300 |
align-items: center; |
| ... | ... | |
| 1249 | 1309 |
} |
| 1250 | 1310 |
} |
| 1251 | 1311 |
|
| 1252 |
// STRÁNKOVÁNÍ V POPUPU |
|
| 1312 |
|
|
| 1313 |
// HEATMAP PAGE - POPUPS - PAGINATION |
|
| 1253 | 1314 |
.popup-pagination {
|
| 1254 | 1315 |
display: flex; |
| 1255 | 1316 |
margin: 1em 0 1em 0; |
| ... | ... | |
| 1259 | 1320 |
width: 32px; |
| 1260 | 1321 |
border: 0; |
| 1261 | 1322 |
border-radius: 24px; |
| 1262 |
background: url($images-dir + 'btn-prev.svg') rgba(255, 255, 255, .1) no-repeat center center;
|
|
| 1323 |
background: url($images-dir + 'btn-prev.svg') $heatmap-popup-btn-bg no-repeat center center;
|
|
| 1263 | 1324 |
transition: background 0.3s ease-out; |
| 1264 | 1325 |
outline: none !important; |
| 1265 | 1326 |
|
| 1266 | 1327 |
&:hover {
|
| 1267 |
background: url($images-dir + 'btn-prev.svg') rgba(125, 125, 125, .1) no-repeat center center;
|
|
| 1328 |
background: url($images-dir + 'btn-prev.svg') $heatmap-popup-btn-hover-bg no-repeat center center;
|
|
| 1268 | 1329 |
} |
| 1269 | 1330 |
|
| 1270 | 1331 |
&.next {
|
| 1271 |
background: url($images-dir + 'btn-next.svg') rgba(255, 255, 255, .1) no-repeat center center;
|
|
| 1332 |
background: url($images-dir + 'btn-next.svg') $heatmap-popup-btn-bg no-repeat center center;
|
|
| 1272 | 1333 |
|
| 1273 | 1334 |
&:hover {
|
| 1274 |
background: url($images-dir + 'btn-next.svg') rgba(125, 125, 125, .1) no-repeat center center;
|
|
| 1335 |
background: url($images-dir + 'btn-next.svg') $heatmap-popup-btn-hover-bg no-repeat center center;
|
|
| 1275 | 1336 |
} |
| 1276 | 1337 |
} |
| 1277 | 1338 |
} |
| 1278 | 1339 |
|
| 1279 |
// POČET STRÁNEK |
|
| 1340 |
|
|
| 1341 |
// HEATMAP PAGE - POPUPS - PAGINATION - COUNT PAGES |
|
| 1280 | 1342 |
p {
|
| 1281 | 1343 |
margin: auto; |
| 1282 | 1344 |
} |
Také k dispozici: Unified diff
Re #8192 - configurable GUI (vars in SASS file)