svg {
background-color: darkgray;
}
body {
margin: 0;
}
circle#point {
fill: transparent;
stroke: black;
stroke-width: 2px;
}
use[href="#point"] {
opacity: 0;
}
use[href="#point"].active {
opacity: 1;
}
circle.counter[data-troop-allegiance="liao"] {
fill: green;
}
circle.counter[data-troop-allegiance="davion"] {
fill: red;
}
text.counter {
font-size: 80px;
font-weight: bold;
stroke: black;
fill: white;
stroke-width: 2px;
font-family: sans-serif;
cursor: default;
pointer-events: none;
}
rect#map {
fill: black;
opacity: 0;
}
polygon.firing-arc {
/* opacity: 0.1; */
fill: transparent;
stroke-width: 2px;
stroke: black;
}
button.set-firing-arc img {
vertical-align: middle;
pointer-events: none;
}
line.firing-arc {
stroke: blue;
opacity: 0.1;
}
line.ruler {
stroke-width: 0.25in;
}
.soldier-record span {
font-size: smaller;
font-family: monospace;
margin-right: 1em;
}
.soldier-record ul {
margin: 0;
padding: 0;
}
.soldier-record ul li {
display: inline;
margin-left: 1em;
}
.soldier-record p {
margin: 0;
}
.damage label {
margin: 0;
padding: 0;
}
.damage span {
margin: 0;
padding: 0;
}
.damage > span {
display: inline-block;
text-align: center;
font-family: serif;
vertical-align: middle;
}
.damage-selector {
width: 20px;
height: 30px;
margin: 0;
padding: 0;
border: 1px solid black;
display: inline-block;
}
.damage-selector.clear {
background-color: white;
}
.damage-selector.bruise {
background-color: orange;
}
.damage-selector.lethal {
background-color: red;
}
.damage label input {
position: absolute;
opacity: 0;
margin: 0;
padding: 0;
}
/* .soldier-record p.damage span {
display: inline-block;
}
.soldier-record p.damage span input {
display: block;
} */
/* input {
border: none;
outline: 2px solid deeppink;
}
input + label {
border: 1px solid red;
display: none;
}
input:first-of-type {
outline: none;
}
label:first-of-type {
border: none;
display: inline;
}
input:checked {
border: none;
outline: 2px solid deeppink;
}
input:checked + label {
border: 1px solid red;
display: none;
}
input:has(+ label + input:checked) {
border: none;
outline: 2px solid deeppink;
}
label:has(+ input:checked) {
border: 1px solid red;
display: none;
}
input[type="radio"]:checked + label + input {
outline: none;
}
input:checked + label + input + label {
border: none;
display: inline;
}
*/
label {
display: none;
}
label:first-of-type {
display: block;
}
label:has(input:checked) {
display: none;
}
label:has(+ label input:checked) {
display: none;
}
label:has(input:checked) + label {
display: block;
}
image#img1 {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */
}
image#img2 {
transform: scale(1.39, 1.407) rotate(0.07deg);
/* opacity: 0.33; */
}
.wall {
fill: none;
stroke: red;
stroke-width: 7px;
opacity: 0.7;
}
#hex {
opacity: 0.2;
/* stroke: black;
stroke-opacity: 0.2; */
transform: scale(0.26) translate(-2in, -2in);
}
#asterisk {
font-size: 30;
}
#record-sheet {
display: flex;
justify-content: space-around;
}
#record-sheet > div {
flex-basis: 100%;
padding: 0 2px;
}
#record-sheet > div > div {
border: 1px solid black;
margin: 2px 0;
padding: 2px;
}
img.logo {
width: 100px;
margin: 0 auto;
display: block;
}
div.soldier-record.selected {
background-color: goldenrod;
}