Every button looks like a button: .linkish retires

Eric's screenshot: "rename" and "edit description" rendered as bare
underlined links beside properly-drawn buttons. The .linkish class
deliberately stripped the design system — introduced for one inline
case, it spread to toolbars where it read as missing styling. All six
sites (rename, edit description, the stored-in change control, the
search-BGG entry point) now inherit the app's real button treatment,
and the class is deleted so it can't spread again.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jXZFSTZQKzAC8fqpWSz9g
This commit is contained in:
Eric Wagoner
2026-08-09 15:16:40 -04:00
co-authored by Claude Fable 5
parent 79d42c43ab
commit 2f526335e8
4 changed files with 6 additions and 11 deletions
-4
View File
@@ -498,10 +498,6 @@ a.game:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
padding: .35rem .45rem; background: #fff; resize: vertical;
}
.linkish {
background: none; border: none; padding: 0; font: inherit;
color: var(--accent); text-decoration: underline; cursor: pointer;
}
/* pick rows live inside an .editform, whose label style (stacked,
uppercase, gray) is for FIELDS — a checklist row overrides it back
to a plain reading line */
+3 -3
View File
@@ -238,13 +238,13 @@ function render(g) {
${g.stored_in_game
? `<p class="meta">This game has no box of its own — it lives inside
${esc(g.stored_in_game.name)}'s.
<button class="linkish" id="editstored">change</button></p>`
<button id="editstored">change</button></p>`
: g.stored_in
? `<p class="meta">Stored inside BGG game ${esc(g.stored_in)}
(not in the library yet — run <b>enrich</b>).
<button class="linkish" id="editstored">change</button></p>`
<button id="editstored">change</button></p>`
: `<p class="meta">In its own box.
<button class="linkish" id="editstored">it lives inside another box…</button></p>`}
<button id="editstored">it lives inside another box…</button></p>`}
<p id="storedform" hidden>
<select id="storedpick"><option value="">its own box</option></select>
<button class="primary" id="storedsave">save</button>
+2 -2
View File
@@ -124,7 +124,7 @@ function unitBlock(u) {
<button class="dupunit" data-unit="${esc(u.name)}"
title="copy this unit's openings — sizes, zones, descriptions — as a new empty unit">
duplicate</button>
<button class="renameunit linkish" data-unit="${esc(u.name)}">rename</button>
<button class="renameunit" data-unit="${esc(u.name)}">rename</button>
<button class="delunit danger" data-unit="${esc(u.name)}">remove unit</button>
</span></div>
<p class="renamerow" hidden>
@@ -133,7 +133,7 @@ function unitBlock(u) {
</p>
<p class="unitdesc">
<span class="meta">${esc(u.description || "")}</span>
<button class="linkish editunitdesc" data-unit="${esc(u.name)}">
<button class="editunitdesc" data-unit="${esc(u.name)}">
${u.description ? "edit description" : "add a description…"}</button>
<span class="descform" hidden>
<input class="unitdescinput" value="${esc(u.description || "")}"
+1 -2
View File
@@ -18,8 +18,7 @@
<button type="button" id="addcancel">cancel</button>
</span>
<span class="edithint">joins the titles list like a photo read — resolve matches it
next run. A whole box of expansions? <button type="button" id="topicks"
class="linkish">search BGG and tick them off</button></span>
next run. A whole box of expansions? <button type="button" id="topicks">search BGG and tick them off</button></span>
</form>
<div id="pickpanel" class="editform card" hidden>
<label>Search BGG <input id="pickq" placeholder="red dragon inn" size="28"></label>