openwrt · ghost · Apr 14, 2026
diff --git 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
@@ -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
@@ -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
@@ -2117,23 +2117,23 @@ 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;
   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;
 }
 
 /* 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 === */