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

@videojs/html 10.1.0 → 10.3.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 (355) hide show

package/dist/dev/internal/skins/neutral-audio/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-audio/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container audio-skin\" data-theme=\"neutral\" data-preset=\"audio\">\n<slot>\n</slot>\n<media-error-dialog class=\"audio-dialog-root\">\n<media-dialog-backdrop class=\"audio-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"audio-dialog-popup\">\n<div class=\"audio-dialog-content\">\n<media-dialog-title class=\"audio-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"audio-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"audio-dialog-actions\">\n<media-dialog-close class=\"media-button audio-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls visibility=\"always\">\n<media-controls-content class=\"audio-controls audio-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"audio-controls-start\">\n<div class=\"audio-play-button\">\n<media-buffering-indicator class=\"media-buffering-indicator audio-play-button-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-W_MfTVYB-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</div>\n<media-seek-button seconds=\"-10\" class=\"media-button media-seek-button\" id=\"vjs-W_MfTVYB-0-2-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"neutral\" name=\"seek\" class=\"media-button-icon media-seek-button-backward-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-backward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-2-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-seek-button seconds=\"10\" class=\"media-button media-seek-button\" id=\"vjs-W_MfTVYB-0-3-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"neutral\" name=\"seek\" class=\"media-button-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-forward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-3-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<media-controls-group class=\"audio-time-slider-group\">\n<media-time-group class=\"media-time-group\">\n<media-time class=\"media-time-toggle ~~media-time-current-value~~\" type=\"current\" toggle>\n</media-time>\n<media-time-separator class=\"media-time-separator\">\n</media-time-separator>\n<media-time class=\"media-time-duration-value\" type=\"duration\">\n</media-time>\n</media-time-group>\n<media-time-slider class=\"media-slider audio-time-slider\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-buffer class=\"media-slider-buffer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb audio-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"clamp\">\n<div class=\"media-slider-preview-content media-popup-surface media-tooltip audio-time-slider-preview-content\">\n<media-slider-value class=\"audio-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n</div>\n</media-slider-preview>\n</media-time-slider>\n</media-controls-group>\n<media-controls-group class=\"audio-controls-end\">\n<media-mute-button commandfor=\"vjs-4kthzEOq-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-W_MfTVYB-0-4-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-4-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" boundary=\"viewport\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-4kthzEOq-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-playback-rate-button commandfor=\"vjs-ALt053S7-0-popup\" class=\"media-button media-playback-rate-button\" id=\"vjs-W_MfTVYB-0-5-trigger\">\n</media-playback-rate-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-5-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" boundary=\"viewport\" class=\"media-popup media-popup-surface media-menu-popup audio-settings-menu-popup\" id=\"vjs-ALt053S7-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"neutral\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\">\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"<\" action=\"speedDown\">\n</media-hotkey>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAmLT"}
1	+ {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-audio/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container audio-skin\" data-theme=\"neutral\" data-preset=\"audio\">\n<slot>\n</slot>\n<media-error-dialog class=\"audio-dialog-root\">\n<media-dialog-backdrop class=\"audio-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"audio-dialog-popup\">\n<div class=\"audio-dialog-content\">\n<media-dialog-title class=\"audio-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"audio-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"audio-dialog-actions\">\n<media-dialog-close class=\"media-button audio-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls visibility=\"always\">\n<media-controls-content class=\"audio-controls audio-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"audio-controls-start\">\n<div class=\"audio-play-button\">\n<media-buffering-indicator class=\"media-buffering-indicator audio-play-button-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-W_MfTVYB-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</div>\n<media-seek-button seconds=\"-10\" class=\"media-button media-seek-button\" id=\"vjs-W_MfTVYB-0-2-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"neutral\" name=\"seek\" class=\"media-button-icon media-seek-button-backward-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-backward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-2-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-seek-button seconds=\"10\" class=\"media-button media-seek-button\" id=\"vjs-W_MfTVYB-0-3-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"neutral\" name=\"seek\" class=\"media-button-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-forward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-3-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<media-controls-group class=\"audio-time-slider-group\">\n<media-time-group class=\"media-time-group\">\n<media-time class=\"media-time-toggle\" type=\"current\" toggle>\n</media-time>\n<media-time-separator class=\"media-time-separator\">\n</media-time-separator>\n<media-time class=\"media-time-duration-value\" type=\"duration\">\n</media-time>\n</media-time-group>\n<media-time-slider class=\"media-slider audio-time-slider\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-buffer class=\"media-slider-buffer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb audio-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"clamp\">\n<div class=\"media-slider-preview-content media-popup-surface media-tooltip audio-time-slider-preview-content\">\n<media-slider-value class=\"audio-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n</div>\n</media-slider-preview>\n</media-time-slider>\n</media-controls-group>\n<media-controls-group class=\"audio-controls-end\">\n<media-mute-button commandfor=\"vjs-4kthzEOq-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-W_MfTVYB-0-4-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-4-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" boundary=\"viewport\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-4kthzEOq-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-playback-rate-button commandfor=\"vjs-ALt053S7-0-popup\" class=\"media-button media-playback-rate-button\" id=\"vjs-W_MfTVYB-0-5-trigger\">\n</media-playback-rate-button>\n<media-tooltip trigger=\"vjs-W_MfTVYB-0-5-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" boundary=\"viewport\" class=\"media-popup media-popup-surface media-menu-popup audio-settings-menu-popup\" id=\"vjs-ALt053S7-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"neutral\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\">\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"<\" action=\"speedDown\">\n</media-hotkey>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAmLT"}

package/dist/dev/internal/skins/neutral-live-audio/skin.css CHANGED Viewed

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -38,7 +40,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --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);
@@ -51,9 +53,9 @@
     --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-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -158,6 +160,7 @@
     --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-primary: var(--media-accent-color, var(--media-foreground));
     --media-border: oklch(0% 0 0 / .1);
@@ -176,6 +179,7 @@
       --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
       --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
+      --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
       --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
       --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));
@@ -426,9 +430,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
   :where(.media-skin[data-theme="neutral"]) .media-button {
@@ -553,7 +557,6 @@
     outline-style: none;
     flex-direction: row;
     padding-block: 0;
-    padding-inline-end: var(--media-spacing);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     display: flex;
     position: absolute;

package/dist/dev/internal/skins/neutral-live-video/register.d.ts CHANGED Viewed

@@ -21,20 +21,20 @@ import "../../../define/ui/menu.js";
 import "../../../define/ui/menu-content.js";
 import "../../../define/ui/menu-radio-item.js";
 import "../../../define/ui/menu-item-indicator.js";
-import "../../../define/ui/captions-button.js";
 import "../../../define/ui/mute-button.js";
 import "../../../define/ui/volume-popover.js";
 import "../../../define/ui/volume-slider.js";
-import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/live-button.js";
 import "../../../define/ui/poster.js";
 import "../../../define/ui/title.js";
 import "../../../define/ui/controls-backdrop.js";
+import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/cast-button.js";
 import "../../../define/ui/pip-button.js";
 import "../../../define/ui/fullscreen-button.js";
+import "../../../define/ui/captions-button.js";
 import "../../../define/ui/captions-radio-group.js";
 import "../../../define/ui/gesture.js";
 import "../../../define/ui/volume-indicator.js";

package/dist/dev/internal/skins/neutral-live-video/skin.css CHANGED Viewed

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -38,7 +40,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --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);
@@ -51,9 +53,9 @@
     --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-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -153,10 +155,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 40%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
@@ -168,9 +180,17 @@
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
@@ -185,9 +205,20 @@
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: 40%;
     --media-controls-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
     --media-indicator-gradient: linear-gradient(to bottom,
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
@@ -197,6 +228,7 @@
   }
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
@@ -208,7 +240,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
@@ -529,6 +570,11 @@
     transition-duration: var(--media-duration-instant);
   }
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop[data-scope="document"] {
+    border-radius: 0;
+    position: fixed;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
     opacity: 0;
   }
@@ -599,6 +645,11 @@
     transition-duration: var(--media-duration-instant);
   }
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 1rem);
+    position: fixed;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
     opacity: 0;
@@ -712,11 +763,10 @@
     transition-duration: .15s;
     transition-duration: calc(var(--media-duration-controls) / 2);
     text-shadow: 0 1px 0 var(--media-shadow-current-color);
-    inset-inline: 0;
     font-weight: 400;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
-    top: 0;
+    inset: 0;
   }
   :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
@@ -725,6 +775,16 @@
     transition-duration: var(--media-duration-controls);
   }
+  :where(.media-skin[data-theme="neutral"]) .media-title:before {
+    z-index: -1;
+    height: var(--media-controls-gradient-height);
+    content: "";
+    background-image: var(--media-controls-top-gradient);
+    inset-inline: 0;
+    position: absolute;
+    top: 0;
+  }
   @media (pointer: fine) {
     :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
       filter: blur(var(--media-hidden-blur));
@@ -792,9 +852,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
   :where(.media-skin[data-theme="neutral"]) .media-status-announcer {
@@ -874,6 +934,7 @@
   :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator {
     padding: calc(var(--media-spacing) * 4);
     text-align: center;
+    filter: var(--media-filter-feedback);
     transition-property: opacity, scale;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
@@ -1465,6 +1526,10 @@
     opacity: .5;
   }
+  :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unsupported"] {
     display: none;
   }
@@ -1957,9 +2022,12 @@
     z-index: 10;
     border-radius: inherit;
     background-image: var(--media-controls-gradient);
+    background-size: 100% var(--media-controls-bottom-gradient-height);
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-controls);
+    background-position: bottom;
+    background-repeat: no-repeat;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;

package/dist/dev/internal/skins/neutral-video/register.d.ts CHANGED Viewed

@@ -25,27 +25,27 @@ import "../../../define/ui/play-button.js";
 import "../../../define/ui/tooltip.js";
 import "../../../define/ui/tooltip-label.js";
 import "../../../define/ui/tooltip-shortcut.js";
+import "../../../define/ui/time-group.js";
+import "../../../define/ui/time.js";
+import "../../../define/ui/time-separator.js";
 import "../../../define/ui/menu.js";
 import "../../../define/ui/menu-content.js";
 import "../../../define/ui/playback-rate-radio-group.js";
 import "../../../define/ui/menu-radio-item.js";
 import "../../../define/ui/menu-item-indicator.js";
-import "../../../define/ui/time-group.js";
-import "../../../define/ui/time.js";
-import "../../../define/ui/time-separator.js";
-import "../../../define/ui/captions-button.js";
 import "../../../define/ui/mute-button.js";
 import "../../../define/ui/volume-popover.js";
 import "../../../define/ui/volume-slider.js";
-import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/poster.js";
 import "../../../define/ui/title.js";
 import "../../../define/ui/controls-backdrop.js";
+import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/cast-button.js";
 import "../../../define/ui/pip-button.js";
 import "../../../define/ui/fullscreen-button.js";
+import "../../../define/ui/captions-button.js";
 import "../../../define/ui/captions-radio-group.js";
 import "../../../define/ui/gesture.js";
 import "../../../define/ui/volume-indicator.js";

package/dist/dev/internal/skins/neutral-video/skin.css CHANGED Viewed

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -38,7 +40,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --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);
@@ -51,9 +53,9 @@
     --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-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -153,10 +155,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 40%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
@@ -168,9 +180,17 @@
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
@@ -185,9 +205,20 @@
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: 40%;
     --media-controls-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
     --media-indicator-gradient: linear-gradient(to bottom,
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
@@ -197,6 +228,7 @@
   }
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
@@ -208,7 +240,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
@@ -529,6 +570,11 @@
     transition-duration: var(--media-duration-instant);
   }
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop[data-scope="document"] {
+    border-radius: 0;
+    position: fixed;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
     opacity: 0;
   }
@@ -599,6 +645,11 @@
     transition-duration: var(--media-duration-instant);
   }
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 1rem);
+    position: fixed;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
     opacity: 0;
@@ -712,11 +763,10 @@
     transition-duration: .15s;
     transition-duration: calc(var(--media-duration-controls) / 2);
     text-shadow: 0 1px 0 var(--media-shadow-current-color);
-    inset-inline: 0;
     font-weight: 400;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
-    top: 0;
+    inset: 0;
   }
   :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
@@ -725,6 +775,16 @@
     transition-duration: var(--media-duration-controls);
   }
+  :where(.media-skin[data-theme="neutral"]) .media-title:before {
+    z-index: -1;
+    height: var(--media-controls-gradient-height);
+    content: "";
+    background-image: var(--media-controls-top-gradient);
+    inset-inline: 0;
+    position: absolute;
+    top: 0;
+  }
   @media (pointer: fine) {
     :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
       filter: blur(var(--media-hidden-blur));
@@ -792,9 +852,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
   :where(.media-skin[data-theme="neutral"]) .media-status-announcer {
@@ -814,6 +874,7 @@
     gap: var(--media-spacing);
     padding: calc(var(--media-spacing) * 4);
     text-align: center;
+    filter: var(--media-filter-feedback);
     grid-row-start: 1;
     grid-column-start: 2;
     display: grid;
@@ -934,6 +995,7 @@
   :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator {
     padding: calc(var(--media-spacing) * 4);
     text-align: center;
+    filter: var(--media-filter-feedback);
     transition-property: opacity, scale;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
@@ -2127,6 +2189,10 @@
     opacity: .5;
   }
+  :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unsupported"] {
     display: none;
   }
@@ -2535,9 +2601,12 @@
     z-index: 10;
     border-radius: inherit;
     background-image: var(--media-controls-gradient);
+    background-size: 100% var(--media-controls-bottom-gradient-height);
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-controls);
+    background-position: bottom;
+    background-repeat: no-repeat;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;
@@ -2722,22 +2791,13 @@
     }
   }
-  :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-current-value {
-    display: none;
-  }
-  @container media-root (width >= 42rem) {
-    :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-current-value {
-      display: inline;
-    }
-  }
   :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value {
     font-variant-numeric: tabular-nums;
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: none;
   }
   :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value[data-unavailable] {
@@ -2747,6 +2807,7 @@
   @container media-root (width >= 42rem) {
     :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value {
       color: var(--media-controls-foreground);
+      display: inline;
     }
     @supports (color: color-mix(in lab, red, red)) {

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

@@ -78,7 +78,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-controls-group>
 <media-controls-group class="video-time-slider-group">
 <media-time-group class="media-time-group">
-<media-time class="media-time-toggle media-time-current-value" type="current" toggle>
+<media-time class="media-time-toggle" type="current" toggle>
 </media-time>
 <media-time-separator class="media-time-separator">
 </media-time-separator>