/* App-level layout on the app-owned tokens (tokens.css: structure, type, spacing). Colour goes through the brand slot below: components reference the semantic aliases (--color-accent etc), never a brand palette directly. */ /* ------------------------------------------------------------------ Brand slot. The product default is a neutral violet accent; a workspace brand theme (data-brand on , from team.theme) only re-points the four --brand-* properties. Everything downstream - semantic aliases, soft washes, focus rings - derives from them. ------------------------------------------------------------------ */ :root { --brand-accent: #6E56CF; /* primary accent */ --brand-accent-hover: #5B45B8; /* hover / pressed */ --brand-accent-bright: #B3A4F1; /* accent text on dark surfaces */ --brand-accent-wash: #EDE9FB; /* light accent wash */ /* Accent semantic aliases, all derived from the brand slot. */ --color-accent: var(--brand-accent); --color-accent-hover: var(--brand-accent-hover); --text-accent: var(--brand-accent); --surface-accent: var(--brand-accent); --focus-ring: var(--brand-accent); --ring-color: color-mix(in srgb, var(--brand-accent) 35%, transparent); --accent-soft-bg: var(--brand-accent-wash); --accent-soft-text: var(--brand-accent-hover); /* Curvier corners than the token defaults (per design direction). */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; } /* Workspace brand themes re-point the four --brand-* properties under a [data-brand="..."] selector here (driven by team.theme). None ship today; an unknown theme value simply renders the neutral defaults. */ /* Text selection follows the brand. */ ::selection { background: var(--brand-accent-bright); color: var(--neutral-900); } /* ------------------------------------------------------------------ Dark mode (this app's default, data-theme="dark" on ): remaps the semantic aliases onto the neutral scale; accents come from the brand slot so they follow whichever theme is active. ------------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; --surface-page: var(--neutral-900); --surface-card: var(--neutral-800); --surface-sunken: var(--neutral-700); --surface-inverse: var(--neutral-0); --text-primary: var(--neutral-50); --text-secondary: var(--neutral-300); --text-muted: var(--neutral-400); --text-inverse: var(--neutral-900); --text-accent: var(--brand-accent-bright); --border-subtle: var(--neutral-700); --border-default: var(--neutral-600); --border-strong: var(--neutral-500); --color-accent-contrast: var(--neutral-0); --accent-soft-bg: color-mix(in srgb, var(--brand-accent) 28%, transparent); --accent-soft-text: var(--brand-accent-bright); --success-bg: rgba(46, 125, 79, 0.22); /* --success */ --warning-bg: rgba(199, 123, 48, 0.22); /* --warning */ --error-bg: rgba(192, 57, 43, 0.22); /* --error */ } .centre { margin: auto; width: 100%; max-width: 420px; padding: var(--space-6); } .auth-card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-top: var(--border-accent-width) solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-6); } .eyebrow { font-family: var(--font-display); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); color: var(--text-accent); margin-bottom: var(--space-2); } .field { width: 100%; font-family: var(--font-body); font-size: var(--text-base); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); margin: var(--space-2) 0 var(--space-4); } .field:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 var(--ring-width) var(--ring-color); } .btn-primary { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-accent-contrast); background: var(--color-accent); border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); } .btn-primary:hover { background: var(--color-accent-hover); } .btn-primary:disabled { opacity: 0.45; cursor: default; } .muted { color: var(--text-secondary); font-size: var(--text-sm); } /* Turnstile widget slot on the auth card (rendered only when configured). */ .turnstile { margin-bottom: var(--space-4); min-height: 0; } /* ---- Signed-out landing page ---- */ .eyebrow-link { background: transparent; border: 0; padding: 0; cursor: pointer; } .landing { width: 100%; height: 100%; overflow-y: auto; background: var(--surface-page); } .landing-inner { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); } .landing-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-10); } .landing-brand { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); } .landing-hero { max-width: 660px; margin-bottom: var(--space-8); } .landing-hero h1 { font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-3); } .landing-sub { font-size: var(--text-md); } .landing-cta { margin-top: var(--space-5); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); } .feature-card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); } .feature-card h3 { font-size: var(--text-md); margin: var(--space-3) 0 var(--space-2); } .feature-card p { margin: 0; } .feature-icon { width: 22px; height: 22px; color: var(--color-accent); opacity: 1; } .landing-foot { font-size: var(--text-xs); } .row { display: flex; align-items: center; gap: var(--space-4); } .app-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; } /* ---- App chrome: sidebar + main pane ---- */ .app-layout { display: flex; flex: 1; min-height: 0; height: 100%; } /* Workspace identity at the top of the sidebar (replaces the old top bar). */ .ws-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-4); margin-bottom: var(--space-1); } /* Workspace mark: initial-letter tile in the brand accent. */ .ws-mark { height: 32px; width: 32px; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-contrast); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); flex: 0 0 auto; } .ws-titles { line-height: 1.15; min-width: 0; } .ws-title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); } .ws-sub { font-size: var(--text-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* Account control pinned to the foot of the sidebar. */ .profile { position: relative; margin-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); padding-top: var(--space-2); } .profile-btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-2); cursor: pointer; } .profile-btn:hover { background: var(--surface-sunken); } .avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--neutral-0); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: var(--weight-semibold); flex: 0 0 auto; } .profile-name { font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-pop { position: absolute; bottom: calc(100% + var(--space-1)); left: 0; right: 0; background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); } .profile-email { font-size: var(--text-xs); color: var(--text-secondary); padding: var(--space-2); word-break: break-all; border-bottom: var(--border-width) solid var(--border-subtle); margin-bottom: var(--space-1); } .profile-item { width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm); padding: var(--space-2); color: var(--text-primary); cursor: pointer; font-size: var(--text-sm); } .profile-item:hover { background: var(--surface-sunken); } .profile-item.danger:hover { color: var(--error); } /* Sidebar database counts */ .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-count { font-size: var(--text-2xs); color: var(--text-muted); } .nav-item-active .nav-count { color: var(--accent-soft-text); } .nav-add { color: var(--text-muted); } .nav-add:hover { color: var(--text-primary); } .nav-add-plus { width: 16px; text-align: center; flex: 0 0 auto; } .nav-add-input { margin: var(--space-1) var(--space-2) 0; width: calc(100% - var(--space-4)); border-color: var(--border-default); } /* Settings form fields */ .settings-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .field-label { display: block; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin: var(--space-3) 0 var(--space-1); } .field-box { border-color: var(--border-default); max-width: 320px; } .field-static { font-size: var(--text-sm); } @media (max-width: 900px) { .settings-cols { grid-template-columns: 1fr; } } .sidebar { width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; border-right: var(--border-width) solid var(--border-subtle); background: var(--surface-card); padding: var(--space-4) var(--space-3); overflow-y: auto; } .sidebar-spacer { flex: 1 1 auto; min-height: var(--space-4); } /* Sidebar search launcher (opens the command palette) */ .search-btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; margin: 0 var(--space-2) var(--space-3); width: calc(100% - var(--space-4)); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); background: var(--surface-sunken); border: var(--border-width) solid transparent; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; } .search-btn:hover { border-color: var(--border-default); } .search-btn-label { flex: 1; text-align: left; } .kbd { font-family: var(--font-mono); font-size: var(--text-2xs); background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0 var(--space-2); color: var(--text-secondary); } /* Command palette (centered) */ .palette-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; } .palette { width: min(600px, 92vw); background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .palette-input { width: 100%; font-family: var(--font-body); font-size: var(--text-md); color: var(--text-primary); background: transparent; border: 0; padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); } .palette-input:focus { outline: none; } .palette-results { max-height: 52vh; overflow-y: auto; padding: var(--space-2); } .palette-empty { padding: var(--space-4); } .palette-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; } .palette-result:hover { background: var(--surface-sunken); } .result-title { flex: 1; font-size: var(--text-sm); } .result-db { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); } .sidebar-heading { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); color: var(--text-muted); padding: var(--space-2) var(--space-3); } .nav-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary); background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-top: var(--space-1); cursor: pointer; } /* Inline SVG line icons: stroked with the current text colour, so they follow every theme with no tinting. */ .ds-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.72; } .nav-item-active .ds-icon { opacity: 1; } .nav-item:hover { background: var(--surface-sunken); } .nav-item-active { background: var(--accent-soft-bg); color: var(--accent-soft-text); font-weight: var(--weight-medium); } .main-pane { flex: 1; min-width: 0; padding: var(--space-6); overflow: auto; background: var(--surface-page); } .pane-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .pane-header h2 { margin: 0; } .tab { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); background: transparent; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; } .tab-active { color: var(--accent-soft-text); border-color: var(--color-accent); background: var(--accent-soft-bg); font-weight: var(--weight-semibold); } /* Breadcrumb shown in the pane header while viewing the recycling bin. */ .breadcrumb { display: flex; align-items: baseline; gap: var(--space-2); } .crumb-link { font: inherit; color: var(--text-secondary); background: transparent; border: 0; padding: 0; cursor: pointer; } .crumb-link:hover { color: var(--text-accent); text-decoration: underline; } .crumb-sep { color: var(--text-muted); } /* View switcher: saved views (Table / Board) for the current database. */ .view-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: var(--space-3); } .view-tab { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); background: transparent; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; } .view-tab:hover { background: var(--surface-sunken); } .view-tab-active { color: var(--accent-soft-text); border-color: var(--color-accent); background: var(--accent-soft-bg); font-weight: var(--weight-medium); } .view-kind { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); } .view-x { color: var(--text-muted); font-size: var(--text-base); line-height: 1; } .view-x:hover { color: var(--error); } .view-add { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-accent); background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; } .view-add:hover { background: var(--accent-soft-bg); } .view-add-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .view-add-form .cell-input { max-width: 180px; border-color: var(--border-default); } .view-add-form .cell-select { max-width: 150px; border-color: var(--border-default); } .board-empty { padding: var(--space-5); } /* Per-view settings: sort, filters, column visibility. */ .view-settings { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .vs-row { display: flex; align-items: flex-start; gap: var(--space-3); } .vs-label { flex: 0 0 64px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--text-muted); padding-top: var(--space-2); } .vs-filter-list { display: flex; flex-direction: column; gap: var(--space-2); } .vs-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .vs-filter .cell-input, .vs-filter .cell-select { border-color: var(--border-default); max-width: 180px; } .chip { font-size: var(--text-2xs); color: var(--text-secondary); background: var(--surface-sunken); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; } .chip-on { background: var(--accent-soft-bg); color: var(--accent-soft-text); border-color: var(--color-accent); } /* Board (kanban) view: columns grouped by Status, drag cards between them. */ .board { display: flex; gap: var(--space-4); align-items: flex-start; overflow-x: auto; padding-bottom: var(--space-3); } .board-col { flex: 0 0 260px; background: var(--surface-sunken); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); min-height: 120px; } .board-col.drag-over { border-color: var(--color-accent); box-shadow: 0 0 0 var(--ring-width) var(--ring-color); } .board-col-header { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--space-3); } .board-count { background: var(--surface-card); border-radius: var(--radius-pill); padding: 0 var(--space-2); color: var(--text-muted); } .board-card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: var(--space-3); margin-bottom: var(--space-3); cursor: grab; } .board-card:active { cursor: grabbing; } .card-title { font-weight: var(--weight-medium); font-size: var(--text-sm); margin-bottom: var(--space-2); } .ref-tag, .cell-ref { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); margin-right: var(--space-2); } .cell-ref { white-space: nowrap; } /* Progress property: a native bar plus a small numeric editor. */ .progress-cell { display: flex; align-items: center; gap: var(--space-2); } .progress-bar { flex: 1; height: 8px; min-width: 60px; accent-color: var(--color-accent); } .progress-input { max-width: 56px; } .card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); } .chip { font-size: var(--text-2xs); color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); } .card-foot { display: flex; align-items: center; justify-content: space-between; } /* Team home: stats, announcements, quick links, members. */ .stat-row { display: flex; gap: var(--space-4); margin: var(--space-4) 0 var(--space-6); } .stat-card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-top: var(--border-accent-width) solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); min-width: 120px; } .stat-num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); } .stat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); } .team-cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; } .team-panel { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); } .team-panel h3 { margin: 0 0 var(--space-3); } .panel-gap { margin-top: var(--space-5) !important; } .stack-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .stack-form .cell-input { border-color: var(--border-default); min-width: 140px; flex: 1; } .ann { border-top: var(--border-width) solid var(--border-subtle); padding: var(--space-3) 0; } .ann-pinned { border-left: var(--border-accent-width) solid var(--color-accent); padding-left: var(--space-3); } .ann-head { display: flex; align-items: center; gap: var(--space-3); } .pin-badge { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent-soft-text); background: var(--accent-soft-bg); border-radius: var(--radius-pill); padding: 0 var(--space-2); } .ann-foot { display: flex; gap: var(--space-3); font-size: var(--text-xs); margin-top: var(--space-1); } .link-btn { color: var(--text-accent); cursor: pointer; } .link-btn:hover { text-decoration: underline; } .link-btn.danger { color: var(--error); } .quick-link { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-top: var(--border-width) solid var(--border-subtle); } .member-card { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-top: var(--border-width) solid var(--border-subtle); } .member-name { font-size: var(--text-sm); } .role-badge { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); } /* Small icon-only button (open, close, row actions). */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--radius-sm); padding: var(--space-1); cursor: pointer; } .icon-btn:hover { background: var(--surface-sunken); } .open-col { width: 32px; } .open-btn { opacity: 0; } .data-table tbody tr:hover .open-btn, .board-card:hover .open-btn { opacity: 0.8; } .cal-event { cursor: pointer; } /* Record opened as a page: right-hand drawer over a dimming overlay. */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 50; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); background: var(--surface-card); border-left: var(--border-width) solid var(--border-subtle); box-shadow: var(--shadow-lg); z-index: 51; padding: var(--space-6); overflow-y: auto; } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .detail-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); width: 100%; background: transparent; border: 0; color: var(--text-primary); margin-bottom: var(--space-5); padding: 0; } .detail-title:focus { outline: none; } .detail-field { margin-bottom: var(--space-4); } .detail-label { display: block; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin-bottom: var(--space-2); } .detail-input, .detail-select, .detail-textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary); background: var(--surface-page); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } .detail-textarea { resize: vertical; line-height: var(--leading-normal); } .detail-divider { border-top: var(--border-width) solid var(--border-subtle); margin: var(--space-5) 0 var(--space-4); } /* Block editor (record notes) */ .block-editor { display: flex; flex-direction: column; gap: var(--space-1); } .block-row { display: flex; align-items: flex-start; gap: var(--space-2); position: relative; } /* [[wiki-link autocomplete + link/backlink chips */ .link-hint { font-size: var(--text-2xs); margin-left: auto; } .link-menu { position: absolute; top: 100%; left: var(--space-7); z-index: 30; min-width: 220px; max-width: 90%; background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-1); display: flex; flex-direction: column; } .link-menu-item { text-align: left; background: transparent; border: 0; cursor: pointer; color: var(--text-primary); font-size: var(--text-sm); padding: var(--space-2); border-radius: var(--radius-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-menu-item:hover { background: var(--surface-sunken); color: var(--accent-soft-text); } .link-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .link-chip { background: var(--accent-soft-bg); color: var(--accent-soft-text); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); cursor: pointer; } .link-chip:hover { border-color: var(--color-accent); } .block-type { flex: 0 0 auto; width: 84px; font-size: var(--text-2xs); background: transparent; color: var(--text-muted); border: var(--border-width) solid transparent; border-radius: var(--radius-sm); padding: var(--space-1); cursor: pointer; opacity: 0; } .block-row:hover .block-type { opacity: 1; } .block-input, .block-textarea { flex: 1; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary); background: transparent; border: 0; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); resize: none; line-height: var(--leading-normal); } .block-input:focus, .block-textarea:focus { outline: none; background: var(--surface-sunken); } .block-heading { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); } .block-bullet { } .block-quote { border-left: var(--border-accent-width) solid var(--border-strong); font-style: italic; color: var(--text-secondary); } .block-divider { flex: 1; border: 0; border-top: var(--border-width) solid var(--border-default); margin: var(--space-3) 0; } .todo-box { background: transparent; border: 0; cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); padding: 0 var(--space-1); } .todo-done { color: var(--text-muted); text-decoration: line-through; } .block-del { opacity: 0; flex: 0 0 auto; } .block-row:hover .block-del { opacity: 0.7; } .block-add-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .detail-input:focus, .detail-select:focus, .detail-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 var(--ring-width) var(--ring-color); } /* Home dashboard: greeting, KPI cards, open work, quick links. */ .home, .team-home { max-width: 1440px; } .home-hero { margin-bottom: var(--space-6); } .home-hero h1 { margin: var(--space-1) 0; } .home-date { font-size: var(--text-sm); margin-top: var(--space-2); } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .kpi-card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-top: var(--border-accent-width) solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-xs); } .kpi-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .kpi-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); } .kpi-num { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; } .kpi-sub { font-size: var(--text-2xs); margin-top: var(--space-2); } .home-cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; } .home-task { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); border-top: var(--border-width) solid var(--border-subtle); cursor: pointer; } .home-task:first-of-type { border-top: 0; } .home-task:hover { background: var(--surface-sunken); } .home-task-title { flex: 1; font-size: var(--text-sm); } .status-chip { font-size: var(--text-2xs); color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); white-space: nowrap; } .due { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); } .due-over { color: var(--error); } /* Polish: interactive table rows, roomier surfaces, responsive stacking. */ .data-table tbody tr:hover td { background: var(--surface-sunken); } .tableview, .team-panel, .calendar, .columns-panel, .view-settings { box-shadow: var(--shadow-xs); } @media (max-width: 900px) { .home-cols, .team-cols { grid-template-columns: 1fr; } .sidebar { width: 200px; flex-basis: 200px; } } /* Calendar view: month grid placing records on their date. */ .calendar { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); } .cal-header { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-3); } .cal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--border-width); background: var(--border-subtle); border: var(--border-width) solid var(--border-subtle); } .cal-weekday { background: var(--surface-sunken); text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-2xs); color: var(--text-secondary); padding: var(--space-2); } .cal-cell { background: var(--surface-card); min-height: 92px; padding: var(--space-2); } .cal-blank { background: var(--surface-page); } .cal-day { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); } .cal-event { font-size: var(--text-2xs); background: var(--surface-sunken); color: var(--text-primary); border-left: var(--border-accent-width) solid var(--neutral-400); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event-public { border-left-color: var(--color-accent); background: var(--accent-soft-bg); } /* Columns manager (add / rename / delete a database's properties). */ .columns-panel { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); } .columns-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-3); } .col-row, .col-add { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; } .col-row .cell-input { max-width: 240px; } .col-type { font-size: var(--text-xs); color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); } .col-add { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-subtle); } .col-add .cell-input { max-width: 220px; border-color: var(--border-default); } .col-add .cell-select { max-width: 160px; border-color: var(--border-default); } /* Tinted banner at the top of the recycling-bin view. */ .bin-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--accent-soft-bg); color: var(--accent-soft-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); } .tableview { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); } .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table th { text-align: left; font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border-subtle); } .data-table td { padding: var(--space-1) var(--space-3); border-bottom: var(--border-width) solid var(--border-subtle); vertical-align: middle; } .cell-input, .cell-select { width: 100%; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary); background: transparent; border: var(--border-width) solid transparent; border-radius: var(--radius-sm); padding: var(--space-2); } .cell-input:hover, .cell-select:hover { border-color: var(--border-subtle); } .cell-input:focus, .cell-select:focus { outline: none; background: var(--surface-card); border-color: var(--color-accent); box-shadow: 0 0 0 var(--ring-width) var(--ring-color); } .pill { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); border: 0; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; } .pill-public { background: var(--success-bg); color: var(--success); } .pill-private { background: var(--surface-sunken); color: var(--text-secondary); } .btn-ghost { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; } .btn-ghost:hover { background: var(--surface-sunken); color: var(--text-primary); } .btn-ghost.danger:hover { background: var(--error-bg); color: var(--error); } .btn-add { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-accent); background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-2); cursor: pointer; } .btn-add:hover { background: var(--accent-soft-bg); }