okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #152 from JaxonTekk/upcoming

Browse source 
styled volume slider for fullscreen display
This commit is contained in:
cryptofyre 2022-01-18 22:25:02 -06:00 • committed by GitHub
commit 71e45aff3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/renderer/style.less
View file

@ -4073,28 +4073,41 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
input[type=range] { input[type=range] {
appearance: none; -webkit-appearance: none;
width: 100%;
height: 4px; height: 4px;
background-color: rgb(200 200 200 / 10%); background: rgba(255, 255, 255, 0.4);
border-radius: 2px; border-radius: 5px;
background-size: 70% 100%;
background-repeat: no-repeat;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity: 1;
transform: scale(0.5);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; height: 14px;
width: 23px; width: 14px;
height: 23px; border-radius: 50%;
border-radius: 100%; background: rgb(50 50 50);
background: rgba(236, 234, 234, 0.733);
cursor: default; cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase); box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition);
} }
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
&::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
} }
} }