├── .gitignore ├── LICENSE ├── Makefile ├── README.md ├── js └── menu-alpha.js ├── luasrc ├── app.js ├── background │ ├── dashboard.png │ └── login.png ├── brand.png ├── favicon.ico ├── fonts │ ├── Inter-Black.woff2 │ ├── Inter-Bold.woff2 │ ├── Inter-ExtraBold.woff2 │ ├── Inter-ExtraLight.woff2 │ ├── Inter-Light.woff2 │ ├── Inter-Medium.woff2 │ ├── Inter-Regular.woff2 │ ├── Inter-SemiBold.woff2 │ ├── Inter-Thin.woff2 │ ├── Quicksand-Bold.ttf │ ├── Quicksand-Light.ttf │ ├── Quicksand-Medium.ttf │ ├── Quicksand-Regular.ttf │ ├── Quicksand-SemiBold.ttf │ └── stylesheet.css ├── gaya │ ├── gaya.css │ ├── gaya.css.bak │ └── icon │ │ ├── arrow.svg │ │ ├── loading.svg │ │ ├── logout.svg │ │ ├── menu_icon.svg │ │ ├── navbar │ │ ├── filemanager.png │ │ ├── modem.png │ │ ├── neko.png │ │ ├── network.png │ │ ├── openclash.png │ │ ├── overview.png │ │ └── terminal.png │ │ ├── pause.svg │ │ ├── save.svg │ │ └── sidebar-icon │ │ ├── app.svg │ │ ├── docker.svg │ │ ├── istore.svg │ │ ├── modem.svg │ │ ├── nas.svg │ │ ├── network.svg │ │ ├── services.svg │ │ ├── status.svg │ │ ├── system.svg │ │ └── vpn.svg └── style │ ├── brand.png │ ├── catatan.txt │ ├── indo-wrt.png │ ├── openwrt20thanniversary.png │ └── style.css ├── mobileview1.png ├── mobileview2.png ├── mobileview3.png ├── root └── etc │ └── config │ └── alpha ├── ss1.png ├── ss2.png ├── ss3.png └── template ├── footer.htm ├── header.htm └── sysauth.htm /.gitignore: -------------------------------------------------------------------------------- 1 | # Build and Release Folders 2 | bin-debug/ 3 | bin-release/ 4 | [Oo]bj/ 5 | [Bb]in/ 6 | 7 | # Other files and folders 8 | .settings/ 9 | 10 | # Executables 11 | *.swf 12 | *.air 13 | *.ipa 14 | *.apk 15 | 16 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 17 | # should NOT be excluded as they contain compiler settings and other important 18 | # information for Eclipse / Flash Builder. 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # LuCI Alpha Theme 2 | # Copyright 2024 derisamedia 3 | # 4 | # Licensed under the Apache License v2.0 5 | # http://www.apache.org/licenses/LICENSE-2.0 6 | 7 | include $(TOPDIR)/rules.mk 8 | 9 | THEME_NAME:=alpha 10 | THEME_TITLE:=Alpha 11 | 12 | PKG_NAME:=luci-theme-$(THEME_NAME) 13 | PKG_VERSION:=3.9.5-beta 14 | PKG_RELEASE:=10 15 | 16 | include $(INCLUDE_DIR)/package.mk 17 | 18 | define Package/luci-theme-$(THEME_NAME) 19 | SECTION:=luci 20 | CATEGORY:=LuCI 21 | SUBMENU:=9. Themes 22 | DEPENDS:=+libc 23 | TITLE:=LuCi Theme For OpenWrt And Alpha OS ONLY - $(THEME_TITLE) 24 | URL:=http://facebook.com/derisamedia/ 25 | PKGARCH:=all 26 | endef 27 | 28 | define Build/Configure 29 | endef 30 | 31 | define Build/Compile 32 | endef 33 | 34 | define Package/luci-theme-$(THEME_NAME)/install 35 | $(INSTALL_DIR) $(1)/etc/uci-defaults 36 | echo "uci set luci.themes.$(THEME_TITLE)=/luci-static/$(THEME_NAME); uci commit luci" > $(1)/etc/uci-defaults/30-luci-theme-$(THEME_NAME) 37 | $(INSTALL_DIR) $(1)/www/luci-static/$(THEME_NAME) 38 | $(CP) -a ./luasrc/* $(1)/www/luci-static/$(THEME_NAME)/ 2>/dev/null || true 39 | $(INSTALL_DIR) $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME) 40 | $(CP) -a ./template/* $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME)/ 2>/dev/null || true 41 | $(INSTALL_DIR) $(1)/www/luci-static/resources 42 | $(CP) -a ./js/* $(1)/www/luci-static/resources/ 2>/dev/null || true 43 | $(INSTALL_DIR) $(1)/etc/config 44 | $(CP) -a ./root/etc/config/* $(1)/etc/config/ 2>/dev/null || true 45 | endef 46 | 47 | define Package/luci-theme-$(THEME_NAME)/postinst 48 | #!/bin/sh 49 | if [ -z "$${IPKG_INSTROOT}" ]; then 50 | if [ -f /etc/uci-defaults/30-luci-theme-$(THEME_NAME) ]; then 51 | . /etc/uci-defaults/30-luci-theme-$(THEME_NAME) 52 | rm -f /etc/uci-defaults/30-luci-theme-$(THEME_NAME) 53 | fi 54 | fi 55 | exit 0 56 | endef 57 | 58 | $(eval $(call BuildPackage,luci-theme-$(THEME_NAME))) 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [issues]: https://github.com/derisamedia/luci-theme-alpha/issues 2 | [issues-badge]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat-square 3 | [release]: https://github.com/derisamedia/luci-theme-alpha/releases 4 | [release-badge]: https://img.shields.io/badge/download-check_releases-blue 5 | [group]: https://facebook.com/groups/indowrt 6 | [group-badge]: https://img.shields.io/badge/visit_Facebook-Comunity-cyan 7 | [discord]: https://discord.gg/gdZwmDQGUm 8 | [discord-badge]: https://img.shields.io/badge/visit_Discord-Comunity-blue 9 | [paypal]: https://www.paypal.com/paypalme/derisamedia 10 | [paypal-badge]: https://img.shields.io/badge/Donate-Paypal_me-blue 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | # luci-theme-alpha (BETA) 21 | 22 | 23 | 24 | [![issues][issues-badge]][issues] 25 | [![release][release-badge]][release] 26 | [![group][group-badge]][group] 27 | [![discord][discord-badge]][discord] 28 | [![paypal][paypal-badge]][paypal] 29 | 30 | 31 | Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap framework 32 | and material luCi theme refferences, 33 | Thanks To Komunitas Device Berbasis ARM Indonesia (DBAI) for support this theme. 34 | This official 1'st theme in Indo-Wrt Community in indonesia. Not the result of modification from anyone, this is purely made by us 35 | ### ©Derisamedia 36 | https://derisamedia.github.io/ 37 | Preview Screenshoot 38 |

39 | 40 | ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss1.png) 41 | 42 | ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss2.png) 43 | 44 | ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss3.png) 45 | 46 | ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview1.png) 47 | 48 | ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview2.png) 49 | 50 | ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview3.png) 51 | 52 |

53 | 54 | # Contributors 55 | 56 | 57 | 58 | 59 | 60 | ### FYI 61 | 62 | alpha os is my idea which wants to develop the OpenWrt community in Indonesia, even the world, thanks to friends who have supported this alpha-os theme, hopefully given health to all of us. 63 | 64 | 65 | (old text) Mr. Sibondt once they said 'jalan ditempat komunitas indo', that's what moved my heart to make an innovation that I named alpha os (alpha = initial version, because it hasn't been perfect until now 😁) 66 | 67 | ### Credits 68 | Indowrt (indonesian Openwrt Community) 69 | DBAI (Device Berbasis Arm Indonesia) 70 | 71 | ### frameworks 72 | this theme using bootstrap framework + vanilla css 73 | icons made by me + flaticons 74 | 75 | ### Attention 76 | This theme required luci-theme-alpha-config installed 77 | 78 | donate 79 | buy me a padang rice or coffee 80 | https://saweria.co/derisamedia 81 | -------------------------------------------------------------------------------- /js/menu-alpha.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | "require baseclass"; 3 | "require ui"; 4 | return baseclass.extend({ 5 | __init__: function () { 6 | ui.menu.load().then(L.bind(this.render, this)); 7 | }, 8 | render: function (tree) { 9 | var node = tree, 10 | url = ""; 11 | this.renderModeMenu(node); 12 | if (L.env.dispatchpath.length >= 3) { 13 | for (var i = 0; i < 3 && node; i++) { 14 | node = node.children[L.env.dispatchpath[i]]; 15 | url = url + (url ? "/" : "") + L.env.dispatchpath[i]; 16 | } 17 | if (node) this.renderTabMenu(node, url); 18 | } 19 | document 20 | .querySelector(".showSide") 21 | .addEventListener( 22 | "click", 23 | ui.createHandlerFn(this, "handleSidebarToggle") 24 | ); 25 | document 26 | .querySelector(".darkMask") 27 | .addEventListener( 28 | "click", 29 | ui.createHandlerFn(this, "handleSidebarToggle") 30 | ); 31 | document.querySelector(".main > .loading").style.opacity = "0"; 32 | document.querySelector(".main > .loading").style.visibility = "hidden"; 33 | if (window.innerWidth <= 1152) 34 | document.querySelector(".main-left").style.width = "0"; 35 | window.addEventListener("resize", this.handleSidebarToggle, true); 36 | }, 37 | handleMenuExpand: function (ev) { 38 | var a = ev.target, 39 | ul1 = a.parentNode, 40 | ul2 = a.nextElementSibling; 41 | document.querySelectorAll("li.slide.active").forEach(function (li) { 42 | if (li !== a.parentNode || li == ul1) { 43 | li.classList.remove("active"); 44 | li.childNodes[0].classList.remove("active"); 45 | } 46 | if (li == ul1) return; 47 | }); 48 | if (!ul2) return; 49 | if ( 50 | ul2.parentNode.offsetLeft + ul2.offsetWidth <= 51 | ul1.offsetLeft + ul1.offsetWidth 52 | ) 53 | ul2.classList.add("align-left"); 54 | ul1.classList.add("active"); 55 | a.classList.add("active"); 56 | a.blur(); 57 | ev.preventDefault(); 58 | ev.stopPropagation(); 59 | }, 60 | renderMainMenu: function (tree, url, level) { 61 | var l = (level || 0) + 1, 62 | ul = E("ul", { class: level ? "slide-menu" : "nav" }), 63 | children = ui.menu.getChildren(tree); 64 | if (children.length == 0 || l > 2) return E([]); 65 | for (var i = 0; i < children.length; i++) { 66 | var isActive = L.env.dispatchpath[l] == children[i].name, 67 | submenu = this.renderMainMenu( 68 | children[i], 69 | url + "/" + children[i].name, 70 | l 71 | ), 72 | hasChildren = submenu.children.length; 73 | ul.appendChild( 74 | E( 75 | "li", 76 | { 77 | class: hasChildren 78 | ? "slide" + (isActive ? " active" : "") 79 | : isActive 80 | ? " active" 81 | : "", 82 | }, 83 | [ 84 | E( 85 | "a", 86 | { 87 | href: hasChildren ? "#" : L.url(url, children[i].name), 88 | class: hasChildren 89 | ? "menu" + (isActive ? " active" : "") 90 | : null, 91 | click: hasChildren 92 | ? ui.createHandlerFn(this, "handleMenuExpand") 93 | : null, 94 | "data-title": hasChildren 95 | ? children[i].title 96 | : _(children[i].title), 97 | }, 98 | [_(children[i].title)] 99 | ), 100 | submenu, 101 | ] 102 | ) 103 | ); 104 | } 105 | if (l == 1) { 106 | var container = document.querySelector("#mainmenu"); 107 | container.appendChild(ul); 108 | container.style.display = ""; 109 | } 110 | return ul; 111 | }, 112 | renderModeMenu: function (tree) { 113 | var ul = document.querySelector("#modemenu"), 114 | children = ui.menu.getChildren(tree); 115 | for (var i = 0; i < children.length; i++) { 116 | var isActive = L.env.requestpath.length 117 | ? children[i].name == L.env.requestpath[0] 118 | : i == 0; 119 | ul.appendChild( 120 | E("li", {}, [ 121 | E( 122 | "a", 123 | { 124 | href: L.url(children[i].name), 125 | class: isActive ? "active" : null, 126 | }, 127 | [_(children[i].title)] 128 | ), 129 | ]) 130 | ); 131 | if (isActive) this.renderMainMenu(children[i], children[i].name); 132 | if (i > 0 && i < children.length) 133 | ul.appendChild(E("li", { class: "divider" }, [E("span")])); 134 | } 135 | if (children.length > 1) ul.parentElement.style.display = ""; 136 | }, 137 | renderTabMenu: function (tree, url, level) { 138 | var container = document.querySelector("#tabmenu"), 139 | l = (level || 0) + 1, 140 | ul = E("ul", { class: "tabs" }), 141 | children = ui.menu.getChildren(tree), 142 | activeNode = null; 143 | if (children.length == 0) return E([]); 144 | for (var i = 0; i < children.length; i++) { 145 | var isActive = L.env.dispatchpath[l + 2] == children[i].name, 146 | activeClass = isActive ? " active" : "", 147 | className = "tabmenu-item-%s %s".format(children[i].name, activeClass); 148 | ul.appendChild( 149 | E("li", { class: className }, [ 150 | E("a", { href: L.url(url, children[i].name) }, [ 151 | _(children[i].title), 152 | ]), 153 | ]) 154 | ); 155 | if (isActive) activeNode = children[i]; 156 | } 157 | container.appendChild(ul); 158 | container.style.display = ""; 159 | if (activeNode) 160 | container.appendChild( 161 | this.renderTabMenu(activeNode, url + "/" + activeNode.name, l) 162 | ); 163 | return ul; 164 | }, 165 | handleSidebarToggle: function (ev) { 166 | var width = window.innerWidth, 167 | darkMask = document.querySelector(".darkMask"), 168 | mainRight = document.querySelector(".main-right"), 169 | mainLeft = document.querySelector(".main-left"), 170 | open = mainLeft.style.width == ""; 171 | if (width > 1152 || ev.type == "resize") open = true; 172 | darkMask.style.visibility = open ? "" : "visible"; 173 | darkMask.style.opacity = open ? "" : 1; 174 | if (width <= 1152) mainLeft.style.width = open ? "0" : ""; 175 | else mainLeft.style.width = ""; 176 | mainLeft.style.visibility = open ? "" : "visible"; 177 | mainRight.style["overflow-y"] = open ? "visible" : "hidden"; 178 | }, 179 | }); 180 | -------------------------------------------------------------------------------- /luasrc/app.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // your page initialization code here 3 | // the DOM will be available here 4 | 5 | const toggler = document.querySelector(".toggler"); 6 | console.log(toggler); 7 | toggler.addEventListener( 8 | "click", 9 | function (e) { 10 | const element = document.querySelector(".navbar"); 11 | element.classList.toggle("active"); 12 | }, 13 | false 14 | ); 15 | 16 | // const isDark = localStorage.getItem("isDark"); 17 | // if (isDark == 1) { 18 | // const element = document.querySelector("body"); 19 | // element.classList.add("dark"); 20 | // } 21 | // const themetoggler = document.querySelector(".themetoggler"); 22 | // themetoggler.addEventListener( 23 | // "click", 24 | // function (e) { 25 | // e.preventDefault(); 26 | // const element = document.querySelector("body"); 27 | // element.classList.toggle("dark"); 28 | 29 | // const isDark = localStorage.getItem("isDark"); 30 | // localStorage.setItem("isDark", isDark == 1 ? 0 : 1); 31 | // }, 32 | // false 33 | // ); 34 | })(); 35 | -------------------------------------------------------------------------------- /luasrc/background/dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/background/dashboard.png -------------------------------------------------------------------------------- /luasrc/background/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/background/login.png -------------------------------------------------------------------------------- /luasrc/brand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/brand.png -------------------------------------------------------------------------------- /luasrc/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/favicon.ico -------------------------------------------------------------------------------- /luasrc/fonts/Inter-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-Black.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-Bold.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-ExtraBold.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-ExtraLight.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-Light.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-Medium.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-Regular.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-SemiBold.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Inter-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Inter-Thin.woff2 -------------------------------------------------------------------------------- /luasrc/fonts/Quicksand-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Quicksand-Bold.ttf -------------------------------------------------------------------------------- /luasrc/fonts/Quicksand-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Quicksand-Light.ttf -------------------------------------------------------------------------------- /luasrc/fonts/Quicksand-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Quicksand-Medium.ttf -------------------------------------------------------------------------------- /luasrc/fonts/Quicksand-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Quicksand-Regular.ttf -------------------------------------------------------------------------------- /luasrc/fonts/Quicksand-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/fonts/Quicksand-SemiBold.ttf -------------------------------------------------------------------------------- /luasrc/fonts/stylesheet.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Inter'; 3 | src: url('Inter-Thin.woff2') format('woff2'); 4 | font-weight: 100; 5 | font-style: normal; 6 | font-display: swap; 7 | } 8 | 9 | @font-face { 10 | font-family: 'Inter'; 11 | src: url('Inter-ExtraLight.woff2') format('woff2'); 12 | font-weight: 200; 13 | font-style: normal; 14 | font-display: swap; 15 | } 16 | 17 | @font-face { 18 | font-family: 'Inter'; 19 | src: url('Inter-Light.woff2') format('woff2'); 20 | font-weight: 300; 21 | font-style: normal; 22 | font-display: swap; 23 | } 24 | 25 | @font-face { 26 | font-family: 'Inter'; 27 | src: url('Inter-Regular.woff2') format('woff2'); 28 | font-weight: 400; 29 | font-style: normal; 30 | font-display: swap; 31 | } 32 | 33 | @font-face { 34 | font-family: 'Inter'; 35 | src: url('Inter-Medium.woff2') format('woff2'); 36 | font-weight: 500; 37 | font-style: normal; 38 | font-display: swap; 39 | } 40 | 41 | @font-face { 42 | font-family: 'Inter'; 43 | src: url('Inter-SemiBold.woff2') format('woff2'); 44 | font-weight: 600; 45 | font-style: normal; 46 | font-display: swap; 47 | } 48 | 49 | @font-face { 50 | font-family: 'Inter'; 51 | src: url('Inter-Bold.woff2') format('woff2'); 52 | font-weight: 700; 53 | font-style: normal; 54 | font-display: swap; 55 | } 56 | 57 | @font-face { 58 | font-family: 'Inter'; 59 | src: url('Inter-ExtraBold.woff2') format('woff2'); 60 | font-weight: 800; 61 | font-style: normal; 62 | font-display: swap; 63 | } 64 | 65 | @font-face { 66 | font-family: 'Inter'; 67 | src: url('Inter-Black.woff2') format('woff2'); 68 | font-weight: 900; 69 | font-style: normal; 70 | font-display: swap; 71 | } -------------------------------------------------------------------------------- /luasrc/gaya/gaya.css.bak: -------------------------------------------------------------------------------- 1 | /* Base */ 2 | @font-face { 3 | font-family: "Inter-Regular"; 4 | src: url('/luci-static/alpha/fonts/Inter-Regular.woff2'); 5 | } 6 | 7 | @font-face { 8 | font-family: "Inter-Medium"; 9 | src: url('/luci-static/alpha/fonts/Inter-Medium.woff2'); 10 | } 11 | 12 | @font-face { 13 | font-family: "Inter-Black"; 14 | src: url('/luci-static/alpha/fonts/Inter-Black.woff2'); 15 | } 16 | 17 | @font-face { 18 | font-family: "Inter-Bold"; 19 | src: url('/luci-static/alpha/fonts/Inter-Bold.woff2'); 20 | } 21 | 22 | @font-face { 23 | font-family: "Quicksand-Bold"; 24 | src: url('/luci-static/alpha/fonts/Quicksand-Bold.ttf'); 25 | } 26 | 27 | @font-face { 28 | font-family: argon; 29 | src: url('/luci-static/alpha/fonts/argon.woff'); 30 | 31 | } 32 | 33 | [class^="icon-"], 34 | [class*=" icon-"] { 35 | font-family: argon !important; 36 | font-style: normal; 37 | font-weight: 400; 38 | font-variant: normal; 39 | text-transform: none; 40 | line-height: 1; 41 | -webkit-font-smoothing: antialiased; 42 | -moz-osx-font-smoothing: grayscale; 43 | } 44 | 45 | a { 46 | color: #5a8dee; 47 | text-decoration: none; 48 | background-color: transparent; 49 | } 50 | 51 | b { 52 | color: #5a8dee; 53 | text-decoration: none; 54 | background-color: transparent; 55 | font-family: "Quicksand-Bold"; 56 | 57 | } 58 | 59 | ::-webkit-scrollbar:hover { 60 | background-color: rgba(100, 100, 100, 0.09); 61 | } 62 | 63 | ::-webkit-scrollbar-thumb:vertical { 64 | background: rgba(100, 100, 100, 0.5); 65 | -webkit-border-radius: 100px; 66 | } 67 | 68 | ::-webkit-scrollbar-thumb:vertical:active { 69 | background: rgba(100, 100, 100, 0.61); 70 | -webkit-border-radius: 100px; 71 | } 72 | 73 | ::-webkit-scrollbar { 74 | width: 0.2em !important; 75 | overflow: visible; 76 | border-radius: 4px; 77 | -webkit-border-radius: 4px; 78 | } 79 | 80 | ::-webkit-scrollbar-track { 81 | opacity: 0; 82 | -webkit-transition: all 0.5s; 83 | } 84 | 85 | ::-webkit-scrollbar-thumb { 86 | overflow: visible; 87 | border-radius: 4px; 88 | background: rgba(100, 100, 100, 0.2); 89 | } 90 | 91 | .icon-hello-world:before { 92 | content: "\e90e"; 93 | } 94 | 95 | .icon-expand_more:before { 96 | content: "\e20b"; 97 | } 98 | 99 | .icon-menu:before { 100 | content: "\e20e"; 101 | } 102 | 103 | .icon-favorite:before { 104 | content: "\e291"; 105 | } 106 | 107 | .icon-spinner:before { 108 | content: "\e603"; 109 | } 110 | 111 | .icon-delete:before { 112 | content: "\e900"; 113 | } 114 | 115 | .icon-edit:before { 116 | content: "\e901"; 117 | } 118 | 119 | .icon-use:before { 120 | content: "\e902"; 121 | } 122 | 123 | .icon-loading:before { 124 | content: "\e903"; 125 | } 126 | 127 | .icon-switch:before { 128 | content: "\e904"; 129 | } 130 | 131 | .icon-error:before { 132 | content: "\e905"; 133 | } 134 | 135 | .icon-dashboard:before { 136 | content: "\e906"; 137 | } 138 | 139 | .icon-logout:before { 140 | content: "\e907"; 141 | } 142 | 143 | .icon-Network:before { 144 | content: "\e908"; 145 | } 146 | 147 | .icon-services:before { 148 | content: "\e909"; 149 | } 150 | 151 | .icon-system:before { 152 | content: "\e90a"; 153 | } 154 | 155 | .icon-vpn:before { 156 | content: "\e90b"; 157 | } 158 | 159 | .icon-storage:before { 160 | content: "\e90c"; 161 | } 162 | 163 | .icon-statistics:before { 164 | content: "\e90d"; 165 | } 166 | 167 | .icon-angle-right:before { 168 | content: "\e90f"; 169 | } 170 | 171 | .icon-user:before { 172 | content: "\e971"; 173 | } 174 | 175 | .icon-question:before { 176 | content: "\f059"; 177 | } 178 | 179 | :root { 180 | --main-color: #09c; 181 | --header-bg: #161624; 182 | --header-color: rgb(10, 10, 10); 183 | --bar-bg: #3f3f3f69; 184 | --menu-bg-color: #fff; 185 | --menu-color: #5f6368; 186 | --menu-color-hover: #202124; 187 | --main-menu-color: #202124; 188 | --submenu-bg-hover: #4d5ca5; 189 | --submenu-bg-hover-active: #09c; 190 | --font-body: 'Inter-Regular'; 191 | } 192 | 193 | tt { 194 | font-family: "Quicksand-Bold"; 195 | color: #09c; 196 | } 197 | 198 | em { 199 | font-style: italic; 200 | color: #fff 201 | } 202 | 203 | p { 204 | display: block; 205 | margin-block-start: 1em; 206 | margin-block-end: 1em; 207 | margin-inline-start: 0px; 208 | margin-inline-end: 0px; 209 | color: #ffffff; 210 | } 211 | 212 | li { 213 | display: block; 214 | list-style-type: disc; 215 | margin-block-start: 5px; 216 | margin-block-end: 5px; 217 | margin-inline-start: 0px; 218 | margin-inline-end: 0px; 219 | color: #ffffff; 220 | } 221 | 222 | small { 223 | font-size: smaller; 224 | color: #ffff; 225 | } 226 | 227 | label { 228 | cursor: default; 229 | color: #ffffff; 230 | } 231 | 232 | .table { 233 | position: relative; 234 | display: table; 235 | } 236 | 237 | .tr { 238 | display: table-row; 239 | } 240 | 241 | .thead { 242 | display: table-header-group; 243 | } 244 | 245 | .tbody { 246 | display: table-row-group; 247 | } 248 | 249 | .tfoot { 250 | display: table-footer-group; 251 | } 252 | 253 | .td, 254 | .th { 255 | line-height: normal; 256 | display: table-cell; 257 | vertical-align: middle; 258 | padding: 0.5em; 259 | } 260 | 261 | .th { 262 | font-weight: 700; 263 | } 264 | 265 | .tr.placeholder { 266 | height: 4em; 267 | } 268 | 269 | .tr.placeholder>.td { 270 | line-height: 3; 271 | position: absolute; 272 | right: 0; 273 | bottom: 0; 274 | left: 0; 275 | text-align: center !important; 276 | background: inherit; 277 | } 278 | 279 | .table[width="33%"], 280 | .th[width="33%"], 281 | .td[width="33%"] { 282 | width: 33%; 283 | } 284 | 285 | .col-1 { 286 | flex: 1 1 30px !important; 287 | } 288 | 289 | .col-2 { 290 | flex: 2 2 60px !important; 291 | } 292 | 293 | .col-3 { 294 | flex: 3 3 90px !important; 295 | } 296 | 297 | .col-4 { 298 | flex: 4 4 120px !important; 299 | } 300 | 301 | .col-5 { 302 | flex: 5 5 150px !important; 303 | } 304 | 305 | .col-6 { 306 | flex: 6 6 180px !important; 307 | } 308 | 309 | .col-7 { 310 | flex: 7 7 210px !important; 311 | } 312 | 313 | .col-8 { 314 | flex: 8 8 240px !important; 315 | } 316 | 317 | .col-9 { 318 | flex: 9 9 270px !important; 319 | } 320 | 321 | .col-10 { 322 | flex: 10 10 300px !important; 323 | } 324 | 325 | * { 326 | box-sizing: border-box; 327 | padding: 0; 328 | } 329 | 330 | .h1, 331 | .h2, 332 | .h3, 333 | .h4, 334 | .h5, 335 | .h6, 336 | h1, 337 | h2, 338 | h3, 339 | h4, 340 | h5, 341 | h6 { 342 | font-family: inherit; 343 | font-weight: 400; 344 | line-height: 1.1 !important; 345 | color: #fff; 346 | } 347 | 348 | html { 349 | overflow-y: hidden; 350 | -webkit-text-size-adjust: 100%; 351 | -ms-text-size-adjust: 100%; 352 | } 353 | 354 | body { 355 | font-size: 0.8rem; 356 | height: 100%; 357 | background-position: center; 358 | background-repeat: no-repeat; 359 | background-size: cover; 360 | background-attachment: fixed; 361 | background-color: rgb(10, 10, 10); 362 | } 363 | 364 | .text { 365 | font-style: italic; 366 | color: #fff; 367 | } 368 | 369 | html, 370 | body { 371 | font-family: var(--font-body); 372 | height: 100%; 373 | margin: 0; 374 | padding: 0; 375 | } 376 | 377 | select { 378 | color: #555; 379 | border: thin solid #ccc; 380 | background-color: #fff; 381 | background-image: none; 382 | padding: 0.36rem 0.8rem; 383 | } 384 | 385 | .btn, 386 | button, 387 | select, 388 | input, 389 | .cbi-dropdown { 390 | height: 2.3rem; 391 | color: rgba(255, 255, 255, 0.87); 392 | border: 0; 393 | border-bottom: 2px solid #30304b; 394 | border-radius: 10px; 395 | border-radius: 20px; 396 | outline: 0; 397 | background-color: #222235; 398 | background-image: none; 399 | box-shadow: none; 400 | padding: 0.5rem; 401 | } 402 | 403 | select, 404 | .cbi-dropdown { 405 | width: inherit; 406 | cursor: default; 407 | } 408 | 409 | select:not([multiple="multiple"]):focus, 410 | input:not(.cbi-button):focus, 411 | .cbi-dropdown:focus { 412 | border-color: var(--main-color); 413 | } 414 | 415 | .cbi-dropdown, 416 | select[multiple="multiple"] { 417 | height: auto; 418 | } 419 | 420 | pre { 421 | overflow: auto; 422 | color: #fff; 423 | } 424 | 425 | code { 426 | font-size: 1rem; 427 | font-size-adjust: 0.35; 428 | color: #101010; 429 | border-radius: 0px; 430 | background: #ddd; 431 | padding: 1px 3px; 432 | } 433 | 434 | abbr { 435 | cursor: help; 436 | text-decoration: underline; 437 | color: #84d0ea; 438 | } 439 | 440 | hr { 441 | opacity: 0.1; 442 | border-color: #eee; 443 | margin: 1rem 0; 444 | } 445 | 446 | /* End Base */ 447 | 448 | /* Header */ 449 | header, 450 | .main { 451 | position: absolute; 452 | width: 100%; 453 | } 454 | 455 | header { 456 | position: fixed; 457 | z-index: 2000; 458 | float: left; 459 | height: 4rem; 460 | transition: box-shadow 0.2s; 461 | color: var(--header-color); 462 | background: #2222359a; 463 | backdrop-filter: blur(10px); 464 | -webkit-backdrop-filter: blur(10px); 465 | } 466 | 467 | header>.fill>.container { 468 | margin-top: 0.5rem; 469 | -webkit-user-select: none; 470 | -moz-user-select: none; 471 | -ms-user-select: none; 472 | user-select: none; 473 | padding: 0.5rem 1rem 0; 474 | } 475 | 476 | header>.fill>.container>#logo { 477 | padding: 0; 478 | margin: 0 !important; 479 | position: absolute; 480 | left: 0; 481 | top: 50%; 482 | height: 100%; 483 | transform: translateY(-50%); 484 | padding: 1rem; 485 | display: flex; 486 | justify-content: center; 487 | width: calc(16rem); 488 | } 489 | 490 | header>.fill>.container>#logo>img { 491 | width: auto; 492 | height: 100%; 493 | margin-top: -0.1rem; 494 | } 495 | 496 | header>.fill>.container>.brand { 497 | font-size: 1.4rem; 498 | position: absolute; 499 | cursor: default; 500 | vertical-align: text-bottom; 501 | text-decoration: none; 502 | color: var(--header-color); 503 | } 504 | 505 | header>.fill>.container>.status { 506 | position: fixed; 507 | top: 9px; 508 | right: 1em; 509 | float: right; 510 | } 511 | 512 | header>.fill>.container>.status>* { 513 | position: relative; 514 | top: 0.2rem; 515 | float: left; 516 | left: -2.5rem; 517 | margin-left: 0.3rem; 518 | cursor: pointer; 519 | } 520 | 521 | header>.fill>.container>.logout { 522 | position: fixed; 523 | top: 9px; 524 | right: 1em; 525 | float: right; 526 | } 527 | 528 | header>.fill>.container>.logout>* { 529 | position: relative; 530 | top: 0.2rem; 531 | float: left; 532 | right: 0rem; 533 | margin-left: 0.3rem; 534 | cursor: pointer; 535 | content: ""; 536 | } 537 | 538 | .logout a { 539 | position: absolute; 540 | right: 14px; 541 | width: 32px; 542 | height: 32px; 543 | content: ""; 544 | background: url(./icon/logout.svg) no-repeat; 545 | text-indent: -9999px; 546 | background-size: 32px; 547 | } 548 | 549 | /* End Header */ 550 | 551 | /* Footer */ 552 | footer { 553 | font-size: 0.8rem; 554 | overflow: hidden; 555 | text-align: center; 556 | white-space: nowrap; 557 | color: #000000; 558 | padding: 1rem; 559 | } 560 | 561 | footer>a { 562 | text-decoration: none; 563 | align-items: center; 564 | color: #e6e6e696; 565 | border-bottom: 0; 566 | background-color: #2222359a; 567 | border-radius: 10px; 568 | padding: 9px; 569 | padding-bottom: 3px; 570 | padding-top: 3px; 571 | backdrop-filter: blur(10px); 572 | -webkit-backdrop-filter: blur(10px); 573 | } 574 | 575 | small { 576 | font-size: 90%; 577 | line-height: 1.42857143; 578 | white-space: normal; 579 | } 580 | 581 | /* End Footer */ 582 | 583 | /* Navbar */ 584 | @media screen and (min-width: 720px) { 585 | .navbar { 586 | position: fixed; 587 | bottom: 50%; 588 | transform: translateY(50%); 589 | transition-duration: 200ms; 590 | right: 30px; 591 | border-top: var(--navBorder); 592 | text-align: center; 593 | background-color: #000000da; 594 | box-shadow: 0 0 10px 0px #0000002d; 595 | box-sizing: content-box; 596 | border-radius: 10px; 597 | } 598 | 599 | .navbar--hidden { 600 | transform: translateY(60px); 601 | box-shadow: none; 602 | } 603 | 604 | .navbar .toggler { 605 | transition-duration: 100ms; 606 | position: absolute; 607 | background: #ffffffb0; 608 | box-shadow: 0 0 10px 0 #0000000f; 609 | transform: translateY(50%); 610 | bottom: 50%; 611 | right: calc(100% + 10px); 612 | width: 32px; 613 | height: 32px; 614 | padding: 8px; 615 | border-radius: 100%; 616 | content: ""; 617 | box-sizing: border-box; 618 | cursor: pointer; 619 | } 620 | 621 | .navbar .toggler img { 622 | transform: rotate(270deg); 623 | } 624 | 625 | .navbar .dropdown { 626 | display: flex; 627 | flex-direction: column; 628 | overflow: hidden; 629 | width: 64px; 630 | padding: 0.25rem; 631 | } 632 | 633 | .navbar .dropdown a { 634 | display: block; 635 | text-align: center; 636 | padding: 8px; 637 | text-decoration: none; 638 | max-width: 100px; 639 | width: 100%; 640 | } 641 | 642 | .navbar .dropdown a img { 643 | width: 100%; 644 | } 645 | 646 | .navbar.active { 647 | right: -64px; 648 | } 649 | 650 | .navbar.active .toggler { 651 | right: calc(100% + 10px); 652 | } 653 | 654 | .navbar.active .toggler img { 655 | transform: rotate(90deg); 656 | } 657 | } 658 | 659 | @media screen and (max-width: 720px) { 660 | .navbar { 661 | 662 | overflow: hidden; 663 | position: fixed; 664 | bottom: 5px; 665 | top: auto; 666 | left: 10px; 667 | right: auto; 668 | width: 95%; 669 | align: center; 670 | transition: transform 0.5s; 671 | border-top: var(--navBorder); 672 | text-align: center; 673 | height: calc(50px + constant(safe-area-inset-bottom)); 674 | height: calc(50px + env(safe-area-inset-bottom)); 675 | background-color: #00000079; 676 | border-radius: 20px; 677 | backdrop-filter: blur(10px); 678 | -webkit-backdrop-filter: blur(10px); 679 | 680 | } 681 | 682 | .navbar--hidden { 683 | transform: translateY(60px); 684 | box-shadow: none; 685 | } 686 | 687 | .navbar a { 688 | float: left; 689 | text-align: center; 690 | padding: 8px 0; 691 | text-decoration: none; 692 | } 693 | 694 | .navbar a img { 695 | width: 28px; 696 | } 697 | } 698 | 699 | /* End Navbar */ 700 | 701 | .main { 702 | position: relative; 703 | top: 4rem; 704 | bottom: 0; 705 | overflow-y: auto; 706 | height: calc(100% - 4rem); 707 | } 708 | 709 | .main>.loading { 710 | position: fixed; 711 | z-index: 1000; 712 | top: 0; 713 | opacity: 1; 714 | visibility: visible; 715 | width: 100%; 716 | height: 100%; 717 | pointer-events: none; 718 | background-color: rgba(0, 0, 0, 0.781); 719 | transition: .4s ease-in-out; 720 | border-radius: 10px; 721 | } 722 | 723 | .main>.loading>span { 724 | font-family: monospace; 725 | font-size: 2rem; 726 | font-size-adjust: 0.35; 727 | position: relative; 728 | top: 12.5%; 729 | display: block; 730 | text-align: center; 731 | color: #888; 732 | } 733 | 734 | .main>.loading>span>.loading-img { 735 | display: inline-flex; 736 | gap: 10px; 737 | } 738 | 739 | .main>.loading>span>.loading-img:before, 740 | .loading-img:after { 741 | content: ""; 742 | height: 20px; 743 | aspect-ratio: 1; 744 | border-radius: 50%; 745 | background: 746 | linear-gradient(#222 0 0) top/100% 0% no-repeat, 747 | radial-gradient(farthest-side, #000 95%, #0000) 50%/8px 8px no-repeat #ffffff; 748 | animation: l9 4s infinite ease-in; 749 | } 750 | 751 | @keyframes l9 { 752 | 0% { 753 | background-size: 100% 0%, 8px 8px; 754 | background-position: top, 50% 50% 755 | } 756 | 757 | 80% { 758 | background-size: 100% 70%, 8px 8px; 759 | background-position: top, 50% 70% 760 | } 761 | 762 | 84%, 763 | 100% { 764 | background-size: 100% 0%, 8px 8px; 765 | background-position: top, 50% 50% 766 | } 767 | } 768 | 769 | .cbi-map { 770 | margin-top: 10px; 771 | } 772 | 773 | #cbi-shadowsocksr .cbi-map-descr { 774 | display: none; 775 | } 776 | 777 | strong { 778 | font-weight: bold; 779 | color: rgb(255, 255, 255); 780 | } 781 | 782 | .main-right { 783 | float: right; 784 | width: calc(100% - 16rem); 785 | height: 100%; 786 | } 787 | 788 | .nowrap:not(.td) { 789 | white-space: nowrap; 790 | color: #ffffff; 791 | } 792 | 793 | [disabled="disabled"] { 794 | pointer-events: none; 795 | } 796 | 797 | /* Sidebar */ 798 | .main>.main-left { 799 | position: fixed; 800 | top: 4.8rem; 801 | width: calc(0% + 16rem); 802 | float: left; 803 | overflow-x: auto; 804 | background-color: #2222359a; 805 | transition: visibility 400ms, width 400ms; 806 | border-top-left-radius: 0px; 807 | border-top-right-radius: 20px; 808 | border-bottom-left-radius: 0px; 809 | border-bottom-right-radius: 20px; 810 | backdrop-filter: blur(20px); 811 | -webkit-backdrop-filter: blur(20px); 812 | height: calc(100% - 3.5rem); 813 | 814 | } 815 | 816 | .main>.main-left>.nav { 817 | padding: 0.5rem 0.5rem 2rem; 818 | } 819 | 820 | .main>.main-left>.nav>li { 821 | cursor: pointer; 822 | -webkit-user-select: none; 823 | -moz-user-select: none; 824 | -ms-user-select: none; 825 | user-select: none; 826 | } 827 | 828 | .main>.main-left>.nav>li>[data-title="Log out"], 829 | .main>.main-left>.nav>li>[data-title="Logout"] { 830 | display: flex; 831 | padding: 0.5rem 1rem; 832 | } 833 | 834 | .main>.main-left>.nav>li a { 835 | display: block; 836 | color: #cbcbcb; 837 | } 838 | 839 | .main>.main-left>.nav>li>[data-title="Log out"], 840 | .main>.main-left>.nav>li>[data-title="Logout"], 841 | .main>.main-left>.nav>li>[data-title="iStore"] { 842 | font-size: 1rem; 843 | color: #fff; 844 | } 845 | 846 | .main>.main-left>.nav>li.slide.active { 847 | background-color: unset; 848 | } 849 | 850 | .main>.main-left>.nav>.slide { 851 | padding: 0; 852 | } 853 | 854 | .main>.main-left>.nav>.slide>.menu, 855 | .main>.main-left>.nav>li>[data-title="Logout"], 856 | .main>.main-left>.nav>li>[data-title="iStore"], 857 | .main>.main-left>.nav>li>[data-title="Dashboard"] { 858 | font-size: 1rem; 859 | font-weight: 500; 860 | display: flex; 861 | align-items: center; 862 | width: 100%; 863 | text-decoration: none; 864 | color: #fff; 865 | padding: 0.5rem 1rem; 866 | transition-duration: 200ms; 867 | margin-bottom: 5px; 868 | } 869 | 870 | .main>.main-left>.nav>.slide>.menu::before { 871 | position: absolute; 872 | right: 14px; 873 | width: 25px; 874 | height: 25px; 875 | content: ""; 876 | background: url(./icon/sidebar-icon/app.svg) no-repeat; 877 | background-size: 25px; 878 | } 879 | 880 | .main>.main-left>.nav>.slide>.menu.active::before {} 881 | 882 | .main>.main-left>.nav>.slide>[data-title="Status"]:before { 883 | position: absolute; 884 | right: 14px; 885 | width: 25px; 886 | height: 25px; 887 | content: ""; 888 | background: url(./icon/sidebar-icon/status.svg) no-repeat; 889 | background-size: 25px; 890 | } 891 | 892 | .main>.main-left>.nav>.slide>[data-title="System"]:before { 893 | position: absolute; 894 | right: 14px; 895 | width: 25px; 896 | height: 25px; 897 | content: ""; 898 | background: url(./icon/sidebar-icon/system.svg) no-repeat; 899 | background-size: 25px; 900 | } 901 | 902 | .main>.main-left>.nav>.slide>[data-title="Services"]:before { 903 | position: absolute; 904 | right: 14px; 905 | width: 25px; 906 | height: 25px; 907 | content: ""; 908 | background: url(./icon/sidebar-icon/services.svg) no-repeat; 909 | background-size: 25px; 910 | } 911 | 912 | .main>.main-left>.nav>.slide>[data-title="NAS"]:before { 913 | position: absolute; 914 | right: 14px; 915 | width: 25px; 916 | height: 25px; 917 | content: ""; 918 | background: url(./icon/sidebar-icon/nas.svg) no-repeat; 919 | background-size: 25px; 920 | } 921 | 922 | .main>.main-left>.nav>.slide>[data-title="Modem"]:before { 923 | position: absolute; 924 | right: 14px; 925 | width: 25px; 926 | height: 25px; 927 | content: ""; 928 | background: url(./icon/sidebar-icon/modem.svg) no-repeat; 929 | background-size: 25px; 930 | } 931 | 932 | .main>.main-left>.nav>.slide>[data-title="Network"]:before { 933 | position: absolute; 934 | right: 14px; 935 | width: 25px; 936 | height: 25px; 937 | content: ""; 938 | background: url(./icon/sidebar-icon/network.svg) no-repeat; 939 | background-size: 25px; 940 | } 941 | 942 | .main>.main-left>.nav>.slide>[data-title="VPN"]:before { 943 | position: absolute; 944 | right: 14px; 945 | width: 25px; 946 | height: 25px; 947 | content: ""; 948 | background: url(./icon/sidebar-icon/vpn.svg) no-repeat; 949 | background-size: 25px; 950 | } 951 | 952 | .main>.main-left>.nav>.slide>[data-title="Docker"]:before { 953 | position: absolute; 954 | right: 14px; 955 | width: 25px; 956 | height: 25px; 957 | content: ""; 958 | background: url(./icon/sidebar-icon/docker.svg) no-repeat; 959 | background-size: 25px; 960 | } 961 | 962 | .main>.main-left>.nav>li>[data-title="iStore"]:before { 963 | position: absolute; 964 | right: 14px; 965 | width: 25px; 966 | height: 25px; 967 | content: ""; 968 | background: url(./icon/sidebar-icon/istore.svg) no-repeat; 969 | background-size: 25px; 970 | } 971 | 972 | /* End Sidebar */ 973 | 974 | .modemenu-buttons { 975 | display: flex; 976 | flex-wrap: wrap; 977 | align-items: center; 978 | color: var(--header-color); 979 | background: var(--header-bg); 980 | transition: box-shadow 0.2s; 981 | box-shadow: 0 2px 5px rgb(0 0 0 / 26%); 982 | padding: 0.5rem; 983 | } 984 | 985 | #modemenu { 986 | display: flex; 987 | align-items: center; 988 | flex-wrap: wrap; 989 | margin: 0.25rem; 990 | } 991 | 992 | #modemenu>li.divider { 993 | margin-left: 0.25rem; 994 | margin-right: 0.25rem; 995 | border: 0.5rem solid var(--submenu-bg-hover); 996 | border-left: 1px solid var(--submenu-bg-hover); 997 | border-right: 1px solid var(--submenu-bg-hover); 998 | border-radius: 1rem; 999 | } 1000 | 1001 | .danger { 1002 | background-color: #ff7d60 !important; 1003 | } 1004 | 1005 | .warning { 1006 | background-color: #bebebe87 !important; 1007 | border-radius: 10px; 1008 | color: #fff; 1009 | } 1010 | 1011 | .success { 1012 | background-color: #5cb85c !important; 1013 | } 1014 | 1015 | .error { 1016 | color: red; 1017 | } 1018 | 1019 | .alert, 1020 | .alert-message { 1021 | font-weight: 700; 1022 | margin-bottom: 1em; 1023 | border: 0; 1024 | border-radius: 20px; 1025 | background-color: #2222359a; 1026 | padding: 1rem; 1027 | margin: 1rem; 1028 | } 1029 | 1030 | .alert-message>h4 { 1031 | font-size: 110%; 1032 | font-weight: 700; 1033 | } 1034 | 1035 | .alert-message>* { 1036 | margin: 0.5rem 0; 1037 | } 1038 | 1039 | body[class*="node-"]>.main>.main-left>.nav>.slide>.menu::before { 1040 | transition: transform 0.1s ease-in-out; 1041 | } 1042 | 1043 | body[class*="node-"]>.main>.main-left>.nav>.slide>.menu.active::before { 1044 | transition: transform 0.2s ease-in-out; 1045 | } 1046 | 1047 | .main>.main-left>.nav>li>[data-title="Logout"]::before, 1048 | .main>.main-left>.nav>li>[data-title="Log out"]::before { 1049 | position: absolute; 1050 | right: 14px; 1051 | width: 25px; 1052 | height: 25px; 1053 | content: ""; 1054 | background: url(./icon/logout.svg) no-repeat; 1055 | background-size: 25px; 1056 | } 1057 | 1058 | .main>.main-left>.nav>.slide:hover { 1059 | background: none; 1060 | } 1061 | 1062 | .main>.main-left>.nav>.slide>.slide-menu>li>a { 1063 | white-space: nowrap; 1064 | text-decoration: none; 1065 | padding: 0.4rem 2rem; 1066 | } 1067 | 1068 | .main>.main-left>.nav>.slide>.slide-menu>li:not(.active):hover>a { 1069 | color: #fff; 1070 | } 1071 | 1072 | .main>.main-left>.nav>.slide>.slide-menu>.active:hover { 1073 | background-color: var(--main-color); 1074 | } 1075 | 1076 | .main>.main-left>.nav>.slide>.menu, 1077 | .main>.main-left>.nav>.slide>.slide-menu>li, 1078 | .main>.main-left>.nav>li>[data-title="Logout"], 1079 | .main>.main-left>.nav>li>[data-title="Log out"], 1080 | .main>.main-left>.nav>li>[data-title="iStore"] { 1081 | position: relative; 1082 | overflow: hidden; 1083 | transform: translate3d(0, 0, 0); 1084 | } 1085 | 1086 | .main>.main-left>.nav>.slide>.menu::after, 1087 | .main>.main-left>.nav>.slide>.slide-menu>li::after, 1088 | .main>.main-left>.nav>li>[data-title="Logout"]::after, 1089 | .main>.main-left>.nav>li>[data-title="Log out"]::after, 1090 | .main>.main-left>.nav>li>[data-title="iStore"]::after { 1091 | position: absolute; 1092 | top: 0; 1093 | left: 0; 1094 | display: block; 1095 | width: 100%; 1096 | height: 100%; 1097 | content: ""; 1098 | transition: transform 0.5s, opacity 1s; 1099 | transform: scale(10, 10); 1100 | pointer-events: none; 1101 | opacity: 0; 1102 | background-image: radial-gradient(circle, #000 10%, transparent 10.01%); 1103 | background-repeat: no-repeat; 1104 | background-position: 50%; 1105 | } 1106 | 1107 | .main>.main-left>.nav>.slide>.menu:active::after, 1108 | .main>.main-left>.nav>.slide>.slide-menu>li:active::after, 1109 | .main>.main-left>.nav>li>[data-title="Logout"]:active::after, 1110 | .main>.main-left>.nav>li>[data-title="Log out"]:active::after, 1111 | .main>.main-left>.nav>li>[data-title="iStore"]:active::after { 1112 | transition: 0s; 1113 | transform: scale(0, 0); 1114 | opacity: 0.2; 1115 | } 1116 | 1117 | #maincontent>.container { 1118 | margin: 0 2rem 1rem; 1119 | } 1120 | 1121 | ul { 1122 | line-height: normal; 1123 | } 1124 | 1125 | li { 1126 | list-style-type: none; 1127 | } 1128 | 1129 | h1 { 1130 | font-size: 2rem; 1131 | padding-bottom: 10px; 1132 | border-bottom: thin solid #eee; 1133 | } 1134 | 1135 | h2 { 1136 | font-size: 1.8rem; 1137 | font-family: "Quicksand-Bold"; 1138 | letter-spacing: 5px; 1139 | text-align: center; 1140 | padding-bottom: 10px; 1141 | margin: 2rem 0 0; 1142 | color: #ffffff; 1143 | animation-duration: 1s; 1144 | animation-name: down; 1145 | } 1146 | 1147 | h3 { 1148 | font-size: 1.2rem; 1149 | font-family: 'Inter-Bold'; 1150 | letter-spacing: 2px; 1151 | padding-bottom: 10px; 1152 | margin: 2rem 0 0; 1153 | color: #ffffff; 1154 | } 1155 | 1156 | h4 { 1157 | font-size: 1.2rem; 1158 | color: #fff; 1159 | padding-bottom: 10px; 1160 | margin: 2rem 0 0; 1161 | } 1162 | 1163 | h5 { 1164 | font-size: 1rem; 1165 | padding-bottom: 10px; 1166 | margin: 2rem 0 0; 1167 | } 1168 | 1169 | .cbi-tab-descr { 1170 | color: #09c; 1171 | margin: 1em; 1172 | padding: 1rem; 1173 | } 1174 | 1175 | #tabmenu { 1176 | padding: 0; 1177 | } 1178 | 1179 | .cbi-section, 1180 | .cbi-section-error, 1181 | #iptables, 1182 | .Firewall form, 1183 | #cbi-network>.cbi-section-node, 1184 | #cbi-wireless>.cbi-section-node, 1185 | #cbi-wireless>#wifi_assoclist_table, 1186 | [data-tab-title], 1187 | [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), 1188 | [data-page="admin-system-opkg"] #maincontent>.container { 1189 | font-family: inherit; 1190 | font-weight: 400; 1191 | font-style: normal; 1192 | line-height: normal; 1193 | min-width: inherit; 1194 | border: 0; 1195 | border-radius: 0; 1196 | background-color: #2222359a; 1197 | margin: 1rem 0 0; 1198 | padding: 2rem; 1199 | border-radius: 20px; 1200 | backdrop-filter: blur(20px); 1201 | -webkit-backdrop-filter: blur(20px); 1202 | } 1203 | 1204 | .cbi-modal .cbi-section, 1205 | .cbi-section .cbi-section {} 1206 | 1207 | .cbi-modal .cbi-tabmenu { 1208 | margin-left: 0; 1209 | } 1210 | 1211 | .cbi-map-descr, 1212 | .cbi-section-descr { 1213 | font-size: small; 1214 | text-align: center; 1215 | line-height: 1.42857143; 1216 | color: #999; 1217 | padding: 0.5rem; 1218 | } 1219 | 1220 | .cbi-section>legend { 1221 | display: none !important; 1222 | } 1223 | 1224 | fieldset>fieldset, 1225 | .cbi-section>.cbi-section { 1226 | border: 0; 1227 | box-shadow: none; 1228 | margin: 0; 1229 | padding: 0; 1230 | } 1231 | 1232 | .cbi-section>h3:first-child, 1233 | .panel-title { 1234 | font-size: 1.4rem; 1235 | line-height: 1; 1236 | display: block; 1237 | width: 100%; 1238 | padding-bottom: 1rem; 1239 | color: #e4e4e4; 1240 | border-bottom: thin solid #eeeeee00; 1241 | margin: 0 0 0.5rem; 1242 | } 1243 | 1244 | .cbi-section>h4:first-child, 1245 | .cbi-section>p:first-child, 1246 | [data-tab-title]>h3:first-child, 1247 | [data-tab-title]>h4:first-child, 1248 | [data-tab-title]>p:first-child { 1249 | padding-top: 1rem; 1250 | } 1251 | 1252 | table { 1253 | border-spacing: 0; 1254 | border-collapse: collapse; 1255 | } 1256 | 1257 | table, 1258 | .table { 1259 | overflow-y: hidden; 1260 | width: 100%; 1261 | border-radius: 10px; 1262 | } 1263 | 1264 | .container>.cbi-section:first-of-type>.table[width="100%"]>.tr>.td { 1265 | padding: 0.6rem; 1266 | } 1267 | 1268 | .cbi-section-table-cell { 1269 | line-height: 1.1; 1270 | align-self: flex-end; 1271 | flex: 1 1 auto; 1272 | } 1273 | 1274 | tr>td, 1275 | tr>th, 1276 | .tr>.td, 1277 | .tr>.th, 1278 | .cbi-section-table-row::before, 1279 | #cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) { 1280 | color: #ffffff; 1281 | border-top: thin solid rgba(255, 255, 255, 0); 1282 | } 1283 | 1284 | .table[width="100%"]>.tr:first-child>.td { 1285 | margin: auto 0; 1286 | } 1287 | 1288 | .cbi-section-table-row { 1289 | margin-bottom: 1rem; 1290 | text-align: center !important; 1291 | } 1292 | 1293 | .cbi-section-table-row:last-child { 1294 | margin-bottom: 0; 1295 | } 1296 | 1297 | .cbi-section-table-row>.cbi-value-field [data-dynlist]>input, 1298 | .cbi-section-table-row>.cbi-value-field input.cbi-input-password { 1299 | width: calc(100% - 1.5rem); 1300 | } 1301 | 1302 | table table, 1303 | .table .table, 1304 | .cbi-value-field table, 1305 | .cbi-value-field .table, 1306 | td>table>tbody>tr>td, 1307 | .td>.table>.tbody>.tr>.td, 1308 | .cbi-value-field>table>tbody>tr>td, 1309 | .cbi-value-field>.table>.tbody>.tr>.td { 1310 | border: 0; 1311 | } 1312 | 1313 | .btn, 1314 | .cbi-button, 1315 | .item::after { 1316 | font-size: 0.8rem; 1317 | display: inline-block; 1318 | width: auto !important; 1319 | cursor: pointer; 1320 | -webkit-user-select: none; 1321 | -moz-user-select: none; 1322 | -ms-user-select: none; 1323 | user-select: none; 1324 | transition: all 0.2s ease-in-out; 1325 | text-align: center; 1326 | vertical-align: middle; 1327 | white-space: nowrap; 1328 | text-decoration: none; 1329 | text-transform: uppercase; 1330 | color: rgba(0, 0, 0, 0.87); 1331 | border: 0; 1332 | background-color: #f0f0f0; 1333 | background-image: none; 1334 | -webkit-appearance: none; 1335 | -ms-touch-action: manipulation; 1336 | touch-action: manipulation; 1337 | padding: 0 0.8rem; 1338 | } 1339 | 1340 | .cbi-button-up { 1341 | transform: scaleY(-1); 1342 | } 1343 | 1344 | .cbi-button:not(select) { 1345 | -webkit-appearance: none !important; 1346 | } 1347 | 1348 | .cbi-button+.cbi-button { 1349 | margin-left: 0.6rem; 1350 | } 1351 | 1352 | .btn:hover, 1353 | .btn:focus, 1354 | .btn:active, 1355 | .cbi-button:hover, 1356 | .cbi-button:focus, 1357 | .cbi-button:active, 1358 | .item:hover::after, 1359 | .item:focus::after, 1360 | .item:active::after, 1361 | .cbi-page-actions .cbi-button-apply+.cbi-button-save:hover, 1362 | .cbi-page-actions .cbi-button-apply+.cbi-button-save:focus, 1363 | .cbi-page-actions .cbi-button-apply+.cbi-button-save:active { 1364 | text-decoration: none; 1365 | outline: 0; 1366 | } 1367 | 1368 | .btn:hover, 1369 | .btn:focus, 1370 | .cbi-button:hover, 1371 | .cbi-button:focus, 1372 | .item:hover::after, 1373 | .item:focus::after { 1374 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); 1375 | } 1376 | 1377 | .btn:active, 1378 | .cbi-button:active, 1379 | .item:active::after { 1380 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 1381 | } 1382 | 1383 | .cbi-button-up:hover, 1384 | .cbi-button-up:focus { 1385 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.2); 1386 | } 1387 | 1388 | .cbi-button-up:active { 1389 | box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 -6px 6px rgba(0, 0, 0, 0.23); 1390 | } 1391 | 1392 | .btn:disabled, 1393 | .cbi-button:disabled { 1394 | cursor: not-allowed; 1395 | pointer-events: none; 1396 | opacity: 0.5; 1397 | box-shadow: none; 1398 | } 1399 | 1400 | .alert-message [class="btn"], 1401 | .modal div[class="btn"], 1402 | .cbi-button-find, 1403 | .cbi-button-link, 1404 | .cbi-button-up, 1405 | .cbi-button-down, 1406 | .cbi-button-neutral, 1407 | .cbi-button[name="zero"], 1408 | .cbi-button[name="restart"], 1409 | .cbi-button[onclick="hide_empty(this)"] { 1410 | font-weight: 700; 1411 | background-color: #d4d4d4; 1412 | } 1413 | 1414 | .btn.primary, 1415 | .cbi-page-actions .cbi-button-save, 1416 | .cbi-page-actions .cbi-button-apply+.cbi-button-save, 1417 | .cbi-button-add, 1418 | .cbi-button-save, 1419 | .cbi-button-positive, 1420 | .cbi-button-link, 1421 | .cbi-button[value="Enable"], 1422 | .cbi-button[value="Scan"], 1423 | .cbi-button[value^="Back"], 1424 | .cbi-button-neutral[onclick="handleConfig(event)"] { 1425 | font-weight: 400; 1426 | color: #fff; 1427 | background-color: rgba(0, 229, 255, 0.47); 1428 | border-radius: 20px; 1429 | } 1430 | 1431 | .cbi-page-actions .cbi-button-apply, 1432 | .cbi-section-actions .cbi-button-edit, 1433 | .cbi-button-edit, 1434 | .cbi-button-apply, 1435 | .cbi-button-reload, 1436 | .cbi-button-action, 1437 | .cbi-button[value="Submit"], 1438 | .cbi-button[value="Upload"], 1439 | .cbi-button[value$="Apply"], 1440 | .cbi-button[onclick="addKey(event)"] { 1441 | font-weight: 400; 1442 | color: #fff; 1443 | background-color: rgba(0, 229, 255, 0.47); 1444 | border-radius: 20px; 1445 | } 1446 | 1447 | .btn.danger, 1448 | .cbi-section-remove>.cbi-button, 1449 | .cbi-button-remove, 1450 | .cbi-button-reset, 1451 | .cbi-button-negative, 1452 | .cbi-button[value="Stop"], 1453 | .cbi-button[value="Kill"], 1454 | .cbi-button[onclick="reboot(this)"], 1455 | .cbi-button-neutral[value="Restart"] { 1456 | font-weight: 400; 1457 | color: #fff; 1458 | background-color: rgba(255, 0, 0, 0.47); 1459 | border-radius: 20px; 1460 | } 1461 | 1462 | .btn[value="Dismiss"], 1463 | .cbi-button[value="Terminate"], 1464 | .cbi-button[value="Reset"], 1465 | .cbi-button[value="Disabled"], 1466 | .cbi-button[onclick^="iface_reconnect"], 1467 | .cbi-button[onclick="handleReset(event)"], 1468 | .cbi-button-neutral[value="Disable"] { 1469 | font-weight: 400; 1470 | color: #fff; 1471 | border: thin solid #eea236; 1472 | background-color: #f0ad4e; 1473 | } 1474 | 1475 | .cbi-button-success, 1476 | .cbi-button-download, 1477 | .cbi-button[name="backup"], 1478 | .cbi-button[value="Download"], 1479 | .cbi-button[value="Save mtdblock"] { 1480 | font-weight: 400; 1481 | color: #fff; 1482 | border: thin solid #4cae4c; 1483 | background-color: #5cb85c; 1484 | } 1485 | 1486 | .a-to-btn { 1487 | text-decoration: none; 1488 | } 1489 | 1490 | .cbi-value-field .cbi-button-add { 1491 | font-weight: 700; 1492 | margin: 9px 0 4px 3px; 1493 | padding: 1px 6px; 1494 | } 1495 | 1496 | .tabs { 1497 | border-bottom: 0; 1498 | background-color: #2222359a; 1499 | border-radius: 20px; 1500 | padding: 9px; 1501 | padding-bottom: 3px; 1502 | padding-top: 3px; 1503 | backdrop-filter: blur(20px); 1504 | -webkit-backdrop-filter: blur(20px); 1505 | } 1506 | 1507 | .tabs>li, 1508 | .cbi-tabmenu>li { 1509 | display: inline-block; 1510 | cursor: pointer; 1511 | padding: 0.4rem; 1512 | margin: 0.3rem; 1513 | align-items: center; 1514 | 1515 | } 1516 | 1517 | .tool_label_span { 1518 | color: aqua; 1519 | } 1520 | 1521 | .tabs>li { 1522 | padding-bottom: 0.4rem; 1523 | } 1524 | 1525 | .tabs>li[class~="active"], 1526 | .tabs>li:hover { 1527 | border-bottom-color: var(--main-color); 1528 | } 1529 | 1530 | .tabs>li:hover { 1531 | cursor: pointer; 1532 | border-bottom-color: #c9c9c9; 1533 | } 1534 | 1535 | .tabs>li>a, 1536 | .cbi-tabmenu>li>a { 1537 | text-decoration: none; 1538 | color: #ffffff; 1539 | padding: 0.6rem 0.9rem; 1540 | 1541 | } 1542 | 1543 | .tabs>li[class~="active"]>a { 1544 | color: var(--main-color); 1545 | } 1546 | 1547 | .cbi-tabmenu { 1548 | border-bottom: 0; 1549 | background-color: #2222359a; 1550 | border-radius: 20px; 1551 | padding: 9px; 1552 | padding-bottom: 3px; 1553 | padding-top: 3px; 1554 | backdrop-filter: blur(20px); 1555 | -webkit-backdrop-filter: blur(20px); 1556 | } 1557 | 1558 | .cbi-tabmenu>li:hover { 1559 | background-color: #474747; 1560 | border-radius: 20px; 1561 | 1562 | 1563 | } 1564 | 1565 | .cbi-tabmenu>li[class~="cbi-tab"] { 1566 | background-color: #ff94946a; 1567 | border-radius: 20px; 1568 | } 1569 | 1570 | .cbi-tabmenu>li[class~=data-tab=] { 1571 | color: #ffffff; 1572 | } 1573 | 1574 | [data-tab-title] { 1575 | overflow: hidden; 1576 | height: 0; 1577 | opacity: 0; 1578 | margin: 0; 1579 | padding: 0rem 1rem !important; 1580 | } 1581 | 1582 | [data-tab-active="true"] { 1583 | overflow: visible; 1584 | height: auto; 1585 | opacity: 1; 1586 | transition: opacity 0.25s ease-in; 1587 | margin: inherit !important; 1588 | } 1589 | 1590 | .cbi-section-node-tabbed { 1591 | margin-top: 0; 1592 | border-top: 0; 1593 | padding: 0; 1594 | } 1595 | 1596 | .cbi-value-field, 1597 | .cbi-value-description { 1598 | line-height: 1.25; 1599 | display: table-cell; 1600 | } 1601 | 1602 | .cbi-value-description { 1603 | font-size: small; 1604 | padding-top: 0.4rem; 1605 | opacity: 0.5; 1606 | color: #fff; 1607 | } 1608 | 1609 | .cbi-value-title { 1610 | display: table-cell; 1611 | float: left; 1612 | width: 23rem; 1613 | padding-top: 0.35rem; 1614 | padding-right: 2rem; 1615 | text-align: right; 1616 | word-wrap: break-word; 1617 | } 1618 | 1619 | .cbi-value { 1620 | display: inline-block; 1621 | width: 100%; 1622 | padding: 0.35rem 1rem 0.2rem; 1623 | } 1624 | 1625 | .cbi-value ul { 1626 | line-height: 1.25; 1627 | } 1628 | 1629 | .cbi-value-field .cbi-dropdown, 1630 | .cbi-value-field .cbi-input-select, 1631 | .cbi-value input[type="text"], 1632 | .cbi-value input[type="password"] { 1633 | min-width: 25rem; 1634 | } 1635 | 1636 | #cbi-firewall-zone .cbi-input-select, 1637 | #cbi-network-switch_vlan .cbi-input-select { 1638 | min-width: 11rem; 1639 | } 1640 | 1641 | #cbi-network-switch_vlan .cbi-input-text { 1642 | max-width: 3rem; 1643 | } 1644 | 1645 | .cbi-input-invalid { 1646 | color: red; 1647 | border-bottom-color: red; 1648 | } 1649 | 1650 | .cbi-section-error { 1651 | font-weight: 700; 1652 | line-height: 1.42857143; 1653 | border: thin solid red; 1654 | border-radius: 3px; 1655 | background-color: #fce6e6; 1656 | margin: 18px; 1657 | padding: 6px; 1658 | } 1659 | 1660 | .cbi-section-error ul { 1661 | margin: 0 0 0 20px; 1662 | } 1663 | 1664 | .cbi-section-error ul li { 1665 | font-weight: 700; 1666 | color: red; 1667 | } 1668 | 1669 | .td[data-title]::before { 1670 | font-weight: 700; 1671 | display: none; 1672 | content: attr(data-title) ":\20"; 1673 | text-align: left; 1674 | white-space: nowrap; 1675 | padding: 0.25rem 0; 1676 | } 1677 | 1678 | .tr[data-title]::before, 1679 | .tr.cbi-section-table-titles.named::before { 1680 | font-weight: 700; 1681 | display: table-cell; 1682 | align-self: center; 1683 | flex: 1 1 5%; 1684 | content: attr(data-title) "\20"; 1685 | text-align: center; 1686 | vertical-align: middle; 1687 | white-space: normal; 1688 | word-wrap: break-word; 1689 | padding: 0.25rem; 1690 | } 1691 | 1692 | .cbi-rowstyle-2 .cbi-button-up, 1693 | .cbi-rowstyle-2 .cbi-button-down, 1694 | body:not(.Interfaces) .cbi-rowstyle-2:first-child {} 1695 | 1696 | .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { 1697 | width: auto !important; 1698 | } 1699 | 1700 | .td.cbi-section-actions { 1701 | text-align: right !important; 1702 | vertical-align: middle; 1703 | display: flex; 1704 | justify-content: center; 1705 | flex-wrap: wrap; 1706 | gap: 5px; 1707 | } 1708 | 1709 | .td.cbi-section-actions>* { 1710 | display: inline-flex; 1711 | } 1712 | 1713 | .td.cbi-section-actions>button { 1714 | display: block; 1715 | } 1716 | 1717 | .td.cbi-section-actions>*>*, 1718 | .td.cbi-section-actions>*>form>* { 1719 | margin: 0 5px; 1720 | } 1721 | 1722 | .td.cbi-section-actions>*>form { 1723 | display: inline-flex; 1724 | margin: 0; 1725 | } 1726 | 1727 | .cbi-dynlist { 1728 | line-height: 1.3; 1729 | flex-direction: column; 1730 | min-height: 30px; 1731 | cursor: text; 1732 | } 1733 | 1734 | .cbi-dynlist>.item { 1735 | position: relative; 1736 | max-width: 25rem; 1737 | margin-right: 2em; 1738 | pointer-events: none; 1739 | color: #666; 1740 | border-bottom: 2px solid rgba(0, 0, 0, 0.26); 1741 | outline: 0; 1742 | padding: 0.5em 0.25em 0.25em 0; 1743 | } 1744 | 1745 | .cbi-dynlist[name="sshkeys"]>.item { 1746 | max-width: none; 1747 | } 1748 | 1749 | .cbi-dynlist>.item::after { 1750 | font-weight: 700; 1751 | position: absolute; 1752 | right: -2em; 1753 | bottom: 0; 1754 | display: inline-flex; 1755 | min-height: 17px; 1756 | content: "\00D7"; 1757 | pointer-events: auto; 1758 | color: #fff; 1759 | border: thin solid #d43f3a; 1760 | background-color: #d9534f; 1761 | padding: 0 6px; 1762 | border-radius: 5px; 1763 | } 1764 | 1765 | .cbi-dynlist>.item>span { 1766 | white-space: normal; 1767 | word-break: break-word; 1768 | } 1769 | 1770 | .cbi-dynlist>.add-item { 1771 | display: inline-flex; 1772 | align-items: center; 1773 | width: 100%; 1774 | min-width: 16rem; 1775 | } 1776 | 1777 | .cbi-dynlist>.add-item:not([ondrop])>input { 1778 | overflow: hidden; 1779 | width: 100%; 1780 | min-width: 15rem; 1781 | white-space: nowrap; 1782 | text-overflow: ellipsis; 1783 | } 1784 | 1785 | .cbi-dynlist>.add-item[ondrop]>input { 1786 | min-width: 13rem; 1787 | } 1788 | 1789 | .cbi-dynlist, 1790 | .cbi-dropdown { 1791 | position: relative; 1792 | display: inline-flex; 1793 | padding: 0; 1794 | } 1795 | 1796 | .cbi-dropdown[placeholder*="select"] { 1797 | max-width: 25rem; 1798 | height: auto; 1799 | margin-top: -3px; 1800 | } 1801 | 1802 | .cbi-dropdown>ul { 1803 | display: flex; 1804 | overflow-x: hidden; 1805 | overflow-y: auto; 1806 | width: 100%; 1807 | list-style: none; 1808 | outline: 0; 1809 | margin: 0 !important; 1810 | padding: 0; 1811 | } 1812 | 1813 | .cbi-dropdown>.open { 1814 | flex-basis: 15px; 1815 | } 1816 | 1817 | .cbi-dropdown>.open, 1818 | .cbi-dropdown>.more { 1819 | font-size: 1rem; 1820 | font-weight: 900; 1821 | line-height: 2; 1822 | display: flex; 1823 | flex-direction: column; 1824 | flex-grow: 0; 1825 | flex-shrink: 0; 1826 | justify-content: center; 1827 | cursor: default; 1828 | text-align: center; 1829 | outline: 0; 1830 | padding: 0 0.25em; 1831 | } 1832 | 1833 | .cbi-dropdown.btn { 1834 | min-height: 1.8rem; 1835 | padding-top: 0px; 1836 | padding-bottom: 0px; 1837 | padding-right: 0px; 1838 | } 1839 | 1840 | .cbi-dropdown.btn>.open { 1841 | font-size: 0.8rem; 1842 | margin: 0 5px; 1843 | padding: 0px; 1844 | } 1845 | 1846 | .cbi-dropdown.btn>div { 1847 | margin: 0px; 1848 | } 1849 | 1850 | .cbi-dropdown>.more, 1851 | .cbi-dropdown>ul>li[placeholder] { 1852 | font-weight: 700; 1853 | display: none; 1854 | color: #777; 1855 | } 1856 | 1857 | .cbi-dropdown>ul>li { 1858 | display: none; 1859 | overflow: hidden; 1860 | align-items: center; 1861 | align-self: center; 1862 | flex-grow: 1; 1863 | flex-shrink: 1; 1864 | min-height: 20px; 1865 | white-space: nowrap; 1866 | text-overflow: ellipsis; 1867 | padding: 0.3rem 1rem 0.3rem 1rem; 1868 | } 1869 | 1870 | .cbi-dropdown>ul>li[display]:not([display="0"]) { 1871 | border-left: thin solid #ccc; 1872 | } 1873 | 1874 | .cbi-dropdown[empty]>ul { 1875 | max-width: 1px; 1876 | } 1877 | 1878 | .cbi-dropdown>ul>li>form { 1879 | display: none; 1880 | pointer-events: none; 1881 | margin: 0; 1882 | padding: 0; 1883 | } 1884 | 1885 | .cbi-dropdown>ul>li img { 1886 | margin-right: 0.25em; 1887 | vertical-align: middle; 1888 | } 1889 | 1890 | .cbi-dropdown>ul>li>form>input[type="checkbox"] { 1891 | height: auto; 1892 | margin: 0; 1893 | } 1894 | 1895 | .cbi-dropdown>ul>li input[type="text"] { 1896 | height: 20px; 1897 | } 1898 | 1899 | .cbi-dropdown[open]>ul.dropdown { 1900 | position: absolute; 1901 | z-index: 1100; 1902 | display: block; 1903 | width: auto; 1904 | min-width: 100%; 1905 | max-width: none; 1906 | max-height: 200px !important; 1907 | border: thin solid #918e8c; 1908 | background: #787878a8; 1909 | box-shadow: 0 0 4px #918e8c; 1910 | color: var(--main-menu-color); 1911 | } 1912 | 1913 | .cbi-dropdown>ul>li[display], 1914 | .cbi-dropdown[open]>ul.preview, 1915 | .cbi-dropdown[open]>ul.dropdown>li, 1916 | .cbi-dropdown[multiple]>ul>li>label, 1917 | .cbi-dropdown[multiple][open]>ul.dropdown>li, 1918 | .cbi-dropdown[multiple][more]>.more, 1919 | .cbi-dropdown[multiple][empty]>.more { 1920 | display: flex; 1921 | align-items: center; 1922 | flex-grow: 1; 1923 | justify-content: space-around; 1924 | } 1925 | 1926 | .cbi-dropdown[open]>ul.dropdown>li {} 1927 | 1928 | .cbi-dropdown[open]>ul.dropdown>li[selected] { 1929 | background: #b0d0f0; 1930 | } 1931 | 1932 | .cbi-dropdown[open]>ul.dropdown>li.focus { 1933 | background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); 1934 | } 1935 | 1936 | .cbi-dropdown[open]>ul.dropdown>li:last-child { 1937 | margin-bottom: 0; 1938 | } 1939 | 1940 | .cbi-dropdown[open]>ul.dropdown>li[unselectable] { 1941 | opacity: 0.7; 1942 | } 1943 | 1944 | .cbi-dropdown[disabled] { 1945 | pointer-events: none; 1946 | opacity: 0.6; 1947 | } 1948 | 1949 | .cbi-dropdown[open] .zonebadge { 1950 | width: auto; 1951 | } 1952 | 1953 | .cbi-progressbar { 1954 | border-radius: 15px; 1955 | overflow: hidden; 1956 | position: relative; 1957 | min-width: 170px; 1958 | height: 30px; 1959 | background: #11111d61; 1960 | margin: 6px 0; 1961 | } 1962 | 1963 | .cbi-progressbar title { 1964 | font-family: "Quicksand-Bold"; 1965 | letter-spacing: 5px; 1966 | text-align: center; 1967 | padding-bottom: 10px; 1968 | margin: 2rem 0 0; 1969 | color: #ffffff; 1970 | } 1971 | 1972 | .cbi-progressbar>div { 1973 | width: 0; 1974 | height: 100%; 1975 | transition: width 2s ease-in; 1976 | background: #0099cc; 1977 | padding: 0.5rem; 1978 | } 1979 | 1980 | .cbi-progressbar::after { 1981 | font-family: monospace; 1982 | font-size: 1.2em; 1983 | font-weight: 700; 1984 | font-size-adjust: 0.38; 1985 | line-height: normal; 1986 | position: absolute; 1987 | top: 50%; 1988 | transform: translateY(-50%); 1989 | right: 0; 1990 | left: 0; 1991 | overflow: hidden; 1992 | content: attr(title); 1993 | text-align: center; 1994 | white-space: pre; 1995 | text-overflow: ellipsis; 1996 | text-shadow: 0 0 2px #eee; 1997 | } 1998 | 1999 | #modal_overlay { 2000 | position: fixed; 2001 | z-index: 900; 2002 | top: 4rem; 2003 | right: 10000px; 2004 | bottom: 0; 2005 | left: -10000px; 2006 | overflow-y: scroll; 2007 | transition: opacity 0.125s ease-in; 2008 | opacity: 0; 2009 | background: rgba(0, 0, 0, 0.7); 2010 | -webkit-overflow-scrolling: touch; 2011 | } 2012 | 2013 | .modal { 2014 | display: flex; 2015 | align-items: center; 2016 | flex-wrap: wrap; 2017 | width: 90%; 2018 | min-width: 270px; 2019 | max-width: 600px; 2020 | min-height: 32px; 2021 | border-radius: 20px !important; 2022 | background: #8f8f8f75; 2023 | margin: 5em auto; 2024 | backdrop-filter: blur(10px); 2025 | -webkit-backdrop-filter: blur(10px); 2026 | padding: 1em; 2027 | 2028 | } 2029 | 2030 | .modal>* { 2031 | line-height: normal; 2032 | flex-basis: 100%; 2033 | margin-bottom: 0.5em; 2034 | max-width: 100%; 2035 | } 2036 | 2037 | .modal>pre, 2038 | .modal>textarea { 2039 | font-size: 1rem; 2040 | font-size-adjust: 0.35; 2041 | overflow: auto; 2042 | margin-bottom: 0.5em; 2043 | cursor: auto; 2044 | white-space: pre-wrap; 2045 | color: #eee; 2046 | outline: 0; 2047 | background-color: #101010; 2048 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); 2049 | padding: 8.5px; 2050 | } 2051 | 2052 | .modal>h4 { 2053 | margin: 0.5em 0; 2054 | } 2055 | 2056 | .modal ul { 2057 | margin-left: 2.2em; 2058 | } 2059 | 2060 | .modal li { 2061 | list-style-type: square; 2062 | color: rgb(216, 216, 216); 2063 | } 2064 | 2065 | .modal p { 2066 | padding-left: 0.25rem; 2067 | word-break: break-word; 2068 | } 2069 | 2070 | .modal .label { 2071 | font-size: 0.6rem; 2072 | font-weight: 400; 2073 | cursor: default; 2074 | border-radius: 0; 2075 | padding: 0.1rem 0.3rem 0; 2076 | } 2077 | 2078 | .modal .label.warning { 2079 | background-color: #f0ad4e !important; 2080 | } 2081 | 2082 | .modal.cbi-modal { 2083 | max-width: 90%; 2084 | max-height: none; 2085 | } 2086 | 2087 | body.modal-overlay-active { 2088 | overflow: hidden; 2089 | height: 100vh; 2090 | } 2091 | 2092 | body.modal-overlay-active #modal_overlay { 2093 | right: 0; 2094 | left: 0; 2095 | opacity: 1; 2096 | } 2097 | 2098 | .spinning { 2099 | position: relative; 2100 | align-items: center; 2101 | padding-left: 32px !important; 2102 | color: #fff; 2103 | } 2104 | 2105 | .spinning::before { 2106 | position: absolute; 2107 | font-size: medium; 2108 | font-style: "Quicksand-Bold"; 2109 | left: 8px; 2110 | width: 16px; 2111 | height: 16px; 2112 | content: ""; 2113 | animation: anim-rotate 2s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28); 2114 | background: url(./icon/loading.svg) no-repeat center; 2115 | background-size: 20px; 2116 | } 2117 | 2118 | .left, 2119 | .left::before { 2120 | text-align: left !important; 2121 | } 2122 | 2123 | .right, 2124 | .right::before { 2125 | text-align: right !important; 2126 | } 2127 | 2128 | .top { 2129 | align-self: flex-start !important; 2130 | vertical-align: top !important; 2131 | } 2132 | 2133 | .bottom { 2134 | align-self: flex-end !important; 2135 | vertical-align: bottom !important; 2136 | } 2137 | 2138 | .inline { 2139 | display: inline; 2140 | } 2141 | 2142 | .cbi-page-actions { 2143 | padding-top: 1rem; 2144 | text-align: center; 2145 | } 2146 | 2147 | .cbi-page-actions>form[method="post"] { 2148 | display: inline-block; 2149 | } 2150 | 2151 | .th[data-type="button"], 2152 | .td[data-type="button"], 2153 | .th[data-type="fvalue"], 2154 | .td[data-type="fvalue"] { 2155 | flex: 1 1 2em; 2156 | text-align: center; 2157 | } 2158 | 2159 | .ifacebadge { 2160 | display: inline-flex; 2161 | background: #ffffff33; 2162 | padding: 0.5rem 0.8rem; 2163 | border-radius: 10px; 2164 | } 2165 | 2166 | td>.ifacebadge, 2167 | .td>.ifacebadge { 2168 | font-size: 0.8rem; 2169 | background-color: #000000; 2170 | border-radius: 10px; 2171 | } 2172 | 2173 | .ifacebadge>em, 2174 | .ifacebadge>img { 2175 | display: inline-block; 2176 | align-self: flex-start; 2177 | margin: 0 0.2rem; 2178 | } 2179 | 2180 | .ifacebadge>img+img { 2181 | margin: 0 0.2rem 0 0; 2182 | } 2183 | 2184 | .network-status-table .ifacebox { 2185 | flex-grow: 1; 2186 | margin: 0.5em; 2187 | } 2188 | 2189 | .network-status-table .ifacebox-body { 2190 | display: flex; 2191 | flex-direction: column; 2192 | height: 100%; 2193 | } 2194 | 2195 | .network-status-table .ifacebox-body>span { 2196 | flex: 10 10 auto; 2197 | height: 100%; 2198 | } 2199 | 2200 | .network-status-table .ifacebox-body .ifacebadge { 2201 | align-items: center; 2202 | flex: 1 1 auto; 2203 | min-width: 220px; 2204 | background-color: #11111d; 2205 | margin: 0.5em 0.25em 0; 2206 | padding: 0.5em; 2207 | border-radius: 10px; 2208 | } 2209 | 2210 | .cbi-input-textarea { 2211 | font-family: monospace; 2212 | width: 100%; 2213 | min-height: 14rem; 2214 | color: #000; 2215 | padding: 0.8rem; 2216 | } 2217 | 2218 | #syslog { 2219 | font-size: small; 2220 | overflow-y: hidden; 2221 | width: 100%; 2222 | min-height: 15rem; 2223 | resize: none; 2224 | color: #eee; 2225 | border: 0; 2226 | border-radius: 20px; 2227 | background-color: #10101057; 2228 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); 2229 | padding: 1rem; 2230 | } 2231 | 2232 | #syslog:focus { 2233 | outline: 0; 2234 | } 2235 | 2236 | .uci-change-list { 2237 | font-family: monospace; 2238 | } 2239 | 2240 | .uci-change-list ins, 2241 | .uci-change-legend-label ins { 2242 | display: block; 2243 | text-decoration: none; 2244 | border: thin solid #0f0; 2245 | background-color: #cfc; 2246 | padding: 2px; 2247 | } 2248 | 2249 | .uci-change-list del, 2250 | .uci-change-legend-label del { 2251 | font-style: normal; 2252 | display: block; 2253 | text-decoration: none; 2254 | border: thin solid red; 2255 | background-color: #fcc; 2256 | padding: 2px; 2257 | } 2258 | 2259 | .uci-change-list var, 2260 | .uci-change-legend-label var { 2261 | font-style: normal; 2262 | display: block; 2263 | text-decoration: none; 2264 | border: thin solid #ccc; 2265 | background-color: #eee; 2266 | padding: 2px; 2267 | } 2268 | 2269 | .uci-change-list var ins, 2270 | .uci-change-list var del { 2271 | font-style: normal; 2272 | white-space: pre; 2273 | border: 0; 2274 | padding: 0; 2275 | } 2276 | 2277 | .uci-change-legend { 2278 | padding: 5px; 2279 | } 2280 | 2281 | .uci-change-legend-label { 2282 | float: left; 2283 | width: 150px; 2284 | color: #fff; 2285 | } 2286 | 2287 | .uci-change-legend-label>ins, 2288 | .uci-change-legend-label>del, 2289 | .uci-change-legend-label>var { 2290 | display: block; 2291 | float: left; 2292 | width: 10px; 2293 | height: 10px; 2294 | margin-right: 4px; 2295 | } 2296 | 2297 | .uci-change-legend-label var ins, 2298 | .uci-change-legend-label var del { 2299 | line-height: 0.4; 2300 | border: 0; 2301 | } 2302 | 2303 | #iwsvg, 2304 | #iwsvg2, 2305 | #bwsvg { 2306 | border: thin solid #d4d4d4 !important; 2307 | } 2308 | 2309 | .ifacebox { 2310 | line-height: 1.25; 2311 | display: inline-flex; 2312 | flex-direction: column; 2313 | min-width: 100px; 2314 | background-color: #54545450; 2315 | border-radius: 20px; 2316 | flex-wrap: nowrap; 2317 | align-content: center; 2318 | justify-content: flex-start; 2319 | align-items: center; 2320 | color: #fff; 2321 | } 2322 | 2323 | div.ifacebox-head { 2324 | --zone-color-rgb: 144, 240, 144; 2325 | background-color: rgb(43, 79, 43); 2326 | } 2327 | 2328 | style attribute { 2329 | --zone-color-rgb: 144, 240, 144; 2330 | background-color: rgb(43, 79, 43); 2331 | } 2332 | 2333 | .ifacebox-head { 2334 | background: #939393; 2335 | padding: 0.25em; 2336 | color: #fff; 2337 | } 2338 | 2339 | .ifacebox-head.active { 2340 | background: var(--bar-bg); 2341 | } 2342 | 2343 | .ifacebox-body { 2344 | padding: 0.25em; 2345 | } 2346 | 2347 | .cbi-image-button { 2348 | margin-left: 0.5rem; 2349 | } 2350 | 2351 | .zonebadge { 2352 | display: inline-block; 2353 | padding: 0.2rem 0.5rem; 2354 | } 2355 | 2356 | .zonebadge .ifacebadge { 2357 | border: thin solid #6c6c6c; 2358 | margin: 0.1rem 0.2rem; 2359 | padding: 0.2rem 0.3rem; 2360 | } 2361 | 2362 | .zonebadge>input[type="text"] { 2363 | min-width: 10rem; 2364 | margin-top: 0.3rem; 2365 | padding: 0.16rem 1rem; 2366 | } 2367 | 2368 | .zonebadge>em, 2369 | .zonebadge>strong { 2370 | display: inline-block; 2371 | margin: 0 0.2rem; 2372 | } 2373 | 2374 | .cbi-value-field .cbi-input-checkbox, 2375 | .cbi-value-field .cbi-input-radio { 2376 | margin-top: 0.1rem; 2377 | } 2378 | 2379 | .cbi-value-field>ul>li .ifacebadge { 2380 | margin-top: -0.5rem; 2381 | margin-left: 0.4rem; 2382 | background-color: #eee; 2383 | } 2384 | 2385 | .cbi-section-table-row>.cbi-value-field .cbi-dropdown { 2386 | min-width: 7rem; 2387 | } 2388 | 2389 | .cbi-section-create { 2390 | display: inline-flex; 2391 | align-items: center; 2392 | margin: 0.5rem -3px; 2393 | } 2394 | 2395 | .cbi-section-create>* { 2396 | margin: 0.5rem; 2397 | } 2398 | 2399 | div.cbi-value var, 2400 | td.cbi-value-field var, 2401 | .td.cbi-value-field var { 2402 | font-style: italic; 2403 | color: #0069d6; 2404 | } 2405 | 2406 | .cbi-optionals { 2407 | border-top: thin solid #ccc; 2408 | padding: 1rem 1rem 0; 2409 | } 2410 | 2411 | .cbi-dropdown-container { 2412 | position: relative; 2413 | } 2414 | 2415 | .cbi-tooltip-container, 2416 | span[data-tooltip], 2417 | span[data-tooltip] .label { 2418 | cursor: help !important; 2419 | text-align: left !important; 2420 | font-size: 80% !important; 2421 | color: #fff !important; 2422 | } 2423 | 2424 | .cbi-tooltip { 2425 | position: absolute; 2426 | z-index: 1000; 2427 | left: -1000px; 2428 | transition: opacity 0.25s ease-out; 2429 | white-space: pre; 2430 | pointer-events: none; 2431 | opacity: 0; 2432 | border-radius: 20px; 2433 | background: #54545450; 2434 | box-shadow: 0 0 2px #444; 2435 | padding: 2px 5px; 2436 | -webkit-backdrop-filter: blur(20px); 2437 | backdrop-filter: blur(20px); 2438 | 2439 | } 2440 | 2441 | .cbi-tooltip-container:hover .cbi-tooltip { 2442 | left: auto; 2443 | transition: opacity 0.25s ease-in; 2444 | opacity: 1; 2445 | } 2446 | 2447 | .zonebadge .cbi-tooltip { 2448 | background: inherit; 2449 | margin: -1.5rem 0 0 -0.5rem; 2450 | padding: 0.25rem; 2451 | } 2452 | 2453 | .zonebadge-empty { 2454 | color: #404040; 2455 | background: repeating-linear-gradient(45deg, 2456 | rgba(204, 204, 204, 0.5), 2457 | rgba(204, 204, 204, 0.5) 5px, 2458 | rgba(255, 255, 255, 0.5) 5px, 2459 | rgba(255, 255, 255, 0.5) 10px); 2460 | } 2461 | 2462 | .zone-forwards { 2463 | display: flex; 2464 | min-width: 10rem; 2465 | } 2466 | 2467 | .zone-forwards>* { 2468 | flex: 1 1 45%; 2469 | } 2470 | 2471 | .zone-forwards>span { 2472 | flex-basis: 10%; 2473 | text-align: center; 2474 | padding: 0 0.25rem; 2475 | } 2476 | 2477 | .zone-forwards .zone-src, 2478 | .zone-forwards .zone-dest { 2479 | display: flex; 2480 | flex-direction: column; 2481 | } 2482 | 2483 | label>input[type="checkbox"], 2484 | label>input[type="radio"] { 2485 | position: relative; 2486 | top: 0.4rem; 2487 | right: 0.2rem; 2488 | vertical-align: bottom; 2489 | margin: 0; 2490 | } 2491 | 2492 | label[data-index][data-depends] { 2493 | padding-right: 2em; 2494 | } 2495 | 2496 | .darkMask { 2497 | position: fixed; 2498 | z-index: 99; 2499 | width: 100%; 2500 | height: 100%; 2501 | content: ""; 2502 | transition: opacity 400ms, visibility 400ms; 2503 | visibility: hidden; 2504 | opacity: 0; 2505 | background-color: #2222359a; 2506 | } 2507 | 2508 | #diag-rc-output>pre, 2509 | #command-rc-output>pre, 2510 | [data-page="admin-services-wol"] .notice code { 2511 | font-size: 1.2rem; 2512 | font-size-adjust: 0.35; 2513 | line-height: normal; 2514 | display: block; 2515 | overflow-y: hidden; 2516 | width: 100%; 2517 | white-space: pre; 2518 | color: #eee; 2519 | background-color: #101010; 2520 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); 2521 | padding: 8.5px; 2522 | } 2523 | 2524 | input[name="ping"], 2525 | input[name="traceroute"], 2526 | input[name="nslookup"] { 2527 | width: 80%; 2528 | } 2529 | 2530 | .node-main-login>.main fieldset { 2531 | display: inline; 2532 | overflow: hidden; 2533 | margin-bottom: 1rem; 2534 | border: 0; 2535 | background: none; 2536 | box-shadow: none; 2537 | padding: 0.5rem; 2538 | } 2539 | 2540 | .node-main-login>.main .cbi-value-title { 2541 | width: 9.5rem; 2542 | } 2543 | 2544 | .node-main-login>.main #maincontent { 2545 | text-align: center; 2546 | } 2547 | 2548 | .node-main-login>.main .container { 2549 | display: inline-block; 2550 | margin-top: 2rem !important; 2551 | text-align: left; 2552 | background-color: #2e2b2b00; 2553 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); 2554 | padding: 1rem 3.5rem 2rem; 2555 | } 2556 | 2557 | .node-main-login>.main .cbi-value>* { 2558 | display: inline-block !important; 2559 | } 2560 | 2561 | .node-main-login>.main .cbi-input-text { 2562 | width: 100% !important; 2563 | min-width: 15rem; 2564 | } 2565 | 2566 | .node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2), 2567 | .node-status-processes>.main .table .tr .td:nth-child(3) { 2568 | white-space: normal; 2569 | } 2570 | 2571 | [data-page="admin-system-reboot"] p { 2572 | padding-left: 2rem; 2573 | } 2574 | 2575 | [data-page="admin-system-reboot"] p>span { 2576 | position: relative; 2577 | top: 0.1rem; 2578 | left: 1rem; 2579 | } 2580 | 2581 | #cbi-samba [data-tab="template"] .cbi-value-title { 2582 | width: auto; 2583 | padding-bottom: 0.6rem; 2584 | } 2585 | 2586 | .controls>*>.btn:not([aria-label$="page"]) { 2587 | flex-grow: initial !important; 2588 | margin-top: 0.1rem; 2589 | } 2590 | 2591 | .controls>#pager>.btn[aria-label$="page"] { 2592 | font-size: 1.4rem; 2593 | font-weight: 700; 2594 | } 2595 | 2596 | .controls>*>label { 2597 | margin-bottom: 0.2rem; 2598 | } 2599 | 2600 | [data-page="admin-system-opkg"] div.btn { 2601 | display: inline; 2602 | padding: 0.3rem 0.6rem; 2603 | } 2604 | 2605 | [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), 2606 | [data-page="admin-system-opkg"] #maincontent>.container { 2607 | margin-top: 2rem; 2608 | padding-top: 0.1rem; 2609 | } 2610 | 2611 | [data-page="admin-system-opkg"] #maincontent>.container { 2612 | margin: 2rem 2rem 1rem; 2613 | } 2614 | 2615 | .td.version, 2616 | .td.size { 2617 | white-space: normal !important; 2618 | word-break: break-word; 2619 | } 2620 | 2621 | .cbi-tabmenu+.cbi-section { 2622 | margin-top: 0; 2623 | } 2624 | 2625 | #cbi-wireless>#wifi_assoclist_table>.tr { 2626 | box-shadow: inset 1px -1px 0 #ddd, inset -1px -1px 0 #ddd; 2627 | } 2628 | 2629 | #cbi-wireless>#wifi_assoclist_table>.tr.placeholder>.td { 2630 | right: 33px; 2631 | bottom: 33px; 2632 | left: 33px; 2633 | border-top: thin solid #ddd !important; 2634 | } 2635 | 2636 | #cbi-wireless>#wifi_assoclist_table>.tr.table-titles { 2637 | box-shadow: inset 1px 0 0 #ddd, inset -1px 0 0 #ddd; 2638 | } 2639 | 2640 | #cbi-wireless>#wifi_assoclist_table>.tr.table-titles>.th { 2641 | border-bottom: thin solid #ddd; 2642 | box-shadow: 0 -1px 0 0 #ddd; 2643 | } 2644 | 2645 | #wifi_assoclist_table>.tr>.td[data-title="RX Rate / TX Rate"] { 2646 | width: 23rem; 2647 | } 2648 | 2649 | #iptables { 2650 | margin: 0; 2651 | } 2652 | 2653 | .Firewall form { 2654 | box-shadow: none; 2655 | margin: 2rem 2rem 0 0; 2656 | padding: 0; 2657 | } 2658 | 2659 | #cbi-firewall-redirect table *, 2660 | #cbi-network-switch_vlan table *, 2661 | #cbi-firewall-zone table * { 2662 | font-size: small; 2663 | } 2664 | 2665 | #cbi-firewall-redirect table input[type="text"], 2666 | #cbi-network-switch_vlan table input[type="text"], 2667 | #cbi-firewall-zone table input[type="text"] { 2668 | width: 5rem; 2669 | } 2670 | 2671 | #cbi-firewall-redirect table select, 2672 | #cbi-network-switch_vlan table select, 2673 | #cbi-firewall-zone table select { 2674 | min-width: 3.5rem; 2675 | } 2676 | 2677 | #cbi-network-switch_vlan .th, 2678 | #cbi-network-switch_vlan .td { 2679 | flex-basis: 12%; 2680 | } 2681 | 2682 | #applyreboot-container { 2683 | margin: 2rem; 2684 | } 2685 | 2686 | #applyreboot-section { 2687 | line-height: 300%; 2688 | margin: 2rem; 2689 | } 2690 | 2691 | .OpenVPN a { 2692 | line-height: initial !important; 2693 | } 2694 | 2695 | .commandbox { 2696 | width: 24% !important; 2697 | border-bottom: thin solid #ccc; 2698 | background: #eee; 2699 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 2700 | 0 1px 2px rgba(0, 0, 0, 0.05); 2701 | margin: 10px 0 0 10px !important; 2702 | padding: 0.5rem 1rem; 2703 | } 2704 | 2705 | .commandbox h3 { 2706 | line-height: normal !important; 2707 | overflow: hidden; 2708 | white-space: nowrap; 2709 | text-overflow: ellipsis; 2710 | margin: 6px 0 !important; 2711 | } 2712 | 2713 | .commandbox div { 2714 | left: auto !important; 2715 | } 2716 | 2717 | .commandbox code { 2718 | position: absolute; 2719 | overflow: hidden; 2720 | max-width: 60%; 2721 | margin-left: 4px; 2722 | white-space: nowrap; 2723 | text-overflow: ellipsis; 2724 | padding: 2px 3px; 2725 | } 2726 | 2727 | .commandbox code:hover { 2728 | overflow-y: auto; 2729 | max-height: 50px; 2730 | white-space: normal; 2731 | } 2732 | 2733 | .commandbox p:first-of-type { 2734 | margin-top: -6px; 2735 | } 2736 | 2737 | .commandbox p:nth-of-type(2) { 2738 | margin-top: 2px; 2739 | } 2740 | 2741 | #command-rc-output .alert-message { 2742 | line-height: 1.42857143; 2743 | position: absolute; 2744 | top: 40px; 2745 | right: 32px; 2746 | max-width: 40%; 2747 | animation: anim-fade-in 1.5s forwards; 2748 | word-break: break-word; 2749 | opacity: 0; 2750 | margin: 0; 2751 | } 2752 | 2753 | .table[width="100%"], 2754 | .th[width="100%"], 2755 | .td[width="100%"], 2756 | .cbi-section-table-row>.cbi-value-field .cbi-dropdown, 2757 | .cbi-section-table-row>.cbi-value-field .cbi-input-select, 2758 | .cbi-section-table-row>.cbi-value-field .cbi-input-text, 2759 | .cbi-section-table-row>.cbi-value-field .cbi-input-password, 2760 | .cbi-dropdown[open]>ul.dropdown>li>input.create-item-input:first-child:last-child, 2761 | .cbi-dropdown .zonebadge, 2762 | .node-main-login>.main>.main-right, 2763 | #cbi-firewall-zone .td, 2764 | #cbi-network-switch_vlan .td { 2765 | width: 100%; 2766 | min-width: 60px; 2767 | } 2768 | 2769 | .cbi-rowstyle-2 { 2770 | background-color: ; 2771 | } 2772 | 2773 | .pull-right, 2774 | .node-main-login>.main form>div:last-child { 2775 | float: right; 2776 | } 2777 | 2778 | .pull-left, 2779 | .cbi-page-actions .cbi-button-link:first-child { 2780 | float: left; 2781 | } 2782 | 2783 | #modemenu>li>a, 2784 | .label { 2785 | background-color: rgb(104, 104, 104); 2786 | color: #fff !important; 2787 | font-size: 0.8rem; 2788 | font-weight: 700; 2789 | text-decoration: none; 2790 | text-shadow: none; 2791 | text-transform: uppercase; 2792 | white-space: nowrap; 2793 | padding: 0.3rem 0.8rem; 2794 | border-radius: 10px; 2795 | } 2796 | 2797 | [data-indicator="poll-status"][data-style="active"] { 2798 | position: absolute; 2799 | right: 14px; 2800 | width: 32px; 2801 | height: 32px; 2802 | content: ""; 2803 | background: url(./icon/loading.svg) no-repeat; 2804 | text-indent: -9999px; 2805 | animation: anim-rotate 5s infinite ease-in-out; 2806 | background-size: 32px; 2807 | } 2808 | 2809 | [data-indicator="poll-status"][data-style="inactive"] { 2810 | position: absolute; 2811 | right: 14px; 2812 | width: 32px; 2813 | height: 32px; 2814 | content: ""; 2815 | background: url(./icon/pause.svg) no-repeat; 2816 | text-indent: -9999px; 2817 | background-size: 32px; 2818 | } 2819 | 2820 | 2821 | [data-indicator="uci-changes"][data-style="active"] { 2822 | position: absolute; 2823 | width: 32px; 2824 | height: 32px; 2825 | content: ""; 2826 | background: url(./icon/save.svg) no-repeat; 2827 | text-indent: -9999px; 2828 | background-size: 32px; 2829 | } 2830 | 2831 | #modemenu>li>a.active, 2832 | .notice { 2833 | background-color: rgb(66, 66, 66) !important; 2834 | } 2835 | 2836 | #xhr_poll_status, 2837 | .cbi-value-field>ul>li { 2838 | display: flex; 2839 | } 2840 | 2841 | .alert-message .btn, 2842 | .modal .btn { 2843 | padding: 0.3rem 0.6rem; 2844 | } 2845 | 2846 | .container .alert, 2847 | .container .alert-message, 2848 | .cbi-map-descr+fieldset { 2849 | margin-top: 1rem; 2850 | } 2851 | 2852 | .main>.main-left>.nav, 2853 | .cbi-value-field>ul>li>label { 2854 | margin-top: 0.5rem; 2855 | } 2856 | 2857 | .main>.main-left>.nav>li.active>a, 2858 | .main>.main-left>.nav>.slide>.slide-menu>.active>a { 2859 | color: #fff; 2860 | } 2861 | 2862 | .main>.main-left>.nav>li.active, 2863 | .main>.main-left>.nav>.slide>.slide-menu>.active { 2864 | 2865 | background-color: var(--submenu-bg-hover-active); 2866 | border-radius: 10px; 2867 | } 2868 | 2869 | .main>.main-left>.nav>.slide>ul, 2870 | .main>.main-left[style*="overflow: hidden"]>.nav>.slide>.menu::before, 2871 | .tr.placeholder .td[data-title]::before, 2872 | .cbi-dropdown>ul.preview, 2873 | .cbi-dropdown>ul>li .hide-close, 2874 | .cbi-dropdown[open]>ul.dropdown>li .hide-open, 2875 | .hidden, 2876 | .showSide, 2877 | .node-main-login>.main>.main-left, 2878 | [data-page^="admin-system-commands"] .panel-title, 2879 | [data-page^="command-cfg"] .mobile-hide, 2880 | [data-page^="command-cfg"] .showSide { 2881 | display: none; 2882 | } 2883 | 2884 | .main>.main-left>.nav>.slide.active>ul, 2885 | .cbi-dropdown[empty]>ul>li, 2886 | .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder], 2887 | .cbi-dropdown[multiple][open]>ul.dropdown>li>form, 2888 | .node-main-login>.main .cbi-value, 2889 | #cbi-samba [data-tab="template"] .cbi-value-field, 2890 | #cbi-firewall-zone .table, 2891 | #cbi-network-switch_vlan .table { 2892 | display: block; 2893 | } 2894 | 2895 | .main>.main-left>.nav>li:hover, 2896 | .main>.main-left>.nav>.slide>.menu:hover, 2897 | .main>.main-left>.nav>.slide>.slide-menu>li:hover { 2898 | background: var(--submenu-bg-hover); 2899 | border-radius: 10px; 2900 | } 2901 | 2902 | table>tbody>tr>td, 2903 | table>tbody>tr>th, 2904 | table>tfoot>tr>td, 2905 | table>tfoot>tr>th, 2906 | table>thead>tr>td, 2907 | table>thead>tr>th, 2908 | .table>.tbody>.tr>.td, 2909 | .table>.tbody>.tr>.th, 2910 | .table>.tfoot>.tr>.td, 2911 | .table>.tfoot>.tr>.th, 2912 | .table>.thead>.tr>.td, 2913 | .table>.thead>.tr>.th, 2914 | .table>.tr>.td.cbi-value-field, 2915 | .table>.tr>.th.cbi-section-table-cell, 2916 | .uci-change-list var, 2917 | .uci-change-list del, 2918 | .uci-change-list ins, 2919 | .cbi-section-remove { 2920 | padding: 0.5rem; 2921 | } 2922 | 2923 | #cbi-wireless .td, 2924 | #cbi-network .tr:first-child>.td, 2925 | .table[width="100%"]>.tr:first-child>.td, 2926 | [data-page="admin-network-diagnostics"] .tr>.td, 2927 | .tr.table-titles>.th, 2928 | .tr.cbi-section-table-titles>.th, 2929 | #iwsvg, 2930 | [data-page="admin-status-realtime-bandwidth"] #bwsvg { 2931 | border-top: 0 !important; 2932 | } 2933 | 2934 | .cbi-section-table-row .td, 2935 | .center, 2936 | .center::before { 2937 | text-align: center !important; 2938 | } 2939 | 2940 | div>table>tbody>tr:nth-of-type(2n), 2941 | div>.table>.tr:nth-of-type(2n), 2942 | .cbi-section .cbi-section-remove:nth-of-type(2n), 2943 | .container>.cbi-section .cbi-section-node:nth-of-type(2n), 2944 | .cbi-section[id] .cbi-section-remove:nth-of-type(4n + 3), 2945 | .cbi-section[id] .cbi-section-node:nth-of-type(4n + 4), 2946 | .cbi-tabcontainer>.cbi-value:nth-of-type(2n), 2947 | .cbi-rowstyle-1 {} 2948 | 2949 | .cbi-dropdown>ul>li .hide-open, 2950 | .cbi-dropdown[open]>ul.dropdown>li .hide-close { 2951 | display: initial; 2952 | } 2953 | 2954 | .network-status-table, 2955 | .network-status-table .ifacebox-body>div { 2956 | display: flex; 2957 | flex-wrap: wrap; 2958 | } 2959 | 2960 | [data-page="admin-network-diagnostics"] .table, 2961 | .node-main-login .cbi-section { 2962 | box-shadow: none; 2963 | } 2964 | 2965 | @keyframes down { 2966 | from { 2967 | margin-left: 50%; 2968 | opacity: 0; 2969 | } 2970 | 2971 | to { 2972 | margin-left: 0%; 2973 | opacity: 1; 2974 | } 2975 | } 2976 | 2977 | @keyframes anim-rotate { 2978 | 0% { 2979 | -webkit-transform: rotate(0); 2980 | -ms-transform: rotate(0); 2981 | transform: rotate(0); 2982 | } 2983 | 2984 | 100% { 2985 | -webkit-transform: rotate(360deg); 2986 | -ms-transform: rotate(360deg); 2987 | transform: rotate(360deg); 2988 | } 2989 | } 2990 | 2991 | @media screen and (min-height: 585px) { 2992 | .node-main-login footer { 2993 | position: absolute; 2994 | bottom: 0; 2995 | width: 100%; 2996 | } 2997 | } 2998 | 2999 | @keyframes anim-fade-in { 3000 | 100% { 3001 | opacity: 1; 3002 | } 3003 | } 3004 | 3005 | @media all and (-ms-high-contrast: none) { 3006 | .main>.main-left>.nav>.slide>.menu::before { 3007 | top: 30.25%; 3008 | } 3009 | 3010 | .main>.main-left>.nav>li:last-child::before { 3011 | top: 20%; 3012 | } 3013 | 3014 | .showSide::before { 3015 | top: -12px; 3016 | } 3017 | } 3018 | 3019 | @media screen and (max-width: 1600px) { 3020 | header>.fill>.container { 3021 | display: flex; 3022 | align-items: center; 3023 | margin-top: 0; 3024 | } 3025 | 3026 | header>.fill>.container>#logo { 3027 | width: calc(13rem); 3028 | } 3029 | 3030 | .main>.main-left { 3031 | width: calc(0% + 13rem); 3032 | } 3033 | 3034 | .main>.main-right { 3035 | width: calc(100% - 13rem); 3036 | } 3037 | 3038 | .btn:not(button), 3039 | .cbi-button { 3040 | font-size: 0.8rem; 3041 | padding: 0.3rem 0.6rem; 3042 | position: relative; 3043 | /*bottom: -0.5rem;*/ 3044 | } 3045 | 3046 | .label, 3047 | [data-indicator] { 3048 | padding: 0.2rem 0.6rem; 3049 | } 3050 | 3051 | fieldset, 3052 | .cbi-section { 3053 | padding: 1rem; 3054 | } 3055 | 3056 | .cbi-value-title { 3057 | width: 15rem; 3058 | padding-right: 0.6rem; 3059 | } 3060 | 3061 | .cbi-value-field .cbi-dropdown, 3062 | .cbi-value-field .cbi-input-select, 3063 | .cbi-value input[type="text"], 3064 | .cbi-value input[type="password"] { 3065 | min-width: 22rem; 3066 | } 3067 | 3068 | #cbi-firewall-zone .cbi-input-select { 3069 | min-width: 9rem; 3070 | } 3071 | 3072 | .cbi-input-textarea { 3073 | font-size: small; 3074 | } 3075 | 3076 | .node-admin-status>.main fieldset li>a { 3077 | padding: 0.3rem 0.6rem; 3078 | } 3079 | } 3080 | 3081 | @media screen and (max-width: 2000000000px) { 3082 | header { 3083 | height: 3.5rem; 3084 | } 3085 | 3086 | header>.fill>.container { 3087 | margin-top: 0.25rem; 3088 | cursor: default; 3089 | padding: 0.5rem 1rem; 3090 | } 3091 | 3092 | .main { 3093 | top: 3.5rem; 3094 | height: calc(100% - 3.5rem); 3095 | } 3096 | 3097 | .main>.main-left { 3098 | top: 4.3rem; 3099 | width: calc(0% + 13rem); 3100 | height: calc(100% - 3.5rem); 3101 | } 3102 | 3103 | .main>.main-right { 3104 | width: calc(100% - 13rem); 3105 | } 3106 | 3107 | .tabs>li>a, 3108 | .cbi-tabmenu>li>a { 3109 | padding: 0.2rem 0.5rem; 3110 | } 3111 | 3112 | .cbi-section>h3:first-child, 3113 | .panel-title { 3114 | font-size: 1.1rem; 3115 | padding-bottom: 1rem; 3116 | } 3117 | 3118 | table { 3119 | font-size: 0.7rem !important; 3120 | width: 100% !important; 3121 | } 3122 | 3123 | .table .cbi-input-text { 3124 | width: 100%; 3125 | } 3126 | 3127 | .cbi-value-field .cbi-dropdown, 3128 | .cbi-value-field .cbi-input-select, 3129 | .cbi-value input[type="text"], 3130 | .cbi-value input[type="password"] { 3131 | min-width: 19rem; 3132 | } 3133 | 3134 | #cbi-firewall-zone .cbi-input-select { 3135 | min-width: 4rem; 3136 | } 3137 | 3138 | .main>.main-left>.nav>li, 3139 | .main>.main-left>.nav>li a, 3140 | .main>.main-left>.nav>.slide>.menu, 3141 | .main>.main-left>.nav>li>[data-title="Logout"], 3142 | .main>.main-left>.nav>li>[data-title="Logout"], 3143 | .main>.main-left>.nav>li>[data-title="iStore"] { 3144 | font-size: 1rem; 3145 | color: #fff; 3146 | } 3147 | 3148 | .main>.main-left>.nav>.slide>.slide-menu>li>a { 3149 | font-size: 0.7rem; 3150 | color: #fff; 3151 | } 3152 | 3153 | #modal_overlay { 3154 | top: 3.5rem; 3155 | } 3156 | 3157 | [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) { 3158 | display: block; 3159 | } 3160 | 3161 | [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table), 3162 | [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table), 3163 | [data-page="admin-network-hosts"] .table, 3164 | [data-page="admin-network-routes"] .table { 3165 | overflow-y: visible; 3166 | } 3167 | 3168 | .commandbox { 3169 | width: 32% !important; 3170 | } 3171 | } 3172 | 3173 | @media screen and (max-width: 1152px) { 3174 | header>.fill>.container>.brand { 3175 | position: relative; 3176 | } 3177 | 3178 | html, 3179 | .main { 3180 | overflow-y: visible; 3181 | } 3182 | 3183 | .main>.loading>span { 3184 | top: 25%; 3185 | } 3186 | 3187 | .main>.main-left { 3188 | position: fixed; 3189 | z-index: 100; 3190 | visibility: hidden; 3191 | } 3192 | 3193 | .main>.main-right { 3194 | width: 100%; 3195 | } 3196 | 3197 | .showSide { 3198 | position: -webkit-sticky; 3199 | position: sticky; 3200 | top: 0rem; 3201 | display: inline-flex; 3202 | align-items: center; 3203 | height: 100%; 3204 | margin-right: 0.7rem; 3205 | cursor: pointer; 3206 | } 3207 | 3208 | body:not(.logged-in) .showSide { 3209 | visibility: hidden; 3210 | width: 0; 3211 | margin: 0; 3212 | } 3213 | 3214 | .cbi-value-title { 3215 | width: 12rem; 3216 | padding-right: 1rem; 3217 | } 3218 | 3219 | .cbi-value-field .cbi-dropdown, 3220 | .cbi-value-field .cbi-input-select, 3221 | .cbi-value input[type="text"] { 3222 | width: 16rem; 3223 | min-width: 16rem; 3224 | color: rgb(255, 255, 255); 3225 | } 3226 | 3227 | .cbi-value input[type="password"], 3228 | .cbi-value input[name^="pw"], 3229 | .cbi-value input[data-update="change"]:nth-child(2) { 3230 | width: 13rem !important; 3231 | min-width: 13rem; 3232 | color: #fff; 3233 | } 3234 | 3235 | #diag-rc-output>pre, 3236 | #command-rc-output>pre, 3237 | [data-page="admin-services-wol"] .notice code { 3238 | font-size: 1rem; 3239 | } 3240 | 3241 | .Interfaces .table { 3242 | overflow-x: hidden; 3243 | } 3244 | 3245 | #packages.table { 3246 | display: grid; 3247 | } 3248 | 3249 | .tr { 3250 | display: flex; 3251 | flex-direction: row; 3252 | flex-wrap: wrap; 3253 | } 3254 | 3255 | .Overview .table[width="100%"]>.tr { 3256 | flex-wrap: nowrap; 3257 | } 3258 | 3259 | .tr.placeholder { 3260 | border-bottom: thin solid #ddd; 3261 | } 3262 | 3263 | .tr.placeholder>.td, 3264 | #cbi-firewall .tr>.td, 3265 | #cbi-network .tr:nth-child(2)>.td, 3266 | .cbi-section #wifi_assoclist_table .tr>.td { 3267 | border-top: 0; 3268 | } 3269 | 3270 | .th, 3271 | .td { 3272 | display: inline-block; 3273 | align-self: flex-start; 3274 | flex: 2 2 25%; 3275 | text-overflow: ellipsis; 3276 | word-wrap: break-word; 3277 | } 3278 | 3279 | .td select, 3280 | .td input[type="text"] { 3281 | width: 100%; 3282 | word-wrap: normal; 3283 | } 3284 | 3285 | .td [data-dynlist]>input, 3286 | .td input.cbi-input-password { 3287 | width: calc(100% - 1.5rem); 3288 | } 3289 | 3290 | .td[data-type="button"], 3291 | .td[data-type="fvalue"] { 3292 | flex: 1 1 12.5%; 3293 | text-align: left; 3294 | } 3295 | 3296 | .th.cbi-value-field, 3297 | .td.cbi-value-field, 3298 | .th.cbi-section-table-cell, 3299 | .td.cbi-section-table-cell { 3300 | flex-basis: auto; 3301 | padding-top: 1rem; 3302 | } 3303 | 3304 | .cbi-section-table-row { 3305 | display: flex; 3306 | flex-direction: row; 3307 | flex-wrap: wrap; 3308 | justify-content: space-between; 3309 | } 3310 | 3311 | .td.cbi-value-field, 3312 | .cbi-section-table-cell { 3313 | display: inline-block; 3314 | flex: 10 10 auto; 3315 | flex-basis: 50%; 3316 | text-align: center; 3317 | } 3318 | 3319 | .td.cbi-section-actions { 3320 | vertical-align: bottom; 3321 | } 3322 | 3323 | .tr[data-title]::before, 3324 | .tr.cbi-section-table-titles.named::before { 3325 | font-size: 0.9rem; 3326 | display: block; 3327 | flex: 1 1 100%; 3328 | border-bottom: thin solid rgba(0, 0, 0, 0.26); 3329 | background: #90c0e0; 3330 | } 3331 | 3332 | .cbi-button+.cbi-button { 3333 | margin-left: 0; 3334 | } 3335 | 3336 | .td.cbi-section-actions>*>*, 3337 | .td.cbi-section-actions>*>form>* { 3338 | margin: 2.1px 3px; 3339 | } 3340 | 3341 | .Firewall form { 3342 | position: static !important; 3343 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); 3344 | margin: 0 0 2rem; 3345 | padding: 2rem; 3346 | } 3347 | 3348 | .Firewall form input { 3349 | width: 100% !important; 3350 | margin: 1rem 0 0; 3351 | } 3352 | 3353 | .Firewall .center, 3354 | .Firewall .center::before { 3355 | text-align: left !important; 3356 | } 3357 | 3358 | .commandbox { 3359 | width: 100% !important; 3360 | margin-left: 0 !important; 3361 | } 3362 | 3363 | .tr.table-titles, 3364 | .tr.cbi-section-table-titles, 3365 | .tr.cbi-section-table-descr { 3366 | display: none; 3367 | } 3368 | 3369 | .node-main-login>.main .cbi-value-title, 3370 | .td[data-title], 3371 | [data-page^="admin-status-realtime"] .td[id] { 3372 | text-align: left; 3373 | color: #ffffff; 3374 | } 3375 | 3376 | .table, 3377 | .td[data-title]::before { 3378 | display: block; 3379 | } 3380 | } 3381 | 3382 | @media screen and (max-width: 600px) { 3383 | header>.fill>.container>#logo { 3384 | padding: 1rem; 3385 | margin: 0; 3386 | position: absolute; 3387 | left: 50%; 3388 | top: 0; 3389 | width: 100px; 3390 | transform: translateX(-50%); 3391 | } 3392 | 3393 | header>.fill>.container>#logo>img { 3394 | width: 100%; 3395 | margin-top: 0; 3396 | } 3397 | 3398 | .cbi-progressbar::after { 3399 | font-size: 0.95em; 3400 | line-height: 1.5; 3401 | } 3402 | 3403 | fieldset, 3404 | .cbi-section { 3405 | margin: 1rem 0 0; 3406 | } 3407 | 3408 | } 3409 | 3410 | #maincontent>.container { 3411 | margin: 0 0.5rem 1.5rem; 3412 | } 3413 | 3414 | .main>.main-left>.nav>.slide>.menu, 3415 | .main>.main-left>.nav>li>[data-title="Logout"], 3416 | .main>.main-left>.nav>li>[data-title="Log out"], 3417 | .main>.main-left>.nav>li>[data-title="iStore"] { 3418 | font-size: 1.1rem; 3419 | } 3420 | 3421 | .cbi-value-title { 3422 | display: block; 3423 | min-width: 0 !important; 3424 | text-align: left; 3425 | margin: 0.5rem 0; 3426 | } 3427 | 3428 | .cbi-value>.cbi-value-field { 3429 | display: inline-block; 3430 | } 3431 | 3432 | .tabs>li>a, 3433 | .cbi-tabmenu>li>a { 3434 | padding: 0.2rem 0.3rem; 3435 | } 3436 | 3437 | .cbi-page-actions>.cbi-button { 3438 | margin-top: 0.2rem; 3439 | } 3440 | 3441 | .node-main-login>.main .container { 3442 | margin: 2rem 1.2rem 1.5rem !important; 3443 | padding: 0.3rem 1.7rem 2rem 1.6rem; 3444 | } 3445 | 3446 | .node-main-login>.main .cbi-value { 3447 | padding: 0; 3448 | } 3449 | 3450 | .node-main-login>.main form>div:last-child { 3451 | margin-top: 2rem; 3452 | } 3453 | 3454 | .node-main-login>.main .cbi-value-title { 3455 | font-size: 1.2rem; 3456 | width: 100% !important; 3457 | } 3458 | 3459 | .node-main-login>.main fieldset { 3460 | margin: 0; 3461 | padding: 0.5rem; 3462 | } 3463 | 3464 | .commandbox p:first-of-type { 3465 | margin-top: -8px; 3466 | } 3467 | 3468 | #syslog, 3469 | #diag-rc-output>pre, 3470 | #command-rc-output>pre, 3471 | [data-page="admin-services-wol"] .notice code { 3472 | font-size: 0.8rem !important; 3473 | } 3474 | 3475 | h2 {} 3476 | 3477 | .cbi-section>h3:first-child, 3478 | .panel-title { 3479 | font-size: 1.2rem; 3480 | padding-bottom: 1rem; 3481 | } 3482 | 3483 | .node-system-packages>.main .cbi-value.cbi-value-last>div { 3484 | width: 100% !important; 3485 | } 3486 | 3487 | .th, 3488 | .td { 3489 | flex-basis: 50%; 3490 | color: #fff; 3491 | } 3492 | 3493 | .tr>.td[data-title="Sensor"] { 3494 | text-align: center; 3495 | } 3496 | 3497 | .tr>.td[data-title="Temperature"] { 3498 | text-align: center; 3499 | } 3500 | 3501 | .tr>.td[data-title="Hostname"] { 3502 | text-align: center; 3503 | } 3504 | 3505 | .tr>.td[data-title="IPv4 address"] { 3506 | text-align: center; 3507 | } 3508 | 3509 | .tr>.td[data-title="MAC address"] { 3510 | text-align: center; 3511 | } 3512 | 3513 | .tr>.td[data-title="Lease time remaining"] { 3514 | text-align: center; 3515 | } 3516 | 3517 | 3518 | .td.cbi-value-field { 3519 | flex-basis: 100%; 3520 | } 3521 | 3522 | .td.cbi-value-field[data-type="button"], 3523 | .td.cbi-value-field[data-type="fvalue"] { 3524 | flex-basis: 25%; 3525 | text-align: left; 3526 | } 3527 | 3528 | td>.ifacebadge, 3529 | .td>.ifacebadge { 3530 | font-size: 0.62rem; 3531 | } 3532 | 3533 | #cbi-wireless>#wifi_assoclist_table .td { 3534 | overflow: hidden; 3535 | } 3536 | 3537 | #cbi-wireless>.cbi-section-node .td, 3538 | .Interfaces .td.cbi-section-actions { 3539 | text-align: center !important; 3540 | } 3541 | 3542 | .cbi-modal { 3543 | padding: 0.5rem; 3544 | } 3545 | 3546 | .cbi-modal .cbi-value { 3547 | padding: 0 0 0.25rem; 3548 | } 3549 | 3550 | .cbi-modal [data-tab-title] { 3551 | padding: 0 0.25rem !important; 3552 | } 3553 | 3554 | [data-tab-title] { 3555 | padding: 0 0.5rem !important; 3556 | } 3557 | 3558 | body, 3559 | code { 3560 | font-size: 0.8rem; 3561 | } 3562 | 3563 | .main>.main-left>.nav>.slide>.slide-menu>li>a, 3564 | .tr[data-title]::before, 3565 | .tr.cbi-section-table-titles.named::before { 3566 | font-size: 3567 | } 3568 | 3569 | .cbi-value-title, 3570 | .cbi-value-description, 3571 | .cbi-value-field, 3572 | .cbi-value-field .cbi-dropdown, 3573 | .cbi-value-field .cbi-input-select, 3574 | .cbi-value input[type="text"], 3575 | .node-system-packages>.main .cbi-value .cbi-value-field input { 3576 | width: 100%; 3577 | display: flex; 3578 | color: #fff; 3579 | flex-direction: column-reverse; 3580 | flex-wrap: wrap; 3581 | align-content: stretch; 3582 | align-items: flex-start; 3583 | } 3584 | } 3585 | 3586 | .cbi-page-actions>div>input, 3587 | .mobile-hide, 3588 | [data-page="admin-status-processes"] .td[data-title="Hang Up"]::before, 3589 | [data-page="admin-status-processes"] .td[data-title="Terminate"]::before, 3590 | [data-page="admin-status-processes"] .td[data-title="Kill"]::before, 3591 | .hide-sm, 3592 | .hide-xs:not([data-title="MAC-Address"]) { 3593 | display: none; 3594 | } 3595 | 3596 | .tabs>li>a, 3597 | select, 3598 | input { 3599 | font-size: 0.9rem; 3600 | } 3601 | 3602 | 3603 | @media screen and (min-width: 600px) { 3604 | ::-webkit-scrollbar { 3605 | width: 10px; 3606 | height: 10px; 3607 | } 3608 | 3609 | ::-webkit-scrollbar, 3610 | ::-webkit-scrollbar-corner { 3611 | background: transparent; 3612 | } 3613 | 3614 | ::-webkit-scrollbar-thumb { 3615 | background: #9e9e9e; 3616 | } 3617 | 3618 | ::-webkit-scrollbar-thumb:hover { 3619 | background: #757575; 3620 | } 3621 | 3622 | ::-webkit-scrollbar-thumb:active { 3623 | background: #424242; 3624 | } 3625 | } 3626 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/logout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/menu_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/filemanager.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/filemanager.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/modem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/modem.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/neko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/neko.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/network.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/openclash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/openclash.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/overview.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/navbar/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/gaya/icon/navbar/terminal.png -------------------------------------------------------------------------------- /luasrc/gaya/icon/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/app.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/docker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/istore.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/modem.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/nas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/services.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/status.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/system.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /luasrc/gaya/icon/sidebar-icon/vpn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /luasrc/style/brand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/style/brand.png -------------------------------------------------------------------------------- /luasrc/style/catatan.txt: -------------------------------------------------------------------------------- 1 | buat tambah login page disini 2 | -------------------------------------------------------------------------------- /luasrc/style/indo-wrt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/style/indo-wrt.png -------------------------------------------------------------------------------- /luasrc/style/openwrt20thanniversary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/luasrc/style/openwrt20thanniversary.png -------------------------------------------------------------------------------- /luasrc/style/style.css: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | catatan usahakan untuk mengganti bg pakai format png, kalo jpg ganti aja di bagian body, sesuaikan aja nama formatnya 3 | ---------------------*/ 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | 10 | body, 11 | html { 12 | height: 100%; 13 | font-family: 'Segoe UI', Arial, Helvetica, sans-serif; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | body { 19 | height: 100%; 20 | background-position: center; 21 | background-repeat: no-repeat; 22 | background-size: cover; 23 | background-attachment: fixed; 24 | } 25 | 26 | 27 | /*-------------------- 28 | Text 29 | ---------------------*/ 30 | 31 | h2, 32 | h3 { 33 | font-size: 16px; 34 | letter-spacing: -1px; 35 | line-height: 20px; 36 | } 37 | 38 | h2 { 39 | color: #fff; 40 | text-align: center; 41 | } 42 | 43 | h3 { 44 | color: #032942; 45 | text-align: right; 46 | } 47 | 48 | /*-------------------- 49 | Icons 50 | ---------------------*/ 51 | .i { 52 | width: 20px; 53 | height: 20px; 54 | } 55 | 56 | .i-login { 57 | margin: 13px 0px 0px 15px; 58 | position: relative; 59 | float: left; 60 | background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNi4yMjkgNDE2LjIyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE2LjIyOSA0MTYuMjI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQwMy43MjksMjkuNjVINzEuODAyYy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41djg2LjM2M2MwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41czEyLjUtNS41OTcsMTIuNS0xMi41VjU0LjY1ICAgIGgzMDYuOTI3djMwNi45MjhIODQuMzAydi03My44NjFjMC02LjkwMy01LjU5Ny0xMi41LTEyLjUtMTIuNXMtMTIuNSw1LjU5Ny0xMi41LDEyLjV2ODYuMzYxYzAsNi45MDMsNS41OTcsMTIuNSwxMi41LDEyLjUgICAgaDMzMS45MjdjNi45MDIsMCwxMi41LTUuNTk3LDEyLjUtMTIuNVY0Mi4xNUM0MTYuMjI5LDM1LjI0Nyw0MTAuNjMxLDI5LjY1LDQwMy43MjksMjkuNjV6IiBmaWxsPSIjODczMTRlIi8+CgkJPHBhdGggZD0iTTE4NS40MTcsMjg3LjgxMWMwLDUuMDU3LDMuMDQ1LDkuNjEzLDcuNzE2LDExLjU1YzEuNTQ3LDAuNjQyLDMuMTcsMC45NSw0Ljc4MSwwLjk1YzMuMjUzLDAsNi40NTEtMS4yNyw4Ljg0Mi0zLjY2ICAgIGw3OS42OTctNzkuNjk3YzIuMzQ0LTIuMzQ0LDMuNjYtNS41MjMsMy42Ni04LjgzOWMwLTMuMzE2LTEuMzE2LTYuNDk1LTMuNjYtOC44MzlsLTc5LjY5Ny03OS42OTcgICAgYy0zLjU3NS0zLjU3NS04Ljk1MS00LjY0Ni0xMy42MjMtMi43MWMtNC42NzEsMS45MzYtNy43MTYsNi40OTMtNy43MTYsMTEuNTQ5djY3LjE5N0gxMi41Yy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41ICAgIGMwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41aDE3Mi45MTdWMjg3LjgxMUwxODUuNDE3LDI4Ny44MTF6IE0yMTAuNDE3LDE1OC41OTRsNDkuNTIxLDQ5LjUybC00OS41MjEsNDkuNTIxVjE1OC41OTR6IiBmaWxsPSIjODczMTRlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); 61 | background-size: 18px 18px; 62 | background-repeat: no-repeat; 63 | background-position: center; 64 | } 65 | 66 | .i-more { 67 | background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibW9yZSI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik03Ni41LDIyOS41QzM0LjMsMjI5LjUsMCwyNjMuOCwwLDMwNnMzNC4zLDc2LjUsNzYuNSw3Ni41UzE1MywzNDguMiwxNTMsMzA2UzExOC43LDIyOS41LDc2LjUsMjI5LjV6IE03Ni41LDM0NC4yICAgICBjLTIxLjEsMC0zOC4yLTE3LjEwMS0zOC4yLTM4LjJjMC0yMS4xLDE3LjEtMzguMiwzOC4yLTM4LjJzMzguMiwxNy4xLDM4LjIsMzguMkMxMTQuNywzMjcuMSw5Ny42LDM0NC4yLDc2LjUsMzQ0LjJ6ICAgICAgTTUzNS41LDIyOS41Yy00Mi4yLDAtNzYuNSwzNC4zLTc2LjUsNzYuNXMzNC4zLDc2LjUsNzYuNSw3Ni41UzYxMiwzNDguMiw2MTIsMzA2UzU3Ny43LDIyOS41LDUzNS41LDIyOS41eiBNNTM1LjUsMzQ0LjIgICAgIGMtMjEuMSwwLTM4LjItMTcuMTAxLTM4LjItMzguMmMwLTIxLjEsMTcuMTAxLTM4LjIsMzguMi0zOC4yczM4LjIsMTcuMSwzOC4yLDM4LjJDNTczLjcsMzI3LjEsNTU2LjYsMzQ0LjIsNTM1LjUsMzQ0LjJ6ICAgICAgTTMwNiwyMjkuNWMtNDIuMiwwLTc2LjUsMzQuMy03Ni41LDc2LjVzMzQuMyw3Ni41LDc2LjUsNzYuNXM3Ni41LTM0LjMsNzYuNS03Ni41UzM0OC4yLDIyOS41LDMwNiwyMjkuNXogTTMwNiwzNDQuMiAgICAgYy0yMS4xLDAtMzguMi0xNy4xMDEtMzguMi0zOC4yYzAtMjEuMSwxNy4xLTM4LjIsMzguMi0zOC4yYzIxLjEsMCwzOC4yLDE3LjEsMzguMiwzOC4yQzM0NC4yLDMyNy4xLDMyNy4xLDM0NC4yLDMwNiwzNDQuMnoiIGZpbGw9IiNkZjQwNWEiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); 68 | background-size: 20px 20px; 69 | background-repeat: no-repeat; 70 | background-position: center; 71 | } 72 | 73 | .i-save { 74 | background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idGljayI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MzYuNywxOTYuNzAxTDI1OC4xODgsMzc1LjIxM2wtODIuODY5LTgyLjg4N2MtNy4yODctNy4yODctMTkuMTI1LTcuMjg3LTI2LjQxMiwwcy03LjI4NywxOS4xMjUsMCwyNi40MTIgICAgIGw5My44MDgsOTMuODA4YzAuNjMxLDAuODk5LDEuMDE0LDEuOTMyLDEuODE3LDIuNzM1YzMuNzY4LDMuNzY4LDguNzIxLDUuNTA4LDEzLjY1NSw1LjM3NGM0LjkzNCwwLjExNSw5LjkwNy0xLjYwNiwxMy42NzQtNS4zNzQgICAgIGMwLjgwMy0wLjgwNCwxLjE4Ni0xLjgzNiwxLjgxNy0yLjczNWwxODkuNDM0LTE4OS40MzNjNy4yODYtNy4yODcsNy4yODYtMTkuMTI1LDAtMjYuNDEyICAgICBDNDU1LjgwNiwxODkuNDE0LDQ0My45ODcsMTg5LjQxNCw0MzYuNywxOTYuNzAxeiBNMzA2LDBDMTM2Ljk5MiwwLDAsMTM2Ljk5MiwwLDMwNnMxMzYuOTkyLDMwNiwzMDYsMzA2ICAgICBjMTY4Ljk4OCwwLDMwNi0xMzYuOTkyLDMwNi0zMDZTNDc1LjAwOCwwLDMwNiwweiBNMzA2LDU3My43NUMxNTguMTI1LDU3My43NSwzOC4yNSw0NTMuODc1LDM4LjI1LDMwNiAgICAgQzM4LjI1LDE1OC4xMjUsMTU4LjEyNSwzOC4yNSwzMDYsMzguMjVjMTQ3Ljg3NSwwLDI2Ny43NSwxMTkuODc1LDI2Ny43NSwyNjcuNzVDNTczLjc1LDQ1My44NzUsNDUzLjg3NSw1NzMuNzUsMzA2LDU3My43NXoiIGZpbGw9IiMyMGMxOTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); 75 | background-size: 20px 20px; 76 | background-repeat: no-repeat; 77 | background-position: center; 78 | } 79 | 80 | .i-warning { 81 | background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi44MTYgNjEyLjgxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjgxNiA2MTIuODE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTMwNi40MDgsMEMxMzcuMzY4LDAsMC4zNzEsMTM2Ljk5NywwLjM3MSwzMDYuMDM3czEzNi45OTcsMzA2Ljc3OSwzMDYuMDM3LDMwNi43NzlzMzA2LjAzNy0xMzcuODEzLDMwNi4wMzctMzA2LjAzNyAgIEM2MTIuNDQ1LDEzNy43MzksNDc1LjQ0OCwwLDMwNi40MDgsMHogTTMwNi40MDgsNTgzLjE0N2MtMTUyLjIwMywwLTI3Ni4zNjgtMTI0LjE2NS0yNzYuMzY4LTI3Ni4zNjggICBTMTU0LjIwNSwyOS41OTUsMzA2LjQwOCwyOS41OTVTNTgyLjc3NiwxNTMuNzYsNTgyLjc3NiwzMDYuNzc5UzQ1OC42MTEsNTgzLjE0NywzMDYuNDA4LDU4My4xNDd6IE0zMjEuNjEzLDQzMS43NiAgIGMwLDguODI3LTcuMTk1LDE2LjAyMS0xNi4wMjEsMTYuMDIxYy04LjgyNywwLTE2LjAyMS03LjE5NS0xNi4wMjEtMTYuMDIxYzAtOC44MjcsNy4xOTUtMTYuMDIxLDE2LjAyMS0xNi4wMjEgICBTMzIxLjYxMyw0MjIuOTM0LDMyMS42MTMsNDMxLjc2eiBNMjkwLjM4NywzNTMuMjExdi0xODAuMjRjMC04LjAxMSw2LjM3OS0xNC4zOSwxNC4zOS0xNC4zOWM4LjAxMSwwLDE0LjM5LDYuMzc5LDE0LjM5LDE0LjM5ICAgdjE4MC4yNGMwLDguMDExLTYuMzc5LDE0LjM5LTE0LjM5LDE0LjM5QzI5Ni43NjYsMzY4LjQ5MSwyOTAuMzg3LDM2MS4yMjIsMjkwLjM4NywzNTMuMjExeiIgZmlsbD0iI2Y1ZDg3OCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); 82 | background-size: 20px 20px; 83 | background-repeat: no-repeat; 84 | background-position: center; 85 | } 86 | 87 | .i-close { 88 | background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); 89 | background-size: 20px 20px; 90 | background-repeat: no-repeat; 91 | background-position: center; 92 | } 93 | 94 | .i-left { 95 | background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); 96 | background-size: 16px 16px; 97 | background-repeat: no-repeat; 98 | background-position: center; 99 | } 100 | 101 | /*-------------------- 102 | Login Box 103 | ---------------------*/ 104 | 105 | .box { 106 | width: 330px; 107 | position: absolute; 108 | top: 50%; 109 | left: 50%; 110 | 111 | -webkit-transform: translate(-50%, -50%); 112 | transform: translate(-50%, -50%); 113 | } 114 | 115 | .box-form { 116 | width: 320px; 117 | position: relative; 118 | z-index: 1; 119 | } 120 | 121 | .box-login-tab { 122 | width: 50%; 123 | height: 40px; 124 | background: #00000044; 125 | position: relative; 126 | float: left; 127 | z-index: 1; 128 | -webkit-backdrop-filter: blur(10px); 129 | backdrop-filter: blur(10px); 130 | -webkit-border-radius: 6px 6px 0 0; 131 | -moz-border-radius: 6px 6px 0 0; 132 | border-radius: 6px 6px 0 0; 133 | 134 | -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); 135 | transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); 136 | -webkit-transform-origin: 0 0; 137 | transform-origin: 0 0; 138 | -webkit-backface-visibility: hidden; 139 | backface-visibility: hidden; 140 | 141 | -webkit-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32); 142 | -moz-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32); 143 | box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32); 144 | } 145 | 146 | .box-login-title { 147 | width: 35%; 148 | height: 40px; 149 | position: absolute; 150 | float: left; 151 | z-index: 2; 152 | } 153 | 154 | .box-login { 155 | position: relative; 156 | top: -4px; 157 | width: 320px; 158 | background: #00000044; 159 | text-align: center; 160 | overflow: hidden; 161 | z-index: 2; 162 | -webkit-backdrop-filter: blur(10px); 163 | backdrop-filter: blur(10px); 164 | -webkit-border-radius: 20px: -moz-border-radius=20px; 165 | border-radius: 20px; 166 | -moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); 167 | box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); 168 | } 169 | 170 | .box-info { 171 | width: 260px; 172 | top: 60px; 173 | position: absolute; 174 | right: -5px; 175 | padding: 15px 15px 15px 30px; 176 | background-color: rgba(255, 255, 255, 0.6); 177 | border: 1px solid rgba(255, 255, 255, 0.2); 178 | z-index: 0; 179 | 180 | -webkit-border-radius: 6px; 181 | -moz-border-radius: 6px; 182 | border-radius: 6px; 183 | 184 | -webkit-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); 185 | -moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); 186 | box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); 187 | } 188 | 189 | .line-wh { 190 | width: 100%; 191 | height: 1px; 192 | top: 0px; 193 | margin: 12px auto; 194 | position: relative; 195 | border-top: 1px solid rgba(255, 255, 255, 0.3); 196 | } 197 | 198 | /*-------------------- 199 | Form 200 | ---------------------*/ 201 | 202 | a { 203 | text-decoration: none; 204 | } 205 | 206 | button:focus { 207 | outline: 0; 208 | } 209 | 210 | .b { 211 | height: 24px; 212 | line-height: 24px; 213 | background-color: transparent; 214 | border: none; 215 | cursor: pointer; 216 | } 217 | 218 | .b-form { 219 | opacity: 0.5; 220 | margin: 10px 20px; 221 | float: right; 222 | } 223 | 224 | .b-info { 225 | opacity: 0.5; 226 | float: left; 227 | } 228 | 229 | .b-form:hover, 230 | .b-info:hover { 231 | opacity: 1; 232 | } 233 | 234 | .b-support, 235 | .b-cta { 236 | width: 100%; 237 | padding: 0px 15px; 238 | font-family: 'Quicksand', sans-serif; 239 | font-weight: 700; 240 | letter-spacing: -1px; 241 | font-size: 16px; 242 | line-height: 32px; 243 | cursor: pointer; 244 | 245 | -webkit-border-radius: 16px; 246 | -moz-border-radius: 16px; 247 | border-radius: 16px; 248 | } 249 | 250 | .b-support { 251 | border: #87314e 1px solid; 252 | background-color: transparent; 253 | color: #87314e; 254 | margin: 6px 0; 255 | } 256 | 257 | .b-cta { 258 | border: #df405a 1px solid; 259 | background-color: #df405a; 260 | color: #fff; 261 | } 262 | 263 | .b-support:hover, 264 | .b-cta:hover { 265 | color: #fff; 266 | background-color: #87314e; 267 | border: #87314e 1px solid; 268 | } 269 | 270 | .fieldset-body { 271 | display: table; 272 | } 273 | 274 | .fieldset-body p { 275 | width: 100%; 276 | display: inline-table; 277 | padding: 5px 20px; 278 | margin-bottom: 2px; 279 | } 280 | 281 | label { 282 | float: left; 283 | width: 100%; 284 | top: 0px; 285 | color: #fff; 286 | font-size: 13px; 287 | font-weight: 700; 288 | text-align: center; 289 | line-height: 2.5; 290 | } 291 | 292 | label.checkbox { 293 | float: left; 294 | padding: 5px 20px; 295 | line-height: 1.7; 296 | } 297 | 298 | input[type=text], 299 | input[type=password] { 300 | width: auto; 301 | height: 32px; 302 | padding: 0px 10px; 303 | background-color: rgb(0 0 0 / 28%); 304 | border: none; 305 | display: inline; 306 | color: #bdbdbd; 307 | font-size: 16px; 308 | font-weight: 400; 309 | float: none; 310 | border-radius: 10px; 311 | } 312 | 313 | input[type=text]:focus, 314 | input[type=password]:focus { 315 | background-color: #f8f8c6; 316 | outline: none; 317 | } 318 | 319 | input[type=submit] { 320 | width: 100%; 321 | height: 48px; 322 | margin-top: 24px; 323 | padding: 0px 20px; 324 | font-family: 'Segoe UI', Arial, Helvetica, sans-serif; 325 | font-weight: 700; 326 | font-size: 18px; 327 | color: #fff; 328 | line-height: 40px; 329 | text-align: center; 330 | background-color: #0c5091; 331 | border: 1px #075fa7 solid; 332 | opacity: 1; 333 | cursor: pointer; 334 | } 335 | 336 | input[type=submit]:hover { 337 | background-color: #df405a; 338 | border: 1px #df405a solid; 339 | } 340 | 341 | input[type=submit]:focus { 342 | outline: none; 343 | } 344 | 345 | p.field span.i { 346 | width: 24px; 347 | height: 24px; 348 | float: right; 349 | position: relative; 350 | margin-top: -26px; 351 | right: 2px; 352 | z-index: 2; 353 | display: none; 354 | 355 | -webkit-animation: bounceIn 0.6s linear; 356 | -moz-animation: bounceIn 0.6s linear; 357 | -o-animation: bounceIn 0.6s linear; 358 | animation: bounceIn 0.6s linear; 359 | } 360 | 361 | /*-------------------- 362 | Transitions 363 | ---------------------*/ 364 | 365 | .box-form, 366 | .box-info, 367 | .b, 368 | .b-support, 369 | .b-cta, 370 | input[type=submit], 371 | p.field span.i { 372 | 373 | -webkit-transition: all 0.3s; 374 | -moz-transition: all 0.3s; 375 | -ms-transition: all 0.3s; 376 | -o-transition: all 0.3s; 377 | transition: all 0.3s; 378 | } 379 | 380 | /*-------------------- 381 | Credits 382 | ---------------------*/ 383 | 384 | .icon-credits { 385 | width: 100%; 386 | position: absolute; 387 | bottom: 4px; 388 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; 389 | font-size: 12px; 390 | color: rgba(255, 255, 255, 0.1); 391 | text-align: center; 392 | z-index: -1; 393 | } 394 | 395 | img.tengah { 396 | display: block; 397 | margin-left: auto; 398 | margin-right: auto; 399 | text-align: center; 400 | padding: 20px; 401 | text-decoration: none; 402 | width: 200px; 403 | } 404 | 405 | img.bawah { 406 | position: absolute; 407 | bottom: 0; 408 | left: 50%; 409 | transform: translateX(-50%); 410 | display: block; 411 | padding: 20px; 412 | text-decoration: none; 413 | width: 25rem; 414 | } 415 | 416 | .icon-credits a { 417 | text-decoration: none; 418 | color: rgba(255, 255, 255, 0.2); 419 | } -------------------------------------------------------------------------------- /mobileview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/mobileview1.png -------------------------------------------------------------------------------- /mobileview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/mobileview2.png -------------------------------------------------------------------------------- /mobileview3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/mobileview3.png -------------------------------------------------------------------------------- /root/etc/config/alpha: -------------------------------------------------------------------------------- 1 | 2 | config theme 'theme' 3 | option color '#2222359a' 4 | option blur '00' 5 | option navbar '1' 6 | 7 | config navbar 8 | option name 'Overview' 9 | option enable 'Enable' 10 | option line '1' 11 | option newtab 'No' 12 | option icon '/www/luci-static/alpha/gaya/icon/navbar/overview.png' 13 | option address '/cgi-bin/luci/admin/status/overview' 14 | 15 | config navbar 16 | option name 'Terminal' 17 | option enable 'Enable' 18 | option line '2' 19 | option newtab 'No' 20 | option icon '/www/luci-static/alpha/gaya/icon/navbar/terminal.png' 21 | option address '/cgi-bin/luci/admin/services/ttyd' 22 | 23 | config navbar 24 | option name 'Open Clash' 25 | option enable 'Enable' 26 | option line '3' 27 | option newtab 'No' 28 | option icon '/www/luci-static/alpha/gaya/icon/navbar/openclash.png' 29 | option address '/cgi-bin/luci/admin/services/openclash' 30 | 31 | config navbar 32 | option name 'Neko' 33 | option enable 'Enable' 34 | option line '4' 35 | option newtab 'No' 36 | option icon '/www/luci-static/alpha/gaya/icon/navbar/neko.png' 37 | option address '/cgi-bin/luci/admin/services/neko' 38 | 39 | config navbar 40 | option name 'Modem' 41 | option enable 'Enable' 42 | option line '5' 43 | option newtab 'No' 44 | option icon '/www/luci-static/alpha/gaya/icon/navbar/modem.png' 45 | option address '/cgi-bin/luci/admin/modem/main' 46 | 47 | config navbar 48 | option name 'Network' 49 | option enable 'Enable' 50 | option line '6' 51 | option newtab 'No' 52 | option icon '/www/luci-static/alpha/gaya/icon/navbar/network.png' 53 | option address '/cgi-bin/luci/admin/network/network' 54 | -------------------------------------------------------------------------------- /ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/ss1.png -------------------------------------------------------------------------------- /ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/ss2.png -------------------------------------------------------------------------------- /ss3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/4f6bf1c81a0bf599ed1038687d31406cb6b17dc2/ss3.png -------------------------------------------------------------------------------- /template/footer.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | Alpha os is made from me for all .. especially for indo wrt members and fan of OpenWrt or DBAI Community 3 | luci-theme-alpha 4 | Copyright 2024 derisamedia 5 | Have a bug? Please create an issue here on GitHub! 6 | 7 | luci-theme-material 8 | Copyright 2015 Lutty Yang 9 | 10 | luci-theme-bootstrap: 11 | Copyright 2008 Steven Barth 12 | Copyright 2008 Jo-Philipp Wich 13 | Copyright 2012 David Menting 14 | 15 | MUI: 16 | https://github.com/muicss/mui 17 | 18 | Licensed to the public under the Apache License 2.0 19 | -%> 20 | <% 21 | local ver = require "luci.version" 22 | local uci = require "luci.model.uci".cursor() 23 | local config = uci:get_all("alpha", "theme") 24 | 25 | -- Table to store navbar icons 26 | local icon = {} 27 | 28 | -- Iterate through all navbar entries 29 | uci:foreach("alpha", "navbar", function(section) 30 | local address = section.address 31 | local icon_url = section.icon 32 | 33 | if address and icon_url then 34 | -- Remove '/www/luci-static/alpha/' from icon_url 35 | icon_url = string.gsub(icon_url, "^/www/luci%-static/alpha/", "") 36 | icon[address] = icon_url 37 | end 38 | end) 39 | 40 | -- Check navbar enable status 41 | local navbar_enabled = config.navbar == "1" 42 | 43 | -- Calculate number of enabled navbar links 44 | local num_links = 0 45 | uci:foreach("alpha", "navbar", function(section) 46 | if section.enable == "Enable" then 47 | num_links = num_links + 1 48 | end 49 | end) 50 | 51 | -- Calculate link width for responsive design 52 | local link_width = string.format("calc(100%% / %d)", num_links) 53 | 54 | -- Retrieve theme properties 55 | local background_color = config.color or '#2222359a' 56 | local blur_value = tonumber(config.blur) or 20 57 | local link_blur = string.format("blur(%dpx)", blur_value) 58 | %> 59 | 60 | 79 | 80 |
81 | 84 | 85 |
86 | <% if navbar_enabled then %> 87 |
88 | <% 89 | uci:foreach("alpha", "navbar", function(section) 90 | local address = section.address 91 | local icon_url = icon[address] or 'default/icon.png' 92 | local target_blank = section.newtab == "Yes" and 'target="_blank"' or '' 93 | 94 | if section.enable == "Enable" then 95 | %> 96 | > 97 | 98 | 99 | <% 100 | end 101 | end) 102 | %> 103 |
104 | <% end %> 105 | 108 |
109 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /template/header.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | Alpha os is made from me for all .. especially for indo wrt members and fan of OpenWrt or DBAI Community 3 | luci-theme-alpha 4 | Copyright 2022 derisamedia 5 | Have a bug? Please create an issue here on GitHub! 6 | 7 | luci-theme-material 8 | Copyright 2015-2017 Lutty Yang 9 | 10 | luci-theme-bootstrap: 11 | Copyright 2008 Steven Barth 12 | Copyright 2008-2016 Jo-Philipp Wich 13 | Copyright 2012 David Menting 14 | 15 | MUI: 16 | https://github.com/muicss/mui 17 | 18 | Licensed to the public under the Apache License 2.0 19 | -%> 20 | 21 | <% 22 | local sys = require "luci.sys" 23 | local util = require "luci.util" 24 | local http = require "luci.http" 25 | local disp = require "luci.dispatcher" 26 | local ver = require "luci.version" 27 | 28 | local boardinfo = util.ubus("system", "board") or { } 29 | 30 | local node = disp.context.dispatched 31 | local path = table.concat(disp.context.path, "-") 32 | 33 | http.prepare_content("text/html; charset=UTF-8") 34 | -%> 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | - LuCI"> 46 | - LuCI"> 47 | 48 | 49 | <% if node and node.css then %> 50 | 51 | <% end -%> 52 | 53 | 54 | <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI 55 | <% if css then %> 58 | <% end -%> 59 | 60 | node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>" style="background-image:url('/luci-static/alpha/background/dashboard.png')"> 61 |
62 |
63 |
64 | 67 |
68 |
69 | Keluar 70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 |
81 | 84 |
85 |
86 |
87 | <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and path ~= "admin-system-admin-password" then -%> 88 | <%- end -%> 89 | 90 | 96 | 97 | -------------------------------------------------------------------------------- /template/sysauth.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Alpha - Login 21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | 35 | 36 | 37 | 40 |
41 |
42 |
43 | 47 | 48 | 80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 | --------------------------------------------------------------------------------