150 lines
2.8 KiB
CSS
150 lines
2.8 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');
|
|
|
|
:root{
|
|
--signScale: 1;
|
|
--cullThreshold_state_0: none;
|
|
--cullThreshold_state_1: none;
|
|
--cullThreshold_state_2: none;
|
|
--cullThreshold_state_3: none;
|
|
--cullThreshold_state_4: none;
|
|
--cullThreshold_state_5: none;
|
|
--cullThreshold_state_6: none;
|
|
|
|
--absScale: 1;
|
|
--legendButtonSize: 50px;
|
|
}
|
|
|
|
html *{
|
|
box-sizing: border-box;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
html, body{
|
|
height: 100vh;
|
|
width: 100vw;
|
|
font-family: "Noto Sans";
|
|
font-variation-settings: "wght" 400;
|
|
color: #e9e9e9;
|
|
font-size: 14px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
a{
|
|
color: #85c4f7;
|
|
}
|
|
a:visited{
|
|
color: #559bd4;
|
|
}
|
|
|
|
.orange{
|
|
color: #e79830;
|
|
}
|
|
|
|
.panel{
|
|
border: 2px solid #b3b3b396;
|
|
background: linear-gradient(120deg, #2c3f58, #191e2e);
|
|
text-shadow: 2px 2px 5px #0003;
|
|
margin: 5px;
|
|
padding: 8px 13px;
|
|
border-radius: 5px;
|
|
pointer-events: all;
|
|
}
|
|
|
|
#topleft{
|
|
position:fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
pointer-events: none;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
max-width: min(500px,100vw);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#headerbar{
|
|
background: linear-gradient(120deg, #3d5779, #121522);
|
|
font-size: 2em;
|
|
border-left: 0px;
|
|
font-variation-settings: "wght" 500;
|
|
padding: 10px 30px 10px 30px;
|
|
margin: 10px 0px;
|
|
border-radius: 0px 10px 10px 0px;
|
|
max-width: fit-content;
|
|
}
|
|
|
|
#legendButton{
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 8px;
|
|
height: var(--legendButtonSize);
|
|
width: var(--legendButtonSize);
|
|
>*{
|
|
transition: transform 200ms ease;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
#legend{
|
|
transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-shrink: 1;
|
|
min-height: 0px;
|
|
}
|
|
#legendContents{
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #62778a #1c1e2d;
|
|
pointer-events: all;
|
|
}
|
|
|
|
#settingsPanel{
|
|
user-select: none;
|
|
input, label{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#stats{
|
|
position: fixed;
|
|
width: fit-content;
|
|
right: 10px;
|
|
bottom: 5px;
|
|
font-size: 0.8em;
|
|
text-align: right;
|
|
}
|
|
|
|
#mapNavigator{
|
|
transition: transform 100ms ease-out;
|
|
transform-origin: 0% 0%;
|
|
>*{
|
|
position:absolute;
|
|
pointer-events: none;
|
|
>*{
|
|
pointer-events: visiblePainted;
|
|
}
|
|
}
|
|
}
|
|
|
|
#mapContainer{
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
cursor: grab;
|
|
user-select: none;
|
|
background: linear-gradient(#444, #333);
|
|
}
|
|
|
|
.inlineSvg {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
.poi{
|
|
font-variation-settings: "wght" 700;
|
|
} |