155 lines
2.8 KiB
CSS
155 lines
2.8 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
/* Adapted from W3Schools example: https://leafletjs.com/examples/choropleth retrieved in May 2020. */
|
|
#spinner {
|
|
border: 3px solid #212529e0;
|
|
border-top: 3px solid #212529e0;
|
|
border-right: 3px solid #f8f9facb;
|
|
border-bottom: 3px solid #f8f9facb;
|
|
border-left: 3px solid #f8f9facb;
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
height: 32px;
|
|
-webkit-animation: spin 0.6s infinite linear;
|
|
-moz-animation: spin 0.6s infinite linear;
|
|
-o-animation: spin 0.6s infinite linear;
|
|
animation: spin 0.6s linear infinite;
|
|
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 45%;
|
|
z-index:99999999;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
#map {
|
|
float: left;
|
|
width: 66vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
#map {
|
|
background: #aad3df;
|
|
}
|
|
|
|
#main-content {
|
|
position: absolute;
|
|
left: 66vw;
|
|
width: 34vw;
|
|
height: 100%;
|
|
overflow: auto;
|
|
font-size: .85em;
|
|
}
|
|
|
|
/* Override bootstrap with datatables */
|
|
input[type="search" i] {
|
|
-webkit-appearance: searchfield;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#table {
|
|
margin: 0.5em 6px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.leaflet-bar-timecontrol .leaflet-control-timecontrol {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.leaflet-bar-timecontrol {
|
|
background: rgba(255, 255, 255, 0.875) !important;
|
|
}
|
|
|
|
.leaflet-bar-timecontrol:hover {
|
|
background: #fff !important;
|
|
}
|
|
|
|
.leaflet-bar-timecontrol .timecontrol-speed .speed {
|
|
width: 62.5px !important;
|
|
}
|
|
|
|
.choropleth-legend {
|
|
padding: 4px 6px 0px;
|
|
height: 34px !important;
|
|
margin-bottom: 18px !important;
|
|
background: rgba(255,255,255,0.8);
|
|
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.choropleth-legend:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
.choropleth-legend ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
clear: both;
|
|
position: relative;
|
|
top: -7px;
|
|
|
|
}
|
|
.choropleth-legend li {
|
|
display: inline-block;
|
|
width: 2vw;
|
|
height: 7px;
|
|
}
|
|
|
|
.choropleth-legend .min {
|
|
float: left;
|
|
}
|
|
|
|
.choropleth-legend .max {
|
|
float: right;
|
|
}
|
|
|
|
input[type='search'] {
|
|
min-width: 130px;
|
|
width: 13vw;
|
|
max-width: 160px;
|
|
}
|
|
|
|
table.dataTable thead .sorting {
|
|
background-image: url(../src/sort-solid.svg) !important;
|
|
background-size: 9px;
|
|
}
|
|
|
|
table.dataTable thead .sorting_asc {
|
|
background-image: url(../src/sort-up-solid.svg) !important;
|
|
background-size: 9px;
|
|
}
|
|
|
|
table.dataTable thead .sorting_desc {
|
|
background-image: url(../src/sort-down-solid.svg) !important;
|
|
background-size: 9px;
|
|
}
|
|
|
|
@media only screen and (max-width: 992px) {
|
|
html, body, #map {
|
|
width: 100vw;
|
|
height: 59vh;
|
|
}
|
|
|
|
#main-content {
|
|
left: 0;
|
|
top: 59vh;
|
|
width: 100vw;
|
|
height: 41vh;
|
|
}
|
|
|
|
.leaflet-container .leaflet-control-attribution {
|
|
font-size: 1.7vw !important;
|
|
}
|
|
}
|