Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-17 20:22:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: implementation idea changed

Browse source
This commit is contained in:
kKaskak 2023-10-24 13:59:27 +03:00
parent bd231ce932
commit 1aeb8637cd
4 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/common/Slider/Slider.js
View file

@ -109,10 +109,9 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
<div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
</div>
<div className={styles['layer']}>
<svg className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 10 10'}>
<circle cx={'5'} cy={'5'} r={'4'} className={styles['background-circle']} />
<div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 10 10'}>
<circle cx={'5'} cy={'5'} r={'2.5'} />
</svg>
</div>
</div>
</div>
);

8
src/common/Slider/styles.less
View file

@ -64,11 +64,7 @@ html.active-slider-within {
width: var(--thumb-size);
height: var(--thumb-size);
transform: translateX(-50%);
fill: var(--primary-foreground-color);
.background-circle {
fill: var(--primary-accent-color);
filter: brightness(130%);
}
background-color: var(--primary-foreground-color);
border-radius: 100%;
}
}

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

@ -32,7 +32,19 @@
}
.slider-thumb {
fill: var(--primary-accent-color);
background-color: var(--primary-accent-color);
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 100%;
box-shadow: 0 0 0 0.25rem var(--primary-accent-color) inset;
filter: brightness(130%);
}
}
}
}

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

@ -5,7 +5,6 @@
:import('~stremio/common/Slider/styles.less') {
slider-track: track;
slider-track-after: track-after;
slider-thumb-background-circle: background-circle;
}
.volume-slider:not(:global(.disabled)) {
@ -22,9 +21,4 @@
background-color: var(--primary-foreground-color);
}
}
.slider-thumb-background-circle {
fill: var(--primary-foreground-color);
filter: brightness(100%);
}
}