453 lines
8.0 KiB
CSS
453 lines
8.0 KiB
CSS
svg {
|
|
overflow: hidden;
|
|
}
|
|
|
|
image {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
image.map-scans {
|
|
image-rendering: auto;
|
|
}
|
|
|
|
text {
|
|
user-select: none;
|
|
}
|
|
|
|
use[href="#hex"] {
|
|
opacity: 0.5;
|
|
fill: transparent;
|
|
fill-opacity: 0.5;
|
|
stroke-width: 0.5px;
|
|
stroke: black;
|
|
}
|
|
|
|
use[href="#hex"].active {
|
|
opacity: 0.2;
|
|
fill: teal;
|
|
stroke: black;
|
|
}
|
|
|
|
.sight-line-target use[href="#hex"] {
|
|
opacity: 1;
|
|
stroke: orangered;
|
|
fill-opacity: 0.04;
|
|
}
|
|
|
|
polyline {
|
|
fill: none;
|
|
}
|
|
|
|
polyline.move-trace {
|
|
stroke: gray;
|
|
stroke-dasharray: 2;
|
|
}
|
|
|
|
#background {
|
|
/* fill: #bacae3; */
|
|
}
|
|
|
|
g.troop-counter, g.counter, g.troop-counter use {
|
|
r: inherit;
|
|
}
|
|
|
|
g.troop-counter-template, g.troop-counter-template use {
|
|
r: inherit;
|
|
}
|
|
|
|
g.weapon-symbol :not(use[href="#counter-base"]) {
|
|
stroke: white;
|
|
stroke-width: 0.5px;
|
|
}
|
|
|
|
/* g.weapon-symbol {
|
|
r: 5px;
|
|
} */
|
|
|
|
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;
|
|
}
|
|
|
|
[href="#counter-prone"] {
|
|
transform: translate(-5px, 6px);
|
|
}
|
|
|
|
[href="#counter-grenade"] {
|
|
transform: translate(-5px, -5px);
|
|
}
|
|
|
|
g.clone {
|
|
stroke: white;
|
|
stroke-width: 0.5px;
|
|
stroke-dasharray: 1;
|
|
}
|
|
|
|
g.clone [href="#counter-prone"] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.removed[href="#counter-prone"] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
g[data-allegiance="defender"].clone {
|
|
fill: rgb(255, 126, 126);
|
|
}
|
|
|
|
g[data-allegiance="attacker"].clone {
|
|
fill: rgb(126, 126, 255);
|
|
}
|
|
|
|
.counter, #troop-counter text {
|
|
/* transform: translateY(4px); */
|
|
}
|
|
|
|
g.counter use.troop-number, g.counter use.squad-number {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-family: monospace;
|
|
cursor: default;
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
--text-fill: white;
|
|
--translateY: 4px;
|
|
}
|
|
|
|
/* .primary-weapon {
|
|
stroke: white;
|
|
stroke-width: 0.5px;
|
|
} */
|
|
|
|
polygon.firing-arc[data-allegiance="defender"] {
|
|
fill: red;
|
|
}
|
|
|
|
polygon.firing-arc[data-allegiance="attacker"] {
|
|
fill: blue;
|
|
}
|
|
|
|
#shapes {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
#shapes polygon {
|
|
stroke: none;
|
|
}
|
|
|
|
#lines polyline, #lines line {
|
|
fill: none;
|
|
stroke: black;
|
|
stroke-width: 0.5;
|
|
}
|
|
|
|
#lines line {
|
|
stroke-opacity: 0.2;
|
|
}
|
|
|
|
#lines line {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sight-line {
|
|
stroke: orangered;
|
|
stroke-width: 0.5px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#hex {
|
|
fill: inherit;
|
|
fill-opacity: inherit;
|
|
stroke: inherit;
|
|
stroke-width: inherit;
|
|
stroke-opacity: inherit;
|
|
}
|
|
|
|
g.counter use {
|
|
r: 5px;
|
|
}
|
|
|
|
g.counter use.troop-number, g.counter use.squad-number {
|
|
--scale: 0.4;
|
|
}
|
|
|
|
g.counter .troop-number {
|
|
--translateX: -4px;
|
|
}
|
|
|
|
g.counter .squad-number {
|
|
--translateX: 4px;
|
|
}
|
|
|
|
g.counter .troop-number, g.counter .squad-number {
|
|
transform: translate(var(--translateX), 0) scale(var(--scale));
|
|
}
|
|
|
|
g.selected use.primary-weapon {
|
|
animation: 1s selected 0.25s linear infinite;
|
|
stroke-width: 2px;
|
|
stroke: yellow;
|
|
r: 6px;
|
|
}
|
|
|
|
@keyframes selected {
|
|
50% {
|
|
stroke-width: 0px;
|
|
r: 5px;
|
|
}
|
|
}
|
|
|
|
.counter[data-allegiance="attacker"] {
|
|
fill: blue;
|
|
}
|
|
|
|
.counter[data-allegiance="defender"] {
|
|
fill: red;
|
|
}
|
|
|
|
/* Inradius and circumradius values come from the hexagon */
|
|
.grid, g.start-locations {
|
|
--inradius: 8.66px;
|
|
--circumradius: 10px;
|
|
--x-step: calc(var(--inradius) * 2);
|
|
--y-step: calc((3 / 2) * var(--circumradius));
|
|
}
|
|
|
|
g[data-y], g.start-locations > g {
|
|
--translateX: 0;
|
|
transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));
|
|
}
|
|
|
|
g[data-y]:nth-child(odd) {
|
|
--translateX: calc(var(--inradius));
|
|
}
|
|
|
|
[data-x] use[href="#hex"] {
|
|
--scale: 1;
|
|
transform: scale(var(--scale));
|
|
}
|
|
|
|
[data-x]:hover use[href="#hex"] {
|
|
opacity: 1;
|
|
fill: orange;
|
|
stroke: black;
|
|
}
|
|
|
|
[data-x]:hover g.counter {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
[data-x]:hover g.counter .troop-number {
|
|
--translateX: -6px;
|
|
}
|
|
|
|
[data-x]:hover g.counter .squad-number {
|
|
--translateX: 6px;
|
|
}
|
|
|
|
[data-x] {
|
|
--scale: 1;
|
|
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
|
|
}
|
|
|
|
g[data-y="0"] { --i: 0; }
|
|
g[data-y="1"] { --i: 1; }
|
|
g[data-y="2"] { --i: 2; }
|
|
g[data-y="3"] { --i: 3; }
|
|
g[data-y="4"] { --i: 4; }
|
|
g[data-y="5"] { --i: 5; }
|
|
g[data-y="6"] { --i: 6; }
|
|
g[data-y="7"] { --i: 7; }
|
|
g[data-y="8"] { --i: 8; }
|
|
g[data-y="9"] { --i: 9; }
|
|
g[data-y="10"] { --i: 10; }
|
|
g[data-y="11"] { --i: 11; }
|
|
g[data-y="12"] { --i: 12; }
|
|
g[data-y="13"] { --i: 13; }
|
|
g[data-y="14"] { --i: 14; }
|
|
g[data-y="15"] { --i: 15; }
|
|
g[data-y="16"] { --i: 16; }
|
|
g[data-y="17"] { --i: 17; }
|
|
g[data-y="18"] { --i: 18; }
|
|
g[data-y="19"] { --i: 19; }
|
|
g[data-y="20"] { --i: 20; }
|
|
g[data-y="21"] { --i: 21; }
|
|
g[data-y="22"] { --i: 22; }
|
|
g[data-y="23"] { --i: 23; }
|
|
g[data-y="24"] { --i: 24; }
|
|
g[data-y="25"] { --i: 25; }
|
|
g[data-y="26"] { --i: 26; }
|
|
g[data-y="27"] { --i: 27; }
|
|
g[data-y="28"] { --i: 28; }
|
|
g[data-y="29"] { --i: 29; }
|
|
g[data-y="30"] { --i: 30; }
|
|
g[data-y="31"] { --i: 31; }
|
|
g[data-y="32"] { --i: 32; }
|
|
g[data-y="33"] { --i: 33; }
|
|
g[data-y="34"] { --i: 34; }
|
|
g[data-y="35"] { --i: 35; }
|
|
g[data-y="36"] { --i: 36; }
|
|
g[data-y="37"] { --i: 37; }
|
|
g[data-y="38"] { --i: 38; }
|
|
g[data-y="39"] { --i: 39; }
|
|
g[data-y="40"] { --i: 40; }
|
|
g[data-y="41"] { --i: 41; }
|
|
g[data-y="42"] { --i: 42; }
|
|
g[data-y="43"] { --i: 43; }
|
|
g[data-y="44"] { --i: 44; }
|
|
g[data-y="45"] { --i: 45; }
|
|
g[data-y="46"] { --i: 46; }
|
|
g[data-y="47"] { --i: 47; }
|
|
g[data-y="48"] { --i: 48; }
|
|
g[data-y="49"] { --i: 49; }
|
|
g[data-y="50"] { --i: 50; }
|
|
g[data-y="51"] { --i: 51; }
|
|
g[data-y="52"] { --i: 52; }
|
|
g[data-y="53"] { --i: 53; }
|
|
g[data-y="54"] { --i: 54; }
|
|
g[data-y="55"] { --i: 55; }
|
|
g[data-y="56"] { --i: 56; }
|
|
g[data-y="57"] { --i: 57; }
|
|
g[data-y="58"] { --i: 58; }
|
|
g[data-y="59"] { --i: 59; }
|
|
g[data-y="60"] { --i: 60; }
|
|
g[data-y="61"] { --i: 61; }
|
|
g[data-y="62"] { --i: 62; }
|
|
g[data-y="63"] { --i: 63; }
|
|
g[data-y="64"] { --i: 64; }
|
|
g[data-y="65"] { --i: 65; }
|
|
g[data-y="66"] { --i: 66; }
|
|
g[data-y="67"] { --i: 67; }
|
|
g[data-y="68"] { --i: 68; }
|
|
g[data-y="69"] { --i: 69; }
|
|
g[data-y="70"] { --i: 70; }
|
|
g[data-y="71"] { --i: 71; }
|
|
g[data-y="72"] { --i: 72; }
|
|
g[data-y="73"] { --i: 73; }
|
|
g[data-y="74"] { --i: 74; }
|
|
g[data-y="75"] { --i: 75; }
|
|
g[data-y="76"] { --i: 76; }
|
|
|
|
[data-x="0"] { --i: 0; }
|
|
[data-x="1"] { --i: 1; }
|
|
[data-x="2"] { --i: 2; }
|
|
[data-x="3"] { --i: 3; }
|
|
[data-x="4"] { --i: 4; }
|
|
[data-x="5"] { --i: 5; }
|
|
[data-x="6"] { --i: 6; }
|
|
[data-x="7"] { --i: 7; }
|
|
[data-x="8"] { --i: 8; }
|
|
[data-x="9"] { --i: 9; }
|
|
[data-x="10"] { --i: 10; }
|
|
[data-x="11"] { --i: 11; }
|
|
[data-x="12"] { --i: 12; }
|
|
[data-x="13"] { --i: 13; }
|
|
[data-x="14"] { --i: 14; }
|
|
[data-x="15"] { --i: 15; }
|
|
[data-x="16"] { --i: 16; }
|
|
[data-x="17"] { --i: 17; }
|
|
[data-x="18"] { --i: 18; }
|
|
[data-x="19"] { --i: 19; }
|
|
[data-x="20"] { --i: 20; }
|
|
[data-x="21"] { --i: 21; }
|
|
[data-x="22"] { --i: 22; }
|
|
[data-x="23"] { --i: 23; }
|
|
[data-x="24"] { --i: 24; }
|
|
[data-x="25"] { --i: 25; }
|
|
[data-x="26"] { --i: 26; }
|
|
[data-x="27"] { --i: 27; }
|
|
[data-x="28"] { --i: 28; }
|
|
[data-x="29"] { --i: 29; }
|
|
[data-x="30"] { --i: 30; }
|
|
[data-x="31"] { --i: 31; }
|
|
[data-x="32"] { --i: 32; }
|
|
|
|
#tree .trunk {
|
|
fill: brown;
|
|
}
|
|
|
|
#tree .branches {
|
|
fill: rgb(141, 202, 141);
|
|
stroke: green;
|
|
}
|
|
|
|
#bush {
|
|
fill: rgb(141, 202, 141);
|
|
stroke: green;
|
|
stroke-width: 0.5px;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.floor {
|
|
fill: white;
|
|
/* fill: inherit; */
|
|
}
|
|
|
|
.building path {
|
|
fill: none;
|
|
}
|
|
|
|
.furniture {
|
|
fill: rgb(104, 185, 181);
|
|
}
|
|
|
|
.building path.walls {
|
|
stroke: black;
|
|
stroke-linecap: square;
|
|
}
|
|
|
|
.building .outer-walls {
|
|
stroke-width: 2;
|
|
fill: none;
|
|
stroke: black;
|
|
stroke-linecap: square;
|
|
}
|
|
|
|
.building .inner-walls {
|
|
stroke: white;
|
|
fill: none;
|
|
stroke-linecap: square;
|
|
}
|
|
|
|
.building .windows, .building .door-edges, .building .doors {
|
|
stroke-linecap: square;
|
|
}
|
|
|
|
.building .windows, .building .door-edges {
|
|
stroke-width: 2.5px;
|
|
stroke: orange;
|
|
}
|
|
|
|
.building .doors {
|
|
stroke: white;
|
|
stroke-width: 2.25px
|
|
}
|
|
|
|
#test-arcs line, #test-arcs polyline {
|
|
stroke: black;
|
|
fill: none;
|
|
}
|
|
|
|
#test-arcs rect, #test-arcs polygon {
|
|
fill: black;
|
|
fill-opacity: 0.2;
|
|
}
|
|
|
|
.elevation {
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
font-size: 6pt;
|
|
text-anchor: middle;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|