| |
| |
| |
| |
|
|
| |
| :root { |
| --bg-main: #111111; |
| --bg-sidebar: #161616; |
| --bg-card: #1a1a1a; |
| --bg-hover: #252525; |
| --bg-input: #1e1e1e; |
| --border: #2a2a2a; |
| --border-subtle: #222222; |
| --text-primary: #e4e4e7; |
| --text-secondary: #9a9aa0; |
| --text-muted: #636368; |
| --accent: #2dd4a8; |
| --accent-hover: #22b893; |
| --accent-dim: rgba(45, 212, 168, 0.12); |
| --danger: #ef4444; |
| --bar-track: #222222; |
| --radius: 8px; |
| --sidebar-width: 260px; |
| --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| color-scheme: dark; |
| } |
|
|
| |
| @media (prefers-color-scheme: light) { |
| :root { |
| --bg-main: #fafafa; |
| --bg-sidebar: #f3f3f3; |
| --bg-card: #ffffff; |
| --bg-hover: #ebebeb; |
| --bg-input: #ffffff; |
| --border: #e2e2e2; |
| --border-subtle: #eeeeee; |
| --text-primary: #1a1a1a; |
| --text-secondary: #6b6b74; |
| --text-muted: #9a9aa0; |
| --accent: #10a37f; |
| --accent-hover: #0d8a6a; |
| --accent-dim: rgba(16, 163, 127, 0.08); |
| --danger: #d1453b; |
| --bar-track: #f0f0f0; |
| color-scheme: light; |
| } |
| } |
|
|
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| html, body { |
| height: 100%; |
| font-family: var(--font); |
| color: var(--text-primary); |
| background: var(--bg-main); |
| font-size: 13.5px; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| button, input, select, textarea { |
| font-family: inherit; |
| font-size: inherit; |
| color: inherit; |
| } |
|
|
| .hidden { display: none !important; } |
| .muted { color: var(--text-muted); font-weight: 400; } |
|
|
| |
|
|
| .app { |
| display: flex; |
| height: 100vh; |
| overflow: hidden; |
| } |
|
|
| |
|
|
| .sidebar { |
| width: var(--sidebar-width); |
| min-width: var(--sidebar-width); |
| background: var(--bg-sidebar); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| padding: 14px 12px; |
| overflow-y: auto; |
| transition: margin-left 0.2s ease; |
| } |
|
|
| .sidebar.collapsed { |
| margin-left: calc(-1 * var(--sidebar-width)); |
| } |
|
|
| .sidebar-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 4px 2px 16px 2px; |
| } |
|
|
| .brand { |
| font-weight: 600; |
| font-size: 14px; |
| letter-spacing: -0.01em; |
| } |
|
|
| .icon-btn { |
| background: transparent; |
| border: none; |
| color: var(--text-muted); |
| cursor: pointer; |
| padding: 5px 7px; |
| border-radius: 6px; |
| font-size: 12px; |
| transition: background 0.15s, color 0.15s; |
| } |
|
|
| .icon-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| |
|
|
| .upload-tile { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 10px 12px; |
| cursor: pointer; |
| margin-bottom: 12px; |
| background: var(--bg-card); |
| transition: border-color 0.15s, background 0.15s; |
| } |
|
|
| .upload-tile:hover { |
| border-color: var(--accent); |
| background: var(--accent-dim); |
| } |
|
|
| .upload-icon { |
| font-size: 15px; |
| color: var(--accent); |
| font-weight: 600; |
| } |
|
|
| .upload-text { |
| font-weight: 500; |
| color: var(--text-primary); |
| font-size: 13px; |
| } |
|
|
| |
|
|
| .file-meta { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 8px 10px; |
| margin-bottom: 14px; |
| } |
|
|
| .file-meta-name { |
| font-weight: 600; |
| font-size: 12px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .file-meta-rows { |
| color: var(--text-secondary); |
| font-size: 11.5px; |
| margin-top: 2px; |
| } |
|
|
| |
|
|
| .sidebar-section { |
| margin-bottom: 14px; |
| } |
|
|
| .sidebar-label { |
| font-size: 11px; |
| font-weight: 600; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| margin-bottom: 6px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .text-input { |
| width: 100%; |
| padding: 7px 10px; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| background: var(--bg-input); |
| color: var(--text-primary); |
| outline: none; |
| transition: border-color 0.15s; |
| } |
|
|
| .text-input:focus { |
| border-color: var(--accent); |
| } |
|
|
| .text-input:disabled, |
| .multi-select:disabled, |
| .range-input:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| .date-row { |
| display: flex; |
| gap: 6px; |
| } |
|
|
| .date-row .text-input { |
| min-width: 0; |
| } |
|
|
| .multi-select { |
| width: 100%; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| background: var(--bg-input); |
| color: var(--text-primary); |
| padding: 4px; |
| max-height: 100px; |
| } |
|
|
| .multi-select option { |
| padding: 4px 6px; |
| border-radius: 4px; |
| font-size: 12px; |
| } |
|
|
| .range-input { |
| width: 100%; |
| accent-color: var(--accent); |
| } |
|
|
| .reset-btn { |
| margin-top: auto; |
| width: 100%; |
| padding: 8px; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| background: var(--bg-card); |
| color: var(--text-secondary); |
| cursor: pointer; |
| font-weight: 500; |
| font-size: 12.5px; |
| transition: background 0.15s, color 0.15s; |
| } |
|
|
| .reset-btn:hover:not(:disabled) { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .reset-btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| |
|
|
| .main { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| min-width: 0; |
| } |
|
|
| .topbar { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 20px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .topbar-title { |
| font-weight: 600; |
| font-size: 14px; |
| flex: 1; |
| letter-spacing: -0.01em; |
| } |
|
|
| .secondary-btn { |
| padding: 7px 14px; |
| border-radius: 6px; |
| border: 1px solid var(--border); |
| background: var(--bg-card); |
| color: var(--text-primary); |
| cursor: pointer; |
| font-weight: 500; |
| font-size: 12.5px; |
| transition: background 0.15s; |
| } |
|
|
| .secondary-btn:hover:not(:disabled) { |
| background: var(--bg-hover); |
| } |
|
|
| .secondary-btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| .content { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px 28px 48px 28px; |
| } |
|
|
| |
|
|
| .empty-state { |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .empty-card { |
| text-align: center; |
| max-width: 420px; |
| } |
|
|
| .empty-icon { |
| font-size: 36px; |
| margin-bottom: 8px; |
| opacity: 0.8; |
| } |
|
|
| .empty-card h1 { |
| font-size: 20px; |
| font-weight: 600; |
| margin: 0 0 6px 0; |
| letter-spacing: -0.02em; |
| } |
|
|
| .empty-card p { |
| color: var(--text-secondary); |
| line-height: 1.55; |
| margin: 0 0 18px 0; |
| font-size: 13px; |
| } |
|
|
| .empty-upload-btn { |
| display: inline-block; |
| padding: 9px 20px; |
| background: var(--accent); |
| color: #111; |
| border-radius: 6px; |
| font-weight: 600; |
| font-size: 13px; |
| cursor: pointer; |
| transition: background 0.15s; |
| } |
|
|
| .empty-upload-btn:hover { |
| background: var(--accent-hover); |
| } |
|
|
| .empty-hint { |
| font-size: 11.5px; |
| color: var(--text-muted) !important; |
| margin-top: 12px !important; |
| } |
|
|
| |
|
|
| .metrics-row { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 12px; |
| margin-bottom: 20px; |
| } |
|
|
| .metric-card { |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 14px 16px; |
| background: var(--bg-card); |
| } |
|
|
| .metric-value { |
| font-size: 20px; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| } |
|
|
| .metric-label { |
| color: var(--text-muted); |
| font-size: 11.5px; |
| margin-top: 3px; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| } |
|
|
| |
|
|
| .tabs { |
| display: flex; |
| gap: 2px; |
| border-bottom: 1px solid var(--border); |
| margin-bottom: 14px; |
| } |
|
|
| .tab-btn { |
| padding: 8px 14px; |
| border: none; |
| background: transparent; |
| cursor: pointer; |
| color: var(--text-muted); |
| font-weight: 500; |
| font-size: 13px; |
| border-bottom: 2px solid transparent; |
| margin-bottom: -1px; |
| transition: color 0.15s; |
| } |
|
|
| .tab-btn.active { |
| color: var(--text-primary); |
| border-bottom-color: var(--accent); |
| } |
|
|
| .tab-btn:hover:not(.active) { |
| color: var(--text-secondary); |
| } |
|
|
| |
|
|
| .chart-card { |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 16px 18px; |
| background: var(--bg-card); |
| margin-bottom: 20px; |
| } |
|
|
| .chart-title { |
| font-weight: 600; |
| font-size: 13px; |
| margin-bottom: 12px; |
| color: var(--text-secondary); |
| } |
|
|
| .bar-chart { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| max-height: 580px; |
| overflow-y: auto; |
| } |
|
|
| .bar-row { |
| display: grid; |
| grid-template-columns: 160px 1fr 65px; |
| align-items: center; |
| gap: 10px; |
| font-size: 12px; |
| } |
|
|
| .bar-row .bar-label { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| color: var(--text-secondary); |
| cursor: default; |
| } |
|
|
| .bar-track { |
| background: var(--bar-track); |
| border-radius: 3px; |
| height: 16px; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .bar-fill { |
| background: var(--accent); |
| height: 100%; |
| border-radius: 3px; |
| transition: width 0.25s ease; |
| } |
|
|
| .bar-row .bar-value { |
| text-align: right; |
| color: var(--text-muted); |
| font-variant-numeric: tabular-nums; |
| font-size: 11.5px; |
| } |
|
|
| .chart-empty { |
| color: var(--text-muted); |
| padding: 20px 0; |
| text-align: center; |
| font-size: 12.5px; |
| } |
|
|
| |
|
|
| .table-section { |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: var(--bg-card); |
| padding: 16px 18px 10px 18px; |
| } |
|
|
| .table-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 10px; |
| } |
|
|
| .table-header h2 { |
| font-size: 14px; |
| font-weight: 600; |
| } |
|
|
| .table-wrap { |
| overflow-x: auto; |
| max-height: 440px; |
| overflow-y: auto; |
| border-top: 1px solid var(--border); |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 12px; |
| } |
|
|
| thead th { |
| position: sticky; |
| top: 0; |
| background: var(--bg-sidebar); |
| text-align: left; |
| padding: 8px 10px; |
| border-bottom: 1px solid var(--border); |
| color: var(--text-muted); |
| font-weight: 600; |
| cursor: pointer; |
| white-space: nowrap; |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| } |
|
|
| thead th:hover { |
| background: var(--bg-hover); |
| } |
|
|
| thead th .sort-indicator { |
| margin-left: 4px; |
| color: var(--text-muted); |
| } |
|
|
| tbody td { |
| padding: 7px 10px; |
| border-bottom: 1px solid var(--border-subtle); |
| white-space: nowrap; |
| max-width: 300px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| color: var(--text-secondary); |
| } |
|
|
| tbody tr:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .pagination { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| .pagination button { |
| border: 1px solid var(--border); |
| background: var(--bg-card); |
| border-radius: 5px; |
| padding: 4px 10px; |
| cursor: pointer; |
| color: var(--text-primary); |
| font-size: 12px; |
| transition: background 0.15s; |
| } |
|
|
| .pagination button:hover:not(:disabled) { |
| background: var(--bg-hover); |
| } |
|
|
| .pagination button:disabled { |
| opacity: 0.35; |
| cursor: not-allowed; |
| } |
|
|
| |
|
|
| .toast { |
| position: fixed; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: var(--bg-card); |
| color: var(--text-primary); |
| padding: 9px 18px; |
| border-radius: 6px; |
| font-size: 12.5px; |
| border: 1px solid var(--border); |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); |
| z-index: 999; |
| } |
|
|
| .toast.error { |
| border-color: var(--danger); |
| color: var(--danger); |
| } |
|
|
| |
|
|
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 3px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--text-muted); |
| } |
|
|
| |
|
|
| @media (max-width: 900px) { |
| .metrics-row { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| .sidebar { |
| position: fixed; |
| z-index: 50; |
| height: 100vh; |
| } |
| } |
|
|
