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(skin): extract transition properties into CSS custom properties (#1075)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
2026-03-23 12:50:26 +11:00
committed by GitHub
co-authored by Claude Opus 4.6
parent df927f67fc
commit 657e7111b4
23 changed files with 264 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/audio.css
+15 -8
View File
@@ -24,6 +24,16 @@
--media-surface-shadow-color: oklch(0 0 0 / 0.15);
--media-surface-backdrop-filter: blur(16px) saturate(1.5);
--media-text-color: var(--media-color-primary, oklch(0 0 0));
--media-error-dialog-transition-duration: 250ms;
--media-error-dialog-transition-delay: 100ms;
--media-popup-transition-duration: 100ms;
--media-popup-transition-timing-function: ease-out;
@media (prefers-reduced-motion: reduce) {
--media-error-dialog-transition-duration: 50ms;
--media-error-dialog-transition-delay: 0ms;
--media-popup-transition-duration: 0ms;
}
@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.1);
@@ -45,19 +55,13 @@
gap: 0.75rem;
padding-inline: 1.25rem 0.125rem;
transition-property: opacity, filter;
transition-duration: 300ms;
transition-delay: 100ms;
transition-duration: var(--media-error-dialog-transition-duration);
transition-delay: var(--media-error-dialog-transition-delay);
transition-timing-function: ease-out;
border-radius: calc(infinity * 1px);
background-color: var(--media-surface-background-color);
backdrop-filter: var(--media-surface-backdrop-filter);
color: var(--media-text-color);
/* Simple, fast transition for reduced motion users */
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
transition-delay: 0ms;
}
}
.media-default-skin .media-error[data-starting-style] .media-error__dialog,
@@ -65,6 +69,9 @@
opacity: 0;
filter: blur(4px);
}
.media-default-skin .media-error[data-ending-style] .media-error__dialog {
transition-delay: 0ms;
}
.media-default-skin--audio .media-error__content {
flex: 1;
packages/skins/src/default/css/components/overlay.css
+8 -15
View File
@@ -10,27 +10,20 @@
backdrop-filter: blur(0) saturate(1.5);
opacity: 0;
pointer-events: none;
transition-property: opacity, backdrop-filter;
transition-duration: var(--media-controls-transition-duration);
transition-delay: var(--media-controls-transition-delay);
transition-timing-function: ease-out;
}
@media (pointer: fine) {
transition-property: opacity, backdrop-filter;
transition-duration: 300ms;
transition-delay: 500ms;
transition-timing-function: ease-out;
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
}
}
.media-default-skin .media-error ~ .media-overlay {
transition-duration: var(--media-error-dialog-transition-duration);
transition-delay: var(--media-error-dialog-transition-delay);
}
.media-default-skin .media-controls[data-visible] ~ .media-overlay,
.media-default-skin .media-error[data-open] ~ .media-overlay {
opacity: 1;
@media (pointer: fine) {
transition-duration: 150ms;
transition-delay: 0ms;
}
}
.media-default-skin .media-error[data-open] ~ .media-overlay {
packages/skins/src/default/css/components/popup.css
+2 -1
View File
@@ -9,7 +9,8 @@
color: inherit;
overflow: visible;
transition-property: scale, opacity, filter;
transition-duration: 150ms;
transition-duration: var(--media-popup-transition-duration);
transition-timing-function: var(--media-popup-transition-timing-function);
&[data-starting-style],
&[data-ending-style] {
packages/skins/src/default/css/video.css
+37 -31
View File
@@ -23,6 +23,17 @@
.media-default-skin--video {
background: oklch(0 0 0);
--media-spring-transition: linear(
0,
0.034 1.5%,
0.763 9.7%,
1.066 13.9%,
1.198 19.9%,
1.184 21.8%,
0.963 37.5%,
0.997 50.9%,
1
);
--media-border-color: oklch(0 0 0 / 0.1);
--media-surface-background-color: oklch(1 0 0 / 0.1);
--media-surface-inner-border-color: oklch(1 0 0 / 0.05);
@@ -32,6 +43,19 @@
--media-video-border-radius: var(--media-border-radius, 2rem);
--media-controls-transition-duration: 100ms;
--media-controls-transition-delay: 0ms;
--media-controls-transition-timing-function: ease-out;
--media-error-dialog-transition-duration: 350ms;
--media-error-dialog-transition-delay: 100ms;
--media-error-dialog-transition-timing-function: var(--media-spring-transition);
--media-popup-transition-duration: 100ms;
--media-popup-transition-timing-function: ease-out;
@media (prefers-reduced-motion: reduce) {
--media-error-dialog-transition-duration: 50ms;
--media-error-dialog-transition-delay: 0ms;
--media-error-dialog-transition-timing-function: ease-out;
--media-popup-transition-duration: 0ms;
}
@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.15);
@@ -47,7 +71,7 @@
--media-controls-transition-duration: 150ms;
}
@media (prefers-reduced-motion: reduce) {
--media-controls-transition-duration: 100ms;
--media-controls-transition-duration: 50ms;
}
}
@@ -90,33 +114,19 @@
color: oklch(1 0 0);
text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
transition-property: opacity, scale;
transition-duration: 500ms;
transition-delay: 100ms;
transition-timing-function: linear(
0,
0.034 1.5%,
0.763 9.7%,
1.066 13.9%,
1.198 19.9%,
1.184 21.8%,
0.963 37.5%,
0.997 50.9%,
1
);
/* Simple, fast transition for reduced motion users */
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
transition-delay: 0ms;
transition-timing-function: ease-out;
}
transition-duration: var(--media-error-dialog-transition-duration);
transition-delay: var(--media-error-dialog-transition-delay);
transition-timing-function: var(--media-error-dialog-transition-timing-function);
}
.media-default-skin .media-error[data-starting-style] .media-error__dialog,
.media-default-skin .media-error[data-ending-style] .media-error__dialog {
.media-default-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
opacity: 0;
scale: 0.5;
}
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
transition-delay: 0ms;
}
.media-default-skin--video .media-error__content {
display: flex;
@@ -140,9 +150,9 @@
inset-inline: 0.75rem;
z-index: 10;
color: var(--media-color-primary, oklch(1 0 0));
transition-timing-function: ease-out;
transition-duration: var(--media-controls-transition-duration);
transition-delay: var(--media-controls-transition-delay);
transition-timing-function: var(--media-controls-transition-timing-function);
transform-origin: bottom;
@media (pointer: fine) {
@@ -160,12 +170,8 @@
pointer-events: none;
scale: 0.9;
@media (pointer: fine) {
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
filter: blur(8px);
@media (prefers-reduced-motion: reduce) {
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
@@ -194,7 +200,7 @@
box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}
.media-default-skin .media-slider__preview {
.media-default-skin--video .media-slider__preview {
position: absolute;
left: var(--media-slider-pointer);
bottom: calc(100% + 1.2rem);
@@ -216,7 +222,7 @@
max-height: 6rem;
}
}
.media-default-skin .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
.media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
opacity: 1;
scale: 1;
filter: blur(0);