140 lines
No EOL
2.4 KiB
CSS
140 lines
No EOL
2.4 KiB
CSS
html, body {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#map {
|
|
background: black;
|
|
}
|
|
|
|
.code {
|
|
cursor: pointer;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.selectedNode {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
transition: transform .3s ease, height .3s ease;
|
|
|
|
text-align: left;
|
|
background: #222;
|
|
padding: 10px 20px;
|
|
margin: 10px;
|
|
width: calc(100% - 60px);
|
|
height: auto;
|
|
border-radius: 8px;
|
|
z-index: 9998;
|
|
}
|
|
|
|
#sidebar {
|
|
width: 320px;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
|
|
background: rgba(0,0,0, 0.7);
|
|
backdrop-filter: blur(32px);
|
|
color: white;
|
|
|
|
mask-image: linear-gradient(90deg, black 300px, transparent 320px);
|
|
|
|
#sidebarContent {
|
|
text-align: center;
|
|
height: 100%;
|
|
width: 300px;
|
|
|
|
overflow-x: scroll;
|
|
|
|
#nodes {
|
|
width: 100%;
|
|
transition: opacity .3s ease;
|
|
|
|
div {
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background: #222;
|
|
padding: 10px 20px;
|
|
margin: 10px;
|
|
width: calc(100% - 60px);
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#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: 320px;
|
|
|
|
mask-image: linear-gradient(180deg, black 300px, transparent 320px);
|
|
|
|
#sidebarContent {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
|
|
.leaflet-left {
|
|
margin-left: none;
|
|
margin-top: 320px;
|
|
}
|
|
} |