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

feat: redesign player controls

Browse source
This commit is contained in:
Timothy Z. 2026-04-30 00:31:06 +03:00
parent a83788ef67
commit aa84737299
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 {
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);
}
}
}

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

@ -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);
}
}
}

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

@ -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);

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

@ -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);