style: CSS foundation for minimalist UI redesign
Adds the spacing scale, status-pill tokens, and a set of new utility classes
that the per-screen commits will use:
- spacing scale: --space-1 through --space-9 (single source of truth for
vertical rhythm; replaces ad-hoc rem values throughout the .svelte files)
- status pill tokens: --color-status-{open,closed}-{bg,fg} (dark-mode aware,
closed pulls from the same warning palette as .fb-banner--closed)
- .fb-shell.fb-page-narrow + .fb-page-center for vertical-centred narrow
shells (landing + login)
- .fb-back-link — quiet text-only back-link, replaces the chip-style button
- .fb-inline-error — quieter alternative to .fb-banner--error
- .fb-toggle / .fb-toggle__{text,label,hint} — label-left + checkbox-right
boolean fields (no UI library)
- .fb-status-pill / .fb-status-pill__dot / --open / --closed — clickable
pill that toggles status
- .fb-menu / .fb-menu__{btn,panel,item,divider,item--danger} — native
<details>/<summary>-based ⋯ menu, no JS framework needed
- .fb-card / .fb-card__{head,title,actions,meta} + .fb-card-grid — minimalist
card on the gradient page bg, no border + shadow stack, generous padding
- .fb-empty — generous empty state
- .fb-share-strip / __url / __placeholder / __replace — inline header strip
for the detail page, replaces the standalone Share section
- .fb-closed-line — neutral muted closed-state line for /f/[slug]
- .fb-segment / __btn / __btn--active — small segmented control matching
.fb-tabs (for inline Visual/JSON toggle on Edit tab)
- .fb-detail-head / __title / __actions, .fb-tab-body, .fb-version-note,
.fb-save-row — detail-page header + tab-body layout primitives
Also normalises:
- .fb-section margin-bottom 1.75rem → var(--space-7) (≈ 2.5rem)
- focus-ring opacity 0.15 / 0.25 → 0.2 across .fb-input + .fb-btn for a
single consistent focus treatment
No structural .svelte changes here — only CSS additions and three numeric
edits. Existing pages continue to render exactly as before; the per-screen
commits that follow consume these classes.
This commit is contained in:
@@ -23,6 +23,23 @@
|
||||
--color-border-secondary: #d1d5db;
|
||||
--color-border-focus: #16a34a;
|
||||
|
||||
/* Status pill tokens — surface background + foreground for open / closed */
|
||||
--color-status-open-bg: var(--color-primary-light);
|
||||
--color-status-open-fg: var(--color-primary-hover);
|
||||
--color-status-closed-bg: #fef3c7;
|
||||
--color-status-closed-fg: #78350f;
|
||||
|
||||
/* Spacing scale — single source of truth for vertical rhythm */
|
||||
--space-1: 0.5rem;
|
||||
--space-2: 0.75rem;
|
||||
--space-3: 1rem;
|
||||
--space-4: 1.25rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 2.5rem;
|
||||
--space-8: 3rem;
|
||||
--space-9: 4rem;
|
||||
|
||||
/* Radii / shadows */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
@@ -73,6 +90,9 @@
|
||||
--color-border-secondary: #4b5563;
|
||||
--color-border-focus: #22c55e;
|
||||
|
||||
--color-status-closed-bg: rgba(245, 158, 11, 0.15);
|
||||
--color-status-closed-fg: #fcd34d;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
||||
@@ -160,7 +180,7 @@ body { min-height: 100vh; }
|
||||
|
||||
.fb-section {
|
||||
padding: 0;
|
||||
margin-bottom: 1.75rem;
|
||||
margin-bottom: var(--space-7);
|
||||
}
|
||||
|
||||
.fb-section h2 {
|
||||
@@ -208,7 +228,7 @@ body { min-height: 100vh; }
|
||||
.fb-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-border-focus);
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.15);
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.2);
|
||||
}
|
||||
|
||||
.fb-input:hover:not(:focus),
|
||||
@@ -342,7 +362,7 @@ body { min-height: 100vh; }
|
||||
|
||||
.fb-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.25);
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.2);
|
||||
}
|
||||
|
||||
.fb-btn:disabled {
|
||||
@@ -792,3 +812,453 @@ body { min-height: 100vh; }
|
||||
grid-template-columns: 6rem minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────────
|
||||
Minimalist redesign — utility classes added 2026-05-06.
|
||||
See docs/plans/ui-redesign.md for the rationale.
|
||||
───────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Page modifiers — vertical centering + narrow shell for landing/login. */
|
||||
|
||||
.fb-shell.fb-page-narrow {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.fb-shell.fb-page-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding-top: var(--space-6);
|
||||
padding-bottom: var(--space-9);
|
||||
}
|
||||
|
||||
/* Quiet text-only back-link — replaces the chip-style back button. */
|
||||
|
||||
.fb-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.fb-back-link:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Inline error — quieter alternative to .fb-banner--error. */
|
||||
|
||||
.fb-inline-error {
|
||||
color: var(--color-error);
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
/* Toggle field — label-left, native checkbox-right (no UI library). */
|
||||
|
||||
.fb-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: var(--space-2) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fb-toggle__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.fb-toggle__label {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.fb-toggle__hint {
|
||||
font-size: 0.825rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.fb-toggle input {
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Status pill — clickable, toggles open/closed via the same control. */
|
||||
|
||||
.fb-status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 0.65rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: filter 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.fb-status-pill:hover:not(:disabled) {
|
||||
filter: brightness(0.97);
|
||||
}
|
||||
|
||||
.fb-status-pill:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.2);
|
||||
}
|
||||
|
||||
.fb-status-pill:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.fb-status-pill__dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fb-status-pill--open {
|
||||
background: var(--color-status-open-bg);
|
||||
color: var(--color-status-open-fg);
|
||||
}
|
||||
|
||||
.fb-status-pill--closed {
|
||||
background: var(--color-status-closed-bg);
|
||||
color: var(--color-status-closed-fg);
|
||||
}
|
||||
|
||||
/* ⋯ menu — native <details>/<summary> with an absolutely-positioned panel. */
|
||||
|
||||
.fb-menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fb-menu__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
.fb-menu__btn::-webkit-details-marker { display: none; }
|
||||
.fb-menu__btn::marker { content: ''; }
|
||||
|
||||
.fb-menu__btn:hover {
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.fb-menu__btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.2);
|
||||
}
|
||||
|
||||
.fb-menu[open] > .fb-menu__btn {
|
||||
background: var(--color-bg-tertiary);
|
||||
border-color: var(--color-border-primary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.fb-menu__panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
min-width: 12rem;
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fb-menu__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.5rem 0.7rem;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fb-menu__item:hover:not(:disabled) {
|
||||
background: var(--color-bg-tertiary);
|
||||
}
|
||||
|
||||
.fb-menu__item:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.fb-menu__divider {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-border-primary);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.fb-menu__item--danger {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.fb-menu__item--danger:hover:not(:disabled) {
|
||||
background: rgb(220 38 38 / 0.08);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.fb-menu__item--danger:hover:not(:disabled) {
|
||||
background: rgb(248 113 113 / 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* Card — the new list-row container. Subtle bg on the gradient page bg,
|
||||
no border + shadow stack, generous internal padding. */
|
||||
|
||||
.fb-card {
|
||||
background: var(--color-bg-primary);
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.fb-card__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.fb-card__title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.35;
|
||||
word-break: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fb-card__title:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.fb-card__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fb-card__meta {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 0.4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.fb-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.fb-card-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-6);
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty state — generous whitespace + soft text. */
|
||||
|
||||
.fb-empty {
|
||||
padding: var(--space-7) 0;
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Inline share strip — replaces the standalone Share section in the
|
||||
detail-page header. Subtle border so the URL reads as a chip. */
|
||||
|
||||
.fb-share-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: var(--space-3);
|
||||
padding: 0.55rem 0.75rem;
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.fb-share-strip__url {
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fb-share-strip__url:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.fb-share-strip__placeholder {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fb-share-strip__replace {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.fb-share-strip__replace summary {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.fb-share-strip__replace summary:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Closed-state line — neutral muted, replaces .fb-banner--closed at the
|
||||
top of the participant page so closed reads as a state, not an alert. */
|
||||
|
||||
.fb-closed-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: var(--space-2) 0;
|
||||
border-top: 1px solid var(--color-border-primary);
|
||||
border-bottom: 1px solid var(--color-border-primary);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
/* Segmented control — small variant of .fb-tabs for inline controls
|
||||
(e.g. Visual / JSON toggle on the Edit tab). */
|
||||
|
||||
.fb-segment {
|
||||
display: inline-flex;
|
||||
gap: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
background: var(--color-bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.fb-segment__btn {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
transition: background 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
.fb-segment__btn:hover:not(.fb-segment__btn--active) {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.fb-segment__btn--active {
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Detail-page header — denser controls cluster with whitespace below. */
|
||||
|
||||
.fb-detail-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.fb-detail-head__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fb-detail-head__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Tab body — generous top padding so the tab pill alone titles the section. */
|
||||
|
||||
.fb-tab-body {
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
|
||||
/* Saved-version note — quiet line above the Save button on the Edit tab. */
|
||||
|
||||
.fb-version-note {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.fb-save-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user