@videojs/html 10.3.0 → 10.4.0

package/dist/default/define/live-video/compat-skin.css

@@ -613,6 +613,12 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-title {
+      display: none;
+    }
+  }
+
   @container media-root (width < 42rem) {
     :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-title {
       top: calc(var(--media-spacing) * 3.5);
@@ -821,6 +827,12 @@ media-container video::-webkit-media-text-track-container {
     grid-column-start: 1;
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-captions-button {
+      display: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-captions-button-on-icon {
     display: none;
   }
@@ -885,6 +897,14 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-menu-badge {
+    background-color: var(--media-muted);
+    padding-inline: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    border-radius: .25rem;
+    font-weight: 600;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-menu-content {
     overscroll-behavior: none;
     max-height: 100%;
@@ -1483,6 +1503,10 @@ media-container video::-webkit-media-text-track-container {
     inset: 0;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-backdrop:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-buffering):not([data-visible]) .video-controls-backdrop:not([data-visible]) {
     display: none;
   }
@@ -1551,7 +1575,7 @@ media-container video::-webkit-media-text-track-container {
     transition-duration: .15s;
     transition-duration: var(--media-duration-instant);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
-    display: none;
+    display: flex;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -1597,24 +1621,18 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
-  @container media-root (width >= 22.5rem) {
-    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center {
-      display: flex;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center-button {
     background-color: #0006 !important;
   }
 
   @media (hover: hover) {
     :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center-button:hover {
-      background-color: #000000d9 !important;
+      background-color: #0009 !important;
     }
   }
 
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center-button:focus-visible, :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center-button[aria-expanded="true"] {
-    background-color: #000000d9 !important;
+    background-color: #0009 !important;
   }
 
   @media (forced-colors: active) {
@@ -1654,11 +1672,25 @@ media-container video::-webkit-media-text-track-container {
     height: calc(var(--media-spacing) * 14.5) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 10) !important;
+      height: calc(var(--media-spacing) * 10) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .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="compat"][data-preset="live-video"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5) !important;
+      height: calc(var(--media-spacing) * 5) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-content {
     pointer-events: none;
     z-index: 30;
@@ -1705,6 +1737,10 @@ media-container video::-webkit-media-text-track-container {
     position: absolute;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-top:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-content):not([data-visible]) .video-controls-top {
     pointer-events: none;
     opacity: 0;
@@ -1759,6 +1795,16 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-top:not([data-started]) {
+      opacity: 0;
+    }
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .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="compat"][data-preset="live-video"]) .video-controls-video-bottom {
       padding-inline: calc(var(--media-spacing) * 2);
@@ -1769,6 +1815,12 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+      opacity: 0;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-time-current-value {
     display: none;
   }
@@ -1968,29 +2020,29 @@ media-container video::-webkit-media-text-track-container {
 
 @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);
@@ -1999,8 +2051,8 @@ media-container video::-webkit-media-text-track-container {
     --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;
@@ -2037,16 +2089,31 @@ media-container video::-webkit-media-text-track-container {
     --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))));
     }
   }
 
@@ -2096,24 +2163,48 @@ media-container video::-webkit-media-text-track-container {
     --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) 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,
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 10%, transparent),
-      transparent);
+  }
+
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
+      --media-controls-gradient: linear-gradient(to top,
+        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-thumbnail-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 10%, transparent),
+        transparent);
+    }
+
+    .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
+      --media-controls-gradient: linear-gradient(to top,
+        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-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),
+        transparent);
+    }
   }
 
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
@@ -2145,23 +2236,7 @@ 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) 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),
-      transparent);
+    --media-controls-bottom-gradient-height: max(40%, calc(var(--media-spacing) * 44));
     --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
@@ -2369,7 +2444,7 @@ media-container video::-webkit-media-text-track-container {
   @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;
@@ -2377,6 +2452,12 @@ media-container video::-webkit-media-text-track-container {
       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);