121 lines
No EOL
1.9 KiB
CSS
121 lines
No EOL
1.9 KiB
CSS
html, body {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#sidebar {
|
|
width: 320px;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
|
|
background: rgba(0,0,0, 0.9);
|
|
backdrop-filter: blur(32px);
|
|
color: white;
|
|
|
|
mask-image: linear-gradient(90deg, black 300px, transparent 320px);
|
|
|
|
div {
|
|
width: 300px;
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
#nodes > div {
|
|
cursor: pointer;
|
|
background: #222;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
width: calc(100% - 40px);
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#footnote {
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-align: center;
|
|
color: transparent;
|
|
z-index: 9999;
|
|
width: 300px;
|
|
}
|
|
|
|
#blurThing {
|
|
position: absolute;
|
|
left: 300px;
|
|
width: 20px;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.leaflet-left {
|
|
margin-left: 320px;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
|
background: none;
|
|
color: white;
|
|
}
|
|
|
|
.leaflet-popup-tip {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.leaflet-popup {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.leaflet-control {
|
|
background: none !important;
|
|
color: white;
|
|
|
|
a {
|
|
color: aqua;
|
|
}
|
|
}
|
|
|
|
.leaflet-control-zoom {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
|
|
background: none !important;
|
|
}
|
|
|
|
.leaflet-bar a {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
#sidebar {
|
|
width: 100%;
|
|
height: 220px;
|
|
|
|
mask-image: linear-gradient(180deg, black 200px, transparent 220px);
|
|
|
|
div {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.leaflet-left {
|
|
margin-left: none;
|
|
margin-top: 220px;
|
|
}
|
|
|
|
#footnote {
|
|
display: none;
|
|
}
|
|
} |