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; border-width: 0.25em;
} }
.sliderContainer {
--thumb: 0.4em;
}
.mdl-slider-container { .mdl-slider-container {
height: 1em; height: 1em;
} }
@@ -1773,21 +1777,31 @@ progress + span {
} }
.mdl-slider-background-flex-container { .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 */ /* this is the osd player slider */
.mdl-slider-background-flex { .mdl-slider-background-flex {
border-radius: var(--smallRadius); border-radius: var(--thumb);
height: 0.4em; height: var(--thumb);
margin-top: -0.2em; margin-top: calc(var(--thumb) / -2);
background: var(--osdSeekBarBufferedColorAlpha); background: var(--osdSeekBarBufferedColorAlpha);
transition: 0.2s linear; transition: 0.2s linear;
} }
.sliderContainer:active .mdl-slider-background-flex { .sliderContainer:active .mdl-slider-background-flex {
height: 0.6em; --h: calc(var(--thumb) * 1.5);
margin-top: -0.3em; height: var(--h);
border-radius: var(--h);
margin-top: calc(var(--h) / -2);
} }
.mdl-slider-background-lower { .mdl-slider-background-lower {
@@ -1800,47 +1814,36 @@ progress + span {
.mdl-slider::-webkit-slider-thumb { .mdl-slider::-webkit-slider-thumb {
background: var(--osdSeekBarThumbColor); background: var(--osdSeekBarThumbColor);
width: 0.4em !important; width: var(--thumb) !important;
height: 0.4em !important; height: var(--thumb) !important;
border-radius: 0.4em; border-radius: var(--thumb);
transition: 0.2s linear;
} }
.sliderContainer:hover .mdl-slider::-webkit-slider-thumb { .mdl-slider:hover::-webkit-slider-thumb,
width: 0.2em !important; .layout-mobile .mdl-slider::-webkit-slider-thumb,
height: 0.8em !important;
border-radius: 0.2em;
transform: scale(1);
}
.sliderContainer:active .mdl-slider::-webkit-slider-thumb,
.mdl-slider.show-focus:focus::-webkit-slider-thumb { .mdl-slider.show-focus:focus::-webkit-slider-thumb {
width: 0.2em !important; width: calc(var(--thumb) * 1.25) !important;
height: 0.8em !important; height: calc(var(--thumb) * 5) !important;
border-radius: 0.2em; border-radius: var(--thumb);
transform: scale(1) scaleY(1.25); 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 { .mdl-slider::-moz-range-thumb {
background: var(--osdSeekBarThumbColor); background: var(--osdSeekBarThumbColor);
width: 0.4em !important; width: var(--thumb) !important;
height: 0.4em !important; height: var(--thumb) !important;
border-radius: 0.4em; border-radius: var(--thumb);
transition: 0.2s linear;
} }
.sliderContainer:hover .mdl-slider::-moz-range-thumb { .mdl-slider:hover::-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.show-focus:focus::-moz-range-thumb { .mdl-slider.show-focus:focus::-moz-range-thumb {
width: 0.2em !important; width: calc(var(--thumb) * 1.25) !important;
height: 0.8em !important; height: calc(var(--thumb) * 5) !important;
border-radius: 0.2em; border-radius: var(--thumb);
transform: scale(1) scaleY(1.25); transform: scale(0.5);
} }
.sliderMarkerContainer { .sliderMarkerContainer {
@@ -3542,10 +3545,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
border: var(--defaultBorder) !important; border: var(--defaultBorder) !important;
} }
.sliderBubbleText {
font-size: 1.5em;
}
fieldset { fieldset {
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
border: var(--defaultBorder); border: var(--defaultBorder);