b5971c9618
Replace all hardcoded colors across 10 CSS files with CSS variables defined in index.css. Dark mode (default) uses the existing navy/purple palette, light mode uses Notion-inspired warm neutrals from the design tokens (--bg-primary: #FFFFFF, --bg-sidebar: #F7F6F3, --text-primary: #37352F). Toggle button (sun/moon) in the sidebar header persists preference to localStorage. An inline script in index.html applies the saved theme before React mounts to prevent flash. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
26 lines
492 B
CSS
26 lines
492 B
CSS
.toast {
|
|
position: fixed;
|
|
bottom: 32px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--bg-button);
|
|
color: var(--text-primary);
|
|
padding: 8px 20px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
box-shadow: 0 4px 16px var(--shadow-dialog);
|
|
z-index: 1100;
|
|
animation: toast-in 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes toast-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|