/** * VIP ProxyGuard — single-row live status strip (fixed height, no layout jump). */ :root { --dgs-strip-h: 52px; --dgs-topnav-h: 52px; } html.dgs-has-live-strip #dgs-live-strip, body.dgs-has-live-strip #dgs-live-strip { display: flex; } #dgs-live-strip { display: flex; position: fixed; top: 70px; left: 0; right: 0; z-index: 1000; height: var(--dgs-strip-h); max-height: var(--dgs-strip-h); overflow: hidden; background: var(--dgs-strip-bg, linear-gradient(90deg, rgba(10, 14, 24, 0.99), rgba(14, 20, 34, 0.99))); border-bottom: 1px solid var(--dgs-strip-border, rgba(96, 165, 250, 0.22)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } @media (min-width: 992px) { #dgs-live-strip { left: 250px; } body.vertical-collpsed #dgs-live-strip { left: 70px; } } html.dgs-has-live-strip #layout-wrapper.dgs-app .dgs-topnav, body.dgs-has-live-strip #layout-wrapper.dgs-app .dgs-topnav { top: calc(70px + var(--dgs-strip-h)) !important; z-index: 1002; } /* Fallback if an older script moved topnav onto */ body.dgs-has-live-strip > nav.dgs-topnav { position: fixed; left: 0; right: 0; top: calc(70px + var(--dgs-strip-h)) !important; z-index: 1002; margin: 0; padding: 0 0.5rem; background: var(--dgs-topnav-bg, linear-gradient(90deg, rgba(18, 24, 38, 0.99), rgba(15, 20, 32, 0.99))); border-bottom: 1px solid var(--dgs-p-border, rgba(148, 163, 184, 0.12)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } @media (min-width: 992px) { body.dgs-has-live-strip > nav.dgs-topnav { left: 250px; } body.vertical-collpsed.dgs-has-live-strip > nav.dgs-topnav { left: 70px; } } html.dgs-has-live-strip.dgs-premium #layout-wrapper.dgs-app .main-content .page-content, body.dgs-has-live-strip.dgs-premium #layout-wrapper.dgs-app .main-content .page-content { padding-top: calc(1.25rem + var(--dgs-topbar-h, 70px) + var(--dgs-strip-h, 52px) + var(--dgs-topnav-h, 52px)) !important; } .dgs-live-strip-inner { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 100%; padding: 0 0.65rem; overflow: hidden; } .dgs-live-strip-scroll { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; height: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-gutter: stable; } .dgs-live-strip-scroll::-webkit-scrollbar { height: 4px; } .dgs-live-strip-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 4px; } .dgs-live-strip-clock { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(8, 12, 20, 0.6); white-space: nowrap; } .dgs-live-clock-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; color: #64748b; } .dgs-live-clock-val { font-size: 0.68rem; font-weight: 700; color: #f8fafc; font-variant-numeric: tabular-nums; margin-right: 0.2rem; } .dgs-live-chip { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; padding: 0.28rem 0.58rem; border-radius: 999px; border: 1px solid var(--dgs-strip-chip-border, rgba(148, 163, 184, 0.22)); background: var(--dgs-strip-chip-bg, rgba(22, 30, 48, 0.92)); color: var(--dgs-strip-chip-text, #b8c5d6); font-size: 0.72rem; line-height: 1.2; white-space: nowrap; cursor: pointer; font: inherit; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .dgs-live-chip:hover { border-color: rgba(96, 165, 250, 0.6); background: rgba(36, 50, 78, 0.95); box-shadow: 0 0 12px rgba(59, 130, 246, 0.2); } .dgs-live-chip:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.8); outline-offset: 2px; } .dgs-live-chip i { font-size: 0.9rem; color: #93c5fd; } .dgs-live-label { font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.58rem; color: #94a3b8; } .dgs-live-val { color: #ffffff; font-weight: 700; font-size: 0.78rem; font-variant-numeric: tabular-nums; } .dgs-live-chip-live { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.1); } .dgs-live-chip-live .dgs-live-val { color: #6ee7b7; } .dgs-live-chip-net-out { border-color: rgba(52, 211, 153, 0.45); background: rgba(16, 185, 129, 0.12); } .dgs-live-chip-net-out i { color: #34d399; } .dgs-live-chip-net-out .dgs-live-val { color: #a7f3d0; } .dgs-live-chip-net-in { border-color: rgba(96, 165, 250, 0.45); background: rgba(59, 130, 246, 0.12); } .dgs-live-chip-net-in i { color: #60a5fa; } .dgs-live-chip-net-in .dgs-live-val { color: #bfdbfe; } .dgs-live-chip-alert { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.12); } .dgs-live-chip-alert.is-warn { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.12); } .dgs-live-chip-alert.is-critical { border-color: rgba(244, 63, 94, 0.5); background: rgba(244, 63, 94, 0.14); } .dgs-live-chip.is-hot { border-color: rgba(245, 158, 11, 0.5); } .dgs-live-chip.is-hot .dgs-live-val { color: #fcd34d; } .dgs-live-chip.is-danger-hot { border-color: rgba(244, 63, 94, 0.5); } .dgs-live-chip.is-danger-hot .dgs-live-val { color: #fda4af; } #dgsStripDetailModal .table td { padding: 0.35rem 0; vertical-align: top; } #dgsStripDetailModal .table td:first-child { color: #94a3b8; width: 42%; padding-right: 0.75rem; } #dgsStripDetailModal .table td:last-child { color: #f8fafc; font-weight: 600; word-break: break-word; } @media (max-width: 991px) { #dgs-live-strip { left: 0 !important; } .dgs-live-strip-inner { padding: 0 0.45rem; } .dgs-live-strip-clock { display: none; } }