From 464d5e5fa2e65c0b3f7f04064cc9f987bfcb967d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 12 Mar 2026 07:49:10 +1100 Subject: [PATCH] fix(skin): standardize backdrop-filter and fix minimal root sizing (#895) Co-authored-by: Claude Opus 4.6 --- packages/skins/src/default/css/audio.css | 2 +- packages/skins/src/default/css/components/overlay.css | 4 ++-- packages/skins/src/default/css/video.css | 2 +- packages/skins/src/default/tailwind/components/overlay.ts | 4 ++-- packages/skins/src/default/tailwind/video.tailwind.ts | 2 +- packages/skins/src/minimal/css/audio.css | 2 +- packages/skins/src/minimal/css/components/overlay.css | 4 ++-- packages/skins/src/minimal/css/components/popup.css | 2 +- packages/skins/src/minimal/css/components/root.css | 6 ++++++ packages/skins/src/minimal/tailwind/components/overlay.ts | 4 ++-- packages/skins/src/minimal/tailwind/components/popup.ts | 2 +- 11 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css index 56264b9c..059e8753 100644 --- a/packages/skins/src/default/css/audio.css +++ b/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); diff --git a/packages/skins/src/default/css/components/overlay.css b/packages/skins/src/default/css/components/overlay.css index 1fe6f2c7..267de670 100644 --- a/packages/skins/src/default/css/components/overlay.css +++ b/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); } diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css index e161a7fc..0f9526d0 100644 --- a/packages/skins/src/default/css/video.css +++ b/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); diff --git a/packages/skins/src/default/tailwind/components/overlay.ts b/packages/skins/src/default/tailwind/components/overlay.ts index 5a7b05e5..7c5be90e 100644 --- a/packages/skins/src/default/tailwind/components/overlay.ts +++ b/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' ); diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts index ee281fc2..eea1b6c7 100644 --- a/packages/skins/src/default/tailwind/video.tailwind.ts +++ b/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 diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css index 8f644366..142bff35 100644 --- a/packages/skins/src/minimal/css/audio.css +++ b/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); diff --git a/packages/skins/src/minimal/css/components/overlay.css b/packages/skins/src/minimal/css/components/overlay.css index 7d3e5f12..bcfaf985 100644 --- a/packages/skins/src/minimal/css/components/overlay.css +++ b/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); } diff --git a/packages/skins/src/minimal/css/components/popup.css b/packages/skins/src/minimal/css/components/popup.css index e01614e0..cdafc961 100644 --- a/packages/skins/src/minimal/css/components/popup.css +++ b/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); diff --git a/packages/skins/src/minimal/css/components/root.css b/packages/skins/src/minimal/css/components/root.css index b85393bb..174ea673 100644 --- a/packages/skins/src/minimal/css/components/root.css +++ b/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; + } } diff --git a/packages/skins/src/minimal/tailwind/components/overlay.ts b/packages/skins/src/minimal/tailwind/components/overlay.ts index 8b10c3b4..174454e1 100644 --- a/packages/skins/src/minimal/tailwind/components/overlay.ts +++ b/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' ); diff --git a/packages/skins/src/minimal/tailwind/components/popup.ts b/packages/skins/src/minimal/tailwind/components/popup.ts index 57a32120..42865327 100644 --- a/packages/skins/src/minimal/tailwind/components/popup.ts +++ b/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'),