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-openwrt: refining hide/show buttons

Browse Source 
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.
Remove fade when hovered.
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.
Work with existing mobile styling
for 480px and below, make
bigger buttons and fix
heading alignment.

Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
This commit is contained in:
Joshua Criss
2026-04-02 15:39:24 +11:00
committed by Paul Donald
parent 9e4058cdca
commit b9dff54410
1 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
View File

@@ -2115,3 +2115,38 @@ select + .cbi-button {
display: none;
}
}
/* === STATUS OVERVIEW: HIDE/SHOW 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 {
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;
}
/* 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;
}
}
/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */