luci-theme-material: overview boxes and buttons

Change mouse icon from text
cursor to pointer. Fix buttons not
being same min-width. Create
larger buttons for smaller screens,
same behaviour as
luci-theme-bootstrap. Slightly
fade "show" button: no variable
for disabled opacity like
luci-theme-bootstrap, assuming
0.7. Remove fade when hovered.

Resolve mismatched spacing for
each heading in box, fixing
spacing for when contents are
hidden and adding spacing
when contents are shown.

Signed-off-by: Joshua Criss <redacted>

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 891cb64fd40e368635cc77c30fba79f554b9cc23..b3db43b53a8e6b77e23931e7ed76f2e18852fff9 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -3180,6 +3180,63 @@ input[name="nslookup"] {
        }*/
 }
 
+/* === STATUS OVERVIEW: HIDE/SHOW 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 {
+       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;
+}
+
+/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */
+
+/* === STATUS OVERVIEW: 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 {
+       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;
+       }
+}
+
+/* === END STATUS OVERVIEW: FIX BOX SPACING === */
+
 /* === STATUS OVERVIEW: MATCH IFACEBOX COLOUR WITH HEADER === */
 
 /* Set text to header colour when using the header colour background to match same behaviour, for e.g. IPv4 Upstream and IPv6 Upstream boxes */