/* Aggregator dashboard — self-contained styles (no external CSS/JS). Simulator Solutions */ :root { color-scheme: dark; /* so native controls (datetime-local picker) match the dark theme */ --bg: #0f1419; --panel: #1a212b; --panel-2: #232c38; --ink: #e6edf3; --muted: #8b97a6; --line: #2c3744; --accent: #4aa3ff; --warn: #e0a200; --bad: #e5534b; --ok: #3fb950; } /* Light theme (toggled via ) */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef1f5; --ink: #1b2530; --muted: #5c6773; --line: #d6dde6; --accent: #1668d6; --warn: #9a6b00; --bad: #c5352c; --ok: #2a9a45; } :root[data-theme="light"] .banner { box-shadow: 0 2px 8px rgba(0,0,0,.12); } :root[data-theme="light"] .sev-error { color: #c5352c; } :root[data-theme="light"] .sev-warn { color: #9a6b00; } :root[data-theme="light"] .sev-info { color: #1668d6; } :root[data-theme="light"] .chart .seg:hover { outline-color: rgba(0,0,0,.4); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Sticky banner */ .banner { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.4); } .bartop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px 4px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; } .brand .logo { height: 42px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-title { font-size: 18px; font-weight: 600; } .brand-sub { font-size: 12px; color: var(--muted); } .refresh { font-size: 12px; font-weight: 400; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; } /* The whole banner is one GET form (so Window + value checkboxes submit together); it just stacks its two rows as blocks. */ form.filters { display: block; } form.filters label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 11px; } /* Top row: Period + Lens dropdowns + action buttons grouped on the right, opposite the brand. */ .bartop-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } form.filters .winlabel { flex-direction: row; align-items: center; gap: 6px; } /* "Period"/"Lens" beside their selects */ /* Sub-bar: page-load time + refresh on the left; applied-filter chips + "Select Filter…" on the right, under the action buttons. */ .subbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px 10px; flex-wrap: wrap; } .subbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .loaded { display: inline-flex; align-items: center; gap: 10px; } /* Filter picker: one "Select Filter…" dropdown; choosing a type pops its value checkboxes out in an absolute overlay anchored below it, so the banner row never reflows. */ .addfilter { position: relative; display: inline-flex; align-items: center; } /* Themed like form.filters select, but keyed off the class so it also styles the admin token filter bar (which is a form.token-filterbar, not form.filters). */ .filter-type { min-width: 150px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: inherit; cursor: pointer; } .filter-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.45); padding: 6px; min-width: 190px; max-height: 320px; overflow-y: auto; } .filter-pop[hidden], .vlist[hidden] { display: none; } /* `.filter-pop .msel-opt` (0,2,0) beats `form.filters label` so the row isn't stacked. */ .filter-pop .msel-opt { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; } .filter-pop .msel-opt:hover { background: var(--panel-2); } .filter-pop .msel-opt input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; } .msel-empty { padding: 8px; color: var(--muted); font-size: 12px; } .loaded-label { color: var(--muted); font-size: 12px; } .loaded-time { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; } .action-btns { display: flex; gap: 10px; align-items: center; } /* "Signed in as " label beside the Log out button. */ .whoami { align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; } /* Mobile-only hamburger menu (see templates/_navmenu.html): hidden on desktop; the @media (max-width:560px) block below reveals it and hides the .nav-collapse cluster. */ .navmenu-wrap { display: none; } .action-btns form { margin: 0; } form.filters select, form.filters input[type="datetime-local"], form.filters button { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: inherit; } form.filters button { cursor: pointer; align-self: flex-end; } form.filters button:hover { border-color: var(--accent); } form.filters input[type="datetime-local"]:hover { border-color: var(--accent); } /* Custom date/time range: From / To pickers + Apply, revealed when "Custom…" is chosen. Wraps under the filter dropdowns when shown. */ .win-custom { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } /* From/To captions inline beside their inputs (not stacked) so the row stays one line tall. */ form.filters .win-custom label { flex-direction: row; align-items: center; gap: 6px; } .btn { align-self: flex-end; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit; line-height: 1.3; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn:disabled:hover { border-color: var(--line); color: var(--ink); } /* no accent highlight when greyed out */ /* Table-view pagination: "N–M of total" + Prev/Next, in the Recent events panel header. */ .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pager { display: flex; align-items: center; gap: 10px; } .pager .btn { align-self: center; } /* .btn defaults to align-self:flex-end */ .pager-pos { font-size: 12px; color: var(--muted); white-space: nowrap; } /* "See all (N) →" drill-down link at the foot of a Top-5 tile. */ .seeall { display: block; margin-top: 10px; text-align: right; font-size: 12px; color: var(--accent); } .seeall:hover { text-decoration: underline; } /* Active-filter chips */ .chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chips-label { color: var(--muted); font-size: 12px; } .chips-none { color: var(--muted); font-size: 12px; } /* Caddy update bar (under the banner) + manual-steps modal */ .updatebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bad); color: #fff; padding: 8px 22px; font-size: 13px; } .updatebar .btn-update { background: #fff; color: var(--bad); border-radius: 6px; padding: 5px 12px; font-weight: 600; text-decoration: none; white-space: nowrap; } .updatebar .btn-update:hover { opacity: .9; } .modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); align-items: center; justify-content: center; } .modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 24px; max-width: 560px; width: 92%; color: var(--ink); box-shadow: 0 12px 44px rgba(0,0,0,.5); } .modal-box h3 { margin: 0 0 10px; } .modal-box ol { line-height: 1.8; padding-left: 20px; } .modal-box code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; } .muted-note { color: var(--muted); font-size: 11px; margin-top: 8px; } .ver-bad { color: var(--bad); font-weight: 600; } .modal-box pre { background: var(--panel-2); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; font-size: 12px; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; font-size: 12px; color: var(--ink); } .chip a { color: var(--muted); font-weight: 700; text-decoration: none; } .chip a:hover { color: var(--bad); } .chip.clear { color: var(--accent); text-decoration: none; } /* Clickable filter values in tables */ a.flt { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; cursor: pointer; } a.flt:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Sortable column headers */ th a.sort { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; } th a.sort:hover { color: var(--accent); } main { padding: 22px; max-width: 1200px; margin: 0 auto; } main.full { max-width: none; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 14px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; } .card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } /* Push the number to the bottom so values stay aligned across a row even when a neighbouring card's label wraps to two lines. */ .card .value { font-size: 30px; font-weight: 700; margin-top: auto; padding-top: 6px; } section.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; } section.panel h2 { font-size: 14px; margin: 0 0 14px; color: var(--ink); font-weight: 600; } .empty { color: var(--muted); font-style: italic; padding: 10px 0; } /* Stacked CSS bar chart */ .chart { display: flex; align-items: stretch; gap: 3px; height: 210px; padding-top: 16px; } .chart .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .chart .plot { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .chart .bar { width: 75%; min-width: 0; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; } .chart .seg { display: block; width: 100%; text-decoration: none; cursor: pointer; } .chart .seg:hover { filter: brightness(1.3); outline: 1px solid rgba(255,255,255,.5); } .chart .count { position: absolute; left: 50%; transform: translate(-50%, -3px); font-size: 10px; color: var(--muted); white-space: nowrap; pointer-events: none; } .chart .axis { flex: 0 0 auto; align-self: center; height: 26px; margin-top: 6px; font-size: 10px; color: var(--muted); white-space: nowrap; transform: rotate(-45deg); transform-origin: top right; } .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; } .legend a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-decoration: none; cursor: pointer; } .legend a:hover { color: var(--accent); } .legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; } /* Donut chart (Events by type) — pure inline SVG, no JS. r=15.915 makes the circumference 100, so stroke-dasharray values are percentages directly. */ .donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .donut { width: 150px; height: 150px; flex: none; } .donut-track { stroke: var(--panel-2); stroke-width: 5; } .donut a { cursor: pointer; } .donut-seg { transition: opacity .12s; } .donut a:hover .donut-seg { opacity: .72; } .donut-center { fill: var(--ink); font-size: 8px; font-weight: 700; } .donut-legend { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 9px; } .donut-legend a { gap: 8px; } .donut-count { color: var(--ink); font-weight: 600; } .grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } .grid2 .panel { margin-bottom: 0; } /* gap handles spacing — avoids double gap between rows */ @media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } } /* Two half-width charts side by side (minmax(0,1fr) so a busy chart can't expand the grid) */ .charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; } .charts .panel { margin-bottom: 0; } @media (max-width: 800px) { .charts { grid-template-columns: 1fr; } } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr:hover td { background: var(--panel-2); } td.msg { max-width: 520px; overflow-wrap: anywhere; } /* All cells in the events table use the same monospace font at a uniform size */ table.stack td { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; } /* Clicking the message text opens the popout — same hover style as a.flt */ .msg-click { cursor: pointer; display: block; color: inherit; border-bottom: 1px dotted transparent; } .msg-click:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Wide tables scroll horizontally within their tile instead of overflowing it. */ .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .sev { padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; } .sev-error { background: rgba(229,83,75,.18); color: #ff8a82; } .sev-warn { background: rgba(224,162,0,.18); color: #f0c419; } .sev-info { background: rgba(74,163,255,.15); color: #8ec5ff; } .app-pill { padding: 1px 8px; border-radius: 10px; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); } .mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; color: var(--muted); } footer { color: var(--muted); font-size: 12px; text-align: center; padding: 18px; } /* ────────────────────────────────────────────────────────────────────────── Phone (portrait) layout. Purely additive: every rule here overrides a base rule by cascade order (no !important). Activates below the 640px `.grid2` single-column point, so the grids are already stacked before these kick in. Desktop (≥561px) is unaffected. See docs / plan: stacked-card Recent-events table, horizontal-scroll wide tables, full-width touch controls. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 560px) { /* Banner: drop sticky (a tall stacked header would pin and eat the viewport) and stack the brand row above both control rows. */ .banner { position: static; } .bartop { flex-direction: column; align-items: stretch; gap: 12px; padding: 10px 14px 6px; } .brand { justify-content: flex-start; } .brand .logo { height: 36px; } .brand-title { font-size: 17px; } .bartop-right { flex-direction: column; align-items: stretch; gap: 10px; justify-content: flex-start; } /* Window picker + custom range + action buttons go full-width. */ form.filters .winlabel { flex-direction: column; align-items: stretch; gap: 4px; } form.filters .winlabel select { width: 100%; } .win-custom { flex-direction: column; align-items: stretch; gap: 8px; } form.filters .win-custom label { flex-direction: column; align-items: stretch; gap: 4px; } .win-custom input[type="datetime-local"] { width: 100%; } .win-custom button { width: 100%; align-self: stretch; } .action-btns { gap: 8px; } .action-btns .btn { flex: 1 1 0; text-align: center; } /* Collapse the identity/secondary-nav cluster (display name, My Account, Admin, theme, Sign Out) behind a hamburger pinned top-right beside the brand. The inline items carry .nav-collapse; the menu re-lists them. No other rule sets `display` on these, so no !important is needed. Desktop (≥561px) keeps the cluster inline — see _navmenu.html. */ /* !important so it beats the more-specific base `form.filters label { display:flex }` (the inline Period/Lens are