@videojs/html 10.0.0-beta.27 → 10.0.0-beta.28

package/docs/how-to/customize-skins.md

@@ -1085,9 +1085,14 @@ media-container {
 }
 
 .media-default-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 2.5);
   --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -1118,10 +1123,10 @@ media-container {
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 1);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 1);
+      width: var(--track-size);
       height: 100%;
     }
   }
@@ -1193,10 +1198,6 @@ media-container {
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: 0.5;
-    --chapter-inset-end: 0.5;
-
     position: absolute;
     inset: 0;
     display: flex;
@@ -1207,16 +1208,13 @@ media-container {
     border-radius: inherit;
 
     &:first-child {
-      --chapter-inset-start: 0;
+      --chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0;
+      --chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 1);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.75);
-
       border-radius: inherit;
 
       @media (prefers-reduced-motion: no-preference) {
@@ -1229,16 +1227,15 @@ media-container {
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
-            var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -1246,16 +1243,15 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
-            var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
@@ -1415,7 +1411,7 @@ media-container {
     .media-slider__chapter-title {
       min-width: 0;
       max-width: var(--max-width);
-      padding-inline: calc(var(--spacing) * 3);
+      padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -1446,14 +1442,15 @@ media-container {
       transition-duration: 200ms;
       transition-property: opacity, scale;
     }
+  }
 
-    &[data-pointing]:not([data-dragging])::before,
-    &[data-pointing] :is(.media-slider__thumbnail, .media-slider__value),
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) :is(.media-slider__value, .media-slider__thumbnail) {
-      opacity: 1;
-      filter: blur(0);
-      scale: 1;
-    }
+  &:is([data-pointing], :has(:focus-visible))
+    .media-slider__preview
+    :is(.media-slider__value, .media-slider__thumbnail),
+  .media-slider__preview[data-pointing]:not([data-dragging])::before {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
   }
 }
 
@@ -2257,6 +2254,10 @@ media-container {
       --scale: 1.75;
     }
   }
+
+  * {
+    --focus-ring-color: oklch(1 0 0);
+  }
 }
 
 /* Error Dialog  */
@@ -3094,9 +3095,14 @@ media-container {
 }
 
 .media-default-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 2.5);
   --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -3127,10 +3133,10 @@ media-container {
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 1);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 1);
+      width: var(--track-size);
       height: 100%;
     }
   }
@@ -3202,10 +3208,6 @@ media-container {
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: 0.5;
-    --chapter-inset-end: 0.5;
-
     position: absolute;
     inset: 0;
     display: flex;
@@ -3216,16 +3218,13 @@ media-container {
     border-radius: inherit;
 
     &:first-child {
-      --chapter-inset-start: 0;
+      --chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0;
+      --chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 1);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.75);
-
       border-radius: inherit;
 
       @media (prefers-reduced-motion: no-preference) {
@@ -3238,16 +3237,15 @@ media-container {
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
-            var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -3255,16 +3253,15 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
-            var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
@@ -3424,7 +3421,7 @@ media-container {
     .media-slider__chapter-title {
       min-width: 0;
       max-width: var(--max-width);
-      padding-inline: calc(var(--spacing) * 3);
+      padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -3455,14 +3452,15 @@ media-container {
       transition-duration: 200ms;
       transition-property: opacity, scale;
     }
+  }
 
-    &[data-pointing]:not([data-dragging])::before,
-    &[data-pointing] :is(.media-slider__thumbnail, .media-slider__value),
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) :is(.media-slider__value, .media-slider__thumbnail) {
-      opacity: 1;
-      filter: blur(0);
-      scale: 1;
-    }
+  &:is([data-pointing], :has(:focus-visible))
+    .media-slider__preview
+    :is(.media-slider__value, .media-slider__thumbnail),
+  .media-slider__preview[data-pointing]:not([data-dragging])::before {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
   }
 }
 
@@ -5174,8 +5172,8 @@ media-container {
 
   .media-slider__chapter {
     --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: 0.5;
-    --chapter-inset-end: 0.5;
+    --chapter-inset-start: calc(var(--chapter-gap) / 2);
+    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -5185,10 +5183,10 @@ media-container {
     min-height: 0;
 
     &:first-child {
-      --chapter-inset-start: 0;
+      --chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0;
+      --chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
@@ -5208,9 +5206,8 @@ media-container {
       .media-slider__chapter-track {
         height: var(--chapter-track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
-            var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
         );
       }
 
@@ -5225,9 +5222,8 @@ media-container {
       .media-slider__chapter-track {
         width: var(--chapter-track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
-            var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
         );
       }
 
@@ -5339,15 +5335,6 @@ media-container {
       transition-property: opacity, scale;
     }
 
-    &[data-pointing] .media-slider__value,
-    &[data-pointing] .media-slider__thumbnail,
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__value,
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__thumbnail {
-      opacity: 1;
-      filter: blur(0);
-      scale: 1;
-    }
-
     &[data-orientation="horizontal"]::before {
       top: 50%;
       left: var(--media-slider-pointer);
@@ -5366,6 +5353,14 @@ media-container {
       scale: 1;
     }
   }
+
+  &:is([data-pointing], :has(:focus-visible))
+    .media-slider__preview
+    :is(.media-slider__value, .media-slider__thumbnail) {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
+  }
 }
 
 .media-minimal-skin {
@@ -6203,6 +6198,10 @@ media-container {
       --scale: 1.75;
     }
   }
+
+  * {
+    --focus-ring-color: oklch(1 0 0);
+  }
 }
 
 /* Error Dialog */
@@ -7190,8 +7189,8 @@ media-container {
 
   .media-slider__chapter {
     --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: 0.5;
-    --chapter-inset-end: 0.5;
+    --chapter-inset-start: calc(var(--chapter-gap) / 2);
+    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -7201,10 +7200,10 @@ media-container {
     min-height: 0;
 
     &:first-child {
-      --chapter-inset-start: 0;
+      --chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0;
+      --chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
@@ -7224,9 +7223,8 @@ media-container {
       .media-slider__chapter-track {
         height: var(--chapter-track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
-            var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
         );
       }
 
@@ -7241,9 +7239,8 @@ media-container {
       .media-slider__chapter-track {
         width: var(--chapter-track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
-            var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
         );
       }
 
@@ -7355,15 +7352,6 @@ media-container {
       transition-property: opacity, scale;
     }
 
-    &[data-pointing] .media-slider__value,
-    &[data-pointing] .media-slider__thumbnail,
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__value,
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__thumbnail {
-      opacity: 1;
-      filter: blur(0);
-      scale: 1;
-    }
-
     &[data-orientation="horizontal"]::before {
       top: 50%;
       left: var(--media-slider-pointer);
@@ -7382,6 +7370,14 @@ media-container {
       scale: 1;
     }
   }
+
+  &:is([data-pointing], :has(:focus-visible))
+    .media-slider__preview
+    :is(.media-slider__value, .media-slider__thumbnail) {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
+  }
 }
 
 .media-minimal-skin {