zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(skins): remove vjs- prefixed CSS custom properties (#179)

Browse Source
This commit is contained in:
Sam Potts
2025-11-11 22:48:32 +11:00
committed by GitHub
parent eea94aeb95
commit a62623ba41
8 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-demo/src/frosted-eject.css
+4 -2
View File
@@ -7,11 +7,13 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
border-radius: var(--frosted-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
media-container::before,
media-container::after {
examples/html-demo/src/minimal-eject.css
+4 -2
View File
@@ -7,11 +7,13 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
border-radius: var(--minimal-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
media-container::after {
content: '';
examples/react-demo/src/skins/frosted-eject/frosted.css
+4 -2
View File
@@ -7,11 +7,13 @@
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
border-radius: var(--frosted-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.vjs-frosted-skin::before,
.vjs-frosted-skin::after {
examples/react-demo/src/skins/minimal-eject/minimal.css
+4 -2
View File
@@ -7,11 +7,13 @@
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
border-radius: var(--minimal-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.vjs-minimal-skin::after {
content: '';
packages/html/src/skins/frosted/styles.css
+4 -2
View File
@@ -7,11 +7,13 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
border-radius: var(--frosted-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
media-container::before,
media-container::after {
packages/html/src/skins/minimal/styles.css
+4 -2
View File
@@ -7,11 +7,13 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 0.75rem);
border-radius: var(--minimal-border-radius, 0.75rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
media-container::after {
content: '';
packages/react/src/skins/frosted/styles.ts
+2 -2
View File
@@ -12,9 +12,9 @@ function cn(...classes: (string | undefined)[]): string {
const styles: FrostedSkinStyles = {
MediaContainer: cn(
'vjs', // Scope preflight
'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--vjs-border-radius,2rem)',
'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)',
// Base typography
'vjs:text-[0.8125rem]',
'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',
// Fancy borders
'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',
packages/react/src/skins/minimal/styles.ts
+2 -2
View File
@@ -12,9 +12,9 @@ function cn(...classes: (string | undefined)[]): string {
const styles: MinimalSkinStyles = {
MediaContainer: cn(
'vjs', // Scope preflight
'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--vjs-border-radius,0.75rem)',
'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--minimal-border-radius,0.75rem)',
// Base typography
'vjs:text-[0.8125rem]',
'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',
// Fancy borders
'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/15 vjs:after:ring-1 vjs:dark:after:ring-white/15 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
// Prevent rounded corners in fullscreen