/* Aladin Voice Switch - the industrial console layer. * * WHY THIS FILE EXISTS, AND WHY IT IS A SEPARATE FILE * --------------------------------------------------- * tokens.css, bundle.css and bundle.js are the design system, shipped as it * was delivered, and they are still not edited. This file sits ON TOP of them * and only applies when . Delete this file and * the classic panel is exactly what it was in 0.45.1. * * It is a deliberate, visible departure from three of the design system's * rules - 36px rows, a dark default and an always-visible sidebar - made by * the owner on 2026-09-24 after comparing five layouts: an operator on a * 1920x1080 NOC screen needs to see thirty accounts, not twelve. The rules * that are NOT departed from: colour is still meaning and never the only * channel, a number still appears with its cap, the server still computes * every total, and every coloured status still carries a word. * * Every colour below meets 4.5:1 for text on the ground it is used on. * * The condensed face is loaded by early.js, and only in this layout - so the * classic panel does not start fetching a font it never uses. */ /* ------------------------------------------------------------------ tokens */ html[data-layout="industrial"] { color-scheme: light; --surface-000: #f3f5f7; --surface-100: #e6eaef; --surface-200: #ffffff; --surface-300: #eef1f4; --surface-400: #cfe8e9; --border-subtle: #e3e7ec; --border: #c7ced7; --border-strong: #a6b0bc; --border-control: #7a8492; --ink-100: #121a24; --ink-200: #2b3541; --ink-300: #536070; --ink-400: #86909c; --accent: #0e6b70; --accent-hover: #0a5256; --accent-surface: #dff0f0; --on-accent: #ffffff; --ok: #15703f; --ok-surface: #ddf1e5; --warn: #8f4c00; --warn-surface: #fcebd7; --danger: #b3261e; --danger-surface: #f9dedb; --idle: #536070; --idle-surface: #e8ecf0; --focus-ring: #0e6b70; --overlay: rgba(18, 26, 36, 0.35); --series-1: #0e6b70; --series-2: #1f5fa8; --series-3: #b25a06; --series-4: #8a2f7c; --series-5: #15703f; --grid-line: #e3e7ec; --shadow-popover: 0 6px 18px rgba(18, 26, 36, 0.16); --shadow-modal: 0 18px 48px rgba(18, 26, 36, 0.22); --shadow-sticky: 0 1px 0 #c7ced7; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 0px; --size-row: 21px; --size-row-head: 22px; --size-control: 22px; --size-topbar: 30px; --font-sans: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", system-ui, sans-serif; --ind-title: #0e6b70; --ind-title-ink: #ffffff; --ind-status: #0a5256; --ind-dock-w: 300px; } html[data-layout="industrial"] body.ds-body { background: var(--surface-100); font-size: 12px; line-height: 16px; } /* Only a page that HAS the console frame stops scrolling as a whole - the frame scrolls inside itself. The sign-in screen has no frame and scrolls like any page. */ html[data-layout="industrial"] body.ind-body { height: 100%; overflow: hidden; } /* The type scale, one step down. Same classes, same meaning. */ html[data-layout="industrial"] .display-20 { font-size: 16px; line-height: 20px; } html[data-layout="industrial"] .title-15 { font-size: 13px; line-height: 17px; } html[data-layout="industrial"] .body-13, html[data-layout="industrial"] .body-strong-13 { font-size: 12px; line-height: 16px; } html[data-layout="industrial"] .label-12 { font-size: 11.5px; line-height: 15px; } html[data-layout="industrial"] .caption-11 { font-size: 10.5px; line-height: 13px; } html[data-layout="industrial"] .metric-28 { font-size: 20px; line-height: 24px; } html[data-layout="industrial"] .num-13, html[data-layout="industrial"] .num-strong-13 { font-size: 12px; line-height: 16px; } /* ------------------------------------------------------------------- shell */ .ind-app { display: grid; grid-template-rows: 26px 24px auto minmax(0, 1fr) 20px; /* One column that may NOT grow to fit its widest child. Without this a wide table stretched the whole frame past the window, and with the body not scrolling the cut-off part could not be reached at all. The table scrolls inside the page instead. */ grid-template-columns: minmax(0, 1fr); height: 100vh; background: var(--surface-100); color: var(--ink-100); font-family: var(--font-sans); } .ind-glyph { font-family: var(--font-mono); font-size: 11px; line-height: 1; } /* title bar */ .ind-title { display: flex; align-items: center; gap: 10px; padding: 0 8px; background: var(--ind-title); color: var(--ind-title-ink); font-size: 12px; white-space: nowrap; overflow: hidden; } .ind-title__mark { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #ffffff; color: var(--ind-title); font-family: var(--font-mono); font-size: 10px; font-weight: 600; } .ind-title__name { font-weight: 700; letter-spacing: 0.04em; } .ind-title__meta { opacity: 0.85; font-family: var(--font-mono); font-size: 11px; } .ind-title__env { padding: 0 5px; height: 16px; line-height: 16px; border: 1px solid rgba(255, 255, 255, 0.7); font-family: var(--font-mono); font-size: 10px; } .ind-title__env--lab { background: #fcebd7; color: #8f4c00; border-color: #fcebd7; } .ind-title__screen { font-weight: 600; } .ind-title__search { margin-left: auto; display: flex; align-items: center; gap: 6px; width: 360px; height: 18px; padding: 0 6px; background: rgba(255, 255, 255, 0.16); } .ind-title__input { flex: 1 1 auto; min-width: 0; height: 16px; border: 0; outline: none; background: transparent; color: #ffffff; font: inherit; font-size: 11.5px; } .ind-title__input::placeholder { color: rgba(255, 255, 255, 0.78); } .ind-title__user { font-size: 11.5px; } /* ribbon tabs */ .ind-rtabs { display: flex; align-items: flex-end; gap: 1px; padding: 2px 6px 0; background: var(--surface-100); } .ind-rtab { height: 22px; padding: 0 12px; border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--ink-300); font: inherit; font-size: 12px; cursor: pointer; } .ind-rtab:hover { color: var(--ink-100); background: var(--surface-300); } .ind-rtab.is-here { color: var(--ink-100); font-weight: 600; } .ind-rtab.is-active { background: var(--surface-200); color: var(--ink-100); font-weight: 700; border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent); } .ind-rtabs__spacer { flex: 1 1 auto; } .ind-rtabs__crumb { align-self: center; font-size: 11px; color: var(--ink-300); padding-right: 4px; } /* ribbon */ .ind-ribbon { display: flex; align-items: stretch; min-height: 64px; padding: 2px 2px 0; background: var(--surface-200); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow-x: auto; } .ind-rgroup { display: flex; flex-direction: column; padding: 0 6px; border-right: 1px solid var(--border-subtle); } .ind-rgroup__body { display: flex; align-items: center; gap: 1px; flex: 1 1 auto; } .ind-rgroup__name { font-size: 10px; line-height: 12px; color: var(--ink-300); text-align: center; padding-bottom: 2px; white-space: nowrap; } .ind-rcol { display: flex; flex-direction: column; gap: 0; } .ind-rbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; height: 48px; padding: 0 6px; border: 1px solid transparent; color: var(--ink-100); text-decoration: none; font-size: 11px; white-space: nowrap; } .ind-rbtn .ind-glyph { font-size: 18px; color: var(--accent); } .ind-rbtn:hover { background: var(--surface-300); border-color: var(--border-subtle); } .ind-rbtn.is-current { background: var(--accent-surface); border-color: #b5d8d8; font-weight: 600; } .ind-rsmall, .ind-app .ind-rcol .ds-jobbtn, .ind-app .ind-rcol .ds-btn { display: flex; align-items: center; gap: 5px; height: 18px; padding: 0 5px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--ink-100); font: inherit; font-size: 11px; text-decoration: none; white-space: nowrap; cursor: pointer; } .ind-rsmall .ind-glyph { color: var(--accent); width: 12px; text-align: center; } .ind-rsmall:hover, .ind-app .ind-rcol .ds-jobbtn:hover, .ind-app .ind-rcol .ds-btn:hover { background: var(--surface-300); border-color: var(--border-subtle); } .ind-rsmall.is-on { background: var(--accent-surface); } /* work area */ .ind-work { display: flex; gap: 3px; padding: 3px; min-height: 0; } /* the dock */ .ind-dock { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; } .ind-dock__head { display: flex; align-items: flex-end; gap: 1px; height: 23px; border-bottom: 1px solid var(--border); } .ind-dock__tabs { display: flex; align-items: flex-end; gap: 1px; flex: 1 1 auto; min-width: 0; } .ind-dock__tab { height: 22px; padding: 0 8px; margin-bottom: -1px; border: 1px solid var(--border); border-bottom: 0; background: #e1e6eb; color: var(--ink-300); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; } .ind-dock__tab.has-content { color: var(--ink-200); } .ind-dock__tab.is-active { background: var(--surface-200); color: var(--ink-100); font-weight: 700; border-bottom: 1px solid var(--surface-200); box-shadow: inset 0 2px 0 var(--accent); } .ind-dock__hide { width: 22px; height: 20px; border: 0; background: transparent; color: var(--ink-300); cursor: pointer; font: inherit; font-size: 14px; } .ind-dock__hide:hover { color: var(--ink-100); } .ind-dock__body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--surface-200); border: 1px solid var(--border); border-top: 0; } .ind-dock__pane { display: flex; flex-direction: column; min-height: 100%; } .ind-dock__empty { padding: 12px 10px; color: var(--ink-300); font-size: 12px; } .ind-strip { flex: 0 0 22px; display: flex; flex-direction: column; gap: 1px; background: var(--surface-000); border: 1px solid var(--border); } .ind-strip__tab { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--ink-200); font: inherit; font-size: 11px; cursor: pointer; } .ind-strip__tab:hover { background: var(--surface-300); color: var(--ink-100); } /* navigator tree */ .ind-nav { display: flex; flex-direction: column; padding: 4px; } .ind-nav__group { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 4px; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--ink-100); } .ind-nav__group .ind-glyph { color: var(--ink-300); font-size: 9px; } .ind-nav__item { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px 0 22px; color: var(--ink-100); text-decoration: none; font-size: 12px; } .ind-nav__item .ind-glyph { color: var(--ink-300); width: 12px; text-align: center; } .ind-nav__item.is-small { color: var(--ink-200); font-size: 11.5px; } .ind-nav__item:hover { background: var(--surface-300); } .ind-nav__item.is-current { background: var(--accent); color: var(--on-accent); font-weight: 600; } .ind-nav__item.is-current .ind-glyph { color: var(--on-accent); } /* the page */ .ind-page { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; } .ind-page > * { flex: 0 0 auto; } /* status bar */ .ind-status { display: flex; align-items: center; background: var(--ind-status); color: #ffffff; font-size: 11px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; } .ind-status__tiles { display: flex; align-items: center; min-width: 0; overflow: hidden; } .ind-status__cell { padding: 0 9px; line-height: 20px; border-right: 1px solid rgba(255, 255, 255, 0.22); } /* Tones on the dark bar: light backgrounds with dark text, so the word is still readable and the colour is only confirmation. */ .ind-status__cell.is-warn { background: #fcebd7; color: #6d3a00; } .ind-status__cell.is-danger { background: #f9dedb; color: #8c1d17; } .ind-status__cell.is-ok { color: #ffffff; } .ind-status__cell.is-idle { color: #e2ecec; } .ind-status__spacer { flex: 1 1 auto; } .ind-status__clock { padding: 0 10px; font-family: var(--font-mono); font-size: 10.5px; } /* ------------------------------------------ the design system, made dense */ html[data-layout="industrial"] .ds-page { padding: 0; gap: 3px; } html[data-layout="industrial"] .ds-panel { border-radius: 0; border-color: var(--border); } html[data-layout="industrial"] .ds-panel__head { min-height: 24px; padding: 1px 6px; gap: 8px; background: linear-gradient(#ffffff, #edf1f4); } html[data-layout="industrial"] .ds-panel__title { font-size: 12px; line-height: 16px; font-weight: 700; } html[data-layout="industrial"] .ds-panel__meta { font-size: 11px; } html[data-layout="industrial"] .ds-panel__body { padding: 6px; } html[data-layout="industrial"] .ds-panel__body--flush { padding: 0; } html[data-layout="industrial"] .ind-page .u-col { gap: 3px !important; } /* buttons and inputs */ html[data-layout="industrial"] .ds-btn { height: 22px; padding: 0 9px; border-radius: 2px; background: linear-gradient(#ffffff, #e9edf2); font-size: 11.5px; } html[data-layout="industrial"] .ds-btn:hover { background: #e3e8ee; } html[data-layout="industrial"] .ds-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-hover); } html[data-layout="industrial"] .ds-btn--primary:hover { background: var(--accent-hover); } html[data-layout="industrial"] .ds-btn--danger { background: var(--danger-surface); color: var(--danger); border-color: var(--danger); } html[data-layout="industrial"] .ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-200); } html[data-layout="industrial"] .ds-btn--ghost:hover { background: var(--surface-300); color: var(--ink-100); } html[data-layout="industrial"] .ds-btn--sm { height: 18px; font-size: 11px; padding: 0 6px; } html[data-layout="industrial"] .ds-input, html[data-layout="industrial"] .ds-select { height: 22px; padding: 0 5px; border-radius: 2px; background: #ffffff; font-size: 12px; } html[data-layout="industrial"] .ds-label { font-size: 11px; line-height: 14px; } html[data-layout="industrial"] .ds-hint { font-size: 10.5px; line-height: 13px; } html[data-layout="industrial"] .ds-field { gap: 2px; } /* filters, when a screen still has them in the page */ html[data-layout="industrial"] .ds-filters { padding: 4px 6px; gap: 6px; border-radius: 0; } html[data-layout="industrial"] .ds-filterpill { height: 17px; border-radius: 2px; font-size: 10.5px; } /* tables: the whole point */ html[data-layout="industrial"] .ds-table { font-size: 12px; } html[data-layout="industrial"] .ds-table th { height: var(--size-row-head); padding: 0 5px; background: #eef1f4; border-right: 1px solid var(--border-subtle); font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-300); } html[data-layout="industrial"] .ds-table td { height: var(--size-row); padding: 0 5px; border-right: 1px solid var(--border-subtle); color: var(--ink-200); } /* Numbers in the condensed face with tabular figures: they still line up on the decimal point, and a column of rates is a third narrower than mono. */ html[data-layout="industrial"] .ds-table td.is-num, html[data-layout="industrial"] .ds-table td .u-num, html[data-layout="industrial"] .ds-kv dd.is-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; } html[data-layout="industrial"] .ds-table tbody tr:nth-child(even) > td { background: #f7f9fa; } html[data-layout="industrial"] .ds-table tbody tr:hover > td { background: #e8f2f2; } html[data-layout="industrial"] .ds-table tbody tr.is-selected > td { background: var(--surface-400); color: var(--ink-100); } html[data-layout="industrial"] .ds-table--dense td { height: 19px; } /* Two-line cells become one line: the note sits beside the figure, muted, instead of under it. Nothing is dropped - the words are still there. */ html[data-layout="industrial"] .ds-table td .u-col { flex-direction: row !important; align-items: baseline !important; justify-content: flex-end; gap: 6px !important; } html[data-layout="industrial"] .ds-table td .u-col > .body-13 { font-size: 10.5px; } /* a meter in a cell: numbers then a short bar, on one line */ html[data-layout="industrial"] .ds-table td .ds-meter { flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; } html[data-layout="industrial"] .ds-table td .ds-meter__nums { font-family: var(--font-sans); font-size: 12px; } html[data-layout="industrial"] .ds-table td .ds-meter__track { width: 38px; height: 5px; border-radius: 0; } html[data-layout="industrial"] .ds-table td .ds-meter__fill { border-radius: 0; } html[data-layout="industrial"] .ds-tablebar { padding: 2px 6px; font-size: 11px; gap: 8px; } html[data-layout="industrial"] .ds-pager__btn { min-width: 20px; height: 18px; border-radius: 2px; font-size: 11px; } html[data-layout="industrial"] .ds-state { padding: 18px 12px; } html[data-layout="industrial"] .ds-state__title { font-size: 13px; } html[data-layout="industrial"] .ds-state__body { font-size: 12px; } /* chips */ html[data-layout="industrial"] .ds-chip { height: 15px; padding: 0 5px; border-radius: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; } /* counters (dashboard): same tiles, half the height */ html[data-layout="industrial"] .ds-counters { border-radius: 0; } html[data-layout="industrial"] .ds-counter { padding: 4px 8px; gap: 1px; } html[data-layout="industrial"] .ds-counter__label { font-size: 10px; letter-spacing: 0.02em; } html[data-layout="industrial"] .ds-counter__value { font-family: var(--font-sans); font-size: 20px; line-height: 24px; } html[data-layout="industrial"] .ds-counter__value small { font-size: 11px; } /* tabs inside a screen (account detail) */ html[data-layout="industrial"] .ds-tabs { padding: 0 4px; } html[data-layout="industrial"] .ds-tab { height: 24px; padding: 0 10px; font-size: 11.5px; } /* key/values and callouts */ html[data-layout="industrial"] .ds-kv { gap: 3px 12px; } html[data-layout="industrial"] .ds-kv dt { font-size: 11px; } html[data-layout="industrial"] .ds-kv dd { font-size: 12px; } html[data-layout="industrial"] .ds-kv--inline { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px; } html[data-layout="industrial"] .ds-callout { padding: 3px 8px; border-radius: 0; font-size: 11.5px; line-height: 15px; } html[data-layout="industrial"] .ds-grid { gap: 3px; } html[data-layout="industrial"] .ds-dialog { border-radius: 0; } /* ------------------------------------------- what screens put in the dock */ /* A filter bar in the dock stands on end: one field per line, label on the left, so every field has its full name and nothing is squeezed. */ .ind-dock .ds-panel { border: 0; } .ind-dock .ds-panel__head { background: #eef1f4; border-bottom: 1px solid var(--border-subtle); } .ind-dock .ds-filters { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; padding: 6px; border: 0; border-radius: 0; background: transparent; } .ind-dock .ds-filters .ds-field, .ind-dock .ds-filters .ds-field--wide, .ind-dock .ds-filters .ds-field--narrow { width: auto; } .ind-dock .ds-field { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 6px; } .ind-dock .ds-field > .ds-label { text-align: right; } .ind-dock .ds-field > .ds-hint { grid-column: 2; } .ind-dock .ds-filters__spacer { display: none; } .ind-dock .ds-filters__actions { flex-wrap: wrap; padding-left: 110px; gap: 4px; } .ind-dock .ds-chipbar { padding: 0 6px 6px; gap: 4px; } .ind-dock .ds-grid--2, .ind-dock .ds-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 6px 6px; } .ind-dock .u-row { flex-wrap: wrap; } .ind-dock .ds-callout { margin: 0 6px 6px; } /* dock sections: a grey bar with a name, like a property grid category */ .ind-sec { display: flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px; background: #eef1f4; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); font-size: 11px; font-weight: 700; color: var(--ink-100); } .ind-sec__extra { margin-left: auto; font-weight: 400; color: var(--ink-300); } .ind-head { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); } .ind-head__title { font-size: 13px; font-weight: 700; color: var(--ink-100); } .ind-head__meta { font-size: 11px; color: var(--ink-300); font-variant-numeric: tabular-nums; } /* property grid */ .ind-props { display: flex; flex-direction: column; } .ind-prop { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; min-height: 20px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; } .ind-prop__k { color: var(--ink-300); padding: 0 6px 0 12px; font-size: 11.5px; } .ind-prop__v { padding: 1px 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-100); } .ind-prop__v .u-col { flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; align-items: baseline !important; } .ind-prop__v .ds-meter { flex-direction: row; align-items: center; gap: 5px; min-width: 0; } .ind-prop__v .ds-meter__track { width: 50px; height: 5px; } /* summary tiles: a tight grid of figures */ .ind-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 4px; } .ind-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind-fig { border: 1px solid var(--border-subtle); padding: 1px 5px; min-width: 0; } .ind-fig__k { font-size: 10px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ind-fig__v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-100); white-space: nowrap; } .ind-fig__v.is-warn { color: var(--warn); } .ind-fig__v.is-danger { color: var(--danger); } .ind-note { padding: 4px 8px; font-size: 11px; line-height: 15px; color: var(--ink-300); } .ind-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-top: 1px solid var(--border-subtle); margin-top: auto; } /* ---------------------------------------------------------- small finishes */ html[data-layout="industrial"] a.ds-link { color: var(--accent); text-decoration: none; font-weight: 600; } html[data-layout="industrial"] a.ds-link:hover { color: var(--accent-hover); text-decoration: underline; } /* A placeholder must never be read as a value that was typed: italic and lighter, still 4.5:1 on white. */ html[data-layout="industrial"] .ds-input::placeholder { color: #66717f; font-style: italic; } .ind-dock .u-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .ind-fig__k { white-space: normal; line-height: 12px; }