120 lines
2.3 KiB
CSS
120 lines
2.3 KiB
CSS
/* The same parchment surrounds the editor preview and interactive player map. */
|
|
.detail-map,
|
|
.map-surface {
|
|
border: 22px solid transparent;
|
|
border-image: url("/images/map-parchment.svg") 12 fill / 22px / 0 stretch;
|
|
background: #ddc79f;
|
|
box-shadow: 4px 6px 0 #0005;
|
|
}
|
|
.detail-map {
|
|
margin-top: 12px;
|
|
}
|
|
.detail-map img,
|
|
.map-surface .leaflet-image-layer {
|
|
image-rendering: pixelated;
|
|
}
|
|
.map-surface {
|
|
border-width: 14px;
|
|
border-image-width: 14px;
|
|
height: 290px;
|
|
}
|
|
.map-surface .leaflet-container {
|
|
background: #ddc79f;
|
|
outline: 1px solid #9d815c;
|
|
}
|
|
.map-surface .leaflet-bar {
|
|
border: 2px solid #806543;
|
|
border-radius: 0;
|
|
box-shadow: 2px 2px 0 #0004;
|
|
}
|
|
.map-surface .leaflet-bar a {
|
|
background: #e5c99a;
|
|
color: #493a28;
|
|
border-color: #b39970;
|
|
border-radius: 0;
|
|
}
|
|
.map-surface .leaflet-bar a:hover,
|
|
.map-surface .leaflet-bar a:focus-visible {
|
|
background: #f3ddb1;
|
|
}
|
|
.map-surface .leaflet-bar a.leaflet-disabled {
|
|
background: #c9b18a;
|
|
color: #847256;
|
|
}
|
|
.pin-marker {
|
|
background: #e45e66;
|
|
border-color: #fff1d0;
|
|
border-radius: 50%;
|
|
transform: none;
|
|
box-shadow:
|
|
0 0 0 1px #763d36,
|
|
1px 2px 0 #0005;
|
|
}
|
|
.actual-marker {
|
|
background: #90c55b;
|
|
box-shadow:
|
|
0 0 0 1px #426132,
|
|
1px 2px 0 #0005;
|
|
}
|
|
.game-map {
|
|
width: 340px;
|
|
border: 2px solid #806543;
|
|
background: #241e18;
|
|
}
|
|
.game-map.expanded {
|
|
width: min(650px, calc(100vw - 48px));
|
|
}
|
|
.map-topline,
|
|
.map-topline button,
|
|
.map-actions small {
|
|
color: #e5c99a;
|
|
}
|
|
.map-topline {
|
|
padding: 9px 12px;
|
|
}
|
|
.map-actions {
|
|
padding: 12px;
|
|
}
|
|
.map-actions .button.primary {
|
|
background: #715034;
|
|
color: #fff1d0;
|
|
border-color: #af8956;
|
|
box-shadow:
|
|
inset 3px 3px 0 #a67c4e,
|
|
inset -3px -3px 0 #49331f,
|
|
2px 2px 0 #0005;
|
|
}
|
|
.map-actions .button.primary:hover:not(:disabled) {
|
|
background: #87613e;
|
|
}
|
|
.expanded .map-surface {
|
|
height: min(540px, 58vh);
|
|
border-width: 22px;
|
|
border-image-width: 22px;
|
|
}
|
|
.result-map {
|
|
border: 0;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.detail-map {
|
|
border-width: 16px;
|
|
border-image-width: 16px;
|
|
}
|
|
.game-map {
|
|
width: 250px;
|
|
}
|
|
.game-map .map-surface {
|
|
height: 210px;
|
|
border-width: 12px;
|
|
border-image-width: 12px;
|
|
}
|
|
.game-map.expanded {
|
|
width: calc(100vw - 28px);
|
|
}
|
|
.game-map.expanded .map-surface {
|
|
height: min(440px, 50vh);
|
|
border-width: 16px;
|
|
border-image-width: 16px;
|
|
}
|
|
}
|