From 17ed67a1f7a731463a0f2a827a0876347bdbbe98 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 16 Jan 2026 17:32:24 +0000 Subject: [PATCH] fix(examples): fix CSS consistency issues (#309) --- examples/html/src/frosted-eject.css | 6 ++---- examples/html/src/minimal-eject.css | 6 ++---- examples/react/src/skins/ejected/frosted/frosted.css | 4 ++-- examples/react/src/skins/ejected/minimal/minimal.css | 6 ++---- .../__tech-preview__/html/src/skins/frosted/styles.css | 10 ++-------- .../__tech-preview__/html/src/skins/minimal/styles.css | 10 ++-------- .../__tech-preview__/react/src/skins/frosted/styles.ts | 2 +- .../__tech-preview__/react/src/skins/minimal/styles.ts | 2 +- 8 files changed, 14 insertions(+), 32 deletions(-) diff --git a/examples/html/src/frosted-eject.css b/examples/html/src/frosted-eject.css index 30cecaca..4ec8468b 100644 --- a/examples/html/src/frosted-eject.css +++ b/examples/html/src/frosted-eject.css @@ -325,12 +325,10 @@ media-preview-time-display { } media-popover { - margin: 0; - border: none; - box-shadow: none; - background: transparent; padding: 0.75rem 0.25rem; border-radius: calc(infinity * 1px); + margin: 0; + border: 0; } /* Tooltip Component Styles */ diff --git a/examples/html/src/minimal-eject.css b/examples/html/src/minimal-eject.css index d7bfc687..b805760b 100644 --- a/examples/html/src/minimal-eject.css +++ b/examples/html/src/minimal-eject.css @@ -305,12 +305,10 @@ media-preview-time-display { } media-popover { + padding: 0.5rem; margin: 0; - border: none; - box-shadow: none; + border: 0; background: transparent; - padding: 0.75rem 0.25rem; - border-radius: calc(infinity * 1px); } /* Tooltip Component Styles */ diff --git a/examples/react/src/skins/ejected/frosted/frosted.css b/examples/react/src/skins/ejected/frosted/frosted.css index cbe4e071..0a133178 100644 --- a/examples/react/src/skins/ejected/frosted/frosted.css +++ b/examples/react/src/skins/ejected/frosted/frosted.css @@ -322,10 +322,10 @@ } .vjs-frosted-skin .popover-popup { - margin: 0; - border: none; padding: 0.75rem 0.25rem; border-radius: calc(infinity * 1px); + margin: 0; + border: 0; } /* Tooltip Component Styles */ diff --git a/examples/react/src/skins/ejected/minimal/minimal.css b/examples/react/src/skins/ejected/minimal/minimal.css index 4f2a3168..c8cada81 100644 --- a/examples/react/src/skins/ejected/minimal/minimal.css +++ b/examples/react/src/skins/ejected/minimal/minimal.css @@ -302,12 +302,10 @@ } .vjs-minimal-skin .popover-popup { + padding: 0.5rem; margin: 0; - border: none; - box-shadow: none; + border: 0; background: transparent; - padding: 0.75rem 0.25rem; - border-radius: calc(infinity * 1px); } /* Tooltip Component Styles */ diff --git a/packages/__tech-preview__/html/src/skins/frosted/styles.css b/packages/__tech-preview__/html/src/skins/frosted/styles.css index 03989293..1429a77e 100644 --- a/packages/__tech-preview__/html/src/skins/frosted/styles.css +++ b/packages/__tech-preview__/html/src/skins/frosted/styles.css @@ -324,20 +324,14 @@ media-preview-time-display { } media-popover { - margin: 0; - border: none; - box-shadow: none; - background: transparent; padding: 0.75rem 0.25rem; border-radius: calc(infinity * 1px); + margin: 0; + border: 0; } /* Tooltip Component Styles */ media-tooltip { - margin: 0; - border: none; - box-shadow: none; - background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.625rem; border-radius: calc(infinity * 1px); diff --git a/packages/__tech-preview__/html/src/skins/minimal/styles.css b/packages/__tech-preview__/html/src/skins/minimal/styles.css index bcb1f723..94472e49 100644 --- a/packages/__tech-preview__/html/src/skins/minimal/styles.css +++ b/packages/__tech-preview__/html/src/skins/minimal/styles.css @@ -303,20 +303,14 @@ media-preview-time-display { } media-popover { + padding: 0.5rem; margin: 0; - border: none; - box-shadow: none; + border: 0; background: transparent; - padding: 0.75rem 0.25rem; - border-radius: calc(infinity * 1px); } /* Tooltip Component Styles */ media-tooltip { - margin: 0; - border: none; - box-shadow: none; - background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.5rem; border-radius: 0.25rem; diff --git a/packages/__tech-preview__/react/src/skins/frosted/styles.ts b/packages/__tech-preview__/react/src/skins/frosted/styles.ts index 35145cfb..89f196e3 100644 --- a/packages/__tech-preview__/react/src/skins/frosted/styles.ts +++ b/packages/__tech-preview__/react/src/skins/frosted/styles.ts @@ -130,7 +130,7 @@ const styles: FrostedSkinStyles = { 'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm', 'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm', ), - PopoverPopup: cn('vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full'), + PopoverPopup: cn('vjs:px-1 vjs:py-3 vjs:rounded-full vjs:m-0 vjs:border-0'), TooltipPopup: cn('vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1'), }; diff --git a/packages/__tech-preview__/react/src/skins/minimal/styles.ts b/packages/__tech-preview__/react/src/skins/minimal/styles.ts index 25d15ca5..491b9f6c 100644 --- a/packages/__tech-preview__/react/src/skins/minimal/styles.ts +++ b/packages/__tech-preview__/react/src/skins/minimal/styles.ts @@ -125,7 +125,7 @@ const styles: MinimalSkinStyles = { 'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm', 'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm', ), - PopoverPopup: cn('vjs:py-2 vjs:bg-transparent'), + PopoverPopup: cn('vjs:p-2 vjs:bg-transparent vjs:m-0 vjs:border-0'), TooltipPopup: cn( 'vjs:whitespace-nowrap vjs:flex vjs:flex-col vjs:rounded vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2 vjs:py-1 vjs:bg-white/20 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90 vjs:shadow-md vjs:shadow-black/5', ),