From fa0b36f696ad37e43a59a5d45175e04edca12716 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Fri, 5 Jan 2024 15:12:10 -0800
Subject: [PATCH] chore: naming + reduced motion
---
src/assets/styles/index.css | 4 ++--
src/assets/styles/partials/vars.css | 9 ++++++++-
src/assets/styles/widgets/forms.css | 4 ++--
src/assets/styles/widgets/media-grid.css | 2 +-
src/assets/styles/widgets/paginator.css | 3 +--
src/assets/styles/widgets/webmentions.css | 4 ++--
6 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index b4f02985..28482aa7 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -375,8 +375,8 @@ code,
a,
.pill--button {
- transition-timing-function: var(--ease-in-out);
- transition-duration: 300ms;
+ transition-timing-function: var(--transition-ease-in-out);
+ transition-duration: var(--transition-duration-default);
}
.pill--button,
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
index c8911b50..ceed3126 100644
--- a/src/assets/styles/partials/vars.css
+++ b/src/assets/styles/partials/vars.css
@@ -73,9 +73,16 @@
--rounded-full: 9999px;
/* transitions */
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-duration-default: 300ms;
/* svgs */
--stroke-width-default: 1.4;
--stroke-width-bold: 2;
+}
+
+@media (prefers-reduced-motion) {
+ :root {
+ --transition-duration-default: 0.01ms;
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/forms.css b/src/assets/styles/widgets/forms.css
index 7b075547..903af626 100644
--- a/src/assets/styles/widgets/forms.css
+++ b/src/assets/styles/widgets/forms.css
@@ -12,8 +12,8 @@ textarea {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
transition-property: border-color;
- transition-timing-function: var(--ease-in-out);
- transition-duration: 300ms;
+ transition-timing-function: var(--transition-ease-in-out);
+ transition-duration: var(--transition-duration-default);
}
input[type="text"]:focus,
diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css
index fb8ea94e..ffc86ef3 100644
--- a/src/assets/styles/widgets/media-grid.css
+++ b/src/assets/styles/widgets/media-grid.css
@@ -28,7 +28,7 @@
border-radius: var(--rounded-lg);
overflow: hidden;
transition-property: border-color;
- transition-timing-function: var(--ease-in-out);
+ transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms;
}
diff --git a/src/assets/styles/widgets/paginator.css b/src/assets/styles/widgets/paginator.css
index 141d2649..0158a437 100644
--- a/src/assets/styles/widgets/paginator.css
+++ b/src/assets/styles/widgets/paginator.css
@@ -14,9 +14,8 @@
}
.pagination button.disabled > svg {
- opacity: .5;
cursor: not-allowed;
- stroke: var(--black);
+ stroke: color-mix(in srgb, var(--black), transparent 50%);
stroke-width: var(--stroke-width-default);
}
diff --git a/src/assets/styles/widgets/webmentions.css b/src/assets/styles/widgets/webmentions.css
index e34251be..0f8b2598 100644
--- a/src/assets/styles/widgets/webmentions.css
+++ b/src/assets/styles/widgets/webmentions.css
@@ -79,8 +79,8 @@
border-radius: var(--rounded-full);
border: 4px solid var(--white);
transition-property: border-color;
- transition-timing-function: var(--ease-in-out);
- transition-duration: 300ms;
+ transition-timing-function: var(--transition-ease-in-out);
+ transition-duration: var(--transition-duration-default);
}
.webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {