body {
margin: 0;
display: flex;
overflow: hidden;
}
#map-container {
flex-basis: 100%;
position: relative;
height: 100vh;
}
svg, object {
background-color: darkgray;
width: 100%;
height: 100%;
overflow: hidden;
}
object {
opacity: 0;
transition: opacity 0.25s;
}
svg image {
image-rendering: pixelated;
}
svg image.map-scans {
image-rendering: auto;
}
svg text {
user-select: none;
}
#hex-counter {
padding: 2px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 2px;
font-family: sans-serif;
}
#hex-count {
font-family: monospace;
font-size: larger;
}
polyline.move-trace {
stroke: gray;
stroke-dasharray: 2;
fill: none;
}
g#grid {
transform: translate(19px, 31px) scale(4);
}
#panel {
display: none;
position: absolute;
right: 0;
background-color: white;
border: 1px solid black;
padding: 2px;
}
#panel fieldset label {
display: block;
text-align: right;
}
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);
}
text.counter, #troop-counter text {
font-size: 12px;
font-weight: bold;
fill: white;
font-family: sans-serif;
cursor: default;
text-anchor: middle;
transform: translateY(4px);
pointer-events: none;
user-select: none;
}
#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: block;
position: relative;
white-space: nowrap;
background-color: white;
}
.soldier-record span[slot] {
margin-right: .4em;
}
polygon.firing-arc[data-allegiance="defender"] {
fill: red;
}
polygon.firing-arc[data-allegiance="attacker"] {
fill: blue;
}
.weapon-symbol polyline {
fill: none;
}
.soldier-record[data-allegiance="defender"] svg, #record-sheet [data-allegiance="defender"] svg {
fill: red;
}
.soldier-record[data-allegiance="attacker"] svg, #record-sheet [data-allegiance="attacker"] svg {
fill: blue;
}
.soldier-record svg use {
r: 5px;
stroke: none;
}
.soldier-record svg.weapon-icon use {
stroke: white;
stroke-width: 0.5px;
r: 6px;
}
.weapon-symbol {
stroke: none;
}
[href="#counter-base"] {
stroke: none;
}
.soldier-record svg {
width: 20px;
height: 20px;
background-color: initial;
vertical-align: middle;
}
.soldier-record svg.weapon-icon {
float: left;
margin: 0.5em 0.5em;
width: 30px;
height: 30px;
}
.soldier-record svg text, #record-sheet svg text {
fill: white;
text-anchor: middle;
font-size: 10px;
font-weight: bold;
transform: translateY(3.5px);
font-family: monospace;
}
.soldier-record.selected {
background-color: khaki;
}
.soldier-record.movement-ended {
background-color: none;
opacity: 0.5;
}
img.logo {
width: 100px;
margin: 0 auto;
display: block;
}
#turn-count[data-update="0"] span.inning-bottom {
display: none;
}
#turn-count[data-update="1"] span.inning-top {
display: none;
}
#map-dialog {
border: 1px solid black;
}
.map-placeholder {
position: absolute;
user-select: none;
}
input[type="file"] {
display: none;
}
div#content {
display: flex;
border-left: 1px solid gray;
flex-basis: 0;
max-height: 100vh;
flex-direction: column;
position: relative;
min-width: 340px;
}
#content > div:first-of-type {
padding: 2px;
border-bottom: 1px solid gray;
}
#content #buttons {
line-height: 1.5em;
}
#record-sheet {
display: flex;
min-height: 0;
flex-direction: column;
background-color: gray;
flex-grow: 1;
}
#record-sheet .records {
overflow-y: auto;
}
.soldier-record {
display: none;
}
#record-sheet [data-view-squad-number="1"].records .soldier-record[data-squad="1"] {
display: block;
}
#record-sheet [data-view-squad-number="2"].records .soldier-record[data-squad="2"] {
display: block;
}
#record-sheet [data-view-squad-number="3"].records .soldier-record[data-squad="3"] {
display: block;
}
#record-sheet [data-view-squad-number="4"].records .soldier-record[data-squad="4"] {
display: block;
}
#record-sheet .name {
text-transform: capitalize;
font-size: smaller;
}
#record-sheet > div {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
#record-sheet > div > div:first-of-type {
margin: 0;
margin-top: 0px;
margin-bottom: 1px;
padding: 6px 2px;
background-color: lightgray;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#record-sheet .soldier-record {
margin-bottom: 1px;
padding: 6px 4px;
}
#record-sheet > div:last-of-type {
margin-top: 1px;
}
#record-sheet .records > div:last-of-type {
margin-bottom: 0;
}
#record-sheet .squad-number svg {
width: 15px;
height: 15px;
padding: 2px;
border-radius: 3px;
background-color: initial;
vertical-align: middle;
}
#record-sheet [data-allegiance="attacker"] .squad-number.selected svg,
#record-sheet [data-allegiance="attacker"] .squad-number:hover svg {
fill: white;
background-color: blue;
}
#record-sheet [data-allegiance="defender"] .squad-number.selected svg,
#record-sheet [data-allegiance="defender"] .squad-number:hover svg {
fill: white;
background-color: red;
}
#record-sheet .squad-number.selected svg circle {
fill: white;
}
#record-sheet [data-allegiance="attacker"] .squad-number.selected svg text,
#record-sheet [data-allegiance="attacker"] .squad-number:hover svg text {
fill: blue;
}
#record-sheet [data-allegiance="defender"] .squad-number.selected svg text,
#record-sheet [data-allegiance="defender"] .squad-number:hover svg text {
fill: red;
}
.die {
width: 31px;
height: 31px;
border: 1px solid black;
border-radius: 4px;
margin: 0 auto;
margin-top: 3px;
margin-bottom: 1px;
background-color: white;
display: flex;
justify-content: space-around;
}
.die > div {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.dot {
display: inline-block;
width: 7px;
height: 7px;
background-color: black;
border-radius: 50%;
padding: 0;
margin: 0;
visibility: hidden;
}
.die.one > div:nth-child(even) > .dot:nth-child(even) {
visibility: visible;
}
.die.two > div:first-child > .dot:first-child,
.die.two > div:last-child > .dot:last-child {
visibility: visible;
}
.die.three > div:first-child > .dot:first-child,
.die.three > div:nth-child(even) > .dot:nth-child(even),
.die.three > div:last-child > .dot:last-child {
visibility: visible;
}
.die.four > div:nth-child(odd) > .dot:nth-child(odd) {
visibility: visible;
}
.die.five > div:nth-child(odd) > .dot:nth-child(odd),
.die.five > div:nth-child(even) > .dot:nth-child(even) {
visibility: visible;
}
.die.six > div:nth-child(odd) > .dot {
visibility: visible;
}
.die.test > div:first-child > .dot {
visibility: visible;
}
.roll-in {
animation: roll-in 0.125s linear 1;
}
.roll-out {
animation: roll-out 0.125s linear 1;
}
#edge-inputs {
position: absolute;
right: 0;
height: 100%;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: end;
}
#edge-inputs > * {
pointer-events: initial;
}
#content-visibility {
margin-top: 2px;
flex-grow: 2;
}
label[for="content-visibility-toggle"] {
display: inline-block;
padding: 0 4px;
background-color: #EEE;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
font-size: 20px;
line-height: 25px;
font-family: monospace;
}
label[for="content-visibility-toggle"]:hover {
color: red;
background-color: #DDD;
cursor: pointer;
}
input#content-visibility-toggle {
display: none;
}
#content-visibility-toggle + label .close {
display: none;
}
#content-visibility-toggle + label .open {
display: inline;
}
#content-visibility-toggle:checked + label .close {
display: inline;
}
#content-visibility-toggle:checked + label .open {
display: none;
}
#toggle-firing-arc-vis input {
display: none;
}
#toggle-firing-arc-vis label {
display: block;
background-color: #DDD;
border: 1px solid #666;
border-radius: 3px;
padding: 0 5px;
margin: 3px;
width: fit-content;
user-select: none;
}
#toggle-firing-arc-vis label:hover {
background-color: #CCC;
}
#toggle-firing-arc-vis input + label .visible {
display: none;
}
#toggle-firing-arc-vis input:checked + label .visible {
display: inline;
}
#toggle-firing-arc-vis input:checked + label .hidden {
display: none;
}
.select-elevation {
margin-right: 3px;
background-color: #FFFFFF99;
border: 1px solid gray;
padding: 2px;
font-family: sans-serif;
font-size: 10pt;
}
.select-elevation label {
display: block;
margin: 2px 0;
text-align: center;
border: 1px solid transparent;
user-select: none;
}
.select-elevation input:not(:checked)+label:hover {
border: 1px solid orangered;
border-radius: 3px;
}
.select-elevation input {
display: none;
}
.select-elevation input:checked+label {
border: 1px solid orangered;
border-radius: 3px;
background-color: orange;
color: white;
font-weight: bold;
}
div#dice {
margin: 3px;
padding: 2px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
border: 1px solid darkgray;
}
div#status {
margin: 3px;
display: none;
user-select: none;
position: absolute;
bottom: 0;
white-space: nowrap;
pointer-events: none;
}
.counters-list {
user-select: none;
}
.counters-list > img {
vertical-align: middle;
height: 20px;
border: 1px solid lightgray;
border-radius: 2px;
}
.counters-list > img:hover {
border: 1px solid gray;
}
@keyframes roll-out {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes roll-in {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;
overflow-y: unset;
min-height: 0;
flex-grow: 1;
}
#record-sheet > div > p {
margin-top: 0;
white-space: nowrap;
}
#record-sheet > div {
display: flex;
flex-direction: column;
}
#record-sheet .records {
overflow-y: auto;
}
#record-sheet div:last-of-type {
margin-top: 0;
}
#record-sheet > div:first-of-type > div {
margin-right: 1px;
}
#record-sheet > div:last-of-type > div {
margin-left: 1px;
}
div#content {
min-width: 680px;
}
}