From 9f7be5d9c782f64948aa244b81a74718c53a02cf Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 1 Jul 2024 21:51:45 -0700
Subject: WIP: floating edge UI
---
public/assets/css/radial.css | 121 ----------------------------------
public/assets/css/style.css | 154 +++++++++++++++++++++++++++++++------------
2 files changed, 113 insertions(+), 162 deletions(-)
(limited to 'public/assets')
diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css
index 9b84d8a..1d3ebc8 100644
--- a/public/assets/css/radial.css
+++ b/public/assets/css/radial.css
@@ -103,98 +103,6 @@ use[href="#hex"] {
display: inline;
}
-#dots {
- pointer-events: none;
-}
-
-/*
-[data-view-elevation="-1"] .building > *,
-[data-view-elevation="-1"] .building > .structure > * {
- display: none;
-} */
-
-/* [data-view-elevation="-1"] .building > .elevation-basement,
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure,
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits),
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
- display: inline;
-} */
-
-/* [data-view-elevation="0"] .building .elevation-0,
-[data-view-elevation="0"] .building .elevation-0 ~ .structure {
- display: inline;
-}
-
-[data-view-elevation="1"] .building .elevation-1,
-[data-view-elevation="1"] .building .elevation-1 ~ .structure {
- display: inline;
-}
-
-[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'],
-[data-view-elevation="1"] .building .elevation-1 + .structure .doors,
-[data-view-elevation="1"] .building .elevation-1 + .structure .door-edges,
-[data-view-elevation="1"] .building .elevation-1 + .structure .windows,
-[data-view-elevation="1"] .building .elevation-1 + .structure .furniture,
-[data-view-elevation="1"] .building .elevation-1 ~ .structure .exits {
- display: none;
-}
-
-[data-view-elevation="1"] .building .elevation-1 + .structure .floor {
- fill: gray;
-}
-
-[data-view-elevation="2"] .building .elevation-2,
-[data-view-elevation="2"] .building .elevation-2 ~ .structure {
- display: inline;
-}
-
-[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'],
-[data-view-elevation="2"] .building .elevation-2 + .structure .doors,
-[data-view-elevation="2"] .building .elevation-2 + .structure .door-edges,
-[data-view-elevation="2"] .building .elevation-2 + .structure .windows,
-[data-view-elevation="2"] .building .elevation-2 + .structure .furniture,
-[data-view-elevation="2"] .building .elevation-2 ~ .structure .exits {
- display: none;
-}
-
-[data-view-elevation="2"] .building .elevation-2 + .structure .floor {
- fill: gray;
-}
-
-[data-view-elevation="3"] .building .elevation-3,
-[data-view-elevation="3"] .building .elevation-3 ~ .structure {
- display: inline;
-}
-
-[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'],
-[data-view-elevation="3"] .building .elevation-3 + .structure .doors,
-[data-view-elevation="3"] .building .elevation-3 + .structure .door-edges,
-[data-view-elevation="3"] .building .elevation-3 + .structure .windows,
-[data-view-elevation="3"] .building .elevation-3 + .structure .furniture,
-[data-view-elevation="3"] .building .elevation-3 ~ .structure .exits {
- display: none;
-}
-
-[data-view-elevation="3"] .building .elevation-3 + .structure .floor {
- fill: gray;
-}
-
-[data-view-elevation="0"] .elevation-0 {
- display: inline;
-}
-
-[data-view-elevation="1"] > .elevation-0,
-[data-view-elevation="1"] > .elevation-1 {
- display: inline;
-}
-
-[data-view-elevation="1"] .building .elevation-1 {
- display: inline;
-} */
-
#tree .trunk {
fill: brown;
}
@@ -210,32 +118,3 @@ use[href="#hex"] {
stroke-width: 0.5px;
transform: scale(0.9);
}
-
-[class^="part"] use {
- fill-opacity: 0.75;
-}
-
-.part-1 use {
- fill: lightseagreen;
-}
-
-.part-2 use {
- fill: lightyellow;
-}
-
-.part-3 use {
- fill: lightblue;
-}
-
-.part-4 use {
- fill: lightsteelblue;
-}
-
-.part-5 use {
- fill: lightsalmon;
-}
-
-.part-6 use {
- fill: lightgreen;
-}
-
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index e8445c8..88c9da4 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -34,15 +34,6 @@ 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);
@@ -81,18 +72,6 @@ g#grid {
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);
-}
-
g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
@@ -282,11 +261,6 @@ div#content {
line-height: 1.5em;
}
-#content input[type="checkbox"].visible {
- position: absolute;
- right: 0;
-}
-
#record-sheet {
display: flex;
min-height: 0;
@@ -331,17 +305,6 @@ div#content {
margin-bottom: 0;
}
-div#dice {
- position: absolute;
- right: 0;
- bottom: 30px;
- margin: 3px;
- padding: 2px;
- background-color: rgba(255, 255, 255, 0.8);
- border-radius: 4px;
- border: 1px solid darkgray;
-}
-
.die {
width: 31px;
height: 31px;
@@ -412,11 +375,100 @@ div#dice {
animation: roll-out 0.125s linear 1;
}
-.select-elevation {
- position: fixed;
+#edge-inputs {
+ position: absolute;
right: 0;
- top: 50%;
- margin-right: 10px;
+ height: 100%;
+ background-color: rgba(0, 255, 255, 0.418);
+ pointer-events: none;
+ display: flex;
+ flex-direction: column;
+ /* align-content: space-around; */
+ align-items: end;
+ /* justify-content: space-between; */
+}
+
+#edge-inputs > * {
+ pointer-events: initial;
+}
+
+#content-visibility {
+ margin-top: 2px;
+}
+
+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;
@@ -442,6 +494,26 @@ div#dice {
background-color: #cdd9e9;
}
+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; */
+ /* visibility: hidden; */
+ user-select: none;
+ position: absolute;
+ bottom: 0;
+ /* right: 50px; */
+ white-space: nowrap;
+ pointer-events: none;
+}
+
@keyframes roll-out {
0% {
transform: scaleX(1);
--
cgit v1.2.3