/** * 统一样式文件 — 深色 OLED 预警指挥台 * 设计基调：午夜蓝 + 青色高亮；玻璃卡片；黄/橙/红为语义色核；等宽数字。 */ /* ===== 基础样式 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Color tokens */ --primary-color: #38bdf8; --primary-deep: #0ea5e9; --primary-hover: #7dd3fc; --primary-contrast: #060b14; --success-color: #22c55e; --warning-color: #fbbf24; --danger-color: #f87171; --orange-color: #fb923c; --on-success: #06120a; --on-warning: #201500; --on-danger: #1c0505; --on-orange: #1c0a00; --on-muted: #060b14; --bg-color: #070b14; --surface-color: #0f1728; --surface-raised: #15223a; --text-color: #e2e8f0; --muted-color: #94a3b8; --border-color: #1e2a3d; /* OLED glass */ --glass-bg: rgba(15, 23, 40, 0.72); --glass-border: rgba(56, 189, 248, 0.14); --glass-blur: 14px; /* Sidebar */ --sidebar-bg-a: #0b1424; --sidebar-bg-b: #0a1120; --sidebar-text: #dbeafe; --sidebar-link-text: #bae6fd; --sidebar-link-bg: rgba(14, 165, 233, 0.16); --sidebar-link-border: rgba(125, 211, 252, 0.22); --sidebar-link-dot: rgba(125, 211, 252, 0.45); --sidebar-link-dot-active: #38bdf8; --sidebar-accent: #7dd3fc; --brand-text: #f0f9ff; --brand-sub: #7dd3fc; --sidebar-service-border: rgba(186, 230, 253, 0.18); --sidebar-service-bg: rgba(2, 132, 199, 0.1); --sidebar-service-text: #bae6fd; /* Overlays */ --overlay-bg: rgba(7, 11, 20, 0.78); --scrim-bg: rgba(3, 6, 12, 0.7); --map-pin-ring: #0f1728; /* Typography scale */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* Layout */ --card-radius: 14px; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-hover: 0 12px 34px rgba(56, 189, 248, 0.16); --sidebar-width: 248px; /* Button tokens */ --btn-radius: 9px; --btn-padding: 10px 15px; --btn-font-size: var(--font-size-base); /* Card tokens */ --card-bg: var(--surface-color); --card-padding: 20px 18px; /* Semantic status colors (text + bg pairs) */ --color-success-text: #86efac; --color-success-bg: rgba(34, 197, 94, 0.16); --color-warning-text: #fde047; --color-warning-bg: rgba(250, 204, 21, 0.15); --color-danger-text: #fca5a5; --color-danger-bg: rgba(248, 113, 113, 0.15); --color-info-text: #7dd3fc; --color-info-bg: rgba(56, 189, 248, 0.14); --color-muted-text: #94a3b8; --color-muted-bg: rgba(148, 163, 184, 0.14); --color-orange-text: #fdba74; --color-orange-bg: rgba(251, 146, 60, 0.16); } /* ===== 浅色主题 ===== * 通过 覆盖 token，其余样式无需改动即可整体换肤。 */ :root[data-theme="light"] { --primary-color: #0284c7; --primary-deep: #0369a1; --primary-hover: #0369a1; --primary-contrast: #ffffff; --success-color: #16a34a; --warning-color: #d97706; --danger-color: #dc2626; --orange-color: #ea580c; --on-success: #ffffff; --on-warning: #ffffff; --on-danger: #ffffff; --on-orange: #ffffff; --on-muted: #ffffff; --bg-color: #eef2f7; --surface-color: #ffffff; --surface-raised: #f1f5f9; --text-color: #0f172a; --muted-color: #64748b; --border-color: #e2e8f0; --glass-bg: rgba(255, 255, 255, 0.82); --glass-border: rgba(2, 132, 199, 0.18); --shadow: 0 8px 28px rgba(15, 23, 42, 0.1); --shadow-hover: 0 12px 34px rgba(2, 132, 199, 0.16); --sidebar-bg-a: #ffffff; --sidebar-bg-b: #f1f5f9; --sidebar-text: #334155; --sidebar-link-text: #475569; --sidebar-link-bg: rgba(2, 132, 199, 0.1); --sidebar-link-border: rgba(2, 132, 199, 0.22); --sidebar-link-dot: rgba(2, 132, 199, 0.35); --sidebar-link-dot-active: #0284c7; --sidebar-accent: #0369a1; --brand-text: #0f172a; --brand-sub: #0369a1; --sidebar-service-border: rgba(2, 132, 199, 0.2); --sidebar-service-bg: rgba(2, 132, 199, 0.08); --sidebar-service-text: #334155; --overlay-bg: rgba(238, 242, 247, 0.85); --scrim-bg: rgba(15, 23, 42, 0.45); --map-pin-ring: #ffffff; --color-success-text: #15803d; --color-success-bg: rgba(22, 163, 74, 0.12); --color-warning-text: #b45309; --color-warning-bg: rgba(217, 119, 6, 0.13); --color-danger-text: #b91c1c; --color-danger-bg: rgba(220, 38, 38, 0.12); --color-info-text: #0369a1; --color-info-bg: rgba(2, 132, 199, 0.12); --color-muted-text: #64748b; --color-muted-bg: rgba(100, 116, 139, 0.12); --color-orange-text: #c2410c; --color-orange-bg: rgba(234, 88, 12, 0.12); } html, body { width: 100%; overflow-x: hidden; background: var(--bg-color); color: var(--text-color); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.6; } body { min-height: 100vh; background: radial-gradient(1200px 600px at 85% -10%, rgba(14, 165, 233, 0.08), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(37, 99, 235, 0.07), transparent 55%), var(--bg-color); font-size: 15px; } button, input, select, textarea { font: inherit; } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); text-decoration: underline; } img, canvas, video { max-width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Skip link ===== */ .skip-link { position: absolute; top: -100px; left: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--primary-color); color: var(--primary-contrast); font-weight: 600; border-radius: var(--card-radius); z-index: 100; transition: top 0.15s ease; text-decoration: none; } .skip-link:focus { top: var(--space-4); outline: 2px solid var(--primary-color); outline-offset: 2px; } /* ===== Focus visible ===== */ :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 4px; } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .workspace-sidebar { transition: none; } } /* ===== Workspace shell ===== */ .workspace-container { max-width: none; min-height: 100vh; margin: 0; padding: 0 32px 0 calc(var(--sidebar-width) + 36px); } .workspace-nav { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 20; } .workspace-sidebar { display: flex; flex-direction: column; height: 100%; padding: 28px 18px 20px; background: linear-gradient(180deg, var(--sidebar-bg-a) 0%, var(--sidebar-bg-b) 100%); border-right: 1px solid var(--border-color); color: var(--sidebar-text); } .workspace-brand { display: flex; gap: 12px; align-items: center; margin: 0 8px 36px; } .workspace-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; font-weight: 700; box-shadow: 0 0 18px rgba(56, 189, 248, 0.35); } .workspace-brand strong, .workspace-brand small { display: block; } .workspace-brand strong { color: var(--brand-text); font-size: 16px; letter-spacing: .02em; } .workspace-brand small { color: var(--brand-sub); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .workspace-sidebar ul { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; } .workspace-sidebar a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--sidebar-link-text); font-size: 14px; font-weight: 600; transition: background .18s ease, color .18s ease, border-color .18s ease; } .workspace-sidebar a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sidebar-link-dot); flex: 0 0 auto; transition: background .18s ease; } .workspace-sidebar a:hover, .workspace-sidebar a.active { border-color: var(--sidebar-link-border); background: var(--sidebar-link-bg); color: var(--sidebar-accent); text-decoration: none; } .workspace-sidebar a.active::before, .workspace-sidebar a:hover::before { background: var(--sidebar-link-dot-active); box-shadow: 0 0 10px rgba(56, 189, 248, .8); } .workspace-sidebar a:focus-visible { outline-color: var(--primary-color); } .workspace-service { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 12px; border: 1px solid var(--sidebar-service-border); border-radius: 10px; background: var(--sidebar-service-bg); color: var(--sidebar-service-text); font-size: 12px; } .workspace-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, .7); } .workspace-service.is-online .workspace-status-dot, .workspace-global-status.is-online .workspace-status-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .7); } .workspace-service.is-offline .workspace-status-dot, .workspace-global-status.is-offline .workspace-status-dot { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, .7); } .workspace-nav-toggle { display: none; } .workspace-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 0 10px; } .workspace-topbar-title { min-width: 0; } .workspace-topbar h1 { margin: 0; color: var(--text-color); font-size: 22px; line-height: 1.2; letter-spacing: -.025em; } .workspace-topbar-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .workspace-clock { font-variant-numeric: tabular-nums; color: var(--muted-color); font-size: 13px; padding: 0 2px; letter-spacing: .02em; } .workspace-refresh-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-color); color: var(--text-color); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .workspace-refresh-btn:hover { border-color: var(--primary-color); background: var(--primary-color); color: var(--primary-contrast); } .workspace-refresh-btn:active { transform: scale(.97); } .workspace-global-status { display: flex; gap: 8px; align-items: center; padding: 9px 13px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-color); color: var(--muted-color); font-size: 12px; } .workspace-main { max-width: 1400px; margin: 0 auto; padding: 0 0 28px; } .workspace-footer { margin: 0; padding: 16px 0 24px; text-align: left; color: var(--muted-color); } .footer-help-link { color: var(--primary-color); } .workspace-alert-rail { display: grid; gap: 10px; margin: 0 auto 16px; max-width: 1400px; } .workspace-alert-rail .warning-display { margin: 0; } .workspace-alert-rail .warning-panel { margin: 0; } .workspace-alert-rail .warning-panel-empty { padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--glass-bg); color: var(--muted-color); font-size: 13px; } /* ===== 主内容区 ===== */ main { background: transparent; padding: 0; box-shadow: none; border-radius: 0; } section { margin-bottom: 0; } header { background-color: transparent; color: var(--text-color); padding: 0; border-radius: 0; margin-bottom: 0; } nav ul { list-style: none; display: flex; gap: 20px; padding: 0; } footer { margin-top: 20px; text-align: center; color: var(--muted-color); font-size: 0.9rem; padding: 20px; } /* ===== 模块与玻璃卡片 ===== */ .module, .info-container { border: 1px solid var(--glass-border); border-radius: var(--card-radius); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow); } .module { padding: 20px 18px; margin-bottom: 10px; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .module:hover { box-shadow: var(--shadow-hover); border-color: rgba(56, 189, 248, 0.28); } .hero-module { border-color: rgba(56, 189, 248, 0.3); } .module-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; } .module-title h2 { margin: 0; color: var(--text-color); font-size: 1.25rem; letter-spacing: -.02em; } .module-eyebrow { display: block; margin-bottom: 4px; color: var(--primary-color); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .module-desc { margin: -8px 0 14px; color: var(--muted-color); font-size: 13px; line-height: 1.5; } .module-title-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; } .module-label { font-weight: 700; font-size: 15px; color: var(--text-color); } .refresh-inline-btn { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 3px 10px; cursor: pointer; font-size: 15px; color: var(--muted-color); transition: background 0.15s, color 0.15s; } .refresh-inline-btn:hover { background: rgba(56, 189, 248, 0.12); color: var(--primary-color); } .refresh-inline-btn:active { transform: scale(0.95); } .info-container { margin: 0 0 10px; padding: 16px 18px; background: var(--glass-bg); } .info-container.is-loading { opacity: 0.65; } /* ===== 按钮 ===== */ button { background-color: var(--primary-color); color: var(--primary-contrast); border: none; padding: 10px 15px; border-radius: var(--btn-radius); cursor: pointer; margin: 5px; font-weight: 700; transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.2s; box-shadow: none; } button:hover { background-color: var(--primary-hover); box-shadow: 0 0 16px rgba(56, 189, 248, 0.35); transform: translateY(-1px); } button:active { transform: translateY(0); } button.active { background-color: var(--primary-deep); color: var(--primary-contrast); } button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } button.secondary { border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color); } button.secondary:hover { border-color: var(--primary-color); background: rgba(56, 189, 248, 0.12); color: var(--primary-color); box-shadow: none; } button.success { background-color: var(--success-color); color: var(--on-success); } button.success:hover { background-color: var(--success-color); filter: brightness(1.08); } button.warning { background-color: var(--warning-color); color: var(--on-warning); } button.warning:hover { background-color: var(--warning-color); filter: brightness(1.08); } button.danger { background-color: var(--danger-color); color: var(--on-danger); } button.danger:hover { background-color: var(--danger-color); filter: brightness(1.08); } .button-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; } .button-container button { margin: 0; } .rainfall-btn { min-width: 112px; border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color); } .rainfall-btn:hover { background: rgba(56, 189, 248, 0.14); color: var(--primary-color); box-shadow: none; } .rainfall-btn.active { border-color: var(--primary-color); background: var(--primary-color); color: var(--primary-contrast); } .location-selector { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .location-selector button { margin: 0; } /* ===== 表单 ===== */ .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-color); } input, select, .search-input, .date-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); color: var(--text-color); font-size: 1rem; transition: border 0.2s; } input::placeholder, .date-input::placeholder { color: var(--muted-color); } input:focus, select:focus, .search-input:focus, .date-input:focus { border: 1.5px solid var(--primary-color); outline: none; } select option { background: var(--surface-color); color: var(--text-color); } .form-actions { margin-top: 20px; display: flex; gap: 10px; } .form-actions button { margin: 0; } /* ===== 统计卡 ===== */ .stats-container, .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; } .stat-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); padding: 16px; box-shadow: var(--shadow); text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .stat-card h4 { margin: 0 0 10px; color: var(--text-color); font-size: 16px; } .stat-value { font-size: 24px; font-weight: 700; color: var(--primary-color); font-variant-numeric: tabular-nums; } .stat-unit { font-size: 14px; color: var(--muted-color); margin-top: 5px; } .stat-card.prediction .stat-value { color: var(--success-color); } .stat-card.actual .stat-value { color: var(--danger-color); } .stat-card.error .stat-value { color: var(--warning-color); } /* ===== 图表容器 ===== */ .chart-container { width: 100%; height: 380px; margin: 0; position: relative; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; box-shadow: none; } /* ===== 总览 ===== */ .overview-warning-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; padding: 16px 20px; border: 1px solid var(--border-color); border-left: 5px solid var(--muted-color); border-radius: 14px; background: var(--glass-bg); box-shadow: var(--shadow); } .overview-warning-banner .banner-color { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--color-muted-bg); color: var(--color-muted-text); font-size: 15px; } .overview-warning-banner .banner-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .overview-warning-banner .banner-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .overview-warning-banner .banner-place { font-size: 15px; font-weight: 700; color: var(--text-color); } .overview-warning-banner .banner-reason { font-size: 12px; color: var(--muted-color); } .overview-warning-banner .banner-freshness { margin-left: auto; font-size: 11px; color: var(--muted-color); font-variant-numeric: tabular-nums; white-space: nowrap; } .overview-warning-banner.is-watch { border-left-color: var(--warning-color); } .overview-warning-banner.is-watch .banner-color { background: var(--color-warning-bg); color: var(--color-warning-text); } .overview-warning-banner.is-alert { border-left-color: var(--danger-color); } .overview-warning-banner.is-alert .banner-color { background: var(--color-danger-bg); color: var(--color-danger-text); } .overview-warning-banner.is-none { border-left-color: var(--success-color); } .overview-warning-banner.is-none .banner-color { background: var(--color-success-bg); color: var(--color-success-text); } .overview-warning-banner.is-unknown { border-left-color: var(--muted-color); } .overview-hero { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, .65fr); gap: 22px; align-items: end; margin: 0 0 10px; padding: 20px 24px; border: 1px solid var(--glass-border); border-radius: 14px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(37, 99, 235, 0.05) 55%), var(--glass-bg); } .overview-hero-copy { min-width: 0; } .overview-kicker { color: var(--primary-color); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .overview-hero h2 { max-width: 640px; margin: 5px 0; color: var(--text-color); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.045em; } .overview-hero p { max-width: 600px; margin: 0; color: var(--muted-color); font-size: 13px; } .overview-hero-note { display: grid; gap: 4px; align-self: stretch; justify-items: start; padding: 10px 0 0 20px; border-left: 1px solid var(--border-color); color: var(--muted-color); font-size: 11px; } .overview-hero-note strong { color: var(--text-color); font-size: 14px; } .overview-hero-note-label { color: var(--primary-color); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .overview-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 10px; } .data-source-status { color: var(--muted-color); font-size: 12px; } /* KPI 条 */ .kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .kpi-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); min-width: 0; box-shadow: var(--shadow); } .kpi-card .kpi-label { font-size: 11px; letter-spacing: .04em; color: var(--muted-color); text-transform: uppercase; } .kpi-card .kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text-color); font-variant-numeric: tabular-nums; } .kpi-card .kpi-sub { font-size: 11px; color: var(--muted-color); } .kpi-card.kpi-warn-yellow .kpi-value { color: var(--warning-color); text-shadow: 0 0 16px rgba(250, 204, 21, 0.35); } .kpi-card.kpi-warn-orange .kpi-value { color: var(--orange-color); text-shadow: 0 0 16px rgba(251, 146, 60, 0.35); } .kpi-card.kpi-warn-red .kpi-value { color: var(--danger-color); text-shadow: 0 0 16px rgba(248, 113, 113, 0.4); } .kpi-card.kpi-warn-none .kpi-value { color: var(--success-color); } /* 总览网格 */ .overview-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .overview-grid > * { min-width: 0; margin-bottom: 0; } .overview-grid > [data-drag-id="rainfall"] { grid-column: 1 / -1; } .overview-grid > [data-drag-id="monitor-analysis"] { grid-column: span 6; } .overview-grid > [data-drag-id="monitor-warnings"] { grid-column: span 6; } .overview-grid > [data-drag-id="monitor-risks"] { grid-column: span 6; } .overview-grid > [data-drag-id="monitor-notifications"] { grid-column: span 6; } .overview-grid > [data-drag-id="monitor-info"] { grid-column: span 6; } /* ===== 行动结论（紧随横幅的独立卡） ===== */ .overview-action-card { margin: 0 0 10px; } .overview-action-card:empty { display: none; } /* ===== 行动结论 ===== */ .action-conclusion { padding: 18px 20px; border: 1px solid var(--glass-border); border-left: 5px solid var(--primary-color); border-radius: 14px; background: var(--glass-bg); box-shadow: var(--shadow); } .action-conclusion-kicker { color: var(--muted-color); font-size: var(--font-size-sm); font-weight: 700; } .action-conclusion-title { display: block; margin-top: 4px; font-size: 1.45rem; color: var(--text-color); letter-spacing: -.02em; } .action-conclusion-reason { margin: 5px 0 8px; color: var(--text-color); } .action-conclusion-quality { color: var(--muted-color); font-size: var(--font-size-xs); } .action-timeline { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; color: var(--muted-color); font-size: var(--font-size-sm); } .action-normal { border-left-color: var(--success-color); background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), var(--glass-bg) 60%); } .action-alert { border-left-color: var(--danger-color); background: linear-gradient(135deg, rgba(248, 113, 113, 0.14), var(--glass-bg) 55%); } .action-watch { border-left-color: var(--warning-color); background: linear-gradient(135deg, rgba(250, 204, 21, 0.13), var(--glass-bg) 55%); } .action-unknown { border-left-color: var(--muted-color); background: var(--color-muted-bg); } /* ===== 监测组件 ===== */ .monitor-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .monitor-location { font-size: 1.15rem; font-weight: 700; color: var(--text-color); } .monitor-state { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; color: var(--on-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; } .monitor-state-normal { background: var(--success-color); color: var(--on-success); } .monitor-state-watch { background: var(--warning-color); color: var(--on-warning); } .monitor-state-alert { background: var(--danger-color); color: var(--on-danger); } .monitor-state-unknown { background: var(--muted-color); color: var(--on-muted); } .monitor-state-none { background: var(--color-muted-bg); color: var(--color-muted-text); } .monitor-state-yellow { background: var(--warning-color); color: var(--on-warning); } .monitor-state-orange { background: var(--orange-color); color: var(--on-orange); } .monitor-state-red { background: var(--danger-color); color: var(--on-danger); } .monitor-strategy-summary { display: flex; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; padding: 10px 14px; border-left: 4px solid var(--primary-color); background: rgba(56, 189, 248, 0.08); border-radius: 0 8px 8px 0; font-size: 0.9rem; color: var(--muted-color); } .monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; } .monitor-grid-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface-color); border-radius: 8px; border: 1px solid var(--border-color); } .monitor-grid-label { font-size: 0.75rem; color: var(--muted-color); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .monitor-grid-value { font-size: 0.88rem; color: var(--text-color); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; } .monitor-section { margin-top: 14px; } .monitor-section-title { font-size: 0.82rem; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; } .monitor-section-title a { font-size: 0.75rem; font-weight: 400; margin-left: 6px; } .monitor-active-count { color: var(--warning-color); font-weight: 700; } /* Monitor table */ .monitor-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; } .monitor-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .monitor-table th { background: var(--surface-raised); color: var(--muted-color); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 12px; text-align: left; white-space: nowrap; } .monitor-table td { padding: 8px 12px; color: var(--text-color); border-top: 1px solid var(--border-color); white-space: nowrap; font-variant-numeric: tabular-nums; } .monitor-table tbody tr:hover { background: rgba(56, 189, 248, 0.06); } .monitor-table tbody.is-collapsed { display: none; } .monitor-table tbody.is-collapsed.is-open { display: table-row-group; } /* Monitor tags */ .monitor-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; line-height: 1.6; } .monitor-tag.level-normal { background: var(--color-success-bg); color: var(--color-success-text); } .monitor-tag.level-watch { background: var(--color-warning-bg); color: var(--color-warning-text); } .monitor-tag.level-alert { background: var(--color-danger-bg); color: var(--color-danger-text); } .monitor-tag.tag-muted { background: var(--color-muted-bg); color: var(--color-muted-text); } .monitor-tag.tag-sent { background: var(--color-success-bg); color: var(--color-success-text); } .monitor-tag.tag-failed { background: var(--color-danger-bg); color: var(--color-danger-text); } .monitor-tag.tag-suppressed { background: var(--color-muted-bg); color: var(--color-muted-text); } /* Collapsed section */ .monitor-toggle-wrap { margin-top: 8px; } .monitor-toggle-btn { background: none; border: none; color: var(--primary-color); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 4px 0; margin: 0; box-shadow: none; } .monitor-toggle-btn:hover { background: none; color: var(--primary-color); box-shadow: none; text-decoration: underline; } .monitor-collapsed { display: none; margin-top: 6px; } .monitor-collapsed.is-open { display: block; } .monitor-collapse-toggle { margin-top: 8px; } .monitor-notif-list.is-collapsed { display: none; } .monitor-notif-list.is-collapsed.is-open { display: block; } .monitor-empty { font-size: 0.85rem; color: var(--muted-color); padding: 10px 0; } /* Warning detail row */ .monitor-warning-row td { vertical-align: top; } .monitor-warning-meta { font-size: 0.8rem; color: var(--muted-color); max-width: 260px; } .monitor-warning-desc { color: var(--text-color); font-size: 0.85rem; line-height: 1.5; margin-bottom: 4px; } .monitor-warning-issuer { display: inline-block; background: var(--surface-raised); padding: 1px 6px; border-radius: 3px; margin-right: 6px; color: var(--muted-color); } .monitor-warning-time { color: var(--muted-color); } /* Notification list */ .monitor-notif-list { display: flex; flex-direction: column; gap: 6px; } .monitor-notif-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-color); border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.85rem; } .monitor-notif-detail { color: var(--text-color); font-weight: 500; flex: 1; min-width: 0; } .monitor-notif-time { color: var(--muted-color); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Color badges */ .color-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; line-height: 1.6; } .color-badge.small { padding: 1px 8px; font-size: 0.75rem; } .color-badge.large { font-size: 1rem; padding: 4px 16px; } .color-badge.color-yellow { background: var(--color-warning-bg); color: var(--color-warning-text); } .color-badge.color-orange { background: var(--color-orange-bg); color: var(--color-orange-text); } .color-badge.color-red { background: var(--color-danger-bg); color: var(--color-danger-text); } .color-badge.color-none { background: var(--color-muted-bg); color: var(--color-muted-text); } .color-none { background: var(--color-muted-bg); color: var(--color-muted-text); } .color-yellow { background: var(--warning-color); color: var(--on-warning); } .color-orange { background: var(--orange-color); color: var(--on-orange); } .color-red { background: var(--danger-color); color: var(--on-danger); } /* Analysis */ .analysis-color-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .analysis-color-text { font-size: 0.88rem; color: var(--text-color); } .analysis-notice { font-size: 0.8rem; color: var(--color-warning-text); background: var(--color-warning-bg); border: 1px solid rgba(250, 204, 21, 0.3); border-radius: 6px; padding: 6px 10px; margin: 0 0 12px; } .analysis-signals { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; } .analysis-signal { display: grid; grid-template-columns: auto 110px 1fr auto; align-items: center; gap: 8px; } .analysis-signal-name { font-size: 0.82rem; color: var(--text-color); } .analysis-progress { height: 8px; background: var(--surface-raised); border-radius: 4px; overflow: hidden; } .analysis-progress-bar { height: 100%; background: linear-gradient(90deg, #2563eb, #38bdf8); border-radius: 4px; box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); } .analysis-progress-text { font-size: 0.78rem; color: var(--muted-color); white-space: nowrap; font-variant-numeric: tabular-nums; } .analysis-quality { margin: 0 0 14px; font-size: 0.85rem; color: var(--text-color); display: flex; flex-direction: column; gap: 4px; } .analysis-freshness { color: var(--muted-color); font-size: 0.8rem; } .analysis-issues { margin: 6px 0 0; padding-left: 18px; color: var(--color-warning-text); font-size: 0.8rem; } .analysis-last-fetch { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--muted-color); } /* ===== 历史数据与表格 ===== */ .tab-content { display: none; padding: 20px 0; } .tab-content.active { display: block; } .date-range-selector { padding: 14px; } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-color); font-variant-numeric: tabular-nums; } .data-table th { background: var(--surface-raised); font-weight: 600; position: sticky; top: 0; } .data-table tr:hover { background: rgba(56, 189, 248, 0.06); } .data-table tr.expandable { cursor: pointer; } .data-table .expand-row { display: none; } .data-table .expand-row.open { display: table-row; } /* ===== Timeline（垂直时间轴） ===== */ .timeline-container { position: relative; padding-left: 28px; } .timeline-container::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(56, 189, 248, 0.4), var(--border-color)); } .timeline-node { position: relative; margin-bottom: 14px; padding: 12px 16px; background: var(--surface-color); border-radius: var(--card-radius); border-left: 3px solid var(--border-color); border: 1px solid var(--border-color); box-shadow: none; } .timeline-node summary { cursor: pointer; list-style: none; } .timeline-node summary::-webkit-details-marker { display: none; } .timeline-node::before { content: ''; position: absolute; left: -24px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--border-color); border: 2px solid var(--bg-color); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } .timeline-node.state-normal { border-left-color: var(--success-color); } .timeline-node.state-normal::before { background: var(--success-color); box-shadow: 0 0 10px rgba(34, 197, 94, 0.7); } .timeline-node.state-watch { border-left-color: var(--warning-color); } .timeline-node.state-watch::before { background: var(--warning-color); box-shadow: 0 0 10px rgba(250, 204, 21, 0.7); } .timeline-node.state-alert { border-left-color: var(--danger-color); } .timeline-node.state-alert::before { background: var(--danger-color); box-shadow: 0 0 10px rgba(248, 113, 113, 0.7); } .timeline-time { font-size: 12px; color: var(--muted-color); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .timeline-transition { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .timeline-trigger { font-size: 13px; color: var(--muted-color); } /* Status tags */ .status-tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--on-muted); } .status-tag.normal { background: var(--success-color); color: var(--on-success); } .status-tag.watch { background: var(--warning-color); color: var(--on-warning); } .status-tag.alert { background: var(--danger-color); color: var(--on-danger); } .status-tag.sent { background: var(--success-color); color: var(--on-success); } .status-tag.failed { background: var(--danger-color); color: var(--on-danger); } .status-tag.suppressed { background: var(--color-muted-bg); color: var(--color-muted-text); } .status-tag.none { background: var(--color-muted-bg); color: var(--color-muted-text); } .status-tag.yellow { background: var(--warning-color); color: var(--on-warning); } .status-tag.orange { background: var(--orange-color); color: var(--on-orange); } .status-tag.red { background: var(--danger-color); color: var(--on-danger); } .status-tag.completed { background: var(--success-color); color: var(--on-success); } .status-tag.incomplete { background: var(--color-warning-bg); color: var(--color-warning-text); } .status-tag.skipped { background: var(--color-muted-bg); color: var(--color-muted-text); } .status-tag.retried { background: var(--color-warning-bg); color: var(--color-warning-text); } .status-tag.success { background: var(--success-color); color: var(--on-success); } .status-tag.no-hit { background: var(--color-muted-bg); color: var(--color-muted-text); } .status-tag.abandoned { background: var(--color-danger-bg); color: var(--color-danger-text); } .state-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; } .state-normal { background: var(--color-success-bg); color: var(--color-success-text); } .state-watch { background: var(--color-warning-bg); color: var(--color-warning-text); } .state-alert { background: var(--color-danger-bg); color: var(--color-danger-text); } /* ===== Chart popup / modal ===== */ .chart-popup-overlay { position: fixed; inset: 0; background: var(--scrim-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; } .chart-popup { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; width: min(700px, 92vw); max-height: 80vh; overflow: auto; box-shadow: var(--shadow); } .chart-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } /* ===== Filter bar ===== */ .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; } .filter-bar .filter-group { display: flex; align-items: center; gap: 6px; } .filter-bar label { font-size: 13px; color: var(--muted-color); white-space: nowrap; } .filter-bar select, .filter-bar input[type="date"] { width: auto; min-height: auto; padding: 6px 10px; font-size: 13px; } .filter-bar button { margin: 0; } .load-more-container { text-align: center; margin: 16px 0; } /* ===== 地图与地点 ===== */ .map-container { margin: 10px 0; position: relative; width: 100%; height: 400px; } #map { width: 100%; height: 400px; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border-color); } #map img, #map canvas { max-width: none !important; max-height: none !important; } .weather-location-marker { position: relative; width: 24px; height: 34px; pointer-events: auto; } .weather-location-pin { position: absolute; left: 50%; bottom: 0; width: 20px; height: 20px; border: 3px solid var(--map-pin-ring); border-radius: 50% 50% 50% 0; background: #38bdf8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transform: translateX(-50%) rotate(-45deg); } .weather-location-pin::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--map-pin-ring); transform: translate(-50%, -50%); } .weather-location-pin.is-default { background: #22c55e; } .weather-location-label { position: absolute; left: 50%; bottom: 34px; padding: 2px 8px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-color); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); color: var(--text-color); font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; transform: translateX(-50%); } .weather-location-label::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--surface-color); transform: translateX(-50%) rotate(45deg); } .map-search-container { margin: 20px 0; } .search-box { display: flex; margin-bottom: 15px; } .search-result { max-height: 300px; overflow-y: auto; margin-top: 10px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--card-radius); box-shadow: var(--shadow); } .search-item { padding: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; } .search-item:hover { background: rgba(56, 189, 248, 0.08); } /* ===== 位置管理 ===== */ .location-manager { padding: 0; } .location-form { margin: 10px 0; padding: 18px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--card-radius); box-shadow: var(--shadow); } .location-form h3 { margin: 0 0 10px; color: var(--text-color); } .location-coordinates { margin: 12px 0; padding: 10px; background: var(--surface-raised); border-radius: 8px; border: 1px solid var(--border-color); } .coordinates-display { display: flex; justify-content: space-between; } .coordinates-display strong { font-variant-numeric: tabular-nums; } .saved-locations { margin: 12px 0; } .saved-locations-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .saved-locations-head h3 { margin: 0; color: var(--text-color); } .locations-list { margin-top: 12px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--card-radius); box-shadow: none; overflow: hidden; } .location-item { padding: 14px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .location-item:last-child { border-bottom: none; } .location-item:hover { background: rgba(56, 189, 248, 0.05); } .empty-message { color: var(--muted-color); padding: 16px; text-align: center; } .empty-container, .loading-container, .error-container { text-align: center; padding: 40px; } .empty-icon { font-size: 40px; } .error-message { color: var(--danger-color); } /* ===== 等高网格（地点与日志页） ===== */ .location-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .location-grid-col { display: flex; flex-direction: column; min-width: 0; } .location-grid .map-col { grid-column: span 7; } .location-grid .side-col { grid-column: span 5; } .location-grid .map-container { flex: 1 1 auto; margin: 0; display: flex; flex-direction: column; } .location-grid .map-container #map { flex: 1 1 auto; height: auto !important; min-height: 330px; margin-bottom: 0; } .location-grid .saved-locations { flex: 1 1 auto; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); box-shadow: var(--shadow); } .location-grid .location-form { margin: 0; padding: 14px; border: 1px solid var(--border-color); border-radius: var(--card-radius); background: var(--surface-color); } .location-grid .compare-section { margin: 0; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--card-radius); background: var(--surface-color); } .location-grid .compare-section h3 { margin: 0 0 10px; color: var(--text-color); } .location-grid .map-container, .location-grid .saved-locations, .location-grid .location-form, .location-grid .compare-section { display: flex; flex-direction: column; } .location-grid .locations-list { flex: 1 1 auto; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .location-grid .locations-list .location-item { background: transparent; } .location-grid .location-form .form-group { margin-bottom: 10px; } .location-grid .location-form .form-actions { gap: 8px; margin-top: 4px; } /* 监测目标卡 */ .monitor-target-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(56, 189, 248, 0.35); border-left: 4px solid var(--primary-color); border-radius: 12px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(37, 99, 235, 0.06)); } .monitor-target-card .target-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .monitor-target-card .target-label { font-size: 11px; color: var(--muted-color); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .monitor-target-card .target-name { font-size: 1rem; font-weight: 700; color: var(--text-color); } .monitor-target-card .target-coords { font-size: 12px; color: var(--muted-color); font-variant-numeric: tabular-nums; } .monitor-target-card .target-status { margin-left: auto; flex-shrink: 0; } .monitor-target-card .secondary { margin: 0; padding: 7px 12px; font-size: 13px; flex-shrink: 0; } .monitor-target-picker { display: none; margin-top: 10px; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-color); } .monitor-target-picker.is-open { display: block; } .monitor-target-picker h4 { margin: 0 0 8px; color: var(--text-color); font-size: 13px; } .monitor-target-picker select { margin-bottom: 10px; } .monitor-target-picker .form-actions { margin: 0; gap: 8px; } .monitor-target-picker .form-actions button { margin: 0; } .log-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .log-grid > .module { margin-bottom: 0; min-width: 0; } .log-grid .log-span-12 { grid-column: span 12; } .log-grid .log-span-7 { grid-column: span 7; } .log-grid .log-span-6 { grid-column: span 6; } .log-grid .log-span-5 { grid-column: span 5; } .log-grid .pie-fill { flex: 1 1 auto; min-height: 260px; position: relative; } /* 日志概况条 */ .log-overview-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .log-overview-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); box-shadow: var(--shadow); } .log-overview-stat .stat-label { font-size: 11px; color: var(--muted-color); text-transform: uppercase; letter-spacing: .05em; } .log-overview-stat .stat-value { font-size: 24px; font-weight: 700; color: var(--text-color); font-variant-numeric: tabular-nums; } .log-overview-stat .stat-sub { font-size: 11px; color: var(--muted-color); } /* ===== Settings ===== */ .settings-group { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); box-shadow: var(--shadow); padding: 20px 18px; margin-bottom: 10px; scroll-margin-top: 70px; } .settings-group-header { margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; } .settings-group-header h2 { margin: 0; color: var(--text-color); font-size: 1.2rem; } .settings-group-header p { margin: 4px 0 0; color: var(--muted-color); font-size: 0.85rem; } .settings-field { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-color); gap: 12px; } .settings-field:last-child { border-bottom: none; } .settings-field-label { flex: 1; min-width: 0; } .settings-field-label .label-text { font-weight: 600; color: var(--text-color); font-size: 0.95rem; } .settings-field-label .label-desc { color: var(--muted-color); font-size: 0.8rem; margin-top: 2px; } .settings-field-input { flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .settings-field-input input[type="number"] { width: 80px; text-align: right; } .settings-field-input input[type="range"] { width: 120px; } .settings-field-input select { width: auto; min-width: 80px; } .settings-field-input .unit { color: var(--muted-color); font-size: 0.8rem; } .settings-switch-label { color: var(--muted-color); font-size: 0.8rem; } .settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; } .settings-grid-cell { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; text-align: center; } .settings-grid-cell .cell-label { font-size: 0.8rem; color: var(--muted-color); margin-bottom: 8px; font-weight: 600; } .settings-grid-cell input { width: 100%; text-align: center; } .settings-grid-cell .cell-unit { font-size: 0.75rem; color: var(--muted-color); margin-top: 4px; } .settings-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .settings-actions button { flex-shrink: 0; margin: 0; } .settings-readonly { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; margin: 12px 0; } .settings-readonly .readonly-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .settings-readonly .readonly-row:last-child { border-bottom: none; } .settings-readonly .readonly-label { color: var(--muted-color); font-size: 0.9rem; } .settings-readonly .readonly-value { font-weight: 600; color: var(--text-color); font-variant-numeric: tabular-nums; } .settings-default-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem; background: var(--color-info-bg); color: var(--color-info-text); margin-left: 6px; } .settings-top-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 12px 16px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(37, 99, 235, 0.05)); border: 1px solid var(--glass-border); border-radius: 10px; flex-wrap: wrap; } .settings-top-actions button { flex-shrink: 0; } .settings-action-heading { display: flex; align-items: baseline; gap: 10px; color: var(--text-color); } .settings-action-heading strong { font-size: 1rem; } .settings-action-heading span { color: var(--muted-color); font-size: 0.82rem; } .settings-action-buttons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .settings-action-buttons button, .settings-action-buttons label { margin: 0; } .settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; } .settings-layout .settings-navigation { position: sticky; top: 8px; flex-direction: column; align-items: stretch; overflow-x: visible; margin-bottom: 0; padding: 8px; } .settings-layout .settings-navigation a { display: block; } .settings-layout .settings-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-navigation { position: sticky; top: 8px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding: 6px; background: var(--glass-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .settings-navigation a { flex: 0 0 auto; padding: 7px 11px; border-radius: 8px; color: var(--muted-color); font-size: 0.84rem; white-space: nowrap; } .settings-navigation a:hover, .settings-navigation a:focus-visible { color: var(--primary-color); background: rgba(56, 189, 248, 0.12); text-decoration: none; } .settings-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .settings-groups > .settings-group { margin-bottom: 0; } .settings-groups > #settings-colors, .settings-groups > #settings-notifications { grid-column: 1 / -1; } .settings-unified-group { grid-column: 1 / -1; border-top: 3px solid var(--primary-color); } .settings-legacy-thresholds, .settings-legacy-notifications { display: none; } .settings-subtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 10px; color: var(--text-color); font-size: .95rem; font-weight: 700; } .settings-subtitle span { color: var(--muted-color); font-size: .78rem; font-weight: 400; } .settings-current-mode { color: var(--primary-color) !important; font-weight: 600 !important; } .settings-mode-picker { display: grid; grid-template-columns: 1fr repeat(3, minmax(150px, 1fr)); gap: 10px; align-items: stretch; } .settings-mode-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; margin: 0; padding: 11px 13px; background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-color); box-shadow: none; text-align: left; } .settings-mode-option span { color: var(--muted-color); font-size: .76rem; font-weight: 400; } .settings-mode-option.active { background: rgba(56, 189, 248, 0.14); color: var(--primary-color); border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); } .settings-core-table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid var(--border-color); border-radius: 7px; } .settings-core-table th, .settings-core-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-color); text-align: left; font-variant-numeric: tabular-nums; } .settings-core-table thead th { background: var(--surface-raised); color: var(--muted-color); font-size: .8rem; } .settings-core-table tbody th { width: 30%; color: var(--text-color); font-size: .88rem; } .settings-core-table tbody th small { display: block; margin-top: 2px; color: var(--muted-color); font-size: .72rem; font-weight: 400; } .settings-core-table input { width: 90px; text-align: right; } .settings-muted-value { color: var(--muted-color); font-size: .8rem; } .settings-advanced-rules { margin-top: 16px; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); } .settings-advanced-rules summary { display: flex; justify-content: space-between; cursor: pointer; color: var(--text-color); } .settings-advanced-rules summary span, .settings-advanced-rules p { color: var(--muted-color); font-size: .78rem; font-weight: 400; } .settings-advanced-rules p { margin: 10px 0 0; } .settings-advanced-rules .settings-monitor-groups { margin-top: 12px; } .settings-note { color: var(--muted-color); font-size: 0.8rem; font-style: italic; margin-top: 8px; } .settings-disconnected { text-align: center; padding: 30px; color: var(--muted-color); } .settings-threshold-table { width: 100%; border-collapse: collapse; margin: 12px 0; } .settings-threshold-table th, .settings-threshold-table td { padding: 10px 8px; text-align: center; border: 1px solid var(--border-color); font-size: 0.9rem; } .settings-threshold-table th { background: var(--surface-raised); font-weight: 600; color: var(--text-color); } .settings-threshold-table td input { width: 70px; text-align: center; } .settings-threshold-details { margin-top: 16px; padding: 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); } .settings-threshold-details h3 { margin: 0 0 6px; color: var(--text-color); font-size: 1rem; } .settings-threshold-details p { margin: 0 0 12px; color: var(--muted-color); font-size: 0.85rem; } .settings-monitor-groups { display: flex; flex-direction: column; gap: 10px; } .settings-monitor-group { border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); overflow: hidden; } .settings-monitor-group summary { cursor: pointer; padding: 10px 14px; background: var(--surface-raised); display: flex; justify-content: space-between; align-items: center; } .settings-monitor-group summary strong { font-size: 0.9rem; color: var(--text-color); } .settings-monitor-group-note { font-size: 0.78rem; color: var(--muted-color); } .settings-affects { margin: 6px 14px 0; font-size: 0.78rem; color: var(--muted-color); font-style: italic; } .settings-monitor-threshold-table { width: 100%; border-collapse: collapse; margin-top: 4px; } .settings-monitor-threshold-table th { font-size: 0.78rem; color: var(--muted-color); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); font-weight: 600; } .settings-monitor-threshold-table td { padding: 6px 10px; font-size: 0.85rem; border-bottom: 1px solid var(--border-color); } .settings-monitor-threshold-table td:first-child { white-space: nowrap; } .settings-monitor-threshold-table input { width: 80px; } .stats-col { text-align: center; width: 120px; font-size: 0.82rem; color: var(--muted-color); } .settings-shared-badge { display: inline-block; font-size: 0.7rem; color: var(--primary-contrast); background: var(--primary-color); border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; } .settings-layout-list { display: flex; flex-direction: column; gap: 6px; } .settings-layout-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; } .settings-layout-vis { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; } .settings-layout-vis input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-color); } .settings-layout-vis span { font-size: 14px; color: var(--text-color); } .settings-layout-row select { width: 60px; padding: 4px 6px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-color); color: var(--text-color); font-size: 13px; } .settings-offline-banner, .settings-error-box { margin-bottom: 10px; padding: 12px 16px; border: 1px solid rgba(248, 113, 113, 0.4); border-left: 4px solid var(--danger-color); border-radius: 10px; background: var(--color-danger-bg); color: var(--color-danger-text); font-size: 0.85rem; } .settings-offline-banner strong { display: block; } .settings-save-error { color: var(--danger-color); font-size: 0.8rem; } .settings-color-name { font-weight: 700; } .settings-color-table { width: 100%; border-collapse: collapse; } .settings-current-color { color: var(--primary-color); font-weight: 700; } .settings-policy-fields { margin-top: 12px; } .settings-quiet-hours-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .settings-server-config { grid-column: 1 / -1; } .settings-import-legacy, .settings-save-all, .settings-reset-defaults { } /* ===== Toast ===== */ #toast-message { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background-color: var(--surface-raised); color: var(--text-color); border: 1px solid var(--border-color); padding: 10px 20px; border-radius: 10px; font-size: 14px; z-index: 9999; box-shadow: var(--shadow); opacity: 1; transition: opacity 0.3s ease-in-out; } /* ===== 预警阈值提示 ===== */ .threshold-info { position: absolute; top: 10px; right: 10px; background-color: var(--surface-color); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 8px; font-size: 12px; z-index: 9; box-shadow: var(--shadow); border-left: 3px solid var(--primary-color); color: var(--text-color); } /* ===== 预警卡片（weather.js 官方预警） ===== */ .warning-display { margin: 20px 0; } .warning-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border-color); border-left: 4px solid var(--warning-color); border-radius: 10px; background: var(--color-warning-bg); } .warning-panel { display: grid; gap: 10px; margin: 20px 0; } .warning-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; background: var(--glass-bg); margin-bottom: 10px; } .warning-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .warning-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .warning-card-title strong { color: var(--text-color); } .warning-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; color: #0b1424; font-size: 11px; font-weight: 700; } .warning-status { color: var(--muted-color); font-size: 12px; } .warning-severity { font-size: 12px; } .warning-card-meta { display: grid; gap: 3px; color: var(--muted-color); font-size: 12px; margin-bottom: 8px; } .warning-card-body { color: var(--text-color); font-size: 13px; line-height: 1.6; } .warning-panel-empty { padding: 12px 16px; border: 1px solid var(--border-color); border-left: 4px solid var(--success-color); border-radius: 10px; background: var(--color-success-bg); color: var(--color-success-text); font-size: 13px; } /* ===== 加载动画 ===== */ .chart-loading, .chart-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; border-radius: var(--card-radius); } .chart-loading.hidden, .chart-loading-overlay.hidden { display: none; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(56, 189, 248, 0.25); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s linear infinite; margin-bottom: 15px; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== Help / context ===== */ .help-trigger { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-size: 12px; font-weight: 700; cursor: help; box-shadow: none; } .help-trigger:hover { background: none; color: var(--primary-color); box-shadow: none; transform: none; } .context-help-popover { position: absolute; z-index: 30; max-width: 300px; margin: 6px 0 0 8px; padding: 12px 14px; border: 1px solid var(--border-color); background: var(--surface-color); box-shadow: var(--shadow); color: var(--text-color); font-size: var(--font-size-sm); } .context-help-popover p { margin: 4px 0 0; color: var(--muted-color); } .context-panel { margin-top: 18px; padding: 16px; border: 1px solid var(--border-color); background: var(--surface-color); } .confidence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .confidence-item { display: grid; gap: 3px; padding: 10px; border-left: 3px solid var(--primary-color); background: var(--color-info-bg); } .confidence-item span, .confidence-item small, .muted { color: var(--muted-color); font-size: var(--font-size-sm); } .page-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); padding: 20px 18px; box-shadow: var(--shadow); } .tip, .indent { color: var(--muted-color); } .toc { border-left: 3px solid var(--primary-color); padding-left: 16px; } /* ===== 响应式 ===== */ @media (max-width: 1050px) { .location-grid .map-col, .location-grid .side-col { grid-column: span 12; } .log-grid .log-span-7, .log-grid .log-span-5 { grid-column: span 6; } .overview-grid > [data-drag-id="monitor-risks"], .overview-grid > [data-drag-id="monitor-analysis"], .overview-grid > [data-drag-id="monitor-warnings"], .overview-grid > [data-drag-id="monitor-notifications"], .overview-grid > [data-drag-id="monitor-info"] { grid-column: span 6; } .log-overview-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .workspace-container { padding: 0 14px; } .workspace-nav { position: static; width: auto; } .workspace-nav-toggle { display: inline-flex; gap: 8px; align-items: center; padding: 10px 13px; margin: 12px 0; border: 0; border-radius: 10px; background: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-color); font-weight: 700; } .workspace-sidebar { position: fixed; inset: 0 auto 0 0; width: min(82vw, 280px); z-index: 30; transform: translateX(-105%); transition: transform 0.2s ease; box-shadow: 12px 0 30px rgba(0, 0, 0, 0.5); } .workspace-nav.is-open .workspace-sidebar { transform: translateX(0); } .workspace-topbar { min-height: 64px; padding: 10px 0 8px; } .workspace-topbar h1 { font-size: 18px; } .workspace-topbar-tools { gap: 6px; } .workspace-refresh-btn { width: 32px; height: 32px; font-size: 14px; } .workspace-clock { font-size: 11px; } .workspace-global-status { max-width: 48%; text-align: right; } .workspace-main { padding-bottom: 16px; } .workspace-footer { padding-bottom: 16px; } .overview-hero { grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; padding: 16px; } .overview-hero h2 { font-size: 1.9rem; } .overview-hero-note { padding-top: 10px; border-top: 1px solid var(--border-color); border-left: 0; padding-left: 0; } .overview-actions { align-items: flex-start; flex-direction: column; gap: 8px; } .overview-warning-banner { padding: 12px 14px; gap: 10px; } .overview-warning-banner .banner-freshness { margin-left: 0; white-space: normal; } .overview-grid { grid-template-columns: 1fr; gap: 8px; } .overview-grid > [data-drag-id] { grid-column: 1 / -1; } .kpi-row { grid-template-columns: 1fr; gap: 8px; } .kpi-card { padding: 12px 14px; } .log-overview-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .module { padding: 14px 12px; margin-bottom: 8px; } .module-title { flex-direction: column; align-items: stretch; gap: 12px; } .module-title h2 { font-size: 1.18rem; } .chart-container { height: 300px; padding: 8px; } .info-container { margin-bottom: 8px; padding: 14px; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar label { text-align: left; } .data-table { font-size: 13px; } .data-table th, .data-table td { padding: 8px 6px; } .monitor-grid { grid-template-columns: 1fr; } .monitor-header { flex-wrap: wrap; gap: 8px; } .monitor-location { font-size: 1rem; } .monitor-table { font-size: 0.8rem; } .monitor-table th, .monitor-table td { padding: 6px 8px; } .monitor-notif-item { flex-wrap: wrap; gap: 6px; } .monitor-warning-meta { max-width: none; } .settings-groups { grid-template-columns: 1fr; } .settings-layout { grid-template-columns: 1fr; } .settings-layout .settings-navigation { position: static; flex-direction: row; overflow-x: auto; } .settings-layout .settings-groups { grid-template-columns: 1fr; } .settings-groups > #settings-colors, .settings-groups > #settings-notifications { grid-column: auto; } .settings-grid { grid-template-columns: repeat(2, 1fr); } .settings-mode-picker { grid-template-columns: 1fr; } .settings-subtitle { align-items: flex-start; flex-direction: column; gap: 3px; } .settings-core-table { font-size: .82rem; } .settings-core-table th, .settings-core-table td { padding: 7px 5px; } .settings-core-table input { width: 68px; } .settings-top-actions { align-items: stretch; } .settings-action-heading { flex-direction: column; gap: 0; } .settings-action-buttons { width: 100%; } .settings-action-buttons button, .settings-action-buttons label { flex: 1; text-align: center; } .settings-threshold-table { font-size: 13px; } .settings-threshold-table th, .settings-threshold-table td { padding: 6px 4px; } .settings-threshold-table td input { width: 60px; font-size: 13px; } .location-selector { float: none !important; margin-top: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .location-selector button, .button-container button, .form-actions button { width: 100%; min-height: 42px; margin: 0; padding: 10px 8px !important; font-size: 0.95rem; } .location-selector #select-location-btn { grid-column: 1 / -1; } .button-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; } .rainfall-btn { flex: 1 1 calc(50% - 8px); min-width: 0; } .form-actions, .coordinates-display, .date-range-selector form { display: grid; grid-template-columns: 1fr; gap: 10px; } input, select, .search-input, .date-input { min-height: 42px; font-size: 16px; } .map-container, #map { height: 360px !important; } .stats-grid, .stats-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .stat-card { min-width: 0; padding: 10px 8px !important; text-align: center; } .stat-card strong { font-size: 1rem !important; word-break: break-word; } .stat-card span { font-size: 0.8rem; } nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } nav a { display: block; width: 100%; text-align: center; padding: 9px 8px; white-space: nowrap; } button, a, select, input[type="checkbox"], input[type="radio"] { min-height: 44px; } .workspace-sidebar a { min-height: 44px; display: flex; align-items: center; } } @media (max-width: 420px) { .button-container, .stats-grid, .stats-container { grid-template-columns: 1fr !important; } .chart-container { height: 280px; } .map-container, #map { height: 320px !important; } .overview-hero h2 { font-size: 1.7rem; } .log-overview-bar { grid-template-columns: 1fr; } .workspace-global-status { max-width: 44%; padding: 7px 9px; font-size: 10px; } }