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 51931f550e..c85bd866d3 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 b9e1fbcdb6..39415154aa 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 @@
<%=boardinfo.hostname or "?"%>
-
+
<%:Auto Refresh%> <%:on%>
<%:Auto Refresh%> <%:off%>
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 8645c60e42..f3922c00f9 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 7e222b5756..0d9d70073d 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 @@
<%=boardinfo.hostname or "?"%>
-
+
<%:Auto Refresh%> <%:on%>
<%:Auto Refresh%> <%:off%>
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 a1b85f658e..22f32ef7dd 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;
-}
-
-#xhr_poll_status #xhr_poll_status_off {
- font-weight: bold;
- color: #FF0000;
-}
-
-#xhr_poll_status #xhr_poll_status_on {
- font-weight: bold;
- color: #00FF00;
-}
-
#menubar {
position: relative;
width: 100%;
background: #000000;
color: #ffffff;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+#menubar .hostinfo,
+#indicators,
+#modemenu {
+ flex: 1 1 450px;
+ display: flex;
+ align-items: center;
+}
+
+#indicators {
+ justify-content: flex-end;
+ flex-wrap: wrap;
+ margin-right: 1em;
+}
+
+#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 0a29f3ad37..e5b20992cb 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 @@
<%=(boardinfo.hostname or "?")%> | <%=ver.distversion%> |
<%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%>
+
+
+
- | <%:Auto Refresh%>:
- <%:on%>
- <%:off%>
+ <%:Auto Refresh%>: <%:on%>
+ <%:Auto Refresh%>: <%:off%>