gandalf/secubox-openwrt
gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Improve SecuBox theming - dark mode default and hide LuCI tabs

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-01-09 15:52:38 +01:00
parent 29d5174dcb
commit 20619fd241
3 changed files with 65 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
luci-theme-secubox/htdocs/luci-static/resources/secubox-theme/system-hub/common.css
View File

@ -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,

23
package/secubox/luci-app-secubox-portal/htdocs/luci-static/resources/secubox-portal/header.js
View File

@ -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) {

46
package/secubox/luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css
View File

@ -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,