themes: generalize indicator markup and styling

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

2 files changed, 60 insertions, 20 deletions

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;
+#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 f691e7066d..fb7c7f22db 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>