/* 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: hidden; 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; } }