Preferences wear the table's ink; hand-drawn becomes alternate
The native checkboxes clashed with the parchment: they are now stamp-bordered boxes checked solid with a parchment tick, and their labels rag left with the box instead of centering. The token-art toggle's second option reads "alternate". Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF
This commit is contained in:
co-authored by
Claude Fable 5
parent
e4a93ec3aa
commit
bdfe357429
@@ -1383,7 +1383,7 @@
|
|||||||
<button class="stamp tiny" class:lit={prefs.art === "photo"}
|
<button class="stamp tiny" class:lit={prefs.art === "photo"}
|
||||||
onclick={() => setPref("art", "photo")}>cardboard</button>
|
onclick={() => setPref("art", "photo")}>cardboard</button>
|
||||||
<button class="stamp tiny" class:lit={prefs.art === "drawn"}
|
<button class="stamp tiny" class:lit={prefs.art === "drawn"}
|
||||||
onclick={() => setPref("art", "drawn")}>hand-drawn</button>
|
onclick={() => setPref("art", "drawn")}>alternate</button>
|
||||||
</div>
|
</div>
|
||||||
<label class="pref-row">
|
<label class="pref-row">
|
||||||
<input type="checkbox" checked={prefs.autoGrab}
|
<input type="checkbox" checked={prefs.autoGrab}
|
||||||
@@ -2795,11 +2795,40 @@
|
|||||||
.pref-row {
|
.pref-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.6rem;
|
||||||
margin: 0.55rem 0;
|
margin: 0.55rem 0;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #43331f;
|
color: #43331f;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
/* Checkboxes wear the table's own ink: a stamp-bordered box, checked
|
||||||
|
solid with a parchment tick — the native widget never matches the
|
||||||
|
parchment. */
|
||||||
|
.pref-row input[type="checkbox"] {
|
||||||
|
appearance: none;
|
||||||
|
flex: none;
|
||||||
|
width: 1.05rem;
|
||||||
|
height: 1.05rem;
|
||||||
|
border: 1.5px solid #43331f;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #f6efdd;
|
||||||
|
cursor: pointer;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.pref-row input[type="checkbox"]:checked {
|
||||||
|
background: #43331f;
|
||||||
|
}
|
||||||
|
.pref-row input[type="checkbox"]:checked::before {
|
||||||
|
content: "✓";
|
||||||
|
color: #f6efdd;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.pref-row span { flex: 1; }
|
||||||
.pref-note { font-size: 0.72rem; color: #8a7a5e; margin-top: 0.6rem; }
|
.pref-note { font-size: 0.72rem; color: #8a7a5e; margin-top: 0.6rem; }
|
||||||
.pref-name { max-width: 11rem; }
|
.pref-name { max-width: 11rem; }
|
||||||
.pref-swatch {
|
.pref-swatch {
|
||||||
|
|||||||
Reference in New Issue
Block a user