@videojs/html 10.0.0 → 10.1.0

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

@@ -128,7 +128,7 @@ media-container video::-webkit-media-text-track-container {
   :where(.media-skin) {
     --media-caption-track-duration: var(--media-duration-controls);
     --media-caption-track-delay: 25ms;
-    --media-caption-track-y: calc(var(--media-spacing) * -2);
+    --media-caption-track-y: calc(var(--media-spacing) * -3);
   }
 
   :where(.media-skin) video::-webkit-media-text-track-container {
@@ -151,9 +151,13 @@ media-container video::-webkit-media-text-track-container {
     transition-property: transform;
   }
 
-  @container media-root (width >= 42rem) {
+  @container media-root (width < 42rem) {
+    :where(.media-skin)[data-theme="default"][data-controls-visible] video {
+      --media-caption-track-y: calc(var(--media-spacing) * -14);
+    }
+
     :where(.media-skin)[data-theme="neutral"][data-controls-visible] video {
-      --media-caption-track-y: calc(var(--media-spacing) * -12);
+      --media-caption-track-y: calc(var(--media-spacing) * -17);
     }
   }
 
@@ -576,7 +580,7 @@ media-container video::-webkit-media-text-track-container {
 
   :where(.media-skin[data-theme="compat"][data-preset="video"]) .media-title {
     pointer-events: none;
-    inset-inline-start: calc(var(--media-spacing) * 6);
+    inset-inline-start: calc(var(--media-spacing) * 5);
     inset-inline-end: calc(var(--media-spacing) * 34);
     top: calc(var(--media-spacing) * 4);
     z-index: 20;
@@ -625,6 +629,12 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container media-root (width < 42rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="video"]) .media-title {
+      top: calc(var(--media-spacing) * 3.5);
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="video"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -645,6 +655,7 @@ media-container video::-webkit-media-text-track-container {
 
   :where(.media-skin[data-theme="compat"][data-preset="video"]) .media-buffering-indicator {
     pointer-events: none;
+    z-index: 20;
     place-items: center;
     display: grid;
     position: absolute;
@@ -1683,6 +1694,24 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-backdrop {
+    pointer-events: none;
+    z-index: 10;
+    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-buffering):not([data-visible]) .video-controls-backdrop:not([data-visible]) {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-backdrop {
+      background-image: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-bottom {
     pointer-events: auto;
     inset-inline: calc(var(--media-spacing) * 2);
@@ -1729,6 +1758,10 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-buffering {
+    display: contents;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-center {
     pointer-events: auto;
     align-items: center;
@@ -1750,6 +1783,10 @@ media-container video::-webkit-media-text-track-container {
     transition-duration: var(--media-duration);
   }
 
+  :where(:where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-buffering)[data-visible] .video-controls-center {
+    display: none !important;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     :where(:where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-content):not([data-visible]) .video-controls-center {
       transform: translate(-50%, -50%) scale(.9);
@@ -1925,6 +1962,22 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container media-root (width < 42rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-top {
+      inset-inline-end: calc(var(--media-spacing) * 2);
+      top: calc(var(--media-spacing) * 2);
+    }
+
+    @media (forced-colors: active) {
+      :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-top {
+        padding-inline: calc(var(--media-spacing) * 2);
+        padding-block: calc(var(--media-spacing) * 2);
+        inset-inline-end: 0;
+        top: 0;
+      }
+    }
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-video-bottom {
       padding-inline: calc(var(--media-spacing) * 2);
@@ -2070,23 +2123,6 @@ media-container video::-webkit-media-text-track-container {
     display: block;
   }
 
-  :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-backdrop {
-    pointer-events: none;
-    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
-    position: absolute;
-    inset: 0;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-backdrop:not([data-visible]) {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-backdrop {
-      background-image: none;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="video"]) .video-controls-center-seek {
     display: none;
     width: calc(var(--media-spacing) * 9) !important;
@@ -2277,7 +2313,7 @@ media-container video::-webkit-media-text-track-container {
       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));
-    --media-caption-controls-y: calc(var(--media-spacing) * -14);
+    --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),
@@ -2312,10 +2348,18 @@ media-container video::-webkit-media-text-track-container {
       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-caption-controls-y: calc(var(--media-spacing) * -18);
+    --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
 
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+  }
+
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -20);
+  }
+
   @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"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,