/* Custom industrial-tech styles + 3 主题(dark / light / green) */ /* ============================================================ 主题变量(在 上切换) ============================================================ */ /* 默认 = 深色科技蓝 */ :root, [data-theme="dark"] { --bg-base: #0b1220; --bg-elevated: #111c30; --bg-overlay: #0f172a; --bg-overlay-soft: #16243d; --border-base: #1e293b; --border-soft: #16243d; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-muted: #64748b; --accent: #38bdf8; --accent-strong: #0ea5e9; --scrollbar-thumb: #1e293b; --scrollbar-thumb-hover: #334155; --row-hover: rgba(56,189,248,.04); --nav-active-bg: linear-gradient(90deg, rgba(14,165,233,.18), rgba(14,165,233,0)); --nav-active-text: #38bdf8; --nav-hover-bg: rgba(56,189,248,.08); --nav-text: #cbd5e1; } /* 浅色商务白 */ [data-theme="light"] { --bg-base: #f3f4f6; --bg-elevated: #ffffff; --bg-overlay: #f9fafb; --bg-overlay-soft: #f3f4f6; --border-base: #e5e7eb; --border-soft: #f3f4f6; --text-primary: #111827; --text-secondary: #1f2937; --text-tertiary: #4b5563; --text-muted: #6b7280; --accent: #0284c7; --accent-strong: #0369a1; --scrollbar-thumb: #d1d5db; --scrollbar-thumb-hover: #9ca3af; --row-hover: rgba(2,132,199,.05); --nav-active-bg: linear-gradient(90deg, rgba(2,132,199,.10), rgba(2,132,199,0)); --nav-active-text: #0284c7; --nav-hover-bg: rgba(2,132,199,.08); --nav-text: #1f2937; } /* 森林绿(突出"碳/低碳") */ [data-theme="green"] { --bg-base: #022c22; --bg-elevated: #064e3b; --bg-overlay: #042f2e; --bg-overlay-soft: #065f46; --border-base: #047857; --border-soft: #064e3b; --text-primary: #ecfdf5; --text-secondary: #d1fae5; --text-tertiary: #6ee7b7; --text-muted: #34d399; --accent: #10b981; --accent-strong: #059669; --scrollbar-thumb: #047857; --scrollbar-thumb-hover: #065f46; --row-hover: rgba(16,185,129,.06); --nav-active-bg: linear-gradient(90deg, rgba(16,185,129,.18), rgba(16,185,129,0)); --nav-active-text: #34d399; --nav-hover-bg: rgba(16,185,129,.08); --nav-text: #d1fae5; } html, body { background: var(--bg-base); color: var(--text-secondary); } /* ============================================================ 覆盖 Tailwind 工具类(必要时)——只针对会改色的几个高频类。 默认主题(dark)不需要覆盖,因为 Tailwind 自带的 ink 与 slate 类已经是这些色。 ============================================================ */ [data-theme="light"] .bg-ink-900, [data-theme="light"] .bg-ink-800 { background-color: var(--bg-base) !important; } [data-theme="light"] .bg-ink-700, [data-theme="light"] .bg-ink-600, [data-theme="light"] .bg-ink-500 { background-color: var(--bg-elevated) !important; } [data-theme="light"] [class*="bg-ink-700/"] { background-color: var(--bg-overlay-soft) !important; } /* 注:不覆盖 .text-white —— 该类几乎都用在深色渐变(KPI 卡、Hero、Avatar、按钮)上, 保留 white 才能正确显示。如果某处 .text-white 落在了浅色面板上,需要单独改成 .text-slate-200 */ [data-theme="light"] .text-slate-100, [data-theme="light"] .text-slate-200 { color: var(--text-primary) !important; } [data-theme="light"] .text-slate-300 { color: var(--text-secondary) !important; } [data-theme="light"] .text-slate-400 { color: var(--text-tertiary) !important; } [data-theme="light"] .text-slate-500, [data-theme="light"] .text-slate-600 { color: var(--text-muted) !important; } [data-theme="light"] .border-ink-600, [data-theme="light"] .border-ink-700, [data-theme="light"] .border-ink-500 { border-color: var(--border-base) !important; } [data-theme="green"] .bg-ink-900, [data-theme="green"] .bg-ink-800 { background-color: var(--bg-base) !important; } [data-theme="green"] .bg-ink-700, [data-theme="green"] .bg-ink-600, [data-theme="green"] .bg-ink-500 { background-color: var(--bg-elevated) !important; } [data-theme="green"] [class*="bg-ink-700/"] { background-color: var(--bg-overlay-soft) !important; } [data-theme="green"] .text-slate-100, [data-theme="green"] .text-slate-200 { color: var(--text-primary) !important; } [data-theme="green"] .text-slate-300 { color: var(--text-secondary) !important; } [data-theme="green"] .text-slate-400 { color: var(--text-tertiary) !important; } [data-theme="green"] .text-slate-500, [data-theme="green"] .text-slate-600 { color: var(--text-muted) !important; } [data-theme="green"] .border-ink-600, [data-theme="green"] .border-ink-700, [data-theme="green"] .border-ink-500 { border-color: var(--border-base) !important; } /* ============================================================ 驾驶舱 Hero 横幅 - 三主题渐变 ============================================================ */ .hero-banner { background: linear-gradient(120deg, #0f1f3d 0%, #0f172a 60%, #0a2820 100%); } .hero-banner-decor { background: radial-gradient(circle at 20% 50%, #38bdf8 0%, transparent 40%), radial-gradient(circle at 80% 30%, #10b981 0%, transparent 40%); } [data-theme="light"] .hero-banner { background: linear-gradient(120deg, #e0f2fe 0%, #ffffff 60%, #d1fae5 100%); } [data-theme="light"] .hero-banner-decor { background: radial-gradient(circle at 20% 50%, #38bdf8 0%, transparent 50%), radial-gradient(circle at 80% 30%, #10b981 0%, transparent 50%); opacity: 0.1; } [data-theme="green"] .hero-banner { background: linear-gradient(120deg, #064e3b 0%, #022c22 60%, #14532d 100%); } /* ============================================================ 滚动条 ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ============================================================ 通用组件 ============================================================ */ .nav-group-title { font-size: 11px; letter-spacing: .12em; color: var(--text-muted); padding: 12px 12px 6px; text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; color: var(--nav-text); cursor: pointer; transition: all .15s; border-left: 2px solid transparent; } .nav-item:hover { background: var(--nav-hover-bg); color: var(--text-primary); } .nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); border-left-color: var(--nav-active-text); } .nav-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); } .nav-item.active .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .kpi-card { background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-overlay) 100%); border: 1px solid var(--border-base); border-radius: 12px; padding: 18px; position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .panel { background: var(--bg-elevated); border: 1px solid var(--border-base); border-radius: 12px; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; border-radius: 6px; font-weight: 500; transition: all .15s; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--accent-strong); color: #ffffff; } .btn-primary:hover { background: var(--accent); } .btn-ghost { background: transparent; border-color: var(--border-base); color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-overlay); color: var(--text-primary); } .btn-danger { background: transparent; color: #f87171; border-color: #7f1d1d; } .btn-danger:hover { background: #7f1d1d; color: white; } .btn-xs { padding: 4px 10px; font-size: 12px; } .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .tbl thead th { text-align: left; padding: 10px 14px; background: var(--bg-overlay); color: var(--text-tertiary); font-weight: 500; font-size: 12px; letter-spacing: .04em; border-bottom: 1px solid var(--border-base); } .tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-primary); } .tbl tbody tr:hover { background: var(--row-hover); } .tbl tbody tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; } .badge-success { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); } .badge-warn { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); } .badge-danger { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); } .badge-info { background: rgba(14,165,233,.15); color: #38bdf8; border: 1px solid rgba(14,165,233,.3); } .badge-muted { background: rgba(100,116,139,.15);color: var(--text-tertiary); border: 1px solid rgba(100,116,139,.3); } .form-label { display:block; font-size:12px; color: var(--text-tertiary); margin-bottom:4px; } .form-input, .form-select { width: 100%; background: var(--bg-overlay); border: 1px solid var(--border-base); color: var(--text-primary); padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none; transition: all .15s; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56,189,248,.15); } .form-input.error { border-color: #ef4444; } .form-error { color: #f87171; font-size: 11px; margin-top: 3px; min-height: 14px; } .chart-box { background: var(--bg-elevated); border: 1px solid var(--border-base); border-radius: 12px; padding: 16px; } .chart-title { font-size: 13px; color: var(--text-secondary); font-weight: 500; display:flex; align-items:center; gap:6px; margin-bottom: 8px; } .chart-title::before { content:''; width:3px; height:14px; background: var(--accent); border-radius:2px; } .fade-in { animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }