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