update
This commit is contained in:
Chandika Nurdiansyah
parent
940b1c511e
commit
bc37b94373
|
|
@ -1,13 +1,35 @@
|
|||
|
||||
(function() {
|
||||
(function () {
|
||||
// your page initialization code here
|
||||
// the DOM will be available here
|
||||
|
||||
const toggler = document.querySelector(".toggler")
|
||||
console.log(toggler)
|
||||
toggler.addEventListener("click", function(e){
|
||||
var element = document.querySelector(".navbar");
|
||||
const toggler = document.querySelector(".toggler");
|
||||
console.log(toggler);
|
||||
toggler.addEventListener(
|
||||
"click",
|
||||
function (e) {
|
||||
const element = document.querySelector(".navbar");
|
||||
element.classList.toggle("active");
|
||||
}, false)
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
const isDark = localStorage.getItem("isDark");
|
||||
if (isDark == 1) {
|
||||
const element = document.querySelector("body");
|
||||
element.classList.add("dark");
|
||||
}
|
||||
const themetoggler = document.querySelector(".themetoggler");
|
||||
themetoggler.addEventListener(
|
||||
"click",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
const element = document.querySelector("body");
|
||||
element.classList.toggle("dark");
|
||||
|
||||
const isDark = localStorage.getItem("isDark");
|
||||
localStorage.setItem("isDark", isDark == 1 ? 0 : 1);
|
||||
},
|
||||
false
|
||||
);
|
||||
})();
|
||||
|
||||
|
|
@ -52,9 +52,6 @@
|
|||
text-align: center !important;
|
||||
background: inherit;
|
||||
}
|
||||
.td[width="33%"] {
|
||||
padding: 1.1em;
|
||||
}
|
||||
.table[width="33%"],
|
||||
.th[width="33%"],
|
||||
.td[width="33%"] {
|
||||
|
|
@ -214,10 +211,21 @@ header > .fill > .container {
|
|||
padding: 0.5rem 1rem 0;
|
||||
}
|
||||
header > .fill > .container > #logo {
|
||||
margin: 0 3.5rem 0 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
transform: translateY(-50%);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: calc(16rem);
|
||||
}
|
||||
header > .fill > .container > #logo > img {
|
||||
width: calc(0% + 10rem);
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin-top: -0.1rem;
|
||||
}
|
||||
header > .fill > .container > .brand {
|
||||
|
|
@ -361,7 +369,7 @@ small {
|
|||
float: left;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
width: 20%;
|
||||
width: calc(100% / 6);
|
||||
text-decoration: none;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
|
@ -437,9 +445,9 @@ small {
|
|||
.main > .main-left {
|
||||
position: fixed;
|
||||
top: 3.5rem;
|
||||
width: calc(0% + 16rem);
|
||||
float: left;
|
||||
overflow-x: auto;
|
||||
width: calc(0% + 16rem);
|
||||
height: calc(100% - 4rem);
|
||||
background-color: var(--menu-bg-color);
|
||||
transition: visibility 400ms, width 400ms;
|
||||
|
|
@ -2165,12 +2173,12 @@ div > .table > .tr:nth-of-type(2n),
|
|||
margin-top: 0;
|
||||
}
|
||||
header > .fill > .container > #logo {
|
||||
margin: 0 2.5rem 0 0.5rem;
|
||||
width: calc(13rem);
|
||||
}
|
||||
.main-left {
|
||||
.main > .main-left{
|
||||
width: calc(0% + 13rem);
|
||||
}
|
||||
.main-right {
|
||||
.main > .main-right {
|
||||
width: calc(100% - 13rem);
|
||||
}
|
||||
.btn:not(button),
|
||||
|
|
@ -2219,12 +2227,12 @@ div > .table > .tr:nth-of-type(2n),
|
|||
top: 3.5rem;
|
||||
height: calc(100% - 3.5rem);
|
||||
}
|
||||
.main-left {
|
||||
.main > .main-left {
|
||||
top: 3.5rem;
|
||||
width: calc(0% + 13rem);
|
||||
height: calc(100% - 3.5rem);
|
||||
}
|
||||
.main-right {
|
||||
.main > .main-right {
|
||||
width: calc(100% - 13rem);
|
||||
}
|
||||
.tabs > li > a,
|
||||
|
|
@ -2288,12 +2296,12 @@ div > .table > .tr:nth-of-type(2n),
|
|||
.main > .loading > span {
|
||||
top: 25%;
|
||||
}
|
||||
.main-left {
|
||||
.main > .main-left {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
visibility: hidden;
|
||||
}
|
||||
.main-right {
|
||||
.main > .main-right {
|
||||
width: 100%;
|
||||
}
|
||||
.showSide {
|
||||
|
|
@ -2449,6 +2457,19 @@ div > .table > .tr:nth-of-type(2n),
|
|||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
header > .fill > .container > #logo {
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top:0;
|
||||
width: 100px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
header > .fill > .container > #logo > img{
|
||||
width: 100%;
|
||||
margin-top:0;
|
||||
}
|
||||
.cbi-progressbar::after {
|
||||
font-size: 0.95em;
|
||||
line-height: 1.5;
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<link rel="stylesheet" href="<%=media%>/gaya/gaya.css">
|
||||
<link rel="stylesheet" href="<%=media%>/gaya/gaya.dark.css">
|
||||
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
|
||||
<% if node and node.css then %>
|
||||
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
|
||||
|
|
@ -67,6 +68,7 @@
|
|||
<a href="/cgi-bin/luci/admin/nas/tinyfm"><img src="<%=media%>/images/file.png" /></a>
|
||||
<a href="/cgi-bin/luci/admin/status/vnstat2"><img src="<%=media%>/images/vnstat.png" /></a>
|
||||
<a href="/cgi-bin/luci/admin/status/about"><img src="<%=media%>/images/about.png" /></a>
|
||||
<a href="javascript:void(0)" class="themetoggler"><img src="<%=media%>/images/reload.png" /></a>
|
||||
</div>
|
||||
<label class="toggler">
|
||||
<img src="<%=media%>/gaya/icons/arrow.svg" alt="">
|
||||
|
|
|
|||
Loading…
Reference in New Issue