/* ========================================================================== trunc.css — Trunc portal design system -------------------------------------------------------------------------- Replaces css/style.css and css/colors/noc-dark.css entirely. Bootstrap 4 stays loaded underneath for grid + utility classes only; everything visual below is ours. COLOUR RULE — the one thing to keep consistent as this grows: WARM means "look at this". Red > orange > gold, by severity. COOL means "click this". Harbour blue for links, focus, actions. Nothing decorative is ever warm. If it is orange on this dashboard, it means something. Trunc's brand orange survives as the logo mark and as the "high" severity step, which is semantically the same thing. TYPE — IBM Plex Sans for interface, IBM Plex Mono for data. Anything a user could search for (hostname, IP, category, timestamp, log line) is set in mono with tabular figures. The mono/sans split is load-bearing: mono signals "this is a value, you can click or query it". SECTIONS 01 Tokens 02 Base + typography 03 Topbar, nav, insights menu 04 Page shell 05 Cards 06 Triage strip 07 Metric tiles 08 Charts 09 Category families 10 Data tables + top talkers 11 Event rows 12 Search bar + query chips 13 Buttons, forms, pagination 14 Badges, chips, severity 15 Bootstrap component overrides 16 Legacy shims (delete as pages are rewritten) 17 Responsive ========================================================================== */ /* ========================================================================== 01 TOKENS ========================================================================== */ :root{ /* --- dark chrome ------------------------------------------------------ */ --tc-ink-0:#0e1a20; /* topbar background */ --tc-ink-1:#17282f; /* raised surface on dark (pills) */ --tc-ink-2:#22333b; /* hover / active nav */ --tc-ink-line:#2b3d46; /* borders on dark */ --tc-ink-tx:#dfe8ed; /* text on dark */ --tc-ink-tx-2:#9db0bb; /* muted text on dark */ --tc-ink-tx-3:#7d919e; /* faint text on dark */ /* --- light content ---------------------------------------------------- */ --tc-canvas:#f1f4f7; /* page background */ --tc-surface:#ffffff; /* cards */ --tc-surface-2:#fafbfc; /* row hover, subtle fills */ --tc-line:#e3e8ee; /* card + section borders */ --tc-line-2:#cfd8e1; /* input borders, stronger dividers */ --tc-line-3:#f0f3f6; /* table row dividers, track backgrounds */ --tc-tx:#13232c; /* primary text */ --tc-tx-2:#5b6f7d; /* secondary text */ --tc-tx-3:#8a9aa7; /* muted / captions */ /* --- brand ------------------------------------------------------------ */ --tc-brand:#d4622a; /* logo mark only (and "high" severity) */ /* --- cool = interactive ----------------------------------------------- Saturation, not darkness. The previous #1d5c8a measured 7.1:1 against white — contrast was never the issue — but with the blue channel at 138 it read as slate rather than as a link. #0f62b5 is 6.1:1, still clear of AA, and unmistakably blue at small sizes. */ --tc-act:#0f62b5; --tc-act-hover:#0b4e91; --tc-act-tint:#e8f1fb; /* --- warm = severity --------------------------------------------------- */ --tc-crit:#b3261e; --tc-crit-tint:#fceceb; --tc-high:#c2571c; --tc-high-tint:#fdf0e7; --tc-warn:#8a6d1f; --tc-warn-tint:#faf3e0; --tc-ok:#1b6b47; --tc-ok-tint:#e9f5ee; --tc-info:#41586a; --tc-info-tint:#eef1f5; /* --- chart series ------------------------------------------------------ */ --tc-series-normal:#c8d3dc; --tc-series-blocked:#e0a55e; --tc-series-errors:#c2571c; --tc-series-attacks:#b3261e; /* --- type -------------------------------------------------------------- */ --tc-font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --tc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* --- geometry ---------------------------------------------------------- */ --tc-r:8px; /* cards */ --tc-r-sm:6px; /* buttons, pills, inputs */ --tc-r-xs:3px; /* chips, tags, bars */ --tc-topbar-h:58px; --tc-wrap:1440px; --tc-gap:16px; /* --- elevation ---------------------------------------------------------- */ --tc-shadow:0 1px 2px rgba(19,35,44,.04); --tc-shadow-pop:0 8px 24px rgba(19,35,44,.13),0 2px 6px rgba(19,35,44,.07); --tc-focus:0 0 0 3px var(--tc-act-tint); } /* ========================================================================== 02 BASE + TYPOGRAPHY ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--tc-canvas); color:var(--tc-tx); font-family:var(--tc-font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Every number in the interface lines up in columns. */ .tc-num, .tc-metric-v, .tc-row-v, td.tc-r, .tc-mono{font-variant-numeric:tabular-nums} .tc-mono, code,kbd,pre,samp{font-family:var(--tc-mono);font-variant-numeric:tabular-nums} a{color:var(--tc-act);text-decoration:none} a:hover{color:var(--tc-act-hover);text-decoration:underline} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--tc-act);outline-offset:2px} h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;letter-spacing:-.015em;color:var(--tc-tx)} h1{font-size:25px} h2{font-size:20px} h3{font-size:16px} h4{font-size:15px} h5,h6{font-size:14px} p{margin:0 0 10px} p:last-child{margin-bottom:0} hr{border:0;border-top:1px solid var(--tc-line);margin:20px 0} ::selection{background:var(--tc-act-tint);color:var(--tc-tx)} .tc-muted{color:var(--tc-tx-2)} .tc-faint{color:var(--tc-tx-3)} .tc-nowrap{white-space:nowrap} .tc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Screen-reader only — for icon-only controls. */ .tc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ========================================================================== 03 TOPBAR, NAV, INSIGHTS MENU ========================================================================== */ .tc-topbar{ background:var(--tc-ink-0); color:var(--tc-ink-tx); border-bottom:1px solid var(--tc-ink-line); position:sticky;top:0;z-index:1030; } .tc-topbar-in{ max-width:var(--tc-wrap);margin:0 auto;padding:0 24px; height:var(--tc-topbar-h); display:flex;align-items:center;gap:28px; } /* --- logo ---------------------------------------------------------------- */ .tc-logo{ display:flex;align-items:center;gap:9px; color:#fff;font-size:16px;font-weight:600;letter-spacing:.02em; text-decoration:none;flex:none; } .tc-logo:hover{color:#fff;text-decoration:none} /* 21px puts the wordmark's cap height on the same optical line as the nav labels. At 26 it sat proud of them and read as an oversized image rather than part of the bar. */ /* The asset is 2x, so 22px displayed is 44px of pixels — crisp on retina. That height puts the wordmark's cap height on the same optical line as the nav labels; at 26 it sat proud of them. */ .tc-logo img{height:22px;width:auto;display:block} /* CSS fallback mark, used when no logo image is available. */ .tc-logo .tc-mark{ width:20px;height:20px;flex:none; border:2.5px solid var(--tc-brand);border-radius:3px; transform:rotate(45deg); } /* --- primary nav --------------------------------------------------------- */ /* A hairline between the mark and the navigation, so the logo reads as an identity rather than as the first menu item. */ .tc-topbar-rule{ flex:none;width:1px;height:22px;background:var(--tc-ink-line); margin:0 4px 0 -14px; } .tc-nav{display:flex;align-items:center;gap:2px;margin-left:0} .tc-nav > a, .tc-nav > .tc-dd > a{ display:flex;align-items:center;gap:6px; color:var(--tc-ink-tx-2); padding:7px 12px;border-radius:var(--tc-r-sm); font-size:13.5px;font-weight:500;text-decoration:none; white-space:nowrap; } .tc-nav > a:hover, .tc-nav > .tc-dd > a:hover{color:#fff;background:var(--tc-ink-2);text-decoration:none} .tc-nav > a.on, .tc-nav > .tc-dd.on > a{color:#fff;background:var(--tc-ink-2)} .tc-nav .mdi{font-size:15px;opacity:.85} /* --- right cluster -------------------------------------------------------- */ .tc-tb-right{margin-left:auto;display:flex;align-items:center;gap:10px} .tc-pill{ display:flex;align-items:center;gap:8px; background:var(--tc-ink-1);border:1px solid var(--tc-ink-line); border-radius:var(--tc-r-sm);padding:5px 11px; font-size:12.5px;color:var(--tc-ink-tx-2);white-space:nowrap; } .tc-pill b{color:#fff;font-weight:500} .tc-pill.tc-sel{cursor:pointer} .tc-pill.tc-sel:hover{background:var(--tc-ink-2);color:#fff} .tc-pill.tc-sel::after{content:"";border:4px solid transparent; border-top-color:var(--tc-ink-tx-3);margin-top:3px} .tc-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--tc-ok)} .tc-dot.warn{background:var(--tc-warn)} .tc-dot.crit{background:var(--tc-crit)} /* Gentle pulse on the live-ingest dot. Motion is the only thing on the page that moves, so it reads as "data is flowing" rather than decoration. */ @media (prefers-reduced-motion:no-preference){ .tc-dot.live{animation:tc-pulse 2.6s ease-in-out infinite} } @keyframes tc-pulse{0%,100%{opacity:1}50%{opacity:.35}} .tc-avatar{ width:29px;height:29px;border-radius:50%;flex:none; background:#3c5462;color:#fff; display:flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:600;overflow:hidden; } .tc-avatar img{width:100%;height:100%;object-fit:cover;display:block} /* --- dropdowns ------------------------------------------------------------ */ .tc-dd{position:relative} .tc-dd-menu{ position:absolute;top:calc(100% + 8px);left:0;z-index:1040; min-width:272px; background:var(--tc-surface); border:1px solid var(--tc-line);border-radius:var(--tc-r); box-shadow:var(--tc-shadow-pop); padding:6px; display:none; } .tc-dd-menu.right{left:auto;right:0} .tc-dd.show > .tc-dd-menu{display:block} .tc-dd-h{ font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--tc-tx-3);padding:8px 10px 5px; } .tc-dd-sep{height:1px;background:var(--tc-line);margin:6px 0} .tc-dd-item{ display:flex;align-items:flex-start;gap:10px; padding:9px 10px;border-radius:var(--tc-r-sm); color:var(--tc-tx);text-decoration:none; } .tc-dd-item:hover{background:var(--tc-surface-2);color:var(--tc-tx);text-decoration:none} .tc-dd-item .mdi{font-size:16px;color:var(--tc-tx-2);margin-top:1px;flex:none} .tc-dd-item b{display:block;font-size:13.5px;font-weight:500;line-height:1.35} .tc-dd-item span{display:block;font-size:12px;color:var(--tc-tx-2);line-height:1.4} .tc-dd-item.on{background:var(--tc-act-tint)} .tc-dd-item.on b{color:var(--tc-act)} /* Insight modules the account has no data for. Deliberately still visible: the menu doubles as "what else can Trunc do for me", and each greyed row is a prompt to send another log source. */ .tc-dd-item.off{opacity:.62} .tc-dd-item.off b{color:var(--tc-tx-2);font-weight:400} .tc-dd-item.off .tc-dd-setup{ font-size:12px;color:var(--tc-act);white-space:nowrap;margin-left:auto; align-self:center;font-weight:500; } .tc-dd-item.off:hover .tc-dd-setup{text-decoration:underline} /* Account menu block. */ .tc-dd-user{padding:11px 10px 9px} .tc-dd-user b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px} .tc-dd-user span{display:block;font-size:12px;color:var(--tc-tx-2);line-height:1.5} /* ========================================================================== 04 PAGE SHELL ========================================================================== */ .tc-wrap{max-width:var(--tc-wrap);margin:0 auto;padding:26px 24px 60px} /* Page shell emitted by pages/logging-main.php and pages/accounts-main.php. No styling of its own — .tc-wrap inside it does the work. Exists only so the div count matches what dashboard.php closes. */ .tc-page{display:block} .tc-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap} .tc-head-sub{color:var(--tc-tx-2);font-size:13.5px;margin:3px 0 0} .tc-head-right{margin-left:auto;display:flex;align-items:center;gap:10px} /* Section label. Small, spaced, quiet — it separates without shouting. */ .tc-eyebrow{ font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--tc-tx-3);margin:32px 0 11px; display:flex;align-items:baseline;gap:12px; } .tc-eyebrow:first-child{margin-top:0} .tc-eyebrow a{font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;margin-left:auto} .tc-grid{display:grid;gap:var(--tc-gap)} .tc-grid-2{grid-template-columns:repeat(2,1fr)} .tc-grid-3{grid-template-columns:repeat(3,1fr)} .tc-grid-4{grid-template-columns:repeat(4,1fr)} .tc-grid-main{grid-template-columns:1.25fr 1fr;align-items:start} /* ========================================================================== 05 CARDS ========================================================================== */ .tc-card{ background:var(--tc-surface); border:1px solid var(--tc-line); border-radius:var(--tc-r); box-shadow:var(--tc-shadow); } .tc-card-pad{padding:16px 18px} .tc-card-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 18px 0; } .tc-card-title{font-size:15px;font-weight:600} .tc-card-sub{font-size:12.5px;color:var(--tc-tx-2);padding:2px 18px 12px} .tc-card-foot{padding:12px 18px;border-top:1px solid var(--tc-line-3);font-size:12.5px} .tc-empty{padding:34px 18px;text-align:center;color:var(--tc-tx-2);font-size:13.5px} .tc-empty .mdi{display:block;font-size:30px;color:var(--tc-line-2);margin-bottom:8px} /* ========================================================================== 06 TRIAGE STRIP The "needs attention" row. Severity is carried by a left rule and the kicker colour only — the card body stays white so a row of three does not turn the top of the page into a traffic light. ========================================================================== */ .tc-triage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .tc-tr{ display:block;position:relative;overflow:hidden; background:var(--tc-surface); border:1px solid var(--tc-line);border-radius:var(--tc-r); padding:14px 16px 14px 18px; color:inherit;text-decoration:none; transition:border-color .12s ease,box-shadow .12s ease; } .tc-tr:hover{border-color:var(--tc-line-2);box-shadow:var(--tc-shadow); color:inherit;text-decoration:none} .tc-tr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--tc-info)} .tc-tr.crit::before{background:var(--tc-crit)} .tc-tr.high::before{background:var(--tc-high)} .tc-tr.warn::before{background:var(--tc-warn)} .tc-tr.ok::before{background:var(--tc-ok)} .tc-tr-k{ font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; margin-bottom:7px;color:var(--tc-info); } .tc-tr.crit .tc-tr-k{color:var(--tc-crit)} .tc-tr.high .tc-tr-k{color:var(--tc-high)} .tc-tr.warn .tc-tr-k{color:var(--tc-warn)} .tc-tr.ok .tc-tr-k{color:var(--tc-ok)} .tc-tr-t{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px;line-height:1.35} .tc-tr-d{font-size:12.5px;color:var(--tc-tx-2);line-height:1.45} .tc-tr-d b{font-weight:500;color:var(--tc-tx)} /* ========================================================================== 07 METRIC TILES ========================================================================== */ .tc-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .tc-metric{ background:var(--tc-surface);border:1px solid var(--tc-line); border-radius:var(--tc-r);padding:14px 16px;box-shadow:var(--tc-shadow); } .tc-metric-k{font-size:12px;color:var(--tc-tx-2);margin-bottom:6px} .tc-metric-v{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1} .tc-metric-v small{font-size:15px;font-weight:500;color:var(--tc-tx-3)} .tc-metric-s{font-size:12px;color:var(--tc-tx-3);margin-top:4px} .tc-metric-s .up{color:var(--tc-ok);font-weight:500} .tc-metric-s .dn{color:var(--tc-crit);font-weight:500} /* Thin progress rule, used for plan usage and share-of-total. */ .tc-bar{height:4px;background:var(--tc-line-3);border-radius:2px;margin-top:10px;overflow:hidden} .tc-bar > i{display:block;height:100%;border-radius:2px;background:var(--tc-act)} .tc-bar > i.warn{background:var(--tc-warn)} .tc-bar > i.crit{background:var(--tc-crit)} .tc-bar > i.high{background:var(--tc-high)} /* ========================================================================== 08 CHARTS ========================================================================== */ .tc-chart{padding:6px 10px 12px;height:250px;position:relative} .tc-chart.sm{height:180px} .tc-chart.lg{height:320px} .tc-legend{display:flex;gap:14px;font-size:12px;color:var(--tc-tx-2);flex-wrap:wrap} .tc-legend i{ width:9px;height:9px;border-radius:2px;display:inline-block; margin-right:5px;vertical-align:-1px; } .tc-legend .normal{background:var(--tc-series-normal)} .tc-legend .blocked{background:var(--tc-series-blocked)} .tc-legend .errors{background:var(--tc-series-errors)} .tc-legend .attacks{background:var(--tc-series-attacks)} /* Clickable charts: cursor hint on the canvas. */ .tc-chart.clickable canvas{cursor:pointer} .tc-chart-note{padding:0 18px 14px;font-size:12.5px;color:var(--tc-tx-2)} /* ========================================================================== 09 CATEGORY FAMILIES Categories grouped by what they mean, not listed flat. Within a family the share bar is relative to the family leader, so the shape of the family is readable even when one category dwarfs the rest. ========================================================================== */ .tc-fam{padding:13px 18px;border-bottom:1px solid var(--tc-line)} .tc-fam:last-child{border-bottom:0} .tc-fam-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px} .tc-fam-n{font-size:13px;font-weight:600} .tc-fam-t{font-size:12.5px;color:var(--tc-tx-2);white-space:nowrap} .tc-row{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:12.5px} .tc-row > a:first-child{flex:none;min-width:170px} .tc-row .tc-track{flex:1;height:6px;background:var(--tc-line-3);border-radius:3px;overflow:hidden;min-width:40px} .tc-row .tc-track > i{display:block;height:100%;border-radius:3px;background:var(--tc-info)} .tc-row.crit .tc-track > i{background:var(--tc-crit)} .tc-row.high .tc-track > i{background:var(--tc-high)} .tc-row.warn .tc-track > i{background:var(--tc-warn)} .tc-row.ok .tc-track > i{background:var(--tc-ok)} .tc-row-v{flex:none;width:96px;text-align:right;color:var(--tc-tx-2)} /* ========================================================================== 10 DATA TABLES + TOP TALKERS ========================================================================== */ .tc-tabs{display:flex;gap:2px;padding:12px 14px 0;border-bottom:1px solid var(--tc-line)} .tc-tabs button{ border:0;background:none;font:inherit;font-size:12.5px;font-weight:500; color:var(--tc-tx-2);padding:7px 11px;cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--tc-r-sm) var(--tc-r-sm) 0 0; } .tc-tabs button:hover{color:var(--tc-tx);background:var(--tc-surface-2)} .tc-tabs button.on{color:var(--tc-tx);border-bottom-color:var(--tc-act)} .tc-table{width:100%;border-collapse:collapse} .tc-table th{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--tc-tx-3);text-align:left;padding:10px 18px; border-bottom:1px solid var(--tc-line);white-space:nowrap; } .tc-table td{padding:8px 18px;border-bottom:1px solid var(--tc-line-3);font-size:12.5px;vertical-align:top} .tc-table tr:last-child td{border-bottom:0} .tc-table tbody tr:hover td{background:var(--tc-surface-2)} .tc-table td.tc-r,.tc-table th.tc-r{text-align:right;color:var(--tc-tx-2);white-space:nowrap} .tc-table .tc-share{color:var(--tc-tx-3)} /* Inline sparkline-style share rule under a table cell. */ .tc-mini{height:5px;background:var(--tc-line-3);border-radius:3px;overflow:hidden;margin-top:4px} .tc-mini > i{display:block;height:100%;border-radius:3px;background:var(--tc-info)} .tc-mini > i.crit{background:var(--tc-crit)} .tc-mini > i.high{background:var(--tc-high)} .tc-mini > i.warn{background:var(--tc-warn)} .tc-flag{font-size:11px;color:var(--tc-tx-3);margin-right:6px;font-family:var(--tc-mono)} /* ========================================================================== 11 EVENT ROWS Log lines are long and unpredictable. They get one line, clipped, with the searchable parts in mono. Expanding is a page concern, not a CSS one. ========================================================================== */ .tc-ev{ display:grid;grid-template-columns:132px 118px 190px 1fr;gap:14px; padding:9px 18px;border-bottom:1px solid var(--tc-line-3); font-size:12.5px;align-items:start; } .tc-ev:last-child{border-bottom:0} .tc-ev:hover{background:var(--tc-surface-2)} .tc-ev-head{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--tc-tx-3);border-bottom:1px solid var(--tc-line); } .tc-ev-time{font-family:var(--tc-mono);font-variant-numeric:tabular-nums;color:var(--tc-tx-2)} .tc-ev-src{font-family:var(--tc-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tc-ev-msg{ font-family:var(--tc-mono);color:var(--tc-tx-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .tc-ev-msg b{color:var(--tc-tx);font-weight:500} /* Full raw log line, when a row is expanded. */ .tc-raw{ font-family:var(--tc-mono);font-size:12px;line-height:1.6; background:var(--tc-surface-2);border:1px solid var(--tc-line); border-radius:var(--tc-r-sm);padding:10px 12px;margin:6px 0 2px; white-space:pre-wrap;word-break:break-all;color:var(--tc-tx-2); } /* ========================================================================== 12 SEARCH BAR + QUERY CHIPS The query language is the product. The bar is mono because what you type into it is the same kind of thing you click in a table. ========================================================================== */ .tc-search{display:flex;gap:10px} .tc-search input{ flex:1;min-width:0; font-family:var(--tc-mono);font-size:13.5px; padding:11px 14px; border:1px solid var(--tc-line-2);border-radius:7px; background:var(--tc-surface);color:var(--tc-tx); } .tc-search input::placeholder{color:var(--tc-tx-3)} .tc-search input:focus{outline:0;border-color:var(--tc-act);box-shadow:var(--tc-focus)} .tc-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .tc-chip{ font-family:var(--tc-mono);font-size:12px; padding:4px 10px;border-radius:20px; border:1px solid var(--tc-line);background:var(--tc-surface); color:var(--tc-tx-2);text-decoration:none;white-space:nowrap; } .tc-chip:hover{border-color:var(--tc-act);color:var(--tc-act);text-decoration:none} .tc-chip.on{border-color:var(--tc-act);background:var(--tc-act-tint);color:var(--tc-act)} /* ========================================================================== 13 BUTTONS, FORMS, PAGINATION ========================================================================== */ .tc-btn{ display:inline-flex;align-items:center;gap:7px; font-family:var(--tc-font);font-size:12.5px;font-weight:500; padding:7px 13px;border-radius:var(--tc-r-sm); border:1px solid var(--tc-line-2);background:var(--tc-surface);color:var(--tc-tx); cursor:pointer;white-space:nowrap;text-decoration:none; transition:background .12s ease,border-color .12s ease; } .tc-btn:hover{background:var(--tc-surface-2);border-color:var(--tc-line-2); color:var(--tc-tx);text-decoration:none} .tc-btn:disabled,.tc-btn.disabled{opacity:.5;pointer-events:none} .tc-btn-pri{background:var(--tc-act);border-color:var(--tc-act);color:#fff} .tc-btn-pri:hover{background:var(--tc-act-hover);border-color:var(--tc-act-hover);color:#fff} .tc-btn-danger{background:var(--tc-crit);border-color:var(--tc-crit);color:#fff} .tc-btn-danger:hover{background:#96201a;border-color:#96201a;color:#fff} .tc-btn-lg{font-size:13.5px;padding:11px 20px} .tc-btn-sm{font-size:12px;padding:4px 9px} .tc-input,.tc-select{ font-family:var(--tc-font);font-size:13.5px; padding:9px 12px;border:1px solid var(--tc-line-2);border-radius:var(--tc-r-sm); background:var(--tc-surface);color:var(--tc-tx);width:100%; } .tc-input:focus,.tc-select:focus{outline:0;border-color:var(--tc-act);box-shadow:var(--tc-focus)} .tc-input.mono{font-family:var(--tc-mono)} .tc-label{display:block;font-size:12.5px;font-weight:500;color:var(--tc-tx-2);margin-bottom:5px} .tc-help{font-size:12px;color:var(--tc-tx-3);margin-top:5px} .tc-pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .tc-pager a,.tc-pager span{ font-family:var(--tc-mono);font-size:12.5px; padding:5px 10px;border-radius:var(--tc-r-sm); border:1px solid var(--tc-line);color:var(--tc-tx-2);text-decoration:none; } .tc-pager a:hover{border-color:var(--tc-line-2);background:var(--tc-surface-2); color:var(--tc-tx);text-decoration:none} .tc-pager .on{background:var(--tc-act);border-color:var(--tc-act);color:#fff} .tc-pager .off{opacity:.45;pointer-events:none} /* ========================================================================== 14 BADGES, CHIPS, SEVERITY ========================================================================== */ .tc-tag{ display:inline-block; font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:2px 7px;border-radius:var(--tc-r-xs); background:var(--tc-info-tint);color:var(--tc-info); } .tc-tag.crit{background:var(--tc-crit-tint);color:var(--tc-crit)} .tc-tag.high{background:var(--tc-high-tint);color:var(--tc-high)} .tc-tag.warn{background:var(--tc-warn-tint);color:var(--tc-warn)} .tc-tag.ok{background:var(--tc-ok-tint);color:var(--tc-ok)} /* A category name, rendered as a clickable query token. */ .tc-cat{ display:inline-block; font-family:var(--tc-mono);font-size:11.5px; padding:2px 8px;border-radius:var(--tc-r-xs); background:var(--tc-info-tint);color:var(--tc-info); text-decoration:none;white-space:nowrap; border:1px solid transparent; } .tc-cat:hover{border-color:currentColor;text-decoration:none;color:var(--tc-info)} .tc-cat.crit{background:var(--tc-crit-tint);color:var(--tc-crit)} .tc-cat.crit:hover{color:var(--tc-crit)} .tc-cat.high{background:var(--tc-high-tint);color:var(--tc-high)} .tc-cat.high:hover{color:var(--tc-high)} .tc-cat.warn{background:var(--tc-warn-tint);color:var(--tc-warn)} .tc-cat.warn:hover{color:var(--tc-warn)} .tc-cat.ok{background:var(--tc-ok-tint);color:var(--tc-ok)} .tc-cat.ok:hover{color:var(--tc-ok)} /* Stacked category chips inside a dense table cell. */ .tc-cats{display:flex;flex-wrap:wrap;gap:3px} .tc-alert{ display:flex;gap:11px;align-items:flex-start; padding:13px 16px;border-radius:var(--tc-r); border:1px solid var(--tc-line);background:var(--tc-surface); font-size:13px;line-height:1.5; } .tc-alert .mdi{font-size:18px;margin-top:1px;flex:none} .tc-alert.crit{background:var(--tc-crit-tint);border-color:#f0cdca;color:#7d1a14} .tc-alert.crit .mdi{color:var(--tc-crit)} .tc-alert.high{background:var(--tc-high-tint);border-color:#f2d5c0;color:#8a3d12} .tc-alert.high .mdi{color:var(--tc-high)} .tc-alert.warn{background:var(--tc-warn-tint);border-color:#ebdcb4;color:#634e15} .tc-alert.warn .mdi{color:var(--tc-warn)} .tc-alert.ok{background:var(--tc-ok-tint);border-color:#c4e2d1;color:#134c33} .tc-alert.ok .mdi{color:var(--tc-ok)} /* ========================================================================== 15 BOOTSTRAP COMPONENT OVERRIDES Existing pages still emit Bootstrap markup. Restyling it here means they inherit the new look with no template changes, which is what lets us rewrite pages one at a time instead of all at once. ========================================================================== */ .card{ background:var(--tc-surface); border:1px solid var(--tc-line); border-radius:var(--tc-r); box-shadow:var(--tc-shadow); margin-bottom:var(--tc-gap); } .card-body{padding:16px 18px} .card-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:3px} .card-subtitle{font-size:12.5px;color:var(--tc-tx-2);font-weight:400;margin-bottom:12px} .card-text{font-size:13px;color:var(--tc-tx-2)} .card-deck{margin-bottom:0} .table{color:var(--tc-tx);margin-bottom:0} .table th{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--tc-tx-3);border-top:0;border-bottom:1px solid var(--tc-line); padding:10px 12px; } .table td{ padding:8px 12px;font-size:12.5px;vertical-align:middle; border-top:0;border-bottom:1px solid var(--tc-line-3); } .table tbody tr:last-child td{border-bottom:0} .table-striped tbody tr:nth-of-type(odd){background:transparent} .table-striped tbody tr:hover{background:var(--tc-surface-2)} .table-bordered,.table-bordered td,.table-bordered th{border:0} .table-bordered td{border-bottom:1px solid var(--tc-line-3)} .table-responsive{border-radius:var(--tc-r-sm)} /* Existing pages render categories as .btn.btn-light / -warning / -danger / -success. Rather than fight that markup, we make those classes mean "category chip at severity X" — which is what the pages were reaching for. NOTE: libs/log-parsing.php currently applies one severity to every chip on an event. That is a data bug, not a styling one; fixing it is separate. */ .btn-light,.btn-warning,.btn-danger,.btn-success,.btn-secondary{ font-family:var(--tc-mono);font-size:11.5px;font-weight:400; padding:2px 8px;border-radius:var(--tc-r-xs); border:1px solid transparent;box-shadow:none; white-space:nowrap;line-height:1.6; } .btn-light{background:var(--tc-info-tint);color:var(--tc-info)} .btn-light:hover{background:var(--tc-info-tint);color:var(--tc-info);border-color:currentColor} .btn-warning{background:var(--tc-warn-tint);color:var(--tc-warn)} .btn-warning:hover{background:var(--tc-warn-tint);color:var(--tc-warn);border-color:currentColor} .btn-danger{background:var(--tc-crit-tint);color:var(--tc-crit)} .btn-danger:hover{background:var(--tc-crit-tint);color:var(--tc-crit);border-color:currentColor} .btn-success{background:var(--tc-ok-tint);color:var(--tc-ok)} .btn-success:hover{background:var(--tc-ok-tint);color:var(--tc-ok);border-color:currentColor} .btn-sm{font-size:11px;padding:1px 7px} /* Real buttons — the ones that submit things — keep button shape. */ .btn-block,.btn-ln{ font-family:var(--tc-font);font-size:13px;font-weight:500; padding:8px 14px;border-radius:var(--tc-r-sm);line-height:1.4; } .btn-success.btn-block,.btn-success.btn-ln{ background:var(--tc-act);border-color:var(--tc-act);color:#fff} .btn-success.btn-block:hover,.btn-success.btn-ln:hover{ background:var(--tc-act-hover);border-color:var(--tc-act-hover);color:#fff} .btn:focus,.btn.focus{box-shadow:var(--tc-focus)} /* Primary form buttons on the standalone pages (login, register, payment). */ .btn-info,.btn-primary{ font-family:var(--tc-font);font-size:13.5px;font-weight:500; background:var(--tc-act);border-color:var(--tc-act);color:#fff; border-radius:var(--tc-r-sm);padding:10px 16px; } .btn-info:hover,.btn-primary:hover{ background:var(--tc-act-hover);border-color:var(--tc-act-hover);color:#fff} .btn-lg{font-size:14px;padding:12px 20px} .pagination{margin:0;gap:4px;flex-wrap:wrap} .page-link{ font-family:var(--tc-mono);font-size:12.5px; border:1px solid var(--tc-line);border-radius:var(--tc-r-sm)!important; color:var(--tc-tx-2);padding:5px 10px; } .page-link:hover{background:var(--tc-surface-2);border-color:var(--tc-line-2);color:var(--tc-tx)} .page-item.active .page-link{background:var(--tc-act);border-color:var(--tc-act);color:#fff} .page-item.disabled .page-link{opacity:.45;background:transparent;border-color:var(--tc-line)} .form-control{ font-size:13.5px;padding:9px 12px;height:auto; border:1px solid var(--tc-line-2);border-radius:var(--tc-r-sm);color:var(--tc-tx); } .form-control:focus{border-color:var(--tc-act);box-shadow:var(--tc-focus)} .dropdown-menu{ border:1px solid var(--tc-line);border-radius:var(--tc-r); box-shadow:var(--tc-shadow-pop);padding:6px;font-size:13.5px; } .dropdown-item{border-radius:var(--tc-r-sm);padding:8px 10px;color:var(--tc-tx)} .dropdown-item:hover,.dropdown-item:focus{background:var(--tc-surface-2);color:var(--tc-tx)} .dropdown-divider{border-color:var(--tc-line);margin:6px 0} .badge{font-family:var(--tc-mono);font-weight:500;border-radius:var(--tc-r-xs);padding:3px 7px} .popover{ border:1px solid var(--tc-line);border-radius:var(--tc-r); box-shadow:var(--tc-shadow-pop);font-family:var(--tc-mono);font-size:12px; max-width:380px; } .popover-header{font-family:var(--tc-font);font-size:13px;font-weight:600; background:var(--tc-surface-2);border-bottom:1px solid var(--tc-line)} .popover-body{white-space:pre-line;color:var(--tc-tx-2);max-height:400px;overflow:auto} .footer{ padding:22px 24px;text-align:center; font-size:12px;color:var(--tc-tx-3); border-top:1px solid var(--tc-line);margin-top:34px; } /* ========================================================================== 16 LEGACY SHIMS Utility classes the old theme provided that live templates still use. Every one of these is a marker for a page that has not been rewritten yet — when this block can be deleted, the migration is done. ========================================================================== */ .pull-left{float:left} .pull-right{float:right} .clear{clear:both} .text-themecolor{color:var(--tc-tx)} .hide-menu{display:inline} .m-t-0{margin-top:0!important} .m-b-0{margin-bottom:0!important} .m-t-10{margin-top:10px!important} .m-b-10{margin-bottom:10px!important} .m-t-20{margin-top:20px!important} .m-b-20{margin-bottom:20px!important} .m-l-10{margin-left:10px!important} .m-r-10{margin-right:10px!important} .m-l-20{margin-left:20px!important} .m-r-20{margin-right:20px!important} .p-0{padding:0!important} /* Old page-title strip. Neutralised rather than styled — the new topbar carries navigation now, so this should render as plain content. */ .page-titles{ background:transparent;border:0;box-shadow:none; margin:0 0 18px;padding:0; } .page-titles h4{font-size:14px;font-weight:400} /* The template preloader. login.php, register.php, forgot.php, payment.php, 2fa.php, verifyemail.php and logout.php still emit
. The theme script that dismissed it (js/custom.min.js) is gone, so styling it as an overlay leaves a spinner covering the page forever. It is hidden outright instead: a preloader hides content that is already rendered, which makes a fast page feel slow. Delete the markup from those files as each one is rewritten. */ .preloader{display:none!important} /* Old topbar bits still emitted by internal-sidebar.php, until it is replaced. */ .topbar{background:var(--tc-ink-0)} .profile-pic{width:29px;height:29px;border-radius:50%} .notify,.notifygreen{display:none} /* ========================================================================== 17 RESPONSIVE ========================================================================== */ @media (max-width:1200px){ .tc-grid-4,.tc-metrics{grid-template-columns:repeat(2,1fr)} .tc-ev{grid-template-columns:110px 100px 160px 1fr} } @media (max-width:1000px){ .tc-grid-main,.tc-grid-3,.tc-triage{grid-template-columns:1fr} .tc-topbar-in{gap:14px;padding:0 16px} .tc-pill.tc-hide-md{display:none} .tc-nav > a,.tc-nav > .tc-dd > a{padding:7px 9px;font-size:13px} } @media (max-width:760px){ .tc-wrap{padding:18px 14px 46px} .tc-topbar-in{height:auto;padding:10px 14px;flex-wrap:wrap} .tc-nav{order:3;width:100%;overflow-x:auto;padding-bottom:2px;margin-left:0} .tc-nav::-webkit-scrollbar{display:none} .tc-grid-2,.tc-grid-4,.tc-metrics{grid-template-columns:1fr} .tc-ev{grid-template-columns:1fr;gap:4px;padding:11px 14px} .tc-ev-head{display:none} .tc-row > a:first-child{min-width:130px} h1{font-size:21px} .tc-dd-menu{min-width:0;width:calc(100vw - 28px);left:0} .tc-dd-menu.right{right:auto} } @media print{ .tc-topbar,.tc-tabs,.tc-search,.tc-chips,.footer{display:none} .tc-card,.card{border-color:#ccc;box-shadow:none;break-inside:avoid} body{background:#fff} } /* ========================================================================== 18 LOG ROWS Shared by Search, Reports and Search Reports via includes/logging-results-table.php. Density is the whole game here. The old table gave each event four cells, one holding a full nginx line and another holding five stacked buttons, which made rows ~120px tall — six events per screen. These rows are one line each until you open them, with a severity rule down the left and alternating row tint so the eye can track across a wide row. ========================================================================== */ .tc-logs{width:100%;border-collapse:collapse;table-layout:fixed} .tc-logs thead th{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--tc-tx-3);text-align:left;padding:9px 12px; border-bottom:1px solid var(--tc-line);white-space:nowrap;background:var(--tc-surface); position:sticky;top:var(--tc-topbar-h);z-index:2; } .tc-logs tbody td{ padding:8px 12px;vertical-align:top; border-bottom:1px solid var(--tc-line-3); font-size:12.5px; } .tc-logs tbody tr:nth-child(even) td{background:#fafbfd} .tc-logs tbody tr:hover td{background:#f2f6fa} .tc-logs tbody tr:last-child td{border-bottom:0} /* Severity rule. A dedicated cell rather than border-left on the row: border-collapse eats one-sided borders on in several browsers. */ .tc-logs td.tc-log-sev{width:4px;padding:0;background:var(--tc-info)} .tc-logs tr.crit td.tc-log-sev{background:var(--tc-crit)} .tc-logs tr.high td.tc-log-sev{background:var(--tc-high)} .tc-logs tr.warn td.tc-log-sev{background:var(--tc-warn)} .tc-logs tr.ok td.tc-log-sev{background:var(--tc-ok)} .tc-logs td.tc-log-when{width:104px;font-family:var(--tc-mono); font-variant-numeric:tabular-nums;color:var(--tc-tx-2);line-height:1.45} .tc-logs td.tc-log-when b{display:block;color:var(--tc-tx);font-weight:500} .tc-logs td.tc-log-host{width:190px;overflow:hidden} .tc-log-host a{font-family:var(--tc-mono);display:block;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .tc-log-file{font-family:var(--tc-mono);font-size:11px;color:var(--tc-tx-3); display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px} /* The log line itself: one line, click to open. */ .tc-log-line{ font-family:var(--tc-mono);font-size:12px;line-height:1.5;color:var(--tc-tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; cursor:pointer;position:relative;padding-right:16px; } .tc-log-line::after{ content:"⌄";position:absolute;right:0;top:-1px;color:var(--tc-tx-3);font-size:13px; } .tc-log-line.open{white-space:pre-wrap;word-break:break-word;padding-right:16px} .tc-log-line.open::after{content:"⌃"} .tc-log-line a{font-weight:500} .tc-log-line .flagwrap{margin-right:4px} .tc-log-cats{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px} .tc-log-more{font-size:11px;color:var(--tc-tx-3);align-self:center} .tc-log-empty{padding:44px 18px;text-align:center;color:var(--tc-tx-2)} .tc-log-empty .mdi{display:block;font-size:32px;color:var(--tc-line-2);margin-bottom:10px} /* Result summary strip above the rows. */ .tc-log-bar{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:12px 18px;border-bottom:1px solid var(--tc-line); } .tc-log-bar .count{font-size:13.5px} .tc-log-bar .count b{font-weight:600} .tc-log-bar .right{margin-left:auto;display:flex;align-items:center;gap:10px} @media (max-width:900px){ .tc-logs,.tc-logs tbody,.tc-logs tr,.tc-logs td{display:block;width:auto} .tc-logs thead{display:none} .tc-logs tbody tr{border-bottom:1px solid var(--tc-line);padding:4px 0} .tc-logs td{border-bottom:0;padding:3px 12px} .tc-logs td.tc-log-sev{height:3px;width:auto} .tc-logs td.tc-log-when,.tc-logs td.tc-log-host{width:auto} } /* ========================================================================== 19 EVIDENCE COLUMNS, GEO BADGES, CHECK SUMMARY Used by the Security review and, later, the other Insights pages. ========================================================================== */ /* --- geo badge ----------------------------------------------------------- Every address gets a fixed-width slot whether or not GeoIP resolved it. Private ranges get a LAN tag, public-but-unresolved gets a neutral globe. Without this the column ragged-aligns wherever a flag is missing, which is most rows on an internal network. */ .tc-geo{ display:inline-block;width:18px;flex:none;text-align:center; vertical-align:-1px;margin-right:6px; } .tc-geo i{vertical-align:-1px} .tc-geo .tc-lan{ display:inline-block;font-size:8.5px;font-weight:600;letter-spacing:.02em; line-height:11px;padding:0 2px;border-radius:2px; background:var(--tc-info-tint);color:var(--tc-info); } .tc-geo .tc-unknown{color:var(--tc-line-2);font-size:11px} /* --- evidence columns ---------------------------------------------------- Ruled columns rather than a bare grid. With four unlabelled columns of different heights the eye cannot tell where one ends and the next begins. */ .tc-ev-cols{display:flex;gap:0;flex-wrap:wrap} .tc-ev-col{ flex:1 1 190px;min-width:0; padding:0 18px;border-left:1px solid var(--tc-line); } .tc-ev-col:first-child{border-left:0;padding-left:0} .tc-ev-head{ font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--tc-tx-3);padding-bottom:6px;margin-bottom:7px; border-bottom:1px solid var(--tc-line-3); display:flex;align-items:baseline;gap:6px; } .tc-ev-head span{letter-spacing:0;text-transform:none;font-weight:400;color:var(--tc-line-2)} .tc-ev-row{display:flex;gap:8px;align-items:baseline;padding:2.5px 0;font-size:12.5px} .tc-ev-row > a,.tc-ev-row > span:first-child{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tc-ev-row .v{flex:none;color:var(--tc-tx-2);font-variant-numeric:tabular-nums} .tc-ev-sub{ display:flex;gap:8px;align-items:baseline;font-size:11.5px; color:var(--tc-tx-3);padding:1px 0 1px 13px; } .tc-ev-sub span:first-child{flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font-family:var(--tc-mono)} .tc-ev-more{font-size:11.5px;color:var(--tc-tx-3);margin-top:4px} /* --- check summary ------------------------------------------------------- One line rather than three large tiles holding a single digit each. The segmented bar carries the proportion; the counts carry the detail. */ .tc-checkbar{ display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding:15px 18px; } .tc-checkbar-lead{font-size:15px;font-weight:600;letter-spacing:-.01em} .tc-checkbar-lead small{display:block;font-size:12.5px;font-weight:400; color:var(--tc-tx-2);margin-top:2px;letter-spacing:0} .tc-checkbar-counts{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto} .tc-checkcount{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--tc-tx-2)} .tc-checkcount b{font-size:16px;font-weight:600;color:var(--tc-tx); font-variant-numeric:tabular-nums} .tc-checkcount i.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none} .tc-checkcount .crit{background:var(--tc-crit)} .tc-checkcount .info{background:var(--tc-info)} .tc-checkcount .ok{background:var(--tc-ok)} .tc-checkseg{display:flex;height:5px;border-radius:3px;overflow:hidden; background:var(--tc-line-3);margin:0 18px 15px} .tc-checkseg i{display:block;height:100%} .tc-checkseg i.crit{background:var(--tc-crit)} .tc-checkseg i.info{background:var(--tc-info)} .tc-checkseg i.ok{background:var(--tc-ok)} /* --- clear checks, compact ------------------------------------------------ */ .tc-clear-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; } .tc-clear-item{ display:flex;gap:9px;align-items:flex-start; padding:11px 18px;border-bottom:1px solid var(--tc-line-3); border-left:1px solid var(--tc-line-3); } .tc-clear-item:nth-child(3n+1){border-left:0} .tc-clear-item .mdi{color:var(--tc-ok);font-size:15px;flex:none;margin-top:1px} .tc-clear-item b{display:block;font-size:13px;font-weight:500} .tc-clear-item span{display:block;font-size:12px;color:var(--tc-tx-2);line-height:1.4} @media (max-width:1100px){ .tc-clear-grid{grid-template-columns:repeat(2,1fr)} .tc-clear-item:nth-child(3n+1){border-left:1px solid var(--tc-line-3)} .tc-clear-item:nth-child(2n+1){border-left:0} } @media (max-width:760px){ .tc-clear-grid{grid-template-columns:1fr} .tc-clear-item{border-left:0} .tc-ev-col{border-left:0;padding:0;flex-basis:100%;margin-bottom:14px} .tc-checkbar-counts{margin-left:0} } /* --- LAN pseudo-flag ----------------------------------------------------- nocgeo stores "LAN" in srcipgeo for the customer's own network, so pages that build a flag class from the country code end up asking for .flag-lan, which has no sprite. Give it a real appearance rather than a blank gap, sized to sit in the same slot as a flag. */ .flag-lan{ display:inline-block;width:16px;height:11px;vertical-align:-1px; background:var(--tc-info-tint);border:1px solid var(--tc-line-2); border-radius:2px;position:relative; } .flag-lan::after{ content:"L";position:absolute;inset:0; font-family:var(--tc-font);font-size:8px;font-weight:600;line-height:9px; text-align:center;color:var(--tc-info); } /* ========================================================================== 20 SETUP PAGE Copyable commands, numbered steps, source picker. ========================================================================== */ /* --- copyable command / value ------------------------------------------- Every one of these carries a live credential. Reading a key out of a block and retyping it is where onboarding goes wrong, so all of them get a one-click copy. */ .tc-cmd{ display:flex;align-items:flex-start;gap:9px; background:#0e1a20;border-radius:var(--tc-r-sm); padding:9px 11px;margin:7px 0; font-family:var(--tc-mono);font-size:12.5px;line-height:1.55; } .tc-cmd code{ flex:1;min-width:0;color:#dfe8ed;background:none;padding:0; word-break:break-all;white-space:pre-wrap;font-size:12.5px; } .tc-cmd-prompt{color:#5f7a86;flex:none;user-select:none} .tc-cmd-copy{ flex:none;border:0;background:none;cursor:pointer;padding:0 2px; color:#7d919e;font-size:14px;line-height:1; } .tc-cmd-copy:hover{color:#fff} .tc-cmd-copy.done{color:#4fbf8b} /* Values to paste elsewhere read better light — they are not commands. */ .tc-cmd-value{ background:var(--tc-surface-2);border:1px solid var(--tc-line); } .tc-cmd-value code{color:var(--tc-tx)} .tc-cmd-value .tc-cmd-copy{color:var(--tc-tx-3)} .tc-cmd-value .tc-cmd-copy:hover{color:var(--tc-act)} /* --- numbered steps ------------------------------------------------------ */ .tc-step{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--tc-line-3)} .tc-step:first-child{border-top:0;padding-top:4px} .tc-step-n{ flex:none;width:24px;height:24px;border-radius:50%; background:var(--tc-act-tint);color:var(--tc-act); display:flex;align-items:center;justify-content:center; font-size:12.5px;font-weight:600;margin-top:1px; } .tc-step-b{flex:1;min-width:0} .tc-step-b > b{display:block;font-size:14px;font-weight:600;margin-bottom:4px} .tc-step-b p{font-size:13px;color:var(--tc-tx-2);line-height:1.55;margin:0 0 4px} /* --- source picker ------------------------------------------------------- */ .tc-src{ display:flex;align-items:flex-start;gap:10px; padding:9px 18px;color:var(--tc-tx);text-decoration:none; border-left:2px solid transparent; } .tc-src:hover{background:var(--tc-surface-2);color:var(--tc-tx);text-decoration:none} .tc-src.on{background:var(--tc-act-tint);border-left-color:var(--tc-act)} .tc-src.on b{color:var(--tc-act)} .tc-src .mdi{font-size:17px;color:var(--tc-tx-2);margin-top:1px;flex:none} .tc-src.on .mdi{color:var(--tc-act)} .tc-src span{min-width:0} .tc-src b{display:block;font-size:13.5px;font-weight:500;line-height:1.35} .tc-src small{display:block;font-size:12px;color:var(--tc-tx-2);line-height:1.4} @media (max-width:900px){ .tc-grid[style*="280px"]{grid-template-columns:1fr!important} } /* ========================================================================== 21 AUTH PAGES login, register, forgot, 2fa, verifyemail, payment. Dark field, white card — the same relationship the dashboard has between its top bar and its content, so the first screen a customer sees belongs to the same product as the second. ========================================================================== */ body.tc-auth{ background:var(--tc-ink-0); min-height:100vh; display:flex;align-items:center;justify-content:center; padding:32px 18px; } /* A very quiet radial lift behind the card, so the background is not a flat slab on large screens. */ body.tc-auth::before{ content:"";position:fixed;inset:0;pointer-events:none; background:radial-gradient(ellipse 900px 600px at 50% 38%, rgba(212,98,42,.10), transparent 70%); } .tc-auth-box{position:relative;width:100%;max-width:404px} .tc-auth-card{ background:var(--tc-surface); border-radius:12px; padding:34px 32px 28px; box-shadow:0 18px 48px rgba(0,0,0,.34), 0 3px 10px rgba(0,0,0,.2); text-align:center; } .tc-auth-logo{ height:38px;width:auto;display:block;margin:0 auto 22px; } .tc-auth-h{ font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 5px; } .tc-auth-sub{ font-size:13.5px;color:var(--tc-tx-2);margin:0 0 22px; } .tc-auth-card .tc-input{padding:11px 13px;font-size:14px} .tc-auth-foot{ margin:20px 0 0;padding-top:18px; border-top:1px solid var(--tc-line-3); font-size:13px;color:var(--tc-tx-2); } .tc-auth-foot a{font-weight:500} .tc-auth-legal{ margin:18px 0 0;text-align:center; font-size:12px;color:var(--tc-ink-tx-3); } .tc-auth-legal a{color:var(--tc-ink-tx-2)} .tc-auth-legal a:hover{color:#fff} @media (max-width:420px){ .tc-auth-card{padding:26px 20px 22px} } /* ========================================================================== 22 ALERT ROWS AND SWITCHES ========================================================================== */ /* --- alert matrix -------------------------------------------------------- Rules down, destinations across. The grid gets its OWN scroll box rather than riding the page scroll. Two stickies competing — the page top bar and a sticky thead positioned against the viewport — left a gap where the header used to be and dropped the header on top of the first row. Inside a bounded container both axes stick against the container, which is well defined. Height is capped so a long rule list does not push the "add destination" card off the bottom of the world. */ .tc-matrix-wrap{ overflow:auto; max-height:min(68vh, 720px); position:relative; } .tc-matrix{width:100%;border-collapse:separate;border-spacing:0} .tc-matrix thead th{ position:sticky;top:0;z-index:3; background:var(--tc-surface); box-shadow:inset 0 -1px 0 var(--tc-line); padding:10px 12px;text-align:left;vertical-align:bottom; font-weight:500; } .tc-matrix .tc-matrix-rule{ position:sticky;left:0;z-index:2; background:var(--tc-surface); min-width:260px;max-width:300px; box-shadow:inset -1px 0 0 var(--tc-line); padding:9px 16px;vertical-align:top; } .tc-matrix thead .tc-matrix-rule{ z-index:4; box-shadow:inset -1px 0 0 var(--tc-line), inset 0 -1px 0 var(--tc-line); font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--tc-tx-3); } .tc-matrix tbody tr:hover .tc-matrix-rule{background:var(--tc-surface-2)} .tc-matrix-rule b{display:block;font-size:13.5px;font-weight:600;line-height:1.35} .tc-matrix-desc{ font-size:12.5px;color:var(--tc-tx-2);line-height:1.4;margin-top:1px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* --- destination header -------------------------------------------------- Two lines: local part above domain. Truncating one long string put the ellipsis exactly where two addresses differ — mandoniou@cy… and mandoniou@lg… read as the same column. Splitting at the @ keeps both halves legible. */ .tc-matrix-dest{min-width:126px;max-width:150px} .tc-matrix-desthead{display:flex;align-items:center;gap:5px;min-width:0} .tc-matrix-desthead .mdi{font-size:14px;color:var(--tc-tx-3);flex:none} .tc-matrix-local{ font-family:var(--tc-mono);font-size:12px;font-weight:500;color:var(--tc-tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1; } .tc-matrix-domain{ font-family:var(--tc-mono);font-size:11px;color:var(--tc-tx-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; margin:1px 0 0 19px; } .tc-matrix-count{font-size:11px;color:var(--tc-tx-3);margin:3px 0 0 19px} .tc-matrix-del{ border:0;background:none;cursor:pointer;padding:0 1px;flex:none; color:var(--tc-line-2);font-size:13px;line-height:1; } .tc-matrix-del:hover{color:var(--tc-crit)} .tc-matrix-cell{ text-align:center;vertical-align:middle; box-shadow:inset 0 -1px 0 var(--tc-line-3); padding:9px 12px; } .tc-matrix tbody tr:hover .tc-matrix-cell{background:var(--tc-surface-2)} /* A light wash on the live cells, so the shape of "what goes where" reads before you look at any individual switch. */ .tc-matrix-cell.on{background:var(--tc-ok-tint)} .tc-matrix tbody tr:hover .tc-matrix-cell.on{background:#dcefe3} .tc-matrix tbody td.tc-matrix-rule{ box-shadow:inset -1px 0 0 var(--tc-line), inset 0 -1px 0 var(--tc-line-3); } .tc-matrix-group td{ position:sticky;left:0;z-index:2; background:var(--tc-surface-2); box-shadow:inset 0 1px 0 var(--tc-line), inset 0 -1px 0 var(--tc-line); padding:7px 16px; font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--tc-tx-3); } .tc-matrix-edit{ border:0;background:none;padding:0;cursor:pointer; font:inherit;font-size:12px;color:var(--tc-act); } .tc-matrix-edit:hover{text-decoration:underline} /* --- switch --------------------------------------------------------------- A real checkbox, visually hidden, so it keeps keyboard focus and form semantics. The old markup used a bare with a stray self-closing tag inside the label. */ .tc-switch{ display:inline-flex;align-items:center;cursor:pointer;margin:2px 0 0; } .tc-switch input{ position:absolute;opacity:0;width:0;height:0; } .tc-switch-track{ position:relative;display:block; width:34px;height:19px;border-radius:10px; background:var(--tc-line-2); transition:background .14s ease; } .tc-switch-knob{ position:absolute;top:2px;left:2px; width:15px;height:15px;border-radius:50%; background:#fff;box-shadow:0 1px 2px rgba(19,35,44,.3); transition:transform .14s ease; } .tc-switch input:checked + .tc-switch-track{background:var(--tc-ok)} .tc-switch input:checked + .tc-switch-track .tc-switch-knob{transform:translateX(15px)} .tc-switch input:focus-visible + .tc-switch-track{box-shadow:var(--tc-focus)} /* --- bootstrap modal, restyled ------------------------------------------- Still Bootstrap's modal because the pages use data-toggle, but wearing our surfaces. */ .modal-content{ border:1px solid var(--tc-line);border-radius:var(--tc-r); box-shadow:var(--tc-shadow-pop); } .modal-header,.modal-footer{border-color:var(--tc-line);padding:14px 18px} .modal-body{padding:16px 18px} .modal-title{font-size:15px;font-weight:600;letter-spacing:-.01em} .modal-header .close{color:var(--tc-tx-3);opacity:1;text-shadow:none;font-weight:400} .modal-header .close:hover{color:var(--tc-tx)} /* ========================================================================== 23 SETTINGS ROWS AND ENDPOINTS ========================================================================== */ /* --- endpoints ----------------------------------------------------------- Two columns, because most of these values are short: a host:port in a full-width dark bar is mostly empty bar. Long URLs take both columns. Values sit on a light chip with real ink rather than a dark block. The dark treatment belongs on the setup page, where the content is shell commands; here it made five short strings look like five terminals. */ .tc-ep-grid{display:grid;grid-template-columns:1fr 1fr} .tc-ep{ padding:13px 18px; border-top:1px solid var(--tc-line-3); min-width:0; } .tc-ep:nth-child(even){border-left:1px solid var(--tc-line-3)} .tc-ep.wide{grid-column:1 / -1;border-left:0} .tc-ep > b{ display:block;font-size:14px;font-weight:600;color:var(--tc-tx);margin-bottom:7px; } .tc-ep > span{ display:block;font-size:13px;color:var(--tc-tx-2);line-height:1.5;margin-top:7px; } .tc-ep-val{ display:flex;align-items:flex-start;gap:8px; background:#f7f9fb; border:1px solid var(--tc-line); border-radius:var(--tc-r-sm); padding:8px 10px; } /* 13.5px at weight 500. Mono has thin strokes and little mass at 12.5, which is the other half of why the links looked washed out — a colour needs enough ink on the page to register as a colour. */ .tc-ep-val code, .tc-ep-val a{ flex:1;min-width:0; font-family:var(--tc-mono);font-size:13.5px;font-weight:500;line-height:1.55; word-break:break-all;background:none;padding:0; } .tc-ep-val code{color:var(--tc-tx)} .tc-ep-val a{color:var(--tc-act);text-decoration:none} .tc-ep-val a:hover{text-decoration:underline} .tc-ep-val a:hover{color:var(--tc-act-hover)} .tc-ep-copy{ flex:none;border:0;background:none;cursor:pointer;padding:0 1px; color:var(--tc-tx-3);font-size:14px;line-height:1.4; } .tc-ep-copy:hover{color:var(--tc-act)} .tc-ep-copy.done{color:var(--tc-ok)} @media (max-width:860px){ .tc-ep-grid{grid-template-columns:1fr} .tc-ep:nth-child(even){border-left:0} } /* --- settings rows ------------------------------------------------------- */ .tc-setrow{ display:flex;align-items:flex-start;gap:16px; padding:14px 18px;border-top:1px solid var(--tc-line-3); } .tc-setrow:first-of-type{border-top:1px solid var(--tc-line)} .tc-setrow:hover{background:var(--tc-surface-2)} .tc-setrow.on{box-shadow:inset 3px 0 0 var(--tc-ok)} .tc-setrow-b{flex:1;min-width:0} .tc-setrow-b > b{ display:block;font-size:14px;font-weight:600;color:var(--tc-tx);margin-bottom:3px; } /* 13px rather than 12.5, and a slightly darker ink. These lines explain what a control actually does — several of them are the difference between storing everything and storing what matters. */ .tc-setrow-desc{font-size:13px;color:var(--tc-tx-2);line-height:1.5} .tc-setrow-desc a{font-weight:500} /* Narrow, because the panels are half width now — the control should sit a short hop from the label, not at the far edge of the viewport. */ .tc-setrow-c{flex:none;width:118px;display:flex;justify-content:flex-end} .tc-setrow-c form{width:100%;text-align:right} .tc-setrow-c .tc-input{text-align:left} /* * A row whose control is a text field needs far more room than one with a * switch. 118px is right for a toggle and showed about twelve characters of * a regex that can run to a hundred and twenty, with the rest scrolling out * of sight as you typed. * * The row switches to a stacked layout instead: label on top, full width * input below. Anything you have to read back to check is worth the width. * * The class is set in PHP rather than with :has(), which would work in every * current browser but needs no support question asking at all this way. */ .tc-setrow.stacked{flex-direction:column;align-items:stretch;gap:10px} .tc-setrow.stacked .tc-setrow-c{width:100%;justify-content:flex-start} .tc-setrow-input{display:flex;gap:8px;width:100%;align-items:center} .tc-setrow-input .tc-input{flex:1;min-width:0;text-align:left} .tc-setrow-input .tc-btn{flex:none} /* Switch with the state spelled out. A bare toggle makes you decode which way is on; the word removes the guess. */ .tc-setrow-c .tc-btn{max-width:100%} .tc-setrow-c .tc-dd{max-width:100%} .tc-setrow-c .tc-dd .tc-btn{min-width:0!important;width:100%} .tc-setrow-c .tc-dd .tc-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tc-switch-lbl{gap:9px} .tc-switch-state{ font-size:12.5px;font-weight:500;color:var(--tc-tx-3); min-width:22px;text-align:left; } .tc-switch input:checked ~ .tc-switch-state{color:var(--tc-ok)} @media (max-width:760px){ .tc-setrow{flex-direction:column;gap:10px} .tc-setrow-c{width:auto;justify-content:flex-start} .tc-setrow-c form{text-align:left} } /* ========================================================================== 24 TERMINAL jquery.terminal brings its own stylesheet; these override it to match the rest of the portal rather than sitting on the page as a foreign object. ========================================================================== */ .tc-terminal{ min-height:520px; background:var(--tc-ink-0); border-radius:var(--tc-r); } .tc-terminal .terminal, .tc-terminal.terminal{ background:var(--tc-ink-0)!important; color:#dfe8ed!important; font-family:var(--tc-mono)!important; font-size:13px!important; line-height:1.6!important; padding:14px 16px!important; border-radius:var(--tc-r); } .tc-terminal .terminal-output a{color:#7fb2e0} .tc-terminal .cmd .prompt{color:var(--tc-brand)!important} .tc-terminal .cmd .cursor.blink{background:#dfe8ed!important} .tc-terminal .terminal-scroller{scrollbar-width:thin} /* --- command list -------------------------------------------------------- */ .tc-termcmd{ display:block;width:100%;text-align:left; border:0;background:none;cursor:pointer; padding:8px 18px; border-left:2px solid transparent; } .tc-termcmd:hover{background:var(--tc-surface-2);border-left-color:var(--tc-act)} .tc-termcmd .tc-mono{ display:block;font-size:12.5px;font-weight:500;color:var(--tc-act); } .tc-termcmd small{ display:block;font-size:12px;color:var(--tc-tx-2);line-height:1.4;margin-top:1px; } @media (max-width:900px){ .tc-grid[style*="268px"]{grid-template-columns:1fr!important} } /* ========================================================================== 25 ACCESS LEVEL OPTIONS Radio cards. A