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',
),