WIP: floating edge UI

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);