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/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);