update 2023-05-04 13:38:33

This commit is contained in:
github-actions[bot] 2023-05-04 13:38:33 +08:00
parent dfe83636e3
commit 3f1ac37704
73 changed files with 1818 additions and 525 deletions

View File

@ -1,17 +1,17 @@
include $(TOPDIR)/rules.mk include $(TOPDIR)/rules.mk
PKG_NAME:=luci-app-argonne-config PKG_NAME:=luci-app-argone-config
PKG_VERSION:=1.2 PKG_VERSION:=1.2
PKG_RELEASE:=2 PKG_RELEASE:=2
PKG_MAINTAINER:=jerrykuku <jerrykuku@qq.com> PKG_MAINTAINER:=jerrykuku <jerrykuku@qq.com>
LUCI_TITLE:=LuCI page for Argonne Config LUCI_TITLE:=LuCI page for Argone Config
LUCI_PKGARCH:=all LUCI_PKGARCH:=all
LUCI_DEPENDS:=+luci-compat +luci-theme-argonne LUCI_DEPENDS:=+luci-compat
define Package/$(PKG_NAME)/conffiles define Package/$(PKG_NAME)/conffiles
/etc/config/argonne /etc/config/argone
endef endef
include $(TOPDIR)/feeds/luci/luci.mk include $(TOPDIR)/feeds/luci/luci.mk

View File

@ -1,8 +1,8 @@
# luci-app-argonne-config # luci-app-argone-config
argonne Theme Config Plugin argone Theme Config Plugin
You can set the blur and transparency of the login page of argonne theme, and manage the background pictures and videos. You can set the blur and transparency of the login page of argonne theme, and manage the background pictures and videos.
+ 修改为argonne 用于配合luci-app-argonne主题 + 修改为argone 用于配合luci-app-argone主题
+ 编译时无需再去删除源码自带的argon主题。 + 编译时无需再去删除源码自带的argon主题。

View File

@ -0,0 +1,10 @@
module("luci.controller.argone-config", package.seeall)
function index()
if not nixio.fs.access('/www/luci-static/argone/css/cascade.css') then
return
end
local page = entry({"admin", "system", "argone-config"}, form("argone-config"), _("Argonne Config"), 90)
page.acl_depends = { "luci-app-argone-config" }
end

View File

@ -4,7 +4,7 @@ local opkg = require 'luci.model.ipkg'
local sys = require 'luci.sys' local sys = require 'luci.sys'
local http = require 'luci.http' local http = require 'luci.http'
local nutil = require 'nixio.util' local nutil = require 'nixio.util'
local name = 'argonne' local name = 'argone'
local uci = require 'luci.model.uci'.cursor() local uci = require 'luci.model.uci'.cursor()
local fstat = nxfs.statvfs(opkg.overlay_root()) local fstat = nxfs.statvfs(opkg.overlay_root())
@ -15,15 +15,15 @@ local space_used = space_total - space_free
local free_byte = space_free * fstat.frsize local free_byte = space_free * fstat.frsize
local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity, mode local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity, mode
if nxfs.access('/etc/config/argonne') then if nxfs.access('/etc/config/argone') then
primary = uci:get_first('argonne', 'global', 'primary') primary = uci:get_first('argone', 'global', 'primary')
dark_primary = uci:get_first('argonne', 'global', 'dark_primary') dark_primary = uci:get_first('argone', 'global', 'dark_primary')
blur_radius = uci:get_first('argonne', 'global', 'blur') blur_radius = uci:get_first('argone', 'global', 'blur')
blur_radius_dark = uci:get_first('argonne', 'global', 'blur_dark') blur_radius_dark = uci:get_first('argone', 'global', 'blur_dark')
blur_opacity = uci:get_first('argonne', 'global', 'transparency') blur_opacity = uci:get_first('argone', 'global', 'transparency')
blur_opacity_dark = uci:get_first('argonne', 'global', 'transparency_dark') blur_opacity_dark = uci:get_first('argone', 'global', 'transparency_dark')
mode = uci:get_first('argonne', 'global', 'mode') mode = uci:get_first('argone', 'global', 'mode')
bing_background = uci:get_first('argonne', 'global', 'bing_background') bing_background = uci:get_first('argone', 'global', 'bing_background')
end end
function glob(...) function glob(...)
@ -50,7 +50,7 @@ local transparency_sets = {
} }
-- [[ 模糊设置 ]]-- -- [[ 模糊设置 ]]--
br = SimpleForm('config', translate('Argonne Config'), translate('Here you can set the blur and transparency of the login page of argonne theme, and manage the background pictures and videos.[Chrome is recommended]')) br = SimpleForm('config', translate('Argonne Config'), translate('Here you can set the blur and transparency of the login page of argone theme, and manage the background pictures and videos.[Chrome is recommended]'))
br.reset = false br.reset = false
br.submit = false br.submit = false
s = br:section(SimpleSection) s = br:section(SimpleSection)
@ -114,9 +114,9 @@ function br.handle(self, state, data)
if (state == FORM_VALID and data.blur ~= nil and data.blur_dark ~= nil and data.transparency ~= nil and data.transparency_dark ~= nil and data.mode ~= nil) then if (state == FORM_VALID and data.blur ~= nil and data.blur_dark ~= nil and data.transparency ~= nil and data.transparency_dark ~= nil and data.mode ~= nil) then
nxfs.writefile('/tmp/aaa', data) nxfs.writefile('/tmp/aaa', data)
for key, value in pairs(data) do for key, value in pairs(data) do
uci:set('argonne','@global[0]',key,value) uci:set('argone','@global[0]',key,value)
end end
uci:commit('argonne') uci:commit('argone')
end end
return true return true
end end
@ -125,14 +125,14 @@ ful = SimpleForm('upload', translate('Upload (Free: ') .. wa.byte_format(free_b
ful.reset = false ful.reset = false
ful.submit = false ful.submit = false
sul = ful:section(SimpleSection, '', translate("Upload file to '/www/luci-static/argonne/background/'")) sul = ful:section(SimpleSection, '', translate("Upload file to '/www/luci-static/argone/background/'"))
fu = sul:option(FileUpload, '') fu = sul:option(FileUpload, '')
fu.template = 'argonne-config/other_upload' fu.template = 'argone-config/other_upload'
um = sul:option(DummyValue, '', nil) um = sul:option(DummyValue, '', nil)
um.template = 'argonne-config/other_dvalue' um.template = 'argone-config/other_dvalue'
local dir, fd local dir, fd
dir = '/www/luci-static/argonne/background/' dir = '/www/luci-static/argone/background/'
nxfs.mkdir(dir) nxfs.mkdir(dir)
http.setfilehandler( http.setfilehandler(
function(meta, chunk, eof) function(meta, chunk, eof)
@ -156,7 +156,7 @@ http.setfilehandler(
if eof and fd then if eof and fd then
fd:close() fd:close()
fd = nil fd = nil
um.value = translate('File saved to') .. ' "/www/luci-static/argonne/background/' .. meta.file .. '"' um.value = translate('File saved to') .. ' "/www/luci-static/argone/background/' .. meta.file .. '"'
end end
end end
) )

View File

@ -1,6 +1,6 @@
{ {
"luci-app-argonne-config": { "luci-app-argone-config": {
"description": "Grant UCI access for luci-app-argonne-config", "description": "Grant UCI access for luci-app-argone-config",
"read": { "read": {
"uci": [ "argonne" ] "uci": [ "argonne" ]
}, },

View File

@ -1,10 +0,0 @@
module("luci.controller.argonne-config", package.seeall)
function index()
if not nixio.fs.access('/www/luci-static/argonne/css/cascade.css') then
return
end
local page = entry({"admin", "system", "argonne-config"}, form("argonne-config"), _("Argonne Config"), 90)
page.acl_depends = { "luci-app-argonne-config" }
end

View File

@ -6,19 +6,19 @@
include $(TOPDIR)/rules.mk include $(TOPDIR)/rules.mk
LUCI_TITLE:=Argonne kenzo LUCI_TITLE:=Argone kenzo
LUCI_DEPENDS:= LUCI_DEPENDS:=+curl +jsonfilter
PKG_VERSION:=1.7.3 PKG_VERSION:=1.7.7
PKG_RELEASE:=2 PKG_RELEASE:=3
include $(TOPDIR)/feeds/luci/luci.mk include $(TOPDIR)/feeds/luci/luci.mk
define Package/luci-theme-argonne/postinst define Package/luci-theme-Argone/postinst
#!/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/Argone/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/Argone/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
exit 0 exit 0

View File

@ -0,0 +1,10 @@
#### argon 原作者是jerrykuku
#### 改argone是为了编译方便
+ main默认支持luci-18.06
```bash
git clone https://github.com/kenzok78/luci-theme-argone
```
+ 21.02分支支持最新luci
```bash
git clone -b 21.02 https://github.com/kenzok78/luci-theme-argone
```

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 2020 Jerryk <jerrykuku@gmail.com> * 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-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
@ -889,7 +889,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 +947,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/argon/img/reload.webp");
}
img[src="/luci-static/resources/cbi/file.gif"] {
content: url("/luci-static/argon/img/file.webp");
}
img[src="/luci-static/resources/cbi/add.gif"] {
content: url("/luci-static/argon/img/add.webp");
}
img[src="/luci-static/resources/cbi/remove.gif"] {
content: url("/luci-static/argon/img/remove.webp");
}
img[src="/luci-static/resources/cbi/edit.gif"] {
content: url("/luci-static/argon/img/edit.webp");
}
img[src="/luci-static/resources/cbi/fieldadd.gif"] {
content: url("/luci-static/argon/img/fieldadd.webp");
}
img[src="/luci-static/resources/cbi/link.gif"] {
content: url("/luci-static/argon/img/link.webp");
}
img[src="/luci-static/resources/cbi/find.gif"] {
content: url("/luci-static/argon/img/find.webp");
}
img[src="/luci-static/resources/cbi/folder.gif"] {
content: url("/luci-static/argon/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 +1083,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 +1102,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 +1216,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 +1275,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 +1370,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 +1462,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 +1600,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;
@ -1777,12 +1897,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 +1928,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 +2093,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 +2175,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 +2441,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 +2452,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 +2483,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 +2670,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 +2706,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 +2810,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 +3015,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 +3122,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 +3219,4 @@ input[name="nslookup"] {
width: 2.3rem !important; width: 2.3rem !important;
height: auto; height: auto;
} }
} }

View File

@ -0,0 +1,682 @@
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;
border-top: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none;
}
.login-page .login-container .login-form .form-login .input-group input:focus {
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.login-page .login-container .login-form .form-login .cbi-button-apply {
background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
}
.login-page .login-container .login-form .form-login .cbi-button-apply:hover,
.login-page .login-container .login-form .form-login .cbi-button-apply:focus {
opacity: .9;
}
.login-page .login-container footer {
color: #adb5bd;
}
header::after {
background-color: #1e1e1e !important;
}
.main .main-left {
background-color: #333333 !important;
box-shadow: 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: #483d8b !important;
background-color: var(--dark-primary) !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: #483d8b !important;
background-color: var(--dark-primary) !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: #483d8b;
color: var(--dark-primary);
}
input:-webkit-autofill {
background-color: #3c3c3c !important;
}
.cbi-value-field .cbi-input-apply,
.cbi-button-apply,
.cbi-button-edit {
color: #fff !important;
background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
border-color: #483d8b !important;
border-color: var(--dark-primary) !important;
}
.cbi-section em {
color: #483d8b;
color: var(--dark-primary);
}
header.bg-primary {
background-color: #1e1e1e !important;
}
.cbi-map-descr {
color: #ccc;
}
.cbi-section {
background: none;
box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
}
.panel-title {
color: #ccc;
background-color: #333333;
border-bottom: 0px;
}
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: #483d8b !important;
background-color: var(--dark-primary) !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;
background-color: var(--dark-primary) !important;
}
table>tbody>tr>th,
table>tfoot>tr>th,
table>thead>tr>th {
background-color: #252526;
border-bottom: black 1px solid !important;
}
.cbi-rowstyle-2 {
background-color: #2c2c2c !important;
}
.cbi-rowstyle-1 {
background-color: #252526;
}
.cbi-section>h3:first-child,
.panel-title {
color: #ccc;
border-bottom: 0;
}
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
background-color: #1e1e1f;
}
.cbi-button {
color: #ccc;
background-color: #2c2c2c;
}
.cbi-rowstyle-2 .cbi-button-up,
.cbi-rowstyle-2 .cbi-button-down {
background-color: #252526 !important;
}
.cbi-section-node {
background: none;
border-radius: 0 0 .375rem .375rem;
padding: 0rem;
}
abbr {
color: #483d8b;
color: var(--dark-primary);
}
div>table>tbody>tr:nth-of-type(2n),
div>.table>.tbody>.tr:nth-of-type(2n) {
background-color: #252526;
}
/* file selector button */
::file-selector-button {
border: 1px solid darkseagreen !important;
background-color: darkseagreen !important;
}
/* Fix background color of table-titles */
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
background-color: #1e1e1e;
border: none !important;
}
/* Fix background color of table-descr */
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
background-color: #333333;
border: none !important;
}
/* Fix background color not change when the H tag is in the table rowstyle-1 */
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
background-color: #252526;
border-top: 1px solid #252526;
border-bottom: none !important;
}
/* Fix background color not change when the H tag is in the table rowstyle-2 */
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
background-color: #2c2c2c;
border-top: 1px solid #252526;
border-bottom: none !important;
}
/* Change the color of the H label in the table to make it more visible */
th h1, td h1,
th h2, td h2,
th h3, td h3,
th h4, td h4,
th h5, td h5,
th h6, td h6 {
background: var(--gray-dark);
}
/* Improved the background color of each itemes in "UNSAVED CHANGES" (dark mode only) */
.uci-change-list del,
.uci-change-legend-label del {
background-color: #fb74008c;
}
.uci-change-list var,
.uci-change-legend-label var {
background-color: #333333;
}
.uci-change-list ins,
.uci-change-legend-label ins {
background-color: #00ff0a45 !important;
}
/* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */
#add_link_div,
#set_node_div {
background-color: #333333f0 !important;
box-shadow: #00000094 10px 10px 30px 5px !important;
}
#add_link_div>.cbi-value>.cbi-value-field>#nodes_link {
background: #ccc;
}
#content_syslog {
box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
}
#syslog {
color: #ccc;
background-color: #1e1e1e;
}
#iwsvg,
#iwsvg2,
#bwsvg {
overflow: hidden;
box-shadow: 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: .18751rem solid #483d8b;
border-bottom: .18751rem solid var(--dark-primary);
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 {
border-bottom: 0 solid #ddd !important;
}
.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;
border: 1px solid #3c3c3c !important;
box-shadow: 0 3px 2px rgba(0,0,0,0.05);
}
select:not([multiple="multiple"]):focus,
input:focus {
border-color: #483d8b !important;
border-color: var(--dark-primary) !important;
background-color: transparent;
outline: 0;
box-shadow: none;
}
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;
}
.node-system-packages>.main .cbi-value>pre {
background-color: #333;
}
.cbi-section-node .cbi-value {
padding: 1rem 1rem .3rem 1rem;
}
.ifacebox {
background-color: #1e1e1e;
border: 1px solid #1e1e1e;
}
.ifacebox-head {
color: #666;
}
.ifacebox-body {
background-color: #333;
}
.zonebadge strong {
color: #333;
}
.zonebadge>.ifacebadge {
background-color: #3c3c3c;
}
/* Fix firewall zone: "unspecified -or- create: " background color (dark mode only) */
div[onclick$="._fwzone_new').checked=true"] {
border: 1px solid #3c3c3c;
background-color: transparent !important;
}
/* Improve the background color of "Any zone" and "Device" when ADD/EDIT Rules in Firewall > Traffic Rules (dark mode only) */
label[for$=".src_any"],
label[for$=".dest_empty"],
label[for$=".dest_any"] {
background-color: #2888db !important;
}
/* Fix/add background color of wireless signal strength badge for dark mode */
td>.ifacebadge,
.td>.ifacebadge {
background-color: #3c3c3c;
}
/* Improved loading process gif color (dark mode only) */
img[src="/luci-static/resources/icons/loading.gif"] {
filter: invert(1);
}
div.cbi-value var,
td.cbi-value-field var {
color: #483d8b;
color: var(--dark-primary);
}
#diag-rc-output>pre {
color: #ccc;
background-color: #1e1e1e;
}
.node-services-vssr .block {
background-color: #1e1e1e !important;
box-shadow: 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 .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: #483d8b !important;
background: var(--dark-primary) !important;
color: #fff;
}
.node-services-vssr .ssr-button {
color: #ccc;
}
.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;
}
/* Define the warning background-color breathe display animation (dark mode) */
@keyframes warning-background-color-breathe-dark {
0%{
color: #fff;
background-color: darkorange;
}
50%{
color: #ccc;
background-color: #333333;
}
100%{
color: #fff;
background-color: darkorange;
}
}
.warning,
.warning * {
animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
}
.notice {
background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
}
/* Improved the aleart-message background color during device restart (dark mode only) */
.errorbox,
.alert-message {
background-color: #333333;
}
.cbi-input-find,
.cbi-input-save,
.cbi-button-add,
.cbi-button-save,
.cbi-button-find,
.cbi-input-reload,
.cbi-button-reload {
background-color: darkseagreen !important;
border-color: darkseagreen !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 #483d8b solid !important;
border: 1px var(--dark-primary) solid !important;
}
fieldset[id^="cbi-apply-"] {
background-color: #333333;
}
#detail-bubble>div {
border: 1px solid #ccc;
border-radius: 2px;
padding: 5px;
background: #252525;
}
/* Define the error text border breathe display animation (dark mode) */
@keyframes error-border-breathe-dark {
0%{
border-color: darkorange;
}
50%{
border-color: transparent;
}
100%{
border-color: darkorange;
}
}
/* Add border for error text box, and border breathe display animation to make it more noticeable (dark mode) */
.cbi-section-error>ul>li {
color: darkorange;
border: 2px solid darkorange ;
animation: error-border-breathe-dark 1.5s ease-in-out infinite;
}
.cbi-input-invalid,
.cbi-value-error input {
color: darkorange;
border: 1px dashed darkorange !important;
}
.node-services-vssr .block h4 span {
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 .5rem 0 rgba(0,0,0,0.35);
}
}

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 2020 Jerryk <jerrykuku@gmail.com> * 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-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

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

View File

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 1019 B

After

Width:  |  Height:  |  Size: 1019 B

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 690 B

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

View File

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 938 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 632 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 566 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 480 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 B

View File

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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);

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;
}
});

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);

View File

@ -1,12 +1,12 @@
// compress: false // compress: false
/** /**
* 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 2020 Jerryk <jerrykuku@gmail.com> * 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-argon/issues
* *
* luci-theme-bootstrap: * luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org> * Copyright 2008 Steven Barth <steven@midlink.org>
@ -19,7 +19,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
@ -1060,7 +1060,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 +1134,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/argon/img/reload.webp");
}
img[src="/luci-static/resources/cbi/file.gif"] {
content: url("/luci-static/argon/img/file.webp");
}
img[src="/luci-static/resources/cbi/add.gif"] {
content: url("/luci-static/argon/img/add.webp");
}
img[src="/luci-static/resources/cbi/remove.gif"] {
content: url("/luci-static/argon/img/remove.webp");
}
img[src="/luci-static/resources/cbi/edit.gif"] {
content: url("/luci-static/argon/img/edit.webp");
}
img[src="/luci-static/resources/cbi/fieldadd.gif"] {
content: url("/luci-static/argon/img/fieldadd.webp");
}
img[src="/luci-static/resources/cbi/link.gif"] {
content: url("/luci-static/argon/img/link.webp");
}
img[src="/luci-static/resources/cbi/find.gif"] {
content: url("/luci-static/argon/img/find.webp");
}
img[src="/luci-static/resources/cbi/folder.gif"] {
content: url("/luci-static/argon/img/folder.webp");
}
/* input */ /* input */
.cbi-value input[type="password"], .cbi-value input[type="password"],
@ -1268,13 +1296,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 +1318,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 +1452,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 +1525,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 +1636,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 +1749,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 +1926,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;
@ -2165,11 +2296,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 +2334,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 +2531,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 +2641,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 +2968,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 +2984,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 +3020,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 +3265,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 +3311,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 +3448,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 +3731,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 +3885,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;
} }

View File

@ -1,12 +1,12 @@
// compress: true // compress: true
/** /**
* 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 2020 Jerryk <jerrykuku@gmail.com> * 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-argon/issues
* *
* luci-theme-bootstrap: * luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org> * Copyright 2008 Steven Barth <steven@midlink.org>
@ -19,7 +19,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
@ -272,6 +272,7 @@ table>thead>tr>td {
div { div {
background-color: #32325d !important; background-color: #32325d !important;
background-color: var(--dark-primary) !important;
} }
} }
@ -287,7 +288,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 +307,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 +332,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 +536,7 @@ select {
} }
.ifacebox { .ifacebox {
background-color: none; background-color: #1e1e1e;
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
} }
@ -484,6 +556,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 +637,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 +709,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{

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 Argon Template
luci-theme-argonne luci-theme-argon
Copyright 2019 Jerrykuku <jerrykuku@qq.com> Copyright 2020 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
@ -43,7 +43,7 @@
<div class="ftc"> <div class="ftc">
<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> <a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %>
(<%= ver.luciversion %>)</a> / (<%= ver.luciversion %>)</a> /
<a href="https://github.com/kenzok78/luci-theme-argonne">ArgonneTheme <%# vPKG_VERSION %></a> / <a href="https://github.com/jerrykuku/luci-theme-argon">ArgonTheme <%# vPKG_VERSION %></a> /
<%= ver.distversion %> <%= ver.distversion %>
<% if #categories > 1 then %> <% if #categories > 1 then %>
<ul class="breadcrumb pull-right" id="modemenu"> <ul class="breadcrumb pull-right" id="modemenu">
@ -58,31 +58,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-argon.js<%# ?v=PKG_VERSION %>"></script>
</body> </body>
</html> </html>

View File

@ -1,11 +1,11 @@
<%# <%#
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template
luci-theme-argonne luci-theme-argon
Copyright 2020 Jerryk <jerrykuku@gmail.com> 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-argon/issues
luci-theme-bootstrap: luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2008 Steven Barth <steven@midlink.org>
@ -15,7 +15,7 @@
MUI: MUI:
https://github.com/muicss/mui https://github.com/muicss/mui
Agron Theme Argon 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 +44,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 +108,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 +132,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)))
@ -196,17 +189,17 @@
-- Custom settings -- Custom settings
local mode = 'normal' local mode = 'normal'
local dark_css = fs.readfile('/www/luci-static/argonne/css/dark.css') local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css')
local bar_color = '#5e72e4' local bar_color = '#5e72e4'
local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
if fs.access('/etc/config/argonne') then if fs.access('/etc/config/argon') then
primary = uci:get_first('argonne', 'global', 'primary') primary = uci:get_first('argon', 'global', 'primary')
dark_primary = uci:get_first('argonne', 'global', 'dark_primary') dark_primary = uci:get_first('argon', 'global', 'dark_primary')
blur_radius = uci:get_first('argonne', 'global', 'blur') blur_radius = uci:get_first('argon', 'global', 'blur')
blur_radius_dark = uci:get_first('argonne', 'global', 'blur_dark') blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark')
blur_opacity = uci:get_first('argonne', 'global', 'transparency') blur_opacity = uci:get_first('argon', 'global', 'transparency')
blur_opacity_dark = uci:get_first('argonne', 'global', 'transparency_dark') blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark')
mode = uci:get_first('argonne', 'global', 'mode') mode = uci:get_first('argon', 'global', 'mode')
bar_color = mode == 'dark' and dark_primary or primary bar_color = mode == 'dark' and dark_primary or primary
end end
@ -240,11 +233,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) {
@ -253,7 +246,7 @@
<% elseif mode == 'dark' then %> <% elseif mode == 'dark' then %>
<%=dark_css%> <%=dark_css%>
<% end -%> <% end -%>
<% if fs.access('/etc/config/argonne') then %> <% if fs.access('/etc/config/argon') then %>
:root { :root {
--primary: <%=primary%>; --primary: <%=primary%>;
--dark-primary: <%=dark_primary%>; --dark-primary: <%=dark_primary%>;
@ -273,11 +266,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 +319,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-argon.js<%# ?v=PKG_VERSION %>"></script>
<script src="<%=media%>/js/sidebar-argon.js<%# ?v=PKG_VERSION %>"></script>

View File

@ -0,0 +1,136 @@
<%#
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 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-2016 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl>
MUI:
https://github.com/muicss/mui
Argon Theme
https://demos.creative-tim.com/argon-dashboard/index.html
Licensed to the public under the Apache License 2.0
-%>
<%
local sys = require "luci.sys"
local util = require "luci.util"
local http = require "luci.http"
local disp = require "luci.dispatcher"
local fs = require "nixio.fs"
local nutil = require "nixio.util"
local uci = require 'luci.model.uci'.cursor()
local boardinfo = util.ubus("system", "board")
local request = disp.context.path
local request2 = disp.context.request
local category = request[1]
local cattree = category and disp.node(category)
local leaf = request2[#request2]
local tree = disp.node()
local node = disp.context.dispatched
local categories = disp.node_childs(tree)
local c = tree
local i, r
math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9)))
-- Custom settings
local mode = 'normal'
local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css')
local bar_color = '#5e72e4'
local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
if fs.access('/etc/config/argon') then
primary = uci:get_first('argon', 'global', 'primary')
dark_primary = uci:get_first('argon', 'global', 'dark_primary')
blur_radius = uci:get_first('argon', 'global', 'blur')
blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark')
blur_opacity = uci:get_first('argon', 'global', 'transparency')
blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark')
mode = uci:get_first('argon', 'global', 'mode')
bar_color = mode == 'dark' and dark_primary or primary
end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<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">
<meta name="mobile-web-app-capable" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application">
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
<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/argon') 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>
</head>
<body class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">

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.
-%> -%>

View File

@ -1,11 +1,11 @@
<%# <%#
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template
luci-theme-argonne luci-theme-argon
Copyright 2021 Jerryk <jerrykuku@gmail.com> 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-argon/issues
luci-theme-bootstrap: luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2008 Steven Barth <steven@midlink.org>
@ -14,8 +14,8 @@
MUI: MUI:
https://github.com/muicss/mui https://github.com/muicss/mui
Agron Theme Argon 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 +23,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 +41,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/argon") then
local online_wallpaper = uci:get_first('argon', 'global', 'online_wallpaper') or (uci:get_first('argon', 'global', 'bing_background') == '1' and 'bing')
if (online_wallpaper and online_wallpaper ~= "none") then
local picurl = sys.exec("/usr/libexec/argon/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 +128,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/argon.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 +154,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)

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/argon/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argon/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.Argone=/luci-static/argone
set luci.main.mediaurlbase=/luci-static/argonne set luci.main.mediaurlbase=/luci-static/argone
commit luci commit luci
EOF EOF
exit 0 exit 0

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

View File

@ -1,10 +0,0 @@
#### argon 原作者是jerrykuku
#### 改argonne是为了编译方便
+ main默认支持luci-18.06
```bash
git clone https://github.com/kenzok78/luci-theme-argonne
```
+ 21.02分支支持最新luci
```bash
git clone -b 21.02 https://github.com/kenzok78/luci-theme-argonne
```

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

View File

@ -1,135 +0,0 @@
<%#
Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
luci-theme-argonne
Copyright 2020 Jerryk <jerrykuku@gmail.com>
Have a bug? Please create an issue here on GitHub!
https://github.com/kenzok78/luci-theme-argonne/issues
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
-%>
<%
local sys = require "luci.sys"
local util = require "luci.util"
local http = require "luci.http"
local disp = require "luci.dispatcher"
local fs = require "nixio.fs"
local nutil = require "nixio.util"
local uci = require 'luci.model.uci'.cursor()
local boardinfo = util.ubus("system", "board")
local request = disp.context.path
local request2 = disp.context.request
local category = request[1]
local cattree = category and disp.node(category)
local leaf = request2[#request2]
local tree = disp.node()
local node = disp.context.dispatched
local categories = disp.node_childs(tree)
local c = tree
local i, r
math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9)))
-- Custom settings
local mode = 'normal'
local dark_css = fs.readfile('/www/luci-static/argonne/css/dark.css')
local bar_color = '#5e72e4'
local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
if fs.access('/etc/config/argonne') then
primary = uci:get_first('argonne', 'global', 'primary')
dark_primary = uci:get_first('argonne', 'global', 'dark_primary')
blur_radius = uci:get_first('argonne', 'global', 'blur')
blur_radius_dark = uci:get_first('argonne', 'global', 'blur_dark')
blur_opacity = uci:get_first('argonne', 'global', 'transparency')
blur_opacity_dark = uci:get_first('argonne', 'global', 'transparency_dark')
mode = uci:get_first('argonne', 'global', 'mode')
bar_color = mode == 'dark' and dark_primary or primary
end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<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">
<meta name="mobile-web-app-capable" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application">
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
<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>
<body class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">

View File

@ -48,6 +48,7 @@
- 适配深色模式,适配系统自动切换,支持自定义模式 - 适配深色模式,适配系统自动切换,支持自定义模式
- 适配openwrt 21/22、lede - 适配openwrt 21/22、lede
- 支持插件式配置主题 - 支持插件式配置主题
- 流畅度比肩bootstrap
### 体验WebApp方法 ### 体验WebApp方法