Jonathan Hvid
59842432bd
Adds a fifth roadmap status, `planned`, for items that are committed and scheduled but not yet started — sitting between `in_beta` and `exploring` in the progression. Rendered with the design system's indigo pigment (#5a6d83) on the route, carousel, legend, and admin pill. Migration 0008 widens the status CHECK constraint via a table rebuild (SQLite can't alter it in place), preserving rows and attributions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1418 lines
39 KiB
CSS
1418 lines
39 KiB
CSS
/* ---------------------------------------------------------------------------
|
|
* Admin surface — shared styles
|
|
*
|
|
* Extracted verbatim from src/pages/admin/index.astro's <style> block as the
|
|
* first step of the Backstage rebuild. The classes here are the design
|
|
* vocabulary the resource-driven admin will be assembled from.
|
|
*
|
|
* No new rules. No tweaks. Anything new belongs in the resource-pattern
|
|
* commits that follow.
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
.page {
|
|
padding: var(--space-12) var(--space-20) var(--space-16);
|
|
max-width: var(--content-max);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ── Header ──────────────────────────────────────────────────────── */
|
|
.page-header {
|
|
max-width: 44rem;
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.eyebrow {
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.page-title { margin: 0; }
|
|
|
|
/* ── Tabs ────────────────────────────────────────────────────────── */
|
|
.tabs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
margin-bottom: var(--space-8);
|
|
border-bottom: var(--ghost-border);
|
|
padding-bottom: var(--space-2);
|
|
}
|
|
|
|
.tab {
|
|
padding: var(--space-2) var(--space-4);
|
|
border-radius: var(--radius-sm);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
transition: color var(--duration-fast) var(--ease-standard),
|
|
background var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.tab:hover { color: var(--on-surface-variant); background: var(--surface-container-low); border-bottom: none; }
|
|
.tab.active { color: var(--on-surface); background: var(--surface-container); }
|
|
|
|
.tab-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--secondary);
|
|
color: var(--on-secondary);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-label-sm);
|
|
font-weight: 700;
|
|
min-width: 1.25rem;
|
|
height: 1.25rem;
|
|
padding: 0 var(--space-1);
|
|
margin-left: var(--space-2);
|
|
}
|
|
|
|
.section-note {
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
max-width: var(--reading-max);
|
|
}
|
|
|
|
/* ── Messages ────────────────────────────────────────────────────── */
|
|
.action-msg {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: rgba(109, 140, 124, 0.1);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--pigment-copper);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.form-error {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: rgba(185, 107, 88, 0.08);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--pigment-terracotta);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
/* ── Tab content ─────────────────────────────────────────────────── */
|
|
.tab-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-12);
|
|
}
|
|
|
|
/* ── Section ─────────────────────────────────────────────────────── */
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
.section-heading {
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
}
|
|
|
|
.empty-msg {
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Invite result ───────────────────────────────────────────────── */
|
|
.invite-result {
|
|
background: rgba(109, 140, 124, 0.08);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.invite-result-label {
|
|
color: var(--pigment-copper);
|
|
letter-spacing: var(--tracking-wide);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.invite-link-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.invite-link {
|
|
font-family: var(--font-mono);
|
|
background: var(--background);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--on-surface);
|
|
word-break: break-all;
|
|
flex: 1;
|
|
}
|
|
|
|
.copy-btn {
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--secondary);
|
|
color: var(--on-secondary);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-sans);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Invite form ─────────────────────────────────────────────────── */
|
|
.invite-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.field-label {
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-variant);
|
|
}
|
|
|
|
.input,
|
|
.select {
|
|
width: 100%;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--surface-container-lowest);
|
|
border: var(--ghost-border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-body-md);
|
|
color: var(--on-surface);
|
|
outline: none;
|
|
transition: border-color var(--duration-fast) var(--ease-standard),
|
|
box-shadow var(--duration-fast) var(--ease-standard);
|
|
box-sizing: border-box;
|
|
}
|
|
.input:focus,
|
|
.select:focus {
|
|
border-color: var(--secondary);
|
|
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
|
|
}
|
|
|
|
.btn-primary {
|
|
align-self: flex-start;
|
|
padding: var(--space-2) var(--space-6);
|
|
background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
|
|
color: var(--on-secondary);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-sans);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.btn-primary:hover { opacity: 0.9; }
|
|
|
|
/* ── Data table ──────────────────────────────────────────────────── */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.data-table th {
|
|
text-align: left;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
padding: var(--space-2) var(--space-3) var(--space-2) 0;
|
|
border-bottom: var(--ghost-border);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.data-table td {
|
|
padding: var(--space-3) var(--space-3) var(--space-3) 0;
|
|
border-bottom: var(--ghost-border);
|
|
color: var(--on-surface-variant);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.data-table tr.self td {
|
|
color: var(--on-surface-muted);
|
|
}
|
|
|
|
.muted { color: var(--on-surface-muted) !important; }
|
|
|
|
/* ── Inline elements ─────────────────────────────────────────────── */
|
|
.inline-form { display: inline; }
|
|
|
|
.select-inline {
|
|
background: none;
|
|
border: var(--ghost-border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-label-md);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-variant);
|
|
padding: 0.2em var(--space-3);
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.danger-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-label-md);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--pigment-terracotta);
|
|
padding: 0.2em var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
transition: background var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.danger-btn:hover {
|
|
background: rgba(185, 107, 88, 0.08);
|
|
}
|
|
|
|
.action-cell { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
|
|
.action-link {
|
|
background: none;
|
|
border: none;
|
|
color: var(--on-surface-muted);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-label-md);
|
|
transition: color var(--duration-fast) var(--ease-standard);
|
|
padding: 0;
|
|
}
|
|
.action-link:hover { color: var(--on-surface-variant); border-bottom: none; }
|
|
|
|
/* ===========================================================================
|
|
* Backstage shell — added in step 4 of the admin rebuild.
|
|
*
|
|
* Tokens specific to the admin surface. Changing the accent or panel chrome
|
|
* later means editing one variable here, not every component.
|
|
* ========================================================================= */
|
|
|
|
:root {
|
|
--admin-sidebar-bg: var(--background);
|
|
--admin-sidebar-border: rgba(0, 0, 0, 0.06);
|
|
--admin-row-border: rgba(0, 0, 0, 0.05);
|
|
--admin-row-hover: rgba(0, 0, 0, 0.02);
|
|
--admin-active-accent: var(--pigment-terracotta);
|
|
--admin-panel-bg: var(--surface-container-lowest);
|
|
--admin-panel-shadow: 0 20px 60px -20px rgba(42, 37, 32, 0.25);
|
|
--admin-topbar-h: 56px;
|
|
--admin-sidebar-w: 240px;
|
|
}
|
|
|
|
.backstage {
|
|
min-height: 100vh;
|
|
background: var(--background);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── Top strip ───────────────────────────────────────────────────── */
|
|
.bs-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: var(--admin-topbar-h);
|
|
padding: 0 var(--space-8);
|
|
border-bottom: 1px solid var(--admin-sidebar-border);
|
|
background: var(--background);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.bs-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--on-surface);
|
|
border-bottom: none;
|
|
line-height: 1;
|
|
}
|
|
.bs-brand:hover { color: var(--on-surface); border-bottom: none; }
|
|
|
|
.bs-brand-mark {
|
|
height: 18px;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
.bs-brand-sep,
|
|
.bs-brand-slash {
|
|
color: var(--on-surface-muted);
|
|
font-family: var(--font-serif);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.bs-brand-project,
|
|
.bs-brand-bifrost,
|
|
.bs-brand-backstage {
|
|
font-family: var(--font-serif);
|
|
font-weight: 400;
|
|
letter-spacing: var(--tracking-snug);
|
|
line-height: 1.4;
|
|
}
|
|
.bs-brand-project {
|
|
font-size: 16px;
|
|
color: var(--on-surface);
|
|
}
|
|
.bs-brand-bifrost {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
padding: 3px 0 1px;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
var(--pigment-terracotta) 0%,
|
|
var(--pigment-ochre) 28%,
|
|
var(--pigment-copper) 54%,
|
|
var(--pigment-indigo) 78%,
|
|
var(--pigment-heather) 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.bs-brand-backstage {
|
|
font-size: 16px;
|
|
color: var(--on-surface-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.bs-back-link {
|
|
color: var(--on-surface-muted);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
transition: color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-back-link:hover { color: var(--on-surface); border-bottom: none; }
|
|
|
|
/* ── Two-pane body ───────────────────────────────────────────────── */
|
|
.bs-body {
|
|
display: grid;
|
|
grid-template-columns: var(--admin-sidebar-w) 1fr;
|
|
min-height: calc(100vh - var(--admin-topbar-h));
|
|
}
|
|
|
|
/* ── Sidebar ─────────────────────────────────────────────────────── */
|
|
.bs-sidebar {
|
|
background: var(--admin-sidebar-bg);
|
|
border-right: 1px solid var(--admin-sidebar-border);
|
|
padding: var(--space-6) 0;
|
|
position: sticky;
|
|
top: var(--admin-topbar-h);
|
|
align-self: start;
|
|
height: calc(100vh - var(--admin-topbar-h));
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.bs-groups {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.bs-group-label {
|
|
font-family: var(--font-sans);
|
|
font-size: 9px;
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
margin: 0 0 var(--space-2);
|
|
padding: 0 var(--space-6);
|
|
}
|
|
|
|
.bs-resources {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bs-resource {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
padding: 7px var(--space-6);
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
color: var(--on-surface);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
border-left: 2px solid transparent;
|
|
transition: background var(--duration-fast) var(--ease-standard),
|
|
color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-resource:hover {
|
|
background: var(--admin-row-hover);
|
|
color: var(--on-surface);
|
|
border-bottom: none;
|
|
}
|
|
.bs-resource.active {
|
|
border-left-color: var(--admin-active-accent);
|
|
color: var(--on-surface);
|
|
background: var(--admin-row-hover);
|
|
}
|
|
|
|
.bs-resource-label { line-height: 1.4; }
|
|
|
|
.bs-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: var(--on-surface-muted);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
.bs-count.notify {
|
|
color: var(--admin-active-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bs-sidebar-empty {
|
|
color: var(--on-surface-muted);
|
|
font-size: 13px;
|
|
padding: 0 var(--space-6);
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Main pane ──────────────────────────────────────────────────── */
|
|
.bs-main {
|
|
padding: var(--space-8) var(--space-10);
|
|
min-width: 0; /* prevents grid blowout on long content */
|
|
}
|
|
|
|
/* ── Responsive — mobile shows the sidebar above the content ────── */
|
|
@media (max-width: 767px) {
|
|
.bs-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.bs-sidebar {
|
|
position: static;
|
|
height: auto;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--admin-sidebar-border);
|
|
padding: var(--space-4) 0;
|
|
}
|
|
.bs-main {
|
|
padding: var(--space-6) var(--space-6);
|
|
}
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* ResourceListView — step 5
|
|
*
|
|
* Page header, toolbar (search + filter chips), grid-based table with
|
|
* clickable rows (whole row is an anchor), pill cells, pagination.
|
|
* ========================================================================= */
|
|
|
|
.bs-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
max-width: 1100px;
|
|
}
|
|
|
|
/* ── Page header ────────────────────────────────────────────────── */
|
|
.bs-list-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.bs-list-heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
max-width: 44rem;
|
|
}
|
|
|
|
.bs-list-eyebrow {
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.bs-list-title {
|
|
font-family: var(--font-serif);
|
|
font-weight: 400;
|
|
font-size: 36px;
|
|
line-height: 1.05;
|
|
color: var(--on-surface);
|
|
margin: 0;
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
|
|
.bs-list-desc {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--on-surface-variant);
|
|
margin: 0;
|
|
}
|
|
|
|
.bs-list-new {
|
|
flex-shrink: 0;
|
|
padding: 9px 18px;
|
|
background: var(--ink);
|
|
color: var(--on-ink);
|
|
border: none;
|
|
border-radius: 999px;
|
|
font-family: var(--font-sans);
|
|
font-weight: 500;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
cursor: pointer;
|
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-list-new:hover { opacity: 0.88; border-bottom: none; color: var(--on-ink); }
|
|
|
|
/* ── Toolbar ────────────────────────────────────────────────────── */
|
|
.bs-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bs-search-form {
|
|
flex: 1;
|
|
min-width: 240px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.bs-search-input {
|
|
width: 100%;
|
|
padding: 9px 14px;
|
|
background: var(--surface-container-lowest);
|
|
border: 1px solid var(--admin-sidebar-border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
color: var(--on-surface);
|
|
outline: none;
|
|
transition: border-color var(--duration-fast) var(--ease-standard),
|
|
box-shadow var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-search-input:focus {
|
|
border-color: var(--secondary);
|
|
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.10);
|
|
}
|
|
.bs-search-input::placeholder { color: var(--on-surface-muted); }
|
|
|
|
.bs-filters {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bs-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 5px 12px;
|
|
border-radius: 999px;
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
background: transparent;
|
|
border: 1px solid var(--admin-sidebar-border);
|
|
border-bottom: 1px solid var(--admin-sidebar-border);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-standard),
|
|
background var(--duration-fast) var(--ease-standard),
|
|
border-color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-chip:hover {
|
|
color: var(--on-surface);
|
|
background: var(--admin-row-hover);
|
|
border-color: var(--admin-row-border);
|
|
border-bottom: 1px solid var(--admin-row-border);
|
|
}
|
|
.bs-chip.active {
|
|
color: var(--on-ink);
|
|
background: var(--ink);
|
|
border-color: var(--ink);
|
|
}
|
|
.bs-chip.active:hover {
|
|
color: var(--on-ink);
|
|
background: var(--ink);
|
|
}
|
|
|
|
/* ── Grid table ─────────────────────────────────────────────────── */
|
|
.bs-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
--bs-grid-cols: 1fr; /* overridden inline per list */
|
|
}
|
|
|
|
.bs-grid-head,
|
|
.bs-grid-row {
|
|
display: grid;
|
|
grid-template-columns: var(--bs-grid-cols);
|
|
gap: var(--space-4);
|
|
align-items: center;
|
|
padding: var(--space-3) 0;
|
|
border-bottom: 1px solid var(--admin-row-border);
|
|
}
|
|
|
|
.bs-grid-head {
|
|
border-bottom-color: var(--admin-sidebar-border);
|
|
}
|
|
|
|
.bs-grid-th {
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bs-grid-row {
|
|
color: var(--on-surface);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--admin-row-border);
|
|
transition: background var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-grid-row:hover {
|
|
background: var(--admin-row-hover);
|
|
border-bottom: 1px solid var(--admin-row-border);
|
|
color: var(--on-surface);
|
|
}
|
|
|
|
.bs-grid-td {
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
color: var(--on-surface-variant);
|
|
}
|
|
|
|
/* ── Cell internals ─────────────────────────────────────────────── */
|
|
.bs-cell-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
.bs-cell-title {
|
|
color: var(--on-surface);
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.bs-cell-title.primary {
|
|
font-family: var(--font-serif);
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
letter-spacing: var(--tracking-snug);
|
|
}
|
|
.bs-cell-subtitle {
|
|
color: var(--on-surface-muted);
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.bs-cell-rel,
|
|
.bs-cell-number {
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--on-surface-variant);
|
|
font-size: 12px;
|
|
}
|
|
.bs-cell-empty {
|
|
color: var(--on-surface-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ── Pills ──────────────────────────────────────────────────────── */
|
|
.bs-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
.pill-decision { background: rgba(185, 107, 88, 0.10); color: #b96b58; }
|
|
.pill-update { background: rgba(90, 109, 131, 0.12); color: #5a6d83; }
|
|
.pill-note { background: rgba(141, 122, 133, 0.12); color: #8d7a85; }
|
|
.pill-bts { background: rgba(120, 95, 83, 0.12); color: #785f53; }
|
|
.pill-published { background: rgba(109, 140, 124, 0.15); color: #6d8c7c; }
|
|
.pill-draft { background: rgba(0, 0, 0, 0.06); color: var(--on-surface-variant); }
|
|
.pill-archived { background: rgba(0, 0, 0, 0.04); color: var(--on-surface-muted); }
|
|
.pill-open { background: rgba(109, 140, 124, 0.15); color: #6d8c7c; }
|
|
.pill-closed { background: rgba(0, 0, 0, 0.06); color: var(--on-surface-variant); }
|
|
.pill-pending { background: rgba(185, 107, 88, 0.10); color: #b96b58; }
|
|
.pill-accepted { background: rgba(109, 140, 124, 0.15); color: #6d8c7c; }
|
|
.pill-expired { background: rgba(0, 0, 0, 0.04); color: var(--on-surface-muted); }
|
|
.pill-approved { background: rgba(109, 140, 124, 0.15); color: #6d8c7c; }
|
|
.pill-declined { background: rgba(0, 0, 0, 0.04); color: var(--on-surface-muted); }
|
|
.pill-shipping { background: rgba(109, 140, 124, 0.18); color: #5a7268; }
|
|
.pill-in-beta { background: rgba(185, 107, 88, 0.10); color: #b96b58; }
|
|
.pill-planned { background: rgba(90, 109, 131, 0.12); color: #5a6d83; }
|
|
.pill-exploring { background: rgba(186, 186, 176, 0.20); color: var(--on-surface-variant); }
|
|
.pill-considering{ background: rgba(186, 186, 176, 0.10); color: var(--on-surface-muted); }
|
|
.pill-active { background: rgba(109, 140, 124, 0.15); color: #6d8c7c; }
|
|
.pill-departed { background: rgba(0, 0, 0, 0.04); color: var(--on-surface-muted); }
|
|
.pill-pilot { background: rgba(120, 95, 83, 0.12); color: #785f53; }
|
|
.pill-cab { background: rgba(185, 107, 88, 0.10); color: #b96b58; }
|
|
.pill-fenja { background: rgba(90, 109, 131, 0.12); color: #5a6d83; }
|
|
|
|
/* ── Tag list cell ──────────────────────────────────────────────── */
|
|
.bs-cell-tags {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
.bs-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: var(--admin-row-hover);
|
|
color: var(--on-surface-variant);
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
/* ── Empty state ────────────────────────────────────────────────── */
|
|
.bs-list-empty {
|
|
padding: var(--space-8) 0;
|
|
text-align: center;
|
|
color: var(--on-surface-muted);
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Pagination ─────────────────────────────────────────────────── */
|
|
.bs-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-6);
|
|
padding-top: var(--space-4);
|
|
}
|
|
.bs-page-link {
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-variant);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
transition: color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-page-link:hover { color: var(--on-surface); border-bottom: none; }
|
|
.bs-page-link.disabled { color: var(--on-surface-muted); cursor: default; opacity: 0.5; }
|
|
.bs-page-status {
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Mobile: collapse grid rows to stacked cards ────────────────── */
|
|
@media (max-width: 767px) {
|
|
.bs-list-header { flex-direction: column; align-items: flex-start; }
|
|
.bs-list-title { font-size: 28px; }
|
|
.bs-grid-head { display: none; }
|
|
.bs-grid-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
padding: var(--space-4) var(--space-3);
|
|
border-bottom: 1px solid var(--admin-row-border);
|
|
}
|
|
.bs-grid-td { font-size: 13px; }
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* ResourceEditPanel — step 6
|
|
*
|
|
* Right-slide panel + form. Scrim overlays the page; clicking outside the
|
|
* panel closes it (the scrim is itself a link to the close URL). All form
|
|
* state lives in the URL / form data — no in-memory state.
|
|
* ========================================================================= */
|
|
|
|
.bs-panel-scrim {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(42, 37, 32, 0.30);
|
|
z-index: 90;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
animation: bs-fade-in var(--duration-fast) var(--ease-standard);
|
|
}
|
|
|
|
@keyframes bs-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.bs-panel-scrim-link {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-bottom: none;
|
|
cursor: default; /* The X button is the real close affordance. */
|
|
}
|
|
|
|
.bs-panel {
|
|
position: relative;
|
|
width: min(440px, 100vw);
|
|
height: 100vh;
|
|
background: var(--admin-panel-bg);
|
|
box-shadow: var(--admin-panel-shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: bs-slide-in 180ms var(--ease-standard);
|
|
}
|
|
|
|
@keyframes bs-slide-in {
|
|
from { transform: translateX(20px); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
/* ── Panel header ───────────────────────────────────────────────── */
|
|
.bs-panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-5) var(--space-6) var(--space-4);
|
|
border-bottom: 1px solid var(--admin-sidebar-border);
|
|
}
|
|
.bs-panel-title {
|
|
font-family: var(--font-serif);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
letter-spacing: var(--tracking-snug);
|
|
color: var(--on-surface);
|
|
margin: 0;
|
|
}
|
|
.bs-panel-close {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
font-family: var(--font-sans);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
color: var(--on-surface-muted);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
transition: background var(--duration-fast) var(--ease-standard),
|
|
color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-panel-close:hover {
|
|
background: var(--admin-row-hover);
|
|
color: var(--on-surface);
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ── Panel form ─────────────────────────────────────────────────── */
|
|
.bs-panel-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.bs-panel-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-5) var(--space-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
/* ── Field + label + helper + error ─────────────────────────────── */
|
|
.bs-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.bs-label {
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-variant);
|
|
font-weight: 500;
|
|
}
|
|
.bs-required {
|
|
color: var(--pigment-terracotta);
|
|
margin-left: 4px;
|
|
}
|
|
.bs-helper {
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
.bs-field-error {
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
color: var(--pigment-terracotta);
|
|
margin: 0;
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
/* ── Inputs ─────────────────────────────────────────────────────── */
|
|
.bs-input {
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
background: var(--surface-container-lowest);
|
|
border: 1px solid var(--admin-row-border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
color: var(--on-surface);
|
|
outline: none;
|
|
transition: border-color var(--duration-fast) var(--ease-standard),
|
|
box-shadow var(--duration-fast) var(--ease-standard);
|
|
box-sizing: border-box;
|
|
}
|
|
.bs-input:focus {
|
|
border-color: var(--secondary);
|
|
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.10);
|
|
}
|
|
.bs-input[readonly] {
|
|
background: var(--admin-row-hover);
|
|
color: var(--on-surface-variant);
|
|
}
|
|
.bs-textarea {
|
|
resize: vertical;
|
|
line-height: 1.6;
|
|
font-family: var(--font-sans);
|
|
}
|
|
.bs-select { cursor: pointer; }
|
|
.bs-readonly {
|
|
padding: 9px 12px;
|
|
background: var(--admin-row-hover);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
color: var(--on-surface-variant);
|
|
}
|
|
|
|
/* ── Markdown field ─────────────────────────────────────────────── */
|
|
.bs-md { display: flex; flex-direction: column; gap: 6px; }
|
|
.bs-md-toolbar {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--admin-row-border);
|
|
}
|
|
.bs-md-tab {
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
padding: 6px 12px;
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
cursor: pointer;
|
|
transition: color var(--duration-fast) var(--ease-standard),
|
|
border-color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-md-tab:hover { color: var(--on-surface-variant); }
|
|
.bs-md-tab.is-active {
|
|
color: var(--on-surface);
|
|
border-bottom-color: var(--admin-active-accent);
|
|
}
|
|
.bs-md-input {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
.bs-md-preview {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--admin-row-hover);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--on-surface);
|
|
}
|
|
.bs-md-preview > :first-child { margin-top: 0; }
|
|
.bs-md-preview > :last-child { margin-bottom: 0; }
|
|
.bs-md-empty {
|
|
color: var(--on-surface-muted);
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── MultiText field ────────────────────────────────────────────── */
|
|
.bs-multitext { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
.bs-multitext-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.bs-multitext-row {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
}
|
|
.bs-multitext-row .bs-input { flex: 1; }
|
|
.bs-multitext-remove {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--admin-row-border);
|
|
background: transparent;
|
|
color: var(--on-surface-muted);
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background var(--duration-fast) var(--ease-standard),
|
|
color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-multitext-remove:hover {
|
|
background: rgba(185, 107, 88, 0.08);
|
|
color: var(--pigment-terracotta);
|
|
}
|
|
.bs-multitext-remove:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
.bs-multitext-add {
|
|
align-self: flex-start;
|
|
background: none;
|
|
border: none;
|
|
padding: 4px 0;
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
cursor: pointer;
|
|
transition: color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-multitext-add:hover { color: var(--on-surface); }
|
|
.bs-multitext-add:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ── MultiSelect field ──────────────────────────────────────────── */
|
|
.bs-multiselect {
|
|
border: 1px solid var(--admin-row-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
background: var(--surface-container-lowest);
|
|
}
|
|
.bs-multiselect-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 4px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
color: var(--on-surface);
|
|
cursor: pointer;
|
|
transition: background var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-multiselect-row:hover { background: var(--admin-row-hover); }
|
|
.bs-multiselect-empty {
|
|
color: var(--on-surface-muted);
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
padding: 6px;
|
|
}
|
|
.bs-visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* ── Embedded sub-form section (pulse inside dispatch) ──────────── */
|
|
.bs-embed {
|
|
padding: var(--space-4);
|
|
background: var(--admin-row-hover);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.bs-embed-title {
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
.bs-embed-placeholder {
|
|
font-size: 12px;
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Panel footer ───────────────────────────────────────────────── */
|
|
.bs-panel-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4) var(--space-6);
|
|
border-top: 1px solid var(--admin-sidebar-border);
|
|
background: var(--admin-panel-bg);
|
|
}
|
|
.bs-panel-foot-left {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.bs-panel-save {
|
|
padding: 9px 18px;
|
|
background: var(--ink);
|
|
color: var(--on-ink);
|
|
border: none;
|
|
border-radius: 999px;
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-panel-save:hover { opacity: 0.88; }
|
|
|
|
.bs-panel-secondary {
|
|
padding: 9px 14px;
|
|
background: transparent;
|
|
color: var(--on-surface);
|
|
border: 1px solid var(--admin-row-border);
|
|
border-radius: 999px;
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: background var(--duration-fast) var(--ease-standard),
|
|
color var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-panel-secondary:hover {
|
|
background: var(--admin-row-hover);
|
|
}
|
|
.bs-panel-secondary.destructive {
|
|
color: var(--pigment-terracotta);
|
|
border-color: rgba(185, 107, 88, 0.30);
|
|
}
|
|
.bs-panel-secondary.destructive:hover {
|
|
background: rgba(185, 107, 88, 0.08);
|
|
}
|
|
|
|
.bs-panel-delete {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--pigment-terracotta);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius-sm);
|
|
transition: background var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-panel-delete:hover { background: rgba(185, 107, 88, 0.08); }
|
|
|
|
/* ── Mobile: full-screen modal ──────────────────────────────────── */
|
|
@media (max-width: 767px) {
|
|
.bs-panel { width: 100vw; max-width: 100vw; }
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* Flash banner — step 7
|
|
*
|
|
* Lives above the list view, surfaces the ?msg= flash after a redirect.
|
|
* Two variants: success (default) and error (after a save failure).
|
|
* ========================================================================= */
|
|
|
|
.bs-flash {
|
|
padding: 10px var(--space-5);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-sans);
|
|
font-size: 12px;
|
|
letter-spacing: var(--tracking-wide);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.bs-flash.success {
|
|
background: rgba(109, 140, 124, 0.10);
|
|
color: #5a7268;
|
|
}
|
|
.bs-flash.error {
|
|
background: rgba(185, 107, 88, 0.10);
|
|
color: var(--pigment-terracotta);
|
|
}
|
|
|
|
/* ── Embedded sub-form internals (pulse fieldset etc.) ──────────── */
|
|
.bs-pulse-embed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.bs-field-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-3);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.bs-field-row { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ── Review panel summary (form: null resources) ────────────────── */
|
|
.bs-summary {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.bs-summary-row {
|
|
display: grid;
|
|
grid-template-columns: 100px 1fr;
|
|
gap: var(--space-3);
|
|
align-items: baseline;
|
|
}
|
|
.bs-summary-label {
|
|
font-family: var(--font-sans);
|
|
font-size: 10px;
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--on-surface-muted);
|
|
margin: 0;
|
|
}
|
|
.bs-summary-value {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--on-surface);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Invite magic-link block ────────────────────────────────────── */
|
|
.bs-invite-result {
|
|
background: rgba(109, 140, 124, 0.10);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.bs-invite-result-label {
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
letter-spacing: var(--tracking-wide);
|
|
color: #5a7268;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
.bs-invite-link-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.bs-invite-link {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
background: var(--background);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--on-surface);
|
|
word-break: break-all;
|
|
line-height: 1.4;
|
|
}
|
|
.bs-copy-btn {
|
|
flex-shrink: 0;
|
|
padding: 6px 12px;
|
|
background: var(--ink);
|
|
color: var(--on-ink);
|
|
border: none;
|
|
border-radius: 999px;
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
|
}
|
|
.bs-copy-btn:hover { opacity: 0.88; }
|