vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4: every inline editor ends in a btn-primary Save and a btn-secondary Cancel — comments drew their own .comment-submit-btn and .comment-cancel-btn, the profile's email its own .profile-email-btn pair, the bio a plain-text form-cancel, and the chat's edit box shrank the shared buttons with a rule of its own; they were four sizes, two orders of chrome, and the comment button's white label sat on Smooth's yellow accent. They all take the shared classes now, and the new .btn-sm is the one compact size, for the comment forms, the chat edit box and the email editor; the bio and the dump title stay full size. .btn-secondary gets a disabled state, as btn-primary has. The bespoke rules are gone, with GeoCities' bevel for the comment buttons, which btn-primary and btn-secondary already have. 670 frontend tests pass, and tsc, eslint and deno fmt are clean; the comment, reply, chat edit, email and bio editors were checked in screenshots in Smooth, Kanagawa, Brutalist and GeoCities at 1100 and 360px.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-08 21:27:26 +00:00
parent d683ac0548
commit 437eea0df3
6 changed files with 25 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/App.css
View File

@@ -2459,50 +2459,6 @@ body.has-player .chat-fab {
gap: 0.4rem;
}
.profile-email-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.75rem;
padding: 0 0.65rem;
border-radius: var(--radius-sm);
border: 1.5px solid;
font-size: var(--text-xs);
font-family: inherit;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
transition: background var(--dur-base), border-color var(--dur-base), color
var(--dur-base);
}
.profile-email-btn--save {
background: var(--color-accent);
color: var(--color-on-accent);
border-color: var(--color-accent);
}
.profile-email-btn--save:hover:not(:disabled) {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.profile-email-btn--save:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.profile-email-btn--cancel {
background: transparent;
color: var(--color-text-muted);
border-color: var(--color-border);
}
.profile-email-btn--cancel:hover {
color: var(--color-text);
border-color: var(--color-text-muted);
}
.profile-description-actions {
display: flex;
align-items: center;
@@ -3512,6 +3468,20 @@ body.has-player .chat-fab {
color: var(--color-accent);
}
.btn-secondary:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* The compact size, for the inline editors that sit in a narrow column or
beside small text: a comment, a chat message, the profile's email. Every
inline editor ends in a btn-primary Save then a btn-secondary Cancel. */
.btn-sm {
font-size: var(--text-sm);
padding: 0.25rem 0.75rem;
}
.btn-danger {
background: var(--color-danger-bg);
color: var(--color-text);
@@ -4907,15 +4877,6 @@ body.has-player .chat-fab {
gap: 0.4rem;
}
/* Compact buttons for the inline edit box — the full-size form buttons are too
bulky for the narrow message column. */
.chat-edit-actions .btn-primary,
.chat-edit-actions .btn-secondary {
font-size: var(--text-xs);
padding: 0.25rem 0.7rem;
box-shadow: none;
}
.chat-composer {
display: flex;
gap: 0.5rem;
@@ -5837,46 +5798,6 @@ body.has-player .chat-fab {
align-items: center;
}
.comment-submit-btn {
background: var(--color-accent);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: 0.4rem 1rem;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 700;
cursor: pointer;
transition: background var(--dur-base), opacity var(--dur-base);
letter-spacing: 0.02em;
}
.comment-submit-btn:not(:disabled):hover {
background: var(--color-accent-hover);
}
.comment-submit-btn:disabled {
opacity: 0.4;
cursor: default;
}
.comment-cancel-btn {
background: transparent;
border: 1.5px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: 0.4rem 1rem;
font-family: inherit;
font-size: var(--text-sm);
color: var(--color-text);
opacity: 0.6;
cursor: pointer;
transition: opacity var(--dur-base);
}
.comment-cancel-btn:hover {
opacity: 1;
}
.comment-node-inner--deleted {
opacity: 0.35;
}