themes: generalize indicator markup and styling

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

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 51931f550e7fdf2303cd325665b79de003748aea..c85bd866d3f7f806eb48129fb805e9c4d4b9da7d 100644 (file)
--- 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 b9e1fbcdb6a270af6d93f7c638c1ad61f65591ec..39415154aa8b378d2989d78a0f562c8bdd08b51d 100644 (file)
--- 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 8645c60e42145f335dfe562f61c99c555c752a6c..f3922c00f95d9acf0857af4a58e6c62b004c8ee3 100644 (file)
--- 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 124314039a82a72d2343a4353226c06097d91f05..32678a322e72ce9f09846d11ae634b56e09b8a0d 100644 (file)
--- 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 f3fc7529f8e202375bc656ff9bb0625aff49923f..d394192f5012388a37f61a0bfb3a6545ac2c4dd9 100644 (file)
--- 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 dc7f3bc8ece930a10ab13cfb876d648f86b917c4..00834b307387d8d625630fe1984d4fb6fc38ff64 100644 (file)
--- 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 a1b85f658e66db34ff08e9a725837863a93bdf06..22f32ef7dd69b5322590967cc1bc5fed75e1e66d 100644 (file)
--- 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 f691e7066d68b573a533330b171c8e07c04c51f2..fb7c7f22dbc879aa4c59bd5bfb62d5e2a5ec4666 100644 (file)
--- 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>