bvandeusen/FabledScribe
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 53 Wiki Activity

refactor(theme): retire the --color-* shim — the sweep it promised, run
CI & Build / Python lint (push) Successful in 3s
Details
CI & Build / Plugin hooks (push) Successful in 7s
Details
CI & Build / integration (push) Successful in 17s
Details
CI & Build / TypeScript typecheck (push) Successful in 34s
Details
CI & Build / Python tests (push) Successful in 48s
Details
CI & Build / Build & push image (push) Successful in 37s
Details

Browse Source 
#2533. theme.css claimed "removing this block is a rename sweep across the
components, tracked separately" — written in 67a529a, never filed, which made
the comment itself an instance of the survey's presence-without-reference
pattern. This is that sweep.

73 alias declarations deleted; 69 files rewritten; every --color-*-style name
now references its --fs-* token directly. Mechanical by construction: the map
IS the alias block, applied longest-name-first with a boundary guard so
--color-text never matched inside --color-text-muted. Zero survivors outside
theme.css, verified by grep rather than assumed.

One deliberate survivor: --color-shadow stays DECLARED, because it was never
an alias — it is a literal value the design system has no token for. Marked
in place as a recorded gap: promote it to an --fs-* token when a second app
needs it, don't copy the line.

Nothing is lost mode-wise: the aliases' resolve-at-use-time trick (which
absorbed 48 dark-mode overrides) lives one layer down in the --fs-* tokens'
own derivations, which is why the sweep is a pure rename. Both CSS checkers
green.

Why now rather than never: check_snippets_against_design_system reports every
--color-* reference as "unknown — renders as NOTHING", and nine recipe
snippets recorded from components.css carried the deprecated names, making
them prior art pointing the wrong way. With the sweep in, the checker's
report over re-recorded snippets should be EMPTY — the acceptance test that
proves the checker was right all along (#2517's correction).

Refs #2533
This commit is contained in:
bvandeusen
2026-08-08 22:42:37 -04:00
parent 2d1e26f38f
commit 4ba544e2af
70 changed files with 1779 additions and 1884 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DashboardView.vue
+38 -38
View File
@@ -79,7 +79,7 @@ onMounted(async () => {
<article v-for="p in data.active_projects" :key="p.id" class="proj-panel">
<header class="proj-head">
<span class="proj-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
<span class="proj-dot" :style="{ background: p.color || 'var(--fs-accent)' }" />
<router-link :to="`/projects/${p.id}`" class="proj-title">{{ p.title }}</router-link>
<span class="proj-meta">{{ relativeTime(p.last_activity) }} · {{ p.open_count }} open</span>
</header>
@@ -156,7 +156,7 @@ onMounted(async () => {
:to="`/projects/${p.id}`"
class="pstat-row"
>
<span class="pstat-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
<span class="pstat-dot" :style="{ background: p.color || 'var(--fs-accent)' }" />
<span class="pstat-title">{{ p.title }}</span>
<span class="pstat-counts">{{ p.open_count }} open · {{ p.done_count }} done</span>
</router-link>
@@ -180,68 +180,68 @@ onMounted(async () => {
all the spacing between them (h1 zeroed, .dash-sub margined). Nothing in it
assumes a flex parent, which is the tell for a deleted rule (#2444). */
.dash-head h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; }
.dash-sub { margin: 0.2rem 0 1.25rem; color: var(--color-muted); font-size: 0.9rem; }
.dash-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.6rem; }
.dash-empty { color: var(--color-muted); padding: 1rem 0; }
.dash-empty.card { padding: 1rem; border: 1px dashed var(--color-border); border-radius: 10px; }
.dash-sub { margin: 0.2rem 0 1.25rem; color: var(--fs-text-tertiary); font-size: 0.9rem; }
.dash-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-text-tertiary); margin-bottom: 0.6rem; }
.dash-empty { color: var(--fs-text-tertiary); padding: 1rem 0; }
.dash-empty.card { padding: 1rem; border: 1px dashed var(--fs-border-color); border-radius: 10px; }
.done-recent { margin-bottom: 1.5rem; }
.done-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.86rem; }
.done-row:hover { background: var(--color-hover); }
.done-mark { color: var(--color-primary); flex-shrink: 0; }
.done-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.86rem; }
.done-row:hover { background: var(--fs-surface-hover); }
.done-mark { color: var(--fs-accent); flex-shrink: 0; }
.done-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done-meta { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
.done-more { background: none; border: none; cursor: pointer; margin-top: 0.25rem; padding: 0.2rem 0.55rem; font-size: 0.78rem; color: var(--color-primary); font-family: inherit; }
.done-meta { font-size: 0.72rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
.done-more { background: none; border: none; cursor: pointer; margin-top: 0.25rem; padding: 0.2rem 0.55rem; font-size: 0.78rem; color: var(--fs-accent); font-family: inherit; }
.done-more:hover { text-decoration: underline; }
.dash-cols { display: flex; gap: 1.25rem; align-items: flex-start; }
.dash-main { flex: 1.7; min-width: 0; }
.dash-rail { flex: 1; min-width: 240px; }
.proj-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
.proj-panel { background: var(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
.proj-head { display: flex; align-items: center; gap: 0.5rem; }
.proj-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.proj-title { font-weight: 700; color: var(--color-text); text-decoration: none; }
.proj-title:hover { color: var(--color-primary); }
.proj-meta { margin-left: auto; font-size: 0.74rem; color: var(--color-muted); }
.bar { height: 5px; background: var(--color-border); border-radius: 3px; margin: 0.55rem 0 0.2rem; }
.bar-fill { height: 5px; background: var(--color-primary); border-radius: 3px; }
.proj-title { font-weight: 700; color: var(--fs-text-primary); text-decoration: none; }
.proj-title:hover { color: var(--fs-accent); }
.proj-meta { margin-left: auto; font-size: 0.74rem; color: var(--fs-text-tertiary); }
.bar { height: 5px; background: var(--fs-border-color); border-radius: 3px; margin: 0.55rem 0 0.2rem; }
.bar-fill { height: 5px; background: var(--fs-accent); border-radius: 3px; }
.ms-block { margin-top: 0.7rem; }
.ms-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
.ms-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.ms-title.ms-none { color: var(--color-muted); font-weight: 500; }
.ms-pct { margin-left: auto; font-size: 0.72rem; color: var(--color-muted); }
.ms-title { font-size: 0.82rem; font-weight: 600; color: var(--fs-text-primary); }
.ms-title.ms-none { color: var(--fs-text-tertiary); font-weight: 500; }
.ms-pct { margin-left: auto; font-size: 0.72rem; color: var(--fs-text-tertiary); }
.task-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.86rem; }
.task-row:hover { background: var(--color-hover); }
.task-inprogress { border-left: 3px solid var(--color-primary); padding-left: calc(0.55rem - 3px); }
.task-mark { color: var(--color-muted); }
.task-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.86rem; }
.task-row:hover { background: var(--fs-surface-hover); }
.task-inprogress { border-left: 3px solid var(--fs-accent); padding-left: calc(0.55rem - 3px); }
.task-mark { color: var(--fs-text-tertiary); }
.task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-pri { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--color-border); color: var(--color-muted); }
.task-pri { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--fs-border-color); color: var(--fs-text-tertiary); }
.pri-high { color: #c0556b; border-color: #c0556b66; }
.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-primary); text-decoration: none; }
.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--fs-accent); text-decoration: none; }
.rail-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 1.25rem; }
.rail-card { background: var(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 1.25rem; }
.stats { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.stats-sub { color: var(--color-muted); font-size: 0.78rem; }
.stats-sub { color: var(--fs-text-tertiary); font-size: 0.78rem; }
.proj-stats { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.45rem; }
.pstat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
.pstat-row:hover { background: var(--color-hover); }
.pstat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.85rem; }
.pstat-row:hover { background: var(--fs-surface-hover); }
.pstat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pstat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pstat-counts { font-size: 0.74rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
.pstat-counts { font-size: 0.74rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
.quick-add { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qa-btn { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--color-text); text-decoration: none; }
.qa-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.qa-btn { background: var(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--fs-text-primary); text-decoration: none; }
.qa-btn:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
.issues-card { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.45rem; }
.issue-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
.issue-row:hover { background: var(--color-hover); }
.issue-mark { color: var(--color-muted); flex-shrink: 0; }
.issue-mark.imk-in_progress { color: var(--color-primary); }
.issue-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.85rem; }
.issue-row:hover { background: var(--fs-surface-hover); }
.issue-mark { color: var(--fs-text-tertiary); flex-shrink: 0; }
.issue-mark.imk-in_progress { color: var(--fs-accent); }
.issue-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issue-meta { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
.issue-meta { font-size: 0.72rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
@media (max-width: 760px) { .dash-cols { flex-direction: column; } }
</style>
frontend/src/views/DesignSystemsView.vue
+55 -55
View File
@@ -1115,7 +1115,7 @@ function isSelfContainedColour(value: string): boolean {
}
.lede {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
max-width: 70ch;
line-height: 1.6;
margin: 0 0 1.5rem;
@@ -1137,9 +1137,9 @@ function isSelfContainedColour(value: string): boolean {
/* Sidebar ---------------------------------------------------------------- */
.ds-sidebar {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1rem;
}
@@ -1156,7 +1156,7 @@ function isSelfContainedColour(value: string): boolean {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.system-list {
@@ -1173,22 +1173,22 @@ function isSelfContainedColour(value: string): boolean {
text-align: left;
background: none;
border: 1px solid transparent;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
padding: 0.5rem 0.6rem;
cursor: pointer;
color: var(--color-text);
color: var(--fs-text-primary);
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.system-btn:hover {
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.system-btn.active {
border-color: var(--color-primary);
background: var(--color-bg-secondary);
border-color: var(--fs-accent);
background: var(--fs-surface-raised);
}
@@ -1198,7 +1198,7 @@ function isSelfContainedColour(value: string): boolean {
.system-kind {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
/* Sections --------------------------------------------------------------- */
@@ -1211,9 +1211,9 @@ function isSelfContainedColour(value: string): boolean {
}
.ds-section {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.25rem;
}
@@ -1232,7 +1232,7 @@ function isSelfContainedColour(value: string): boolean {
.section-note,
.muted {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.85rem;
margin: 0 0 1rem;
}
@@ -1247,17 +1247,17 @@ function isSelfContainedColour(value: string): boolean {
}
.chain-link {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.chain-link.self {
color: var(--color-text);
color: var(--fs-text-primary);
font-weight: 500;
}
.chain-arrow,
.chain-note {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
/* Fields ----------------------------------------------------------------- */
@@ -1282,24 +1282,24 @@ function isSelfContainedColour(value: string): boolean {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin-bottom: 0.3rem;
}
.field-hint {
margin: 0.3rem 0 0;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
line-height: 1.5;
}
.input {
width: 100%;
padding: 0.45rem 0.6rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
background: var(--fs-surface-page);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
color: var(--fs-text-primary);
font: inherit;
}
@@ -1328,15 +1328,15 @@ textarea.input {
.confirm-copy {
font-size: 0.85rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
max-width: 40ch;
}
/* Tokens ----------------------------------------------------------------- */
.token-form {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
padding: 1rem;
margin-bottom: 1rem;
}
@@ -1371,7 +1371,7 @@ textarea.input {
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.token-name {
@@ -1386,7 +1386,7 @@ textarea.input {
}
.token-meta {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.8rem;
flex: 1;
min-width: 0;
@@ -1405,18 +1405,18 @@ textarea.input {
.finding-list li {
padding: 0.6rem 0;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.finding-title {
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
}
.finding-line {
margin: 0.3rem 0 0;
font-size: 0.85rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -1428,24 +1428,24 @@ textarea.input {
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.1rem 0.45rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
flex: none;
}
.spec-status.violated {
background: var(--color-priority-high-bg);
color: var(--color-priority-high);
background: var(--fs-priority-high-bg);
color: var(--fs-priority-high);
}
.spec-status.missing {
background: var(--color-priority-medium-bg);
color: var(--color-priority-medium);
background: var(--fs-priority-medium-bg);
color: var(--fs-priority-medium);
}
.sheet {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--fs-surface-page);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
padding: 0.75rem 1rem;
margin-top: 0.75rem;
overflow-x: auto;
@@ -1472,7 +1472,7 @@ textarea.input {
.supersedes {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-style: italic;
}
@@ -1484,7 +1484,7 @@ textarea.input {
}
.mode-name {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.06em;
@@ -1495,7 +1495,7 @@ textarea.input {
width: 0.9rem;
height: 0.9rem;
border-radius: 3px;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
flex: none;
}
@@ -1510,12 +1510,12 @@ textarea.input {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.resolved-list li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.resolved-head {
@@ -1551,33 +1551,33 @@ textarea.input {
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.1rem 0.45rem;
border-radius: var(--radius-sm);
background: var(--color-bg-secondary);
color: var(--color-text-muted);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-raised);
color: var(--fs-text-tertiary);
}
.origin-badge.own {
background: var(--color-primary-tint);
color: var(--color-primary);
background: var(--fs-accent-soft);
color: var(--fs-accent);
}
/* Notices ---------------------------------------------------------------- */
.notice {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.25rem;
max-width: 60ch;
}
.notice-warn {
border-left: 3px solid var(--color-warning);
border-left: 3px solid var(--fs-warning);
}
.notice p {
margin: 0.5rem 0 1rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
line-height: 1.6;
}
</style>
frontend/src/views/ForgotPasswordView.vue
+13 -13
View File
@@ -78,9 +78,9 @@ async function handleSubmit() {
.auth-card {
width: 100%;
max-width: 400px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 2rem;
}
.auth-brand {
@@ -97,7 +97,7 @@ async function handleSubmit() {
.auth-hint {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin-bottom: 1rem;
}
.field {
@@ -112,25 +112,25 @@ async function handleSubmit() {
.input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.95rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
.success-msg {
text-align: center;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.95rem;
padding: 0.5rem 0;
}
@@ -140,10 +140,10 @@ async function handleSubmit() {
.auth-footer {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 1rem 0 0;
}
.auth-footer a {
color: var(--color-primary);
color: var(--fs-accent);
}
</style>
frontend/src/views/GraphView.vue
+59 -59
View File
@@ -208,7 +208,7 @@ function initGraph() {
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-4L8,0L0,4")
.attr("fill", "var(--color-primary)")
.attr("fill", "var(--fs-accent)")
.attr("opacity", "0.6");
// Zoom layer
@@ -237,7 +237,7 @@ function initGraph() {
.append("line")
.attr("class", "graph-edge")
.attr("stroke", (d: any) =>
d.type === "wikilink" ? "var(--color-primary)" : "var(--color-text-muted)"
d.type === "wikilink" ? "var(--fs-accent)" : "var(--fs-text-tertiary)"
)
.attr("stroke-opacity", (d: any) => (d.type === "wikilink" ? 0.5 : 0.4))
.attr("stroke-dasharray", null)
@@ -295,11 +295,11 @@ function initGraph() {
.append("circle")
.attr("r", (d: GraphNode) => d.radius ?? 8)
.attr("fill", (d: GraphNode) => {
if (d.type === "tag") return "color-mix(in srgb, var(--color-primary) 20%, transparent)";
return d.project_color ?? "var(--color-bg-secondary)";
if (d.type === "tag") return "color-mix(in srgb, var(--fs-accent) 20%, transparent)";
return d.project_color ?? "var(--fs-surface-raised)";
})
.attr("stroke", (d: GraphNode) =>
d.type === "tag" ? "var(--color-primary)" : "var(--color-border)"
d.type === "tag" ? "var(--fs-accent)" : "var(--fs-border-color)"
)
.attr("stroke-width", (d: GraphNode) => (d.type === "tag" ? 1.5 : 1.5))
.attr("stroke-dasharray", (d: GraphNode) => (d.type === "task" ? "3" : null))
@@ -317,7 +317,7 @@ function initGraph() {
.attr("dy", (d: GraphNode) => (d.radius ?? 8) + 12)
.attr("font-size", "10px")
.attr("fill", (d: GraphNode) =>
d.type === "tag" ? "var(--color-primary)" : "var(--color-text-secondary)"
d.type === "tag" ? "var(--fs-accent)" : "var(--fs-text-secondary)"
)
.attr("pointer-events", "none");
@@ -600,7 +600,7 @@ onUnmounted(() => {
.graph-page {
display: flex;
flex-direction: column;
height: calc(100vh - var(--header-height));
height: calc(100vh - var(--fs-layout-header));
overflow: hidden;
}
@@ -609,17 +609,17 @@ onUnmounted(() => {
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border-bottom: 1px solid var(--fs-border-color);
flex-shrink: 0;
flex-wrap: wrap;
}
.graph-select {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
color: var(--fs-text-primary);
font-size: 0.875rem;
padding: 0.3rem 0.6rem;
cursor: pointer;
@@ -631,27 +631,27 @@ onUnmounted(() => {
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
cursor: pointer;
user-select: none;
}
.graph-toggle input {
cursor: pointer;
accent-color: var(--color-primary);
accent-color: var(--fs-accent);
}
.graph-stats {
margin-left: auto;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.graph-physics-btn {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
color: var(--fs-text-secondary);
font-size: 0.875rem;
font-family: inherit;
padding: 0.3rem 0.7rem;
@@ -659,12 +659,12 @@ onUnmounted(() => {
transition: border-color 0.15s, color 0.15s;
}
.graph-physics-btn:hover {
border-color: var(--color-primary);
color: var(--color-text);
border-color: var(--fs-accent);
color: var(--fs-text-primary);
}
.graph-physics-btn.active {
border-color: var(--color-primary);
color: var(--color-primary);
border-color: var(--fs-accent);
color: var(--fs-accent);
}
.graph-physics-panel {
@@ -672,8 +672,8 @@ onUnmounted(() => {
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
padding: 0.6rem 1rem;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border-bottom: 1px solid var(--fs-border-color);
flex-shrink: 0;
}
@@ -688,20 +688,20 @@ onUnmounted(() => {
.knob-label {
font-size: 0.75rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
display: flex;
justify-content: space-between;
}
.knob-label em {
font-style: normal;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-variant-numeric: tabular-nums;
}
.physics-knob input[type="range"] {
width: 100%;
accent-color: var(--color-primary);
accent-color: var(--fs-accent);
cursor: pointer;
}
@@ -709,7 +709,7 @@ onUnmounted(() => {
flex: 1;
position: relative;
overflow: hidden;
background: var(--color-bg);
background: var(--fs-surface-page);
}
.graph-svg {
@@ -728,15 +728,15 @@ onUnmounted(() => {
}
.graph-empty p {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.95rem;
}
.spinner {
width: 28px;
height: 28px;
border: 3px solid var(--color-border);
border-top-color: var(--color-primary);
border: 3px solid var(--fs-border-color);
border-top-color: var(--fs-accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@@ -747,9 +747,9 @@ onUnmounted(() => {
.graph-tooltip {
position: absolute;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
box-shadow: 0 4px 16px var(--color-shadow);
padding: 0.5rem 0.75rem;
pointer-events: none;
@@ -760,7 +760,7 @@ onUnmounted(() => {
.tooltip-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
margin-bottom: 0.25rem;
}
@@ -773,15 +773,15 @@ onUnmounted(() => {
.tag-chip {
font-size: 0.7rem;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
border-radius: 999px;
padding: 0.1rem 0.4rem;
}
.tooltip-meta {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
text-transform: capitalize;
}
@@ -792,8 +792,8 @@ onUnmounted(() => {
right: 0;
bottom: 0;
width: 340px;
background: var(--color-bg-card);
border-left: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border-left: 1px solid var(--fs-border-color);
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
@@ -815,7 +815,7 @@ onUnmounted(() => {
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
flex-shrink: 0;
}
@@ -826,10 +826,10 @@ onUnmounted(() => {
letter-spacing: 0.05em;
padding: 0.15rem 0.45rem;
border-radius: 10px;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
border: 1px solid var(--fs-border-color);
color: var(--fs-text-tertiary);
}
.peek-type-task { border-color: var(--color-primary); color: var(--color-primary); }
.peek-type-task { border-color: var(--fs-accent); color: var(--fs-accent); }
.peek-actions {
display: flex;
@@ -840,7 +840,7 @@ onUnmounted(() => {
.peek-link {
font-size: 0.78rem;
color: var(--color-primary);
color: var(--fs-accent);
text-decoration: none;
}
.peek-link:hover { text-decoration: underline; }
@@ -848,20 +848,20 @@ onUnmounted(() => {
.peek-close {
background: none;
border: none;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.8rem;
cursor: pointer;
padding: 0.1rem 0.25rem;
border-radius: 3px;
}
.peek-close:hover { color: var(--color-text); }
.peek-close:hover { color: var(--fs-text-primary); }
.peek-title {
margin: 0;
padding: 0.75rem 0.75rem 0.4rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
flex-shrink: 0;
}
@@ -877,7 +877,7 @@ onUnmounted(() => {
flex: 1;
overflow-y: auto;
padding: 0 0.75rem 0.5rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.peek-prose {
@@ -887,7 +887,7 @@ onUnmounted(() => {
.peek-loading,
.peek-empty {
font-size: 0.82rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding-top: 0.5rem;
}
@@ -901,7 +901,7 @@ onUnmounted(() => {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin-bottom: 0.4rem;
}
@@ -921,14 +921,14 @@ onUnmounted(() => {
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--color-text);
color: var(--fs-text-primary);
cursor: pointer;
padding: 0.25rem 0.4rem;
border-radius: 4px;
}
.peek-linked-item:hover {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised));
color: var(--fs-accent);
}
.peek-linked-type {
@@ -937,12 +937,12 @@ onUnmounted(() => {
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--fs-surface-page);
border: 1px solid var(--fs-border-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
</style>
frontend/src/views/KnowledgeView.vue
+70 -70
View File
@@ -579,7 +579,7 @@ onUnmounted(() => {
.knowledge-root {
display: flex;
flex-direction: column;
height: calc(100vh - var(--header-height));
height: calc(100vh - var(--fs-layout-header));
overflow: hidden;
}
@@ -590,8 +590,8 @@ onUnmounted(() => {
justify-content: space-between;
gap: 12px;
padding: 8px 20px;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border-bottom: 1px solid var(--fs-border-color);
flex-shrink: 0;
font-size: 0.82rem;
flex-wrap: wrap;
@@ -607,7 +607,7 @@ onUnmounted(() => {
font-size: 0.78rem;
}
.today-link {
color: var(--color-primary);
color: var(--fs-accent);
text-decoration: none;
font-weight: 500;
opacity: 0.85;
@@ -625,19 +625,19 @@ onUnmounted(() => {
/* ── Filter panel ────────────────────────────────────────── */
.filter-panel {
width: var(--sidebar-width);
width: var(--fs-layout-sidebar);
flex-shrink: 0;
padding: 16px 12px;
border-right: 1px solid var(--color-border);
border-right: 1px solid var(--fs-border-color);
overflow-y: auto;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.filter-section { margin-bottom: 20px; }
.filter-section + .filter-section::before {
content: '· · ·';
display: block;
text-align: center;
color: color-mix(in srgb, var(--color-primary) 30%, transparent);
color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
font-size: 0.9rem;
letter-spacing: 0.4em;
padding: 4px 0 12px;
@@ -645,7 +645,7 @@ onUnmounted(() => {
.filter-label {
font-family: 'Fraunces', Georgia, serif;
font-size: 0.95rem;
color: var(--color-primary);
color: var(--fs-accent);
margin-bottom: 8px;
padding: 0 4px;
}
@@ -662,14 +662,14 @@ onUnmounted(() => {
padding: 8px 12px;
border-radius: 10px;
border: none;
background: var(--gradient-cta);
background: var(--fs-gradient-cta);
color: var(--fs-text-on-action);
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: box-shadow 0.15s;
}
.btn-new-note:hover { box-shadow: var(--glow-cta-hover); }
.btn-new-note:hover { box-shadow: var(--fs-glow-cta-hover); }
.btn-new-icon {
font-size: 1.1rem;
line-height: 1;
@@ -680,8 +680,8 @@ onUnmounted(() => {
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 10px;
overflow: hidden;
z-index: 50;
@@ -696,15 +696,15 @@ onUnmounted(() => {
padding: 9px 14px;
background: none;
border: none;
color: var(--color-text);
color: var(--fs-text-primary);
cursor: pointer;
font-size: 0.84rem;
text-align: left;
transition: background 0.12s, color 0.12s;
}
.new-note-menu button:hover {
background: var(--color-primary-tint);
color: var(--color-primary);
background: var(--fs-accent-soft);
color: var(--fs-accent);
}
.new-note-menu button svg {
flex-shrink: 0;
@@ -712,7 +712,7 @@ onUnmounted(() => {
}
.new-note-menu button:hover svg {
opacity: 1;
stroke: var(--color-primary);
stroke: var(--fs-accent);
}
.filter-btn {
@@ -725,7 +725,7 @@ onUnmounted(() => {
border-radius: 7px;
border: none;
background: transparent;
color: var(--color-text);
color: var(--fs-text-primary);
cursor: pointer;
font-size: 0.85rem;
margin-bottom: 2px;
@@ -734,8 +734,8 @@ onUnmounted(() => {
}
.filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
.filter-btn.active {
background: var(--color-primary-wash);
color: var(--color-primary);
background: var(--fs-accent-wash);
color: var(--fs-accent);
opacity: 1;
}
.filter-btn-label { flex: 1; }
@@ -744,15 +744,15 @@ onUnmounted(() => {
padding: 1px 6px;
border-radius: 10px;
background: rgba(255,255,255,0.07);
color: var(--color-muted);
color: var(--fs-text-tertiary);
font-weight: 500;
min-width: 20px;
text-align: center;
flex-shrink: 0;
}
.filter-btn.active .filter-count {
background: color-mix(in srgb, var(--color-primary) 20%, transparent);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 20%, transparent);
color: var(--fs-accent);
}
.filter-tag { font-size: 0.78rem; }
@@ -772,7 +772,7 @@ onUnmounted(() => {
gap: 10px;
padding: 12px 20px;
flex-shrink: 0;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.search-wrap {
flex: 1;
@@ -783,27 +783,27 @@ onUnmounted(() => {
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--color-muted);
color: var(--fs-text-tertiary);
pointer-events: none;
}
.search-input {
width: 100%;
padding: 7px 12px 7px 32px;
border-radius: 8px;
border: 1px solid var(--color-border);
background: var(--color-bg-tertiary);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
font-size: 0.88rem;
outline: none;
transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--color-primary); }
.search-input:focus { border-color: var(--fs-accent); }
.sort-select {
padding: 7px 10px;
border-radius: 8px;
border: 1px solid var(--color-border);
background: var(--color-bg-tertiary);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
font-size: 0.85rem;
cursor: pointer;
outline: none;
@@ -824,9 +824,9 @@ onUnmounted(() => {
.k-card {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--fs-surface-hover);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-xl);
padding: 14px;
cursor: pointer;
transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
@@ -838,12 +838,12 @@ onUnmounted(() => {
}
.k-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
box-shadow: 0 8px 28px color-mix(in srgb, var(--fs-accent) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
border-color: color-mix(in srgb, var(--fs-accent) 35%, transparent);
}
/* Type-specific card DNA */
.k-card--note { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.k-card--note { border-color: color-mix(in srgb, var(--fs-accent) 20%, transparent); }
.k-card--task { border-color: rgba(212, 160, 23, 0.18); }
/* Top gradient bars */
@@ -858,7 +858,7 @@ onUnmounted(() => {
}
.k-card--note::before {
right: 0;
background: linear-gradient(90deg, var(--color-primary), #7A6DA8);
background: linear-gradient(90deg, var(--fs-accent), #7A6DA8);
}
.k-card--task::before {
right: 0;
@@ -877,7 +877,7 @@ onUnmounted(() => {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge--note { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: #7A6DA8; }
.badge--note { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: #7A6DA8; }
.badge--task { background: rgba(212,160,23,0.15); color: #fbbf24; }
.badge--plan { background: rgba(99,102,241,0.18); color: #818cf8; }
@@ -894,7 +894,7 @@ onUnmounted(() => {
}
.k-card-snippet {
font-size: 0.8rem;
color: var(--color-muted);
color: var(--fs-text-tertiary);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
@@ -914,9 +914,9 @@ onUnmounted(() => {
padding: 1px 6px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
color: var(--color-muted);
color: var(--fs-text-tertiary);
}
.k-card-date { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; opacity: 0.7; }
.k-card-date { font-size: 0.72rem; color: var(--fs-text-secondary); white-space: nowrap; opacity: 0.7; }
/* Only rendered for a record another user owns, so an unmarked card is
unambiguously the viewer's own. */
.shared-tag {
@@ -924,8 +924,8 @@ onUnmounted(() => {
padding: 0.08rem 0.35rem;
border-radius: 4px;
white-space: nowrap;
background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
color: var(--color-text-secondary);
background: color-mix(in srgb, var(--fs-text-secondary) 15%, transparent);
color: var(--fs-text-secondary);
}
/* ── Task card ──────────────────────────────────────────── */
@@ -945,10 +945,10 @@ onUnmounted(() => {
border-radius: 8px;
font-weight: 500;
}
.status--todo { background: var(--color-status-todo-bg); color: var(--color-status-todo); }
.status--in_progress { background: var(--color-status-in-progress-bg); color: var(--color-status-in-progress); }
.status--done { background: var(--color-status-done-bg); color: var(--color-status-done); }
.status--cancelled { background: var(--color-status-todo-bg); color: var(--color-status-todo); text-decoration: line-through; }
.status--todo { background: var(--fs-status-todo-bg); color: var(--fs-status-todo); }
.status--in_progress { background: var(--fs-status-in-progress-bg); color: var(--fs-status-in-progress); }
.status--done { background: var(--fs-status-done-bg); color: var(--fs-status-done); }
.status--cancelled { background: var(--fs-status-todo-bg); color: var(--fs-status-todo); text-decoration: line-through; }
.priority-badge {
font-size: 0.7rem;
@@ -956,16 +956,16 @@ onUnmounted(() => {
border-radius: 8px;
font-weight: 500;
}
.priority--low { background: var(--color-priority-low-bg); color: var(--color-priority-low); }
.priority--normal { background: var(--color-priority-medium-bg); color: var(--color-priority-medium); }
.priority--high { background: var(--color-priority-high-bg); color: var(--color-priority-high); }
.priority--low { background: var(--fs-priority-low-bg); color: var(--fs-priority-low); }
.priority--normal { background: var(--fs-priority-medium-bg); color: var(--fs-priority-medium); }
.priority--high { background: var(--fs-priority-high-bg); color: var(--fs-priority-high); }
.task-due {
font-size: 0.78rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.task-overdue {
color: var(--color-overdue);
color: var(--fs-overdue);
font-weight: 500;
}
@@ -977,7 +977,7 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
padding: 60px 20px;
color: var(--color-muted);
color: var(--fs-text-tertiary);
text-align: center;
gap: 6px;
}
@@ -985,7 +985,7 @@ onUnmounted(() => {
.empty-narrator {
font-family: 'Fraunces', Georgia, serif;
font-size: 1rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
opacity: 0.85;
}
@@ -999,17 +999,17 @@ onUnmounted(() => {
}
.sentinel-loading {
font-size: 0.8rem;
color: var(--color-muted);
color: var(--fs-text-tertiary);
}
/* ── Graph panel ─────────────────────────────────────────── */
.graph-panel {
width: 500px;
flex-shrink: 0;
border-left: 1px solid var(--color-border);
border-left: 1px solid var(--fs-border-color);
display: flex;
flex-direction: column;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
transition: width 0.2s ease;
}
.graph-panel.expanded {
@@ -1022,7 +1022,7 @@ onUnmounted(() => {
padding: 10px 14px;
font-size: 0.85rem;
font-weight: 500;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
flex-shrink: 0;
}
/* RESTORED (#2444). The panel is a flex COLUMN and its header is
@@ -1050,15 +1050,15 @@ onUnmounted(() => {
.dup-panel {
margin-bottom: 1.25rem;
padding: 0.85rem 1rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 8px;
background: var(--color-surface-alt);
background: var(--fs-surface-hover);
}
.dup-empty,
.dup-head {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.dup-empty { margin-bottom: 0; }
.dup-group {
@@ -1067,7 +1067,7 @@ onUnmounted(() => {
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.5rem 0;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
}
.dup-members {
display: flex;
@@ -1080,23 +1080,23 @@ onUnmounted(() => {
font-size: 0.8rem;
padding: 0.1rem 0.45rem;
border-radius: 4px;
background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
color: var(--color-text);
background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
color: var(--fs-text-primary);
text-decoration: none;
overflow-wrap: anywhere;
}
.dup-member:hover { background: var(--color-hover); }
.dup-member:hover { background: var(--fs-surface-hover); }
.dup-score {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* A set someone already ruled on — quiet, not celebratory: it means "skip". */
.dup-claimed {
font-size: 0.72rem;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
color: var(--fs-text-tertiary);
border: 1px solid var(--fs-border-color);
border-radius: 4px;
padding: 0.05rem 0.4rem;
white-space: nowrap;
frontend/src/views/LoginView.vue
+17 -17
View File
@@ -123,9 +123,9 @@ function loginWithOAuth() {
.auth-card {
width: 100%;
max-width: 400px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 2rem;
}
.auth-brand {
@@ -142,11 +142,11 @@ function loginWithOAuth() {
.auth-hint {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin-bottom: 1rem;
}
.auth-hint a {
color: var(--color-primary);
color: var(--fs-accent);
}
.field {
margin-bottom: 1rem;
@@ -160,19 +160,19 @@ function loginWithOAuth() {
.input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.95rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
@@ -181,23 +181,23 @@ function loginWithOAuth() {
align-items: center;
gap: 0.75rem;
margin: 1.25rem 0;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.85rem;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
}
.auth-footer {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 1rem 0 0;
}
.auth-footer a {
color: var(--color-primary);
color: var(--fs-accent);
}
.forgot-link {
text-align: right;
@@ -205,9 +205,9 @@ function loginWithOAuth() {
font-size: 0.85rem;
}
.forgot-link a {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.forgot-link a:hover {
color: var(--color-primary);
color: var(--fs-accent);
}
</style>
frontend/src/views/LogsView.vue
+37 -37
View File
@@ -263,9 +263,9 @@ function clearFilters() {
margin: 0 0 1.5rem;
}
.settings-section {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
@@ -292,23 +292,23 @@ function clearFilters() {
.stat-count {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
color: var(--fs-text-primary);
}
.stat-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.stat-audit {
color: var(--color-primary);
color: var(--fs-accent);
}
.stat-usage {
color: var(--color-success);
color: var(--fs-success);
}
.stat-error {
color: var(--color-danger);
color: var(--fs-error);
}
/* Filters */
@@ -321,10 +321,10 @@ function clearFilters() {
.filter-input,
.filter-date {
padding: 0.4rem 0.6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.85rem;
}
.filter-select {
@@ -342,7 +342,7 @@ function clearFilters() {
.loading-msg,
.empty-msg {
text-align: center;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.9rem;
padding: 1rem 0;
}
@@ -356,13 +356,13 @@ function clearFilters() {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.logs-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
font-size: 0.85rem;
}
.logs-table tbody tr:last-child td {
@@ -373,18 +373,18 @@ function clearFilters() {
transition: background 0.1s;
}
.log-row:hover {
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.row-expanded {
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.cell-time {
white-space: nowrap;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.8rem;
}
.cell-user {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.cell-action {
max-width: 280px;
@@ -399,22 +399,22 @@ function clearFilters() {
.cell-ip {
font-family: monospace;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
white-space: nowrap;
}
.cell-duration {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.8rem;
white-space: nowrap;
}
.detail-ip {
font-family: monospace;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin-bottom: 0.4rem;
}
.text-error {
color: var(--color-danger);
color: var(--fs-error);
}
/* Category badges */
@@ -425,19 +425,19 @@ function clearFilters() {
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.1rem 0.35rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
}
.cat-audit {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--fs-accent);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
}
.cat-usage {
color: var(--color-success);
background: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--fs-success);
background: color-mix(in srgb, var(--fs-success) 15%, transparent);
}
.cat-error {
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 15%, transparent);
color: var(--fs-error);
background: color-mix(in srgb, var(--fs-error) 15%, transparent);
}
/* Method tag */
@@ -448,8 +448,8 @@ function clearFilters() {
font-family: monospace;
padding: 0.05rem 0.25rem;
border-radius: 3px;
background: var(--color-bg-secondary);
color: var(--color-text-muted);
background: var(--fs-surface-raised);
color: var(--fs-text-tertiary);
margin-right: 0.25rem;
}
@@ -458,14 +458,14 @@ function clearFilters() {
cells don't carry, and the row exists to scope the rule below (#2444). */
.detail-row td {
padding: 0 0.75rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.detail-json {
margin: 0;
padding: 0.75rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--fs-surface-page);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.8rem;
overflow-x: auto;
white-space: pre-wrap;
frontend/src/views/NoteEditorView.vue
+35 -35
View File
@@ -633,13 +633,13 @@ onUnmounted(() => assist.clearSelection());
gap: 0.75rem;
flex-wrap: wrap;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.editor-tabs {
display: inline-flex;
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--fs-surface-page);
border: 1px solid var(--fs-border-color);
border-radius: 8px;
padding: 2px;
gap: 2px;
@@ -653,14 +653,14 @@ onUnmounted(() => assist.clearSelection());
padding: 0.22rem 0.75rem;
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tab:hover { color: var(--color-text); }
.tab:hover { color: var(--fs-text-primary); }
.tab.active {
background: var(--color-surface);
color: var(--color-text);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
@@ -679,14 +679,14 @@ onUnmounted(() => assist.clearSelection());
.stream-label {
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.stream-preview {
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
padding: 0.75rem;
background: var(--color-bg-card);
background: var(--fs-surface-raised);
min-height: 200px;
}
@@ -699,7 +699,7 @@ onUnmounted(() => assist.clearSelection());
.note-sidebar {
width: 280px;
flex-shrink: 0;
border-left: 1px solid var(--color-border);
border-left: 1px solid var(--fs-border-color);
overflow-y: auto;
display: flex;
flex-direction: column;
@@ -708,17 +708,17 @@ onUnmounted(() => assist.clearSelection());
.sb-select, .sb-input {
width: 100%;
padding: 5px 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-input-border);
background: var(--color-bg-tertiary);
color: var(--color-text);
border-radius: var(--fs-radius-sm);
border: 1px solid var(--fs-border-color);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
font-size: 0.82rem;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
}
.sb-select:focus, .sb-input:focus {
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
/* Tag suggest row inside sidebar */
@@ -742,13 +742,13 @@ onUnmounted(() => assist.clearSelection());
font-size: 0.72rem;
padding: 0.15rem 0.5rem;
background: none;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
color: var(--color-primary);
border: 1px solid var(--fs-accent);
border-radius: var(--fs-radius-sm);
color: var(--fs-accent);
cursor: pointer;
font-family: inherit;
}
.btn-link-all:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
.btn-link-all:hover { background: var(--fs-action-primary); color: var(--fs-text-on-action); }
.link-suggest-list {
display: flex;
@@ -766,14 +766,14 @@ onUnmounted(() => assist.clearSelection());
.link-suggest-title {
flex: 1;
font-family: monospace;
color: var(--color-primary);
color: var(--fs-accent);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-suggest-count {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.72rem;
flex-shrink: 0;
}
@@ -783,13 +783,13 @@ onUnmounted(() => assist.clearSelection());
font-size: 0.72rem;
padding: 0.1rem 0.4rem;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-family: inherit;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.btn-apply-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-apply-link:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
/* Writing Assistant section */
.assist-section {
@@ -801,7 +801,7 @@ onUnmounted(() => assist.clearSelection());
.assist-section-title {
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -810,19 +810,19 @@ onUnmounted(() => assist.clearSelection());
.ef-label {
font-family: 'Fraunces', Georgia, serif;
font-size: 0.92rem;
color: var(--color-primary);
color: var(--fs-accent);
}
.prompt-editor {
width: 100%;
min-height: 60vh;
margin-top: 8px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 8px;
background: var(--color-surface);
color: var(--color-text);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
/* Prompts are plain markdown — a code-style editor, not rich text. */
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 0.88rem;
line-height: 1.55;
tab-size: 2;
@@ -830,7 +830,7 @@ onUnmounted(() => assist.clearSelection());
outline: none;
}
.prompt-editor:focus {
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
/* Narrow screen: sidebar collapses */
@media (max-width: 720px) {
@@ -839,7 +839,7 @@ onUnmounted(() => assist.clearSelection());
.note-sidebar {
width: 100%;
border-left: none;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
overflow-y: visible;
}
}
frontend/src/views/NoteViewerView.vue
+19 -19
View File
@@ -340,7 +340,7 @@ async function convertToTask() {
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.83rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0 0 0.75rem;
}
.meta-item {
@@ -359,7 +359,7 @@ async function convertToTask() {
}
.backlinks {
margin-top: 2.5rem;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
padding-top: 1.25rem;
}
.backlinks-heading {
@@ -370,14 +370,14 @@ async function convertToTask() {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0 0 0.75rem;
}
.backlinks-count {
margin-left: 0.2rem;
font-size: 0.72rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 999px;
padding: 0 0.4rem;
line-height: 1.4;
@@ -392,18 +392,18 @@ async function convertToTask() {
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-md);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--fs-radius-lg);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
text-decoration: none;
color: var(--color-text);
color: var(--fs-text-primary);
transition: border-color 0.15s, box-shadow 0.15s;
font-size: 0.9rem;
}
.backlink-card:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
border-color: color-mix(in srgb, var(--fs-accent) 50%, transparent);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
color: var(--color-primary);
color: var(--fs-accent);
}
.backlink-type-badge {
font-size: 0.68rem;
@@ -415,9 +415,9 @@ async function convertToTask() {
flex-shrink: 0;
}
.badge-note {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
color: var(--fs-accent);
border: 1px solid color-mix(in srgb, var(--fs-accent) 25%, transparent);
}
.badge-task {
background: color-mix(in srgb, #f59e0b 12%, transparent);
@@ -446,12 +446,12 @@ async function convertToTask() {
.skel-title,
.skel-meta,
.skel-line {
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
var(--color-bg-secondary) 75%
var(--fs-surface-raised) 25%,
color-mix(in srgb, var(--fs-text-tertiary) 18%, var(--fs-surface-raised)) 50%,
var(--fs-surface-raised) 75%
);
background-size: 200% 100%;
animation: skel-shine 1.5s ease infinite;
@@ -463,7 +463,7 @@ async function convertToTask() {
}
.skel-btn { width: 70px; height: 32px; }
.skel-btn--wide { width: 90px; }
.skel-title { height: 2.2rem; width: 70%; border-radius: var(--radius-md); }
.skel-title { height: 2.2rem; width: 70%; border-radius: var(--fs-radius-lg); }
.skel-meta { height: 0.85rem; width: 40%; }
.skel-line { height: 0.9rem; }
.skel-line--short { width: 55%; }
frontend/src/views/ProjectListView.vue
+55 -55
View File
@@ -317,9 +317,9 @@ function overallPct(project: Project): { total: number; pct: number } {
<style scoped>
.projects-list {
max-width: var(--page-max-width);
max-width: var(--fs-layout-page-max);
margin: 2rem auto;
padding: 0 var(--page-padding-x);
padding: 0 var(--fs-layout-page-pad);
overflow-x: clip;
}
@@ -340,7 +340,7 @@ function overallPct(project: Project): { total: number; pct: number } {
display: flex;
gap: 0.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
padding-bottom: 0;
}
.tab-btn {
@@ -350,40 +350,40 @@ function overallPct(project: Project): { total: number; pct: number } {
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-family: inherit;
margin-bottom: -1px;
}
.tab-btn:hover {
color: var(--color-primary);
color: var(--fs-accent);
}
.tab-btn.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
color: var(--fs-accent);
border-bottom-color: var(--fs-accent);
font-weight: 500;
}
.loading-msg,
.error-msg {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.9rem;
margin-top: 1rem;
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
}
.empty-state-rich { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
.empty-state-rich { text-align: center; padding: 3rem 1rem; color: var(--fs-text-tertiary); }
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
.empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
.empty-title { font-size: 1rem; font-weight: 500; color: var(--fs-text-secondary); margin: 0 0 0.35rem; }
.empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-action-primary); border-radius: var(--radius-sm); color: var(--color-action-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.empty-action:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--fs-action-primary); border-radius: var(--fs-radius-sm); color: var(--fs-action-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.empty-action:hover { background: var(--fs-action-primary); color: var(--fs-text-on-action); }
.skeleton-card {
height: 140px;
border-radius: var(--radius-md);
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
border-radius: var(--fs-radius-lg);
background: linear-gradient(90deg, var(--fs-surface-raised) 25%, var(--fs-border-color) 50%, var(--fs-surface-raised) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@@ -404,9 +404,9 @@ function overallPct(project: Project): { total: number; pct: number } {
}
.project-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1rem 1.1rem;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s ease;
@@ -415,7 +415,7 @@ function overallPct(project: Project): { total: number; pct: number } {
gap: 0.5rem;
}
.project-card:hover {
border-color: var(--color-primary);
border-color: var(--fs-accent);
box-shadow: 0 2px 8px var(--color-shadow);
transform: translateY(-2px);
}
@@ -429,7 +429,7 @@ function overallPct(project: Project): { total: number; pct: number } {
.project-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
min-width: 0;
flex: 1;
word-break: break-word;
@@ -446,32 +446,32 @@ function overallPct(project: Project): { total: number; pct: number } {
white-space: nowrap;
}
.status-active {
background: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--color-success);
background: color-mix(in srgb, var(--fs-success) 15%, transparent);
color: var(--fs-success);
}
.status-completed {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
}
.status-archived {
background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
color: var(--fs-text-tertiary);
}
.project-goal {
font-size: 0.875rem;
color: var(--color-text);
color: var(--fs-text-primary);
margin: 0;
line-height: 1.4;
}
.field-label {
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.project-desc {
font-size: 0.82rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 0;
line-height: 1.45;
}
@@ -486,18 +486,18 @@ function overallPct(project: Project): { total: number; pct: number } {
.overall-bar-track {
flex: 1;
height: 6px;
background: var(--color-border);
background: var(--fs-border-color);
border-radius: 999px;
overflow: hidden;
}
.overall-bar-fill {
height: 100%;
border-radius: 999px;
background: var(--color-primary);
background: var(--fs-accent);
transition: width 0.3s ease;
}
.overall-bar-pct {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
flex-shrink: 0;
min-width: 2.5rem;
text-align: right;
@@ -517,7 +517,7 @@ function overallPct(project: Project): { total: number; pct: number } {
font-size: 0.72rem;
}
.milestone-bar-label {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
min-width: 0;
flex: 0 0 30%;
overflow: hidden;
@@ -527,7 +527,7 @@ function overallPct(project: Project): { total: number; pct: number } {
.milestone-bar-track {
flex: 1;
height: 5px;
background: var(--color-border);
background: var(--fs-border-color);
border-radius: 999px;
overflow: hidden;
}
@@ -537,7 +537,7 @@ function overallPct(project: Project): { total: number; pct: number } {
transition: width 0.3s ease;
}
.milestone-bar-pct {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
flex-shrink: 0;
min-width: 2.5rem;
text-align: right;
@@ -546,7 +546,7 @@ function overallPct(project: Project): { total: number; pct: number } {
/* Deliberately quiet — it is a footnote about what is not shown, not another
row competing with the bars above it. */
.milestone-more {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: var(--fs-size-tiny);
padding-top: 0.15rem;
}
@@ -556,23 +556,23 @@ function overallPct(project: Project): { total: number; pct: number } {
}
.meta-date {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
background: var(--fs-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.modal-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.5rem;
width: 100%;
max-width: 480px;
@@ -593,18 +593,18 @@ function overallPct(project: Project): { total: number; pct: number } {
.modal-field label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
}
.required {
color: var(--color-danger);
color: var(--fs-error);
}
.modal-input,
.modal-textarea {
padding: 0.45rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
@@ -613,7 +613,7 @@ function overallPct(project: Project): { total: number; pct: number } {
.modal-input:focus,
.modal-textarea:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.modal-textarea {
resize: vertical;
@@ -625,20 +625,20 @@ function overallPct(project: Project): { total: number; pct: number } {
}
.modal-btn {
padding: 0.4rem 0.9rem;
border: 1px solid var(--color-border);
background: var(--color-bg-secondary);
color: var(--color-text);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
background: var(--fs-surface-raised);
color: var(--fs-text-primary);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-size: 0.875rem;
font-family: inherit;
}
.modal-btn:hover {
background: var(--color-bg);
background: var(--fs-surface-page);
}
.modal-btn-primary {
background: var(--color-action-primary);
border-color: var(--color-action-primary);
background: var(--fs-action-primary);
border-color: var(--fs-action-primary);
color: var(--fs-text-on-action);
}
.modal-btn-primary:hover:not(:disabled) {
frontend/src/views/ProjectView.vue
+140 -140
View File
@@ -932,9 +932,9 @@ async function confirmDelete() {
<style scoped>
/* ── Layout ─────────────────────────────────────────────────── */
.project-view {
max-width: var(--page-max-width);
max-width: var(--fs-layout-page-max);
margin: 2rem auto;
padding: 0 var(--page-padding-x);
padding: 0 var(--fs-layout-page-pad);
overflow-x: clip;
}
@@ -947,9 +947,9 @@ async function confirmDelete() {
}
.page-header-actions { display: flex; gap: 0.5rem; align-items: center; }
.plan-title-input {
background: var(--color-bg);
background: var(--fs-surface-page);
color: inherit;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
padding: 0.4rem 0.6rem;
font: inherit;
@@ -961,7 +961,7 @@ async function confirmDelete() {
font-size: 1.75rem;
font-weight: 500;
font-family: "Fraunces", Georgia, serif;
color: var(--color-text);
color: var(--fs-text-primary);
background: transparent;
border: none;
border-bottom: 1.5px solid transparent;
@@ -970,8 +970,8 @@ async function confirmDelete() {
min-width: 0;
transition: border-color 0.15s;
}
.project-title-input:focus { border-bottom-color: var(--color-primary); }
.project-title-input::placeholder { color: var(--color-text-muted); font-weight: 400; }
.project-title-input:focus { border-bottom-color: var(--fs-accent); }
.project-title-input::placeholder { color: var(--fs-text-tertiary); font-weight: 400; }
.status-badge {
font-size: 0.68rem;
@@ -982,14 +982,14 @@ async function confirmDelete() {
border-radius: 999px;
flex-shrink: 0;
}
.status-active { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
.status-paused { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.status-completed { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }
.status-archived { background: color-mix(in srgb, var(--color-text-muted) 14%, transparent); color: var(--color-text-muted); border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); }
.status-active { background: color-mix(in srgb, var(--fs-success) 14%, transparent); color: var(--fs-success); border: 1px solid color-mix(in srgb, var(--fs-success) 30%, transparent); }
.status-paused { background: color-mix(in srgb, var(--fs-warning) 14%, transparent); color: var(--fs-warning); border: 1px solid color-mix(in srgb, var(--fs-warning) 30%, transparent); }
.status-completed { background: color-mix(in srgb, var(--fs-accent) 14%, transparent); color: var(--fs-accent); border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent); }
.status-archived { background: color-mix(in srgb, var(--fs-text-tertiary) 14%, transparent); color: var(--fs-text-tertiary); border: 1px solid color-mix(in srgb, var(--fs-text-tertiary) 30%, transparent); }
.project-goal {
font-size: 1rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 0 0 0.3rem;
line-height: 1.45;
}
@@ -998,7 +998,7 @@ async function confirmDelete() {
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0;
}
@@ -1015,7 +1015,7 @@ async function confirmDelete() {
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.65rem;
border-radius: var(--radius-md);
border-radius: var(--fs-radius-lg);
font-size: 0.82rem;
border: 1px solid;
}
@@ -1028,14 +1028,14 @@ async function confirmDelete() {
border-radius: 50%;
flex-shrink: 0;
}
.dot-todo { background: transparent; border: 2px solid var(--color-text-muted); }
.dot-inprogress { background: var(--color-status-in-progress); }
.dot-done { background: var(--color-status-done); }
.dot-todo { background: transparent; border: 2px solid var(--fs-text-tertiary); }
.dot-inprogress { background: var(--fs-status-in-progress); }
.dot-done { background: var(--fs-status-done); }
.stat-todo { background: color-mix(in srgb, var(--color-text-muted) 8%, transparent); color: var(--color-text-secondary); border-color: var(--color-border); }
.stat-todo { background: color-mix(in srgb, var(--fs-text-tertiary) 8%, transparent); color: var(--fs-text-secondary); border-color: var(--fs-border-color); }
.stat-inprogress { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 28%, transparent); }
.stat-done { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
.stat-notes { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }
.stat-done { background: color-mix(in srgb, var(--fs-success) 10%, transparent); color: var(--fs-success); border-color: color-mix(in srgb, var(--fs-success) 28%, transparent); }
.stat-notes { background: color-mix(in srgb, var(--fs-accent) 8%, transparent); color: var(--fs-accent); border-color: color-mix(in srgb, var(--fs-accent) 22%, transparent); }
/* ── Two-column body ─────────────────────────────────────────── */
/* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` track has an AUTO minimum, so it
@@ -1059,9 +1059,9 @@ async function confirmDelete() {
/* ── Edit panel ──────────────────────────────────────────────── */
.edit-panel {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
@@ -1075,28 +1075,28 @@ async function confirmDelete() {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.edit-field { display: flex; flex-direction: column; gap: 0.3rem; }
.edit-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.edit-input, .edit-textarea, .edit-select {
padding: 0.4rem 0.6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.875rem;
font-family: inherit;
box-sizing: border-box;
width: 100%;
}
.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--color-primary); }
.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--fs-accent); }
.edit-textarea { resize: vertical; }
/* Save panel: Moss action-primary per Hybrid rule */
@@ -1110,27 +1110,27 @@ async function confirmDelete() {
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-family: inherit;
margin-bottom: -1px;
transition: color 0.15s;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }
.tab-btn:hover { color: var(--fs-accent); }
.tab-btn.active { color: var(--fs-accent); border-bottom-color: var(--fs-accent); font-weight: 500; }
.tab-count {
font-size: 0.7rem;
font-weight: 500;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 999px;
padding: 0 0.4rem;
line-height: 1.5;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.tab-btn.active .tab-count {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
border-color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
color: var(--fs-accent);
}
/* ── Tasks view ──────────────────────────────────────────────── */
@@ -1139,28 +1139,28 @@ async function confirmDelete() {
.milestone-actions { display: flex; align-items: center; }
.btn-add-milestone {
background: none;
border: 1px dashed var(--color-border);
color: var(--color-text-secondary);
border: 1px dashed var(--fs-border-color);
color: var(--fs-text-secondary);
padding: 0.28rem 0.65rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-size: 0.78rem;
font-family: inherit;
}
.btn-add-milestone:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-add-milestone:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
.new-milestone-row { display: flex; gap: 0.4rem; align-items: center; flex: 1; }
.milestone-title-input {
flex: 1;
padding: 0.3rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.875rem;
font-family: inherit;
}
.milestone-title-input:focus { outline: none; border-color: var(--color-primary); }
.milestone-title-input:focus { outline: none; border-color: var(--fs-accent); }
/* Milestone confirm: Moss action-primary; Cancel: Bronze action-secondary */
/* RESTORED. Both of these lost their base rule to a CSS sweep and left only
modifiers behind — `.milestone-header.clickable`, `.milestone-header:hover`.
@@ -1170,9 +1170,9 @@ async function confirmDelete() {
the "uses space poorly" the operator saw, and it was a deletion rather than a
design change. A dangling `:hover` is the tell, and it is now checked for. */
.milestone-group {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
overflow: hidden;
margin-bottom: 0.75rem;
}
@@ -1182,20 +1182,20 @@ async function confirmDelete() {
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.85rem;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.milestone-header.clickable { cursor: pointer; }
.milestone-header.clickable:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-secondary)); }
.milestone-header.clickable:hover { background: color-mix(in srgb, var(--fs-accent) 4%, var(--fs-surface-raised)); }
/* Plan body: the milestone's design/intent, shown above its task columns. */
.ms-plan {
padding: 0.6rem 0.85rem;
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card));
border-bottom: 1px solid var(--color-border);
background: color-mix(in srgb, var(--fs-accent) 3%, var(--fs-surface-raised));
border-bottom: 1px solid var(--fs-border-color);
}
.ms-plan-rendered { font-size: 0.85rem; color: var(--color-text); cursor: text; }
.ms-plan-rendered:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.ms-plan-rendered { font-size: 0.85rem; color: var(--fs-text-primary); cursor: text; }
.ms-plan-rendered:hover { background: color-mix(in srgb, var(--fs-accent) 4%, transparent); }
/* max-height rather than -webkit-line-clamp: the body is rendered markdown, so
it holds headings, lists and tables. line-clamp counts lines inside ONE inline
@@ -1216,21 +1216,21 @@ async function confirmDelete() {
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card))
color-mix(in srgb, var(--fs-accent) 3%, var(--fs-surface-raised))
);
pointer-events: none; /* the text under the fade stays clickable to edit */
}
.ms-plan-toggle { padding-left: 0; margin-top: 0.15rem; }
.ms-plan-editor {
width: 100%;
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 0.8rem;
line-height: 1.5;
padding: 0.5rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
resize: vertical;
box-sizing: border-box;
}
@@ -1241,19 +1241,19 @@ async function confirmDelete() {
padding: 0.3rem 0.75rem;
border-radius: 6px;
cursor: pointer;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
}
.ms-plan-actions .btn-primary { background: var(--color-action-primary); color: var(--fs-text-on-action); border-color: var(--color-action-primary); }
.ms-plan-actions .btn-primary { background: var(--fs-action-primary); color: var(--fs-text-on-action); border-color: var(--fs-action-primary); }
.ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
.ms-plan-actions .btn-secondary { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
.ms-chevron { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; }
.ms-name { font-weight: 500; color: var(--color-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chevron { display: flex; align-items: center; color: var(--fs-text-tertiary); flex-shrink: 0; }
.ms-name { font-weight: 500; color: var(--fs-text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-count {
font-size: 0.7rem;
color: var(--color-text-muted);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
color: var(--fs-text-tertiary);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 999px;
padding: 0.05rem 0.4rem;
flex-shrink: 0;
@@ -1262,18 +1262,18 @@ async function confirmDelete() {
.ms-progress-track {
width: 72px;
height: 6px;
background: var(--color-border);
background: var(--fs-border-color);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
}
.ms-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-success)));
background: linear-gradient(90deg, var(--fs-accent), color-mix(in srgb, var(--fs-accent) 70%, var(--fs-success)));
border-radius: 999px;
transition: width 0.4s ease;
}
.ms-pct { font-size: 0.72rem; color: var(--color-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 500; }
.ms-pct { font-size: 0.72rem; color: var(--fs-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 500; }
.ms-actions { display: flex; gap: 0.15rem; margin-left: 0.2rem; opacity: 0; transition: opacity 0.15s; }
.milestone-header:hover .ms-actions { opacity: 1; }
@@ -1284,22 +1284,22 @@ async function confirmDelete() {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
}
.ms-action-btn:hover { background: var(--color-bg-card); color: var(--color-text); }
.ms-action-delete:hover { color: var(--color-danger); }
.ms-action-btn:hover { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
.ms-action-delete:hover { color: var(--fs-error); }
.ms-rename-input {
flex: 1;
min-width: 0;
padding: 0.1rem 0.35rem;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-accent);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.85rem;
font-family: inherit;
font-weight: 500;
@@ -1316,20 +1316,20 @@ async function confirmDelete() {
gap: 0.75rem;
align-items: start;
padding: 0.75rem;
background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-secondary));
background: color-mix(in srgb, var(--fs-surface-page) 60%, var(--fs-surface-raised));
}
.kanban-col {
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border-radius: var(--fs-radius-lg);
padding: 0.65rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
border-top: 3px solid;
}
.col-todo { border-top-color: var(--color-border); }
.col-inprogress { border-top-color: var(--color-status-in-progress); }
.col-done { border-top-color: var(--color-status-done); }
.col-todo { border-top-color: var(--fs-border-color); }
.col-inprogress { border-top-color: var(--fs-status-in-progress); }
.col-done { border-top-color: var(--fs-status-done); }
.kanban-col-header {
display: flex;
@@ -1339,18 +1339,18 @@ async function confirmDelete() {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin-bottom: 0.3rem;
}
.col-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.col-label { flex: 1; }
.col-count {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 999px;
padding: 0.05rem 0.4rem;
font-size: 0.68rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-weight: 500;
}
.col-add-btn {
@@ -1359,40 +1359,40 @@ async function confirmDelete() {
justify-content: center;
width: 18px;
height: 18px;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
text-decoration: none;
font-size: 1rem;
line-height: 1;
border-radius: 3px;
margin-left: auto;
}
.col-add-btn:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.col-add-btn:hover { color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 10%, transparent); }
.kanban-cards { display: flex; flex-direction: column; gap: 0.3rem; }
.task-card {
display: block;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-left: 3px solid transparent;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
padding: 0.45rem 0.55rem;
text-decoration: none;
color: var(--color-text);
color: var(--fs-text-primary);
font-size: 0.85rem;
transition: border-color 0.12s, box-shadow 0.18s, transform 0.18s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.task-card:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
border-left-color: var(--color-primary);
border-color: color-mix(in srgb, var(--fs-accent) 50%, var(--fs-border-color));
border-left-color: var(--fs-accent);
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
/* Priority left-border colors */
.task-card.pri-high { border-left-color: var(--color-danger); }
.task-card.pri-high { border-left-color: var(--fs-error); }
.task-card.pri-medium { border-left-color: #f59e0b; }
.task-card.pri-low { border-left-color: var(--color-success); }
.task-card.pri-low { border-left-color: var(--fs-success); }
.task-card-done { opacity: 0.65; }
.task-card-done .task-title { text-decoration: line-through; }
@@ -1404,10 +1404,10 @@ async function confirmDelete() {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 1.4rem; height: 1.4rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 4px;
background: transparent;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.75rem;
cursor: pointer;
opacity: 0;
@@ -1415,8 +1415,8 @@ async function confirmDelete() {
line-height: 1;
}
.task-card:hover .task-advance-btn { opacity: 1; }
.task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--fs-text-on-action); }
.task-advance-btn--done:hover { background: var(--color-success); border-color: var(--color-success); color: var(--fs-text-on-action); }
.task-advance-btn:hover { background: var(--fs-action-primary); border-color: var(--fs-action-primary); color: var(--fs-text-on-action); }
.task-advance-btn--done:hover { background: var(--fs-success); border-color: var(--fs-success); color: var(--fs-text-on-action); }
.task-advance-btn:disabled { opacity: 0.4; cursor: default; }
.priority-dot {
@@ -1425,18 +1425,18 @@ async function confirmDelete() {
border-radius: 50%;
flex-shrink: 0;
}
.dot-pri-high { background: var(--color-danger); }
.dot-pri-high { background: var(--fs-error); }
.dot-pri-medium { background: #f59e0b; }
.dot-pri-low { background: var(--color-success); }
.dot-pri-low { background: var(--fs-success); }
.due-date { font-size: 0.7rem; color: var(--color-text-muted); }
.due-date { font-size: 0.7rem; color: var(--fs-text-tertiary); }
.col-empty {
text-align: center;
padding: 1.25rem 0.5rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.78rem;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
border: 1px dashed var(--fs-border-color);
border-radius: var(--fs-radius-sm);
opacity: 0.7;
}
@@ -1447,62 +1447,62 @@ async function confirmDelete() {
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.9rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
text-decoration: none;
color: var(--color-text);
color: var(--fs-text-primary);
font-size: 0.9rem;
transition: border-color 0.12s, box-shadow 0.15s, transform 0.15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.note-row:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
border-color: color-mix(in srgb, var(--fs-accent) 50%, var(--fs-border-color));
box-shadow: 0 3px 10px rgba(0,0,0,0.07);
transform: translateY(-1px);
}
.note-icon { color: var(--color-text-muted); flex-shrink: 0; }
.note-icon { color: var(--fs-text-tertiary); flex-shrink: 0; }
.note-title { font-weight: 500; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-date { font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }
.note-date { font-size: 0.75rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
.empty-msg { color: var(--color-text-muted); font-size: 0.875rem; text-align: center; padding: 1rem; }
.empty-msg { color: var(--fs-text-tertiary); font-size: 0.875rem; text-align: center; padding: 1rem; }
/* Deliberately NOT styled like .empty-msg: "no tasks" and "the tasks did not
load" look identical to a user, and conflating them is what let a silent
failure read as an empty project. */
.tasks-error { color: var(--color-danger); font-size: 0.875rem; padding: 1rem; text-align: center; }
.tasks-error { color: var(--fs-error); font-size: 0.875rem; padding: 1rem; text-align: center; }
/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: var(--color-overlay);
background: var(--fs-overlay);
display: flex; align-items: center; justify-content: center;
z-index: 200;
}
.modal-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.5rem;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 32px var(--color-shadow);
}
.modal-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
.modal-message { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
.modal-message { font-size: 0.9rem; color: var(--fs-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.modal-btn {
padding: 0.4rem 0.9rem;
border: 1px solid var(--color-border);
background: var(--color-bg-secondary);
color: var(--color-text);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
background: var(--fs-surface-raised);
color: var(--fs-text-primary);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-size: 0.875rem;
font-family: inherit;
}
.modal-btn:hover { background: var(--color-bg); }
.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--fs-text-on-action); }
.modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
.modal-btn:hover { background: var(--fs-surface-page); }
.modal-btn-danger { background: var(--fs-action-destructive); border-color: var(--fs-action-destructive); color: var(--fs-text-on-action); }
.modal-btn-danger:hover { background: var(--fs-action-destructive-hover); border-color: var(--fs-action-destructive-hover); }
/* ── Skeleton ────────────────────────────────────────────────── */
@keyframes skel-shine { to { background-position: 200% center; } }
@@ -1512,21 +1512,21 @@ async function confirmDelete() {
gap: 0.65rem;
}
.skel-title, .skel-goal, .skel-stats, .skel-body, .skel-row {
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
var(--color-bg-secondary) 75%
var(--fs-surface-raised) 25%,
color-mix(in srgb, var(--fs-text-tertiary) 16%, var(--fs-surface-raised)) 50%,
var(--fs-surface-raised) 75%
);
background-size: 200% 100%;
animation: skel-shine 1.5s ease infinite;
}
.skel-title { height: 2.2rem; width: 55%; border-radius: var(--radius-md); }
.skel-title { height: 2.2rem; width: 55%; border-radius: var(--fs-radius-lg); }
.skel-goal { height: 1rem; width: 75%; }
.skel-stats { height: 2rem; width: 50%; border-radius: var(--radius-md); }
.skel-body { height: 200px; border-radius: var(--radius-md); }
.skel-row { height: 2.5rem; border-radius: var(--radius-sm); }
.skel-stats { height: 2rem; width: 50%; border-radius: var(--fs-radius-lg); }
.skel-body { height: 200px; border-radius: var(--fs-radius-lg); }
.skel-row { height: 2.5rem; border-radius: var(--fs-radius-sm); }
.skel-row--short { width: 65%; }
/* ── Responsive ──────────────────────────────────────────────── */
frontend/src/views/RegisterInviteView.vue
+17 -17
View File
@@ -168,9 +168,9 @@ async function handleSubmit() {
.auth-card {
width: 100%;
max-width: 400px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 2rem;
}
.auth-brand {
@@ -186,13 +186,13 @@ async function handleSubmit() {
}
.loading-msg {
text-align: center;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.95rem;
padding: 1rem 0;
}
.error-block {
text-align: center;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.95rem;
padding: 0.5rem 0;
}
@@ -211,11 +211,11 @@ async function handleSubmit() {
.input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.95rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
}
.input:disabled {
@@ -224,36 +224,36 @@ async function handleSubmit() {
}
.input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.input-error {
border-color: var(--color-danger);
border-color: var(--fs-error);
}
.input-error:focus {
border-color: var(--color-danger);
border-color: var(--fs-error);
}
.field-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.error-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-danger);
color: var(--fs-error);
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
.auth-footer {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 1rem 0 0;
}
.auth-footer a {
color: var(--color-primary);
color: var(--fs-accent);
}
</style>
frontend/src/views/RegisterView.vue
+17 -17
View File
@@ -141,9 +141,9 @@ async function handleSubmit() {
.auth-card {
width: 100%;
max-width: 400px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 2rem;
}
.auth-brand {
@@ -159,13 +159,13 @@ async function handleSubmit() {
}
.loading-msg {
text-align: center;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.9rem;
padding: 1rem 0;
}
.closed-msg {
text-align: center;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.95rem;
padding: 0.5rem 0;
}
@@ -184,45 +184,45 @@ async function handleSubmit() {
.input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.95rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.input-error {
border-color: var(--color-danger);
border-color: var(--fs-error);
}
.input-error:focus {
border-color: var(--color-danger);
border-color: var(--fs-error);
}
.field-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.error-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-danger);
color: var(--fs-error);
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
.auth-footer {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 1rem 0 0;
}
.auth-footer a {
color: var(--color-primary);
color: var(--fs-accent);
}
</style>
frontend/src/views/ResetPasswordView.vue
+17 -17
View File
@@ -117,9 +117,9 @@ async function handleSubmit() {
.auth-card {
width: 100%;
max-width: 400px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 2rem;
}
.auth-brand {
@@ -135,7 +135,7 @@ async function handleSubmit() {
}
.error-block {
text-align: center;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.95rem;
padding: 0.5rem 0;
}
@@ -144,7 +144,7 @@ async function handleSubmit() {
}
.success-msg {
text-align: center;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.95rem;
padding: 0.5rem 0;
}
@@ -163,45 +163,45 @@ async function handleSubmit() {
.input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.95rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.input-error {
border-color: var(--color-danger);
border-color: var(--fs-error);
}
.input-error:focus {
border-color: var(--color-danger);
border-color: var(--fs-error);
}
.field-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.error-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-danger);
color: var(--fs-error);
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
.auth-footer {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 1rem 0 0;
}
.auth-footer a {
color: var(--color-primary);
color: var(--fs-accent);
}
</style>
frontend/src/views/RulesView.vue
+2 -2
View File
@@ -107,10 +107,10 @@ watch(() => route.query, syncFromRoute);
grid-template-columns: 280px 300px 1fr;
height: 100vh;
gap: 1px;
background: var(--color-border);
background: var(--fs-border-color);
}
.pane.empty {
background: var(--color-surface);
background: var(--fs-surface-hover);
padding: 1rem;
opacity: 0.6;
font-style: italic;
frontend/src/views/SettingsView.vue
+197 -197
View File
@@ -2353,7 +2353,7 @@ function formatUserDate(iso: string): string {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding: 0.25rem 0.75rem 0.2rem;
}
.sidebar-item {
@@ -2366,19 +2366,19 @@ function formatUserDate(iso: string): string {
background: none;
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text-secondary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--fs-text-secondary);
border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
transition: color 0.15s, background 0.15s, border-color 0.15s;
font-family: inherit;
}
.sidebar-item:hover {
color: var(--color-text);
background: var(--color-bg-secondary);
color: var(--fs-text-primary);
background: var(--fs-surface-raised);
}
.sidebar-item.active {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border-left-color: var(--color-primary);
color: var(--fs-accent);
background: color-mix(in srgb, var(--fs-accent) 8%, transparent);
border-left-color: var(--fs-accent);
font-weight: 500;
}
@@ -2396,9 +2396,9 @@ function formatUserDate(iso: string): string {
align-items: start;
}
.settings-section {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.25rem;
}
.settings-section.full-width {
@@ -2410,12 +2410,12 @@ function formatUserDate(iso: string): string {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.section-desc {
margin: 0 0 1rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
line-height: 1.5;
}
@@ -2429,8 +2429,8 @@ function formatUserDate(iso: string): string {
.model-row {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
padding: 0.45rem 0.6rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
}
.model-row-info { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1; }
@@ -2439,44 +2439,44 @@ function formatUserDate(iso: string): string {
font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 500; white-space: nowrap;
}
.model-badge--loaded { background: color-mix(in srgb, #22c55e 18%, transparent); color: #22c55e; }
.model-badge--default { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary); }
.model-badge--default { background: color-mix(in srgb, var(--fs-accent) 18%, transparent); color: var(--fs-accent); }
.model-row-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.model-size { font-size: 0.78rem; color: var(--color-text-muted); }
.model-size { font-size: 0.78rem; color: var(--fs-text-tertiary); }
.model-delete-btn {
background: none; border: none; cursor: pointer; color: var(--color-text-muted);
background: none; border: none; cursor: pointer; color: var(--fs-text-tertiary);
font-size: 0.8rem; padding: 0.2rem 0.35rem; border-radius: 3px; line-height: 1;
transition: color 0.15s, background 0.15s;
}
.model-delete-btn:hover:not(:disabled) { color: var(--color-action-destructive); background: color-mix(in srgb, var(--color-action-destructive) 10%, transparent); }
.model-delete-btn:hover:not(:disabled) { color: var(--fs-action-destructive); background: color-mix(in srgb, var(--fs-action-destructive) 10%, transparent); }
.model-delete-btn:disabled { opacity: 0.4; cursor: default; }
.model-pull-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.model-pull-form .input { flex: 1; }
.model-suggestions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.suggestions-label { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
.suggestions-label { font-size: 0.75rem; color: var(--fs-text-tertiary); white-space: nowrap; }
.suggestion-chip {
font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 4px;
border: 1px solid var(--color-border); background: var(--color-bg-card);
cursor: pointer; font-family: monospace; color: var(--color-text);
border: 1px solid var(--fs-border-color); background: var(--fs-surface-raised);
cursor: pointer; font-family: monospace; color: var(--fs-text-primary);
transition: border-color 0.12s, background 0.12s;
}
.suggestion-chip:hover:not(:disabled) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); }
.suggestion-chip:hover:not(:disabled) { border-color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised)); }
.suggestion-chip:disabled { opacity: 0.4; cursor: default; }
.model-pull-progress { margin-top: 0.6rem; }
.pull-status { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.pull-status { font-size: 0.8rem; color: var(--fs-text-tertiary); margin-bottom: 0.25rem; }
.pull-bar-track {
height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden;
height: 4px; background: var(--fs-border-color); border-radius: 2px; overflow: hidden;
}
.pull-bar-fill {
height: 100%; background: var(--color-primary); border-radius: 2px;
height: 100%; background: var(--fs-accent); border-radius: 2px;
transition: width 0.3s ease;
}
.pull-bar-indeterminate {
height: 4px; background: var(--color-border); border-radius: 2px;
height: 4px; background: var(--fs-border-color); border-radius: 2px;
position: relative; overflow: hidden;
}
.pull-bar-indeterminate::after {
content: ""; position: absolute; top: 0; left: -40%;
width: 40%; height: 100%; background: var(--color-primary); border-radius: 2px;
width: 40%; height: 100%; background: var(--fs-accent); border-radius: 2px;
animation: indeterminate 1.2s ease-in-out infinite;
}
@keyframes indeterminate {
@@ -2503,27 +2503,27 @@ function formatUserDate(iso: string): string {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.35rem;
color: var(--color-text);
color: var(--fs-text-primary);
}
.input {
width: 100%;
padding: 0.45rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.9rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
font-family: inherit;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.field-hint {
margin: 0.3rem 0 0;
font-size: 0.78rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.field-hint-warn {
display: block;
@@ -2552,12 +2552,12 @@ function formatUserDate(iso: string): string {
font-size: 0.82rem;
padding: 0.2rem 0;
}
.db-maint-table-list .dm-status { color: var(--color-text-muted); }
.db-maint-table-list li.dm-failed .dm-status { color: var(--color-danger); }
.db-maint-table-list .dm-status { color: var(--fs-text-tertiary); }
.db-maint-table-list li.dm-failed .dm-status { color: var(--fs-error); }
/* DB table-health readout */
.db-health { margin-top: 1.5rem; }
.db-health-total { color: var(--color-text-muted); font-weight: 400; }
.db-health-total { color: var(--fs-text-tertiary); font-weight: 400; }
.db-health-scroll { overflow-x: auto; margin-top: 0.5rem; }
.db-health-table {
width: 100%;
@@ -2567,35 +2567,35 @@ function formatUserDate(iso: string): string {
.db-health-table th, .db-health-table td {
text-align: left;
padding: 0.35rem 0.6rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
white-space: nowrap;
}
.db-health-table th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-weight: 500;
}
.db-health-table td.num, .db-health-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.db-health-table tr.dh-warn td { color: var(--color-warning); }
.db-health-table tr.dh-warn td:first-child code { color: var(--color-warning); }
.db-health-table tr.dh-warn td { color: var(--fs-warning); }
.db-health-table tr.dh-warn td:first-child code { color: var(--fs-warning); }
.btn-warn:hover:not(:disabled) {
background: var(--color-warning);
background: var(--fs-warning);
color: var(--fs-text-on-action);
}
.saved-msg {
color: var(--color-success);
color: var(--fs-success);
font-size: 0.875rem;
font-weight: 500;
}
.input-error { border-color: var(--color-danger); }
.input-error:focus { border-color: var(--color-danger); }
.input-error { border-color: var(--fs-error); }
.input-error:focus { border-color: var(--fs-error); }
.error-hint {
margin: 0.3rem 0 0;
font-size: 0.78rem;
color: var(--color-danger);
color: var(--fs-error);
}
.retention-row {
@@ -2623,21 +2623,21 @@ function formatUserDate(iso: string): string {
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
cursor: pointer;
}
.checkbox-field input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-primary);
accent-color: var(--fs-accent);
}
/* Search test */
.url-chip {
font-size: 0.8rem;
padding: 0.1rem 0.4rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 4px;
}
.not-configured {
@@ -2652,7 +2652,7 @@ function formatUserDate(iso: string): string {
.search-row .input { flex: 1; }
.search-error {
font-size: 0.875rem;
color: var(--color-danger);
color: var(--fs-error);
margin: 0 0 0.5rem;
}
.search-results {
@@ -2665,9 +2665,9 @@ function formatUserDate(iso: string): string {
}
.search-result {
padding: 0.65rem 0.85rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
}
.result-header {
display: flex;
@@ -2679,20 +2679,20 @@ function formatUserDate(iso: string): string {
.result-title {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-primary);
color: var(--fs-accent);
text-decoration: none;
word-break: break-word;
}
.result-title:hover { text-decoration: underline; }
.result-host {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
white-space: nowrap;
}
.result-snippet {
margin: 0;
font-size: 0.82rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -2721,10 +2721,10 @@ function formatUserDate(iso: string): string {
margin: 0 0 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.test-email-section {
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
padding-top: 1rem;
}
.test-email-row {
@@ -2737,7 +2737,7 @@ function formatUserDate(iso: string): string {
/* Push notifications */
.push-unsupported {
font-size: 0.875rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.push-status-row {
display: flex;
@@ -2747,7 +2747,7 @@ function formatUserDate(iso: string): string {
font-size: 0.875rem;
}
.push-status-label {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-weight: 500;
}
.push-permission-badge,
@@ -2758,15 +2758,15 @@ function formatUserDate(iso: string): string {
letter-spacing: 0.04em;
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
color: var(--fs-text-tertiary);
}
.perm-granted { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.perm-denied { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
.sub-active { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.perm-granted { background: color-mix(in srgb, var(--fs-success) 15%, transparent); color: var(--fs-success); }
.perm-denied { background: color-mix(in srgb, var(--fs-error) 15%, transparent); color: var(--fs-error); }
.sub-active { background: color-mix(in srgb, var(--fs-success) 15%, transparent); color: var(--fs-success); }
.push-error {
font-size: 0.82rem;
color: var(--color-danger);
color: var(--fs-error);
margin: 0.25rem 0 0;
}
@@ -2780,7 +2780,7 @@ function formatUserDate(iso: string): string {
position: static;
padding-right: 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
margin-bottom: 1rem;
}
.sidebar-group {
@@ -2796,13 +2796,13 @@ function formatUserDate(iso: string): string {
width: auto;
border-left: none;
border-bottom: 2px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-radius: var(--fs-radius-sm) var(--fs-radius-sm) 0 0;
font-size: 0.82rem;
padding: 0.35rem 0.7rem;
}
.sidebar-item.active {
border-bottom-color: var(--color-primary);
background: var(--color-primary-tint);
border-bottom-color: var(--fs-accent);
background: var(--fs-accent-soft);
}
.settings-grid {
grid-template-columns: 1fr;
@@ -2827,8 +2827,8 @@ function formatUserDate(iso: string): string {
}
.registration-info { flex: 1; }
.registration-status { margin: 0; font-size: 0.95rem; }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--fs-success); }
.text-muted { color: var(--fs-text-tertiary); }
.invite-form {
display: flex;
gap: 0.5rem;
@@ -2840,7 +2840,7 @@ function formatUserDate(iso: string): string {
margin: 0 0 0.5rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
@@ -2849,19 +2849,19 @@ function formatUserDate(iso: string): string {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.users-table td {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
font-size: 0.9rem;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.cell-username { font-weight: 500; }
.cell-email { color: var(--color-text-secondary); }
.cell-date { color: var(--color-text-muted); font-size: 0.85rem; }
.cell-email { color: var(--fs-text-secondary); }
.cell-date { color: var(--fs-text-tertiary); font-size: 0.85rem; }
.cell-actions { white-space: nowrap; }
.role-badge {
display: inline-block;
@@ -2870,17 +2870,17 @@ function formatUserDate(iso: string): string {
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
}
.role-admin {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--fs-accent);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
}
.role-user {
color: var(--color-text-muted);
background: var(--color-bg-secondary);
color: var(--fs-text-tertiary);
background: var(--fs-surface-raised);
}
.you-label { font-size: 0.8rem; color: var(--color-text-muted); }
.you-label { font-size: 0.8rem; color: var(--fs-text-tertiary); }
/* Per-row delete (users / invitations / etc.): ghost → Oxblood on hover */
/* Logs panel */
@@ -2894,17 +2894,17 @@ function formatUserDate(iso: string): string {
align-items: center;
gap: 0.15rem;
}
.stat-count { font-size: 1.5rem; font-weight: 500; color: var(--color-text); }
.stat-count { font-size: 1.5rem; font-weight: 500; color: var(--fs-text-primary); }
.stat-label {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.stat-audit { color: var(--color-primary); }
.stat-usage { color: var(--color-success); }
.stat-error { color: var(--color-danger); }
.stat-audit { color: var(--fs-accent); }
.stat-usage { color: var(--fs-success); }
.stat-error { color: var(--fs-error); }
.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.filter-select { min-width: 140px; }
@@ -2918,49 +2918,49 @@ function formatUserDate(iso: string): string {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.logs-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
font-size: 0.85rem;
}
.logs-table tbody tr:last-child td { border-bottom: none; }
.log-row { cursor: pointer; transition: background 0.1s; }
.log-row:hover { background: var(--color-bg-secondary); }
.row-expanded { background: var(--color-bg-secondary); }
.cell-time { white-space: nowrap; color: var(--color-text-muted); font-size: 0.8rem; }
.cell-user { color: var(--color-text-secondary); }
.log-row:hover { background: var(--fs-surface-raised); }
.row-expanded { background: var(--fs-surface-raised); }
.cell-time { white-space: nowrap; color: var(--fs-text-tertiary); font-size: 0.8rem; }
.cell-user { color: var(--fs-text-secondary); }
.cell-action { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-status { font-family: monospace; font-size: 0.85rem; }
.cell-duration { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
.text-error { color: var(--color-danger); }
.cell-duration { color: var(--fs-text-tertiary); font-size: 0.8rem; white-space: nowrap; }
.text-error { color: var(--fs-error); }
/* Bare by design, like LogsView's twin of this: a `<tr>` has nothing to style
that its cells don't carry (#2444). */
.detail-row td { padding: 0 0.75rem 0.75rem; border-bottom: 1px solid var(--color-border); }
.detail-ip { font-family: monospace; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.detail-row td { padding: 0 0.75rem 0.75rem; border-bottom: 1px solid var(--fs-border-color); }
.detail-ip { font-family: monospace; font-size: 0.8rem; color: var(--fs-text-tertiary); margin-bottom: 0.4rem; }
.detail-json {
margin: 0; padding: 0.75rem;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); font-size: 0.8rem;
background: var(--fs-surface-page); border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm); font-size: 0.8rem;
overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 300px;
}
.category-badge {
display: inline-block;
font-size: 0.65rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 0.1rem 0.35rem; border-radius: var(--radius-sm);
padding: 0.1rem 0.35rem; border-radius: var(--fs-radius-sm);
}
.cat-audit { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
.cat-usage { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, transparent); }
.cat-error { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 15%, transparent); }
.cat-audit { color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }
.cat-usage { color: var(--fs-success); background: color-mix(in srgb, var(--fs-success) 15%, transparent); }
.cat-error { color: var(--fs-error); background: color-mix(in srgb, var(--fs-error) 15%, transparent); }
.method-tag {
display: inline-block;
font-size: 0.65rem; font-weight: 500; font-family: monospace;
padding: 0.05rem 0.25rem; border-radius: 3px;
background: var(--color-bg-secondary); color: var(--color-text-muted);
background: var(--fs-surface-raised); color: var(--fs-text-tertiary);
margin-right: 0.25rem;
}
@@ -2968,7 +2968,7 @@ function formatUserDate(iso: string): string {
.version-line {
margin: 0;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
display: flex;
align-items: center;
gap: 0.6rem;
@@ -2977,10 +2977,10 @@ function formatUserDate(iso: string): string {
font-family: ui-monospace, monospace;
font-size: 0.8rem;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-primary);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-accent);
border-radius: 4px;
color: var(--color-primary);
color: var(--fs-accent);
}
/* ── Groups tab ──────────────────────────────────────────────── */
@@ -2989,16 +2989,16 @@ function formatUserDate(iso: string): string {
.input-field {
width: 100%;
padding: 0.4rem 0.6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
font-size: 0.875rem;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
}
.input-field:focus { border-color: var(--color-primary); }
.input-field:focus { border-color: var(--fs-accent); }
.group-create-form {
display: flex;
@@ -3010,7 +3010,7 @@ function formatUserDate(iso: string): string {
.group-create-form .input-field { flex: 1; min-width: 160px; }
.loading-msg, .empty-msg {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.88rem;
padding: 0.5rem 0;
}
@@ -3022,8 +3022,8 @@ function formatUserDate(iso: string): string {
}
.group-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
overflow: hidden;
}
@@ -3032,7 +3032,7 @@ function formatUserDate(iso: string): string {
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.group-card-info {
@@ -3046,16 +3046,16 @@ function formatUserDate(iso: string): string {
.group-name {
font-weight: 500;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
}
.group-meta {
font-size: 0.78rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
white-space: nowrap;
}
.group-desc {
font-size: 0.82rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -3078,8 +3078,8 @@ function formatUserDate(iso: string): string {
top: 100%;
left: 0;
right: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
background: var(--fs-surface-hover);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
margin-top: 2px;
list-style: none;
@@ -3098,16 +3098,16 @@ function formatUserDate(iso: string): string {
cursor: pointer;
transition: background 0.1s;
}
.member-result-item:hover { background: var(--color-hover); }
.member-result-item:hover { background: var(--fs-surface-hover); }
.member-result-name { font-weight: 500; font-size: 0.85rem; }
.member-result-email { color: var(--color-text-muted); font-size: 0.78rem; }
.member-result-email { color: var(--fs-text-tertiary); font-size: 0.78rem; }
.role-select {
padding: 0.4rem 0.5rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
background: var(--color-surface);
color: var(--color-text);
background: var(--fs-surface-hover);
color: var(--fs-text-primary);
font-size: 0.85rem;
cursor: pointer;
font-family: inherit;
@@ -3128,10 +3128,10 @@ function formatUserDate(iso: string): string {
gap: 0.5rem;
padding: 0.4rem 0.5rem;
border-radius: 6px;
background: var(--color-hover);
background: var(--fs-surface-hover);
}
.member-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--color-text); }
.member-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--fs-text-primary); }
.member-role-badge {
font-size: 0.7rem;
@@ -3141,11 +3141,11 @@ function formatUserDate(iso: string): string {
padding: 0.15rem 0.4rem;
border-radius: 4px;
}
.role-owner { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.role-member { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
.role-owner { background: color-mix(in srgb, var(--fs-warning) 15%, transparent); color: var(--fs-warning); }
.role-member { background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent); color: var(--fs-text-tertiary); }
.members-empty {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.82rem;
padding: 0.25rem 0.5rem;
}
@@ -3160,23 +3160,23 @@ function formatUserDate(iso: string): string {
font-size: 0.78rem;
margin: 0.2rem 0 0;
}
.geo-ok { color: var(--color-success); }
.geo-error { color: var(--color-danger); }
.geo-pending { color: var(--color-text-muted); }
.geo-ok { color: var(--fs-success); }
.geo-error { color: var(--fs-error); }
.geo-pending { color: var(--fs-text-tertiary); }
.unit-toggle {
display: flex;
gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
overflow: hidden;
width: fit-content;
margin-top: 0.25rem;
}
.unit-btn {
padding: 0.4rem 1rem;
background: var(--color-bg-card);
color: var(--color-text-muted);
background: var(--fs-surface-raised);
color: var(--fs-text-tertiary);
font-size: 0.85rem;
cursor: pointer;
border: none;
@@ -3184,14 +3184,14 @@ function formatUserDate(iso: string): string {
transition: background 0.15s, color 0.15s;
}
.unit-btn:not(:last-child) {
border-right: 1px solid var(--color-border);
border-right: 1px solid var(--fs-border-color);
}
.unit-btn.active {
background: var(--color-action-primary);
background: var(--fs-action-primary);
color: var(--fs-text-on-action);
}
.unit-btn:hover:not(.active) {
color: var(--color-text);
color: var(--fs-text-primary);
}
.checkbox-label {
@@ -3216,7 +3216,7 @@ function formatUserDate(iso: string): string {
}
.time-sep {
font-size: 1.1rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.time-sep--quiet { font-size: 0.9rem; }
@@ -3239,9 +3239,9 @@ function formatUserDate(iso: string): string {
cursor: pointer;
}
.api-key-reveal {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover));
border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent);
border-radius: var(--fs-radius-lg);
padding: 1rem;
margin-bottom: 1.5rem;
}
@@ -3253,9 +3253,9 @@ function formatUserDate(iso: string): string {
}
.api-key-value {
flex: 1;
background: var(--color-surface-2);
background: var(--fs-surface-hover);
padding: 0.4rem 0.6rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
font-size: 0.85rem;
word-break: break-all;
}
@@ -3267,7 +3267,7 @@ function formatUserDate(iso: string): string {
.api-keys-table th, .api-keys-table td {
text-align: left;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
font-size: 0.9rem;
}
.api-keys-table th { font-weight: 500; opacity: 0.7; }
@@ -3292,8 +3292,8 @@ function formatUserDate(iso: string): string {
align-items: center;
gap: 1rem;
padding: 0.65rem 0.9rem;
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
background: color-mix(in srgb, var(--fs-accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--fs-accent) 25%, transparent);
border-radius: 8px;
}
.mcp-pkg-name { font-family: monospace; font-size: 0.9rem; flex: 1; }
@@ -3303,8 +3303,8 @@ function formatUserDate(iso: string): string {
.mcp-code {
margin-top: 0.4rem;
padding: 0.55rem 0.75rem;
background: color-mix(in srgb, var(--color-text) 6%, transparent);
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--fs-text-primary) 6%, transparent);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
font-size: 0.82rem;
font-family: monospace;
@@ -3317,23 +3317,23 @@ function formatUserDate(iso: string): string {
display: flex;
gap: 0.25rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.mcp-client-tab {
background: transparent;
border: none;
padding: 0.5rem 0.9rem;
font-size: 0.85rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.mcp-client-tab:hover { color: var(--color-text); }
.mcp-client-tab:hover { color: var(--fs-text-primary); }
.mcp-client-tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
color: var(--fs-accent);
border-bottom-color: var(--fs-accent);
font-weight: 500;
}
.mcp-url-block { margin-top: 0.25rem; }
@@ -3371,7 +3371,7 @@ function formatUserDate(iso: string): string {
.mcp-code-row .btn-sm { white-space: nowrap; }
.mcp-advanced {
margin-top: 1.25rem;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
padding-top: 0.75rem;
}
.mcp-advanced summary {
@@ -3428,7 +3428,7 @@ function formatUserDate(iso: string): string {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
max-height: 480px;
overflow-y: auto;
}
@@ -3438,19 +3438,19 @@ function formatUserDate(iso: string): string {
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 0.25rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.voice-library-meta {
min-width: 0;
flex: 1;
}
.voice-library-id {
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 0.9rem;
font-weight: 500;
}
.voice-library-sub {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.8rem;
margin-top: 0.15rem;
}
@@ -3462,7 +3462,7 @@ function formatUserDate(iso: string): string {
}
.voice-library-empty {
padding: 1rem 0;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
text-align: center;
font-style: italic;
}
@@ -3475,9 +3475,9 @@ function formatUserDate(iso: string): string {
letter-spacing: 0.04em;
}
.voice-badge--bundled {
background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--fs-text-tertiary) 10%, transparent);
color: var(--fs-text-tertiary);
border: 1px solid var(--fs-border-color);
}
.status-badge {
font-size: 0.75rem;
@@ -3486,14 +3486,14 @@ function formatUserDate(iso: string): string {
border-radius: 999px;
}
.status-on {
background: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--color-success);
border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
background: color-mix(in srgb, var(--fs-success) 15%, transparent);
color: var(--fs-success);
border: 1px solid color-mix(in srgb, var(--fs-success) 40%, transparent);
}
.status-off {
background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--fs-text-tertiary) 10%, transparent);
color: var(--fs-text-tertiary);
border: 1px solid var(--fs-border-color);
}
.radio-group {
display: flex;
@@ -3513,7 +3513,7 @@ function formatUserDate(iso: string): string {
.range-input {
width: 100%;
max-width: 360px;
accent-color: var(--color-primary);
accent-color: var(--fs-accent);
margin: 0.35rem 0 0.2rem;
}
.range-labels {
@@ -3521,7 +3521,7 @@ function formatUserDate(iso: string): string {
justify-content: space-between;
max-width: 360px;
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.form-actions {
margin-top: 1rem;
@@ -3539,7 +3539,7 @@ function formatUserDate(iso: string): string {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-text-muted);
background: var(--fs-text-tertiary);
animation: va-dot-bounce 1.2s ease-in-out infinite;
}
.voice-admin-spinner span:nth-child(2) { animation-delay: 0.2s; }
@@ -3553,9 +3553,9 @@ function formatUserDate(iso: string): string {
margin-bottom: 0.5rem;
}
.blend-slot {
background: color-mix(in srgb, var(--color-surface) 60%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--fs-surface-hover) 60%, transparent);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
@@ -3577,7 +3577,7 @@ function formatUserDate(iso: string): string {
font-variant-numeric: tabular-nums;
min-width: 2.5rem;
text-align: right;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.blend-actions {
margin-top: 0.25rem;
@@ -3599,37 +3599,37 @@ function formatUserDate(iso: string): string {
}
.day-btn {
padding: 0.3rem 0.65rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 6px;
background: var(--color-bg-card);
color: var(--color-text-muted);
background: var(--fs-surface-raised);
color: var(--fs-text-tertiary);
font-size: 0.82rem;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.day-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.day-btn:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
.day-btn.active {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
border-color: var(--color-primary);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
border-color: var(--fs-accent);
color: var(--fs-accent);
font-weight: 500;
}
.learned-summary {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-left: 3px solid var(--fs-accent);
border-radius: 8px;
padding: 0.85rem 1rem;
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-text);
color: var(--fs-text-primary);
white-space: pre-wrap;
margin-bottom: 0.75rem;
}
.learned-empty {
font-size: 0.85rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin-bottom: 0.75rem;
}
</style>
frontend/src/views/SharedWithMeView.vue
+20 -20
View File
@@ -106,11 +106,11 @@ onMounted(async () => {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
color: var(--fs-text-primary);
}
.loading-state {
color: var(--color-muted);
color: var(--fs-text-tertiary);
padding: 2rem;
text-align: center;
}
@@ -124,7 +124,7 @@ onMounted(async () => {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-muted);
color: var(--fs-text-tertiary);
margin: 0 0 0.75rem;
}
@@ -136,9 +136,9 @@ onMounted(async () => {
.shared-card {
display: flex;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--fs-surface-hover);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-xl);
overflow: hidden;
text-decoration: none;
transition: box-shadow 0.15s, transform 0.15s;
@@ -151,7 +151,7 @@ onMounted(async () => {
.card-color-bar {
width: 4px;
flex-shrink: 0;
background: var(--color-border);
background: var(--fs-border-color);
}
.card-body {
@@ -163,7 +163,7 @@ onMounted(async () => {
.card-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text);
color: var(--fs-text-primary);
margin-bottom: 0.3rem;
white-space: nowrap;
overflow: hidden;
@@ -179,12 +179,12 @@ onMounted(async () => {
.card-owner {
font-size: 0.78rem;
color: var(--color-muted);
color: var(--fs-text-tertiary);
}
.card-desc {
font-size: 0.82rem;
color: var(--color-muted);
color: var(--fs-text-tertiary);
margin: 0;
overflow: hidden;
display: -webkit-box;
@@ -203,25 +203,25 @@ onMounted(async () => {
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.9rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
background: var(--fs-surface-hover);
border: 1px solid var(--fs-border-color);
border-radius: 8px;
text-decoration: none;
transition: background 0.1s;
}
.shared-row:hover {
background: var(--color-hover);
background: var(--fs-surface-hover);
}
.row-icon {
font-size: 0.9rem;
flex-shrink: 0;
color: var(--color-muted);
color: var(--fs-text-tertiary);
}
.row-title {
flex: 1;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
@@ -229,7 +229,7 @@ onMounted(async () => {
}
.row-owner {
font-size: 0.78rem;
color: var(--color-muted);
color: var(--fs-text-tertiary);
white-space: nowrap;
}
@@ -242,12 +242,12 @@ onMounted(async () => {
border-radius: 4px;
white-space: nowrap;
}
.perm-viewer { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
.perm-editor { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.perm-admin { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.perm-viewer { background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent); color: var(--fs-text-tertiary); }
.perm-editor { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: var(--fs-accent); }
.perm-admin { background: color-mix(in srgb, var(--fs-warning) 15%, transparent); color: var(--fs-warning); }
.empty-msg {
color: var(--color-muted);
color: var(--fs-text-tertiary);
font-size: 0.88rem;
margin: 0;
padding: 1rem 0;
frontend/src/views/SnippetDetailView.vue
+33 -33
View File
@@ -205,7 +205,7 @@ async function confirmDelete() {
.snippet-detail {
max-width: 820px;
margin: 2rem auto;
padding: 0 var(--page-padding-x);
padding: 0 var(--fs-layout-page-pad);
overflow-x: clip;
}
@@ -213,20 +213,20 @@ async function confirmDelete() {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-decoration: none;
}
.back-link:hover {
color: var(--color-primary);
color: var(--fs-accent);
}
.state-msg {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.9rem;
margin-top: 1rem;
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin-top: 1rem;
}
@@ -239,7 +239,7 @@ async function confirmDelete() {
}
.snippet-name {
margin: 0;
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 1.4rem;
word-break: break-word;
}
@@ -253,7 +253,7 @@ async function confirmDelete() {
.when-to-use {
margin: 0.75rem 0 1.25rem;
font-size: 1rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
line-height: 1.55;
}
@@ -262,12 +262,12 @@ async function confirmDelete() {
.shared-notice {
margin: 0.75rem 0 0;
padding: 0.6rem 0.85rem;
border-left: 3px solid var(--color-text-muted);
border-left: 3px solid var(--fs-text-tertiary);
border-radius: 6px;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
font-size: 0.85rem;
line-height: 1.5;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.meta-grid {
@@ -280,23 +280,23 @@ async function confirmDelete() {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding-top: 0.15rem;
}
.meta-grid dd {
margin: 0;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
min-width: 0;
}
.meta-grid code,
.tag-row + * code {
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 0.82rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
color: var(--fs-accent);
padding: 0.08rem 0.35rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
word-break: break-all;
}
.location-list {
@@ -317,7 +317,7 @@ async function confirmDelete() {
align-items: baseline;
}
.merged-hint {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.8rem;
}
.merged-entry {
@@ -328,15 +328,15 @@ async function confirmDelete() {
.unmerge-btn {
font-size: 0.72rem;
padding: 0.05rem 0.35rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 4px;
background: transparent;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
cursor: pointer;
}
.unmerge-btn:hover:not(:disabled) {
color: var(--color-text);
border-color: var(--color-text-muted);
color: var(--fs-text-primary);
border-color: var(--fs-text-tertiary);
}
.unmerge-btn:disabled {
opacity: 0.6;
@@ -344,30 +344,30 @@ async function confirmDelete() {
}
.unmerge-na {
font-size: 0.72rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
/* Cursor cues that the explanation is in the tooltip. */
cursor: help;
}
.code-block {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
overflow: hidden;
background: var(--color-bg);
background: var(--fs-surface-page);
}
.code-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.5rem 0.4rem 0.85rem;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--fs-border-color);
background: var(--fs-surface-raised);
}
.code-lang {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.btn-copy {
padding: 0.2rem 0.65rem;
@@ -379,10 +379,10 @@ async function confirmDelete() {
overflow-x: auto;
}
.code-block code {
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 0.85rem;
line-height: 1.6;
color: var(--color-text);
color: var(--fs-text-primary);
white-space: pre;
}
@@ -396,9 +396,9 @@ async function confirmDelete() {
font-size: 0.72rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
color: var(--fs-text-secondary);
border: 1px solid var(--fs-border-color);
}
@media (max-width: 600px) {
frontend/src/views/SnippetEditorView.vue
+37 -37
View File
@@ -365,7 +365,7 @@ function cancel() {
.snippet-editor {
max-width: 760px;
margin: 2rem auto;
padding: 0 var(--page-padding-x);
padding: 0 var(--fs-layout-page-pad);
overflow-x: clip;
}
.snippet-editor h1 {
@@ -376,19 +376,19 @@ function cancel() {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-decoration: none;
}
.back-link:hover {
color: var(--color-primary);
color: var(--fs-accent);
}
.state-msg {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.9rem;
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
}
@@ -415,27 +415,27 @@ function cancel() {
.location-set legend {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
}
.required {
color: var(--color-danger);
color: var(--fs-error);
}
.hint {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0.1rem 0 0;
}
.hint-inline {
font-weight: 400;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.input {
padding: 0.5rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
@@ -443,11 +443,11 @@ function cancel() {
}
.input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
border-color: var(--fs-accent);
box-shadow: var(--fs-focus-ring);
}
.mono {
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
}
.code-area {
resize: vertical;
@@ -459,8 +459,8 @@ function cancel() {
}
.location-set {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 0.85rem 1rem 1rem;
margin: 0;
}
@@ -477,32 +477,32 @@ function cancel() {
.loc-remove {
width: 2rem;
height: 2rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
background: transparent;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
color: var(--fs-text-tertiary);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
}
.loc-remove:hover {
border-color: var(--color-danger);
color: var(--color-danger);
border-color: var(--fs-error);
color: var(--fs-error);
}
.loc-add {
margin-top: 0.15rem;
padding: 0.35rem 0.7rem;
border: 1px dashed var(--color-border);
border: 1px dashed var(--fs-border-color);
background: transparent;
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
color: var(--fs-text-secondary);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-size: 0.82rem;
font-family: inherit;
}
.loc-add:hover {
border-color: var(--color-primary);
color: var(--color-primary);
border-color: var(--fs-accent);
color: var(--fs-accent);
}
@media (max-width: 600px) {
@@ -514,7 +514,7 @@ function cancel() {
.field-label {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
}
.systems {
display: flex;
@@ -528,11 +528,11 @@ function cancel() {
align-items: center;
gap: 0.45rem;
font-size: 0.85rem;
color: var(--color-text);
color: var(--fs-text-primary);
cursor: pointer;
}
.system-opt input {
accent-color: var(--color-primary);
accent-color: var(--fs-accent);
cursor: pointer;
}
@@ -541,25 +541,25 @@ function cancel() {
flex-direction: column;
gap: 0.4rem;
padding: 0.85rem 1rem;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-warning);
border: 1px solid var(--fs-border-color);
border-left: 3px solid var(--fs-warning);
border-radius: 8px;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.duplicate-title {
margin: 0;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
}
.duplicate-body {
margin: 0;
font-size: 0.8rem;
line-height: 1.5;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.duplicate-body a {
color: var(--color-primary);
color: var(--fs-accent);
}
.duplicate-actions {
display: flex;
frontend/src/views/SnippetListView.vue
+85 -85
View File
@@ -519,9 +519,9 @@ function usageTitle(s: SnippetListItem): string {
<style scoped>
.snippets-list {
max-width: var(--page-max-width);
max-width: var(--fs-layout-page-max);
margin: 2rem auto;
padding: 0 var(--page-padding-x);
padding: 0 var(--fs-layout-page-pad);
overflow-x: clip;
}
@@ -536,7 +536,7 @@ function usageTitle(s: SnippetListItem): string {
}
.page-sub {
margin: 0 0 1.25rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.9rem;
line-height: 1.5;
max-width: 60ch;
@@ -553,8 +553,8 @@ function usageTitle(s: SnippetListItem): string {
}
/* Filter is engaged — the accent marks "you are here", per the design system. */
.filter-on {
border-color: var(--color-primary);
color: var(--color-primary);
border-color: var(--fs-accent);
color: var(--fs-accent);
}
.location-row {
@@ -569,12 +569,12 @@ function usageTitle(s: SnippetListItem): string {
min-width: 0;
max-width: 12rem;
padding: 0.4rem 0.65rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.85rem;
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
box-sizing: border-box;
}
.loc-input-wide {
@@ -583,46 +583,46 @@ function usageTitle(s: SnippetListItem): string {
}
.loc-input::placeholder {
font-family: inherit;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.loc-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
border-color: var(--fs-accent);
box-shadow: var(--fs-focus-ring);
}
.loc-clear {
padding: 0.4rem 0.65rem;
border: none;
background: transparent;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
text-decoration: underline;
}
.loc-clear:hover {
color: var(--color-text);
color: var(--fs-text-primary);
}
.search-input {
width: 100%;
max-width: 420px;
padding: 0.5rem 0.8rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
}
.search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
border-color: var(--fs-accent);
box-shadow: var(--fs-focus-ring);
}
.error-msg {
color: var(--color-danger);
color: var(--fs-error);
font-size: 0.9rem;
margin-top: 1rem;
}
@@ -630,10 +630,10 @@ function usageTitle(s: SnippetListItem): string {
.empty-state-rich {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.empty-icon {
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 2rem;
margin-bottom: 0.75rem;
opacity: 0.35;
@@ -641,7 +641,7 @@ function usageTitle(s: SnippetListItem): string {
.empty-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 0 0 0.35rem;
}
.empty-sub {
@@ -654,16 +654,16 @@ function usageTitle(s: SnippetListItem): string {
.empty-action {
display: inline-block;
padding: 0.4rem 1rem;
border: 1px solid var(--color-action-primary);
border-radius: var(--radius-sm);
color: var(--color-action-primary);
border: 1px solid var(--fs-action-primary);
border-radius: var(--fs-radius-sm);
color: var(--fs-action-primary);
background: none;
cursor: pointer;
font-size: 0.85rem;
transition: background 0.15s, color 0.15s;
}
.empty-action:hover {
background: var(--color-action-primary);
background: var(--fs-action-primary);
color: var(--fs-text-on-action);
}
@@ -675,8 +675,8 @@ function usageTitle(s: SnippetListItem): string {
}
.skeleton-card {
height: 96px;
border-radius: var(--radius-md);
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
border-radius: var(--fs-radius-lg);
background: linear-gradient(90deg, var(--fs-surface-raised) 25%, var(--fs-border-color) 50%, var(--fs-surface-raised) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@@ -686,9 +686,9 @@ function usageTitle(s: SnippetListItem): string {
}
.snippet-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 0.9rem 1rem;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s ease;
@@ -697,14 +697,14 @@ function usageTitle(s: SnippetListItem): string {
gap: 0.4rem;
}
.snippet-card:hover {
border-color: var(--color-primary);
border-color: var(--fs-accent);
box-shadow: 0 2px 8px var(--color-shadow);
transform: translateY(-2px);
}
.snippet-card:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
border-color: var(--fs-accent);
box-shadow: var(--fs-focus-ring);
}
.card-header {
@@ -716,11 +716,11 @@ function usageTitle(s: SnippetListItem): string {
.snippet-name {
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text);
color: var(--fs-text-primary);
min-width: 0;
flex: 1;
word-break: break-word;
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
}
/* Language tag — accent pill per the design system's tag treatment. */
@@ -731,13 +731,13 @@ function usageTitle(s: SnippetListItem): string {
border-radius: 999px;
flex-shrink: 0;
white-space: nowrap;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
}
.snippet-when {
font-size: 0.83rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
margin: 0;
line-height: 1.45;
}
@@ -751,7 +751,7 @@ function usageTitle(s: SnippetListItem): string {
}
.meta-date {
font-size: 0.73rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
/* Marks a record someone else owns. Present only on shared rows, so an
unmarked card is unambiguously the operator's own. */
@@ -760,24 +760,24 @@ function usageTitle(s: SnippetListItem): string {
padding: 0.1rem 0.4rem;
border-radius: 4px;
white-space: nowrap;
background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
color: var(--fs-text-tertiary);
}
/* Near-duplicate report */
.dup-panel {
margin-bottom: 1.25rem;
padding: 0.85rem 1rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 8px;
background: var(--color-surface-alt);
background: var(--fs-surface-hover);
}
.dup-empty,
.dup-head {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.dup-empty {
@@ -790,7 +790,7 @@ function usageTitle(s: SnippetListItem): string {
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.5rem 0;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
}
.dup-members {
@@ -805,14 +805,14 @@ function usageTitle(s: SnippetListItem): string {
font-size: 0.8rem;
padding: 0.1rem 0.45rem;
border-radius: 4px;
background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
/* Long snippet names must not push the row into a horizontal scroll. */
overflow-wrap: anywhere;
}
.dup-score {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@@ -828,8 +828,8 @@ function usageTitle(s: SnippetListItem): string {
padding: 0.1rem 0.4rem;
border-radius: 4px;
white-space: nowrap;
background: color-mix(in srgb, var(--color-danger) 15%, transparent);
color: var(--color-danger);
background: color-mix(in srgb, var(--fs-error) 15%, transparent);
color: var(--fs-error);
}
.usage-tag {
@@ -838,15 +838,15 @@ function usageTitle(s: SnippetListItem): string {
border-radius: 4px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
color: var(--fs-text-tertiary);
}
/* Dead weight is a nudge, not an error — it warns in the warning colour rather
than the danger one, because the record isn't broken, just unearned. */
.usage-tag.usage-dead {
background: color-mix(in srgb, var(--color-warning) 18%, transparent);
color: var(--color-warning);
background: color-mix(in srgb, var(--fs-warning) 18%, transparent);
color: var(--fs-warning);
}
/* Header + select-mode */
@@ -858,7 +858,7 @@ function usageTitle(s: SnippetListItem): string {
/* Selected card = 2px accent border per the design system (featured/active). */
.snippet-card.selected {
border-color: var(--color-primary);
border-color: var(--fs-accent);
border-width: 2px;
padding: calc(0.9rem - 1px) calc(1rem - 1px);
}
@@ -867,14 +867,14 @@ function usageTitle(s: SnippetListItem): string {
height: 16px;
flex-shrink: 0;
margin-top: 0.15rem;
border: 1px solid var(--color-border);
border: 1px solid var(--fs-border-color);
border-radius: 4px;
background: transparent;
transition: background 0.12s, border-color 0.12s;
}
.select-box.on {
background: var(--color-primary);
border-color: var(--color-primary);
background: var(--fs-accent);
border-color: var(--fs-accent);
}
.select-bar {
@@ -885,19 +885,19 @@ function usageTitle(s: SnippetListItem): string {
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.9rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
box-shadow: 0 4px 16px var(--color-shadow);
}
.select-count {
font-weight: 500;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
}
.select-hint {
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
flex: 1;
min-width: 0;
}
@@ -906,16 +906,16 @@ function usageTitle(s: SnippetListItem): string {
.modal-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
background: var(--fs-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.modal-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.5rem;
width: 100%;
max-width: 460px;
@@ -931,7 +931,7 @@ function usageTitle(s: SnippetListItem): string {
.modal-desc {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
line-height: 1.5;
}
.merge-choices {
@@ -944,18 +944,18 @@ function usageTitle(s: SnippetListItem): string {
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
cursor: pointer;
}
.merge-choice.chosen {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border-color: var(--fs-accent);
background: color-mix(in srgb, var(--fs-accent) 8%, transparent);
}
.merge-choice-name {
flex: 1;
min-width: 0;
font-family: var(--font-mono);
font-family: var(--fs-font-mono);
font-size: 0.85rem;
word-break: break-word;
}
@@ -963,7 +963,7 @@ function usageTitle(s: SnippetListItem): string {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
flex-shrink: 0;
}
.modal-actions {
@@ -973,24 +973,24 @@ function usageTitle(s: SnippetListItem): string {
}
.modal-btn {
padding: 0.4rem 0.9rem;
border: 1px solid var(--color-border);
background: var(--color-bg-secondary);
color: var(--color-text);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
background: var(--fs-surface-raised);
color: var(--fs-text-primary);
border-radius: var(--fs-radius-sm);
cursor: pointer;
font-size: 0.875rem;
font-family: inherit;
}
.modal-btn:hover {
background: var(--color-bg);
background: var(--fs-surface-page);
}
.modal-btn-primary {
background: var(--color-action-primary);
border-color: var(--color-action-primary);
background: var(--fs-action-primary);
border-color: var(--fs-action-primary);
color: var(--fs-text-on-action);
}
.modal-btn-primary:hover:not(:disabled) {
background: var(--color-action-primary-hover);
background: var(--fs-action-primary-hover);
}
.modal-btn-primary:disabled {
opacity: 0.5;
frontend/src/views/TaskEditorView.vue
+40 -40
View File
@@ -830,7 +830,7 @@ useEditorGuards(dirty, save);
gap: 0.75rem;
flex-wrap: wrap;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
/* .task-main is a flex column; without flex-shrink: 0, long body content
@@ -852,7 +852,7 @@ useEditorGuards(dirty, save);
.task-sidebar {
width: 280px;
flex-shrink: 0;
border-left: 1px solid var(--color-border);
border-left: 1px solid var(--fs-border-color);
overflow-y: auto;
display: flex;
flex-direction: column;
@@ -866,21 +866,21 @@ useEditorGuards(dirty, save);
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 1.1rem;
line-height: 1;
padding: 0 0.2rem;
flex-shrink: 0;
}
.btn-clear-parent:hover { color: var(--color-danger); }
.btn-clear-parent:hover { color: var(--fs-error); }
.parent-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
box-shadow: 0 4px 12px var(--color-shadow);
z-index: 50;
max-height: 200px;
@@ -890,21 +890,21 @@ useEditorGuards(dirty, save);
padding: 0.4rem 0.65rem;
font-size: 0.85rem;
cursor: pointer;
color: var(--color-text);
color: var(--fs-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.parent-dropdown-item:hover { background: var(--color-bg-secondary); }
.parent-empty { color: var(--color-text-muted); cursor: default; }
.parent-dropdown-item:hover { background: var(--fs-surface-raised); }
.parent-empty { color: var(--fs-text-tertiary); cursor: default; }
.parent-empty:hover { background: none; }
/* Sub-tasks */
.subtasks-section {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
padding: 0.5rem 0.65rem;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.subtasks-header {
display: flex;
@@ -915,23 +915,23 @@ useEditorGuards(dirty, save);
.subtasks-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.subtask-checkbox { flex-shrink: 0; cursor: pointer; }
.subtask-title {
font-size: 0.83rem;
color: var(--color-text);
color: var(--fs-text-primary);
text-decoration: none;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subtask-title:hover { color: var(--color-primary); }
.subtask-title.done { text-decoration: line-through; color: var(--color-text-muted); }
.subtasks-empty { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }
.subtask-title:hover { color: var(--fs-accent); }
.subtask-title.done { text-decoration: line-through; color: var(--fs-text-tertiary); }
.subtasks-empty { font-size: 0.78rem; color: var(--fs-text-tertiary); margin: 0; }
.subtask-add-row {
display: flex;
align-items: center;
@@ -941,19 +941,19 @@ useEditorGuards(dirty, save);
.subtask-input {
flex: 1;
padding: 0.25rem 0.4rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.83rem;
font-family: inherit;
}
.subtask-input:focus { outline: none; border-color: var(--color-primary); }
.subtask-input:focus { outline: none; border-color: var(--fs-accent); }
.stream-preview {
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
padding: 0.75rem;
background: var(--color-bg-card);
background: var(--fs-surface-raised);
min-height: 200px;
}
.main-diff {
@@ -963,9 +963,9 @@ useEditorGuards(dirty, save);
/* Systems multi-select (in sidebar) */
.sb-systems { display: flex; flex-direction: column; gap: 0.25rem; max-height: 160px; overflow-y: auto; }
.sb-system-opt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--color-text); cursor: pointer; }
.sb-system-opt input { accent-color: var(--color-primary); cursor: pointer; }
.sb-systems-empty { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.sb-system-opt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--fs-text-primary); cursor: pointer; }
.sb-system-opt input { accent-color: var(--fs-accent); cursor: pointer; }
.sb-systems-empty { margin: 0; font-size: 0.8rem; color: var(--fs-text-tertiary); }
/* Writing Assistant section (in sidebar) */
.assist-section {
@@ -976,7 +976,7 @@ useEditorGuards(dirty, save);
.assist-section-title {
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -1007,11 +1007,11 @@ useEditorGuards(dirty, save);
font-size: 0.75rem;
}
.sb-ts-label {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
flex-shrink: 0;
}
.sb-ts-value {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
text-align: right;
}
@@ -1022,7 +1022,7 @@ useEditorGuards(dirty, save);
.task-sidebar {
width: 100%;
border-left: none;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
overflow-y: visible;
}
}
@@ -1035,13 +1035,13 @@ useEditorGuards(dirty, save);
margin: 0.5rem 0 0.25rem;
}
.task-goal-label {
font-family: var(--font-display);
font-family: var(--fs-font-display);
font-style: italic;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.task-goal-input {
width: 100%;
@@ -1051,14 +1051,14 @@ useEditorGuards(dirty, save);
font: inherit;
font-size: 0.95rem;
line-height: 1.4;
color: var(--color-text);
background: var(--color-input-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--fs-text-primary);
background: var(--fs-surface-page);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
}
.task-goal-input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
</style>
frontend/src/views/TaskViewerView.vue
+42 -42
View File
@@ -475,7 +475,7 @@ const subTaskProgress = computed(() => {
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.83rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0 0 0.75rem;
}
.meta-item {
@@ -494,10 +494,10 @@ const subTaskProgress = computed(() => {
}
.due-date {
font-size: 0.85rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.due-date.overdue {
color: var(--color-overdue);
color: var(--fs-overdue);
font-weight: 500;
}
.task-meta-row {
@@ -508,10 +508,10 @@ const subTaskProgress = computed(() => {
}
.task-meta-item {
font-size: 0.78rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.task-meta-recurrence {
color: var(--color-primary);
color: var(--fs-accent);
font-weight: 500;
}
.tags {
@@ -524,7 +524,7 @@ const subTaskProgress = computed(() => {
/* Sub-tasks */
.subtasks {
margin-top: 2rem;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
padding-top: 1rem;
}
.subtasks-header {
@@ -540,21 +540,21 @@ const subTaskProgress = computed(() => {
}
.subtasks-progress {
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.subtasks-pct {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.subtasks-track {
height: 4px;
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
border-radius: 2px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.subtasks-fill {
height: 100%;
background: var(--color-status-done);
background: var(--fs-status-done);
border-radius: 2px;
transition: width 0.3s ease;
}
@@ -571,10 +571,10 @@ const subTaskProgress = computed(() => {
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
}
.subtask-row:hover {
background: var(--color-bg-secondary);
background: var(--fs-surface-raised);
}
.sub-dot {
flex-shrink: 0;
@@ -592,21 +592,21 @@ const subTaskProgress = computed(() => {
}
.dot-todo {
background: transparent;
border: 2px solid var(--color-text-muted);
border: 2px solid var(--fs-text-tertiary);
}
.dot-in-progress {
background: var(--color-status-in-progress);
background: var(--fs-status-in-progress);
}
.dot-done {
background: var(--color-status-done);
background: var(--fs-status-done);
}
.dot-cancelled {
background: var(--color-text-muted);
background: var(--fs-text-tertiary);
}
.sub-title {
flex: 1;
font-size: 0.9rem;
color: var(--color-text);
color: var(--fs-text-primary);
text-decoration: none;
min-width: 0;
overflow: hidden;
@@ -614,21 +614,21 @@ const subTaskProgress = computed(() => {
white-space: nowrap;
}
.sub-title:hover {
color: var(--color-primary);
color: var(--fs-accent);
}
.sub-title.sub-done {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
text-decoration: line-through;
}
.sub-due {
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
flex-shrink: 0;
}
.backlinks {
margin-top: 2.5rem;
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--fs-border-color);
padding-top: 1.25rem;
}
.backlinks-heading {
@@ -639,14 +639,14 @@ const subTaskProgress = computed(() => {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0 0 0.75rem;
}
.backlinks-count {
margin-left: 0.2rem;
font-size: 0.72rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: 999px;
padding: 0 0.4rem;
line-height: 1.4;
@@ -661,18 +661,18 @@ const subTaskProgress = computed(() => {
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-md);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--fs-radius-lg);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
text-decoration: none;
color: var(--color-text);
color: var(--fs-text-primary);
transition: border-color 0.15s, box-shadow 0.15s;
font-size: 0.9rem;
}
.backlink-card:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
border-color: color-mix(in srgb, var(--fs-accent) 50%, transparent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
color: var(--color-primary);
color: var(--fs-accent);
}
.backlink-type-badge {
font-size: 0.68rem;
@@ -684,9 +684,9 @@ const subTaskProgress = computed(() => {
flex-shrink: 0;
}
.badge-note {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
color: var(--fs-accent);
border: 1px solid color-mix(in srgb, var(--fs-accent) 25%, transparent);
}
.badge-task {
background: color-mix(in srgb, #f59e0b 12%, transparent);
@@ -716,12 +716,12 @@ const subTaskProgress = computed(() => {
.skel-meta,
.skel-badges,
.skel-line {
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
var(--color-bg-secondary) 75%
var(--fs-surface-raised) 25%,
color-mix(in srgb, var(--fs-text-tertiary) 18%, var(--fs-surface-raised)) 50%,
var(--fs-surface-raised) 75%
);
background-size: 200% 100%;
animation: skel-shine 1.5s ease infinite;
@@ -733,7 +733,7 @@ const subTaskProgress = computed(() => {
}
.skel-btn { width: 70px; height: 32px; }
.skel-btn--wide { width: 90px; }
.skel-title { height: 2.2rem; width: 65%; border-radius: var(--radius-md); }
.skel-title { height: 2.2rem; width: 65%; border-radius: var(--fs-radius-lg); }
.skel-meta { height: 0.85rem; width: 45%; }
.skel-badges { height: 1.6rem; width: 30%; border-radius: 999px; }
.skel-line { height: 0.9rem; }
@@ -742,26 +742,26 @@ const subTaskProgress = computed(() => {
/* ── Goal block + auto-summary banner ─────────────────────────────────────── */
.task-goal-display {
border-left: 2px solid var(--color-border);
border-left: 2px solid var(--fs-border-color);
padding: 0.4rem 0 0.4rem 0.9rem;
margin: 0.75rem 0 1.25rem;
background: rgba(255, 255, 255, 0.02);
}
.goal-label {
font-family: var(--font-display);
font-family: var(--fs-font-display);
font-style: italic;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
margin: 0 0 0.25rem;
}
.goal-text {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
color: var(--color-text);
color: var(--fs-text-primary);
white-space: pre-wrap;
}
</style>
frontend/src/views/TrashView.vue
+3 -3
View File
@@ -68,7 +68,7 @@ onMounted(() => store.fetchTrash());
.batch-count { opacity: 0.6; font-weight: 400; font-size: 0.9em; margin-left: 0.35rem; }
.batch-meta { font-size: 0.82em; opacity: 0.6; margin-top: 0.25rem; }
.batch-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.batch-actions button { border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; border: 1px solid var(--color-border); background: none; color: inherit; }
.btn-restore:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.btn-purge:hover { border-color: var(--color-action-destructive); color: var(--color-action-destructive); }
.batch-actions button { border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; border: 1px solid var(--fs-border-color); background: none; color: inherit; }
.btn-restore:hover { border-color: var(--fs-action-primary); color: var(--fs-action-primary); }
.btn-purge:hover { border-color: var(--fs-action-destructive); color: var(--fs-action-destructive); }
</style>
frontend/src/views/UserManagementView.vue
+29 -29
View File
@@ -297,9 +297,9 @@ function formatDate(iso: string): string {
margin: 0 0 1.5rem;
}
.settings-section {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--fs-surface-raised);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-lg);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
@@ -317,16 +317,16 @@ function formatDate(iso: string): string {
.invite-input {
flex: 1;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
font-size: 0.95rem;
background: var(--color-bg);
color: var(--color-text);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
box-sizing: border-box;
}
.invite-input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--fs-accent);
}
.invite-list {
margin-top: 1rem;
@@ -334,7 +334,7 @@ function formatDate(iso: string): string {
.invite-list h3 {
margin: 0 0 0.5rem;
font-size: 0.95rem;
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
/* Registration toggle */
@@ -352,33 +352,33 @@ function formatDate(iso: string): string {
font-size: 0.95rem;
}
.text-success {
color: var(--color-success);
color: var(--fs-success);
}
.text-muted {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
.field-hint {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
/* The one genuine override: 'close registration' must NOT read as the
primary action it sits on. Scoped, so it beats the shared variant. */
.btn-toggle-close {
background: var(--color-bg-secondary);
color: var(--color-text);
border: 1px solid var(--color-border);
background: var(--fs-surface-raised);
color: var(--fs-text-primary);
border: 1px solid var(--fs-border-color);
}
.btn-toggle-close:hover:not(:disabled) {
border-color: var(--color-warning);
color: var(--color-warning);
border-color: var(--fs-warning);
color: var(--fs-warning);
}
/* Users table */
.loading-msg,
.empty-msg {
text-align: center;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.9rem;
padding: 1rem 0;
}
@@ -392,13 +392,13 @@ function formatDate(iso: string): string {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
}
.users-table td {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--fs-border-color);
font-size: 0.9rem;
}
.users-table tbody tr:last-child td {
@@ -408,10 +408,10 @@ function formatDate(iso: string): string {
font-weight: 600;
}
.cell-email {
color: var(--color-text-secondary);
color: var(--fs-text-secondary);
}
.cell-date {
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
font-size: 0.85rem;
}
.cell-actions {
@@ -426,21 +426,21 @@ function formatDate(iso: string): string {
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
border-radius: var(--fs-radius-sm);
}
.role-admin {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--fs-accent);
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
}
.role-user {
color: var(--color-text-muted);
background: var(--color-bg-secondary);
color: var(--fs-text-tertiary);
background: var(--fs-surface-raised);
}
/* Action buttons */
.you-label {
font-size: 0.8rem;
color: var(--color-text-muted);
color: var(--fs-text-tertiary);
}
@media (max-width: 768px) {