UI: indigo/slate theme, border cleanup, rounder edges
theme.css: - Dark mode palette shifted from navy to dark slate with indigo warmth (#111113 / #18181f / #1e1e27). Primary restored to true indigo (#818cf8) instead of the blue (#5b9cf6) it had drifted to. - Borders reduced to near-invisible rgba(99,102,241,0.10) indigo tint. - --radius-md 8px→12px, --radius-lg 12px→18px. - Tag/wikilink/status-in-progress colors unified to indigo family. - Thin indigo-tinted scrollbars (4px, rgba thumb). ChatMessage.vue: - Message bubbles 16px→18px radius. - User bubble: flat primary → indigo gradient (#6366f1→#4f46e5). - Assistant bubble: border removed, relies on bg-card vs bg contrast. ChatView.vue: - Sidebar border-right, chat-header border-bottom, context-sidebar border-left all removed. - Streaming bubble: border removed, radius 16px→18px. - Active conv item: solid primary fill → 15% opacity indigo tint with primary-colored text (softer, more refined selection state). - Send button: flat primary → indigo gradient + glow on hover. - New Chat button: glow on hover. - Queued bubble: matches send button gradient. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user