Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public/style.css
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-04-11 12:46:26 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-04-11 13:15:41 -0700
commitb192fc0790a4815703afa6ccc782f2b573c64722 (patch)
treedcc0f3b3aca30447a1ad71a45d1193aadc92f59d /public/style.css
parent35a82e94e85c5b4f068e6e4d3d807dfc3c05379d (diff)
Import map svg in an object; add a dev server
Diffstat (limited to 'public/style.css')
-rw-r--r--public/style.css437
1 files changed, 437 insertions, 0 deletions
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..a1f8da5
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,437 @@
+body {
+ margin: 0;
+ display: flex;
+ overflow: hidden;
+}
+
+#map-container {
+ flex-basis: 100%;
+ position: relative;
+ max-height: 100vh;
+}
+
+svg, object {
+ 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 input[type="checkbox"].visible {
+ position: absolute;
+ right: 0;
+}
+
+#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;
+}
+
+use[href="#point"].sight-line-target {
+ opacity: 1;
+ stroke: orangered;
+ /* stroke-width: 1px; */
+ fill-opacity: 0.04;
+}
+
+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.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 [slot="troop-number"] {
+ color: white;
+ font-weight: bold;
+ border-radius: 10px;
+ padding: 0 4px;
+}
+
+.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] {
+ background-color: red;
+}
+
+.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] {
+ background-color: green;
+}
+
+.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;
+}
+
+#turn-count[data-update="0"] span.inning-bottom {
+ display: none;
+}
+
+#turn-count[data-update="1"] span.inning-top {
+ display: none;
+}
+
+@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; */
+ }
+} \ No newline at end of file