diff --git a/src/routes/Player/ControlBar/TimeSlider/TimeSlider.js b/src/routes/Player/ControlBar/TimeSlider/TimeSlider.js
index 15d89b843..519a13ced 100644
--- a/src/routes/Player/ControlBar/TimeSlider/TimeSlider.js
+++ b/src/routes/Player/ControlBar/TimeSlider/TimeSlider.js
@@ -99,7 +99,7 @@ class TimeSlider extends Component {
         }
 
         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.renderSlider()}
                 {this.renderDurationLabel()}
diff --git a/src/routes/Player/ControlBar/TimeSlider/styles.less b/src/routes/Player/ControlBar/TimeSlider/styles.less
index dc7408dad..570a33da9 100644
--- a/src/routes/Player/ControlBar/TimeSlider/styles.less
+++ b/src/routes/Player/ControlBar/TimeSlider/styles.less
@@ -6,7 +6,7 @@
     .label {
         font-size: calc(var(--time-slider-thumb-size) * 0.7);
         line-height: 1;
-        color: var(--color-surfacelighter);
+        color: var(--color-surfacelight);
     }
 
     .slider {
@@ -17,4 +17,10 @@
         flex: 1;
         margin: 0 var(--time-slider-thumb-size);
     }
+
+    &:hover, &.active {
+        .label {
+            color: var(--color-surfacelighter);
+        }
+    }
 }
\ No newline at end of file