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 include $(TOPDIR)/rules.mk
LUCI_TITLE:=Argonne kenzo LUCI_TITLE:=Argonne kenzo
LUCI_DEPENDS:= LUCI_DEPENDS:=+curl +jsonfilter
PKG_VERSION:=1.7.3 PKG_VERSION:=1.7.7
PKG_RELEASE:=2 PKG_RELEASE:=1
include $(TOPDIR)/feeds/luci/luci.mk include $(TOPDIR)/feeds/luci/luci.mk

234
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 * Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
* *
* luci-theme-argonne * luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
* *
* Have a bug? Please create an issue here on GitHub! * Have a bug? Please create an issue here on GitHub!
* https://github.com/kenzok78/luci-theme-argonne/issues * https://github.com/kenzok78/luci-theme-argonne/issues
@@ -18,7 +17,7 @@
* luci-theme-material: * luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/ * https://github.com/LuttyYang/luci-theme-material/
* *
* Agron Theme * Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html * https://demos.creative-tim.com/argon-dashboard/index.html
* *
* Login background * Login background
@@ -315,7 +314,7 @@ li {
position: relative; position: relative;
} }
.login-page .login-container .login-form .form-login .input-group::before { .login-page .login-container .login-form .form-login .input-group::before {
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
@@ -633,7 +632,7 @@ footer a {
position: relative; position: relative;
} }
.main .main-left .nav li.slide .menu::before { .main .main-left .nav li.slide .menu::before {
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
@@ -652,7 +651,7 @@ footer a {
position: absolute; position: absolute;
right: 0.5rem; right: 0.5rem;
top: 0.8rem; top: 0.8rem;
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: 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); box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
} }
.cbi-button:active { .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 { .cbi-button:disabled {
cursor: not-allowed; cursor: not-allowed;
@@ -947,6 +946,34 @@ form.inline + form.inline,
.cbi-value-field .cbi-button-neutral { .cbi-value-field .cbi-button-neutral {
min-width: 2.5rem !important; 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 */ /* input */
.cbi-value input[type="password"], .cbi-value input[type="password"],
.cbi-value input[type="text"] { .cbi-value input[type="text"] {
@@ -1055,12 +1082,13 @@ input[type="checkbox"] {
appearance: none !important; appearance: none !important;
-webkit-appearance: none !important; -webkit-appearance: none !important;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
width: 16px !important; width: 17px !important;
height: 16px !important; height: 17px !important;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
transition: all 0.2s; 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 { input[type="checkbox"]:checked {
border: 1px solid #5e72e4; border: 1px solid #5e72e4;
@@ -1073,7 +1101,8 @@ input[type="checkbox"]:checked {
background-position: center; background-position: center;
} }
ul li .cbi-input-checkbox { 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 { .cbi-input-radio {
appearance: none !important; appearance: none !important;
@@ -1186,7 +1215,7 @@ ul li .cbi-input-checkbox {
} }
.cbi-section-create { .cbi-section-create {
margin: 0; margin: 0;
padding-left: 1rem; padding-left: 0.5rem;
align-items: center; align-items: center;
} }
.cbi-section-create > * { .cbi-section-create > * {
@@ -1245,10 +1274,41 @@ small {
.cbi-section > legend { .cbi-section > legend {
display: none !important; display: none !important;
} }
.cbi-section-error { /* Define the error text border breathe display animation */
padding: 1.5rem; @keyframes error-border-breathe {
color: #fb6340; 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; 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 { fieldset > fieldset {
margin: 0; margin: 0;
@@ -1309,6 +1369,7 @@ input[name="nslookup"] {
height: 1.6rem !important; height: 1.6rem !important;
line-height: 1.6rem; line-height: 1.6rem;
border-radius: 0.25rem; border-radius: 0.25rem;
overflow: hidden;
} }
#swaptotal > div > div, #swaptotal > div > div,
#swapfree > div > div, #swapfree > div > div,
@@ -1400,6 +1461,30 @@ td > table > tbody > tr > td,
.a-to-btn { .a-to-btn {
text-decoration: none; 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 */ /* table */
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
width: auto !important; width: auto !important;
@@ -1514,6 +1599,40 @@ td > table > tbody > tr > td,
#cbi-network-switch_vlan .td { #cbi-network-switch_vlan .td {
flex-basis: 12%; 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 */ /* language fix */
body.lang_pl.node-main-login .cbi-value-title { body.lang_pl.node-main-login .cbi-value-title {
width: 12rem; width: 12rem;
@@ -1634,7 +1753,7 @@ body.lang_pl.node-main-login .cbi-value-title {
.cbi-value-helpicon, .cbi-value-helpicon,
.showSide, .showSide,
.main > .loading > span { .main > .loading > span {
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal !important; font-style: normal !important;
font-weight: normal !important; font-weight: normal !important;
font-variant: normal !important; font-variant: normal !important;
@@ -1777,12 +1896,20 @@ table > thead > tr > th,
.cbi-section-table-row:last-child { .cbi-section-table-row:last-child {
margin-bottom: 0; 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-select,
.cbi-section-table-row > .cbi-value-field .cbi-input-text, .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-input-password {
.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
width: 100%; 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 [data-dynlist] > input,
.cbi-section-table-row > .cbi-value-field input.cbi-input-password { .cbi-section-table-row > .cbi-value-field input.cbi-input-password {
width: calc(100% - 1.5rem); width: calc(100% - 1.5rem);
@@ -1800,10 +1927,27 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
background-color: var(--danger) !important; background-color: var(--danger) !important;
color: #fff !important; color: #fff !important;
} }
.warning { /* Define the warning background-color breathe display animation */
background-color: #fb6340 !important; @keyframes warning-background-color-breathe {
background-color: var(--warning) !important; 0%{
color: #fff !important; 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 { .notice {
background-color: #5e72e4 !important; background-color: #5e72e4 !important;
@@ -1948,7 +2092,6 @@ table > thead > tr > th {
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
} }
table > tbody > tr:first-child > td, table > tbody > tr:first-child > td,
@@ -2031,7 +2174,7 @@ td > table > tbody > tr > td {
} }
.cbi-tabmenu { .cbi-tabmenu {
color: white; color: white;
padding: 0.5rem 1rem 0 1rem; padding: 0.5rem 0.5rem 0 0.5rem;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;
@@ -2297,7 +2440,7 @@ select[multiple="multiple"] {
overflow-y: visible; overflow-y: visible;
} }
.cbi-section-node .cbi-value { .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) { .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
background-color: #f9f9f9; background-color: #f9f9f9;
@@ -2308,6 +2451,18 @@ select[multiple="multiple"] {
line-height: 1.6; line-height: 1.6;
font-size: 0.875rem; 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 { .cbi-value-helpicon > img {
display: none; display: none;
} }
@@ -2327,7 +2482,6 @@ select[multiple="multiple"] {
padding: 0.7rem; padding: 0.7rem;
padding-left: 0; padding-left: 0;
width: 23rem; width: 23rem;
float: left;
text-align: right; text-align: right;
display: table-cell; display: table-cell;
} }
@@ -2515,18 +2669,22 @@ td > .ifacebadge,
min-width: 10rem; min-width: 10rem;
margin-top: 0.3rem; margin-top: 0.3rem;
} }
.cbi-value-field .cbi-input-checkbox, .cbi-value-field .cbi-input-checkbox {
.cbi-value-field .cbi-input-radio { margin: 0.5rem 0.25rem 0.7rem 0.25rem;
margin: 0.9rem 0.25rem 0 0.25rem; vertical-align: middle;
height: 1rem; height: 1rem;
line-height: 1.6; line-height: 1.6;
} }
.cbi-input-checkbox { .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 { .cbi-value-field .cbi-input-radio {
margin: 0rem 0.25rem; margin: 0rem 0.25rem;
} }
.cbi-input-radio {
margin: 0rem 0.25rem;
}
.cbi-value-field > input + .cbi-value-description { .cbi-value-field > input + .cbi-value-description {
padding: 0; padding: 0;
} }
@@ -2547,7 +2705,7 @@ td > .ifacebadge,
min-width: 7rem; min-width: 7rem;
} }
.cbi-section-create > .cbi-button-add { .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 { .cbi-section-remove {
padding: 0.5rem; padding: 0.5rem;
@@ -2651,6 +2809,10 @@ input[name="nslookup"] {
border-right: 0 !important; border-right: 0 !important;
background-color: #5e72e4 !important; background-color: #5e72e4 !important;
background-color: var(--primary) !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 { .node-system-leds .cbi-section em {
display: block; display: block;
@@ -2852,10 +3014,6 @@ input[name="nslookup"] {
header > .fill > .container > .brand { header > .fill > .container > .brand {
display: inline-block; display: inline-block;
} }
.cbi-value-title {
width: 9rem;
padding-right: 1rem;
}
.node-network-diagnostics > .main .cbi-map fieldset > div * { .node-network-diagnostics > .main .cbi-map fieldset > div * {
width: 100% !important; width: 100% !important;
} }
@@ -2963,12 +3121,6 @@ input[name="nslookup"] {
width: 100%; width: 100%;
position: relative; 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 { .cbi-page-actions > div > input {
display: none; display: none;
} }
@@ -3066,4 +3218,4 @@ input[name="nslookup"] {
width: 2.3rem !important; width: 2.3rem !important;
height: auto; height: auto;
} }
} }

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

135
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 * luci-theme-argon
* Copyright 2019 Jerrykuku <jerrykuku@qq.com> * Copyright 2023 Jerrykuku <jerrykuku@qq.com>
* *
* Have a bug? Please create an issue here on GitHub! * 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: * luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org> * Copyright 2008 Steven Barth <steven@midlink.org>
@@ -18,7 +18,7 @@
* luci-theme-material: * luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/ * https://github.com/LuttyYang/luci-theme-material/
* *
* Agron Theme * Argon Theme
* https://demos.creative-tim.com/argon-dashboard/index.html * https://demos.creative-tim.com/argon-dashboard/index.html
* *
* Login background * Login background
@@ -27,22 +27,6 @@
* Licensed to the public under the Apache License 2.0 * 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 lastNode = undefined;
var mainNodeName = undefined; var mainNodeName = undefined;
@@ -68,6 +52,7 @@
*/ */
function getCurrentNodeByUrl() { function getCurrentNodeByUrl() {
var ret = false; var ret = false;
const urlReg = new RegExp(nodeUrl + "$")
if (!$('body').hasClass('logged-in')) { if (!$('body').hasClass('logged-in')) {
luciLocation = ["Main", "Login"]; luciLocation = ["Main", "Login"];
return true; return true;
@@ -81,7 +66,7 @@
var that = $(this); var that = $(this);
var href = that.attr("href"); var href = that.attr("href");
if (href.indexOf(nodeUrl) != -1) { if (urlReg.test(href)) {
ulNode.click(); ulNode.click();
ulNode.next(".slide-menu").stop(true, true); ulNode.next(".slide-menu").stop(true, true);
lastNode = that.parent(); 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 * hook menu click and add the hash
*/ */
@@ -153,7 +126,7 @@
window.location = $($(this).find("a")[0]).attr("href"); window.location = $($(this).find("a")[0]).attr("href");
return false; return false;
}); });
/** /**
* fix submenu click * fix submenu click
*/ */
@@ -166,91 +139,11 @@
/** /**
* get current node and open it * get current node and open it
*/ */
if (getCurrentNodeByUrl()) {
$(".cbi-button-up").val(""); mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
$(".cbi-button-down").val(""); mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
$("body").addClass(mainNodeName);
}
/**
* 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;
}
});
}
});
/**
* 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) { if (mainNodeName != undefined) {
console.log(mainNodeName); console.log(mainNodeName);
@@ -273,5 +166,3 @@
break; 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 * Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
* *
* luci-theme-argonne * luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
* *
* Have a bug? Please create an issue here on GitHub! * 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: * luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org> * Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
* luci-theme-material: * luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/ * https://github.com/LuttyYang/luci-theme-material/
* *
* Agron Theme * Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html * https://demos.creative-tim.com/argon-dashboard/index.html
* *
* Login background * Login background
@@ -362,7 +361,7 @@ li {
position: relative; position: relative;
&::before { &::before {
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
@@ -745,7 +744,7 @@ footer {
position: relative; position: relative;
&::before { &::before {
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
@@ -765,7 +764,7 @@ footer {
position: absolute; position: absolute;
right: 0.5rem; right: 0.5rem;
top: 0.8rem; top: 0.8rem;
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
@@ -1060,7 +1059,7 @@ footer {
} }
.cbi-button:active { .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 { .cbi-button:disabled {
@@ -1134,6 +1133,34 @@ form.inline+form.inline,
min-width: 2.5rem !important; 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 */ /* input */
.cbi-value input[type="password"], .cbi-value input[type="password"],
@@ -1268,13 +1295,14 @@ input[type="checkbox"] {
-webkit-appearance: none !important; -webkit-appearance: none !important;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
width: 16px !important; width: 17px !important;
height: 16px !important; height: 17px !important;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
transition: all 0.2s; 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 { input[type="checkbox"]:checked {
@@ -1289,7 +1317,8 @@ input[type="checkbox"]:checked {
} }
ul li .cbi-input-checkbox { 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 { .cbi-input-radio {
@@ -1422,7 +1451,7 @@ ul li .cbi-input-checkbox {
.cbi-section-create { .cbi-section-create {
margin: 0; margin: 0;
padding-left: 1rem; padding-left: 0.5rem;
align-items: center; align-items: center;
} }
@@ -1495,12 +1524,47 @@ small {
display: none !important; display: none !important;
} }
.cbi-section-error { /* Define the error text border breathe display animation */
padding: 1.5rem; @keyframes error-border-breathe {
color: #fb6340; 0%{
font-weight: 600; 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 { fieldset>fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -1571,6 +1635,7 @@ input[name="nslookup"] {
height: 1.6rem !important; height: 1.6rem !important;
line-height: 1.6rem; line-height: 1.6rem;
border-radius: .25rem; border-radius: .25rem;
overflow: hidden;
} }
#swaptotal>div>div, #swaptotal>div>div,
@@ -1683,6 +1748,31 @@ td>table>tbody>tr>td,
text-decoration: none; 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 */ /* table */
@@ -1835,6 +1925,46 @@ td>table>tbody>tr>td,
flex-basis: 12%; 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 */ /* language fix */
body.lang_pl.node-main-login .cbi-value-title { body.lang_pl.node-main-login .cbi-value-title {
width: 12rem; width: 12rem;
@@ -1989,7 +2119,7 @@ body.lang_pl.node-main-login .cbi-value-title {
.cbi-value-helpicon, .cbi-value-helpicon,
.showSide, .showSide,
.main>.loading>span { .main>.loading>span {
font-family: 'argon' !important; font-family: 'argonne' !important;
font-style: normal !important; font-style: normal !important;
font-weight: normal !important; font-weight: normal !important;
font-variant: normal !important; font-variant: normal !important;
@@ -2165,11 +2295,21 @@ table>thead>tr>th,
margin-bottom: 0; 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-select,
.cbi-section-table-row>.cbi-value-field .cbi-input-text, .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-input-password{
.cbi-section-table-row>.cbi-value-field .cbi-dropdown { width:100%
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 [data-dynlist]>input,
@@ -2193,10 +2333,27 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
color: #fff !important; color: #fff !important;
} }
.warning { /* Define the warning background-color breathe display animation */
background-color: #fb6340 !important; @keyframes warning-background-color-breathe {
background-color: var(--warning) !important; 0%{
color: #fff !important; 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 { .notice {
@@ -2373,7 +2530,6 @@ table>thead>tr>th {
padding-top: .75rem; padding-top: .75rem;
padding-bottom: .75rem; padding-bottom: .75rem;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
} }
@@ -2484,7 +2640,7 @@ td>table>tbody>tr>td {
.cbi-tabmenu { .cbi-tabmenu {
color: white; color: white;
padding: 0.5rem 1rem 0 1rem; padding: 0.5rem 0.5rem 0 0.5rem;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;
@@ -2811,7 +2967,7 @@ select[multiple="multiple"] {
.cbi-section-node .cbi-value { .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 { .cbi-value-helpicon>img {
@@ -2851,7 +3019,6 @@ select[multiple="multiple"] {
padding: .7rem; padding: .7rem;
padding-left: 0; padding-left: 0;
width: 23rem; width: 23rem;
float: left;
text-align: right; text-align: right;
display: table-cell; display: table-cell;
} }
@@ -3097,21 +3264,25 @@ td>.ifacebadge,
margin-top: 0.3rem; margin-top: 0.3rem;
} }
.cbi-value-field .cbi-input-checkbox, .cbi-value-field .cbi-input-checkbox {
.cbi-value-field .cbi-input-radio { margin: 0.5rem 0.25rem 0.7rem 0.25rem;
margin: 0.9rem 0.25rem 0 0.25rem; vertical-align: middle;
height: 1rem; height: 1rem;
line-height: 1.6; line-height: 1.6;
} }
.cbi-input-checkbox { .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 { .cbi-value-field .cbi-input-radio {
margin: 0rem 0.25rem; margin: 0rem 0.25rem;
} }
.cbi-input-radio {
margin: 0rem 0.25rem;
}
.cbi-value-field>input+.cbi-value-description { .cbi-value-field>input+.cbi-value-description {
padding: 0; padding: 0;
@@ -3139,7 +3310,7 @@ td>.ifacebadge,
} }
.cbi-section-create>.cbi-button-add { .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 { .cbi-section-remove {
@@ -3276,6 +3447,10 @@ input[name="nslookup"] {
border-right: 0 !important; border-right: 0 !important;
background-color: #5e72e4 !important; background-color: #5e72e4 !important;
background-color: var(--primary) !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; font-size: 1.7rem;
} }
header>.fill>.container>.brand { header>.fill>.container>.brand {
display: inline-block; display: inline-block;
} }
.cbi-value-title {
width: 9rem;
padding-right: 1rem;
}
.node-network-diagnostics>.main .cbi-map fieldset>div * { .node-network-diagnostics>.main .cbi-map fieldset>div * {
width: 100% !important; width: 100% !important;
} }
@@ -3716,13 +3884,6 @@ input[name="nslookup"] {
position: relative; 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 { .cbi-page-actions>div>input {
display: none; 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 * Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
* *
* luci-theme-argonne * luci-theme-argonne
* Copyright 2020 Jerryk <jerrykuku@gmail.com>
* *
* Have a bug? Please create an issue here on GitHub! * 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: * luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org> * Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
* luci-theme-material: * luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/ * https://github.com/LuttyYang/luci-theme-material/
* *
* Agron Theme * Argonne Theme
* https://demos.creative-tim.com/argon-dashboard/index.html * https://demos.creative-tim.com/argon-dashboard/index.html
* *
* Login background * Login background
@@ -272,6 +271,7 @@ table>thead>tr>td {
div { div {
background-color: #32325d !important; background-color: #32325d !important;
background-color: var(--dark-primary) !important;
} }
} }
@@ -287,7 +287,7 @@ table>thead>tr>th {
} }
.cbi-rowstyle-2 { .cbi-rowstyle-2 {
background-color: #1e1e1e; background-color: #2c2c2c !important;
} }
.cbi-rowstyle-1 { .cbi-rowstyle-1 {
@@ -306,7 +306,12 @@ table>thead>tr>th {
.cbi-button { .cbi-button {
color: #ccc; 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 { .cbi-section-node {
@@ -326,6 +331,72 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
background-color: #252526; 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 { #content_syslog {
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35)
} }
@@ -464,7 +535,7 @@ select {
} }
.ifacebox { .ifacebox {
background-color: none; background-color: #1e1e1e;
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
} }
@@ -484,6 +555,30 @@ select {
background-color: #3c3c3c; 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, div.cbi-value var,
td.cbi-value-field var { td.cbi-value-field var {
color: #483d8b; color: #483d8b;
@@ -541,11 +636,37 @@ td.cbi-value-field var {
background-color: darkolivegreen !important; 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 { .notice {
background-color: #483d8b !important; background-color: #483d8b !important;
background-color: var(--dark-primary) !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-find,
.cbi-input-save, .cbi-input-save,
.cbi-button-add, .cbi-button-add,
@@ -587,8 +708,30 @@ fieldset[id^="cbi-apply-"] {
background: #252525; 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; 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{ .node-services-vssr .block h4 span{

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

47
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 Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne luci-theme-argonne
Copyright 2020 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub! Have a bug? Please create an issue here on GitHub!
https://github.com/kenzok78/luci-theme-argonne/issues https://github.com/kenzok78/luci-theme-argonne/issues
@@ -15,7 +14,7 @@
MUI: MUI:
https://github.com/muicss/mui https://github.com/muicss/mui
Agron Theme Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0 Licensed to the public under the Apache License 2.0
@@ -44,7 +43,7 @@
local node = disp.context.dispatched local node = disp.context.dispatched
local categories = disp.node_childs(tree) local categories = disp.node_childs(tree)
local currentNode = luci.dispatcher.context.path
local c = tree local c = tree
local i, r local i, r
@@ -108,22 +107,16 @@
end end
end end
local function render_submenu(prefix,parent, node) local function render_submenu(prefix, node)
local childs = disp.node_childs(node) local childs = disp.node_childs(node)
if #childs > 0 then if #childs > 0 then
local active = (currentNode[2] == parent) and "active" or "" write('<ul class="slide-menu">')
local display = (currentNode[2] == parent) and 'style="display: block;"' or ""
write('<ul class="slide-menu %s" %s>' %{
active,
display
})
for i, r in ipairs(childs) do for i, r in ipairs(childs) do
local nnode = node.nodes[r] local nnode = node.nodes[r]
local title = pcdata(striptags(translate(nnode.title))) 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>' %{ write('<li><a data-title="%s" href="%s">%s</a></li>' %{
subactive,
title, title,
nodeurl(prefix, r, nnode.query), nodeurl(prefix, r, nnode.query),
title title
@@ -138,21 +131,20 @@
local childs = disp.node_childs(cattree) local childs = disp.node_childs(cattree)
if #childs > 0 then if #childs > 0 then
write('<ul class="nav">') write('<ul class="nav">')
for i, r in ipairs(childs) do for i, r in ipairs(childs) do
local nnode = cattree.nodes[r] local nnode = cattree.nodes[r]
local grandchildren = disp.node_childs(nnode) local grandchildren = disp.node_childs(nnode)
if #grandchildren > 0 then if #grandchildren > 0 then
local active = (currentNode[2] == r) and "active" or ""
local title = pcdata(striptags(translate(nnode.title))) local title = pcdata(striptags(translate(nnode.title)))
local en_title = pcdata(striptags(string.gsub(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>' %{ write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
active,
en_title, en_title,
title title
}) })
render_submenu(category .. "/" .. r,r, nnode) render_submenu(category .. "/" .. r, nnode)
write('</li>') write('</li>')
else else
local title = pcdata(striptags(translate(nnode.title))) 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="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="96x96" href="<%=media%>/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.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-TileColor" content="<%=bar_color%>">
<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
<meta name="theme-color" content="<%=bar_color%>"> <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"> <style title="text/css">
<% if mode == 'normal' then %> <% if mode == 'normal' then %>
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -273,11 +265,11 @@
<% end -%> <% end -%>
<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script> <script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=resource%>/xhr.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> </head>
<body <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">
<div class="main-left"> <div class="main-left">
@@ -326,3 +318,12 @@
</noscript> </noscript>
<% if category then render_tabmenu(category, cattree) end %> <% 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>

124
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 Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne luci-theme-argonne
Copyright 2020 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub! 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: luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2008 Steven Barth <steven@midlink.org>
@@ -15,7 +14,7 @@
MUI: MUI:
https://github.com/muicss/mui https://github.com/muicss/mui
Agron Theme Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0 Licensed to the public under the Apache License 2.0
@@ -66,69 +65,70 @@
bar_color = mode == 'dark' and dark_primary or primary bar_color = mode == 'dark' and dark_primary or primary
end end
-%> -%>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>"> <html lang="<%=luci.i18n.context.lang%>">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI
</title> </title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="format-detection" content="telephone=no, email=no" /> <meta name="format-detection" content="telephone=no, email=no" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="x5-fullscreen" content="true"> <meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes"> <meta name="full-screen" content="yes">
<meta name="x5-page-mode" content="app"> <meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application"> <meta name="browsermode" content="application">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="<%=bar_color%>"> <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">
<link rel="icon" type="image/png" sizes="192x192" href="<%=media%>/icon/android-icon-192x192.png">
<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" 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=PKG_VERSION %>">
<style title="text/css">
<% if mode == 'normal' then %>
@media (prefers-color-scheme: dark) {
<%=dark_css%>
}
<% elseif mode == 'dark' then %>
<%=dark_css%>
<% end -%>
<% if fs.access('/etc/config/argonne') then %>
:root {
--primary: <%=primary%>;
--dark-primary: <%=dark_primary%>;
--blur-radius:<%=blur_radius%>px;
--blur-opacity:<%=blur_opacity%>;
--blur-radius-dark:<%=blur_radius_dark%>px;
--blur-opacity-dark:<%=blur_opacity_dark%>;
}
<% end -%>
</style>
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
<% if node and node.css then %>
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %>
<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=3.5.1"></script>
<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">
<link rel="icon" type="image/png" sizes="192x192" href="<%=media%>/icon/android-icon-192x192.png">
<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">
<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)%>">
<style title="text/css">
<% if mode == 'normal' then %>
@media (prefers-color-scheme: dark) {
<%=dark_css%>
}
<% elseif mode == 'dark' then %>
<%=dark_css%>
<% end -%>
<% if fs.access('/etc/config/argonne') then %>
:root {
--primary: <%=primary%>;
--dark-primary: <%=dark_primary%>;
--blur-radius:<%=blur_radius%>px;
--blur-opacity:<%=blur_opacity%>;
--blur-radius-dark:<%=blur_radius_dark%>px;
--blur-opacity-dark:<%=blur_opacity_dark%>;
}
<% end -%>
</style>
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
<% if node and node.css then %>
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %>
<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>
</head> </head>
<body class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> "> <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 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. Licensed to the public under the Apache License 2.0.
-%> -%>

121
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 Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne luci-theme-argonne
Copyright 2021 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub! 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: luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2008 Steven Barth <steven@midlink.org>
@@ -14,8 +13,8 @@
MUI: MUI:
https://github.com/muicss/mui https://github.com/muicss/mui
Agron Theme Argonne Theme
https://demos.creative-tim.com/argon-dashboard/index.html https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0 Licensed to the public under the Apache License 2.0
@@ -23,16 +22,16 @@
<%+header_login%> <%+header_login%>
<% <%
local util = require "luci.util" local util = require "luci.util"
local fs = require "nixio.fs" local fs = require "nixio.fs"
local nutil = require "nixio.util" local nutil = require "nixio.util"
local sys = require "luci.sys" local json = require "luci.jsonc"
local json = require "luci.jsonc" local sys = require "luci.sys"
local uci = require 'luci.model.uci'.cursor() local uci = require 'luci.model.uci'.cursor()
-- Fetch Local Background Media -- Fetch Local Background Media
function glob(...) local function glob(...)
local iter, code, msg = fs.glob(...) local iter, code, msg = fs.glob(...)
if iter then if iter then
return nutil.consume(iter) return nutil.consume(iter)
@@ -41,64 +40,84 @@
end end
end end
function fetchMedia(path,themeDir)
local backgroundTable = {} local imageTypes = " jpg png gif webp "
local backgroundCount = 0 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 for i, f in ipairs(glob(path)) do
attr = fs.stat(f) attr = fs.stat(f)
if attr then if attr then
local ext = fs.basename(f):match(".+%.(%w+)$") 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 = {} local bg = {}
bg.type = ext bg.type = ext
bg.url = themeDir .. fs.basename(f) bg.url = themeDir .. fs.basename(f)
table.insert(backgroundTable,bg) table.insert(backgroundTable, bg)
backgroundCount = backgroundCount + 1 backgroundCount = backgroundCount + 1
end end
end end
end end
return backgroundTable,backgroundCount return backgroundTable, backgroundCount
end
local function selectBackground(themeDir)
local bgUrl = media .. "/img/bg1.jpg"
local backgroundType = "Image"
local mimeType = ""
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
local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*", themeDir)
if ( backgroundCount > 0 ) then
local currentBg = backgroundTable[math.random(1, backgroundCount)]
bgUrl = currentBg.url
if (string.match(videoTypes, " "..currentBg.type.." ") ~= nil) then
backgroundType = "Video"
mimeType = "video/" .. currentBg.type
end
end
return bgUrl, backgroundType, mimeType
end end
local boardinfo = util.ubus("system", "board") 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 themeDir = media .. "/background/"
local bgUrl = media .. "/img/bg1.jpg" local bgUrl, backgroundType, mimeType = selectBackground(themeDir)
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"
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
end
end
if ( useBing == "0" ) then
if ( backgroundCount > 0 ) then
local currentBg = backgroundTable[math.random(1,backgroundCount)]
bgUrl = currentBg.url
if (currentBg.type == "mp4" ) then
backgroundType = "Video"
end
end
else
pcall(getBing)
end
%> %>
<!-- Login Page Start --> <!-- Login Page Start -->
<div class="login-page"> <div class="login-page">
<% if ( backgroundType == "Video" ) then %> <% if ( backgroundType == "Video" ) then %>
<!-- Video Player Start --> <!-- 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"> <video autoplay loop muted id="video">
<source src="<%=bgUrl%>" type="video/mp4"> <source src="<%=bgUrl%>" type="<%=mimeType%>">
</video> </video>
</div> </div>
<div class="volume-control mute"></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 --> <!-- Video Player End -->
<% else %> <% else %>
<!-- Image Background Start --> <!-- Image Background Start -->
@@ -108,8 +127,12 @@
<!-- Login Container Start --> <!-- Login Container Start -->
<div class="login-container"> <div class="login-container">
<div class="login-form"> <div class="login-form">
<a class="brand" href="/"><img src="<%=media%>/img/argonne.svg" class="icon"><span <!-- Logo Start -->
class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a> <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"))%>"> <form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
<%- if fuser then %> <%- if fuser then %>
@@ -130,7 +153,7 @@
<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" /> <input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
</div> </div>
</form> </form>
<!-- Login Form End -->
<script type="text/javascript">//<![CDATA[ <script type="text/javascript">//<![CDATA[
var input = document.getElementsByName('luci_password')[0]; var input = document.getElementsByName('luci_password')[0];
if (input) if (input)

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

@@ -1,12 +1,12 @@
#!/bin/sh #!/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/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 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-modulecache
rm -Rf /var/luci-indexcache rm -Rf /var/luci-indexcache
uci batch <<-EOF uci batch <<-EOF
set luci.themes.Argonne=/luci-static/argonne set luci.themes.Argonne=/luci-static/argonnene
set luci.main.mediaurlbase=/luci-static/argonne set luci.main.mediaurlbase=/luci-static/argonnene
commit luci commit luci
EOF EOF
exit 0 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