fix(skin): standardize backdrop-filter and fix minimal root sizing (#895)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/skins/src/default/css/audio.css

@@ -22,7 +22,7 @@
   --media-surface-inner-border-color: oklch(1 0 0 / 0.1);
   --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
-  --media-surface-backdrop-filter: blur(8px) brightness(0.98) saturate(1.2);
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);

packages/skins/src/default/css/components/overlay.css

@@ -7,7 +7,7 @@
   inset: 0;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
-  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(0) saturate(1.5);
   opacity: 0;
   transition-property: opacity, backdrop-filter;
   transition-duration: 300ms;
@@ -28,5 +28,5 @@
 }
 
 .media-default-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(16px) saturate(1.5);
 }

packages/skins/src/default/css/video.css

@@ -26,7 +26,7 @@
   --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
   --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
-  --media-surface-backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);

packages/skins/src/default/tailwind/components/overlay.ts

@@ -7,7 +7,7 @@ export const overlay = cn(
   // Default: hidden
   'opacity-0',
   'bg-linear-to-t from-black/50 via-black/30 to-transparent',
-  'backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90',
+  'backdrop-blur-none backdrop-saturate-150',
   // Transitions
   'transition-[opacity,backdrop-filter] ease-out',
   'duration-300 delay-500',
@@ -19,7 +19,7 @@ export const overlay = cn(
   'peer-data-open/error:opacity-100',
   'peer-data-open/error:duration-150',
   'peer-data-open/error:delay-0',
-  'peer-data-open/error:backdrop-blur',
+  'peer-data-open/error:backdrop-blur-lg',
   // Reduced motion
   'motion-reduce:duration-100'
 );

packages/skins/src/default/tailwind/video.tailwind.ts

@@ -59,7 +59,7 @@ export const root = (isShadowDOM: boolean) =>
 export const surface = cn(
   baseSurface,
   'bg-white/10',
-  'backdrop-brightness-90 backdrop-saturate-150 backdrop-blur-3xl',
+  'backdrop-saturate-150 backdrop-blur-lg',
   // Border and shadow
   'ring-white/5 shadow-black/10',
   // Border to enhance contrast on lighter videos

packages/skins/src/minimal/css/audio.css

@@ -30,7 +30,7 @@
   gap: 0.5rem;
   padding: 0.375rem;
   background-color: var(--media-controls-background-color);
-  backdrop-filter: blur(8px) brightness(0.98) saturate(1.2);
+  backdrop-filter: blur(16px) saturate(1.5);
   border-radius: var(--media-border-radius, 0.75rem);
   color: var(--media-controls-text-color);
   box-shadow: 0 0 0 1px var(--media-controls-border-color);

packages/skins/src/minimal/css/components/overlay.css

@@ -7,7 +7,7 @@
   inset: 0;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
-  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(0) saturate(1.5);
   opacity: 0;
   transition-property: opacity, backdrop-filter;
   transition-duration: 500ms;
@@ -28,5 +28,5 @@
 }
 
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(16px) saturate(1.5);
 }

packages/skins/src/minimal/css/components/popup.css

@@ -40,7 +40,7 @@
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
+  backdrop-filter: blur(16px) saturate(1.5);
   box-shadow:
     0 4px 6px -1px oklch(0 0 0 / 0.1),
     0 2px 4px -2px oklch(0 0 0 / 0.1);

packages/skins/src/minimal/css/components/root.css

@@ -6,6 +6,8 @@
   position: relative;
   isolation: isolate;
   display: block;
+  height: 100%;
+  width: 100%;
   container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
@@ -19,4 +21,8 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+
+  &:fullscreen {
+    border-radius: 0;
+  }
 }

packages/skins/src/minimal/tailwind/components/overlay.ts

@@ -7,7 +7,7 @@ export const overlay = cn(
   // Default: hidden
   'opacity-0',
   'bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent',
-  'backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90',
+  'backdrop-blur-none backdrop-saturate-150',
   // Transitions
   'transition-[opacity,backdrop-filter] ease-out',
   'duration-500 delay-500',
@@ -19,7 +19,7 @@ export const overlay = cn(
   'peer-data-open/error:opacity-100',
   'peer-data-open/error:duration-150',
   'peer-data-open/error:delay-0',
-  'peer-data-open/error:backdrop-blur',
+  'peer-data-open/error:backdrop-blur-lg',
   // Reduced motion
   'motion-reduce:duration-100'
 );

packages/skins/src/minimal/tailwind/components/popup.ts

@@ -15,7 +15,7 @@ const base = cn(
 export const popup = {
   tooltip: cn(
     base,
-    'px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90 text-[0.75rem] whitespace-nowrap',
+    'px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-lg backdrop-saturate-150 text-[0.75rem] whitespace-nowrap',
     '[--media-tooltip-side-offset:0.5rem]'
   ),
   volume: cn(base, 'py-2.5 px-1 rounded-full'),