diff --git a/src/css/common/_switch.scss b/src/css/common/_switch.scss index 3704c81f..3acbccd1 100644 --- a/src/css/common/_switch.scss +++ b/src/css/common/_switch.scss @@ -31,6 +31,10 @@ input[type='checkbox'].switch { background-color: $off-color; border-radius: 50%; margin: 2px; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0.01s; + } } } @@ -98,5 +102,13 @@ a.snippet-condition-count { border-color: theme.$accent; transition: border-color 0.6s; } + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0.01s; + + &::before { + transition-duration: 0.01s; + } + } } } diff --git a/src/css/common/_tooltips.scss b/src/css/common/_tooltips.scss index 3feec529..470da042 100644 --- a/src/css/common/_tooltips.scss +++ b/src/css/common/_tooltips.scss @@ -46,6 +46,10 @@ $bg-color: hsl(0deg 0% 20% / 90%); transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transform: translate3d(0, 0, 0); pointer-events: none; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0.01s; + } } .tooltip::before { diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss index 18ea2666..1b0cde95 100644 --- a/src/css/edit/_form.scss +++ b/src/css/edit/_form.scss @@ -59,6 +59,10 @@ $sidebar-gap: 30px; grid-template-areas: 'upper sidebar' 'lower sidebar'; transition: all 700ms; + @media (prefers-reduced-motion: reduce) { + transition-duration: 0.01s; + } + &.snippet-form-expanded { grid-template-areas: 'upper upper' 'lower sidebar'; } diff --git a/src/css/import/_upload.scss b/src/css/import/_upload.scss index e8f67a9f..a4be5699 100644 --- a/src/css/import/_upload.scss +++ b/src/css/import/_upload.scss @@ -37,6 +37,10 @@ $type-colors: ( transition: all 0.3s ease; opacity: 1; + @media (prefers-reduced-motion: reduce) { + transition-duration: 0.01s; + } + &.drag-over { border-color: #0073aa; background-color: #f0f6fc; diff --git a/src/css/menu.scss b/src/css/menu.scss index 8c371705..288f7a78 100644 --- a/src/css/menu.scss +++ b/src/css/menu.scss @@ -20,6 +20,10 @@ justify-content: center; align-items: center; + @media (prefers-reduced-motion: reduce) { + transition-duration: 0.01s; + } + &:hover { background-color: #08c5d1; } diff --git a/src/css/welcome.scss b/src/css/welcome.scss index 56c8f2f7..5943e561 100644 --- a/src/css/welcome.scss +++ b/src/css/welcome.scss @@ -225,6 +225,10 @@ $breakpoint: 1060px; position: absolute; inset-inline-start: 47%; inset-block-start: 45%; + + @media (prefers-reduced-motion: reduce) { + animation: none; + } } .csp-welcome-header nav {