openwrt/luci
1
0
Fork 0
mirror of https://github.com/openwrt/luci.git synced 2026-04-15 10:51:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

luci-theme-material: overview boxes and buttons

Browse Source 
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 <owlsy@outlook.com.au>
This commit is contained in:
Joshua Criss
2026-04-03 10:02:55 +11:00
committed by Paul Donald
parent 1837866a6a
commit 6179b709bf
1 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View File

@@ -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 */