fix: remove default styles for slotted thumb

muxinc · Nov 5, 2024 · a871bd5 · a871bd5
1 parent 62d70d9
commit a871bd5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/docs/src/pages/docs/en/components/media-time-range.mdx b/docs/src/pages/docs/en/components/media-time-range.mdx
@@ -143,8 +143,8 @@ Set the `preview` slot to an empty element to remove the default preview element
   ></video>
   <media-control-bar>
     <media-time-range>
-      <svg slot="thumb" style="width: 20px; height: 20px; background: none;">
-        <circle fill="#df2c2c" cx="10" cy="10" r="10"/>
+      <svg slot="thumb">
+        <circle fill="#df2c2c" cx="5" cy="5" r="5"/>
       </svg>
     </media-time-range>
   </media-control-bar>

diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
@@ -177,10 +177,6 @@ template.innerHTML = /*html*/ `
       width: var(--media-range-thumb-width, 10px);
       height: var(--media-range-thumb-height, 10px);
       margin-left: calc(var(--media-range-thumb-width, 10px) / -2);
-      border: var(--media-range-thumb-border, none);
-      border-radius: var(--media-range-thumb-border-radius, 10px);
-      background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
-      box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
       transition: var(--media-range-thumb-transition);
       transform: var(--media-range-thumb-transform, none);
       opacity: var(--media-range-thumb-opacity, 1);
@@ -189,6 +185,13 @@ template.innerHTML = /*html*/ `
       cursor: pointer;
     }
 
+    #thumb {
+      border-radius: var(--media-range-thumb-border-radius, 10px);
+      background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
+      box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
+      border: var(--media-range-thumb-border, none);
+    }
+
     :host([disabled]) #thumb {
       background-color: #777;
     }