/* ========================================================================= StoneERP Dashboard Design System Modern SaaS visual language shared across all dashboards Light + Dark themes via [data-theme] on or any ancestor ========================================================================= */ /* ---------- 1. Design Tokens ---------- */ :root { /* Brand — anchored to app shell #1890ff */ --brand-50: #e6f7ff; --brand-100: #bae7ff; --brand-200: #91d5ff; --brand-300: #69c0ff; --brand-400: #40a9ff; --brand-500: #1890ff; --brand-600: #096dd9; --brand-700: #0050b3; --brand-800: #003a8c; /* Neutral scale (cool gray) */ --gray-50: #fafbfc; --gray-100: #f4f5f7; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Semantic */ --success: #10b981; --success-50: #ecfdf5; --success-100: #d1fae5; --warning: #f59e0b; --warning-50: #fffbeb; --warning-100: #fef3c7; --danger: #ef4444; --danger-50: #fef2f2; --danger-100: #fee2e2; --info: #3b82f6; --info-50: #eff6ff; --info-100: #dbeafe; --purple: #8b5cf6; --purple-50: #f5f3ff; --cyan: #06b6d4; /* Chart palette — color-blind safe, 8 stops */ --chart-1: #1890ff; --chart-2: #10b981; --chart-3: #f59e0b; --chart-4: #ef4444; --chart-5: #8b5cf6; --chart-6: #06b6d4; --chart-7: #ec4899; --chart-8: #84cc16; /* Surface tokens */ --bg-page: var(--gray-50); --bg-surface: #ffffff; --bg-surface-2: var(--gray-50); --bg-overlay: rgba(255, 255, 255, 0.72); --bg-hover: var(--gray-100); --bg-active: var(--gray-200); /* Text tokens */ --text-primary: var(--gray-900); --text-body: var(--gray-700); --text-secondary: var(--gray-500); --text-tertiary: var(--gray-400); --text-inverse: #ffffff; --text-link: var(--brand-600); /* Border tokens */ --border-color: var(--gray-200); --border-strong: var(--gray-300); --divider: var(--gray-200); /* Spacing — 4px base */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px; /* Shadow */ --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow: 0 4px 12px rgba(17, 24, 39, 0.08); --shadow-md: 0 8px 20px rgba(17, 24, 39, 0.10); --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12); --shadow-focus: 0 0 0 3px rgba(24, 144, 255, 0.18); /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "SF Mono", Monaco, Consolas, "Liberation Mono", monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.55; --lh-relaxed: 1.7; /* Motion */ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index */ --z-base: 1; --z-sticky: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1200; } [data-theme="dark"] { --bg-page: #0f172a; --bg-surface: #1e293b; --bg-surface-2: #0f172a; --bg-overlay: rgba(15, 23, 42, 0.72); --bg-hover: #334155; --bg-active: #475569; --text-primary: #f1f5f9; --text-body: #cbd5e1; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-link: #40a9ff; --border-color: #334155; --border-strong: #475569; --divider: #334155; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(24, 144, 255, 0.32); } /* ---------- 2. Reset (minimal, layered) ---------- */ .dash-page *, .dash-page *::before, .dash-page *::after { box-sizing: border-box; } /* !! 重要:不能用 html {} 或 body {} 这样的全局选择器 !! uniGUI TUniHTMLFrame 用 div 注入(不是 iframe),dashboard.css 会泄漏到主页, 影响整个 ExtJS 布局,导致 TabBar 消失、页面闪烁。 所有样式必须以 .dash-page 或更具体的选择器开头,确保只在看板作用域内生效。 */ .dash-page { color: var(--text-body); font-family: var(--font-sans); } .dash-page h1, .dash-page h2, .dash-page h3, .dash-page h4 { margin: 0; color: var(--text-primary); font-weight: 600; line-height: var(--lh-tight); } .dash-page p { margin: 0; } .dash-page a { color: var(--text-link); text-decoration: none; } .dash-page a:hover { text-decoration: underline; } /* ---------- 3. Layout primitives ---------- */ .dash-page { margin: 0; padding: var(--sp-6); background: var(--bg-page); color: var(--text-body); font-size: var(--text-base); line-height: var(--lh-normal); /* 用 absolute + inset:0 让 .dash-page 填满 HTMLFrame 的 body div(父级 ExtJS 容器)。 父容器有显式高度(= HTMLFrame 控件高度),所以 absolute 能正确取到尺寸。 overflow-y: auto 让 .dash-page 自己成为滚动容器。 绝不使用 height: 100vh/100%,因为 uniGUI div 注入模式下 100vh=浏览器视口 (会撑爆),100% 又依赖父级显式 height(不稳定)。 */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } .dash-page.--compact { padding: var(--sp-4); } .dash-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; } .dash-header__title { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .dash-header__subtitle { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--text-secondary); } .dash-header__actions { display: flex; gap: var(--sp-2); align-items: center; } .dash-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(12, 1fr); } .dash-grid > * { grid-column: span 12; } .dash-grid.--cols-2 > * { grid-column: span 6; } .dash-grid.--cols-3 > * { grid-column: span 4; } .dash-grid.--cols-4 > * { grid-column: span 3; } .dash-grid.--cols-6 > * { grid-column: span 2; } @container (max-width: 1100px) { .dash-grid.--cols-4 > *, .dash-grid.--cols-6 > * { grid-column: span 6; } } @container (max-width: 760px) { .dash-grid > *, .dash-grid.--cols-2 > *, .dash-grid.--cols-3 > *, .dash-grid.--cols-4 > *, .dash-grid.--cols-6 > * { grid-column: span 12; } } .dash-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; } .dash-stack { display: flex; flex-direction: column; gap: var(--sp-3); } .dash-spacer { flex: 1 1 auto; } /* ---------- 4. Panel (card container) ---------- */ .panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); } .panel.--hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .panel.--flush { padding: 0; } .panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--divider); } .panel__title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--sp-2); } .panel__title-icon { color: var(--brand-500); font-size: var(--text-xl); } .panel__subtitle { font-size: var(--text-sm); color: var(--text-secondary); } .panel__actions { display: flex; gap: var(--sp-2); align-items: center; } .panel__body { padding: var(--sp-6); } .panel__body.--flush { padding: 0; } .panel__footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--divider); background: var(--bg-surface-2); font-size: var(--text-sm); color: var(--text-secondary); } /* ---------- 5. KPI Tile ---------- */ .kpi-tile { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-2); position: relative; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .kpi-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-500); opacity: 0; transition: opacity var(--transition); } .kpi-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-200); } .kpi-tile:hover::before { opacity: 1; } .kpi-tile__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); } .kpi-tile__label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; text-transform: none; } .kpi-tile__icon { width: 36px; height: 36px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand-600); font-size: var(--text-lg); } [data-theme="dark"] .kpi-tile__icon { background: rgba(24, 144, 255, 0.16); color: var(--brand-200); } .kpi-tile__value { font-size: var(--text-3xl); font-weight: 700; color: var(--text-primary); line-height: var(--lh-tight); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi-tile__value-sub { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; margin-left: var(--sp-1); } .kpi-tile__delta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; } .kpi-tile__delta--up { color: var(--success); background: var(--success-50); } .kpi-tile__delta--down { color: var(--danger); background: var(--danger-50); } .kpi-tile__delta--flat { color: var(--text-secondary); background: var(--gray-100); } [data-theme="dark"] .kpi-tile__delta--up { background: rgba(16, 185, 129, 0.16); } [data-theme="dark"] .kpi-tile__delta--down { background: rgba(239, 68, 68, 0.16); } [data-theme="dark"] .kpi-tile__delta--flat { background: rgba(148, 163, 184, 0.16); } .kpi-tile__footer { font-size: var(--text-xs); color: var(--text-tertiary); display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); } .kpi-tile.--accent-success .kpi-tile__icon { background: var(--success-50); color: var(--success); } .kpi-tile.--accent-warning .kpi-tile__icon { background: var(--warning-50); color: var(--warning); } .kpi-tile.--accent-danger .kpi-tile__icon { background: var(--danger-50); color: var(--danger); } .kpi-tile.--accent-info .kpi-tile__icon { background: var(--info-50); color: var(--info); } .kpi-tile.--accent-purple .kpi-tile__icon { background: var(--purple-50); color: var(--purple); } [data-theme="dark"] .kpi-tile.--accent-success .kpi-tile__icon { background: rgba(16,185,129,0.16); } [data-theme="dark"] .kpi-tile.--accent-warning .kpi-tile__icon { background: rgba(245,158,11,0.16); } [data-theme="dark"] .kpi-tile.--accent-danger .kpi-tile__icon { background: rgba(239,68,68,0.16); } [data-theme="dark"] .kpi-tile.--accent-info .kpi-tile__icon { background: rgba(59,130,246,0.16); } [data-theme="dark"] .kpi-tile.--accent-purple .kpi-tile__icon { background: rgba(139,92,246,0.16); } /* ---------- 6. Data Table ---------- */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); } .data-table thead th { text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-color); white-space: nowrap; position: sticky; top: 0; z-index: var(--z-base); } .data-table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); color: var(--text-body); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--bg-hover); } .data-table__num { text-align: right; font-variant-numeric: tabular-nums; } .data-table__primary { color: var(--text-primary); font-weight: 600; } .data-table__mono { font-family: var(--font-mono); font-size: var(--text-xs); } .data-table__muted { color: var(--text-secondary); } /* ---------- 7. Pill / Badge ---------- */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 10px; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); line-height: 1.6; white-space: nowrap; background: var(--gray-100); color: var(--text-secondary); } .pill--success { background: var(--success-50); color: var(--success); } .pill--warning { background: var(--warning-50); color: var(--warning); } .pill--danger { background: var(--danger-50); color: var(--danger); } .pill--info { background: var(--info-50); color: var(--info); } .pill--brand { background: var(--brand-50); color: var(--brand-600); } .pill--purple { background: var(--purple-50); color: var(--purple); } [data-theme="dark"] .pill--success { background: rgba(16,185,129,0.16); } [data-theme="dark"] .pill--warning { background: rgba(245,158,11,0.16); } [data-theme="dark"] .pill--danger { background: rgba(239,68,68,0.16); } [data-theme="dark"] .pill--info { background: rgba(59,130,246,0.16); } [data-theme="dark"] .pill--brand { background: rgba(24,144,255,0.16); } [data-theme="dark"] .pill--purple { background: rgba(139,92,246,0.16); } [data-theme="dark"] .pill { background: rgba(148,163,184,0.16); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- 8. Alert Row ---------- */ .alert-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border-left: 3px solid var(--info); background: var(--info-50); transition: background var(--transition-fast); } .alert-row:hover { background: var(--info-100); } .alert-row.--warning { border-left-color: var(--warning); background: var(--warning-50); } .alert-row.--warning:hover { background: var(--warning-100); } .alert-row.--danger { border-left-color: var(--danger); background: var(--danger-50); } .alert-row.--danger:hover { background: var(--danger-100); } .alert-row.--success { border-left-color: var(--success); background: var(--success-50); } .alert-row.--success:hover { background: var(--success-100); } [data-theme="dark"] .alert-row { background: rgba(59,130,246,0.08); } [data-theme="dark"] .alert-row.--warning { background: rgba(245,158,11,0.10); } [data-theme="dark"] .alert-row.--danger { background: rgba(239,68,68,0.10); } [data-theme="dark"] .alert-row.--success { background: rgba(16,185,129,0.10); } .alert-row__icon { font-size: var(--text-lg); line-height: 1.4; flex-shrink: 0; } .alert-row__body { flex: 1; min-width: 0; } .alert-row__title { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); } .alert-row__meta { color: var(--text-secondary); font-size: var(--text-xs); margin-top: 2px; } /* ---------- 9. Empty State ---------- */ .empty-state { text-align: center; padding: var(--sp-9) var(--sp-6); color: var(--text-secondary); } .empty-state__icon { font-size: 48px; color: var(--text-tertiary); margin-bottom: var(--sp-3); opacity: 0.7; } .empty-state__title { font-size: var(--text-md); font-weight: 600; color: var(--text-body); margin-bottom: var(--sp-1); } .empty-state__hint { font-size: var(--text-sm); color: var(--text-secondary); } /* ---------- 10. Skeleton ---------- */ .skeleton { background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite; border-radius: var(--radius-sm); display: inline-block; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton.--text { width: 100%; height: 12px; margin: 4px 0; } .skeleton.--title { width: 60%; height: 20px; } .skeleton.--tile { width: 100%; height: 96px; } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%); background-size: 200% 100%; } /* ---------- 11. Chart host ---------- */ .chart-host { width: 100%; min-height: 280px; position: relative; } .chart-host.--sm { min-height: 200px; } .chart-host.--lg { min-height: 360px; } /* ---------- 12. Tabs ---------- */ .tabs { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--gray-100); border-radius: var(--radius); border: 1px solid var(--border-color); } [data-theme="dark"] .tabs { background: var(--bg-surface-2); } .tab { padding: var(--sp-2) var(--sp-4); border: none; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; font-family: inherit; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; } .tab:hover { color: var(--text-primary); background: var(--bg-hover); } .tab--active { background: var(--bg-surface); color: var(--brand-600); font-weight: 600; box-shadow: var(--shadow-xs); } [data-theme="dark"] .tab--active { background: var(--bg-active); color: var(--brand-200); } .tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; font-size: var(--text-xs); font-weight: 700; background: var(--bg-active); color: var(--text-secondary); border-radius: var(--radius-full); } .tab--active .tab__count { background: var(--brand-50); color: var(--brand-600); } /* ---------- 13. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); font-weight: 500; font-family: inherit; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-body); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .btn:hover { background: var(--bg-hover); border-color: var(--border-strong); } .btn:active { background: var(--bg-active); } .btn--primary { background: var(--brand-500); border-color: var(--brand-500); color: #fff; } .btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); } .btn--ghost { background: transparent; border-color: transparent; } .btn--ghost:hover { background: var(--bg-hover); } .btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); } .btn--lg { padding: var(--sp-3) var(--sp-5); font-size: var(--text-md); } .btn--icon { padding: var(--sp-2); width: 32px; height: 32px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- 14. Form controls ---------- */ .input, .select { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-family: inherit; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: 32px; } .input:focus, .select:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--shadow-focus); } /* ---------- 15. Utility ---------- */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-muted { color: var(--text-secondary); } .text-strong { color: var(--text-primary); font-weight: 600; } .text-num { font-variant-numeric: tabular-nums; } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-info { color: var(--info); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .rounded { border-radius: var(--radius); } .rounded-full { border-radius: var(--radius-full); } .hidden { display: none !important; } .cursor-pointer { cursor: pointer; } /* ---------- 16. Scrollbar polish ---------- */ .dash-page ::-webkit-scrollbar { width: 10px; height: 10px; } .dash-page ::-webkit-scrollbar-track { background: transparent; } .dash-page ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; } .dash-page ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: padding-box; border: 2px solid transparent; } [data-theme="dark"] .dash-page ::-webkit-scrollbar-thumb { background: #475569; background-clip: padding-box; border: 2px solid transparent; }