From 20619fd24103c2c1d37b03126c654904894929b4 Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Fri, 9 Jan 2026 15:52:38 +0100 Subject: [PATCH] fix: Improve SecuBox theming - dark mode default and hide LuCI tabs - Change CSS default from light to dark mode in :root selector (System Hub common.css in both theme and app) - Add CSS rules to hide LuCI view tabs (.cbi-tabmenu, ul.tabs, etc.) when in SecuBox mode - Update hideOpenWrtUI() to also hide view tabs via JavaScript This ensures consistent dark theme styling without depending on data-secubox-theme attribute timing, and hides LuCI's native navigation tabs when displaying SecuBox header. Co-Authored-By: Claude Opus 4.5 --- .../secubox-theme/system-hub/common.css | 46 +++++++++---------- .../resources/secubox-portal/header.js | 23 +++++++++- .../resources/system-hub/common.css | 46 +++++++++---------- 3 files changed, 65 insertions(+), 50 deletions(-) diff --git a/luci-theme-secubox/htdocs/luci-static/resources/secubox-theme/system-hub/common.css b/luci-theme-secubox/htdocs/luci-static/resources/secubox-theme/system-hub/common.css index 1eb5a8b0..5354a4e3 100644 --- a/luci-theme-secubox/htdocs/luci-static/resources/secubox-theme/system-hub/common.css +++ b/luci-theme-secubox/htdocs/luci-static/resources/secubox-theme/system-hub/common.css @@ -7,30 +7,9 @@ /* === Import Fonts === */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); -/* === Variables (Demo-inspired Dark Mode) === */ -:root, -[data-secubox-theme="light"] { - /* Light Mode (less used) */ - --sh-text-primary: #0f172a; - --sh-text-secondary: #475569; - --sh-bg-primary: #ffffff; - --sh-bg-secondary: #f8fafc; - --sh-bg-tertiary: #f1f5f9; - --sh-bg-card: #ffffff; - --sh-border: #e2e8f0; - --sh-hover-bg: #f8fafc; - --sh-hover-shadow: rgba(0, 0, 0, 0.1); - --sh-primary: #6366f1; - --sh-primary-end: #8b5cf6; - --sh-shadow: rgba(0, 0, 0, 0.08); - --sh-success: #22c55e; - --sh-danger: #ef4444; - --sh-warning: #f59e0b; -} - -[data-theme="dark"], -[data-secubox-theme="dark"] { - /* Demo-inspired Dark Palette */ +/* === Variables (Demo-inspired Dark Mode - Default) === */ +:root { + /* Dark Mode as default for SecuBox */ --sh-text-primary: #fafafa; --sh-text-secondary: #a0a0b0; --sh-bg-primary: #0a0a0f; @@ -48,6 +27,25 @@ --sh-warning: #f59e0b; } +[data-secubox-theme="light"] { + /* Light Mode (optional override) */ + --sh-text-primary: #0f172a; + --sh-text-secondary: #475569; + --sh-bg-primary: #ffffff; + --sh-bg-secondary: #f8fafc; + --sh-bg-tertiary: #f1f5f9; + --sh-bg-card: #ffffff; + --sh-border: #e2e8f0; + --sh-hover-bg: #f8fafc; + --sh-hover-shadow: rgba(0, 0, 0, 0.1); + --sh-primary: #6366f1; + --sh-primary-end: #8b5cf6; + --sh-shadow: rgba(0, 0, 0, 0.08); + --sh-success: #22c55e; + --sh-danger: #ef4444; + --sh-warning: #f59e0b; +} + /* === Global Typography === */ body, .system-hub-dashboard, diff --git a/package/secubox/luci-app-secubox-portal/htdocs/luci-static/resources/secubox-portal/header.js b/package/secubox/luci-app-secubox-portal/htdocs/luci-static/resources/secubox-portal/header.js index 8b78a8f0..fca7537f 100644 --- a/package/secubox/luci-app-secubox-portal/htdocs/luci-static/resources/secubox-portal/header.js +++ b/package/secubox/luci-app-secubox-portal/htdocs/luci-static/resources/secubox-portal/header.js @@ -61,6 +61,24 @@ body.secubox-mode .breadcrumb { display: none !important; } +/* Hide LuCI view tabs / submenu tabs */ +body.secubox-mode .cbi-tabmenu, +body.secubox-mode ul.tabs, +body.secubox-mode .tabs, +body.secubox-mode ul.cbi-tabmenu, +body.secubox-mode .view-tabs, +body.secubox-mode #viewtabs, +body.secubox-mode .cbi-section-node > ul:first-child, +.cbi-tabmenu:has(~ .secubox-page-wrapper), +ul.tabs:has(~ .secubox-page-wrapper), +#maincontent > ul.tabs, +#maincontent > .cbi-tabmenu, +.container > ul.tabs, +.main-right > ul.tabs:first-child, +.main-right > .cbi-tabmenu:first-child { + display: none !important; +} + /* SecuBox Header Styles */ .sb-global-header { display: flex; @@ -223,11 +241,12 @@ function injectCSS() { function hideOpenWrtUI() { document.body.classList.add('secubox-mode'); - // Direct element hiding for immediate effect - hide ALL headers and nav + // Direct element hiding for immediate effect - hide ALL headers, nav, and tabs var selectors = [ 'header', '.main-header', '#mainmenu', '.main-left', 'nav[role="navigation"]', '#navigation', '.luci-sidebar', 'aside', '#header', - '.brand', 'header.brand', 'div.brand', '.header-brand' + '.brand', 'header.brand', 'div.brand', '.header-brand', + '.cbi-tabmenu', 'ul.tabs', '.tabs', '#viewtabs', '.view-tabs' ]; selectors.forEach(function(sel) { document.querySelectorAll(sel).forEach(function(el) { diff --git a/package/secubox/luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css b/package/secubox/luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css index 1eb5a8b0..5354a4e3 100644 --- a/package/secubox/luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css +++ b/package/secubox/luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css @@ -7,30 +7,9 @@ /* === Import Fonts === */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); -/* === Variables (Demo-inspired Dark Mode) === */ -:root, -[data-secubox-theme="light"] { - /* Light Mode (less used) */ - --sh-text-primary: #0f172a; - --sh-text-secondary: #475569; - --sh-bg-primary: #ffffff; - --sh-bg-secondary: #f8fafc; - --sh-bg-tertiary: #f1f5f9; - --sh-bg-card: #ffffff; - --sh-border: #e2e8f0; - --sh-hover-bg: #f8fafc; - --sh-hover-shadow: rgba(0, 0, 0, 0.1); - --sh-primary: #6366f1; - --sh-primary-end: #8b5cf6; - --sh-shadow: rgba(0, 0, 0, 0.08); - --sh-success: #22c55e; - --sh-danger: #ef4444; - --sh-warning: #f59e0b; -} - -[data-theme="dark"], -[data-secubox-theme="dark"] { - /* Demo-inspired Dark Palette */ +/* === Variables (Demo-inspired Dark Mode - Default) === */ +:root { + /* Dark Mode as default for SecuBox */ --sh-text-primary: #fafafa; --sh-text-secondary: #a0a0b0; --sh-bg-primary: #0a0a0f; @@ -48,6 +27,25 @@ --sh-warning: #f59e0b; } +[data-secubox-theme="light"] { + /* Light Mode (optional override) */ + --sh-text-primary: #0f172a; + --sh-text-secondary: #475569; + --sh-bg-primary: #ffffff; + --sh-bg-secondary: #f8fafc; + --sh-bg-tertiary: #f1f5f9; + --sh-bg-card: #ffffff; + --sh-border: #e2e8f0; + --sh-hover-bg: #f8fafc; + --sh-hover-shadow: rgba(0, 0, 0, 0.1); + --sh-primary: #6366f1; + --sh-primary-end: #8b5cf6; + --sh-shadow: rgba(0, 0, 0, 0.08); + --sh-success: #22c55e; + --sh-danger: #ef4444; + --sh-warning: #f59e0b; +} + /* === Global Typography === */ body, .system-hub-dashboard,