/* BLASST web PoC — visual language echoes the desktop app: dark surface, large colored dots per group, prominent overall status. Theme controlled by [data-theme] on : "dark" or "light". */ :root, html[data-theme="dark"] { --bg-0: #0f1115; --bg-1: #161a21; --bg-2: #1d222b; --bg-3: #262c37; --text-0: #e7ebf1; --text-1: #aab2bf; --text-2: #7e8694; --border: #2c333f; --accent: #4ea1ff; --hover: #2a313d; --status-error: #c64bff; --status-alert: #ff3b30; --status-alert-acked: #ff8c00; --status-warning: #ffd60a; --status-normal: #34c759; --status-off: #555a66; --presence-available: #34c759; --presence-busy: #ff3b30; --presence-away: #ffd60a; --presence-break: #ff8c00; --presence-offline: #777e8b; } html[data-theme="light"] { --bg-0: #f5f7fa; --bg-1: #ffffff; --bg-2: #eef1f5; --bg-3: #dde2ea; --text-0: #131722; --text-1: #4a5263; --text-2: #7b8595; --border: #d0d7e0; --accent: #0a5ed7; --hover: #e4e9f0; --status-error: #a020c4; --status-alert: #d50f0b; --status-alert-acked: #cc6600; --status-warning: #c4a300; --status-normal: #218a3b; --status-off: #b9bec8; --presence-available: #218a3b; --presence-busy: #d50f0b; --presence-away: #c4a300; --presence-break: #cc6600; --presence-offline: #9ba3ae; } * { box-sizing: border-box; } /* Honor the [hidden] attribute even on elements with explicit display rules (e.g. .overlay sets display: flex, which would otherwise override). */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text-0); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; height: 100%; } button, input, select { font: inherit; color: inherit; } .muted { color: var(--text-2); } .small { font-size: 12px; } .row { display: inline-flex; align-items: center; gap: 8px; } .spacer { flex: 1; } /* ---------- Overlay / login ---------- */ .overlay { position: fixed; inset: 0; background: rgba(7, 9, 12, 0.85); display: flex; align-items: center; justify-content: center; z-index: 100; } .login-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 28px 28px 22px; width: 380px; box-shadow: 0 18px 60px rgba(0,0,0,0.5); } .brand { margin: 0 0 4px; text-align: center; letter-spacing: 4px; font-weight: 800; } .subtitle { text-align: center; color: var(--text-1); margin: 0 0 18px; } #login-form label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--text-1); } #login-form input[type="text"], #login-form input[type="password"], #login-form input:not([type="checkbox"]) { width: 100%; margin-top: 4px; padding: 9px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; outline: none; } #login-form input:focus { border-color: var(--accent); } .checkbox { font-size: 12px; color: var(--text-1); } .error { color: var(--status-alert); background: rgba(255,59,48,0.1); border: 1px solid rgba(255,59,48,0.4); border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-bottom: 10px; } #login-submit { width: 100%; padding: 10px 14px; background: var(--accent); color: #07101c; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; } #login-submit:disabled { opacity: 0.6; cursor: progress; } /* ---------- Top bar ---------- */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-1); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; } .brand-sm { font-weight: 700; letter-spacing: 2px; } .badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--bg-3); color: var(--text-1); border: 1px solid var(--border); } .badge.muted { background: var(--bg-3); color: var(--text-2); } select, .btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-0); border-radius: 6px; padding: 6px 10px; cursor: pointer; } .btn:hover { background: var(--hover); } .btn.ghost { background: transparent; } .btn.warn { background: var(--status-alert-acked); color: #1c0f00; border-color: transparent; } .btn.ok { background: var(--status-normal); color: #051a0b; border-color: transparent; } .btn.small { padding: 4px 8px; font-size: 12px; } /* ---------- Layout ---------- */ .main-grid { display: grid; grid-template-columns: 240px 1fr 260px; gap: 1px; background: var(--border); height: calc(100vh - 56px - 36vh); min-height: 360px; } .pane { background: var(--bg-0); padding: 12px 14px; overflow: auto; } .pane h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 8px; color: var(--text-1); } .pane-section { margin-bottom: 14px; } .pane-subhead { font-size: 11px; margin: 0 0 6px; color: var(--text-2); text-transform: uppercase; letter-spacing: 1px; } .pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* ---------- Status dot ---------- */ .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--status-off); box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset; flex-shrink: 0; } .dot.lg { width: 18px; height: 18px; } .dot[data-status="error"] { background: var(--status-error); } .dot[data-status="alert"] { background: var(--status-alert); } .dot[data-status="alert-acked"] { background: var(--status-alert-acked); } .dot[data-status="warning"] { background: var(--status-warning); } .dot[data-status="normal"] { background: var(--status-normal); } .dot[data-status="off"] { background: var(--status-off); } /* presence dots */ .dot[data-presence="available"] { background: var(--presence-available); } .dot[data-presence="busy"] { background: var(--presence-busy); } .dot[data-presence="away"] { background: var(--presence-away); } .dot[data-presence="break"] { background: var(--presence-break); } .dot[data-presence="offline"] { background: var(--presence-offline); } /* ---------- Group / event / user lists ---------- */ .group-list, .event-list, .user-list { list-style: none; padding: 0; margin: 0; } .group-list li, .user-list li { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; } .group-list li:hover, .user-list li:hover { background: var(--hover); } .group-list li.active { background: var(--hover); outline: 1px solid var(--accent); } .group-list li[draggable="true"] { cursor: grab; } .group-list li.dragging { opacity: 0.4; cursor: grabbing; } .group-list li.drop-above { box-shadow: inset 0 2px 0 0 var(--accent); } .group-list li.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent); } /* Pin icon: ☆ hidden until row hover, ★ always visible (gold). */ .group-list .pin { margin-left: 4px; color: var(--text-2); font-size: 13px; line-height: 1; cursor: pointer; user-select: none; opacity: 0; transition: opacity 0.1s, color 0.1s; } .group-list li:hover .pin { opacity: 0.75; } .group-list .pin:hover { color: var(--accent); opacity: 1; } .group-list .pin.pinned { color: var(--status-warning); opacity: 1; } /* Groups pane: collapsible
sections + the sort dropdown in the head. */ .groups-pane .pane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .groups-pane .pane-head h2 { margin: 0; flex: 1; } details.pane-section { margin-bottom: 10px; } details.pane-section > summary { list-style: none; /* hide native disclosure marker */ cursor: pointer; font-size: 11px; margin: 0 0 6px; color: var(--text-2); text-transform: uppercase; letter-spacing: 1px; position: relative; padding-left: 14px; } details.pane-section > summary::-webkit-details-marker { display: none; } details.pane-section > summary::before { content: "▶"; position: absolute; left: 0; font-size: 9px; color: var(--text-2); transition: transform 0.15s; } details.pane-section[open] > summary::before { transform: rotate(90deg); } .group-list .count { margin-left: auto; font-size: 11px; background: var(--bg-3); color: var(--text-1); padding: 2px 6px; border-radius: 999px; } .event-list li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; padding: 10px 8px; border-bottom: 1px solid var(--border); cursor: pointer; } .event-list li:hover { background: var(--hover); } .event-list .ev-summary { font-weight: 600; } .event-list .ev-meta { color: var(--text-2); font-size: 12px; margin-top: 2px; } .event-list .ev-meta .ev-customer { color: var(--text-0); font-weight: 600; } .event-list .ev-state { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--bg-3); color: var(--text-1); text-transform: uppercase; letter-spacing: 1px; } .event-list .ev-state[data-state="acknowledged"] { background: rgba(255,140,0,0.2); color: var(--status-alert-acked); } .event-list .ev-state[data-state="resolved"] { background: rgba(52,199,89,0.15); color: var(--status-normal); } .event-list .ev-state[data-state="new"] { background: rgba(255,59,48,0.2); color: var(--status-alert); } .empty { text-align: center; color: var(--text-2); padding: 30px 10px; font-style: italic; } /* ---------- Log ---------- */ .logwrap { border-top: 1px solid var(--border); background: var(--bg-1); height: 36vh; display: flex; flex-direction: column; } .logwrap.collapsed { height: 36px; } .logwrap.collapsed .log { display: none; } .logwrap-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); } .logwrap-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-1); } .log { flex: 1; margin: 0; padding: 8px 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-1); overflow: auto; white-space: pre-wrap; } /* ---------- Dialog ---------- */ .dialog { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; width: 600px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; } .dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); } .dialog-head .badge { margin-right: 8px; font-size: 11px; } .dialog-body { padding: 14px 16px; overflow: auto; flex: 1; } .dialog-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); } .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); margin: 10px 0 4px; } .field-value { padding: 8px 10px; background: var(--bg-2); border-radius: 6px; word-break: break-word; } .field-value a { color: var(--accent); } .timeline { margin-top: 12px; } .timeline-entry { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 6px 0; } .timeline-entry .tl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; } .timeline-entry .tl-text strong { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .timeline-entry .tl-text .tl-meta { color: var(--text-2); font-size: 11px; } .timeline-entry .tl-note { color: var(--text-1); font-style: italic; font-size: 12px; } .priority-alert { background: var(--status-alert); color: white; } .priority-alert-acked { background: var(--status-alert-acked); color: #1c0f00; } .priority-warning { background: var(--status-warning); color: #1a1500; } .priority-error { background: var(--status-error); color: white; } .priority-normal { background: var(--status-normal); color: #051a0b; } .state-new { background: var(--status-alert); color: white; } .state-acknowledged { background: var(--status-alert-acked); color: #1c0f00; } .state-resolved { background: var(--status-normal); color: #051a0b; } /* ---------- Password row, icon buttons, state chips, config dialog ---------- */ .pw-row { display: flex; gap: 6px; align-items: stretch; margin-top: 4px; } .pw-row input { flex: 1; } .icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .state-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); font-size: 11px; cursor: pointer; user-select: none; } .state-chip input[type="checkbox"] { margin: 0; cursor: pointer; } .small-select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 11px; color: var(--text-0); } .dialog.wide { width: 720px; } .config-section { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 4px 12px; } .config-section[open] { padding-bottom: 12px; } .config-section summary { font-size: 13px; font-weight: 600; padding: 8px 0; cursor: pointer; list-style: none; position: relative; padding-left: 18px; } .config-section summary::before { content: "▶"; position: absolute; left: 0; font-size: 10px; color: var(--text-2); transition: transform 0.15s; } .config-section[open] summary::before { transform: rotate(90deg); } .cfg-subhead { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-2); margin: 12px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .cfg-subhead:first-of-type { margin-top: 4px; } .cfg-grid { display: grid; grid-template-columns: 170px 1fr; gap: 10px 14px; align-items: center; padding-top: 6px; } .cfg-grid label { font-size: 12px; color: var(--text-1); } .cfg-grid input[type="range"] { width: 100%; } .cfg-grid input[type="text"], .cfg-grid input[type="color"], .cfg-grid select, .cfg-grid input:not([type]) { background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; color: var(--text-0); } .cfg-grid input[type="color"] { width: 50px; height: 28px; padding: 2px; } /* ---------- Log subsystems & levels ---------- */ .log-line { white-space: pre-wrap; } .log-line .lvl { display: inline-block; width: 4em; font-weight: 600; } .log-line.lvl-debug .lvl { color: var(--text-2); } .log-line.lvl-info .lvl { color: var(--text-1); } .log-line.lvl-warn .lvl { color: var(--status-warning); } .log-line.lvl-error .lvl { color: var(--status-alert); } .log-line .sub { color: var(--text-2); margin-right: 4px; } .log-filter input { margin: 0; } .log { /* override pre default to support DOM children */ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---------- Toast stack (in-app new-event notifications) ---------- */ .toast-stack { position: fixed; top: 64px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 360px; } .toast { background: var(--bg-2); border: 1px solid var(--border); border-left: 4px solid var(--status-off); border-radius: 8px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); cursor: pointer; animation: toast-in 0.18s ease-out; } .toast[data-status="alert"] { border-left-color: var(--status-alert); } .toast[data-status="alert-acked"] { border-left-color: var(--status-alert-acked); } .toast[data-status="warning"] { border-left-color: var(--status-warning); } .toast[data-status="error"] { border-left-color: var(--status-error); } .toast .toast-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; } .toast .toast-head .grow { flex: 1; } .toast .toast-close { color: var(--text-2); font-size: 16px; line-height: 1; } .toast .toast-body { color: var(--text-1); font-size: 12px; margin-top: 4px; word-break: break-word; } .toast .toast-link { color: var(--accent); font-size: 12px; margin-top: 4px; display: inline-block; } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* ---------- Dialog form controls ---------- (the config dialog styles its own fields via .cfg-grid; these cover the new-event, profile, and event dialogs, which otherwise inherit a light text color on the browser-default white input background.) */ #new-event-overlay input, #new-event-overlay select, #profile-overlay input:not([type="file"]), #event-dialog-overlay input, #event-dialog-overlay select { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text-0); } input::placeholder, textarea::placeholder { color: var(--text-2); opacity: 1; } /* ---------- Avatars ---------- */ .avatar-sm { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; } .avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-2); border: 1px solid var(--border); } .profile-btn { display: inline-flex; align-items: center; gap: 4px; } .profile-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } /* ---------- Wallboard view ---------- */ .wallboard { padding: 16px; overflow: auto; height: calc(100vh - 56px - 36vh); min-height: 360px; background: var(--bg-0); } .wallboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .wb-col { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .wb-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-1); } .wb-count { margin-left: auto; background: var(--bg-3); color: var(--text-1); padding: 1px 8px; border-radius: 999px; font-size: 11px; } .wb-cards { display: flex; flex-direction: column; gap: 6px; } .wb-card { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-2); border-radius: 8px; } .wb-name { font-weight: 600; } .wb-user { color: var(--text-2); font-size: 12px; } /* ---------- Favicon flash hint (title prefix is the user-visible signal) ---------- */