From 5294d263757cd92b6744ad67a003ee0f06d48d9a Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Thu, 26 Mar 2026 07:29:55 +0100 Subject: [PATCH] fix(luci-theme-secubox): Add ucode templates for LuCI 24.10 compatibility - Add header.ut and footer.ut ucode templates (required by modern LuCI) - Remove old Lua templates (incompatible with OpenWrt 24.10) - Add mobile.css for responsive styling - Update UCI defaults to register theme in luci.themes section - Bump PKG_RELEASE to 3 The theme now properly loads via LuCI's theme system with: - CRT P31 phosphor green cascade.css - crt-engine.js for scanline effects - Proper ucode template integration Co-Authored-By: Claude Opus 4.5 --- package/secubox/luci-theme-secubox/Makefile | 8 +- .../htdocs/luci-static/secubox/mobile.css | 141 ++++++++++++++++++ .../etc/uci-defaults/90-luci-theme-secubox | 3 +- .../luci/template/themes/secubox/footer.ut | 20 +++ .../luci/template/themes/secubox/header.ut | 71 +++++++++ 5 files changed, 238 insertions(+), 5 deletions(-) create mode 100644 package/secubox/luci-theme-secubox/htdocs/luci-static/secubox/mobile.css create mode 100644 package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/footer.ut create mode 100644 package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/header.ut diff --git a/package/secubox/luci-theme-secubox/Makefile b/package/secubox/luci-theme-secubox/Makefile index 82f7bb69..59ec58bb 100644 --- a/package/secubox/luci-theme-secubox/Makefile +++ b/package/secubox/luci-theme-secubox/Makefile @@ -6,7 +6,7 @@ include $(TOPDIR)/rules.mk PKG_NAME:=luci-theme-secubox PKG_VERSION:=1.0.0 -PKG_RELEASE:=2 +PKG_RELEASE:=3 PKG_MAINTAINER:=Gerald KERMA PKG_LICENSE:=MIT @@ -26,9 +26,9 @@ define Package/luci-theme-secubox/install # KISS theme helper for individual modules $(INSTALL_DIR) $(1)/www/luci-static/resources/secubox $(CP) ./htdocs/luci-static/resources/secubox/* $(1)/www/luci-static/resources/secubox/ - # Lua view templates - $(INSTALL_DIR) $(1)/usr/lib/lua/luci/view/themes/secubox - $(CP) ./luasrc/luci/view/themes/secubox/* $(1)/usr/lib/lua/luci/view/themes/secubox/ + # Ucode templates (required for LuCI theme selection) + $(INSTALL_DIR) $(1)/usr/share/ucode/luci/template/themes/secubox + $(CP) ./ucode/luci/template/themes/secubox/*.ut $(1)/usr/share/ucode/luci/template/themes/secubox/ # UCI defaults $(INSTALL_DIR) $(1)/etc/uci-defaults $(INSTALL_BIN) ./root/etc/uci-defaults/90-luci-theme-secubox $(1)/etc/uci-defaults/ diff --git a/package/secubox/luci-theme-secubox/htdocs/luci-static/secubox/mobile.css b/package/secubox/luci-theme-secubox/htdocs/luci-static/secubox/mobile.css new file mode 100644 index 00000000..bccfc266 --- /dev/null +++ b/package/secubox/luci-theme-secubox/htdocs/luci-static/secubox/mobile.css @@ -0,0 +1,141 @@ +/* SecuBox CRT P31 Theme - Mobile Styles */ + +/* Mobile header */ +header h3 a, header .brand { + display: none !important; +} + +@media screen and (max-device-width: 600px) { + .modal { + margin: 1.5em auto; + } + + /* Table responsiveness */ + .table { + display: flex; + flex-direction: column; + width: 100%; + } + + .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; + border-top: 1px solid var(--p31-ghost); + margin: 0 -3px; + padding: 5px 0; + } + + .table .th, .table .td, .table .tr::before { + flex: 1 1 50%; + align-self: flex-start; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + display: inline-block; + border-top: none; + box-sizing: border-box; + padding: 3px; + } + + /* Column sizing */ + .col-1 { flex: 1 1 30px !important; } + .col-2 { flex: 2 2 60px !important; } + .col-3 { flex: 3 3 90px !important; } + .col-4 { flex: 4 4 120px !important; } + .col-5 { flex: 5 5 150px !important; } + .col-6 { flex: 6 6 180px !important; } + + /* Form controls */ + input, textarea, select, .cbi-dropdown > ul > li { + font-size: 16px !important; + height: auto; + } + + select, input[type="text"], input[type="password"] { + width: 100%; + height: 30px; + } + + /* Buttons */ + button, .btn, .cbi-button { + font-size: 14px !important; + padding: 0 8px; + } + + /* Hide elements */ + .hide-sm, .hide-xs { + display: none !important; + } + + /* CBI values */ + .cbi-value { + padding-bottom: .5em; + border-bottom: 1px solid var(--p31-ghost); + margin-bottom: .5em; + display: block; + align-items: baseline; + } + + .cbi-value label.cbi-value-title { + font-weight: 700; + } + + .cbi-value-field, .cbi-select, .cbi-dynlist { + width: 100%; + margin: 0; + } + + /* Header nav */ + header > .fill > .container { + display: flex; + flex-direction: row; + } + + header .nav { + flex: 3 3 80%; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin: 2px 5px 2px 0; + } + + header .nav a { + padding: 2px 6px; + } + + header .pull-right { + flex: 0 1 20%; + display: flex; + flex-direction: column; + justify-content: space-around; + margin: .2em 5px .2em auto; + padding: 0; + } + + /* Table titles */ + .tr.table-titles, .cbi-section-table-titles, .cbi-section-table-descr { + display: none; + } +} + +@media screen and (max-device-width: 375px) { + .cbi-page-actions { + display: flex; + justify-content: space-between; + margin: 0 -1px; + padding: 0; + } + + .cbi-page-actions button { + overflow: hidden; + text-overflow: ellipsis; + } + + .cbi-page-actions .cbi-button { + flex: 1; + line-height: 2em; + margin: 1px !important; + } +} diff --git a/package/secubox/luci-theme-secubox/root/etc/uci-defaults/90-luci-theme-secubox b/package/secubox/luci-theme-secubox/root/etc/uci-defaults/90-luci-theme-secubox index b68a55e8..1d9f6d7b 100755 --- a/package/secubox/luci-theme-secubox/root/etc/uci-defaults/90-luci-theme-secubox +++ b/package/secubox/luci-theme-secubox/root/etc/uci-defaults/90-luci-theme-secubox @@ -1,8 +1,9 @@ #!/bin/sh # SecuBox CRT P31 Theme - UCI Defaults -# Set SecuBox theme as default LuCI theme +# Register and set SecuBox theme as default LuCI theme uci -q batch <<-EOF + set luci.themes.SecuBox='/luci-static/secubox' set luci.main.mediaurlbase='/luci-static/secubox' commit luci EOF diff --git a/package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/footer.ut b/package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/footer.ut new file mode 100644 index 00000000..f22eb145 --- /dev/null +++ b/package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/footer.ut @@ -0,0 +1,20 @@ + {% if (!blank_page): %} + + + + {% endif %} + + diff --git a/package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/header.ut b/package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/header.ut new file mode 100644 index 00000000..4b253eab --- /dev/null +++ b/package/secubox/luci-theme-secubox/ucode/luci/template/themes/secubox/header.ut @@ -0,0 +1,71 @@ +{# + SecuBox CRT P31 Phosphor Theme - Header Template + CyberMind - SecuBox - 2026 + Licensed under MIT +-#} + +{% + import { getuid, getspnam } from 'luci.core'; + + const boardinfo = ubus.call('system', 'board'); + + http.prepare_content('text/html; charset=UTF-8'); +-%} + + + + + + {{ striptags(`${boardinfo.hostname ?? '?'}${node ? ` - ${node.title}` : ''}`) }} - SecuBox + + + + {% if (node?.css): %} + + {% endif %} + {% if (css): %} + + {% endif %} + + + + + + + {% if (!blank_page): %} +
+ {{ striptags(boardinfo.hostname ?? '?') }} + +
+
+ +
+ {% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %} +
+

{{ _('No password set!') }}

+

{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}

+ {% if (dispatcher.lookup("admin/system/admin")): %} +
{{ _('Go to password configuration...') }}
+ {% endif %} +
+ {% endif %} + + {% if (boardinfo.rootfs_type == "initramfs"): %} +
+

{{ _('System running in recovery (initramfs) mode.') }}

+

{{ _('No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade') }}

+ {% if (dispatcher.lookup("admin/system/flash")): %} +
{{ _('Go to firmware upgrade...') }}
+ {% endif %} +
+ {% endif %} + + + + + {% endif %}