WIP: floating edge UI
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user