diff --git a/package/ctcgfw/luci-theme-argon/Makefile b/package/ctcgfw/luci-theme-argon/Makefile index 125a31918c..6e27de1f44 100644 --- a/package/ctcgfw/luci-theme-argon/Makefile +++ b/package/ctcgfw/luci-theme-argon/Makefile @@ -7,9 +7,9 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Argon Theme -LUCI_DEPENDS:= -PKG_VERSION:=2.2.1 -PKG_RELEASE:=20200725 +LUCI_DEPENDS:=+luasocket +PKG_VERSION:=2.2.2 +PKG_RELEASE:=20200816 include $(TOPDIR)/feeds/luci/luci.mk diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/background/README.md b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/background/README.md new file mode 100644 index 0000000000..1dda9b76ae --- /dev/null +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/background/README.md @@ -0,0 +1,2 @@ +Drop background here! +accept jpg png gif and mp4 \ No newline at end of file diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css index b3ea508a90..2fcfd5119f 100644 --- a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css @@ -2,7 +2,7 @@ * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * * luci-theme-argon - * Copyright 2019 Jerrykuku + * Copyright 2020 Jerrykuku * * Have a bug? Please create an issue here on GitHub! * https://github.com/jerrykuku/luci-theme-argon/issues @@ -69,6 +69,10 @@ --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; @@ -99,8 +103,8 @@ body { box-sizing: border-box; } ::selection { - background-color: var(--primary); background-color: #5e72e4; + background-color: var(--primary); color: #ffffff; color: var(--white); } @@ -296,6 +300,36 @@ hr { background-size: cover; transition: all 0.5s; } +.login-page .video { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #000; + background-color: var(--darker); + overflow: hidden; + pointer-events: none; +} +.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; @@ -426,7 +460,7 @@ hr { width: 100%; cursor: pointer; min-height: 50px; - background-image: linear-gradient(-135deg, #8692de 0%, #788aef 100%); + background-color: #5e72e4 !important; border-radius: 6px; outline: none; border-width: initial; @@ -440,7 +474,7 @@ hr { } .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; } .login-page .login-container footer { box-sizing: border-box; @@ -451,16 +485,22 @@ hr { justify-content: space-evenly; margin-top: auto; padding: 0px 0px 30px; + color: #525461; z-index: 10; } +.login-page .login-container footer .ftc { + position: absolute; + bottom: 30px; + width: 100%; +} .login-page .login-container footer .luci-link { display: block; } @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)); } } header, @@ -3709,9 +3749,9 @@ pre.command-output { } @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)); } } } diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/dark.css b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/dark.css new file mode 100644 index 0000000000..efd4190f4a --- /dev/null +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/css/dark.css @@ -0,0 +1,613 @@ +/** + * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template + * + * luci-theme-argon + * Copyright 2020 Jerryk + * + * 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 + * Copyright 2008 Jo-Philipp Wich + * Copyright 2012 David Menting + * + * MUI: + * https://github.com/muicss/mui + * + * luci-theme-material: + * https://github.com/LuttyYang/luci-theme-material/ + * + * Agron 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 + */ +body { + background: #1e1e1e; + color: #cccccc; +} +.login-page .login-container .login-form { + background-color: #1e1e1e; +} +.login-page .login-container .login-form .brand { + color: #adb5bd; +} +.login-page .login-container .login-form .form-login .input-group::before { + color: #adb5bd; +} +.login-page .login-container .login-form .form-login .input-group input { + background-color: transparent !important; + color: #adb5bd; + border-bottom: #adb5bd 1px solid !important; + border-radius: 0 !important; + border-top: none !important; + border-left: none !important; + border-right: none !important; + box-shadow: none; +} +.login-page .login-container .login-form .form-login .cbi-button-apply { + background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); +} +.login-page .login-container .login-form .form-login .cbi-button-apply:hover, +.login-page .login-container .login-form .form-login .cbi-button-apply:focus { + background-image: linear-gradient(-135deg, #554c8a 0%, #483d8b 100%); +} +header::after { + background-color: #1e1e1e !important; +} +.main .main-left { + background-color: #333333 !important; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15); +} +.main .main-left .sidenav-header .brand { + color: #ccc; +} +.main .main-left .nav .slide .slide-menu .active a { + color: #cccccc; +} +.main .main-left .nav .slide .slide-menu .active a::after { + background-color: #cccccc !important; +} +.main .main-left .nav .slide .slide-menu li a { + color: #cccccc; +} +.main .main-left .nav .slide .slide-menu li a:hover { + background: none !important; +} +.main .main-left .nav .slide .menu.active { + background-color: darkslateblue !important; + color: #cccccc !important; +} +.main .main-left .nav .slide .menu.active a::after { + background-color: #cccccc !important; +} +.main .main-left .nav li a { + color: #cccccc !important; +} +.main .main-left .nav li a:hover { + background-color: darkslateblue !important; + color: #cccccc !important; +} +.main .main-left::-webkit-scrollbar-thumb { + background-color: #252526 !important; +} +.main .main-left::-webkit-scrollbar-track { + background-color: #333; +} +.main .main-right { + background-color: #1e1e1e; +} +h2 { + color: #ccc; + background: #333333; +} +h3 { + color: #ccc; + border-bottom: 0; + background: #333333; +} +a:-webkit-any-link { + color: -webkit-link; + cursor: pointer; + color: darkslateblue; +} +input:-webkit-autofill { + background-color: #3c3c3c !important; +} +.cbi-value-field .cbi-input-apply, +.cbi-button-apply, +.cbi-button-edit { + color: #fff !important; + background-color: darkslateblue !important; + border-color: darkslateblue !important; +} +.cbi-section em { + color: #ccc; +} +header.bg-primary { + background-color: #1e1e1e !important; +} +.cbi-map-descr { + color: #ccc; +} +.cbi-section { + background: none; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); +} +.panel-title { + color: #ccc; + background-color: #333333; + border-bottom: 0px; +} +div > table > tbody > tr:nth-of-type(2n), +div > .table > .tr:nth-of-type(2n) { + background-color: #252526; +} +table > tbody > tr > td, +table > tfoot > tr > td, +table > thead > tr > td { + color: #ccc; +} +fieldset > table > tbody > tr:nth-of-type(2n) { + background-color: #252526; +} +table > tbody > tr > td, +table > tfoot > tr > td, +table > thead > tr > td { + border-top: 1px solid #252526; +} +#swaptotal > div > div, +#swapfree > div > div, +#memfree > div > div, +#membuff > div > div, +#conns > div > div, +#memtotal > div > div { + background-color: #32325d !important; +} +#swaptotal > div > div > div > small, +#swapfree > div > div > div > small, +#memfree > div > div > div > small, +#membuff > div > div > div > small, +#conns > div > div > div > small, +#memtotal > div > div > div > small { + color: #ccc !important; +} +.node-system-packages > .main .cbi-section-node:first-child .cbi-value-last { + line-height: 1.8em; +} +.node-system-packages > .main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] { + border: 1px solid #999999 !important; + background-color: transparent !important; +} +.node-system-packages > .main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] div { + background-color: #32325d !important; +} +table > tbody > tr > th, +table > tfoot > tr > th, +table > thead > tr > th { + background-color: #252526; + border-bottom: black 1px solid !important; +} +tr > td, +tr > th, +.tr > .td, +.tr > .th, +.cbi-section-table-row::before, +#cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) { + border-top: 0; +} +.cbi-rowstyle-2 { + background-color: #1e1e1e; +} +.cbi-rowstyle-1 { + background-color: #252526; +} +.cbi-section > h3:first-child, +.panel-title, +h3 { + color: #ccc; + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +h4 { + background-color: #1e1e1f; +} +.cbi-progressbar { + position: relative; + min-width: 170px; + height: 20px; + margin: 6px 0; + border: thin solid #999; + background: transparent; + border-radius: 0.2rem; + overflow: hidden; +} +.cbi-progressbar div { + background-color: #32325d !important; +} +.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { + background-color: #1e1e1f; +} +.cbi-button { + color: #ccc !important; + background-color: darkslateblue; +} +.cbi-section-node { + background: none; + border-radius: 0 0 0.375rem 0.375rem; + padding: 0rem; +} +abbr { + color: #5e72e4; +} +div > table > tbody > tr:nth-of-type(2n), +div > .table > .tbody > .tr:nth-of-type(2n) { + background-color: #252526; +} +#content_syslog { + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); +} +#syslog { + color: #ccc; + background-color: #1e1e1e; +} +#iwsvg, +#iwsvg2, +#bwsvg { + overflow: hidden; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); + background-color: #1e1e1e !important; +} +.tabs { + background-color: #252526; +} +.tabs > li[class~="active"] > a { + color: #ccc; +} +.tabs > li[class~="active"], +.tabs > li:hover { + border-bottom: 0.18751rem solid darkslateblue; + color: #ccc; + background-color: #181819; +} +.cbi-tabmenu > li > a, +.tabs > li > a { + color: #ccc; +} +.cbi-tabmenu > li > a:hover, +.tabs > li > a:hover { + color: #ccc; +} +.cbi-tabmenu > li { + background: #2d2d2d; +} +.cbi-tabmenu li[class~="cbi-tab"] a { + color: #ccc; +} +.cbi-tabmenu > li:hover { + color: #ccc; + background: #2d2d2d; +} +.cbi-tabmenu > li[class~="cbi-tab"] { + background-color: #181819; +} +.cbi-tabcontainer > .cbi-value:nth-of-type(2n) { + background-color: #252526; +} +.cbi-value-title { + color: #ccc; +} +select, +input { + color: #ccc; + background-color: transparent !important; + border: 1px solid #252526; + box-shadow: none; +} +select:not([multiple="multiple"]):focus, +input:focus { + border-color: darkslateblue !important; + outline: 0; +} +select { + background-color: #1e1e1e !important; +} +#cbi-dropbear h2, +#cbi-dropbear .cbi-map-descr, +#cbi-dropbear .cbi-map-descr abbr, +#cbi-rc h2, +#cbi-rc .cbi-map-descr, +#cbi-distfeedconf h2, +#cbi-distfeedconf .cbi-map-descr, +#cbi-customfeedconf h2, +#cbi-customfeedconf .cbi-map-descr, +#cbi-download h2, +#cbi-filelist h2 { + color: #ccc !important; +} +.cbi-value-field > ul > li .ifacebadge { + background-color: #3c3c3c; +} +.cbi-section-descr { + color: #ccc; +} +.cbi-input-textarea { + background-color: #1e1e1e; + color: #ccc; +} +.cbi-section-remove:nth-of-type(2n), +.cbi-section-node:nth-of-type(2n) { + background-color: #1e1e1e; +} +.node-system-packages > .main table tr td:nth-last-child(1) { + color: #ccc; +} +.cbi-section-node .cbi-value { + padding: 1rem 1rem 0.3rem 1rem; +} +.ifacebox { + background-color: none; + border: 1px solid #1e1e1e; +} +.ifacebox-head { + color: #666; +} +.ifacebox-body { + background-color: #333; +} +.zonebadge strong { + color: #333; +} +.zonebadge > .ifacebadge { + background-color: #3c3c3c; +} +div.cbi-value var, +td.cbi-value-field var { + color: #5e72e4; +} +#diag-rc-output > pre { + color: #ccc; + background-color: #1e1e1e; +} +.node-services-vssr .block { + background-color: #3c3c3c !important; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); +} +.node-services-vssr .block h4 { + color: #ccc !important; +} +.node-services-vssr .status-bar { + color: #ccc; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); + background-color: #1e1e1e; +} +.node-services-vssr .cbi-section-table-row { + color: #ccc; + background-color: #3c3c3c !important; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); +} +.node-services-vssr .cbi-section-table-row.fast { + background: darkslateblue !important; + color: #fff; +} +.node-services-vssr .ssr-button { + color: #ccc; +} +.node-services-vssr .incon:nth-child(2) { + border-right: #1e1e1e 1px solid; +} +#xhr_poll_status > .label.success { + color: #ccc !important; + background-color: darkolivegreen !important; +} +.notice { + background-color: darkslateblue !important; +} +.cbi-input-find, +.cbi-input-save, +.cbi-button-add, +.cbi-button-save, +.cbi-button-find, +.cbi-input-reload, +.cbi-button-reload { + color: #fff !important; + background: darkolivegreen !important; + border-color: darkolivegreen !important; +} +.cbi-button-reset, +.cbi-input-remove { + color: #fff !important; + background-color: darkorange !important; + border-color: darkorange !important; +} +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit, +.cbi-button-edit.important, +.cbi-button-apply.important, +.cbi-button-reload.important, +.cbi-button-action.important { + border: 1px darkslateblue solid !important; +} +.btn[value="Dismiss"], +.cbi-button[value="Terminate"], +.cbi-button[value="Reset"], +.cbi-button[value="Disabled"], +.cbi-button[onclick^="iface_reconnect"], +.cbi-button[onclick="handleReset(event)"], +.cbi-button-neutral[value="Disable"] { + font-weight: normal; + color: #fff; + border: thin solid darkorange!important; + background-color: darkorange!important; +} +fieldset[id^="cbi-apply-"] { + background-color: #333333; +} +#detail-bubble > div { + border: 1px solid #ccc; + border-radius: 2px; + padding: 5px; + background: #252525; +} +.ifacebox-head.active { + background-color: #32325d !important; +} +header .fill .status span[data-style="active"] { + color: #ccc !important; + background-color: darkolivegreen !important; +} +#cbi-wireless .td, +#cbi-network .tr:first-child > .td, +.table[width="100%"] > .tr:first-child > .td, +[data-page="admin-network-diagnostics"] .tr > .td, +.tr.table-titles > .th, +.tr.cbi-section-table-titles > .th { + background-color: #252526; + border-bottom: black 1px solid !important; +} +.network-status-table .ifacebox-body .ifacebadge { + background-color: #252526; + border-bottom: 0; + box-shadow: none; +} +td > .ifacebadge, +.td > .ifacebadge { + background-color: darkslateblue; + border: 0; +} +.btn.danger, +.cbi-section-remove > .cbi-button, +.cbi-button-remove, +.cbi-button-reset, +.cbi-button-negative, +.cbi-button[value="Stop"], +.cbi-button[value="Kill"], +.cbi-button[onclick="reboot(this)"], +.cbi-button-neutral[value="Restart"] { + border: thin solid darkorange; + background-color: darkorange; +} +.cbi-section, +.cbi-section-error, +#iptables, +.Firewall form, +#cbi-network > .cbi-section-node, +#cbi-wireless > .cbi-section-node, +#cbi-wireless > #wifi_assoclist_table, +[data-tab-title], +[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), +[data-page="admin-system-opkg"] #maincontent > .container { + background: #1e1e1e !important; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); +} +div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { + background: transparent !important; +} +[data-page="admin-system-admin"] .cbi-map h2, +[data-page="admin-system-admin-password"] .cbi-map h2, +[data-page="admin-system-admin"] .cbi-map .cbi-map-descr, +[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { + color: #ccc; +} +.cbi-value input[type="password"] + .cbi-button-neutral { + background-color: darkslateblue !important; +} +.btn, +button, +select, +input, +.cbi-dropdown { + border: 1px solid #3c3c3c !important; +} +.cbi-dropdown .preview { + color: #ccc; +} +.cbi-section-table-row { + background-color: #1e1e1e !important; +} +.modal { + background-color: #1e1e1e; +} +.cbi-button-positive { + color: #fff !important; + background-color: darkolivegreen !important; +} +[data-page="admin-system-flash"] legend { + color: #ccc; +} +.logout:before { + color: #adb5bd !important; +} +.cbi-dropdown[open] { + border-color: darkslateblue !important; +} +.cbi-dropdown[open] > ul.dropdown { + background: #252526 !important; + color: #ccc !important; + box-shadow: none; + border: 1px solid #3c3c3c !important; +} +.cbi-dropdown[open] > ul.dropdown li { + color: #ccc; + border-bottom: 1px solid #3c3c3c !important; +} +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background-color: darkslateblue !important; + border-bottom: 1px solid #3c3c3c !important; +} +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: darkslateblue; + outline: none; +} +.ifacebadge { + background-color: #333333; +} +.cbi-dynlist > .item > span { + border: 1px solid #3c3c3c !important; +} +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit, +.cbi-button-edit, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-action, +.cbi-button[value="Submit"], +.cbi-button[value="Upload"], +.cbi-button[value$="Apply"], +.cbi-button[onclick="addKey(event)"] { + background: darkslateblue !important; +} +.btn.primary, +.cbi-page-actions .cbi-button-save, +.cbi-page-actions .cbi-button-apply + .cbi-button-save, +.cbi-button-add, +.cbi-button-save, +.cbi-button-positive, +.cbi-button-link, +.cbi-button[value="Enable"], +.cbi-button[value="Scan"], +.cbi-button[value^="Back"], +.cbi-button-neutral[onclick="handleConfig(event)"] { + background: darkslateblue; +} +[data-page="admin-system-opkg"] h2 { + color: #ccc !important; +} +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + .login-page .login-container .login-form { + -webkit-backdrop-filter: blur(var(--blur-radius-dark)); + backdrop-filter: blur(var(--blur-radius-dark)); + background-color: rgba(0, 0, 0, var(--blur-opacity-dark)); + } +} +@media screen and (max-width: 480px) { + .node-status-iptables > .main div > .cbi-map > form { + background-color: #1e1e1e; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); + } +} diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg new file mode 100644 index 0000000000..f01ad5c79d --- /dev/null +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg new file mode 100644 index 0000000000..0598d584e7 --- /dev/null +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/cascade.less b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/cascade.less index 064bb6a3de..83b08f5377 100644 --- a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/cascade.less +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/cascade.less @@ -3,7 +3,7 @@ * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * * luci-theme-argon - * Copyright 2019 Jerrykuku + * Copyright 2020 Jerrykuku * * Have a bug? Please create an issue here on GitHub! * https://github.com/jerrykuku/luci-theme-argon/issues @@ -75,7 +75,10 @@ --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; @@ -111,8 +114,8 @@ body { } ::selection { - background-color: var(--primary); background-color: #5e72e4; + background-color: var(--primary); color: #ffffff; color: var(--white); } @@ -355,6 +358,38 @@ hr { background-size: cover; transition: all 0.5s; + .video { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #000; + background-color: var(--darker); + overflow: hidden; + pointer-events: none; + video { + width: 100%; + height: auto; + } + } + + .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; @@ -501,7 +536,7 @@ hr { 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; border-radius: 6px; outline: none; border-width: initial; @@ -515,7 +550,7 @@ hr { &:hover, :focus { - background-image: linear-gradient(-135deg, rgb(130, 143, 224) 0%, rgb(94, 114, 228) 100%); + background-color: #5065d8 !important; } } } @@ -529,8 +564,13 @@ hr { justify-content: space-evenly; margin-top: auto; padding: 0px 0px 30px; + color: #525461; z-index: 10; - + .ftc{ + position: absolute; + bottom: 30px; + width: 100%; + } .luci-link { display: block; } @@ -541,9 +581,9 @@ hr { @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)); } } @@ -3817,7 +3857,7 @@ pre.command-output { } - + } @media (prefers-color-scheme: dark) { @@ -4548,6 +4588,7 @@ pre.command-output { .cbi-button-neutral[onclick="handleConfig(event)"] { background: darkslateblue !important; } + [data-page="admin-system-opkg"] h2 { color: #ccc !important; @@ -4555,9 +4596,9 @@ pre.command-output { @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)); } } @@ -4569,5 +4610,5 @@ pre.command-output { box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); } - + } \ No newline at end of file diff --git a/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/dark.less b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/dark.less new file mode 100644 index 0000000000..d8722ac21e --- /dev/null +++ b/package/ctcgfw/luci-theme-argon/htdocs/luci-static/argon/less/dark.less @@ -0,0 +1,786 @@ +/** + * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template + * + * luci-theme-argon + * Copyright 2020 Jerryk + * + * 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 + * Copyright 2008 Jo-Philipp Wich + * Copyright 2012 David Menting + * + * MUI: + * https://github.com/muicss/mui + * + * luci-theme-material: + * https://github.com/LuttyYang/luci-theme-material/ + * + * Agron 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 + */ + +body { + background: #1e1e1e; + color: #cccccc; +} + +.login-page .login-container { + + .login-form { + background-color: #1e1e1e; + + .brand { + color: #adb5bd; + } + + .form-login { + .input-group { + &::before { + color: #adb5bd; + } + + input { + background-color: transparent !important; + color: #adb5bd; + border-bottom: #adb5bd 1px solid !important; + border-radius: 0 !important; + border-top: none !important; + border-left: none !important; + border-right: none !important; + box-shadow: none; + } + + } + + .cbi-button-apply { + background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); + + &:hover, + &:focus { + background-image: linear-gradient(-135deg, rgb(85, 76, 138) 0%, rgb(72, 61, 139) 100%); + } + } + } + } + +} + +header::after { + background-color: #1e1e1e !important; +} + + +.main { + .main-left { + + background-color: #333333 !important; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .15); + + .sidenav-header .brand { + color: #ccc; + } + + .nav { + .slide { + .slide-menu { + .active { + a { + color: #cccccc; + + &::after { + background-color: #cccccc !important; + } + } + } + + li { + a { + color: #cccccc; + } + + a:hover { + background: none !important; + } + } + } + + .menu.active { + background-color: darkslateblue !important; + color: #cccccc !important; + + a::after { + background-color: #cccccc !important; + } + } + } + + li { + a { + color: #cccccc !important; + } + + a:hover { + background-color: darkslateblue !important; + color: #cccccc !important; + } + } + } + + + &::-webkit-scrollbar-thumb { + background-color: #252526 !important; + } + + &::-webkit-scrollbar-track { + background-color: #333; + } + } + + .main-right { + background-color: #1e1e1e; + } +} + +h2 { + color: #ccc; + background: #333333; +} + +h3 { + color: #ccc; + border-bottom: 0; + background: #333333; +} + +a:-webkit-any-link { + color: -webkit-link; + cursor: pointer; + color: darkslateblue; +} + + +input:-webkit-autofill { + background-color: #3c3c3c !important; +} + +.cbi-value-field .cbi-input-apply, +.cbi-button-apply, +.cbi-button-edit { + color: #fff !important; + background-color: darkslateblue !important; + border-color: darkslateblue !important; +} + + +.cbi-section em { + color: #ccc; +} + +header.bg-primary { + background-color: #1e1e1e !important; +} + +.cbi-map-descr { + color: #ccc; +} + +.cbi-section { + background: none; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) +} + +.panel-title { + color: #ccc; + background-color: #333333; + border-bottom: 0px; +} + +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tr:nth-of-type(2n) { + background-color: #252526; +} + +table>tbody>tr>td, +table>tfoot>tr>td, +table>thead>tr>td { + color: #ccc; +} + +fieldset>table>tbody>tr:nth-of-type(2n) { + background-color: #252526; +} + +table>tbody>tr>td, +table>tfoot>tr>td, +table>thead>tr>td { + border-top: 1px solid #252526; +} + +#swaptotal>div>div, +#swapfree>div>div, +#memfree>div>div, +#membuff>div>div, +#conns>div>div, +#memtotal>div>div { + background-color: #32325d !important; +} + +#swaptotal>div>div>div>small, +#swapfree>div>div>div>small, +#memfree>div>div>div>small, +#membuff>div>div>div>small, +#conns>div>div>div>small, +#memtotal>div>div>div>small { + + color: #ccc !important; +} + +.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last { + line-height: 1.8em; + + div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] { + border: 1px solid #999999 !important; + background-color: transparent !important; + + div { + background-color: #32325d !important; + } + } + +} + +table>tbody>tr>th, +table>tfoot>tr>th, +table>thead>tr>th { + + background-color: #252526; + border-bottom: black 1px solid !important; +} + +tr>td, +tr>th, +.tr>.td, +.tr>.th, +.cbi-section-table-row::before, +#cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) { + border-top: 0; +} + +.cbi-rowstyle-2 { + background-color: #1e1e1e; +} + +.cbi-rowstyle-1 { + background-color: #252526; +} + +.cbi-section>h3:first-child, +.panel-title, +h3 { + color: #ccc; + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +h4 { + background-color: #1e1e1f; +} + +.cbi-progressbar { + position: relative; + min-width: 170px; + height: 20px; + margin: 6px 0; + border: thin solid #999; + background: transparent; + border-radius: 0.2rem; + overflow: hidden; + + div { + background-color: #32325d !important; + } +} + +.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { + background-color: #1e1e1f; +} + +.cbi-button { + color: #ccc !important; + background-color: darkslateblue; +} + +.cbi-section-node { + background: none; + border-radius: 0 0 .375rem .375rem; + padding: 0rem; +} + +abbr { + color: #5e72e4; +} + +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { + background-color: #252526; +} + +#content_syslog { + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) +} + +#syslog { + color: #ccc; + background-color: #1e1e1e; +} + +#iwsvg, +#iwsvg2, +#bwsvg { + overflow: hidden; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); + background-color: #1e1e1e !important; +} + +.tabs { + background-color: #252526; +} + +.tabs>li[class~="active"]>a { + color: #ccc; +} + +.tabs>li[class~="active"], +.tabs>li:hover { + border-bottom: 0.18751rem solid darkslateblue; + color: #ccc; + background-color: #181819; +} + +.cbi-tabmenu>li>a, +.tabs>li>a { + color: #ccc; + + &:hover { + color: #ccc; + } +} + +.cbi-tabmenu>li { + background: #2d2d2d; +} + +.cbi-tabmenu li[class~="cbi-tab"] a { + color: #ccc; +} + +.cbi-tabmenu>li:hover { + color: #ccc; + background: #2d2d2d; +} + +.cbi-tabmenu>li[class~="cbi-tab"] { + background-color: #181819; +} + +.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { + background-color: #252526; +} + +.cbi-value-title { + color: #ccc; +} + +select, +input { + color: #ccc; + background-color: transparent !important; + border: 1px solid #252526; + box-shadow: none; +} + +select:not([multiple="multiple"]):focus, +input:focus { + border-color: darkslateblue !important; + outline: 0; + +} + +select { + background-color: #1e1e1e !important; +} + +#cbi-dropbear h2, +#cbi-dropbear .cbi-map-descr, +#cbi-dropbear .cbi-map-descr abbr, +#cbi-rc h2, +#cbi-rc .cbi-map-descr, +#cbi-distfeedconf h2, +#cbi-distfeedconf .cbi-map-descr, +#cbi-customfeedconf h2, +#cbi-customfeedconf .cbi-map-descr, +#cbi-download h2, +#cbi-filelist h2 { + color: #ccc !important; +} + +.cbi-value-field>ul>li .ifacebadge { + background-color: #3c3c3c; +} + +.cbi-section-descr { + color: #ccc; +} + +.cbi-input-textarea { + background-color: #1e1e1e; + color: #ccc; +} + + + +.cbi-section-remove:nth-of-type(2n), +.cbi-section-node:nth-of-type(2n) { + background-color: #1e1e1e; +} + +.node-system-packages>.main table tr td:nth-last-child(1) { + color: #ccc; + +} + +.cbi-section-node .cbi-value { + padding: 1rem 1rem 0.3rem 1rem; +} + +.ifacebox { + background-color: none; + border: 1px solid #1e1e1e; +} + +.ifacebox-head { + color: #666; +} + +.ifacebox-body { + background-color: #333; +} + +.zonebadge strong { + color: #333; +} + +.zonebadge>.ifacebadge { + background-color: #3c3c3c; +} + +div.cbi-value var, +td.cbi-value-field var { + color: #5e72e4; +} + +#diag-rc-output>pre { + color: #ccc; + background-color: #1e1e1e; +} + +.node-services-vssr .block { + background-color: #3c3c3c !important; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); +} + +.node-services-vssr .block h4 { + color: #ccc !important; +} + +.node-services-vssr .status-bar { + color: #ccc; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); + background-color: #1e1e1e; +} + +.node-services-vssr .cbi-section-table-row { + color: #ccc; + background-color: #3c3c3c !important; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, .35) +} + +.node-services-vssr .cbi-section-table-row.fast { + background: darkslateblue !important; + color: #fff; +} + +.node-services-vssr .ssr-button { + color: #ccc; + +} + +.node-services-vssr .incon:nth-child(2) { + border-right: #1e1e1e 1px solid; +} + +#xhr_poll_status>.label.success { + color: #ccc !important; + + background-color: darkolivegreen !important; +} + +.notice { + background-color: darkslateblue !important; +} + +.cbi-input-find, +.cbi-input-save, +.cbi-button-add, +.cbi-button-save, +.cbi-button-find, +.cbi-input-reload, +.cbi-button-reload { + color: #fff !important; + background: darkolivegreen !important; + border-color: darkolivegreen !important; +} + +.cbi-button-reset, +.cbi-input-remove { + color: #fff !important; + background-color: darkorange !important; + border-color: darkorange !important; +} + +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit, +.cbi-button-edit.important, +.cbi-button-apply.important, +.cbi-button-reload.important, +.cbi-button-action.important { + border: 1px darkslateblue solid !important; +} + +.btn[value="Dismiss"], +.cbi-button[value="Terminate"], +.cbi-button[value="Reset"], +.cbi-button[value="Disabled"], +.cbi-button[onclick^="iface_reconnect"], +.cbi-button[onclick="handleReset(event)"], +.cbi-button-neutral[value="Disable"] { + font-weight: normal; + color: #fff; + border: thin solid darkorange!important; + background-color: darkorange!important; +} + +fieldset[id^="cbi-apply-"] { + background-color: #333333; +} + +#detail-bubble>div { + border: 1px solid #ccc; + border-radius: 2px; + padding: 5px; + background: #252525; +} + +.ifacebox-head.active { + background-color: #32325d !important; +} + +header .fill .status span[data-style="active"] { + color: #ccc !important; + background-color: darkolivegreen !important; +} + +#cbi-wireless .td, +#cbi-network .tr:first-child>.td, +.table[width="100%"]>.tr:first-child>.td, +[data-page="admin-network-diagnostics"] .tr>.td, +.tr.table-titles>.th, +.tr.cbi-section-table-titles>.th { + background-color: #252526; + border-bottom: black 1px solid !important; + +} + +.network-status-table .ifacebox-body .ifacebadge { + background-color: #252526; + border-bottom: 0; + box-shadow: none; +} + +td>.ifacebadge, +.td>.ifacebadge { + + background-color: darkslateblue; + border: 0; +} + +.btn.danger, +.cbi-section-remove>.cbi-button, +.cbi-button-remove, +.cbi-button-reset, +.cbi-button-negative, +.cbi-button[value="Stop"], +.cbi-button[value="Kill"], +.cbi-button[onclick="reboot(this)"], +.cbi-button-neutral[value="Restart"] { + border: thin solid darkorange; + background-color: darkorange; +} + +.cbi-section, +.cbi-section-error, +#iptables, +.Firewall form, +#cbi-network>.cbi-section-node, +#cbi-wireless>.cbi-section-node, +#cbi-wireless>#wifi_assoclist_table, +[data-tab-title], +[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), +[data-page="admin-system-opkg"] #maincontent>.container { + background: #1e1e1e !important; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); +} + +div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { + background: transparent !important; +} + +[data-page="admin-system-admin"] .cbi-map h2, +[data-page="admin-system-admin-password"] .cbi-map h2, +[data-page="admin-system-admin"] .cbi-map .cbi-map-descr, +[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { + color: #ccc; +} + +.cbi-value input[type="password"]+.cbi-button-neutral { + background-color: darkslateblue !important; +} + +.btn, +button, +select, +input, +.cbi-dropdown { + border: 1px solid #3c3c3c !important; +} + + +.cbi-dropdown .preview { + color: #ccc; +} + +.cbi-section-table-row { + background-color: #1e1e1e !important; +} + +.modal { + background-color: #1e1e1e; +} + +.cbi-button-positive { + color: #fff !important; + background-color: darkolivegreen !important; +} + +[data-page="admin-system-flash"] legend { + color: #ccc; +} + +.logout:before { + color: #adb5bd !important; +} + +.cbi-dropdown[open] { + border-color: darkslateblue !important; +} + +.cbi-dropdown[open]>ul.dropdown { + background: #252526 !important; + color: #ccc !important; + box-shadow: none; + border: 1px solid #3c3c3c !important; + + +} + +.cbi-dropdown[open]>ul.dropdown li { + color: #ccc; + border-bottom: 1px solid #3c3c3c !important; +} + +.cbi-dropdown[open]>ul.dropdown>li[selected] { + background-color: darkslateblue !important; + border-bottom: 1px solid #3c3c3c !important; +} + +.cbi-dropdown[open]>ul.dropdown>li.focus { + background: darkslateblue; + outline: none; +} + +.ifacebadge { + background-color: #333333; +} + +.cbi-dynlist>.item>span { + border: 1px solid #3c3c3c !important; +} + +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit, +.cbi-button-edit, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-action, +.cbi-button[value="Submit"], +.cbi-button[value="Upload"], +.cbi-button[value$="Apply"], +.cbi-button[onclick="addKey(event)"] { + background: darkslateblue !important; +} + +.btn.primary, +.cbi-page-actions .cbi-button-save, +.cbi-page-actions .cbi-button-apply+.cbi-button-save, +.cbi-button-add, +.cbi-button-save, +.cbi-button-positive, +.cbi-button-link, +.cbi-button[value="Enable"], +.cbi-button[value="Scan"], +.cbi-button[value^="Back"], +.cbi-button-neutral[onclick="handleConfig(event)"] { + background: darkslateblue; +} + +[data-page="admin-system-opkg"] h2 { + color: #ccc !important; +} + +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + .login-page .login-container .login-form { + -webkit-backdrop-filter: blur(var(--blur-radius-dark)); + backdrop-filter: blur(var(--blur-radius-dark)); + background-color: rgba(0, 0, 0, var(--blur-opacity-dark)); + + } +} + + +@media screen and (max-width: 480px) { + .node-status-iptables>.main div>.cbi-map>form { + background-color: #1e1e1e; + box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); + } + + +} \ No newline at end of file diff --git a/package/ctcgfw/luci-theme-argon/luasrc/view/themes/argon/footer.htm b/package/ctcgfw/luci-theme-argon/luasrc/view/themes/argon/footer.htm index 8057b06886..f9a7bbf7fc 100644 --- a/package/ctcgfw/luci-theme-argon/luasrc/view/themes/argon/footer.htm +++ b/package/ctcgfw/luci-theme-argon/luasrc/view/themes/argon/footer.htm @@ -2,7 +2,7 @@ Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template luci-theme-argon - Copyright 2019 Jerrykuku + Copyright 2020 Jerrykuku Have a bug? Please create an issue here on GitHub! https://github.com/jerrykuku/luci-theme-argon/issues @@ -21,7 +21,7 @@