diff options
8 files changed, 87 insertions, 34 deletions
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 51931f550..c85bd866d 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -1774,7 +1774,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin: .25em 0; } -.label { +.label, +header [data-indicator] { padding: 1px 3px 2px; font-size: 9.75px; font-weight: bold; @@ -1786,6 +1787,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { text-shadow: none; } +header [data-indicator][data-clickable] { + cursor: pointer; +} + a.label:link, a.label:visited { color: #fff; @@ -1807,7 +1812,8 @@ a.label:hover { background-color: #46a546; } -.label.notice { +.label.notice, +header [data-indicator][data-style="active"] { background-color: #62cffc; } diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index b9e1fbcdb..39415154a 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -46,7 +46,7 @@ <div class="container"> <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a> <ul class="nav" id="topmenu" style="display:none"></ul> - <div class="pull-right"> + <div id="indicators" class="pull-right"> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> <span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span> <span class="label" id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%> <%:off%></span> 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 8645c60e4..f3922c00f 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -443,7 +443,8 @@ header > .fill > .container > .status > * { background-color: #5cb85c !important; } -.notice { +.notice, +[data-indicator]:not([data-style="inactive"]) { background-color: #5bc0de !important; } @@ -2091,7 +2092,8 @@ span[data-tooltip] .label { flex-direction: column; } -.label { +.label, +[data-indicator] { font-size: .8rem; font-weight: bold; padding: .3rem .8rem; @@ -2480,7 +2482,8 @@ input[name="nslookup"] { padding: .3rem .6rem; } - .label { + .label, + [data-indicator] { padding: .2rem .6rem; } diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm index 124314039..32678a322 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -191,7 +191,7 @@ <span class="showSide"></span> <a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"><img src="<%=media%>/brand.png" alt="OpenWrt"></a> <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a> - <div class="status"> + <div class="status" id="indicators"> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> <span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span> <span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%></span> <%:off%></span> 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 f3fc7529f..d394192f5 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 @@ -89,12 +89,12 @@ body { flex: 3; } -#menubar .indicators { +#indicators { flex: 1 1 25%; text-align: right; } -#menubar .indicators > * { +#indicators > * { background: var(--secondary-bright-color); color: var(--main-bright-color); display: inline-block; @@ -107,15 +107,19 @@ body { white-space: nowrap; } -#menubar .indicators > * > #xhr_poll_status_off { +#indicators > [data-style="inactive"], +#indicators > * > #xhr_poll_status_off { background: var(--main-bright-color); color: var(--secondary-bright-color); + border: 2px solid var(--secondary-bright-color); + line-height: calc(1.5em - 4px); + padding: 0 calc(.5em - 2px); +} + +#indicators > * > #xhr_poll_status_off { border-radius: 1em; margin: 0 -.5em; display: block; - padding: 0 .5em; - border: 2px solid var(--secondary-bright-color); - line-height: calc(1.5em - 4px); } #menubar h2, diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm index dc7f3bc8e..00834b307 100644 --- a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm +++ b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm @@ -206,7 +206,7 @@ <span class="hostname"><%=(boardinfo.hostname or "?")%></span> <span class="distversion"><%=ver.distversion%></span> - <span class="indicators"> + <span id="indicators"> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> <span id="xhr_poll_status_on" style="display:none"><%:Refreshing%></span> <span id="xhr_poll_status_off" style="display:none"><%:Paused%></span> 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 a1b85f658..22f32ef7d 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 @@ -328,25 +328,43 @@ div.hostinfo { float: right; } -#xhr_poll_status { - cursor: pointer; +#menubar { + position: relative; + width: 100%; + background: #000000; + color: #ffffff; + display: flex; + flex-wrap: wrap; } -#xhr_poll_status #xhr_poll_status_off { - font-weight: bold; - color: #FF0000; +#menubar .hostinfo, +#indicators, +#modemenu { + flex: 1 1 450px; + display: flex; + align-items: center; } -#xhr_poll_status #xhr_poll_status_on { - font-weight: bold; - color: #00FF00; +#indicators { + justify-content: flex-end; + flex-wrap: wrap; + margin-right: 1em; } -#menubar { - position: relative; - width: 100%; - background: #000000; - color: #ffffff; +#indicators > *, +#indicators > #xhr_poll_status > * { + flex: 0 0 auto; + display: inline-flex; +} + +#modemenu { + flex: 1 1 auto; + padding: 0; + margin: 0; +} + +#modemenu > * { + padding: .5em; } #menubar .warning { @@ -354,17 +372,37 @@ div.hostinfo { background-color: #557788; } +#indicators > #xhr_poll_status, +#indicators > [data-clickable="true"] { + cursor: pointer; +} + +#indicators > :not([id="xhr_poll_status"]), +#indicators > #xhr_poll_status > * { + text-transform: uppercase; + background: #90c0e0 !important; + color: #000 !important; + font-size: 11px; + padding: .125em .5em; + margin: .125em; + border-radius: .6em; +} + +#indicators > [data-style="inactive"], +#indicators > * > #xhr_poll_status_off { + border: 1px solid #90c0e0; + background: #000 !important; + color: #90c0e0 !important; + padding: calc(.125em - 1px) calc(.5em - 1px); +} + html #menubar a:link, html #menubar a:visited { - position: relative; - display: block; - padding: 0.5em; background: #000000; color: #ffffff; text-decoration: none; } - html #menubar a:link:hover, html #menubar a:visited:hover, html #menubar a:link:active, diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index f691e7066..fb7c7f22d 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -201,10 +201,12 @@ <div class="hostinfo"> <%=(boardinfo.hostname or "?")%> | <%=ver.distversion%> | <%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%> +</div> + +<div id="indicators"> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> - | <%:Auto Refresh%>: - <span id="xhr_poll_status_on"><%:on%></span> - <span id="xhr_poll_status_off" style="display:none"><%:off%></span> + <span id="xhr_poll_status_on"><%:Auto Refresh%>: <%:on%></span> + <span id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%>: <%:off%></span> </span> </div> |