refactor animation control bar, re-add axis positions
This commit is contained in:
parent
596b76ccee
commit
5f69f353bf
7 changed files with 233 additions and 120 deletions
|
|
@ -609,6 +609,9 @@ details[open] summary::after {
|
|||
.hide-scroll {
|
||||
scrollbar-color: transparent transparent !important;
|
||||
}
|
||||
.nooutline {
|
||||
outline: none;
|
||||
}
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -2039,25 +2042,38 @@ details[open] summary::after {
|
|||
color: #335;
|
||||
}
|
||||
|
||||
.dark #layer-animate button {
|
||||
border: 1px solid #555;
|
||||
background-color: #444;
|
||||
}
|
||||
.dark #layer-animate button:hover {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.dark #layer-animate button svg {
|
||||
color: #ddd;
|
||||
}
|
||||
.dark #layer-animate label {
|
||||
border: 1px solid #555;
|
||||
background-color: #444;
|
||||
}
|
||||
.dark #layer-animate input {
|
||||
border: 1px solid #444;
|
||||
}
|
||||
#layer-animate {
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 3px;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
#layer-animate svg {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
}
|
||||
#layer-animate .speed {
|
||||
width: 30px;
|
||||
}
|
||||
#layer-animate .progress {
|
||||
width: 3.5em;
|
||||
}
|
||||
#layer-animate .padleft {
|
||||
margin-left: 5px !important;
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
#layer-animate button {
|
||||
width: 45px;
|
||||
|
|
@ -2067,20 +2083,23 @@ details[open] summary::after {
|
|||
#layer-animate label {
|
||||
display: inline-flex;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #aaa;
|
||||
margin: 1px 2px 2px 1px;
|
||||
padding: 2px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #eee;
|
||||
}
|
||||
#layer-animate input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#layer-toolpos {
|
||||
/* #layer-toolpos {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
z-index: 201;
|
||||
}
|
||||
#layer-toolpos label, #layer-toolpos input {
|
||||
display: inline-flex;
|
||||
|
|
@ -2102,7 +2121,7 @@ details[open] summary::after {
|
|||
font-family: monospace;
|
||||
padding: 1px 4px 1px 4px;
|
||||
margin: 1px 1px 2px 1px;
|
||||
}
|
||||
} */
|
||||
|
||||
#layer-slider {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -387,6 +387,9 @@
|
|||
<div id="top-slider" class="f-col grow">
|
||||
<input id="anim-slider" type="range" min="0" max="1000" value="0"></input>
|
||||
</div>
|
||||
<!-- CAM animation controls and readout -->
|
||||
<div id="layer-animate" class="f-col a-center set2-group hide"></div>
|
||||
<!-- <div id="layer-toolpos" class="f-row a-center hide"></div> -->
|
||||
</div>
|
||||
|
||||
<!-- allows right tray to slide/hide but still show speeds menu -->
|
||||
|
|
@ -733,10 +736,6 @@
|
|||
<div id="rnfo"></div>
|
||||
</div>
|
||||
|
||||
<!-- CAM animation controls and readout -->
|
||||
<div id="layer-animate" class="f-col a-center"></div>
|
||||
<div id="layer-toolpos" class="f-row a-center"></div>
|
||||
|
||||
<!-- ephemeral non-modal alerts -->
|
||||
<div id="alert-area">
|
||||
<div id="alert-border">
|
||||
|
|
|
|||
Loading…
Reference in a new issue