/* Sage Modern UI Theme System Dark/Light theme switching via CSS custom properties Applied to element data-theme attribute */ /* ===== Dark Theme (default) ===== */ :root, [data-theme="dark"] { --sage-bg-primary: #0B1120; --sage-bg-secondary: #111827; --sage-bg-card: #1E293B; --sage-bg-hover: #334155; --sage-bg-input: #0F172A; --sage-bg-toolbar: #111827; --sage-border-primary: #334155; --sage-border-weak: #1E293B; --sage-border-focus: #3B82F6; --sage-text-primary: #F1F5F9; --sage-text-secondary: #94A3B8; --sage-text-muted: #64748B; --sage-text-inverse: #0F172A; --sage-brand: #3B82F6; --sage-brand-hover: #2563EB; --sage-success: #22C55E; --sage-warning: #F59E0B; --sage-danger: #EF4444; --sage-info: #06B6D4; --sage-sidebar-width: 240px; --sage-sidebar-collapsed-width: 64px; --sage-topbar-height: 56px; --sage-radius: 12px; --sage-radius-sm: 8px; --sage-shadow-card: 0 1px 3px rgba(0,0,0,0.3); --sage-shadow-lg: 0 4px 12px rgba(0,0,0,0.4); } /* ===== Light Theme ===== */ [data-theme="light"] { --sage-bg-primary: #F8FAFC; --sage-bg-secondary: #FFFFFF; --sage-bg-card: #FFFFFF; --sage-bg-hover: #F1F5F9; --sage-bg-input: #F8FAFC; --sage-bg-toolbar: #FFFFFF; --sage-border-primary: #E2E8F0; --sage-border-weak: #F1F5F9; --sage-border-focus: #3B82F6; --sage-text-primary: #0F172A; --sage-text-secondary: #475569; --sage-text-muted: #94A3B8; --sage-text-inverse: #FFFFFF; --sage-brand: #3B82F6; --sage-brand-hover: #2563EB; --sage-success: #16A34A; --sage-warning: #D97706; --sage-danger: #DC2626; --sage-info: #0891B2; --sage-shadow-card: 0 1px 3px rgba(0,0,0,0.08); --sage-shadow-lg: 0 4px 12px rgba(0,0,0,0.1); } /* ===== Global Overrides ===== */ body { margin: 0; padding: 0; background-color: var(--sage-bg-primary); color: var(--sage-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } /* Ensure theme variables override bricks.css hardcoded values */ [data-theme="dark"] body { background-color: var(--sage-bg-primary); color: var(--sage-text-primary); } [data-theme="light"] body { background-color: var(--sage-bg-primary); color: var(--sage-text-primary); } /* ===== Shell Layout ===== */ .sage-shell { width: 100%; height: 100vh; display: flex; flex-direction: column; overflow: hidden; background-color: var(--sage-bg-primary); color: var(--sage-text-primary); transition: background-color 0.2s ease, color 0.2s ease; } .sage-topbar { height: var(--sage-topbar-height); background-color: var(--sage-bg-secondary); border-bottom: 1px solid var(--sage-border-primary); display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; z-index: 100; } .sage-body { display: flex; flex: 1; overflow: hidden; } .sage-sidebar { width: var(--sage-sidebar-width); background-color: var(--sage-bg-secondary); border-right: 1px solid var(--sage-border-primary); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; transition: width 0.3s ease, transform 0.3s ease; position: relative; z-index: 50; } .sage-sidebar.collapsed { width: var(--sage-sidebar-collapsed-width); } .sage-sidebar.collapsed .sidebar-text { opacity: 0; width: 0; overflow: hidden; } /* Menu collapsed state - hide text labels, center icons */ .menu-collapsed .filler { display: none !important; } .menu-collapsed .menuitem { justify-content: center; padding: 8px 0; } .menu-collapsed .menuitem:hover { background-color: var(--sage-bg-hover); } /* Mobile: sidebar as overlay */ @media (max-width: 768px) { .sage-sidebar { position: fixed; left: 0; top: var(--sage-topbar-height); height: calc(100vh - var(--sage-topbar-height)); transform: translateX(0); box-shadow: var(--sage-shadow-lg); } .sage-sidebar.collapsed { transform: translateX(-100%); width: var(--sage-sidebar-width); /* Keep full width when hidden on mobile */ } .sage-main { width: 100%; } } .sage-main { flex: 1; overflow: hidden; overflow-x: hidden; padding: 24px; background-color: var(--sage-bg-primary); min-width: 0; /* Prevent flex item from overflowing */ min-height: 0; /* Allow flex children to shrink below content size */ transition: margin-left 0.3s ease; } /* Responsive padding for mobile */ @media (max-width: 768px) { .sage-main { padding: 16px; } } @media (max-width: 480px) { .sage-main { padding: 12px; } } /* ===== Stat Cards ===== */ .stat-card { background-color: var(--sage-bg-card); border-radius: var(--sage-radius); padding: 20px; border: 1px solid var(--sage-border-primary); box-shadow: var(--sage-shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease; cursor: pointer; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--sage-shadow-lg); } .stat-card .stat-icon { width: 40px; height: 40px; border-radius: var(--sage-radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--sage-text-primary); line-height: 1.2; } .stat-card .stat-label { font-size: 14px; color: var(--sage-text-secondary); margin-top: 4px; } .stat-card .stat-trend { font-size: 13px; margin-top: 8px; } .stat-card .stat-trend.up { color: var(--sage-success); } .stat-card .stat-trend.down { color: var(--sage-danger); } /* ===== Quick Links ===== */ .quick-link { background-color: var(--sage-bg-card); border-radius: var(--sage-radius); padding: 20px; border: 1px solid var(--sage-border-primary); box-shadow: var(--sage-shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease; cursor: pointer; text-align: center; } .quick-link:hover { transform: translateY(-2px); box-shadow: var(--sage-shadow-lg); border-color: var(--sage-brand); } /* ===== Section Headers ===== */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-title { font-size: 18px; font-weight: 600; color: var(--sage-text-primary); } /* ===== Buttons ===== */ .sage-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--sage-radius-sm); border: none; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.15s ease; } .sage-btn-primary { background-color: var(--sage-brand); color: #FFFFFF; } .sage-btn-primary:hover { background-color: var(--sage-brand-hover); } .sage-btn-ghost { background-color: transparent; color: var(--sage-text-secondary); border: 1px solid var(--sage-border-primary); } .sage-btn-ghost:hover { background-color: var(--sage-bg-hover); color: var(--sage-text-primary); } /* ===== Theme Toggle Button ===== */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sage-border-primary); background-color: transparent; color: var(--sage-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background-color: var(--sage-bg-hover); color: var(--sage-text-primary); } /* ===== Sidebar Toggle ===== */ .sidebar-toggle { width: 36px; height: 36px; border-radius: var(--sage-radius-sm); border: 1px solid var(--sage-border-primary); background-color: transparent; color: var(--sage-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .sidebar-toggle:hover { background-color: var(--sage-bg-hover); color: var(--sage-text-primary); } /* ===== Breadcrumb ===== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sage-text-secondary); } .breadcrumb a { color: var(--sage-text-secondary); text-decoration: none; } .breadcrumb a:hover { color: var(--sage-brand); } .breadcrumb .separator { color: var(--sage-text-muted); } .breadcrumb .current { color: var(--sage-text-primary); font-weight: 500; } /* ===== DataViewer Overrides for theme ===== */ .tabular-row { cursor: pointer; } [data-theme="dark"] .dataviewer-toolbar, [data-theme="dark"] .tabular, [data-theme="dark"] .data-row, [data-theme="dark"] body { background-color: var(--sage-bg-primary); color: var(--sage-text-primary); } [data-theme="dark"] .tabular-header-row { background-color: var(--sage-bg-secondary); color: var(--sage-text-secondary); border-color: var(--sage-border-primary); } [data-theme="dark"] .tabular-row { color: var(--sage-text-primary); } [data-theme="dark"] .tabular-row:nth-child(odd) { background-color: var(--sage-bg-card); } [data-theme="dark"] .tabular-row:nth-child(even) { background-color: var(--sage-bg-secondary); } [data-theme="dark"] .tabular-row-selected { background-color: var(--sage-bg-hover) !important; } [data-theme="dark"] .tabular-row-selected, [data-theme="dark"] .tabular-row-selected .tabular-cell { color: var(--sage-brand) !important; } /* Light theme selected row */ [data-theme="light"] .tabular-row-selected { background-color: #E0F2FE !important; } [data-theme="light"] .tabular-row-selected, [data-theme="light"] .tabular-row-selected .tabular-cell { color: #0369A1 !important; } [data-theme="dark"] .tabular-cell { border-color: var(--sage-border-weak); color: var(--sage-text-primary); } [data-theme="dark"] .popup, [data-theme="dark"] .modal, [data-theme="dark"] .message { background-color: var(--sage-bg-card); color: var(--sage-text-primary); border-color: var(--sage-border-primary); } [data-theme="dark"] .titlebar { background-color: var(--sage-bg-secondary); } [data-theme="dark"] .inputbox { background-color: var(--sage-bg-input); color: var(--sage-text-primary); border-color: var(--sage-border-primary); } [data-theme="dark"] .htoolbar, [data-theme="dark"] .vtoolbar { background-color: var(--sage-bg-toolbar); border-color: var(--sage-border-primary); } [data-theme="dark"] .accordion-item { border-color: var(--sage-border-primary); } [data-theme="dark"] .accordion-item:nth-child(odd) { background-color: var(--sage-bg-card); } [data-theme="dark"] .accordion-item:nth-child(even) { background-color: var(--sage-bg-secondary); } [data-theme="dark"] .accordion-item-header { background-color: var(--sage-bg-secondary); } [data-theme="dark"] .accordion-item-info { background-color: var(--sage-bg-card); } [data-theme="dark"] .accordion-item-selected { background-color: var(--sage-bg-hover); } [data-theme="dark"] .accordion-item-info-selected { background-color: var(--sage-bg-hover); } [data-theme="dark"] .card { background-color: var(--sage-bg-card); border-color: var(--sage-border-primary); } [data-theme="dark"] .subcard { background-color: var(--sage-bg-secondary); } [data-theme="dark"] .curpos { background-color: var(--sage-bg-hover); } [data-theme="dark"] .selected { background-color: var(--sage-bg-hover); } [data-theme="dark"] .tabpanel { background-color: var(--sage-bg-card); border-color: var(--sage-border-primary); } [data-theme="dark"] .tabpanel-content { background-color: var(--sage-bg-secondary); border-color: var(--sage-border-primary); } [data-theme="dark"] .toolbar-button { border-color: var(--sage-border-primary); } [data-theme="dark"] .toolbar-button-active { background-color: var(--sage-bg-hover); } [data-theme="dark"] .auto-textarea { background-color: var(--sage-bg-input); color: var(--sage-text-primary); border-color: var(--sage-border-primary); } [data-theme="dark"] .droparea { border-color: var(--sage-border-primary); color: var(--sage-text-secondary); } [data-theme="dark"] .droparea:hover { border-color: var(--sage-brand); color: var(--sage-brand); background: var(--sage-bg-hover); } [data-theme="dark"] .thinking-content { background-color: var(--sage-bg-secondary); } [data-theme="dark"] .resp-error { background-color: rgba(239, 68, 68, 0.15); color: var(--sage-danger); } [data-theme="dark"] .resp-content { background-color: var(--sage-bg-card); color: var(--sage-text-primary); } [data-theme="dark"] .llm_title { background-color: var(--sage-bg-hover); } [data-theme="dark"] .progress-container { background-color: var(--sage-bg-secondary); } [data-theme="dark"] pre { background-color: var(--sage-bg-secondary); color: var(--sage-text-primary); } [data-theme="dark"] .llm_msg { background-color: var(--sage-bg-card); color: var(--sage-text-primary); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .user_msg { background-color: var(--sage-bg-hover); color: var(--sage-text-primary); } [data-theme="light"] .dataviewer-toolbar, [data-theme="light"] .tabular, [data-theme="light"] .data-row, [data-theme="light"] body { background-color: var(--sage-bg-card); color: var(--sage-text-primary); } [data-theme="light"] .tabular-header-row { background-color: var(--sage-bg-hover); color: var(--sage-text-secondary); border-color: var(--sage-border-primary); } [data-theme="light"] .tabular-row { color: var(--sage-text-primary); } [data-theme="light"] .tabular-row:nth-child(odd) { background-color: #f9fafb; } [data-theme="light"] .tabular-row:nth-child(even) { background-color: var(--sage-bg-card); } [data-theme="light"] .tabular-row-selected { color: var(--sage-brand-hover); } [data-theme="light"] .tabular-cell { border-color: var(--sage-border-weak); color: var(--sage-text-primary); } [data-theme="light"] .popup, [data-theme="light"] .modal, [data-theme="light"] .message { background-color: var(--sage-bg-card); color: var(--sage-text-primary); border-color: var(--sage-border-primary); } [data-theme="light"] .titlebar { background-color: var(--sage-bg-secondary); } [data-theme="light"] .inputbox { background-color: var(--sage-bg-input); color: var(--sage-text-primary); border-color: var(--sage-border-primary); } [data-theme="light"] .htoolbar, [data-theme="light"] .vtoolbar { background-color: var(--sage-bg-toolbar); border-color: var(--sage-border-primary); } [data-theme="light"] .accordion-item { border-color: var(--sage-border-primary); } [data-theme="light"] .accordion-item:nth-child(odd) { background-color: var(--sage-bg-card); } [data-theme="light"] .accordion-item:nth-child(even) { background-color: #f9fafb; } [data-theme="light"] .accordion-item-header { background-color: var(--sage-bg-hover); } [data-theme="light"] .accordion-item-info { background-color: var(--sage-bg-card); } [data-theme="light"] .accordion-item-selected { background-color: var(--sage-bg-hover); } [data-theme="light"] .accordion-item-info-selected { background-color: var(--sage-bg-hover); } [data-theme="light"] .card { background-color: var(--sage-bg-card); border-color: var(--sage-border-primary); } [data-theme="light"] .subcard { background-color: #f9fafb; } [data-theme="light"] .curpos { background-color: var(--sage-bg-hover); } [data-theme="light"] .selected { background-color: var(--sage-bg-hover); } [data-theme="light"] .tabpanel { background-color: var(--sage-bg-card); border-color: var(--sage-border-primary); } [data-theme="light"] .tabpanel-content { background-color: var(--sage-bg-secondary); border-color: var(--sage-border-primary); } [data-theme="light"] .toolbar-button { border-color: var(--sage-border-primary); } [data-theme="light"] .toolbar-button-active { background-color: var(--sage-bg-hover); } [data-theme="light"] .auto-textarea { background-color: var(--sage-bg-input); color: var(--sage-text-primary); border-color: var(--sage-border-primary); } [data-theme="light"] .droparea { border-color: var(--sage-border-primary); color: var(--sage-text-secondary); } [data-theme="light"] .droparea:hover { border-color: var(--sage-brand); color: var(--sage-brand); background: var(--sage-bg-hover); } [data-theme="light"] .thinking-content { background-color: var(--sage-bg-secondary); } [data-theme="light"] .resp-error { background-color: rgba(239, 68, 68, 0.1); color: var(--sage-danger); } [data-theme="light"] .resp-content { background-color: var(--sage-bg-card); color: var(--sage-text-primary); } [data-theme="light"] .llm_title { background-color: var(--sage-bg-hover); } [data-theme="light"] .progress-container { background-color: var(--sage-bg-hover); } [data-theme="light"] pre { background-color: var(--sage-bg-secondary); color: var(--sage-text-primary); } [data-theme="light"] .llm_msg { background-color: var(--sage-bg-card); color: var(--sage-text-primary); } [data-theme="light"] .user_msg { background-color: var(--sage-bg-hover); color: var(--sage-text-primary); } [data-theme="light"] .tabular { background-color: #f5f5f5; color: #1E293B; } [data-theme="light"] .tabular-header-row { background-color: #E2E8F0; color: #0F172A; font-weight: 600; } [data-theme="light"] .tabular-header-row .tabular-cell { color: #0F172A; } [data-theme="light"] .tabular-row { color: #1E293B; } [data-theme="light"] .tabular-row:nth-child(odd) { background-color: #FFFFFF; } [data-theme="light"] .tabular-row:nth-child(even) { background-color: #F8FAFC; } [data-theme="light"] .tabular-cell { border-color: #E2E8F0; color: #1E293B; } [data-theme="light"] .card { color: #1E293B; } [data-theme="light"] .inputbox { color: #1E293B; background-color: #FFFFFF; } [data-theme="light"] .popup, [data-theme="light"] .modal { color: #1E293B; } [data-theme="light"] .accordion-item-info { color: #475569; } [data-theme="light"] .toolbar-button { color: #334155; } [data-theme="light"] .message { color: #1E293B; } /* ===== Menu Overrides ===== */ [data-theme="dark"] .menu-item { color: var(--sage-text-secondary); } [data-theme="dark"] .menu-item:hover, [data-theme="dark"] .menu-item.active { background-color: var(--sage-bg-hover); color: var(--sage-text-primary); } [data-theme="light"] .menu-item { color: var(--sage-text-secondary); } [data-theme="light"] .menu-item:hover, [data-theme="light"] .menu-item.active { background-color: var(--sage-bg-hover); color: var(--sage-brand); } /* ===== Utility Classes ===== */ .sage-brand-title { color: var(--sage-text-primary); font-weight: bold; } .sage-text-secondary { color: var(--sage-text-secondary); } /* ===== Responsive - Topbar ===== */ @media (max-width: 768px) { .sage-topbar { padding: 0 8px; gap: 6px; } .sage-brand-title { font-size: 16px; } } @media (max-width: 480px) { .sage-brand-title { display: none; } } /* ===== Responsive - Stat Cards ===== */ @media (max-width: 768px) { .stat-card { padding: 14px; } .stat-card .stat-value { font-size: 22px; } .stat-card .stat-label { font-size: 12px; } .stat-card .stat-icon { width: 32px; height: 32px; margin-bottom: 8px; } .quick-link { padding: 14px; } .section-title { font-size: 16px; } }