@videojs/html 10.1.0 → 10.3.0

package/dist/dev/define/video/neutral-skin.css

@@ -55,6 +55,8 @@ media-container video::-webkit-media-text-track-container {
     --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%;
@@ -82,7 +84,7 @@ media-container video::-webkit-media-text-track-container {
     --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);
@@ -95,9 +97,9 @@ media-container video::-webkit-media-text-track-container {
     --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);
@@ -197,10 +199,20 @@ media-container video::-webkit-media-text-track-container {
 @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,
@@ -212,9 +224,17 @@ media-container video::-webkit-media-text-track-container {
   @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);
     }
   }
 
@@ -229,9 +249,20 @@ media-container video::-webkit-media-text-track-container {
 
   .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),
@@ -241,6 +272,7 @@ media-container video::-webkit-media-text-track-container {
   }
 
   .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);
   }
 
@@ -252,7 +284,16 @@ media-container video::-webkit-media-text-track-container {
     .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);
     }
   }
 
@@ -573,6 +614,11 @@ media-container video::-webkit-media-text-track-container {
     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;
   }
@@ -643,6 +689,11 @@ media-container video::-webkit-media-text-track-container {
     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;
@@ -756,11 +807,10 @@ media-container video::-webkit-media-text-track-container {
     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]) {
@@ -769,6 +819,16 @@ media-container video::-webkit-media-text-track-container {
     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));
@@ -836,9 +896,9 @@ media-container video::-webkit-media-text-track-container {
     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 {
@@ -858,6 +918,7 @@ media-container video::-webkit-media-text-track-container {
     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;
@@ -978,6 +1039,7 @@ media-container video::-webkit-media-text-track-container {
   :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);
@@ -2171,6 +2233,10 @@ media-container video::-webkit-media-text-track-container {
     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;
   }
@@ -2579,9 +2645,12 @@ media-container video::-webkit-media-text-track-container {
     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;
@@ -2766,22 +2835,13 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
-  :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] {
@@ -2791,6 +2851,7 @@ media-container video::-webkit-media-text-track-container {
   @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)) {