UI polish: Illuminated Transcript design language
- Fraunces serif for headings and assistant identity label - Chat bubbles flipped: assistant responses elevated (card + left indigo accent + shadow), user prompts ghosted (transparent bg, muted text) - AppLogo: book fill changed from text-color to indigo in light mode - AppHeader: border-bottom removed; active nav uses underline accent - NoteCard/TaskCard: border replaced with whisper indigo-tint shadow - HomeView: dashboard-response uses left accent; progress bars indigo; empty-state decorative marker; project cards use shadow depth - NotesListView: btn-new/btn-cta use indigo gradient + glow - All primary CTA buttons: indigo gradient (135deg #6366f1 → #4f46e5) with box-shadow glow on hover - Dark palette: navy (#1a1a2e family) → slate-indigo (#111113 family) - Scrollbars: thin 4px indigo-tinted Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -166,7 +166,6 @@ onUnmounted(() => document.removeEventListener("click", handleClickOutside));
|
||||
<style scoped>
|
||||
.app-header {
|
||||
background: var(--color-bg-secondary);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
position: relative;
|
||||
}
|
||||
.nav {
|
||||
@@ -182,8 +181,11 @@ onUnmounted(() => document.removeEventListener("click", handleClickOutside));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 600;
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
@@ -217,12 +219,13 @@ onUnmounted(() => document.removeEventListener("click", handleClickOutside));
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg-card);
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
}
|
||||
.nav-link.router-link-active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg-card);
|
||||
font-weight: 600;
|
||||
box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Status indicator */
|
||||
|
||||
Reference in New Issue
Block a user