Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-11 16:30:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1242 from Stremio/feat/redesign-player-controls

Browse source 
Player: redesign player controls
This commit is contained in:
Timothy Z. 2026-04-30 14:14:17 +03:00 committed by GitHub
commit 2b7746b6a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 68 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/routes/Player/ControlBar/SeekBar/styles.less
View file

@ -14,12 +14,15 @@
.label { .label {
flex: none; flex: none;
width: 6rem; width: 5.5rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
direction: rtl; direction: rtl;
text-align: center; text-align: center;
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
opacity: 0.9;
} }
.slider { .slider {
@ -33,7 +36,8 @@
.slider-thumb { .slider-thumb {
background-color: var(--primary-accent-color); background-color: var(--primary-accent-color);
transition: transform 150ms ease;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -46,5 +50,9 @@
filter: brightness(130%); filter: brightness(130%);
} }
} }
&:hover .slider-thumb {
transform: translateX(-50%) scale(1.2);
}
} }
} }

22
src/routes/Player/ControlBar/VolumeSlider/styles.less
View file

@ -5,20 +5,42 @@
:import('~stremio/components/Slider/styles.less') { :import('~stremio/components/Slider/styles.less') {
slider-track: track; slider-track: track;
slider-track-after: track-after; slider-track-after: track-after;
slider-thumb: thumb;
} }
.volume-slider:not(:global(.disabled)) { .volume-slider:not(:global(.disabled)) {
.slider-track { .slider-track {
background-color: var(--overlay-color); background-color: var(--overlay-color);
opacity: 1;
} }
.slider-track-after { .slider-track-after {
background-color: var(--primary-foreground-color); 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) { &:hover, &:global(.active) {
.slider-track-after { .slider-track-after {
background-color: var(--primary-foreground-color); background-color: var(--primary-foreground-color);
} }
.slider-thumb {
transform: translateX(-50%) scale(1.2);
}
} }
} }

37
src/routes/Player/ControlBar/styles.less
View file

@ -4,11 +4,11 @@
@import (reference) '~stremio/common/screen-sizes.less'; @import (reference) '~stremio/common/screen-sizes.less';
.control-bar-container { .control-bar-container {
padding: 0 1.5rem; padding: 0 2rem;
.seek-bar { .seek-bar {
--track-size: 0.5rem; --track-size: 0.4rem;
--thumb-size: 1.3rem; --thumb-size: 1.2rem;
height: 2.5rem; height: 2.5rem;
} }
@ -17,26 +17,34 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.25rem;
.control-bar-button { .control-bar-button {
flex: none; flex: none;
width: 4rem; width: 4rem;
height: 5rem; height: 4rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 0.75rem;
transition: background-color 150ms ease;
&:hover:not(:global(.disabled)) {
background-color: var(--overlay-color);
}
&:global(.disabled) { &:global(.disabled) {
.icon { .icon {
opacity: 0.5; opacity: 0.4;
} }
} }
.icon { .icon {
flex: none; flex: none;
width: 2.5rem; width: 2.2rem;
height: 2.5rem; height: 2.2rem;
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
transition: transform 100ms ease;
} }
} }
@ -46,7 +54,7 @@
flex: 0 1 10rem; flex: 0 1 10rem;
height: 4rem; height: 4rem;
margin: 0 1rem; margin: 0 0.5rem;
} }
.spacing { .spacing {
@ -60,11 +68,17 @@
display: none; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 0.75rem;
transition: background-color 150ms ease;
&:hover {
background-color: var(--overlay-color);
}
.icon { .icon {
flex: none; flex: none;
width: 2.5rem; width: 2.2rem;
height: 2.5rem; height: 2.2rem;
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
} }
} }
@ -73,6 +87,7 @@
flex: none; flex: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.25rem;
} }
} }
} }
@ -89,6 +104,7 @@
position: relative; position: relative;
padding: 0 0.5rem; padding: 0 0.5rem;
overflow: visible; overflow: visible;
gap: 0.15rem;
.volume-slider { .volume-slider {
display: none; display: none;
@ -104,6 +120,7 @@
bottom: 4.5rem; bottom: 4.5rem;
padding: 0.5rem; padding: 0.5rem;
margin: 0.5rem; margin: 0.5rem;
gap: 0.15rem;
max-width: calc(100dvw - 1rem); max-width: calc(100dvw - 1rem);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--modal-background-color); background-color: var(--modal-background-color);

11
src/routes/Player/styles.less
View file

@ -64,8 +64,11 @@ html:not(.active-slider-within) {
right: 0; right: 0;
top: 0; top: 0;
left: 0; left: 0;
height: 8rem;
z-index: -1; z-index: -1;
content: ""; content: "";
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
pointer-events: none;
} }
.nav-bar-button-container { .nav-bar-button-container {
@ -94,14 +97,18 @@ html:not(.active-slider-within) {
&.control-bar-layer { &.control-bar-layer {
top: initial; top: initial;
overflow: visible; overflow: visible;
padding-bottom: 0.5rem;
&::before { &::before {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 10rem;
z-index: -1; z-index: -1;
content: ""; 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; top: initial;
left: initial; left: initial;
right: 4rem; right: 4rem;
bottom: 8rem; bottom: 7.5rem;
max-height: calc(100% - 13.5rem); max-height: calc(100% - 13rem);
max-width: calc(100% - 4rem); max-width: calc(100% - 4rem);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--modal-background-color); background-color: var(--modal-background-color);