Merge pull request #487 from Stremio/feature-layback-nipple-design

fix-playback-slider-circle
Stremio · Oct 24, 2023 · ae644a5 · ae644a5
2 parents ea23012 + dc17cbc
commit ae644a5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/common/Slider/Slider.js b/src/common/Slider/Slider.js
@@ -109,9 +109,7 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
                 <div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
             </div>
             <div className={styles['layer']}>
-                <svg className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 10 10'}>
-                    <circle cx={'5'} cy={'5'} r={'5'} />
-                </svg>
+                <div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
             </div>
         </div>
     );

diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
@@ -64,6 +64,7 @@ html.active-slider-within {
         width: var(--thumb-size);
         height: var(--thumb-size);
         transform: translateX(-50%);
-        fill: var(--primary-foreground-color);
+        background-color: var(--primary-foreground-color);
+        border-radius: 100%;
     }
 }
diff --git a/src/routes/Player/ControlBar/SeekBar/styles.less b/src/routes/Player/ControlBar/SeekBar/styles.less
@@ -32,7 +32,19 @@
         }
 
         .slider-thumb {
-            fill: var(--primary-accent-color);
+            background-color: var(--primary-accent-color);
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-radius: 100%;
+                box-shadow: 0 0 0 0.25rem var(--primary-accent-color) inset;
+                filter: brightness(130%);
+            }
         }
     }
 }