mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Add reduced motion guardrails
This commit is contained in:
thePR0M3TH3AN committed
1 parent
ba2029708f
commit
157f0897cf
5 files changed
+267
-24
No files matched your search
+63
-23
@@ -165,20 +165,6 @@ header img {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.popover__panel {
|
||||
transition-duration: 1ms;
|
||||
transition-timing-function: linear;
|
||||
transform: none !important;
|
||||
}
|
||||
.popover__panel[data-state="open"] {
|
||||
opacity: 1;
|
||||
}
|
||||
.popover__panel[data-state="closed"] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card[data-motion="enter"] {
|
||||
opacity: 0;
|
||||
animation: card-motion-enter 220ms ease-out forwards;
|
||||
@@ -291,16 +277,77 @@ header img {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-delay: 0s !important;
|
||||
animation-duration: 0s !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
animation-timing-function: linear !important;
|
||||
transition-delay: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
transition-timing-function: linear !important;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-ghost,
|
||||
.card,
|
||||
.card[data-motion="enter"],
|
||||
.fade-in,
|
||||
.icon-button,
|
||||
.menu__item,
|
||||
.modal-actions__overflow,
|
||||
.modal-header,
|
||||
.modal-nav,
|
||||
.popover__panel,
|
||||
.progress-bar-fill,
|
||||
.video-modal__panel,
|
||||
.watch-history-card,
|
||||
.watch-history-card__action,
|
||||
.watch-history-card__creatorAvatar,
|
||||
.watch-history-card__creatorName,
|
||||
.watch-history-card__title,
|
||||
#app,
|
||||
#playerModal .player-modal__content,
|
||||
#sidebar,
|
||||
#sidebarOverlay,
|
||||
.sidebar-collapse-toggle,
|
||||
.sidebar-collapse-toggle__icon,
|
||||
.sidebar-dropup-panel,
|
||||
.sidebar-dropup-trigger,
|
||||
.sidebar-dropup-trigger__chevron,
|
||||
.sidebar-nav,
|
||||
.sidebar-nav-link {
|
||||
transition-property: none !important;
|
||||
}
|
||||
|
||||
.card[data-motion="enter"],
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
[data-video-thumbnail][data-thumbnail-loaded="true"] {
|
||||
animation: none;
|
||||
animation: none !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popover__panel {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.popover__panel[data-state="open"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popover__panel[data-state="closed"] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.status-spinner--inline,
|
||||
.status-banner .status-spinner {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure modal portals always sit above the sidebar stack */
|
||||
@@ -465,13 +512,6 @@ body.modal-open #sidebarOverlay {
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.video-modal__panel,
|
||||
#playerModal .player-modal__content {
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Video */
|
||||
#modalVideo {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(31,41,55,.9);--color-overlay-panel-soft:rgba(31,41,55,.75);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(30,41,59,.85);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--color-blog-error:#ca1717;--color-blog-gray-220:#cbcbcb;--color-blog-gray-210:#ccc;--color-blog-gray-200:#dedede;--color-blog-amber-500:#e4984d;--color-blog-gray-190:#e0e0e0;--color-blog-orange-600:#e35428;--color-blog-gray-180:#e9e9e9;--color-blog-gray-170:#ebebeb;--color-blog-red-500:#ef4444;--color-blog-amber-400:#f6ad55;--color-blog-neutral-100:#f5f5f5;--color-blog-neutral-120:#f6f6f6;--color-blog-orange-500:#f97316;--color-blog-neutral-50:#fdfdfd;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 1.25rem 2.5rem -0.375rem rgba(15,23,42,.55);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lLine truncated
|
||||
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover__panel{pointer-events:none;position:absolute;left:0;top:100%;z-index:70;margin-top:.5rem;min-width:12rem;transform-origin:top;--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--radius-lg);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-panel);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);opacity:0;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Line truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover__panel{pointer-events:none;position:absolute;left:0;top:100%;z-index:70;margin-top:.5rem;min-width:12rem;transform-origin:top;--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--radius-lg);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-panel);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);opacity:0;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Line truncated
|
||||
@@ -670,3 +670,49 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--motion-duration-fast: 0s;
|
||||
--motion-duration-base: 0s;
|
||||
--motion-duration-slow: 0s;
|
||||
--modal-motion-duration: 0s;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-delay: 0s !important;
|
||||
animation-duration: 0s !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
animation-timing-function: linear !important;
|
||||
transition-delay: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
transition-timing-function: linear !important;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-ghost,
|
||||
.card,
|
||||
.menu__item,
|
||||
.popover__panel,
|
||||
.watch-history-card,
|
||||
.watch-history-card__creatorAvatar,
|
||||
.watch-history-card__creatorName,
|
||||
.watch-history-card__action,
|
||||
.watch-history-card__title {
|
||||
transition-property: none !important;
|
||||
}
|
||||
|
||||
.popover__panel {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.popover__panel[data-state="open"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popover__panel[data-state="closed"] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -49,6 +49,26 @@ The helper includes:
|
||||
|
||||
Never hide focus styles without providing an accessible alternative.
|
||||
|
||||
## Motion Guardrails
|
||||
|
||||
### Motion inventory
|
||||
|
||||
The `rg "transition"` audit surfaces the components that animate by default. Keep this list in sync when new motion primitives land:
|
||||
|
||||
- **Buttons:** `.btn` and `.btn-ghost` transition their backgrounds, borders, and shadows using the shared token durations. 【F:css/tailwind.source.css†L18-L55】
|
||||
- **Cards and watch history:** `.card`, `.watch-history-card`, and their nested controls use hover/focus transitions plus optional entry animations via `data-motion="enter"`. 【F:css/style.css†L182-L185】【F:css/tailwind.source.css†L196-L247】
|
||||
- **Popovers:** `.popover__panel` fades and scales between `[data-state]` values. 【F:css/style.css†L150-L166】
|
||||
- **Modals:** `.bv-modal__panel`, `.video-modal__panel`, and `.player-modal__content` animate in concert with the modal nav/header layout helpers. 【F:docs/kitchen-sink.html†L335-L391】【F:css/style.css†L335-L468】
|
||||
- **Feedback & loading:** `.progress-bar-fill`, `.status-spinner--inline`, and `.status-banner .status-spinner` communicate state changes with width transitions or spin animations. 【F:css/style.css†L532-L695】
|
||||
- **Sidebar controls:** `.sidebar-nav-link`, `.sidebar-dropup-trigger`, `.sidebar-collapse-toggle`, and related chevrons/toggles translate, fade, and resize during rail expansion. 【F:css/style.css†L889-L1147】
|
||||
|
||||
### Reduced-motion policy
|
||||
|
||||
- A consolidated `@media (prefers-reduced-motion: reduce)` block now zeroes out transition and animation durations globally, removes motion-only transforms, and leaves opacity state changes in place so surfaces still show and hide instantly. 【F:css/style.css†L287-L339】
|
||||
- Motion tokens also collapse to `0s` inside Tailwind's component layer so the primitives (`.btn`, `.card`, `.popover__panel`, watch-history tiles) inherit the same behaviour without per-selector overrides. 【F:css/tailwind.source.css†L229-L270】
|
||||
- Spinners fall back to static indicators when reduced motion is requested, while focus rings remain intact because the underlying styles are unaffected—only the timing curves are reset. 【F:css/style.css†L329-L339】
|
||||
- When adding a new animated component, register its selector in this block (or reuse the tokenised durations) so reduced-motion users never see unintended transitions. Document the addition here alongside the inventory.
|
||||
|
||||
## Component Primitives
|
||||
|
||||
### Buttons
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
type MotionCase = {
|
||||
name: string;
|
||||
html: string;
|
||||
selector: string;
|
||||
expectations: {
|
||||
checkTransitions?: boolean;
|
||||
checkAnimations?: boolean;
|
||||
expectTransformNone?: boolean;
|
||||
expectOpacity?: string;
|
||||
};
|
||||
};
|
||||
|
||||
const MOTION_CASES: MotionCase[] = [
|
||||
{
|
||||
name: "primary button",
|
||||
html: '<button class="btn">Action</button>',
|
||||
selector: ".btn",
|
||||
expectations: { checkTransitions: true }
|
||||
},
|
||||
{
|
||||
name: "card enter motion",
|
||||
html: '<article class="card" data-motion="enter"></article>',
|
||||
selector: ".card",
|
||||
expectations: {
|
||||
checkTransitions: true,
|
||||
checkAnimations: true,
|
||||
expectOpacity: "1"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "popover panel",
|
||||
html: '<div class="popover__panel" data-state="open"></div>',
|
||||
selector: ".popover__panel",
|
||||
expectations: {
|
||||
checkTransitions: true,
|
||||
expectTransformNone: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "modal panel",
|
||||
html: '<div class="bv-modal__panel modal-content"></div>',
|
||||
selector: ".bv-modal__panel",
|
||||
expectations: { checkTransitions: true }
|
||||
},
|
||||
{
|
||||
name: "video modal content",
|
||||
html: '<div id="playerModal"><div class="player-modal__content"></div></div>',
|
||||
selector: "#playerModal .player-modal__content",
|
||||
expectations: { checkTransitions: true, checkAnimations: true }
|
||||
},
|
||||
{
|
||||
name: "progress indicator",
|
||||
html: '<div class="progress-bar"><div class="progress-bar-fill"></div></div>',
|
||||
selector: ".progress-bar-fill",
|
||||
expectations: { checkTransitions: true }
|
||||
},
|
||||
{
|
||||
name: "sidebar nav link",
|
||||
html: '<a class="sidebar-nav-link" href="#"></a>',
|
||||
selector: ".sidebar-nav-link",
|
||||
expectations: { checkTransitions: true }
|
||||
},
|
||||
{
|
||||
name: "status spinner",
|
||||
html: '<div class="status-spinner--inline"></div>',
|
||||
selector: ".status-spinner--inline",
|
||||
expectations: { checkAnimations: true }
|
||||
}
|
||||
];
|
||||
|
||||
test.describe("reduced motion guardrail", () => {
|
||||
test("collapses transitions and animations when prefers-reduced-motion is set", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.emulateMedia({ reducedMotion: "reduce" });
|
||||
await page.goto("/docs/kitchen-sink.html", { waitUntil: "networkidle" });
|
||||
|
||||
for (const motionCase of MOTION_CASES) {
|
||||
const styles = await page.evaluate(({ html, selector }) => {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.setAttribute("data-test-motion", "true");
|
||||
wrapper.innerHTML = html;
|
||||
const element = wrapper.querySelector(selector);
|
||||
if (!element) {
|
||||
throw new Error(`Missing element for selector ${selector}`);
|
||||
}
|
||||
document.body.appendChild(wrapper);
|
||||
const computedStyle = window.getComputedStyle(element);
|
||||
const result = {
|
||||
transitionDuration: computedStyle.transitionDuration,
|
||||
animationDuration: computedStyle.animationDuration,
|
||||
animationName: computedStyle.animationName,
|
||||
transform: computedStyle.transform,
|
||||
opacity: computedStyle.opacity
|
||||
};
|
||||
wrapper.remove();
|
||||
return result;
|
||||
}, motionCase);
|
||||
|
||||
if (motionCase.expectations.checkTransitions) {
|
||||
const durations = styles.transitionDuration
|
||||
.split(",")
|
||||
.map((value) => value.trim());
|
||||
expect.soft(
|
||||
durations.every((value) => value === "0s"),
|
||||
`${motionCase.name} transition duration`
|
||||
).toBe(true);
|
||||
}
|
||||
|
||||
if (motionCase.expectations.checkAnimations) {
|
||||
const durations = styles.animationDuration
|
||||
.split(",")
|
||||
.map((value) => value.trim());
|
||||
expect.soft(
|
||||
durations.every((value) => value === "0s"),
|
||||
`${motionCase.name} animation duration`
|
||||
).toBe(true);
|
||||
expect.soft(
|
||||
styles.animationName === "none",
|
||||
`${motionCase.name} animation name`
|
||||
).toBe(true);
|
||||
}
|
||||
|
||||
if (motionCase.expectations.expectTransformNone) {
|
||||
expect.soft(styles.transform === "none", `${motionCase.name} transform`).toBe(
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
if (motionCase.expectations.expectOpacity) {
|
||||
expect.soft(styles.opacity).toBe(motionCase.expectations.expectOpacity);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user