restore slider
This commit is contained in:
Stewart Allen
parent
ab7ea82b4d
commit
793cdad2a1
4 changed files with 255 additions and 197 deletions
|
|
@ -2,6 +2,7 @@
|
|||
--fg-gray: #495057;
|
||||
--bg-gray: rgba(0,0,0,0.25);
|
||||
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
|
||||
--holdbar: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
|
||||
}
|
||||
a, a:hover, a:visited {
|
||||
border: none;
|
||||
|
|
@ -165,6 +166,16 @@ th, tr, td {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
#tracker {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
|
|
@ -297,6 +308,9 @@ th, tr, td {
|
|||
border: 1px solid #aaa;
|
||||
color: #000;
|
||||
}
|
||||
.pop-sel {
|
||||
background-color: #ddd !important;
|
||||
}
|
||||
|
||||
.lt-menu {
|
||||
flex-direction: column;
|
||||
|
|
@ -545,38 +559,52 @@ th, tr, td {
|
|||
#slider {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
font-size: smaller;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
bottom: 5px;
|
||||
bottom: 10px;
|
||||
width: 50px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#slider > div {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#slider-begin {
|
||||
#slider-max {
|
||||
background-color: #ccc;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#slider-end {
|
||||
#slider-center {
|
||||
background-image: var(--holdbar);
|
||||
}
|
||||
#slider-zero {
|
||||
margin-top: 3px;
|
||||
background-color: #ccc;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
#slider-hold {
|
||||
background-color: #ccc;
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border: 3px solid white;
|
||||
top: 0;
|
||||
}
|
||||
#slider-hold .shim {
|
||||
#slider-hold .handle {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #aaa;
|
||||
border: 1px solid #999;
|
||||
border-radius: 3px;
|
||||
background-color: var(--bg-gray);
|
||||
}
|
||||
#slider-hi {
|
||||
pointer-events: all;
|
||||
}
|
||||
#slider-mid {
|
||||
height: 20px;
|
||||
}
|
||||
#slider-lo {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#alert-area {
|
||||
|
|
@ -661,8 +689,15 @@ th, tr, td {
|
|||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
#layers .var-row {
|
||||
border-radius: 10px;
|
||||
background-color: #ddd;
|
||||
padding: 2px 5px 2px 5px;
|
||||
margin: 0 2px 0 2px;
|
||||
}
|
||||
.var-row {
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.var-row label {
|
||||
padding: 2px 4px 2px 0;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
</head>
|
||||
<body class="col">
|
||||
<div id="container"></div>
|
||||
<div id="tracker"></div>
|
||||
<div id="top" class="row">
|
||||
<div id="app-mode"></div>
|
||||
<div class="grow"></div>
|
||||
|
|
@ -164,7 +165,7 @@
|
|||
<div id="lt-nozzle" class="lt-menu noshow">
|
||||
<i class="fas fa-map-marker"></i>
|
||||
<label>nozzle</label>
|
||||
<div id="pop-nozzle" class="pop-lcol row fillh"></div>
|
||||
<div id="pop-nozzle" class="pop-lcol row fillh russo"></div>
|
||||
</div>
|
||||
<div id="lt-end"></div>
|
||||
</div>
|
||||
|
|
@ -214,6 +215,10 @@
|
|||
<label class="t-group">recent files</label>
|
||||
<div id="catalogList" class="col"></div>
|
||||
</div>
|
||||
<div id="mod-saves" class="mdialog col">
|
||||
<label class="t-group">saved settings</label>
|
||||
<div id="settingsList" class="col"></div>
|
||||
</div>
|
||||
<div id="mod-tools" class="mdialog">
|
||||
<div class="col">
|
||||
<div class="row t-head">
|
||||
|
|
@ -272,19 +277,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="mid-rcol" class="col j-center">
|
||||
<div id="set-top" class="set-group"><a>settings</a></div>
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="set-end" class="set-group"></div>
|
||||
<div id="slider" class="col">
|
||||
<div id="slider-begin">0</div>
|
||||
<div id="set-menu" class="col">
|
||||
<div id="set-top" class="set-group"><a>settings</a></div>
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="set-end" class="set-group"></div>
|
||||
</div>
|
||||
<div id="slider" class="col russo">
|
||||
<div id="slider-max">∞</div>
|
||||
<div id="slider-center" class="grow">
|
||||
<div id="slider-hold" class="col a-center">
|
||||
<div id="slider-hold-top" class="shim"></div>
|
||||
<div id="slider-hold-mid"> </div>
|
||||
<div id="slider-hold-bot" class="shim"></div>
|
||||
<div id="slider-hold" class="col xa-center">
|
||||
<div id="slider-hi" class="handle"></div>
|
||||
<div id="slider-mid"> </div>
|
||||
<div id="slider-lo" class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slider-end">∞</div>
|
||||
<div id="slider-zero">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue