ChesterGoodiny/luci-theme-proton2025 v1.4.0

v1.4.0 Proton2025 - Elegant Theme for LuCI

on GitHub

Changes in version 1.4.0

Features

• Mobile navigation icons

  • Replaced platform-dependent Unicode menu and close glyphs with consistent inline SVG icons
  • The menu trigger now switches between hamburger and close states while preserving accessibility labels and touch target

• Mobile search layout

  • Added a stable 44px search target that remains available without opening the menu
  • The focused search field expands into a separate header row without covering the mobile menu button
  • Preserved keyboard navigation, Escape handling, result roles and focus behavior

• Wireless radio loading stability

  • Added an atomic pending/ready phase for wireless radio classification
  • Prevented intermediate colored radio areas from flashing while LuCI builds the table
  • Limited reclassification to mutations that add or remove the Wireless container, table or radio rows; image src updates and internal cell redraws no longer restart classification

• Selectable LuCI tab style

  • Added the modern / classic / proton tab style setting with modern as the default
  • Classic mode restores an underline-based LuCI tab appearance without changing navigation or page URLs
  • Proton mode restores the earlier Proton tab design from the upstream repository, including the shared bottom rule, rounded tab tops and accent-highlighted active tab
  • The selected style is also applied to the tabs inside the Proton theme settings panel
  • Persisted the choice through localStorage and UCI, including early bootstrap, login synchronization, reset-to-defaults and localization

• Desktop action dropdowns

  • Network-page action menus now open on hover for mouse/trackpad users while retaining click behavior on touch devices

• 5G modem widget update (PR #66 — author: @fildunsky)

  • Added support for a second modem when two modems are present in the system

Fixes

• Slower page loads

  • luci.js was fetched twice per page: the theme header emitted its own tag, and LuCI core appends another one — about 30 KB of redundant transfer on every navigation
  • The theme tag is now type="text/plain", so the browser neither downloads nor executes it, while LuCI.__init__ still reads ?v= from it
  • xhr.js is a 0-byte file in current LuCI builds and is no longer requested
  • login-animation-settings.js is now emitted only on System → Administration, the single page where its target block exists
  • inter-cyrillic-ext.woff2 is no longer preloaded: fetched lazily via unicode-range with font-display: swap only when needed
  • Result: 5 network requests / 26 from cache instead of 22 full downloads

• Floating notification drifting during page load

  • #maincontent has a fadeIn animation with a transform, which made it the containing block for position: fixed notifications
  • Server-rendered floating alerts are now emitted before #maincontainer, so they are positioned against the viewport and stay put from the first frame

• Mobile slide-out menu icons

  • Section icons were sized only in the desktop media query, so on phones the SVG expanded to its viewBox (347×347px) and broke the menu layout
  • Menu rows are now 54px tall with 20×20px icons, and the label sits next to the icon instead of below it

• Logout item in the collapsed side menu

  • The collapsed-rail margin shorthand reset margin-top: auto, so "Logout" jumped up under the last section instead of staying pinned to the bottom

• Text reflow while collapsing/expanding the side menu

  • Menu labels wrapped on every frame of the 72↔240px width animation
  • Labels are now single-line with ellipsis clipping

• Top menu flashing for a second on the first login

  • The menu layout was read only from localStorage, which a fresh browser does not have yet
  • header.ut now reads menu_mode/menu_collapsed from UCI over ubus server-side and embeds them into the pre-paint inline script
  • Result: 3 ms instead of 1261 ms, with no relocation afterwards

• Dark strip drawn over the page content during load in side-menu mode

  • The server renders #mainmenu empty inside the header, and menu-proton2025.js relocates it only after ui.menu.load() resolves
  • header.ut now relocates the column at parse time: an inline script moves #mainmenu while the HTML is still streaming
  • #maincontainer > #mainmenu:empty keeps the normal width so #maincontent never reflows when the items appear

• /admin/status/ rendered with unstyled tables

  • Both /admin/status/ and /admin/status/overview serve the same Overview view, but the theme derived the page identifier from ctx.request_path instead of ctx.path
  • header.ut now uses ctx.path for both the per-page <link> list and body[data-page]
  • Verified: /admin/status/, /admin/ and /admin/status/overview now all emit cascade-overview.css + cascade-status.css

• Login page in light theme

  • The password eye button rendered as a solid accent-filled circle with a glow
  • The accent gradient was painted twice (on body and again on the particles layer above it)
  • Raised contrast of the card, inputs and labels, replaced accent-tinted borders with neutral ones, and restored the card border on narrow screens

• Mobile login page (fixes #63)

  • Restored the rounded card corners and softened the shadow while keeping the glassmorphism effect

• Pending changes indicator (fixes #69)

  • Header indicators are now compact icon badges with a counter instead of long text labels
  • "Unsaved changes" indicator is no longer clipped

• Processes page table (fixes #73)

  • The Actions column with three long buttons no longer overflows the table: buttons wrap and use compact padding

• luci-app-filemanager dark mode (fixes #72)

  • Header and status bars in luci-app-filemanager now follow the Proton dark theme
  • Text boxes no longer render white text on a white background

• Port status card tooltip (fixes #30)

  • The interface tooltip on hover is now anchored inside the card and clamped to the viewport width, so it is no longer clipped

• Mobile text overflow (fixes #30)

  • Long values (versions, package names, MAC/IP addresses) now wrap instead of overflowing their cells on narrow screens

• Temperature graph (fixes #30)

  • Sensor labels with close temperatures no longer overlap each other

• Package Manager progress bar

  • The storage usage label no longer gets clipped on narrow bars: a short adaptive summary is shown, the full text stays in the tooltip

• Package Manager table header (fixes #6)

  • The title row now renders as one consistent header with a single font instead of inheriting per-column data-cell styles

• Chinese localization (fixes #6)

  • Completed the zh dictionary for the theme settings panel; all 9 locales now fully translated

• Dropdown corners (fixes #6)

  • select and .cbi-dropdown now use the theme radius variable, including the open list

• OpenClash dropdowns (refs #61)

  • Long option labels no longer overflow the dropdown: items wrap and the list width adapts

• Theme asset caching

  • Added a version query to theme CSS/JS and luci.js so browsers pick up updated files after a theme upgrade without a manual cache reset

• Tab strip baseline (PR #68 — author: @fildunsky)

  • Reduced the gap between tab baseline and page content from 24px to 12px so the line reads as the tabs' baseline

• Progress bar (PR #67 — author: @fildunsky)

  • Improved progress bar track tint for better visual consistency

Changed

• Swapped the CBI button styles: "Apply" is now the solid accent button, "Save" is neutral
• Increased the default page width from 990px to 1200px
• Redesigned the "Port status" cards on the Overview page (zone stripe, LED status indicator, compact traffic row)
• Reworked the theme settings panel into a tabbed card inside the LuCI section
• Removed the "Wrap table text" and "Modem temperature" options
• Separated notifications from dialogs: LuCI core reuses .alert-message inside modals (session expiry, Save & Apply, rollback), so those are no longer treated as floating notifications
• Alerts inside #modal_overlay no longer render their own card (background, blur, shadow) on top of the dialog
• displayStatus() modals lost the phantom 18px indent from the inherited flex layout and accent stripe
• Managed floating alerts drop the duplicate core "Dismiss" button and keep the compact close control
• Added styling for the core notice and error alert types and for .btn.primary in dialogs
• Empty <h4> headings in showModal('', '') dialogs no longer draw a bare divider line
• Inline system alerts now actually disappear when dismissed: the theme styled .fade-out so the core transitionend remover now fires
• Moved the theme's own toasts onto the shared floating notification surface
• Every migrated toast now carries a context heading (Login Page Animation for the animation switch, Custom login branding for the logo controls)
• The two "logo is too large" guards are now warning cards rather than looking like successful saves
• Notifications may opt into auto-closing with data-proton-timeout; auto-closed cards are not remembered in sessionStorage
• The keyboard shortcut echo in the log viewer keeps its own compact look but now reads its styling from the theme tokens instead of inline styles

Authors

• @ChesterGoodiny — mobile navigation, search layout, wireless radio stability, tab styles, desktop dropdowns, performance improvements, notification system, login page fixes, page width, settings panel rework
• @fildunsky — 5G modem widget update, tab baseline fix, progress bar tweak

Pull Requests

• #68 — Tabs: tighten the gap under tab strips
• #67 — Progress bar track tint
• #66 — 5G modem widget: support for second modem

Installation

One command over root SSH. The script detects the package manager
(apk or opkg), picks the matching asset from this release,
installs it and switches LuCI over to the theme.

wget -qO- https://raw.githubusercontent.com/ChesterGoodiny/luci-theme-proton2025/main/install.sh | sh

Removal

wget -qO- https://raw.githubusercontent.com/ChesterGoodiny/luci-theme-proton2025/main/uninstall.sh | sh

To install by hand, take the exact file name from the assets below:
.apk if command -v apk prints a path, .ipk otherwise.