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): slightly more idiomatic Tailwind, added custom properties (#175)

Browse Source
This commit is contained in:
Sam Potts
2025-11-10 22:52:16 +11:00
committed by GitHub
parent 4a2d580bb3
commit 694afb7de9
20 changed files with 134 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-demo/index.html
-13
View File
@@ -4,19 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VJS HTML Demo</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
body {
font-family:
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
<h1>Video.js 10 HTML Demos</h1>
examples/html-demo/minimal-eject.html
+1 -1
View File
@@ -27,7 +27,7 @@
display: block;
width: 100%;
height: 100%;
border-radius: 2rem;
border-radius: 0.75rem;
max-width: 960px;
margin: 2rem auto;
aspect-ratio: 16/9;
examples/html-demo/src/frosted-eject.css
+4 -3
View File
@@ -7,10 +7,11 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-size: 0.8125rem;
line-height: 1.5;
border-radius: inherit;
background: oklab(0 0 0);
}
media-container::before,
media-container::after {
@@ -204,8 +205,8 @@ media-mute-button .icon {
}
media-mute-button:not([data-volume-level]) .volume-low-icon,
media-mute-button[data-volume-level='high'] .volume-high-icon,
media-mute-button[data-volume-level='medium'] .volume-high-icon,
media-mute-button[data-volume-level='low'] .volume-low-icon,
media-mute-button[data-volume-level='medium'] .volume-low-icon,
media-mute-button[data-volume-level='off'] .volume-off-icon {
display: inline;
}
examples/html-demo/src/minimal-eject.css
+6 -5
View File
@@ -7,10 +7,11 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-size: 0.8125rem;
line-height: 1.5;
border-radius: inherit;
background: oklab(0 0 0);
}
media-container::after {
content: '';
@@ -19,11 +20,11 @@ media-container::after {
border-radius: inherit;
z-index: 10;
inset: 0;
box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);
box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);
}
@media (prefers-color-scheme: dark) {
media-container::after {
box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);
box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
}
}
@@ -183,8 +184,8 @@ media-mute-button .icon {
}
media-mute-button:not([data-volume-level]) .volume-low-icon,
media-mute-button[data-volume-level='high'] .volume-high-icon,
media-mute-button[data-volume-level='medium'] .volume-high-icon,
media-mute-button[data-volume-level='low'] .volume-low-icon,
media-mute-button[data-volume-level='medium'] .volume-low-icon,
media-mute-button[data-volume-level='off'] .volume-off-icon {
display: inline;
}