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

increase slider on mobile. improve look of slider in dark mode

Browse source
This commit is contained in:
Stewart Allen 2022-10-17 10:48:12 -04:00
commit 4d96fc7cd2
4 changed files with 34 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

27
web/kiri/index.css
View file

@ -3,6 +3,7 @@
--bg-gray: rgba(0,0,0,0.25);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1));
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
--highlight: rgba(126,153,183,0.4);
--main-color: rgba(126,153,183,1);
@ -1531,6 +1532,9 @@ th, tr, td, label {
bottom: 3px;
pointer-events: all;
}
#slider.slider-mobile {
height: 40px !important;
}
#slider {
display: none;
height: 30px;
@ -1552,15 +1556,16 @@ th, tr, td, label {
flex-direction: row;
align-items: center;
}
#slider-max {
background-color: #ccc;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 3px;
.dark #slider-center {
background-image: var(--holdbar-dk);
}
#slider-center {
background-image: var(--holdbar);
}
.dark #slider-zero, .dark #slider-max {
background-color: #555;
color: white;
}
#slider-zero {
z-index: 10;
margin-right: 3px;
@ -1568,6 +1573,15 @@ th, tr, td, label {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#slider-max {
background-color: #ccc;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 3px;
}
.dark #slider-hold {
background-color: rgba(255,255,255,0.25);
}
#slider-hold {
background-color: rgba(0,0,0,0.15);
position: absolute;
@ -1575,6 +1589,9 @@ th, tr, td, label {
right: 0;
top: 0;
}
#slider-hold .slider-mobile {
width: 40px !important;
}
#slider-hold .handle {
width: 15px;
height: 100%;