Jo-Philipp Wich
GitHub
commit
dc2877d39f
5 changed files with 159 additions and 96 deletions
|
|
@ -108,6 +108,7 @@ strong {
|
|||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -118,8 +119,9 @@ body {
|
|||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
font-family: sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -241,6 +243,15 @@ h4 {
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.PC-hide {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cbi-section {
|
||||
margin: 1rem 0 0 0;
|
||||
padding: 2rem;
|
||||
|
|
@ -337,7 +348,7 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
|
|||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: none !important;
|
||||
background-color: #468ea485;
|
||||
background-color: #9bc1cc;
|
||||
}
|
||||
|
||||
.cbi-section .table #memtotal > div > div > div,
|
||||
|
|
@ -412,7 +423,6 @@ td > table > tbody > tr > td,
|
|||
.btn, .cbi-button {
|
||||
margin: 0 .8rem .5rem 0;
|
||||
-webkit-appearance: none;
|
||||
text-transform: uppercase;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background-color: #F0F0F0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
|
@ -538,6 +548,7 @@ td > table > tbody > tr > td,
|
|||
.container .cbi-map .cbi-tabmenu + div {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
@ -562,7 +573,7 @@ td > table > tbody > tr > td,
|
|||
.tabs > li[class~="active"],
|
||||
.tabs > li:hover {
|
||||
cursor: pointer;
|
||||
background-color: #0099CC;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.tabs > li[class~="active"] > a,
|
||||
|
|
@ -634,7 +645,7 @@ td > table > tbody > tr > td,
|
|||
}
|
||||
|
||||
.cbi-value {
|
||||
padding: .5rem 0;
|
||||
padding: 6px 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1103,6 +1114,9 @@ td > .ifacebadge,
|
|||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#iwsvg, #bwsvg {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ifacebox {
|
||||
background-color: #f9f9f9;
|
||||
|
|
@ -1497,13 +1511,39 @@ header > .container > .pull-right > * {
|
|||
.node-network-network .cbi-rowstyle-2 .ifacebox-body {
|
||||
background-color: #fff;
|
||||
}
|
||||
.lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu + div {
|
||||
overflow: inherit;
|
||||
}
|
||||
/* fix Network Wireless*/
|
||||
.node-network-wireless .cbi-section-node {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* applyreboot fix */
|
||||
|
||||
#maincontainer {
|
||||
text-align: center;
|
||||
}
|
||||
#maincontainer > #maincontent {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
max-width: 800px;
|
||||
width: 40%;
|
||||
}
|
||||
#applyreboot-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#applyreboot-section {
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#applyreboot-section > div {
|
||||
margin: 1rem 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
#applyreboot-container {
|
||||
margin: 90px 2rem 2rem 2rem;
|
||||
}
|
||||
|
|
@ -1513,30 +1553,15 @@ header > .container > .pull-right > * {
|
|||
line-height: 300%;
|
||||
}
|
||||
|
||||
#applyreboot-section .bar-container {
|
||||
background: transparent;
|
||||
height: 20px;
|
||||
border: 1px solid #b7b7b7;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#applyreboot-section .bar-container .bar {
|
||||
background: #F24C7C;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Shared style */
|
||||
header, .main {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
header {
|
||||
height: 70px;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
header {
|
||||
padding-right: 1rem;
|
||||
|
|
@ -1700,7 +1725,7 @@ header .logout a {
|
|||
|
||||
footer {
|
||||
text-align: right;
|
||||
padding: 1rem;
|
||||
padding-right: 1rem;
|
||||
color: #aaa;
|
||||
font-size: 0.8rem;
|
||||
text-shadow: 0px 0px 2px #BBB;
|
||||
|
|
@ -1713,8 +1738,7 @@ footer {
|
|||
|
||||
/* The style of the prompt message */
|
||||
.alert-message {
|
||||
padding: 20px 15%;
|
||||
border: 1px solid #4A5368;
|
||||
padding: 13px 11%;
|
||||
border-radius: 10px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
|
@ -1734,37 +1758,42 @@ footer {
|
|||
}
|
||||
|
||||
.alert-message > h4 {
|
||||
padding: 17px 0 17px 36px;
|
||||
padding: 7px 0 7px 36px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
background: url(./no-pwd.png) no-repeat left 43%/ 28px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.alert-message > p {
|
||||
font-size: 16px;
|
||||
line-height: 2rem;
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-message a {
|
||||
padding: 8px 0;
|
||||
margin-top: 17px;
|
||||
padding: 4px 0;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
|
||||
/* All styles of the login interface */
|
||||
.node-main-login {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
background: #fff url(./loginBG.png) no-repeat center center / cover;
|
||||
}
|
||||
.node-main-login header {
|
||||
display: none;
|
||||
}
|
||||
.node-main-login .main {
|
||||
height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.node-main-login > .main > .main-left {
|
||||
display: none;
|
||||
|
|
@ -1772,50 +1801,55 @@ footer {
|
|||
|
||||
.node-main-login > .main > .main-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff url(./loginBG.png) no-repeat center center / cover;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.node-main-login > .main #maincontent {
|
||||
position: absolute;
|
||||
min-width: 492px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 47%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.node-main-login > .main .container {
|
||||
padding: 0;
|
||||
width: 30%;
|
||||
max-width: 600px;
|
||||
max-width: 492px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.node-main-login > .main .logoImg a {
|
||||
margin: 0 0 20px 0;
|
||||
margin: 0 0 18px 0;
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.node-main-login > .main .logoImg img:first-child {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.node-main-login .warning {
|
||||
background-color: #3f4a62;
|
||||
color: #E9E4E4;
|
||||
background-color: #3E4A62;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.node-main-login > .main form h2 {
|
||||
margin: 20px 0 16px;
|
||||
margin: 17px 0;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
color: #FFFFFC;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.node-main-login > .main form .cbi-map-descr {
|
||||
margin: 16px 0 13px;
|
||||
margin: 0 0 12px;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
color: #B1B6BB;
|
||||
|
|
@ -1839,7 +1873,7 @@ footer {
|
|||
}
|
||||
|
||||
.node-main-login > .main form .cbi-value-field {
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -1849,7 +1883,7 @@ footer {
|
|||
padding-left: 48px;
|
||||
width: 100%;
|
||||
border: 1px solid #556270;
|
||||
height: 48px;
|
||||
height: 42px;
|
||||
border-radius: 50px;
|
||||
font-size: 20px;
|
||||
color: #9c9fa1;
|
||||
|
|
@ -1914,9 +1948,15 @@ footer {
|
|||
|
||||
|
||||
/* Interface after login */
|
||||
.logged-in .main {
|
||||
.logged-in {
|
||||
background-color: #EBF1F6;
|
||||
}
|
||||
.logged-in header {
|
||||
height: 70px;
|
||||
}
|
||||
.logged-in .main {
|
||||
overflow: hidden;
|
||||
}
|
||||
.logged-in .main-right {
|
||||
padding: 0 1rem 3rem 0;
|
||||
margin-top: 90px;
|
||||
|
|
@ -1964,12 +2004,7 @@ footer {
|
|||
width: auto;
|
||||
border: none;
|
||||
background-color: #468EA4;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 580px) {
|
||||
.logoImg img {
|
||||
height: 48px;
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
|
|
@ -2049,7 +2084,9 @@ footer {
|
|||
position: fixed;
|
||||
z-index: 100;
|
||||
right: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #0000007d;
|
||||
border-radius: 0;
|
||||
min-width: 0;
|
||||
|
|
@ -2068,9 +2105,6 @@ footer {
|
|||
.node-main-login > .main .container {
|
||||
width: 60%;
|
||||
}
|
||||
.node-main-login .main {
|
||||
background: #354057;
|
||||
}
|
||||
|
||||
.showSide {
|
||||
padding: 0.1rem;
|
||||
|
|
@ -2254,23 +2288,34 @@ footer {
|
|||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.node-main-login > .main > .main-right {
|
||||
background: #354057;
|
||||
.node-main-login {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.node-main-login > .main .logoImg a {
|
||||
font-size: 18px;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 30px;
|
||||
margin: 12px 0 22px 0;
|
||||
color: #354057;
|
||||
}
|
||||
|
||||
.node-main-login > .main #maincontent {
|
||||
padding-top: 0;
|
||||
padding-bottom: 1rem;
|
||||
min-width: 100%;
|
||||
top: 0;
|
||||
transform: translateY(0) translateX(-50%);
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
padding: 8px 15%;
|
||||
}
|
||||
|
||||
.alert-message > h4,
|
||||
.alert-message > h4{
|
||||
font-size: 14px;
|
||||
}
|
||||
.alert-message > p,
|
||||
.alert-message a {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.a
|
||||
lert-message > h4 {
|
||||
|
|
@ -2282,13 +2327,20 @@ footer {
|
|||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.node-main-login .warning {
|
||||
background-color: #F5F5F6;
|
||||
color: #354057;
|
||||
}
|
||||
|
||||
.alert-message a {
|
||||
color: #f24c7c;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.node-main-login > .main form h2 {
|
||||
font-size: 16px;
|
||||
margin: 20px 0 16px;
|
||||
}
|
||||
|
||||
.node-main-login > .main .container {
|
||||
min-width: 90%;
|
||||
color: #354057;
|
||||
}
|
||||
|
||||
.node-main-login > .main form .cbi-value-field input {
|
||||
|
|
@ -2318,6 +2370,14 @@ footer {
|
|||
left: auto;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.PC-hide {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
@ -2364,10 +2424,6 @@ footer {
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.4rem;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -2392,6 +2448,7 @@ footer {
|
|||
font-family: inherit;
|
||||
min-width: inherit;
|
||||
background-color: #FFF;
|
||||
border-radius: 20px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
|
@ -2404,6 +2461,10 @@ footer {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.node-main-login > .main .container {
|
||||
min-width: 90%;
|
||||
}
|
||||
|
||||
.th, .td {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
|
@ -2437,7 +2498,7 @@ footer {
|
|||
}
|
||||
|
||||
.alert-message {
|
||||
padding: 8px 5%;
|
||||
padding: 8px 10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -268,5 +268,6 @@
|
|||
$('.logged-in .main-right').width( $(window).width() - $('.logged-in .main-left').width() - 50 );
|
||||
}
|
||||
|
||||
$('body.logged-in').css('min-height', $(window).height());
|
||||
|
||||
})(jQuery);
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
|
|
@ -25,6 +25,8 @@
|
|||
local categories = disp.node_childs(tree)
|
||||
%>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mobile-hide">
|
||||
<a href="https://github.com/openwrt/luci">Powered by<%= ver.luciname %> (<%= ver.luciversion %>)</a> /
|
||||
|
|
@ -37,8 +39,6 @@
|
|||
</ul>
|
||||
<% end %>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
|
||||
|
|
|
|||
|
|
@ -273,11 +273,12 @@
|
|||
</div>
|
||||
<div class="main-right">
|
||||
<div id="maincontent">
|
||||
<div class="logoImg">
|
||||
<img class="mobile-hide" src="<%=media%>/logo.png" alt="Rosy">
|
||||
<img src="<%=media%>/mobile-loginBG.png" class="PC-hide">
|
||||
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="logoImg">
|
||||
<img src="<%=media%>/logo.png" alt="Rosy">
|
||||
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
|
||||
</div>
|
||||
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
|
||||
<div class="alert-message warning">
|
||||
<h4>
|
||||
|
|
|
|||
Loading…
Reference in a new issue