From d8e1dced48d7d32ed3286965966e4bb7d481ce20 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 6 Dec 2018 16:21:16 +0200
Subject: [PATCH] highlight labels in time slider on active

---
 src/routes/Player/ControlBar/TimeSlider/TimeSlider.js | 2 +-
 src/routes/Player/ControlBar/TimeSlider/styles.less   | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

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