/* =========================================================== darkmode.css — FusionHub WebAdmin Dark Mode (built from scratch) Activated via , toggled by darkmode.js =========================================================== */ html.dark_mode { /* Partial invert (90% instead of 100%) turns white -> dark grey (~#1a1a1a) and black -> soft grey (~#2e2e2e) instead of pure black/white, matching the muted "grey dark mode" look used by most sites, rather than a harsh true-black/white negative. */ filter: invert(90%) hue-rotate(180deg); background-color: #fff; } /* Elements that are already dark-themed by design (black top bar, logos, icons, images, video) get a second, matching partial invert so they land on the SAME dark-grey palette as the rest of the page instead of staying pure black — keeps the whole UI visually consistent as one grey theme (this also means these elements are no longer pixel-perfect restorations of their original colors, only a close, slightly-softened grey/light-grey match, which is the intended trade-off for a uniform grey theme). */ html.dark_mode .top_menu_panel, html.dark_mode .top_module_panel, html.dark_mode .top_vrf_panel, html.dark_mode .mobile_top_menu, html.dark_mode .mobile_menu_panel, html.dark_mode .mobile_bottom_menu, html.dark_mode .bug20295, html.dark_mode img, html.dark_mode svg, html.dark_mode video, html.dark_mode canvas, html.dark_mode iframe, html.dark_mode embed, html.dark_mode object { filter: invert(90%) hue-rotate(180deg); } /* Scrollbar tuning so it matches the inverted (now dark) page instead of rendering as a jarring double-inverted light bar. */ html.dark_mode { scrollbar-color: #555 #1b1b1b; } html.dark_mode ::-webkit-scrollbar { background-color: #1b1b1b; } html.dark_mode ::-webkit-scrollbar-thumb { background-color: #555; } /* =========================================================== Dark Mode toggle button — fixed top-right, always visible, positioned below the always-on-top device-name badge (.bug20295, which sits at top:0/right:20px) so the two never overlap regardless of viewport size or device name length. =========================================================== */ #dm_toggle_btn { position: fixed; top: 32px; right: 14px; z-index: 10001; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background-color: rgba(35, 35, 40, 0.92); color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; cursor: pointer; user-select: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } #dm_toggle_btn:hover { background-color: rgba(60, 60, 68, 0.96); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); } #dm_toggle_btn:active { transform: translateY(1px); } #dm_toggle_btn .dm_dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background-color: #FFB81C; box-shadow: 0 0 4px rgba(255, 184, 28, 0.8); transition: background-color 0.15s ease, box-shadow 0.15s ease; flex: none; } #dm_toggle_btn.dm_is_dark .dm_dot { background-color: #64DD17; box-shadow: 0 0 4px rgba(100, 221, 23, 0.8); } /* On very small (mobile) widths, drop below the mobile hamburger row instead of sitting on top of it. */ @media only screen and (max-width: 480px) { #dm_toggle_btn { top: auto; bottom: 14px; right: 14px; } }