91 lines
1.7 KiB
CSS
91 lines
1.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Protest+Strike&display=swap');
|
|
|
|
html, body, #map, #mapContainer, h1, h2, h3, h4, h5{
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
html, body{
|
|
height: 100vh;
|
|
width: 100vw;
|
|
font-family: "Noto Sans";
|
|
font-variation-settings: "wght" 400;
|
|
color: #e9e9e9;
|
|
}
|
|
|
|
a{
|
|
color: #85c4f7;
|
|
}
|
|
a:visited{
|
|
color: #559bd4;
|
|
}
|
|
|
|
.orange{
|
|
color: #e79830;
|
|
}
|
|
|
|
#topleft{
|
|
position:fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.panel{
|
|
width: fit-content;
|
|
border: 2px solid #b3b3b396;
|
|
background: linear-gradient(120deg, #2c3f58, #191e2e);
|
|
text-shadow: 2px 2px 5px #0003;
|
|
margin: 5px;
|
|
padding: 8px 13px;
|
|
border-radius: 10px;
|
|
pointer-events: all;
|
|
}
|
|
|
|
#headerbar{
|
|
background: linear-gradient(120deg, #3d5779, #121522);
|
|
font-size: 30px;
|
|
border-left: 0px;
|
|
font-variation-settings: "wght" 500;
|
|
padding: 10px 30px 10px 30px;
|
|
margin: 10px 0px;
|
|
border-radius: 0px 10px 10px 0px;
|
|
}
|
|
|
|
#legendButton{
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
#legend{
|
|
transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
|
}
|
|
#legendButton>*{
|
|
transition: transform 200ms ease;
|
|
}
|
|
|
|
#footer{
|
|
position: fixed;
|
|
width: fit-content;
|
|
right: 10px;
|
|
bottom: 5px;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
}
|
|
|
|
#map{
|
|
transition: transform 100ms ease-out;
|
|
transform-origin: 0% 0%;
|
|
position: relative;
|
|
}
|
|
|
|
#mapContainer{
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
cursor: grab;
|
|
user-select: none;
|
|
background: linear-gradient(#444, #333);
|
|
} |