style: unify all views on Mission Control V2 design tokens
- Map legacy v1 CSS variables (--nx-*, --panel, --text-*, --surface*) to V2 tokens in nexus-tokens.css - Restyle global shell (main.css), AppSidebar, AppHeader to match V2 Sidebar/Topbar (glass, gradients, Space Grotesk) - Add GalaxyBackground to the v1 shell in App.vue - Replace hardcoded v1 hex colors with V2 tokens in all deviating views (Agents, Calendar, Docs, Incidents, Memory, Notifications, ProjectDetail, Security, Team, TaskDetail, Settings) - Keep JS status colors as hex where alpha suffixes are concatenated (AgentsIndex, Team, Notifications) - Add Settings nav item (System group) + gear icon to V2 sidebar so it shows on the dashboard - No component or layout structure changes; LoginView and TaskBoardView untouched Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -227,22 +227,22 @@ onMounted(loadMemories)
|
||||
border-radius: 8px;
|
||||
background: var(--panel);
|
||||
margin-bottom: 16px;
|
||||
color: #6f7889;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
.memory-search-bar input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
.memory-search-bar kbd {
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #2c313d;
|
||||
border: 1px solid var(--line-2);
|
||||
border-radius: 4px;
|
||||
color: #606979;
|
||||
color: var(--tx-3);
|
||||
font-size: 9px;
|
||||
}
|
||||
.memory-layout {
|
||||
@@ -253,7 +253,7 @@ onMounted(loadMemories)
|
||||
}
|
||||
.memory-sidebar {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
border-radius: var(--r);
|
||||
background: var(--panel);
|
||||
padding: 8px;
|
||||
max-height: 640px;
|
||||
@@ -262,7 +262,7 @@ onMounted(loadMemories)
|
||||
.memory-list-header {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #7065c8;
|
||||
color: var(--a-mid);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
padding: 10px 8px 6px;
|
||||
@@ -276,7 +276,7 @@ onMounted(loadMemories)
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
@@ -292,7 +292,7 @@ onMounted(loadMemories)
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
color: #a99cf5;
|
||||
color: var(--a-mid);
|
||||
background: rgba(139,124,246,.1);
|
||||
}
|
||||
.memory-file-info strong {
|
||||
@@ -307,7 +307,7 @@ onMounted(loadMemories)
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 9px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.memory-file-excerpt {
|
||||
@@ -318,7 +318,7 @@ onMounted(loadMemories)
|
||||
}
|
||||
.memory-content {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
border-radius: var(--r);
|
||||
background: var(--panel);
|
||||
padding: 24px;
|
||||
min-height: 480px;
|
||||
@@ -342,7 +342,7 @@ onMounted(loadMemories)
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 9px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
.memory-back-btn {
|
||||
display: flex;
|
||||
@@ -352,13 +352,13 @@ onMounted(loadMemories)
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #8991a1;
|
||||
color: var(--tx-2);
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.memory-back-btn:hover {
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.memory-status {
|
||||
@@ -367,11 +367,11 @@ onMounted(loadMemories)
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 32px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
font-size: 11px;
|
||||
}
|
||||
.memory-status.error {
|
||||
color: #e16e75;
|
||||
color: var(--st-block);
|
||||
}
|
||||
.memory-empty-state {
|
||||
display: flex;
|
||||
@@ -380,27 +380,27 @@ onMounted(loadMemories)
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
min-height: 360px;
|
||||
color: #6b7385;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
.memory-empty-state h3 {
|
||||
margin: 12px 0 6px;
|
||||
font-size: 14px;
|
||||
color: #a5adba;
|
||||
color: var(--tx-2);
|
||||
}
|
||||
.memory-empty-state p {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
.memory-rendered {
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
color: #d0d4dd;
|
||||
color: var(--tx-2);
|
||||
}
|
||||
.memory-rendered :deep(h1),
|
||||
.memory-rendered :deep(h2),
|
||||
.memory-rendered :deep(h3) {
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
margin: 1.2em 0 0.5em;
|
||||
}
|
||||
.memory-rendered :deep(h1) { font-size: 1.3rem; }
|
||||
@@ -416,8 +416,8 @@ onMounted(loadMemories)
|
||||
.memory-rendered :deep(pre) {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #0d1016;
|
||||
border: 1px solid var(--nx-line);
|
||||
background: var(--space-2);
|
||||
border: 1px solid var(--line);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.memory-rendered :deep(pre code) {
|
||||
@@ -425,7 +425,7 @@ onMounted(loadMemories)
|
||||
padding: 0;
|
||||
}
|
||||
.memory-rendered :deep(a) {
|
||||
color: #a99cf5;
|
||||
color: var(--a-mid);
|
||||
text-decoration: none;
|
||||
}
|
||||
.memory-rendered :deep(a:hover) {
|
||||
@@ -439,11 +439,11 @@ onMounted(loadMemories)
|
||||
}
|
||||
.memory-rendered :deep(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid var(--nx-line);
|
||||
border-top: 1px solid var(--line);
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
.memory-rendered :deep(strong) {
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
}
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
|
||||
Reference in New Issue
Block a user