update 2023-05-04 13:38:33
@ -1,17 +1,17 @@
|
||||
include $(TOPDIR)/rules.mk
|
||||
|
||||
PKG_NAME:=luci-app-argonne-config
|
||||
PKG_NAME:=luci-app-argone-config
|
||||
PKG_VERSION:=1.2
|
||||
PKG_RELEASE:=2
|
||||
|
||||
PKG_MAINTAINER:=jerrykuku <jerrykuku@qq.com>
|
||||
|
||||
LUCI_TITLE:=LuCI page for Argonne Config
|
||||
LUCI_TITLE:=LuCI page for Argone Config
|
||||
LUCI_PKGARCH:=all
|
||||
LUCI_DEPENDS:=+luci-compat +luci-theme-argonne
|
||||
LUCI_DEPENDS:=+luci-compat
|
||||
|
||||
define Package/$(PKG_NAME)/conffiles
|
||||
/etc/config/argonne
|
||||
/etc/config/argone
|
||||
endef
|
||||
|
||||
include $(TOPDIR)/feeds/luci/luci.mk
|
@ -1,8 +1,8 @@
|
||||
# luci-app-argonne-config
|
||||
argonne Theme Config Plugin
|
||||
# luci-app-argone-config
|
||||
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.
|
||||
|
||||
+ 修改为argonne ,用于配合luci-app-argonne主题,
|
||||
+ 修改为argone ,用于配合luci-app-argone主题,
|
||||
|
||||
+ 编译时无需再去删除源码自带的argon主题。
|
10
luci-app-argone-config/luasrc/controller/argone-config.lua
Normal 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
|
@ -4,7 +4,7 @@ local opkg = require 'luci.model.ipkg'
|
||||
local sys = require 'luci.sys'
|
||||
local http = require 'luci.http'
|
||||
local nutil = require 'nixio.util'
|
||||
local name = 'argonne'
|
||||
local name = 'argone'
|
||||
local uci = require 'luci.model.uci'.cursor()
|
||||
|
||||
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 primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity, mode
|
||||
if nxfs.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')
|
||||
bing_background = uci:get_first('argonne', 'global', 'bing_background')
|
||||
if nxfs.access('/etc/config/argone') then
|
||||
primary = uci:get_first('argone', 'global', 'primary')
|
||||
dark_primary = uci:get_first('argone', 'global', 'dark_primary')
|
||||
blur_radius = uci:get_first('argone', 'global', 'blur')
|
||||
blur_radius_dark = uci:get_first('argone', 'global', 'blur_dark')
|
||||
blur_opacity = uci:get_first('argone', 'global', 'transparency')
|
||||
blur_opacity_dark = uci:get_first('argone', 'global', 'transparency_dark')
|
||||
mode = uci:get_first('argone', 'global', 'mode')
|
||||
bing_background = uci:get_first('argone', 'global', 'bing_background')
|
||||
end
|
||||
|
||||
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.submit = false
|
||||
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
|
||||
nxfs.writefile('/tmp/aaa', data)
|
||||
for key, value in pairs(data) do
|
||||
uci:set('argonne','@global[0]',key,value)
|
||||
uci:set('argone','@global[0]',key,value)
|
||||
end
|
||||
uci:commit('argonne')
|
||||
uci:commit('argone')
|
||||
end
|
||||
return true
|
||||
end
|
||||
@ -125,14 +125,14 @@ ful = SimpleForm('upload', translate('Upload (Free: ') .. wa.byte_format(free_b
|
||||
ful.reset = 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.template = 'argonne-config/other_upload'
|
||||
fu.template = 'argone-config/other_upload'
|
||||
um = sul:option(DummyValue, '', nil)
|
||||
um.template = 'argonne-config/other_dvalue'
|
||||
um.template = 'argone-config/other_dvalue'
|
||||
|
||||
local dir, fd
|
||||
dir = '/www/luci-static/argonne/background/'
|
||||
dir = '/www/luci-static/argone/background/'
|
||||
nxfs.mkdir(dir)
|
||||
http.setfilehandler(
|
||||
function(meta, chunk, eof)
|
||||
@ -156,7 +156,7 @@ http.setfilehandler(
|
||||
if eof and fd then
|
||||
fd:close()
|
||||
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
|
||||
)
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"luci-app-argonne-config": {
|
||||
"description": "Grant UCI access for luci-app-argonne-config",
|
||||
"luci-app-argone-config": {
|
||||
"description": "Grant UCI access for luci-app-argone-config",
|
||||
"read": {
|
||||
"uci": [ "argonne" ]
|
||||
},
|
@ -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
|
@ -6,19 +6,19 @@
|
||||
|
||||
include $(TOPDIR)/rules.mk
|
||||
|
||||
LUCI_TITLE:=Argonne kenzo
|
||||
LUCI_DEPENDS:=
|
||||
PKG_VERSION:=1.7.3
|
||||
PKG_RELEASE:=2
|
||||
LUCI_TITLE:=Argone kenzo
|
||||
LUCI_DEPENDS:=+curl +jsonfilter
|
||||
PKG_VERSION:=1.7.7
|
||||
PKG_RELEASE:=3
|
||||
|
||||
include $(TOPDIR)/feeds/luci/luci.mk
|
||||
|
||||
|
||||
define Package/luci-theme-argonne/postinst
|
||||
define Package/luci-theme-Argone/postinst
|
||||
#!/bin/sh
|
||||
sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
|
||||
sed -i ":a;$!N;s/t.render.*sysauth_template.*return/local scope = { duser = h, fuser = a }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
|
||||
[ -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
|
||||
[ -f /usr/lib/lua/luci/view/themes/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-indexcache
|
||||
exit 0
|
10
luci-theme-argone/README.md
Normal 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
|
||||
```
|
@ -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>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -18,7 +18,7 @@
|
||||
* luci-theme-material:
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Agron Theme
|
||||
* Argon Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
||||
@ -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);
|
||||
}
|
||||
.cbi-button:active {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.cbi-button:disabled {
|
||||
cursor: not-allowed;
|
||||
@ -947,6 +947,34 @@ form.inline + form.inline,
|
||||
.cbi-value-field .cbi-button-neutral {
|
||||
min-width: 2.5rem !important;
|
||||
}
|
||||
/* Replace LuCI's default file and folder type icons */
|
||||
img[src="/luci-static/resources/cbi/reload.gif"] {
|
||||
content: url("/luci-static/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 */
|
||||
.cbi-value input[type="password"],
|
||||
.cbi-value input[type="text"] {
|
||||
@ -1055,12 +1083,13 @@ input[type="checkbox"] {
|
||||
appearance: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
border: 1px solid #dee2e6;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin: 0.9rem 0.25rem 0 0.25rem;
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="checkbox"]:checked {
|
||||
border: 1px solid #5e72e4;
|
||||
@ -1073,7 +1102,8 @@ input[type="checkbox"]:checked {
|
||||
background-position: center;
|
||||
}
|
||||
ul li .cbi-input-checkbox {
|
||||
margin: 0.5rem 0.25rem !important;
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.cbi-input-radio {
|
||||
appearance: none !important;
|
||||
@ -1186,7 +1216,7 @@ ul li .cbi-input-checkbox {
|
||||
}
|
||||
.cbi-section-create {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.cbi-section-create > * {
|
||||
@ -1245,10 +1275,41 @@ small {
|
||||
.cbi-section > legend {
|
||||
display: none !important;
|
||||
}
|
||||
.cbi-section-error {
|
||||
padding: 1.5rem;
|
||||
color: #fb6340;
|
||||
/* Define the error text border breathe display animation */
|
||||
@keyframes error-border-breathe {
|
||||
0%{
|
||||
border-color: #fb6340;
|
||||
}
|
||||
50%{
|
||||
border-color: transparent;
|
||||
}
|
||||
100%{
|
||||
border-color: #fb6340;
|
||||
}
|
||||
}
|
||||
/* Center display error text box */
|
||||
.cbi-section-error > ul{
|
||||
text-align: center;
|
||||
}
|
||||
/* Add border for error text box, and border breathe display animation to make it more noticeable */
|
||||
.cbi-section-error > ul > li {
|
||||
font-weight: 600;
|
||||
max-width: 60%;
|
||||
color: #fb6340;
|
||||
line-height: 1rem;
|
||||
display: inline-block;
|
||||
border: 2px solid #fb6340;
|
||||
border-radius: 0.3rem;
|
||||
animation: error-border-breathe 1.5s ease-in-out infinite;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.cbi-input-invalid,
|
||||
.cbi-value-error input {
|
||||
color: #fb6340;
|
||||
border: 1px dashed #fb6340;
|
||||
}
|
||||
fieldset > fieldset {
|
||||
margin: 0;
|
||||
@ -1309,6 +1370,7 @@ input[name="nslookup"] {
|
||||
height: 1.6rem !important;
|
||||
line-height: 1.6rem;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
#swaptotal > div > div,
|
||||
#swapfree > div > div,
|
||||
@ -1400,6 +1462,30 @@ td > table > tbody > tr > td,
|
||||
.a-to-btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
/* file selector button */
|
||||
::file-selector-button {
|
||||
color: #fff;
|
||||
border-radius: .25rem;
|
||||
border: 1px solid #2e6da4;
|
||||
padding: .4rem .5rem;
|
||||
background-color: #337ab7;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
::file-selector-button:hover,
|
||||
::file-selector-button:focus,
|
||||
::file-selector-button:active {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
::file-selector-button:hover,
|
||||
::file-selector-button:focus {
|
||||
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
::file-selector-button:active {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
/* table */
|
||||
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
|
||||
width: auto !important;
|
||||
@ -1514,6 +1600,40 @@ td > table > tbody > tr > td,
|
||||
#cbi-network-switch_vlan .td {
|
||||
flex-basis: 12%;
|
||||
}
|
||||
/* Fix background color of table-titles */
|
||||
.cbi-section-node > .cbi-section-table > tbody > .cbi-section-table-titles th {
|
||||
background-color: var(--lighter);
|
||||
border: none;
|
||||
}
|
||||
/* Fix background color of table-descr */
|
||||
.cbi-section-node > .cbi-section-table > tbody > .cbi-section-table-descr th {
|
||||
border: none;
|
||||
}
|
||||
/* Fix background color not change when the H tag is in the table rowstyle-1 */
|
||||
.cbi-section-node > .cbi-section-table > tbody > .cbi-rowstyle-1 th {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
}
|
||||
/* Fix background color not change when the H tag is in the table rowstyle-2 */
|
||||
.cbi-section-node > .cbi-section-table > tbody > .cbi-rowstyle-2 th {
|
||||
background-color: #f9f9f9;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
}
|
||||
/* Change the color of the H label in the table to make it more visible */
|
||||
th h1, td h1,
|
||||
th h2, td h2,
|
||||
th h3, td h3,
|
||||
th h4, td h4,
|
||||
th h5, td h5,
|
||||
th h6, td h6 {
|
||||
background: var(--lighter);
|
||||
}
|
||||
/* OCD: Change the background color of the "now in use" node in PassWall */
|
||||
.cbi-section-table > tbody > ._now_use {
|
||||
background: #5e72e473 !important;
|
||||
}
|
||||
/* language fix */
|
||||
body.lang_pl.node-main-login .cbi-value-title {
|
||||
width: 12rem;
|
||||
@ -1777,12 +1897,20 @@ table > thead > tr > th,
|
||||
.cbi-section-table-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-dropdown,
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-input-select,
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-input-text,
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-input-password,
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-input-password {
|
||||
width: 100%;
|
||||
}
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-input-text,
|
||||
.cbi-section-table-row > .cbi-value-field .cbi-input-password {
|
||||
min-width: 100px;
|
||||
}
|
||||
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-1 div,
|
||||
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-2 div {
|
||||
min-width: 100%;
|
||||
}
|
||||
.cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
|
||||
.cbi-section-table-row > .cbi-value-field input.cbi-input-password {
|
||||
width: calc(100% - 1.5rem);
|
||||
@ -1800,10 +1928,27 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
|
||||
background-color: var(--danger) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.warning {
|
||||
background-color: #fb6340 !important;
|
||||
background-color: var(--warning) !important;
|
||||
color: #fff !important;
|
||||
/* Define the warning background-color breathe display animation */
|
||||
@keyframes warning-background-color-breathe {
|
||||
0%{
|
||||
color: #fff;
|
||||
background-color: #fb6340;
|
||||
}
|
||||
50%{
|
||||
color: #32325d;
|
||||
background-color: #fff;
|
||||
}
|
||||
100%{
|
||||
color: #fff;
|
||||
background-color: #fb6340;
|
||||
}
|
||||
}
|
||||
.warning,
|
||||
.warning * {
|
||||
background-color: #fb6340;
|
||||
background-color: var(--warning);
|
||||
color: #fff;
|
||||
animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
|
||||
}
|
||||
.notice {
|
||||
background-color: #5e72e4 !important;
|
||||
@ -1948,7 +2093,6 @@ table > thead > tr > th {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
table > tbody > tr:first-child > td,
|
||||
@ -2031,7 +2175,7 @@ td > table > tbody > tr > td {
|
||||
}
|
||||
.cbi-tabmenu {
|
||||
color: white;
|
||||
padding: 0.5rem 1rem 0 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
@ -2297,7 +2441,7 @@ select[multiple="multiple"] {
|
||||
overflow-y: visible;
|
||||
}
|
||||
.cbi-section-node .cbi-value {
|
||||
padding: 0.3rem 1rem 0.3rem 1rem;
|
||||
padding: 0.5rem 1rem 0.5rem 1rem !important;
|
||||
}
|
||||
.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
@ -2308,6 +2452,18 @@ select[multiple="multiple"] {
|
||||
line-height: 1.6;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
/* Fix text position of the luci-app-filebrowser running state */
|
||||
#cbi-filebrowser > .cbi-section > .cbi-section > .cbi-value > .cbi-value-field,
|
||||
/* Fix text position of the luci-apps running state of the [Control] type */
|
||||
form > .cbi-map > .cbi-section > .cbi-section-node > .cbi-value > .cbi-value-field font {
|
||||
word-wrap: break-word;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
padding: 0.7rem;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
display: table-cell;
|
||||
}
|
||||
.cbi-value-helpicon > img {
|
||||
display: none;
|
||||
}
|
||||
@ -2327,7 +2483,6 @@ select[multiple="multiple"] {
|
||||
padding: 0.7rem;
|
||||
padding-left: 0;
|
||||
width: 23rem;
|
||||
float: left;
|
||||
text-align: right;
|
||||
display: table-cell;
|
||||
}
|
||||
@ -2515,18 +2670,22 @@ td > .ifacebadge,
|
||||
min-width: 10rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.cbi-value-field .cbi-input-checkbox,
|
||||
.cbi-value-field .cbi-input-radio {
|
||||
margin: 0.9rem 0.25rem 0 0.25rem;
|
||||
.cbi-value-field .cbi-input-checkbox {
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
|
||||
vertical-align: middle;
|
||||
height: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cbi-input-checkbox {
|
||||
margin: 0.9rem 0.25rem 0 0.25rem;
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cbi-value-field .cbi-input-radio {
|
||||
margin: 0rem 0.25rem;
|
||||
}
|
||||
.cbi-input-radio {
|
||||
margin: 0rem 0.25rem;
|
||||
}
|
||||
.cbi-value-field > input + .cbi-value-description {
|
||||
padding: 0;
|
||||
}
|
||||
@ -2547,7 +2706,7 @@ td > .ifacebadge,
|
||||
min-width: 7rem;
|
||||
}
|
||||
.cbi-section-create > .cbi-button-add {
|
||||
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
margin: 0.75rem 0.75rem 0.75rem 0.25rem;
|
||||
}
|
||||
.cbi-section-remove {
|
||||
padding: 0.5rem;
|
||||
@ -2651,6 +2810,10 @@ input[name="nslookup"] {
|
||||
border-right: 0 !important;
|
||||
background-color: #5e72e4 !important;
|
||||
background-color: var(--primary) !important;
|
||||
height: 100% !important;
|
||||
background-image: url(../img/trafficbar.png);
|
||||
background-position: left top;
|
||||
animation: sparkle 1500ms linear infinite;
|
||||
}
|
||||
.node-system-leds .cbi-section em {
|
||||
display: block;
|
||||
@ -2852,10 +3015,6 @@ input[name="nslookup"] {
|
||||
header > .fill > .container > .brand {
|
||||
display: inline-block;
|
||||
}
|
||||
.cbi-value-title {
|
||||
width: 9rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.node-network-diagnostics > .main .cbi-map fieldset > div * {
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -2963,12 +3122,6 @@ input[name="nslookup"] {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.cbi-value-field .cbi-input-checkbox,
|
||||
.cbi-value-field .cbi-input-radio {
|
||||
margin: 0rem 0.25rem 0 0.25rem;
|
||||
height: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cbi-page-actions > div > input {
|
||||
display: none;
|
||||
}
|
||||
@ -3066,4 +3219,4 @@ input[name="nslookup"] {
|
||||
width: 2.3rem !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
682
luci-theme-argone/htdocs/luci-static/argone/css/dark.css
Normal 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);
|
||||
}
|
||||
}
|
@ -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>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -18,7 +18,7 @@
|
||||
* luci-theme-material:
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Agron Theme
|
||||
* Argon Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 1019 B After Width: | Height: | Size: 1019 B |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/add.webp
Normal file
After Width: | Height: | Size: 690 B |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/bg1.jpg
Normal file
After Width: | Height: | Size: 156 KiB |
Before Width: | Height: | Size: 938 B After Width: | Height: | Size: 938 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/edit.webp
Normal file
After Width: | Height: | Size: 632 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/fieldadd.webp
Normal file
After Width: | Height: | Size: 664 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/file.webp
Normal file
After Width: | Height: | Size: 566 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/find.webp
Normal file
After Width: | Height: | Size: 674 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/folder.webp
Normal file
After Width: | Height: | Size: 252 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/link.webp
Normal file
After Width: | Height: | Size: 480 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/reload.webp
Normal file
After Width: | Height: | Size: 848 B |
BIN
luci-theme-argone/htdocs/luci-static/argone/img/remove.webp
Normal file
After Width: | Height: | Size: 682 B |
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -1,11 +1,11 @@
|
||||
/**
|
||||
* Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
|
||||
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
|
||||
*
|
||||
* luci-theme-argonne
|
||||
* Copyright 2019 Jerrykuku <jerrykuku@qq.com>
|
||||
* luci-theme-argon
|
||||
* Copyright 2023 Jerrykuku <jerrykuku@qq.com>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -18,7 +18,7 @@
|
||||
* luci-theme-material:
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Agron Theme
|
||||
* Argon Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
||||
@ -27,22 +27,6 @@
|
||||
* Licensed to the public under the Apache License 2.0
|
||||
*/
|
||||
|
||||
/*
|
||||
* Font generate by Icomoon<icomoon.io>
|
||||
*/
|
||||
(function ($) {
|
||||
$(".main > .loading").fadeOut();
|
||||
|
||||
/**
|
||||
* trim text, Remove spaces, wrap
|
||||
* @param text
|
||||
* @returns {string}
|
||||
*/
|
||||
function trimText(text) {
|
||||
return text.replace(/[ \t\n\r]+/g, " ");
|
||||
}
|
||||
|
||||
|
||||
var lastNode = undefined;
|
||||
var mainNodeName = undefined;
|
||||
|
||||
@ -68,6 +52,7 @@
|
||||
*/
|
||||
function getCurrentNodeByUrl() {
|
||||
var ret = false;
|
||||
const urlReg = new RegExp(nodeUrl + "$")
|
||||
if (!$('body').hasClass('logged-in')) {
|
||||
luciLocation = ["Main", "Login"];
|
||||
return true;
|
||||
@ -81,7 +66,7 @@
|
||||
var that = $(this);
|
||||
var href = that.attr("href");
|
||||
|
||||
if (href.indexOf(nodeUrl) != -1) {
|
||||
if (urlReg.test(href)) {
|
||||
ulNode.click();
|
||||
ulNode.next(".slide-menu").stop(true, true);
|
||||
lastNode = that.parent();
|
||||
@ -119,18 +104,6 @@
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// define what element should be observed by the observer
|
||||
// and what types of mutations trigger the callback
|
||||
if ($("#cbi-dhcp-lan-ignore").length > 0) {
|
||||
observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), {
|
||||
subtree: true,
|
||||
attributes: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* hook menu click and add the hash
|
||||
*/
|
||||
@ -153,7 +126,7 @@
|
||||
window.location = $($(this).find("a")[0]).attr("href");
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* fix submenu click
|
||||
*/
|
||||
@ -166,91 +139,11 @@
|
||||
/**
|
||||
* get current node and open it
|
||||
*/
|
||||
|
||||
$(".cbi-button-up").val("");
|
||||
$(".cbi-button-down").val("");
|
||||
|
||||
|
||||
/**
|
||||
* hook other "A Label" and add hash to it.
|
||||
*/
|
||||
$("#maincontent > .container").find("a").each(function () {
|
||||
var that = $(this);
|
||||
var onclick = that.attr("onclick");
|
||||
if (onclick == undefined || onclick == "") {
|
||||
that.click(function () {
|
||||
var href = that.attr("href");
|
||||
if (href.indexOf("#") == -1) {
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 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 (getCurrentNodeByUrl()) {
|
||||
mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
|
||||
mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
|
||||
$("body").addClass(mainNodeName);
|
||||
}
|
||||
|
||||
if (mainNodeName != undefined) {
|
||||
console.log(mainNodeName);
|
||||
@ -273,5 +166,3 @@
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
|
||||
*
|
||||
* luci-theme-argon
|
||||
* Copyright 2023 Jerrykuku <jerrykuku@qq.com>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
* Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
*
|
||||
* MUI:
|
||||
* https://github.com/muicss/mui
|
||||
*
|
||||
* luci-theme-material:
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Argon Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
||||
* https://unsplash.com/
|
||||
*
|
||||
* Licensed to the public under the Apache License 2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Sidebar expand
|
||||
*/
|
||||
var showSide = false;
|
||||
$(".showSide").click(function () {
|
||||
if (showSide) {
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").width(0);
|
||||
$(".main-right").css("overflow-y", "auto");
|
||||
showSide = false;
|
||||
} else {
|
||||
$(".darkMask").stop(true).fadeIn("fast");
|
||||
$(".main-left").width("15rem");
|
||||
$(".main-right").css("overflow-y", "hidden");
|
||||
showSide = true;
|
||||
}
|
||||
});
|
||||
|
||||
$(".darkMask").click(function () {
|
||||
if (showSide) {
|
||||
showSide = false;
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").width(0);
|
||||
$(".main-right").css("overflow-y", "auto");
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
if ($(window).width() > 921) {
|
||||
$(".main-left").css("width", "");
|
||||
$(".darkMask").stop(true);
|
||||
$(".darkMask").css("display", "none");
|
||||
showSide = false;
|
||||
}
|
||||
});
|
103
luci-theme-argone/htdocs/luci-static/argone/js/styles-argon.js
Normal 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);
|
@ -1,12 +1,12 @@
|
||||
// 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>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -19,7 +19,7 @@
|
||||
* luci-theme-material:
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Agron Theme
|
||||
* Argon Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
||||
@ -1060,7 +1060,7 @@ footer {
|
||||
}
|
||||
|
||||
.cbi-button:active {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.cbi-button:disabled {
|
||||
@ -1134,6 +1134,34 @@ form.inline+form.inline,
|
||||
min-width: 2.5rem !important;
|
||||
}
|
||||
|
||||
/* Replace LuCI's default file and folder type icons */
|
||||
img[src="/luci-static/resources/cbi/reload.gif"] {
|
||||
content: url("/luci-static/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 */
|
||||
.cbi-value input[type="password"],
|
||||
@ -1268,13 +1296,14 @@ input[type="checkbox"] {
|
||||
-webkit-appearance: none !important;
|
||||
border: 1px solid #dee2e6;
|
||||
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
margin: 0.9rem 0.25rem 0 0.25rem;
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
@ -1289,7 +1318,8 @@ input[type="checkbox"]:checked {
|
||||
}
|
||||
|
||||
ul li .cbi-input-checkbox {
|
||||
margin: 0.5rem 0.25rem !important;
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.cbi-input-radio {
|
||||
@ -1422,7 +1452,7 @@ ul li .cbi-input-checkbox {
|
||||
|
||||
.cbi-section-create {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
@ -1495,12 +1525,47 @@ small {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cbi-section-error {
|
||||
padding: 1.5rem;
|
||||
color: #fb6340;
|
||||
font-weight: 600;
|
||||
/* Define the error text border breathe display animation */
|
||||
@keyframes error-border-breathe {
|
||||
0%{
|
||||
border-color: #fb6340;
|
||||
}
|
||||
50%{
|
||||
border-color: transparent;
|
||||
}
|
||||
100%{
|
||||
border-color: #fb6340;
|
||||
}
|
||||
}
|
||||
|
||||
/* Center display error text box */
|
||||
.cbi-section-error > ul{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Add border for error text box, and border breathe display animation to make it more noticeable */
|
||||
.cbi-section-error > ul > li {
|
||||
font-weight: 600;
|
||||
max-width: 60%;
|
||||
color: #fb6340;
|
||||
line-height: 1rem;
|
||||
display: inline-block;
|
||||
border: 2px solid #fb6340;
|
||||
border-radius: 0.3rem;
|
||||
animation: error-border-breathe 1.5s ease-in-out infinite;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.cbi-input-invalid,
|
||||
.cbi-value-error input {
|
||||
color: #fb6340;
|
||||
border: 1px dashed #fb6340;
|
||||
}
|
||||
|
||||
|
||||
fieldset>fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -1571,6 +1636,7 @@ input[name="nslookup"] {
|
||||
height: 1.6rem !important;
|
||||
line-height: 1.6rem;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#swaptotal>div>div,
|
||||
@ -1683,6 +1749,31 @@ td>table>tbody>tr>td,
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* file selector button */
|
||||
::file-selector-button {
|
||||
color: #fff;
|
||||
border-radius: .25rem;
|
||||
border: 1px solid #2e6da4;
|
||||
padding: .4rem .5rem;
|
||||
background-color: #337ab7;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
::file-selector-button:hover,
|
||||
::file-selector-button:focus,
|
||||
::file-selector-button:active {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
::file-selector-button:hover,
|
||||
::file-selector-button:focus {
|
||||
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
::file-selector-button:active {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
/* table */
|
||||
|
||||
|
||||
@ -1835,6 +1926,46 @@ td>table>tbody>tr>td,
|
||||
flex-basis: 12%;
|
||||
}
|
||||
|
||||
/* Fix background color of table-titles */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
|
||||
background-color: var(--lighter);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Fix background color of table-descr */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Fix background color not change when the H tag is in the table rowstyle-1 */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Fix background color not change when the H tag is in the table rowstyle-2 */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
|
||||
background-color: #f9f9f9;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Change the color of the H label in the table to make it more visible */
|
||||
th h1, td h1,
|
||||
th h2, td h2,
|
||||
th h3, td h3,
|
||||
th h4, td h4,
|
||||
th h5, td h5,
|
||||
th h6, td h6 {
|
||||
background: var(--lighter);
|
||||
}
|
||||
|
||||
/* OCD: Change the background color of the "now in use" node in PassWall */
|
||||
.cbi-section-table>tbody>._now_use {
|
||||
background: #5e72e473 !important;
|
||||
}
|
||||
|
||||
/* language fix */
|
||||
body.lang_pl.node-main-login .cbi-value-title {
|
||||
width: 12rem;
|
||||
@ -2165,11 +2296,21 @@ table>thead>tr>th,
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-dropdown,
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-select,
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-text,
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-password,
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
|
||||
width: 100%;
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-password{
|
||||
width:100%
|
||||
}
|
||||
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-text,
|
||||
.cbi-section-table-row>.cbi-value-field .cbi-input-password{
|
||||
min-width:100px
|
||||
}
|
||||
|
||||
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-1 div,
|
||||
#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-2 div{
|
||||
min-width:100%;
|
||||
}
|
||||
|
||||
.cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
|
||||
@ -2193,10 +2334,27 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #fb6340 !important;
|
||||
background-color: var(--warning) !important;
|
||||
color: #fff !important;
|
||||
/* Define the warning background-color breathe display animation */
|
||||
@keyframes warning-background-color-breathe {
|
||||
0%{
|
||||
color: #fff;
|
||||
background-color: #fb6340;
|
||||
}
|
||||
50%{
|
||||
color: #32325d;
|
||||
background-color: #fff;
|
||||
}
|
||||
100%{
|
||||
color: #fff;
|
||||
background-color: #fb6340;
|
||||
}
|
||||
}
|
||||
.warning,
|
||||
.warning * {
|
||||
background-color: #fb6340;
|
||||
background-color: var(--warning);
|
||||
color: #fff;
|
||||
animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.notice {
|
||||
@ -2373,7 +2531,6 @@ table>thead>tr>th {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
@ -2484,7 +2641,7 @@ td>table>tbody>tr>td {
|
||||
|
||||
.cbi-tabmenu {
|
||||
color: white;
|
||||
padding: 0.5rem 1rem 0 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
@ -2811,7 +2968,7 @@ select[multiple="multiple"] {
|
||||
|
||||
|
||||
.cbi-section-node .cbi-value {
|
||||
padding: 0.3rem 1rem 0.3rem 1rem;
|
||||
padding: 0.5rem 1rem 0.5rem 1rem !important;
|
||||
}
|
||||
|
||||
|
||||
@ -2827,6 +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 {
|
||||
@ -2851,7 +3020,6 @@ select[multiple="multiple"] {
|
||||
padding: .7rem;
|
||||
padding-left: 0;
|
||||
width: 23rem;
|
||||
float: left;
|
||||
text-align: right;
|
||||
display: table-cell;
|
||||
}
|
||||
@ -3097,21 +3265,25 @@ td>.ifacebadge,
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.cbi-value-field .cbi-input-checkbox,
|
||||
.cbi-value-field .cbi-input-radio {
|
||||
margin: 0.9rem 0.25rem 0 0.25rem;
|
||||
.cbi-value-field .cbi-input-checkbox {
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
|
||||
vertical-align: middle;
|
||||
height: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cbi-input-checkbox {
|
||||
margin: 0.9rem 0.25rem 0 0.25rem;
|
||||
margin: 0.5rem 0.25rem 0.7rem 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cbi-value-field .cbi-input-radio {
|
||||
margin: 0rem 0.25rem;
|
||||
}
|
||||
|
||||
.cbi-input-radio {
|
||||
margin: 0rem 0.25rem;
|
||||
}
|
||||
|
||||
.cbi-value-field>input+.cbi-value-description {
|
||||
padding: 0;
|
||||
@ -3139,7 +3311,7 @@ td>.ifacebadge,
|
||||
}
|
||||
|
||||
.cbi-section-create>.cbi-button-add {
|
||||
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
margin: 0.75rem 0.75rem 0.75rem 0.25rem;
|
||||
}
|
||||
|
||||
.cbi-section-remove {
|
||||
@ -3276,6 +3448,10 @@ input[name="nslookup"] {
|
||||
border-right: 0 !important;
|
||||
background-color: #5e72e4 !important;
|
||||
background-color: var(--primary) !important;
|
||||
height: 100% !important;
|
||||
background-image: url(../img/trafficbar.png);
|
||||
background-position: left top;
|
||||
animation: sparkle 1500ms linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3555,17 +3731,10 @@ input[name="nslookup"] {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header>.fill>.container>.brand {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cbi-value-title {
|
||||
width: 9rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.node-network-diagnostics>.main .cbi-map fieldset>div * {
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -3716,13 +3885,6 @@ input[name="nslookup"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cbi-value-field .cbi-input-checkbox,
|
||||
.cbi-value-field .cbi-input-radio {
|
||||
margin: 0rem 0.25rem 0 0.25rem;
|
||||
height: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cbi-page-actions>div>input {
|
||||
display: none;
|
||||
}
|
@ -1,12 +1,12 @@
|
||||
// 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>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
* https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -19,7 +19,7 @@
|
||||
* luci-theme-material:
|
||||
* https://github.com/LuttyYang/luci-theme-material/
|
||||
*
|
||||
* Agron Theme
|
||||
* Argon Theme
|
||||
* https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
*
|
||||
* Login background
|
||||
@ -272,6 +272,7 @@ table>thead>tr>td {
|
||||
|
||||
div {
|
||||
background-color: #32325d !important;
|
||||
background-color: var(--dark-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -287,7 +288,7 @@ table>thead>tr>th {
|
||||
}
|
||||
|
||||
.cbi-rowstyle-2 {
|
||||
background-color: #1e1e1e;
|
||||
background-color: #2c2c2c !important;
|
||||
}
|
||||
|
||||
.cbi-rowstyle-1 {
|
||||
@ -306,7 +307,12 @@ table>thead>tr>th {
|
||||
|
||||
.cbi-button {
|
||||
color: #ccc;
|
||||
background-color: #252526;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.cbi-rowstyle-2 .cbi-button-up,
|
||||
.cbi-rowstyle-2 .cbi-button-down {
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
.cbi-section-node {
|
||||
@ -326,6 +332,72 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
|
||||
background-color: #252526;
|
||||
}
|
||||
|
||||
/* file selector button */
|
||||
::file-selector-button {
|
||||
border: 1px solid darkseagreen !important;
|
||||
background-color: darkseagreen !important;
|
||||
}
|
||||
|
||||
/* Fix background color of table-titles */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
|
||||
background-color: #1e1e1e;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Fix background color of table-descr */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
|
||||
background-color: #333333;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Fix background color not change when the H tag is in the table rowstyle-1 */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
|
||||
background-color: #252526;
|
||||
border-top: 1px solid #252526;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Fix background color not change when the H tag is in the table rowstyle-2 */
|
||||
.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
|
||||
background-color: #2c2c2c;
|
||||
border-top: 1px solid #252526;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Change the color of the H label in the table to make it more visible */
|
||||
th h1, td h1,
|
||||
th h2, td h2,
|
||||
th h3, td h3,
|
||||
th h4, td h4,
|
||||
th h5, td h5,
|
||||
th h6, td h6 {
|
||||
background: var(--gray-dark);
|
||||
}
|
||||
|
||||
/* Improved the background color of each itemes in "UNSAVED CHANGES" (dark mode only) */
|
||||
.uci-change-list del,
|
||||
.uci-change-legend-label del {
|
||||
background-color: #fb74008c;
|
||||
}
|
||||
.uci-change-list var,
|
||||
.uci-change-legend-label var {
|
||||
background-color: #333333;
|
||||
}
|
||||
.uci-change-list ins,
|
||||
.uci-change-legend-label ins {
|
||||
background-color: #00ff0a45 !important;
|
||||
}
|
||||
|
||||
/* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */
|
||||
#add_link_div,
|
||||
#set_node_div {
|
||||
background-color: #333333f0 !important;
|
||||
box-shadow: #00000094 10px 10px 30px 5px !important;
|
||||
}
|
||||
#add_link_div>.cbi-value>.cbi-value-field>#nodes_link {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#content_syslog {
|
||||
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35)
|
||||
}
|
||||
@ -464,7 +536,7 @@ select {
|
||||
}
|
||||
|
||||
.ifacebox {
|
||||
background-color: none;
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #1e1e1e;
|
||||
}
|
||||
|
||||
@ -484,6 +556,30 @@ select {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
/* Fix firewall zone: "unspecified -or- create: " background color (dark mode only) */
|
||||
div[onclick$="._fwzone_new').checked=true"] {
|
||||
border: 1px solid #3c3c3c;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Improve the background color of "Any zone" and "Device" when ADD/EDIT Rules in Firewall > Traffic Rules (dark mode only) */
|
||||
label[for$=".src_any"],
|
||||
label[for$=".dest_empty"],
|
||||
label[for$=".dest_any"] {
|
||||
background-color: #2888db !important;
|
||||
}
|
||||
|
||||
/* Fix/add background color of wireless signal strength badge for dark mode */
|
||||
td>.ifacebadge,
|
||||
.td>.ifacebadge {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
/* Improved loading process gif color (dark mode only) */
|
||||
img[src="/luci-static/resources/icons/loading.gif"] {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
div.cbi-value var,
|
||||
td.cbi-value-field var {
|
||||
color: #483d8b;
|
||||
@ -541,11 +637,37 @@ td.cbi-value-field var {
|
||||
background-color: darkolivegreen !important;
|
||||
}
|
||||
|
||||
/* Define the warning background-color breathe display animation (dark mode) */
|
||||
@keyframes warning-background-color-breathe-dark {
|
||||
0%{
|
||||
color: #fff;
|
||||
background-color: darkorange;
|
||||
}
|
||||
50%{
|
||||
color: #ccc;
|
||||
background-color: #333333;
|
||||
}
|
||||
100%{
|
||||
color: #fff;
|
||||
background-color: darkorange;
|
||||
}
|
||||
}
|
||||
.warning,
|
||||
.warning * {
|
||||
animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: #483d8b !important;
|
||||
background-color: var(--dark-primary) !important;
|
||||
}
|
||||
|
||||
/* Improved the aleart-message background color during device restart (dark mode only) */
|
||||
.errorbox,
|
||||
.alert-message {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.cbi-input-find,
|
||||
.cbi-input-save,
|
||||
.cbi-button-add,
|
||||
@ -587,8 +709,30 @@ fieldset[id^="cbi-apply-"] {
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.cbi-section-error {
|
||||
/* Define the error text border breathe display animation (dark mode) */
|
||||
@keyframes error-border-breathe-dark {
|
||||
0%{
|
||||
border-color: darkorange;
|
||||
}
|
||||
50%{
|
||||
border-color: transparent;
|
||||
}
|
||||
100%{
|
||||
border-color: darkorange;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add border for error text box, and border breathe display animation to make it more noticeable (dark mode) */
|
||||
.cbi-section-error>ul>li {
|
||||
color: darkorange;
|
||||
border: 2px solid darkorange ;
|
||||
animation: error-border-breathe-dark 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cbi-input-invalid,
|
||||
.cbi-value-error input {
|
||||
color: darkorange;
|
||||
border: 1px dashed darkorange !important;
|
||||
}
|
||||
|
||||
.node-services-vssr .block h4 span{
|
@ -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
|
||||
Copyright 2019 Jerrykuku <jerrykuku@qq.com>
|
||||
luci-theme-argon
|
||||
Copyright 2020 Jerrykuku <jerrykuku@qq.com>
|
||||
|
||||
Have a bug? Please create an issue here on GitHub!
|
||||
https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
|
||||
luci-theme-bootstrap:
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -18,7 +18,7 @@
|
||||
luci-theme-material:
|
||||
https://github.com/LuttyYang/luci-theme-material/
|
||||
|
||||
Agron Theme
|
||||
Argon Theme
|
||||
https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
|
||||
Login background
|
||||
@ -43,7 +43,7 @@
|
||||
<div class="ftc">
|
||||
<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %>
|
||||
(<%= ver.luciversion %>)</a> /
|
||||
<a href="https://github.com/kenzok78/luci-theme-argonne">ArgonneTheme <%# vPKG_VERSION %></a> /
|
||||
<a href="https://github.com/jerrykuku/luci-theme-argon">ArgonTheme <%# vPKG_VERSION %></a> /
|
||||
<%= ver.distversion %>
|
||||
<% if #categories > 1 then %>
|
||||
<ul class="breadcrumb pull-right" id="modemenu">
|
||||
@ -58,31 +58,28 @@
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// thanks for Jo-Philipp Wich <jow@openwrt.org>
|
||||
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
|
||||
var winHeight = $(window).height();
|
||||
$(window).resize(function () {
|
||||
var winWidth = $(window).width()
|
||||
if(winWidth < 600){
|
||||
var newHeight = $(this).height();
|
||||
var keyboradHeight = newHeight - winHeight;
|
||||
$(".ftc").css("bottom", keyboradHeight + 30);
|
||||
}
|
||||
if($(document.body).height() < 525 ){
|
||||
if($(".ftc").css('display') != 'none'){
|
||||
$(".ftc").hide()
|
||||
<script>
|
||||
// thanks for Jo-Philipp Wich <jow@openwrt.org>
|
||||
var winHeight = $(window).height();
|
||||
$(window).resize(function () {
|
||||
if($(document.body).height() < 525 ){
|
||||
if($(".ftc").css('display') != 'none'){
|
||||
$(".ftc").hide()
|
||||
}
|
||||
}else{
|
||||
if($(".ftc").css('display') == 'none'){
|
||||
$(".ftc").show()
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if($(".ftc").css('display') == 'none'){
|
||||
$(".ftc").show()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
})
|
||||
</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>
|
||||
|
||||
</html>
|
@ -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>
|
||||
|
||||
Have a bug? Please create an issue here on GitHub!
|
||||
https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
|
||||
luci-theme-bootstrap:
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -15,7 +15,7 @@
|
||||
MUI:
|
||||
https://github.com/muicss/mui
|
||||
|
||||
Agron Theme
|
||||
Argon Theme
|
||||
https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
|
||||
Licensed to the public under the Apache License 2.0
|
||||
@ -44,7 +44,7 @@
|
||||
local node = disp.context.dispatched
|
||||
|
||||
local categories = disp.node_childs(tree)
|
||||
local currentNode = luci.dispatcher.context.path
|
||||
|
||||
local c = tree
|
||||
local i, r
|
||||
|
||||
@ -108,22 +108,16 @@
|
||||
end
|
||||
end
|
||||
|
||||
local function render_submenu(prefix,parent, node)
|
||||
local function render_submenu(prefix, node)
|
||||
local childs = disp.node_childs(node)
|
||||
if #childs > 0 then
|
||||
local active = (currentNode[2] == parent) and "active" or ""
|
||||
local display = (currentNode[2] == parent) and 'style="display: block;"' or ""
|
||||
|
||||
write('<ul class="slide-menu %s" %s>' %{
|
||||
active,
|
||||
display
|
||||
})
|
||||
write('<ul class="slide-menu">')
|
||||
|
||||
for i, r in ipairs(childs) do
|
||||
local nnode = node.nodes[r]
|
||||
local title = pcdata(striptags(translate(nnode.title)))
|
||||
local subactive = (currentNode[3] == r) and 'class="active"' or ""
|
||||
write('<li %s><a data-title="%s" href="%s">%s</a></li>' %{
|
||||
subactive,
|
||||
|
||||
write('<li><a data-title="%s" href="%s">%s</a></li>' %{
|
||||
title,
|
||||
nodeurl(prefix, r, nnode.query),
|
||||
title
|
||||
@ -138,21 +132,20 @@
|
||||
local childs = disp.node_childs(cattree)
|
||||
if #childs > 0 then
|
||||
write('<ul class="nav">')
|
||||
|
||||
|
||||
for i, r in ipairs(childs) do
|
||||
local nnode = cattree.nodes[r]
|
||||
local grandchildren = disp.node_childs(nnode)
|
||||
|
||||
if #grandchildren > 0 then
|
||||
local active = (currentNode[2] == r) and "active" or ""
|
||||
local title = pcdata(striptags(translate(nnode.title)))
|
||||
local en_title = pcdata(striptags(string.gsub(nnode.title," ","_")))
|
||||
write('<li class="slide"><a class="menu %s" data-title="%s" href="#">%s</a>' %{
|
||||
active,
|
||||
write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
|
||||
en_title,
|
||||
title
|
||||
})
|
||||
|
||||
render_submenu(category .. "/" .. r,r, nnode)
|
||||
render_submenu(category .. "/" .. r, nnode)
|
||||
write('</li>')
|
||||
else
|
||||
local title = pcdata(striptags(translate(nnode.title)))
|
||||
@ -196,17 +189,17 @@
|
||||
|
||||
-- Custom settings
|
||||
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 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')
|
||||
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
|
||||
|
||||
@ -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="96x96" href="<%=media%>/icon/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
|
||||
<link rel="manifest" href="<%=media%>/icon/manifest.json">
|
||||
<link rel="manifest" href="<%=media%>/icon/manifest.json" crossorigin="use-credentials">
|
||||
<meta name="msapplication-TileColor" content="<%=bar_color%>">
|
||||
<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="<%=bar_color%>">
|
||||
<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
|
||||
<link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
|
||||
<style title="text/css">
|
||||
<% if mode == 'normal' then %>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@ -253,7 +246,7 @@
|
||||
<% elseif mode == 'dark' then %>
|
||||
<%=dark_css%>
|
||||
<% end -%>
|
||||
<% if fs.access('/etc/config/argonne') then %>
|
||||
<% if fs.access('/etc/config/argon') then %>
|
||||
:root {
|
||||
--primary: <%=primary%>;
|
||||
--dark-primary: <%=dark_primary%>;
|
||||
@ -273,11 +266,11 @@
|
||||
<% end -%>
|
||||
<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script>
|
||||
<script src="<%=resource%>/xhr.js<%# ?v=PKG_VERSION %>"></script>
|
||||
<script src="<%=media%>/js/jquery.min.js<%# ?v=PKG_VERSION %>"></script>
|
||||
<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> ">
|
||||
class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> <%=mode %> ">
|
||||
|
||||
<div class="main">
|
||||
<div class="main-left">
|
||||
@ -326,3 +319,12 @@
|
||||
</noscript>
|
||||
|
||||
<% if category then render_tabmenu(category, cattree) end %>
|
||||
|
||||
<script>
|
||||
// thanks for Jo-Philipp Wich <jow@openwrt.org>
|
||||
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
|
||||
</script>
|
||||
|
||||
<script src="<%=media%>/js/menu-argon.js<%# ?v=PKG_VERSION %>"></script>
|
||||
|
||||
<script src="<%=media%>/js/sidebar-argon.js<%# ?v=PKG_VERSION %>"></script>
|
136
luci-theme-argone/luasrc/view/themes/argone/header_login.htm
Normal 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%> ">
|
||||
|
@ -1,6 +1,6 @@
|
||||
<%#
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
Copyright 2008-2019 Jo-Philipp Wich <jo@mein.io>
|
||||
Licensed to the public under the Apache License 2.0.
|
||||
-%>
|
||||
|
@ -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>
|
||||
|
||||
Have a bug? Please create an issue here on GitHub!
|
||||
https://github.com/kenzok78/luci-theme-argonne/issues
|
||||
https://github.com/jerrykuku/luci-theme-argon/issues
|
||||
|
||||
luci-theme-bootstrap:
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
@ -14,8 +14,8 @@
|
||||
|
||||
MUI:
|
||||
https://github.com/muicss/mui
|
||||
|
||||
Agron Theme
|
||||
|
||||
Argon Theme
|
||||
https://demos.creative-tim.com/argon-dashboard/index.html
|
||||
|
||||
Licensed to the public under the Apache License 2.0
|
||||
@ -23,16 +23,16 @@
|
||||
|
||||
<%+header_login%>
|
||||
<%
|
||||
local util = require "luci.util"
|
||||
local fs = require "nixio.fs"
|
||||
local nutil = require "nixio.util"
|
||||
local sys = require "luci.sys"
|
||||
local json = require "luci.jsonc"
|
||||
local uci = require 'luci.model.uci'.cursor()
|
||||
|
||||
local util = require "luci.util"
|
||||
local fs = require "nixio.fs"
|
||||
local nutil = require "nixio.util"
|
||||
local json = require "luci.jsonc"
|
||||
local sys = require "luci.sys"
|
||||
local uci = require 'luci.model.uci'.cursor()
|
||||
|
||||
-- Fetch Local Background Media
|
||||
|
||||
function glob(...)
|
||||
local function glob(...)
|
||||
local iter, code, msg = fs.glob(...)
|
||||
if iter then
|
||||
return nutil.consume(iter)
|
||||
@ -41,64 +41,84 @@
|
||||
end
|
||||
end
|
||||
|
||||
function fetchMedia(path,themeDir)
|
||||
local backgroundTable = {}
|
||||
local backgroundCount = 0
|
||||
|
||||
local imageTypes = " jpg png gif webp "
|
||||
local videoTypes = " mp4 webm "
|
||||
local allTypes = imageTypes .. videoTypes
|
||||
local function fetchMedia(path, themeDir)
|
||||
local backgroundTable = {}
|
||||
local backgroundCount = 0
|
||||
for i, f in ipairs(glob(path)) do
|
||||
attr = fs.stat(f)
|
||||
if attr then
|
||||
local ext = fs.basename(f):match(".+%.(%w+)$")
|
||||
if ext == "jpg" or ext == "png" or ext == "gif" or ext == "mp4" then
|
||||
if ext ~= nil then
|
||||
ext = ext:lower()
|
||||
end
|
||||
if ext ~= nil and string.match(allTypes, " "..ext.." ") ~= nil then
|
||||
local bg = {}
|
||||
bg.type = ext
|
||||
bg.url = themeDir .. fs.basename(f)
|
||||
table.insert(backgroundTable,bg)
|
||||
table.insert(backgroundTable, bg)
|
||||
backgroundCount = backgroundCount + 1
|
||||
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
|
||||
|
||||
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 bgUrl = media .. "/img/bg1.jpg"
|
||||
local useBing = fs.access('/etc/config/argonne') and uci:get_first('argonne', 'global', 'bing_background') or "0"
|
||||
local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*",themeDir)
|
||||
local backgroundType = "Image"
|
||||
|
||||
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
|
||||
local bgUrl, backgroundType, mimeType = selectBackground(themeDir)
|
||||
%>
|
||||
<!-- Login Page Start -->
|
||||
<div class="login-page">
|
||||
|
||||
<% if ( backgroundType == "Video" ) then %>
|
||||
<!-- Video Player Start -->
|
||||
<div class="video ar-flex ar-justify-content-center ar-align-items-center">
|
||||
<div class="video">
|
||||
<video autoplay loop muted id="video">
|
||||
<source src="<%=bgUrl%>" type="video/mp4">
|
||||
<source src="<%=bgUrl%>" type="<%=mimeType%>">
|
||||
</video>
|
||||
</div>
|
||||
<div class="volume-control mute"></div>
|
||||
<script>
|
||||
$(".volume-control").click(function(){
|
||||
if($(this).hasClass("mute")){
|
||||
$(this).removeClass("mute")
|
||||
$("#video").prop('muted', false);
|
||||
}else{
|
||||
$(this).addClass("mute")
|
||||
$("#video").prop('muted', true);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!-- Video Player End -->
|
||||
<% else %>
|
||||
<!-- Image Background Start -->
|
||||
@ -108,8 +128,12 @@
|
||||
<!-- Login Container Start -->
|
||||
<div class="login-container">
|
||||
<div class="login-form">
|
||||
<a class="brand" href="/"><img src="<%=media%>/img/argonne.svg" class="icon"><span
|
||||
class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
|
||||
<!-- Logo Start -->
|
||||
<a class="brand" href="/"><img src="<%=media%>/img/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"))%>">
|
||||
|
||||
<%- if fuser then %>
|
||||
@ -130,7 +154,7 @@
|
||||
<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Login Form End -->
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
var input = document.getElementsByName('luci_password')[0];
|
||||
if (input)
|
@ -1,12 +1,12 @@
|
||||
#!/bin/sh
|
||||
sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
|
||||
sed -i ":a;$!N;s/t.render.*sysauth_template.*return/local scope = { duser = h, fuser = a }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
|
||||
[ -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
|
||||
[ -f /usr/lib/lua/luci/view/themes/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-indexcache
|
||||
uci batch <<-EOF
|
||||
set luci.themes.Argonne=/luci-static/argonne
|
||||
set luci.main.mediaurlbase=/luci-static/argonne
|
||||
set luci.themes.Argone=/luci-static/argone
|
||||
set luci.main.mediaurlbase=/luci-static/argone
|
||||
commit luci
|
||||
EOF
|
||||
exit 0
|
70
luci-theme-argone/root/usr/libexec/argone/online_wallpaper
Executable 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
|
@ -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
|
||||
```
|
Before Width: | Height: | Size: 75 KiB |
@ -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%> ">
|
||||
|
@ -48,6 +48,7 @@
|
||||
- 适配深色模式,适配系统自动切换,支持自定义模式
|
||||
- 适配openwrt 21/22、lede
|
||||
- 支持插件式配置主题
|
||||
- 流畅度比肩bootstrap
|
||||
|
||||
### 体验WebApp方法
|
||||
|
||||
|