From 612e1e0fc2efb1a38c32b193bd0c69870190fe4e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 30 Apr 2023 12:50:32 +0800
Subject: [PATCH] update 2023-04-30 12:50:32

---
 luci-theme-argonne/Makefile                   |   6 +-
 .../luci-static/argonne/css/cascade.css       | 234 ++++--
 .../htdocs/luci-static/argonne/css/dark.css   | 683 +++++++++++++++++-
 .../htdocs/luci-static/argonne/css/fonts.css  |  19 +-
 .../htdocs/luci-static/argonne/img/add.webp   | Bin 0 -> 690 bytes
 .../argonne/img/{argonne.svg => argon.svg}    |   0
 .../htdocs/luci-static/argonne/img/edit.webp  | Bin 0 -> 632 bytes
 .../luci-static/argonne/img/fieldadd.webp     | Bin 0 -> 664 bytes
 .../htdocs/luci-static/argonne/img/file.webp  | Bin 0 -> 566 bytes
 .../htdocs/luci-static/argonne/img/find.webp  | Bin 0 -> 674 bytes
 .../luci-static/argonne/img/folder.webp       | Bin 0 -> 252 bytes
 .../htdocs/luci-static/argonne/img/link.webp  | Bin 0 -> 480 bytes
 .../luci-static/argonne/img/reload.webp       | Bin 0 -> 848 bytes
 .../luci-static/argonne/img/remove.webp       | Bin 0 -> 682 bytes
 .../argonne/js/{script.js => menu-argon.js}   | 135 +---
 .../luci-static/argonne/js/sidebar-argon.js   |  64 ++
 .../luci-static/argonne/js/styles-argon.js    | 103 +++
 .../luci-static/argonne/less/cascade.less     | 255 +++++--
 .../htdocs/luci-static/argonne/less/dark.less | 157 +++-
 .../luasrc/view/themes/argonne/footer.htm     |  50 +-
 .../luasrc/view/themes/argonne/header.htm     |  47 +-
 .../view/themes/argonne/header_login.htm      | 124 ++--
 .../view/themes/argonne/out_header_login.htm  |   2 +-
 .../luasrc/view/themes/argonne/sysauth.htm    | 121 ++--
 .../etc/uci-defaults/90_luci-theme-argonne    |   6 +-
 .../root/usr/libexec/argonne/online_wallpaper |  70 ++
 26 files changed, 1680 insertions(+), 396 deletions(-)
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp
 rename luci-theme-argonne/htdocs/luci-static/argonne/img/{argonne.svg => argon.svg} (100%)
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp
 rename luci-theme-argonne/htdocs/luci-static/argonne/js/{script.js => menu-argon.js} (58%)
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js
 create mode 100644 luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js
 create mode 100755 luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper

diff --git a/luci-theme-argonne/Makefile b/luci-theme-argonne/Makefile
index 97554d419..2758df01c 100644
--- a/luci-theme-argonne/Makefile
+++ b/luci-theme-argonne/Makefile
@@ -7,9 +7,9 @@
 include $(TOPDIR)/rules.mk
 
 LUCI_TITLE:=Argonne kenzo
-LUCI_DEPENDS:=
-PKG_VERSION:=1.7.3
-PKG_RELEASE:=2
+LUCI_DEPENDS:=+curl +jsonfilter
+PKG_VERSION:=1.7.7
+PKG_RELEASE:=1
 
 include $(TOPDIR)/feeds/luci/luci.mk
 
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css b/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
index 6ecaa729d..697097e90 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
@@ -2,7 +2,6 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material 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
@@ -18,7 +17,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -315,7 +314,7 @@ li {
   position: relative;
 }
 .login-page .login-container .login-form .form-login .input-group::before {
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -633,7 +632,7 @@ footer a {
   position: relative;
 }
 .main .main-left .nav li.slide .menu::before {
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -652,7 +651,7 @@ footer a {
   position: absolute;
   right: 0.5rem;
   top: 0.8rem;
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -889,7 +888,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 +946,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/argonne/img/reload.webp");
+}
+img[src="/luci-static/resources/cbi/file.gif"] {
+  content: url("/luci-static/argonne/img/file.webp");
+}
+img[src="/luci-static/resources/cbi/add.gif"] {
+  content: url("/luci-static/argonne/img/add.webp");
+}
+img[src="/luci-static/resources/cbi/remove.gif"] {
+  content: url("/luci-static/argonne/img/remove.webp");
+}
+img[src="/luci-static/resources/cbi/edit.gif"] {
+  content: url("/luci-static/argonne/img/edit.webp");
+}
+img[src="/luci-static/resources/cbi/fieldadd.gif"] {
+  content: url("/luci-static/argonne/img/fieldadd.webp");
+}
+img[src="/luci-static/resources/cbi/link.gif"] {
+  content: url("/luci-static/argonne/img/link.webp");
+}
+img[src="/luci-static/resources/cbi/find.gif"] {
+  content: url("/luci-static/argonne/img/find.webp");
+}
+img[src="/luci-static/resources/cbi/folder.gif"] {
+  content: url("/luci-static/argonne/img/folder.webp");
+}
 /* input */
 .cbi-value input[type="password"],
 .cbi-value input[type="text"] {
@@ -1055,12 +1082,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 +1101,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 +1215,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 +1274,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 +1369,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 +1461,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 +1599,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;
@@ -1634,7 +1753,7 @@ body.lang_pl.node-main-login .cbi-value-title {
 .cbi-value-helpicon,
 .showSide,
 .main > .loading > span {
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
@@ -1777,12 +1896,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 +1927,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 +2092,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 +2174,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 +2440,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 +2451,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 +2482,6 @@ select[multiple="multiple"] {
   padding: 0.7rem;
   padding-left: 0;
   width: 23rem;
-  float: left;
   text-align: right;
   display: table-cell;
 }
@@ -2515,18 +2669,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 +2705,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 +2809,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 +3014,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 +3121,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 +3218,4 @@ input[name="nslookup"] {
     width: 2.3rem !important;
     height: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css b/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
index 9288375fa..370cbcd08 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
@@ -1 +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}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:#1e1e1e}.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:#252526}.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}#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:none;border:1px solid #1e1e1e}.ifacebox-head{color:#666}.ifacebox-body{background-color:#333}.zonebadge strong{color:#333}.zonebadge>.ifacebadge{background-color:#3c3c3c}div.cbi-value var,td.cbi-value-field var{color:#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}.notice{background-color:#483d8b !important;background-color:var(--dark-primary) !important}.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}.cbi-section-error{color:darkorange}.node-services-vssr .block h4 span{color:#ccc !important}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.login-page .login-container .login-form{-webkit-backdrop-filter:blur(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
+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-argonne/htdocs/luci-static/argonne/css/fonts.css
index 89cddbe28..85d7f891b 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css
@@ -2,10 +2,9 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material 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
+ *      https://github.com/kenzok78/luci-theme-argonnene/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -18,7 +17,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -47,12 +46,12 @@
 /* ICON Font */
 
 @font-face {
-    font-family: 'argon';
-    src: url('../fonts/argon.eot?u6kthm');
-    src: url('../fonts/argon.eot?u6kthm#iefix') format('embedded-opentype'),
-        url('../fonts/argon.ttf?u6kthm') format('truetype'),
-        url('../fonts/argon.woff?u6kthm') format('woff'),
-        url('../fonts/argon.svg?u6kthm#argon') format('svg');
+    font-family: 'argonne';
+    src: url('../fonts/argonne.eot?u6kthm');
+    src: url('../fonts/argonne.eot?u6kthm#iefix') format('embedded-opentype'),
+        url('../fonts/argonne.ttf?u6kthm') format('truetype'),
+        url('../fonts/argonne.woff?u6kthm') format('woff'),
+        url('../fonts/argonne.svg?u6kthm#argonne') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;
@@ -61,7 +60,7 @@
 [class^="icon-"],
 [class*=" icon-"] {
     /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'argon' !important;
+    font-family: 'argonne' !important;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7271dd3efd5b61154205e2ff053ea8c4fe255d71
GIT binary patch
literal 690
zcmWIYbaPw9#J~{l>J$(bU=hK^z`!5?#Qb0c6!9?y%IfnUU>11)*kV#{=*;vT&%L``
z6tutJ72olFuE`yXNlQF-^1S<1U32g6&v|Zg#^vRflXA5S-?e|M3>TYgoA&G-lf2xT
zTid3l3YWL1a~X6jFkHjYAEMar%u`;smvMrK%0w5T)IfHr>ffqI|Fm9yZ>G;a|A+Pu
zRsXN?-`797pQZFUKP~RYYyEfj|Nn<~)U8+d`s*DuA$r%T_f9H~0!<1mjttq{X`V;<
zLrptw1svEb_g6aWRK39WU*DT{-gvdd?c&l8EBaGZ=Xb825FmNa)+nnzZP8917t4mg
zBh?3rTwM-+@KbzeC)m=vHAzhO+sQrg0oS=_I5ijq=fCRcRNSyYlyL@!027D8i6<%&
z{}!wWvSe^hJ0P=Nn`3t+!!qwlfAiiJ+}*7!!m8xJ!Xl#bWBdCX=cV83E3TY)|8}!$
zAK&rMN~v|chP=#O{-U=nU#~j6?5Fg;-A%4?5jD&I>BrxGT9g)6^sl@j<My^yDeuc)
z=7rpP7j{T*!_v2P{JVG8-7Ear-tlj;?=6+L)4ccHcD`6)aq&tidqx)T+%=njGp<+}
zwSjN`+NW|Cwn%8Qh<^KVv#MKL#lulnw7Nd|!DlIP!B7946whwC=a4&1&*Sj?&+I#T
zCS9^^-pp+*-`{bve7=0xwKB7|`Ab@kH7@>}vuwxiUs~$xc6xm?nHjCQd`Zi_pI?27
zRBS`%P7(SyFIT*1=Gi~jBA7jc?r*QyU^Dl=b>+JSOENQ7hMbk(|8TXgNZ;`)*=gTD
zc3u=`U<e3y^z;L!B?~7{U*@+!1}JHH07*s$CKwHpW6=Q1@c>CC`ww6?SPzRcn9UoI
Olp4+`z`)7~<^lj7UM1E5

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg b/luci-theme-argonne/htdocs/luci-static/argonne/img/argon.svg
similarity index 100%
rename from luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg
rename to luci-theme-argonne/htdocs/luci-static/argonne/img/argon.svg
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp
new file mode 100644
index 0000000000000000000000000000000000000000..264840a334af871f06a048d1688491e2b0019c4f
GIT binary patch
literal 632
zcmWIYbaN|UVqge&bqWXzu!!JdU|<jcVtz0Jiun9tWMI(eKfo*?{zPF@?sChLf`&OB
zJ)u>ns^8xzxZpNP`KqhX^2hxTAJ{a`sW01o$79o4t<S92k8X-~Qd;!B>ZwIn%I%f2
z=9Dhr<+nJ<?H94>to?C@75_L|Iy#t^Scy#PY3MMSD59X$;gxay>SrCrSqmq`8o53F
zZ+`Re{vM@S&J9zF<~sN3*#+&gSN8mB*^yazx971|^r|I49@mtINS!j?<?IpEz|dRN
zq|oy0bL>(7bH`O~s_X2V@c&h4^`6;=(!15Z9+<+fks;KeAfc4Q7Q!OLyx_veA6w-P
zJ^s92>sJ@+{rlTol2+v8pWLwORbA@&6&}XF_vF2o<7ikQ*%far^6>Wy``L?2n3$9_
z(vCWntv7VpnHIG*Ipe2ghH5;&M-}&{L_rqO30{m%i|lIy#9zlTy4>F8YhHbP+uJK$
zlW)Dt&XO+7`h5K>ui)SL3~zc=idH(QUEIzuGnZku*S~vJ40Gg?o&H68>+E5l;}{U^
zWqH%^$P2LsS6j{HQ=a`h_-><f!odUf`|V^OI|OF(R@E}9SC$`^OxPv)>g5}$j*fe;
zpHDM&2$*S`C;l^VSIw2ROy0ir`P*W@glO&mu$$vdc5d0HwLx{F!P*Skn<}K=ubvvd
zamKO8gmW%&u~+6DeZ+S4^nocId+K&P^*^byVci3JQ|SZW3Y4aMiU<Alv9jF79T4p3
z=?6>^7EYeN%x{4VPy+D)l8g*YFd8Jsq5+oU0g_DiAHZy|9u{XXn>QdSHJnj^ffbmX
GfB*nb8wA||

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a4619e247550e645827cfbaa04d352d057c36321
GIT binary patch
literal 664
zcmWIYbaR`)#J~{l>J$(bU=hK^z`!5?#Qb0c6!DP(%IfnUU=~=;qBtofGO%bd+kdGE
z#fRS|pJH3$F-gYL?$cg@Y4+``n`ORqavh(jV(Il&PHN7fdhrd7&tJ|g3ckHfIJbz^
zmTf`<FUvz_X^w-;smm6388fciem_3qzq)3Ii0Rr!*I;3$lt5+`7BQ17feQf&3mmv6
zsBYU3$)3b~<o|s?jwLHXoLHSY1hf_~aj~>;H8v~?a-4M~qx@K1<qe&Ug3~T{94;&0
zo&Qh2zJ7l5hJXH7?d-e%&p-T2{}LOU%Ibgnc1tci^yj*y>+AO_E=*dizRwS>|MYX6
zm+xf>_x-akEV;E-{QdDokKd&4`8faFs`nbA4r<-67UyYR{c|hJW6HFeo~`!<*XPc=
zcD(4C?meBWx!<MCy#GmGmY;O`YxUgk{Mom6TFRL>WJKRKe0p--#@yTUPHww<qp~Nb
z{Aj7L;9vFGTRbnVo&Mn07Y)H~w?h}JAAEf*>sxP~SkPc_<?~;bJ&daA;fpWc{uNeN
zH=l8V;X$Jr%g@H%7B7zHXIM3P&3?%r+rIpKep5MM&cmHsz4kUM&ykm3&D`1$rTuZ{
zT}7j<=VREkl+SFtTdP)?zCKt$=TE#<SaF<c{QSFbibNZ=Y9DsFY>PVCvf4FDR3q!^
z%&l>2XYQF8bjGZ~X~q1x@#@{%KTUdfkt;xQTJYP`R#zv*F5?twm^E?X^KP9gqx*-i
z#xZSQ7Pe@Lfq}<Fp{Ql=8fHH}>|!I-tNQq1^JH;`fM7>YKVXWnaPstJehXxP5|9Uw
oWMp81(I7b%4X_*!kYuv|0A_>rusDO+ya7q6;fw+dtc+kT01p@znE(I)

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6597e6ce78093ed36cd391001fd40f91a6a176b2
GIT binary patch
literal 566
zcmWIYbaT^VVqge&bqWXzu!!JdU|<jcVtz0JiumkgWMI(eKfo+7|L}rb75AS^kA5mw
z6x43DUU<-Kl8XB0iX#sH%nt5#dt;HO;yJPC<KBPPo6=;H{ll%gQf{xDHK%j|FTce>
zZoi04XYG$Otf+V4VQo^Hks18JMKP*_MS;<)B_QKS+lu8+uK)ixBfyu5ancKO6Ojc^
z9qi7^D}@TVX-!?V|Jl92yN@K=x2Nw*&0F_esdLF$aVF7K@>jky26gmI3V2xZ&0ax8
zM1hq<(d6r&t2yDdlK+JL;!oKBzZCb_?A!FaEj<b|<uwFLG#nfQHW*a8hjzxVd~kpN
z(#y`Ds=W{G@ea?o{r$G&)BOI|FB%y*rWyU6X4Lw;wvOTMw%o^Otv2RbZ=HFiBiMSy
z+i!pWyPOxeSii}0w#wZqPW|JpSu5i--|Rblo!>@k>GhxdKmI<8xqSN0nJdzN3UdXQ
zX1Gk_OZ~-}v2%&>(u(hVVgB|DU%v6vRC+n%KTqDj)Cu7i3VyUr{up92@ysuu?H9uM
z^Ph)J`~36Hxe4nSb!V%~aIrKu1{}%GcXT%0w}0Etjr%t25WTvcJyy+VrD5^+NAFV0
zN>YNV*{5?!F8Iatj<<P(-GR@63!_$E@!smSv*HsMLqM>jrynprEu1`knco5#py>4g
ql8g*YFd8Jsq5+oU0g_DiAHZy|9u{XXn>QdSHJnj^ffbk-fB*o(F6z4g

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0b8fae856d5953f4cfc34d25e46a6e3ee9a1bd2f
GIT binary patch
literal 674
zcmWIYbaR`<#J~{l>J$(bU=hK^z`!5?#Qb0c6!B35%IfnUU>0zHVm3*|^;Pl|KRe}n
z^^<2Lt~||qd}7Y(Q#-%!`(GHggh5eQHoJWLaoHOab60nL3ym>W;HcxAlj3n8_t~$c
z=-b<R{`LyGzHqb*dK=imC1P+orPzb%&!q$x4hDv%1tu4O_D<w!$YJ1cEMN-YU$t&s
z>Cx49Cp_G-)9bD}Q|`xo-hx4!E?RKj*LlDA{?f&ohj_cx(jLtZG3D4_zyH@llcL|j
zD?VAyDQ$Zcx&F^KbxsDR4i-fY21N(PjG0+ap8jiJT&ZildJ_MA?_?_zw`RSXPrqwc
z|6i@(8@?&%*69z6#TX*^x6YJVsq??i<AnTd(SN}~>o2c)>H0{`H}+$#>e6rf9WV7(
zF*sEOweQY<t9kSL^0eN)8|6!!v$rgLwaH|&vupZA6W>kh(|0hi{M)lVbh|}{h-{ks
z?UcpI3q!ADXK`MP=9-lEsrX=9Zk?DtufvJIe^@%U<<8E#w(hOjirnpmxyL<oZ=3z!
z{a#t=mp$VezZ*7s?RTHWG_C#0`)qT{oh{6>4W@t5cl^5b>TX~_Y3ey<$pt?)5->Sw
zusnZ9at&+E%S-Pa{`ZH(MM<#b&${*Pyx;dI)uX=@6LhWi?60fXzjDH+y#iOipFH~W
z^XZTCr@U%jpv8Z0o?LwYK9yjBnvaHy%jM^9zdXrk@q@FW2OnHbeI5`y^AnT6iRmFh
zYuYB>lUgnABqpi0?Mz6fnAjP&psq>ciMgkq72cLzH*ejycPDch0)ibq{eWr5!pYN@
w`7MwEN=hC;l97Q4MuX&7G{AB^K$6M+1DFlg!{Q8P^9CfPhBFE<urh+V0IPZ&uK)l5

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp
new file mode 100644
index 0000000000000000000000000000000000000000..eef1fb10415a3fdfd1f6bf8d0ea1c0cf18e57542
GIT binary patch
literal 252
zcmWIYbaVT{z`zjh>J$(bU=hIuWD5W>KNtZ;d>Vi}ef|T?0&LeN<}Q6XFTZ2@1Kkuk
zz1*Wq8&3cIFS;$a`H`WCSJLgSMHgEADs)bqy~ojVTgEutA>c)$WW^fMrIX8wnAiSU
zTC=M)+37&5wA!2-R@-8xz4ptGsSoztWW*3TIj%?Xm~WS2(3GcrJey94f7q`P!}_&b
zC-rS`<lkREv>5_|9X<Vk?yzw3^ksevWPlv$0VEk2m|!$Wjzt43#{(pp>_33nU_C6(
SU^Z_+QffG(00S!{m<s^$v`vEm

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp
new file mode 100644
index 0000000000000000000000000000000000000000..51dc404ed59839930e091298936c8bdf5e54927a
GIT binary patch
literal 480
zcmWIYbaT7G$iNWp>J$(bU=hK^z`!5?#Qb0c6!A#`%IfnUU>2}{WHCuaUCU%gv+a-n
zm!j_a?mTEQDMz*0T2MgrXT0U^(|XNrlSIDWU0m;)-yymE?v-tCU1raj*vQOsF^R8b
zL8H<1;HR7o-~RtT^q)IQfm0zsDCPa<9p{g4)BX2<xxCr;((1^{tMk5>)UM91>n;Az
zz`21%fv0g><ngon<T#T4zWkk_B68Qr_ws%D`gs!=96vBIJ)GY%F+2LHu3*DG<K+iM
zwd)s_)GaSO@;prC>Kq55hZ`C4e=_HOkok7~V{hjz|LdjBmlwUAxZEQ-M6^pLlf_~~
z?(H1EIkysfuWY+}uHNgSgwn6|Kry#ddHRX>&0?-^<1J>M{<t&Mi6eT?VackAXP$2|
zZ`dic?1}(abb^>-<m&0x)*nI?lho$UI^^)ZvbJS{vqW~&huS~RFPbk*|8D%mKfrdz
z(M4w#$nVxDmRMOBzr|1|MbRynL0Ivc-kKv8OH5^EwY|QvExL4#*K4kTU`J0sV8~lI
zdHOQH1u{Sp;Q=HW8JJ)+NRCAVEXM;Rne0D+*<d{^&R{lgKvHTrqW}XdFxr3s0O@tT
AoB#j-

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f9a15668c6c349ccc38a0648be3f3344556f75fe
GIT binary patch
literal 848
zcmWIYbaV4yW?%?+bqWXzu!!JdU|<jcVqq`>iuhb%Vqnl0KENVyoYj0%&ULT%wedUT
z3ko@#{wQDiHP833ql#zHl)b0>>%*Tv(P4ONF-gUJW!x464(^Rp{(FA$Gncu2OIYK*
z|FOGU=VY;Mmv!*>UoM?sx{ulF#hTKUckbR*^<?lDsy_Bad7l3dE<3S({y!QHGk<Ts
z>zE>NU!(Vk($Y=qbq-JbSj}C|esEEYgMxsT01HQg)~tYr#NVX>6J#!D6t>;(%m3VL
z#U;RK0>lXu+*%wqC@M&qaP9V3SpP+wg_%h#LSexToqOz=9|B*^|99eE=Z*<;RvLfM
z4_WxV>s5F7^%pz!_uXx5t-QNDP~_&@7rJbz6{o+vv{|b2|MWq&zH~F=J=4RZ4`uJ`
zE&1sq`}NTMKQH!wHQnf4(pz`;%Br<Bx4-wi|1P)hdrZFm!&mF&{@q-5%J7%cw3(tg
zzb{nQRoOY8KL2;d%O8IK-xoIv{kp$w>i@4#xBS`sr@m9ELDa;IRY5`F13TZs0N$5M
zfeXS^cXQ3y@6UO}*TZ$M*`L5&hDlu78E^Mbo)9t1;zOwMCw8Btt0gl}m59`?|Fuwc
z^SO8BBI{4P%YIJH|3BMLdi#A_X3lN7v&*(5-QJd~Zoe%TNZsBRcy)ijnah`YCbNdK
zJH;FJYBxN+%A1h=UzBsY+`Wdk`}G$j6)h64aH{xxpM8aObOonS>gk3{JZ571Cu(`}
zZ~6AU^z(`LuP1iqr2U(C=gq2%+nm-j<QHo@y2J_1aZFQh$nsjSb@jgL3GW1j`c<lT
zz5H#}=lzL0Gw;{2Fg}L2&R@BtW|hwOc<$mpbLKCG%L_Luy3I@cYm)kshsP{KlPTEs
zU*0b_R*#BmPR_hvWz)W89XM}XP;AS6be`U{ykBf9V;Q{ee&5{?*RXctzS;Xa7fzm2
z6Z4kSAvNT6eXiq@`MuE_>V3{K9x_gLNcP^kFR`MAU8(=Ppyir1L47Z#Ugdr8PGn-c
z(`s!7>+IJDejjBz@JTBm*wNDun9?nrJbjtp0vVu$?*Swk8JJ)+NRCAVEXM;Rne0D+
X*<d{^&R{lgKvHTrqW}XdBbW;S_tJG(

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp
new file mode 100644
index 0000000000000000000000000000000000000000..02e49860655dfd936e95bb74190a6e9d724c191f
GIT binary patch
literal 682
zcmWIYbaPw8#J~{l>J$(bU=hK^z`!5?#Qb0c6!Fmm%IfnUU>0D1Vlhd@edRu9ZRQX5
z2HuB%SFD_QH`Dyiv2AO$e($!{WW6Byc9(O`#q$5xCn|gPO)_o%{wMxX?mS_2erNyb
zx3g}~dpxN)jb&=0PlDCbY1c$HCO6F4Y|bFoepDxIW8u1t59{miM6a23{<rCzC+0IO
zGyfE1*XpZ2G_Tugb>z~QmA}u%=Rf{;ewoVhKgY86=<uCCHT}rZ8Ak;qoD+B&882_R
zv}{>Nu4miHKJhP><$LvYU&nJyR|{NuFYa0B#9IPv7nh~UUb!UuHR>Jf<;ctWjla(&
z-}(8TGve#U{a@B|>i@cSNzLey$iiw%m*?gt8Z$f07U}+fQn**jlTm|_iACUX+U|R9
zo2A4wA9wLIcnGilcRE-|-09iPfJ#p8B#*@>nHv*1xt1`-9^1IeVqw>c4OSr%9D)pj
z0!&IS4-T>_e>nVV+Xt<4)1G&3)VEQ!>TxdIFum~JTjAwz{U+NnyWHO9YhJxy`gU2?
z?Xub5vu^ifJ-%(7_fK)r|CGsQp1Yq;dUz|sNcOyo^fJcK(+lT`nw?{^^yLkGus!T7
z!>U<ItqTq<V_3c1pq)o^#o|x5r8vL&Cn!4pi`Q5(bDL*I<jW=#i`cRRJ5R6g+v@k#
zfA3RNz5n@h#J-(--^fiDlDa*w?3>&+zx8ZSkNge17aJLGt*zt9S)2d!_u1!@gA$#+
zUi{c~JI?lvg;rUc=cHfLu7B>n^zrMz3|UoQTm7F-9}^gyO*d9pUHy~(GCJm+6eB}G
zu%o9RFb!EadHOQH1u{TM$^%F;GBCktkQ|E!SdIrsGTDCsv%z{;oWX3~fTYxLMgay^
HMlcru$)6)O

literal 0
HcmV?d00001

diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/script.js b/luci-theme-argonne/htdocs/luci-static/argonne/js/menu-argon.js
similarity index 58%
rename from luci-theme-argonne/htdocs/luci-static/argonne/js/script.js
rename to luci-theme-argonne/htdocs/luci-static/argonne/js/menu-argon.js
index 3a0f5cc9a..a4c98af97 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/js/script.js
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/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 <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);
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js b/luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js
new file mode 100644
index 000000000..fdf5a99c0
--- /dev/null
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/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 <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;
+        }
+    });
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js b/luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js
new file mode 100644
index 000000000..2e40a94ca
--- /dev/null
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/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 <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);
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less b/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
index 64220ec12..475bef82a 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
@@ -3,10 +3,9 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material 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
+ *      https://github.com/jerrykuku/luci-theme-argonne/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -362,7 +361,7 @@ li {
                     position: relative;
 
                     &::before {
-                        font-family: 'argon' !important;
+                        font-family: 'argonne' !important;
                         font-style: normal;
                         font-weight: normal;
                         font-variant: normal;
@@ -745,7 +744,7 @@ footer {
                         position: relative;
 
                         &::before {
-                            font-family: 'argon' !important;
+                            font-family: 'argonne' !important;
                             font-style: normal;
                             font-weight: normal;
                             font-variant: normal;
@@ -765,7 +764,7 @@ footer {
                             position: absolute;
                             right: 0.5rem;
                             top: 0.8rem;
-                            font-family: 'argon' !important;
+                            font-family: 'argonne' !important;
                             font-style: normal;
                             font-weight: normal;
                             font-variant: normal;
@@ -1060,7 +1059,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 +1133,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/argonne/img/reload.webp");
+}
+img[src="/luci-static/resources/cbi/file.gif"] {
+    content: url("/luci-static/argonne/img/file.webp");
+}
+img[src="/luci-static/resources/cbi/add.gif"] {
+    content: url("/luci-static/argonne/img/add.webp");
+}
+img[src="/luci-static/resources/cbi/remove.gif"] {
+    content: url("/luci-static/argonne/img/remove.webp");
+}
+img[src="/luci-static/resources/cbi/edit.gif"] {
+    content: url("/luci-static/argonne/img/edit.webp");
+}
+img[src="/luci-static/resources/cbi/fieldadd.gif"] {
+    content: url("/luci-static/argonne/img/fieldadd.webp");
+}
+img[src="/luci-static/resources/cbi/link.gif"] {
+    content: url("/luci-static/argonne/img/link.webp");
+}
+img[src="/luci-static/resources/cbi/find.gif"] {
+    content: url("/luci-static/argonne/img/find.webp");
+}
+img[src="/luci-static/resources/cbi/folder.gif"] {
+    content: url("/luci-static/argonne/img/folder.webp");
+}
 
 /* input */
 .cbi-value input[type="password"],
@@ -1268,13 +1295,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 +1317,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 +1451,7 @@ ul li .cbi-input-checkbox {
 
 .cbi-section-create {
     margin: 0;
-    padding-left: 1rem;
+    padding-left: 0.5rem;
     align-items: center;
 
 }
@@ -1495,12 +1524,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 +1635,7 @@ input[name="nslookup"] {
     height: 1.6rem !important;
     line-height: 1.6rem;
     border-radius: .25rem;
+    overflow: hidden;
 }
 
 #swaptotal>div>div,
@@ -1683,6 +1748,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 +1925,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;
@@ -1989,7 +2119,7 @@ body.lang_pl.node-main-login .cbi-value-title {
 .cbi-value-helpicon,
 .showSide,
 .main>.loading>span {
-    font-family: 'argon' !important;
+    font-family: 'argonne' !important;
     font-style: normal !important;
     font-weight: normal !important;
     font-variant: normal !important;
@@ -2165,11 +2295,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 +2333,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 +2530,6 @@ table>thead>tr>th {
     padding-top: .75rem;
     padding-bottom: .75rem;
     letter-spacing: 1px;
-    text-transform: uppercase;
     border-bottom: 1px solid #e9ecef;
 }
 
@@ -2484,7 +2640,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 +2967,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 +2983,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 +3019,6 @@ select[multiple="multiple"] {
     padding: .7rem;
     padding-left: 0;
     width: 23rem;
-    float: left;
     text-align: right;
     display: table-cell;
 }
@@ -3097,21 +3264,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 +3310,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 +3447,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 +3730,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 +3884,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-argonne/htdocs/luci-static/argonne/less/dark.less
index fba9a56da..b8397c15d 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less
@@ -3,10 +3,9 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material 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
+ *      https://github.com/jerrykuku/luci-theme-argonne/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -272,6 +271,7 @@ table>thead>tr>td {
 
         div {
             background-color: #32325d !important;
+            background-color: var(--dark-primary) !important;
         }
     }
 
@@ -287,7 +287,7 @@ table>thead>tr>th {
 }
 
 .cbi-rowstyle-2 {
-    background-color: #1e1e1e;
+    background-color: #2c2c2c !important;
 }
 
 .cbi-rowstyle-1 {
@@ -306,7 +306,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 +331,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 +535,7 @@ select {
 }
 
 .ifacebox {
-    background-color: none;
+    background-color: #1e1e1e;
     border: 1px solid #1e1e1e;
 }
 
@@ -484,6 +555,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 +636,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 +708,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-argonne/luasrc/view/themes/argonne/footer.htm
index b735534f6..a5c4d9dbe 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm
@@ -1,8 +1,7 @@
 <%#
-	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
+	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argonne Template
 
 	luci-theme-argonne
-	Copyright 2019 Jerrykuku <jerrykuku@qq.com>
 
 	Have a bug? Please create an issue here on GitHub!
 	https://github.com/kenzok78/luci-theme-argonne/issues
@@ -18,7 +17,7 @@
 	luci-theme-material:
 	https://github.com/LuttyYang/luci-theme-material/
 
-	Agron Theme
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Login background
@@ -58,31 +57,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-argonne.js<%# ?v=PKG_VERSION %>"></script>
 </body>
-
 </html>
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/header.htm b/luci-theme-argonne/luasrc/view/themes/argonne/header.htm
index 53b772741..7cf1eec11 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/header.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/header.htm
@@ -2,7 +2,6 @@
 	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
@@ -15,7 +14,7 @@
 	MUI:
 	https://github.com/muicss/mui
 	
-	Agron Theme
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Licensed to the public under the Apache License 2.0
@@ -44,7 +43,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 +107,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 +131,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)))
@@ -240,11 +232,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) {
@@ -273,11 +265,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 +318,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-argonne.js<%# ?v=PKG_VERSION %>"></script>
+
+	<script src="<%=media%>/js/sidebar-argonne.js<%# ?v=PKG_VERSION %>"></script>
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm b/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
index 3e6b0a882..07b5a0edb 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
@@ -2,10 +2,9 @@
 	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
+	https://github.com/jerrykuku/luci-theme-argonne/issues
 
 	luci-theme-bootstrap:
 	Copyright 2008 Steven Barth <steven@midlink.org>
@@ -15,7 +14,7 @@
 	MUI:
 	https://github.com/muicss/mui
 	
-	Agron Theme
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Licensed to the public under the Apache License 2.0
@@ -66,69 +65,70 @@
 		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 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/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=3.5.1"></script>
 
-	<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%>  ">
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm b/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
index 5a54a75b1..062d17fa9 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
@@ -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.
 -%>
 
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm b/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
index 27f3e73b3..af48fdb9e 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
@@ -2,10 +2,9 @@
 	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
 
 	luci-theme-argonne
-	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-argonne/issues
 
 	luci-theme-bootstrap:
 	Copyright 2008 Steven Barth <steven@midlink.org>
@@ -14,8 +13,8 @@
 
 	MUI:
 	https://github.com/muicss/mui
-	
-	Agron Theme
+
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Licensed to the public under the Apache License 2.0
@@ -23,16 +22,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 +40,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/argonne") then
+			local online_wallpaper = uci:get_first('argonne', 'global', 'online_wallpaper') or (uci:get_first('argonne', 'global', 'bing_background') == '1' and 'bing')
+			if (online_wallpaper and online_wallpaper ~= "none") then
+				local picurl = sys.exec("/usr/libexec/argonne/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 +127,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/argonne.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 +153,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)
diff --git a/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne b/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
index 912c3aae5..093f61612 100644
--- a/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
+++ b/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
@@ -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/argonnene/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonnene/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.Argonne=/luci-static/argonnene
+	set luci.main.mediaurlbase=/luci-static/argonnene
 	commit luci
 EOF
 exit 0
\ No newline at end of file
diff --git a/luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper b/luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper
new file mode 100755
index 000000000..241c31d0b
--- /dev/null
+++ b/luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper
@@ -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