margin: .25em 0;
}
-.label {
+.label,
+header [data-indicator] {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
text-shadow: none;
}
+header [data-indicator][data-clickable] {
+ cursor: pointer;
+}
+
a.label:link,
a.label:visited {
color: #fff;
background-color: #46a546;
}
-.label.notice {
+.label.notice,
+header [data-indicator][data-style="active"] {
background-color: #62cffc;
}
<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>
background-color: #5cb85c !important;
}
-.notice {
+.notice,
+[data-indicator]:not([data-style="inactive"]) {
background-color: #5bc0de !important;
}
flex-direction: column;
}
-.label {
+.label,
+[data-indicator] {
font-size: .8rem;
font-weight: bold;
padding: .3rem .8rem;
padding: .3rem .6rem;
}
- .label {
+ .label,
+ [data-indicator] {
padding: .2rem .6rem;
}
<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>
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;
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,
<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>
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 {
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,
<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>