From 27ced6cc8408c8b093a33ad9ce4be4e72505f493 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 8 Dec 2021 00:16:32 +0530
Subject: [PATCH] Refined audio card player sliders

refs https://github.com/TryGhost/Team/issues/1230

- refines seek and volume sliders for audio player to show progress marker with background color
---
 core/frontend/src/cards/css/audio.css | 37 ++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/core/frontend/src/cards/css/audio.css b/core/frontend/src/cards/css/audio.css
index 70483d387e..8208fd0464 100644
--- a/core/frontend/src/cards/css/audio.css
+++ b/core/frontend/src/cards/css/audio.css
@@ -32,7 +32,7 @@
     font-family: inherit;
     font-size: 1em;
     font-weight: 700;
-=    background: transparent;
+    background: transparent;
 }
 
 .kg-player {
@@ -117,6 +117,41 @@
     width: 80px;
 }
 
+.kg-audio-seek-slider::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    width: var(--seek-before-width) !important;
+    height: 3px;
+    background-color: rgba(0, 125, 181, 0.6);
+    cursor: pointer;
+}
+
+.kg-audio-volume-slider::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    width: var(--volume-before-width) !important;
+    height: 3px;
+    background-color: rgba(0, 125, 181, 0.6);
+    cursor: pointer;
+}
+
+/* Browser styles for slider */
+
+/* .kg-audio-volume-slider::-webkit-slider-runnable-track {
+    background: rgba(0, 125, 181, 0.6) !important;
+}
+.kg-audio-volume-slider::-moz-range-track {
+    background: rgba(0, 125, 181, 0.6) !important;
+}
+.kg-audio-volume-slider::-ms-fill-upper {
+    background: rgba(0, 125, 181, 0.6) !important;
+}
+.kg-audio-volume-slider::before {
+    width: var(--volume-before-width) !important;
+} */
+
 /* Resetting browser styles
 /* --------------------------------------------------------------- */