From 806633fc3350a32c2857487c8fcc18b31becc328 Mon Sep 17 00:00:00 2001 From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com> Date: Thu, 11 Jul 2024 17:32:43 +0200 Subject: [PATCH] fix: #478 improve touch interaction styles --- common/components/cards/SmallCard.svelte | 5 +++++ common/css.css | 9 +++++++++ web/src/lib/components/PreviewCard.svelte | 2 +- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/common/components/cards/SmallCard.svelte b/common/components/cards/SmallCard.svelte index 101206e..c0d7203 100644 --- a/common/components/cards/SmallCard.svelte +++ b/common/components/cards/SmallCard.svelte @@ -61,6 +61,11 @@ .first-check:first-child :global(.absolute-container) { left: -48% !important } + .first-check:hover { + z-index: 30; + /* fixes transform scaling on click causing z-index issues */ + } + .title { display: -webkit-box; -webkit-line-clamp: 2; diff --git a/common/css.css b/common/css.css index 457f3f9..48d2af3 100644 --- a/common/css.css +++ b/common/css.css @@ -44,6 +44,15 @@ } } +* { + -webkit-tap-highlight-color: transparent; +} + +a[href]:active, button:not([disabled]):active, fieldset:not([disabled]):active, input:not([disabled]):active, optgroup:not([disabled]):active, option:not([disabled]):active, select:not([disabled]):active, textarea:not([disabled]):active, details:active, [tabindex]:not([tabindex="-1"]):active, [contenteditable]:active, [controls]:active { + transition: transform 0.1s ease-in-out; + transform: scale(0.95); +} + .btn-secondary { --dm-button-secondary-bg-color: #fff !important; --dm-button-secondary-bg-color-hover: #ddd !important; diff --git a/web/src/lib/components/PreviewCard.svelte b/web/src/lib/components/PreviewCard.svelte index 619cd83..8994929 100644 --- a/web/src/lib/components/PreviewCard.svelte +++ b/web/src/lib/components/PreviewCard.svelte @@ -48,7 +48,7 @@ } -
+