AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

work on layer scroll style

Browse source
This commit is contained in:
Stewart Allen 2024-06-02 19:40:45 -04:00
commit 547e7b386e
2 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/kiri/index.css
View file

@ -19,6 +19,7 @@
--menu-border: #555; --menu-border: #555;
--dark-menu-text: #111; --dark-menu-text: #111;
--menu-hover: #ddd; --menu-hover: #ddd;
--blue-0: rgb(48, 64, 82);
--blue-1: rgb(96,127,164); --blue-1: rgb(96,127,164);
--blue-2: rgb(126,153,183); --blue-2: rgb(126,153,183);
--blue-3: rgb(190, 204, 219); --blue-3: rgb(190, 204, 219);
@ -1791,6 +1792,7 @@ th, tr, td, label {
#layer-slider { #layer-slider {
position: absolute; position: absolute;
font-size: smaller; font-size: smaller;
gap: 2px;
left: 15px; left: 15px;
right: 15px; right: 15px;
bottom: max(3px, env(safe-area-inset-bottom)); bottom: max(3px, env(safe-area-inset-bottom));
@ -1801,7 +1803,7 @@ th, tr, td, label {
} }
#slider { #slider {
display: none; display: none;
height: 30px; height: 25px;
z-index: 100; z-index: 100;
} }
.mobile .sli-drag-el { .mobile .sli-drag-el {
@ -1812,9 +1814,7 @@ th, tr, td, label {
position: absolute; position: absolute;
font-family: monospace; font-family: monospace;
transform: translateY(-50%); transform: translateY(-50%);
background-color: rgba(255,255,255,0.5);
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px;
bottom: 110%; bottom: 110%;
left: 50%; left: 50%;
} }
@ -1824,10 +1824,12 @@ th, tr, td, label {
align-items: center; align-items: center;
} }
.dark #slider-center { .dark #slider-center {
background-image: var(--holdbar-dk); border: 1px solid #555;
background-color: rgba(255,255,255,0.15);
} }
#slider-center { #slider-center {
background-image: var(--holdbar); border: 1px solid #ccc;
background-color: rgba(255,255,255,0.5);
} }
.dark #slider-zero, .dark #slider-max { .dark #slider-zero, .dark #slider-max {
background-color: #555; background-color: #555;
@ -1835,22 +1837,20 @@ th, tr, td, label {
} }
#slider-zero { #slider-zero {
z-index: 10; z-index: 10;
margin-right: 3px;
background-color: #ccc; background-color: #ccc;
border-top-left-radius: 10px; border-top-left-radius: 5px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 5px;
} }
#slider-max { #slider-max {
background-color: #ccc; background-color: #ccc;
border-top-right-radius: 10px; border-top-right-radius: 5px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 5px;
margin-left: 3px;
} }
.dark #slider-hold { .dark #slider-hold {
background-color: rgba(255,255,255,0.25); background-color: var(--blue-0);
} }
#slider-hold { #slider-hold {
background-color: rgba(0,0,0,0.15); background-color: var(--blue-3);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -1859,10 +1859,12 @@ th, tr, td, label {
#slider-hold .slider-mobile { #slider-hold .slider-mobile {
width: 40px !important; width: 40px !important;
} }
.dark #slider-hold .handle {
background-color: #999;
}
#slider-hold .handle { #slider-hold .handle {
width: 15px; width: 15px;
height: 100%; height: 100%;
border-radius: 3px;
background-color: var(--bg-gray); background-color: var(--bg-gray);
} }
#slider-mid { #slider-mid {

2
web/kiri/index.html
View file

@ -255,7 +255,7 @@
<!-- main workspace --> <!-- main workspace -->
<div id="mid-mid" class="grow"> <div id="mid-mid" class="grow">
<div id="layer-slider" class="f-col a-stretch"> <div id="layer-slider" class="f-col a-stretch">
<div id="layers" class="f-row j-center"></div> <div id="layers" class="f-row j-center gap2"></div>
<div id="slider" class="f-row russo"> <div id="slider" class="f-row russo">
<div id="slider-zero">0</div> <div id="slider-zero">0</div>
<div id="slider-center" class="grow"> <div id="slider-center" class="grow">