/* Custom patch: hide the old overview/search area and keep compact status info in the top bar. Custom background is enabled; do not disable body::before. */ /* Hide the large dashboard overview cards area */ main .container.mx-auto.px-4.space-y-4 > .flex.flex-col.gap-4 { display: none !important; } /* Hide the search/filter toolbar block that was framed in the screenshot */ .ds-home-toolbar, .ds-home-toolbar-quad { display: none !important; } main.flex-1 { padding-top: 1rem !important; } nav .container { position: relative !important; } .knp-top-stats { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 34px); max-width: calc(100% - 420px); white-space: nowrap; overflow: visible; pointer-events: none; font-size: 12px !important; font-weight: 600; line-height: 1; color: #0c161a !important; opacity: .96; letter-spacing: .01em; } .knp-top-stats .knp-stat { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .knp-top-stats .knp-label, .knp-top-stats .knp-value { color: #0c161a !important; } .knp-top-stats .knp-label { font-weight: 600; opacity: .82; } .knp-top-stats .knp-value { font-weight: 700; } @media (max-width: 1100px) { .knp-top-stats { max-width: calc(100% - 300px); gap: 12px; font-size: 12px !important; } } @media (max-width: 860px) { .knp-top-stats { display: none; } } /* v10: keep the compact top status bar readable in dark mode. Only CSS is changed; no JS/DOM behavior is touched. */ html.dark .knp-top-stats, html.dark .knp-top-stats .knp-label, html.dark .knp-top-stats .knp-value, .dark .knp-top-stats, .dark .knp-top-stats .knp-label, .dark .knp-top-stats .knp-value, [data-theme="dark"] .knp-top-stats, [data-theme="dark"] .knp-top-stats .knp-label, [data-theme="dark"] .knp-top-stats .knp-value, [data-mode="dark"] .knp-top-stats, [data-mode="dark"] .knp-top-stats .knp-label, [data-mode="dark"] .knp-top-stats .knp-value { color: rgba(255, 255, 255, 0.88) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } html.dark .knp-top-stats .knp-label, .dark .knp-top-stats .knp-label, [data-theme="dark"] .knp-top-stats .knp-label, [data-mode="dark"] .knp-top-stats .knp-label { opacity: 0.78; } html.dark .knp-top-stats .knp-value, .dark .knp-top-stats .knp-value, [data-theme="dark"] .knp-top-stats .knp-value, [data-mode="dark"] .knp-top-stats .knp-value { opacity: 0.96; } /* v11: force compact top status text to a readable light color when the page is in dark appearance. Some deployments do not put the usual .dark class on , so JS also adds .knp-is-dark. */ html.knp-is-dark .knp-top-stats, html.knp-is-dark .knp-top-stats * , body.knp-is-dark .knp-top-stats, body.knp-is-dark .knp-top-stats * { color: rgba(248, 250, 252, 0.94) !important; -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important; opacity: 1 !important; } @media (prefers-color-scheme: dark) { .knp-top-stats, .knp-top-stats * { color: rgba(248, 250, 252, 0.94) !important; -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important; opacity: 1 !important; } } .ds-card2 { position: relative; } .knp-offline-time { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); z-index: 6; padding: 3px 8px; border-radius: 999px; font-size: 13px; line-height: 1.35; font-weight: 700; color: #0c161a; background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(4px); white-space: nowrap; pointer-events: none; } html.knp-is-dark .knp-offline-time, body.knp-is-dark .knp-offline-time, .dark .knp-offline-time { color: rgba(248, 250, 252, 0.94); background: rgba(15, 23, 42, 0.52); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65); } /* v14: dark mode dims the custom background image without disabling it. */ html.dark body[data-komari-custom-bg="1"]::after, .dark body[data-komari-custom-bg="1"]::after, html.knp-is-dark body[data-komari-custom-bg="1"]::after, body.knp-is-dark[data-komari-custom-bg="1"]::after, [data-theme="dark"] body[data-komari-custom-bg="1"]::after, [data-mode="dark"] body[data-komari-custom-bg="1"]::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(0, 0, 0, 0.48); } /* v14: mobile should not expose the table/list UI. */ @media (max-width: 768px) { .node-table-shell, .node-table-modern, table.node-table-modern, [class*="node-table"] { display: none !important; } .ds-home-toolbar-cell-view, .ds-home-toolbar-viewswitch-row { display: none !important; } } /* v16: compact one-line purchase amount, residual value and tags for each node card. */ .ds-card2 { min-height: 0 !important; padding-bottom: 10px !important; } .knp-card-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--ds-border, rgba(148, 163, 184, 0.22)); } .knp-card-extra-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; } .knp-card-extra-label { color: #d97706; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; } .knp-card-extra-value { min-width: 0; color: var(--ds-text, #0f172a); font-size: 10px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } .knp-card-extra-tags { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } .knp-card-tag { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-width: 0; height: 18px; padding: 0 8px; border-radius: 999px; color: #1d4ed8; background: rgba(37, 99, 235, 0.10); font-size: 10px; font-weight: 800; line-height: 18px; white-space: nowrap; } .knp-card-tag-more { color: #475569; background: rgba(148, 163, 184, 0.16); } html.knp-is-dark .knp-card-extra-label, body.knp-is-dark .knp-card-extra-label, .dark .knp-card-extra-label { color: #fbbf24; } html.knp-is-dark .knp-card-extra-value, body.knp-is-dark .knp-card-extra-value, .dark .knp-card-extra-value { color: rgba(248, 250, 252, 0.94); } html.knp-is-dark .knp-card-tag, body.knp-is-dark .knp-card-tag, .dark .knp-card-tag { color: #93c5fd; background: rgba(59, 130, 246, 0.18); } @media (max-width: 640px) { .knp-card-extra { gap: 6px 12px; } .knp-card-extra-value { font-size: 10px; } .knp-card-tag { height: 18px; padding: 0 7px; font-size: 10px; line-height: 18px; } } /* v18: compact multi-line latency trend under purchase/residual info. */ .knp-card-latency { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ds-border, rgba(148, 163, 184, 0.18)); } .knp-card-latency-chart { position: relative; height: 50px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.02)); cursor: crosshair; } .knp-card-latency-svg { display: block; width: 100%; height: 50px; } .knp-card-latency-hoverline { position: absolute; top: 6px; bottom: 6px; width: 1px; background: rgba(148, 163, 184, 0.40); transform: translateX(-0.5px); pointer-events: none; display: none; z-index: 2; } .knp-card-latency-tooltip { position: absolute; bottom: calc(100% + 6px); top: auto; left: 6px; z-index: 8; min-width: 104px; max-width: calc(100% - 12px); padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14); border: 1px solid rgba(226, 232, 240, 0.95); color: var(--ds-text, #0f172a); font-size: 10px; line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; } .knp-card-latency-tooltip.is-visible { opacity: 1; transform: translateY(0); } .knp-card-latency-tip-time { margin-bottom: 6px; font-size: 10px; font-weight: 800; line-height: 1.2; color: var(--ds-text, #0f172a); font-variant-numeric: tabular-nums; } .knp-card-latency-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .knp-card-latency-tip-row + .knp-card-latency-tip-row { margin-top: 4px; } .knp-card-latency-tip-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .knp-card-latency-tip-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; } .knp-card-latency-tip-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-muted, #64748b); font-size: 10px; font-weight: 700; line-height: 1.2; } .knp-card-latency-tip-value { color: var(--ds-text, #0f172a); font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; } html.knp-is-dark .knp-card-latency-tooltip, body.knp-is-dark .knp-card-latency-tooltip, .dark .knp-card-latency-tooltip { background: rgba(15, 23, 42, 0.95); border-color: rgba(51, 65, 85, 0.95); box-shadow: 0 10px 30px rgba(2, 6, 23, 0.36); color: rgba(248, 250, 252, 0.96); } html.knp-is-dark .knp-card-latency-tip-time, body.knp-is-dark .knp-card-latency-tip-time, .dark .knp-card-latency-tip-time, html.knp-is-dark .knp-card-latency-tip-value, body.knp-is-dark .knp-card-latency-tip-value, .dark .knp-card-latency-tip-value { color: rgba(248, 250, 252, 0.96); } html.knp-is-dark .knp-card-latency-tip-name, body.knp-is-dark .knp-card-latency-tip-name, .dark .knp-card-latency-tip-name { color: rgba(203, 213, 225, 0.82); } .knp-card-latency-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; } .knp-card-latency-legend-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; } .knp-card-latency-legend-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; } .knp-card-latency-legend-text { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-muted, #64748b); font-size: 9px; font-weight: 700; line-height: 1.15; } html.knp-is-dark .knp-card-latency-legend-text, body.knp-is-dark .knp-card-latency-legend-text, .dark .knp-card-latency-legend-text { color: rgba(203, 213, 225, 0.82); } .knp-card-latency-global-tooltip { position: fixed; top: 0; left: 0; z-index: 99999; min-width: 104px; max-width: min(280px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14); border: 1px solid rgba(226, 232, 240, 0.95); color: var(--ds-text, #0f172a); font-size: 10px; line-height: 1.35; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease; } .knp-card-latency-global-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } html.knp-is-dark .knp-card-latency-global-tooltip, body.knp-is-dark .knp-card-latency-global-tooltip, .dark .knp-card-latency-global-tooltip { background: rgba(15, 23, 42, 0.96); border-color: rgba(51, 65, 85, 0.95); box-shadow: 0 10px 30px rgba(2, 6, 23, 0.36); color: rgba(248, 250, 252, 0.96); } .knp-card-latency-legend-item { cursor: pointer; user-select: none; transition: opacity 0.15s ease, transform 0.15s ease; } .knp-card-latency-legend-item:hover { transform: translateY(-1px); } .knp-card-latency-legend-item.is-hidden { opacity: 0.45; } .knp-card-latency-legend-item.is-hidden .knp-card-latency-legend-dot { background: rgba(148, 163, 184, 0.6) !important; } .knp-card-latency-legend-item.is-hidden .knp-card-latency-legend-text { text-decoration: line-through; } /* v22: restore mobile card header and keep full machine names. - Mobile: keep the flag/name block visible. - PC/tablet: allow long machine names to display instead of clipping. */ .ds-card2 .ds-hdr2 { align-items: flex-start !important; gap: 8px !important; } .ds-card2 .ds-hdr2-left { min-width: 0 !important; flex: 1 1 auto !important; overflow: visible !important; } .ds-card2 .ds-hdr-name { display: inline !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.25 !important; } .ds-card2 .ds-hdr2-right { flex: 0 0 auto !important; }