tqcq/small-package
0
0
Fork 0
mirror of https://github.com/kenzok8/small-package.git synced 2026-02-08 07:37:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

update 2023-04-30 12:50:32

Browse Source
This commit is contained in:
github-actions[bot]
2023-04-30 12:50:32 +08:00
parent a5d1536007
commit 612e1e0fc2
26 changed files with 1680 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
luci-theme-argonne/Makefile
View File

@@ -7,9 +7,9 @@
include $(TOPDIR)/rules.mk
LUCI_TITLE:=Argonne kenzo
LUCI_DEPENDS:=
PKG_VERSION:=1.7.3
PKG_RELEASE:=2
LUCI_DEPENDS:=+curl +jsonfilter
PKG_VERSION:=1.7.7
PKG_RELEASE:=1
include $(TOPDIR)/feeds/luci/luci.mk

232
luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
View File

@@ -2,7 +2,6 @@
* Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
*
* luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/kenzok78/luci-theme-argonne/issues
@@ -18,7 +17,7 @@
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Agron Theme
* Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
@@ -315,7 +314,7 @@ li {
position: relative;
}
.login-page .login-container .login-form .form-login .input-group::before {
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
@@ -633,7 +632,7 @@ footer a {
position: relative;
}
.main .main-left .nav li.slide .menu::before {
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
@@ -652,7 +651,7 @@ footer a {
position: absolute;
right: 0.5rem;
top: 0.8rem;
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
@@ -889,7 +888,7 @@ footer a {
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
}
.cbi-button:active {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
}
.cbi-button:disabled {
cursor: not-allowed;
@@ -947,6 +946,34 @@ form.inline + form.inline,
.cbi-value-field .cbi-button-neutral {
min-width: 2.5rem !important;
}
/* Replace LuCI's default file and folder type icons */
img[src="/luci-static/resources/cbi/reload.gif"] {
content: url("/luci-static/argonne/img/reload.webp");
}
img[src="/luci-static/resources/cbi/file.gif"] {
content: url("/luci-static/argonne/img/file.webp");
}
img[src="/luci-static/resources/cbi/add.gif"] {
content: url("/luci-static/argonne/img/add.webp");
}
img[src="/luci-static/resources/cbi/remove.gif"] {
content: url("/luci-static/argonne/img/remove.webp");
}
img[src="/luci-static/resources/cbi/edit.gif"] {
content: url("/luci-static/argonne/img/edit.webp");
}
img[src="/luci-static/resources/cbi/fieldadd.gif"] {
content: url("/luci-static/argonne/img/fieldadd.webp");
}
img[src="/luci-static/resources/cbi/link.gif"] {
content: url("/luci-static/argonne/img/link.webp");
}
img[src="/luci-static/resources/cbi/find.gif"] {
content: url("/luci-static/argonne/img/find.webp");
}
img[src="/luci-static/resources/cbi/folder.gif"] {
content: url("/luci-static/argonne/img/folder.webp");
}
/* input */
.cbi-value input[type="password"],
.cbi-value input[type="text"] {
@@ -1055,12 +1082,13 @@ input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
border: 1px solid #dee2e6;
width: 16px !important;
height: 16px !important;
width: 17px !important;
height: 17px !important;
padding: 0;
cursor: pointer;
transition: all 0.2s;
margin: 0.9rem 0.25rem 0 0.25rem;
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
vertical-align: middle;
}
input[type="checkbox"]:checked {
border: 1px solid #5e72e4;
@@ -1073,7 +1101,8 @@ input[type="checkbox"]:checked {
background-position: center;
}
ul li .cbi-input-checkbox {
margin: 0.5rem 0.25rem !important;
margin: 0.5rem 0.25rem 0.7rem 0.25rem !important;
vertical-align: middle !important;
}
.cbi-input-radio {
appearance: none !important;
@@ -1186,7 +1215,7 @@ ul li .cbi-input-checkbox {
}
.cbi-section-create {
margin: 0;
padding-left: 1rem;
padding-left: 0.5rem;
align-items: center;
}
.cbi-section-create > * {
@@ -1245,10 +1274,41 @@ small {
.cbi-section > legend {
display: none !important;
}
.cbi-section-error {
padding: 1.5rem;
color: #fb6340;
/* Define the error text border breathe display animation */
@keyframes error-border-breathe {
0%{
border-color: #fb6340;
}
50%{
border-color: transparent;
}
100%{
border-color: #fb6340;
}
}
/* Center display error text box */
.cbi-section-error > ul{
text-align: center;
}
/* Add border for error text box, and border breathe display animation to make it more noticeable */
.cbi-section-error > ul > li {
font-weight: 600;
max-width: 60%;
color: #fb6340;
line-height: 1rem;
display: inline-block;
border: 2px solid #fb6340;
border-radius: 0.3rem;
animation: error-border-breathe 1.5s ease-in-out infinite;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
}
.cbi-input-invalid,
.cbi-value-error input {
color: #fb6340;
border: 1px dashed #fb6340;
}
fieldset > fieldset {
margin: 0;
@@ -1309,6 +1369,7 @@ input[name="nslookup"] {
height: 1.6rem !important;
line-height: 1.6rem;
border-radius: 0.25rem;
overflow: hidden;
}
#swaptotal > div > div,
#swapfree > div > div,
@@ -1400,6 +1461,30 @@ td > table > tbody > tr > td,
.a-to-btn {
text-decoration: none;
}
/* file selector button */
::file-selector-button {
color: #fff;
border-radius: .25rem;
border: 1px solid #2e6da4;
padding: .4rem .5rem;
background-color: #337ab7;
box-sizing: border-box;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
::file-selector-button:hover,
::file-selector-button:focus,
::file-selector-button:active {
outline: 0;
text-decoration: none;
}
::file-selector-button:hover,
::file-selector-button:focus {
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
}
::file-selector-button:active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
}
/* table */
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
width: auto !important;
@@ -1514,6 +1599,40 @@ td > table > tbody > tr > td,
#cbi-network-switch_vlan .td {
flex-basis: 12%;
}
/* Fix background color of table-titles */
.cbi-section-node > .cbi-section-table > tbody > .cbi-section-table-titles th {
background-color: var(--lighter);
border: none;
}
/* Fix background color of table-descr */
.cbi-section-node > .cbi-section-table > tbody > .cbi-section-table-descr th {
border: none;
}
/* Fix background color not change when the H tag is in the table rowstyle-1 */
.cbi-section-node > .cbi-section-table > tbody > .cbi-rowstyle-1 th {
background-color: #fff;
border-top: 1px solid #ddd;
border-bottom: none;
}
/* Fix background color not change when the H tag is in the table rowstyle-2 */
.cbi-section-node > .cbi-section-table > tbody > .cbi-rowstyle-2 th {
background-color: #f9f9f9;
border-top: 1px solid #ddd;
border-bottom: none;
}
/* Change the color of the H label in the table to make it more visible */
th h1, td h1,
th h2, td h2,
th h3, td h3,
th h4, td h4,
th h5, td h5,
th h6, td h6 {
background: var(--lighter);
}
/* OCD: Change the background color of the "now in use" node in PassWall */
.cbi-section-table > tbody > ._now_use {
background: #5e72e473 !important;
}
/* language fix */
body.lang_pl.node-main-login .cbi-value-title {
width: 12rem;
@@ -1634,7 +1753,7 @@ body.lang_pl.node-main-login .cbi-value-title {
.cbi-value-helpicon,
.showSide,
.main > .loading > span {
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
@@ -1777,12 +1896,20 @@ table > thead > tr > th,
.cbi-section-table-row:last-child {
margin-bottom: 0;
}
.cbi-section-table-row > .cbi-value-field .cbi-dropdown,
.cbi-section-table-row > .cbi-value-field .cbi-input-select,
.cbi-section-table-row > .cbi-value-field .cbi-input-text,
.cbi-section-table-row > .cbi-value-field .cbi-input-password,
.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
.cbi-section-table-row > .cbi-value-field .cbi-input-password {
width: 100%;
}
.cbi-section-table-row > .cbi-value-field .cbi-input-text,
.cbi-section-table-row > .cbi-value-field .cbi-input-password {
min-width: 100px;
}
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-1 div,
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-2 div {
min-width: 100%;
}
.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);
@@ -1800,10 +1927,27 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
background-color: var(--danger) !important;
color: #fff !important;
}
.warning {
background-color: #fb6340 !important;
background-color: var(--warning) !important;
color: #fff !important;
/* Define the warning background-color breathe display animation */
@keyframes warning-background-color-breathe {
0%{
color: #fff;
background-color: #fb6340;
}
50%{
color: #32325d;
background-color: #fff;
}
100%{
color: #fff;
background-color: #fb6340;
}
}
.warning,
.warning * {
background-color: #fb6340;
background-color: var(--warning);
color: #fff;
animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
}
.notice {
background-color: #5e72e4 !important;
@@ -1948,7 +2092,6 @@ table > thead > tr > th {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #e9ecef;
}
table > tbody > tr:first-child > td,
@@ -2031,7 +2174,7 @@ td > table > tbody > tr > td {
}
.cbi-tabmenu {
color: white;
padding: 0.5rem 1rem 0 1rem;
padding: 0.5rem 0.5rem 0 0.5rem;
white-space: nowrap;
overflow-x: auto;
border-bottom: 1px solid #ddd !important;
@@ -2297,7 +2440,7 @@ select[multiple="multiple"] {
overflow-y: visible;
}
.cbi-section-node .cbi-value {
padding: 0.3rem 1rem 0.3rem 1rem;
padding: 0.5rem 1rem 0.5rem 1rem !important;
}
.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
background-color: #f9f9f9;
@@ -2308,6 +2451,18 @@ select[multiple="multiple"] {
line-height: 1.6;
font-size: 0.875rem;
}
/* Fix text position of the luci-app-filebrowser running state */
#cbi-filebrowser > .cbi-section > .cbi-section > .cbi-value > .cbi-value-field,
/* Fix text position of the luci-apps running state of the [Control] type */
form > .cbi-map > .cbi-section > .cbi-section-node > .cbi-value > .cbi-value-field font {
word-wrap: break-word;
font-size: 0.875rem;
line-height: 1.6;
padding: 0.7rem;
padding-left: 0;
text-align: right;
display: table-cell;
}
.cbi-value-helpicon > img {
display: none;
}
@@ -2327,7 +2482,6 @@ select[multiple="multiple"] {
padding: 0.7rem;
padding-left: 0;
width: 23rem;
float: left;
text-align: right;
display: table-cell;
}
@@ -2515,18 +2669,22 @@ td > .ifacebadge,
min-width: 10rem;
margin-top: 0.3rem;
}
.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
margin: 0.9rem 0.25rem 0 0.25rem;
.cbi-value-field .cbi-input-checkbox {
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
vertical-align: middle;
height: 1rem;
line-height: 1.6;
}
.cbi-input-checkbox {
margin: 0.9rem 0.25rem 0 0.25rem;
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
vertical-align: middle;
}
.cbi-value-field .cbi-input-radio {
margin: 0rem 0.25rem;
}
.cbi-input-radio {
margin: 0rem 0.25rem;
}
.cbi-value-field > input + .cbi-value-description {
padding: 0;
}
@@ -2547,7 +2705,7 @@ td > .ifacebadge,
min-width: 7rem;
}
.cbi-section-create > .cbi-button-add {
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
margin: 0.75rem 0.75rem 0.75rem 0.25rem;
}
.cbi-section-remove {
padding: 0.5rem;
@@ -2651,6 +2809,10 @@ input[name="nslookup"] {
border-right: 0 !important;
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
height: 100% !important;
background-image: url(../img/trafficbar.png);
background-position: left top;
animation: sparkle 1500ms linear infinite;
}
.node-system-leds .cbi-section em {
display: block;
@@ -2852,10 +3014,6 @@ input[name="nslookup"] {
header > .fill > .container > .brand {
display: inline-block;
}
.cbi-value-title {
width: 9rem;
padding-right: 1rem;
}
.node-network-diagnostics > .main .cbi-map fieldset > div * {
width: 100% !important;
}
@@ -2963,12 +3121,6 @@ input[name="nslookup"] {
width: 100%;
position: relative;
}
.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
margin: 0rem 0.25rem 0 0.25rem;
height: 1rem;
line-height: 1.6;
}
.cbi-page-actions > div > input {
display: none;
}

683
luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
View File

File diff suppressed because one or more lines are too long

19
luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css
View File

@@ -2,10 +2,9 @@
* Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
*
* luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/kenzok78/luci-theme-argonne/issues
* https://github.com/kenzok78/luci-theme-argonnene/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
@@ -18,7 +17,7 @@
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Agron Theme
* Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
@@ -47,12 +46,12 @@
/* ICON Font */
@font-face {
font-family: 'argon';
src: url('../fonts/argon.eot?u6kthm');
src: url('../fonts/argon.eot?u6kthm#iefix') format('embedded-opentype'),
url('../fonts/argon.ttf?u6kthm') format('truetype'),
url('../fonts/argon.woff?u6kthm') format('woff'),
url('../fonts/argon.svg?u6kthm#argon') format('svg');
font-family: 'argonne';
src: url('../fonts/argonne.eot?u6kthm');
src: url('../fonts/argonne.eot?u6kthm#iefix') format('embedded-opentype'),
url('../fonts/argonne.ttf?u6kthm') format('truetype'),
url('../fonts/argonne.woff?u6kthm') format('woff'),
url('../fonts/argonne.svg?u6kthm#argonne') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@@ -61,7 +60,7 @@
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 690 B

0
luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg → luci-theme-argonne/htdocs/luci-static/argonne/img/argon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 480 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 B

BIN
luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 682 B

131
luci-theme-argonne/htdocs/luci-static/argonne/js/script.js → luci-theme-argonne/htdocs/luci-static/argonne/js/menu-argon.js
View File

@@ -1,11 +1,11 @@
/**
* Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
*
* luci-theme-argonne
* Copyright 2019 Jerrykuku <jerrykuku@qq.com>
* luci-theme-argon
* Copyright 2023 Jerrykuku <jerrykuku@qq.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/kenzok78/luci-theme-argonne/issues
* https://github.com/jerrykuku/luci-theme-argon/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
@@ -18,7 +18,7 @@
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Agron Theme
* Argon Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
@@ -27,22 +27,6 @@
* Licensed to the public under the Apache License 2.0
*/
/*
* Font generate by Icomoon<icomoon.io>
*/
(function ($) {
$(".main > .loading").fadeOut();
/**
* 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;
@@ -68,6 +52,7 @@
*/
function getCurrentNodeByUrl() {
var ret = false;
const urlReg = new RegExp(nodeUrl + "$")
if (!$('body').hasClass('logged-in')) {
luciLocation = ["Main", "Login"];
return true;
@@ -81,7 +66,7 @@
var that = $(this);
var href = that.attr("href");
if (href.indexOf(nodeUrl) != -1) {
if (urlReg.test(href)) {
ulNode.click();
ulNode.next(".slide-menu").stop(true, true);
lastNode = that.parent();
@@ -119,18 +104,6 @@
});
// define what element should be observed by the observer
// and what types of mutations trigger the callback
if ($("#cbi-dhcp-lan-ignore").length > 0) {
observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), {
subtree: true,
attributes: true
});
}
/**
* hook menu click and add the hash
*/
@@ -166,91 +139,11 @@
/**
* get current node and open it
*/
$(".cbi-button-up").val("");
$(".cbi-button-down").val("");
/**
* hook other "A Label" and add hash to it.
*/
$("#maincontent > .container").find("a").each(function () {
var that = $(this);
var onclick = that.attr("onclick");
if (onclick == undefined || onclick == "") {
that.click(function () {
var href = that.attr("href");
if (href.indexOf("#") == -1) {
$(".main > .loading").fadeIn("fast");
return true;
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", "auto");
showSide = false;
} else {
$(".darkMask").stop(true).fadeIn("fast");
$(".main-left").width("15rem");
$(".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", "auto");
}
});
$(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("padding", "0px");
}
});
$(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () {
//$(".node-main-login > .main > .main-right > .login-bg").addClass("blur");
});
$(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () {
//$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur");
});
$(".main-right").focus();
$(".main-right").blur();
$("input").attr("size", "0");
if (mainNodeName != undefined) {
console.log(mainNodeName);
@@ -273,5 +166,3 @@
break;
}
}
})(jQuery);

64
luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js Normal file
View File

@@ -0,0 +1,64 @@
/**
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
*
* luci-theme-argon
* Copyright 2023 Jerrykuku <jerrykuku@qq.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/jerrykuku/luci-theme-argon/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
* Copyright 2012 David Menting <david@nut-bolt.nl>
*
* MUI:
* https://github.com/muicss/mui
*
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Argon Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
* https://unsplash.com/
*
* Licensed to the public under the Apache License 2.0
*/
/**
* Sidebar expand
*/
var showSide = false;
$(".showSide").click(function () {
if (showSide) {
$(".darkMask").stop(true).fadeOut("fast");
$(".main-left").width(0);
$(".main-right").css("overflow-y", "auto");
showSide = false;
} else {
$(".darkMask").stop(true).fadeIn("fast");
$(".main-left").width("15rem");
$(".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", "auto");
}
});
$(window).resize(function () {
if ($(window).width() > 921) {
$(".main-left").css("width", "");
$(".darkMask").stop(true);
$(".darkMask").css("display", "none");
showSide = false;
}
});

103
luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js Normal file
View File

@@ -0,0 +1,103 @@
/**
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
*
* luci-theme-argon
* Copyright 2023 Jerrykuku <jerrykuku@qq.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/jerrykuku/luci-theme-argon/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
* Copyright 2012 David Menting <david@nut-bolt.nl>
*
* MUI:
* https://github.com/muicss/mui
*
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Argon Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
* https://unsplash.com/
*
* Licensed to the public under the Apache License 2.0
*/
/*
* Font generate by Icomoon<icomoon.io>
*/
(function ($) {
$(".main > .loading").fadeOut();
/**
* trim text, Remove spaces, wrap
* @param text
* @returns {string}
*/
function trimText(text) {
return text.replace(/[ \t\n\r]+/g, " ");
}
// define what element should be observed by the observer
// and what types of mutations trigger the callback
const observer = new MutationObserver(() => {
console.log("callback that runs when observer is triggered");
});
if ($("#cbi-dhcp-lan-ignore").length > 0) {
observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), {
subtree: true,
attributes: true
});
}
$(".cbi-button-up").val("");
$(".cbi-button-down").val("");
/**
* hook other "A Label" and add hash to it.
*/
$("#maincontent > .container").find("a").each(function () {
var that = $(this);
var onclick = that.attr("onclick");
if (onclick == undefined || onclick == "") {
that.click(function () {
var href = that.attr("href");
if (href.indexOf("#") == -1) {
$(".main > .loading").fadeIn("fast");
return true;
}
});
}
});
/**
* 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("padding", "0px");
}
});
$(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () {
//$(".node-main-login > .main > .main-right > .login-bg").addClass("blur");
});
$(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () {
//$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur");
});
$(".main-right").focus();
$(".main-right").blur();
$("input").attr("size", "0");
})(jQuery);

255
luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
View File

@@ -3,10 +3,9 @@
* Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
*
* luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/kenzok78/luci-theme-argonne/issues
* https://github.com/jerrykuku/luci-theme-argonne/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Agron Theme
* Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
@@ -362,7 +361,7 @@ li {
position: relative;
&::before {
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
@@ -745,7 +744,7 @@ footer {
position: relative;
&::before {
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
@@ -765,7 +764,7 @@ footer {
position: absolute;
right: 0.5rem;
top: 0.8rem;
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
@@ -1060,7 +1059,7 @@ footer {
}
.cbi-button:active {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
}
.cbi-button:disabled {
@@ -1134,6 +1133,34 @@ form.inline+form.inline,
min-width: 2.5rem !important;
}
/* Replace LuCI's default file and folder type icons */
img[src="/luci-static/resources/cbi/reload.gif"] {
content: url("/luci-static/argonne/img/reload.webp");
}
img[src="/luci-static/resources/cbi/file.gif"] {
content: url("/luci-static/argonne/img/file.webp");
}
img[src="/luci-static/resources/cbi/add.gif"] {
content: url("/luci-static/argonne/img/add.webp");
}
img[src="/luci-static/resources/cbi/remove.gif"] {
content: url("/luci-static/argonne/img/remove.webp");
}
img[src="/luci-static/resources/cbi/edit.gif"] {
content: url("/luci-static/argonne/img/edit.webp");
}
img[src="/luci-static/resources/cbi/fieldadd.gif"] {
content: url("/luci-static/argonne/img/fieldadd.webp");
}
img[src="/luci-static/resources/cbi/link.gif"] {
content: url("/luci-static/argonne/img/link.webp");
}
img[src="/luci-static/resources/cbi/find.gif"] {
content: url("/luci-static/argonne/img/find.webp");
}
img[src="/luci-static/resources/cbi/folder.gif"] {
content: url("/luci-static/argonne/img/folder.webp");
}
/* input */
.cbi-value input[type="password"],
@@ -1268,13 +1295,14 @@ input[type="checkbox"] {
-webkit-appearance: none !important;
border: 1px solid #dee2e6;
width: 16px !important;
height: 16px !important;
width: 17px !important;
height: 17px !important;
padding: 0;
cursor: pointer;
transition: all 0.2s;
margin: 0.9rem 0.25rem 0 0.25rem;
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
vertical-align: middle;
}
input[type="checkbox"]:checked {
@@ -1289,7 +1317,8 @@ input[type="checkbox"]:checked {
}
ul li .cbi-input-checkbox {
margin: 0.5rem 0.25rem !important;
margin: 0.5rem 0.25rem 0.7rem 0.25rem !important;
vertical-align: middle !important;
}
.cbi-input-radio {
@@ -1422,7 +1451,7 @@ ul li .cbi-input-checkbox {
.cbi-section-create {
margin: 0;
padding-left: 1rem;
padding-left: 0.5rem;
align-items: center;
}
@@ -1495,11 +1524,46 @@ small {
display: none !important;
}
.cbi-section-error {
padding: 1.5rem;
color: #fb6340;
font-weight: 600;
/* Define the error text border breathe display animation */
@keyframes error-border-breathe {
0%{
border-color: #fb6340;
}
50%{
border-color: transparent;
}
100%{
border-color: #fb6340;
}
}
/* Center display error text box */
.cbi-section-error > ul{
text-align: center;
}
/* Add border for error text box, and border breathe display animation to make it more noticeable */
.cbi-section-error > ul > li {
font-weight: 600;
max-width: 60%;
color: #fb6340;
line-height: 1rem;
display: inline-block;
border: 2px solid #fb6340;
border-radius: 0.3rem;
animation: error-border-breathe 1.5s ease-in-out infinite;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
}
.cbi-input-invalid,
.cbi-value-error input {
color: #fb6340;
border: 1px dashed #fb6340;
}
fieldset>fieldset {
margin: 0;
@@ -1571,6 +1635,7 @@ input[name="nslookup"] {
height: 1.6rem !important;
line-height: 1.6rem;
border-radius: .25rem;
overflow: hidden;
}
#swaptotal>div>div,
@@ -1683,6 +1748,31 @@ td>table>tbody>tr>td,
text-decoration: none;
}
/* file selector button */
::file-selector-button {
color: #fff;
border-radius: .25rem;
border: 1px solid #2e6da4;
padding: .4rem .5rem;
background-color: #337ab7;
box-sizing: border-box;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
::file-selector-button:hover,
::file-selector-button:focus,
::file-selector-button:active {
outline: 0;
text-decoration: none;
}
::file-selector-button:hover,
::file-selector-button:focus {
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
}
::file-selector-button:active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
}
/* table */
@@ -1835,6 +1925,46 @@ td>table>tbody>tr>td,
flex-basis: 12%;
}
/* Fix background color of table-titles */
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
background-color: var(--lighter);
border: none;
}
/* Fix background color of table-descr */
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
border: none;
}
/* Fix background color not change when the H tag is in the table rowstyle-1 */
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
background-color: #fff;
border-top: 1px solid #ddd;
border-bottom: none;
}
/* Fix background color not change when the H tag is in the table rowstyle-2 */
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
background-color: #f9f9f9;
border-top: 1px solid #ddd;
border-bottom: none;
}
/* Change the color of the H label in the table to make it more visible */
th h1, td h1,
th h2, td h2,
th h3, td h3,
th h4, td h4,
th h5, td h5,
th h6, td h6 {
background: var(--lighter);
}
/* OCD: Change the background color of the "now in use" node in PassWall */
.cbi-section-table>tbody>._now_use {
background: #5e72e473 !important;
}
/* language fix */
body.lang_pl.node-main-login .cbi-value-title {
width: 12rem;
@@ -1989,7 +2119,7 @@ body.lang_pl.node-main-login .cbi-value-title {
.cbi-value-helpicon,
.showSide,
.main>.loading>span {
font-family: 'argon' !important;
font-family: 'argonne' !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
@@ -2165,11 +2295,21 @@ table>thead>tr>th,
margin-bottom: 0;
}
.cbi-section-table-row>.cbi-value-field .cbi-dropdown,
.cbi-section-table-row>.cbi-value-field .cbi-input-select,
.cbi-section-table-row>.cbi-value-field .cbi-input-text,
.cbi-section-table-row>.cbi-value-field .cbi-input-password,
.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
width: 100%;
.cbi-section-table-row>.cbi-value-field .cbi-input-password{
width:100%
}
.cbi-section-table-row>.cbi-value-field .cbi-input-text,
.cbi-section-table-row>.cbi-value-field .cbi-input-password{
min-width:100px
}
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-1 div,
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-2 div{
min-width:100%;
}
.cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
@@ -2193,10 +2333,27 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
color: #fff !important;
}
.warning {
background-color: #fb6340 !important;
background-color: var(--warning) !important;
color: #fff !important;
/* Define the warning background-color breathe display animation */
@keyframes warning-background-color-breathe {
0%{
color: #fff;
background-color: #fb6340;
}
50%{
color: #32325d;
background-color: #fff;
}
100%{
color: #fff;
background-color: #fb6340;
}
}
.warning,
.warning * {
background-color: #fb6340;
background-color: var(--warning);
color: #fff;
animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
}
.notice {
@@ -2373,7 +2530,6 @@ table>thead>tr>th {
padding-top: .75rem;
padding-bottom: .75rem;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #e9ecef;
}
@@ -2484,7 +2640,7 @@ td>table>tbody>tr>td {
.cbi-tabmenu {
color: white;
padding: 0.5rem 1rem 0 1rem;
padding: 0.5rem 0.5rem 0 0.5rem;
white-space: nowrap;
overflow-x: auto;
border-bottom: 1px solid #ddd !important;
@@ -2811,7 +2967,7 @@ select[multiple="multiple"] {
.cbi-section-node .cbi-value {
padding: 0.3rem 1rem 0.3rem 1rem;
padding: 0.5rem 1rem 0.5rem 1rem !important;
}
@@ -2827,6 +2983,18 @@ select[multiple="multiple"] {
}
/* Fix text position of the luci-app-filebrowser running state */
#cbi-filebrowser>.cbi-section>.cbi-section>.cbi-value>.cbi-value-field,
/* Fix text position of the luci-apps running state of the [Control] type */
form>.cbi-map>.cbi-section>.cbi-section-node>.cbi-value>.cbi-value-field font {
word-wrap: break-word;
font-size: 0.875rem;
line-height: 1.6;
padding: 0.7rem;
padding-left: 0;
text-align: right;
display: table-cell;
}
.cbi-value-helpicon>img {
@@ -2851,7 +3019,6 @@ select[multiple="multiple"] {
padding: .7rem;
padding-left: 0;
width: 23rem;
float: left;
text-align: right;
display: table-cell;
}
@@ -3097,21 +3264,25 @@ td>.ifacebadge,
margin-top: 0.3rem;
}
.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
margin: 0.9rem 0.25rem 0 0.25rem;
.cbi-value-field .cbi-input-checkbox {
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
vertical-align: middle;
height: 1rem;
line-height: 1.6;
}
.cbi-input-checkbox {
margin: 0.9rem 0.25rem 0 0.25rem;
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
vertical-align: middle;
}
.cbi-value-field .cbi-input-radio {
margin: 0rem 0.25rem;
}
.cbi-input-radio {
margin: 0rem 0.25rem;
}
.cbi-value-field>input+.cbi-value-description {
padding: 0;
@@ -3139,7 +3310,7 @@ td>.ifacebadge,
}
.cbi-section-create>.cbi-button-add {
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
margin: 0.75rem 0.75rem 0.75rem 0.25rem;
}
.cbi-section-remove {
@@ -3276,6 +3447,10 @@ input[name="nslookup"] {
border-right: 0 !important;
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
height: 100% !important;
background-image: url(../img/trafficbar.png);
background-position: left top;
animation: sparkle 1500ms linear infinite;
}
}
@@ -3555,17 +3730,10 @@ input[name="nslookup"] {
font-size: 1.7rem;
}
header>.fill>.container>.brand {
display: inline-block;
}
.cbi-value-title {
width: 9rem;
padding-right: 1rem;
}
.node-network-diagnostics>.main .cbi-map fieldset>div * {
width: 100% !important;
}
@@ -3716,13 +3884,6 @@ input[name="nslookup"] {
position: relative;
}
.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
margin: 0rem 0.25rem 0 0.25rem;
height: 1rem;
line-height: 1.6;
}
.cbi-page-actions>div>input {
display: none;
}

157
luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less
View File

@@ -3,10 +3,9 @@
* Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
*
* luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/kenzok78/luci-theme-argonne/issues
* https://github.com/jerrykuku/luci-theme-argonne/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
*
* Agron Theme
* Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html
*
* Login background
@@ -272,6 +271,7 @@ table>thead>tr>td {
div {
background-color: #32325d !important;
background-color: var(--dark-primary) !important;
}
}
@@ -287,7 +287,7 @@ table>thead>tr>th {
}
.cbi-rowstyle-2 {
background-color: #1e1e1e;
background-color: #2c2c2c !important;
}
.cbi-rowstyle-1 {
@@ -306,7 +306,12 @@ table>thead>tr>th {
.cbi-button {
color: #ccc;
background-color: #252526;
background-color: #2c2c2c;
}
.cbi-rowstyle-2 .cbi-button-up,
.cbi-rowstyle-2 .cbi-button-down {
background-color: #252526 !important;
}
.cbi-section-node {
@@ -326,6 +331,72 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
background-color: #252526;
}
/* file selector button */
::file-selector-button {
border: 1px solid darkseagreen !important;
background-color: darkseagreen !important;
}
/* Fix background color of table-titles */
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
background-color: #1e1e1e;
border: none !important;
}
/* Fix background color of table-descr */
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
background-color: #333333;
border: none !important;
}
/* Fix background color not change when the H tag is in the table rowstyle-1 */
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
background-color: #252526;
border-top: 1px solid #252526;
border-bottom: none !important;
}
/* Fix background color not change when the H tag is in the table rowstyle-2 */
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
background-color: #2c2c2c;
border-top: 1px solid #252526;
border-bottom: none !important;
}
/* Change the color of the H label in the table to make it more visible */
th h1, td h1,
th h2, td h2,
th h3, td h3,
th h4, td h4,
th h5, td h5,
th h6, td h6 {
background: var(--gray-dark);
}
/* Improved the background color of each itemes in "UNSAVED CHANGES" (dark mode only) */
.uci-change-list del,
.uci-change-legend-label del {
background-color: #fb74008c;
}
.uci-change-list var,
.uci-change-legend-label var {
background-color: #333333;
}
.uci-change-list ins,
.uci-change-legend-label ins {
background-color: #00ff0a45 !important;
}
/* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */
#add_link_div,
#set_node_div {
background-color: #333333f0 !important;
box-shadow: #00000094 10px 10px 30px 5px !important;
}
#add_link_div>.cbi-value>.cbi-value-field>#nodes_link {
background: #ccc;
}
#content_syslog {
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35)
}
@@ -464,7 +535,7 @@ select {
}
.ifacebox {
background-color: none;
background-color: #1e1e1e;
border: 1px solid #1e1e1e;
}
@@ -484,6 +555,30 @@ select {
background-color: #3c3c3c;
}
/* Fix firewall zone: "unspecified -or- create: " background color (dark mode only) */
div[onclick$="._fwzone_new').checked=true"] {
border: 1px solid #3c3c3c;
background-color: transparent !important;
}
/* Improve the background color of "Any zone" and "Device" when ADD/EDIT Rules in Firewall > Traffic Rules (dark mode only) */
label[for$=".src_any"],
label[for$=".dest_empty"],
label[for$=".dest_any"] {
background-color: #2888db !important;
}
/* Fix/add background color of wireless signal strength badge for dark mode */
td>.ifacebadge,
.td>.ifacebadge {
background-color: #3c3c3c;
}
/* Improved loading process gif color (dark mode only) */
img[src="/luci-static/resources/icons/loading.gif"] {
filter: invert(1);
}
div.cbi-value var,
td.cbi-value-field var {
color: #483d8b;
@@ -541,11 +636,37 @@ td.cbi-value-field var {
background-color: darkolivegreen !important;
}
/* Define the warning background-color breathe display animation (dark mode) */
@keyframes warning-background-color-breathe-dark {
0%{
color: #fff;
background-color: darkorange;
}
50%{
color: #ccc;
background-color: #333333;
}
100%{
color: #fff;
background-color: darkorange;
}
}
.warning,
.warning * {
animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
}
.notice {
background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
}
/* Improved the aleart-message background color during device restart (dark mode only) */
.errorbox,
.alert-message {
background-color: #333333;
}
.cbi-input-find,
.cbi-input-save,
.cbi-button-add,
@@ -587,8 +708,30 @@ fieldset[id^="cbi-apply-"] {
background: #252525;
}
.cbi-section-error {
/* Define the error text border breathe display animation (dark mode) */
@keyframes error-border-breathe-dark {
0%{
border-color: darkorange;
}
50%{
border-color: transparent;
}
100%{
border-color: darkorange;
}
}
/* Add border for error text box, and border breathe display animation to make it more noticeable (dark mode) */
.cbi-section-error>ul>li {
color: darkorange;
border: 2px solid darkorange ;
animation: error-border-breathe-dark 1.5s ease-in-out infinite;
}
.cbi-input-invalid,
.cbi-value-error input {
color: darkorange;
border: 1px dashed darkorange !important;
}
.node-services-vssr .block h4 span{

22
luci-theme-argonne/luasrc/view/themes/argonne/footer.htm
View File

@@ -1,8 +1,7 @@
<%#
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argonne Template
luci-theme-argonne
Copyright 2019 Jerrykuku <jerrykuku@qq.com>
Have a bug? Please create an issue here on GitHub!
https://github.com/kenzok78/luci-theme-argonne/issues
@@ -18,7 +17,7 @@
luci-theme-material:
https://github.com/LuttyYang/luci-theme-material/
Agron Theme
Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html
Login background
@@ -58,18 +57,10 @@
</footer>
</div>
</div>
<script>
// thanks for Jo-Philipp Wich <jow@openwrt.org>
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
var winHeight = $(window).height();
$(window).resize(function () {
var winWidth = $(window).width()
if(winWidth < 600){
var newHeight = $(this).height();
var keyboradHeight = newHeight - winHeight;
$(".ftc").css("bottom", keyboradHeight + 30);
}
if($(document.body).height() < 525 ){
if($(".ftc").css('display') != 'none'){
$(".ftc").hide()
@@ -82,7 +73,12 @@
})
</script>
<script src="<%=media%>/js/script.js"></script>
</body>
<script>
if (window.orientation == 90 || window.orientation == -90) {
$(".ftc").hide()
}
</script>
<script src="<%=media%>/js/styles-argonne.js<%# ?v=PKG_VERSION %>"></script>
</body>
</html>

43
luci-theme-argonne/luasrc/view/themes/argonne/header.htm
View File

@@ -2,7 +2,6 @@
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne
Copyright 2020 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub!
https://github.com/kenzok78/luci-theme-argonne/issues
@@ -15,7 +14,7 @@
MUI:
https://github.com/muicss/mui
Agron Theme
Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0
@@ -44,7 +43,7 @@
local node = disp.context.dispatched
local categories = disp.node_childs(tree)
local currentNode = luci.dispatcher.context.path
local c = tree
local i, r
@@ -108,22 +107,16 @@
end
end
local function render_submenu(prefix,parent, node)
local function render_submenu(prefix, node)
local childs = disp.node_childs(node)
if #childs > 0 then
local active = (currentNode[2] == parent) and "active" or ""
local display = (currentNode[2] == parent) and 'style="display: block;"' or ""
write('<ul class="slide-menu">')
write('<ul class="slide-menu %s" %s>' %{
active,
display
})
for i, r in ipairs(childs) do
local nnode = node.nodes[r]
local title = pcdata(striptags(translate(nnode.title)))
local subactive = (currentNode[3] == r) and 'class="active"' or ""
write('<li %s><a data-title="%s" href="%s">%s</a></li>' %{
subactive,
write('<li><a data-title="%s" href="%s">%s</a></li>' %{
title,
nodeurl(prefix, r, nnode.query),
title
@@ -142,17 +135,16 @@
for i, r in ipairs(childs) do
local nnode = cattree.nodes[r]
local grandchildren = disp.node_childs(nnode)
if #grandchildren > 0 then
local active = (currentNode[2] == r) and "active" or ""
local title = pcdata(striptags(translate(nnode.title)))
local en_title = pcdata(striptags(string.gsub(nnode.title," ","_")))
write('<li class="slide"><a class="menu %s" data-title="%s" href="#">%s</a>' %{
active,
write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
en_title,
title
})
render_submenu(category .. "/" .. r,r, nnode)
render_submenu(category .. "/" .. r, nnode)
write('</li>')
else
local title = pcdata(striptags(translate(nnode.title)))
@@ -240,11 +232,11 @@
<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
<link rel="manifest" href="<%=media%>/icon/manifest.json">
<link rel="manifest" href="<%=media%>/icon/manifest.json" crossorigin="use-credentials">
<meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
<meta name="theme-color" content="<%=bar_color%>">
<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
<link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
<style title="text/css">
<% if mode == 'normal' then %>
@media (prefers-color-scheme: dark) {
@@ -273,11 +265,11 @@
<% end -%>
<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=resource%>/xhr.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=media%>/js/jquery.min.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
</head>
<body
class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">
class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> <%=mode %> ">
<div class="main">
<div class="main-left">
@@ -326,3 +318,12 @@
</noscript>
<% if category then render_tabmenu(category, cattree) end %>
<script>
// thanks for Jo-Philipp Wich <jow@openwrt.org>
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
</script>
<script src="<%=media%>/js/menu-argonne.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=media%>/js/sidebar-argonne.js<%# ?v=PKG_VERSION %>"></script>

20
luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
View File

@@ -2,10 +2,9 @@
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne
Copyright 2020 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub!
https://github.com/kenzok78/luci-theme-argonne/issues
https://github.com/jerrykuku/luci-theme-argonne/issues
luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org>
@@ -15,7 +14,7 @@
MUI:
https://github.com/muicss/mui
Agron Theme
Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0
@@ -66,9 +65,9 @@
bar_color = mode == 'dark' and dark_primary or primary
end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<title>
@@ -84,10 +83,8 @@
<meta name="browsermode" content="application">
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="<%=bar_color%>">
<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="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
@@ -95,11 +92,11 @@
<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
<link rel="manifest" href="<%=media%>/icon/manifest.json">
<link rel="manifest" href="<%=media%>/icon/manifest.json" crossorigin="use-credentials">
<meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
<meta name="theme-color" content="<%=bar_color%>">
<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
<link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
<style title="text/css">
<% if mode == 'normal' then %>
@media (prefers-color-scheme: dark) {
@@ -124,11 +121,14 @@
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %>
<style title="text/css"><%=css %></style>
<style title="text/css">
<%=css %>
</style>
<% end -%>
<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=resource%>/xhr.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=media%>/js/jquery.min.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
</head>
<body class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">

2
luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
View File

@@ -1,6 +1,6 @@
<%#
Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2008-2019 Jo-Philipp Wich <jo@mein.io>
Licensed to the public under the Apache License 2.0.
-%>

79
luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
View File

@@ -2,10 +2,9 @@
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne
Copyright 2021 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub!
https://github.com/kenzok78/luci-theme-argonne/issues
https://github.com/jerrykuku/luci-theme-argonne/issues
luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org>
@@ -15,7 +14,7 @@
MUI:
https://github.com/muicss/mui
Agron Theme
Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0
@@ -26,13 +25,13 @@
local util = require "luci.util"
local fs = require "nixio.fs"
local nutil = require "nixio.util"
local sys = require "luci.sys"
local json = require "luci.jsonc"
local sys = require "luci.sys"
local uci = require 'luci.model.uci'.cursor()
-- Fetch Local Background Media
function glob(...)
local function glob(...)
local iter, code, msg = fs.glob(...)
if iter then
return nutil.consume(iter)
@@ -41,14 +40,21 @@
end
end
function fetchMedia(path,themeDir)
local imageTypes = " jpg png gif webp "
local videoTypes = " mp4 webm "
local allTypes = imageTypes .. videoTypes
local function fetchMedia(path, themeDir)
local backgroundTable = {}
local backgroundCount = 0
for i, f in ipairs(glob(path)) do
attr = fs.stat(f)
if attr then
local ext = fs.basename(f):match(".+%.(%w+)$")
if ext == "jpg" or ext == "png" or ext == "gif" or ext == "mp4" then
if ext ~= nil then
ext = ext:lower()
end
if ext ~= nil and string.match(allTypes, " "..ext.." ") ~= nil then
local bg = {}
bg.type = ext
bg.url = themeDir .. fs.basename(f)
@@ -59,46 +65,59 @@
end
return backgroundTable, backgroundCount
end
local boardinfo = util.ubus("system", "board")
local bingUrl = "http://www.bing.com/"
local bingApiUrl = bingUrl .. "HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US"
local themeDir = media .. "/background/"
local function selectBackground(themeDir)
local bgUrl = media .. "/img/bg1.jpg"
local useBing = fs.access('/etc/config/argonne') and uci:get_first('argonne', 'global', 'bing_background') or "0"
local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*",themeDir)
local backgroundType = "Image"
local mimeType = ""
function getBing()
local bing = sys.exec("wget --timeout=0.5 -qO- '%s'" %bingApiUrl)
if (bing and bing ~= '') then
bgUrl = bingUrl .. json.parse(bing).images[1].url
if fs.access("/etc/config/argonne") then
local online_wallpaper = uci:get_first('argonne', 'global', 'online_wallpaper') or (uci:get_first('argonne', 'global', 'bing_background') == '1' and 'bing')
if (online_wallpaper and online_wallpaper ~= "none") then
local picurl = sys.exec("/usr/libexec/argonne/online_wallpaper")
if (picurl and picurl ~= '') then
return picurl, "Image", ""
end
end
end
if ( useBing == "0" ) then
local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*", themeDir)
if ( backgroundCount > 0 ) then
local currentBg = backgroundTable[math.random(1, backgroundCount)]
bgUrl = currentBg.url
if (currentBg.type == "mp4" ) then
if (string.match(videoTypes, " "..currentBg.type.." ") ~= nil) then
backgroundType = "Video"
mimeType = "video/" .. currentBg.type
end
end
else
pcall(getBing)
return bgUrl, backgroundType, mimeType
end
local boardinfo = util.ubus("system", "board")
local themeDir = media .. "/background/"
local bgUrl, backgroundType, mimeType = selectBackground(themeDir)
%>
<!-- Login Page Start -->
<div class="login-page">
<% if ( backgroundType == "Video" ) then %>
<!-- Video Player Start -->
<div class="video ar-flex ar-justify-content-center ar-align-items-center">
<div class="video">
<video autoplay loop muted id="video">
<source src="<%=bgUrl%>" type="video/mp4">
<source src="<%=bgUrl%>" type="<%=mimeType%>">
</video>
</div>
<div class="volume-control mute"></div>
<script>
$(".volume-control").click(function(){
if($(this).hasClass("mute")){
$(this).removeClass("mute")
$("#video").prop('muted', false);
}else{
$(this).addClass("mute")
$("#video").prop('muted', true);
}
})
</script>
<!-- Video Player End -->
<% else %>
<!-- Image Background Start -->
@@ -108,8 +127,12 @@
<!-- Login Container Start -->
<div class="login-container">
<div class="login-form">
<a class="brand" href="/"><img src="<%=media%>/img/argonne.svg" class="icon"><span
class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
<!-- Logo Start -->
<a class="brand" href="/"><img src="<%=media%>/img/argonne.svg" class="icon">
<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span>
</a>
<!-- Logo End -->
<!-- Login Form Start -->
<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
<%- if fuser then %>
@@ -130,7 +153,7 @@
<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
</div>
</form>
<!-- Login Form End -->
<script type="text/javascript">//<![CDATA[
var input = document.getElementsByName('luci_password')[0];
if (input)

6
luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
View File

@@ -1,12 +1,12 @@
#!/bin/sh
sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
sed -i ":a;$!N;s/t.render.*sysauth_template.*return/local scope = { duser = h, fuser = a }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
[ -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
[ -f /usr/lib/lua/luci/view/themes/argonnene/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonnene/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
rm -Rf /var/luci-modulecache
rm -Rf /var/luci-indexcache
uci batch <<-EOF
set luci.themes.Argonne=/luci-static/argonne
set luci.main.mediaurlbase=/luci-static/argonne
set luci.themes.Argonne=/luci-static/argonnene
set luci.main.mediaurlbase=/luci-static/argonnene
commit luci
EOF
exit 0

70
luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper Executable file
View File

@@ -0,0 +1,70 @@
#!/bin/sh
# author jjm2473
# the script will be excuted when `argon.@global[0].bing_background == '1'`
# defaults to 'bing' to be compatible with old config
WEB_PIC_SRC=$(uci -q get argon.@global[0].online_wallpaper || echo 'bing')
CACHE=/var/run/argon_${WEB_PIC_SRC}.url
WRLOCK=/var/lock/argon_${WEB_PIC_SRC}.lock
fetch_pic_url() {
case $WEB_PIC_SRC in
bing)
local picpath=$(curl -fks --max-time 3 \
"https://www.bing.com/HPImageArchive.aspx?format=js&n=1" |
jsonfilter -q -e '@.images[0].url')
[ -n "${picpath}" ] && echo "//www.bing.com${picpath}"
;;
unsplash)
curl -fks --max-time 3 \
"https://source.unsplash.com/1920x1080/daily?wallpapers" |
sed -E 's#^.*href="([^?]+)\?.*$#\1?fm=jpg\&fit=crop\&w=1920\&h=1080#'
;;
unsplash_*)
local collection_id=${WEB_PIC_SRC#unsplash_}
curl -fks --max-time 3 \
"https://source.unsplash.com/collection/${collection_id}/1920x1080" |
sed -E 's#^.*href="([^?]+)\?.*$#\1?fm=jpg\&fit=crop\&w=1920\&h=1080#'
;;
esac
}
try_update() {
local lock="$WRLOCK"
exec 200>$lock
if flock -n 200 >/dev/null 2>&1; then
local picurl=$(fetch_pic_url)
if [ -n "$picurl" ]; then
echo "${picurl}" | tee "$CACHE"
else
if [ -s "$CACHE" ]; then
cat "$CACHE"
else
touch "$CACHE"
fi
fi
flock -u 200 >/dev/null 2>&1
elif [ -s "$CACHE" ]; then
cat "$CACHE"
fi
}
get_url() {
if [ -f "$CACHE" ]; then
local idle_t=$(($(date '+%s') - $(date -r "$CACHE" '+%s' 2>/dev/null || echo '0')))
if [ -s "$CACHE" ]; then
if [ $idle_t -le 43200 ]; then
cat "$CACHE"
return
fi
else
if [ $idle_t -le 120 ]; then
return
fi
fi
fi
try_update
}
get_url