bvandeusenandClaude Opus 4.6
4228e9a384
Phase B of chat view refinement. Bumps chat reading column to 1200px, lifts the RAG scope chip out of the footer and into the ChatView header (next to the title), and collapses the listen toggle / volume slider / stop-playback buttons into a single speaker popover on the input bar. Listen mode + TTS are now available in briefing and workspace chats too, since the controls live on the shared ChatInputBar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
221 lines
6.5 KiB
CSS
221 lines
6.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');
|
|
|
|
:root {
|
|
--color-bg: #f5f5fb;
|
|
--color-bg-secondary: #ededf5;
|
|
--color-bg-card: #ffffff;
|
|
--color-surface: #f0f0f8;
|
|
--color-text: #1a1a1a;
|
|
--color-text-secondary: #666666;
|
|
--color-text-muted: #999999;
|
|
--color-border: #dddde8;
|
|
--color-input-border: #c8c8d8;
|
|
--color-primary: #7c3aed;
|
|
--color-danger: #d93025;
|
|
--color-tag-bg: #ede5ff;
|
|
--color-tag-text: #6d28d9;
|
|
--color-shadow: rgba(0, 0, 0, 0.08);
|
|
--color-toast-success: #34a853;
|
|
--color-toast-error: #d93025;
|
|
--color-status-todo: #5f6368;
|
|
--color-status-todo-bg: #e8eaed;
|
|
--color-status-in-progress: #7c3aed;
|
|
--color-status-in-progress-bg: #ede5ff;
|
|
--color-status-done: #34a853;
|
|
--color-status-done-bg: #e6f4ea;
|
|
--color-priority-low: #5f9ea0;
|
|
--color-priority-low-bg: #e0f2f1;
|
|
--color-priority-medium: #f9a825;
|
|
--color-priority-medium-bg: #fff8e1;
|
|
--color-priority-high: #d93025;
|
|
--color-priority-high-bg: #fce8e6;
|
|
--color-wikilink: #7b1fa2;
|
|
--color-wikilink-bg: #f3e5f5;
|
|
--color-overdue: #d93025;
|
|
--color-code-bg: #f0f0f8;
|
|
--color-code-inline-bg: #eaeaf4;
|
|
--color-table-stripe: #f4f4fb;
|
|
--color-success: #22c55e;
|
|
--color-warning: #eab308;
|
|
--color-input-bar-bg: #eaeaf3;
|
|
--color-input-bar-text: #1a1a1a;
|
|
--color-input-bar-placeholder: rgba(0, 0, 0, 0.4);
|
|
--color-overlay: rgba(0, 0, 0, 0.45);
|
|
--color-bubble-user-bg: rgba(0, 0, 0, 0.04);
|
|
--color-bubble-user-border: rgba(0, 0, 0, 0.10);
|
|
--color-bubble-user-text: #3a3a4a;
|
|
--color-bubble-asst-shadow: 0 2px 16px rgba(124, 58, 237, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 18px;
|
|
--radius-pill: 9999px;
|
|
--focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.4);
|
|
/* Layout */
|
|
--page-max-width: 1200px;
|
|
--page-padding-x: 1rem;
|
|
--sidebar-width: 260px;
|
|
--chat-reading-width: min(1200px, 100%);
|
|
--chat-context-sidebar-width: 220px;
|
|
--color-accent-warm: #b8860b;
|
|
--color-accent-warm-light: #d4a017;
|
|
--color-primary-solid: #7c3aed;
|
|
--color-primary-deep: #5b21b6;
|
|
/* Reusable brand patterns */
|
|
--gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
|
|
--glow-cta: 0 2px 10px rgba(124, 58, 237, 0.35);
|
|
--glow-cta-hover: 0 4px 20px rgba(124, 58, 237, 0.55);
|
|
--glow-soft: 0 0 16px rgba(124, 58, 237, 0.35);
|
|
--color-primary-faint: rgba(124, 58, 237, 0.08);
|
|
--color-primary-tint: rgba(124, 58, 237, 0.12);
|
|
--color-primary-wash: rgba(124, 58, 237, 0.20);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-bg: #0f0f14;
|
|
--color-bg-secondary: #16161f;
|
|
--color-bg-card: #1a1a24;
|
|
--color-surface: #16161f;
|
|
--color-text: #e4e4f0;
|
|
--color-text-secondary: #8888a8;
|
|
--color-text-muted: #52526a;
|
|
--color-border: rgba(124, 58, 237, 0.22);
|
|
--color-input-border: rgba(124, 58, 237, 0.35);
|
|
--color-primary: #a78bfa;
|
|
--color-danger: #f44336;
|
|
--color-tag-bg: #2a2a45;
|
|
--color-tag-text: #c4b5fd;
|
|
--color-shadow: rgba(0, 0, 0, 0.4);
|
|
--color-toast-success: #4caf50;
|
|
--color-toast-error: #f44336;
|
|
--color-status-todo: #9aa0a6;
|
|
--color-status-todo-bg: #2a2a35;
|
|
--color-status-in-progress: #a78bfa;
|
|
--color-status-in-progress-bg: #2a2a45;
|
|
--color-status-done: #4caf50;
|
|
--color-status-done-bg: #1b3a20;
|
|
--color-priority-low: #80cbc4;
|
|
--color-priority-low-bg: #1a3a38;
|
|
--color-priority-medium: #fdd835;
|
|
--color-priority-medium-bg: #3a3520;
|
|
--color-priority-high: #f44336;
|
|
--color-priority-high-bg: #3a1a1a;
|
|
--color-wikilink: #c4b5fd;
|
|
--color-wikilink-bg: #2a1a45;
|
|
--color-overdue: #f44336;
|
|
--color-code-bg: #12121a;
|
|
--color-code-inline-bg: #1a1a2a;
|
|
--color-table-stripe: #14141e;
|
|
--color-success: #4ade80;
|
|
--color-warning: #facc15;
|
|
--color-input-bar-bg: #1a1a24;
|
|
--color-input-bar-text: #e4e4f0;
|
|
--color-input-bar-placeholder: rgba(228, 228, 240, 0.35);
|
|
--color-overlay: rgba(0, 0, 0, 0.65);
|
|
--color-bubble-user-bg: rgba(255, 255, 255, 0.04);
|
|
--color-bubble-user-border: rgba(255, 255, 255, 0.10);
|
|
--color-bubble-user-text: #b0b0c8;
|
|
--color-bubble-asst-shadow: 0 4px 28px rgba(124, 58, 237, 0.14), 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
--color-accent-warm: #d4a017;
|
|
--color-accent-warm-light: #e8c45a;
|
|
--color-primary-solid: #7c3aed;
|
|
--color-primary-deep: #5b21b6;
|
|
--gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
|
|
--glow-cta: 0 2px 12px rgba(124, 58, 237, 0.45);
|
|
--glow-cta-hover: 0 4px 24px rgba(124, 58, 237, 0.65);
|
|
--glow-soft: 0 0 18px rgba(124, 58, 237, 0.4);
|
|
--color-primary-faint: rgba(124, 58, 237, 0.10);
|
|
--color-primary-tint: rgba(124, 58, 237, 0.14);
|
|
--color-primary-wash: rgba(124, 58, 237, 0.22);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.5;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-optical-sizing: auto;
|
|
}
|
|
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible,
|
|
button:focus-visible,
|
|
a:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
button:not(:disabled):active,
|
|
.btn:not(:disabled):active,
|
|
[role="button"]:not(:disabled):active {
|
|
transform: scale(0.97);
|
|
transition: transform 0.08s ease;
|
|
}
|
|
|
|
/* Responsive breakpoints: 480px (phone), 768px (tablet), 1024px (desktop) */
|
|
@media (max-width: 768px) {
|
|
.hide-mobile {
|
|
display: none !important;
|
|
}
|
|
button,
|
|
[role="button"],
|
|
.btn-new-conv,
|
|
.btn-send {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
@media (min-width: 769px) {
|
|
.hide-desktop {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Thin indigo-tinted scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(124, 58, 237, 0.25);
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(124, 58, 237, 0.45);
|
|
}
|
|
|
|
/* Floating inline assist button (teleported to body, cannot be scoped) */
|
|
.inline-assist-btn {
|
|
position: fixed;
|
|
z-index: 150;
|
|
transform: translateX(-50%);
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 999px;
|
|
padding: 0.3rem 0.8rem;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px var(--color-shadow);
|
|
white-space: nowrap;
|
|
}
|
|
.inline-assist-btn:hover {
|
|
filter: brightness(1.1);
|
|
}
|