45 lines
3.1 KiB
Diff
45 lines
3.1 KiB
Diff
From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
|
|
From: Modrinth Enhanced <patches@modrinth-enhanced.invalid>
|
|
Date: Sat, 19 Sep 2026 02:22:32 +0200
|
|
Subject: [PATCH] Hold a button's label still as the pointer arrives
|
|
|
|
---
|
|
.../src/components/ui/TitleBarAccountSwitcher.vue | 4 +++-
|
|
packages/ui/src/components/base/buttons/ButtonFrame.vue | 6 +++++-
|
|
2 files changed, 8 insertions(+), 2 deletions(-)
|
|
|
|
diff --git a/apps/app-frontend/src/components/ui/TitleBarAccountSwitcher.vue b/apps/app-frontend/src/components/ui/TitleBarAccountSwitcher.vue
|
|
index b21fae7..f9be6c5 100644
|
|
--- a/apps/app-frontend/src/components/ui/TitleBarAccountSwitcher.vue
|
|
+++ b/apps/app-frontend/src/components/ui/TitleBarAccountSwitcher.vue
|
|
@@ -28,8 +28,10 @@
|
|
:key="account.profile.id"
|
|
class="flex min-w-0 items-center gap-1"
|
|
>
|
|
+ <!-- btn-transparent: the same hover background as the buttons below,
|
|
+ rather than button-base's filter, which makes the text shift. -->
|
|
<button
|
|
- class="button-base flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent p-2 text-left"
|
|
+ class="button-base btn-transparent flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent p-2 text-left hover:bg-surface-4 focus-visible:bg-surface-4"
|
|
@click="choose(account, close)"
|
|
>
|
|
<RadioButtonCheckedIcon v-if="isSelected(account)" class="size-5 shrink-0 text-brand" />
|
|
diff --git a/packages/ui/src/components/base/buttons/ButtonFrame.vue b/packages/ui/src/components/base/buttons/ButtonFrame.vue
|
|
index cc33922..6afd6a5 100644
|
|
--- a/packages/ui/src/components/base/buttons/ButtonFrame.vue
|
|
+++ b/packages/ui/src/components/base/buttons/ButtonFrame.vue
|
|
@@ -53,8 +53,12 @@ const typeClasses: Record<ButtonType, string> = {
|
|
}
|
|
|
|
const interactionClasses: Record<ButtonInteraction, string> = {
|
|
+ // The background carries the hover on its own. Brightening the button as
|
|
+ // well puts its label in a filter of its own, which WebKit rasterizes apart
|
|
+ // from the page and lands a glyph or two off, so the text appears to shift
|
|
+ // as the pointer arrives and again as it leaves.
|
|
surface:
|
|
- '[&:not(:disabled):not([aria-disabled=true]):hover]:bg-surface-4 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:bg-surface-4',
|
|
+ '[&:not(:disabled):not([aria-disabled=true]):hover]:bg-surface-4 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:bg-surface-4 [&:not(:disabled):not([aria-disabled=true]):hover]:!filter-none [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!filter-none',
|
|
filled:
|
|
'[&:not(:disabled):not([aria-disabled=true]):hover]:!bg-[--button-color] [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!bg-[--button-color] [&:not(:disabled):not([aria-disabled=true]):hover]:!text-[var(--color-accent-contrast)] [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!text-[var(--color-accent-contrast)]',
|
|
none: '[&:not(:disabled):not([aria-disabled=true]):hover]:!brightness-100 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!brightness-100',
|