:root { /* ========================================================================= INTEGRATOR OS THEME — change the app's color scheme HERE, and only here. Every CSS rule and every inline style in js/ references these tokens; no theme color is hardcoded anywhere else. Deliberate exceptions (data colors, not theme): conductor/port-class/board-tint colors in js/catalog/catalogService.js, the wire-legend swatches in index.html, the grade ramp in data-health.html, and the PDF print palette in js/render/svgRenderer.js (prints on white paper). See docs/THEMING.md. ========================================================================= */ /* Brand */ --red: #c0392b; /* brand accent: borders, fills, wordmark */ --red-hi: #e05252; /* brand red lifted (hue-0) for small text on dark */ /* Surfaces */ --charcoal: #1a1a1a; /* page + canvas background */ --panel: #212121; /* header, palette, schedule, dialogs */ --panel2: #2b2b2b; /* raised: buttons, tiles, table heads */ --panel3: #171717; /* sunken: inputs, selects, inset rows */ --line: #383838; /* borders and dividers */ --grid-dot: #262626; /* canvas dot grid */ /* Text */ --ink: #f0f0f0; --dim: #A6A6A6; --muted: #8a8a8a; --faint: #555555; /* States */ --ok: #2ecc71; --warn: #d6c342; --bad: #e05c4a; --danger: #ff8a80; --sel: #4fc3f7; /* multi-select / lasso blue */ /* Red-family washes */ --red-tint: #1e1111; /* selected/collapsed box fill */ --row-hl: #2a1616; --row-sel: #331a1a; --alert-bg: #1c0f0e; --alert-line: #4a2626; --alert-ink: #e2a79f; /* Canvas devices */ --dev-box: #161616; --dev-head: #232323; --dev-stroke: #3a3a3a; --gcell: #1d1d1d; --gcell-line: #2c2c2c; --meta: #b8d4b8; /* as-built metadata (IP/MAC) monospace */ --term: #455a64; --term-stroke: #90a4ae; --term-used: #1b8f4d; --term-used-stroke: #7ce0a3; --trunk: #8d99a6; /* aggregated trunk wiring + count chips */ --wm: #565656; /* canvas watermark (drawn at ~.4 opacity) */ --icon: #bdbdbd; /* launcher tile icons */ /* product-photo backdrop: invisible on dark (photos float on the header), a white catalog tile on light (white devices vanish on the gray band) */ --photo-plate: transparent; --photo-plate-line: transparent; /* Palette badges */ --badge-x-bg: #1b5e20; --badge-x-ink: #b9f6ca; --badge-s-bg: #37474f; --badge-s-ink: #b0bec5; --badge-legacy-bg: #45420f; --badge-legacy-ink: #e3d878; --badge-bad-bg: #7f1d1d; --badge-bad-ink: #fecaca; --badge-tbd-bg: #5b4a1e; --badge-tbd-ink: #fde68a; /* Focus/selection highlights (near-white on dark, near-black on light) */ --focus-ink: #ffffff; /* selected port-header text */ --focus-stroke: #ffffff; /* pending-terminal ring + selected RF link */ --wire-glow: rgba(255,255,255,.6); /* halo behind the selected wire */ } /* =========================================================================== LIGHT SCHEME — same tokens, re-derived for light surfaces. Activated by ; the toggle lives in js/ui/appShell.js and the choice persists in localStorage("ios-theme"). Every token in :root above MUST have a counterpart here. See docs/THEMING.md. ========================================================================= */ :root[data-theme="light"] { /* Brand */ --red: #c0392b; --red-hi: #a93226; /* accent for small text: darker on light, not lighter */ /* Surfaces */ --charcoal: #f4f3f1; /* page + canvas background */ --panel: #ffffff; --panel2: #eceae6; --panel3: #f6f5f3; --line: #d8d4cf; --grid-dot: #e3e0db; /* Text */ --ink: #1c1c1c; --dim: #5a5a5a; --muted: #7d7d7d; --faint: #b3b0ac; /* States */ --ok: #1e8e4e; --warn: #b45309; --bad: #b03a2e; --danger: #c62828; --sel: #0277bd; /* Red-family washes */ --red-tint: #faece9; --row-hl: #f7e9e6; --row-sel: #f3dcd7; --alert-bg: #fdf2f0; --alert-line: #e7bdb4; --alert-ink: #8a3a2e; /* Canvas devices (term/meta values borrowed from the proven PDF print palette) */ --dev-box: #ffffff; --dev-head: #e5e1d9; --dev-stroke: #99938a; --gcell: #f4f2ef; --gcell-line: #dedad4; --meta: #1f5130; --term: #cfd8dc; --term-stroke: #607d8b; --term-used: #1b8f4d; --term-used-stroke: #145a32; --trunk: #5c6873; --wm: #a9a49d; --icon: #6e6a64; --photo-plate: #ffffff; --photo-plate-line: #cfcac3; /* Palette badges */ --badge-x-bg: #d7eedd; --badge-x-ink: #1b5e20; --badge-s-bg: #dfe6ea; --badge-s-ink: #37474f; --badge-legacy-bg: #efe9c9; --badge-legacy-ink: #6b6014; --badge-bad-bg: #f9dcd9; --badge-bad-ink: #7f1d1d; --badge-tbd-bg: #f6ecd0; --badge-tbd-ink: #6d5410; /* Focus/selection highlights */ --focus-ink: #111111; --focus-stroke: #111111; --wire-glow: rgba(0,0,0,.4); } /* Light-scheme conductor substitutions. Wire strokes and port strips carry DATA colors as SVG attributes (physical conductor colors — see THEMING.md), and several are too pale to see on a light canvas. Swap each for a darker shade of the SAME hue, exactly as the PDF print path substitutes #f5f5f5 -> #9a9a9a on white paper. Dark theme and the PDF export (which regex-substitutes on the raw attributes) are untouched. */ :root[data-theme="light"] [stroke="#f5f5f5"] { stroke: #9a9a9a; } /* D1/CLK white */ :root[data-theme="light"] [stroke="#fdd835"] { stroke: #b8860b; } /* BZR yellow */ :root[data-theme="light"] [stroke="#ffd54f"] { stroke: #c28b00; } /* sup-in amber */ :root[data-theme="light"] [stroke="#ffb74d"] { stroke: #d97706; } /* ctrl-in orange */ :root[data-theme="light"] [stroke="#4fc3f7"] { stroke: #0288d1; } /* eth/usb blue */ :root[data-theme="light"] [stroke="#81c784"] { stroke: #558b2f; } /* osdp/wieg green*/ :root[data-theme="light"] [stroke="#80cbc4"] { stroke: #00897b; } /* datalink teal */ :root[data-theme="light"] [stroke="#90a4ae"] { stroke: #607d8b; } /* flexio gray */ /* Dark-scheme mirror: GND/− black (#0a0a0a) is invisible on the charcoal canvas — draw it dark gray on screen. Light mode keeps true black (perfect on white), same as the PDF print path. Not scoped [data-theme="dark"] because dark is the default for pages that never set the attribute. */ :root:not([data-theme="light"]) [stroke="#0a0a0a"] { stroke: #6e6e6e; } :root[data-theme="light"] [fill="#f5f5f5"] { fill: #9a9a9a; } :root[data-theme="light"] [fill="#fdd835"] { fill: #b8860b; } :root[data-theme="light"] [fill="#ffd54f"] { fill: #c28b00; } :root[data-theme="light"] [fill="#ffb74d"] { fill: #d97706; } :root[data-theme="light"] [fill="#4fc3f7"] { fill: #0288d1; } :root[data-theme="light"] [fill="#81c784"] { fill: #558b2f; } :root[data-theme="light"] [fill="#80cbc4"] { fill: #00897b; } :root[data-theme="light"] [fill="#90a4ae"] { fill: #607d8b; } * { box-sizing: border-box; margin: 0; } body { font-family: "Open Sans", "Segoe UI", system-ui, sans-serif; background: var(--charcoal); color: var(--ink); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.bar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--panel); border-bottom: 2px solid var(--red); flex: 0 0 auto; } header.bar h1 { font-size: 15px; font-weight: 600; } header.bar h1 span { color: var(--red); } header.bar .note { font-size: 11px; color: var(--warn); } header.bar .spacer { flex: 1; } button { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; font-size: 12px; cursor: pointer; } button:hover { border-color: var(--red); } button.danger { color: var(--danger); } main { flex: 1; display: flex; min-height: 0; } #palette { width: 230px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; flex: 0 0 auto; } #palette h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); padding: 10px 12px 4px; } #palette h3 { font-size: 10px; font-weight: 600; color: var(--red-hi); padding: 6px 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; } #palette h3:hover { color: var(--ink); } #palette h4 { font-size: 10px; font-weight: 600; color: var(--ink); padding: 5px 12px 2px 20px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; } #palette h4:hover { color: var(--red-hi); } .pal-item { padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: grab; } .pal-item:hover { background: var(--panel2); } .pal-item .sku { font-weight: 600; font-size: 13px; } .pal-item .nm { font-size: 10.5px; color: var(--dim); margin-top: 1px; } .badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; } .badge.x { background: var(--badge-x-bg); color: var(--badge-x-ink); } .badge.s { background: var(--badge-s-bg); color: var(--badge-s-ink); } .badge.legacy { background: var(--badge-legacy-bg); color: var(--badge-legacy-ink); } .badge.bad { background: var(--badge-bad-bg); color: var(--badge-bad-ink); } .badge.tbd { background: var(--badge-tbd-bg); color: var(--badge-tbd-ink); } .pal-item.pal-dim { opacity: .42; } .pal-item.pal-dim:hover { opacity: .7; } #canvasWrap { flex: 1; position: relative; min-width: 0; background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px) 0 0 / 24px 24px, var(--charcoal); } svg#cv { width: 100%; height: 100%; display: block; cursor: default; } #schedule { height: 215px; flex: 0 0 auto; background: var(--panel); border-top: 1px solid var(--line); overflow-y: auto; } #legend { padding: 5px 12px; font-size: 10.5px; background: var(--panel2); border-bottom: 1px solid var(--line); } #legend .sw { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; vertical-align: -1px; border: 1px solid var(--faint); } /* Legend chips: DATA colors (conductor code), then per-theme overrides so each chip shows what the canvas actually draws (see substitution tables below). */ #legend .c-pwr { background: #e53935; } #legend .c-gnd { background: #0a0a0a; } #legend .c-d0 { background: #43a047; } #legend .c-d1 { background: #f5f5f5; } #legend .c-led { background: #fb8c00; } #legend .c-bzr { background: #fdd835; } :root:not([data-theme="light"]) #legend .c-gnd { background: #6e6e6e; } :root[data-theme="light"] #legend .c-d1 { background: #9a9a9a; } :root[data-theme="light"] #legend .c-bzr { background: #b8860b; } #schedule table { width: 100%; border-collapse: collapse; font-size: 11.5px; } #schedule th { position: sticky; top: 0; background: var(--panel2); text-align: left; padding: 5px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); } #schedule td { padding: 4px 10px; border-bottom: 1px solid var(--line); } #schedule tr.rowhl { background: var(--row-hl); } #schedule tr.rowsel { background: var(--row-sel); cursor: pointer; } #devTable { border-bottom: 2px solid var(--red); } #devTable td b { color: var(--red-hi); } #schedule .cls { font-family: Consolas, monospace; font-size: 10.5px; } .st-ok { color: var(--ok); } .st-check { color: var(--warn); } /* SVG bits */ .wm { fill: var(--wm); opacity: .42; font: 700 34px "Open Sans", "Segoe UI", sans-serif; letter-spacing: .06em; pointer-events: none; } .wm.wmsub { font-size: 20px; opacity: .34; } .dev-box { fill: var(--dev-box); stroke: var(--dev-stroke); stroke-width: 1.2; rx: 6; } .dev-box.sel { stroke: var(--red); stroke-width: 2; } .dev-box.msel { stroke: var(--sel); stroke-width: 2; stroke-dasharray: 7 4; } #multiBar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--sel); border-radius: 6px; padding: 8px 14px; z-index: 40; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); } .dev-head { fill: var(--dev-head); } .dev-title { fill: var(--ink); font: 600 12px "Open Sans", "Segoe UI", sans-serif; } .dev-sub { fill: var(--dim); font: 9px "Open Sans", "Segoe UI", sans-serif; } .dev-unv { fill: var(--warn); font: 8px "Open Sans", "Segoe UI", sans-serif; } .dev-del { fill: var(--muted); font: 700 13px "Open Sans", "Segoe UI", sans-serif; cursor: pointer; } .dev-del:hover { fill: var(--red-hi); } .dev-edit { fill: var(--muted); font: 700 11px "Open Sans", "Segoe UI", sans-serif; cursor: pointer; } .dev-edit:hover { fill: var(--red-hi); } .dev-meta { fill: var(--meta); font: 8.5px Consolas, monospace; } .dev-meta.unset { fill: var(--faint); font-style: italic; } .dev-sup { fill: var(--red-hi); font: 700 8.5px "Open Sans", "Segoe UI", sans-serif; letter-spacing: .05em; } .dev-loc { fill: var(--red-hi); font: 700 9.5px "Open Sans", "Segoe UI", sans-serif; letter-spacing: .04em; } .gcell { fill: var(--gcell); stroke: var(--dev-stroke); stroke-width: 1; } .gport-lbl { fill: var(--ink); font: 8px Consolas, monospace; } circle.term.used { fill: var(--term-used); stroke: var(--term-used-stroke); } .port-h { fill: var(--red-hi); font: 600 9px "Open Sans", "Segoe UI", sans-serif; cursor: pointer; } .port-h.psel { fill: var(--focus-ink); font-weight: 700; } .port-h-sub { fill: var(--dim); font: 600 8px "Open Sans", "Segoe UI", sans-serif; cursor: pointer; letter-spacing: .02em; } .term-t { fill: var(--ink); font: 9.5px Consolas, monospace; } .term-pin { fill: var(--dim); font: 8.5px Consolas, monospace; } circle.term { fill: var(--term); stroke: var(--term-stroke); stroke-width: 1; cursor: crosshair; } circle.term:hover { fill: var(--red); r: 6; } circle.term.pending { fill: var(--red); stroke: var(--focus-stroke); } path.rflink { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 7 5; opacity: .85; cursor: pointer; } path.rflink.sel { stroke: var(--focus-stroke); stroke-width: 3; opacity: 1; } .rflink-bg { fill: var(--charcoal); stroke: var(--red); stroke-width: 1; } .rflink-ico { fill: var(--red-hi); font: 700 8px sans-serif; } .dev-box.linksel { stroke: var(--red); stroke-width: 2.5; } path.wire { fill: none; stroke-width: 2; cursor: pointer; } path.wire.sel { stroke-width: 3.5; filter: drop-shadow(0 0 3px var(--wire-glow)); } path.wirehit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; } #hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--dim); pointer-events: none; } /* ===== Integrator OS shell: brand block + app-switcher launcher ===== */ .os-brand { display: flex; align-items: center; gap: 10px; } .os-brand h1 { font-size: 15px; font-weight: 700; white-space: nowrap; } .os-brand h1 span { color: var(--red); } .os-brand h1 small { display: block; font-size: 8.5px; letter-spacing: .18em; font-weight: 600; color: var(--dim); } .launcher-btn { background: none; border: none; padding: 4px; color: var(--dim); cursor: pointer; line-height: 0; border-radius: 6px; } .launcher-btn:hover { color: var(--red); background: var(--panel2); } .launcher-btn svg { width: 18px; height: 18px; } #appSwitcher { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 48px 16px; } #appSwitcher.open { display: flex; } .as-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; width: min(560px, 100%); max-height: calc(100vh - 96px); overflow-y: auto; box-shadow: 0 18px 60px rgba(0,0,0,.6); } .as-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .as-head b { font-size: 15px; } .as-head b span { color: var(--red); } .as-sub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 600; } .as-close { margin-left: auto; background: none; border: none; color: var(--dim); font-size: 13px; cursor: pointer; } .as-close:hover { color: var(--ink); } .as-search { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px 12px; font-size: 12.5px; margin-bottom: 14px; outline: none; } .as-search:focus { border-color: var(--red); } .as-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .as-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; cursor: pointer; } .as-tile svg { width: 34px; height: 34px; color: var(--icon); } .as-tile:hover { border-color: var(--red); } .as-tile:hover svg { color: var(--ink); } .as-tile .as-label { font-size: 11px; color: var(--dim); } .as-tile.cur { border-color: var(--red); } .as-tile.cur svg { color: var(--ink); } .as-tile.planned { cursor: default; opacity: .55; padding-bottom: 24px; } .as-tile.planned:hover { border-color: var(--line); } .as-tile.planned:hover svg { color: var(--icon); } .as-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .as-dot.cur { background: var(--ok); } .as-dot.live { background: var(--warn); } .as-soon { position: absolute; bottom: 6px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .as-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .as-foot-lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 600; } .as-theme { display: flex; align-items: center; gap: 7px; margin-left: auto; border-radius: 8px; padding: 6px 12px; } .as-theme svg { width: 15px; height: 15px; color: var(--icon); } .as-theme:hover svg { color: var(--ink); }