238 lines
8.8 KiB
CSS
238 lines
8.8 KiB
CSS
/* BUILD160 — compact server/Agent/vMix diagnostics in the runtime topbar. */
|
|
.hockey-diagnostics-ui {
|
|
position: relative;
|
|
z-index: 60;
|
|
flex: 0 0 auto;
|
|
font-family: Inter, "Segoe UI", Arial, sans-serif;
|
|
}
|
|
|
|
.runtime-diagnostics-btn {
|
|
position: relative;
|
|
}
|
|
.runtime-diagnostics-btn.is-open { border-color: #5b7b98; }
|
|
.runtime-diagnostics-btn.is-loading .diagnostics-button-dot { animation: diagnosticsPulse 1s ease-in-out infinite; }
|
|
.diagnostics-button-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: #e2a84f;
|
|
box-shadow: 0 0 0 3px rgba(226,168,79,.12);
|
|
}
|
|
.diagnostics-button-dot.ok {
|
|
background: #53d8a8;
|
|
box-shadow: 0 0 9px rgba(83,216,168,.65);
|
|
}
|
|
.diagnostics-button-dot.warning {
|
|
background: #e2a84f;
|
|
box-shadow: 0 0 8px rgba(226,168,79,.5);
|
|
}
|
|
.diagnostics-button-dot.error {
|
|
background: #ff687c;
|
|
box-shadow: 0 0 9px rgba(255,104,124,.58);
|
|
}
|
|
|
|
@keyframes diagnosticsPulse {
|
|
0%, 100% { transform: scale(1); opacity: .65; }
|
|
50% { transform: scale(1.35); opacity: 1; }
|
|
}
|
|
|
|
/* Keep the tab buttons to the left of the compact action buttons and never
|
|
force the whole runtime header onto a second line on desktop. */
|
|
.runtime-topbar {
|
|
grid-template-columns: minmax(145px, .42fr) minmax(0, 1fr) max-content;
|
|
column-gap: clamp(7px, .8vw, 13px);
|
|
}
|
|
.runtime-tabs {
|
|
min-width: 0;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
padding-bottom: 1px;
|
|
}
|
|
.runtime-tabs::-webkit-scrollbar { display: none; }
|
|
.runtime-tab {
|
|
flex: 0 0 auto;
|
|
min-height: 35px;
|
|
padding-inline: clamp(8px, .7vw, 13px);
|
|
white-space: nowrap;
|
|
}
|
|
.runtime-actions {
|
|
gap: 5px;
|
|
flex-wrap: nowrap;
|
|
min-width: max-content;
|
|
}
|
|
.runtime-actions > .icon-btn,
|
|
.runtime-actions > .hockey-agent-ui,
|
|
.runtime-actions > .hockey-diagnostics-ui {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.hockey-diagnostics-panel {
|
|
position: absolute;
|
|
top: calc(100% + 9px);
|
|
right: 0;
|
|
width: min(590px, calc(100vw - 24px));
|
|
max-height: min(760px, calc(100vh - 82px));
|
|
overflow: auto;
|
|
border: 1px solid #304961;
|
|
border-radius: 16px;
|
|
color: #dce8f5;
|
|
background: rgba(7, 16, 27, .985);
|
|
box-shadow: 0 26px 80px rgba(0,0,0,.58);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.hockey-diagnostics-header {
|
|
position: sticky;
|
|
z-index: 3;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 14px 15px 12px;
|
|
border-bottom: 1px solid #22384d;
|
|
background: rgba(7,16,27,.98);
|
|
}
|
|
.hockey-diagnostics-header > div:first-child { display: grid; gap: 2px; }
|
|
.hockey-diagnostics-header small { color: #58cda8; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
|
|
.hockey-diagnostics-header strong { font-size: 16px; }
|
|
.hockey-diagnostics-header-actions { display: flex; align-items: center; gap: 6px; }
|
|
.diagnostic-icon-btn {
|
|
width: 29px;
|
|
height: 29px;
|
|
padding: 0;
|
|
border: 1px solid #314961;
|
|
border-radius: 8px;
|
|
color: #a9b9ca;
|
|
background: #0d1b2a;
|
|
font-size: 17px;
|
|
}
|
|
.diagnostic-icon-btn:hover { border-color: #54708e; color: #eaf3fb; }
|
|
.diagnostic-overall {
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
font-size: 8px;
|
|
font-weight: 950;
|
|
letter-spacing: .08em;
|
|
}
|
|
.diagnostic-overall.ok { color: #8debc9; background: #123b31; }
|
|
.diagnostic-overall.warning { color: #f3c37b; background: #3a2c1a; }
|
|
.diagnostic-overall.error { color: #ffc0c9; background: #47232c; }
|
|
|
|
.hockey-diagnostics-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0,1fr));
|
|
gap: 7px;
|
|
padding: 11px 13px 4px;
|
|
}
|
|
.diagnostic-health-card {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 9px 10px;
|
|
border: 1px solid #243b52;
|
|
border-radius: 10px;
|
|
background: #0a1826;
|
|
}
|
|
.diagnostic-health-card.ok { border-color: rgba(83,216,168,.30); }
|
|
.diagnostic-health-card.error { border-color: rgba(255,104,124,.42); }
|
|
.diagnostic-health-card.warning { border-color: rgba(226,168,79,.35); }
|
|
.diagnostic-health-card span { color: #72879d; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
|
|
.diagnostic-health-card b { color: #dce9f5; font-size: 10px; }
|
|
.diagnostic-health-card.ok b { color: #73dfbc; }
|
|
.diagnostic-health-card.error b { color: #ff9bab; }
|
|
.diagnostic-health-card.warning b { color: #efbd73; }
|
|
.diagnostic-health-card small { overflow: hidden; color: #60768d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.hockey-diagnostics-error {
|
|
margin: 8px 13px 0;
|
|
padding: 9px 10px;
|
|
border-radius: 9px;
|
|
color: #ffd2d9;
|
|
background: #4a2028;
|
|
font-size: 9px;
|
|
}
|
|
.hockey-diagnostics-section { padding: 9px 13px 0; }
|
|
.diagnostics-events-section { padding-bottom: 11px; }
|
|
.diagnostic-section-title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 2px 1px 7px;
|
|
}
|
|
.diagnostic-section-title strong { color: #c7d6e5; font-size: 10px; }
|
|
.diagnostic-section-title span { color: #5f758c; font-size: 8px; }
|
|
.hockey-diagnostic-devices { display: grid; gap: 7px; }
|
|
.hockey-diagnostic-device {
|
|
display: grid;
|
|
gap: 7px;
|
|
padding: 9px 10px;
|
|
border: 1px solid #253e55;
|
|
border-radius: 10px;
|
|
background: #091723;
|
|
}
|
|
.hockey-diagnostic-device.selected { border-color: #397f6b; box-shadow: inset 0 0 0 1px rgba(83,216,168,.08); }
|
|
.hockey-diagnostic-device.offline { opacity: .78; }
|
|
.diagnostic-device-head { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 8px; }
|
|
.diagnostic-device-head > div { min-width: 0; display: grid; gap: 2px; }
|
|
.diagnostic-device-head strong { overflow: hidden; color: #dce9f6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.diagnostic-device-head small { overflow: hidden; color: #647a91; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
|
|
.diagnostic-device-head em { padding: 4px 6px; border-radius: 6px; color: #83e4c5; background: #14372f; font-size: 7px; font-style: normal; font-weight: 950; }
|
|
.diagnostic-device-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff687c; }
|
|
.diagnostic-device-dot.online { background: #53d8a8; box-shadow: 0 0 8px rgba(83,216,168,.58); }
|
|
.diagnostic-device-grid { display: flex; flex-wrap: wrap; gap: 4px 11px; color: #60778e; font-size: 8px; text-transform: uppercase; }
|
|
.diagnostic-device-grid span { white-space: nowrap; }
|
|
.diagnostic-device-grid b { color: #b7c9da; font-weight: 900; }
|
|
.diagnostic-device-grid b.ok { color: #73dfbc; }
|
|
.diagnostic-device-grid b.warning { color: #efbd73; }
|
|
.diagnostic-device-grid b.error { color: #ff98a8; }
|
|
.diagnostic-device-grid b.muted { color: #6d8095; }
|
|
.diagnostic-device-error { padding: 7px 8px; border-radius: 7px; color: #ffb3bd; background: #2d1c23; font-size: 8px; line-height: 1.35; }
|
|
|
|
.hockey-diagnostic-events {
|
|
max-height: 290px;
|
|
overflow: auto;
|
|
border: 1px solid #1d344a;
|
|
border-radius: 9px;
|
|
background: #07131f;
|
|
}
|
|
.hockey-diagnostic-event {
|
|
display: grid;
|
|
grid-template-columns: 16px 50px 40px minmax(0,1fr);
|
|
align-items: start;
|
|
gap: 6px;
|
|
padding: 7px 8px;
|
|
border-bottom: 1px solid #14293c;
|
|
}
|
|
.hockey-diagnostic-event:last-child { border-bottom: 0; }
|
|
.diagnostic-event-icon { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 5px; color: #7ddfbd; background: #12372e; font-size: 9px; font-weight: 950; }
|
|
.hockey-diagnostic-event.warning .diagnostic-event-icon { color: #efbd73; background: #392b1b; }
|
|
.hockey-diagnostic-event.error .diagnostic-event-icon { color: #ff9baa; background: #47232c; }
|
|
.hockey-diagnostic-event time { color: #60768c; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
.hockey-diagnostic-event > b { color: #6f879d; font-size: 7px; letter-spacing: .04em; }
|
|
.hockey-diagnostic-event > div { min-width: 0; display: grid; gap: 2px; }
|
|
.hockey-diagnostic-event strong { color: #c6d6e5; font-size: 8px; font-weight: 800; line-height: 1.3; }
|
|
.hockey-diagnostic-event small { overflow: hidden; color: #5f7489; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.diagnostic-empty { padding: 18px 12px; color: #61778d; text-align: center; font-size: 9px; }
|
|
.hockey-diagnostics-footer { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px 12px; color: #536a80; font-size: 7px; }
|
|
|
|
@media (max-width: 1100px) {
|
|
.runtime-topbar { grid-template-columns: minmax(115px,.3fr) minmax(0,1fr) max-content; }
|
|
.runtime-tab { padding-inline: 7px; font-size: 10px; }
|
|
.runtime-actions { gap: 3px; }
|
|
.runtime-actions > .icon-btn { width: 32px; min-height: 32px; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.runtime-topbar { grid-template-columns: minmax(90px,auto) minmax(0,1fr) max-content; }
|
|
.runtime-topbar > div:first-child .eyebrow { display: none; }
|
|
.runtime-topbar > div:first-child #runtimeTitle { font-size: 13px; }
|
|
.runtime-tabs { gap: 4px; }
|
|
.runtime-tab { min-height: 32px; padding-inline: 7px; font-size: 9px; }
|
|
.hockey-diagnostics-panel { width: min(560px, calc(100vw - 16px)); }
|
|
}
|