fish/immortalwrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

luci-theme-argon: bump to v1.6.7

Browse Source
This commit is contained in:
CN_SZTL 2020-08-18 17:17:38 +08:00
parent 51b27218f4
commit 2d75f4a74f
No known key found for this signature in database
GPG Key ID: 6850B6345C862176
12 changed files with 418 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package/ctcgfw/luci-theme-argonv3/Makefile
View File

@ -7,9 +7,9 @@
include $(TOPDIR)/rules.mk
LUCI_TITLE:=Argon Theme
LUCI_DEPENDS:=
PKG_VERSION:=1.6.5
PKG_RELEASE:=20200731
LUCI_DEPENDS:=+luasocket
PKG_VERSION:=1.6.7
PKG_RELEASE:=20200818
include $(TOPDIR)/feeds/luci/luci.mk

111
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/cascade.css
View File

@ -35,6 +35,16 @@
@import url("fonts.css?v=3");
@import url("pure-min.css?v=1");
:root {
--primary: #5e72e4;
--dark-primary: #5065d8;
--darker: black;
--default: #525461;
--background-color: #f4f5f7;
--warning: #fb6340;
--footer-color: #aaa;
--menubar-background: #fff;
--menubar-scrollbar-thumb: #f6f9fc;
--menubar-text-color: #4c4c4c;
--blue: #5e72e4;
--indigo: #5603ad;
--purple: #8965e0;
@ -45,29 +55,28 @@
--green: #2dce89;
--teal: #11cdef;
--cyan: #2bffc6;
--white: #fff;
--gray: #8898aa;
--gray-dark: #32325d;
--light: #ced4da;
--lighter: #e9ecef;
--primary: #5e72e4;
--secondary: #f7fafc;
--success: #2dce89;
--info: #11cdef;
--warning: #fb6340;
--danger: #f5365c;
--light: #adb5bd;
--dark: #212529;
--default: #172b4d;
--white: #fff;
--neutral: #fff;
--darker: black;
--background-color: #f4f5f7;
--login-form-bg-color: rgba(244, 245, 247, 0.8);
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--blur-radius: 10px;
--blur-opacity: 0.5;
--blur-radius-dark: 10px;
--blur-opacity-dark: 0.5;
--font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif;
@ -94,10 +103,11 @@ body {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
::selection {
background-color: var(--primary);
background-color: #5e72e4;
background-color: var(--primary);
color: #ffffff;
color: var(--white);
}
@ -135,12 +145,27 @@ li {
align-items: center;
justify-content: center;
background-color: #000;
background-color: var(--darker);
overflow: hidden;
}
.login-page .video video {
width: 100%;
height: auto;
}
.login-page .volume-control {
position: fixed;
right: 1rem;
top: 1rem;
width: 1.5rem;
height: 1.5rem;
z-index: 5000;
cursor: pointer;
background-size: contain;
background-image: url(../img/volume_high.svg);
}
.login-page .volume-control.mute {
background-image: url(../img/volume_off.svg);
}
.login-page .login-container {
height: 100%;
margin-left: 4.5rem;
@ -168,7 +193,8 @@ li {
width: 100%;
min-height: 100%;
max-width: 420px;
background-color: #ffffff;
background-color: #fff;
background-color: var(--white);
}
.login-page .login-container .login-form .brand {
display: flex;
@ -176,6 +202,7 @@ li {
align-items: center;
margin: 50px auto 100px 50px;
color: #525461;
color: var(--default);
}
.login-page .login-container .login-form .brand .icon {
width: 50px;
@ -215,6 +242,7 @@ li {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #525461;
color: var(--default);
font-size: 1.5rem;
position: absolute;
z-index: 100;
@ -227,6 +255,7 @@ li {
height: 1px;
bottom: 0;
border-bottom: 1px #5e72e4 solid;
border-bottom: 1px var(--primary) solid;
transform: scaleX(0);
transition: transform 0.3s;
}
@ -240,9 +269,11 @@ li {
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
color: #525461;
color: var(--default);
border: 0;
border-radius: 0;
border-bottom: 1px solid #fff;
border-bottom: 1px solid var(--white);
background-color: transparent;
background-clip: padding-box;
box-shadow: 0 3px 2px rgba(233, 236, 239, 0.05);
@ -266,12 +297,14 @@ li {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px;
font-weight: 600;
font-size: 15px;
color: #ffffff;
color: #fff;
color: var(--white);
text-align: center;
width: 100%;
cursor: pointer;
min-height: 50px;
background-image: linear-gradient(-135deg, #8692de 0%, #788aef 100%);
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
border-radius: 6px;
outline: none;
border-width: initial;
@ -285,7 +318,8 @@ li {
}
.login-page .login-container .login-form .cbi-button-apply:hover,
.login-page .login-container .login-form .cbi-button-apply :focus {
background-image: linear-gradient(-135deg, #828fe0 0%, #5e72e4 100%);
background-color: #5065d8 !important;
background-color: var(--dark-primary) !important;
}
.login-page .login-container footer {
box-sizing: border-box;
@ -298,6 +332,13 @@ li {
padding: 0px 0px 30px;
z-index: 10;
color: #525461;
color: var(--default);
position: relative;
}
.login-page .login-container footer .ftc {
position: absolute;
bottom: 30px;
width: 100%;
}
.login-page .login-container footer .luci-link {
display: block;
@ -310,9 +351,9 @@ li {
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-page .login-container .login-form {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(244, 245, 247, 0.7);
-webkit-backdrop-filter: blur(var(--blur-radius));
backdrop-filter: blur(var(--blur-radius));
background-color: rgba(244, 245, 247, var(--blur-opacity));
}
}
/***********************
@ -340,9 +381,11 @@ header::after {
height: 2rem;
width: 100%;
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
}
header.bg-primary {
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
}
header .fill {
padding: 0.8rem 0;
@ -355,6 +398,7 @@ header .fill .container {
header .fill .container .brand {
font-size: 1.5rem;
color: #fff;
color: var(--white);
font-family: "TypoGraphica";
text-decoration: none;
padding-left: 1rem;
@ -371,10 +415,12 @@ footer {
text-align: right;
padding: 1rem;
color: #aaa;
color: var(--footer-color);
font-size: 0.8rem;
}
footer a {
color: #aaa;
color: var(--footer-color);
text-decoration: none;
}
/***********************
@ -408,11 +454,12 @@ footer a {
width: calc(0% + 15rem);
height: 100%;
background-color: #fff !important;
background-color: var(--menubar-background) !important;
box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px;
overflow-x: auto;
position: fixed;
z-index: 100;
transition: width 0.3s ease-in-out;
transition: width 0.2s ease-in-out;
}
.main .main-left::-webkit-scrollbar {
width: 5px;
@ -420,9 +467,11 @@ footer a {
}
.main .main-left::-webkit-scrollbar-thumb {
background-color: #f6f9fc;
background-color: var(--menubar-scrollbar-thumb);
}
.main .main-left::-webkit-scrollbar-track {
background-color: #fff;
background-color: var(--menubar-background);
}
.main .main-left .sidenav-header {
padding: 1.5rem;
@ -431,6 +480,7 @@ footer a {
.main .main-left .sidenav-header .brand {
font-size: 1.8rem;
color: #5e72e4;
color: var(--primary);
font-family: "TypoGraphica", sans-serif;
text-decoration: none;
padding-left: 0;
@ -447,6 +497,7 @@ footer a {
}
.main .main-left .nav li a {
color: #525f7f;
color: var(--default);
display: block;
}
.main .main-left .nav li:nth-last-child(1) {
@ -467,7 +518,8 @@ footer a {
padding: 0.5rem 0rem 0.5rem 0;
text-decoration: none;
white-space: nowrap;
color: rgba(0, 0, 0, 0.7);
color: #4c4c4c;
color: var(--menubar-text-color);
transition: all 0.2s;
font-size: 0.875rem;
}
@ -479,10 +531,12 @@ footer a {
left: 0;
bottom: 0;
background-color: #5e72e4;
background-color: var(--primary);
transition: all 0.2s;
}
.main .main-left .nav li.slide ul li a:hover::after {
color: #000;
color: var(--darker);
width: 100%;
}
.main .main-left .nav li.slide .menu {
@ -2634,6 +2688,25 @@ input[name="nslookup"] {
font-size: 0.7rem;
}
}
@media screen and (min-width: 600px) {
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #9e9e9e;
}
::-webkit-scrollbar-thumb:hover {
background: #757575;
}
::-webkit-scrollbar-thumb:active {
background: #424242;
}
}
@media screen and (max-width: 992px) {
.main .main-left {
width: 0;
@ -3245,9 +3318,9 @@ input[name="nslookup"] {
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-page .login-container .login-form {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(var(--blur-radius-dark));
backdrop-filter: blur(var(--blur-radius-dark));
background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
}
}
}

17
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/dark.css
View File

@ -296,6 +296,9 @@ input:focus {
outline: 0;
box-shadow: none;
}
select {
background-color: #1e1e1e !important;
}
#cbi-dropbear h2,
#cbi-dropbear .cbi-map-descr,
#cbi-dropbear .cbi-map-descr abbr,
@ -354,7 +357,7 @@ td.cbi-value-field var {
background-color: #1e1e1e;
}
.node-services-vssr .block {
background-color: #3c3c3c !important;
background-color: #1e1e1e !important;
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35);
}
.node-services-vssr .block h4 {
@ -380,6 +383,9 @@ td.cbi-value-field var {
.node-services-vssr .incon:nth-child(2) {
border-right: #1e1e1e 1px solid;
}
.main .main-right #maincontent .container p {
color: #ccc;
}
#xhr_poll_status > .label.success {
color: #ccc !important;
background-color: darkolivegreen !important;
@ -423,11 +429,14 @@ fieldset[id^="cbi-apply-"] {
.cbi-section-error {
color: darkorange;
}
.node-services-vssr .block h4 span {
color: #ccc !important;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-page .login-container .login-form {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(var(--blur-radius-dark));
backdrop-filter: blur(var(--blur-radius-dark));
background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
}
}
@media screen and (max-width: 480px) {

1
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_high.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597500707209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9192" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M484.430769 51.2L236.307692 354.461538H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v157.538462c0 43.323077 35.446154 78.769231 78.769231 78.769231h118.153846l248.123077 303.261538c25.6 25.6 66.953846 7.876923 66.953846-27.569231V78.769231c0-35.446154-43.323077-53.169231-66.953846-27.569231z m354.461539 120.123077c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-27.569231 27.569231c-7.876923 7.876923-7.876923 21.661538 0 27.56923C858.584615 299.323077 905.846154 399.753846 905.846154 512c0 112.246154-47.261538 212.676923-122.092308 285.538462-7.876923 7.876923-7.876923 19.692308 0 27.56923l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.569231 0C927.507692 768 984.615385 645.907692 984.615385 512c0-133.907692-55.138462-256-145.723077-340.676923z m-124.061539 126.030769c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-27.56923 27.569231c-7.876923 7.876923-7.876923 19.692308 0 27.569231 43.323077 39.384615 68.923077 96.492308 68.923077 159.507692 0 63.015385-27.569231 120.123077-70.892308 159.507692-7.876923 7.876923-7.876923 19.692308 0 27.569231l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0 57.107692-53.169231 94.523077-129.969231 94.523077-216.615385 0-82.707692-35.446154-159.507692-92.553846-212.676923z" p-id="9193" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_off.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597500723732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9385" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M484.430769 51.2L236.307692 354.461538H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v157.538462c0 43.323077 35.446154 78.769231 78.769231 78.769231h118.153846l248.123077 303.261538c25.6 25.6 66.953846 7.876923 66.953846-27.569231V78.769231c0-35.446154-43.323077-53.169231-66.953846-27.569231zM882.215385 512l96.492307-96.492308c7.876923-7.876923 7.876923-19.692308 0-27.56923l-27.56923-27.569231c-7.876923-7.876923-19.692308-7.876923-27.569231 0L827.076923 456.861538l-96.492308-96.492307c-7.876923-7.876923-19.692308-7.876923-27.56923 0l-27.569231 27.569231c-7.876923 7.876923-7.876923 19.692308 0 27.56923l96.492308 96.492308-96.492308 96.492308c-7.876923 7.876923-7.876923 19.692308 0 27.56923l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0l96.492308-96.492307 96.492308 96.492307c7.876923 7.876923 19.692308 7.876923 27.569231 0l27.56923-27.569231c7.876923-7.876923 7.876923-19.692308 0-27.56923L882.215385 512z" p-id="9386" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

12
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/js/script.js
View File

@ -199,16 +199,12 @@
$(".showSide").click(function () {
if (showSide) {
$(".darkMask").stop(true).fadeOut("fast");
$(".main-left").stop(true).animate({
width: "0"
}, "fast");
$(".main-left").width(0);
$(".main-right").css("overflow-y", "auto");
showSide = false;
} else {
$(".darkMask").stop(true).fadeIn("fast");
$(".main-left").stop(true).animate({
width: "15rem"
}, "fast");
$(".main-left").width("15rem");
$(".main-right").css("overflow-y", "hidden");
showSide = true;
}
@ -219,9 +215,7 @@
if (showSide) {
showSide = false;
$(".darkMask").stop(true).fadeOut("fast");
$(".main-left").stop(true).animate({
width: "0"
}, "fast");
$(".main-left").width(0);
$(".main-right").css("overflow-y", "auto");
}
});

128
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/cascade.less
View File

@ -39,6 +39,17 @@
@import url("pure-min.css?v=1");
:root {
--primary: #5e72e4;
--dark-primary: #5065d8;
--white: #fff;
--darker: black;
--default: #525461;
--background-color: #f4f5f7;
--warning: #fb6340;
--footer-color:#aaa;
--menubar-background:#fff;
--menubar-scrollbar-thumb:#f6f9fc;
--menubar-text-color:#4c4c4c;
--blue: #5e72e4;
--indigo: #5603ad;
--purple: #8965e0;
@ -54,25 +65,26 @@
--gray-dark: #32325d;
--light: #ced4da;
--lighter: #e9ecef;
--primary: #5e72e4;
--secondary: #f7fafc;
--success: #2dce89;
--info: #11cdef;
--warning: #fb6340;
--danger: #f5365c;
--light: #adb5bd;
--dark: #212529;
--default: #172b4d;
--white: #fff;
--neutral: #fff;
--darker: black;
--background-color: #f4f5f7;
--login-form-bg-color: rgba(244, 245, 247, 0.8);
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--blur-radius:10px;
--blur-opacity:0.5;
--blur-radius-dark:10px;
--blur-opacity-dark:0.5;
--font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif;
@ -104,11 +116,13 @@ body {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color:transparent;
}
::selection {
background-color: var(--primary);
background-color: #5e72e4;
background-color: var(--primary);
color: #ffffff;
color: var(--white);
}
@ -130,9 +144,6 @@ li {
}
/***********************
*
* Login Page
@ -155,6 +166,7 @@ li {
align-items: center;
justify-content: center;
background-color: #000;
background-color: var(--darker);
overflow: hidden;
video {
width: 100%;
@ -162,6 +174,21 @@ li {
}
}
.volume-control{
position: fixed;
right: 1rem;
top: 1rem;
width: 1.5rem;
height: 1.5rem;
z-index: 5000;
cursor: pointer;
background-size: contain;
background-image: url(../img/volume_high.svg);
&.mute{
background-image: url(../img/volume_off.svg);
}
}
.login-container {
height: 100%;
margin-left: 4.5rem;
@ -189,7 +216,8 @@ li {
width: 100%;
min-height: 100%;
max-width: 420px;
background-color: rgb(255, 255, 255);
background-color: #fff;
background-color: var(--white);
.brand {
display: flex;
@ -197,6 +225,7 @@ li {
align-items: center;
margin: 50px auto 100px 50px;
color: #525461;
color: var(--default);
.icon {
width: 50px;
@ -242,6 +271,7 @@ li {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #525461;
color: var(--default);
font-size: 1.5rem;
position: absolute;
z-index: 100;
@ -255,6 +285,7 @@ li {
height: 1px;
bottom: 0;
border-bottom: 1px #5e72e4 solid;
border-bottom: 1px var(--primary) solid;
transform: scaleX(0);
transition: transform 0.3s;
}
@ -269,9 +300,11 @@ li {
box-sizing: border-box;
transition: all .3s cubic-bezier(.68, -.55, .265, 1.55);
color: #525461;
color:var(--default);
border: 0;
border-radius: 0;
border-bottom: 1px solid #fff;
border-bottom: 1px solid var(--white);
background-color: transparent;
background-clip: padding-box;
box-shadow: 0 3px 2px rgba(233, 236, 239, .05);
@ -303,12 +336,14 @@ li {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px;
font-weight: 600;
font-size: 15px;
color: rgb(255, 255, 255);
color: #fff;
color: var(--white);
text-align: center;
width: 100%;
cursor: pointer;
min-height: 50px;
background-image: linear-gradient(-135deg, rgb(134, 146, 222) 0%, rgb(120, 138, 239) 100%);
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
border-radius: 6px;
outline: none;
border-width: initial;
@ -322,7 +357,8 @@ li {
&:hover,
:focus {
background-image: linear-gradient(-135deg, rgb(130, 143, 224) 0%, rgb(94, 114, 228) 100%);
background-color: #5065d8 !important;
background-color: var(--dark-primary) !important;
}
}
@ -340,6 +376,13 @@ li {
padding: 0px 0px 30px;
z-index: 10;
color: #525461;
color: var(--default);
position: relative;
.ftc{
position: absolute;
bottom: 30px;
width: 100%;
}
.luci-link {
display: block;
@ -358,9 +401,9 @@ li {
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-page .login-container .login-form {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(244, 245, 247, 0.7);
-webkit-backdrop-filter: blur(var(--blur-radius));
backdrop-filter: blur(var(--blur-radius));
background-color: rgba(244, 245, 247, var(--blur-opacity));
}
}
@ -396,10 +439,12 @@ header {
height: 2rem;
width: 100%;
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
}
&.bg-primary {
background-color: #5e72e4 !important;
background-color: var(--primary) !important;
}
.fill {
@ -413,6 +458,7 @@ header {
.brand {
font-size: 1.5rem;
color: #fff;
color: var(--white);
font-family: "TypoGraphica";
text-decoration: none;
padding-left: 1rem;
@ -435,13 +481,16 @@ header {
***************************/
footer {
text-align: right;
padding: 1rem;
color: #aaa;
color:var(--footer-color);
font-size: 0.8rem;
a {
color: #aaa;
color:var(--footer-color);
text-decoration: none;
}
}
@ -482,11 +531,12 @@ footer {
width: calc(0% + 15rem);
height: 100%;
background-color: #fff !important;
background-color: var(--menubar-background) !important;
box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px;
overflow-x: auto;
position: fixed;
z-index: 100;
transition: width 0.3s ease-in-out;
transition: width 0.2s ease-in-out;
&::-webkit-scrollbar {
width: 5px;
@ -494,11 +544,14 @@ footer {
}
&::-webkit-scrollbar-thumb {
background-color: #f6f9fc
background-color: #f6f9fc;
background-color: var(--menubar-scrollbar-thumb);
}
&::-webkit-scrollbar-track {
background-color: #fff;
background-color: var(--menubar-background);
}
.sidenav-header {
@ -508,6 +561,7 @@ footer {
.brand {
font-size: 1.8rem;
color: #5e72e4;
color: var(--primary);
font-family: "TypoGraphica", sans-serif;
text-decoration: none;
padding-left: 0;
@ -526,6 +580,7 @@ footer {
a {
color: #525f7f;
color: var(--default);
display: block;
}
@ -551,7 +606,8 @@ footer {
padding: 0.5rem 0rem 0.5rem 0;
text-decoration: none;
white-space: nowrap;
color: rgba(0, 0, 0, .7);
color: #4c4c4c;
color: var(--menubar-text-color);
transition: all 0.2s;
font-size: 0.875rem;
@ -563,12 +619,14 @@ footer {
left: 0;
bottom: 0;
background-color: #5e72e4;
background-color: var(--primary);
transition: all 0.2s;
}
&:hover {
&::after {
color: #000;
color:var(--darker);
width: 100%;
}
}
@ -3309,6 +3367,30 @@ input[name="nslookup"] {
}
}
@media screen and (min-width: 600px) {
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #9e9e9e;
}
::-webkit-scrollbar-thumb:hover {
background: #757575;
}
::-webkit-scrollbar-thumb:active {
background: #424242;
}
}
@media screen and (max-width: 992px) {
.main {
.main-left {
@ -4150,9 +4232,9 @@ input[name="nslookup"] {
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-page .login-container .login-form {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(var(--blur-radius-dark));
backdrop-filter: blur(var(--blur-radius-dark));
background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
}
}

21
package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/dark.less
View File

@ -405,6 +405,10 @@ input:focus {
box-shadow: none;
}
select {
background-color: #1e1e1e !important;
}
#cbi-dropbear h2,
#cbi-dropbear .cbi-map-descr,
#cbi-dropbear .cbi-map-descr abbr,
@ -480,7 +484,7 @@ td.cbi-value-field var {
}
.node-services-vssr .block {
background-color: #3c3c3c !important;
background-color: #1e1e1e !important;
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35);
}
@ -514,6 +518,10 @@ td.cbi-value-field var {
border-right: #1e1e1e 1px solid;
}
.main .main-right #maincontent .container p {
color: #ccc;
}
#xhr_poll_status>.label.success {
color: #ccc !important;
@ -568,12 +576,15 @@ fieldset[id^="cbi-apply-"] {
color: darkorange;
}
.node-services-vssr .block h4 span{
color: #ccc !important;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-page .login-container .login-form {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(var(--blur-radius-dark));
backdrop-filter: blur(var(--blur-radius-dark));
background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
}
}

59
package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/footer.htm
View File

@ -38,29 +38,42 @@
local tree = disp.node()
local categories = disp.node_childs(tree)
%>
</div>
<footer class="mobile-hide">
<div>
<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
<a href="https://github.com/jerrykuku/luci-theme-argon">ArgonTheme v1.6.5</a> /
<%= ver.distversion %>
<% if #categories > 1 then %>
<ul class="breadcrumb pull-right" id="modemenu">
<% for i, r in ipairs(categories) do %>
<li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
<% end %>
</ul>
<% end %>
</div>
</footer>
</div>
</div>
</div>
<footer class="mobile-hide">
<div class="ftc">
<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %>
(<%= ver.luciversion %>)</a> /
<a href="https://github.com/jerrykuku/luci-theme-argon">ArgonTheme <%# vPKG_VERSION %></a> /
<%= ver.distversion %>
<% if #categories > 1 then %>
<ul class="breadcrumb pull-right" id="modemenu">
<% for i, r in ipairs(categories) do %>
<li<% if request[1] == r then %> class="active" <%end%>><a
href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span
class="divider">|</span></li>
<% end %>
</ul>
<% end %>
</div>
</footer>
</div>
</div>
<script>
// thanks for Jo-Philipp Wich <jow@openwrt.org>
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
</script>
<script src="<%=media%>/js/script.js"></script>
<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);
}
})
</script>
<script src="<%=media%>/js/script.js"></script>
</body>
</html>

12
package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header.htm
View File

@ -229,19 +229,18 @@
<% if css then %>
<style title="text/css"><%=css %></style>
<% end -%>
<script src="<%=resource%>/cbi.js?v=git-19.190.55614-35357e4"></script>
<script src="<%=resource%>/xhr.js?v=git-19.190.55614-35357e4"></script>
<script src="<%=media%>/js/jquery.min.js?v=git-19.190.55614-35357e4"></script>
<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>
<body
class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">
<div class="main">
<div class="main-left">
<div class="sidenav-header d-flex align-items-center">
<a class="brand" href="#"><%=boardinfo.hostname or "?"%> ™</a>
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
</div>
<% render_topmenu() %>
</div>
@ -250,7 +249,7 @@
<div class="fill">
<div class="container">
<a class="showSide"></a>
<a class="brand" href="#"><%=boardinfo.hostname or "?"%> ™</a>
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
<div class="pull-right">
<% render_changes() %>
<span id="xhr_poll_status" style="display:none"
@ -265,7 +264,6 @@
</div>
</header>
<div class="darkMask"></div>
<div id="maincontent">
<div class="container">
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>

193
package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header_login.htm
View File

@ -47,147 +47,7 @@
local c = tree
local i, r
-- tag all nodes leading to this page
for i, r in ipairs(request) do
if c.nodes and c.nodes[r] then
c = c.nodes[r]
c._menu_selected = true
end
end
-- send as HTML5
http.prepare_content("text/html")
local function nodeurl(prefix, name, query)
local u = url(prefix, name)
if query then
u = u .. http.build_querystring(query)
end
return pcdata(u)
end
local function render_tabmenu(prefix, node, level)
if not level then
level = 1
end
local childs = disp.node_childs(node)
if #childs > 0 then
if level > 2 then
write('<ul class="tabs">')
end
local selected_node
local selected_name
local i, v
for i, v in ipairs(childs) do
local nnode = node.nodes[v]
if nnode._menu_selected then
selected_node = nnode
selected_name = v
end
if level > 2 then
write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '',
nodeurl(prefix, v, nnode.query),
striptags(translate(nnode.title))
})
end
end
if level > 2 then
write('</ul>')
end
if selected_node then
render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
end
end
end
local function render_submenu(prefix, node)
local childs = disp.node_childs(node)
if #childs > 0 then
write('<ul class="slide-menu">')
for i, r in ipairs(childs) do
local nnode = node.nodes[r]
local title = pcdata(striptags(translate(nnode.title)))
write('<li><a data-title="%s" href="%s">%s</a></li>' %{
title,
nodeurl(prefix, r, nnode.query),
title
})
end
write('</ul>')
end
end
local function render_topmenu()
local childs = disp.node_childs(cattree)
if #childs > 0 then
write('<ul class="nav">')
for i, r in ipairs(childs) do
local nnode = cattree.nodes[r]
local grandchildren = disp.node_childs(nnode)
if #grandchildren > 0 then
local title = pcdata(striptags(translate(nnode.title)))
local en_title = pcdata(striptags(string.gsub(nnode.title," ","_")))
write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
en_title,
title
})
render_submenu(category .. "/" .. r, nnode)
write('</li>')
else
local title = pcdata(striptags(translate(nnode.title)))
local en_title = pcdata(striptags(nnode.title))
write('<li class="slide"><a class="menu exit" data-title="%s" href="%s">%s</a></li>' %{
en_title,
nodeurl(category, r, nnode.query),
title
})
end
end
write('</ul>')
end
end
local function render_changes()
-- calculate the number of unsaved changes
if tree.nodes[category] and tree.nodes[category].ucidata then
local ucichanges = 0
for i, j in pairs(require("luci.model.uci").cursor():changes()) do
for k, l in pairs(j) do
for m, n in pairs(l) do
ucichanges = ucichanges + 1;
end
end
end
if ucichanges > 0 then
write('<a class="uci_change_indicator label notice" href="%s?redir=%s">%s: %d</a>' %{
url(category, 'uci/changes'),
http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")),
translate('Unsaved Changes'),
ucichanges
})
end
end
end
math.randomseed(os.time())
math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9)))
-%>
<!DOCTYPE html>
@ -195,8 +55,8 @@
<head>
<meta charset="utf-8">
<title>
<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %>
- LuCI</title>
<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI
</title>
<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="apple-mobile-web-app-capable" content="yes">
@ -233,49 +93,10 @@
<% if css then %>
<style title="text/css"><%=css %></style>
<% end -%>
<script src="<%=resource%>/cbi.js?v=1.6.4"></script>
<script src="<%=resource%>/xhr.js?v=1.6.4"></script>
<script src="<%=media%>/js/jquery.min.js?v=1.6.4"></script>
<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>
<body class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">
<div class="login-page">
<%
function glob(...)
local iter, code, msg = fs.glob(...)
if iter then
return nutil.consume(iter)
else
return nil, code, msg
end
end
function getExtension(str)
return str:match(".+%.(%w+)$")
end
local videocount = 0
local attr = {}
local vvits = {}
local theme_dir = "/luci-static/argon/background/"
for i, f in ipairs(glob("/www" .. theme_dir .. "*")) do
attr = fs.stat(f)
if attr then
local ext = getExtension(fs.basename(f))
if ext == "mp4" then
vvits[videocount] = theme_dir .. fs.basename(f)
videocount = videocount + 1
end
end
end
if videocount > 0 then
%>
<div class="video">
<video autoplay="" loop="" muted="" >
<source src="<%=vvits[math.random(0,videocount-1)]%>" type="video/mp4">
</video>
</div>
<% end %>
<div class="login-container">
<div class="login-form">

229
package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/sysauth.htm
View File

@ -1,9 +1,27 @@
<%#
Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008-2012 Jo-Philipp Wich <jow@openwrt.org>
Licensed to the public under the Apache License 2.0.
Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template
luci-theme-argon
Copyright 2020 Jerryk <jerrykuku@gmail.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-2016 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl>
MUI:
https://github.com/muicss/mui
Agron Theme
https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0
-%>
<%+header_login%>
<%
local util = require "luci.util"
@ -11,6 +29,7 @@
local fs = require "nixio.fs"
local nutil = require "nixio.util"
-- get files from folder
function glob(...)
local iter, code, msg = fs.glob(...)
if iter then
@ -20,113 +39,137 @@
end
end
-- get file extension
function getExtension(str)
return str:match(".+%.(%w+)$")
end
local bgcount = 0
local videocount = 0
local inits,attr = {}
local vvits = {}
local theme_dir = "/luci-static/argon/background/"
local currentBg = {}
local bgs,attr = {}
local theme_dir = media .. "/background/"
for i, f in ipairs(glob("/www" .. theme_dir .. "*")) do
attr = fs.stat(f)
if attr then
local ext = getExtension(fs.basename(f))
if ext == "jpg" or ext == "png" or ext == "gif" then
inits[bgcount] = theme_dir .. fs.basename(f)
if ext == "jpg" or ext == "png" or ext == "gif" or ext == "mp4" then
local bg = {}
bg.type = ext
bg.url = theme_dir .. fs.basename(f)
table.insert(bgs,bg)
bgcount = bgcount + 1
elseif ext == "mp4" then
vvits[videocount] = theme_dir .. fs.basename(f)
videocount = videocount + 1
end
end
end
if bgcount > 0 then
currentBg = bgs[math.random(1,bgcount)]
end
%>
<a class="brand" href="/"><img src="/luci-static/argon/img/argon.svg" class="icon"><span
class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
<%- if fuser then %>
<div class="errorbox"><%:Invalid username and/or password! Please try again.%></div>
<% end -%>
<div class="input-container">
<div class="input-group user-icon">
<input class="cbi-input-user" id="cbi-input-user" type="text" name="luci_username" value="<%=duser%>" />
<label class="border" for="cbi-input-user"></label>
</div>
<div class="input-group pass-icon">
<input class="cbi-input-password" id="cbi-input-password" type="password" name="luci_password" />
<label class="border" for="cbi-input-password"></label>
</div>
<div class="login-page">
<% if (bgcount > 0 and currentBg.type == "mp4") then %>
<div class="video">
<video autoplay loop muted id="video">
<source src="<%=currentBg.url%>" type="video/mp4">
</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>
<% end %>
<div class="login-container">
<div class="login-form">
<a class="brand" href="/"><img src="<%=media%>/img/argon.svg" class="icon"><span
class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
<%- if fuser then %>
<div class="errorbox"><%:Invalid username and/or password! Please try again.%></div>
<% end -%>
<div class="input-container">
<div class="input-group user-icon">
<input class="cbi-input-user" id="cbi-input-user" type="text" name="luci_username"
value="<%=duser%>" />
<label class="border" for="cbi-input-user"></label>
</div>
<div class="input-group pass-icon">
<input class="cbi-input-password" id="cbi-input-password" type="password"
name="luci_password" />
<label class="border" for="cbi-input-password"></label>
</div>
</div>
<div>
<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
</div>
</form>
<script type="text/javascript">//<![CDATA[
var input = document.getElementsByName('luci_password')[0];
if (input)
input.focus();
//]]></script>
<%
if (bgcount == 0 ) then
local bingjson = "{}"
local http = require "socket.http"
local bing = http.request("http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US")
if (bing and bing ~= '') then
bingjson = bing
end
%>
<script type="text/javascript">//<![CDATA[
try {
var bing = <%=bingjson%>;
var bg = "https://www.bing.com" + bing.images[0].url;
$(".login-page").css("background-image", "url(" + bg + ")");
} catch{
console.log("can not access bing api");
$(".login-page").css("background-image", "url(<%=media%>/img/bg1.jpg)");
}
//]]></script>
<% elseif (bgcount > 0 and currentBg["type"] ~= "mp4") then%>
<script type="text/javascript">//<![CDATA[
console.log("can not access bing api");
$(".login-page").css("background-image", "url(<%=currentBg.url%>)");
<div>
<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
</div>
</form>
//]]></script>
<%
<%
end
if (bgcount == 0 and videocount == 0) then
local bingjson = "{}"
local bing = string.gsub(luci.sys.exec("content=`wget --no-check-certificate -q -O - 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US'`;echo $content"), "\n", "")
if (bing and bing ~= '') then
bingjson = bing
end
%>
<script type="text/javascript">//<![CDATA[
var input = document.getElementsByName('luci_password')[0];
if (input)
input.focus();
try {
var bing = <%=bingjson%>;
var bg = "https://www.bing.com" + bing.images[0].url;
$(".login-page").css("background-image", "url(" + bg + ")");
} catch{
console.log("can not access bing api");
$(".login-page").css("background-image", "url(/luci-static/argon/img/bg1.jpg)");
}
local uci = require "luci.model.uci".cursor()
local fs = require "nixio.fs"
local https_key = uci:get("uhttpd", "main", "key")
local https_port = uci:get("uhttpd", "main", "listen_https")
if type(https_port) == "table" then
https_port = https_port[1]
end
//]]></script>
<% elseif videocount == 0 then%>
<script type="text/javascript">//<![CDATA[
console.log("can not access bing api");
$(".login-page").css("background-image", "url(<%=inits[math.random(0,bgcount-1)]%>)");
if https_port and fs.access(https_key) then
https_port = https_port:match("(%d+)$")
%>
<script type="text/javascript">//<![CDATA[
if (document.location.protocol != 'https:') {
var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
var img = new Image;
img.onload = function () { window.location = url };
img.src = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
setTimeout(function () {
img.src = ''
}, 5000);
}
//]]></script>
<% end %>
//]]></script>
<% end %>
<%
local uci = require "luci.model.uci".cursor()
local fs = require "nixio.fs"
local https_key = uci:get("uhttpd", "main", "key")
local https_port = uci:get("uhttpd", "main", "listen_https")
if type(https_port) == "table" then
https_port = https_port[1]
end
if https_port and fs.access(https_key) then
https_port = https_port:match("(%d+)$")
%>
<script type="text/javascript">//<![CDATA[
if (document.location.protocol != 'https:') {
var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
var img = new Image;
img.onload = function () { window.location = url };
img.src = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
setTimeout(function () {
img.src = ''
}, 5000);
}
//]]></script>
<% end %>
<%+footer%>
<%+footer%>