Repository: thinktip/luci-theme-neobird
Branch: main
Commit: 945370726889
Files: 10
Total size: 83.3 KB

Directory structure:
gitextract_irq2zuuy/

├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── htdocs/
│   └── luci-static/
│       └── neobird/
│           ├── css/
│           │   └── style.css
│           ├── js/
│           │   └── script.js
│           └── manifest.json
├── luasrc/
│   └── view/
│       └── themes/
│           └── neobird/
│               ├── footer.htm
│               └── header.htm
└── root/
    └── etc/
        └── uci-defaults/
            └── 30_luci-theme-neobird

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
preview


================================================
FILE: LICENSE
================================================
                                 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.


================================================
FILE: Makefile
================================================
# 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:=Neobird Theme
LUCI_DEPENDS:=
PKG_VERSION:=2.0
PKG_RELEASE:=202202260758

include $(TOPDIR)/feeds/luci/luci.mk

# call BuildPackage - OpenWrt buildroot signature


================================================
FILE: README.md
================================================
# luci-theme-neobird
## 针对移动端优化的Openwrt主题

For Lean's OpenWRT Only
https://github.com/coolsnowwolf/lede

六年前用OP，随手把luci-theme-material改成了自己喜欢的Advancedtomato样式
因为用了很短时间便没再用OP了，主题也没再管。
后来便有了lede固件默认使用material主题的修改版做主题，包括今天的luci-theme-netgear和luci-theme-argon还是我的思路，不过都不是我喜欢的样子。
还有一些luci-theme-atmaterial之类的都是当时我的样式表改的，还存在于某些固件中。

前几天又用上了OP做旁路，顺手又改了一把，然后随便找了个LOGO(netgear arlo)，起了个名字，编译了一下。

## 主要特点：
* 针对移动端优化，特别适合手机端做为webapp使用；
* 修改很多细节，尽量视觉统一（但由于luci插件开发不规范，页面结构有些杂乱，难免有些小问题无法修正）；
* 极简易用设计，移动端去除繁杂信息，隐藏了提示信息（可能并不适合OP新手，请手机横屏查看提示文本）；
* 简洁的登录界面，底部导航栏，类App的沉浸式体验；
* 适配深色模式，适配系统自动切换；
* 全(tou)新(lai)的APP桌面图标；
* Retina图片适配。

## 体验Webapp方法：
* 在移动端(iOS/iPadOS)浏览器打开管理界面，添加到主屏幕即可。
* 想要实现完全的沉浸式（无浏览器导航、无地址栏等）体验，需要使用SSL证书，请自行申请域名、证书、安装并启用。
* 如果不使用SSL证书，基于安全原因，iOS/iPadOS 在打开新的页面后，将会显示浏览器顶部菜单栏。

## 目前存在的问题
* 做为旁路由，安装的插件比较少，接口比较少，部分图片不可见则懒得换，可能未来会主动把图片换掉；
* 部分插件或页面仅通过样式表很难达到完美，需要修改底层页面结构，这部分内容存在于luci源码中；

## 关于其它
* 你可以改来自己用，也可以继续优化共享，但如果想改进后共享给他人，请再三确认自己的审美能力，以确保不是丑化我的成果
* 因为用了arlo的logo，请勿用于商业用途
* 我可能会在某个时间改掉logo
* luci插件众多，不规范的插件可能会存在显示问题，不做保证

## 预览
![macOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/SCR-20220223-iw6.png)
![macOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/SCR-20220223-iwp.png)
![macOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/SCR-20220223-j1l.png)
![iOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/IMG_6478.PNG)
![iOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/IMG_6481.PNG)
![iOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/IMG_6474.PNG)
## 自行编译：

```
cd lede/package/lean  
rm -rf luci-theme-neobird  
git clone https://github.com/thinktip/luci-theme-neobird.git  
cd ~/lede/
make menuconfig #choose LUCI->Theme->Luci-theme-neobird  
make -j1 V=s
```


================================================
FILE: htdocs/luci-static/neobird/css/style.css
================================================
/**
 *  Neobird is a clean HTML5 theme for LuCI. It is based on luci-theme-material
 *
 *  luci-theme-material
 *      Copyright 2015 Lutty Yang <lutty@wcan.in>
 * 
 *  luci-theme-Neobird
 *      Copyright 2021 2smile <thinktip@gmail.com>
 *
 *  Licensed to the public under the Apache License 2.0
 */

:root {
    --bg: #f1f4f5;
    --mainbg: #fff;
    --bgwhite: #fff;
    --activeColor: #51c291;
    --activeBottom: #51c291 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: 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: #51c291;
    --progressbartxtColor: #fff;
    --logo: url('/luci-static/neobird/images/logo.png');
    --mlogo: url('/luci-static/neobird/images/mlogo.png');
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --bgwhite: #000;
    --textColor: #fefefe;
    --activeColor: #51c291;
    --activeBottom: #51c291 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: #51c291;
    --progressbartxtColor: #fefefe;
    --logo: url('/luci-static/neobird/images/logod.png');
    --mlogo: url('/luci-static/neobird/images/mlogod.png');
  }
}

@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: 'neobird';
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('../fonts/iconfont.woff2') format('woff2'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'),
  url('#iconfont') format('svg');
}


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

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 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: middle;
    border-radius: 8px;
    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;
}

select[multiple="multiple"] {
    height: auto;
}

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: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow .2s;
    height: 50px;
    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;
}

input.cbi-button.cbi-button-add {
    /* margin-left: 10px; */
}

.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{
    border-radius: 5px;
    padding: 2px 5px 2px 5px !important;
    background-color: #5bdeae !important;
    display: inline-block;
    cursor: pointer;
    color: #fefefe;
}
.zonebadge {
    background-color: var(--tabmenubgColor) !important;
    border-radius: 6px;
    padding: 5px;
}

.zonebadge em {
    padding:3px;
}

svg {
    background-color: var(--sectionbgColor);
}

/* fix p#aliyundrive-webdav_status b */

p#aliyundrive-webdav_status b {
    color: #ff6666 !important;
    text-transform:capitalize;
}

/* fix .cbi-section .cbi-section */

.cbi-section .cbi-section {
    margin: 10px;
}

/* fix node-services-vssr */

.node-services-vssr .status-bar {
	bottom: 50px;
    display: none;
}

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

/** 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/ethernet.png"] {
    background-image: url(../images/ethernet.png);
    background-size: 32px 32px;
    height: 32px;
    width: 32px;
    padding: 0 0 0 32px;
    width: 0;
}

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.png"],
#cbi-network-1-_ifname img[src*="/luci-static/resources/icons/ethernet.png"],
.ifacebadge img[src*="/luci-static/resources/icons/ethernet.png"]
 {
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
    padding: 0 0 0 16px;
}
#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"]
 {
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
    padding: 0 0 0 16px;
}


img[src*="/luci-static/resources/icons/loading.gif"] {
    background-image: url(../images/loading.gif);
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    padding: 0 0 0 20px;
    width: 0;
}


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

.ifacebox-body img {
    background-size: 22px 22px;
    padding: 0 0 0 22px;
    width:22px !important;
    height:22px !important;
    padding: 0 0 0 22px !important;
}
.ifacebox-head {
    background-color: #1096db !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;
}


.myIcon{
    font-family: "neobird" !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;
}

.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: 17rem;
    background-color: var(--mainleftbgColor);
    overflow-x: auto;
    height: calc(100% - 3.5rem);
    position: fixed;
    padding-top: 15px;
}

.main-right {
    width: 85%;
    width: calc(100% - 17rem);
    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: 32px;
    /*font-weight:bold;*/
    line-height:60px;
    /*color: white;*/
    color:rgb(111,42,142);
    cursor: default;
    /*background: #51c291;*/
    display:block;
    width:17rem;
    padding-right: 10px;
    height:60px;
    text-align:center;
    float:left;
    font-weight:900;
    letter-spacing:3px;
}
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:17rem;
    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;
    background-color: #FFF;
}

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

/*
.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: "neobird" !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 > 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="Services"]:before {
    content: "\e6cb";
}

.main > .main-left > .nav > .slide > a[data-title="Docker"]:before {
    content: "\e676";
}

.main > .main-left > .nav > .slide > a[data-title="NAS"]:before {
    content: "\eb04";
}

.main > .main-left > .nav > .slide > a[data-title="VPN"]:before {
    content: "\e6fa";
}

.main > .main-left > .nav > .slide > a[data-title="Network"]:before {
    content: "\e8f8";
}

.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 > li > a[data-title="Logout"] {
    padding: 10px 0px 10px 25px
}
.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: 10px 25px;
    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;
    padding: 8px 0px 8px 25px;
}
.main > .main-left > .nav > .slide > .slide-menu > li > a:after{
    font-family: "neobird" !important;
    font-style: normal !important;
    font-variant: normal !important;
    content: "\eb03";
    float: right;
    padding-right: 5px;
}

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

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

table tr th:empty {
    display: none;
}
strong {
    font-weight: bold;
}

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

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

/* 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;
}

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

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


/* fix node-status-routes */

.node-status-routes .cbi-section-node{
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 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;
}

div#container\.nlbw\.traffic {
    overflow: auto;
}

td#__status-ifc-signal {
    width: 60px !important;
}

td#__status-ifc-signal img[src*="/luci-static/resources/icons/bridge.png"] {
    background-image: url(../images/bridge.png);
    background-size: 32px 32px;
    height: 32px !important;
    width: 32px !important;
    padding: 0 0 0 32px;
    width: 0;
}

/* button style */

.cbi-button {
    -webkit-appearance: none;
    text-transform: uppercase;
    color: #fff;
    background-color: #337ab7;
    transition: all 0.2s 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;
    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: rgb(0,171,232) !important;
    border-color: rgb(0,171,232) !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: #337ab7 !important;
    border-color: #337ab7 !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) ;
    border-bottom: 2px solid var(--activeColor);
}

.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: 5px;
    border: var(--badgeBorder);
    color: rgb(132,119,116);
}

#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 ins,
.uci-change-legend-label ins {
    text-decoration: none;
    border: 1px solid #00FF00;
    background-color: #CCFFCC;
    display: block;
    padding: 2px;
}

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

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

.uci-change-list var ins,
.uci-change-list var del {
    border: none;
    white-space: pre;
    font-style: normal;
    padding: 0px;
}

.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: #1096db 1px solid;
    border-radius: 5px;
    font-size:0.92rem;
    font-weight:normal;
}
.ifacebox-head {
    color:#fff;
}
.ifacebox-body small {
    font-size:0.8rem !important;
}

.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: 3px 10px;
    border-radius: 20px;
}

#xhr_poll_status_off {
    padding: 3px 10px;
    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 {
    background-color: var(--activeColor);
    color: #fff;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 10;
}

#refresh_on, #refresh_off {
    font-size: 1.5rem;
    font-family: neobird;
}

#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 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 {
    min-width: 15rem;
}

.node-main-login footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

/* 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 overview */

.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) {
    white-space: normal;
}

/* 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;
}



.node-system-packages .cbi-section-node .cbi-value-last > div > div  {
    border: none !important;
}

.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: 5px;
    border: #ccc 1px solid;

}

#container\.nlbw\.traffic table, 
#container\.nlbw\.layer7 table, 
#container\.nlbw\.ipv6 table, 
#container\.nlbw\.export table {
    border: #ccc 1px solid;
}

#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: 3px;
    border-top: none;
    border-left: #ccc 1px solid;
    border-right: #ccc 1px solid;
    border-bottom: #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 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  {
    table-layout: auto !important;
}


select#cbi\.combobox\.cbid\.shadowsocksr\.cfg013fd6\.tunnel_forward {
    overflow: hidden;

}

/* language fix */
body.lang_pl.node-main-login .cbi-value-title {
    width: 12rem;
}

@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% + 17rem);
        top: 50px;
    }

    .main-right {
        width: calc(100% - 17rem);
    }


    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: 70px;
        display: block;
        position: absolute;
        margin-top: -34px;
    }
    img[src*="/luci-static/resources/cbi/remove.gif"] {
        right: 70px;
        display: block;
        position: absolute;
        margin-top: -34px;
    }

    img[src*="/luci-static/resources/cbi/reload.gif"] {
        right: 70px;
        display: block;
        position: absolute;
        margin-top: -34px;
    }
}

@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: 300px;
        height: 50px;
    }

    .showSide:before {
        content: "\e20e";
        font-size: 1.7rem;
        display: none;
    }

    .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: 70px;
        display: block;
        position: absolute;
        margin-top: -34px;
    }
    img[src*="/luci-static/resources/cbi/remove.gif"] {
        right: 70px;
        display: block;
        position: absolute;
        margin-top: -34px;
    }

    img[src*="/luci-static/resources/cbi/reload.gif"] {
        right: 70px;
        display: block;
        position: absolute;
        margin-top: -34px;
    }
}

@media screen and (max-width: 480px) {

    fieldset {
    /* overflow-x: auto; */
    }

    select {
        width: 100%;
    }
    .label {
        position: absolute;
        right: 5px;
        top: -70px;
    }

    header {
        height: 45px;
    }

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

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


================================================
FILE: htdocs/luci-static/neobird/js/script.js
================================================
/**
 *  Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
 *
 *  luci-theme-material
 *      Copyright 2015 Lutty Yang <lutty@wcan.in>
 *
 *  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 <steven@midlink.org>
 *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
 *      Copyright 2012 David Menting <david@nut-bolt.nl>
 *
 *  MUI:
 *      https://github.com/muicss/mui
 *
 *  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() {
        var ret = false;
        if (!$('body').hasClass('logged-in')) {
            luciLocation = ["Main", "Login"];
            return true;
        }

        $(".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 (href.indexOf(nodeUrl) != -1) {
                    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 (!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);
    }
    $(".cbi-button-up").val("");
    $(".cbi-button-down").val("");


    /**
     * hook other "A Label" and add hash to it.
     */
    $("#maincontent > .container").find("a").each(function () {
        var that = $(this);
        var onclick = that.attr("onclick");
        if (onclick == undefined || onclick == "") {
            that.click(function () {
                var href = that.attr("href");
                if (href.indexOf("#") == -1) {
                    $(".main > .loading").fadeIn("fast");
                    return true;
                }
            });
        }
    });

    /**
     * Sidebar expand
     */
    var showSide = false;
    $(".showSide").click(function () {
        if (showSide) {
            $(".darkMask").stop(true).fadeOut("fast");
            $(".main-left").stop(true).animate({
                width: "0"
            }, "fast");
            $(".main-right").css("overflow-y", "auto");
            showSide = false;
        } else {
            $(".darkMask").stop(true).fadeIn("fast");
            $(".main-left").stop(true).animate({
                width: "20rem"
            }, "fast");
            $(".main-right").css("overflow-y", "hidden");
            showSide = true;
        }
    });


    $(".darkMask").click(function () {
        if (showSide) {
            showSide = false;
            $(".darkMask").stop(true).fadeOut("fast");
            $(".main-left").stop(true).animate({
                width: "0"
            }, "fast");
            $(".main-right").css("overflow-y", "auto");
        }
    });

    $(window).resize(function () {
        if ($(window).width() > 921) {
            $(".main-left").css("width", "");
            $(".darkMask").stop(true);
            $(".darkMask").css("display", "none");
            showSide = false;
        }
    });

    /**
     * fix legend position
     */
    $("legend").each(function () {
        var that = $(this);
        that.after("<span class='panel-title'>" + that.text() + "</span>");
    });

    $(".main-right").focus();
    $(".main-right").blur();
    $("input").attr("size", "0");

    if (mainNodeName != undefined) {
        console.log(mainNodeName);
        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);


================================================
FILE: htdocs/luci-static/neobird/manifest.json
================================================
{
"name":"Neobird",
"short_name":"Neobird",
"description":"Neobird for OpenWRT by 2smile.",
"start_url":"/",
"scope": "/",
"orientation":"portrait",
"display":"standalone",
"prompt_message":"在主屏幕添加图标，以便快速访问 Neobird",
"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"
}

================================================
FILE: luasrc/view/themes/neobird/footer.htm
================================================
<%#
    Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI

    luci-theme-material
        Copyright 2015 Lutty Yang <lutty@wcan.in>
            
    luci-theme-neobird
    Copyright 2021 2smile <thinktip@gmail.com>

    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 <steven@midlink.org>
    Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
    Copyright 2012 David Menting <david@nut-bolt.nl>

    MUI:
    https://github.com/muicss/mui

    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)
%>
                </div>
                <footer class="footer" style="text-align:center">
                    <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %></a> |
                    <a href="https://www.lede-project.org/"><%= ver.distversion %></a>
                    <br />
                    © 2021-2022 2smile. All Rights Reserved.
                    <% if #categories > 1 then %>
                    <ul class="breadcrumb pull-right" id="modemenu">
                        <% for i, r in ipairs(categories) do %>
                        <li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
                        <% end %>
                    </ul>
                    <% end %>
                </footer>
            </div>
        </div>

    <script>
        // thanks for Jo-Philipp Wich <jow@openwrt.org>
        var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
    </script>
    <script src="<%=media%>/js/jquery.min.js?v=<%= ver.luciversion %>"></script>
    <script src="<%=media%>/js/script.js?v=<%= ver.luciversion %>"></script>
</body>
</html>


================================================
FILE: luasrc/view/themes/neobird/header.htm
================================================
<%#
	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI

	luci-theme-material
	Copyright 2015 Lutty Yang <lutty@wcan.in>

	luci-theme-neobird
	Copyright 2021 2smile <thinktip@gmail.com>

	Have a bug? Please create an issue here on GitHub!
	https://github.com/thinktip/luci-theme-neobird

	luci-theme-bootstrap:
	Copyright 2008 Steven Barth <steven@midlink.org>
	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
	Copyright 2012 David Menting <david@nut-bolt.nl>

	MUI:
	https://github.com/muicss/mui

	Licensed to the public under the Apache License 2.0
-%>

<%
	local ver = require "luci.version"
	local sys  = require "luci.sys"
	local util = require "luci.util"
	local http = require "luci.http"
	local disp = require "luci.dispatcher"

	local boardinfo = util.ubus("system", "board")
	local boardinfo={}
	boardinfo.hostname=sys.hostname()
	
	local request  = disp.context.path
	local request2 = disp.context.request

	local category = request[1]
	local cattree  = category and disp.node(category)

	local leaf = request2[#request2]

	local tree = disp.node()
	local node = disp.context.dispatched

	local categories = disp.node_childs(tree)

	local c = tree
	local i, r

	-- tag all nodes leading to this page
	for i, r in ipairs(request) do
		if c.nodes and c.nodes[r] then
			c = c.nodes[r]
			c._menu_selected = true
		end
	end

    -- send as HTML5
	http.prepare_content("text/html")

	local function nodeurl(prefix, name, query)
		local url = controller .. prefix .. name .. "/"
		if query then
			url = url .. http.build_querystring(query)
		end
		return pcdata(url)
	end

	local function subtree(prefix, node, level)
		if not level then
			level = 1
		end

		local childs = disp.node_childs(node)
		if #childs > 0 then

            if level > 2 then
%>
	<ul class="tabs">
		<%
            end

			local selected_node
			local selected_name
			local i, v

			for i, v in ipairs(childs) do
				local nnode = node.nodes[v]
				if nnode._menu_selected then
					selected_node = nnode
					selected_name = v
				end
                if level > 2 then
		%>
			<li class="tabmenu-item-<%=v%><%- if nnode._menu_selected or (node.leaf and v == leaf) then %> active<% end %>">
			    <a href="<%=nodeurl(prefix, v, nnode.query)%>"><%=striptags(translate(nnode.title))%></a>
			</li>
		<%      end
			end

            if level > 2 then
		%>
	</ul>
<%          end

			if selected_node then
				subtree(prefix .. selected_name .. "/", selected_node, level + 1)
			end
		end
	end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
    <link rel="manifest" href="<%=media%>/manifest.json">
    <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <meta name="x5-page-mode" content="app">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
	<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
	<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
    <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %>">
    <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %>">
    <meta name="msapplication-TileImage" content="<%=media%>/images/icon.png"/>
    <link rel="icon" href="<%=media%>/images/icon.png" sizes="192x192">
    <link rel="apple-touch-icon" sizes="192x192" href="<%=media%>/images/icon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes" /> 

    <link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>">
    <link rel="shortcut icon" href="<%=media%>/favicon.ico">
    <% if node and node.css then %>
        <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
    <% end -%>
    <% if css then %>
        <style title="text/css">
            <%-= css %>
        </style>
    <% end -%>
    <script src="<%=resource%>/xhr.js?<%= ver.luciversion %>"></script>
</head>

<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>">

<header>

<div class="navbar">
  <a href="/cgi-bin/luci/admin/status/overview"><img src="<%=media%>/images/home.png" /></a>
  <a href="/cgi-bin/luci/admin/services/shadowsocksr"><img src="<%=media%>/images/ssr.png" /></a>
  <a href="/cgi-bin/luci/admin/network/network"><img src="<%=media%>/images/link.png" /></a>
  <a href="/cgi-bin/luci/admin/status/realtime"><img src="<%=media%>/images/rank.png" /></a>
  <a href="/cgi-bin/luci/admin/system/admin"><img src="<%=media%>/images/user.png" /></a>
</div>

<div class="container">
<span class="showSide"></span>
		<img  src="<%=media%>/images/logo.png" <%=striptags( (boardinfo.hostname or "?") ) %>>

		<div class="pull-right">
		<%
		-- calculate the number of unsaved changes
		if tree.nodes[category] and tree.nodes[category].ucidata then
			local ucichanges = 0
			for i, j in pairs(require("luci.model.uci").cursor():changes()) do
				for k, l in pairs(j) do
					for m, n in pairs(l) do
						ucichanges = ucichanges + 1;
					end
				end
			end
			%>
			<% if ucichanges > 0 then %>
			<a class="label notice" href="<%=url(category, 'uci/changes')%>?redir=<%=http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/"))%>"><%=translate('Unsaved Changes')%>: <%=ucichanges%></a>
			<% end %>
			<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
				<span class="label success" id="xhr_poll_status_on"><span id="refresh_on" class="mobile-hide"></span></span>
				<span class="label" id="xhr_poll_status_off" style="display:none"><span id="refresh_off" class="mobile-hide"></span></span>
			</span>
		<% end %>
		</div>



        
 	
		</div>
</header>

 <div class="main">
	 <div class="main-left">
		 <ul class="nav">
			 <%-
			 local function submenu(prefix, node)
			 local childs = disp.node_childs(node)
			 if #childs > 0 then
			 %>
			 <ul class="slide-menu">
				 <%-
				 for i, r in ipairs(childs) do
				 local nnode = node.nodes[r]
				 local href  = controller .. "" .. prefix .. r ..
				 (nnode.query and http.build_querystring(nnode.query) or "")
				 %>
				 <li><a data-title="<%=pcdata(striptags(nnode.title))%>" href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a></li>
				 <%-
				 end
				 %>
			 </ul>
			 <%-
			 end
			 end

			 childs = disp.node_childs(cattree)

			 if #childs > 0 then
			 for i, r in ipairs(childs) do
			 local nnode = cattree.nodes[r]
			 local href  = controller .. "/" .. category .. "/" .. r ..
			 (nnode.query and http.build_querystring(k.query) or "")
			 local grandchildren = disp.node_childs(nnode)

			 if #grandchildren > 0 then
			 %>
			 <li class="slide">
				 <a class="menu" data-title="<%=pcdata(striptags(nnode.title))%>" href="#"><%=pcdata(striptags(translate(nnode.title)))%></a>
				 <%- submenu("" .. category .. "/" .. r .. "/", nnode) %>
			 </li>
			 <%          else %>
			 <li class="slide">
				 <a class="menu2" data-title="<%=pcdata(striptags(nnode.title))%>" href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a>
			 </li>
			 <%
			 end
			 end
			 end
			 %>
		 </ul>
	 </div>
	 <div class="main-right">
		 <div class="darkMask"></div>
		 <div id="maincontent">
			 <div class="container">
				 <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
					 <div class="alert-message warning">
						 <h4><%:No password set!%></h4>
						 <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br>
						 <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a>
					 </div>
				 <%- end -%>
				 <% if category then subtree("/" .. category .. "/", cattree) end %>



================================================
FILE: root/etc/uci-defaults/30_luci-theme-neobird
================================================
#!/bin/sh
uci batch <<-EOF
	set luci.themes.Neobird=/luci-static/neobird
	set luci.main.mediaurlbase=/luci-static/neobird
	commit luci
EOF
exit 0 
# ↑↑↑ DO NOT EDIT THIS LINE