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

feat(skin): add --media-color-primary customization (#957)

Browse Source
This commit is contained in:
Sam Potts
2026-03-16 10:47:13 +11:00
committed by GitHub
parent 177bd26c1f
commit 0e9f5376e1
12 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/audio.css
+5 -5
View File
@@ -23,21 +23,21 @@
--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(16px) saturate(1.5);
--media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.1);
--media-surface-background-color: oklch(0 0 0 / 0.4);
--media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
}
}
/* ==========================================================================
Controls
========================================================================== */
Controls
========================================================================== */
.media-default-skin--audio .media-controls {
@media (prefers-color-scheme: dark) {
color: oklch(1 0 0);
}
color: var(--media-controls-text-color);
}
/* ==========================================================================
packages/skins/src/default/css/components/controls.css
+2 -2
View File
@@ -9,12 +9,12 @@
gap: 0.075rem;
padding: 0.175rem;
border-radius: calc(infinity * 1px);
--media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));
--media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
--media-controls-current-shadow-color-subtle: oklch(
from var(--media-controls-current-shadow-color) l c h /
calc(alpha * 0.4)
);
text-shadow: 0 0 1px var(--media-controls-current-shadow-color);
text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
@container media-root (width > 40rem) {
gap: 0.125rem;
packages/skins/src/default/css/video.css
+1 -2
View File
@@ -59,8 +59,7 @@
bottom: 0.75rem;
inset-inline: 0.75rem;
z-index: 10;
color: oklch(1 0 0);
color: var(--media-color-primary, oklch(1 0 0));
will-change: scale, transform, filter, opacity;
transition-timing-function: ease-out;
transform-origin: bottom;