From 177bd26c1fae2ff436e614a87614841a07b836fd Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 16 Mar 2026 08:38:25 +1100
Subject: [PATCH] fix(skin): bake in safari layout fix into skins (#954)

---
 packages/html/src/define/audio/minimal-skin.css  |  1 -
 .../src/define/audio/minimal-skin.tailwind.ts    |  2 +-
 packages/html/src/define/audio/skin.css          |  1 -
 packages/html/src/define/audio/skin.tailwind.ts  |  2 +-
 packages/html/src/define/shared.css              |  1 +
 packages/html/src/define/skin-mixin.ts           | 16 +++++++++++-----
 packages/html/src/define/video/minimal-skin.css  |  1 -
 .../src/define/video/minimal-skin.tailwind.ts    |  2 +-
 packages/html/src/define/video/skin.css          |  1 -
 packages/html/src/define/video/skin.tailwind.ts  |  2 +-
 .../src/minimal/tailwind/components/time.ts      |  2 +-
 11 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/html/src/define/audio/minimal-skin.css b/packages/html/src/define/audio/minimal-skin.css
index 363d6ab8..f7064f30 100644
--- a/packages/html/src/define/audio/minimal-skin.css
+++ b/packages/html/src/define/audio/minimal-skin.css
@@ -1,2 +1 @@
 @import "@videojs/skins/minimal/css/audio.css";
-@import "../shared.css";
diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts
index bbb8914c..be818d03 100644
--- a/packages/html/src/define/audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts
@@ -40,7 +40,7 @@ function getTemplateHTML() {
       <slot name="media"></slot>
 
       <div class="${controls}">
-        <media-tooltip-group class="contents">
+        <media-tooltip-group>
           <div class="${buttonGroup}">
             <span class="${tooltipState.play.wrapper}">
               <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
diff --git a/packages/html/src/define/audio/skin.css b/packages/html/src/define/audio/skin.css
index 5549ac65..d02eea76 100644
--- a/packages/html/src/define/audio/skin.css
+++ b/packages/html/src/define/audio/skin.css
@@ -1,2 +1 @@
 @import "@videojs/skins/default/css/audio.css";
-@import "../shared.css";
diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
index 7d79a902..57cb9778 100644
--- a/packages/html/src/define/audio/skin.tailwind.ts
+++ b/packages/html/src/define/audio/skin.tailwind.ts
@@ -39,7 +39,7 @@ function getTemplateHTML() {
       <slot name="media"></slot>
 
       <div class="${controls}">
-        <media-tooltip-group class="contents">
+        <media-tooltip-group>
           <span class="${tooltipState.play.wrapper}">
             <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
               ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
diff --git a/packages/html/src/define/shared.css b/packages/html/src/define/shared.css
index 8c2d4e12..dbe98d6a 100644
--- a/packages/html/src/define/shared.css
+++ b/packages/html/src/define/shared.css
@@ -2,6 +2,7 @@ media-tooltip-group {
   display: contents;
 }
 
+/* Fixes a weird issue with Safari when setting aspect-ratio */
 :host {
   display: grid;
 }
diff --git a/packages/html/src/define/skin-mixin.ts b/packages/html/src/define/skin-mixin.ts
index 81614dd6..759145d3 100644
--- a/packages/html/src/define/skin-mixin.ts
+++ b/packages/html/src/define/skin-mixin.ts
@@ -1,17 +1,21 @@
 import type { ReactiveElement } from '@videojs/element';
 import type { Constructor } from '@videojs/utils/types';
-import styles from './base.css?inline';
+import rootStyles from './base.css?inline';
+import sharedStyles from './shared.css?inline';
 
 const STYLES_ID = '__media-styles';
 
-function ensureStyles(): void {
+function ensureRootStyles(): void {
   if (document.getElementById(STYLES_ID)) return;
   const style = document.createElement('style');
   style.id = STYLES_ID;
-  style.textContent = styles;
+  style.textContent = rootStyles;
   document.head.appendChild(style);
 }
 
+const sharedSheet = new CSSStyleSheet();
+sharedSheet.replaceSync(sharedStyles);
+
 /**
  * Mixin for skin elements that renders the template from a static
  * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
@@ -30,15 +34,17 @@ export function SkinMixin<Base extends Constructor<ReactiveElement>>(
     constructor(...args: any[]) {
       super(...args);
 
-      ensureStyles();
+      ensureRootStyles();
 
       if (!this.shadowRoot) {
         const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };
         this.attachShadow(ctor.shadowRootOptions);
 
+        const sheets: CSSStyleSheet[] = [sharedSheet];
         if (ctor.styles) {
-          this.shadowRoot!.adoptedStyleSheets = [ctor.styles];
+          sheets.push(ctor.styles);
         }
+        this.shadowRoot!.adoptedStyleSheets = sheets;
 
         if (ctor.getTemplateHTML) {
           this.shadowRoot!.innerHTML = ctor.getTemplateHTML();
diff --git a/packages/html/src/define/video/minimal-skin.css b/packages/html/src/define/video/minimal-skin.css
index 1abf9392..383ec1eb 100644
--- a/packages/html/src/define/video/minimal-skin.css
+++ b/packages/html/src/define/video/minimal-skin.css
@@ -1,2 +1 @@
 @import "@videojs/skins/minimal/css/video.css";
-@import "../shared.css";
diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts
index 3fcf6390..abe9d1c8 100644
--- a/packages/html/src/define/video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/video/minimal-skin.tailwind.ts
@@ -52,7 +52,7 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls data-controls="" class="${controls}">
-        <media-tooltip-group class="contents">
+        <media-tooltip-group>
           <div class="${buttonGroup}">
             <span class="${tooltipState.play.wrapper}">
               <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
diff --git a/packages/html/src/define/video/skin.css b/packages/html/src/define/video/skin.css
index 383d5bcd..14b25f0f 100644
--- a/packages/html/src/define/video/skin.css
+++ b/packages/html/src/define/video/skin.css
@@ -1,2 +1 @@
 @import "@videojs/skins/default/css/video.css";
-@import "../shared.css";
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index 13925279..1f235235 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -53,7 +53,7 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls data-controls="" class="${controls}">
-        <media-tooltip-group class="contents">
+        <media-tooltip-group>
           <span class="${tooltipState.play.wrapper}">
             <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
               ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
diff --git a/packages/skins/src/minimal/tailwind/components/time.ts b/packages/skins/src/minimal/tailwind/components/time.ts
index d9fe50d3..e3617687 100644
--- a/packages/skins/src/minimal/tailwind/components/time.ts
+++ b/packages/skins/src/minimal/tailwind/components/time.ts
@@ -3,7 +3,7 @@ import { cn } from '@videojs/utils/style';
 export const time = {
   group: 'flex items-center gap-1',
   current: cn('hidden tabular-nums', '@md/media-controls:inline'),
-  separator: cn('hidden', '@md/media-controls:inline @md/media-controls:text-white/50'),
+  separator: cn('hidden', '@md/media-controls:inline @md/media-controls:text-current/60'),
   duration: cn('tabular-nums', '@md/media-controls:text-current/60'),
   controls: cn('flex flex-row-reverse items-center flex-1 gap-3', '@md/media-controls:flex-row'),
 };