body {
margin: 0;
display: flex;
overflow: hidden;
}
#map-container {
flex-basis: 100%;
position: relative;
max-height: 100vh;
}
svg {
background-color: darkgray;
width: 100%;
height: 100%;
}
svg image {
image-rendering: pixelated;
}
svg image.map-scans {
image-rendering: auto;
}
svg text {
user-select: none;
}
div#status {
position: absolute;
bottom: 0;
right: 0;
margin: 3px;
display: none;
user-select: none;
}
#hex-counter {
padding: 2px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
#hex-count {
font-family: monospace;
}
div#content {
display: flex;
/* display: none; */
border-left: 1px solid gray;
flex-basis: 0;
/* overflow: scroll; */
max-height: 100vh;
flex-direction: column;
/* padding: 2px; */
position: relative;
}
#content > div:first-of-type {
padding: 2px;
border-bottom: 1px solid gray;
}
#content #buttons {
line-height: 1.5em;
}
#content > div {
display: none;
}
#content input[type="checkbox"].visible {
position: absolute;
right: 0;
}
#content:has(input[type="checkbox"].visible:checked) > div {
display: block;
}
#content:has(input[type="checkbox"].visible:checked) div#record-sheet {
display: flex;
}
#record-sheet {
/* max-height: 100%; */
overflow-y: auto;
display: flex;
flex-direction: column;
/* display: none; */
background-color: gray;
}
#record-sheet > div {
/* padding: 0 2px; */
overflow-y: auto;
/* border: 1px solid black; */
}
#record-sheet > div > p {
margin: 0;
margin-top: 0px;
margin-bottom: 1px;
padding: 6px 2px;
background-color: lightgray;
}
#record-sheet > div > div {
/* border: 1px solid black; */
margin-bottom: 1px;
padding: 6px 4px;
/* border-radius: 4px; */
}
#record-sheet > div:last-of-type {
margin-top: 2px;
}
#record-sheet > div > div:last-of-type {
margin-bottom: 0;
}
svg > defs > #point {
fill: inherit;
fill-opacity: inherit;
stroke: inherit;
stroke-width: inherit;
stroke-opacity: inherit;
}
use[href="#point"] {
opacity: 0;
fill: teal;
fill-opacity: 0.2;
stroke: black;
stroke-width: 0.5px;
}
use[href="#point"]:hover, use[href="#point"].hover {
opacity: 1;
fill: orange;
}
use[href="#point"].active {
opacity: 0.2;
}
polyline.move-trace {
stroke: gray;
stroke-dasharray: 2;
fill: none;
}
g#grid {
transform: translate(19px, 31px) scale(4);
}
#background {
fill: #bacae3;
}
#map2 {
transform-origin: 0px 0px;
transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
}
#map3 {
transform-origin: 0px 0px;
/* transform: translateY(1518px); */
transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
}
#panel {
display: none;
position: absolute;
right: 0;
background-color: white;
border: 1px solid black;
padding: 2px;
}
#panel fieldset label {
display: block;
text-align: right;
}
#toggle-firing-arc-vis {
position: absolute;
right: 0;
padding-top: 20px;
}
#toggle-firing-arc-vis div {
margin-top: 10px;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
#counter-base {
r: inherit;
}
g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
g.troop-counter, g.troop-counter use {
r: inherit;
}
g.troop-counter-template text {
fill: white;
font-size: 12px;
font-weight: bold;
font-family: monospace;
cursor: default;
text-anchor: middle;
pointer-events: none;
user-select: none;
transform: translateY(4px);
stroke: none;
}
g.troop-counter [href="#counter-prone"] {
transform: translate(-5px, 6px);
}
g#points g use.counter {
r: 5px;
}
g#points g use.counter.selected {
stroke: orange;
stroke-width: 2px;
r: 6px;
}
g#points g.hover use[href="#point"] {
opacity: 1;
fill: orange;
}
g#points g.hover use.counter {
r: 7px;
}
g#points g.hover use.counter:not(.clone) {
/* stroke: orange; */
/* stroke-width: 2px; */
}
g#points use.counter[data-troop-allegiance="davion"] {
fill: red;
}
g#points use.counter[data-troop-allegiance="liao"] {
fill: green;
}
g#points use.clone {
stroke: white;
stroke-width: 0.5px;
stroke-dasharray: 1;
}
g#points use[data-troop-allegiance="davion"].clone {
fill: rgb(255, 126, 126);
}
g#points use[data-troop-allegiance="liao"].clone {
fill: rgb(130, 190, 130);
}
/* ======================================================= */
/* g#counters {
pointer-events: none;
} */
/* g#counters use {
r: 5px;
}
g#counters use:hover {
stroke: orange;
stroke-width: 2px;
r: 8px;
} */
/* g#counters use[data-troop-allegiance="davion"] {
fill: red;
}
g#counters use[data-troop-allegiance="liao"] {
fill: green;
} */
/* g#counters use.clone {
stroke: white;
stroke-width: 0.5px;
stroke-dasharray: 1;
}
g#counters use[data-troop-allegiance="davion"].clone {
fill: rgb(255, 126, 126);
}
g#counters use[data-troop-allegiance="liao"].clone {
fill: rgb(130, 190, 130);
} */
text.counter, #troop-counter text {
font-size: 12px;
font-weight: bold;
/* stroke: black; */
fill: white;
/* stroke-width: 0.5px; */
font-family: sans-serif;
cursor: default;
text-anchor: middle;
/* transform: translateY(25%); */
transform: translateY(4px);
pointer-events: none;
user-select: none;
}
polygon.firing-arc[data-troop-allegiance="davion"] {
fill: red;
}
polygon.firing-arc[data-troop-allegiance="liao"] {
fill: green;
}
#shapes {
opacity: 0.1;
}
#shapes polygon {
stroke: none;
}
#lines polygon {
fill: none;
stroke: black;
}
button.set-firing-arc img {
vertical-align: middle;
pointer-events: none;
}
.sight-line {
stroke: orangered;
stroke-width: 0.5px;
pointer-events: none;
}
.soldier-record {
display: inline-block;
position: relative;
white-space: nowrap;
background-color: white;
}
.soldier-record.selected {
background-color: khaki;
}
.soldier-record.movement-ended {
background-color: none;
opacity: 0.5;
}
.wall {
fill: none;
stroke: red;
stroke-width: 7px;
opacity: 0.7;
}
#asterisk {
font-size: 30;
}
img.logo {
width: 100px;
margin: 0 auto;
display: block;
}
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;
/* gap: 2px; */
}
#record-sheet > div > p {
margin-top: 0;
}
#record-sheet > div {
/* max-height: unset; */
overflow-y: unset;
height: min-content;
}
#record-sheet div:last-of-type {
margin-top: 0;
}
#record-sheet > div:first-of-type > div {
/* margin-left: 1px; */
margin-right: 1px;
}
#record-sheet > div:last-of-type > div {
margin-left: 1px;
/* margin-right: 1px; */
}
}