/* Split the Activity Stream footprint into two named placeholders and the live stream. */ #grid-cockpit .v3-center > #activity-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; gap: var(--gap, 8px); min-width: 0; width: 100%; } #grid-cockpit #activity-row > .panel { min-width: 0; margin: 0; } #grid-cockpit #activity-row > .activity-placeholder { display: flex; flex-direction: column; } #grid-cockpit #activity-row > .activity-placeholder > .panel-body { flex: 1; } #grid-cockpit #activity-row > .activity-placeholder > .panel-header h2 { white-space: nowrap; } #grid-cockpit #activity-x1 { box-sizing: border-box; min-height: 0; } #grid-cockpit #activity-x1 > .panel-header { gap: 5px; } #grid-cockpit #activity-row:has(#activity-panel[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* GATEiX authorization history in Panel 01. */ #grid-cockpit #activity-x1 .panel-body { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 8px; } #grid-cockpit #activity-x1 .gateix-auth-tabs { display: flex; gap: 4px; margin-left: auto; min-width: 0; } #grid-cockpit #activity-x1 .gateix-auth-tabs button { min-width: 0; height: 19px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; font-family: inherit; font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background .18s ease, border-color .18s ease; } #grid-cockpit #activity-x1 .gateix-auth-tabs button:hover { transform: translateY(-1px); } #grid-cockpit #activity-x1 .gateix-auth-tabs button:focus-visible { outline: 2px solid #e5f6ff; outline-offset: 2px; } #grid-cockpit #activity-x1 #gateix-auth-refresh { flex: 0 0 28px; width: 28px; padding: 1px 2px; color: #8bdef0 !important; border-color: #327c8b; background: #102a33; box-shadow: none; } #grid-cockpit #activity-x1 #gateix-auth-refresh.is-cooling { flex-basis: 32px; width: 32px; } #grid-cockpit #activity-x1 #gateix-auth-refresh:disabled { opacity: .65; cursor: default; } #grid-cockpit #activity-x1 #gateix-auth-refresh:disabled:hover { transform: none; } #grid-cockpit #activity-x1 #gateix-auth-refresh-countdown { display: none; } #grid-cockpit #activity-x1 #gateix-auth-refresh.is-cooling #gateix-auth-refresh-countdown { display: inline; } #grid-cockpit #activity-x1 #gateix-auth-refresh.is-cooling i { display: none; } #grid-cockpit #activity-x1 #gateix-auth-ok { color: #77dca0 !important; border-color: #258653; background: #0b2a1d; box-shadow: none; } #grid-cockpit #activity-x1 #gateix-auth-deny { color: #ed95a1 !important; border-color: #9a3a4c; background: #2a151d; box-shadow: none; } #grid-cockpit #activity-x1 #gateix-auth-ok span { color: #9ff0bb !important; } #grid-cockpit #activity-x1 #gateix-auth-deny span { color: #ffb0bb !important; } #grid-cockpit #activity-x1 #gateix-auth-ok[aria-pressed="true"] { background: #145436; border-color: #3db977; } #grid-cockpit #activity-x1 #gateix-auth-deny[aria-pressed="true"] { background: #5b2332; border-color: #d7556b; } #grid-cockpit #activity-x1 #gateix-auth-deny.is-alerting { animation: gateix-denial-alert 1s steps(2, start) infinite; } @keyframes gateix-denial-alert { 50% { background: #e02c4c; color: #fff !important; border-color: #ffb9c4; box-shadow: 0 0 12px 2px rgba(255,52,86,.75); } } @media (prefers-reduced-motion: reduce) { #grid-cockpit #activity-x1 #gateix-auth-deny.is-alerting { animation: none; outline: 2px solid #ff7b90; outline-offset: 1px; } } #grid-cockpit #activity-x1 .gateix-auth-list { flex: 1; min-height: 0; overflow: hidden; margin-top: 4px; } #grid-cockpit #activity-x1 .gateix-auth-list > p { margin: 8px 2px; color: #a8bbcf; font-size: 10px; } #grid-cockpit #activity-x1 .gateix-auth-entry { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; min-width: 0; padding: 4px 4px; border-bottom: 1px solid #263c4c; } #grid-cockpit #activity-x1 .gateix-auth-entry strong { min-width: 0; overflow: hidden; color: #dce9ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } #grid-cockpit #activity-x1 .gateix-auth-entry small { flex: none; color: #6cffa4; font-size: 9px; white-space: nowrap; } #grid-cockpit #activity-x1 .gateix-auth-entry .gateix-auth-age { color: #fff; } #grid-cockpit #activity-x1 .gateix-auth-entry.is-unregistered small { color: #ffad42; } #grid-cockpit #activity-x1 .gateix-auth-list[data-mode="DENY"] .gateix-auth-entry small { color: #ff8799; } #grid-cockpit #activity-x1 .gateix-auth-entry.is-denied { flex-wrap: wrap; border-left: 2px solid #e04462; padding-left: 7px; } #grid-cockpit #activity-x1 .gateix-auth-entry .gateix-auth-context { flex: 0 0 100%; color: #b7c8d8; font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; } #grid-cockpit #activity-x1 .gateix-auth-more { margin: 4px 2px; color: #e5aab6; font-size: 9px; } @media (max-width: 600px) { html[data-grid-theme] #grid-cockpit #activity-x1 > .panel-header { flex-wrap: wrap; height: 48px; min-height: 48px; } #grid-cockpit #activity-x1 > .panel-header h2 { flex: 0 0 100%; } #grid-cockpit #activity-x1 .gateix-auth-tabs { width: 100%; margin-left: 0; justify-content: space-between; } } /* Keep Activity readable when the dashboard columns become narrow. */ @media (max-width: 1599px) { #grid-cockpit .v3-center > #activity-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } #grid-cockpit #activity-row > #activity-panel { grid-column: 1 / -1; grid-row: 1; } #grid-cockpit #activity-row > .activity-placeholder { min-height: 56px; } #grid-cockpit #activity-row:has(#activity-panel[hidden]) > .activity-placeholder { grid-row: 1; } } /* VPN and Tray Plugin presence in the right activity column. */ #grid-cockpit #activity-x2 .x2-presence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 0; overflow: hidden; } #grid-cockpit #activity-x2 .x2-presence-column { min-width: 0; padding: 7px 5px; overflow: hidden; } #grid-cockpit #activity-x2 .x2-presence-column + .x2-presence-column { border-left: 1px solid #17566a; } #grid-cockpit #activity-x2 .x2-presence-heading { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding-bottom: 5px; border-bottom: 1px solid #164557; } #grid-cockpit #activity-x2 .x2-presence-heading h3 { min-width: 0; margin: 0; color: #71e9f8; font-size: 9px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #grid-cockpit #activity-x2 .x2-presence-heading strong { flex: none; color: #fff; font-size: 11px; } #grid-cockpit #activity-x2 .x2-presence-people { min-width: 0; } #grid-cockpit #activity-x2 .x2-presence-people p { margin: 7px 0; color: #a9bdca; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; } #grid-cockpit #activity-x2 .x2-presence-people .x2-presence-name { color: #e3f4ff; font-weight: 700; } /* Compact monitor stays inside the original activity card footprint. */ #grid-cockpit #activity-x2 { box-sizing: border-box; height: calc(clamp(210px, 36vh, 390px) + 35.7px); min-width: 0; min-height: 0; overflow: hidden; } @media (min-width: 1101px) { #grid-cockpit #activity-x2 { height: calc(clamp(210px, 33vh, 350px) + 35.7px); } } #grid-cockpit #activity-x2 > .panel-header { flex: none; min-width: 0; gap: 4px; } #grid-cockpit #activity-x2 > .panel-header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #grid-cockpit #activity-x2 #x2-auth-warning { color: #ffd34e; margin-left: 3px; } #grid-cockpit #activity-x2 #x2-refresh { flex: none; font-size: 8px; } #grid-cockpit #activity-x2 .x2-monitor { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 0; } #grid-cockpit #activity-x2 .x2-counters { display: flex; flex: none; justify-content: space-between; gap: 4px; min-width: 0; padding: 5px 6px; border-bottom: 1px solid #17566a; color: #8bf5ff; font-size: 9px; white-space: nowrap; } #grid-cockpit #activity-x2 .x2-counters strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #grid-cockpit #activity-x2 .x2-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #237b8a #091c27; } #grid-cockpit #activity-x2 .x2-scroll::-webkit-scrollbar { width: 5px; } #grid-cockpit #activity-x2 .x2-scroll::-webkit-scrollbar-thumb { background: #237b8a; border-radius: 5px; } #grid-cockpit #activity-x2 .x2-group { min-width: 0; padding: 5px 6px 6px; border-bottom: 1px solid #163d4e; } #grid-cockpit #activity-x2 .x2-group h3 { display: flex; justify-content: space-between; gap: 4px; margin: 0 0 3px; color: #35dfe6; font-size: 9px; letter-spacing: .06em; } #grid-cockpit #activity-x2 .x2-list { min-width: 0; } #grid-cockpit #activity-x2 .x2-list p { margin: 3px 0; color: #8da8ba; font-size: 9px; } #grid-cockpit #activity-x2 .x2-row { min-width: 0; border-radius: 3px; } #grid-cockpit #activity-x2 .x2-row-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; padding: 2px 1px; color: #dcefff; font-size: 9px; } #grid-cockpit #activity-x2 summary.x2-row-head { cursor: pointer; list-style: none; } #grid-cockpit #activity-x2 summary.x2-row-head::-webkit-details-marker { display: none; } #grid-cockpit #activity-x2 .x2-row-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #grid-cockpit #activity-x2 .x2-badge { flex: none; font-size: 8px; font-weight: 700; } #grid-cockpit #activity-x2 .x2-badge.is-online { color: #5cec9e; } #grid-cockpit #activity-x2 .x2-badge.is-offline { color: #ff7185; } #grid-cockpit #activity-x2 .x2-badge.is-stale, #grid-cockpit #activity-x2 .x2-badge.is-unknown { color: #91a1ae; } #grid-cockpit #activity-x2 .x2-row-details { padding: 2px 4px 5px; color: #9db9c5; font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; } #grid-cockpit #activity-x2 [data-server="photon"] .x2-row-name { color: #ff4fa3; } #grid-cockpit #activity-x2 [data-server="quantum"] .x2-row-name { color: #ad88ff; } #grid-cockpit #activity-x2 [data-server="neutron"] .x2-row-name { color: #35dfe6; } #grid-cockpit #activity-x2 .x2-auth h3 span { color: #ffd34e; } #grid-cockpit #activity-x2 .x2-auth-entry { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 0; font-size: 8px; } #grid-cockpit #activity-x2 .x2-auth-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #daeafa; } #grid-cockpit #activity-x2 .x2-ack { flex: none; padding: 1px 3px; border: 1px solid #d9b53d; border-radius: 3px; background: #382e13; color: #ffe27a; cursor: pointer; font-size: 8px; } #grid-cockpit #activity-x2 .x2-ack:focus-visible { outline: 2px solid #fff; } @media (max-width: 360px) { #grid-cockpit #activity-x2 .x2-counters { font-size: 8px; } } /* Match the MULTIVERSE lower edge on desktop; keep all feeds inside their cards. */ @media (min-width: 1600px) { #grid-cockpit .v3-center > #activity-row { grid-template-columns: minmax(0, calc(25% - var(--gap, 8px) / 2 + 57px)) minmax(0, calc(50% - var(--gap, 8px) - 114px)) minmax(0, calc(25% - var(--gap, 8px) / 2 + 57px)); height: var(--activity-target-height, 234px); min-height: 0; } #grid-cockpit #activity-row > .panel { height: 100%; min-height: 0; overflow: hidden; } } #grid-cockpit #activity-x1 .gateix-auth-list { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } #grid-cockpit #activity-x1 .gateix-auth-entry { gap: 3px; padding: 3px 2px; } #grid-cockpit #activity-x1 .gateix-auth-entry strong { flex: 1 1 auto; } #grid-cockpit #activity-x1 .gateix-auth-entry small { font-size: 8px; } #grid-cockpit #activity-x1 .gateix-auth-entry.is-stale small { color: #aab8c4; } #grid-cockpit #activity-x1 .gateix-auth-entry.is-denied small { color: #ff8799; } #grid-cockpit #activity-panel { display: flex; flex-direction: column; min-height: 0; } #grid-cockpit #activity-panel > .panel-header { flex: none; } #grid-cockpit #activity-panel > .activity-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } #grid-cockpit #activity-panel .activity-head { flex: none; } #grid-cockpit #activity-panel:not(.is-maximized) #activity-log { height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; } #grid-cockpit #activity-x2 { height: auto; } @media (max-width: 1599px) { #grid-cockpit #activity-x2 { height: calc(clamp(210px, 36vh, 390px) + 35.7px); } } @media (min-width: 1101px) and (max-width: 1599px) { #grid-cockpit #activity-x2 { height: calc(clamp(210px, 33vh, 350px) + 35.7px); } } #grid-cockpit #activity-x2 .x2-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; } #grid-cockpit #activity-x2 .x2-lane { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #237b8a #091c27; } #grid-cockpit #activity-x2 .x2-lane + .x2-lane { border-left: 1px solid #17566a; } #grid-cockpit #activity-x2 .x2-group { padding: 4px 4px 5px; } #grid-cockpit #activity-x2 .x2-row-head { gap: 3px; padding: 1px; } #grid-cockpit #activity-x2 .x2-auth h3 { flex-wrap: wrap; } #grid-cockpit .server-port { margin-left: 4px; color: #8ebdcc; font: inherit; white-space: nowrap; }