yumoqing/dashboard_for_sage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dashboard_for_sage/wwwroot/shell_theme.css
yumoqing ffdc7fc983 feat: modern UI redesign - shell layout, theme switching, dashboard revamp 
Phase 1-2 deliverables:
- shell.ui: Global layout framework (topbar + collapsible sidebar + main content)
- shell_theme.css: Dark/light theme CSS custom properties system
- shell_theme.js: Theme toggle + sidebar collapse with localStorage persistence
- global_menu.ui: Unified module navigation menu with RBAC visibility
- index.ui: Redesigned dashboard homepage with modern stat cards + quick links
- Stat card widgets: today_usage, today_amount, total_users, concurrent, errors
- chart_top_models.ui + api/top_models.dspy: ChartBar with data_url pattern
- table_top_users_amount.ui: Jinja2-rendered user ranking table
- build.sh: Added .css file linking support

Design system:
- Dark theme (default): slate color palette (#0B1120, #111827, #1E293B)
- Light theme: clean white palette with matching structure
- Theme persisted in localStorage, toggled via topbar button
- Sidebar collapsible with icon-only mode, state persisted in localStorage
- Responsive stat cards with hover effects and trend indicators
- Quick link cards for model management, users, knowledge base, errors
2026-05-25 16:53:36 +08:00

394 lines
8.4 KiB
CSS
Raw Blame History

/* Sage Modern UI Theme System
Dark/Light theme switching via CSS custom properties
Applied to <html> 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;
}
/* ===== Shell Layout ===== */
.sage-shell {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.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.25s ease;
}
.sage-sidebar.collapsed {
width: var(--sage-sidebar-collapsed-width);
}
.sage-sidebar.collapsed .sidebar-text {
opacity: 0;
width: 0;
overflow: hidden;
}
.sage-main {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 24px;
background-color: var(--sage-bg-primary);
}
/* ===== 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 ===== */
[data-theme="dark"] .dataviewer-toolbar,
[data-theme="dark"] .tabular,
[data-theme="dark"] .data-row {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
}
[data-theme="dark"] .tabular th {
background-color: var(--sage-bg-secondary);
color: var(--sage-text-secondary);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .tabular td {
border-color: var(--sage-border-weak);
}
[data-theme="light"] .dataviewer-toolbar,
[data-theme="light"] .tabular,
[data-theme="light"] .data-row {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
}
[data-theme="light"] .tabular th {
background-color: var(--sage-bg-hover);
color: var(--sage-text-secondary);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .tabular td {
border-color: var(--sage-border-weak);
}
/* ===== 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);
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.sage-sidebar {
position: fixed;
left: 0;
top: var(--sage-topbar-height);
bottom: 0;
z-index: 200;
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.sage-sidebar.mobile-open {
transform: translateX(0);
}
}
Reference in New Issue View Git Blame Copy Permalink