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

seek bar styles adapted to the new slider api

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-03 14:01:40 +03:00
parent b837d5c88e
commit 336164682e
2 changed files with 36 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,9 @@
:import('~stremio/common/Slider/styles.less') {
slider-track: track;
slider-track-before: track-before;
slider-thumb: thumb;
}
.seek-bar-container {
display: flex;
flex-direction: row;
@ -5,30 +11,33 @@
&:hover, &:global(.active) {
.slider {
--track-before-color: var(--color-primarylight);
--thumb-color: var(--color-surfacelighter);
.slider-track-before {
background-color: var(--color-primarylight);
}
.slider-thumb {
fill: var(--color-surfacelighter);
}
}
}
.label {
flex: none;
max-width: 5rem;
max-height: 2.4em;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
color: var(--color-surfacelighter);
}
.slider {
--thumb-size: var(--seek-bar-thumb-size);
--track-size: var(--seek-bar-track-size);
--track-before-color: var(--color-primary);
--track-color: var(--color-backgroundlighter);
--thumb-color: transparent;
flex: 1;
align-self: stretch;
margin: 0 var(--seek-bar-thumb-size);
margin: 0 var(--thumb-size);
&:global(.disabled) {
--track-color: var(--color-surfacedark);
.slider-thumb {
fill: transparent;
}
}
}

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

@ -1,14 +1,22 @@
.control-bar-container {
padding: 0 calc(var(--control-bar-button-size) * 0.4);
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
z-index: 0;
padding: 0 1.5rem;
overflow: visible;
&::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
box-shadow: 0 0 8rem 8rem var(--color-backgrounddarker);
content: "";
}
.seek-bar {
--seek-bar-thumb-size: calc(var(--control-bar-button-size) * 0.40);
--seek-bar-track-size: calc(var(--control-bar-button-size) * 0.12);
height: calc(var(--control-bar-button-size) * 0.6);
font-size: calc(var(--control-bar-button-size) * 0.35);
--thumb-size: 1.5rem;
height: 2.5rem;
}
.control-bar-buttons-container {
@ -67,18 +75,4 @@
flex: 1;
}
}
&::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
box-shadow: 0 0 calc(var(--control-bar-button-size) * 2) calc(var(--control-bar-button-size) * 2.3) var(--color-backgrounddarker);
content: "";
}
}
.modal-container {
--border-color: var(--color-surfacelighter);
}