Network Modes 0.5.0-1
This commit is contained in:
parent
8c27583eba
commit
4b16b93c9c
@ -17,6 +17,7 @@
|
||||
- Preparing follow-up refactor to deduplicate Theme initialization logic.
|
||||
- Evaluating automated deployment pipeline (rsync/scp wrappers) for `secubox-tools`.
|
||||
- Enhancing SecuBox theme guidelines (see `.codex/THEME_CONTEXT.md`) to capture layout, state, and localization best practices before next UI sprint.
|
||||
- Next TODO in focus: extract shared nav/header components into `secubox/components/` and document typings per `.codex/TODO.md` item #1.
|
||||
|
||||
## Reminders
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
include $(TOPDIR)/rules.mk
|
||||
|
||||
PKG_NAME:=luci-app-network-modes
|
||||
PKG_VERSION:=0.4.6
|
||||
PKG_RELEASE:=3
|
||||
PKG_VERSION:=0.5.0
|
||||
PKG_RELEASE:=1
|
||||
|
||||
PKG_LICENSE:=Apache-2.0
|
||||
PKG_MAINTAINER:=CyberMind <contact@cybermind.fr>
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* === Design System Variables === */
|
||||
:root {
|
||||
:root,
|
||||
[data-secubox-theme="light"] {
|
||||
/* Light Mode */
|
||||
--sh-text-primary: #0f172a;
|
||||
--sh-text-secondary: #475569;
|
||||
@ -29,7 +30,9 @@
|
||||
--sh-info: #3b82f6;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme="dark"],
|
||||
[data-secubox-theme="dark"],
|
||||
[data-secubox-theme="cyberpunk"] {
|
||||
/* Dark Mode (Demo-inspired) */
|
||||
--sh-text-primary: #fafafa;
|
||||
--sh-text-secondary: #a0a0b0;
|
||||
@ -277,6 +280,13 @@ pre {
|
||||
background: var(--sh-hover-bg);
|
||||
}
|
||||
|
||||
body[data-page^="admin-secubox-network-modes"] .tabs,
|
||||
body[data-page^="admin-secubox-network-modes"] #tabmenu,
|
||||
body[data-page^="admin-secubox-network-modes"] .cbi-tabmenu,
|
||||
body[data-page^="admin-secubox-network-modes"] .nav-tabs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sh-nav-tab.active {
|
||||
color: var(--sh-primary);
|
||||
background: var(--sh-bg-card);
|
||||
@ -506,4 +516,3 @@ pre {
|
||||
border-color: rgba(245, 158, 11, 0.45);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
/* Copyright (C) 2024 CyberMind.fr - Gandalf * Version: 0.3.0
|
||||
*/
|
||||
|
||||
:root {
|
||||
:root,
|
||||
[data-secubox-theme="dark"],
|
||||
[data-secubox-theme="cyberpunk"],
|
||||
[data-theme="dark"] {
|
||||
--nm-bg-primary: #0c0a09;
|
||||
--nm-bg-secondary: #1c1917;
|
||||
--nm-bg-tertiary: #292524;
|
||||
@ -37,6 +40,23 @@
|
||||
--nm-shadow-glow: 0 0 30px rgba(249, 115, 22, 0.3);
|
||||
}
|
||||
|
||||
[data-secubox-theme="light"],
|
||||
[data-theme="light"] {
|
||||
--nm-bg-primary: #f5f3ff;
|
||||
--nm-bg-secondary: #ffffff;
|
||||
--nm-bg-tertiary: #eef2ff;
|
||||
--nm-border: #e5e7eb;
|
||||
--nm-border-light: #d1d5db;
|
||||
|
||||
--nm-text-primary: #0f172a;
|
||||
--nm-text-secondary: #475569;
|
||||
--nm-text-muted: #94a3b8;
|
||||
|
||||
--nm-mode-gradient: linear-gradient(135deg,#4f46e5,#7c3aed);
|
||||
--nm-shadow: 0 12px 25px rgba(79,70,229,0.15);
|
||||
--nm-shadow-glow: 0 0 30px rgba(79,70,229,0.25);
|
||||
}
|
||||
|
||||
/* Base */
|
||||
.network-modes-dashboard {
|
||||
font-family: var(--nm-font-sans);
|
||||
|
||||
@ -135,7 +135,26 @@ function createStepper(steps, active) {
|
||||
}));
|
||||
}
|
||||
|
||||
function ensureLuCITabsHidden() {
|
||||
if (typeof document === 'undefined')
|
||||
return;
|
||||
if (document.getElementById('network-modes-tabstyle'))
|
||||
return;
|
||||
var style = document.createElement('style');
|
||||
style.id = 'network-modes-tabstyle';
|
||||
style.textContent = `
|
||||
body[data-page^="admin-secubox-network-modes"] .tabs,
|
||||
body[data-page^="admin-secubox-network-modes"] #tabmenu,
|
||||
body[data-page^="admin-secubox-network-modes"] .cbi-tabmenu,
|
||||
body[data-page^="admin-secubox-network-modes"] .nav-tabs {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
||||
document.head && document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function createNavigationTabs(activeId) {
|
||||
ensureLuCITabsHidden();
|
||||
return E('div', { 'class': 'sh-nav-tabs network-modes-nav-tabs' },
|
||||
NAV_BLUEPRINT.map(function(item) {
|
||||
return E('a', {
|
||||
|
||||
@ -131,6 +131,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard accesspoint-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('accesspoint'),
|
||||
hero,
|
||||
|
||||
@ -24,6 +24,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard doublenat-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('doublenat'),
|
||||
helpers.createHero({
|
||||
|
||||
@ -29,6 +29,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard multiwan-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('multiwan'),
|
||||
helpers.createHero({
|
||||
|
||||
@ -100,6 +100,7 @@ return view.extend({
|
||||
var view = E('div', { 'class': 'network-modes-dashboard' }, [
|
||||
// Load global theme CSS
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/help.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('overview'),
|
||||
|
||||
@ -164,6 +164,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard relay-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('relay'),
|
||||
hero,
|
||||
|
||||
@ -233,6 +233,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard router-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('router'),
|
||||
hero,
|
||||
|
||||
@ -250,6 +250,7 @@ return view.extend({
|
||||
return m.render().then(function(formEl) {
|
||||
return E('div', { 'class': 'network-modes-dashboard nm-settings' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('settings'),
|
||||
formEl
|
||||
|
||||
@ -97,6 +97,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard sniffer-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('sniffer'),
|
||||
hero,
|
||||
|
||||
@ -125,6 +125,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard travel-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('travel'),
|
||||
hero,
|
||||
|
||||
@ -24,6 +24,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard vpnrelay-mode' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('vpnrelay'),
|
||||
helpers.createHero({
|
||||
|
||||
@ -95,6 +95,7 @@ return view.extend({
|
||||
|
||||
var container = E('div', { 'class': 'network-modes-dashboard nm-wizard' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
|
||||
helpers.createNavigationTabs('wizard'),
|
||||
hero,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user