diff --git a/luci-theme-design/LICENSE b/luci-theme-design/LICENSE
new file mode 100644
index 00000000..261eeb9e
--- /dev/null
+++ b/luci-theme-design/LICENSE
@@ -0,0 +1,201 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
diff --git a/luci-theme-design/Makefile b/luci-theme-design/Makefile
new file mode 100644
index 00000000..87dba76a
--- /dev/null
+++ b/luci-theme-design/Makefile
@@ -0,0 +1,14 @@
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=Design Theme
+LUCI_DEPENDS:=
+PKG_VERSION:=5.8.0-20240106
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature
diff --git a/luci-theme-design/README.md b/luci-theme-design/README.md
new file mode 100644
index 00000000..966fefbb
--- /dev/null
+++ b/luci-theme-design/README.md
@@ -0,0 +1,107 @@
+
+
+
+ 简体中文 | [English](README_en.md)
+
+# luci-theme-design
+
+ luci-theme-design 是一个针对移动端和PC端的沉浸式WebApp体验和优化的OpenWrt LuCI主题
+- **luci-theme-design**基于luci-theme-neobird二次开发, 适用于[lede](https://github.com/coolsnowwolf/lede)
+- main支持lede源码的lua版本
+- js分支开始由[papagaye744](https://github.com/papagaye744)维护
+
+- 你可以使用[插件](https://github.com/gngpp/luci-app-design-config)定义一些设置
+ - 支持更改主题深色/浅色模式
+ - 支持显示/隐藏导航栏
+ - 支持更换常用的代理图标
+
+- 感谢 [JetBrains](https://www.jetbrains.com/) 提供的非商业开源软件开发授权!
+
+
+### 主要特点
+
+- 适配移动端响应式优化,适合手机端做为WebApp使用
+- 修改和优化了很多插件显示,完善的设备icon图标,视觉统一
+- 简洁的登录界面,底部导航栏,类App的沉浸式体验
+- 适配深色模式,适配系统自动切换,插件式自定义模式
+- 支持插件式配置主题
+- 流畅度比肩bootstrap
+
+### 体验WebApp方法
+
+- 在移动端(iOS/iPadOS、Android谷歌)浏览器打开设置管理,添加到主屏幕即可。
+
+### 优化
+
+- 修复安装package提示信息背景泛白
+- 优化菜单折叠和缩放
+- 优化显示网口down状态显示图标
+- 优化logo显示
+- 新增各设备状态图标显示
+- 更换logo显示为字体"OpenWrt",支持以主机名显示logo
+- 修复部分插件显示bug
+- 修复vssr状态bar
+- 修复诸多bug
+- 修复兼容部分插件样式
+- 修复aliyundrive-webdav样式
+- 修复vssr在iOS/iPadOS WebApp模式下显示异常
+- 修复openclash插件在iOS/iPadOS WebApp 模式下env(safe-area-inset-bottom) = 0
+- 优化菜单hover action状态分辨
+- 支持luci-app-wizard向导菜单
+- Update header box-shadow style
+- Update uci-change overflow
+- Fix nlbw component
+- 支持QWRT(QSDK)、iStore向导导航
+- 适配OpenWrt 21/22
+...
+
+### 编译
+
+```
+git clone https://github.com/kenzok78/luci-theme-design.git package/luci-theme-design
+make menuconfig # choose LUCI->Theme->Luci-theme-design
+make V=s
+```
+
+### Q&A
+
+- 有bug欢迎提issue
+- 主题个人配色可能会不符合大众胃口,欢迎提配色建议
+
+### 预览
+
+ iOS
+
+
+
+
+ iPadOS
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/luci-theme-design/README_en.md b/luci-theme-design/README_en.md
new file mode 100644
index 00000000..54edc2ea
--- /dev/null
+++ b/luci-theme-design/README_en.md
@@ -0,0 +1,98 @@
+
+
+
+ English | [简体中文](README.md)
+
+# luci-theme-design
+
+### luci-theme-design is an OpenWrt LuCI theme for immersive WebApp experience and optimization on mobile and PC
+- **luci-theme-design** based on luci-theme-neobird, for [lede](https://github.com/coolsnowwolf/lede) / [OpenWrt](https://github.com/openwrt/ openwrt)
+- The default branch only supports the lua version of the lede source code. If you use openwrt 21/22, please pull the [js](https://github.com/gngpp/luci-theme-design/tree/js) version (development stage).
+
+- You can define some settings using [plugin](https://github.com/gngpp/luci-app-design-config)
+ - Support changing theme dark/light mode
+ - Support show/hide navigation bar
+ - Support replacing commonly used proxy icons
+
+### If you find it useful, please click a star, your support is the driving force for my long-term updates, thank you.
+
+- Thanks for non-commercial open source development authorization by [JetBrains](https://www.jetbrains.com/)!
+
+
+### Release version
+
+- Lua version select 5.x version
+- JS version select 6.x version
+
+### Features
+
+- Adapt to the responsive optimization of the mobile terminal, suitable for use as a WebApp on the mobile terminal
+- Modified and optimized the display of many plug-ins, improved icon icons, and unified visuals as much as possible
+- Simple login interface, bottom navigation bar, immersive app-like experience
+- Adapt to dark mode, adapt to system automatic switching, support custom mode
+- Adapt to openwrt 21/22, lede
+
+### Experience WebApp method
+
+- Open the settings management in the mobile browser (iOS/iPadOS, Android Google) and add it to the home screen.
+- If the SSL certificate is not used, iOS/iPadOS will display the menu bar at the top of the browser after opening a new page for security reasons.
+
+### Optimization
+
+- Optimize menu collapsing and zooming
+- Optimized to display network port down state display icon
+- Support QWRT (QSDK), iStore wizard navigation
+- Adapt to OpenWrt 21/22
+- Adapt to linkease series icons
+
+### Compile
+
+```
+git clone https://github.com/gngpp/luci-theme-design.git package/luci-theme-design
+make menuconfig # choose LUCI->Theme->Luci-theme-design
+make V=s
+```
+
+### Q&A
+
+- The resource interface icon is not perfect. If you have the ability to draw a picture, you are welcome to pr, but please make sure it is consistent with the existing icon color style
+- If there is a bug, please raise an issue
+- The theme's personal color matching may not meet the public's appetite, welcome to provide color matching suggestions
+
+### Preview
+
+ iOS
+
+
+
+
+ iPadOS
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/luci-theme-design/dev/design.js b/luci-theme-design/dev/design.js
new file mode 100644
index 00000000..044b4d78
--- /dev/null
+++ b/luci-theme-design/dev/design.js
@@ -0,0 +1,266 @@
+/*
+ * xhr.js - XMLHttpRequest helper class
+ * (c) 2008-2010 Jo-Philipp Wich
+ */
+
+XHR = function()
+{
+ this.reinit = function()
+ {
+ if (window.XMLHttpRequest) {
+ this._xmlHttp = new XMLHttpRequest();
+ }
+ else if (window.ActiveXObject) {
+ this._xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
+ }
+ else {
+ alert("xhr.js: XMLHttpRequest is not supported by this browser!");
+ }
+ }
+
+ this.busy = function() {
+ if (!this._xmlHttp)
+ return false;
+
+ switch (this._xmlHttp.readyState)
+ {
+ case 1:
+ case 2:
+ case 3:
+ return true;
+
+ default:
+ return false;
+ }
+ }
+
+ this.abort = function() {
+ if (this.busy())
+ this._xmlHttp.abort();
+ }
+
+ this.get = function(url,data,callback)
+ {
+ this.reinit();
+
+ var xhr = this._xmlHttp;
+ var code = this._encode(data);
+
+ url = location.protocol + '//' + location.host + url;
+
+ if (code)
+ if (url.substr(url.length-1,1) == '&')
+ url += code;
+ else
+ url += '?' + code;
+
+ xhr.open('GET', url, true);
+
+ xhr.onreadystatechange = function()
+ {
+ if (xhr.readyState == 4) {
+ var json = null;
+ if (xhr.getResponseHeader("Content-Type") == "application/json") {
+ try {
+ json = eval('(' + xhr.responseText + ')');
+ }
+ catch(e) {
+ json = null;
+ }
+ }
+
+ callback(xhr, json);
+ }
+ }
+
+ xhr.send(null);
+ }
+
+ this.post = function(url,data,callback)
+ {
+ this.reinit();
+
+ var xhr = this._xmlHttp;
+ var code = this._encode(data);
+
+ xhr.onreadystatechange = function()
+ {
+ if (xhr.readyState == 4)
+ callback(xhr);
+ }
+
+ xhr.open('POST', url, true);
+ xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+ xhr.send(code);
+ }
+
+ this.cancel = function()
+ {
+ this._xmlHttp.onreadystatechange = function(){};
+ this._xmlHttp.abort();
+ }
+
+ this.send_form = function(form,callback,extra_values)
+ {
+ var code = '';
+
+ for (var i = 0; i < form.elements.length; i++)
+ {
+ var e = form.elements[i];
+
+ if (e.options)
+ {
+ code += (code ? '&' : '') +
+ form.elements[i].name + '=' + encodeURIComponent(
+ e.options[e.selectedIndex].value
+ );
+ }
+ else if (e.length)
+ {
+ for (var j = 0; j < e.length; j++)
+ if (e[j].name) {
+ code += (code ? '&' : '') +
+ e[j].name + '=' + encodeURIComponent(e[j].value);
+ }
+ }
+ else
+ {
+ code += (code ? '&' : '') +
+ e.name + '=' + encodeURIComponent(e.value);
+ }
+ }
+
+ if (typeof extra_values == 'object')
+ for (var key in extra_values)
+ code += (code ? '&' : '') +
+ key + '=' + encodeURIComponent(extra_values[key]);
+
+ return(
+ (form.method == 'get')
+ ? this.get(form.getAttribute('action'), code, callback)
+ : this.post(form.getAttribute('action'), code, callback)
+ );
+ }
+
+ this._encode = function(obj)
+ {
+ obj = obj ? obj : { };
+ obj['_'] = Math.random();
+
+ if (typeof obj == 'object')
+ {
+ var code = '';
+ var self = this;
+
+ for (var k in obj)
+ code += (code ? '&' : '') +
+ k + '=' + encodeURIComponent(obj[k]);
+
+ return code;
+ }
+
+ return obj;
+ }
+}
+
+XHR.get = function(url, data, callback)
+{
+ (new XHR()).get(url, data, callback);
+}
+
+XHR.poll = function(interval, url, data, callback)
+{
+ if (isNaN(interval) || interval < 1)
+ interval = 5;
+
+ if (!XHR._q)
+ {
+ XHR._t = 0;
+ XHR._q = [ ];
+ XHR._r = function() {
+ for (var i = 0, e = XHR._q[0]; i < XHR._q.length; e = XHR._q[++i])
+ {
+ if (!(XHR._t % e.interval) && !e.xhr.busy())
+ e.xhr.get(e.url, e.data, e.callback);
+ }
+
+ XHR._t++;
+ };
+ }
+
+ XHR._q.push({
+ interval: interval,
+ callback: callback,
+ url: url,
+ data: data,
+ xhr: new XHR()
+ });
+
+ XHR.run();
+}
+
+XHR.halt = function()
+{
+ if (XHR._i)
+ {
+ /* show & set poll indicator */
+ try {
+ document.getElementById('xhr_poll_status').style.display = '';
+ document.getElementById('xhr_poll_status_on').style.display = 'none';
+ document.getElementById('xhr_poll_status_off').style.display = '';
+ document.getElementById('notice_status').style.marginRight = '30px'
+ } catch(e) { }
+
+ window.clearInterval(XHR._i);
+ XHR._i = null;
+ }
+}
+
+XHR.run = function()
+{
+ if (XHR._r && !XHR._i)
+ {
+ /* show & set poll indicator */
+ try {
+ document.getElementById('xhr_poll_status').style.display = '';
+ document.getElementById('xhr_poll_status_on').style.display = '';
+ document.getElementById('xhr_poll_status_off').style.display = 'none';
+ document.getElementById('notice_status').style.marginRight = '30px'
+ } catch(e) { }
+
+ /* kick first round manually to prevent one second lag when setting up
+ * the poll interval */
+ XHR._r();
+ XHR._i = window.setInterval(XHR._r, 1000);
+ }
+}
+
+XHR.running = function()
+{
+ return !!(XHR._r && XHR._i);
+}
+
+;(function ($) {
+ // Fixed status realtime table overflow style
+ function settingsStatusRealtimeOverflow() {
+ if (self.location.pathname.includes("status/realtime")) {
+ const nodeStatusRealtime = $('.node-status-realtime');
+ const selectorValues = ['bandwidth', 'wifirate', 'wireless'];
+ // .node-status-realtime embed[src="/luci-static/resources/bandwidth.svg"] + div + br + table
+ // .node-status-realtime embed[src="/luci-static/resources/wifirate.svg"] + div + br + table
+ // .node-status-realtime embed[src="/luci-static/resources/wireless.svg"] + div + br + table
+ for (let i = 0; i < selectorValues.length; i++) {
+ const value = selectorValues[i];
+ const target = nodeStatusRealtime.find(`embed[src="/luci-static/resources/${value}.svg"] + div + br + table`);
+ if (target.length) {
+ target.wrap('
');
+ }
+ }
+ }
+ }
+
+ $(document).ready(() => {
+ settingsStatusRealtimeOverflow();
+ });
+
+})(jQuery);
diff --git a/luci-theme-design/dev/script.js b/luci-theme-design/dev/script.js
new file mode 100644
index 00000000..6fd5052f
--- /dev/null
+++ b/luci-theme-design/dev/script.js
@@ -0,0 +1,247 @@
+/**
+ * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+ *
+ * luci-theme-argon
+ * Copyright 2023 gngpp
+ *
+ * Have a bug? Please create an issue here on GitHub!
+ * https://github.com/LuttyYang/luci-theme-material/issues
+ *
+ * luci-theme-bootstrap:
+ * Copyright 2008 Steven Barth
+ * Copyright 2008 Jo-Philipp Wich
+ * Copyright 2012 David Menting
+ *
+ * MUI:
+ * https://github.com/muicss/mui
+ *
+ * luci-theme-material:
+ * https://github.com/LuttyYang/luci-theme-material/
+ *
+ *
+ * Licensed to the public under the Apache License 2.0
+ */
+(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;
+
+ var nodeUrl = "";
+ (function (node) {
+ if (node[0] == "admin") {
+ luciLocation = [node[1], node[2]];
+ } else {
+ luciLocation = node;
+ }
+
+ for (var i in luciLocation) {
+ nodeUrl += luciLocation[i];
+ if (i != luciLocation.length - 1) {
+ nodeUrl += "/";
+ }
+ }
+ })(luciLocation);
+
+ /**
+ * get the current node by Burl (primary)
+ * @returns {boolean} success?
+ */
+ function getCurrentNodeByUrl() {
+ if (!$('body').hasClass('logged-in')) {
+ luciLocation = ["Main", "Login"];
+ return true;
+ }
+ const urlReg = new RegExp(nodeUrl + "$")
+ var ret = false;
+ $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+ $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
+ $(".main > .main-left > .nav > .slide > .menu").each(function () {
+ var ulNode = $(this);
+
+ ulNode.next().find("a").each(function () {
+ var that = $(this);
+ var href = that.attr("href");
+
+ if (urlReg.test(href)) {
+ ulNode.click();
+ ulNode.next(".slide-menu").stop(true, true);
+ lastNode = that.parent();
+ lastNode.addClass("active");
+ ret = true;
+ return true;
+ }
+ });
+ });
+ return ret;
+ }
+
+ /**
+ * menu click
+ */
+ $(".main > .main-left > .nav > .slide > .menu").click(function () {
+ var ul = $(this).next(".slide-menu");
+ var menu = $(this);
+ if (!menu.hasClass("exit")) {
+ $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+ $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
+ if (!ul.is(":visible")) {
+ menu.addClass("active");
+ ul.addClass("active");
+ ul.stop(true).slideDown("fast");
+ } else {
+ ul.stop(true).slideUp("fast", function () {
+ menu.removeClass("active");
+ ul.removeClass("active");
+ });
+ }
+
+ return false;
+ }
+ });
+
+ /**
+ * hook menu click and add the hash
+ */
+ $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
+ if (lastNode != undefined)
+ lastNode.removeClass("active");
+ $(this).parent().addClass("active");
+ $(".main > .loading").fadeIn("fast");
+ return true;
+ });
+
+ /**
+ * fix menu click
+ */
+ $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
+ if (lastNode != undefined)
+ lastNode.removeClass("active");
+ $(this).addClass("active");
+ $(".main > .loading").fadeIn("fast");
+ window.location = $($(this).find("a")[0]).attr("href");
+ return false;
+ });
+
+ /**
+ * get current node and open it
+ */
+ if (getCurrentNodeByUrl()) {
+ mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
+ mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
+ $("body").addClass(mainNodeName);
+ }
+
+ /**
+ * hook other "A Label" and add hash to it.
+ */
+ $("#maincontent > .container").find("a").each(function () {
+ var that = $(this);
+ var onclick = that.attr("onclick");
+ if (onclick == undefined || onclick == "") {
+ that.click(function () {
+ var href = that.attr("href");
+ if (href.indexOf("#") == -1) {
+ $(".main > .loading").fadeIn("fast");
+ return true;
+ }
+ });
+ }
+ });
+
+ /**
+ * Sidebar expand
+ */
+ var showSide = false;
+
+ $(".showSide").click(function () {
+ if (showSide) {
+ $(".darkMask").stop(true).fadeOut("fast");
+ $(".main-left").stop(true).animate({
+ width: "0"
+ }, "fast");
+ $(".main-right").css("overflow-y", "auto");
+ $("header>.container>.brand").css("padding", "0 4.5rem")
+ showSide = false;
+ } else {
+ $(".darkMask").stop(true).fadeIn("fast");
+ $(".main-left").stop(true).animate({
+ width: "18rem"
+ }, "fast");
+ $(".main-right").css("overflow-y", "hidden");
+ $(".showSide").css("display", "none");
+ $("header").css("box-shadow", "18rem 2px 4px rgb(0 0 0 / 8%)")
+ $("header>.container>.brand").css("padding", '0rem')
+ showSide = true;
+ }
+ });
+
+ $(".darkMask").click(function () {
+ if (showSide) {
+ $(".darkMask").stop(true).fadeOut("fast");
+ $(".main-left").stop(true).animate({
+ width: "0"
+ }, "fast");
+ $(".main-right").css("overflow-y", "auto");
+ $(".showSide").css("display", "");
+ $("header").css("box-shadow", "0 2px 4px rgb(0 0 0 / 8%)")
+ $("header>.container>.brand").css("padding", "0 4.5rem")
+ showSide = false;
+ }
+ });
+
+ $(window).resize(function () {
+ if ($(window).width() > 992) {
+ showSide = false;
+ $(".showSide").css("display", "");
+ $(".main-left").css("width", "");
+ $(".darkMask").stop(true);
+ $(".darkMask").css("display", "none");
+ $("header").css("box-shadow", "18rem 2px 4px rgb(0 0 0 / 8%)")
+ $("header>.container>.brand").css("padding", '0rem')
+ } else {
+ $("header").css("box-shadow", "0 2px 4px rgb(0 0 0 / 8%)")
+ $("header>.container>.brand").css("padding", "0 4.5rem")
+ }
+ if (showSide) {
+ $("header").css("box-shadow", "18rem 2px 4px rgb(0 0 0 / 8%)")
+ $("header>.container>.brand").css("padding", '0rem')
+ }
+ });
+
+ $(".main-right").focus();
+ $(".main-right").blur();
+ $("input").attr("size", "0");
+
+ if (mainNodeName != undefined) {
+ switch (mainNodeName) {
+ case "node-status-system_log":
+ case "node-status-kernel_log":
+ $("#syslog").focus(function () {
+ $("#syslog").blur();
+ $(".main-right").focus();
+ $(".main-right").blur();
+ });
+ break;
+ case "node-status-firewall":
+ var button = $(".node-status-firewall > .main fieldset li > a");
+ button.addClass("cbi-button cbi-button-reset a-to-btn");
+ break;
+ case "node-system-reboot":
+ var button = $(".node-system-reboot > .main > .main-right p > a");
+ button.addClass("cbi-button cbi-input-reset a-to-btn");
+ break;
+ }
+ }
+
+})(jQuery);
diff --git a/luci-theme-design/dev/style.css b/luci-theme-design/dev/style.css
new file mode 100644
index 00000000..c77147dd
--- /dev/null
+++ b/luci-theme-design/dev/style.css
@@ -0,0 +1,3522 @@
+/**
+ * Design is a clean HTML5 theme for LuCI. It is based on luci-theme-material and luci-theme-neobird
+ *
+ * luci-theme-material
+ * Copyright 2015 Lutty Yang
+ *
+ * luci-theme-Neobird
+ * Copyright 2021 2smile
+ *
+ * Licensed to the public under the Apache License 2.0
+ */
+ :root {
+ --commonRadius0: 8px;
+ --commonRadius1: 5px
+ }
+
+ [data-theme='light'] {
+ --bg: #f1f4f5;
+ --mainbg: #fff;
+ --bgwhite: #fff;
+ --activeColor: #5ea69b;
+ --activeBottom: #5ea69b 2px solid;
+ --textColor: rgb(132,119,116);
+ --borderColor: rgba(0,0,0,.15);
+ --navbgColor: rgba(255, 255, 255, .7);
+ --navBorder: 1px solid #f2f2f2;
+ --sectionbgColor: #fff;
+ --sectionbgColor2: #fff;
+ --sectionShaddow: 3px 3px 3px rgba(0,0,0,.05);
+ --sectionBorder: none;
+ --sectiontabBorder: none;
+ --tabmenuBorderLR: none;
+ --tabmenubgColor: none;
+ --tabmenuBottom: #e4eaec 1px solid;
+ --tabmenuRadius: 6px 6px 0 0;
+ --sectionnodeBorder: #f7f7f7 1px solid;
+ --cbilineColor: #f7f7f7 1px solid;
+ --tabbgColor: #fff;
+ --inputbgColor: #f8f8f8;
+ --inputtextColor: #76838f;
+ --inputBorder: 1px solid #e4eaec;
+ --mainleftbgColor: rgb(255,255,255);
+ --bttextColor: #fff;
+ --badgebgColor: #f7f7f7;
+ --badgeBorder: #e4eaec 1px solid;
+ --progressbarColor: #c8c8c8;
+ --progressbar: #5ea69b;
+ --progressbartxtColor: #fff;
+ /* --logo: url('/luci-static/design/images/logo.png');
+ --mlogo: url('/luci-static/design/images/mlogo.png'); */
+ --logo_color: #222b36;
+ --alertColor: #000000;
+ --alertBackground: rgb(230 230 230);
+ --scrollbarColor:#c5c5c5;
+ --ifaceboxBorderColor: #b8b8b8bd;
+ --ifaceboxFontColor: #404040;
+ --liSelectedColor: #c5c5c5;
+ --vssrStatusColor: #525f7f;
+ --vssrBoxShadow: 0 0 2rem 0 rgb(136 152 170 / 30%);
+}
+
+[data-theme='dark'] {
+ --bg: #000;
+ --bgwhite: #000;
+ --textColor: #fefefe;
+ --activeColor: #5ea69b;
+ --activeBottom: #5ea69b 2px solid;
+ --borderColor: #2C2C3A;
+ --navbgColor: hsla(0, 0%, 7%, .8);
+ --navBorder: 1px solid #1c1c1e;
+ --sectionbgColor: #1c1c1e;
+ --sectionbgColor2: #1c1c1e;
+ --sectionShaddow: 3px 3px 3px rgba(0,0,0,.05);
+ --sectionBorder: none;
+ --sectiontabBorder: none;
+ --sectionnodeBorder: #3d3d41 1px solid;
+ --cbilineColor: #2d2d2d 1px solid;
+ --tabbgColor: #1c1c1e;
+ --tabmenuBorderLR: none;
+ --tabmenubgColor: none;
+ --tabmenuBottom: #2d2d2d 1px solid;
+ --tabmenuRadius: 6px 6px 0 0;
+ --inputbgColor: #2f2f2f;
+ --inputtextColor: #fefefe;
+ --inputBorder: 1px solid #4d4d4d;
+ --mainleftbgColor: #000;
+ --bttextColor: #fefefe;
+ --badgebgColor: #fefefe;
+ --badgeBorder: #3d3d40 1px solid;
+ --progressbarColor: #6d6d6d;
+ --progressbar: #5ea69b;
+ --progressbartxtColor: #fefefe;
+ /* --logo: url('/luci-static/design/images/logod.png');
+ --mlogo: url('/luci-static/design/images/mlogod.png'); */
+ --logo_color: #fefefe;
+ --alertColor: #ffffff;
+ --alertBackground: rgb(30 30 30);
+ --scrollbarColor:#2f2f2f;
+ --ifaceboxBorderColor: #636363bd;
+ --ifaceboxFontColor: #404040;
+ --liSelectedColor: #2f2f2f;
+ --vssrStatusColor: rgb(204, 204, 204);
+ --vssrBoxShadow: 0 0 1rem 0 rgb(0 0 0 / 30%);
+}
+
+@font-face {
+ font-family: 'icomoon';
+ src: url('../fonts/font.eot');
+ src: url('../fonts/font.eot') format('embedded-opentype'),
+ url('../fonts/font.ttf') format('truetype'),
+ url('../fonts/font.woff') format('woff'),
+ url('../fonts/font.svg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'design';
+ src: url('');
+ src: url('?#iefix') format('embedded-opentype'),
+ url('../fonts/iconfont-Regular.woff2') format('woff2'),
+ url('../fonts/iconfont-Regular.woff') format('woff'),
+ url('../fonts/iconfont-Regular.ttf') format('truetype'),
+ url('#iconfont') format('svg');
+}
+
+@font-face{
+ font-family: 'GenJyuuGothic-Medium';
+ src : url('../fonts/GenJyuuGothic-Medium.otf') format('opentype');
+}
+
+*::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+ }
+ *::-webkit-scrollbar-thumb {
+ background: var(--scrollbarColor) ;
+ border-radius: 2px;
+ }
+
+div{
+ font-family: 'HYk2gj';
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+html, body {
+ margin: 0px;
+ padding: 0px;
+ height: 100%;
+ font-family: -apple-system, 'Microsoft Yahei' !important;
+ font-size: 0.92rem;
+ line-height: 150%;
+ background-color: var(--bg);
+ color:var(--textColor);
+}
+
+body div {
+ line-height:150%;
+}
+
+a {
+ color: var(--textColor);
+ text-decoration: none;
+}
+
+em {
+ font-style:normal !important;
+ line-height: 1.5;
+ padding-left: 10px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: transparent;
+}
+
+select {
+ overflow: hidden !important;
+ width: 100%;
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ padding: 0 25px 0 10px !important;
+ background-size: 24px 16px;
+ background-repeat: no-repeat;
+ background-position: right center;
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGCAYAAAA6hjFpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhDNzA0QUE0NjE2QTExRUNCMjJFQkQyRkIyNURDNjE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhDNzA0QUEzNjE2QTExRUNCMjJFQkQyRkIyNURDNjE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNBNTYzNTY2MTUxMTFFQ0IyMkVCRDJGQjI1REM2MTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNBNTYzNTc2MTUxMTFFQ0IyMkVCRDJGQjI1REM2MTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6YjzxlAAACsklEQVR42uyaXUsVURSG51T0U/obfUvhhYF0U0HQhZQVIWVJCAkiSUXfRRcaBFbXQVBBRCASFCJBpQQipw+RREkpCa9aG95gs0DMOp6Z7TwvvAxnzczaa6/nzDnzVTndfSVDxdE6WgAQBBCAIIAABAEEIAggAEEAQQABCAIIQBBAAIIAAhAEEAQQgCCAAAStGSAbzA/N+wvSiwPmB6or16bkoY2afLN5r+q4l2MfDpr7zetV2z7zYpmOkAHByNSE0IxDOdUSxr2rOjLVNVC2n6z77hsYmtFnbqlzHS0aN+7DouorFZBH+ibGUCrmO+YjdaqhVeNVHIxm1Ve6P/XH5ibzLwfllvn4Ko8d8t90MEIde1RXaU97n6oJCw7KNXPbKo3ZpvwxjAXV8YTrkCx7piPFQ7lsbq/xWO3K62E0qQ4uDKXn5kbzTxe/YO6o0Rgdypc5GI0anyt1p5fm3eYfLn7e3PmfuTuVJ1YYZ5fG5Up9CQ2qSfMu3m3u+secXdo/1rzGGeTWyfIaUrPmXPycuWeFuXq0X6w55R8q4NwLe3PxlXmn+buLnzX3/mWOXm0fK+RrUP4MICvTG/MO86yLnzFfWmbfi9ou1qzyvS7wnAt/+31YTZxx8ZPmq+709c/pcoifcvEZ5Rku+HyTeB4yYt5unnbxE+YbEZSwvK54rGntP5LAXJN5QPXWvNX8zcWPmm9rHmF5zK0P22/T/hlAaqv35i3mKRc/bB7VMtaUIL5LaI7JPcIdVZMnXXyT+zyp7T4kNr8kn6mPqdlfllj/VevHEpxbsi85fNTP1ycX/2zerPUZQOqrcUGp6nNVMMYTnlPyrwFNCMILLScSn0++r7zUSFVdZ6wJ8aIcQBBAAIIAAhAEEIAggAAEAQQBBCAIIABBAAEIAghAEEAQQJLQbwEGAK/reX2gh5gQAAAAAElFTkSuQmCC');
+}
+
+select,
+input {
+ color: var(--inputtextColor);
+ padding: 5px 10px;
+ font-size: 0.92rem;
+ font-family: -apple-system, 'Microsoft Yahei', sans-serif, Helvetica, Arial, sans-serif;
+ border: var(--inputBorder);
+ background-color: var(--inputbgColor);
+ transition: color 100ms ease, border-color 100ms ease, opacity 100ms ease;
+ -webkit-transition: color 100ms ease, border-color 100ms ease, opacity 100ms ease;
+ outline-style: none;
+ vertical-align: middle;
+ border-radius: var(--commonRadius0);
+ margin: 3px 3px 3px 0;
+ height: 2.8rem;
+ line-height: 2.8rem;
+ max-width: 550px;
+}
+
+select:not([multiple="multiple"]):focus,
+input:focus {
+ border-color: #948FE1;
+ box-shadow:0 0 6px #948FE1;
+ -webkit-box-shadow:0 0 6px #948FE1;
+ -moz-box-shadow:0 0 6px #948FE1;
+}
+
+input[type='file'] {
+ border: none;
+ background: none;
+ height: auto;
+ line-height: 1rem;
+}
+
+input[type='checkbox'] {
+ height: 1.2rem;
+ width: 1.2rem;
+}
+input[type='radio'] {
+ height: 1.2rem;
+ width: 1.2rem;
+ box-shadow: var(--bg);
+}
+
+select[multiple="multiple"] {
+ height: auto;
+}
+
+.node-docker-images input[type='text'] {
+ width: auto !important;
+}
+
+input[type='text'],input[type='password'] {
+ width: 100%;
+}
+
+code {
+ color: #0099CC;
+}
+
+/* img[src*="/images/logo.png"]
+ {
+ height: 60px;
+ background-image: var(--logo);
+ background-size: 220px;
+ background-repeat: no-repeat;
+ padding: 0 0 0 250px;
+ width: 0;
+ background-position-x: 10px;
+ background-position-y: 10px;
+ background-color: var(--mainleftbgColor);
+} */
+
+abbr {
+ text-decoration: underline;
+ cursor: help;
+}
+
+br {
+ display: block;
+ margin-bottom: 0.2px;
+ content: '';
+}
+
+hr{
+ margin: 1rem 0;
+ border-color: #EEE;
+ opacity: 0.1;
+}
+
+/* .cbi-section-table-cell br, #cbi-system br, #cbi-dropbear br, .node-status-routes br {
+ display: none;
+} */
+
+header, .main {
+ width: 100%;
+ position: absolute;
+}
+
+header {
+ background-color: var(--bgwhite);
+ box-shadow: 18rem 2px 4px rgba(0, 0, 0, 0.08);
+ transition: box-shadow 0.1s;
+ height: 55px;
+ float: left;
+ position: fixed;
+ z-index: 101;
+}
+
+footer {
+ text-align: right;
+ padding: 1rem;
+ color: #aaa;
+ font-size: 11px;
+ height: 80px;
+ visibility:hidden;
+ /*text-shadow: 0px 0px 2px #BBB;*/
+}
+
+footer > a {
+ color: rgb(154,37,143);
+ text-decoration: none;
+}
+
+text, line {
+ font-family: Verdana !important;
+}
+
+.cbi-button-up,
+.cbi-button-down,
+.cbi-value-helpicon,
+.showSide,
+.main > .loading > span {
+ font-family: 'icomoon' !important;
+ font-size:10px;
+ speak: none;
+ font-style: normal !important;
+ font-weight: normal !important;
+ font-variant: normal !important;
+ text-transform: none !important;
+ line-height: 1;
+
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* fix luci-app-passwall2 button style */
+.node-services-passwall2 #cbi-passwall2 {
+ text-align: center;
+}
+.node-services-passwall2 input.cbi-button.cbi-button {
+ max-width: unset;
+}
+/* fix luci-app-passwall/luci-app-passwall2 node_div style */
+.node-services-passwall #set_node_div,
+.node-services-passwall2 #set_node_div,
+.node-services-passwall #add_link_div,
+.node-services-passwall2 #add_link_div {
+ background: var(--sectionbgColor);
+ border-radius: var(--commonRadius0);
+}
+.node-services-passwall #add_link_div #nodes_link,
+.node-services-passwall2 #add_link_div #nodes_link {
+ width: 100% !important;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+ font-family: -apple-system, 'Microsoft Yahei';
+ font-weight: 600;
+ line-height: 1.1;
+ color: inherit;
+ clear:both;
+ text-transform: capitalize;
+}
+
+label.zonebadge.zonebadge-empty {
+ background-color: #03abe8 !important;
+}
+
+label.zonebadge{
+ border-radius: var(--commonRadius1);
+ padding: 2px 5px 2px 5px !important;
+ /* background-color: #5bdeae !important; */
+ display: inline-block;
+ cursor: pointer;
+ color: #666666;
+}
+.zonebadge {
+ /* background-color: var(--tabmenubgColor) !important; */
+ border-radius: 6px;
+ padding: 5px;
+}
+
+.zonebadge em {
+ padding:3px;
+}
+
+svg {
+ background-color: var(--sectionbgColor);
+}
+
+/* fix .cbi-section .cbi-section */
+.cbi-section .cbi-section {
+ margin: 10px;
+}
+
+/* fix node-services-vssr */
+.node-services-vssr .status-bar {
+ bottom:calc(var(--vssrBottom) + constant(safe-area-inset-bottom));
+ bottom:calc(var(--vssrBottom) + env(safe-area-inset-bottom));
+ background-color: var(--navbgColor);
+ box-shadow: var(--vssrBoxShadow) !important;
+ color: var(--vssrStatusColor) !important;
+}
+.node-services-vssr .container {
+ padding-bottom:calc(var(--vssrBottom) + constant(safe-area-inset-bottom));
+ padding-bottom:calc(var(--vssrBottom) + env(safe-area-inset-bottom));
+}
+
+.node-services-vssr .ssr-button {
+ min-width: 30px;
+}
+.node-services-vssr #cbi-vssr .panel-title {
+ padding: 10px 0 10px 10px !important;
+ letter-spacing: 0 !important;
+}
+
+.node-services-vssr .status .block {
+ border-radius: 10px !important;
+ box-shadow: none !important;
+ background-color: var(--sectionbgColor) !important;
+}
+
+.node-services-vssr button {
+ border-radius: 10px !important;
+ }
+
+#cbi-vssr-servers .cbi-section-table-row {
+ position: relative;
+ margin: 10px !important;
+ padding: 8px 15px 8px 70px;
+ box-shadow: none !important;
+ border-radius: 10px !important;
+ border: 0;
+ color: var(--textColor) !important;
+ text-align: left;
+ line-height: 1.7em;
+ overflow: hidden;
+ letter-spacing: normal;
+ background-color: var(--inputbgColor) !important;
+}
+.cbi-section-table-row.fast {
+ background-color: #add8e6 !important;
+}
+.incon .tp {
+ text-transform: uppercase;
+ color: var(--bg) !important;
+}
+
+/* file selector upload button */
+::file-selector-button {
+ transition: all .1s ease-in-out;
+ border-radius: var(--commonRadius1);
+ border: 3px solid #337ab7!important;
+ color: #fff!important;
+ background-color: #337ab7!important;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+::file-selector-button:hover,
+::file-selector-button:focus,
+::file-selector-button:active {
+ color: #fff!important;
+ background-color: #6a65d6!important;
+ border-color: #6a65d6!important
+}
+
+/** img retina **/
+img[src*="/luci-static/resources/icons/port_up.png"] {
+ background-image: url(../images/port_up.png);
+ background-size: 32px 32px;
+ height: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+
+img[src*="/luci-static/resources/icons/port_down.png"] {
+ background-image: url(../images/port_down.png);
+ background-size: 32px 32px;
+ height: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/ethernet.png"],
+#wan6_i img[src*="/luci-static/resources/icons/ethernet.png"],
+img[src*="/luci-static/resources/icons/ethernet.png"] {
+ background-image: url(../images/ethernet.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/ethernet.png"],
+#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/ethernet.png"],
+.ifacebadge img[src*="/luci-static/resources/icons/ethernet.png"],
+li img[src*="/luci-static/resources/icons/ethernet.png"]
+ {
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/ethernet.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/ethernet_disabled.png"],
+#wan6_i img[src*="/luci-static/resources/icons/ethernet_disabled.png"],
+img[src*="/luci-static/resources/icons/ethernet_disabled.png"] {
+ background-image: url(../images/ethernet_disabled.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/ethernet_disabled.png"],
+#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/ethernet_disabled.png"],
+.ifacebadge img[src*="/luci-static/resources/icons/ethernet_disabled.png"],
+li img[src*="/luci-static/resources/icons/ethernet_disabled.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/ethernet_disabled.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/switch.png"],
+#wan6_i img[src*="/luci-static/resources/icons/switch.png"],
+img[src*="/luci-static/resources/icons/switch.png"] {
+ background-image: url(../images/switch.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/switch.png"],
+#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/switch.png"],
+.ifacebadge img[src*="/luci-static/resources/icons/switch.png"],
+li img[src*="/luci-static/resources/icons/switch.png"]
+ {
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/switch.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/switch_disabled.png"],
+#wan6_i img[src*="/luci-static/resources/icons/switch_disabled.png"],
+img[src*="/luci-static/resources/icons/switch_disabled.png"] {
+ background-image: url(../images/switch_disabled.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/switch_disabled.png"],
+#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/switch_disabled.png"],
+.ifacebadge img[src*="/luci-static/resources/icons/switch_disabled.png"],
+li img[src*="/luci-static/resources/icons/switch_disabled.png"]
+ {
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/switch_disabled.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/wifi.png"],
+#wan6_i img[src*="/luci-static/resources/icons/wifi.png"],
+img[src*="/luci-static/resources/icons/wifi.png"] {
+ background-image: url(../images/wifi.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/wifi.png"],
+#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/wifi.png"],
+.ifacebadge img[src*="/luci-static/resources/icons/wifi.png"],
+li img[src*="/luci-static/resources/icons/wifi.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/wifi.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/wifi_disabled.png"],
+#wan6_i img[src*="/luci-static/resources/icons/wifi_disabled.png"],
+img[src*="/luci-static/resources/icons/wifi_disabled.png"] {
+ background-image: url(../images/wifi_disabled.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/wifi_disabled.png"],
+#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/wifi_disabled.png"],
+.ifacebadge img[src*="/luci-static/resources/icons/wifi_disabled.png"],
+li img[src*="/luci-static/resources/icons/wifi_disabled.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/wifi_disabled.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/vlan.png"],
+#wan6_i img[src*="/luci-static/resources/icons/vlan.png"],
+img[src*="/luci-static/resources/icons/vlan.png"] {
+ background-image: url(../images/vlan.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+.ifacebadge img[src*="/luci-static/resources/icons/vlan.png"],
+li img[src*="/luci-static/resources/icons/vlan.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/vlan.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/vlan_disabled.png"],
+#wan6_i img[src*="/luci-static/resources/icons/vlan_disabled.png"],
+img[src*="/luci-static/resources/icons/vlan_disabled.png"] {
+ background-image: url(../images/vlan_disabled.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+.ifacebadge img[src*="/luci-static/resources/icons/vlan_disabled.png"],
+li img[src*="/luci-static/resources/icons/vlan_disabled.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/vlan_disabled.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/bridge.png"],
+#wan6_i img[src*="/luci-static/resources/icons/bridge.png"],
+img[src*="/luci-static/resources/icons/bridge.png"] {
+ background-image: url(../images/bridge.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+.ifacebadge img[src*="/luci-static/resources/icons/bridge.png"],
+li img[src*="/luci-static/resources/icons/bridge.png"] {
+ background-image: url(../images/bridge.png);
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+ width: 0;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/bridge.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/bridge_disabled.png"],
+#wan6_i img[src*="/luci-static/resources/icons/bridge_disabled.png"],
+img[src*="/luci-static/resources/icons/bridge_disabled.png"] {
+ background-image: url(../images/bridge_disabled.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+.ifacebadge img[src*="/luci-static/resources/icons/bridge_disabled.png"],
+li img[src*="/luci-static/resources/icons/bridge_disabled.png"] {
+ background-image: url(../images/bridge_disabled.png);
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+ width: 0;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/bridge_disabled.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/tunnel.png"],
+#wan6_i img[src*="/luci-static/resources/icons/tunnel.png"],
+img[src*="/luci-static/resources/icons/tunnel.png"] {
+ background-image: url(../images/tunnel.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+.ifacebadge img[src*="/luci-static/resources/icons/tunnel.png"],
+li img[src*="/luci-static/resources/icons/tunnel.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/tunnel.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+#wan4_i img[src*="/luci-static/resources/icons/tunnel_disabled.png"],
+#wan6_i img[src*="/luci-static/resources/icons/tunnel_disabled.png"],
+img[src*="/luci-static/resources/icons/tunnel_disabled.png"] {
+ background-image: url(../images/tunnel_disabled.png);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+.ifacebadge img[src*="/luci-static/resources/icons/tunnel_disabled.png"],
+li img[src*="/luci-static/resources/icons/tunnel_disabled.png"]
+{
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ padding: 0 0 0 16px;
+}
+#__status-ifc-signal img[src*="/luci-static/resources/icons/tunnel_disabled.png"]
+{
+ background-size: 32px 32px!important;
+ height: 32px !important;
+ width: 32px!important;
+ padding: 0 0 0 32px!important;
+ width: 0;
+}
+
+img[src*="/luci-static/resources/icons/wifi_big.png"] {
+ background-image: url(../images/wifi_big.png);
+ background-size: 64px 64px;
+ height: 64px;
+ padding: 0 0 0 64px;
+ width: 0;
+}
+
+img[src*="/luci-static/resources/icons/wifi_big_disabled.png"] {
+ background-image: url(../images/wifi_big_disabled.png);
+ background-size: 64px 64px;
+ height: 64px;
+ padding: 0 0 0 64px;
+ width: 0;
+}
+
+img[src*="/luci-static/resources/icons/loading.gif"] {
+ background-image: url(../images/loading.gif);
+ background-size: 32px 32px;
+ height: 32px;
+ width: 32px;
+ padding: 0 0 0 32px;
+ width: 0;
+}
+
+.ifacebox-body img {
+ background-size: 20px 20px;
+ width:20px !important;
+ height:20px !important;
+ padding: 0 0 0 20px !important;
+}
+.ifacebox-head {
+ /* background-color: #337ab7 !important; */
+ border-radius: 4px 4px 0 0;
+}
+
+
+img[src*="/luci-static/resources/cbi/add.gif"] {
+ background-image: url(../images/add.png);
+ background-size: 20px 20px;
+ height: 20px;
+ padding: 0 0 0 20px;
+ width: 0;
+ z-index: 2;
+
+}
+img[src*="/luci-static/resources/cbi/remove.gif"] {
+ background-image: url(../images/remove.png);
+ background-size: 20px 20px;
+ height: 20px;
+ padding: 0 0 0 20px;
+ width: 0;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/cbi/reload.gif"] {
+ background-image: url(../images/reload.png);
+ background-size: 20px 20px;
+ height: 20px;
+ padding: 0 0 0 20px;
+ width: 0;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/icons/signal-75-100.png"]
+{
+ background-image: url(../images/signal-75-100.png);
+ image-rendering: pixelated;
+ background-size: 24px 24px;
+ height: 24px;
+ width: 24px;
+ padding: 0 0 0 24px;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/icons/signal-50-75.png"]
+{
+ background-image: url(../images/signal-50-75.png);
+ image-rendering: pixelated;
+ background-size: 24px 24px;
+ height: 24px;
+ width: 24px;
+ padding: 0 0 0 24px;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/icons/signal-25-50.png"]
+{
+ background-image: url(../images/signal-25-50.png);
+ image-rendering: pixelated;
+ background-size: 24px 24px;
+ height: 24px;
+ width: 24px;
+ padding: 0 0 0 24px;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/icons/signal-0-25.png"]
+{
+ background-image: url(../images/signal-0-25.png);
+ image-rendering: pixelated;
+ background-size: 24px 24px;
+ height: 24px;
+ width: 24px;
+ padding: 0 0 0 24px;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/icons/signal-0.png"]
+{
+ background-image: url(../images/signal-0.png);
+ image-rendering: pixelated;
+ background-size: 24px 24px;
+ height: 24px;
+ width: 24px;
+ padding: 0 0 0 24px;
+ z-index: 2;
+}
+
+img[src*="/luci-static/resources/icons/signal-none.png"]
+{
+ background-image: url(../images/signal-none.png);
+ image-rendering: pixelated;
+ background-size: 24px 24px;
+ height: 24px;
+ width: 24px;
+ padding: 0 0 0 24px;
+ z-index: 2;
+}
+
+
+.myIcon{
+ font-family: "design" !important;
+ font-style: normal !important;
+ font-variant: normal !important;
+ text-transform: none !important;
+}
+
+.myIcon-logout:after{
+ content: "\e005";
+}
+
+.myIcon-reboot:after{
+ content: "\e02a";
+}
+
+.myIcon-wifi:after{
+ content: "\e00c";
+}
+
+.main {
+ top: 50px;
+ bottom: 0rem;
+ position: relative;
+ height: 100%;
+ height: calc(100% - 4rem);
+}
+
+.main > .loading {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+ display: block;
+ background-color: rgb(240, 240, 240);
+ top: 0;
+}
+
+.main > .loading > span {
+ display: block;
+ text-align: center;
+ margin-top: 2rem;
+ color: #888;
+ font-size: 1rem;
+}
+
+.main > .loading > span > .loading-img:before {
+ content: "\e603";
+}
+
+.main > .loading > span > .loading-img {
+ animation: anim-rotate 2s infinite linear;
+ margin-right: 0.2rem;
+ display: inline-block;
+}
+
+/* fix Main Login*/
+
+.node-main-login {
+ text-align: center;
+ background-color: var(--bgwhite) !important;
+}
+.node-main-login .cbi-section-node > .cbi-value:nth-of-type(2n) {
+ background: none;
+}
+.node-main-login h2 {
+ font-size: 1.5rem;
+}
+
+.node-main-login header {
+ display: none;
+}
+.node-main-login > .main > .main-left {
+ display: none;
+}
+
+.node-main-login > .main > .main-right {
+ width: 100%;
+}
+
+.node-main-login > .main fieldset {
+ padding: 0px !important;
+ margin-bottom: 1rem;
+ display: inline;
+ background: none;
+ border: none;
+ box-shadow: none;
+ overflow: hidden;
+}
+
+.node-main-login > .main fieldset .cbi-value-title {
+ display: none !important;
+}
+
+.node-main-login > .main .cbi-section {
+ margin-top: 10px !important;
+}
+
+.node-main-login > .main .cbi-map {
+}
+
+.node-main-login > .main fieldset .cbi-value {
+}
+
+.node-main-login > .main fieldset .cbi-value-title {
+ padding: 10px 0 10px 5px !important;
+}
+
+.node-main-login > .main .cbi-value {
+ border: none;
+}
+
+.node-main-login > .main .cbi-value-title {
+ width: 7rem;
+}
+
+.node-main-login > .main #maincontent {
+ display: flex;
+ height: 100%;
+ text-align: center;
+ align-items: center;
+ align-content: center;
+ justify-content: center;
+}
+
+/* .node-main-login > .main .container {
+ background-image: var(--logo);
+ background-repeat: no-repeat;
+ background-size: 300px auto;
+ width: 300px;
+ padding: 80px 0 0 0;
+} */
+
+.node-main-login > .main form > div:nth-last-child(1) {
+}
+
+.node-main-login > .main .cbi-value > * {
+ display: inline-block !important;
+}
+
+.node-main-login > .main .cbi-input-user,
+.node-main-login > .main .cbi-input-password {
+ appearance: none;
+ outline: 0;
+ padding: 0 0 0 35px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px;
+ background-size: 18px 18px;
+ min-width: 15rem;
+}
+
+.node-main-login > .main .cbi-input-user {
+ background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23627386" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z"%2F%3E%3C%2Fsvg%3E');
+}
+.node-main-login > .main .cbi-input-password {
+ background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23627386" d="M12 17a2 2 0 0 0 2-2a2 2 0 0 0-2-2a2 2 0 0 0-2 2a2 2 0 0 0 2 2m6-9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5a5 5 0 0 1 5 5v2h1m-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3Z"%2F%3E%3C%2Fsvg%3E');
+}
+.node-main-login footer {
+ bottom: 0;
+ position: absolute;
+ width: 100%;
+}
+
+.navbar {
+ overflow: hidden;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ border-top: var(--navBorder);
+ text-align: center;
+ height:calc(50px + constant(safe-area-inset-bottom));
+ height:calc(50px + env(safe-area-inset-bottom));
+ background-color: var(--navbgColor);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+}
+
+.navbar a {
+ float: left;
+ text-align: center;
+ padding: 8px 0;
+ width: 20%;
+ text-decoration: none;
+ max-width: 100px;
+}
+
+.cbi-map {
+ margin-top: 10px;
+}
+
+#cbi-shadowsocksr .cbi-map-descr {
+ display: none;
+}
+
+.navbar a img {
+ width: 28px;
+}
+
+@keyframes anim-rotate {
+ 0% {
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg)
+ }
+}
+
+
+.main-left {
+ float: left;
+ width: 18rem;
+ background-color: var(--mainleftbgColor);
+ overflow-x: auto;
+ height: calc(100% - 3.5rem);
+ position: fixed;
+ padding-top: 15px;
+ box-shadow: 0 0px 4px rgb(0 0 0 / 8%);
+ transition: visibility 100ms, width 100ms;
+}
+
+.main-right {
+ width: 85%;
+ width: calc(100% - 18rem);
+ float: right;
+ height: 100%;
+ border-left: var(--sectionBorder);
+}
+
+.main-right > #maincontent {
+}
+
+.pull-right {
+ position: absolute;
+ top: -2px;
+ right: 30px;
+ cursor: pointer;
+}
+
+.pull-left {
+ float: left;
+}
+
+
+header > .container {
+margin:0;
+padding:0;
+}
+
+header > .container > .brand {
+ font-size: 25px;
+ font-family: "GenJyuuGothic-Medium";
+ /*font-weight:bold;*/
+ line-height:60px;
+ /*color: white;*/
+ color: var(--logo_color);
+ cursor: default;
+ /*background: #51c291;*/
+ display:block;
+ width:18rem;
+ /* padding-left: 30px; */
+ height:60px;
+ text-align:center;
+ float:left;
+ font-weight:900;
+ letter-spacing:1px;
+ padding: 0 4.5rem;
+ transition: 0.1s ease-in-out;
+ position: absolute;
+}
+header > .container > a[class="brand"]:after {
+ content:"";
+ font-size:14px;
+ font-family:Tahoma;
+ position: absolute;
+ top:-10px;
+ font-weight:normal !important;
+}
+
+header > .container > .brand-hostname {
+ font-size: 14px;
+ line-height:60px;
+ color: #555555;
+ cursor: default;
+ display:block;
+ width:18rem;
+ padding-right: 10px;
+ height:60px;
+ text-align:left;
+ float:left;
+ margin-top: 7px;
+ font-weight:300;
+ margin-left: -15px;
+}
+
+.warning {
+ background-color: #FF7D60 !important;
+ color: #FFF;
+}
+
+.errorbox,
+.alert-message {
+ margin: 0 0 10px 0;
+ padding: 20px;
+ line-height: 1.5;
+ font-family: inherit;
+ min-width: inherit;
+ overflow: auto;
+ border-radius: 10px;
+ color: var(--alertColor);
+ background-color: var(--alertBackground);
+}
+
+.errorbox {
+ color: #fff;
+ background-color: #ff6767;
+ border-radius: 10px;
+}
+
+.error {
+ color: red;
+}
+p#shadowsocksr_status {
+ padding: 3px;
+}
+
+
+#maincontent > .container > div:nth-child(1).alert-message.warning > a {
+ font: inherit;
+ overflow: visible;
+ text-transform: none;
+ display: inline-block;
+ margin-bottom: 0;
+ font-weight: 400;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-image: none;
+ min-width: 6rem;
+ padding: 0.5rem 1rem;
+ font-size: 14px;
+ line-height: 1.42857143;
+ color: #fff;
+ background-color: #5bc0de;
+ border-color: #46b8da;
+ margin-top: 2rem;
+ text-decoration: inherit;
+}
+
+.main > .main-left > .nav {
+ overflow-y: visible !important;
+ font-size: 1rem;
+ width: 90%;
+ margin: auto;
+ margin-bottom: 90px;
+}
+
+.main > .main-left > .nav > li a {
+ color: var(--activeColor);
+ display: block;
+ border-radius: 6px;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 1.1rem;
+ transition: all 0.1s;
+}
+
+/*
+.main > .main-left > .nav > li:nth-last-child(1) {
+ font-size: 11pt;
+ height:40px;
+ padding-top:6px;
+}
+*/
+
+.main > .main-left > .nav > li {
+ cursor: pointer;
+ padding-top:6px;
+}
+
+.main > .main-left > .nav > .slide {
+ padding: 0;
+ padding-top:8px;
+}
+
+.main > .main-left > .nav > .slide > a:before {
+ display: inline-block;
+ left:-10px;
+ top: 1px;
+ position: relative;
+ font-family: "design" !important;
+ font-weight: bold !important;
+ text-transform: none !important;
+ speak: none;
+ font-size: 1.2rem !important;
+ -webkit-font-smoothing: antialiased;
+}
+
+.main > .main-left > .nav > .slide > .menu::after {
+ right: 0.5rem;
+ top: 0.8rem;
+ font-family: "design" !important;
+ font-style: normal !important;
+ font-variant: normal !important;
+ content: "\eb03";
+ float: right;
+ padding-right: 5px;
+ line-height: 1.6;
+ /* Better Font Rendering =========== */
+ -moz-osx-font-smoothing: grayscale;
+ transition: all 0.1s ease;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+}
+
+.main .main-left .nav li.slide .menu.active::after {
+ transform: rotate(90deg);
+}
+
+.main > .main-left > .nav > .slide > a[data-title="Status"]:before {
+ content: "\e6b8";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="System"]:before {
+ content: "\e645";
+}
+
+.main>.main-left>.nav>.slide>a[data-title=Modem]:before {
+ content: "\e67e"
+}
+
+.main > .main-left > .nav > .slide > a[data-title="Services"]:before {
+ content: "\e6cb";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="Docker"]:before {
+ content: "\44";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="NAS"]:before {
+ content: "\eb04";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="VPN"]:before {
+ content: "\56";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="Network"]:before {
+ content: "\72";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="Bandwidth Monitor"]:before {
+ content: "\e764";
+}
+.main .main-left .nav li.slide .menu[data-title="Statistics"]:before {
+ content: "\e604";
+}
+
+.main .main-left .nav li.slide .menu[data-title="Control"]:before {
+ content: "\e67a";
+}
+
+.main .main-left .nav li.slide .menu[data-title="Asterisk"]:before {
+ content: "\e7dd";
+}
+
+.main > .main-left > .nav > .slide > a[data-title="QuickStart"]:before,
+.main > .main-left > .nav > li > a[data-title="Inital Setup"]:before,
+.main > .main-left > .nav > li > a[data-title="NetworkGuide"]:before,
+.main > .main-left > .nav > li > a[href="/cgi-bin/luci//admin/wizard"]:before {
+ content: "\e719";
+}
+
+.main > .main-left > .nav > li > a[data-title="iStore"]:before {
+ content: "\e676";
+}
+
+
+.main > .main-left > .nav > li > a[data-title="Logout"] {
+ padding: 0.675rem 0 0.675rem 2.5rem;
+}
+
+.main > .main-left > .nav > li > a[data-title="Logout"]:before {
+ content: "\e641";
+}
+
+.main > .main-left > .nav > li > a[data-title="Reboot"] {
+ padding: 6px 25px;
+}
+.main > .main-left > .nav > li > a[data-title="Reboot"]:before {
+ content: "\e004";
+}
+
+.main > .main-left > .nav > .slide > ul {
+ display: none;
+ list-style:dotted;
+}
+
+.main > .main-left > .nav > .slide > .menu {
+ display: block;
+ padding: 0.675rem 0 0.675rem 2.5rem;
+ text-decoration: none;
+ cursor: pointer;;
+}
+
+.main > .main-left > .nav > .slide > .menu2 {
+ display: block;
+ padding: 0.675rem 0 0.675rem 2.5rem;
+ text-decoration: none;
+ cursor: pointer;;
+}
+.main > .main-left > .nav > li:hover,
+.main > .main-left > .nav > .slide > .menu:hover {
+ background: var(--activeColor);
+ color:white;
+}
+.main > .main-left > .nav > .slide > .menu2:hover {
+ background: var(--activeColor);
+ color:white;
+}
+
+.main > .main-left > .nav > .slide:hover {
+ background: none;
+}
+.slide-menu {
+ overflow:hidden;
+ }
+.main > .main-left > .nav > .slide > .slide-menu > li {
+ margin-top: 8px;
+ border-radius: 6px;
+}
+
+.main > .main-left > .nav > .slide > .slide-menu > .active {
+ background-color: var(--activeColor);
+}
+
+.main > .main-left > .nav > .slide > .slide-menu > li > a {
+ position: relative;
+ display: block;
+ color: var(--textColor);
+ vertical-align: middle;
+ background:none !important;
+ border: none !important;
+ text-transform: capitalize;
+ font-size: 1rem;
+ margin: 0.1rem 0.5rem 0.1rem 0.5rem;
+ padding: 0.675rem 0 0.675rem 3.2rem;
+}
+.main .main-left .nav li.slide .slide-menu .active a {
+ color: #000;
+ }
+
+.main > .main-left > .nav > .slide > .slide-menu > li > a:hover {
+ color:white;
+}
+
+.main > .main-left > .nav > .slide > .slide-menu > .active > a {
+ color: white;
+}
+
+.main > .main-left > .nav > .slide > .slide-menu > li:hover {
+ background: var(--activeColor);
+ color:white !important;
+ transition: all 0.1s;
+}
+
+.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
+ background-color: var(--activeColor);
+ cursor: pointer;
+}
+
+.cbi-tab-descr {
+ padding:10px;
+}
+
+li {
+ list-style-type: none;
+}
+
+#maincontent > .container {
+ margin:30px 30px 50px 30px;
+}
+
+h1 {
+ color: var(--activeColor);
+ font-size: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eee;
+}
+
+h2 {
+ color: var(--activeColor);
+ padding: 0 12px 6px 12px;
+ text-transform: capitalize;
+}
+
+h3 {
+ font-size: 1.2rem;
+ color: var(--activeColor);
+ font-weight:bold;
+ padding: 0 12px 10px 12px;
+}
+
+h4 {
+
+}
+
+label {
+ display: inline-block;
+ vertical-align: middle;
+}
+fieldset {
+ /* margin: 10px 0 0 0; */
+ padding: 10px;
+ border: 1px;
+ font-weight: normal;
+ font-style: normal;
+ line-height: 1;
+ font-family: inherit;
+ text-align: left;
+ min-width: inherit;
+ overflow-x: auto;
+ overflow-y: hidden;
+ background-color: var(--sectionbgColor);
+ /* box-shadow: var(--sectionShaddow); */
+ -webkit-overflow-scrolling: touch;
+}
+
+fieldset > legend {
+ display: none !important;
+}
+
+fieldset > fieldset {
+ /* margin: 0; */
+ padding: 0;
+ /* border: none; */
+ /* box-shadow: none; */
+}
+
+.panel-title {
+ width: 100%;
+ display: block;
+ padding: 10px;
+ font-weight: bold;
+ font-size: 1rem;
+}
+
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+ width: 100%;
+ border: 0px solid #eee !important;
+ margin: 0 !important;
+}
+
+strong {
+ font-weight: bold;
+ padding: 2px;
+}
+
+#lb_load01_cur,
+#lb_load01_peak,
+#lb_load05_cur,
+#lb_load15_cur{
+ text-align:right !important;
+}
+
+#lb_load01_peak {
+ text-align:left !important;
+ }
+#lb_load01_cur {
+
+}
+
+table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
+ padding: 12px;
+ white-space: nowrap;
+ line-height:1.5;
+ vertical-align: middle !important;
+}
+
+.node-services-appfilter table > tbody > tr > th,
+.node-services-appfilter table > tbody > tr > td,
+.node-nlbw-usage table > tbody > tr > th,
+.node-nlbw-usage table > tbody > tr > td {
+ text-align: center;
+}
+
+
+table > tbody > tr {
+ border-bottom: var(--cbilineColor) !important;
+}
+
+table > tbody > tr:last-child {
+ border-bottom: none !important;
+}
+
+.cbi-section-table-cell {
+ text-align: center;
+}
+
+.cbi-section-table-row {
+ text-align: center;
+}
+
+.cbi-section-remove{
+ margin-bottom: 2px;
+}
+.cbi-section-remove > input {
+ background-color: #cc0066;
+}
+fieldset > table > tbody > tr:nth-of-type(odd) {
+ background-color: var(--sectionbgColor2);
+}
+
+/* fixed DHCPv6 lease table host names incorrectly displayed */
+#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%;
+}
+
+/* fix status overview */
+.node-status-overview > .main fieldset:nth-child(6) td:nth-child(2),
+.node-status-overview table[id="wifi_status_table"] > tbody > tr > td {
+ white-space: normal;
+}
+
+/* fix progress bar */
+#swaptotal > div,
+#swapfree > div,
+#swapcache > div,
+#memfree > div,
+#membuff > div,
+#conns > div,
+#memcache > div,
+#memtotal > div {
+ width: 100% !important;
+ border-color: var(--progressbarColor) !important;
+ background-color:var(--progressbarColor) !important;
+ border-radius: 3px;
+}
+
+#swaptotal > div > div,
+#swapfree > div > div,
+#swapcache > div > div,
+#memfree > div > div,
+#membuff > div > div,
+#conns > div > div,
+#memcache > div > div,
+#memtotal > div > div {
+ background-color: var(--progressbar) !important;
+ color: var(--progressbartxtColor) !important;
+ border-radius: 3px;
+}
+
+#swaptotal div div,
+#swapfree div div,
+#swapcache div div,
+#memfree div div,
+#membuff div div,
+#conns div div,
+#memcache div div,
+#memtotal div div {
+ align-items: center;
+ align-content: center;
+ justify-content: center;
+ display: flex;
+}
+
+#swaptotal div div small,
+#swapfree div div small,
+#swapcache div div small,
+#memfree div div small,
+#membuff div div small,
+#conns div div small,
+#memcache div div small,
+#memtotal div div small{
+ font-size: 0.75rem !important;
+ line-height: 130%;
+ color: var(--progressbartxtColor) !important;
+}
+
+.cbi-value-field {
+ width: 65%;
+}
+/* fix node-system-admin */
+.node-system-admin .cbi-value-field li div {
+ padding: 0 !important;
+}
+
+.node-system-admin em {
+ padding: 0 !important;
+}
+
+/* fix node-nlbw-display */
+.node-nlbw-display hr {
+ display: none;
+}
+
+.node-nlbw-display p {
+ line-height: 1.5;
+ padding: 0 10px 5px 10px;
+}
+
+
+/* fix node-network-network */
+
+/* #cbi-network-lan-__status table {
+ width: auto;
+}
+
+#cbi-network-lan-__status table td {
+ width: 0;
+ padding: 0;
+
+}
+#cbi-network-lan-__status table td small {
+ font-size: 11px;
+ white-space: nowrap;
+} */
+
+/* node-network-network ul list overflow */
+#cbi-network .cbi-value-field ul,
+#cbi-wireless .cbi-value-field ul,
+#cbi-firewall .cbi-value-field ul {
+ overflow-x: auto;
+ white-space: nowrap;
+}
+
+#cbi-network .cbi-value-field ul input[type="text"],
+#cbi-wireless .cbi-value-field ul input[type="text"],
+#cbi-firewall .cbi-value-field ul input[type="text"] {
+ max-width: 10rem;
+ width: 100% !important;
+}
+
+div [id*="cbi-network-"] [id*="-__status"] table,
+div [id*="cbi-wireless"] [id*="-__status"] table {
+ width: auto;
+}
+
+div [id*="cbi-network-"] [id*="-__status"] table td,
+div [id*="cbi-wireless"] [id*="-__status"] table td {
+ width: auto;
+ padding: 0 !important;
+}
+div [id*="cbi-network-"] [id*="-__status"] table td small,
+div [id*="cbi-wireless"] [id*="-__status"] table td small {
+ width: auto;
+}
+
+/* adapt to mt798x series closed source wireless driver page */
+/* open source wireless style */
+.node-network-wifi .cbi-section-table tr .cbi-value-field,
+.node-network-wireless .cbi-section-table tr .cbi-value-field {
+ width: unset !important;
+ text-align: right;
+}
+.node-network-wireless #iw-assoclist .cbi-section-table-row td[colspan="6"],
+.node-network-wireless .cbi-section-table .cbi-section-table-row td[colspan="6"],
+.node-network-wifi .cbi-section-table .cbi-section-table-row td[colspan="8"] {
+ text-align: center !important;
+}
+.node-network-wireless #iw-assoclist .cbi-section-table-row td div {
+ max-width: unset !important;
+}
+.node-network-wifi table, td, th {
+ border-top: unset !important;
+}
+.node-network-wifi .cbi-section-table td[colspan="2"] {
+ padding-left: unset !important
+}
+
+/* fix node-status-routes */
+.node-status-routes .cbi-section-node{
+ max-height: 500px;
+ overflow-y: auto;
+ overflow-x: auto;
+}
+
+/* fix multiple table */
+table table {
+ border: none;
+}
+
+.cbi-value-field table {
+ border: none;
+}
+.cbi-value-field label {
+ padding: 0 ;
+}
+td > table > tbody > tr > td {
+ border: none;
+}
+
+.cbi-value-field > table > tbody > tr > td {
+ border: none;
+}
+
+#container\.nlbw\.traffic th,
+#container\.nlbw\.traffic td,
+#container\.nlbw\.layer7 th,
+#container\.nlbw\.layer7 td,
+#container\.nlbw\.ipv6 th,
+#container\.nlbw\.ipv6 td,
+#container\.nlbw\.export th,
+#container\.nlbw\.export td {
+ padding: 12px !important;
+ border-top: none;
+ border: unset;
+ text-align: center;
+ /* border-left: #ccc 1px solid;
+ border-right: #ccc 1px solid;
+ border-bottom: #ccc 1px solid; */
+ }
+
+ #container\.nlbw\.traffic tr td:nth-child(4),
+ #container\.nlbw\.layer7 tr td:nth-child(3),
+ #container\.nlbw\.ipv6 tr td:nth-child(4),
+ #container\.nlbw\.export tr td:nth-child(4),
+ #container\.nlbw\.traffic tr td:nth-child(6),
+ #container\.nlbw\.layer7 tr td:nth-child(5),
+ #container\.nlbw\.ipv6 tr td:nth-child(6),
+ #container\.nlbw\.export tr td:nth-child(6) {
+ text-align: right !important;
+}
+
+ #container\.nlbw\.traffic tr td:nth-child(5),
+ #container\.nlbw\.layer7 tr td:nth-child(4),
+ #container\.nlbw\.ipv6 tr td:nth-child(5),
+ #container\.nlbw\.export tr td:nth-child(5),
+ #container\.nlbw\.traffic tr td:nth-child(7),
+ #container\.nlbw\.layer7 tr td:nth-child(6),
+ #container\.nlbw\.ipv6 tr td:nth-child(7),
+ #container\.nlbw\.export tr td:nth-child(7){
+ text-align: left !important;
+}
+
+td#__status-ifc-signal {
+ width: 60px !important;
+}
+
+/* button style */
+
+.cbi-button {
+ -webkit-appearance: none;
+ text-transform: uppercase;
+ color: #fff;
+ background-color: #337ab7;
+ transition: all 0.1s ease-in-out;
+ display: inline-block;
+ border: none;
+ cursor: pointer;
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+ background-image: none;
+ text-align: center;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ width: auto !important;
+ min-width: 80px;
+ padding: 0px 8px 0px 8px;
+ /* max-width: 160px; */
+ border-radius: var(--commonRadius0);
+ height: 35px;
+ line-height: 35px;
+}
+
+.cbi-button:hover,
+.cbi-button:focus,
+.cbi-button:active {
+ color: #fff;
+ outline: 0;
+ text-decoration: none;
+ background-color: rgb(106,101,214);
+}
+
+.cbi-button:hover,
+.cbi-button:focus {
+ box-shadow: 0 1px 1px rgba(0,0,0,.05);
+}
+
+.cbi-button:active {
+ box-shadow: 0 1px 1px rgba(0,0,0,.05);
+}
+
+.cbi-button:disabled {
+ cursor: not-allowed;
+ pointer-events: none;
+ opacity: 0.60;
+ box-shadow: none;
+}
+
+form.inline + form.inline,
+.cbi-button + .cbi-button {
+}
+
+.cbi-button-reset,
+.cbi-input-remove {
+ color: #fff !important;
+ background-color: #617486 !important;
+}
+
+.cbi-button-reset:hover,
+.cbi-input-remove:hover,
+.cbi-button-remove:hover{
+ color: #fff !important;
+ background-color: rgb(83,100,115) !important;
+}
+
+.cbi-button-link,
+.cbi-input-find,
+.cbi-input-save,
+.cbi-button-add,
+.cbi-button-save,
+.cbi-button-find,
+.cbi-input-reload,
+.cbi-button-reload {
+ color: var(--bttextColor);
+ background-color: #337ab7 !important;
+ border-color: #337ab7 !important;
+}
+
+.cbi-button-link:hover,
+.cbi-input-find:hover,
+.cbi-input-save:hover,
+.cbi-button-add:hover,
+.cbi-button-save:hover,
+.cbi-button-find:hover,
+.cbi-input-reload:hover,
+.cbi-button-reload:hover{
+ color: #fff !important;
+ background-color: #6A82AE!important;
+ border-color: #6A82AE !important;
+}
+
+
+.cbi-input-apply,
+.cbi-button-apply,
+.cbi-button-edit {
+ color: #fff !important;
+ background-color: var(--activeColor);
+}
+
+.cbi-input-reset,
+.cbi-button-remove {
+ color: #fff !important;
+ background: #617486;
+}
+
+
+.a-to-btn {
+ text-decoration: none;
+}
+
+/* table */
+.tabs {
+ margin: 15px 0;
+ overflow-x: auto;
+}
+
+.cbi-tabmenu > li,
+.tabs > li {
+ display: table-cell;
+}
+
+.cbi-tabmenu > li {
+ border-radius: var(--tabmenuRadius);
+}
+
+.tabs > li > a {
+ text-decoration: none;
+ padding: 0 6px 0 6px;
+ float: left;
+ display: block;
+ white-space: nowrap;
+ height: 2.5rem;
+ line-height: 2.5rem;
+ font-size: 0.92rem;
+}
+
+.cbi-tabmenu > li > a {
+ text-decoration: none;
+ float: left;
+ display: block;
+ white-space: nowrap;
+ height: 2.5rem;
+ line-height: 2.5rem;
+ font-size: 0.92rem;
+ margin: 0 10px;
+}
+
+.tabs > li[class~="active"],
+.tabs > li:hover{
+ cursor: pointer;
+
+}
+
+.tabs > li[class~="active"] > a {
+ color: var(--activeColor) !important;
+ padding-bottom: 8px;
+ border-bottom: var(--activeColor) 2px solid;
+}
+
+.tabs > li:hover {
+ /*border-bottom: 0.18751rem solid rgb(133,129,216);*/
+}
+
+.cbi-tabmenu {
+ border-top: var(--sectiontabBorder);
+ border-left: var(--tabmenuBorderLR);
+ border-right: var(--tabmenuBorderLR);
+ border-bottom: var(--tabmenuBottom);
+ background-color: var(--tabmenubgColor);
+ width: 100%;
+ overflow-x: auto;
+ margin-top: 5px;
+ margin-bottom: 10px;
+}
+
+.cbi-tabmenu > li:hover {
+ background-color: none;
+}
+
+.cbi-tabmenu > li[class~="cbi-tab"] {
+ background-color: none;
+}
+
+.cbi-tabmenu > li[class~="cbi-tab"] a {
+ color: var(--activeColor) !important;
+ border-bottom: 2px solid var(--activeColor) !important;
+}
+
+.cbi-section-node-tabbed {
+ margin-top: 0;
+ border-bottom: var(--sectiontabBorder);
+ border-left: var(--sectiontabBorder);
+ border-right: var(--sectiontabBorder);
+ border-radius: 0 0;
+}
+
+
+.cbi-tabcontainer {
+ clear:both;
+}
+.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
+ background-color: var(--sectionbgColor2);
+}
+
+.cbi-section-node > .cbi-value:nth-of-type(2n) {
+ background-color: var(--sectionbgColor2);
+}
+div > .cbi-value:nth-of-type(2n) {
+ background-color: var(--sectionbgColor2);
+}
+
+.cbi-value-field,
+.cbi-value-description {
+ display: table-cell;
+}
+
+.cbi-value-field {
+ /* padding: 10px 10px 10px 0; */
+}
+
+.cbi-value-helpicon > img {
+ display: none;
+}
+
+.cbi-value-helpicon:before {
+ content: "\f059";
+}
+
+.cbi-value-description {
+ opacity: 0.6;
+ padding-left: 4px;
+}
+
+.cbi-value-title {
+ word-wrap: break-word;
+ display: table-cell;
+ width: 35%;
+ float: left;
+ padding: 13px 10px 5px 3px;
+}
+
+.cbi-value {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ align-content: center;
+ justify-content: flex-start;
+ min-height: 40px;
+ padding: 8px 10px;
+ flex-flow:row wrap;
+ border-bottom: var(--cbilineColor);
+}
+
+.cbi-value:last-child {
+ border-bottom: none;
+}
+
+.cbi-value strong {
+ font-weight: normal;
+}
+
+.cbi-section-table-descr > .cbi-section-table-cell,
+.cbi-section-table-titles > .cbi-section-table-cell {
+ border: none;
+}
+
+.cbi-rowstyle-2 {
+ background-color: var(--sectionbgColor2);
+}
+
+.cbi-rowstyle-2 .cbi-button-up,
+.cbi-rowstyle-2 .cbi-button-down{
+}
+
+.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
+ width: auto !important;
+}
+.cbi-section-table tr .cbi-value-field {
+ text-align: center ;
+ width: 20% !important;
+ padding: 10px !important;
+}
+.cbi-section-table tr .cbi-value-field input {
+ width: auto;
+}
+.cbi-section-table tr .cbi-value-field .ifacebox {
+ margin: auto;
+ width: fit-content;
+ min-width: 60px;
+}
+
+/* desc */
+.cbi-section-descr {
+ padding: 3px 10px;
+}
+
+.cbi-map-descr {
+ padding: 5px 5px 5px 12px;
+}
+
+.cbi-map-descr h3 {
+ font-size: 0.92rem;
+ font-weight: normal;
+ color: #666;
+}
+
+#cbi-vsftpd .cbi-map-descr {
+ color: var(--activeColor);
+ padding: 0 12px 0px 12px;
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+
+/* luci */
+
+.hidden {
+ display: none
+}
+
+.left {
+ text-align: left !important;
+}
+
+.right {
+ text-align: right !important;
+}
+
+.right .cbi-button {
+ height: 20px;
+ line-height: 20px;
+ min-width: 60px;
+ /* padding: 0; */
+ margin: 0;
+}
+
+.inline {
+ display: inline;
+}
+
+.cbi-page-actions {
+ text-align: center;
+}
+
+/* input */
+.cbi-value input[type="password"],
+.cbi-value input[type="text"] {
+
+}
+
+/* select */
+
+
+.ifacebadge {
+ display: inline-flex;
+ padding: 5px;
+ background-color: var(--badgebgColor);
+ align-content: center;
+ align-items: center;
+ border-radius: var(--commonRadius1);
+ border: var(--badgeBorder);
+ color: #666666
+}
+
+#content_syslog {
+ padding: 5px;
+ margin-top:10px;
+ border-radius: 10px;
+ background-color: var(--sectionbgColor);
+ box-shadow: 3px 3px 3px rgb(0 0 0 / 5%);
+}
+
+.ifacebadge > img {
+ float: right;
+ margin-left: 0.3rem;
+}
+
+img.cbi-image-button {
+ vertical-align: middle;
+
+}
+
+fieldset.cbi-section{
+ border: var(--sectionBorder);
+ margin-bottom: 20px;
+ border-radius: 10px;
+ margin-top: 5px;
+}
+
+/*textarea*/
+
+.cbi-input-textarea, textarea {
+ color: var(--inputtextColor);
+ padding: 10px;
+ line-height: normal;
+ border: var(--sectionBorder);
+ background-color: var(--inputbgColor);
+ transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease;
+ -webkit-transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease;
+ outline-style: none;
+ vertical-align: baseline;
+ border-radius: 10px;
+ font-family: Menlo, Mono;
+ font-size: 0.9rem;
+ white-space: pre;
+ margin-bottom: 5px;
+}
+
+#syslog {
+ width: 100%;
+ min-height: 15rem;
+ padding: 10px;
+ margin-bottom: 20px;
+ border-radius: 0;
+ background-color: var(--sectionbgColor);
+ border: none;
+}
+
+/* change */
+#wan4_i, #wan6_i {
+width:50px !important;
+}
+
+.uci-change-list {
+ font-family: monospace;
+}
+
+.uci-change-list *:first-child {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+
+.uci-change-list *:nth-last-child(2) {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+ text-decoration: none;
+ border: 1px solid #00FF00;
+ background-color: #CCFFCC;
+ display: block;
+ padding: 2px;
+ color: black;
+ overflow-x: auto;
+}
+.uci-change-legend .uci-change-legend-label ins {
+ overflow-x: unset;
+ border-radius: var(--commonRadius1);
+}
+
+.uci-change-list del,
+.uci-change-legend-label del {
+ text-decoration: none;
+ border: 1px solid #FF0000;
+ background-color: #FFCCCC;
+ display: block;
+ font-style: normal;
+ padding: 2px;
+ color:black;
+ overflow-x: auto;
+}
+.uci-change-legend .uci-change-legend-label del {
+ overflow-x: unset;
+ border-radius: var(--commonRadius1);
+}
+
+.uci-change-list var,
+.uci-change-legend-label var {
+ text-decoration: none;
+ border: 1px solid #CCCCCC;
+ background-color: #EEEEEE;
+ display: block;
+ font-style: normal;
+ padding: 2px;
+ color:black;
+
+ overflow-x: auto;
+}
+.uci-change-legend .uci-change-legend-label var {
+ overflow-x: unset;
+ border-radius: var(--commonRadius1);
+}
+
+.uci-change-list var ins,
+.uci-change-list var del {
+ border: none;
+ white-space: pre;
+ font-style: normal;
+ padding: 0px;
+ color:black;
+ /* border-radius: var(--commonRadius1); */
+ overflow-x: auto;
+}
+
+.uci-change-legend {
+ padding: 5px;
+}
+
+.uci-change-legend-label {
+ width: 150px;
+ float: left;
+ display: flex;
+ /* align-content: center; */
+ align-items: center;
+}
+
+.uci-change-legend-label > ins,
+.uci-change-legend-label > del,
+.uci-change-legend-label > var {
+ float: left;
+ margin-right: 4px;
+ width: 10px;
+ height: 10px;
+ display: block;
+}
+
+.uci-change-legend-label var ins,
+.uci-change-legend-label var del {
+ border: none;
+ height: 10px;
+ width: 10px;
+}
+
+.uci-change-list var,
+.uci-change-list del,
+.uci-change-list ins {
+ padding: 0.5rem;
+}
+
+/* other fix */
+#iwsvg,
+#iwsvg2,
+#bwsvg {
+ border: var(--sectionBorder) !important;
+ font-family: -apple-system;
+ background: none !important;
+}
+
+.ifacebox {
+ border: var(--ifaceboxBorderColor) 1px solid;
+ border-radius: var(--commonRadius1);
+ font-size:0.92rem;
+ font-weight:normal;
+}
+.ifacebox-head {
+ color:#fff;
+}
+.ifacebox-body small {
+ font-size:0.8rem !important;
+ padding: 5px
+}
+
+.ifacebox-body strong {
+ color:#f7f7f7;
+ font-size: 0px !important;
+}
+
+.cbi-image-button {
+
+}
+
+
+.zonebadge > .ifacebadge {
+ padding: 3px 5px;
+ margin: 5px;
+}
+
+.zonebadge > input[type="text"] {
+ padding: 0.16rem 1rem;
+ min-width: 10rem;
+ margin-top: 0.3rem;
+}
+
+.cbi-value-field .cbi-input-checkbox,
+.cbi-value-field .cbi-input-radio {
+ vertical-align: middle;
+}
+
+.cbi-section-table-row > .cbi-value-field .cbi-input-select {
+ min-width: 7rem;
+}
+
+.cbi-section-create {
+ padding: 0 10px;
+}
+.cbi-section-create > .cbi-button-add {
+ margin: 10px 0 10px 0
+}
+
+div.cbi-value var, td.cbi-value-field var {
+ font-style: italic;
+ color: #0069D6;
+}
+
+small {
+ font-size: small;
+ font-weight: normal !important;
+ white-space: normal;
+}
+
+.cbi-button-up,
+.cbi-button-down {
+ display: inline-block;
+ min-width: 0;
+ font-size: 0.9rem;
+}
+
+.cbi-optionals {
+ padding: 1rem 1rem 0 1rem;
+ border-top: 1px solid #CCC;
+}
+
+#diag-rc-output > pre {
+ display: block;
+ padding: 10px;
+ line-height: 1.5rem;
+ -moz-border-radius: 3px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ color: #76838f;
+}
+
+input[name="ping"],
+input[name="traceroute"],
+input[name="nslookup"] {
+ width: 80%;
+}
+
+table.cbi-section-table select {
+ width: auto !important;
+}
+
+header > .container > .pull-right > * {
+
+}
+
+#xhr_poll_status > .label.success {
+ padding: 0.7rem 0;
+ border-radius: 20px;
+}
+
+#xhr_poll_status_off {
+ padding: 0.7rem 0;
+ border-radius: 20px;
+}
+
+.label {
+ padding: 0 3px 0 3px;
+ white-space: nowrap;
+ border-radius: 3px;
+ position: absolute;
+ right: 5px;
+ top: 15px;
+ line-height: 150%;
+}
+
+.notice {
+ color: var(--activeColor);
+ font-size: .8rem;
+ /* padding: 0.15rem; */
+ padding-right: 0.5rem;
+ border-radius: 10px;
+ z-index: 10;
+ /* top: 1.45rem; */
+ font-size: 1.8rem;
+ font-family: design;
+}
+
+#refresh_on, #refresh_off {
+ font-size: 1.5rem;
+ font-family: design;
+}
+
+#refresh_on {
+ color: var(--activeColor);
+}
+#refresh_off {
+ color: var(--progressbarColor);
+}
+
+.darkMask {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ background-color: rgba(0, 0, 0, 0.56);
+ content: "";
+ z-index: 99;
+ display: none;
+}
+
+/* fix node-services-shadowsocksr */
+
+.node-services-shadowsocksr .cbi-input-textarea,
+.node-nlbw-config .cbi-input-textarea {
+ /* margin: 10px; */
+}
+
+.node-services-shadowsocksr #cbi-logview .cbi-section {
+ padding: 0;
+}
+
+/* fix node-network-diagnostics */
+.node-network-diagnostics .cbi-section {
+ border-radius: 10px;
+}
+
+/* fix status processes */
+.node-status-processes > .main table tr td:nth-child(3) {
+ white-space: normal;
+}
+
+.cbi-map fieldset h3 {
+ }
+
+.cbi-map fieldset ul li {
+ margin-right:0 !important;
+}
+/* fix system reboot */
+
+.node-system-reboot > .main > .main-right p,
+.node-system-reboot > .main > .main-right h3 {
+ margin-left: 12px;
+}
+
+.node-system-reboot #maincontent {
+}
+
+/* fix Services Network Shares*/
+.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
+ margin-bottom: 1rem;
+}
+
+.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
+ display: list-item;
+}
+
+.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
+ padding-top: 1rem;
+ line-height:150%;
+}
+
+/* fix System Software*/
+.node-system-packages > .main table tr td:nth-child(1) {
+ width: auto !important;
+}
+
+.node-system-packages .cbi-section-node .cbi-value-last {
+ /* padding: 8px 12px; */
+}
+
+.node-system-packages .cbi-section-node .cbi-value-last > div {
+ border: none !important;
+ border-radius: 3px;
+}
+
+.node-system-packages .cbi-section-node .cbi-value-last > div > div {
+ border: none !important;
+ border-radius: 3px;
+}
+
+.node-system-packages .cbi-section-node .cbi-value-last:nth-last-child(1) {
+ padding: auto;
+}
+
+.node-system-packages > .main table tr td:nth-last-child(1) {
+ white-space: normal;
+ font-size: small;
+ color: #76838f;
+}
+
+.node-system-packages > .main .cbi-value > pre {
+ /* background-color: var(--inputbgColor); */
+ padding: 10px;
+ overflow: auto;
+ /* border: var(--inputBorder); */
+ border-radius: 10px;
+}
+
+.node-system-packages #cbi-distfeedconf .cbi-section,
+.node-system-packages #cbi-customfeedconf .cbi-section {
+ border-radius: 10px;
+}
+
+.node-system-packages .cbi-value-field {
+ width: 58%;
+}
+
+#container\.nlbw\.traffic, #container\.nlbw\.layer7, #container\.nlbw\.ipv6, #container\.nlbw\.export {
+ margin-top: 0;
+ margin-top: 0;
+ padding: 10px;
+ text-align: center;
+ border-bottom: var(--sectionBorder);
+ border-left: var(--sectionBorder);
+ border-right: var(--sectionBorder);
+ background-color: var(--sectionbgColor);
+ border-radius: 10px;
+}
+
+#container\.nlbw\.export ul li {
+
+ padding: 5px;
+ width: 150px;
+ margin: 10px;
+ border-radius: var(--commonRadius1);
+ border: #ccc 1px solid;
+
+}
+
+.cbi-tabmenu + .cbi-section ul {
+ text-align: left;
+}
+
+/* fix network firewall*/
+.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select {
+ min-width: 4rem;
+}
+
+.node-status-iptables > .main div > .cbi-map > form {
+ position: static !important;
+ margin: 10px 0 20px 0;
+ padding: 12px;
+ border: 0;
+ font-weight: normal;
+ font-style: normal;
+ line-height: 1;
+ font-family: inherit;
+ min-width: inherit;
+ overflow-x: auto;
+ overflow-y: hidden;
+ box-shadow: 3px 3px 3px rgb(0 0 0 / 5%);
+ border-radius: 10px;
+ background-color: var(--bgwhite);
+ -webkit-overflow-scrolling: touch;
+}
+
+
+
+/** fix system packages
+.node-system-packages .cbi-section {
+ border-radius: 0 0 10px 10px;
+}
+
+
+#cbi-ipkgconf .cbi-section {
+ border-radius: 0 0 10px 10px;
+}
+
+**/
+
+
+.node-system-flashops fieldset fieldset {
+ border: none;
+}
+.node-system-flashops br {
+ display: none;
+}
+
+.node-system-flashops .cbi-section {
+ /* padding: 0; */
+}
+.node-system-flashops .cbi-section-descr {
+ padding: 12px;
+ line-height: 1.5;
+ border-radius: 6px;
+ /* border: var(--sectiontabBorder);
+ background-color: var(--sectionbgColor2); */
+}
+
+
+.node-status-iptables .cbi-tabmenu,
+.node-system-packages .cbi-tabmenu,
+.node-system-flashops .cbi-tabmenu {
+ /* border: none; **/
+}
+
+#cbi-firewall-redirect .cbi-section-table-titles .cbi-section-table-cell {
+ text-align: left;
+}
+
+#cbi-firewall-redirect table *,
+#cbi-network-switch_vlan table *,
+#cbi-firewall-zone table *{
+ font-size: small;
+}
+
+#cbi-firewall-redirect table input[type="text"],
+#cbi-network-switch_vlan table input[type="text"],
+#cbi-firewall-zone table input[type="text"]{
+ width: 5rem;
+}
+
+#cbi-firewall-redirect table select,
+#cbi-network-switch_vlan table select,
+#cbi-firewall-zone table select{
+ min-width: 3.5rem;
+}
+
+/** fix node-status-realtime **/
+.node-status-realtime table > tbody > tr > td {
+ text-align: left !important;
+ padding: 10px 3px 10px 3px;
+}
+.node-status-realtime table[id=connections] > tbody > tr > td {
+ padding: 10px 3px 10px 3px;
+ text-align: center !important;
+}
+
+.node-status-realtime table {
+ table-layout: auto !important;
+}
+/* fix node-status-realtime connections */
+.node-status-realtime fieldset[id="cbi-table-table"] {
+ background-color: unset !important;
+}
+.node-status-realtime fieldset[id="cbi-table-table"] > table > tbody > tr:nth-of-type(odd),
+.node-status-realtime fieldset[id="cbi-table-table"] table[id="connections"] tr.cbi-section-table-row.cbi-rowstyle-2 {
+ background-color: unset;
+}
+/* fix luci-app-appfilter table overflow style */
+/* fix node-nas-fileassistant table overflow style */
+/* fix node-status-realtime table style */
+.node-services-appfilter .cbi-section.cbi-tblsection,
+.node-nas-fileassistant #list-content,
+.node-status-realtime fieldset[id="cbi-table-table"] .cbi-section-node {
+ overflow: auto;
+}
+
+select#cbi\.combobox\.cbid\.shadowsocksr\.cfg013fd6\.tunnel_forward {
+ overflow: hidden;
+
+}
+
+/* language fix */
+body.lang_pl.node-main-login .cbi-value-title {
+ width: 12rem;
+}
+
+/* fix nlbw component */
+#detail-bubble {
+ /* left: unset !important; */
+ width: unset!important;
+}
+#detail-bubble.in {
+ color: #000;
+ padding-bottom: calc(60px + env(safe-area-inset-bottom));
+ left: 19rem !important;
+ width: calc(100vw - 21.25rem)!important;
+}
+#detail-bubble .head {
+ display: block;
+ overflow: auto;
+}
+#detail-bubble #bubble-table {
+ display: inline-table;
+ overflow: auto;
+}
+
+@media screen and (max-width: 1280px) {
+ header {
+ /*height: 3.5rem;*/
+ }
+
+ header > .container {
+ /*margin-top: 0.25rem;*/
+ }
+
+ .main {
+ height: calc(100% - 3.5rem);
+ }
+
+ .main-left {
+ width: calc(0% + 18rem);
+ top: 50px;
+ }
+
+ .main-right {
+ width: calc(100% - 18rem);
+ }
+
+
+ table {
+ font-size: 0.9rem !important;
+ width: 100% !important;
+ }
+
+ .main > .main-left > .nav > li,
+ .main > .main-left > .nav > li a,
+ .main > .main-left > .nav > .slide > .menu {
+ font-size: 1.1rem;
+ }
+
+ .main > .main-left > .nav > .slide > .slide-menu > li > a {
+ font-size: 1rem;
+ text-transform: capitalize;
+ }
+
+ img[src*="/luci-static/resources/cbi/add.gif"] {
+ right: 55px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+ img[src*="/luci-static/resources/cbi/remove.gif"] {
+ right: 55px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+
+ img[src*="/luci-static/resources/cbi/reload.gif"] {
+ right: 55px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+ /* fix nlbw component */
+ #detail-bubble {
+ /* left: unset !important; */
+ width: unset!important;
+ }
+ #detail-bubble.in {
+ color: #000;
+ padding-bottom: calc(60px + env(safe-area-inset-bottom));
+ left: 19rem !important;
+ width: calc(100vw - 21.25rem)!important;
+ }
+ #detail-bubble .head {
+ display: block;
+ overflow: auto;
+ }
+ #detail-bubble #bubble-table {
+ display: inline-table;
+ overflow: auto;
+ }
+ .node-nlbw-usage table {
+ display: block;
+ overflow: auto;
+ }
+ #container\.nlbw\.traffic table,
+ #container\.nlbw\.layer7 table,
+ #container\.nlbw\.ipv6 table,
+ #container\.nlbw\.export table {
+ display: block;
+ overflow: auto;
+ }
+}
+
+@media screen and (max-width: 992px) {
+
+ /* img[src*="/images/logo.png"] {
+ background-color: var(--mainleftbgColor);
+ height: 50px;
+ background-image: var(--mlogo);
+ background-size: 310px;
+ background-repeat: no-repeat;
+ padding: 0 0 0 310px;
+ width: 0;
+ margin: 0;
+ background-position: 0;
+ } */
+
+ .main-left {
+ width: 0;
+ position: fixed;
+ z-index: 100;
+ }
+
+ .main-right {
+ width: 100%;
+ }
+
+ .showSide {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ position: absolute;
+ width: 18.75rem;
+ height: 2.8125rem;
+ padding: 1.15rem 2rem;
+ z-index: 100;
+ }
+
+ .showSide:before {
+ content: "\e20e";
+ font-size: 1.7rem;
+ }
+
+ #maincontent > .container {
+ margin: 20px 20px;
+ }
+
+ .node-main-login .showSide {
+ display: none !important;
+ }
+
+ .cbi-value-title {
+ width:35%;
+ }
+
+ .node-network-diagnostics > .main .cbi-map fieldset > div * {
+ width: 100% !important;
+ }
+
+ .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
+ }
+
+ .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
+ margin: 0 !important;
+ }
+
+ .node-network-diagnostics > .main .cbi-map fieldset > div select,
+ .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
+ margin: 1rem 0 0 0;
+ }
+
+ .node-network-diagnostics > .main .cbi-map fieldset > div {
+ width: 100% !important;
+ }
+
+ .node-main-login > .main .cbi-value-title {
+ text-align: left;
+ }
+
+ img[src*="/luci-static/resources/cbi/add.gif"] {
+ right: 45px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+ img[src*="/luci-static/resources/cbi/remove.gif"] {
+ right: 45px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+
+ img[src*="/luci-static/resources/cbi/reload.gif"] {
+ right: 45px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+ /* fix nlbw component */
+ #detail-bubble {
+ left: unset !important;
+ width: unset!important;
+ }
+ #detail-bubble.in {
+ color: #000;
+ padding-bottom: calc(60px + env(safe-area-inset-bottom));
+ left: unset !important;
+ width: calc(100vw)!important;
+ }
+ #detail-bubble .head {
+ display: block;
+ overflow: auto;
+ /* text-align: unset !important; */
+ }
+ #detail-bubble #bubble-table {
+ display: inline-table;
+ overflow: auto;
+ }
+ header {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+ }
+}
+
+@media screen and (max-width: 700px) {
+
+ #cbi-vssr-servers .cbi-button-add {
+ position: static !important;
+ width: auto !important;
+ height: 2rem !important;
+ line-height: 2rem !important;
+ color: #fff;
+ display: block;
+ padding: 0 !important;
+ font-size: 0.92rem;
+ border-radius: 10px !important;
+ box-shadow: none ;
+ background-image: none;
+ }
+ #cbi-vssr-servers .cbi-section-table-row {
+ margin:10px 0 !important;
+ }
+ #cbi-vssr-servers .p-in5 {
+ padding-bottom: 10px !important;
+ margin: 0 !important;
+ }
+
+ #cbi-vssr-servers .cbi-page-actions {
+ padding-bottom: 10px !important;
+ }
+
+ #maincontent > .container {
+ margin: 20px 20px;
+ }
+ /* fix nlbw component */
+ #detail-bubble {
+ left: unset !important;
+ width: unset!important;
+ }
+ #detail-bubble.in {
+ color: #000;
+ padding-bottom: calc(60px + env(safe-area-inset-bottom));
+ left: unset !important;
+ width: calc(100vw)!important;
+ }
+ #detail-bubble .head {
+ display: block;
+ overflow: auto;
+ /* text-align: unset !important; */
+ }
+ #detail-bubble #bubble-table {
+ display: inline-table;
+ overflow: auto;
+ }
+}
+
+@media screen and (max-width: 470px) {
+ /* fix nlbw component */
+ #detail-bubble {
+ left: unset !important;
+ width: unset!important;
+ }
+ #detail-bubble.in {
+ color: #000;
+ padding-bottom: calc(60px + env(safe-area-inset-bottom));
+ left: unset !important;
+ width: calc(100vw)!important;
+ }
+ #detail-bubble .head {
+ display: block;
+ overflow: auto;
+ /* text-align: unset !important; */
+ }
+ #detail-bubble #bubble-table {
+ display: block;
+ overflow: auto;
+ }
+ /* fix node-status-realtime table */
+ .main-right > #maincontent {
+ overflow: auto;
+ }
+ /* network and wireless table status icon */
+ div [id*="cbi-network-"] [id*="-__status"] table td,
+ div [id*="cbi-wireless"] [id*="-__status"] table td {
+ white-space: normal;
+ }
+
+ .node-system-leds .cbi-section em,
+ .node-network-network #cbi-network .cbi-map .cbi-section-table cbi-section-table-row,
+ .node-network-network #cbi-network .cbi-map .cbi-section-table td {
+ display: block;
+ }
+ .node-network-network #cbi-network .cbi-map .cbi-section-table td {
+ width: 100%!important;
+ text-align: center!important;
+ white-space: normal;
+ }
+ .node-network-network #cbi-network .cbi-map .cbi-button {
+ min-width: 60px !important;
+ }
+ .node-network-network .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
+ flex: 1!important
+ }
+ .node-network-network .cbi-section-table .cbi-section-table-titles th:nth-child(2) {
+ text-align: center !important;
+ }
+ .node-network-network .cbi-section-table .cbi-section-table-titles {
+ display: flex
+ }
+ .node-network-wireless fieldset:nth-child(1) table > tbody > tr > td,
+ .node-network-wireless fieldset:nth-child(2) table > tbody > tr > td {
+ white-space: normal;
+ }
+}
+
+@media screen and (max-width: 370px) {
+
+ fieldset {
+ /* overflow-x: auto; */
+ }
+
+ select {
+ width: 100%;
+ }
+
+ header {
+ height: 55px;
+ }
+
+ h3 {
+ padding: 0 10px 10px 10px;
+ }
+
+ /* img[src*="/images/logo.png"]
+ {
+ height: 45px;
+ background-image: var(--mlogo);
+ background-size: 310px;
+ background-repeat: no-repeat;
+ padding: 0 0 0 310px;
+ width: 0;
+ margin: 0;
+ background-position: 0;
+ } */
+
+ .showSide {
+ height: 45px;
+ }
+
+ #maincontent > .container {
+ margin: 20px 20px;
+ }
+
+ .main {
+ top: 45px;
+ }
+
+ .main-left{
+ top: 45px;
+ }
+ .main > .main-left > .nav > .slide > .menu {
+ }
+
+ .main > .main-left > .nav > .slide > .slide-menu > li > a {
+ }
+
+ .cbi-value {
+ margin-bottom: 20px;
+ display: table;
+ padding: 0px;
+ border-bottom: none;
+ }
+
+ .cbi-value-title {
+ width: 100%;
+ font-weight: 700;
+ float: left;
+ padding: 0;
+ margin: 0;
+ margin-bottom: .25rem;
+ }
+
+ .cbi-section-node {
+ padding: 10px !important;
+ }
+
+ .cbi-value-description {
+ width: 100%;
+ display: block;
+ }
+
+ .cbi-value > .cbi-value-field {
+ display: block;
+ float: left;
+ width: 100%;
+ }
+ img[src*="/luci-static/resources/cbi/add.gif"] {
+ right: 45px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+ img[src*="/luci-static/resources/cbi/remove.gif"] {
+ right: 45px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+
+ img[src*="/luci-static/resources/cbi/reload.gif"] {
+ right: 45px;
+ display: block;
+ position: absolute;
+ margin-top: -34px;
+ }
+ .cbi-section-node > .cbi-value:nth-of-type(2n) {
+ background-color: var(--sectionbgColor);
+ }
+
+ .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
+ background-color: var(--sectionbgColor);
+ }
+
+ div > .cbi-value:nth-of-type(2n) {
+ background-color: var(--sectionbgColor);
+ }
+
+ .node-main-login > .main .cbi-value {
+ padding: 0;
+ }
+
+ .node-main-login > .main form > div:nth-last-child(1) {
+ margin-top: 2rem;
+ }
+
+ .node-main-login > .main fieldset {
+ margin: 0;
+ padding: 0.5rem;
+ }
+
+ #container\.network\.lan\.physical .cbi-value-title,
+ #cbi-network-1-_ifname .cbi-value-title
+ {
+ width: 35%;
+ }
+ #cbi-network-1-_ifname .cbi-value-field
+ {
+ width: 65%;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ text-transform: capitalize;
+ }
+
+ select,
+ input {
+ /* max-width: 200px; */
+ }
+
+ input[type='checkbox'] {
+ height: 1.2rem !important;
+ width: 1.2rem !important;
+ }
+
+ #swaptotal div div small,
+ #swapfree div div small,
+ #swapcache div div small,
+ #memfree div div small,
+ #membuff div div small,
+ #conns div div small,
+ #memcache div div small,
+ #memtotal div div small{
+ }
+ #swaptotal div div,
+ #swapfree div div,
+ #swapcache div div,
+ #memfree div div,
+ #membuff div div,
+ #conns div div,
+ #memcache div div,
+ #memtotal div div{
+ }
+
+ .node-status-iptables > .main div > .cbi-map > form input[type="submit"]{
+ margin: 0;
+ }
+
+ #cbi-samba-cfg010f89-_tmpl .cbi-value-title{
+ width: 15%;
+
+ }
+ #cbi-samba-cfg010f89-_tmpl .cbi-value-field{
+ width: 95%;
+ }
+ /* fix nlbw component */
+ #detail-bubble {
+ left: unset !important;
+ width: unset!important;
+ }
+ #detail-bubble.in {
+ color: #000;
+ padding-bottom: calc(60px + env(safe-area-inset-bottom));
+ left: unset !important;
+ width: calc(100vw)!important;
+ }
+ #detail-bubble .head {
+ display: block;
+ overflow: auto;
+ /* text-align: unset !important; */
+ }
+ #detail-bubble #bubble-table {
+ display: block;
+ overflow: auto;
+ }
+}
+
+@media screen and (max-width: 315px) {
+ .label {
+ position: absolute;
+ right: 5px;
+ top: -70px;
+ }
+}
+
+/* fix http://192.168.2.1/cgi-bin/luci/admin/nlbw/usage */
+#intervalSelect {
+ height: 40px !important;
+}
+
+/* fix luci-app-commands */
+.commandbox div {
+ position: unset !important;
+}
+
+/* fix luci-app-netspeedtest */
+#cbi-netspeedtest-homebox- {
+ display: unset !important;
+}
+
+/* fix node-status-realtime */
+.node-status-realtime .container {
+ overflow:auto
+}
+
+/* fix node-network-network */
+.node-network-network div[onclick*="document.getElementById('cbid.network."],
+#cbi-network div[onclick*="document.getElementById('cbid.network."] {
+ background-color: unset !important;
+}
+
+/* fix wireless_join list button */
+form[action="/cgi-bin/luci/admin/network/wireless"] input[class="cbi-button cbi-button-reset"],
+form[action="/cgi-bin/luci/admin/network/wireless_join"] input[class="cbi-button cbi-input-find"] {
+ height: 25px;
+ min-width: 80px;
+}
+/* fix node-services-aliyundrive-webdav mask-box background style */
+.node-services-aliyundrive-webdav #mask-box {
+ background: rgb(64 64 64 / 0%);
+}
+/* fix node-servces-ddns input style */
+.node-services-ddns #cbi-ddns-service input {
+ width: unset;
+}
+.node-services-ddns .cbi-value input[type="password"],
+.node-services-ddns .cbi-value input[type="text"] {
+ width: 100% !important;
+}
+/* fix luci-app-fileassistant botton style */
+.fb-container .cbi-button {
+ border-radius: var(--commonRadius0);
+ margin: 3px 3px 3px 0;
+ height: unset !important;
+}
+/* update node-system-commands style */
+.node-system-commands h3 {
+ text-transform: unset;
+}
+.node-system-commands .commandbox {
+ width: auto;
+ display: inline-block;
+ float: none;
+}
+.node-system-commands .commandbox p {
+ word-break:keep-all;
+ white-space:nowrap;
+}
+.node-system-commands div.cbi-map fieldset.cbi-section {
+ align-items: center;
+ text-align: center;
+}
+.node-system-commands #cbi-luci.cbi-map fieldset.cbi-section {
+ align-items: unset;
+ text-align: unset;
+}
+/* network */
+.node-network-network .ifacebox strong{
+ color: var(--ifaceboxFontColor);
+ padding: 5px;
+}
+.node-network-firewall .zonebadge strong,
+.node-network-firewall label strong {
+ color: var(--ifaceboxFontColor);
+}
+
+/* fix new version luci-app-openclash style */
+.node-services-openclash ul li.selected {
+ background-color: var(--liSelectedColor) !important;
+}
+.node-services-openclash .cbi-button-reset,
+.node-services-openclash .cbi-input-remove {
+ max-width: unset !important;
+}
+.node-services-openclash #tab-header ul li.selected,
+.node-services-openclash #tab-header ul li {
+ color: black !important;
+ background-color: unset !important
+}
+/* fix qBittorrent status style*/
+.node-nas-qbittorrent p#qBittorrent_status input {
+ line-height: unset;
+}
+
+/* fix node-system-diskman dialog-format-active */
+.node-system-diskman.dialog-format-active #dialog_format .dialog_box {
+ background: var(--alertBackground);
+ border-radius: var(--commonRadius1);
+}
+/* adaption plug-in luci-app-watchcat-plus */
+.node-services-watchcat-plus select[id*="cbi.opt.watchcat"] {
+ width: auto;
+}
+/* fix node-nas-fileassistant table cell style */
+.node-nas-fileassistant .fb-container .cbi-value-owner,
+.node-nas-fileassistant .fb-container .cbi-value-perm {
+ display: table-cell;
+}
+/* fix luci-app-adguardhome style */
+.node-services-adguardhome input[onclick*="window.open('http://'+window.location.hostname+':"] {
+ line-height: 0;
+}
diff --git a/luci-theme-design/htdocs/luci-static/design/css/style.css b/luci-theme-design/htdocs/luci-static/design/css/style.css
new file mode 100644
index 00000000..03a1f550
--- /dev/null
+++ b/luci-theme-design/htdocs/luci-static/design/css/style.css
@@ -0,0 +1,2 @@
+:root{--commonRadius0: 8px;--commonRadius1: 5px
+ }[data-theme=light]{--bg: #f1f4f5;--mainbg: #fff;--bgwhite: #fff;--activeColor: #5ea69b;--activeBottom: #5ea69b 2px solid;--textColor: rgb(132,119,116);--borderColor: rgba(0,0,0,.15);--navbgColor: rgba(255, 255, 255, .7);--navBorder: 1px solid #f2f2f2;--sectionbgColor: #fff;--sectionbgColor2: #fff;--sectionShaddow: 3px 3px 3px rgba(0,0,0,.05);--sectionBorder: none;--sectiontabBorder: none;--tabmenuBorderLR: none;--tabmenubgColor: none;--tabmenuBottom: #e4eaec 1px solid;--tabmenuRadius: 6px 6px 0 0;--sectionnodeBorder: #f7f7f7 1px solid;--cbilineColor: #f7f7f7 1px solid;--tabbgColor: #fff;--inputbgColor: #f8f8f8;--inputtextColor: #76838f;--inputBorder: 1px solid #e4eaec;--mainleftbgColor: rgb(255,255,255);--bttextColor: #fff;--badgebgColor: #f7f7f7;--badgeBorder: #e4eaec 1px solid;--progressbarColor: #c8c8c8;--progressbar: #5ea69b;--progressbartxtColor: #fff;--logo_color: #222b36;--alertColor: #000000;--alertBackground: rgb(230 230 230);--scrollbarColor:#c5c5c5;--ifaceboxBorderColor: #b8b8b8bd;--ifaceboxFontColor: #404040;--liSelectedColor: #c5c5c5;--vssrStatusColor: #525f7f;--vssrBoxShadow: 0 0 2rem 0 rgb(136 152 170 / 30%)}[data-theme=dark]{--bg: #000;--bgwhite: #000;--textColor: #fefefe;--activeColor: #5ea69b;--activeBottom: #5ea69b 2px solid;--borderColor: #2C2C3A;--navbgColor: hsla(0, 0%, 7%, .8);--navBorder: 1px solid #1c1c1e;--sectionbgColor: #1c1c1e;--sectionbgColor2: #1c1c1e;--sectionShaddow: 3px 3px 3px rgba(0,0,0,.05);--sectionBorder: none;--sectiontabBorder: none;--sectionnodeBorder: #3d3d41 1px solid;--cbilineColor: #2d2d2d 1px solid;--tabbgColor: #1c1c1e;--tabmenuBorderLR: none;--tabmenubgColor: none;--tabmenuBottom: #2d2d2d 1px solid;--tabmenuRadius: 6px 6px 0 0;--inputbgColor: #2f2f2f;--inputtextColor: #fefefe;--inputBorder: 1px solid #4d4d4d;--mainleftbgColor: #000;--bttextColor: #fefefe;--badgebgColor: #fefefe;--badgeBorder: #3d3d40 1px solid;--progressbarColor: #6d6d6d;--progressbar: #5ea69b;--progressbartxtColor: #fefefe;--logo_color: #fefefe;--alertColor: #ffffff;--alertBackground: rgb(30 30 30);--scrollbarColor:#2f2f2f;--ifaceboxBorderColor: #636363bd;--ifaceboxFontColor: #404040;--liSelectedColor: #2f2f2f;--vssrStatusColor: rgb(204, 204, 204);--vssrBoxShadow: 0 0 1rem 0 rgb(0 0 0 / 30%)}@font-face{font-family:icomoon;src:url(../fonts/font.eot);src:url(../fonts/font.eot) format('embedded-opentype'),url(../fonts/font.ttf) format('truetype'),url(../fonts/font.woff) format('woff'),url(../fonts/font.svg) format('svg');font-weight:400;font-style:normal}@font-face{font-family:design;src:url('');src:url(?#iefix) format('embedded-opentype'),url(../fonts/iconfont-Regular.woff2) format('woff2'),url(../fonts/iconfont-Regular.woff) format('woff'),url(../fonts/iconfont-Regular.ttf) format('truetype'),url(#iconfont) format('svg')}@font-face{font-family:genjyuugothic-medium;src:url(../fonts/GenJyuuGothic-Medium.otf) format('opentype')}*::-webkit-scrollbar{width:5px;height:5px}*::-webkit-scrollbar-thumb{background:var(--scrollbarColor);border-radius:2px}div{font-family:hyk2gj}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,body{margin:0;padding:0;height:100%;font-family:-apple-system,microsoft yahei!important;font-size:.92rem;line-height:150%;background-color:var(--bg);color:var(--textColor)}body div{line-height:150%}a{color:var(--textColor);text-decoration:none}em{font-style:normal!important;line-height:1.5;padding-left:10px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}select{overflow:hidden!important;width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:0 25px 0 10px!important;background-size:24px 16px;background-repeat:no-repeat;background-position:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGCAYAAAA6hjFpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhDNzA0QUE0NjE2QTExRUNCMjJFQkQyRkIyNURDNjE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhDNzA0QUEzNjE2QTExRUNCMjJFQkQyRkIyNURDNjE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNBNTYzNTY2MTUxMTFFQ0IyMkVCRDJGQjI1REM2MTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNBNTYzNTc2MTUxMTFFQ0IyMkVCRDJGQjI1REM2MTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6YjzxlAAACsklEQVR42uyaXUsVURSG51T0U/obfUvhhYF0U0HQhZQVIWVJCAkiSUXfRRcaBFbXQVBBRCASFCJBpQQipw+RREkpCa9aG95gs0DMOp6Z7TwvvAxnzczaa6/nzDnzVTndfSVDxdE6WgAQBBCAIIAABAEEIAggAEEAQQABCAIIQBBAAIIAAhAEEAQQgCCAAAStGSAbzA/N+wvSiwPmB6or16bkoY2afLN5r+q4l2MfDpr7zetV2z7zYpmOkAHByNSE0IxDOdUSxr2rOjLVNVC2n6z77hsYmtFnbqlzHS0aN+7DouorFZBH+ibGUCrmO+YjdaqhVeNVHIxm1Ve6P/XH5ibzLwfllvn4Ko8d8t90MEIde1RXaU97n6oJCw7KNXPbKo3ZpvwxjAXV8YTrkCx7piPFQ7lsbq/xWO3K62E0qQ4uDKXn5kbzTxe/YO6o0Rgdypc5GI0anyt1p5fm3eYfLn7e3PmfuTuVJ1YYZ5fG5Up9CQ2qSfMu3m3u+secXdo/1rzGGeTWyfIaUrPmXPycuWeFuXq0X6w55R8q4NwLe3PxlXmn+buLnzX3/mWOXm0fK+RrUP4MICvTG/MO86yLnzFfWmbfi9ou1qzyvS7wnAt/+31YTZxx8ZPmq+709c/pcoifcvEZ5Rku+HyTeB4yYt5unnbxE+YbEZSwvK54rGntP5LAXJN5QPXWvNX8zcWPmm9rHmF5zK0P22/T/hlAaqv35i3mKRc/bB7VMtaUIL5LaI7JPcIdVZMnXXyT+zyp7T4kNr8kn6mPqdlfllj/VevHEpxbsi85fNTP1ycX/2zerPUZQOqrcUGp6nNVMMYTnlPyrwFNCMILLScSn0++r7zUSFVdZ6wJ8aIcQBBAAIIAAhAEEIAggAAEAQQBBCAIIABBAAEIAghAEEAQQJLQbwEGAK/reX2gh5gQAAAAAElFTkSuQmCC)}select,input{color:var(--inputtextColor);padding:5px 10px;font-size:.92rem;font-family:-apple-system,microsoft yahei,sans-serif,Helvetica,Arial,sans-serif;border:var(--inputBorder);background-color:var(--inputbgColor);transition:color 100ms ease,border-color 100ms ease,opacity 100ms ease;-webkit-transition:color 100ms ease,border-color 100ms ease,opacity 100ms ease;outline-style:none;vertical-align:middle;border-radius:var(--commonRadius0);margin:3px 3px 3px 0;height:2.8rem;line-height:2.8rem;max-width:550px}select:not([multiple=multiple]):focus,input:focus{border-color:#948fe1;box-shadow:0 0 6px #948fe1;-webkit-box-shadow:0 0 6px #948fe1;-moz-box-shadow:0 0 6px #948fe1}input[type=file]{border:none;background:0 0;height:auto;line-height:1rem}input[type=checkbox]{height:1.2rem;width:1.2rem}input[type=radio]{height:1.2rem;width:1.2rem;box-shadow:var(--bg)}select[multiple=multiple]{height:auto}.node-docker-images input[type=text]{width:auto!important}input[type=text],input[type=password]{width:100%}code{color:#09c}abbr{text-decoration:underline;cursor:help}br{display:block;margin-bottom:.2px;content:''}hr{margin:1rem 0;border-color:#eee;opacity:.1}header,.main{width:100%;position:absolute}header{background-color:var(--bgwhite);box-shadow:18rem 2px 4px rgba(0,0,0,.08);transition:box-shadow .1s;height:55px;float:left;position:fixed;z-index:101}footer{text-align:right;padding:1rem;color:#aaa;font-size:11px;height:80px;visibility:hidden}footer>a{color:#9a258f;text-decoration:none}text,line{font-family:Verdana!important}.cbi-button-up,.cbi-button-down,.cbi-value-helpicon,.showSide,.main>.loading>span{font-family:icomoon!important;font-size:10px;speak:none;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.node-services-passwall2 #cbi-passwall2{text-align:center}.node-services-passwall2 input.cbi-button.cbi-button{max-width:unset}.node-services-passwall #set_node_div,.node-services-passwall2 #set_node_div,.node-services-passwall #add_link_div,.node-services-passwall2 #add_link_div{background:var(--sectionbgColor);border-radius:var(--commonRadius0)}.node-services-passwall #add_link_div #nodes_link,.node-services-passwall2 #add_link_div #nodes_link{width:100%!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:-apple-system,microsoft yahei;font-weight:600;line-height:1.1;color:inherit;clear:both;text-transform:capitalize}label.zonebadge.zonebadge-empty{background-color:#03abe8!important}label.zonebadge{border-radius:var(--commonRadius1);padding:2px 5px!important;display:inline-block;cursor:pointer;color:#666}.zonebadge{border-radius:6px;padding:5px}.zonebadge em{padding:3px}svg{background-color:var(--sectionbgColor)}.cbi-section .cbi-section{margin:10px}.node-services-vssr .status-bar{bottom:calc(var(--vssrBottom) + constant(safe-area-inset-bottom));bottom:calc(var(--vssrBottom) + env(safe-area-inset-bottom));background-color:var(--navbgColor);box-shadow:var(--vssrBoxShadow)!important;color:var(--vssrStatusColor)!important}.node-services-vssr .container{padding-bottom:calc(var(--vssrBottom) + constant(safe-area-inset-bottom));padding-bottom:calc(var(--vssrBottom) + env(safe-area-inset-bottom))}.node-services-vssr .ssr-button{min-width:30px}.node-services-vssr #cbi-vssr .panel-title{padding:10px 0 10px 10px!important;letter-spacing:0!important}.node-services-vssr .status .block{border-radius:10px!important;box-shadow:none!important;background-color:var(--sectionbgColor)!important}.node-services-vssr button{border-radius:10px!important}#cbi-vssr-servers .cbi-section-table-row{position:relative;margin:10px!important;padding:8px 15px 8px 70px;box-shadow:none!important;border-radius:10px!important;border:0;color:var(--textColor)!important;text-align:left;line-height:1.7em;overflow:hidden;letter-spacing:normal;background-color:var(--inputbgColor)!important}.cbi-section-table-row.fast{background-color:#add8e6!important}.incon .tp{text-transform:uppercase;color:var(--bg)!important}::file-selector-button{transition:all .1s ease-in-out;border-radius:var(--commonRadius1);border:3px solid #337ab7!important;color:#fff!important;background-color:#337ab7!important;box-sizing:border-box;cursor:pointer}::file-selector-button:hover,::file-selector-button:focus,::file-selector-button:active{color:#fff!important;background-color:#6a65d6!important;border-color:#6a65d6!important}img[src*="/luci-static/resources/icons/port_up.png"]{background-image:url(../images/port_up.png);background-size:32px 32px;height:32px;padding:0 0 0 32px;width:0}img[src*="/luci-static/resources/icons/port_down.png"]{background-image:url(../images/port_down.png);background-size:32px 32px;height:32px;padding:0 0 0 32px;width:0}#wan4_i img[src*="/luci-static/resources/icons/ethernet.png"],#wan6_i img[src*="/luci-static/resources/icons/ethernet.png"],img[src*="/luci-static/resources/icons/ethernet.png"]{background-image:url(../images/ethernet.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/ethernet.png"],#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/ethernet.png"],.ifacebadge img[src*="/luci-static/resources/icons/ethernet.png"],li img[src*="/luci-static/resources/icons/ethernet.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/ethernet.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/ethernet_disabled.png"],#wan6_i img[src*="/luci-static/resources/icons/ethernet_disabled.png"],img[src*="/luci-static/resources/icons/ethernet_disabled.png"]{background-image:url(../images/ethernet_disabled.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/ethernet_disabled.png"],#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/ethernet_disabled.png"],.ifacebadge img[src*="/luci-static/resources/icons/ethernet_disabled.png"],li img[src*="/luci-static/resources/icons/ethernet_disabled.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/ethernet_disabled.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/switch.png"],#wan6_i img[src*="/luci-static/resources/icons/switch.png"],img[src*="/luci-static/resources/icons/switch.png"]{background-image:url(../images/switch.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/switch.png"],#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/switch.png"],.ifacebadge img[src*="/luci-static/resources/icons/switch.png"],li img[src*="/luci-static/resources/icons/switch.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/switch.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/switch_disabled.png"],#wan6_i img[src*="/luci-static/resources/icons/switch_disabled.png"],img[src*="/luci-static/resources/icons/switch_disabled.png"]{background-image:url(../images/switch_disabled.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/switch_disabled.png"],#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/switch_disabled.png"],.ifacebadge img[src*="/luci-static/resources/icons/switch_disabled.png"],li img[src*="/luci-static/resources/icons/switch_disabled.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/switch_disabled.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/wifi.png"],#wan6_i img[src*="/luci-static/resources/icons/wifi.png"],img[src*="/luci-static/resources/icons/wifi.png"]{background-image:url(../images/wifi.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/wifi.png"],#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/wifi.png"],.ifacebadge img[src*="/luci-static/resources/icons/wifi.png"],li img[src*="/luci-static/resources/icons/wifi.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/wifi.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/wifi_disabled.png"],#wan6_i img[src*="/luci-static/resources/icons/wifi_disabled.png"],img[src*="/luci-static/resources/icons/wifi_disabled.png"]{background-image:url(../images/wifi_disabled.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}#cbi-network-lan-ifname_multi img[src*="/luci-static/resources/icons/wifi_disabled.png"],#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/wifi_disabled.png"],.ifacebadge img[src*="/luci-static/resources/icons/wifi_disabled.png"],li img[src*="/luci-static/resources/icons/wifi_disabled.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/wifi_disabled.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/vlan.png"],#wan6_i img[src*="/luci-static/resources/icons/vlan.png"],img[src*="/luci-static/resources/icons/vlan.png"]{background-image:url(../images/vlan.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebadge img[src*="/luci-static/resources/icons/vlan.png"],li img[src*="/luci-static/resources/icons/vlan.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/vlan.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/vlan_disabled.png"],#wan6_i img[src*="/luci-static/resources/icons/vlan_disabled.png"],img[src*="/luci-static/resources/icons/vlan_disabled.png"]{background-image:url(../images/vlan_disabled.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebadge img[src*="/luci-static/resources/icons/vlan_disabled.png"],li img[src*="/luci-static/resources/icons/vlan_disabled.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/vlan_disabled.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/bridge.png"],#wan6_i img[src*="/luci-static/resources/icons/bridge.png"],img[src*="/luci-static/resources/icons/bridge.png"]{background-image:url(../images/bridge.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebadge img[src*="/luci-static/resources/icons/bridge.png"],li img[src*="/luci-static/resources/icons/bridge.png"]{background-image:url(../images/bridge.png);background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px;width:0}#__status-ifc-signal img[src*="/luci-static/resources/icons/bridge.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/bridge_disabled.png"],#wan6_i img[src*="/luci-static/resources/icons/bridge_disabled.png"],img[src*="/luci-static/resources/icons/bridge_disabled.png"]{background-image:url(../images/bridge_disabled.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebadge img[src*="/luci-static/resources/icons/bridge_disabled.png"],li img[src*="/luci-static/resources/icons/bridge_disabled.png"]{background-image:url(../images/bridge_disabled.png);background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px;width:0}#__status-ifc-signal img[src*="/luci-static/resources/icons/bridge_disabled.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/tunnel.png"],#wan6_i img[src*="/luci-static/resources/icons/tunnel.png"],img[src*="/luci-static/resources/icons/tunnel.png"]{background-image:url(../images/tunnel.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebadge img[src*="/luci-static/resources/icons/tunnel.png"],li img[src*="/luci-static/resources/icons/tunnel.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/tunnel.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}#wan4_i img[src*="/luci-static/resources/icons/tunnel_disabled.png"],#wan6_i img[src*="/luci-static/resources/icons/tunnel_disabled.png"],img[src*="/luci-static/resources/icons/tunnel_disabled.png"]{background-image:url(../images/tunnel_disabled.png);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebadge img[src*="/luci-static/resources/icons/tunnel_disabled.png"],li img[src*="/luci-static/resources/icons/tunnel_disabled.png"]{background-size:16px 16px;height:16px;width:16px;padding:0 0 0 16px}#__status-ifc-signal img[src*="/luci-static/resources/icons/tunnel_disabled.png"]{background-size:32px 32px!important;height:32px!important;width:32px!important;padding:0 0 0 32px!important;width:0}img[src*="/luci-static/resources/icons/wifi_big.png"]{background-image:url(../images/wifi_big.png);background-size:64px 64px;height:64px;padding:0 0 0 64px;width:0}img[src*="/luci-static/resources/icons/wifi_big_disabled.png"]{background-image:url(../images/wifi_big_disabled.png);background-size:64px 64px;height:64px;padding:0 0 0 64px;width:0}img[src*="/luci-static/resources/icons/loading.gif"]{background-image:url(../images/loading.gif);background-size:32px 32px;height:32px;width:32px;padding:0 0 0 32px;width:0}.ifacebox-body img{background-size:20px 20px;width:20px!important;height:20px!important;padding:0 0 0 20px!important}.ifacebox-head{border-radius:4px 4px 0 0}img[src*="/luci-static/resources/cbi/add.gif"]{background-image:url(../images/add.png);background-size:20px 20px;height:20px;padding:0 0 0 20px;width:0;z-index:2}img[src*="/luci-static/resources/cbi/remove.gif"]{background-image:url(../images/remove.png);background-size:20px 20px;height:20px;padding:0 0 0 20px;width:0;z-index:2}img[src*="/luci-static/resources/cbi/reload.gif"]{background-image:url(../images/reload.png);background-size:20px 20px;height:20px;padding:0 0 0 20px;width:0;z-index:2}img[src*="/luci-static/resources/icons/signal-75-100.png"]{background-image:url(../images/signal-75-100.png);image-rendering:pixelated;background-size:24px 24px;height:24px;width:24px;padding:0 0 0 24px;z-index:2}img[src*="/luci-static/resources/icons/signal-50-75.png"]{background-image:url(../images/signal-50-75.png);image-rendering:pixelated;background-size:24px 24px;height:24px;width:24px;padding:0 0 0 24px;z-index:2}img[src*="/luci-static/resources/icons/signal-25-50.png"]{background-image:url(../images/signal-25-50.png);image-rendering:pixelated;background-size:24px 24px;height:24px;width:24px;padding:0 0 0 24px;z-index:2}img[src*="/luci-static/resources/icons/signal-0-25.png"]{background-image:url(../images/signal-0-25.png);image-rendering:pixelated;background-size:24px 24px;height:24px;width:24px;padding:0 0 0 24px;z-index:2}img[src*="/luci-static/resources/icons/signal-0.png"]{background-image:url(../images/signal-0.png);image-rendering:pixelated;background-size:24px 24px;height:24px;width:24px;padding:0 0 0 24px;z-index:2}img[src*="/luci-static/resources/icons/signal-none.png"]{background-image:url(../images/signal-none.png);image-rendering:pixelated;background-size:24px 24px;height:24px;width:24px;padding:0 0 0 24px;z-index:2}.myIcon{font-family:design!important;font-style:normal!important;font-variant:normal!important;text-transform:none!important}.myIcon-logout:after{content:"\e005"}.myIcon-reboot:after{content:"\e02a"}.myIcon-wifi:after{content:"\e00c"}.main{top:50px;bottom:0;position:relative;height:100%;height:calc(100% - 4rem)}.main>.loading{position:fixed;width:100%;height:100%;z-index:1000;display:block;background-color:#f0f0f0;top:0}.main>.loading>span{display:block;text-align:center;margin-top:2rem;color:#888;font-size:1rem}.main>.loading>span>.loading-img:before{content:"\e603"}.main>.loading>span>.loading-img{animation:anim-rotate 2s infinite linear;margin-right:.2rem;display:inline-block}.node-main-login{text-align:center;background-color:var(--bgwhite)!important}.node-main-login .cbi-section-node>.cbi-value:nth-of-type(2n){background:0 0}.node-main-login h2{font-size:1.5rem}.node-main-login header{display:none}.node-main-login>.main>.main-left{display:none}.node-main-login>.main>.main-right{width:100%}.node-main-login>.main fieldset{padding:0!important;margin-bottom:1rem;display:inline;background:0 0;border:none;box-shadow:none;overflow:hidden}.node-main-login>.main fieldset .cbi-value-title{display:none!important}.node-main-login>.main .cbi-section{margin-top:10px!important}.node-main-login>.main .cbi-map{}.node-main-login>.main fieldset .cbi-value{}.node-main-login>.main fieldset .cbi-value-title{padding:10px 0 10px 5px!important}.node-main-login>.main .cbi-value{border:none}.node-main-login>.main .cbi-value-title{width:7rem}.node-main-login>.main #maincontent{display:flex;height:100%;text-align:center;align-items:center;align-content:center;justify-content:center}.node-main-login>.main form>div:nth-last-child(1){}.node-main-login>.main .cbi-value>*{display:inline-block!important}.node-main-login>.main .cbi-input-user,.node-main-login>.main .cbi-input-password{appearance:none;outline:0;padding:0 0 0 35px;background-repeat:no-repeat;background-position:10px 10px;background-size:18px 18px;min-width:15rem}.node-main-login>.main .cbi-input-user{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjI3Mzg2IiBkPSJNMTIgNGE0IDQgMCAwIDEgNCA0IDQgNCAwIDAgMS00IDQgNCA0IDAgMCAxLTQtNCA0IDQgMCAwIDEgNC00bTAgMTBjNC40Mi4wIDggMS43OSA4IDR2Mkg0di0yYzAtMi4yMSAzLjU4LTQgOC00eiIvPjwvc3ZnPg==)}.node-main-login>.main .cbi-input-password{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjI3Mzg2IiBkPSJNMTIgMTdhMiAyIDAgMCAwIDItMiAyIDIgMCAwIDAtMi0yIDIgMiAwIDAgMC0yIDIgMiAyIDAgMCAwIDIgMm02LTlhMiAyIDAgMCAxIDIgMnYxMGEyIDIgMCAwIDEtMiAySDZhMiAyIDAgMCAxLTItMlYxMGEyIDIgMCAwIDEgMi0yaDFWNmE1IDUgMCAwIDEgNS01IDUgNSAwIDAgMSA1IDV2MmgxbS02LTVhMyAzIDAgMCAwLTMgM3YyaDZWNmEzIDMgMCAwIDAtMy0zeiIvPjwvc3ZnPg==)}.node-main-login footer{bottom:0;position:absolute;width:100%}.navbar{overflow:hidden;position:fixed;bottom:0;width:100%;border-top:var(--navBorder);text-align:center;height:calc(50px + constant(safe-area-inset-bottom));height:calc(50px + env(safe-area-inset-bottom));background-color:var(--navbgColor);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navbar a{float:left;text-align:center;padding:8px 0;width:20%;text-decoration:none;max-width:100px}.cbi-map{margin-top:10px}#cbi-shadowsocksr .cbi-map-descr{display:none}.navbar a img{width:28px}@keyframes anim-rotate{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}.main-left{float:left;width:18rem;background-color:var(--mainleftbgColor);overflow-x:auto;height:calc(100% - 3.5rem);position:fixed;padding-top:15px;box-shadow:0 0 4px transparent;transition:visibility 100ms,width 100ms}.main-right{width:85%;width:calc(100% - 18rem);float:right;height:100%;border-left:var(--sectionBorder)}.main-right>#maincontent{}.pull-right{position:absolute;top:-2px;right:30px;cursor:pointer}.pull-left{float:left}header>.container{margin:0;padding:0}header>.container>.brand{font-size:25px;font-family:genjyuugothic-medium;line-height:60px;color:var(--logo_color);cursor:default;display:block;width:18rem;height:60px;text-align:center;float:left;font-weight:900;letter-spacing:1px;padding:0 4.5rem;transition:.1s ease-in-out;position:absolute}header>.container>a[class=brand]:after{content:"";font-size:14px;font-family:Tahoma;position:absolute;top:-10px;font-weight:400!important}header>.container>.brand-hostname{font-size:14px;line-height:60px;color:#555;cursor:default;display:block;width:18rem;padding-right:10px;height:60px;text-align:left;float:left;margin-top:7px;font-weight:300;margin-left:-15px}.warning{background-color:#ff7d60!important;color:#fff}.errorbox,.alert-message{margin:0 0 10px;padding:20px;line-height:1.5;font-family:inherit;min-width:inherit;overflow:auto;border-radius:10px;color:var(--alertColor);background-color:var(--alertBackground)}.errorbox{color:#fff;background-color:#ff6767;border-radius:10px}.error{color:red}p#shadowsocksr_status{padding:3px}#maincontent>.container>div:nth-child(1).alert-message.warning>a{font:inherit;overflow:visible;text-transform:none;display:inline-block;margin-bottom:0;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;min-width:6rem;padding:.5rem 1rem;font-size:14px;line-height:1.42857143;color:#fff;background-color:#5bc0de;border-color:#46b8da;margin-top:2rem;text-decoration:inherit}.main>.main-left>.nav{overflow-y:visible!important;font-size:1rem;width:90%;margin:auto;margin-bottom:90px}.main>.main-left>.nav>li a{color:var(--activeColor);display:block;border-radius:6px;cursor:pointer;font-weight:700;font-size:1.1rem;transition:all .1s}.main>.main-left>.nav>li{cursor:pointer;padding-top:6px}.main>.main-left>.nav>.slide{padding:0;padding-top:8px}.main>.main-left>.nav>.slide>a:before{display:inline-block;left:-10px;top:1px;position:relative;font-family:design!important;font-weight:700!important;text-transform:none!important;speak:none;font-size:1.2rem!important;-webkit-font-smoothing:antialiased}.main>.main-left>.nav>.slide>.menu::after{right:.5rem;top:.8rem;font-family:design!important;font-style:normal!important;font-variant:normal!important;content:"\eb03";float:right;padding-right:5px;line-height:1.6;-moz-osx-font-smoothing:grayscale;transition:all .1s ease;text-rendering:auto;-webkit-font-smoothing:antialiased}.main .main-left .nav li.slide .menu.active::after{transform:rotate(90deg)}.main>.main-left>.nav>.slide>a[data-title=Status]:before{content:"\e6b8"}.main>.main-left>.nav>.slide>a[data-title=System]:before{content:"\e645"}.main>.main-left>.nav>.slide>a[data-title=Modem]:before{content:"\e67e"}.main>.main-left>.nav>.slide>a[data-title=Services]:before{content:"\e6cb"}.main>.main-left>.nav>.slide>a[data-title=Docker]:before{content:"\44"}.main>.main-left>.nav>.slide>a[data-title=NAS]:before{content:"\eb04"}.main>.main-left>.nav>.slide>a[data-title=VPN]:before{content:"\56"}.main>.main-left>.nav>.slide>a[data-title=Network]:before{content:"\72"}.main>.main-left>.nav>.slide>a[data-title="Bandwidth Monitor"]:before{content:"\e764"}.main .main-left .nav li.slide .menu[data-title=Statistics]:before{content:"\e604"}.main .main-left .nav li.slide .menu[data-title=Control]:before{content:"\e67a"}.main .main-left .nav li.slide .menu[data-title=Asterisk]:before{content:"\e7dd"}.main>.main-left>.nav>.slide>a[data-title=QuickStart]:before,.main>.main-left>.nav>li>a[data-title="Inital Setup"]:before,.main>.main-left>.nav>li>a[data-title=NetworkGuide]:before,.main>.main-left>.nav>li>a[href="/cgi-bin/luci//admin/wizard"]:before{content:"\e719"}.main>.main-left>.nav>li>a[data-title=iStore]:before{content:"\e676"}.main>.main-left>.nav>li>a[data-title=Logout]{padding:.675rem 0 .675rem 2.5rem}.main>.main-left>.nav>li>a[data-title=Logout]:before{content:"\e641"}.main>.main-left>.nav>li>a[data-title=Reboot]{padding:6px 25px}.main>.main-left>.nav>li>a[data-title=Reboot]:before{content:"\e004"}.main>.main-left>.nav>.slide>ul{display:none;list-style:dotted}.main>.main-left>.nav>.slide>.menu{display:block;padding:.675rem 0 .675rem 2.5rem;text-decoration:none;cursor:pointer}.main>.main-left>.nav>.slide>.menu2{display:block;padding:.675rem 0 .675rem 2.5rem;text-decoration:none;cursor:pointer}.main>.main-left>.nav>li:hover,.main>.main-left>.nav>.slide>.menu:hover{background:var(--activeColor);color:#fff}.main>.main-left>.nav>.slide>.menu2:hover{background:var(--activeColor);color:#fff}.main>.main-left>.nav>.slide:hover{background:0 0}.slide-menu{overflow:hidden}.main>.main-left>.nav>.slide>.slide-menu>li{margin-top:8px;border-radius:6px}.main>.main-left>.nav>.slide>.slide-menu>.active{background-color:var(--activeColor)}.main>.main-left>.nav>.slide>.slide-menu>li>a{position:relative;display:block;color:var(--textColor);vertical-align:middle;background:0 0!important;border:none!important;text-transform:capitalize;font-size:1rem;margin:.1rem .5rem;padding:.675rem 0 .675rem 3.2rem}.main .main-left .nav li.slide .slide-menu .active a{color:#000}.main>.main-left>.nav>.slide>.slide-menu>li>a:hover{color:#fff}.main>.main-left>.nav>.slide>.slide-menu>.active>a{color:#fff}.main>.main-left>.nav>.slide>.slide-menu>li:hover{background:var(--activeColor);color:#fff!important;transition:all .1s}.main>.main-left>.nav>.slide>.slide-menu>.active:hover{background-color:var(--activeColor);cursor:pointer}.cbi-tab-descr{padding:10px}li{list-style-type:none}#maincontent>.container{margin:30px 30px 50px}h1{color:var(--activeColor);font-size:20px;padding-bottom:10px;border-bottom:1px solid #eee}h2{color:var(--activeColor);padding:0 12px 6px;text-transform:capitalize}h3{font-size:1.2rem;color:var(--activeColor);font-weight:700;padding:0 12px 10px}h4{}label{display:inline-block;vertical-align:middle}fieldset{padding:10px;border:1px;font-weight:400;font-style:normal;line-height:1;font-family:inherit;text-align:left;min-width:inherit;overflow-x:auto;overflow-y:hidden;background-color:var(--sectionbgColor);-webkit-overflow-scrolling:touch}fieldset>legend{display:none!important}fieldset>fieldset{padding:0}.panel-title{width:100%;display:block;padding:10px;font-weight:700;font-size:1rem}table{border-spacing:0;border-collapse:collapse;width:100%;border:0 solid #eee!important;margin:0!important}strong{font-weight:700;padding:2px}#lb_load01_cur,#lb_load01_peak,#lb_load05_cur,#lb_load15_cur{text-align:right!important}#lb_load01_peak{text-align:left!important}#lb_load01_cur{}table>tbody>tr>td,table>tbody>tr>th,table>tfoot>tr>td,table>tfoot>tr>th,table>thead>tr>td,table>thead>tr>th{padding:12px;white-space:nowrap;line-height:1.5;vertical-align:middle!important}.node-services-appfilter table>tbody>tr>th,.node-services-appfilter table>tbody>tr>td,.node-nlbw-usage table>tbody>tr>th,.node-nlbw-usage table>tbody>tr>td{text-align:center}table>tbody>tr{border-bottom:var(--cbilineColor)!important}table>tbody>tr:last-child{border-bottom:none!important}.cbi-section-table-cell{text-align:center}.cbi-section-table-row{text-align:center}.cbi-section-remove{margin-bottom:2px}.cbi-section-remove>input{background-color:#c06}fieldset>table>tbody>tr:nth-of-type(odd){background-color:var(--sectionbgColor2)}#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%}.node-status-overview>.main fieldset:nth-child(6) td:nth-child(2),.node-status-overview table[id=wifi_status_table]>tbody>tr>td{white-space:normal}#swaptotal>div,#swapfree>div,#swapcache>div,#memfree>div,#membuff>div,#conns>div,#memcache>div,#memtotal>div{width:100%!important;border-color:var(--progressbarColor)!important;background-color:var(--progressbarColor)!important;border-radius:3px}#swaptotal>div>div,#swapfree>div>div,#swapcache>div>div,#memfree>div>div,#membuff>div>div,#conns>div>div,#memcache>div>div,#memtotal>div>div{background-color:var(--progressbar)!important;color:var(--progressbartxtColor)!important;border-radius:3px}#swaptotal div div,#swapfree div div,#swapcache div div,#memfree div div,#membuff div div,#conns div div,#memcache div div,#memtotal div div{align-items:center;align-content:center;justify-content:center;display:flex}#swaptotal div div small,#swapfree div div small,#swapcache div div small,#memfree div div small,#membuff div div small,#conns div div small,#memcache div div small,#memtotal div div small{font-size:.75rem!important;line-height:130%;color:var(--progressbartxtColor)!important}.cbi-value-field{width:65%}.node-system-admin .cbi-value-field li div{padding:0!important}.node-system-admin em{padding:0!important}.node-nlbw-display hr{display:none}.node-nlbw-display p{line-height:1.5;padding:0 10px 5px}#cbi-network .cbi-value-field ul,#cbi-wireless .cbi-value-field ul,#cbi-firewall .cbi-value-field ul{overflow-x:auto;white-space:nowrap}#cbi-network .cbi-value-field ul input[type=text],#cbi-wireless .cbi-value-field ul input[type=text],#cbi-firewall .cbi-value-field ul input[type=text]{max-width:10rem;width:100%!important}div [id*=cbi-network-] [id*=-__status] table,div [id*=cbi-wireless] [id*=-__status] table{width:auto}div [id*=cbi-network-] [id*=-__status] table td,div [id*=cbi-wireless] [id*=-__status] table td{width:auto;padding:0!important}div [id*=cbi-network-] [id*=-__status] table td small,div [id*=cbi-wireless] [id*=-__status] table td small{width:auto}.node-network-wifi .cbi-section-table tr .cbi-value-field,.node-network-wireless .cbi-section-table tr .cbi-value-field{width:unset!important;text-align:right}.node-network-wireless #iw-assoclist .cbi-section-table-row td[colspan="6"],.node-network-wireless .cbi-section-table .cbi-section-table-row td[colspan="6"],.node-network-wifi .cbi-section-table .cbi-section-table-row td[colspan="8"]{text-align:center!important}.node-network-wireless #iw-assoclist .cbi-section-table-row td div{max-width:unset!important}.node-network-wifi table,td,th{border-top:unset!important}.node-network-wifi .cbi-section-table td[colspan="2"]{padding-left:unset!important}.node-status-routes .cbi-section-node{max-height:500px;overflow-y:auto;overflow-x:auto}table table{border:none}.cbi-value-field table{border:none}.cbi-value-field label{padding:0}td>table>tbody>tr>td{border:none}.cbi-value-field>table>tbody>tr>td{border:none}#container\.nlbw\.traffic th,#container\.nlbw\.traffic td,#container\.nlbw\.layer7 th,#container\.nlbw\.layer7 td,#container\.nlbw\.ipv6 th,#container\.nlbw\.ipv6 td,#container\.nlbw\.export th,#container\.nlbw\.export td{padding:12px!important;border-top:none;border:unset;text-align:center}#container\.nlbw\.traffic tr td:nth-child(4),#container\.nlbw\.layer7 tr td:nth-child(3),#container\.nlbw\.ipv6 tr td:nth-child(4),#container\.nlbw\.export tr td:nth-child(4),#container\.nlbw\.traffic tr td:nth-child(6),#container\.nlbw\.layer7 tr td:nth-child(5),#container\.nlbw\.ipv6 tr td:nth-child(6),#container\.nlbw\.export tr td:nth-child(6){text-align:right!important}#container\.nlbw\.traffic tr td:nth-child(5),#container\.nlbw\.layer7 tr td:nth-child(4),#container\.nlbw\.ipv6 tr td:nth-child(5),#container\.nlbw\.export tr td:nth-child(5),#container\.nlbw\.traffic tr td:nth-child(7),#container\.nlbw\.layer7 tr td:nth-child(6),#container\.nlbw\.ipv6 tr td:nth-child(7),#container\.nlbw\.export tr td:nth-child(7){text-align:left!important}td#__status-ifc-signal{width:60px!important}.cbi-button{-webkit-appearance:none;text-transform:uppercase;color:#fff;background-color:#337ab7;transition:all .1s ease-in-out;display:inline-block;border:none;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation;background-image:none;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:auto!important;min-width:80px;padding:0 8px;border-radius:var(--commonRadius0);height:35px;line-height:35px}.cbi-button:hover,.cbi-button:focus,.cbi-button:active{color:#fff;outline:0;text-decoration:none;background-color:#6a65d6}.cbi-button:hover,.cbi-button:focus{box-shadow:0 1px 1px rgba(0,0,0,.05)}.cbi-button:active{box-shadow:0 1px 1px rgba(0,0,0,.05)}.cbi-button:disabled{cursor:not-allowed;pointer-events:none;opacity:.6;box-shadow:none}form.inline+form.inline,.cbi-button+.cbi-button{}.cbi-button-reset,.cbi-input-remove{color:#fff!important;background-color:#617486!important}.cbi-button-reset:hover,.cbi-input-remove:hover,.cbi-button-remove:hover{color:#fff!important;background-color:#536473!important}.cbi-button-link,.cbi-input-find,.cbi-input-save,.cbi-button-add,.cbi-button-save,.cbi-button-find,.cbi-input-reload,.cbi-button-reload{color:var(--bttextColor);background-color:#337ab7!important;border-color:#337ab7!important}.cbi-button-link:hover,.cbi-input-find:hover,.cbi-input-save:hover,.cbi-button-add:hover,.cbi-button-save:hover,.cbi-button-find:hover,.cbi-input-reload:hover,.cbi-button-reload:hover{color:#fff!important;background-color:#6a82ae!important;border-color:#6a82ae!important}.cbi-input-apply,.cbi-button-apply,.cbi-button-edit{color:#fff!important;background-color:var(--activeColor)}.cbi-input-reset,.cbi-button-remove{color:#fff!important;background:#617486}.a-to-btn{text-decoration:none}.tabs{margin:15px 0;overflow-x:auto}.cbi-tabmenu>li,.tabs>li{display:table-cell}.cbi-tabmenu>li{border-radius:var(--tabmenuRadius)}.tabs>li>a{text-decoration:none;padding:0 6px;float:left;display:block;white-space:nowrap;height:2.5rem;line-height:2.5rem;font-size:.92rem}.cbi-tabmenu>li>a{text-decoration:none;float:left;display:block;white-space:nowrap;height:2.5rem;line-height:2.5rem;font-size:.92rem;margin:0 10px}.tabs>li[class~=active],.tabs>li:hover{cursor:pointer}.tabs>li[class~=active]>a{color:var(--activeColor)!important;padding-bottom:8px;border-bottom:var(--activeColor) 2px solid}.tabs>li:hover{}.cbi-tabmenu{border-top:var(--sectiontabBorder);border-left:var(--tabmenuBorderLR);border-right:var(--tabmenuBorderLR);border-bottom:var(--tabmenuBottom);background-color:var(--tabmenubgColor);width:100%;overflow-x:auto;margin-top:5px;margin-bottom:10px}.cbi-tabmenu>li:hover{background-color:none}.cbi-tabmenu>li[class~=cbi-tab]{background-color:none}.cbi-tabmenu>li[class~=cbi-tab] a{color:var(--activeColor)!important;border-bottom:2px solid var(--activeColor)!important}.cbi-section-node-tabbed{margin-top:0;border-bottom:var(--sectiontabBorder);border-left:var(--sectiontabBorder);border-right:var(--sectiontabBorder);border-radius:0 0}.cbi-tabcontainer{clear:both}.cbi-tabcontainer>.cbi-value:nth-of-type(2n){background-color:var(--sectionbgColor2)}.cbi-section-node>.cbi-value:nth-of-type(2n){background-color:var(--sectionbgColor2)}div>.cbi-value:nth-of-type(2n){background-color:var(--sectionbgColor2)}.cbi-value-field,.cbi-value-description{display:table-cell}.cbi-value-field{}.cbi-value-helpicon>img{display:none}.cbi-value-helpicon:before{content:"\f059"}.cbi-value-description{opacity:.6;padding-left:4px}.cbi-value-title{word-wrap:break-word;display:table-cell;width:35%;float:left;padding:13px 10px 5px 3px}.cbi-value{display:flex;width:100%;align-items:center;align-content:center;justify-content:flex-start;min-height:40px;padding:8px 10px;flex-flow:row wrap;border-bottom:var(--cbilineColor)}.cbi-value:last-child{border-bottom:none}.cbi-value strong{font-weight:400}.cbi-section-table-descr>.cbi-section-table-cell,.cbi-section-table-titles>.cbi-section-table-cell{border:none}.cbi-rowstyle-2{background-color:var(--sectionbgColor2)}.cbi-rowstyle-2 .cbi-button-up,.cbi-rowstyle-2 .cbi-button-down{}.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell{width:auto!important}.cbi-section-table tr .cbi-value-field{text-align:center;width:20%!important;padding:10px!important}.cbi-section-table tr .cbi-value-field input{width:auto}.cbi-section-table tr .cbi-value-field .ifacebox{margin:auto;width:fit-content;min-width:60px}.cbi-section-descr{padding:3px 10px}.cbi-map-descr{padding:5px 5px 5px 12px}.cbi-map-descr h3{font-size:.92rem;font-weight:400;color:#666}#cbi-vsftpd .cbi-map-descr{color:var(--activeColor);padding:0 12px 0;font-size:1.2rem;font-weight:700}.hidden{display:none}.left{text-align:left!important}.right{text-align:right!important}.right .cbi-button{height:20px;line-height:20px;min-width:60px;margin:0}.inline{display:inline}.cbi-page-actions{text-align:center}.cbi-value input[type=password],.cbi-value input[type=text]{}.ifacebadge{display:inline-flex;padding:5px;background-color:var(--badgebgColor);align-content:center;align-items:center;border-radius:var(--commonRadius1);border:var(--badgeBorder);color:#666}#content_syslog{padding:5px;margin-top:10px;border-radius:10px;background-color:var(--sectionbgColor);box-shadow:3px 3px 3px transparent}.ifacebadge>img{float:right;margin-left:.3rem}img.cbi-image-button{vertical-align:middle}fieldset.cbi-section{border:var(--sectionBorder);margin-bottom:20px;border-radius:10px;margin-top:5px}.cbi-input-textarea,textarea{color:var(--inputtextColor);padding:10px;line-height:normal;border:var(--sectionBorder);background-color:var(--inputbgColor);transition:color 150ms ease,border-color 150ms ease,opacity 150ms ease;-webkit-transition:color 150ms ease,border-color 150ms ease,opacity 150ms ease;outline-style:none;vertical-align:baseline;border-radius:10px;font-family:Menlo,Mono;font-size:.9rem;white-space:pre;margin-bottom:5px}#syslog{width:100%;min-height:15rem;padding:10px;margin-bottom:20px;border-radius:0;background-color:var(--sectionbgColor);border:none}#wan4_i,#wan6_i{width:50px!important}.uci-change-list{font-family:monospace}.uci-change-list *:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.uci-change-list *:nth-last-child(2){border-bottom-left-radius:5px;border-bottom-right-radius:5px}.uci-change-list ins,.uci-change-legend-label ins{text-decoration:none;border:1px solid #0f0;background-color:#cfc;display:block;padding:2px;color:#000;overflow-x:auto}.uci-change-legend .uci-change-legend-label ins{overflow-x:unset;border-radius:var(--commonRadius1)}.uci-change-list del,.uci-change-legend-label del{text-decoration:none;border:1px solid red;background-color:#fcc;display:block;font-style:normal;padding:2px;color:#000;overflow-x:auto}.uci-change-legend .uci-change-legend-label del{overflow-x:unset;border-radius:var(--commonRadius1)}.uci-change-list var,.uci-change-legend-label var{text-decoration:none;border:1px solid #ccc;background-color:#eee;display:block;font-style:normal;padding:2px;color:#000;overflow-x:auto}.uci-change-legend .uci-change-legend-label var{overflow-x:unset;border-radius:var(--commonRadius1)}.uci-change-list var ins,.uci-change-list var del{border:none;white-space:pre;font-style:normal;padding:0;color:#000;overflow-x:auto}.uci-change-legend{padding:5px}.uci-change-legend-label{width:150px;float:left;display:flex;align-items:center}.uci-change-legend-label>ins,.uci-change-legend-label>del,.uci-change-legend-label>var{float:left;margin-right:4px;width:10px;height:10px;display:block}.uci-change-legend-label var ins,.uci-change-legend-label var del{border:none;height:10px;width:10px}.uci-change-list var,.uci-change-list del,.uci-change-list ins{padding:.5rem}#iwsvg,#iwsvg2,#bwsvg{border:var(--sectionBorder)!important;font-family:-apple-system;background:0 0!important}.ifacebox{border:var(--ifaceboxBorderColor) 1px solid;border-radius:var(--commonRadius1);font-size:.92rem;font-weight:400}.ifacebox-head{color:#fff}.ifacebox-body small{font-size:.8rem!important;padding:5px}.ifacebox-body strong{color:#f7f7f7;font-size:0!important}.cbi-image-button{}.zonebadge>.ifacebadge{padding:3px 5px;margin:5px}.zonebadge>input[type=text]{padding:.16rem 1rem;min-width:10rem;margin-top:.3rem}.cbi-value-field .cbi-input-checkbox,.cbi-value-field .cbi-input-radio{vertical-align:middle}.cbi-section-table-row>.cbi-value-field .cbi-input-select{min-width:7rem}.cbi-section-create{padding:0 10px}.cbi-section-create>.cbi-button-add{margin:10px 0}div.cbi-value var,td.cbi-value-field var{font-style:italic;color:#0069d6}small{font-size:small;font-weight:400!important;white-space:normal}.cbi-button-up,.cbi-button-down{display:inline-block;min-width:0;font-size:.9rem}.cbi-optionals{padding:1rem 1rem 0;border-top:1px solid #ccc}#diag-rc-output>pre{display:block;padding:10px;line-height:1.5rem;-moz-border-radius:3px;white-space:pre-wrap;word-wrap:break-word;color:#76838f}input[name=ping],input[name=traceroute],input[name=nslookup]{width:80%}table.cbi-section-table select{width:auto!important}header>.container>.pull-right>*{}#xhr_poll_status>.label.success{padding:.7rem 0;border-radius:20px}#xhr_poll_status_off{padding:.7rem 0;border-radius:20px}.label{padding:0 3px;white-space:nowrap;border-radius:3px;position:absolute;right:5px;top:15px;line-height:150%}.notice{color:var(--activeColor);font-size:.8rem;padding-right:.5rem;border-radius:10px;z-index:10;font-size:1.8rem;font-family:design}#refresh_on,#refresh_off{font-size:1.5rem;font-family:design}#refresh_on{color:var(--activeColor)}#refresh_off{color:var(--progressbarColor)}.darkMask{width:100%;height:100%;position:fixed;background-color:rgba(0,0,0,.56);content:"";z-index:99;display:none}.node-services-shadowsocksr .cbi-input-textarea,.node-nlbw-config .cbi-input-textarea{}.node-services-shadowsocksr #cbi-logview .cbi-section{padding:0}.node-network-diagnostics .cbi-section{border-radius:10px}.node-status-processes>.main table tr td:nth-child(3){white-space:normal}.cbi-map fieldset h3{}.cbi-map fieldset ul li{margin-right:0!important}.node-system-reboot>.main>.main-right p,.node-system-reboot>.main>.main-right h3{margin-left:12px}.node-system-reboot #maincontent{}.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title{margin-bottom:1rem}.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field{display:list-item}.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description{padding-top:1rem;line-height:150%}.node-system-packages>.main table tr td:nth-child(1){width:auto!important}.node-system-packages .cbi-section-node .cbi-value-last{}.node-system-packages .cbi-section-node .cbi-value-last>div{border:none!important;border-radius:3px}.node-system-packages .cbi-section-node .cbi-value-last>div>div{border:none!important;border-radius:3px}.node-system-packages .cbi-section-node .cbi-value-last:nth-last-child(1){padding:auto}.node-system-packages>.main table tr td:nth-last-child(1){white-space:normal;font-size:small;color:#76838f}.node-system-packages>.main .cbi-value>pre{padding:10px;overflow:auto;border-radius:10px}.node-system-packages #cbi-distfeedconf .cbi-section,.node-system-packages #cbi-customfeedconf .cbi-section{border-radius:10px}.node-system-packages .cbi-value-field{width:58%}#container\.nlbw\.traffic,#container\.nlbw\.layer7,#container\.nlbw\.ipv6,#container\.nlbw\.export{margin-top:0;margin-top:0;padding:10px;text-align:center;border-bottom:var(--sectionBorder);border-left:var(--sectionBorder);border-right:var(--sectionBorder);background-color:var(--sectionbgColor);border-radius:10px}#container\.nlbw\.export ul li{padding:5px;width:150px;margin:10px;border-radius:var(--commonRadius1);border:#ccc 1px solid}.cbi-tabmenu+.cbi-section ul{text-align:left}.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select{min-width:4rem}.node-status-iptables>.main div>.cbi-map>form{position:static!important;margin:10px 0 20px;padding:12px;border:0;font-weight:400;font-style:normal;line-height:1;font-family:inherit;min-width:inherit;overflow-x:auto;overflow-y:hidden;box-shadow:3px 3px 3px transparent;border-radius:10px;background-color:var(--bgwhite);-webkit-overflow-scrolling:touch}.node-system-flashops fieldset fieldset{border:none}.node-system-flashops br{display:none}.node-system-flashops .cbi-section{}.node-system-flashops .cbi-section-descr{padding:12px;line-height:1.5;border-radius:6px}.node-status-iptables .cbi-tabmenu,.node-system-packages .cbi-tabmenu,.node-system-flashops .cbi-tabmenu{}#cbi-firewall-redirect .cbi-section-table-titles .cbi-section-table-cell{text-align:left}#cbi-firewall-redirect table *,#cbi-network-switch_vlan table *,#cbi-firewall-zone table *{font-size:small}#cbi-firewall-redirect table input[type=text],#cbi-network-switch_vlan table input[type=text],#cbi-firewall-zone table input[type=text]{width:5rem}#cbi-firewall-redirect table select,#cbi-network-switch_vlan table select,#cbi-firewall-zone table select{min-width:3.5rem}.node-status-realtime table>tbody>tr>td{text-align:left!important;padding:10px 3px}.node-status-realtime table[id=connections]>tbody>tr>td{padding:10px 3px;text-align:center!important}.node-status-realtime table{table-layout:auto!important}.node-status-realtime fieldset[id=cbi-table-table]{background-color:unset!important}.node-status-realtime fieldset[id=cbi-table-table]>table>tbody>tr:nth-of-type(odd),.node-status-realtime fieldset[id=cbi-table-table] table[id=connections] tr.cbi-section-table-row.cbi-rowstyle-2{background-color:unset}.node-services-appfilter .cbi-section.cbi-tblsection,.node-nas-fileassistant #list-content,.node-status-realtime fieldset[id=cbi-table-table] .cbi-section-node{overflow:auto}select#cbi\.combobox\.cbid\.shadowsocksr\.cfg013fd6\.tunnel_forward{overflow:hidden}body.lang_pl.node-main-login .cbi-value-title{width:12rem}#detail-bubble{width:unset!important}#detail-bubble.in{color:#000;padding-bottom:calc(60px + env(safe-area-inset-bottom));left:19rem!important;width:calc(100vw - 21.25rem)!important}#detail-bubble .head{display:block;overflow:auto}#detail-bubble #bubble-table{display:inline-table;overflow:auto}@media screen and (max-width:1280px){header{}header>.container{}.main{height:calc(100% - 3.5rem)}.main-left{width:calc(0% + 18rem);top:50px}.main-right{width:calc(100% - 18rem)}table{font-size:.9rem!important;width:100%!important}.main>.main-left>.nav>li,.main>.main-left>.nav>li a,.main>.main-left>.nav>.slide>.menu{font-size:1.1rem}.main>.main-left>.nav>.slide>.slide-menu>li>a{font-size:1rem;text-transform:capitalize}img[src*="/luci-static/resources/cbi/add.gif"]{right:55px;display:block;position:absolute;margin-top:-34px}img[src*="/luci-static/resources/cbi/remove.gif"]{right:55px;display:block;position:absolute;margin-top:-34px}img[src*="/luci-static/resources/cbi/reload.gif"]{right:55px;display:block;position:absolute;margin-top:-34px}#detail-bubble{width:unset!important}#detail-bubble.in{color:#000;padding-bottom:calc(60px + env(safe-area-inset-bottom));left:19rem!important;width:calc(100vw - 21.25rem)!important}#detail-bubble .head{display:block;overflow:auto}#detail-bubble #bubble-table{display:inline-table;overflow:auto}.node-nlbw-usage table{display:block;overflow:auto}#container\.nlbw\.traffic table,#container\.nlbw\.layer7 table,#container\.nlbw\.ipv6 table,#container\.nlbw\.export table{display:block;overflow:auto}}@media screen and (max-width:992px){.main-left{width:0;position:fixed;z-index:100}.main-right{width:100%}.showSide{margin:0;padding:0;display:inline-block;position:absolute;width:18.75rem;height:2.8125rem;padding:1.15rem 2rem;z-index:100}.showSide:before{content:"\e20e";font-size:1.7rem}#maincontent>.container{margin:20px}.node-main-login .showSide{display:none!important}.cbi-value-title{width:35%}.node-network-diagnostics>.main .cbi-map fieldset>div *{width:100%!important}.node-network-diagnostics>.main .cbi-map fieldset>div input[type=text]{}.node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type=text]{margin:0!important}.node-network-diagnostics>.main .cbi-map fieldset>div select,.node-network-diagnostics>.main .cbi-map fieldset>div input[type=button]{margin:1rem 0 0}.node-network-diagnostics>.main .cbi-map fieldset>div{width:100%!important}.node-main-login>.main .cbi-value-title{text-align:left}img[src*="/luci-static/resources/cbi/add.gif"]{right:45px;display:block;position:absolute;margin-top:-34px}img[src*="/luci-static/resources/cbi/remove.gif"]{right:45px;display:block;position:absolute;margin-top:-34px}img[src*="/luci-static/resources/cbi/reload.gif"]{right:45px;display:block;position:absolute;margin-top:-34px}#detail-bubble{left:unset!important;width:unset!important}#detail-bubble.in{color:#000;padding-bottom:calc(60px + env(safe-area-inset-bottom));left:unset!important;width:calc(100vw)!important}#detail-bubble .head{display:block;overflow:auto}#detail-bubble #bubble-table{display:inline-table;overflow:auto}header{box-shadow:0 2px 4px rgba(0,0,0,.08)}}@media screen and (max-width:700px){#cbi-vssr-servers .cbi-button-add{position:static!important;width:auto!important;height:2rem!important;line-height:2rem!important;color:#fff;display:block;padding:0!important;font-size:.92rem;border-radius:10px!important;box-shadow:none;background-image:none}#cbi-vssr-servers .cbi-section-table-row{margin:10px 0!important}#cbi-vssr-servers .p-in5{padding-bottom:10px!important;margin:0!important}#cbi-vssr-servers .cbi-page-actions{padding-bottom:10px!important}#maincontent>.container{margin:20px}#detail-bubble{left:unset!important;width:unset!important}#detail-bubble.in{color:#000;padding-bottom:calc(60px + env(safe-area-inset-bottom));left:unset!important;width:calc(100vw)!important}#detail-bubble .head{display:block;overflow:auto}#detail-bubble #bubble-table{display:inline-table;overflow:auto}}@media screen and (max-width:470px){#detail-bubble{left:unset!important;width:unset!important}#detail-bubble.in{color:#000;padding-bottom:calc(60px + env(safe-area-inset-bottom));left:unset!important;width:calc(100vw)!important}#detail-bubble .head{display:block;overflow:auto}#detail-bubble #bubble-table{display:block;overflow:auto}.main-right>#maincontent{overflow:auto}div [id*=cbi-network-] [id*=-__status] table td,div [id*=cbi-wireless] [id*=-__status] table td{white-space:normal}.node-system-leds .cbi-section em,.node-network-network #cbi-network .cbi-map .cbi-section-table cbi-section-table-row,.node-network-network #cbi-network .cbi-map .cbi-section-table td{display:block}.node-network-network #cbi-network .cbi-map .cbi-section-table td{width:100%!important;text-align:center!important;white-space:normal}.node-network-network #cbi-network .cbi-map .cbi-button{min-width:60px!important}.node-network-network .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell{flex:1!important}.node-network-network .cbi-section-table .cbi-section-table-titles th:nth-child(2){text-align:center!important}.node-network-network .cbi-section-table .cbi-section-table-titles{display:flex}.node-network-wireless fieldset:nth-child(1) table>tbody>tr>td,.node-network-wireless fieldset:nth-child(2) table>tbody>tr>td{white-space:normal}}@media screen and (max-width:370px){fieldset{}select{width:100%}header{height:55px}h3{padding:0 10px 10px}.showSide{height:45px}#maincontent>.container{margin:20px}.main{top:45px}.main-left{top:45px}.main>.main-left>.nav>.slide>.menu{}.main>.main-left>.nav>.slide>.slide-menu>li>a{}.cbi-value{margin-bottom:20px;display:table;padding:0;border-bottom:none}.cbi-value-title{width:100%;font-weight:700;float:left;padding:0;margin:0;margin-bottom:.25rem}.cbi-section-node{padding:10px!important}.cbi-value-description{width:100%;display:block}.cbi-value>.cbi-value-field{display:block;float:left;width:100%}img[src*="/luci-static/resources/cbi/add.gif"]{right:45px;display:block;position:absolute;margin-top:-34px}img[src*="/luci-static/resources/cbi/remove.gif"]{right:45px;display:block;position:absolute;margin-top:-34px}img[src*="/luci-static/resources/cbi/reload.gif"]{right:45px;display:block;position:absolute;margin-top:-34px}.cbi-section-node>.cbi-value:nth-of-type(2n){background-color:var(--sectionbgColor)}.cbi-tabcontainer>.cbi-value:nth-of-type(2n){background-color:var(--sectionbgColor)}div>.cbi-value:nth-of-type(2n){background-color:var(--sectionbgColor)}.node-main-login>.main .cbi-value{padding:0}.node-main-login>.main form>div:nth-last-child(1){margin-top:2rem}.node-main-login>.main fieldset{margin:0;padding:.5rem}#container\.network\.lan\.physical .cbi-value-title,#cbi-network-1-_ifname .cbi-value-title{width:35%}#cbi-network-1-_ifname .cbi-value-field{width:65%}h2{font-size:1.2rem;text-transform:capitalize}select,input{}input[type=checkbox]{height:1.2rem!important;width:1.2rem!important}#swaptotal div div small,#swapfree div div small,#swapcache div div small,#memfree div div small,#membuff div div small,#conns div div small,#memcache div div small,#memtotal div div small{}#swaptotal div div,#swapfree div div,#swapcache div div,#memfree div div,#membuff div div,#conns div div,#memcache div div,#memtotal div div{}.node-status-iptables>.main div>.cbi-map>form input[type=submit]{margin:0}#cbi-samba-cfg010f89-_tmpl .cbi-value-title{width:15%}#cbi-samba-cfg010f89-_tmpl .cbi-value-field{width:95%}#detail-bubble{left:unset!important;width:unset!important}#detail-bubble.in{color:#000;padding-bottom:calc(60px + env(safe-area-inset-bottom));left:unset!important;width:calc(100vw)!important}#detail-bubble .head{display:block;overflow:auto}#detail-bubble #bubble-table{display:block;overflow:auto}}@media screen and (max-width:315px){.label{position:absolute;right:5px;top:-70px}}#intervalSelect{height:40px!important}.commandbox div{position:unset!important}#cbi-netspeedtest-homebox-{display:unset!important}.node-status-realtime .container{overflow:auto}.node-network-network div[onclick*="document.getElementById('cbid.network."],#cbi-network div[onclick*="document.getElementById('cbid.network."]{background-color:unset!important}form[action="/cgi-bin/luci/admin/network/wireless"] input[class="cbi-button cbi-button-reset"],form[action="/cgi-bin/luci/admin/network/wireless_join"] input[class="cbi-button cbi-input-find"]{height:25px;min-width:80px}.node-services-aliyundrive-webdav #mask-box{background:transparent}.node-services-ddns #cbi-ddns-service input{width:unset}.node-services-ddns .cbi-value input[type=password],.node-services-ddns .cbi-value input[type=text]{width:100%!important}.fb-container .cbi-button{border-radius:var(--commonRadius0);margin:3px 3px 3px 0;height:unset!important}.node-system-commands h3{text-transform:unset}.node-system-commands .commandbox{width:auto;display:inline-block;float:none}.node-system-commands .commandbox p{word-break:keep-all;white-space:nowrap}.node-system-commands div.cbi-map fieldset.cbi-section{align-items:center;text-align:center}.node-system-commands #cbi-luci.cbi-map fieldset.cbi-section{align-items:unset;text-align:unset}.node-network-network .ifacebox strong{color:var(--ifaceboxFontColor);padding:5px}.node-network-firewall .zonebadge strong,.node-network-firewall label strong{color:var(--ifaceboxFontColor)}.node-services-openclash ul li.selected{background-color:var(--liSelectedColor)!important}.node-services-openclash .cbi-button-reset,.node-services-openclash .cbi-input-remove{max-width:unset!important}.node-services-openclash #tab-header ul li.selected,.node-services-openclash #tab-header ul li{color:#000!important;background-color:unset!important}.node-nas-qbittorrent p#qBittorrent_status input{line-height:unset}.node-system-diskman.dialog-format-active #dialog_format .dialog_box{background:var(--alertBackground);border-radius:var(--commonRadius1)}.node-services-watchcat-plus select[id*="cbi.opt.watchcat"]{width:auto}.node-nas-fileassistant .fb-container .cbi-value-owner,.node-nas-fileassistant .fb-container .cbi-value-perm{display:table-cell}.node-services-adguardhome input[onclick*="window.open('http://'+window.location.hostname+':"]{line-height:0}
diff --git a/luci-theme-design/htdocs/luci-static/design/favicon.ico b/luci-theme-design/htdocs/luci-static/design/favicon.ico
new file mode 100644
index 00000000..e65f2031
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/favicon.ico differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/GenJyuuGothic-Medium.otf b/luci-theme-design/htdocs/luci-static/design/fonts/GenJyuuGothic-Medium.otf
new file mode 100644
index 00000000..916b4a11
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/GenJyuuGothic-Medium.otf differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/font.eot b/luci-theme-design/htdocs/luci-static/design/fonts/font.eot
new file mode 100644
index 00000000..9e6ffc9b
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/font.eot differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/font.svg b/luci-theme-design/htdocs/luci-static/design/fonts/font.svg
new file mode 100644
index 00000000..d38d057d
--- /dev/null
+++ b/luci-theme-design/htdocs/luci-static/design/fonts/font.svg
@@ -0,0 +1,16 @@
+
+
+
+Generated by IcoMoon
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/font.ttf b/luci-theme-design/htdocs/luci-static/design/fonts/font.ttf
new file mode 100644
index 00000000..84669323
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/font.ttf differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/font.woff b/luci-theme-design/htdocs/luci-static/design/fonts/font.woff
new file mode 100644
index 00000000..00cf84ea
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/font.woff differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.ttf b/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.ttf
new file mode 100644
index 00000000..033794e5
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.ttf differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.woff b/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.woff
new file mode 100644
index 00000000..45714f9e
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.woff differ
diff --git a/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.woff2 b/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.woff2
new file mode 100644
index 00000000..1de5ca50
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/fonts/iconfont-Regular.woff2 differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/add.png b/luci-theme-design/htdocs/luci-static/design/images/add.png
new file mode 100644
index 00000000..c85ee10a
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/add.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/apple-touch-icon.png b/luci-theme-design/htdocs/luci-static/design/images/apple-touch-icon.png
new file mode 100644
index 00000000..1baa5c7e
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/apple-touch-icon.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/bridge.png b/luci-theme-design/htdocs/luci-static/design/images/bridge.png
new file mode 100644
index 00000000..cd0ce109
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/bridge.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/bridge_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/bridge_disabled.png
new file mode 100644
index 00000000..c603b970
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/bridge_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/ethernet.png b/luci-theme-design/htdocs/luci-static/design/images/ethernet.png
new file mode 100644
index 00000000..eae05cc5
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/ethernet.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/ethernet_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/ethernet_disabled.png
new file mode 100644
index 00000000..66246809
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/ethernet_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/home.png b/luci-theme-design/htdocs/luci-static/design/images/home.png
new file mode 100644
index 00000000..c8e900a9
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/home.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/icon.png b/luci-theme-design/htdocs/luci-static/design/images/icon.png
new file mode 100644
index 00000000..c98e8883
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/icon.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/link.png b/luci-theme-design/htdocs/luci-static/design/images/link.png
new file mode 100644
index 00000000..e5307d9b
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/link.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/loading.gif b/luci-theme-design/htdocs/luci-static/design/images/loading.gif
new file mode 100644
index 00000000..a84d1cac
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/loading.gif differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/openclash.png b/luci-theme-design/htdocs/luci-static/design/images/openclash.png
new file mode 100644
index 00000000..8aed32ab
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/openclash.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/port_down.png b/luci-theme-design/htdocs/luci-static/design/images/port_down.png
new file mode 100644
index 00000000..7e9edacb
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/port_down.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/port_up.png b/luci-theme-design/htdocs/luci-static/design/images/port_up.png
new file mode 100644
index 00000000..2cca1be8
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/port_up.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/rank.png b/luci-theme-design/htdocs/luci-static/design/images/rank.png
new file mode 100644
index 00000000..eccc5c10
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/rank.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/reload.png b/luci-theme-design/htdocs/luci-static/design/images/reload.png
new file mode 100644
index 00000000..192b9add
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/reload.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/remove.png b/luci-theme-design/htdocs/luci-static/design/images/remove.png
new file mode 100644
index 00000000..fce54d92
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/remove.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/signal-0-25.png b/luci-theme-design/htdocs/luci-static/design/images/signal-0-25.png
new file mode 100644
index 00000000..00eaf3d4
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/signal-0-25.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/signal-0.png b/luci-theme-design/htdocs/luci-static/design/images/signal-0.png
new file mode 100644
index 00000000..a24d883c
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/signal-0.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/signal-25-50.png b/luci-theme-design/htdocs/luci-static/design/images/signal-25-50.png
new file mode 100644
index 00000000..ab12b5ef
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/signal-25-50.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/signal-50-75.png b/luci-theme-design/htdocs/luci-static/design/images/signal-50-75.png
new file mode 100644
index 00000000..0329cc65
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/signal-50-75.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/signal-75-100.png b/luci-theme-design/htdocs/luci-static/design/images/signal-75-100.png
new file mode 100644
index 00000000..d033ab1c
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/signal-75-100.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/signal-none.png b/luci-theme-design/htdocs/luci-static/design/images/signal-none.png
new file mode 100644
index 00000000..a03e99b7
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/signal-none.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/ssr.png b/luci-theme-design/htdocs/luci-static/design/images/ssr.png
new file mode 100644
index 00000000..ee9dfd71
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/ssr.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/switch.png b/luci-theme-design/htdocs/luci-static/design/images/switch.png
new file mode 100644
index 00000000..ade12a53
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/switch.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/switch_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/switch_disabled.png
new file mode 100644
index 00000000..346d7527
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/switch_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/tunnel.png b/luci-theme-design/htdocs/luci-static/design/images/tunnel.png
new file mode 100644
index 00000000..b5ff65a6
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/tunnel.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/tunnel_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/tunnel_disabled.png
new file mode 100644
index 00000000..ae4a60bb
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/tunnel_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/user.png b/luci-theme-design/htdocs/luci-static/design/images/user.png
new file mode 100644
index 00000000..a0ffe2b4
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/user.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/vlan.png b/luci-theme-design/htdocs/luci-static/design/images/vlan.png
new file mode 100644
index 00000000..5df3667c
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/vlan.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/vlan_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/vlan_disabled.png
new file mode 100644
index 00000000..c0cef94f
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/vlan_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/wifi.png b/luci-theme-design/htdocs/luci-static/design/images/wifi.png
new file mode 100644
index 00000000..4897d4a0
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/wifi.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/wifi_big.png b/luci-theme-design/htdocs/luci-static/design/images/wifi_big.png
new file mode 100644
index 00000000..f63c29ac
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/wifi_big.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/wifi_big_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/wifi_big_disabled.png
new file mode 100644
index 00000000..c0556b9a
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/wifi_big_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/images/wifi_disabled.png b/luci-theme-design/htdocs/luci-static/design/images/wifi_disabled.png
new file mode 100644
index 00000000..b511e9bc
Binary files /dev/null and b/luci-theme-design/htdocs/luci-static/design/images/wifi_disabled.png differ
diff --git a/luci-theme-design/htdocs/luci-static/design/js/design.js b/luci-theme-design/htdocs/luci-static/design/js/design.js
new file mode 100644
index 00000000..3bf754f2
--- /dev/null
+++ b/luci-theme-design/htdocs/luci-static/design/js/design.js
@@ -0,0 +1,69 @@
+XHR=function()
+{this.reinit=function()
+{if(window.XMLHttpRequest){this._xmlHttp=new XMLHttpRequest();}
+else if(window.ActiveXObject){this._xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
+else{alert("xhr.js: XMLHttpRequest is not supported by this browser!");}}
+this.busy=function(){if(!this._xmlHttp)
+return false;switch(this._xmlHttp.readyState)
+{case 1:case 2:case 3:return true;default:return false;}}
+this.abort=function(){if(this.busy())
+this._xmlHttp.abort();}
+this.get=function(url,data,callback)
+{this.reinit();var xhr=this._xmlHttp;var code=this._encode(data);url=location.protocol+'//'+location.host+url;if(code)
+if(url.substr(url.length-1,1)=='&')
+url+=code;else
+url+='?'+code;xhr.open('GET',url,true);xhr.onreadystatechange=function()
+{if(xhr.readyState==4){var json=null;if(xhr.getResponseHeader("Content-Type")=="application/json"){try{json=eval('('+xhr.responseText+')');}
+catch(e){json=null;}}
+callback(xhr,json);}}
+xhr.send(null);}
+this.post=function(url,data,callback)
+{this.reinit();var xhr=this._xmlHttp;var code=this._encode(data);xhr.onreadystatechange=function()
+{if(xhr.readyState==4)
+callback(xhr);}
+xhr.open('POST',url,true);xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');xhr.send(code);}
+this.cancel=function()
+{this._xmlHttp.onreadystatechange=function(){};this._xmlHttp.abort();}
+this.send_form=function(form,callback,extra_values)
+{var code='';for(var i=0;i');}}}}
+$(document).ready(()=>{settingsStatusRealtimeOverflow();});})(jQuery);
diff --git a/luci-theme-design/htdocs/luci-static/design/js/jquery.min.js b/luci-theme-design/htdocs/luci-static/design/js/jquery.min.js
new file mode 100644
index 00000000..fde87142
--- /dev/null
+++ b/luci-theme-design/htdocs/luci-static/design/js/jquery.min.js
@@ -0,0 +1,2 @@
+/*! jQuery v3.6.4 | (c) OpenJS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,y=n.hasOwnProperty,a=y.toString,l=a.call(Object),v={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.4",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&v(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!y||!y.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ve(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ye(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ve(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.cssHas=ce(function(){try{return C.querySelector(":has(*,:jqfake)"),!1}catch(e){return!0}}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],y=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML=" ",e.querySelectorAll("[msallowcapture^='']").length&&y.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||y.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||y.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||y.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||y.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||y.push(".#.+[+~]"),e.querySelectorAll("\\\f"),y.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML=" ";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&y.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&y.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&y.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),y.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),d.cssHas||y.push(":has"),y=y.length&&new RegExp(y.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),v=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType&&e.documentElement||e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&v(p,e)?-1:t==C||t.ownerDocument==p&&v(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!y||!y.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),v.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",v.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML=" ",v.option=!!ce.lastChild;var ge={thead:[1,""],col:[2,""],tr:[2,""],td:[3,""],_default:[0,"",""]};function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n",""]);var me=/<|?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),v.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(v.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return B(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=_e(v.pixelPosition,function(e,t){if(t)return t=Be(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return B(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 .loading").fadeOut();function trimText(text){return text.replace(/[ \t\n\r]+/g," ");}
+var lastNode=undefined;var mainNodeName=undefined;var nodeUrl="";(function(node){if(node[0]=="admin"){luciLocation=[node[1],node[2]];}else{luciLocation=node;}
+for(var i in luciLocation){nodeUrl+=luciLocation[i];if(i!=luciLocation.length-1){nodeUrl+="/";}}})(luciLocation);function getCurrentNodeByUrl(){if(!$('body').hasClass('logged-in')){luciLocation=["Main","Login"];return true;}
+const urlReg=new RegExp(nodeUrl+"$")
+var ret=false;$(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");$(".main > .main-left > .nav > .slide > .menu").removeClass("active");$(".main > .main-left > .nav > .slide > .menu").each(function(){var ulNode=$(this);ulNode.next().find("a").each(function(){var that=$(this);var href=that.attr("href");if(urlReg.test(href)){ulNode.click();ulNode.next(".slide-menu").stop(true,true);lastNode=that.parent();lastNode.addClass("active");ret=true;return true;}});});return ret;}
+$(".main > .main-left > .nav > .slide > .menu").click(function(){var ul=$(this).next(".slide-menu");var menu=$(this);if(!menu.hasClass("exit")){$(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");$(".main > .main-left > .nav > .slide > .menu").removeClass("active");if(!ul.is(":visible")){menu.addClass("active");ul.addClass("active");ul.stop(true).slideDown("fast");}else{ul.stop(true).slideUp("fast",function(){menu.removeClass("active");ul.removeClass("active");});}
+return false;}});$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function(){if(lastNode!=undefined)
+lastNode.removeClass("active");$(this).parent().addClass("active");$(".main > .loading").fadeIn("fast");return true;});$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function(){if(lastNode!=undefined)
+lastNode.removeClass("active");$(this).addClass("active");$(".main > .loading").fadeIn("fast");window.location=$($(this).find("a")[0]).attr("href");return false;});if(getCurrentNodeByUrl()){mainNodeName="node-"+luciLocation[0]+"-"+luciLocation[1];mainNodeName=mainNodeName.replace(/[ \t\n\r\/]+/g,"_").toLowerCase();$("body").addClass(mainNodeName);}
+$("#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;}});}});var showSide=false;$(".showSide").click(function(){if(showSide){$(".darkMask").stop(true).fadeOut("fast");$(".main-left").stop(true).animate({width:"0"},"fast");$(".main-right").css("overflow-y","auto");$("header>.container>.brand").css("padding","0 4.5rem")
+showSide=false;}else{$(".darkMask").stop(true).fadeIn("fast");$(".main-left").stop(true).animate({width:"18rem"},"fast");$(".main-right").css("overflow-y","hidden");$(".showSide").css("display","none");$("header").css("box-shadow","18rem 2px 4px rgb(0 0 0 / 8%)")
+$("header>.container>.brand").css("padding",'0rem')
+showSide=true;}});$(".darkMask").click(function(){if(showSide){$(".darkMask").stop(true).fadeOut("fast");$(".main-left").stop(true).animate({width:"0"},"fast");$(".main-right").css("overflow-y","auto");$(".showSide").css("display","");$("header").css("box-shadow","0 2px 4px rgb(0 0 0 / 8%)")
+$("header>.container>.brand").css("padding","0 4.5rem")
+showSide=false;}});$(window).resize(function(){if($(window).width()>992){showSide=false;$(".showSide").css("display","");$(".main-left").css("width","");$(".darkMask").stop(true);$(".darkMask").css("display","none");$("header").css("box-shadow","18rem 2px 4px rgb(0 0 0 / 8%)")
+$("header>.container>.brand").css("padding",'0rem')}else{$("header").css("box-shadow","0 2px 4px rgb(0 0 0 / 8%)")
+$("header>.container>.brand").css("padding","0 4.5rem")}
+if(showSide){$("header").css("box-shadow","18rem 2px 4px rgb(0 0 0 / 8%)")
+$("header>.container>.brand").css("padding",'0rem')}});$(".main-right").focus();$(".main-right").blur();$("input").attr("size","0");if(mainNodeName!=undefined){switch(mainNodeName){case "node-status-system_log":case "node-status-kernel_log":$("#syslog").focus(function(){$("#syslog").blur();$(".main-right").focus();$(".main-right").blur();});break;case "node-status-firewall":var button=$(".node-status-firewall > .main fieldset li > a");button.addClass("cbi-button cbi-button-reset a-to-btn");break;case "node-system-reboot":var button=$(".node-system-reboot > .main > .main-right p > a");button.addClass("cbi-button cbi-input-reset a-to-btn");break;}}})(jQuery);
diff --git a/luci-theme-design/htdocs/luci-static/design/manifest.json b/luci-theme-design/htdocs/luci-static/design/manifest.json
new file mode 100644
index 00000000..ab331a61
--- /dev/null
+++ b/luci-theme-design/htdocs/luci-static/design/manifest.json
@@ -0,0 +1,25 @@
+{
+"name":"Design",
+"short_name":"Design",
+"description":"Design for OpenWRT by gngpp.",
+"start_url":"/",
+"scope": "/",
+"orientation":"portrait",
+"display":"standalone",
+"prompt_message":"在主屏幕添加图标,以便快速访问 Design",
+"icons":[
+{
+"src":"images/icon.png",
+"sizes":"144x144",
+"type":"image/png"
+},
+{
+"src":"images/icon.png",
+"sizes":"192x192",
+"type":"image/png"
+}
+],
+"gcm_sender_id":"524223308106",
+"gcm_user_visible_only":true,
+"status":"ok"
+}
\ No newline at end of file
diff --git a/luci-theme-design/luasrc/view/themes/design/footer.htm b/luci-theme-design/luasrc/view/themes/design/footer.htm
new file mode 100644
index 00000000..d7df2075
--- /dev/null
+++ b/luci-theme-design/luasrc/view/themes/design/footer.htm
@@ -0,0 +1,69 @@
+<%#
+ Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+ luci-theme-material
+ Copyright 2015 Lutty Yang
+
+ luci-theme-neobird
+ Copyright 2021 2smile
+
+ luci-theme-design
+ Copyright 2023 gngpp
+
+ Have a bug? Please create an issue here on GitHub!
+ https://github.com/LuttyYang/luci-theme-material/issues
+
+ luci-theme-bootstrap:
+ Copyright 2008 Steven Barth
+ Copyright 2008 Jo-Philipp Wich
+ Copyright 2012 David Menting
+
+ MUI:
+ https://github.com/muicss/mui
+
+ Licensed to the public under the Apache License 2.0
+-%>
+
+<%
+ local ver = require "luci.version"
+ local disp = require "luci.dispatcher"
+ local request = disp.context.path
+ local category = request[1]
+ local tree = disp.node()
+ local categories = disp.node_childs(tree)
+%>
+
+
+
+
+
+
+