/* =================================================================== Real-Time Monitoring dashboard - 10 Pressure Transmitter (Modbus TCP) SCADA-style dark HMI theme (always-dark by deliberate choice, not an OS-driven flip - matches AVEVA/Wonderware/Ignition trend conventions). Palette + mark specs follow the dataviz design system (see palette.md): fixed categorical order, reserved status colors, 2px lines, legend always present for >=2 series. =================================================================== */ :root { color-scheme: dark; --surface-1: #1a1d1f; /* card surface */ --chart-bg: #0e1113; /* recessed trend "screen" - darker than card */ --page-plane: #0a0c0d; --text-primary: #ffffff; --text-secondary: #c3c8cc; --text-muted: #8a9096; --gridline: #2c3236; --gridline-chart: rgba(255,255,255,0.09); --baseline: #454c51; --border: rgba(255,255,255,0.10); --status-good: #16c116; --status-warning: #fab219; --status-critical: #ff4d4d; --series-1: #3987e5; /* blue */ --series-2: #e8792f; /* orange */ --series-3: #22c58f; /* aqua */ --series-4: #e2b400; /* yellow */ --series-5: #e15c93; /* magenta */ --state-standby: #3987e5; /* blue = idle/waiting */ --state-active: #16c116; /* green = steam in */ --state-blowdown: #fab219; /* amber = blowdown */ } /* Manual override hook only (no automatic OS-based flip) - a future theme toggle could set data-theme="light" on . */ :root[data-theme="light"] { color-scheme: light; --surface-1: #fcfcfb; --chart-bg: #ffffff; --page-plane: #f2f2ef; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --gridline-chart: rgba(11,11,11,0.08); --baseline: #c3c2b7; --border: rgba(11,11,11,0.10); --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: radial-gradient(ellipse 1200px 700px at 50% -10%, #14191c 0%, var(--page-plane) 60%); background-attachment: fixed; color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1760px; margin: 0 auto; padding: 16px 20px 48px; } /* ---------- Header ---------- */ .dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; flex-wrap: wrap; } .dash-header h1 { font-size: 19px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; } .dash-header p { margin: 0; color: var(--text-secondary); font-size: 13px; max-width: 900px; line-height: 1.5; } .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; } .clock-box { background: var(--chart-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 28px; font-size: 26px; font-weight: 600; letter-spacing: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; } .clock-box .clock-date { font-size: 13px; font-weight: 500; letter-spacing: 0.5px; color: var(--text-secondary); margin-top: 2px; } /* ---------- Section ---------- */ section.panel { margin-bottom: 18px; } details.panel { margin-bottom: 18px; } details.panel > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 6px 4px; display: flex; align-items: center; gap: 6px; user-select: none; } details.panel > summary::-webkit-details-marker { display: none; } details.panel > summary::before { content: "▾"; display: inline-block; transition: transform 0.15s ease; color: var(--text-muted); } details.panel:not([open]) > summary::before { transform: rotate(-90deg); } /* ---------- Grids ---------- */ .grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .grid-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; } .grid-multitrend { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 14px; } .grid-summary { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; } .grid-alarm { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; } @media (max-width: 900px) { .grid-summary, .grid-alarm { grid-template-columns: 1fr; } } /* ---------- Stat tile ---------- */ .stat-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .stat-tile .stat-label { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12.5px; margin-bottom: 8px; } .stat-tile .stat-value { font-size: 30px; font-weight: 600; line-height: 1; } .stat-tile .stat-value .unit { font-size: 15px; font-weight: 500; color: var(--text-secondary); margin-left: 4px; } .sev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; } /* ---------- Gauge (radial arc) ---------- */ .gauge-wrap { position: relative; width: 100%; aspect-ratio: 200 / 150; } .gauge-svg { width: 100%; height: 100%; display: block; overflow: visible; } .gauge-track { fill: none; stroke: var(--gridline-chart); stroke-width: 14; stroke-linecap: round; } .gauge-value { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke 0.2s ease; } .gauge-tick { stroke: var(--text-muted); stroke-width: 2.5; opacity: 0.6; } .gauge-tick-crit { stroke: var(--status-critical); opacity: 0.85; } .gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 22%; text-align: center; } .gauge-value-text { font-size: 21px; font-weight: 600; line-height: 1.1; } .gauge-value-text .unit { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); margin-top: 1px; } .sev-good { color: var(--status-good); } .sev-warning { color: var(--status-warning); } .sev-critical { color: var(--status-critical); } .sev-unknown { color: var(--text-muted); } .dot-good { background: var(--status-good); } .dot-warning { background: var(--status-warning); } .dot-critical { background: var(--status-critical); } .dot-unknown { background: var(--text-muted); } /* ---------- Status (cycle) tile ---------- */ .status-tile { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .status-tile .status-head { padding: 8px 12px; font-size: 12px; background: var(--surface-1); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .status-tile .status-body { padding: 22px 10px; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; color: #ffffff; } .state-STANDBY { background: linear-gradient(135deg, #204d92, var(--state-standby)); } .state-STEAM_IN { background: linear-gradient(135deg, #0a7a26, var(--state-active)); } .state-BLOWDOWN { background: linear-gradient(135deg, #b3790f, var(--state-blowdown)); } .state-UNKNOWN { background: linear-gradient(135deg, #43494d, #666d72); } /* ---------- Chart card: recessed "instrument screen" look ---------- */ .chart-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 8px; } .chart-card .chart-title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .chart-card .chart-title .swatch { width: 9px; height: 9px; border-radius: 50%; } .chart-canvas-wrap { position: relative; width: 100%; height: 260px; background: var(--chart-bg); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.45); padding: 6px 4px 2px; } .chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; } .chart-canvas-wrap.multitrend { height: 320px; } .chart-readout { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); padding: 8px 4px 2px; margin-top: 4px; font-variant-numeric: tabular-nums; } .chart-readout b { color: var(--text-secondary); font-weight: 700; font-size: 13px; } /* ---------- Data table (legend companion / table-view) ---------- */ .table-scroll { overflow-x: auto; } table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } table.data-table th, table.data-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--gridline); white-space: nowrap; } table.data-table th:first-child, table.data-table td:first-child { text-align: left; font-variant-numeric: normal; } table.data-table th { color: var(--text-muted); font-weight: 500; } table.data-table td.name-cell { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); } .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; } table.data-table tbody tr[data-idx] { cursor: pointer; } table.data-table tbody tr[data-idx]:hover { background: rgba(255,255,255,0.04); } table.data-table tbody tr.row-hidden { opacity: 0.4; } table.data-table tbody tr.row-hidden td.name-cell { text-decoration: line-through; } /* ---------- Multi-variable Trend history controls ---------- */ .history-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-secondary); } .history-controls label { display: flex; align-items: center; gap: 6px; } .preset-btns { display: flex; gap: 6px; } .history-hint { color: var(--text-muted); font-size: 11.5px; flex-basis: 100%; } /* ---------- Alarm summary tiles ---------- */ .big-status-tile { border-radius: 10px; padding: 22px; text-align: center; font-weight: 700; font-size: 22px; border: 1px solid var(--border); color: #ffffff; } .big-status-tile .sub { font-size: 12px; font-weight: 500; opacity: 0.85; margin-top: 4px; } .bg-good { background: linear-gradient(135deg, #0a7a26, var(--state-active)); } .bg-warning { background: linear-gradient(135deg, #b3790f, var(--state-blowdown)); color: #221a02; } .bg-critical { background: linear-gradient(135deg, #8f2323, var(--status-critical)); } .bg-unknown { background: linear-gradient(135deg, #43494d, #666d72); } .alarm-log-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 8px 0; max-height: 240px; overflow-y: auto; } .alarm-row { display: grid; grid-template-columns: 108px 70px 90px 1fr; gap: 8px; padding: 6px 14px; font-size: 12px; border-bottom: 1px solid var(--gridline); align-items: center; } .alarm-row .badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-align: center; color: #fff; } .badge-WARNING { background: var(--status-warning); color: #221a02; } .badge-CRITICAL { background: var(--status-critical); } .empty-hint { color: var(--text-muted); text-align: center; padding: 30px 10px; font-size: 13px; } /* ---------- Daily summary / export panel ---------- */ .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .card h3 { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; font-weight: 600; } .threshold-list { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 14px; padding-left: 18px; } textarea.notes { width: 100%; min-height: 70px; background: var(--page-plane); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 8px 10px; resize: vertical; } .row-inline { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } button, input[type="date"], input[type="datetime-local"] { font-family: inherit; font-size: 12.5px; background: var(--page-plane); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; cursor: pointer; } button.primary { background: var(--series-1); border-color: var(--series-1); color: #fff; font-weight: 600; } button:hover { filter: brightness(1.15); } .save-hint { font-size: 11.5px; color: var(--text-muted); } /* ---------- Mobile (phone) ---------- */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .wrap { padding: 10px 10px 32px; max-width: 100vw; } .dash-header { flex-direction: column; padding: 12px 14px; } .dash-header h1 { font-size: 16px; } .dash-header p { font-size: 12px; } .clock-box { align-self: stretch; text-align: center; font-size: 22px; padding: 10px; } /* minmax(0, 1fr) - without the explicit 0 floor, an unbreakable word like "STANDBY" sets the track's min-content width and blows the grid past the viewport instead of respecting the 2-column split. */ .grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .grid-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .grid-charts, .grid-multitrend { grid-template-columns: minmax(0, 1fr); gap: 10px; } .stat-tile { padding: 10px 11px; min-width: 0; } .gauge-value-text { font-size: 17px; } .stat-tile .stat-label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-tile { min-width: 0; } .status-tile .status-head { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-tile .status-body { font-size: 15px; padding: 14px 6px; letter-spacing: 0.2px; } .chart-canvas-wrap { height: 200px; } .chart-canvas-wrap.multitrend { height: 220px; } .alarm-row { grid-template-columns: 80px 56px 1fr; font-size: 10.5px; } .alarm-row span:nth-child(3) { display: none; } /* instrument name folded into message on phone */ .card, .chart-card { padding: 10px 11px 8px; } .history-controls { flex-direction: column; align-items: stretch; } .history-controls label { justify-content: space-between; } .preset-btns { justify-content: space-between; } .preset-btns button { flex: 1; } }