npm - @videojs/html - Versions diffs - 10.3.0 → 10.4.0 - Mend

@videojs/html 10.3.0 → 10.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (272) hide show

package/dist/default/internal/skins/neutral-video/template.js CHANGED Viewed

@@ -32,12 +32,24 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-title class="media-title">
 </media-title>
 <media-controls>
-<media-controls-backdrop class="video-controls-backdrop">
+<media-buffering-indicator class="video-controls-center-buffering">
+<media-controls-group class="video-controls-center video-controls-compact-center">
+<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play">
+<media-icon family="neutral" name="restart" class="media-button-icon media-play-button-restart-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="neutral" name="pause" class="media-button-icon media-play-button-pause-icon video-controls-center-play-icon">
+</media-icon>
+</media-play-button>
+</media-controls-group>
+</media-buffering-indicator>
+<media-controls-backdrop class="video-controls-backdrop video-controls-compact-backdrop">
 </media-controls-backdrop>
 <media-controls-content class="video-controls video-controls-content video-controls-wrap">
 <media-tooltip-group>
 <media-controls-group class="video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-_OARb-OU-0-trigger">
+<media-play-button class="media-button media-play-button video-controls-play-button" id="vjs-_OARb-OU-0-trigger">
 <media-icon family="neutral" name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon">
@@ -51,7 +63,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-mute-button commandfor="vjs-j0SgKLtw-0-popup" class="media-button media-mute-button" id="vjs-_OARb-OU-0-2-trigger">
+<media-mute-button commandfor="vjs-j0SgKLtw-0-popup" class="media-button media-mute-button video-controls-volume-button" id="vjs-_OARb-OU-0-2-trigger">
 <media-icon family="neutral" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="neutral" name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -75,9 +87,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-</media-controls-group>
-<media-controls-group class="video-time-slider-group">
-<media-time-group class="media-time-group">
+<media-time-group class="media-time-group video-controls-time">
 <media-time class="media-time-toggle" type="current" toggle>
 </media-time>
 <media-time-separator class="media-time-separator">
@@ -85,6 +95,8 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-time class="media-time-duration-value" type="duration">
 </media-time>
 </media-time-group>
+</media-controls-group>
+<media-controls-group class="video-time-slider-group">
 <media-time-slider class="media-slider media-time-slider">
 <media-time-slider-chapters class="media-time-slider-chapters">
 <template>
@@ -130,7 +142,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<button commandfor="vjs--eDG6u6W-0-popup" class="media-button media-settings-menu-trigger" id="vjs-_OARb-OU-0-4-trigger">
+<button commandfor="vjs--eDG6u6W-0-popup" class="media-button media-settings-menu-trigger video-controls-settings-button" id="vjs-_OARb-OU-0-4-trigger">
 <media-icon family="neutral" name="gear" class="media-button-icon-base media-settings-menu-trigger-icon">
 </media-icon>
 <media-text class="media-settings-menu-trigger-label" token="menu.settings">Settings</media-text>
@@ -266,6 +278,8 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-menu-radio-item class="media-menu-radio-item">
 <span data-part="label">
 </span>
+<span data-part="badge" class="media-menu-badge">
+</span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
 <media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>
@@ -277,7 +291,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-menu-content>
 </media-menu>
 <media-controls-group class="video-controls-trailing">
-<media-cast-button class="media-button media-cast-button" id="vjs-_OARb-OU-0-5-trigger">
+<media-cast-button class="media-button media-cast-button video-controls-cast-button" id="vjs-_OARb-OU-0-5-trigger">
 <media-icon family="neutral" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
@@ -289,7 +303,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-_OARb-OU-0-6-trigger">
+<media-airplay-button class="media-button media-airplay-button video-controls-airplay-button" id="vjs-_OARb-OU-0-6-trigger">
 <media-icon family="neutral" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
@@ -301,7 +315,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-pip-button class="media-button media-pip-button" id="vjs-_OARb-OU-0-7-trigger">
+<media-pip-button class="media-button media-pip-button video-controls-pip-button" id="vjs-_OARb-OU-0-7-trigger">
 <media-icon family="neutral" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
@@ -313,7 +327,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-_OARb-OU-0-8-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button video-controls-fullscreen-button" id="vjs-_OARb-OU-0-8-trigger">
 <media-icon family="neutral" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">

package/dist/default/internal/skins/scaffold-audio/skin.css CHANGED Viewed

@@ -936,7 +936,7 @@
     pointer-events: auto;
     align-items: center;
     gap: calc(var(--media-spacing) * 2);
-    display: none;
+    display: flex;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -970,25 +970,47 @@
     }
   }
-  @container media-root (width >= 22.5rem) {
-    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center {
-      display: flex;
-    }
-  }
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button {
-    background-color: var(--media-background) !important;
+    background-color: var(--media-popover) !important;
     margin: 0 !important;
   }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button {
+      background-color: color-mix(in oklab, var(--media-popover) 40%, transparent) !important;
+    }
+  }
   @media (hover: hover) {
     :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button:hover {
-      background-color: var(--media-button-highlight) !important;
+      background-color: var(--media-popover) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button:hover {
+        background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+      }
     }
   }
-  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button:focus-visible, :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button[aria-expanded="true"] {
-    background-color: var(--media-button-highlight) !important;
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button:focus-visible {
+    background-color: var(--media-popover) !important;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button:focus-visible {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
+  }
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button[aria-expanded="true"] {
+    background-color: var(--media-popover) !important;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-button[aria-expanded="true"] {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
   }
   @media (forced-colors: active) {
@@ -1028,11 +1050,25 @@
     height: calc(var(--media-spacing) * 14.5) !important;
   }
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 11) !important;
+      height: calc(var(--media-spacing) * 11) !important;
+    }
+  }
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-play-icon {
     width: calc(var(--media-spacing) * 7) !important;
     height: calc(var(--media-spacing) * 7) !important;
   }
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5.5) !important;
+      height: calc(var(--media-spacing) * 5.5) !important;
+    }
+  }
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-content {
     pointer-events: none;
     z-index: 30;
@@ -1077,6 +1113,10 @@
     top: 0;
   }
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-top:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
   :where(:where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-content):not([data-visible]) .video-controls-top {
     pointer-events: none;
     opacity: 0;
@@ -1104,6 +1144,10 @@
     }
   }
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+    visibility: var(--media-controls-before-start, hidden);
+  }
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .video-controls-video-bottom {
       inset-inline: 0;
@@ -1456,29 +1500,29 @@
 @layer base.theme {
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
-    --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
-    --media-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
-    --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+    --media-shadow-subtle-current-color: transparent;
     --media-text-shadow-dialog: 0 1px 0 #00000040;
     --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
@@ -1487,8 +1531,8 @@
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -1525,16 +1569,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
@@ -1581,20 +1640,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
-    --media-background: oklch(100% 0 0);
-    --media-foreground: oklch(0% 0 0);
-    --media-controls: oklch(100% 0 0 / .5);
+    --media-background: #fff;
+    --media-foreground: #000;
+    --media-controls: #ffffff80;
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
-    --media-muted: oklch(0% 0 0 / .1);
-    --media-surface-border: oklch(0% 0 0 / .05);
+    --media-muted: #0000001a;
+    --media-surface-border: #0000000d;
     --media-primary: var(--media-accent-color, var(--media-foreground));
-    --media-border: oklch(0% 0 0 / .1);
+    --media-border: #0000001a;
     --media-ring: var(--media-foreground);
-    --media-default-accent-color: oklch(0% 0 0);
-    --media-default-accent-text-color: oklch(100% 0 0);
-    --media-internal-accent-text-fallback: oklch(100% 0 0);
+    --media-default-accent-color: #000;
+    --media-default-accent-text-color: #fff;
+    --media-internal-accent-text-fallback: #fff;
     --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
     --media-popover-side-offset: calc(var(--media-spacing) * 3);
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1623,7 +1682,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
       --media-controls: var(--media-background);
-      --media-surface-border: oklch(0% 0 0 / .05);
+      --media-surface-border: #0000000d;
     }
     @supports (color: light-dark(red, red)) {
@@ -1741,7 +1800,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -1749,6 +1808,12 @@
       scrollbar-width: auto;
     }
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);

package/dist/default/internal/skins/scaffold-live-audio/skin.css CHANGED Viewed

@@ -936,7 +936,7 @@
     pointer-events: auto;
     align-items: center;
     gap: calc(var(--media-spacing) * 2);
-    display: none;
+    display: flex;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -970,25 +970,47 @@
     }
   }
-  @container media-root (width >= 22.5rem) {
-    :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center {
-      display: flex;
-    }
-  }
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button {
-    background-color: var(--media-background) !important;
+    background-color: var(--media-popover) !important;
     margin: 0 !important;
   }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button {
+      background-color: color-mix(in oklab, var(--media-popover) 40%, transparent) !important;
+    }
+  }
   @media (hover: hover) {
     :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button:hover {
-      background-color: var(--media-button-highlight) !important;
+      background-color: var(--media-popover) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button:hover {
+        background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+      }
     }
   }
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button:focus-visible, :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button[aria-expanded="true"] {
-    background-color: var(--media-button-highlight) !important;
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button:focus-visible {
+    background-color: var(--media-popover) !important;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button:focus-visible {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
+  }
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button[aria-expanded="true"] {
+    background-color: var(--media-popover) !important;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-button[aria-expanded="true"] {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
   }
   @media (forced-colors: active) {
@@ -1028,11 +1050,25 @@
     height: calc(var(--media-spacing) * 14.5) !important;
   }
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 11) !important;
+      height: calc(var(--media-spacing) * 11) !important;
+    }
+  }
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-play-icon {
     width: calc(var(--media-spacing) * 7) !important;
     height: calc(var(--media-spacing) * 7) !important;
   }
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5.5) !important;
+      height: calc(var(--media-spacing) * 5.5) !important;
+    }
+  }
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-content {
     pointer-events: none;
     z-index: 30;
@@ -1077,6 +1113,10 @@
     top: 0;
   }
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-top:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
   :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-content):not([data-visible]) .video-controls-top {
     pointer-events: none;
     opacity: 0;
@@ -1104,6 +1144,10 @@
     }
   }
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+    visibility: var(--media-controls-before-start, hidden);
+  }
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .video-controls-video-bottom {
       inset-inline: 0;
@@ -1258,29 +1302,29 @@
 @layer base.theme {
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
-    --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
-    --media-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
-    --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+    --media-shadow-subtle-current-color: transparent;
     --media-text-shadow-dialog: 0 1px 0 #00000040;
     --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
@@ -1289,8 +1333,8 @@
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -1327,16 +1371,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
@@ -1383,20 +1442,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
-    --media-background: oklch(100% 0 0);
-    --media-foreground: oklch(0% 0 0);
-    --media-controls: oklch(100% 0 0 / .5);
+    --media-background: #fff;
+    --media-foreground: #000;
+    --media-controls: #ffffff80;
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
-    --media-muted: oklch(0% 0 0 / .1);
-    --media-surface-border: oklch(0% 0 0 / .05);
+    --media-muted: #0000001a;
+    --media-surface-border: #0000000d;
     --media-primary: var(--media-accent-color, var(--media-foreground));
-    --media-border: oklch(0% 0 0 / .1);
+    --media-border: #0000001a;
     --media-ring: var(--media-foreground);
-    --media-default-accent-color: oklch(0% 0 0);
-    --media-default-accent-text-color: oklch(100% 0 0);
-    --media-internal-accent-text-fallback: oklch(100% 0 0);
+    --media-default-accent-color: #000;
+    --media-default-accent-text-color: #fff;
+    --media-internal-accent-text-fallback: #fff;
     --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
     --media-popover-side-offset: calc(var(--media-spacing) * 3);
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1425,7 +1484,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
       --media-controls: var(--media-background);
-      --media-surface-border: oklch(0% 0 0 / .05);
+      --media-surface-border: #0000000d;
     }
     @supports (color: light-dark(red, red)) {
@@ -1543,7 +1602,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -1551,6 +1610,12 @@
       scrollbar-width: auto;
     }
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);