zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 05:37:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(skin): scope controls transitions to fine pointer only (#909)

Browse Source
This commit is contained in:
rahim
2026-03-12 01:46:24 -07:00
committed by GitHub
parent 6a69779946
commit 7a69bf4489
8 changed files with 104 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/components/overlay.css
+14 -8
View File
@@ -9,22 +9,28 @@
background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
backdrop-filter: blur(0) saturate(1.5);
opacity: 0;
transition-property: opacity, backdrop-filter;
transition-duration: 300ms;
transition-delay: 500ms;
transition-timing-function: ease-out;
pointer-events: none;
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
@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-controls[data-visible] ~ .media-overlay,
.media-default-skin .media-error[data-open] ~ .media-overlay {
opacity: 1;
transition-duration: 150ms;
transition-delay: 0ms;
@media (pointer: fine) {
transition-duration: 150ms;
transition-delay: 0ms;
}
}
.media-default-skin .media-error[data-open] ~ .media-overlay {
packages/skins/src/default/css/video.css
+18 -8
View File
@@ -57,26 +57,36 @@
bottom: 0.75rem;
inset-inline: 0.75rem;
z-index: 10;
color: oklch(1 0 0);
will-change: scale, transform, filter, opacity;
transition-property: scale, transform, filter, opacity;
transition-duration: 100ms;
transition-delay: 0ms;
transition-timing-function: ease-out;
transform-origin: bottom;
color: oklch(1 0 0);
@media (pointer: fine) {
transition-property: scale, transform, filter, opacity;
transition-duration: 100ms;
transition-delay: 0ms;
}
&:not([data-visible]) {
opacity: 0;
pointer-events: none;
scale: 0.9;
filter: blur(8px);
transition-duration: 300ms;
transition-delay: 500ms;
pointer-events: none;
@media (pointer: fine) {
transition-duration: 300ms;
transition-delay: 500ms;
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
}
}
@media (prefers-reduced-motion: reduce) {
scale: 1;
filter: blur(0);
transition-duration: 100ms;
}
}
}
packages/skins/src/default/tailwind/components/overlay.ts
+9 -8
View File
@@ -8,18 +8,19 @@ export const overlay = cn(
'opacity-0',
'bg-linear-to-t from-black/50 via-black/30 to-transparent',
'backdrop-blur-none backdrop-saturate-150',
// Transitions
'transition-[opacity,backdrop-filter] ease-out',
'duration-300 delay-500',
// Transitions (fine pointer only)
'[@media(pointer:fine)]:transition-[opacity,backdrop-filter]',
'[@media(pointer:fine)]:ease-out',
'[@media(pointer:fine)]:duration-300 [@media(pointer:fine)]:delay-500',
// Shown when controls visible
'peer-data-visible/controls:opacity-100',
'peer-data-visible/controls:duration-150',
'peer-data-visible/controls:delay-0',
'[@media(pointer:fine)]:peer-data-visible/controls:duration-150',
'[@media(pointer:fine)]:peer-data-visible/controls:delay-0',
// Shown when error visible (+ blur)
'peer-data-open/error:opacity-100',
'peer-data-open/error:duration-150',
'peer-data-open/error:delay-0',
'[@media(pointer:fine)]:peer-data-open/error:duration-150',
'[@media(pointer:fine)]:peer-data-open/error:delay-0',
'peer-data-open/error:backdrop-blur-lg',
// Reduced motion
'motion-reduce:duration-100'
'[@media(pointer:fine)]:motion-reduce:duration-100'
);
packages/skins/src/default/tailwind/video.tailwind.ts
+9 -7
View File
@@ -85,16 +85,18 @@ export const controls = cn(
// Position
'absolute bottom-3 inset-x-3',
'text-white z-10',
// Transitions
// Transitions (fine pointer only — instant toggle on touch to avoid dead-zone taps)
'will-change-[scale,transform,filter,opacity]',
'transition-[scale,transform,filter,opacity] ease-out',
'delay-0 duration-100 origin-bottom',
'[@media(pointer:fine)]:transition-[scale,transform,filter,opacity]',
'ease-out origin-bottom',
'[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-100',
// Hidden state
'not-data-visible:pointer-events-none not-data-visible:blur-sm',
'not-data-visible:scale-90 not-data-visible:opacity-0',
'not-data-visible:delay-500 not-data-visible:duration-300',
'not-data-visible:pointer-events-none not-data-visible:opacity-0',
'not-data-visible:blur-sm not-data-visible:scale-90',
'[@media(pointer:fine)]:not-data-visible:delay-500',
'[@media(pointer:fine)]:not-data-visible:duration-300',
// Reduced motion + hidden
'motion-reduce:not-data-visible:duration-100',
'[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100',
'motion-reduce:not-data-visible:blur-none',
'motion-reduce:not-data-visible:scale-100'
);
packages/skins/src/minimal/css/components/overlay.css
+14 -8
View File
@@ -9,22 +9,28 @@
background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
backdrop-filter: blur(0) saturate(1.5);
opacity: 0;
transition-property: opacity, backdrop-filter;
transition-duration: 500ms;
transition-delay: 500ms;
transition-timing-function: ease-out;
pointer-events: none;
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
@media (pointer: fine) {
transition-property: opacity, backdrop-filter;
transition-duration: 500ms;
transition-delay: 500ms;
transition-timing-function: ease-out;
@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
}
}
}
.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,
.media-minimal-skin .media-error[data-open] ~ .media-overlay {
opacity: 1;
transition-duration: 150ms;
transition-delay: 0ms;
@media (pointer: fine) {
transition-duration: 150ms;
transition-delay: 0ms;
}
}
.media-minimal-skin .media-error[data-open] ~ .media-overlay {
packages/skins/src/minimal/css/video.css
+20 -14
View File
@@ -54,13 +54,16 @@
z-index: 10;
gap: 0.5rem;
padding: 2rem 0.375rem 0.375rem 0.375rem;
will-change: transform, filter, opacity;
transition-property: transform, filter, opacity;
transition-duration: 75ms;
transition-delay: 0ms;
transition-timing-function: ease-out;
color: oklch(1 0 0);
@media (pointer: fine) {
will-change: transform, filter, opacity;
transition-property: transform, filter, opacity;
transition-duration: 75ms;
transition-delay: 0ms;
transition-timing-function: ease-out;
}
@container media-root (width > 40rem) {
gap: 0.875rem;
padding: 2.5rem 0.75rem 0.75rem 0.75rem;
@@ -68,17 +71,20 @@
&:not([data-visible]) {
opacity: 0;
transform: translateY(100%);
filter: blur(8px);
transition-duration: 500ms;
transition-delay: 500ms;
pointer-events: none;
@media (prefers-reduced-motion: reduce) {
scale: 1;
transform: translateY(0);
filter: blur(0);
transition-duration: 100ms;
@media (pointer: fine) {
transform: translateY(100%);
filter: blur(8px);
transition-duration: 500ms;
transition-delay: 500ms;
@media (prefers-reduced-motion: reduce) {
scale: 1;
transform: translateY(0);
filter: blur(0);
transition-duration: 100ms;
}
}
}
}
packages/skins/src/minimal/tailwind/components/overlay.ts
+9 -8
View File
@@ -8,18 +8,19 @@ export const overlay = cn(
'opacity-0',
'bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent',
'backdrop-blur-none backdrop-saturate-150',
// Transitions
'transition-[opacity,backdrop-filter] ease-out',
'duration-500 delay-500',
// Transitions (fine pointer only)
'[@media(pointer:fine)]:transition-[opacity,backdrop-filter]',
'[@media(pointer:fine)]:ease-out',
'[@media(pointer:fine)]:duration-500 [@media(pointer:fine)]:delay-500',
// Shown when controls visible
'peer-data-visible/controls:opacity-100',
'peer-data-visible/controls:duration-150',
'peer-data-visible/controls:delay-0',
'[@media(pointer:fine)]:peer-data-visible/controls:duration-150',
'[@media(pointer:fine)]:peer-data-visible/controls:delay-0',
// Shown when error visible (+ blur)
'peer-data-open/error:opacity-100',
'peer-data-open/error:duration-150',
'peer-data-open/error:delay-0',
'[@media(pointer:fine)]:peer-data-open/error:duration-150',
'[@media(pointer:fine)]:peer-data-open/error:delay-0',
'peer-data-open/error:backdrop-blur-lg',
// Reduced motion
'motion-reduce:duration-100'
'[@media(pointer:fine)]:motion-reduce:duration-100'
);
packages/skins/src/minimal/tailwind/video.tailwind.ts
+11 -8
View File
@@ -65,18 +65,21 @@ export const controls = cn(
'absolute bottom-0 inset-x-0',
'pt-8 px-1.5 pb-1.5 gap-2',
'text-white z-10',
// Transitions
// Transitions (fine pointer only — instant toggle on touch to avoid dead-zone taps)
'will-change-[translate,filter,opacity]',
'transition-[translate,filter,opacity] ease-out',
'delay-0 duration-75',
'[@media(pointer:fine)]:transition-[translate,filter,opacity]',
'ease-out',
'[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-75',
// Hidden state
'not-data-visible:opacity-0 not-data-visible:translate-y-full',
'not-data-visible:blur-sm not-data-visible:pointer-events-none',
'not-data-visible:delay-500 not-data-visible:duration-500',
'not-data-visible:opacity-0 not-data-visible:pointer-events-none',
'not-data-visible:translate-y-full not-data-visible:blur-sm',
'[@media(pointer:fine)]:not-data-visible:delay-500',
'[@media(pointer:fine)]:not-data-visible:duration-500',
// Reduced motion + hidden
'motion-reduce:not-data-visible:duration-100',
'[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100',
'motion-reduce:not-data-visible:translate-y-0',
'motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100',
'motion-reduce:not-data-visible:blur-none',
'motion-reduce:not-data-visible:scale-100',
// Wider container
'@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3',
'@sm/media-root:gap-3.5'