boris/ElegantFin
1
0 Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2026-10-26 09:39:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Reworked the seekbar styling to fix various issues

Browse Source 
Fix: Seekbar positions and previews were inaccurate (#274)
Fix: Seekbar thumb was not aligning with the progress level at the seekbar ends
New: Seekbar thumb is always in expanded state on phones as they do not support the active and hover states reliably
dev: rearranged code
This commit is contained in:
lscambo13 committed 2026-07-05 20:48:39 +05:30
1 parent f891e7d486
commit 50e5ec40b0
1 file changed
+40 -41
Download Patch File Download Diff File Expand all files Collapse all files
Theme/ElegantFin-theme-nightly.css
+40 -41
View File
@@ -1764,6 +1764,10 @@ progress + span {
border-width: 0.25em;
}
.sliderContainer {
--thumb: 0.4em;
}
.mdl-slider-container {
height: 1em;
}
@@ -1773,21 +1777,31 @@ progress + span {
}
.mdl-slider-background-flex-container {
padding: 0;
padding: 0 calc(var(--thumb) / 2);
}
.sliderBubbleTrack {
margin: 0 calc(var(--thumb) / 2);
}
.sliderBubbleText {
font-size: 1.5em;
}
/* this is the osd player slider */
.mdl-slider-background-flex {
border-radius: var(--smallRadius);
height: 0.4em;
margin-top: -0.2em;
border-radius: var(--thumb);
height: var(--thumb);
margin-top: calc(var(--thumb) / -2);
background: var(--osdSeekBarBufferedColorAlpha);
transition: 0.2s linear;
}
.sliderContainer:active .mdl-slider-background-flex {
height: 0.6em;
margin-top: -0.3em;
--h: calc(var(--thumb) * 1.5);
height: var(--h);
border-radius: var(--h);
margin-top: calc(var(--h) / -2);
}
.mdl-slider-background-lower {
@@ -1800,47 +1814,36 @@ progress + span {
.mdl-slider::-webkit-slider-thumb {
background: var(--osdSeekBarThumbColor);
width: 0.4em !important;
height: 0.4em !important;
border-radius: 0.4em;
width: var(--thumb) !important;
height: var(--thumb) !important;
border-radius: var(--thumb);
transition: 0.2s linear;
}
.sliderContainer:hover .mdl-slider::-webkit-slider-thumb {
width: 0.2em !important;
height: 0.8em !important;
border-radius: 0.2em;
transform: scale(1);
}
.sliderContainer:active .mdl-slider::-webkit-slider-thumb,
.mdl-slider:hover::-webkit-slider-thumb,
.layout-mobile .mdl-slider::-webkit-slider-thumb,
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
width: 0.2em !important;
height: 0.8em !important;
border-radius: 0.2em;
transform: scale(1) scaleY(1.25);
width: calc(var(--thumb) * 1.25) !important;
height: calc(var(--thumb) * 5) !important;
border-radius: var(--thumb);
transform: scale(0.5);
}
/* These Firefox thumb styles are separate because combining them breaks the effect from chrome */
/* These Firefox thumb styles are separate because combining them breaks the effect on chrome */
.mdl-slider::-moz-range-thumb {
background: var(--osdSeekBarThumbColor);
width: 0.4em !important;
height: 0.4em !important;
border-radius: 0.4em;
width: var(--thumb) !important;
height: var(--thumb) !important;
border-radius: var(--thumb);
transition: 0.2s linear;
}
.sliderContainer:hover .mdl-slider::-moz-range-thumb {
width: 0.2em !important;
height: 0.8em !important;
border-radius: 0.2em;
transform: scale(1);
}
.sliderContainer:active .mdl-slider::-moz-range-thumb,
.mdl-slider:hover::-moz-range-thumb,
.mdl-slider.show-focus:focus::-moz-range-thumb {
width: 0.2em !important;
height: 0.8em !important;
border-radius: 0.2em;
transform: scale(1) scaleY(1.25);
width: calc(var(--thumb) * 1.25) !important;
height: calc(var(--thumb) * 5) !important;
border-radius: var(--thumb);
transform: scale(0.5);
}
.sliderMarkerContainer {
@@ -3542,10 +3545,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
border: var(--defaultBorder) !important;
}
.sliderBubbleText {
font-size: 1.5em;
}
fieldset {
border-radius: var(--smallRadius);
border: var(--defaultBorder);