diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css index 712ae3a..0186a26 100644 --- a/frontend/src/assets/theme.css +++ b/frontend/src/assets/theme.css @@ -39,32 +39,32 @@ --color-input-bar-placeholder: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.45); --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; + --radius-md: 12px; + --radius-lg: 18px; --radius-pill: 9999px; --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent); } [data-theme="dark"] { - --color-bg: #1a1a2e; - --color-bg-secondary: #16213e; - --color-bg-card: #1f2940; - --color-text: #e0e0e0; - --color-text-secondary: #a0a0b0; - --color-text-muted: #707080; - --color-border: #2a3a5c; - --color-input-border: #3a4a6c; - --color-primary: #5b9cf6; + --color-bg: #111113; + --color-bg-secondary: #18181f; + --color-bg-card: #1e1e27; + --color-text: #e4e4f0; + --color-text-secondary: #8888a8; + --color-text-muted: #52526a; + --color-border: rgba(99, 102, 241, 0.10); + --color-input-border: rgba(99, 102, 241, 0.22); + --color-primary: #818cf8; --color-danger: #f44336; - --color-tag-bg: #1e3a5f; - --color-tag-text: #7bb8f6; - --color-shadow: rgba(0, 0, 0, 0.3); + --color-tag-bg: #2a2a45; + --color-tag-text: #a5b4fc; + --color-shadow: rgba(0, 0, 0, 0.4); --color-toast-success: #4caf50; --color-toast-error: #f44336; --color-status-todo: #9aa0a6; - --color-status-todo-bg: #2d333b; - --color-status-in-progress: #5b9cf6; - --color-status-in-progress-bg: #1e3a5f; + --color-status-todo-bg: #2a2a35; + --color-status-in-progress: #818cf8; + --color-status-in-progress-bg: #2a2a45; --color-status-done: #4caf50; --color-status-done-bg: #1b3a20; --color-priority-low: #80cbc4; @@ -73,18 +73,18 @@ --color-priority-medium-bg: #3a3520; --color-priority-high: #f44336; --color-priority-high-bg: #3a1a1a; - --color-wikilink: #ce93d8; - --color-wikilink-bg: #2a1a30; + --color-wikilink: #c4b5fd; + --color-wikilink-bg: #2a1a45; --color-overdue: #f44336; - --color-code-bg: #161b22; - --color-code-inline-bg: #2a3040; - --color-table-stripe: #1a2030; + --color-code-bg: #16161d; + --color-code-inline-bg: #1e1e2d; + --color-table-stripe: #16161e; --color-success: #4ade80; --color-warning: #facc15; - --color-input-bar-bg: #1c1c1e; - --color-input-bar-text: #ffffff; - --color-input-bar-placeholder: rgba(255, 255, 255, 0.4); - --color-overlay: rgba(0, 0, 0, 0.6); + --color-input-bar-bg: #1e1e27; + --color-input-bar-text: #e4e4f0; + --color-input-bar-placeholder: rgba(228, 228, 240, 0.35); + --color-overlay: rgba(0, 0, 0, 0.65); } *, @@ -131,6 +131,22 @@ a:focus-visible { } } +/* Thin indigo-tinted scrollbars */ +::-webkit-scrollbar { + width: 4px; + height: 4px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: rgba(99, 102, 241, 0.25); + border-radius: 9999px; +} +::-webkit-scrollbar-thumb:hover { + background: rgba(99, 102, 241, 0.45); +} + /* Floating inline assist button (teleported to body, cannot be scoped) */ .inline-assist-btn { position: fixed; diff --git a/frontend/src/components/ChatMessage.vue b/frontend/src/components/ChatMessage.vue index b153750..cce26d2 100644 --- a/frontend/src/components/ChatMessage.vue +++ b/frontend/src/components/ChatMessage.vue @@ -118,17 +118,16 @@ const timingParts = computed((): string[] => { .message-bubble { padding: 0.75rem 1rem; - border-radius: 16px; + border-radius: 18px; } .role-user .message-bubble { - background: var(--color-primary); + background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-bottom-right-radius: 4px; } .role-assistant .message-bubble { background: var(--color-bg-card); - border: 1px solid var(--color-border); border-bottom-left-radius: 4px; } diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue index 95e9805..b632a68 100644 --- a/frontend/src/views/ChatView.vue +++ b/frontend/src/views/ChatView.vue @@ -847,7 +847,6 @@ onUnmounted(() => { .chat-sidebar { width: 260px; min-width: 200px; - border-right: 1px solid var(--color-border); display: flex; flex-direction: column; background: var(--color-bg-secondary); @@ -868,9 +867,11 @@ onUnmounted(() => { border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; + transition: box-shadow 0.15s, opacity 0.15s; } .btn-new-conv:hover { opacity: 0.9; + box-shadow: 0 0 14px rgba(129, 140, 248, 0.35); } .btn-select-mode { @@ -996,8 +997,8 @@ onUnmounted(() => { background: var(--color-bg-card); } .conv-item.active { - background: var(--color-primary); - color: #fff; + background: color-mix(in srgb, var(--color-primary) 15%, transparent); + color: var(--color-primary); } .conv-info { flex: 1; @@ -1017,7 +1018,7 @@ onUnmounted(() => { margin-top: 1px; } .conv-item.active .conv-date { - color: rgba(255, 255, 255, 0.7); + color: var(--color-text-muted); } .btn-delete-conv { background: none; @@ -1029,7 +1030,7 @@ onUnmounted(() => { line-height: 1; } .conv-item.active .btn-delete-conv { - color: rgba(255, 255, 255, 0.7); + color: var(--color-text-muted); } .btn-delete-conv:hover { color: var(--color-danger, #e74c3c); @@ -1047,7 +1048,6 @@ onUnmounted(() => { align-items: center; justify-content: space-between; padding: 0.75rem 1rem; - border-bottom: 1px solid var(--color-border); } .chat-header h2 { margin: 0; @@ -1116,7 +1116,6 @@ onUnmounted(() => { .context-sidebar { width: 220px; min-width: 180px; - border-left: 1px solid var(--color-border); background: var(--color-bg-secondary); display: flex; flex-direction: column; @@ -1220,10 +1219,9 @@ onUnmounted(() => { .streaming-bubble { max-width: 80%; padding: 0.75rem 1rem; - border-radius: 16px; + border-radius: 18px; border-bottom-left-radius: 4px; background: var(--color-bg-card); - border: 1px solid var(--color-border); } .streaming-bubble .message-header { display: flex; @@ -1517,13 +1515,17 @@ details[open] .thinking-summary::before { display: flex; align-items: center; justify-content: center; - background: var(--color-primary); + background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; + transition: box-shadow 0.15s; +} +.btn-send:not(:disabled):hover { + box-shadow: 0 0 14px rgba(129, 140, 248, 0.5); } .btn-send:disabled { opacity: 0.35; @@ -1628,9 +1630,9 @@ details[open] .thinking-summary::before { .queued-bubble { max-width: 80%; padding: 0.75rem 1rem; - border-radius: 16px; + border-radius: 18px; border-bottom-right-radius: 4px; - background: var(--color-primary); + background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; opacity: 0.45; font-size: 0.95rem;