Commit Graph

200 Commits

Author SHA1 Message Date
Joshua Criss 6006b34085 luci-theme-bootstrap: fix header .pull-right
Noticed the indicators behaving a little odd
on mobile, and realised one flex element in
the mobile.css was the cause. Removing
the flex entry did not cause any further
issue, and fixed the indicator misbehaviour.

Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
2026-04-11 09:35:01 +03:00
Han Yiming 4a308bab37 luci-base: add authentication plugin mechanism
This commit introduces a generic authentication plugin mechanism
to the LuCI dispatcher, enabling multi-factor authentication
(MFA/2FA) and other custom verification methods without
modifying core files.

This implementation integrates with the new plugin UI architecture
introduced in commit 617f364 (luci-mod-system: implement plugin UI
architecture), allowing authentication plugins to be managed
through the unified System > Plugins interface.

Signed-off-by: Han Yiming <moebest@outlook.jp>
2026-04-09 14:26:09 +02:00
Joshua Criss 9cccae92ee luci-theme-bootstrap: update -webkit-appearance
Compliment '-webkit-appearance'
with 'appearance', as it is
non-standard and has since
been succeeded by 'appearance',
accepted by all baseline browsers.

Future consideration to then
remove '-webkit-appearance'.

Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
2026-04-04 16:23:59 +02:00
Joshua Criss 9e4058cdca luci-theme-bootstrap: refining hide/show buttons
Change mouse icon from text cursor to pointer.
Smaller buttons on larger screens.
Slightly fade "show" button.
Remove fade when hovered.

Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
2026-04-02 16:11:18 +02:00
Joshua Criss ec33f41105 luci-theme-bootstrap: match footer with header
Match footer with header
padding left and right so they are
aligned (header uses 1180px,
but footer was using 940px).

Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
2026-04-02 16:09:00 +02:00
Self-Hosting-Group e81c0637e2 luci-theme: remove LuCI from title, material changes
- Remove `| LuCI` suffix from title tag
- Make material theme zoomable and remove legacy meta tags
- Unify viewport

Link: #8330
Signed-off-by: Self-Hosting-Group <selfhostinggroup-git+openwrt@shost.ing>
2026-03-02 19:14:01 +01:00
Paul Donald ce358ad411 luci-theme: html title: swap hostname <-> page title
hostname first to differentiate units from at-a-glance
browser tab view.

follow-up to 18d14980dd

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2026-02-09 22:14:59 +01:00
Paul Donald 18d14980dd luci-theme: html title: swap hostname <-> page title
hostname first to differentiate units from at-a-glance
browser tab view.

Closes #8308

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2026-02-09 18:08:38 +01:00
Paul Donald 94da6ead86 luci-base: restore titles class
follow-up to 720c96ce5b

While ::before CSS styling has been deactivated, and
'content' removed, cbi-value-first-field is a bit
ambiguous. So, restore cbi-section-table-titles, and
replace the ::before tags in CSS.

Remove also the data-title for title rows. We already
insert titles for named headers and rows via HTML and
not via CSS after the mentioned commit.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2026-02-02 18:22:15 +01:00
Ramon Van Gorkom 720c96ce5b luci-base: make some tables better searchable
This changes the "name" in specific tables from being painted to
being rendered. This allows the use of "ctrl-f" in browsers to e.g.
search for firewall rule names.

Closes https://github.com/openwrt/luci/issues/7708
Signed-off-by: Ramon Van Gorkom <Ramon00c00@gmail.com>
Link: https://github.com/openwrt/luci/pull/8191
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2026-01-23 04:10:13 +01:00
Paul Donald 9fe1334fd5 luci-theme: fix theme header title
dispatched.title is sometimes null, especially where menu JSON
does not declare a title for a page.

Also, while we're here, wrap these in i18n tags, since the
JSON titles are often translated (they're included in po matter).

Closes #8222

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2026-01-21 22:39:04 +01:00
Paul Donald 7f0c172ee1 luci-theme: alignment fixes
These help to align read-only items with their title elements.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2026-01-18 18:14:40 +01:00
Paul Donald bf8fe5e6ea luci-theme-bootstrap: partial revert of monospace changes
follow-up to 3c3a5e2b1a

Retain original monospace properties since those are handled by the system
anyway.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-12-03 23:34:57 +01:00
Akihiro Nagai 3c3a5e2b1a luci-theme-bootstrap: fall back to system font stack with CSS custom properties
Replace hardcoded font-family declarations with CSS custom properties
(--font-sans, --font-serif, --font-mono) that fall back to system UI fonts.

Signed-off-by: Akihiro Nagai <bashing.tremors_0f@icloud.com>
2025-12-03 22:17:50 +01:00
Self-Hosting-Group d16ffa3113 luci-theme: add missing menu name to page <title>
Signed-off-by: Self-Hosting-Group <selfhostinggroup-git+openwrt@shost.ing>
2025-12-03 21:47:13 +01:00
Mikael Magnusson 9b5d60757e luci-theme-bootstrap: disable Dark Reader
Disable Dark Deader since the bootstap theme has built-in
dark and light modes, as well as a mode which auto-detects
the user's preference. Dark Reader also doesn't work well
with the bootstrap theme.

Signed-off-by: Mikael Magnusson <mikma@users.sourceforge.net>
2025-11-27 00:27:59 +01:00
Eamon Xiong 8a8e4d53a7 luci-theme-bootstrap: use ES6 syntax
Replaced L.bind with arrow functions, used Array.from for array conversion,
applied concise method syntax, and switched to block-scoped declarations.

Signed-off-by: Eamon Xiong <eamonxiong@gmail.com>
2025-11-17 23:40:51 +08:00
Paul Donald 6e263428bd luci-mod-status: partial revert of styling changes
follow-up to 788e47034b

Some of the CSS changes have knock-on effects and change behaviour in
other display areas, especially when the CSS is minified.

Simplified to change between label flavours on hide/show status.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-10-21 16:25:47 +02:00
Andy Chiang 91a94ce360 luci-theme-bootstrap: add width for localtime
set an appropriate width for #localtime

Signed-off-by: Andy Chiang <AndyChiang_git@outlook.com>
2025-10-20 20:40:46 +02:00
Christian Marangi 788e47034b luci-mod-status: add support to show/hide index cards
Add support to show/hide index cards. A card's state is saved using the
browser localstorage and its state is restored on page reload/relogin.

Rework the pool function to check and skip loading of hidden cards.

Rework themes to address new button position.

Signed-off-by: Christian Marangi <ansuelsmth@gmail.com>
[ changed tabs in CSS ]
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-10-02 15:11:51 +02:00
Dávid Benko 65c1075b86 themes: scale down icons for network interfaces
Many LuCI icons doubled in size during migration to vector graphics
in commit ae5d91da90 (16px to 32px).

Sizing of their instances is mostly controlled by CSS, but there's
an exception - network interface boxes of "Interfaces" page in LuCI.
Current CSS doesn't specify any particular size requirements to follow,
so the icons just scale with the images served, thus effectively
doubling in width and height compared to state before the vectorization
commit. Such a big icons look odd and take up too much space, especially
for bridge interfaces with many ports.

Instead of reverting to the original 16×16px, this commit proposes
compromise of 24×24px as most of other icons within LuCI became a bit
bigger as well.

Signed-off-by: Dávid Benko <davidbenko@davidbenko.dev>
2025-09-29 17:25:45 +02:00
Paul Donald 4d5ac5b3e9 themes: remove -moz selectors
Firefox newer than v88 complains with:

 Unknown pseudo-class or pseudo-element '-moz-focus-inner'.
 Ruleset ignored due to bad selector.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-07-30 14:49:54 +02:00
Marko Mäkelä 75a612ae63 luci-theme-bootstrap: global darkmode graphs
Instead of enumerating each SVG graph that the dark mode is applicable to,
apply --background-color-high to each SVG element that is a child of
<div style="…"> and --text-color-highest to each LINE inside such SVG.

This allows dark mode to work in all SVG widgets by default, in any
current or future LuCI component.

Signed-off-by: Marko Mäkelä <marko.makela@iki.fi>
2025-06-30 02:20:02 +02:00
Paul Donald ae5d91da90 treewide: vectorise iconography
Clear, crisp, resolution independent vector graphics replace the trusty
microscopic PNG. Some minor CSS changes were needed to constrain images
in some locations to make sure they don't consume too much space.

Iconography taken from Mate desktop theme with minor adjustments:

https://github.com/mate-desktop/mate-icon-theme/

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-06-12 18:55:53 +02:00
Paul Donald 46c27a05c5 luci-theme-*: layout improvements
follow-up to 1be1deb9ec

bootstrap now utilizes more screen width for main content

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-06-10 16:34:48 +02:00
Paul Donald 37262790c1 luci-theme-*: layout improvements
follow-up to 1be1deb9ec

bootstrap now utilizes more screen width for main content

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-06-10 14:57:10 +02:00
Paul Donald 1be1deb9ec luci-theme-*: layout improvements
bootstrap now utilizes more screen width for main content

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-06-08 22:59:41 +02:00
Paul Donald 76fa3036a2 luci-theme-*: wrap span tags, fixes badge text
The nowrap can be a bit obnoxious when available layout space is
limited. Wrap.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-06-08 22:56:40 +02:00
Paul Donald 9180f2a762 luci-theme-*: ES6 refactor
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-04-23 14:21:40 +02:00
Paul Donald 9157254059 luci-theme: fix some dynamic layout issues
Implement a dynamic menu item width to allow item unwrapped and visible:
'min-width: max-content;' or 'max-width: max-content;'

Remove IE hacks and fix a console error for -webkit-scrollbar-thumb

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2025-04-23 14:03:57 +02:00
Jyn 8f61f1616a luci-theme-bootstrap: zone-forwards wrap
Signed-off-by: Jyn <pvp4eek@gmail.com>
2025-04-14 15:19:35 +02:00
Florian Eckert 046a121087 treewide: set css tag flex-wrap to wrap buttons in modal view
In CSS, the flex-wrap property is used in a flex container to control
how flex items are laid out when there is not enough space in a single
line.

If a modal is displayed on small screens, the buttons are not wrapped. They
remain on one line. This breaks the layout and does not look good.

Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2025-03-06 11:21:32 -06:00
Paul Donald 779ca14125 css: remove unsupported properties
neither Safari nor Firefox recognize them, and they generate a parse
error.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2024-12-22 16:23:35 +00:00
Ramon Van Gorkom 80f18df48f luci-base: make items of UIDynamicList drag-sortable
Signed-off-by: Ramon Van Gorkom <Ramon00c00@gmail.com>
2024-11-27 21:43:16 +01:00
Mustafa Can Elmacı ae8bbb814f treewide: HTML Cleanup
* HTML Cleanup: Meta tags.
* Converted charset to shorthand.
* Removed meta tags with `Content-Script-Type` attribute. (Invalid in HTML5 spec.)

* HTML Cleanup: CSS tags.
* Removed `type` attribute with CSS files from link tags. (HTML5 spec recommends omitting it.)
* Removed `type` attribute from style tags. (Deprecated in HTML5 spec.)
https://html.spec.whatwg.org/#attr-link-type
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

* HTML Cleanup: Convert from XHTML to HTML5
* Removed XML declaration.
* Removed XML namespace.
* Changed doctype to HTML5.

* HTML Cleanup: CDATA tags.
* CDATA sections should not be used within HTML they are considered as comments and not displayed.
https://developer.mozilla.org/en-US/docs/Web/API/CDATASection

* HTML Cleanup: Script tags.
* Removed `language` attribute from script tags. (No longer valid in HTML5)
* Removed `type` attribute with JavaScript MIME type from script tags. (HTML5 spec recommends omitting it.)
https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type
https://mimesniff.spec.whatwg.org/#javascript-mime-type

Signed-off-by: Mustafa Can Elmacı <mustafacan@elmaci.net>
2024-11-22 22:39:46 +01:00
Griffen Edge c68d5c80bd luci-theme-bootstrap: cascade.css: Refactor unnecessary calc()
Replace all calc() doing maths on compatible numbers with their final values (to 2 decimal points).

Signed-off-by: Griffen Edge <griffen@griffenedge.com>
2024-10-10 02:28:12 +02:00
Florian Eckert 991549c238 luci-theme-bootstrap: add css class button-row
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2024-07-09 16:19:51 +02:00
James 3e967fd30d luci-theme-boostrap: dark realtime graphs
This fixes the graphs after extra divs were added.

Signed-off-by: James Lindstrom <jameslindstrom2@gmail.com>
* Customize commit message
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2024-05-02 09:42:29 +02:00
Kristian Skramstad bd2b2ec340 luci-theme-bootstrap: Change textarea font-family to monospace.
Better readability for pages:
- Startup -> Local Startup
- Flash Firmware -> Configuration
- Diagnostics

Signed-off-by: Kristian Skramstad <kristian+github@83.no>
2024-03-27 19:29:48 +01:00
Thomas Schröder e569ddaf89 luci-theme-bootstrap: darkmode graphs fine-tuning
Fine tuning #6991

Bugfix for the wireless graphs, reorder everything to the same level
as displayed in the menu and make the spaces even.

Signed-off-by: Thomas Schröder <tschroeder_github@outlook.com>
2024-03-20 09:56:41 +01:00
james 850345bfb9 luci-theme-bootstrap: darkmode graphs
This adds 2 more graphs to be dark in dark mode and makes the gridlines white
Signed-off-by: james <jameslindstrom2@gmail.com>
2024-03-15 00:45:41 +01:00
Jo-Philipp Wich 37daa26be9 Merge pull request #6928 from thomasschroeder/luci-theme-bootstrap_show-scrollbar
luci-theme-bootstrap: Always show scrollbar
2024-03-13 22:57:02 +01:00
james 056407754d luci-theme-bootstrap: Realtime Graphs dark mode
This feature is to have the realtime graphs dark when using Bootstrap Dark Theme

Signed-off-by: james <jameslindstrom2@gmail.com>
2024-03-12 20:24:06 +01:00
Fengyu Wu 98a6ba28de luci-themes: add luci-base to depends
Signed-off-by: Fengyu Wu <saldry@proton.me>
2024-03-02 17:57:01 +01:00
Fengyu Wu f01347d3be luci-theme-bootstrap: open footer links in new tab
Also set Referrer Policy

Signed-off-by: Fengyu Wu <saldry@proton.me>
2024-03-02 17:57:01 +01:00
Jo-Philipp Wich f57514d63c luci-theme-bootstrap: add dropdown option hover styles
Subsequent commits will drop the JS based mouse following focus behavior,
so add appropriate replacement CSS hover styles.

Ref: #6903
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2024-02-19 00:04:16 +01:00
Thomas Schröder d77615c422 luci-theme-bootstrap: Allways show scrollbar
With this addition to the body tag, on desktop browsers the vertical scrollbar
is always visible and the content will not be shifted by changing tabs (like
at System/Software when the update tab has no to little content).

I couldn't see any negative side effects with Chromium browsers or Firefox
under Windows/Linux and Android, but I don't have access to Apple devices
for tests.

Signed-off-by: Thomas Schröder <tschroeder_github@outlook.com>
2024-02-18 14:16:20 +01:00
Daniel Nilsson 8200c5d49e luci-theme-bootstrap: allow network interfaces to line break
The inherited nowrap of white-space causes the interface boxes to not line break, resulting in a horizontal scroll bar when many interfaces are present.

Tested on Chrome and Firefox.

Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
2024-02-18 00:55:20 +01:00
Sergey Ponomarev 9ce280af95 luci-theme-bootstrap: Use a new OpenWrt logo
The new OpenWrt logo.svg is copied from luci-theme-openwrt-2020.
The logo.png was copied too but resized from 180px 3.9Kb down to 48px 2.3Kb.
This is enough when used as icon for app pinned to desktop.

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Paul Donald 16470a0ab8 Merge pull request #6296 from jjm2473/patch-2
luci-theme-bootstrap: set scroll-margin-top for all elements
2023-12-04 03:44:24 +01:00