diff --git a/luci-app-argonne-config/Makefile b/luci-app-argone-config/Makefile similarity index 64% rename from luci-app-argonne-config/Makefile rename to luci-app-argone-config/Makefile index 1b19ab50..b9dfd669 100644 --- a/luci-app-argonne-config/Makefile +++ b/luci-app-argone-config/Makefile @@ -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 -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 diff --git a/luci-app-argonne-config/README.md b/luci-app-argone-config/README.md similarity index 61% rename from luci-app-argonne-config/README.md rename to luci-app-argone-config/README.md index 23c03638..b1500fa0 100644 --- a/luci-app-argonne-config/README.md +++ b/luci-app-argone-config/README.md @@ -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主题。 diff --git a/luci-app-argone-config/luasrc/controller/argone-config.lua b/luci-app-argone-config/luasrc/controller/argone-config.lua new file mode 100644 index 00000000..a5e31471 --- /dev/null +++ b/luci-app-argone-config/luasrc/controller/argone-config.lua @@ -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 diff --git a/luci-app-argonne-config/luasrc/model/cbi/argonne-config.lua b/luci-app-argone-config/luasrc/model/cbi/argone-config.lua similarity index 85% rename from luci-app-argonne-config/luasrc/model/cbi/argonne-config.lua rename to luci-app-argone-config/luasrc/model/cbi/argone-config.lua index 6773acf0..9a3a6b7d 100644 --- a/luci-app-argonne-config/luasrc/model/cbi/argonne-config.lua +++ b/luci-app-argone-config/luasrc/model/cbi/argone-config.lua @@ -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 ) diff --git a/luci-app-argonne-config/luasrc/view/argonne-config/other_button.htm b/luci-app-argone-config/luasrc/view/argone-config/other_button.htm similarity index 100% rename from luci-app-argonne-config/luasrc/view/argonne-config/other_button.htm rename to luci-app-argone-config/luasrc/view/argone-config/other_button.htm diff --git a/luci-app-argonne-config/luasrc/view/argonne-config/other_dvalue.htm b/luci-app-argone-config/luasrc/view/argone-config/other_dvalue.htm similarity index 100% rename from luci-app-argonne-config/luasrc/view/argonne-config/other_dvalue.htm rename to luci-app-argone-config/luasrc/view/argone-config/other_dvalue.htm diff --git a/luci-app-argonne-config/luasrc/view/argonne-config/other_upload.htm b/luci-app-argone-config/luasrc/view/argone-config/other_upload.htm similarity index 100% rename from luci-app-argonne-config/luasrc/view/argonne-config/other_upload.htm rename to luci-app-argone-config/luasrc/view/argone-config/other_upload.htm diff --git a/luci-app-argonne-config/po/es/argonne-config.po b/luci-app-argone-config/po/es/argone-config.po similarity index 100% rename from luci-app-argonne-config/po/es/argonne-config.po rename to luci-app-argone-config/po/es/argone-config.po diff --git a/luci-app-argonne-config/po/templates/argonne-config.pot b/luci-app-argone-config/po/templates/argone-config.pot similarity index 100% rename from luci-app-argonne-config/po/templates/argonne-config.pot rename to luci-app-argone-config/po/templates/argone-config.pot diff --git a/luci-app-argonne-config/po/zh-cn/argonne-config.po b/luci-app-argone-config/po/zh-cn/argone-config.po similarity index 100% rename from luci-app-argonne-config/po/zh-cn/argonne-config.po rename to luci-app-argone-config/po/zh-cn/argone-config.po diff --git a/luci-app-argonne-config/po/zh_Hans b/luci-app-argone-config/po/zh_Hans similarity index 100% rename from luci-app-argonne-config/po/zh_Hans rename to luci-app-argone-config/po/zh_Hans diff --git a/luci-app-argonne-config/root/etc/config/argonne b/luci-app-argone-config/root/etc/config/argone similarity index 100% rename from luci-app-argonne-config/root/etc/config/argonne rename to luci-app-argone-config/root/etc/config/argone diff --git a/luci-app-argonne-config/root/etc/uci-defaults/luci-argonne-config b/luci-app-argone-config/root/etc/uci-defaults/luci-argone-config similarity index 100% rename from luci-app-argonne-config/root/etc/uci-defaults/luci-argonne-config rename to luci-app-argone-config/root/etc/uci-defaults/luci-argone-config diff --git a/luci-app-argonne-config/root/usr/share/rpcd/acl.d/luci-app-argon-config.json b/luci-app-argone-config/root/usr/share/rpcd/acl.d/luci-app-argone-config.json similarity index 56% rename from luci-app-argonne-config/root/usr/share/rpcd/acl.d/luci-app-argon-config.json rename to luci-app-argone-config/root/usr/share/rpcd/acl.d/luci-app-argone-config.json index f85fc331..f6da4028 100644 --- a/luci-app-argonne-config/root/usr/share/rpcd/acl.d/luci-app-argon-config.json +++ b/luci-app-argone-config/root/usr/share/rpcd/acl.d/luci-app-argone-config.json @@ -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" ] }, diff --git a/luci-app-argonne-config/luasrc/controller/argonne-config.lua b/luci-app-argonne-config/luasrc/controller/argonne-config.lua deleted file mode 100644 index 614813b3..00000000 --- a/luci-app-argonne-config/luasrc/controller/argonne-config.lua +++ /dev/null @@ -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 diff --git a/luci-theme-argonne/Makefile b/luci-theme-argone/Makefile similarity index 76% rename from luci-theme-argonne/Makefile rename to luci-theme-argone/Makefile index 97554d41..5c99417b 100644 --- a/luci-theme-argonne/Makefile +++ b/luci-theme-argone/Makefile @@ -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 diff --git a/luci-theme-argone/README.md b/luci-theme-argone/README.md new file mode 100644 index 00000000..20b670cb --- /dev/null +++ b/luci-theme-argone/README.md @@ -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 +``` diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css b/luci-theme-argone/htdocs/luci-static/argone/css/cascade.css similarity index 91% rename from luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css rename to luci-theme-argone/htdocs/luci-static/argone/css/cascade.css index 6ecaa729..a6aed66d 100644 --- a/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css +++ b/luci-theme-argone/htdocs/luci-static/argone/css/cascade.css @@ -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 * * 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 @@ -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; } -} +} \ No newline at end of file diff --git a/luci-theme-argone/htdocs/luci-static/argone/css/dark.css b/luci-theme-argone/htdocs/luci-static/argone/css/dark.css new file mode 100644 index 00000000..370cbcd0 --- /dev/null +++ b/luci-theme-argone/htdocs/luci-static/argone/css/dark.css @@ -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); + } +} \ No newline at end of file diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css b/luci-theme-argone/htdocs/luci-static/argone/css/fonts.css similarity index 99% rename from luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css rename to luci-theme-argone/htdocs/luci-static/argone/css/fonts.css index 89cddbe2..cc4e1a80 100644 --- a/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css +++ b/luci-theme-argone/htdocs/luci-static/argone/css/fonts.css @@ -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 * * 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 @@ -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 diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/pure-min.css b/luci-theme-argone/htdocs/luci-static/argone/css/pure-min.css similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/css/pure-min.css rename to luci-theme-argone/htdocs/luci-static/argone/css/pure-min.css diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/favicon.ico b/luci-theme-argone/htdocs/luci-static/argone/favicon.ico similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/favicon.ico rename to luci-theme-argone/htdocs/luci-static/argone/favicon.ico diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.eot b/luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.eot similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.eot rename to luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.eot diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.svg b/luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.svg similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.svg rename to luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.svg diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.ttf b/luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.ttf similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.ttf rename to luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.ttf diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.woff b/luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.woff similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/TypoGraphica.woff rename to luci-theme-argone/htdocs/luci-static/argone/fonts/TypoGraphica.woff diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.eot b/luci-theme-argone/htdocs/luci-static/argone/fonts/argon.eot similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.eot rename to luci-theme-argone/htdocs/luci-static/argone/fonts/argon.eot diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.svg b/luci-theme-argone/htdocs/luci-static/argone/fonts/argon.svg similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.svg rename to luci-theme-argone/htdocs/luci-static/argone/fonts/argon.svg diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.ttf b/luci-theme-argone/htdocs/luci-static/argone/fonts/argon.ttf similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.ttf rename to luci-theme-argone/htdocs/luci-static/argone/fonts/argon.ttf diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.woff b/luci-theme-argone/htdocs/luci-static/argone/fonts/argon.woff similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/fonts/argon.woff rename to luci-theme-argone/htdocs/luci-static/argone/fonts/argon.woff diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/android-icon-192x192.png b/luci-theme-argone/htdocs/luci-static/argone/icon/android-icon-192x192.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/android-icon-192x192.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/android-icon-192x192.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/apple-icon-144x144.png b/luci-theme-argone/htdocs/luci-static/argone/icon/apple-icon-144x144.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/apple-icon-144x144.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/apple-icon-144x144.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/apple-icon-60x60.png b/luci-theme-argone/htdocs/luci-static/argone/icon/apple-icon-60x60.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/apple-icon-60x60.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/apple-icon-60x60.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/apple-icon-72x72.png b/luci-theme-argone/htdocs/luci-static/argone/icon/apple-icon-72x72.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/apple-icon-72x72.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/apple-icon-72x72.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/browserconfig.xml b/luci-theme-argone/htdocs/luci-static/argone/icon/browserconfig.xml similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/browserconfig.xml rename to luci-theme-argone/htdocs/luci-static/argone/icon/browserconfig.xml diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/favicon-16x16.png b/luci-theme-argone/htdocs/luci-static/argone/icon/favicon-16x16.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/favicon-16x16.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/favicon-16x16.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/favicon-32x32.png b/luci-theme-argone/htdocs/luci-static/argone/icon/favicon-32x32.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/favicon-32x32.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/favicon-32x32.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/favicon-96x96.png b/luci-theme-argone/htdocs/luci-static/argone/icon/favicon-96x96.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/favicon-96x96.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/favicon-96x96.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/manifest.json b/luci-theme-argone/htdocs/luci-static/argone/icon/manifest.json similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/manifest.json rename to luci-theme-argone/htdocs/luci-static/argone/icon/manifest.json diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/icon/ms-icon-144x144.png b/luci-theme-argone/htdocs/luci-static/argone/icon/ms-icon-144x144.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/icon/ms-icon-144x144.png rename to luci-theme-argone/htdocs/luci-static/argone/icon/ms-icon-144x144.png diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/add.webp b/luci-theme-argone/htdocs/luci-static/argone/img/add.webp new file mode 100644 index 00000000..7271dd3e Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/add.webp differ diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg b/luci-theme-argone/htdocs/luci-static/argone/img/argon.svg similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg rename to luci-theme-argone/htdocs/luci-static/argone/img/argon.svg diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/bg1.jpg b/luci-theme-argone/htdocs/luci-static/argone/img/bg1.jpg new file mode 100644 index 00000000..26a52a53 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/bg1.jpg differ diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/blank.png b/luci-theme-argone/htdocs/luci-static/argone/img/blank.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/img/blank.png rename to luci-theme-argone/htdocs/luci-static/argone/img/blank.png diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/edit.webp b/luci-theme-argone/htdocs/luci-static/argone/img/edit.webp new file mode 100644 index 00000000..264840a3 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/edit.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/fieldadd.webp b/luci-theme-argone/htdocs/luci-static/argone/img/fieldadd.webp new file mode 100644 index 00000000..a4619e24 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/fieldadd.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/file.webp b/luci-theme-argone/htdocs/luci-static/argone/img/file.webp new file mode 100644 index 00000000..6597e6ce Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/file.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/find.webp b/luci-theme-argone/htdocs/luci-static/argone/img/find.webp new file mode 100644 index 00000000..0b8fae85 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/find.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/folder.webp b/luci-theme-argone/htdocs/luci-static/argone/img/folder.webp new file mode 100644 index 00000000..eef1fb10 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/folder.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/link.webp b/luci-theme-argone/htdocs/luci-static/argone/img/link.webp new file mode 100644 index 00000000..51dc404e Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/link.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/reload.webp b/luci-theme-argone/htdocs/luci-static/argone/img/reload.webp new file mode 100644 index 00000000..f9a15668 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/reload.webp differ diff --git a/luci-theme-argone/htdocs/luci-static/argone/img/remove.webp b/luci-theme-argone/htdocs/luci-static/argone/img/remove.webp new file mode 100644 index 00000000..02e49860 Binary files /dev/null and b/luci-theme-argone/htdocs/luci-static/argone/img/remove.webp differ diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/trafficbar.png b/luci-theme-argone/htdocs/luci-static/argone/img/trafficbar.png similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/img/trafficbar.png rename to luci-theme-argone/htdocs/luci-static/argone/img/trafficbar.png diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/volume_high.svg b/luci-theme-argone/htdocs/luci-static/argone/img/volume_high.svg similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/img/volume_high.svg rename to luci-theme-argone/htdocs/luci-static/argone/img/volume_high.svg diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/volume_off.svg b/luci-theme-argone/htdocs/luci-static/argone/img/volume_off.svg similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/img/volume_off.svg rename to luci-theme-argone/htdocs/luci-static/argone/img/volume_off.svg diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/jquery.min.js b/luci-theme-argone/htdocs/luci-static/argone/js/jquery.min.js similarity index 100% rename from luci-theme-argonne/htdocs/luci-static/argonne/js/jquery.min.js rename to luci-theme-argone/htdocs/luci-static/argone/js/jquery.min.js diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/script.js b/luci-theme-argone/htdocs/luci-static/argone/js/menu-argon.js similarity index 58% rename from luci-theme-argonne/htdocs/luci-static/argonne/js/script.js rename to luci-theme-argone/htdocs/luci-static/argone/js/menu-argon.js index 3a0f5cc9..a4c98af9 100644 --- a/luci-theme-argonne/htdocs/luci-static/argonne/js/script.js +++ b/luci-theme-argone/htdocs/luci-static/argone/js/menu-argon.js @@ -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 + * luci-theme-argon + * Copyright 2023 Jerrykuku * * 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 @@ -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 - */ -(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("" + that.text() + ""); - }); - - $(".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); diff --git a/luci-theme-argone/htdocs/luci-static/argone/js/sidebar-argon.js b/luci-theme-argone/htdocs/luci-static/argone/js/sidebar-argon.js new file mode 100644 index 00000000..fdf5a99c --- /dev/null +++ b/luci-theme-argone/htdocs/luci-static/argone/js/sidebar-argon.js @@ -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 + * + * Have a bug? Please create an issue here on GitHub! + * https://github.com/jerrykuku/luci-theme-argon/issues + * + * luci-theme-bootstrap: + * Copyright 2008 Steven Barth + * Copyright 2008 Jo-Philipp Wich + * Copyright 2012 David Menting + * + * MUI: + * https://github.com/muicss/mui + * + * luci-theme-material: + * https://github.com/LuttyYang/luci-theme-material/ + * + * 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; + } + }); diff --git a/luci-theme-argone/htdocs/luci-static/argone/js/styles-argon.js b/luci-theme-argone/htdocs/luci-static/argone/js/styles-argon.js new file mode 100644 index 00000000..2e40a94c --- /dev/null +++ b/luci-theme-argone/htdocs/luci-static/argone/js/styles-argon.js @@ -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 + * + * Have a bug? Please create an issue here on GitHub! + * https://github.com/jerrykuku/luci-theme-argon/issues + * + * luci-theme-bootstrap: + * Copyright 2008 Steven Barth + * Copyright 2008 Jo-Philipp Wich + * Copyright 2012 David Menting + * + * MUI: + * https://github.com/muicss/mui + * + * luci-theme-material: + * https://github.com/LuttyYang/luci-theme-material/ + * + * 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 + */ +(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("" + that.text() + ""); + }); + + $(".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); diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less b/luci-theme-argone/htdocs/luci-static/argone/less/cascade.less similarity index 92% rename from luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less rename to luci-theme-argone/htdocs/luci-static/argone/less/cascade.less index 64220ec1..b094b7ce 100644 --- a/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less +++ b/luci-theme-argone/htdocs/luci-static/argone/less/cascade.less @@ -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 * * 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 @@ -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; } diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less b/luci-theme-argone/htdocs/luci-static/argone/less/dark.less similarity index 73% rename from luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less rename to luci-theme-argone/htdocs/luci-static/argone/less/dark.less index fba9a56d..ac019ca7 100644 --- a/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less +++ b/luci-theme-argone/htdocs/luci-static/argone/less/dark.less @@ -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 * * 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 @@ -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{ diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm b/luci-theme-argone/luasrc/view/themes/argone/footer.htm similarity index 58% rename from luci-theme-argonne/luasrc/view/themes/argonne/footer.htm rename to luci-theme-argone/luasrc/view/themes/argone/footer.htm index b735534f..b7bae6a8 100644 --- a/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm +++ b/luci-theme-argone/luasrc/view/themes/argone/footer.htm @@ -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 + luci-theme-argon + Copyright 2020 Jerrykuku 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 @@ -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 @@
Powered by <%= ver.luciname %> (<%= ver.luciversion %>) / - ArgonneTheme <%# vPKG_VERSION %> / + ArgonTheme <%# vPKG_VERSION %> / <%= ver.distversion %> <% if #categories > 1 then %>
- - + }) + - + + + - diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/header.htm b/luci-theme-argone/luasrc/view/themes/argone/header.htm similarity index 83% rename from luci-theme-argonne/luasrc/view/themes/argonne/header.htm rename to luci-theme-argone/luasrc/view/themes/argone/header.htm index 53b77274..850dfeb2 100644 --- a/luci-theme-argonne/luasrc/view/themes/argonne/header.htm +++ b/luci-theme-argone/luasrc/view/themes/argone/header.htm @@ -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 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 @@ -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('
    ' %{ - active, - display - }) + write('
      ') + 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('
    • %s
    • ' %{ - subactive, + + write('
    • %s
    • ' %{ title, nodeurl(prefix, r, nnode.query), title @@ -138,21 +132,20 @@ local childs = disp.node_childs(cattree) if #childs > 0 then write('