Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

themes: generalize indicator markup and styling

Browse source 
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2020-03-30 17:05:05 +02:00
parent 3d96519592
commit ccb7e4a4a7
8 changed files with 88 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -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;
}

2
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
View file

@ -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>

9
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View file

@ -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;
}

2
themes/luci-theme-material/luasrc/view/themes/material/header.htm
View file

@ -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>

16
themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
View file

@ -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,

2
themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
View file

@ -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>

74
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
View file

@ -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,

8
themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
View file

@ -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>