@videojs/html 10.1.0 → 10.3.0

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

@@ -259,6 +259,11 @@ media-container video::-webkit-media-text-track-container {
     transition-duration: var(--media-duration-slower);
   }
 
+  :where(.media-skin[data-theme="default"]) .media-dialog-backdrop[data-scope="document"] {
+    border-radius: 0;
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="default"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
     opacity: 0;
   }
@@ -346,6 +351,11 @@ media-container video::-webkit-media-text-track-container {
     transition-duration: var(--media-duration-slower);
   }
 
+  :where(.media-skin[data-theme="default"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 1rem);
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="default"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
     opacity: 0;
@@ -448,8 +458,8 @@ media-container video::-webkit-media-text-track-container {
     pointer-events: none;
     isolation: isolate;
     z-index: 20;
-    min-height: calc(var(--media-control-size) + (calc(var(--media-spacing) * 2)));
     transform-origin: top;
+    grid-template-rows: minmax(calc(var(--media-control-size) - (calc(var(--media-spacing) * .5))), auto);
     padding-inline: calc(var(--media-spacing) * 6);
     padding-top: calc(var(--media-spacing) * 2.5);
     font-size: calc(var(--media-spacing) * 4);
@@ -460,13 +470,13 @@ 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;
+    align-content: flex-start;
     align-items: center;
     font-weight: 500;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
-    display: flex;
+    display: grid;
     position: absolute;
-    top: 0;
+    inset: 0;
   }
 
   :where(.media-skin[data-theme="default"]) .media-title:not([data-visible]) {
@@ -484,11 +494,24 @@ media-container video::-webkit-media-text-track-container {
 
   @container media-root (width >= 28rem) {
     :where(.media-skin[data-theme="default"]) .media-title {
+      grid-template-rows: minmax(calc(var(--media-control-size) - (calc(var(--media-spacing) * 2))), auto);
       padding-inline: calc(var(--media-spacing) * 6);
       padding-top: calc(var(--media-spacing) * 4);
     }
   }
 
+  @container media-root (width >= 32rem) {
+    :where(.media-skin[data-theme="default"]) .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;
+    }
+  }
+
   @container media-root (width < 32rem) {
     :where(.media-skin[data-theme="default"]) .media-title {
       padding-right: calc(var(--media-spacing) * 36);
@@ -549,9 +572,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="default"]) .media-status-announcer {
@@ -1212,6 +1235,10 @@ media-container video::-webkit-media-text-track-container {
     opacity: .5;
   }
 
+  :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-availability="unsupported"] {
     display: none;
   }
@@ -1724,9 +1751,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;
@@ -1736,6 +1766,17 @@ media-container video::-webkit-media-text-track-container {
     opacity: 0;
   }
 
+  @container media-root (width < 32rem) {
+    :where(.media-skin[data-theme="default"][data-preset="live-video"]) .video-controls-backdrop:before {
+      height: var(--media-controls-gradient-height);
+      content: "";
+      background-image: var(--media-controls-top-gradient);
+      inset-inline: 0;
+      position: absolute;
+      top: 0;
+    }
+  }
+
   :where(.media-skin[data-theme="default"][data-preset="live-video"]) .video-controls-content {
     padding: var(--media-spacing);
     color: var(--media-controls-foreground);
@@ -1897,7 +1938,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);
@@ -1910,9 +1951,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);
@@ -2012,10 +2053,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,
@@ -2027,9 +2078,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);
     }
   }
 
@@ -2044,9 +2103,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),
@@ -2056,6 +2126,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);
   }
 
@@ -2067,7 +2138,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);
     }
   }