Chandler Swift
26c5b56d58
This should make it easier to disambiguate layers that are otherwise hard to tell apart.
146 lines
2.1 KiB
CSS
146 lines
2.1 KiB
CSS
@import 'ol/ol.css';
|
|
@import 'ol-contextmenu/ol-contextmenu.css';
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
transition: 0.25s;
|
|
}
|
|
|
|
.nav-open #map {
|
|
left: min(max(300px, 20%), 400px);
|
|
}
|
|
|
|
aside {
|
|
width: min(max(300px, 20%), 400px);
|
|
margin-left: max(min(-300px, -20%), -400px);
|
|
transition: 0.25s;
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
aside > div {
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
#source {
|
|
order: 1;
|
|
margin: auto;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.nav-open aside {
|
|
margin-left: 0;
|
|
}
|
|
|
|
aside ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
aside ul li {
|
|
list-style: none;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
aside .close {
|
|
display: none;
|
|
}
|
|
|
|
aside details summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
aside summary {
|
|
font-size: 1.3em;
|
|
margin: .5em 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.color-badge {
|
|
display: inline-block;
|
|
height: 1em;
|
|
width: 2em;
|
|
vertical-align: middle;
|
|
border: 1px #444 solid;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.nav-open #map {
|
|
left: 100%;
|
|
}
|
|
|
|
aside {
|
|
margin-left: calc(-100% + 2em);
|
|
width: calc(100% - 2em);
|
|
}
|
|
|
|
aside .close {
|
|
display: initial;
|
|
}
|
|
|
|
.nav-open aside .close {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
}
|
|
}
|
|
|
|
/* POPUP (from https://openlayers.org/en/latest/examples/popup.html) */
|
|
.ol-popup {
|
|
position: absolute;
|
|
background-color: white;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
border: 1px solid #cccccc;
|
|
bottom: 12px;
|
|
left: -50px;
|
|
min-width: 280px;
|
|
}
|
|
.ol-popup:after, .ol-popup:before {
|
|
top: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.ol-popup:after {
|
|
border-top-color: white;
|
|
border-width: 10px;
|
|
left: 48px;
|
|
margin-left: -10px;
|
|
}
|
|
.ol-popup:before {
|
|
border-top-color: #cccccc;
|
|
border-width: 11px;
|
|
left: 48px;
|
|
margin-left: -11px;
|
|
}
|
|
.ol-popup-closer {
|
|
text-decoration: none;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 8px;
|
|
}
|
|
.ol-popup-closer:after {
|
|
content: "✖";
|
|
}
|
|
/* END POPUP */
|