From 0983e780e83a4e7b782f8aed9e6f4e990cf27b4c Mon Sep 17 00:00:00 2001 From: sganggs Date: Wed, 7 Oct 2026 17:37:45 +0800 Subject: [PATCH] =?UTF-8?q?feedback6:=20the=20bond=20strip's=20collapse=20?= =?UTF-8?q?button=20is=20a=20bare=20half-transparent=20arrow=20(=E2=80=B9?= =?UTF-8?q?=20/=20=E2=80=BA)=20instead=20of=20the=20boxed=20=E3=80=8C?= =?UTF-8?q?=E6=94=B6=E8=B5=B7=E3=80=8D=20/=20=E3=80=8C=E7=9B=9F=E7=BA=A6?= =?UTF-8?q?=E3=80=8D=20tab=20=E2=80=94=20the=20owner's=20request=20after?= =?UTF-8?q?=200.2.0;=20full=20opacity=20on=20hover=20/=20focus,=20the=2044?= =?UTF-8?q?=20=C3=97=2044=20touch=20target=20and=20the=20aria-label=20kept?= =?UTF-8?q?=20(test/ui/bond-collapse.e2e.test.js=202/2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/screens/game.css | 14 ++++++++------ public/js/screens/game.js | 2 +- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/public/css/screens/game.css b/public/css/screens/game.css index 09b26f62..be580299 100644 --- a/public/css/screens/game.css +++ b/public/css/screens/game.css @@ -229,13 +229,15 @@ .gm__bonds .bslot, .gm__bonds .bstrip__more { pointer-events: auto; } .gm__bond-list { min-width: 0; } /* The hidden list leaves no hit area over the board; only this compact tab can reopen it (GitHub #142). */ +/* A bare arrow (the owner's request after 0.2.0: the boxed 「收起」 tab looked heavy): transparent, half-visible until + hovered or focused; the 44 × 44 touch target stays (an invisible hit area), the name is the aria-label. */ .gm__bonds .bonds-toggle { pointer-events: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; - gap: max(.03rem, 2px); min-width: 44px; min-height: 44px; padding: .06rem .08rem; - color: var(--text-hi); background: var(--bg-1); border: 1px solid var(--line-2); cursor: pointer; - font-size: max(.14rem, 11px); line-height: 1; } -.bonds-toggle .icon { width: max(.18rem, 14px); height: max(.18rem, 14px); } -.bonds-toggle:hover { color: var(--mint-500); border-color: var(--mint-500); } -.bonds-toggle:focus-visible { outline: 2px solid var(--mint-500); outline-offset: 2px; } + min-width: 44px; min-height: 44px; padding: 0; color: var(--text-hi); background: transparent; border: 0; cursor: pointer; + opacity: .55; transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); line-height: 1; } +.bonds-toggle .icon { width: max(.22rem, 18px); height: max(.22rem, 18px); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); } +.bonds-toggle[aria-expanded="false"] { opacity: .8; } +.bonds-toggle:hover, .bonds-toggle:focus-visible { opacity: 1; color: var(--mint-500); } +.bonds-toggle:focus-visible { outline: 2px solid var(--mint-500); outline-offset: -4px; } .bstrip { display: flex; align-items: flex-start; gap: .1rem; flex-wrap: nowrap; } .bstrip.is-frozen .bslot { opacity: .5; filter: saturate(.4); } .bstrip--empty { display: inline-flex; align-items: center; gap: .12rem; padding: .08rem .16rem; font-size: .15rem; color: var(--text-dim); background: rgba(8, 11, 10, .6); border: 1px dashed var(--line-2); } diff --git a/public/js/screens/game.js b/public/js/screens/game.js index 35f6d399..603cfd57 100644 --- a/public/js/screens/game.js +++ b/public/js/screens/game.js @@ -1335,7 +1335,7 @@ function MatchScreen() { onClick=${() => { if (!bondsCollapsed && bondOpen?.from === 'strip') setBondOpen(null); setBondsCollapsed(!bondsCollapsed); - }}><${Icon} name=${bondsCollapsed ? 'chevronRight' : 'chevronLeft'} />${bondsCollapsed ? t('盟约') : t('收起')} + }}><${Icon} name=${bondsCollapsed ? 'chevronRight' : 'chevronLeft'} />