Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 6b7c4d1c

Přidáno uživatelem Martin Sebela před více než 3 roky(ů)

Re #8163 - CSS, JS refactoring

Zobrazit rozdíly:

website/public/css/style.css
153 153
  background: #0048A9 !important;
154 154
}
155 155

  
156
@media (max-width: 991.98px) {
157
  header.map .navbar-nav {
158
    width: 100%;
159
  }
160
}
161

  
162
header.map form {
163
  display: flex;
164
  margin: auto;
165
}
166

  
167
header.map label {
168
  margin: 0 0 0 15px;
169
  font-size: 16px;
170
  letter-spacing: .4px;
171
}
172

  
173
header.map input, header.map .custom-select {
174
  letter-spacing: .4px;
175
  color: #ffffff;
176
  border-color: #0048A9;
177
  background: #0048A9;
178
}
179

  
180
header.map input::placeholder, header.map .custom-select::placeholder {
181
  color: #ffffff;
182
  opacity: 1;
183
}
184

  
185
header.map .nav-item {
186
  margin: 0;
187
  border-right: 1px solid #1C6CC0;
188
}
189

  
190
@media (max-width: 991.98px) {
191
  header.map .nav-item {
192
    margin-bottom: 20px;
193
    border: 0;
194
  }
195
}
196

  
197
header.map .nav-item:nth-of-type(3) .dropdown {
198
  height: calc(100% + 10px) !important;
199
  margin: -5px;
200
  margin-top: -7px;
201
}
202

  
203
header.map .nav-item:nth-of-type(3) .dropdown .dropdown-menu {
204
  top: calc(100% - 4px);
205
}
206

  
207
header.map .nav-item:nth-of-type(3) .dropdown button {
208
  padding-left: 20px;
209
  border-radius: 0;
210
}
211

  
212
@media (max-width: 991.98px) {
213
  header.map .nav-item:nth-of-type(3) .dropdown {
214
    height: 100% !important;
215
    margin: 0px;
216
    flex-direction: column;
217
  }
218
  header.map .nav-item:nth-of-type(3) .dropdown button {
219
    padding-left: 12px;
220
    border-radius: 5px;
221
  }
222
}
223

  
224
@media (max-width: 991.98px) {
225
  header.map .nav-item:nth-of-type(4) {
226
    border-radius: 5px;
227
  }
228
}
229

  
230
header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
231
  width: 300px;
232
}
233

  
234
@media (max-width: 1500px) {
235
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
236
    width: 280px;
237
  }
238
}
239

  
240
@media (max-width: 1400px) {
241
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
242
    width: 230px;
243
  }
244
}
245

  
246
@media (max-width: 1400px) {
247
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
248
    max-width: 230px;
249
    width: auto;
250
  }
251
}
252

  
253
@media (max-width: 991.98px) {
254
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
255
    max-width: none;
256
  }
257
}
258

  
259 156
h1 {
260 157
  text-transform: uppercase;
261 158
  font-size: 21px;
......
681 578
  right: 20.8%;
682 579
}
683 580

  
581
.slide-background {
582
  width: 650px;
583
  height: 290px;
584
  z-index: 1;
585
  position: absolute;
586
  bottom: 0;
587
  left: 0;
588
  background: url("../img/footer-bg.svg") no-repeat;
589
}
590

  
591
@media (max-width: 991.98px) {
592
  .slide-background {
593
    width: 320px;
594
    height: 143px;
595
    background-size: 100%;
596
  }
597
}
598

  
599
div.copyright p {
600
  font-weight: 400;
601
}
602

  
603
div.copyright span {
604
  font-size: 17px;
605
}
606

  
607
p.logos-partners {
608
  margin-top: 40px;
609
  text-align: right;
610
}
611

  
612
p.logos-partners a {
613
  text-decoration: none;
614
}
615

  
616
p.logos-partners a img {
617
  margin-left: 50px;
618
  height: 80px;
619
}
620

  
621
@media only screen and (max-width: 430px) {
622
  p.logos-partners a img {
623
    height: 70px;
624
    margin-left: 0;
625
  }
626
}
627

  
628
@media only screen and (max-width: 340px) {
629
  p.logos-partners a img {
630
    height: 60px;
631
  }
632
}
633

  
634
p.logos-partners a:first-of-type img {
635
  margin-left: 0;
636
}
637

  
684 638
#heatmap {
685 639
  height: 100%;
686 640
}
687 641

  
642
@media (max-width: 991.98px) {
643
  header.map .navbar-nav {
644
    width: 100%;
645
  }
646
}
647

  
648
header.map form {
649
  display: flex;
650
  margin: auto;
651
}
652

  
653
header.map label {
654
  margin: 0 0 0 15px;
655
  font-size: 16px;
656
  letter-spacing: .4px;
657
}
658

  
659
header.map input {
660
  letter-spacing: .4px;
661
  color: #ffffff;
662
  border-color: #0048A9;
663
  background: #0048A9;
664
}
665

  
666
header.map input::placeholder {
667
  color: #ffffff;
668
  opacity: 1;
669
}
670

  
671
header.map .nav-item {
672
  padding: 5px;
673
  margin: auto 0;
674
  border-right: 1px solid #1C6CC0;
675
}
676

  
677
@media (max-width: 991.98px) {
678
  header.map .nav-item {
679
    margin-bottom: 10px;
680
    border: 0;
681
  }
682
}
683

  
684
header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
685
  width: 300px;
686
}
687

  
688
@media (max-width: 1500px) {
689
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
690
    width: 280px;
691
  }
692
}
693

  
694
@media (max-width: 1400px) {
695
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
696
    width: 230px;
697
  }
698
}
699

  
700
@media (max-width: 1400px) {
701
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
702
    max-width: 230px;
703
    width: auto;
704
  }
705
}
706

  
707
@media (max-width: 991.98px) {
708
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
709
    max-width: none;
710
  }
711
}
712

  
713
header.map .nav-item:nth-child(3) {
714
  padding: 0;
715
  margin: 0;
716
  border: 0;
717
}
718

  
719
@media (max-width: 991.98px) {
720
  header.map .nav-item:nth-child(3) {
721
    padding: 5px;
722
  }
723
}
724

  
725
header.map .nav-item:nth-child(3) .dropdown {
726
  display: flex;
727
  height: 100%;
728
}
729

  
730
@media (max-width: 991.98px) {
731
  header.map .nav-item:nth-child(3) .dropdown {
732
    flex-direction: column;
733
  }
734
}
735

  
736
header.map .nav-item:nth-child(3) .dropdown .dropdown-menu {
737
  top: calc(100% - 5px);
738
}
739

  
740
header.map .nav-item:nth-child(3) .dropdown button {
741
  padding-left: 20px;
742
  border-radius: 0;
743
}
744

  
745
@media (max-width: 991.98px) {
746
  header.map .nav-item:nth-child(3) .dropdown button {
747
    padding-left: 12px;
748
    border-radius: 5px;
749
  }
750
}
751

  
752
header.map .nav-item:last-child {
753
  margin-top: 0;
754
  margin-bottom: 0;
755
  border-left: 1px solid #1C6CC0;
756
  background: #0057be;
757
}
758

  
759
@media (max-width: 991.98px) {
760
  header.map .nav-item:last-child {
761
    margin: 10px 5px 0 5px;
762
    border-radius: 5px;
763
    border: 0;
764
  }
765
}
766

  
767
header.map .nav-item:last-child:hover {
768
  background: #004fb3;
769
}
770

  
771
header.map .nav-item:last-child .btn-secondary {
772
  display: inline-block;
773
  outline: none;
774
  padding: 0 30px;
775
  background: url("../img/btn-refresh.svg") no-repeat center center;
776
}
777

  
778
header.map .nav-item:last-child .btn-secondary:hover {
779
  background: url("../img/btn-refresh.svg") no-repeat center center !important;
780
}
781

  
782
@media (max-width: 991.98px) {
783
  header.map .nav-item:last-child .btn-secondary {
784
    width: 100%;
785
    padding: 20px;
786
    border-radius: 5px;
787
  }
788
}
789

  
790
header.map .nav-item input:hover {
791
  background: rgba(255, 255, 255, 0.2);
792
}
793

  
794
header.map .nav-item input:focus {
795
  background: #ffffff;
796
  color: #000;
797
}
798

  
799
header.map .nav-item .dropdown {
800
  min-width: 200px;
801
}
802

  
803
header.map .nav-item .dropdown .btn {
804
  width: 100%;
805
  text-align: left;
806
  letter-spacing: .4px;
807
  color: #ffffff;
808
  background: #0048A9;
809
}
810

  
811
header.map .nav-item .dropdown .btn:hover {
812
  background: #336dba;
813
}
814

  
815
header.map .nav-item .dropdown .dropdown-menu {
816
  width: 100%;
817
  max-height: 300px;
818
  overflow-y: auto;
819
  z-index: 1001;
820
}
821

  
822
header.map .nav-item .dropdown .dropdown-menu .dropdown-item:active {
823
  background: #0048A9;
824
}
825

  
826
header.map .nav-item .dropdown .dropdown-menu .dropdown-item label {
827
  width: 100% !important;
828
  margin-left: 0;
829
  cursor: pointer;
830
}
831

  
832
header.map .nav-item .dropdown #dropdown-time .dropdown-item:nth-of-type(even) {
833
  background: rgba(0, 0, 0, 0.05);
834
}
835

  
836
header.map .nav-item .dropdown #dropdown-time .dropdown-item:nth-of-type(even):active {
837
  background: #0048A9;
838
}
839

  
840
header.map .nav-item .dropdown input[type="radio"]:checked ~ label {
841
  font-weight: 800;
842
}
843

  
688 844
.map-locations {
689 845
  position: absolute;
690 846
  top: 95px;
......
814 970
  cursor: pointer;
815 971
}
816 972

  
973
@media (max-width: 320px) {
974
  .player .next-btn, .player .prev-btn, .player .animate-btn, .player .lock-btn {
975
    margin-right: 15px;
976
  }
977
}
978

  
817 979
.player .next-btn:hover, .player .prev-btn:hover, .player .animate-btn:hover, .player .lock-btn:hover {
818 980
  opacity: 1;
819 981
}
......
1048 1210
  background: #0b155a;
1049 1211
}
1050 1212

  
1051
.player .time .custom-spinner-border {
1052
  margin: 3px 0 4px 0;
1053
}
1054

  
1055 1213
@media (min-width: 992px) {
1056 1214
  .player .time {
1057 1215
    position: absolute;
......
1130 1288
  }
1131 1289
}
1132 1290

  
1133
.slide-background {
1134
  width: 650px;
1135
  height: 290px;
1136
  z-index: 1;
1137
  position: absolute;
1138
  bottom: 0;
1139
  left: 0;
1140
  background: url("../img/footer-bg.svg") no-repeat;
1141
}
1142

  
1143
@media (max-width: 991.98px) {
1144
  .slide-background {
1145
    width: 320px;
1146
    height: 143px;
1147
    background-size: 100%;
1148
  }
1149
}
1150

  
1151
div.copyright p {
1152
  font-weight: 400;
1153
}
1154

  
1155
div.copyright span {
1156
  font-size: 17px;
1157
}
1158

  
1159
p.logos-partners {
1160
  margin-top: 40px;
1161
  text-align: right;
1162
}
1163

  
1164
p.logos-partners a {
1165
  text-decoration: none;
1166
}
1167

  
1168
p.logos-partners a img {
1169
  margin-left: 50px;
1170
  height: 80px;
1171
}
1172

  
1173
@media only screen and (max-width: 430px) {
1174
  p.logos-partners a img {
1175
    height: 70px;
1176
    margin-left: 0;
1177
  }
1178
}
1179

  
1180
@media only screen and (max-width: 340px) {
1181
  p.logos-partners a img {
1182
    height: 60px;
1183
  }
1184
}
1185

  
1186
p.logos-partners a:first-of-type img {
1187
  margin-left: 0;
1291
.player .time .custom-spinner-border {
1292
  margin: 3px 0 4px 0;
1188 1293
}
1189 1294

  
1190 1295
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
......
1193 1298
  color: #ffffff;
1194 1299
}
1195 1300

  
1196
.leaflet-popup-content-wrapper .leaflet-popup-content strong {
1301
.leaflet-popup-content-wrapper strong, .leaflet-popup-tip strong {
1197 1302
  display: inline-block;
1198 1303
  margin-bottom: 8px;
1199 1304
}
1200 1305

  
1201
.leaflet-popup-content-wrapper .popup-controls {
1202
  display: flex;
1203
  margin: 1em 0 1em 0;
1204
}
1205

  
1206
.leaflet-popup-content-wrapper .popup-controls .circle-button {
1207
  height: 32px;
1208
  width: 32px;
1209
  border: 0;
1210
  border-radius: 24px;
1211
  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1212
  transition: background 0.3s ease-out;
1213
  outline: none !important;
1214
}
1215

  
1216
.leaflet-popup-content-wrapper .popup-controls .circle-button:hover {
1217
  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1218
}
1219

  
1220
.leaflet-popup-content-wrapper .popup-controls .circle-button.next {
1221
  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1222
}
1223

  
1224
.leaflet-popup-content-wrapper .popup-controls .circle-button.next:hover {
1225
  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1226
}
1227

  
1228
.leaflet-popup-content-wrapper #place-intesity {
1306
.leaflet-popup-content-wrapper #place-intesity, .leaflet-popup-tip #place-intesity {
1229 1307
  display: flex;
1230 1308
  align-items: center;
1231 1309
  justify-content: center;
......
1234 1312
  font-weight: 700;
1235 1313
}
1236 1314

  
1237
.leaflet-popup-content-wrapper #part-info {
1315
.leaflet-popup-content-wrapper #place-intesity #sum-number, .leaflet-popup-tip #place-intesity #sum-number {
1238 1316
  margin-left: 5px;
1239 1317
  font-size: 11pt;
1240 1318
}
1241 1319

  
1242
.leaflet-popup-content-wrapper #pages {
1243
  margin: auto;
1244
  color: #ffffff;
1245
}
1246

  
1247
header.map .nav-item {
1248
  padding: 5px;
1249
  margin-top: auto;
1250
  margin-bottom: auto;
1251
}
1252

  
1253
header.map .nav-item:nth-child(3) {
1254
  margin-top: 0;
1255
  margin-bottom: 0;
1256
  border: 0;
1257
}
1258

  
1259
header.map .nav-item:nth-child(3) .dropdown {
1320
.leaflet-popup-content-wrapper .popup-pagination, .leaflet-popup-tip .popup-pagination {
1260 1321
  display: flex;
1261
  height: 100%;
1262
}
1263

  
1264
header.map .nav-item:last-child {
1265
  margin-top: 0;
1266
  margin-bottom: 0;
1267
  border-left: 1px solid #1C6CC0;
1268
  background: #0057be;
1269
}
1270

  
1271
@media (max-width: 991.98px) {
1272
  header.map .nav-item:last-child {
1273
    margin: 10px 5px 0 5px;
1274
    border: 0;
1275
  }
1276
}
1277

  
1278
header.map .nav-item:last-child:hover {
1279
  background: #004fb3;
1280
}
1281

  
1282
header.map .nav-item .btn-secondary {
1283
  display: inline-block;
1284
  outline: none;
1285
  padding: 0 30px;
1286
  background: url("../img/btn-refresh.svg") no-repeat center center;
1287
}
1288

  
1289
header.map .nav-item .btn-secondary:hover {
1290
  background: url("../img/btn-refresh.svg") no-repeat center center !important;
1291
}
1292

  
1293
@media (max-width: 991.98px) {
1294
  header.map .nav-item .btn-secondary {
1295
    width: 100%;
1296
    padding: 20px;
1297
    border-radius: 5px;
1298
  }
1299
}
1300

  
1301
header.map .nav-item input:hover {
1302
  background: rgba(255, 255, 255, 0.2);
1303
}
1304

  
1305
header.map .nav-item input:focus {
1306
  background: #ffffff;
1307
  color: #000;
1308
}
1309

  
1310
.dropdown {
1311
  min-width: 200px;
1312
}
1313

  
1314
.dropdown input[type="radio"]:checked ~ label {
1315
  font-weight: 800;
1316
}
1317

  
1318
.dropdown .btn {
1319
  width: 100%;
1320
  text-align: left;
1321
  letter-spacing: .4px;
1322
  color: #ffffff;
1323
  background: #0048A9;
1324
}
1325

  
1326
.dropdown .btn:hover {
1327
  background: #336dba;
1322
  margin: 1em 0 1em 0;
1328 1323
}
1329 1324

  
1330
.dropdown .dropdown-menu {
1331
  width: 100%;
1332
  max-height: 300px;
1333
  overflow-y: auto;
1334
  z-index: 1001;
1325
.leaflet-popup-content-wrapper .popup-pagination button, .leaflet-popup-tip .popup-pagination button {
1326
  height: 32px;
1327
  width: 32px;
1328
  border: 0;
1329
  border-radius: 24px;
1330
  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1331
  transition: background 0.3s ease-out;
1332
  outline: none !important;
1335 1333
}
1336 1334

  
1337
.dropdown .dropdown-item:active {
1338
  background: #0048A9;
1335
.leaflet-popup-content-wrapper .popup-pagination button:hover, .leaflet-popup-tip .popup-pagination button:hover {
1336
  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1339 1337
}
1340 1338

  
1341
.dropdown .dropdown-item label {
1342
  width: 100% !important;
1343
  margin-left: 0;
1344
  cursor: pointer;
1339
.leaflet-popup-content-wrapper .popup-pagination button.next, .leaflet-popup-tip .popup-pagination button.next {
1340
  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1345 1341
}
1346 1342

  
1347
.dropdown #dropdown-time .dropdown-item:nth-of-type(even) {
1348
  background: rgba(0, 0, 0, 0.05);
1343
.leaflet-popup-content-wrapper .popup-pagination button.next:hover, .leaflet-popup-tip .popup-pagination button.next:hover {
1344
  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1349 1345
}
1350 1346

  
1351
.dropdown #dropdown-time .dropdown-item:nth-of-type(even):active {
1352
  background: #0048A9;
1347
.leaflet-popup-content-wrapper .popup-pagination p, .leaflet-popup-tip .popup-pagination p {
1348
  margin: auto;
1353 1349
}

Také k dispozici: Unified diff