Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public/assets/css/style.css
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-01 21:51:45 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-01 21:51:45 -0700
commit9f7be5d9c782f64948aa244b81a74718c53a02cf (patch)
treed2a19144f74b5a50e841d3ed9a3cbdd74408106f /public/assets/css/style.css
parentce6cd0be50975f565e52454cfb37e142eac51fc9 (diff)
WIP: floating edge UI
Diffstat (limited to 'public/assets/css/style.css')
-rw-r--r--public/assets/css/style.css154
1 files changed, 113 insertions, 41 deletions
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);