From 8f60296f32add12b28d0e5a18cac31179de2ff05 Mon Sep 17 00:00:00 2001 From: Joshua Criss Date: Tue, 14 Apr 2026 21:19:59 +1000 Subject: [PATCH] treewide: themes: empty data-page on overview workaround At the moment, targeting CSS to the Status > Overview page isn't possible due to LuCI handling the data-page attribute with an empty data-page in HTML on log in, or if the hostname is clicked in the header (#8534). As a workaround, all existing CSS trying to target this page has been modified to best supply styling to this page, without it affecting the other main pages. Precise adjustments have been made on CSS of luci-theme-material due to various existing styling variations used with displaying its content, added to bottom of cascade.css. Signed-off-by: Joshua Criss --- .../htdocs/luci-static/bootstrap/cascade.css | 12 +- .../htdocs/luci-static/material/cascade.css | 153 +++++++++++++++--- .../luci-static/openwrt2020/cascade.css | 24 +-- .../luci-static/openwrt.org/cascade.css | 14 +- 4 files changed, 153 insertions(+), 50 deletions(-) diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index 4a101006b894..d1f0d304999e 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -2627,29 +2627,29 @@ div.cbi-value var.cbi-tooltip-container, stroke: var(--text-color-highest)!important; } -/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === HIDE/SHOW LABEL BUTTONS === */ /* Change mouse icon from text cursor to pointer */ -body[data-page='admin-status-overview'] .cbi-title .label { +.cbi-title > h3 > .label { cursor: pointer; } /* Smaller buttons on larger screens */ @media screen and (min-width : 481px) { - body[data-page='admin-status-overview'] .cbi-title .label { + .cbi-title > h3 > .label { line-height: 1em; margin: 0.7em 0; } } /* Slightly fade "show" button */ -body[data-page='admin-status-overview'] .cbi-title .label.notice { +.cbi-title > h3 > .label.notice { opacity: var(--disabled-opacity); } /* Remove fade when hovered */ -body[data-page='admin-status-overview'] .cbi-title .label.notice:hover { +.cbi-title > h3 > .label.notice:hover { opacity: initial; } -/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === END HIDE/SHOW LABEL BUTTONS === */ diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index e56e73b9263f..d52d27e42037 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -2078,6 +2078,7 @@ td > .ifacebadge, .ifacebox-head { padding: .25em; background: #eee; + color: var(--header-color); } .ifacebox-head.active { @@ -3182,68 +3183,178 @@ input[name="nslookup"] { }*/ } -/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === HIDE/SHOW LABEL BUTTONS === */ /* 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 { +.cbi-title > h3 > .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 { + .cbi-title > h3 > .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 { +.cbi-title > h3 > .label.notice { opacity: 0.7; } /* Remove fade when hovered */ -body[data-page='admin-status-overview'] .cbi-title .label.notice:hover { +.cbi-title > h3 > .label.notice:hover { opacity: initial; } -/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === END HIDE/SHOW LABEL BUTTONS === */ -/* === STATUS OVERVIEW: FIX BOX SPACING === */ +/* === FIX BOX SPACING === */ /* 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 { +.cbi-section { padding-top: 1rem; } -body[data-page='admin-status-overview'] .cbi-title h3 { +.node-admin-status-realtime-connections .cbi-section, +.node-admin-status-realtime-load .cbi-section, +#cbi-system-led { + padding-top: 2rem; +} + +.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; + +.cbi-section > h3:first-child, .panel-title { + padding-top: 1rem; + margin-top: 0; + align-items: center; } -body[data-page='admin-status-overview'] .cbi-section > div:empty { - display: none; + +.cbi-section > div:last-child { + padding-top: 1rem; +} + +.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 { + .cbi-section { padding-top: 0.5rem; } - body[data-page='admin-status-overview'] .cbi-title h3 { + .cbi-title h3 { padding-top: 0.5rem; } } -/* === END STATUS OVERVIEW: FIX BOX SPACING === */ +#maincontent > .container { + margin-top: 2rem; +} + +.node-admin-status-routes .cbi-tabmenu { + margin-top: 2rem; +} -/* === STATUS OVERVIEW: MATCH IFACEBOX COLOUR WITH HEADER === */ +.node-admin-system-startup .cbi-tabmenu, +.node-admin-network-routes .cbi-tabmenu, +.node-admin-status-realtime-bandwidth .cbi-tabmenu, +.node-admin-network-dhcp .cbi-tabmenu, +.node-admin-network-dns .cbi-tabmenu { + margin-top: 1rem; +} + +.node-admin-status-routes [data-tab-active=true], +.node-admin-status-realtime-bandwidth [data-tab-active=true], +.node-admin-system-startup [data-tab-active=true], +.node-admin-system-flash [data-tab-active=true], +.node-admin-network-network [data-tab-active=true], +.node-admin-network-routes [data-tab-active=true], +.node-admin-network-dhcp [data-tab-active=true] { + padding: 1rem 2rem 2rem 2rem !important; +} -/* Set text to header colour when using the header colour background to match same behaviour, for e.g. IPv4 Upstream and IPv6 Upstream boxes */ -body[data-page='admin-status-overview'] .ifacebox-head { - color: var(--header-color); +.node-admin-system-flash [data-tab=Actions] #cbi-json-actions { + padding-top: 0 !important; +} + +/* === END FIX BOX SPACING === */ + +/* === FIX OTHER SPACING === */ + +.main > .loading { + top: 1rem; +} + +#view > .spinning { + margin: 2rem 0 0 0; +} + +.tabs { + margin: 0; + padding-left: 0; + background-color: inherit; +} + +.cbi-map-descr, .cbi-section-descr { + padding-left: 0; +} + +.node-admin-system-attendedsysupgrade-overview .container #view p > p { + margin-bottom: 10px; +} +.node-admin-system-attendedsysupgrade-overview .container #view p > button { + margin-top: 10px; +} + +.node-admin-system-attendedsysupgrade-overview #modal_overlay div.btn { + font-weight: unset !important; +} + +.node-admin-system-flash .cbi-value, +.node-admin-system-flash .cbi-value .cbi-section, +.node-admin-network-dhcp .cbi-value, +.node-admin-network-dhcp .cbi-value .cbi-section { + padding: 0; + margin: 0; +} + +.node-admin-network-dhcp .cbi-value .cbi-section .cbi-tabmenu { + padding-top: 2rem; +} + +.node-admin-network-dns [data-tab=dnsrecords] .cbi-value { + padding: 1rem 1rem 2rem 1rem; +} + +.controls > * { + padding: .5em 0; +} + +input[type="checkbox"], +input[type="radio"] { + min-height: unset; +} + +label > input[type="checkbox"], +label > input[type="radio"] { + margin-right: 0.2rem; +} + +.btn { + line-height: 1.6rem; +} + +.cbi-dropdown > ul > li { + padding: .25em .75rem; +} + +footer { + padding: 1rem 2rem; } -/* === END STATUS OVERVIEW: MATCH IFACEBOX COLOUR WITH HEADER === */ +/* === END FIX OTHER SPACING === */ diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css index d6a476e3476c..b1fb94ec3e66 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css @@ -695,6 +695,7 @@ p > a { .ifacebox-head { background: var(--main-bright-color); width: 100%; + color: var(--secondary-bright-color); } .ifacebox-body { @@ -2019,22 +2020,22 @@ ul.errors { } } -/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === HIDE/SHOW LABEL BUTTONS === */ /* 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 { + .cbi-title > 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 { +.cbi-title > h3 > .label.notice { background: var(--main-bright-color); color: var(--secondary-bright-color); border: 0; } -body[data-page='admin-status-overview'] .cbi-title .label { +.cbi-title > h3 > .label { background: var(--secondary-bright-color); color: var(--main-bright-color); border: 1px solid var(--main-bright-color); @@ -2043,22 +2044,13 @@ body[data-page='admin-status-overview'] .cbi-title .label { } /* 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 { +.cbi-title > h3 > .label.notice { opacity: 0.7; } /* Remove fade when hovered */ -body[data-page='admin-status-overview'] .cbi-title .label.notice:hover { +.cbi-title > h3 > .label.notice:hover { opacity: initial; } -/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ - -/* === STATUS OVERVIEW: MATCH IFACEBOX COLOUR WITH HEADER === */ - -/* 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); -} - -/* === END STATUS OVERVIEW: MATCH IFACEBOX COLOUR WITH HEADER === */ +/* === END HIDE/SHOW LABEL BUTTONS === */ diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index ce8ab58a3a7a..52d8f3fa279e 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -2117,10 +2117,10 @@ select + .cbi-button { } } -/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === HIDE/SHOW LABEL BUTTONS === */ /* 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 { +.cbi-title > h3 > .label.notice { background: #90c0e0; color: #000; border: 1px #000 solid; @@ -2128,12 +2128,12 @@ body[data-page='admin-status-overview'] .cbi-title .label.notice { } /* Remove fade when hovered */ -body[data-page='admin-status-overview'] .cbi-title .label.notice:hover { +.cbi-title > h3 > .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 { +.cbi-title > h3 > .label { cursor: pointer; font-weight: normal; font-family: Arial,Verdana,sans-serif; @@ -2142,12 +2142,12 @@ body[data-page='admin-status-overview'] .cbi-title .label { /* 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 { + .cbi-title > h3 > .label { line-height: 3em; } - body[data-page='admin-status-overview'] .cbi-title h3 { + .cbi-title h3 { align-items: center; } } -/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ +/* === END HIDE/SHOW LABEL BUTTONS === */