LuCI: Refined CSS for all luci-themes, including adding larger hide/show buttons for smaller screens to all themes, remember sorted DHCP Leases

anon77706961 · March 30, 2026, 8:54pm

Two requests:

I absolutely love the ability to hide and show sections that I do not need to look at (thank you!). Would we be able to reduce the height of the "hide" and "show" buttons on the Overview, just so they are a little less dominating on the page? Especially when the "show" button is visible — it is quite a large colourful button for something I'm trying to hide from view.

I also noticed that when I sort my Active Leases by IP address, for example, my changes aren't remembered after logging out and back in. As I set static leases within .100 to .199, and have DHCP lease from .200 to .249, I always prefer seeing my leases sorted by IP address and would like this view saved. This would be for the Overview page, and also would apply to the Active Leases tables in Network → DHCP.

efahl · March 30, 2026, 9:46pm

How accessible are the buttons on mobile? I think that's why they are so large in the first place...

anon77706961 · March 31, 2026, 2:34am

I've looked further into the rationale behind why after finding the pull request (didn't realise you were the author!), and you are right, I think it would be nice to keep the buttons as-is for smaller screens, but use a smaller height on the buttons for all other screens via @media only screen and (min-width : 400px), matching the same style as the "refreshing" text in the header.

github.com/openwrt/luci

luci-mod-status: improve hide/show button placement and size (#8243)

master ← efahl:status-buttons

opened 06:39PM - 21 Jan 26 UTC

efahl

+3 -2

Align the hide/show buttons with the header of the section that they control. M…ake the buttons as tall as the header line, very much improving accessibility on mobile. --- In 2020 theme on desktop: <img width="1513" height="633" alt="image" src="https://github.com/user-attachments/assets/29b0d578-bf2a-441a-978e-dd05000e7c19" /> Bootstrap theme on mobile: <img width="360" height="800" alt="image" src="https://github.com/user-attachments/assets/0ee3c7c1-7135-4861-b72a-888868e74478" /> 2020 theme on mobile: <img width="360" height="800" alt="image" src="https://github.com/user-attachments/assets/769df406-a36d-42f4-90b8-7f59f44ba0f3" />

As for saving the sort done by the user on Active Leases, I am unsure who that would go to for consideration and possible implementation.

efahl · March 31, 2026, 6:12pm

Oh, that was me? I had forgotten until you mentioned it; I do recall testing on a phone (I only touch my phone a couple times a month, but thought it was important for this one).

Changing it to be mobile specific would be great, here's how I see them on my desktop in the 2020 theme:

anon77706961 · March 31, 2026, 9:23pm

Completely agree.

I only focused on Bootstrap, so I should install the other packages as per https://openwrt.org/docs/guide-user/luci/luci.themes and ~~double check the CSS above will still correctly work~~: (Edit: Updated CSS in a later post in topic.)

Material theme
OpenWrt2020 theme
OpenWrt theme

Will work on this later today and post the result here, let me know if there's any other "official" themes I should double check on.

efahl · March 31, 2026, 9:49pm

Not in the official repos, but I know that lots of people use argon as I see it in the ASU error logs all the time. Not sure where it comes from, but someone here will probably clue us in.

anon77706961 · April 1, 2026, 8:55am

According to that wiki page it is a popular community theme, so I will leave community themes alone.

I've gone ahead and looked through the four themes, and have placed any CSS modifications I would like to see implemented below. Screenshots are provided showing what the changes look like after my CSS. You can replicate it yourself by copying and pasting my CSS to the end of the existing CSS file cascade.css. I used Safari's Web Inspector.

luci-theme-bootstrap

26.089.79989~0b64c57

/* Change mouse icon from text cursor to pointer */
body[data-page='admin-status-overview'] .cbi-title .label {
  cursor: pointer;
}

/* Smaller buttons on larger screens */
@media screen and (min-width : 481px) {
  body[data-page='admin-status-overview'] .cbi-title .label {
    line-height: 1em;
    margin: 0.7em 0;
  }
}

/* Slightly fade "show" button */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
  opacity: var(--disabled-opacity);
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
  opacity: initial;
}

/* Match footer with header padding left and right so they are aligned (header uses 1180px, but footer was using 940px) */
footer {
  padding-left: calc((100% - 1180px) / 2);
  padding-right: calc((100% - 1180px) / 2);
}

luci-theme-material

26.089.79989~0b64c57

/* Resolve mismatched spacing for each heading in box, fixing spacing for when contents are hidden and adding spacing when contents are shown */
body[data-page='admin-status-overview'] .cbi-section {
  padding-top: 1rem;
}
body[data-page='admin-status-overview'] .cbi-title h3 {
  padding: 1rem 0 0 0;
  margin: 0;
  align-items: center;
}
body[data-page='admin-status-overview'] .cbi-section > div:last-child {
    padding-top: 1rem;
}
body[data-page='admin-status-overview'] .cbi-section > div:empty {
    display: none;
}

/* Looks like there's a tablet mode also done for 1600px, need to fix spacing changes for that too */
@media screen and (max-width: 1600px) {
  body[data-page='admin-status-overview'] .cbi-section {
    padding-top: 0.5rem;
  }
  body[data-page='admin-status-overview'] .cbi-title h3 {
    padding-top: 0.5rem;
  }
}

/* Change mouse icon from text cursor to pointer, and fix buttons not being same min-width */
body[data-page='admin-status-overview'] .cbi-title .label {
  cursor: pointer;
  min-width: 5.2em !important;
}

/* Create larger buttons for smaller screens (same behaviour as luci-theme-bootstrap) */
@media screen and (max-width: 480px) {
  body[data-page='admin-status-overview'] .cbi-title .label {
    line-height: 3em;
  }
}

/* Slightly fade "show" button: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
  opacity: 0.7;
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
  opacity: initial;
}

/* Set text to var(--secondary-bright-color) when using var(--main-bright-color) for background to match same behaviour as the header of the page, e.g. IPv4 Upstream and IPv6 Upstream boxes */
body[data-page='admin-status-overview'] .ifacebox-head {
  color: var(--header-color);
}

luci-theme-openwrt

26.089.79989~0b64c57

/* Match "show" button style to IP table, change border colour to match font colour; fade it slightly: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
  background: #90c0e0;
  color: #000;
  border: 1px #000 solid;
  opacity: 0.7;
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
 opacity: initial;
}

/* Change mouse icon from text cursor to pointer, restore button text weight and font similar to indicators, add subtle border to compliment both states of button */
body[data-page='admin-status-overview'] .cbi-title .label {
  cursor: pointer;
  font-weight: normal;
  font-family: Arial,Verdana,sans-serif;
  border: 1px #888 solid;
}

/* Match rounded indicators to same style as "hide" and "show" buttons for design consistency, change mouse icon from text cursor to pointer (site wide) */
#indicators > span {
  border-radius: 3px !important;
  cursor: pointer;
}

/* Work with existing mobile styling for 480px and below, make bigger buttons and fix heading alignment */
@media screen and (max-width: 480px) {
  body[data-page='admin-status-overview'] .cbi-title .label {
    line-height: 3em;
  }
  body[data-page='admin-status-overview'] .cbi-title h3 {
    align-items: center;
  }
}

luci-theme-openwrt-2020

26.089.79989~0b64c57

/* Match rounded indicators to same style as "hide" and "show" buttons for design consistency (site wide) */
#indicators > * {
  line-height: 1.8em;
  border-radius: .5rem;
  padding: 0 .7em;
}

/* Update existing calculations with same new adjustments as above */
#indicators > [data-style="inactive"] {
  line-height: calc(1.8em - 4px);
  padding:0 calc(.7em - 2px);
}

/* Create larger buttons for smaller screens (same behaviour as luci-theme-bootstrap) */
@media screen and (max-width: 480px) {
  body[data-page='admin-status-overview'] h3, .cbi-section > legend:first-child {
    line-height: 2em;
  }
}

/* Swap the "hide" and "show" button styles to match all other luci-theme, as "hide" is currently using primary style and "show" is currently using secondary style. Also, change mouse icon from text cursor to pointer */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
  background: var(--main-bright-color);
  color: var(--secondary-bright-color);
  border: 0;
}
body[data-page='admin-status-overview'] .cbi-title .label {
  background: var(--secondary-bright-color);
  color: var(--main-bright-color);
  border: 1px solid var(--main-bright-color);
  opacity: 1;
  cursor: pointer;
}

/* Slightly fade "show" button: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
 opacity: 0.7;
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
 opacity: initial;
}

/* Set text to var(--secondary-bright-color) when using var(--main-bright-color) for background to match same behaviour as the header of the page, e.g. IPv4 Upstream and IPv6 Upstream boxes */
body[data-page='admin-status-overview'] .ifacebox-head {
  color: var(--secondary-bright-color)
}

I would go ahead and try to do a pull request/commit myself, but I have never done one before, and all the prerequisites were quite overwhelming.

efahl · April 1, 2026, 7:36pm

You should do it, it's not too bad. Since you've already got a github account, just fork the luci repo, clone it to your local machine, add a branch to master and add all your changes there. Commit message is easy, look at a couple other PRs and copy how they've done it. Once it looks good locally, git push --set-upstream origin branch-with-changes and go to the openwrt/luci repo to create the PR.

anon77706961 · April 1, 2026, 7:41pm

Thanks for the encouragement. I will give it a go now using GitHub Desktop. If I am having trouble with any step (most likely towards the end of 'pushing'), would you mind if I messaged you?

efahl · April 1, 2026, 7:53pm

Not at all, go for it.

anon77706961 · April 1, 2026, 10:37pm

I think I was able to do it!
Fingers crossed everything is correct…

GitHub Desktop seemed to have helped me a lot as I could use a GUI for everything.

Marking as solved and closed as pull requests have been created for the CSS requests, and the feature request as a GitHub issue has been created for saving sorted DHCP leases.