/* Sentinel portal — shared styles. Dark, dense-but-calm, status-first. */ :root { --bg: #0f1420; --panel: #161c2b; --panel-2: #1d2536; --border: #263149; --text: #e6ebf5; --muted: #8a94a6; --accent: #4f8cff; --green: #2ecc71; --amber: #f1c40f; --red: #e74c3c; --indigo: #7c6cff; --grey: #5a6478; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } a { color: var(--accent); text-decoration: none; } .topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .brand { font-weight: 700; letter-spacing: .5px; } .brand span { color: var(--accent); } .nav { display: flex; gap: 14px; margin-left: 12px; } .nav a { color: var(--muted); padding: 4px 8px; border-radius: 6px; } .nav a.active, .nav a:hover { color: var(--text); background: var(--panel-2); } .spacer { flex: 1; } .counts { display: flex; gap: 10px; } .chip { padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; border: 1px solid var(--border); background: var(--panel-2); } .chip.red { color: var(--red); border-color: var(--red); } .chip.amber { color: var(--amber); border-color: var(--amber); } .chip.green { color: var(--green); border-color: var(--green); } .chip.indigo { color: var(--indigo); border-color: var(--indigo); } .wrap { padding: 20px; max-width: 1400px; margin: 0 auto; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; } h1, h2, h3 { margin: 0 0 12px; font-weight: 650; } .muted { color: var(--muted); } .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .client-panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .client-panel h3 { display: flex; align-items: center; gap: 8px; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot.healthy { background: var(--green); } .dot.warning { background: var(--amber); } .dot.critical { background: var(--red); animation: pulse 1.4s infinite; } .dot.unknown { background: var(--grey); } .dot.sdt { background: var(--indigo); } /* no_data: host went silent (its collector is down / not feeding it). Distinct from 'unknown' (never reported) — hollow grey ring, non-alerting, never pulses. */ .dot.no_data { background: transparent; border: 2px solid var(--grey); width: 8px; height: 8px; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } .hosts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tile { min-width: 74px; padding: 8px; border-radius: 8px; text-align: center; border: 1px solid var(--border); background: var(--panel); font-size: 12px; } .tile.critical { border-color: var(--red); } .tile.warning { border-color: var(--amber); } .tile.healthy { border-color: var(--green); } .tile .name { font-weight: 600; display: block; margin-bottom: 2px; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } input, select, button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } button { background: var(--accent); border-color: var(--accent); color: #fff; cursor: pointer; font-weight: 600; } button.secondary { background: var(--panel-2); color: var(--text); } button:hover { filter: brightness(1.08); } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 12px; color: var(--muted); } .login-wrap { display: grid; place-items: center; height: 100vh; } .login-card { width: 360px; } .error { color: var(--red); min-height: 18px; font-size: 13px; } .ok { color: var(--green); } .badge { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); } .token { font-family: ui-monospace, Consolas, monospace; word-break: break-all; background: var(--panel); padding: 8px; border-radius: 8px; border: 1px solid var(--border); } .live { font-size: 12px; color: var(--muted); } .live b { color: var(--green); } /* ---- professional monitoring UI additions ---- */ .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .toolbar input, .toolbar select { min-width: 120px; } .toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .crumbs { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .crumbs a { color: var(--accent); } .statbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; min-width: 84px; text-align: center; } .stat b { display: block; font-size: 22px; line-height: 1.1; } .stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .stat.crit b { color: var(--red); } .stat.warn b { color: var(--amber); } .stat.ok b { color: var(--green); } .stat.unk b { color: var(--grey); } a.client-panel { text-decoration: none; color: var(--text); display: block; } a.client-panel:hover { border-color: var(--accent); } .minibar { display: flex; gap: 6px; margin-top: 10px; } .pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .pill.crit { background: rgba(231,76,60,.18); color: var(--red); } .pill.warn { background: rgba(241,196,15,.18); color: var(--amber); } .pill.ok { background: rgba(46,204,113,.15); color: var(--green); } .pill.unk { background: rgba(90,100,120,.2); color: var(--muted); } tr:hover td { background: rgba(255,255,255,.02); } .spark { display: block; } .sparkval { font-weight: 600; margin-top: 4px; } .slabig { text-align: center; padding: 20px; } .slapct { font-size: 52px; font-weight: 700; } .slapct.ok { color: var(--green); } .slapct.warn { color: var(--amber); } .slapct.crit { color: var(--red); } td.ok { color: var(--green); font-weight: 600; } td.warn { color: var(--amber); font-weight: 600; } td.crit { color: var(--red); font-weight: 600; } /* ---- resource tree page ---- */ .treewrap { display: flex; height: calc(100vh - 58px); } .treepane { width: 380px; min-width: 220px; max-width: 70vw; border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; } .resizer { width: 6px; cursor: col-resize; background: var(--border); flex: 0 0 auto; } .resizer:hover, .resizer.dragging { background: var(--accent); } .treehead { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border); align-items: center; flex-wrap: wrap; } .treehead select, .treehead input { flex: 1; min-width: 90px; } /* compact icon buttons in the tree head (refresh / collapse-all) */ .treebtn { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; padding: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; } .treebtn:hover { color: var(--text); border-color: var(--accent); background: var(--panel); } .treebtn svg { width: 15px; height: 15px; } .treebtn.spinning svg { animation: spin .6s linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tree-live { flex: 0 0 auto; font-size: 11px; margin-left: 2px; } .tree { overflow: auto; flex: 1; padding: 6px 0; } .tnode { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; font-size: 13px; } .tnode:hover { background: var(--panel-2); } .tnode.sel { background: rgba(79,140,255,.15); } .tnode.host .tname { color: var(--muted); } .caret { width: 14px; display: inline-block; text-align: center; color: var(--muted); } .tname { overflow: hidden; text-overflow: ellipsis; } /* node type icon (folder/host) — NEUTRAL, never health-tinted. Side badges carry status. */ .nicon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: #8792a6; flex: 0 0 auto; } .nicon .ic-svg { width: 18px; height: 18px; } /* folders/hosts on a node whose subtree has criticals turn RED, so the icon itself (EC2/ECS/RDS/ALB/web) alerts as boldly as the status badge. Uses the same critical red as the status disc (#e5484d) for a consistent alert signal. */ .nicon.h-critical { color: #e5484d; } /* warnings give the icon a subtler amber so a non-critical issue is still visible on the glyph without shouting. */ .nicon.h-warning { color: #d9922b; } /* no_data node/host icon: muted + slightly faded so a silent host reads as 'grey, not red' (collector-down suppression). Non-alarming on purpose. */ .nicon.h-no_data { color: var(--grey); opacity: .6; } /* per-row status icon cluster (right-aligned) */ .cluster { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; } /* status icons: filled discs, clearly legible */ .stat-ic { display: inline-flex; } .stat-ic svg { width: 19px; height: 19px; display: block; } .bc { display: inline-flex; align-items: center; } .bc-n { margin-left: 4px; font-size: 12px; font-weight: 700; line-height: 1; } .bc-n.crit { color: #ff6b6b; } .bc-n.warn { color: #f5b73d; } .bc-n.unk { color: #9aa4b6; } .bc-n.nodata { color: #8792a6; } .stat-ic.nodata svg { opacity: .85; } /* flag icons: alerting-off (bell-slash, grey) + SDT (clock, blue) */ .ic-flag { display: inline-flex; } /* Base size for EVERY flag glyph. The inherited alerting-off bell uses a bare `.ic-flag` class (no .off/.sdt) and its inline has no width/height attrs, so without this rule it collapsed to 0x0 and was invisible on inherited nodes and hosts even though the markup rendered. Keep the per-variant overrides below. */ .ic-flag svg { width: 18px; height: 18px; display: block; } .ic-flag.off svg { width: 18px; height: 18px; } .ic-flag.sdt svg { width: 19px; height: 19px; display: block; } .ic-flag.off { color: #97a1b4; } .detailpane { flex: 1; overflow: auto; padding: 16px; } .dhead h2 { margin: 0 0 2px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 14px 0; } .tab { background: none; border: none; color: var(--muted); padding: 8px 14px; border-bottom: 2px solid transparent; border-radius: 0; } .tab.active { color: var(--text); border-bottom-color: var(--accent); } .tabbody { } /* toggle switch */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; background: var(--grey); border-radius: 999px; transition: .2s; cursor: pointer; } .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: var(--green); } .switch input:checked + .slider:before { transform: translateX(20px); } /* ---- LM-style host detail: DataSource list + tabbed panel ---- */ /* Host heading: title row on top, identity sub-line below (like the websites page). */ .hosthead { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-bottom: 12px; } .hosthead-main { display: flex; align-items: center; gap: 10px; } .hosthead .hostsub { font-size: 12px; } .hostgrid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; } .dslist { position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow: auto; } .dslist h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); } .dsrow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; } .dsrow:hover { background: var(--panel-2); } .dsrow.sel { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); } .dsrow .dsname { flex: 1; } .dsrow .dscount { font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; } .hostdetail { min-width: 0; } #infotable td { padding: 6px 8px; border-bottom: 1px solid var(--border); } input[type="datetime-local"] { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; } @media (max-width: 900px) { .hostgrid { grid-template-columns: 1fr; } .dslist { position: static; max-height: none; } } /* ---- host graphs: range controls + area/trend charts ---- */ .rangebar { margin-bottom: 10px; align-items: center; } .rangebtns { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; } .rbtn { background: none; border: none; color: var(--muted); padding: 5px 12px; border-radius: 6px; font-weight: 600; cursor: pointer; } .rbtn.active { background: var(--accent); color: #fff; } .rbtn:hover:not(.active) { color: var(--text); } svg.area { width: 100%; height: 120px; display: block; } .diskcard { grid-column: span 2; } /* time axis (date + time across the edges) — small so labels fit cleanly */ .axis.axis-time { font-size: 10px; letter-spacing: -.2px; } .axis.axis-time span:first-child { text-align: left; } .axis.axis-time span:nth-child(2) { text-align: center; flex: 1; } .axis.axis-time span:last-child { text-align: right; } /* ---- website uptime: summary chips + binary timeline + daily strip ---- */ .uptime-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; } .uchip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; min-width: 96px; display: flex; flex-direction: column; gap: 2px; } .uchip span { font-size: 11px; color: var(--muted); } .uchip b { font-size: 19px; font-weight: 800; letter-spacing: -.3px; } .uchip.ok b { color: var(--green); } .uchip.bad b { color: var(--red); } .uptime-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .dtfilter { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .dtfilter:hover { color: var(--text); } .dtfilter.on { background: rgba(231,76,60,.15); color: var(--red); border-color: var(--red); } .daystrip { display: flex; flex-wrap: wrap; gap: 3px; } .daycell { width: 14px; height: 14px; border-radius: 3px; display: inline-block; } .daycell:hover { outline: 1.5px solid var(--text); } /* multi-tick time axis: evenly spaced labels across the window (AWS-style) */ .axis.axis-time.axis-multi { display: flex; justify-content: space-between; color: var(--muted); } .axis.axis-time.axis-multi span { flex: 1 1 0; text-align: center; white-space: nowrap; } .axis.axis-time.axis-multi span.ax-first { text-align: left; } .axis.axis-time.axis-multi span.ax-last { text-align: right; } /* ---- premium metric chart: KPI header + crosshair tooltip ---- */ .kpi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; } .kpi-cur { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px; } .kpi-unit { font-size: 15px; font-weight: 700; margin-left: 2px; opacity: .8; } .kpi-trend { font-size: 12px; font-weight: 700; } .kpi-chips { display: inline-flex; gap: 6px; margin-left: auto; } .kpi-chip { font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; } .kpi-chip b { color: var(--text); font-weight: 700; } /* threshold legend below the chart (readable, out of the plot area) */ .th-legend { display: flex; gap: 14px; margin-top: 4px; font-size: 11px; } .th-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; } .th-item i { width: 16px; height: 0; border-top: 2px dashed currentColor; display: inline-block; } .th-item.warn { color: var(--amber); } .th-item.crit { color: var(--red); } /* chart card needs relative positioning so the tooltip anchors to it */ .card { position: relative; } svg.area { cursor: crosshair; } .cx-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 1px; white-space: nowrap; } .cx-tip b { font-size: 14px; } .cx-tip span { color: var(--muted); font-size: 10.5px; } /* ---- state timeline strip (binary / status metrics) ---- */ svg.strip { width: 100%; height: 34px; display: block; margin: 2px 0; } /* Services / App Pools: compact table (overview) with expand-on-click history */ .statetablecard { grid-column: 1 / -1; } /* span the full grid width */ .afilters { display: flex; gap: 8px; margin-bottom: 10px; } table.statetable { width: 100%; border-collapse: collapse; } table.statetable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); } table.statetable td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } tr.sc-row { cursor: pointer; } tr.sc-row:hover td { filter: brightness(1.06); } .sc-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; transition: transform .1s; } tr.sc-detail td { background: var(--panel-2); padding: 8px 14px; } .sc-strip { min-height: 26px; } .stateline { display: flex; align-items: center; margin: 2px 0 6px; } .statebadge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 3px 10px; border-radius: 6px; color: #fff; } .statebadge.ok { background: var(--green); } .statebadge.warn { background: var(--amber); color: #3a2c00; } .statebadge.bad { background: var(--red); } .statebadge.unknown { background: var(--grey); } /* segmented status-check pill: one cell per AWS check, green pass / red fail */ .chkline { gap: 8px; } .chk-pill { display: inline-flex; gap: 3px; } .chk-cell { width: 16px; height: 16px; border-radius: 4px; display: inline-block; } .chk-cell.ok { background: var(--green); } .chk-cell.bad { background: var(--red); box-shadow: 0 0 0 2px rgba(231,76,60,.25); } .chk-label { font-size: 12px; font-weight: 700; } .metric-hint { font-size: 11px; margin: -4px 0 8px; opacity: .85; } /* last-sync freshness badge in the graphs toolbar */ .lastsync { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; white-space: nowrap; } .lastsync .ls-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--grey); } .lastsync.fresh .ls-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(46,204,113,.18); animation: pulse 1.8s infinite; } .lastsync.fresh { color: var(--green); } .lastsync.stale .ls-dot { background: var(--amber); } .lastsync.stale { color: var(--amber); } .lastsync.old .ls-dot { background: var(--red); } .lastsync.old { color: var(--red); } /* owning-collector pill in the host/website heading, color-coded by availability */ .collpill { font-size: 11px; display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); } .collpill.coll-healthy { border-color: var(--green); color: var(--green); background: rgba(46,204,113,.10); } .collpill.coll-warning { border-color: var(--amber); color: var(--amber); background: rgba(241,196,15,.12); } .collpill.coll-critical { border-color: var(--red); color: var(--red); background: rgba(231,76,60,.10); } .collpill.coll-unknown { border-color: var(--grey); color: var(--muted); } .axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; } .sparkval { margin-top: 6px; font-weight: 600; } .tr-bad { color: var(--red); font-weight: 700; } .tr-good { color: var(--green); font-weight: 700; } /* alerts-first tables */ tr.row-bad td { background: rgba(229,72,77,0.06); } td.ok { color: var(--green); } @media (max-width: 1100px) { .diskcard { grid-column: span 1; } } /* ---- website Run Test results ---- */ .testbanner { padding: 10px 14px; border-radius: 8px; font-weight: 700; margin-bottom: 12px; } .testbanner.ok-b { background: rgba(48,164,108,0.15); color: var(--green); border: 1px solid var(--green); } .testbanner.err-b { background: rgba(229,72,77,0.12); color: var(--red); border: 1px solid var(--red); } pre.pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; } /* ---- dashboard polish ---- */ .healthbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); margin: 0 0 18px; } .hseg { display: block; height: 100%; } .hseg.crit { background: var(--red); } .hseg.warn { background: var(--amber); } .hseg.ok { background: var(--green); } .hseg.unk { background: var(--grey); } .sec-head { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 8px 0 10px; } /* ---- embedded host detail inside the Resources drill-down ---- */ .hostframe { width: 100%; height: calc(100vh - 70px); border: 0; display: block; background: var(--bg); } /* When a non-Graphs host tab is active, DataSources hides and content goes full width. */ .hostgrid.nodslist { grid-template-columns: 1fr; } /* ---- Light theme (toggled via ) ---- */ :root[data-theme="light"] { --bg: #f4f6fb; --panel: #ffffff; --panel-2: #eef1f7; --border: #d5dbe8; --text: #1b2233; --muted: #5b6577; --green: #1f9d57; --amber: #c8890a; --red: #d33b34; --indigo: #5b4bd6; --grey: #9aa4b6; } /* theme toggle button (sun/moon) — small + discreet in the navbar */ .themebtn { background: none; border: 1px solid var(--border); color: var(--muted); width: 32px; height: 32px; padding: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .themebtn:hover { color: var(--text); border-color: var(--accent); } .themebtn svg { width: 16px; height: 16px; } /* ---- LM-style severity badges + row tint on the Alerts table ---- */ .sevbadge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #fff; line-height: 1.4; min-width: 66px; justify-content: center; } .sevbadge.sev-critical { background: var(--red); } .sevbadge.sev-warning { background: var(--amber); color: #3a2c00; } .sevbadge.sev-unknown { background: var(--grey); } .sevbadge.sev-no_data { background: transparent; color: var(--muted); border: 1px dashed var(--grey); } .sevbadge.sev-healthy { background: var(--green); } .sevbadge.sev-error { background: #ff8c00; } /* ignored: auto-classified "don't monitor" — slate, intentionally un-alarming and visually distinct from healthy(green)/unknown(grey) so it reads as "we know, by choice" */ .sevbadge.sev-ignored { background: transparent; color: #7a8699; border: 1px dashed #7a8699; } .sevbadge .sdt-clock svg { width: 13px; height: 13px; } /* whole-row tint by severity + a colored left accent bar, like LM */ .sev-row-critical td { background: rgba(231,76,60,.14); } .sev-row-critical td:first-child { box-shadow: inset 3px 0 0 var(--red); } .sev-row-warning td { background: rgba(241,196,15,.20); } .sev-row-warning td:first-child { box-shadow: inset 3px 0 0 var(--amber); } /* healthy rows: no tint, subtle green accent bar so the table still reads clean */ .sev-row-healthy td:first-child { box-shadow: inset 3px 0 0 var(--green); } /* no_data rows: muted grey accent, no red/amber tint — silent, not alarming */ .sev-row-no_data td { background: rgba(90,100,120,.08); } .sev-row-no_data td:first-child { box-shadow: inset 3px 0 0 var(--grey); } /* ignored rows: slate accent, no tint — present but intentionally unmonitored */ .sev-row-ignored td { background: rgba(122,134,153,.07); } .sev-row-ignored td:first-child { box-shadow: inset 3px 0 0 #7a8699; } .sev-row:hover td { filter: brightness(1.05); } /* ---- severity filter buttons (node/parent alerts view) ---- */ .alertfilters { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; } .afilter { border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700; letter-spacing: .3px; cursor: pointer; background: var(--panel-2); color: var(--muted); } .afilter.on.af-crit { background: rgba(231,76,60,.15); color: var(--red); border-color: var(--red); } .afilter.on.af-warn { background: rgba(241,196,15,.18); color: var(--amber); border-color: var(--amber); } .afilter.on.af-err { background: rgba(255,140,0,.15); color: #ff8c00; border-color: #ff8c00; } .afilter.on.af-ok { background: rgba(46,204,113,.15); color: var(--green); border-color: var(--green); } .afilter.on.af-ign { background: rgba(122,134,153,.15); color: #7a8699; border-color: #7a8699; } /* small "kind" tag in the alerts table (Service / App Pool / Website / …) */ .kindtag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; } /* per-graph maximize button (lives in the card

) */ .maxbtn { float: right; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; padding: 2px 5px; line-height: 0; } .maxbtn:hover { color: var(--text); border-color: var(--accent); } /* maximized-graph modal */ .chartmodal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000; align-items: center; justify-content: center; } .chartmodal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; width: min(1320px, 95vw); max-height: 92vh; overflow: auto; padding: 16px 20px; box-shadow: 0 24px 70px rgba(0,0,0,.55); } .chartmodal-head { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-bottom: 8px; } .chartmodal-body { min-height: 440px; padding: 4px 2px; } /* extended view: fill the modal — no dead margins */ .chartmodal-body svg.area { width: 100%; height: 460px; } .chartmodal-body svg.strip { width: 100%; height: 72px; } .chartmodal-body .kpi { margin: 2px 0 10px; } .chartmodal-body .kpi-cur { font-size: 38px; } .chartmodal-body .axis.axis-time { font-size: 11px; margin-top: 6px; } /* AWS-style controls toolbar in the modal header */ .chartctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chartctrls .ctrl-sel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .chartctrls .ctrl-group { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; } .chartctrls .ctrl-pill { background: transparent; border: none; color: var(--muted); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } .chartctrls .ctrl-pill.active { background: var(--accent); color: #fff; } .chartctrls .ctrl-pill:hover:not(.active) { color: var(--text); } /* deselected: greyed + strikethrough so it's obvious it's hidden */ .afilter.off { opacity: .5; text-decoration: line-through; } .afilter:hover { filter: brightness(1.08); } /* ---- SDT indicator on alert rows (LM-style blue clock next to severity) ---- */ .sev-cell { display: inline-flex; align-items: center; gap: 6px; } .sdt-clock { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; } .sdt-clock svg { width: 16px; height: 16px; } .alertoff-ic { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; } .alertoff-ic svg { width: 16px; height: 16px; } /* small SDT/alert-off icons next to an alert severity badge (all alert views) */ .supp-ic { display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto; margin-left: 2px; vertical-align: middle; } .supp-ic svg { width: 15px; height: 15px; } tr.alert-sdt td { background: rgba(46,143,255,0.07); } /* ---- Monitoring coverage chips (Websites: internal / external checkpoints) ---- */ .covrow { display: flex; gap: 12px; flex-wrap: wrap; } .covchip { flex: 1; min-width: 220px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); } .covchip .covk { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; } .covchip .covv { font-weight: 700; font-size: 15px; } .covchip .covs { font-size: 12px; margin-top: 3px; } .covchip.cov-ok { border-color: rgba(46,204,113,.5); } .covchip.cov-ok .covv { color: var(--green); } .covchip.cov-bad { border-color: rgba(231,76,60,.55); } .covchip.cov-bad .covv { color: var(--red); } .covchip.cov-none .covv { color: var(--muted); font-weight: 600; } .covchip.cov-off .covv { color: var(--muted); font-weight: 600; } /* ---- Collectors (Collector Management) page ---- */ .colgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-bottom: 18px; } .colcard { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .colcard.col-up { border-left: 4px solid var(--green); } .colcard.col-stale { border-left: 4px solid var(--amber); } .colcard.col-down { border-left: 4px solid var(--red); } .colcard.col-pending { border-left: 4px solid var(--grey); } /* active-alert banner inside a down/stale collector card */ .colalert { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 4px 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; } .colalert.col-down { background: rgba(231,76,60,.12); color: var(--red); border: 1px solid rgba(231,76,60,.4); } .colalert.col-stale { background: rgba(241,196,15,.14); color: var(--amber); border: 1px solid rgba(241,196,15,.45); } .colalert a { color: inherit; font-weight: 700; white-space: nowrap; text-decoration: none; } .colalert a:hover { text-decoration: underline; } .colhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .colname { font-size: 15px; } .colstatus { font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 3px 9px; border-radius: 6px; color: #fff; } .colstatus.col-up { background: var(--green); } .colstatus.col-stale { background: var(--amber); color: #3a2c00; } .colstatus.col-down { background: var(--red); } .colstatus.col-pending { background: var(--grey); } .coltable { width: 100%; } .coltable td { padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 13px; } .coltable td.ck { color: var(--muted); width: 130px; font-size: 12px; } /* ---- Dashboards (LM-style product status boards) ---- */ .dashgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); } .dbox { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .dbox-head { font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); } .dbox-srv .dbox-head { box-shadow: inset 4px 0 0 var(--accent); } .dbox-web .dbox-head { box-shadow: inset 4px 0 0 var(--indigo); } .dbox-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .dcol { padding: 12px 14px; border-right: 1px solid var(--border); } .dcol:last-child { border-right: 0; } .dcol-head { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dcol-counts { display: inline-flex; gap: 6px; font-weight: 600; } .rc { padding: 1px 7px; border-radius: 999px; font-size: 11px; } .rc-crit { background: rgba(231,76,60,.14); color: var(--red); } .rc-warn { background: rgba(241,196,15,.18); color: var(--amber); } .rc-ok { background: rgba(46,204,113,.13); color: var(--green); } .dcol-placeholder { color: var(--muted); font-style: italic; padding: 18px 0; text-align: center; border: 1px dashed var(--border); border-radius: 8px; } .dcol-allok { color: var(--green); font-size: 12px; padding: 10px 0; } .dcol-expand { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px 0; font-weight: 600; } .dcol-expand.open { color: var(--text); } .dcol-healthy { display: none; margin-top: 4px; } .dcol-healthy.open { display: flex; } .dtile-supp { margin-left: auto; font-size: 11px; } .dtiles { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; } .dtile { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12px; color: var(--text); border: 1px solid var(--border); background: var(--panel); } .dtile:hover { border-color: var(--accent); } .dtile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dtile-dot { flex: 0 0 auto; } .dtile-critical { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.5); } .dtile-warning { background: rgba(241,196,15,.14); border-color: rgba(241,196,15,.5); } .dtile-healthy { background: rgba(46,204,113,.08); } @media (max-width: 640px){ .dbox-cols { grid-template-columns: 1fr; } .dcol { border-right:0; border-bottom:1px solid var(--border); } } /* ---- Dashboard favorites (star + favorites bar) ---- */ .starbtn { background: none; border: 1px solid var(--border); color: var(--muted); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; } .starbtn.on { color: #f5b73d; border-color: #f5b73d; } .starbtn:hover { color: #f5b73d; } .favbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .favchip { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } .favchip.on { border-color: var(--accent); color: var(--accent); } .favchip:hover { border-color: var(--accent); } /* ---- Searchable dashboard picker ---- */ .dashpicker { position: relative; display: inline-block; } .dashpicker-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 240px; justify-content: space-between; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 600; } .dashpicker-btn:hover { border-color: var(--accent); } .dashpicker-btn .caret { color: var(--muted); font-size: 11px; } .dashpicker-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 320px; max-width: 90vw; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; } .dashpicker-search { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 10px 12px; font-size: 13px; outline: none; } .dashpicker-list { max-height: 360px; overflow: auto; padding: 4px; } .dashpick-group { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 4px; font-weight: 700; } .dashpick-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; } .dashpick-row:hover { background: var(--panel-2); } .dashpick-row.on { background: rgba(52,152,219,.14); } .dashpick-star { color: var(--muted); font-size: 13px; width: 14px; } .dashpick-star.fav { color: #f5b73d; } .dashpick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashpick-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; } /* ---- Placeholder dashboard widget ---- */ .dbox-placeholder .dbox-head { box-shadow: inset 4px 0 0 var(--muted); } .dbox-placeholder { border-style: dashed; } .dph { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 28px; } .dph-icon { font-size: 34px; opacity: .85; } .dph-msg { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 460px; } /* ---- Sign-out / session notice (login page) ---- */ .notice { background: rgba(52,152,219,.12); border: 1px solid rgba(52,152,219,.5); color: var(--text); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.4; } /* collector drill-down: coverage map + no-data pill */ .pill.nodata { background: rgba(135,146,166,.2); color: #8792a6; } .coltable.cov th { text-align: left; padding: 4px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--border); } .coltable.cov td a { color: var(--accent); text-decoration: none; } .coltable.cov td a:hover { text-decoration: underline; } /* status pill with an inline icon (collector drill-down: UNREACHABLE / DOWN) */ .pill.ic { display: inline-flex; align-items: center; gap: 5px; } .pill .bi { width: 13px; height: 13px; display: block; } .pill .bi path, .pill .bi circle { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pill.crit .bi path[fill="none"] { fill: rgba(231,76,60,.14); } /* UNREACHABLE: its OWN red-orange, sitting between critical-red and warning-amber, so "can't reach it" reads as distinct from both a warning and a confirmed down. */ .pill.unreach { background: rgba(232,85,30,.16); color: #e8551e; } .pill.unreach .bi circle[fill="none"] { fill: rgba(232,85,30,.12); } /* collector drill-down: dense, collapsible coverage */ .covctl { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; } .covtoggle { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .linkbtn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; } .linkbtn:hover { border-color: var(--accent); color: var(--text); } .covgrp { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; overflow: hidden; } .covgrp.has-prob { border-left: 3px solid var(--red); } .covhdr { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; background: var(--panel-2); font-size: 13px; user-select: none; } .covhdr:hover { background: rgba(255,255,255,.03); } .covcaret { width: 12px; color: var(--muted); font-size: 11px; } .covsub { font-size: 12px; } .covbody { padding: 2px 10px 8px; } .covbody .coltable.cov td { padding: 3px 6px; font-size: 12.5px; } .ccwrap { display: inline-flex; gap: 5px; flex-wrap: wrap; } .cc { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; } .cc.crit { background: rgba(231,76,60,.16); color: var(--red); } .cc.unreach { background: rgba(232,85,30,.16); color: #e8551e; } .cc.warn { background: rgba(241,196,15,.18); color: var(--amber); } .cc.nodata { background: rgba(135,146,166,.2); color: #8792a6; } .cc.ok { background: rgba(46,204,113,.14); color: var(--green); } /* tree/status: UNREACHABLE indicator (red-orange, between critical and warning) */ .stat-ic.unreach svg { width: 19px; height: 19px; display: block; } /* website availability state — icon + word, no overlap; dynamic message below */ .avail-state { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; line-height: 1.1; } .avail-state .av-ic { width: 20px; height: 20px; flex: 0 0 auto; } .avail-state .av-ic path, .avail-state .av-ic circle { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill-opacity: .14; } .avail-state.av-up { color: var(--green); } .avail-state.av-down { color: var(--red); } .avail-state.av-unreach { color: #e8551e; } .avail-msg { margin-top: 6px; line-height: 1.45; font-size: 12.5px; } /* ========================================================================= Notifications page — template editor + routing policy. Polished + self-explanatory. ========================================================================= */ .nt-hero { display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; } .nt-hero .nt-title h2 { margin:0 0 4px; } .nt-hero .nt-sub { color:var(--muted); font-size:13px; max-width:720px; } .nt-steps { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px; } .nt-step { display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13px; } .nt-step .n { width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:0 0 auto; } .nt-step .arrow { color:var(--muted); margin:0 2px; } /* in-page tabs */ .nt-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; } .nt-tab { padding:10px 16px; cursor:pointer; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px; } .nt-tab:hover { color:var(--text); } .nt-tab.active { color:var(--text); border-bottom-color:var(--accent); } .nt-panel { display:none; } .nt-panel.active { display:block; } /* alert-type picker cards */ .nt-split { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; } .nt-split > .left { flex:1 1 300px; max-width:360px; } .nt-split > .right { flex:2 1 460px; } .nt-typelist { display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; } .nt-type { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:var(--panel); cursor:pointer; transition:.12s; } .nt-type:hover { border-color:var(--accent); background:var(--panel-2); } .nt-type.sel { border-color:var(--accent); background:rgba(79,140,255,.12); box-shadow:inset 3px 0 0 var(--accent); } .nt-type .ico { width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--border); } .nt-type .ico svg { width:18px; height:18px; } .nt-type .nm { font-weight:650; } .nt-type .mt { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--muted); } .nt-type .sevtag { margin-left:auto; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:700; } .sevtag.critical { background:rgba(231,76,60,.18); color:var(--red); } .sevtag.warning { background:rgba(241,196,15,.18); color:var(--amber); } /* editor */ .nt-editor label { font-size:12px; color:var(--muted); display:block; margin:12px 0 5px; } .nt-editor textarea, .nt-editor input[type=text] { width:100%; } .nt-editor textarea { min-height:54px; font-family:ui-monospace,Consolas,monospace; resize:vertical; } .nt-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .nt-chip { font-family:ui-monospace,Consolas,monospace; font-size:11px; padding:3px 9px; border-radius:999px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); cursor:pointer; transition:.12s; } .nt-chip:hover { border-color:var(--accent); color:var(--accent); } .nt-fieldpick { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .nt-fp { font-size:12px; padding:4px 10px; border-radius:8px; border:1px solid var(--border); background:var(--panel); cursor:pointer; user-select:none; } .nt-fp.on { background:rgba(79,140,255,.15); border-color:var(--accent); color:var(--text); } .nt-fp.off { color:var(--muted); } .nt-actions { display:flex; align-items:center; gap:10px; margin-top:16px; } .nt-save-state { font-size:12.5px; display:flex; align-items:center; gap:6px; } .nt-save-state.dirty { color:var(--amber); } .nt-save-state.saved { color:var(--green); } /* PagerDuty-style preview card */ .pd-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel-2); } .pd-card .pd-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); } .pd-card .pd-head .sevdot { width:12px; height:12px; border-radius:50%; } .pd-card .pd-head .sevdot.critical { background:var(--red); } .pd-card .pd-head .sevdot.warning { background:var(--amber); } .pd-card .pd-head .sevdot.info { background:var(--accent); } .pd-card .pd-head .pd-sum { font-weight:650; font-size:13.5px; } .pd-card .pd-head .pd-badge { margin-left:auto; font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); } .pd-card .pd-body { padding:4px 14px 12px; } .pd-card .pd-row { display:flex; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; } .pd-card .pd-row:last-child { border-bottom:none; } .pd-card .pd-row .k { width:38%; color:var(--muted); font-family:ui-monospace,Consolas,monospace; font-size:12px; } .pd-card .pd-row .v { flex:1; } .pd-note { font-size:12px; margin-top:10px; } .pd-note.ok { color:var(--green); } .pd-note.warn { color:var(--amber); } .nt-hint { font-size:12px; color:var(--muted); margin-top:4px; } .nt-verbadge { font-size:11px; padding:2px 8px; border-radius:6px; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); } /* Notifications — search + grouped alert-type list */ .nt-search { width:100%; margin-bottom:12px; } .nt-group { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; margin:14px 2px 6px; display:flex; align-items:center; gap:8px; } .nt-group:first-child { margin-top:0; } .nt-count { font-size:10px; font-weight:700; color:var(--muted); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:0 7px; line-height:16px; } /* Notifications — service noise test result */ .nt-test-result { align-self:center; font-size:13px; color:var(--muted); padding-top:18px; } /* ========================================================================= * * Tree organize: toast (with Undo), folder-picker modal, organize card. * See docs/TREE_ORGANIZATION_DESIGN.md. * ========================================================================= */ /* toast stack, bottom-center, above everything */ #toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.4); min-width: 280px; max-width: 70vw; animation: toastin .18s ease-out; } .toast.err { border-left-color: var(--red); } .toast .t-msg { flex: 1; } .toast .t-undo { background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 3px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } .toast .t-undo:hover { background: var(--accent); color: #fff; } .toast .t-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* generic modal (folder picker / merge target) — mirrors .chartmodal */ .orgmodal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1500; display: flex; align-items: center; justify-content: center; } .orgmodal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; width: 460px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; } .orgmodal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 650; display: flex; align-items: center; } .orgmodal-head .t-x { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } .orgmodal-body { padding: 10px 14px; overflow: auto; } .orgmodal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } .pickrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; } .pickrow:hover { background: rgba(255,255,255,.04); } .pickrow.sel { background: rgba(46,143,255,.14); outline: 1px solid var(--accent); } .pickrow.disabled { opacity: .38; cursor: not-allowed; } .pickrow .pname { color: var(--text); } .pickrow .ptype { margin-left: auto; font-size: 11px; color: var(--muted); } #pickfilter { width: 100%; margin-bottom: 8px; } /* organize action card in the node Info tab */ .orgcard .orgbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .orgcard .orgbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; } .orgcard .orgbtn:hover { border-color: var(--accent); } .orgcard .orgbtn.danger:hover { border-color: var(--red); color: var(--red); } .tname.editing { outline: 1px solid var(--accent); border-radius: 4px; padding: 0 3px; background: var(--panel-2); } /* ---- Suppression tab (node detail): provenance + history timeline ---- Read-only surface. Built for zero flicker: skeleton placeholders match loaded heights, subtle shimmer only, no layout-jarring animation. Theme-aware via the shared --panel/--border/--muted/--red/--green/--amber/--accent variables. */ .supp-card { padding: 14px 16px; } .supp-h { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 10px; } .supp-cur-row { padding: 8px 0; border-bottom: 1px solid var(--border); } .supp-cur-row:last-child { border-bottom: 0; } .supp-cur-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .supp-note { font-style: italic; color: var(--muted); margin-top: 4px; font-size: 13px; } .supp-sdt-hint { margin-top: 10px; font-size: 12px; } .supp-jump { font-weight: 600; } /* skeleton shimmer — occupies the same vertical space as loaded content */ .skeleton { position: relative; overflow: hidden; border-radius: 6px; background: var(--panel-2); } .skel-line { height: 12px; margin: 7px 0; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 50%, transparent 100%); transform: translateX(-100%); animation: shimmer 1.3s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* vertical timeline (newest first) */ .supp-timeline { position: relative; margin: 2px 0 0; padding-left: 4px; } .supp-tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 14px 0; } .supp-tl-item:last-child { padding-bottom: 0; } /* connecting rail behind the dots */ .supp-tl-item::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: var(--border); } .supp-tl-item:last-child::before { display: none; } .supp-tl-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; z-index: 1; border: 2px solid var(--panel); background: var(--grey); box-shadow: 0 0 0 1px var(--border); } .supp-tl-dot.start { background: var(--amber); } .supp-tl-dot.end { background: var(--green); } .supp-tl-dot.update { background: var(--accent); } .supp-tl-dot.legacy { background: var(--grey); } .supp-tl-body { min-width: 0; flex: 1; } .supp-tl-line { font-size: 13.5px; } .supp-tl-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .supp-tl-pd { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; } .supp-tl-more { margin-top: 8px; font-size: 11.5px; } /* PagerDuty outcome chips */ .pdchip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); white-space: nowrap; } .pdchip.cleared { color: var(--green); border-color: var(--green); background: rgba(46,204,113,.10); } .pdchip.paged { color: var(--accent); border-color: var(--accent); background: rgba(79,140,255,.12); } .pdchip.pending { color: var(--amber); border-color: var(--amber); background: rgba(241,196,15,.12); } .pdchip.failed { color: var(--red); border-color: var(--red); background: rgba(231,76,60,.12); } .pdchip.none { color: var(--muted); } /* ===== Suppression tab: provenance cards + recent table + full history ===== Theme-aware (shared --panel/--border/--muted/--red/--green/--amber/--accent). The two provenance cards sit side-by-side on wide panes and stack on narrow. */ .supp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 760px) { .supp-grid { grid-template-columns: 1fr; } } /* Effective-sources / Applied-here rows */ .supp-eff-row { padding: 8px 0; border-bottom: 1px solid var(--border); } .supp-eff-row:last-child { border-bottom: 0; } .supp-eff-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; } .supp-eff-sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .supp-ic { display: inline-flex; width: 18px; justify-content: center; font-size: 14px; } .supp-ic.sdt { color: var(--accent); } .supp-ic.ao { color: var(--amber); } .supp-prov { color: var(--muted); font-weight: 500; } .supp-prov .supp-jump { color: var(--accent); } .supp-until { color: var(--muted); } .supp-none { font-size: 13.5px; color: var(--text); padding: 4px 0; } /* Recent suppression history — compact table */ .supp-rt { width: 100%; border-collapse: collapse; font-size: 13px; } .supp-rt th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 0 10px 6px 0; border-bottom: 1px solid var(--border); } .supp-rt td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; } .supp-rt tbody tr:last-child td { border-bottom: 0; } .supp-rt-when { white-space: nowrap; color: var(--muted); } .supp-rt-reason { color: var(--text); } .supp-rt-pd { white-space: nowrap; } .supp-tl-dot.inline { display: inline-block; width: 9px; height: 9px; margin: 0 6px 0 0; border-width: 1px; box-shadow: none; vertical-align: middle; } .supp-rt-foot { margin-top: 10px; } .supp-viewfull { font-weight: 600; font-size: 13px; color: var(--accent); text-decoration: none; } .supp-viewfull:hover { text-decoration: underline; } /* Full, tabbed history (Active / Upcoming / History / Delivery issues) + CSV */ .supp-ht { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .supp-ht-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .supp-ht-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; } .supp-ht-tab { appearance: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .supp-ht-tab:hover { color: var(--text); } .supp-ht-tab.on { color: var(--accent); border-color: var(--accent); background: rgba(79,140,255,.12); } .supp-ht-ct { font-size: 11px; font-weight: 700; min-width: 16px; text-align: center; padding: 0 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); } .supp-ht-tab.on .supp-ht-ct { color: var(--accent); border-color: var(--accent); } .supp-csv { appearance: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; } .supp-csv:hover { border-color: var(--accent); color: var(--accent); } .supp-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--green); color: var(--green); background: rgba(46,204,113,.10); } /* ========================================================================= Unified "Create suppression" panel (node + host share one component) and the Upcoming/Active schedule cards. Theme-aware via the shared --panel/--panel-2/--border/--muted/--accent/--red/--green/--amber vars. Built flicker-free: only the preview box + inline error repaint on input. ========================================================================= */ .supp-create-card { } .supp-create { display: flex; flex-direction: column; gap: 12px; } .supp-cr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .supp-cr-row-wide { align-items: flex-start; gap: 14px; } .supp-cr-lbl { flex: 0 0 auto; min-width: 80px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .supp-cr-lbl-2 { min-width: 0; margin-left: 10px; } /* Type toggles (multi-select: Alerting Off + SDT) */ .supp-cr-toggles { display: inline-flex; gap: 8px; flex-wrap: wrap; } .supp-tog { appearance: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: .12s; } .supp-tog:hover { border-color: var(--accent); } .supp-tog.on { border-color: var(--accent); color: var(--accent); background: rgba(79,140,255,.14); box-shadow: inset 0 0 0 1px var(--accent); } /* Segmented controls (Start / Ends) */ .supp-cr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .supp-seg { appearance: none; border: 0; border-right: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; cursor: pointer; transition: .12s; } .supp-seg:last-child { border-right: 0; } .supp-seg:hover:not(.disabled) { color: var(--text); } .supp-seg.on { background: rgba(79,140,255,.16); color: var(--accent); } .supp-seg.disabled { opacity: .4; cursor: not-allowed; } /* Reveal rows (datetime / duration pickers) */ .supp-cr-reveal { display: inline-flex; align-items: center; gap: 8px; } .supp-cr-reveal input[type="datetime-local"], .supp-cr-reveal select, .supp-cr-reveal input[type="number"] { font: inherit; } .supp-cr-custom { display: inline-flex; align-items: center; gap: 6px; } .supp-cr-repeat, .supp-cr-tz { font: inherit; padding: 5px 8px; } /* Free-text row reuses .field; just tighten vertical rhythm */ .supp-cr-row-wide .field { display: flex; flex-direction: column; gap: 4px; } .supp-cr-row-wide .field label { font-size: 12px; color: var(--muted); } .supp-cr-row-wide .field input { width: 100%; } /* Inline validation error */ .supp-cr-err { color: var(--red); font-size: 12.5px; } /* Next-occurrences preview box */ .supp-cr-preview { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); padding: 10px 12px; } .supp-cr-prev-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 6px; } .supp-cr-prev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .supp-cr-prev-list li { line-height: 1.4; } .supp-cr-safe { margin-top: 8px; font-size: 11.5px; color: var(--green); } /* Submit */ .supp-cr-foot { display: flex; } .supp-cr-submit { appearance: none; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer; } .supp-cr-submit:hover { filter: brightness(1.06); } .supp-cr-submit:disabled { opacity: .6; cursor: default; } /* Upcoming / Active schedule cards */ .supp-sc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .supp-sc { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); } .supp-sc.firing { border-left: 3px solid var(--green); } .supp-sc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .supp-sc-next { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--accent); } .supp-sc-ticket { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--muted); } .supp-sc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .supp-sc-btn { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 6px; cursor: pointer; } .supp-sc-btn:hover { border-color: var(--accent); color: var(--accent); } .supp-sc-btn.danger:hover { border-color: var(--red); color: var(--red); } /* History panel: right-side cluster (search + CSV) */ .supp-ht-right { display: inline-flex; align-items: center; gap: 8px; } .supp-ht-search { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); min-width: 200px; } .supp-ht-search:focus { outline: none; border-color: var(--accent); } /* Filter-bar dropdowns (All types / All statuses) sit beside search + Export. */ .supp-ht-sel { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; } .supp-ht-sel:focus { outline: none; border-color: var(--accent); } /* ========================================================================= Colored CARD rows for the Active / Upcoming / Delivery-issue surfaces. A left accent + matching dot + a right-aligned status pill. Three variants: .ao amber (Alerting Off) .sdt blue (SDT / recurring schedule) .issue red (PagerDuty delivery retrying) Theme-aware via the shared --panel/--panel-2/--border/--muted/--text/--accent/ --red/--green/--amber vars. These are the primary Active/Upcoming cards; the plain timeline (.supp-tl-*) stays for the History archive tab only. */ .supp-card-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .supp-card-row { position: relative; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--border); border-left: 3px solid var(--grey); border-radius: 10px; padding: 11px 13px; background: var(--panel-2); } .supp-card-row.ao { border-left-color: var(--amber); background: rgba(241,196,15,.06); } .supp-card-row.sdt { border-left-color: var(--accent); background: rgba(79,140,255,.06); } .supp-card-row.issue { border-left-color: var(--red); background: rgba(231,76,60,.08); } .supp-card-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; background: var(--grey); box-shadow: 0 0 0 1px var(--border); } .supp-card-row.ao .supp-card-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(241,196,15,.18); } .supp-card-row.sdt .supp-card-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(79,140,255,.18); } .supp-card-row.issue .supp-card-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(231,76,60,.2); } .supp-card-main { min-width: 0; flex: 1; } .supp-card-title { font-size: 14px; font-weight: 700; color: var(--text); } .supp-card-sub { font-size: 12.5px; color: var(--text); margin-top: 2px; } .supp-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; } .supp-card-prov { font-size: 11.5px; color: var(--muted); margin-top: 5px; } .supp-card-prov .supp-jump { color: var(--accent); font-weight: 600; } .supp-card-inh { font-size: 11.5px; color: var(--muted); margin-top: 7px; } .supp-card-inh .supp-card-act { margin-left: 6px; } .supp-card-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } .supp-card-act { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; cursor: pointer; } .supp-card-act:hover { text-decoration: underline; } .supp-card-act.danger { color: var(--red); } /* brief highlight when "View details" scrolls a row into view */ .supp-card-row.flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s; } /* Right-aligned status pills. ok=green resolved, info=blue upcoming/NEXT, warn=amber, bad=red, neutral=progress count. */ .supp-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); } .supp-pill.ok { color: var(--green); border-color: var(--green); background: rgba(46,204,113,.12); } .supp-pill.info { color: var(--accent); border-color: var(--accent); background: rgba(79,140,255,.12); } .supp-pill.warn { color: var(--amber); border-color: var(--amber); background: rgba(241,196,15,.14); } .supp-pill.bad { color: var(--red); border-color: var(--red); background: rgba(231,76,60,.14); } .supp-pill.neutral { color: var(--muted); } /* Typed Create-panel toggles now carry tree-matching inline SVG icons (not emoji). The icon wrapper sizes the SVG; the toggle itself gets a polished "glow" when pressed (filled type color + a soft halo) — see the aria-pressed rules below. */ .supp-tog-ic { display: inline-flex; align-items: center; margin-right: 6px; line-height: 1; } .supp-tog-ic svg { width: 16px; height: 16px; } /* Tree-matching icon used in history/schedule CARD titles (before the label). */ .supp-card-ic { display: inline-flex; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; } .supp-card-ic svg { width: 16px; height: 16px; } .supp-card-title { display: inline-flex; align-items: center; } /* GLOW on a pressed Type toggle (task 3): Alerting Off -> solid red; SDT -> solid blue; both get a filled background + a soft box-shadow halo, with a smooth transition so it reads as polished, not garish. Driven by aria-pressed (the JS also adds .on, kept below for backwards compatibility). */ .supp-tog { transition: box-shadow .15s, background .15s, border-color .15s, color .15s; } .supp-tog.ao[aria-pressed="true"], .supp-tog.ao.on { color: #fff; background: #e5484d; border-color: #e5484d; box-shadow: 0 0 0 1px #e5484d, 0 0 12px -2px #e5484d; } .supp-tog.sdt[aria-pressed="true"], .supp-tog.sdt.on { color: #fff; background: #2e8fff; border-color: #2e8fff; box-shadow: 0 0 0 1px #2e8fff, 0 0 12px -2px #2e8fff; } .supp-tog.ao:hover { border-color: #e5484d; } .supp-tog.sdt:hover { border-color: #2e8fff; } /* Distinct control-group BOXES (task 2): each field's control group (Type toggles, Start seg, Ends seg, Repeats, Time zone) sits in its own clearly bounded box so the groups no longer read as one crammed run. The segments live INSIDE the box. */ .supp-cr-box { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px; } /* Segment buttons inside a box lose their old shared border/radius run and become individually-rounded chips so the glow halo on the selected one reads cleanly. */ .supp-cr-box .supp-seg { border: 1px solid transparent; border-radius: 6px; background: transparent; } .supp-cr-box .supp-seg:last-child { border-right: 1px solid transparent; } /* A box wrapping a single