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插件众多，不规范的插件可能会存在显示问题，不做保证
## 预览
## 自行编译：
```
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
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
SYMBOL INDEX (2 symbols across 1 files)
FILE: htdocs/luci-static/neobird/js/script.js
function trimText (line 28) | function trimText(text) {
function getCurrentNodeByUrl (line 56) | function getCurrentNodeByUrl() {
Condensed preview — 10 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (92K chars).
[
{
"path": ".gitignore",
"chars": 8,
"preview": "preview\n"
},
{
"path": "LICENSE",
"chars": 11357,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "Makefile",
"chars": 450,
"preview": "# This program is free software; you can redistribute it and/or\n# modify it under the terms of the GNU General Public Li"
},
{
"path": "README.md",
"chars": 1804,
"preview": "# luci-theme-neobird\n## 针对移动端优化的Openwrt主题\n\nFor Lean's OpenWRT Only\nhttps://github.com/coolsnowwolf/lede\n\n六年前用OP，随手把luci-"
},
{
"path": "htdocs/luci-static/neobird/css/style.css",
"chars": 53712,
"preview": "/**\n * Neobird is a clean HTML5 theme for LuCI. It is based on luci-theme-material\n *\n * luci-theme-material\n * C"
},
{
"path": "htdocs/luci-static/neobird/js/script.js",
"chars": 6740,
"preview": "/**\n * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI\n *\n * luci-theme-material"
},
{
"path": "htdocs/luci-static/neobird/manifest.json",
"chars": 442,
"preview": "{\n\"name\":\"Neobird\",\n\"short_name\":\"Neobird\",\n\"description\":\"Neobird for OpenWRT by 2smile.\",\n\"start_url\":\"/\",\n\"scope\": \"/"
},
{
"path": "luasrc/view/themes/neobird/footer.htm",
"chars": 2120,
"preview": "<%#\n Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI\n\n luci-theme-material\n "
},
{
"path": "luasrc/view/themes/neobird/header.htm",
"chars": 8533,
"preview": "<%#\n\tMaterial is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI\n\n\tluci-theme-material\n\tCopyri"
},
{
"path": "root/etc/uci-defaults/30_luci-theme-neobird",
"chars": 183,
"preview": "#!/bin/sh\r\nuci batch <<-EOF\r\n\tset luci.themes.Neobird=/luci-static/neobird\r\n\tset luci.main.mediaurlbase=/luci-static/neo"
}
]
About this extraction
This page contains the full source code of the thinktip/luci-theme-neobird GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 10 files (83.3 KB), approximately 25.6k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.