sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style: tabby tab styling with dashed inactive borders and hover invert
All checks were successful
check / check (push) Successful in 22s
Details

Browse Source 
- Active tab: solid border on top/sides, bottom border matches background
  (connects to content area), bold text
- Inactive tabs: dashed borders in border-light color, muted text,
  transparent bottom border
- Inactive hover: invert (bg-fg text-bg) for clear clickability signal
- All three tabs behave identically on hover
This commit is contained in:
user
2026-02-28 14:36:51 -08:00
parent 87ea45f934
commit d39413173f
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/popup/index.html
View File

@@ -64,19 +64,19 @@
> >
<button <button
id="tab-mnemonic" id="tab-mnemonic"
class="px-3 py-1.5 cursor-pointer text-xs font-bold border-b-2 border-b-fg -mb-px hover:text-fg hover:border-b-fg" class="px-3 py-1.5 cursor-pointer text-xs font-bold border border-border border-b-bg bg-bg -mb-px"
> >
From Phrase From Phrase
</button> </button>
<button <button
id="tab-privkey" id="tab-privkey"
class="px-3 py-1.5 cursor-pointer text-xs text-muted border-b-2 border-b-transparent -mb-px hover:text-fg hover:border-b-fg" class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
> >
From Key From Key
</button> </button>
<button <button
id="tab-xprv" id="tab-xprv"
class="px-3 py-1.5 cursor-pointer text-xs text-muted border-b-2 border-b-transparent -mb-px hover:text-fg hover:border-b-fg" class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
> >
From xprv From xprv
</button> </button>

11
src/popup/views/addWallet.js
View File

@@ -29,11 +29,16 @@ function switchMode(mode) {
$("add-wallet-section-" + m).classList.toggle("hidden", m !== mode); $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
const tab = $("tab-" + m); const tab = $("tab-" + m);
const isActive = m === mode; const isActive = m === mode;
// Active: bold + solid underline // Active: bold, solid border on top/sides, no bottom border (connects to content)
tab.classList.toggle("font-bold", isActive); tab.classList.toggle("font-bold", isActive);
tab.classList.toggle("border-b-fg", isActive); tab.classList.toggle("border-solid", isActive);
// Inactive: muted text + transparent underline tab.classList.toggle("border-border", isActive);
tab.classList.toggle("border-b-bg", isActive);
tab.classList.toggle("bg-bg", isActive);
// Inactive: muted text, dashed border on top/sides, transparent bottom
tab.classList.toggle("text-muted", !isActive); tab.classList.toggle("text-muted", !isActive);
tab.classList.toggle("border-dashed", !isActive);
tab.classList.toggle("border-border-light", !isActive);
tab.classList.toggle("border-b-transparent", !isActive); tab.classList.toggle("border-b-transparent", !isActive);
} }
$("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode]; $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];