mirror of
https://github.com/Ysurac/openmptcprouter-feeds.git
synced 2025-03-09 15:40:03 +00:00
Merge branch 'test' into develop
This commit is contained in:
suyuan168
commit
746448df70
26 changed files with 804 additions and 4673 deletions
|
|
@ -1,2 +1,2 @@
|
|||
Drop background here!
|
||||
accept jpg png gif and mp4
|
||||
accept jpg png gif mp4 webm
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#adaeaf" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 222 B |
|
|
@ -1,219 +0,0 @@
|
|||
/**
|
||||
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
|
||||
*
|
||||
* luci-theme-argon
|
||||
* Copyright 2019 Jerrykuku <jerrykuku@qq.com>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-material:
|
||||
* Copyright 2015 Lutty Yang <lutty@wcan.in>
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Agron Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
||||
* https://unsplash.com/
|
||||
* Font generate by Icomoon<icomoon.io>
|
||||
*
|
||||
* Licensed to the public under the Apache License 2.0
|
||||
*/
|
||||
|
||||
document.addEventListener('luci-loaded', function(ev) {
|
||||
(function ($) {
|
||||
|
||||
/**
|
||||
* trim text, Remove spaces, wrap
|
||||
* @param text
|
||||
* @returns {string}
|
||||
*/
|
||||
function trimText(text) {
|
||||
return text.replace(/[ \t\n\r]+/g, " ");
|
||||
}
|
||||
|
||||
var lastNode = undefined;
|
||||
var mainNodeName = undefined;
|
||||
|
||||
var nodeUrl = "";
|
||||
(function(node){
|
||||
var luciLocation;
|
||||
if (node[0] == "admin"){
|
||||
luciLocation = [node[1], node[2]];
|
||||
}else{
|
||||
luciLocation = node;
|
||||
}
|
||||
|
||||
for(var i in luciLocation){
|
||||
nodeUrl += luciLocation[i];
|
||||
if (i != luciLocation.length - 1){
|
||||
nodeUrl += "/";
|
||||
}
|
||||
}
|
||||
})(luciLocation);
|
||||
|
||||
/**
|
||||
* get the current node by Burl (primary)
|
||||
* @returns {boolean} success?
|
||||
*/
|
||||
function getCurrentNodeByUrl() {
|
||||
var ret = false;
|
||||
if (!$('body').hasClass('logged-in')) {
|
||||
luciLocation = ["Main", "Login"];
|
||||
return true;
|
||||
}
|
||||
|
||||
$(".main > .main-left > .nav > .slide > .menu").each(function () {
|
||||
var ulNode = $(this);
|
||||
ulNode.next().find("a").each(function () {
|
||||
var that = $(this);
|
||||
var href = that.attr("href");
|
||||
|
||||
if (href.indexOf(nodeUrl) != -1) {
|
||||
ulNode.click();
|
||||
ulNode.next(".slide-menu").stop(true, true);
|
||||
lastNode = that.parent();
|
||||
lastNode.addClass("active");
|
||||
ret = true;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
/**
|
||||
* menu click
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .menu").click(function () {
|
||||
var ul = $(this).next(".slide-menu");
|
||||
var menu = $(this);
|
||||
$(".main > .main-left > .nav > .slide > .menu").each(function () {
|
||||
var ulNode = $(this);
|
||||
ulNode.removeClass("active");
|
||||
ulNode.next(".slide-menu").stop(true).slideUp("fast")
|
||||
});
|
||||
if (!ul.is(":visible")) {
|
||||
menu.addClass("active");
|
||||
ul.addClass("active");
|
||||
ul.stop(true).slideDown("fast");
|
||||
} else {
|
||||
ul.stop(true).slideUp("fast", function () {
|
||||
menu.removeClass("active");
|
||||
ul.removeClass("active");
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* hook menu click and add the hash
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).parent().addClass("active");
|
||||
return true;
|
||||
});
|
||||
|
||||
/**
|
||||
* fix menu click
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).addClass("active");
|
||||
window.location = $($(this).find("a")[0]).attr("href");
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* get current node and open it
|
||||
*/
|
||||
if (getCurrentNodeByUrl()) {
|
||||
mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
|
||||
mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
|
||||
$("body").addClass(mainNodeName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar expand
|
||||
*/
|
||||
var showSide = false;
|
||||
$(".showSide").click(function () {
|
||||
if (showSide) {
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").width(0);
|
||||
$(".main-right").css("overflow-y", "visible");
|
||||
showSide = false;
|
||||
} else {
|
||||
$(".darkMask").stop(true).fadeIn("fast");
|
||||
$(".main-left").width("13rem")
|
||||
$(".main-right").css("overflow-y", "hidden");
|
||||
showSide = true;
|
||||
}
|
||||
});
|
||||
|
||||
$(".darkMask").click(function () {
|
||||
if (showSide) {
|
||||
showSide = false;
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").width(0);
|
||||
$(".main-right").css("overflow-y", "visible");
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
if ($(window).width() > 921) {
|
||||
$(".main-left").css("width", "");
|
||||
$(".darkMask").stop(true);
|
||||
$(".darkMask").css("display", "none");
|
||||
showSide = false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* fix legend position
|
||||
*/
|
||||
$("legend").each(function () {
|
||||
var that = $(this);
|
||||
that.after("<span class='panel-title'>" + that.text() + "</span>");
|
||||
});
|
||||
|
||||
$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
|
||||
var that = $(this);
|
||||
if (that.text().trim() == ""){
|
||||
that.css("display", "none");
|
||||
}
|
||||
});
|
||||
|
||||
$(".main-right").focus();
|
||||
$(".main-right").blur();
|
||||
$("input").attr("size", "0");
|
||||
$(".cbi-button-up").val("__");
|
||||
$(".cbi-button-down").val("__");
|
||||
$(".slide > a").removeAttr("href");
|
||||
|
||||
if (mainNodeName != undefined) {
|
||||
console.log(mainNodeName);
|
||||
switch (mainNodeName) {
|
||||
case "node-status-system_log":
|
||||
case "node-status-kernel_log":
|
||||
$("#syslog").focus(function () {
|
||||
$("#syslog").blur();
|
||||
$(".main-right").focus();
|
||||
$(".main-right").blur();
|
||||
});
|
||||
break;
|
||||
case "node-status-firewall":
|
||||
var button = $(".node-status-firewall > .main fieldset li > a");
|
||||
button.addClass("cbi-button cbi-button-reset a-to-btn");
|
||||
break;
|
||||
case "node-system-reboot":
|
||||
var button = $(".node-system-reboot > .main > .main-right p > a");
|
||||
button.addClass("cbi-button cbi-input-reset a-to-btn");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
});
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// out: ../css/cascade.css, compress: false , sourceMap: false
|
||||
// out: ../css/cascade.css, compress: true , sourceMap: false
|
||||
/**
|
||||
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
|
||||
*
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-material:
|
||||
* luci-theme-material:
|
||||
* Copyright 2015 Lutty Yang <lutty@wcan.in>
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
/*
|
||||
* Include base and custom css
|
||||
*/
|
||||
@import url("pure-min.less");
|
||||
@import url("fonts.less");
|
||||
|
||||
@import url("fonts.css?v=3");
|
||||
@import url("pure-min.css?v=1");
|
||||
|
||||
:root {
|
||||
--primary: #5e72e4;
|
||||
|
|
@ -102,9 +102,11 @@ html {
|
|||
body {
|
||||
font-size: 0.875rem;
|
||||
background-color: #f4f5f7;
|
||||
|
||||
background-color: var(--background-color);
|
||||
color: #32325d;
|
||||
color: var(--gray-dark);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -364,13 +366,14 @@ hr {
|
|||
background-color: #000;
|
||||
background-color: var(--darker);
|
||||
overflow: hidden;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.volume-control{
|
||||
.volume-control {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
|
|
@ -380,12 +383,13 @@ hr {
|
|||
cursor: pointer;
|
||||
background-size: contain;
|
||||
background-image: url(../img/volume_high.svg);
|
||||
&.mute{
|
||||
|
||||
&.mute {
|
||||
background-image: url(../img/volume_off.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.main-bg{
|
||||
.main-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -427,6 +431,9 @@ hr {
|
|||
max-width: 420px;
|
||||
background-color: #fff;
|
||||
background-color: var(--white);
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius));
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
background-color: rgba(244, 245, 247, var(--blur-opacity));
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
|
|
@ -509,7 +516,7 @@ hr {
|
|||
box-sizing: border-box;
|
||||
transition: all .3s cubic-bezier(.68, -.55, .265, 1.55);
|
||||
color: #525461;
|
||||
color:var(--default);
|
||||
color: var(--default);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
|
@ -585,7 +592,8 @@ hr {
|
|||
color: var(--default);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.ftc{
|
||||
|
||||
.ftc {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 100%;
|
||||
|
|
@ -598,15 +606,6 @@ hr {
|
|||
}
|
||||
}
|
||||
|
||||
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
|
||||
.login-page .login-container .login-form {
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius));
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
background-color: rgba(244, 245, 247, var(--blur-opacity));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
header,
|
||||
.main {
|
||||
|
|
@ -659,7 +658,7 @@ small {
|
|||
|
||||
|
||||
.sidenav-header {
|
||||
padding: 1.5rem;
|
||||
padding: 1.5rem .5rem;
|
||||
text-align: center;
|
||||
|
||||
.brand {
|
||||
|
|
@ -671,7 +670,6 @@ small {
|
|||
text-align: center;
|
||||
cursor: default;
|
||||
vertical-align: text-bottom;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -741,31 +739,40 @@ header {
|
|||
.fill {
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 0px solid rgba(255, 255, 255, .08) !important;
|
||||
display: flex;
|
||||
|
||||
.container {
|
||||
height: 2rem;
|
||||
padding: 0 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.showSide {
|
||||
display: none;
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
.showSide {
|
||||
display: none;
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
font-family: "TypoGraphica";
|
||||
text-decoration: none;
|
||||
padding-left: 1rem;
|
||||
cursor: default;
|
||||
vertical-align: text-bottom;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
font-family: "TypoGraphica";
|
||||
text-decoration: none;
|
||||
padding-left: 1rem;
|
||||
cursor: default;
|
||||
vertical-align: text-bottom;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
|
|
@ -775,29 +782,33 @@ header {
|
|||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 1.25rem;
|
||||
float: right;
|
||||
|
||||
span[data-indicator] {
|
||||
span{
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
padding: 0.3rem 0.8rem;
|
||||
margin: 0 0.5rem;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
|
||||
margin: 0 0.25rem;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span[data-indicator="poll-status"] {
|
||||
color: #32325d;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
span[data-style="active"] {
|
||||
color: #32325d !important;
|
||||
background-color: #fff;
|
||||
|
||||
background-color: var(--green);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -849,8 +860,8 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|||
.alert,
|
||||
.alert-message {
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 0;
|
||||
border-radius: 0.375rem !important;
|
||||
background-color: #fff;
|
||||
|
|
@ -862,7 +873,9 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|||
}
|
||||
|
||||
h4 {
|
||||
padding: 0rem 1.5rem 0.75rem 0rem;
|
||||
padding: 0.25rem 0rem;
|
||||
border-radius: 4px;
|
||||
background-color: #ffd600;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -885,7 +898,7 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|||
|
||||
.container .alert,
|
||||
.container .alert-message {
|
||||
margin-top: 1rem;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -976,10 +989,9 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|||
|
||||
ul {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -988,6 +1000,12 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|||
margin: 0 0.5rem 0 2.5rem;
|
||||
padding: 0rem 0.5rem;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
border-radius: 0.375rem;
|
||||
|
|
@ -997,7 +1015,6 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|||
list-style: none;
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -1274,11 +1291,12 @@ h2 {
|
|||
margin: 0 0 1rem 0;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
color: #32325d;
|
||||
border-radius: .375rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, .03);
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1289,21 +1307,23 @@ h3 {
|
|||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0.8755rem 1.5rem;
|
||||
padding: 0.8755rem 1.25rem;
|
||||
color: #32325d;
|
||||
color: var(--gray-dark);
|
||||
border-radius: .375rem;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: #525f7f;
|
||||
background-color: #e9ecef;
|
||||
background-color: var(--lighter);
|
||||
font-weight: bold;
|
||||
|
||||
em {
|
||||
padding: 0 0.5rem;
|
||||
|
|
@ -1332,7 +1352,7 @@ h5 {
|
|||
font-style: normal;
|
||||
line-height: normal;
|
||||
min-width: inherit;
|
||||
margin: 1.5rem 0;
|
||||
margin: 1.25rem 0;
|
||||
padding: 0rem;
|
||||
border: 0;
|
||||
|
||||
|
|
@ -1351,11 +1371,17 @@ h5 {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cbi-map-descr,
|
||||
.cbi-section-descr {
|
||||
.cbi-map-descr {
|
||||
font-size: small;
|
||||
line-height: 1.42857143;
|
||||
padding: .5rem 1.5rem;
|
||||
line-height: 1.5;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.cbi-section-descr:not(:empty) {
|
||||
|
||||
font-size: small;
|
||||
line-height: 1.5;
|
||||
padding: 1rem 1.25rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.cbi-map-descr+fieldset {
|
||||
|
|
@ -1387,7 +1413,7 @@ fieldset>fieldset,
|
|||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0.8755rem 1.5rem;
|
||||
padding: 0.8755rem 1.25rem;
|
||||
color: #32325d;
|
||||
color: var(--gray-dark);
|
||||
|
||||
|
|
@ -1399,13 +1425,17 @@ fieldset>fieldset,
|
|||
[data-tab-title]>h3:first-child,
|
||||
[data-tab-title]>h4:first-child,
|
||||
[data-tab-title]>p:first-child {
|
||||
padding: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.cbi-section p {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.cbi-tblsection {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -1457,7 +1487,7 @@ tr>th,
|
|||
.cbi-section-table-row::before,
|
||||
#cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) {
|
||||
border-top: thin solid #ddd;
|
||||
padding: 1.1em 1.5rem;
|
||||
padding: 1.1em 1.25rem;
|
||||
}
|
||||
|
||||
#cbi-wireless .td,
|
||||
|
|
@ -1468,7 +1498,7 @@ tr>th,
|
|||
.tr.cbi-section-table-titles>.th {
|
||||
border-top: 0 !important;
|
||||
background-color: #f6f9fc;
|
||||
padding: 1.1em 1.5rem;
|
||||
padding: 1.1em 1.25rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
|
|
@ -1493,6 +1523,11 @@ tr>th,
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-text,
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-password {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
|
||||
.cbi-section-table-row>.cbi-value-field input.cbi-input-password {
|
||||
width: calc(100% - 1.5rem);
|
||||
|
|
@ -1502,6 +1537,13 @@ tr>th,
|
|||
text-align: center !important;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
div>table>tbody>tr:nth-of-type(2n),
|
||||
div>.table>.tr:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
|
|
@ -1553,7 +1595,8 @@ td>table>tbody>tr>td,
|
|||
font-size: 1.2rem;
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
padding: .2rem .3rem;
|
||||
padding: .2rem 1rem;
|
||||
font-size: 0;
|
||||
color: transparent !important;
|
||||
background: url(../icon/arrow.svg) no-repeat center;
|
||||
background-size: 12px 20px;
|
||||
|
|
@ -1778,7 +1821,8 @@ td>table>tbody>tr>td,
|
|||
display: inline-block;
|
||||
padding: 0.875rem 0rem;
|
||||
border-bottom: 0.18751rem solid rgba(0, 0, 0, 0);
|
||||
margin: 0 0.2rem;
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1865,6 +1909,9 @@ td>table>tbody>tr>td,
|
|||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.cbi-section-node {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.cbi-section .cbi-section-remove:nth-of-type(2n),
|
||||
.container>.cbi-section .cbi-section-node:nth-of-type(2n) {
|
||||
|
|
@ -2404,12 +2451,12 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
/* progressbar */
|
||||
.cbi-progressbar {
|
||||
position: relative;
|
||||
min-width: 170px;
|
||||
height: 20px;
|
||||
margin: 6px 0;
|
||||
min-width: 11rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 0;
|
||||
border: thin solid #999;
|
||||
background: #eee;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -2417,8 +2464,8 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
width: 0;
|
||||
height: 100%;
|
||||
transition: width .25s ease-in;
|
||||
background: #5e72e4;
|
||||
background: var(--primary);
|
||||
background: #5bc0de;
|
||||
background: var(--bar-bg);
|
||||
}
|
||||
|
||||
.cbi-progressbar::after {
|
||||
|
|
@ -2426,11 +2473,11 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
font-size-adjust: .38;
|
||||
line-height: normal;
|
||||
line-height: 1.5rem;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
content: attr(title);
|
||||
|
|
@ -2596,6 +2643,7 @@ body.modal-overlay-active #modal_overlay {
|
|||
.cbi-page-actions {
|
||||
padding-top: 1rem;
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cbi-page-actions>form[method="post"] {
|
||||
|
|
@ -2612,10 +2660,12 @@ body.modal-overlay-active #modal_overlay {
|
|||
|
||||
.ifacebadge {
|
||||
display: inline-flex;
|
||||
gap: .2rem;
|
||||
padding: .5rem .8rem;
|
||||
border-bottom: thin solid #ccc;
|
||||
background: #eee;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
td>.ifacebadge,
|
||||
|
|
@ -2628,7 +2678,6 @@ td>.ifacebadge,
|
|||
.ifacebadge>img {
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
margin: 0 .2rem;
|
||||
}
|
||||
|
||||
.ifacebadge>img+img {
|
||||
|
|
@ -2642,13 +2691,16 @@ td>.ifacebadge,
|
|||
|
||||
.network-status-table .ifacebox {
|
||||
flex-grow: 1;
|
||||
margin: .5em;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 0 1.25rem 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.network-status-table .ifacebox-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.network-status-table .ifacebox-body>span {
|
||||
|
|
@ -2659,15 +2711,21 @@ td>.ifacebadge,
|
|||
.network-status-table .ifacebox-body>div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.network-status-table .ifacebox-body .ifacebadge {
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
min-width: 220px;
|
||||
margin: .5em 0em 0 0em;
|
||||
padding: .5em;
|
||||
background-color: #fff;
|
||||
|
||||
>span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
|
|
@ -2787,7 +2845,9 @@ td>.ifacebadge,
|
|||
.ifacebox {
|
||||
line-height: 1.25;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
min-width: 100px;
|
||||
border-bottom: thin solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
|
|
@ -2811,7 +2871,7 @@ td>.ifacebadge,
|
|||
}
|
||||
|
||||
.ifacebox-body {
|
||||
padding: .5em 1rem;
|
||||
padding: 0.875rem 1rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
|
|
@ -2822,6 +2882,7 @@ td>.ifacebadge,
|
|||
.zonebadge {
|
||||
display: inline-block;
|
||||
padding: .2rem .5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.zonebadge .ifacebadge {
|
||||
|
|
@ -2862,17 +2923,17 @@ td>.ifacebadge,
|
|||
}
|
||||
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
|
||||
min-width: 7rem;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.cbi-section-create {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0.25rem 0 0.25rem 1rem;
|
||||
margin: 0.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.cbi-section-create>* {
|
||||
margin: .5rem;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
.cbi-section-remove {
|
||||
|
|
@ -2992,6 +3053,11 @@ label[data-index][data-depends] {
|
|||
content: "";
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .56);
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* diagnostics */
|
||||
|
|
@ -3773,8 +3839,7 @@ pre.command-output {
|
|||
}
|
||||
|
||||
.cbi-progressbar::after {
|
||||
font-size: .5rem;
|
||||
line-height: 1.5;
|
||||
font-size: .6rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3783,10 +3848,22 @@ pre.command-output {
|
|||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 0;
|
||||
|
||||
&.active {
|
||||
width: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-right {
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.darkMask.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.showSide {
|
||||
|
|
@ -3810,7 +3887,7 @@ pre.command-output {
|
|||
}
|
||||
|
||||
|
||||
header>.fill>.container>.brand {
|
||||
header>.fill>.container>.flex1>.brand {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -3915,6 +3992,10 @@ pre.command-output {
|
|||
right: 0 !important;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.login-page .login-container footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3979,4 +4060,4 @@ pre.command-output {
|
|||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// compress: false , sourceMap: false
|
||||
// compress: true , sourceMap: false
|
||||
/**
|
||||
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
|
||||
*
|
||||
|
|
@ -37,6 +37,9 @@ body {
|
|||
|
||||
.login-form {
|
||||
background-color: #1e1e1e;
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius-dark));
|
||||
backdrop-filter: blur(var(--blur-radius-dark));
|
||||
background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
|
||||
|
||||
.brand {
|
||||
color: #adb5bd;
|
||||
|
|
@ -289,6 +292,12 @@ tr>th,
|
|||
background-color: #252526;
|
||||
}
|
||||
|
||||
.cbi-rowstyle-2 .cbi-button-up,
|
||||
.cbi-rowstyle-2 .cbi-button-down,
|
||||
body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
||||
background-color: rgb(102, 102, 102) !important;
|
||||
}
|
||||
|
||||
.cbi-section>h3:first-child,
|
||||
.panel-title,
|
||||
h3 {
|
||||
|
|
@ -808,14 +817,7 @@ input,
|
|||
color: #ccc !important;
|
||||
}
|
||||
|
||||
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
|
||||
.login-page .login-container .login-form {
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius-dark));
|
||||
backdrop-filter: blur(var(--blur-radius-dark));
|
||||
background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,4 @@
|
|||
// out: false
|
||||
/*!
|
||||
Pure v2.0.3
|
||||
Copyright 2013 Yahoo!
|
||||
158
luci-theme-argon/htdocs/luci-static/resources/menu-argon.js
Normal file
158
luci-theme-argon/htdocs/luci-static/resources/menu-argon.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
'use strict';
|
||||
'require baseclass';
|
||||
'require ui';
|
||||
|
||||
return baseclass.extend({
|
||||
__init__: function () {
|
||||
ui.menu.load().then(L.bind(this.render, this));
|
||||
},
|
||||
|
||||
render: function (tree) {
|
||||
var node = tree,
|
||||
url = '',
|
||||
children = ui.menu.getChildren(tree);
|
||||
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
|
||||
|
||||
if (isActive)
|
||||
this.renderMainMenu(children[i], children[i].name);
|
||||
}
|
||||
|
||||
if (L.env.dispatchpath.length >= 3) {
|
||||
for (var i = 0; i < 3 && node; i++) {
|
||||
node = node.children[L.env.dispatchpath[i]];
|
||||
url = url + (url ? '/' : '') + L.env.dispatchpath[i];
|
||||
}
|
||||
|
||||
if (node)
|
||||
this.renderTabMenu(node, url);
|
||||
}
|
||||
|
||||
document.querySelector('a.showSide')
|
||||
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
|
||||
document.querySelector('.darkMask')
|
||||
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
|
||||
},
|
||||
|
||||
handleMenuExpand: function (ev) {
|
||||
var a = ev.target, slide = a.parentNode, slide_menu = a.nextElementSibling;
|
||||
var collapse = false;
|
||||
|
||||
document.querySelectorAll('.main .main-left .nav > li >ul.active').forEach(function (ul) {
|
||||
$(ul).stop(true).slideUp("fast", function () {
|
||||
ul.classList.remove('active');
|
||||
ul.previousElementSibling.classList.remove('active');
|
||||
});
|
||||
if (!collapse && ul === slide_menu) {
|
||||
collapse = true;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (!slide_menu)
|
||||
return;
|
||||
|
||||
|
||||
if (!collapse) {
|
||||
$(slide).find(".slide-menu").slideDown("fast",function(){
|
||||
slide_menu.classList.add('active');
|
||||
a.classList.add('active');
|
||||
});
|
||||
a.blur();
|
||||
}
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
},
|
||||
|
||||
renderMainMenu: function (tree, url, level) {
|
||||
var l = (level || 0) + 1,
|
||||
ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
|
||||
children = ui.menu.getChildren(tree);
|
||||
|
||||
if (children.length == 0 || l > 2)
|
||||
return E([]);
|
||||
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var isActive = ((L.env.dispatchpath[l] == children[i].name) && (L.env.dispatchpath[l - 1] == tree.name)),
|
||||
submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l),
|
||||
hasChildren = submenu.children.length,
|
||||
slideClass = hasChildren ? 'slide' : null,
|
||||
menuClass = hasChildren ? 'menu' : null;
|
||||
if (isActive) {
|
||||
ul.classList.add('active');
|
||||
slideClass += " active";
|
||||
menuClass += " active";
|
||||
}
|
||||
|
||||
ul.appendChild(E('li', { 'class': slideClass }, [
|
||||
E('a', {
|
||||
'href': L.url(url, children[i].name),
|
||||
'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
|
||||
'class': menuClass,
|
||||
'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"),
|
||||
}, [_(children[i].title)]),
|
||||
submenu
|
||||
]));
|
||||
}
|
||||
|
||||
if (l == 1) {
|
||||
document.querySelector('#mainmenu').appendChild(ul);
|
||||
document.querySelector('#mainmenu').style.display = '';
|
||||
|
||||
}
|
||||
return ul;
|
||||
},
|
||||
|
||||
renderTabMenu: function (tree, url, level) {
|
||||
var container = document.querySelector('#tabmenu'),
|
||||
l = (level || 0) + 1,
|
||||
ul = E('ul', { 'class': 'tabs' }),
|
||||
children = ui.menu.getChildren(tree),
|
||||
activeNode = null;
|
||||
|
||||
if (children.length == 0)
|
||||
return E([]);
|
||||
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
|
||||
activeClass = isActive ? ' active' : '',
|
||||
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
|
||||
|
||||
ul.appendChild(E('li', { 'class': className }, [
|
||||
E('a', { 'href': L.url(url, children[i].name) }, [_(children[i].title)])
|
||||
]));
|
||||
|
||||
if (isActive)
|
||||
activeNode = children[i];
|
||||
}
|
||||
|
||||
container.appendChild(ul);
|
||||
container.style.display = '';
|
||||
|
||||
if (activeNode)
|
||||
container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l));
|
||||
|
||||
return ul;
|
||||
},
|
||||
|
||||
handleSidebarToggle: function (ev) {
|
||||
var showside = document.querySelector('a.showSide'),
|
||||
sidebar = document.querySelector('#mainmenu'),
|
||||
darkmask = document.querySelector('.darkMask'),
|
||||
scrollbar = document.querySelector('.main-right');
|
||||
|
||||
if (showside.classList.contains('active')) {
|
||||
showside.classList.remove('active');
|
||||
sidebar.classList.remove('active');
|
||||
scrollbar.classList.remove('active');
|
||||
darkmask.classList.remove('active');
|
||||
}
|
||||
else {
|
||||
showside.classList.add('active');
|
||||
sidebar.classList.add('active');
|
||||
scrollbar.classList.add('active');
|
||||
darkmask.classList.add('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue