Revize bb2d43b5
Přidáno uživatelem Martin Sebela před více než 3 roky(ů)
| website/public/css/style.scss | ||
|---|---|---|
| 2 | 2 |
@import 'bootstrap-4.4.1/_variables.scss'; |
| 3 | 3 |
@import 'bootstrap-4.4.1/mixins/_breakpoints.scss'; |
| 4 | 4 |
|
| 5 |
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
|
|
| 6 |
|
|
| 7 |
$primary-bg-color: #0048A9; |
|
| 8 |
$primary-bg-color-darker: #004fb3; |
|
| 9 |
$secondary-bg-color: #0b155a; |
|
| 10 |
|
|
| 11 |
$primary-text-color: #ffffff; |
|
| 12 |
|
|
| 5 | 13 |
$images-dir: '../img/'; |
| 6 | 14 |
|
| 7 |
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
|
|
| 8 | 15 |
|
| 9 | 16 |
html, body {
|
| 10 |
font-family: 'Be Vietnam', sans-serif; |
|
| 11 |
color: #fff; |
|
| 12 | 17 |
position: relative; |
| 13 | 18 |
height: 96.2%; |
| 14 |
background: #242C6B; |
|
| 19 |
font-family: 'Be Vietnam', sans-serif; |
|
| 20 |
color: $primary-text-color; |
|
| 21 |
background: $secondary-bg-color; |
|
| 15 | 22 |
|
| 16 | 23 |
&.intro {
|
| 17 | 24 |
@include media-breakpoint-down(sm) {
|
| ... | ... | |
| 22 | 29 |
|
| 23 | 30 |
header {
|
| 24 | 31 |
height: 70px; |
| 25 |
background: #0048A9;
|
|
| 32 |
background: $primary-bg-color;
|
|
| 26 | 33 |
|
| 27 | 34 |
.logo {
|
| 28 | 35 |
width: 450px; |
| ... | ... | |
| 75 | 82 |
left: 0; |
| 76 | 83 |
z-index: 1001; |
| 77 | 84 |
opacity: .98; |
| 78 |
background: #004fb3;
|
|
| 85 |
background: $primary-bg-color-darker;
|
|
| 79 | 86 |
} |
| 80 | 87 |
} |
| 81 | 88 |
|
| ... | ... | |
| 106 | 113 |
.nav-link {
|
| 107 | 114 |
padding-left: 22px; |
| 108 | 115 |
padding-right: 22px; |
| 109 |
border: 1px solid #fff;
|
|
| 116 |
border: 1px solid $primary-text-color;
|
|
| 110 | 117 |
border-radius: 20px; |
| 111 | 118 |
|
| 112 | 119 |
&:hover {
|
| ... | ... | |
| 119 | 126 |
.navbar-button {
|
| 120 | 127 |
padding: .5rem 22px; |
| 121 | 128 |
margin-right: 40px; |
| 122 |
border: 1px solid #fff;
|
|
| 129 |
border: 1px solid $primary-text-color;
|
|
| 123 | 130 |
border-radius: 20px; |
| 124 | 131 |
text-decoration: none; |
| 125 | 132 |
|
| ... | ... | |
| 139 | 146 |
font-weight: 800; |
| 140 | 147 |
letter-spacing: 0.4px; |
| 141 | 148 |
border-radius: 0; |
| 142 |
border: #0048A9;
|
|
| 149 |
border: $primary-bg-color;
|
|
| 143 | 150 |
background: #004fb3; |
| 144 | 151 |
|
| 145 | 152 |
&:hover {
|
| 146 |
background: #0048A9 !important;
|
|
| 153 |
background: $primary-bg-color !important;
|
|
| 147 | 154 |
} |
| 148 | 155 |
} |
| 149 | 156 |
|
| ... | ... | |
| 168 | 175 |
|
| 169 | 176 |
input, .custom-select {
|
| 170 | 177 |
letter-spacing: .4px; |
| 171 |
color: #fff; |
|
| 172 |
border-color: #0048A9; |
|
| 173 |
background: #0048A9; |
|
| 178 |
color: $primary-text-color; |
|
| 179 |
border-color: $primary-bg-color; |
|
| 180 |
background: $primary-bg-color; |
|
| 181 |
|
|
| 182 |
&::placeholder {
|
|
| 183 |
color: $primary-text-color; |
|
| 184 |
opacity: 1; |
|
| 185 |
} |
|
| 174 | 186 |
} |
| 175 | 187 |
|
| 176 | 188 |
.nav-item {
|
| ... | ... | |
| 244 | 256 |
} |
| 245 | 257 |
|
| 246 | 258 |
a {
|
| 247 |
color: #fff;
|
|
| 259 |
color: $primary-text-color;
|
|
| 248 | 260 |
outline: none; |
| 249 | 261 |
|
| 250 | 262 |
&:hover {
|
| 251 |
color: #fff;
|
|
| 263 |
color: $primary-text-color;
|
|
| 252 | 264 |
} |
| 253 | 265 |
} |
| 254 | 266 |
|
| ... | ... | |
| 256 | 268 |
width: 300px; |
| 257 | 269 |
text-align: left; |
| 258 | 270 |
margin: 30px 0; |
| 259 |
border-top: 2px solid #fff;
|
|
| 271 |
border-top: 2px solid $primary-text-color;
|
|
| 260 | 272 |
|
| 261 | 273 |
@include media-breakpoint-down(lg) {
|
| 262 | 274 |
width: 90%; |
| ... | ... | |
| 374 | 386 |
bottom: 20px; |
| 375 | 387 |
z-index: 1; |
| 376 | 388 |
border-radius: 100px; |
| 377 |
background: #0B155A;
|
|
| 389 |
background: $secondary-bg-color;
|
|
| 378 | 390 |
|
| 379 | 391 |
@include media-breakpoint-down(lg) {
|
| 380 | 392 |
right: 20px; |
| ... | ... | |
| 394 | 406 |
height: 45px; |
| 395 | 407 |
position: relative; |
| 396 | 408 |
border-radius: 50%; |
| 397 |
border: 2px solid #fff;
|
|
| 409 |
border: 2px solid $primary-text-color;
|
|
| 398 | 410 |
|
| 399 | 411 |
&:after {
|
| 400 | 412 |
content: ""; |
| ... | ... | |
| 430 | 442 |
bottom: 30px !important; |
| 431 | 443 |
border-radius: 100px; |
| 432 | 444 |
opacity: 0.8; |
| 433 |
background: #0B155A;
|
|
| 445 |
background: $secondary-bg-color;
|
|
| 434 | 446 |
|
| 435 | 447 |
@include media-breakpoint-up(lg) {
|
| 436 | 448 |
left: 50% !important; |
| ... | ... | |
| 448 | 460 |
top: 13px; |
| 449 | 461 |
left: 15px; |
| 450 | 462 |
z-index: 1; |
| 451 |
border-top: 2px solid #fff;
|
|
| 463 |
border-top: 2px solid $primary-text-color;
|
|
| 452 | 464 |
} |
| 453 | 465 |
|
| 454 | 466 |
.swiper-pagination-bullet {
|
| ... | ... | |
| 457 | 469 |
position: relative; |
| 458 | 470 |
margin: 4px 15px !important; |
| 459 | 471 |
opacity: 1; |
| 460 |
border: 2px solid #0B155A;
|
|
| 461 |
background: #0B155A;
|
|
| 472 |
border: 2px solid $secondary-bg-color;
|
|
| 473 |
background: $secondary-bg-color;
|
|
| 462 | 474 |
|
| 463 | 475 |
&:before {
|
| 464 | 476 |
content: ""; |
| ... | ... | |
| 469 | 481 |
top: 5px; |
| 470 | 482 |
left: 5px; |
| 471 | 483 |
border-radius: 50%; |
| 472 |
background: #fff;
|
|
| 484 |
background: $primary-text-color;
|
|
| 473 | 485 |
} |
| 474 | 486 |
|
| 475 | 487 |
&:first-of-type {
|
| ... | ... | |
| 482 | 494 |
} |
| 483 | 495 |
|
| 484 | 496 |
.swiper-pagination-bullet-active {
|
| 485 |
border: 2px solid #fff;
|
|
| 497 |
border: 2px solid $primary-text-color;
|
|
| 486 | 498 |
} |
| 487 | 499 |
} |
| 488 | 500 |
|
| ... | ... | |
| 498 | 510 |
text-transform: uppercase; |
| 499 | 511 |
letter-spacing: 0.4px; |
| 500 | 512 |
border-radius: 30px; |
| 501 |
border: 1px solid #0B155A;
|
|
| 502 |
background: #0B155A;
|
|
| 513 |
border: 1px solid $secondary-bg-color;
|
|
| 514 |
background: $secondary-bg-color;
|
|
| 503 | 515 |
|
| 504 | 516 |
&:hover, &:focus, &:active {
|
| 505 |
border: 1px solid #0048A9;
|
|
| 506 |
background: #0048A9 !important;
|
|
| 517 |
border: 1px solid $primary-bg-color;
|
|
| 518 |
background: $primary-bg-color !important;
|
|
| 507 | 519 |
} |
| 508 | 520 |
|
| 509 | 521 |
@include media-breakpoint-down(xs) {
|
| ... | ... | |
| 515 | 527 |
} |
| 516 | 528 |
|
| 517 | 529 |
.btn-secondary {
|
| 518 |
background: #0B155A;
|
|
| 530 |
background: $secondary-bg-color;
|
|
| 519 | 531 |
|
| 520 | 532 |
&:hover, &:focus, &:active {
|
| 521 | 533 |
background: #7378A0 !important; |
| ... | ... | |
| 530 | 542 |
position: absolute; |
| 531 | 543 |
border-radius: 50%; |
| 532 | 544 |
cursor: pointer; |
| 533 |
border: 2px solid #fff;
|
|
| 545 |
border: 2px solid $primary-text-color;
|
|
| 534 | 546 |
|
| 535 | 547 |
@media not all and (min-width: 1900px) and (max-width: 2100px) {
|
| 536 | 548 |
display: none; |
| ... | ... | |
| 561 | 573 |
z-index: 0; |
| 562 | 574 |
opacity: 0.75; |
| 563 | 575 |
border-radius: 25px 0 25px 0; |
| 564 |
background: #0B155A;
|
|
| 576 |
background: $secondary-bg-color;
|
|
| 565 | 577 |
} |
| 566 | 578 |
} |
| 567 | 579 |
|
| ... | ... | |
| 592 | 604 |
top: -2px; |
| 593 | 605 |
left: -2px; |
| 594 | 606 |
border-radius: 50%; |
| 595 |
border: 2px solid #fff;
|
|
| 607 |
border: 2px solid $primary-text-color;
|
|
| 596 | 608 |
} |
| 597 | 609 |
|
| 598 | 610 |
&.point-1 {
|
| ... | ... | |
| 657 | 669 |
text-decoration: none; |
| 658 | 670 |
border-radius: 50px; |
| 659 | 671 |
opacity: 1; |
| 660 |
background: #0B155A;
|
|
| 672 |
background: $secondary-bg-color;
|
|
| 661 | 673 |
|
| 662 | 674 |
.circle {
|
| 663 | 675 |
display: inline-block; |
| ... | ... | |
| 667 | 679 |
top: 3px; |
| 668 | 680 |
right: 3px; |
| 669 | 681 |
border-radius: 50%; |
| 670 |
border: 2px solid #fff;
|
|
| 682 |
border: 2px solid $primary-text-color;
|
|
| 671 | 683 |
|
| 672 | 684 |
&:after {
|
| 673 | 685 |
content: ""; |
| ... | ... | |
| 735 | 747 |
position: relative; |
| 736 | 748 |
border-radius: 50%; |
| 737 | 749 |
opacity: .7; |
| 738 |
border: 2px solid #fff;
|
|
| 739 |
box-shadow: 0 0 0 4px #0B155A;
|
|
| 740 |
background: #0B155A;
|
|
| 750 |
border: 2px solid $primary-text-color;
|
|
| 751 |
box-shadow: 0 0 0 4px $secondary-bg-color;
|
|
| 752 |
background: $secondary-bg-color;
|
|
| 741 | 753 |
cursor: pointer; |
| 742 | 754 |
|
| 743 | 755 |
&:hover {
|
| ... | ... | |
| 826 | 838 |
text-align: center; |
| 827 | 839 |
border-radius: 15px; |
| 828 | 840 |
cursor: pointer; |
| 829 |
background: #0B155A;
|
|
| 841 |
background: $secondary-bg-color;
|
|
| 830 | 842 |
|
| 831 | 843 |
@media (max-width: 390px) {
|
| 832 | 844 |
margin-right: 0; |
| ... | ... | |
| 868 | 880 |
width: 6px; |
| 869 | 881 |
height: 6px; |
| 870 | 882 |
border-radius: 50%; |
| 871 |
background: #fff;
|
|
| 883 |
background: $primary-text-color;
|
|
| 872 | 884 |
} |
| 873 | 885 |
|
| 874 | 886 |
&:after {
|
| ... | ... | |
| 878 | 890 |
top: -2px; |
| 879 | 891 |
width: 20px; |
| 880 | 892 |
height: 2px; |
| 881 |
background: #fff;
|
|
| 893 |
background: $primary-text-color;
|
|
| 882 | 894 |
} |
| 883 | 895 |
} |
| 884 | 896 |
|
| ... | ... | |
| 888 | 900 |
width: 6px; |
| 889 | 901 |
height: 6px; |
| 890 | 902 |
border-radius: 50%; |
| 891 |
background: #fff;
|
|
| 903 |
background: $primary-text-color;
|
|
| 892 | 904 |
|
| 893 | 905 |
@include media-breakpoint-down(md) {
|
| 894 | 906 |
display: none; |
| ... | ... | |
| 905 | 917 |
padding: 3px 0 4px 0; |
| 906 | 918 |
z-index: 1000; |
| 907 | 919 |
border-radius: 15px; |
| 908 |
background: #0B155A;
|
|
| 920 |
background: $secondary-bg-color;
|
|
| 909 | 921 |
|
| 910 | 922 |
@include media-breakpoint-up(lg) {
|
| 911 | 923 |
position: absolute; |
| ... | ... | |
| 1037 | 1049 |
} |
| 1038 | 1050 |
} |
| 1039 | 1051 |
|
| 1052 |
#total-info {
|
|
| 1053 |
margin-left: 5px; |
|
| 1054 |
font-size: 11pt; |
|
| 1055 |
} |
|
| 1056 |
|
|
| 1040 | 1057 |
#number-info {
|
| 1058 |
display: flex; |
|
| 1059 |
align-items: center; |
|
| 1060 |
justify-content: center; |
|
| 1041 | 1061 |
font-family: monospace; |
| 1042 | 1062 |
font-size: 24pt; |
| 1043 | 1063 |
font-weight: 700; |
| ... | ... | |
| 1045 | 1065 |
|
| 1046 | 1066 |
#count-info {
|
| 1047 | 1067 |
margin: auto; |
| 1048 |
color: #fff;
|
|
| 1068 |
color: $primary-text-color;
|
|
| 1049 | 1069 |
} |
| 1050 | 1070 |
} |
| 1051 | 1071 |
|
| ... | ... | |
| 1066 | 1086 |
width: 40px; |
| 1067 | 1087 |
margin-left: 10px; |
| 1068 | 1088 |
transition: all 0.2s ease-out; |
| 1069 |
color: #0048a9;
|
|
| 1089 |
color: $primary-bg-color;
|
|
| 1070 | 1090 |
background: rgba(255, 255, 255, 1); |
| 1071 | 1091 |
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17); |
| 1072 | 1092 |
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17); |
| ... | ... | |
| 1098 | 1118 |
} |
| 1099 | 1119 |
|
| 1100 | 1120 |
&:hover {
|
| 1101 |
color: #0048a9;
|
|
| 1121 |
color: $primary-bg-color;
|
|
| 1102 | 1122 |
background: rgba(255, 255, 255, 1) !important; |
| 1103 | 1123 |
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22); |
| 1104 | 1124 |
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22); |
| ... | ... | |
| 1107 | 1127 |
|
| 1108 | 1128 |
&:active, &:focus {
|
| 1109 | 1129 |
background: rgba(240, 240, 240, 1) !important; |
| 1110 |
color: #0048a9 !important;
|
|
| 1130 |
color: $primary-bg-color !important;
|
|
| 1111 | 1131 |
} |
| 1112 | 1132 |
} |
| 1113 | 1133 |
|
| ... | ... | |
| 1117 | 1137 |
} |
| 1118 | 1138 |
|
| 1119 | 1139 |
&:focus {
|
| 1120 |
background: #fff;
|
|
| 1140 |
background: $primary-text-color;
|
|
| 1121 | 1141 |
color: #000; |
| 1122 | 1142 |
} |
| 1123 | 1143 |
} |
| ... | ... | |
| 1128 | 1148 |
background: rgba(255, 255, 255, .2); |
| 1129 | 1149 |
|
| 1130 | 1150 |
option {
|
| 1131 |
background: #0048a9;
|
|
| 1151 |
background: $primary-bg-color;
|
|
| 1132 | 1152 |
} |
| 1133 | 1153 |
} |
| 1134 | 1154 |
|
| 1135 | 1155 |
&:focus {
|
| 1136 |
background: #0048a9;
|
|
| 1156 |
background: $primary-bg-color;
|
|
| 1137 | 1157 |
color: white; |
| 1138 | 1158 |
} |
| 1139 | 1159 |
} |
| ... | ... | |
| 1161 | 1181 |
width: 100%; |
| 1162 | 1182 |
text-align: left; |
| 1163 | 1183 |
letter-spacing: .4px; |
| 1164 |
color: #ffffff;
|
|
| 1184 |
color: $primary-text-color;
|
|
| 1165 | 1185 |
|
| 1166 | 1186 |
&:hover {
|
| 1167 | 1187 |
background: #336dba; |
| ... | ... | |
| 1176 | 1196 |
|
| 1177 | 1197 |
#dataset-dropdown-time .dropdown-item:nth-of-type(even) {
|
| 1178 | 1198 |
background: rgba(0,0,0,.05); |
| 1199 |
|
|
| 1200 |
&:active {
|
|
| 1201 |
background: #007bff; |
|
| 1202 |
} |
|
| 1179 | 1203 |
} |
| 1180 | 1204 |
} |
Také k dispozici: Unified diff
Re #8159 - frontend bugfixes and refactoring