Major rebranding, i18n, dashboard, shared folders, role capabilities
- Rebrand: new app/agent icons, SKALD.md, warm "paper" CSS palette (terracotta accent, --radius tokens, WCAG contrast, reduced-motion), updated favicon, tray icon, skaldkonur asset - i18n: backend crate (i18n.rs, locale column, ui_locale config), frontend library (web/lib/i18n.js, I18nMixin, t(key)), translation files (web/i18n/), every component wired - Dashboard: <dashboard-page> replaces old home-page content; <app-copilot> becomes the landing page (full/dock layout modes) - Shared folders: API endpoints (shared_folders.rs), frontend page, can_write membership, container mount topology, user_fs routing - Role capabilities: new db table & authorization seam (data not enums), roles.attrs JSON for ui_mode / interface select - Setup: skald-setup prompts for language + password, sets ui_locale - General: components migrated to CSS variables, Lit conventions cleanup, connectors/catalog/marketplace/approval refactoring
This commit is contained in:
+18
-18
@@ -17,8 +17,8 @@
|
||||
}
|
||||
|
||||
.copilot-composer:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
|
||||
}
|
||||
|
||||
.copilot-textarea {
|
||||
@@ -26,9 +26,9 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
padding: 0.6rem 0.75rem 0.4rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
padding: 0.65rem 0.85rem 0.45rem;
|
||||
min-height: 2.6rem;
|
||||
max-height: 14rem;
|
||||
overflow-y: auto;
|
||||
@@ -59,11 +59,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--placeholder-color);
|
||||
font-size: 0.85rem;
|
||||
@@ -99,14 +99,14 @@
|
||||
|
||||
.copilot-model-pill:hover,
|
||||
.copilot-model-pill.open {
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
border-color: rgba(99, 102, 241, 0.3);
|
||||
color: #6366f1;
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
border-color: rgba(var(--accent-rgb), 0.3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.copilot-model-pill i:first-child {
|
||||
font-size: 0.75rem;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.copilot-model-overlay {
|
||||
@@ -141,8 +141,8 @@
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.copilot-model-item:hover { background: rgba(99, 102, 241, 0.07); }
|
||||
.copilot-model-item.active { color: #6366f1; font-weight: 600; }
|
||||
.copilot-model-item:hover { background: rgba(var(--accent-rgb), 0.07); }
|
||||
.copilot-model-item.active { color: var(--accent); font-weight: 600; }
|
||||
|
||||
/* ── Slash-command autocomplete ─────────────────────────────────────────────── */
|
||||
|
||||
@@ -177,9 +177,9 @@
|
||||
}
|
||||
|
||||
.copilot-cmd-item:hover,
|
||||
.copilot-cmd-item.active { background: rgba(99, 102, 241, 0.1); }
|
||||
.copilot-cmd-item.active { background: rgba(var(--accent-rgb), 0.1); }
|
||||
|
||||
.copilot-cmd-name { font-weight: 600; color: #6366f1; white-space: nowrap; }
|
||||
.copilot-cmd-name { font-weight: 600; color: var(--accent); white-space: nowrap; }
|
||||
|
||||
.copilot-cmd-desc {
|
||||
color: var(--text-muted, #888);
|
||||
@@ -199,7 +199,7 @@
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0.45rem;
|
||||
background: #6366f1;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
@@ -207,7 +207,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.copilot-send-btn:hover { background: #4f46e5; }
|
||||
.copilot-send-btn:hover { background: var(--accent-hover); }
|
||||
.copilot-send-btn--stop { background: #dc2626; }
|
||||
.copilot-send-btn--stop:hover { background: #b91c1c; }
|
||||
.copilot-send-btn--recording { background: #dc2626; animation: copilot-pulse 1s ease-in-out infinite; }
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
.copilot-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
/* ── Message bubbles ───────────────────────────────────────────────────────── */
|
||||
|
||||
.copilot-msg {
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
padding: 0.65rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
max-width: 88%;
|
||||
}
|
||||
|
||||
@@ -159,17 +159,17 @@
|
||||
.copilot-tool-path {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: inherit;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.25em;
|
||||
background: rgba(99,102,241,0.10);
|
||||
background: rgba(var(--accent-rgb), 0.10);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.copilot-tool-path:hover {
|
||||
text-decoration: underline;
|
||||
background: rgba(99,102,241,0.18);
|
||||
background: rgba(var(--accent-rgb), 0.18);
|
||||
}
|
||||
|
||||
.copilot-tool-body {
|
||||
@@ -285,7 +285,7 @@
|
||||
.copilot-markdown pre code { background: none; padding: 0; font-size: inherit; }
|
||||
|
||||
.copilot-markdown blockquote {
|
||||
border-left: 3px solid #6366f1;
|
||||
border-left: 3px solid var(--accent);
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.3rem 0.75rem;
|
||||
color: var(--placeholder-color);
|
||||
@@ -298,7 +298,7 @@
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.copilot-markdown a { color: #6366f1; text-decoration: underline; }
|
||||
.copilot-markdown a { color: var(--accent); text-decoration: underline; }
|
||||
.copilot-markdown strong { font-weight: 700; }
|
||||
.copilot-markdown em { font-style: italic; }
|
||||
|
||||
@@ -343,7 +343,7 @@
|
||||
.copilot-approval-path {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 0.75rem;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.copilot-approval-actions {
|
||||
@@ -450,7 +450,7 @@
|
||||
|
||||
.copilot-agent,
|
||||
.copilot-agent-end {
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.2);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
overflow: clip;
|
||||
@@ -462,18 +462,18 @@
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
color: var(--msg-assistant-text);
|
||||
}
|
||||
|
||||
.copilot-agent-header i {
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.copilot-agent-header strong {
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -505,10 +505,10 @@
|
||||
margin: 0;
|
||||
padding: 0.45rem 0.65rem;
|
||||
color: var(--placeholder-color);
|
||||
border-top: 1px solid rgba(99, 102, 241, 0.15);
|
||||
border-top: 1px solid rgba(var(--accent-rgb), 0.15);
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
background: rgba(99, 102, 241, 0.05);
|
||||
background: rgba(var(--accent-rgb), 0.05);
|
||||
}
|
||||
|
||||
.copilot-agent-preview--result {
|
||||
@@ -519,7 +519,7 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.copilot-agent-badge.running { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
|
||||
.copilot-agent-badge.done { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
|
||||
.copilot-agent-header { background: rgba(99, 102, 241, 0.1); }
|
||||
.copilot-agent-header { background: rgba(var(--accent-rgb), 0.1); }
|
||||
}
|
||||
|
||||
/* ── Attachment chips (composer pending + sent user bubble) ──────────────────── */
|
||||
@@ -550,7 +550,7 @@
|
||||
}
|
||||
|
||||
.attach-chip--clickable { cursor: pointer; }
|
||||
.attach-chip--clickable:hover { border-color: #6366f1; }
|
||||
.attach-chip--clickable:hover { border-color: var(--accent); }
|
||||
.attach-chip--uploading { opacity: 0.7; }
|
||||
|
||||
.attach-chip .bi { font-size: 0.85rem; flex-shrink: 0; }
|
||||
|
||||
+118
-5
@@ -11,13 +11,126 @@ app-copilot {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
app-copilot.collapsed {
|
||||
app-copilot.collapsed:not([mode="full"]) {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Full mode (home route): the chat fills the workspace ──────────────────── */
|
||||
|
||||
app-copilot[mode="full"] {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* Center the conversation in a readable column on wide screens. */
|
||||
app-copilot[mode="full"] .copilot-header,
|
||||
app-copilot[mode="full"] .copilot-tabs,
|
||||
app-copilot[mode="full"] .copilot-messages,
|
||||
app-copilot[mode="full"] .copilot-input-area {
|
||||
padding-left: max(1.25rem, calc((100% - 860px) / 2));
|
||||
padding-right: max(1.25rem, calc((100% - 860px) / 2));
|
||||
}
|
||||
|
||||
app-copilot[mode="full"] .copilot-header {
|
||||
font-size: 1rem;
|
||||
padding-top: 0.9rem;
|
||||
padding-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
app-copilot[mode="full"] .copilot-msg {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
/* ── Welcome hero (empty state, full mode) ─────────────────────────────────── */
|
||||
|
||||
.chat-hero {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
max-width: 560px;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.chat-hero-logo {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 24px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.chat-hero-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin: 1.1rem 0 0.3rem;
|
||||
}
|
||||
|
||||
.chat-hero-sub {
|
||||
color: var(--placeholder-color);
|
||||
font-size: 1rem;
|
||||
margin: 0 0 1.75rem;
|
||||
}
|
||||
|
||||
.chat-suggestions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-suggestion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
border: 1px solid var(--card-border);
|
||||
background: var(--card-bg);
|
||||
color: var(--msg-assistant-text);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.75rem 0.95rem;
|
||||
font-size: 0.92rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.chat-suggestion i {
|
||||
color: var(--accent);
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-suggestion:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.chat-suggestions { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ── Privacy chip (chat header) ────────────────────────────────────────────── */
|
||||
|
||||
.chat-privacy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 0.18rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.chat-privacy i {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.copilot-resize-handle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -31,7 +144,7 @@ app-copilot.collapsed {
|
||||
|
||||
.copilot-resize-handle:hover,
|
||||
.copilot-resize-handle:active {
|
||||
background: rgba(99, 102, 241, 0.35);
|
||||
background: rgba(var(--accent-rgb), 0.35);
|
||||
}
|
||||
|
||||
.copilot-expand-btn {
|
||||
@@ -43,7 +156,7 @@ app-copilot.collapsed {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
font-size: 1.1rem;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1rem 0;
|
||||
@@ -72,7 +185,7 @@ app-copilot.collapsed {
|
||||
|
||||
.copilot-header i {
|
||||
font-size: 1rem;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Tabs (General + project chats) ─────────────────────────────────────────── */
|
||||
@@ -105,7 +218,7 @@ app-copilot.collapsed {
|
||||
|
||||
.copilot-tab--active {
|
||||
color: var(--bs-body-color, inherit);
|
||||
border-bottom-color: #6366f1;
|
||||
border-bottom-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.fv-md hr { border: none; border-top: 1px solid var(--bs-border-color); margin: 1.25rem 0; }
|
||||
.fv-md a { color: #6366f1; text-decoration: underline; }
|
||||
.fv-md a { color: var(--accent); text-decoration: underline; }
|
||||
.fv-md strong { font-weight: 700; }
|
||||
.fv-md em { font-style: italic; }
|
||||
|
||||
|
||||
+2
-30
@@ -1,6 +1,6 @@
|
||||
/* ── Home page ─────────────────────────────────────────────────────────────── */
|
||||
/* ── Dashboard page ────────────────────────────────────────────────────────── */
|
||||
|
||||
home-page {
|
||||
dashboard-page {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
@@ -13,34 +13,6 @@ home-page {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── Debug toggle ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.home-debug-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.home-debug-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--bs-secondary-color);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.home-debug-toggle:hover {
|
||||
background: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.home-debug-toggle i { font-size: 0.82rem; }
|
||||
|
||||
/* ── Hero ──────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.home-hero {
|
||||
|
||||
+4
-4
@@ -371,7 +371,7 @@ mobile-app[data-native] .chat-page-input-area { padding-bottom: 10px; }
|
||||
|
||||
.chat-page-composer:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
|
||||
}
|
||||
|
||||
.chat-page-textarea {
|
||||
@@ -428,7 +428,7 @@ mobile-app[data-native] .chat-page-input-area { padding-bottom: 10px; }
|
||||
|
||||
.chat-page-model-pill:focus,
|
||||
.chat-page-model-pill:hover {
|
||||
border-color: rgba(99, 102, 241, 0.3);
|
||||
border-color: rgba(var(--accent-rgb), 0.3);
|
||||
}
|
||||
|
||||
/* ── Mic + send buttons ────────────────────────────────────────────────────── */
|
||||
@@ -559,8 +559,8 @@ mobile-app[data-native] .chat-page-input-area { padding-bottom: 10px; }
|
||||
justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-hover, #4f46e5));
|
||||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
|
||||
background: linear-gradient(135deg, var(--accent, var(--accent)), var(--accent-hover, var(--accent-hover)));
|
||||
box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35);
|
||||
}
|
||||
|
||||
.project-card-main {
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
padding: 0.15em 0.5em;
|
||||
border-radius: 4px;
|
||||
background: var(--bs-primary-bg-subtle, #eef2ff);
|
||||
color: var(--bs-primary, #4f46e5);
|
||||
color: var(--bs-primary, var(--accent-hover));
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -261,7 +261,7 @@
|
||||
}
|
||||
|
||||
.llm-params-pill {
|
||||
background: #6366f1 !important;
|
||||
background: var(--accent) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -73,6 +73,7 @@ file-viewer-page {
|
||||
|
||||
users-page,
|
||||
roles-page,
|
||||
shared-folders-page,
|
||||
connectors-page,
|
||||
connector-detail-page,
|
||||
marketplace-page,
|
||||
|
||||
+10
-10
@@ -17,8 +17,8 @@ app-sidebar {
|
||||
gap: 0.55rem;
|
||||
padding: 0 1rem 1.25rem;
|
||||
color: var(--sidebar-brand-color);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@@ -89,11 +89,11 @@ app-sidebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.20rem 0.30rem;
|
||||
padding: 0.4rem 0.55rem;
|
||||
color: var(--sidebar-text);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.92rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
|
||||
@@ -119,8 +119,8 @@ app-sidebar {
|
||||
.sidebar-link.active {
|
||||
background: var(--sidebar-active-bg);
|
||||
color: var(--sidebar-text-active);
|
||||
font-weight: 500;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-link.active i {
|
||||
@@ -183,11 +183,11 @@ app-sidebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.18rem 0.40rem;
|
||||
padding: 0.32rem 0.55rem;
|
||||
color: var(--sidebar-text);
|
||||
text-decoration: none;
|
||||
font-size: 0.84rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.86rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
|
||||
|
||||
@@ -130,13 +130,13 @@
|
||||
}
|
||||
|
||||
.task-badge--cron {
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
color: var(--bs-primary, #6366f1);
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
color: var(--bs-primary, var(--accent));
|
||||
}
|
||||
|
||||
.task-badge--sync {
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
color: var(--bs-primary, #6366f1);
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
color: var(--bs-primary, var(--accent));
|
||||
}
|
||||
|
||||
.task-badge--async {
|
||||
|
||||
+14
-14
@@ -12,8 +12,8 @@ app-topbar {
|
||||
}
|
||||
|
||||
.topbar-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--sidebar-brand-color);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@@ -26,10 +26,10 @@ app-topbar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--sidebar-text);
|
||||
cursor: pointer;
|
||||
@@ -50,12 +50,12 @@ app-topbar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #6366f1;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
padding: 0;
|
||||
@@ -81,13 +81,13 @@ app-topbar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
@@ -95,7 +95,7 @@ app-topbar {
|
||||
}
|
||||
|
||||
.topbar-avatar:hover {
|
||||
background: var(--accent-hover);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.topbar-dropdown {
|
||||
@@ -105,7 +105,7 @@ app-topbar {
|
||||
min-width: 200px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 6px;
|
||||
z-index: 100;
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.um-badge-encrypted { background: rgba(99, 102, 241, .15); color: #6366f1; }
|
||||
.um-badge-encrypted { background: rgba(var(--accent-rgb), .15); color: var(--accent); }
|
||||
.um-badge-clear { background: rgba(108, 117, 125, .15); color: #6c757d; }
|
||||
.um-badge-active { background: rgba(25, 135, 84, .15); color: #198754; }
|
||||
.um-badge-inactive { background: rgba(220, 53, 69, .15); color: #dc3545; }
|
||||
|
||||
+96
-58
@@ -1,87 +1,104 @@
|
||||
/* ── Layout variables ──────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--topbar-height: 32px;
|
||||
--sidebar-width: 220px;
|
||||
--topbar-height: 40px;
|
||||
--sidebar-width: 240px;
|
||||
--copilot-width: 420px;
|
||||
|
||||
/* Brand accent */
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #4f46e5;
|
||||
/* Brand accent — warm terracotta */
|
||||
--accent: #d95d4e;
|
||||
--accent-rgb: 217, 93, 78;
|
||||
--accent-hover: #c04a3c;
|
||||
--accent-soft: rgba(217, 93, 78, 0.12);
|
||||
--accent-ring: rgba(217, 93, 78, 0.28);
|
||||
|
||||
/* Sidebar — indigo, dark in both modes */
|
||||
--sidebar-bg: #1a1740;
|
||||
--sidebar-hover: rgba(255, 255, 255, 0.06);
|
||||
--sidebar-active-bg: rgba(99, 102, 241, 0.22);
|
||||
--sidebar-label-color: #4a4880;
|
||||
--sidebar-text: #9b99d4;
|
||||
--sidebar-text-active: #e0e7ff;
|
||||
--sidebar-divider: rgba(255, 255, 255, 0.07);
|
||||
--sidebar-brand-color: #e0e7ff;
|
||||
/* Radius scale — friendly, generous */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
|
||||
/* Sidebar — warm cream */
|
||||
--sidebar-bg: #f6f0e6;
|
||||
--sidebar-hover: rgba(63, 52, 40, 0.06);
|
||||
--sidebar-active-bg: rgba(217, 93, 78, 0.13);
|
||||
--sidebar-label-color: #9c8a70;
|
||||
--sidebar-text: #7a6a58;
|
||||
--sidebar-text-active: #a63f31;
|
||||
--sidebar-divider: #e9dfcf;
|
||||
--sidebar-brand-color: #3f3428;
|
||||
|
||||
/* Main area — light mode */
|
||||
--toolbar-border: #e2e8f0;
|
||||
--placeholder-color: #94a3b8;
|
||||
--copilot-bg: #f8fafc;
|
||||
--toolbar-border: #e9dfd3;
|
||||
--placeholder-color: #a89a85;
|
||||
--copilot-bg: #fbf8f3;
|
||||
|
||||
/* Copilot messages — light mode */
|
||||
--msg-assistant-bg: #e8ecf8;
|
||||
--msg-assistant-text: #1e293b;
|
||||
--msg-user-bg: #6366f1;
|
||||
--msg-assistant-bg: #f4ede2;
|
||||
--msg-assistant-text: #3f3428;
|
||||
--msg-user-bg: #d95d4e;
|
||||
--msg-user-text: #ffffff;
|
||||
|
||||
/* Card surfaces */
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #dde1f0;
|
||||
--card-shadow: 0 1px 3px rgba(99, 102, 241, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--card-radius: 3px;
|
||||
--card-border: #e9dfd3;
|
||||
--card-shadow: 0 1px 3px rgba(63, 52, 40, 0.06), 0 1px 2px rgba(63, 52, 40, 0.04);
|
||||
--card-radius: var(--radius-md);
|
||||
|
||||
/* Bootstrap overrides */
|
||||
--bs-primary: #6366f1;
|
||||
--bs-primary-rgb: 99, 102, 241;
|
||||
--bs-link-color: #6366f1;
|
||||
--bs-link-color-rgb: 99, 102, 241;
|
||||
--bs-body-bg: #eef0f8;
|
||||
--bs-body-bg-rgb: 238, 240, 248;
|
||||
--bs-secondary-bg: #e4e7f2;
|
||||
--bs-tertiary-bg: #f4f5fb;
|
||||
--bs-border-color: #dde1f0;
|
||||
--bs-primary: #d95d4e;
|
||||
--bs-primary-rgb: 217, 93, 78;
|
||||
--bs-link-color: #c04a3c;
|
||||
--bs-link-color-rgb: 192, 74, 60;
|
||||
--bs-body-bg: #faf7f2;
|
||||
--bs-body-bg-rgb: 250, 247, 242;
|
||||
--bs-secondary-bg: #f0e9dc;
|
||||
--bs-tertiary-bg: #f6f0e6;
|
||||
--bs-border-color: #e9dfd3;
|
||||
--bs-border-radius: 0.6rem;
|
||||
--bs-border-radius-sm: 0.45rem;
|
||||
--bs-border-radius-lg: 0.9rem;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--sidebar-bg: #0e0c22;
|
||||
--sidebar-hover: rgba(255, 255, 255, 0.05);
|
||||
--sidebar-active-bg: rgba(99, 102, 241, 0.18);
|
||||
--sidebar-label-color: #2a2860;
|
||||
--sidebar-text: #6360b8;
|
||||
--sidebar-text-active: #c7d2fe;
|
||||
--sidebar-divider: rgba(255, 255, 255, 0.06);
|
||||
--sidebar-brand-color: #c7d2fe;
|
||||
--accent: #e8836f;
|
||||
--accent-rgb: 232, 131, 111;
|
||||
--accent-hover: #f0967f;
|
||||
--accent-soft: rgba(232, 131, 111, 0.16);
|
||||
--accent-ring: rgba(232, 131, 111, 0.35);
|
||||
|
||||
--toolbar-border: #1e1b3a;
|
||||
--placeholder-color: #4a4880;
|
||||
--copilot-bg: #13112a;
|
||||
--sidebar-bg: #241f1a;
|
||||
--sidebar-hover: rgba(236, 225, 211, 0.06);
|
||||
--sidebar-active-bg: rgba(232, 131, 111, 0.16);
|
||||
--sidebar-label-color: #7a6a55;
|
||||
--sidebar-text: #b3a28c;
|
||||
--sidebar-text-active: #f0a495;
|
||||
--sidebar-divider: #3d332a;
|
||||
--sidebar-brand-color: #ece1d3;
|
||||
|
||||
--msg-assistant-bg: #1a1830;
|
||||
--msg-assistant-text: #c7d2fe;
|
||||
--msg-user-bg: #4f46e5;
|
||||
--toolbar-border: #3d332a;
|
||||
--placeholder-color: #8a7a66;
|
||||
--copilot-bg: #211c17;
|
||||
|
||||
--msg-assistant-bg: #2e2721;
|
||||
--msg-assistant-text: #ece1d3;
|
||||
--msg-user-bg: #b6493b;
|
||||
--msg-user-text: #ffffff;
|
||||
|
||||
--bs-primary: #818cf8;
|
||||
--bs-primary-rgb: 129, 140, 248;
|
||||
--bs-link-color: #818cf8;
|
||||
--bs-link-color-rgb: 129, 140, 248;
|
||||
--bs-primary: #e8836f;
|
||||
--bs-primary-rgb: 232, 131, 111;
|
||||
--bs-link-color: #e8836f;
|
||||
--bs-link-color-rgb: 232, 131, 111;
|
||||
|
||||
--bs-body-bg: #111128;
|
||||
--bs-body-bg-rgb: 17, 17, 40;
|
||||
--bs-secondary-bg: #1a1838;
|
||||
--bs-tertiary-bg: #1e1c3e;
|
||||
--bs-border-color: #2a2850;
|
||||
--bs-body-bg: #1c1814;
|
||||
--bs-body-bg-rgb: 28, 24, 20;
|
||||
--bs-secondary-bg: #2e2721;
|
||||
--bs-tertiary-bg: #2e2721;
|
||||
--bs-border-color: #3d332a;
|
||||
|
||||
/* Card surfaces — dark mode */
|
||||
--card-bg: #1d1b3e;
|
||||
--card-border: #2e2b58;
|
||||
--card-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
--card-bg: #27211b;
|
||||
--card-border: #3d332a;
|
||||
--card-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ── Reset ─────────────────────────────────────────────────────────────────── */
|
||||
@@ -98,6 +115,27 @@ body {
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
/* Keyboard users get a clear, warm focus ring everywhere. */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Respect users who ask for less motion. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Root layout ───────────────────────────────────────────────────────────── */
|
||||
|
||||
#app {
|
||||
|
||||
Reference in New Issue
Block a user