From aa84737299f2b29b02de60217afa32b77efb7bad Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 30 Apr 2026 00:31:06 +0300 Subject: [PATCH] feat: redesign player controls --- .../Player/ControlBar/SeekBar/styles.less | 12 +++++- .../ControlBar/VolumeSlider/styles.less | 22 +++++++++++ src/routes/Player/ControlBar/styles.less | 37 ++++++++++++++----- src/routes/Player/styles.less | 11 +++++- 4 files changed, 68 insertions(+), 14 deletions(-) diff --git a/src/routes/Player/ControlBar/SeekBar/styles.less b/src/routes/Player/ControlBar/SeekBar/styles.less index 54e75117d..2427b8b62 100644 --- a/src/routes/Player/ControlBar/SeekBar/styles.less +++ b/src/routes/Player/ControlBar/SeekBar/styles.less @@ -14,12 +14,15 @@ .label { flex: none; - width: 6rem; + width: 5.5rem; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: center; + font-size: 1.1rem; + font-variant-numeric: tabular-nums; color: var(--primary-foreground-color); + opacity: 0.9; } .slider { @@ -33,7 +36,8 @@ .slider-thumb { background-color: var(--primary-accent-color); - + transition: transform 150ms ease; + &:after { content: ""; position: absolute; @@ -46,5 +50,9 @@ filter: brightness(130%); } } + + &:hover .slider-thumb { + transform: translateX(-50%) scale(1.2); + } } } \ No newline at end of file diff --git a/src/routes/Player/ControlBar/VolumeSlider/styles.less b/src/routes/Player/ControlBar/VolumeSlider/styles.less index 517dfc0e5..74553f64d 100644 --- a/src/routes/Player/ControlBar/VolumeSlider/styles.less +++ b/src/routes/Player/ControlBar/VolumeSlider/styles.less @@ -5,20 +5,42 @@ :import('~stremio/components/Slider/styles.less') { slider-track: track; slider-track-after: track-after; + slider-thumb: thumb; } .volume-slider:not(:global(.disabled)) { .slider-track { background-color: var(--overlay-color); + opacity: 1; } .slider-track-after { background-color: var(--primary-foreground-color); } + .slider-thumb { + background-color: @color-secondaryvariant1-light4; + transition: transform 150ms ease; + + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: 100%; + box-shadow: 0 0 0 0.25rem white inset; + } + } + &:hover, &:global(.active) { .slider-track-after { background-color: var(--primary-foreground-color); } + + .slider-thumb { + transform: translateX(-50%) scale(1.2); + } } } \ No newline at end of file diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less index bcfbbdaef..062b97907 100644 --- a/src/routes/Player/ControlBar/styles.less +++ b/src/routes/Player/ControlBar/styles.less @@ -4,11 +4,11 @@ @import (reference) '~stremio/common/screen-sizes.less'; .control-bar-container { - padding: 0 1.5rem; + padding: 0 2rem; .seek-bar { - --track-size: 0.5rem; - --thumb-size: 1.3rem; + --track-size: 0.4rem; + --thumb-size: 1.2rem; height: 2.5rem; } @@ -17,26 +17,34 @@ display: flex; flex-direction: row; align-items: center; + gap: 0.25rem; .control-bar-button { flex: none; width: 4rem; - height: 5rem; + height: 4rem; display: flex; justify-content: center; align-items: center; + border-radius: 0.75rem; + transition: background-color 150ms ease; + + &:hover:not(:global(.disabled)) { + background-color: var(--overlay-color); + } &:global(.disabled) { .icon { - opacity: 0.5; + opacity: 0.4; } } .icon { flex: none; - width: 2.5rem; - height: 2.5rem; + width: 2.2rem; + height: 2.2rem; color: var(--primary-foreground-color); + transition: transform 100ms ease; } } @@ -46,7 +54,7 @@ flex: 0 1 10rem; height: 4rem; - margin: 0 1rem; + margin: 0 0.5rem; } .spacing { @@ -60,11 +68,17 @@ display: none; justify-content: center; align-items: center; + border-radius: 0.75rem; + transition: background-color 150ms ease; + + &:hover { + background-color: var(--overlay-color); + } .icon { flex: none; - width: 2.5rem; - height: 2.5rem; + width: 2.2rem; + height: 2.2rem; color: var(--primary-foreground-color); } } @@ -73,6 +87,7 @@ flex: none; display: flex; flex-direction: row; + gap: 0.25rem; } } } @@ -89,6 +104,7 @@ position: relative; padding: 0 0.5rem; overflow: visible; + gap: 0.15rem; .volume-slider { display: none; @@ -104,6 +120,7 @@ bottom: 4.5rem; padding: 0.5rem; margin: 0.5rem; + gap: 0.15rem; max-width: calc(100dvw - 1rem); border-radius: var(--border-radius); background-color: var(--modal-background-color); diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 4ded33221..23b0b0c32 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -64,8 +64,11 @@ html:not(.active-slider-within) { right: 0; top: 0; left: 0; + height: 8rem; z-index: -1; content: ""; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 100%); + pointer-events: none; } .nav-bar-button-container { @@ -94,14 +97,18 @@ html:not(.active-slider-within) { &.control-bar-layer { top: initial; overflow: visible; + padding-bottom: 0.5rem; &::before { position: absolute; right: 0; bottom: 0; left: 0; + height: 10rem; z-index: -1; content: ""; + background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 100%); + pointer-events: none; } } @@ -116,8 +123,8 @@ html:not(.active-slider-within) { top: initial; left: initial; right: 4rem; - bottom: 8rem; - max-height: calc(100% - 13.5rem); + bottom: 7.5rem; + max-height: calc(100% - 13rem); max-width: calc(100% - 4rem); border-radius: var(--border-radius); background-color: var(--modal-background-color);