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

highlight labels in time slider on active

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-12-06 16:21:16 +02:00
parent 65e61ae1c8
commit d8e1dced48
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Player/ControlBar/TimeSlider/TimeSlider.js
View file

@ -99,7 +99,7 @@ class TimeSlider extends Component {
} }
return ( return (
<div className={classnames(styles['time-slider-container'], this.props.className)}> <div className={classnames(styles['time-slider-container'], { [styles['active']]: this.state.time !== null }, this.props.className)}>
{this.renderTimeLabel()} {this.renderTimeLabel()}
{this.renderSlider()} {this.renderSlider()}
{this.renderDurationLabel()} {this.renderDurationLabel()}

8
src/routes/Player/ControlBar/TimeSlider/styles.less
View file

@ -6,7 +6,7 @@
.label { .label {
font-size: calc(var(--time-slider-thumb-size) * 0.7); font-size: calc(var(--time-slider-thumb-size) * 0.7);
line-height: 1; line-height: 1;
color: var(--color-surfacelighter); color: var(--color-surfacelight);
} }
.slider { .slider {
@ -17,4 +17,10 @@
flex: 1; flex: 1;
margin: 0 var(--time-slider-thumb-size); margin: 0 var(--time-slider-thumb-size);
} }
&:hover, &.active {
.label {
color: var(--color-surfacelighter);
}
}
} }