74 Commits

Author SHA1 Message Date
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
Eamon Xiong
0096cef2b3 luci-theme-openwrt-2020: use arrow function
Replaced L.bind with an arrow function for simpler syntax and clearer `this` binding.

Signed-off-by: Eamon Xiong <eamonxiong@gmail.com>
2025-11-17 23:41:07 +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
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
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
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
d23bbd896b luci-theme-openwrt-2020: 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
Paul Donald
0459c378b7 themes: update package-manager style to match page name
opkg is no longer available as the generic name for package-manager

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
2024-12-15 20:29:36 +01: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
Florian Eckert
c1621c6d32 luci-theme-openwrt-2020: add css class button-row
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2024-07-09 16:19:51 +02:00
Florian Eckert
be212dd452 luci-theme-openwrt-2020: add missing license information
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2024-03-19 13:37:41 +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
Jo-Philipp Wich
ae146074a1 luci-theme-openwrt-2020: 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
Stan Grishin
4433701463 Merge pull request #6802 from stangri/luci-theme-openwrt2020
luci-theme-openwrt-2020: fix anchor decorations
2024-01-10 19:27:06 -07:00
Stan Grishin
525c5da356 luci-theme-openwrt-2020: fix anchor decorations
* add the decorations for when the links are included in the field descriptions

Thanks @dibdot, @stokito!

Signed-off-by: Stan Grishin <stangri@melmac.ca>
2024-01-07 22:18:06 +00:00
Sergey Ponomarev
74935b8ebb luci-theme-openwrt-2020: Fix header light blue color
According to a style guide the color should be #00B5E2.
In a9f6d850a2 added a light blue square background to logo.svg.
Their color started differs, the change fixes this.

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 21:00:02 +02:00
Sergey Ponomarev
5f3a24ef81 luci-theme-openwrt-2020: Remove apple-touch-icon
The apple-touch-icon was used by old Safari on iOS.
Today just <link rel="icon" href="logo.png"> is enough.

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Sergey Ponomarev
b5a3354e82 luci-theme-openwrt-2020: Fix Safari favicon: use PNG alongside with SVG
Chrome, Edge and Firefox will use the SVG icon but Safari will use the PNG.
Chrome will try to pick an icon with a best suited dimension.
So it will also download the PNG to check it's dimension.
The explicitly specified sizes are preventing this.

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Sergey Ponomarev
a9b06db126 luci-theme-openwrt-2020: remove icon explicit svg type
That was a fix for old browsers when the mime type is incorrect.
Today all servers return a correct mime but also browsers can sniff a type.

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Sergey Ponomarev
84da02bc09 luci-theme-openwrt-2020: Minimize logo.svg
Save 686-536=150 bytes

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Sergey Ponomarev
d0df669431 luci-theme-openwrt-2020: logo.svg add 1px on top and bottom
To keep ratio the one pixel was also added to left and right and now size is 100x100

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Sergey Ponomarev
cc0c66c0e5 luci-theme-openwrt-2020: make logo.svg square
Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Sergey Ponomarev
a9f6d850a2 luci-theme-openwrt-2020: fix logo.svg according to Logo Usage Guidelines
The "White & Dark Blue" logo should have a background filled with PANTONE 306 C HEX #00B5E2.
SVG doesn't support background-color properly so use a rectangle instead.
The dark blue circle must be PANTONE 7463 C HEX #002B49

See https://openwrt.org/_media/docs/guide-graphic-designer/openwrt-logo-usage-guidelines.pdf

Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
2023-12-12 20:24:12 +02:00
Jo-Philipp Wich
7cded1f8bb luci-theme-openwrt-2020: import bootstrap radio/checkbox styling rules
Import the radio and checkbox styling rules from the default Bootstrap
theme and adapt colors and margins to the OpenWrt 2020 one.

Fixes: #6442
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2023-07-26 15:46:06 +02:00
Jo-Philipp Wich
1597d8e555 luci-theme-openwrt-2020: don't inherit background in alert message buttons
Fixes: #6177
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2023-02-07 10:41:59 +01:00
Florian Eckert
21b40652d9 luci-theme-: add postrm script
Remove uci theme config section on uninstall.

Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2023-01-09 13:07:42 +01:00
Jo-Philipp Wich
694b8086cd luci-theme-openwrt-2020: convert Lua templates to ucode
Convert the theme's Lua templates to ucode to avoid the implicit dependency
on the luci-lua-runtime package.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2022-10-26 22:43:56 +02:00
Rosen Penev
5466452399 luci-theme-openwrt-2020: quantize png image
Small size reduction.

From: 5908
To:   3896

Signed-off-by: Rosen Penev <rosenp@gmail.com>
2022-10-14 13:25:24 -07:00
Rosen Penev
28193247bc luci-theme-openwrt-2020: add iOS webapp support
This way instead of opening a Safari tab, it opens in its own instance.

Signed-off-by: Rosen Penev <rosenp@gmail.com>
2022-10-11 14:50:40 -07:00
Rosen Penev
1be885064e luci-theme-openwrt-2020: add iOS icon support
Used when adding LuCI to Springboard. Image generated from logo.svg.

Signed-off-by: Rosen Penev <rosenp@gmail.com>
2022-10-11 14:48:54 -07:00
Sergey V. Lobanov
13949cb887 luci-theme-openwrt-2020: fix font issue when mixing latin and non-latin symbols
The GalanoGrotesque font used by the openwrt2020 theme does not support non-
latin symbols.

If latin and non-latin symbols are used together in one line it looks strange
because for latin symbols GalanoGrotesque is used but for non-latin symbols a
fallback font is used (sans-serif).

This patch changes default font to Helvetica for the "bg", "ru", "uk", "el"
and "he" locales.

Original patch was written by Jo-Philipp Wich

Fixes: #5580
Signed-off-by: Sergey V. Lobanov <sergey@lobanov.in>
[reword commit message, drop "de" from exception list]
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2021-12-09 17:03:25 +01:00
Paul Spooren
c8d9819c9a themes: warn if booted from initramfs
Some devices offer a full LuCI interface from their recovery interface.
As it's read-only it should only be used for installing sysupgrades and
therefore warn users that no settings are saved.

Signed-off-by: Paul Spooren <mail@aparcar.org>
2021-10-05 15:33:15 -10:00
Petr Štetiar
60fbadfa36 luci-theme-openwrt-2020: add styling of hyperlinks
Currently it's not possible to distinguish between normal text and
hyperlink.

Signed-off-by: Petr Štetiar <ynezz@true.cz>
2021-10-02 23:46:39 -10:00
Petr Štetiar
b5faba1244 luci-theme-openwrt-2020: add styling of abbreviations and acronyms
Style abbreviations and acronyms with dotted underline text-decoration
as without the style it's quite hard to find out which text is
abbreviation or acronym.

References: https://developer.mozilla.org/en-US/docs/Archive/Web_Standards/Styling_Abbreviations_and_Acronyms
Signed-off-by: Petr Štetiar <ynezz@true.cz>
2021-09-28 10:46:36 -10:00
Florian Eckert
a655389032 luci-theme-openwrt-2020: add css success label
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2021-08-31 08:49:35 +02:00
Jo-Philipp Wich
e0d385e35d Merge pull request #5253 from selanf/x13 2021-08-11 22:10:56 +02:00
Fritz D. Ansel
b2bea34586 theme openwrt-2020: set maximum menu width
more space for it does not have an advance

Signed-off-by: Fritz D. Ansel <fdansel@yandex.ru>
2021-08-11 09:25:58 +02:00
Fritz D. Ansel
c592ef4f84 theme openwrt-2020: larger bridge-boxes
they are to small for devices like e8450
as it has 4x LAN + 2x WLAN + 1x Bridge

Signed-off-by: Fritz D. Ansel <fdansel@yandex.ru>
2021-08-11 09:25:56 +02:00
Jo-Philipp Wich
e8a6f0bb7c luci-theme-openwrt-2020: fix spinning disk animation
Fixes: #4824
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2021-06-17 14:11:39 +02:00
Hauke Mehrtens
5cbd79d7e3 themes: Call striptags() on hostname to prevent XSS
This calls striptags() on the hostname to prevent any XSS over the
hostname. This should fix CVE-2021-33425 as far as I understood it.

If someone adds some Javascript into system.@system[0].hostname it would
have been directly added to the page, this prevents the problem.

This can only be exploited by someone being able to modify the uci
configuration, normally a user with such privileges could also just
modify the webpage.

Signed-off-by: Hauke Mehrtens <hauke@hauke-m.de>
2021-06-09 01:33:44 +02:00
Jo-Philipp Wich
064e5cca96 Merge pull request #4985 from j123b567/feature_luci-theme-openwrt-2020_mainmenu-submenu-tweek
luci-theme-openwrt-2020: remove submenu margin-bottom when submenu not visible
2021-06-02 08:21:20 +02:00
Sven Roederer
184e93df5f luci-theme-openwrt-2020: use SVG-file for favicon and logo
Using the scalable graphic in place of the static png file saves some
ressources in flash and network. It also aligns the filetype to the type
announced to the browser.

fixes GitHub-issue #5051

Signed-off-by: Sven Roederer <freifunk@it-solutions.geroedel.de>
2021-05-23 01:54:05 +02:00
Jan Breuer
2b5f78e893 luci-theme-openwrt-2020: remove submenu margin-bottom when submenu not visible
Signed-off-by: Jan Breuer <jan.breuer@jaybee.cz>
2021-04-13 16:45:10 +02:00
Jo-Philipp Wich
c5ff3244e9 luci-theme-openwrt-2020: honor CSS definitions passed by views
Legacy Lua views might declare a global `css` variable to inject custom
styles into the template header. Support this mechanism in the OpenWrt 2020
theme as well.

Ref: https://github.com/openwrt/luci/issues/4972
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
2021-04-09 14:29:12 +02:00