mix/selfpost
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

design: Sign out is a POST form in the mockups, tinted like the links

Browse Source 
Owner's instruction (2026-10-09): in the kit Sign out had no hover tint and
stood out among Account and Help. The cause was in the design, not in the
implementation: the mockups drew Sign out as a link, the panel signs out
with a POST, and Bulma tints only a.navbar-item.

  - build.py: Sign out is a form with a submit button carrying navbar-item,
    as the real shell has to write it; all pages rebuilt.
  - theme.css: the form stretches the button across the menu and the button
    is handed Bulma's own hover / focus / active variables, so it answers
    like the entries above it. No width, no colour of its own.

check.py: 32 screens, 48 sp- classes, 0 violation(s); outlines.json unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mix
2026-10-09 18:10:45 +03:00
co-authored by Claude Opus 5.5
parent f861d78114
commit 5be1504cfc
34 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/panel-redesign/panel/theme.css
+8
View File
@@ -64,6 +64,14 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
.navbar.is-primary .navbar-dropdown .navbar-item .ti { margin-right: .6rem; color: var(--sp-muted); }
.navbar.is-primary .navbar-dropdown .navbar-item.is-active { color: var(--sp-brick); font-weight: 600; background: var(--sp-brick-tint); }
.navbar.is-primary .navbar-dropdown .navbar-item.is-active .ti { color: var(--sp-brick); }
/* Sign out is a POST, so it is a form with a button rather than a link. Bulma
tints only a.navbar-item; the button is handed the same variables, and the
form stretches it across the menu, so it answers the pointer, the keyboard
and a press exactly like the entries above it. */
.navbar-dropdown form { display: flex; }
.navbar-dropdown button.navbar-item { flex: 1; cursor: pointer; }
.navbar-dropdown button.navbar-item:hover, .navbar-dropdown button.navbar-item:focus { --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta); }
.navbar-dropdown button.navbar-item:active { --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-active-background-l-delta); }
.navbar.is-primary .sp-current > .navbar-link, .navbar.is-primary a.navbar-item.sp-current { background: rgb(0 0 0 / .18); }
/* The header is built like the mark: a brick field, then the stamp's paper
margin, and the perforation runs along the outer edge of that margin — round