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:
co-authored by
Claude Fable 5
parent
79d42c43ab
commit
2f526335e8
@@ -498,10 +498,6 @@ a.game:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
|
|||||||
padding: .35rem .45rem; background: #fff; resize: vertical;
|
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,
|
/* pick rows live inside an .editform, whose label style (stacked,
|
||||||
uppercase, gray) is for FIELDS — a checklist row overrides it back
|
uppercase, gray) is for FIELDS — a checklist row overrides it back
|
||||||
to a plain reading line */
|
to a plain reading line */
|
||||||
|
|||||||
@@ -238,13 +238,13 @@ function render(g) {
|
|||||||
${g.stored_in_game
|
${g.stored_in_game
|
||||||
? `<p class="meta">This game has no box of its own — it lives inside
|
? `<p class="meta">This game has no box of its own — it lives inside
|
||||||
${esc(g.stored_in_game.name)}'s.
|
${esc(g.stored_in_game.name)}'s.
|
||||||
<button class="linkish" id="editstored">change</button></p>`
|
<button id="editstored">change</button></p>`
|
||||||
: g.stored_in
|
: g.stored_in
|
||||||
? `<p class="meta">Stored inside BGG game ${esc(g.stored_in)}
|
? `<p class="meta">Stored inside BGG game ${esc(g.stored_in)}
|
||||||
(not in the library yet — run <b>enrich</b>).
|
(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.
|
: `<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>
|
<p id="storedform" hidden>
|
||||||
<select id="storedpick"><option value="">its own box</option></select>
|
<select id="storedpick"><option value="">its own box</option></select>
|
||||||
<button class="primary" id="storedsave">save</button>
|
<button class="primary" id="storedsave">save</button>
|
||||||
|
|||||||
@@ -124,7 +124,7 @@ function unitBlock(u) {
|
|||||||
<button class="dupunit" data-unit="${esc(u.name)}"
|
<button class="dupunit" data-unit="${esc(u.name)}"
|
||||||
title="copy this unit's openings — sizes, zones, descriptions — as a new empty unit">
|
title="copy this unit's openings — sizes, zones, descriptions — as a new empty unit">
|
||||||
duplicate</button>
|
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>
|
<button class="delunit danger" data-unit="${esc(u.name)}">remove unit</button>
|
||||||
</span></div>
|
</span></div>
|
||||||
<p class="renamerow" hidden>
|
<p class="renamerow" hidden>
|
||||||
@@ -133,7 +133,7 @@ function unitBlock(u) {
|
|||||||
</p>
|
</p>
|
||||||
<p class="unitdesc">
|
<p class="unitdesc">
|
||||||
<span class="meta">${esc(u.description || "")}</span>
|
<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>
|
${u.description ? "edit description" : "add a description…"}</button>
|
||||||
<span class="descform" hidden>
|
<span class="descform" hidden>
|
||||||
<input class="unitdescinput" value="${esc(u.description || "")}"
|
<input class="unitdescinput" value="${esc(u.description || "")}"
|
||||||
|
|||||||
@@ -18,8 +18,7 @@
|
|||||||
<button type="button" id="addcancel">cancel</button>
|
<button type="button" id="addcancel">cancel</button>
|
||||||
</span>
|
</span>
|
||||||
<span class="edithint">joins the titles list like a photo read — resolve matches it
|
<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"
|
next run. A whole box of expansions? <button type="button" id="topicks">search BGG and tick them off</button></span>
|
||||||
class="linkish">search BGG and tick them off</button></span>
|
|
||||||
</form>
|
</form>
|
||||||
<div id="pickpanel" class="editform card" hidden>
|
<div id="pickpanel" class="editform card" hidden>
|
||||||
<label>Search BGG <input id="pickq" placeholder="red dragon inn" size="28"></label>
|
<label>Search BGG <input id="pickq" placeholder="red dragon inn" size="28"></label>
|
||||||
|
|||||||
Reference in New Issue
Block a user