├── LICENSE ├── README.md ├── luci ├── luci.mk └── themes │ └── luci-theme-darkmatter │ ├── Makefile │ ├── htdocs │ └── luci-static │ │ └── darkmatter │ │ ├── css │ │ └── style.css │ │ ├── fonts │ │ ├── DIN.woff │ │ └── icon.woff │ │ ├── img │ │ ├── favicon.ico │ │ ├── logo.png │ │ ├── noise.png │ │ └── stripes.svg │ │ └── js │ │ ├── jquery.min.js │ │ └── script.js │ ├── luasrc │ └── view │ │ └── themes │ │ └── darkmatter │ │ ├── footer.htm │ │ └── header.htm │ └── root │ └── etc │ └── uci-defaults │ └── 30_luci-theme-darkmatter ├── screenshots ├── desktop-interfaces.jpg ├── desktop-load.jpg ├── desktop-status.jpg ├── desktop-wifi-edit.jpg ├── desktop-wifi.jpg ├── phone-load.jpg ├── phone-status.jpg └── tablet-startup.jpg └── src ├── script.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Darkmatter theme for LuCI (LEDE/OpenWRT) 2 | ======================================== 3 | 4 | Darkmatter is an alternative HTML5 theme for LuCI that has evolved from 5 | luci-theme-bootstrap & luci-theme-material, in an attempt to bring a more 6 | concise, clean and visually pleasing UX to LEDE/OpenWRT. 7 | 8 | Issues & Updates 9 | ---------------- 10 | 11 | Found a bug? Please create an issue on GitHub: 12 | https://github.com/apollo-ng/luci-theme-darkmatter/issues 13 | 14 | Further tests and PR's are welcome and appreciated. 15 | 16 | Installation 17 | ------------ 18 | 19 | In time, darkmatter may be included upstream by the LEDE/OpenWRT crowd, 20 | to have it always available, for now, please select an installation method 21 | most suited for your case to get it: 22 | 23 | ### Adding Darkmatter to your running LEDE/OpenWRT as ipk package 24 | 25 | #### via LuCI 26 | 27 | * Go to System -> Software 28 | * Paste the following URL into the **Download and install package** field: 29 | - https://apollo.open-resource.org/downloads/luci-theme-darkmatter_0.2-beta-2_all.ipk 30 | * Press Enter or click "OK" 31 | 32 | #### via shell 33 | 34 | $ cd /tmp 35 | $ wget https://apollo.open-resource.org/downloads/luci-theme-darkmatter_0.2-beta-2_all.ipk 36 | $ opkg install luci-theme-darkmatter_0.2-beta-2_all.ipk 37 | 38 | ### Adding Darkmatter to your own LEDE/OpenWRT Build 39 | 40 | Edit your feeds.conf and add the following to it: 41 | 42 | # luci-theme-darkmatter 43 | src-git darkmatter git://github.com/apollo-ng/luci-theme-darkmatter.git 44 | 45 | Update your build environment and install the package: 46 | 47 | $ scripts/feeds update darkmatter 48 | $ scripts/feeds install luci-theme-darkmatter 49 | $ make menuconfig 50 | 51 | Go to LuCI -> Themes, select luci-theme-darkmatter, exit, save and build as usual. 52 | 53 | Enable the Theme 54 | ---------------- 55 | 56 | * Go to System -> System -> Language and Style 57 | * Choose Darkmatter in the Design selectbox 58 | 59 | Screenshots 60 | ---------- 61 | 62 | ### Desktop 63 | 64 | ![Darkmatter theme for LuCI - Status](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/desktop-status.jpg?raw=true) 65 | ![Darkmatter theme for LuCI - Realtime Graphs](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/desktop-load.jpg?raw=true) 66 | ![Darkmatter theme for LuCI - Interfaces](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/desktop-interfaces.jpg?raw=true) 67 | ![Darkmatter theme for LuCI - Wifi](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/desktop-wifi.jpg?raw=true) 68 | ![Darkmatter theme for LuCI - Wifi Edit](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/desktop-wifi-edit.jpg?raw=true) 69 | 70 | ### Tablet 71 | 72 | ![Darkmatter theme for LuCI - Startup](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/tablet-startup.jpg?raw=true) 73 | 74 | ### Phone 75 | 76 | ![Darkmatter theme for LuCI - Status](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/phone-status.jpg?raw=true) 77 | ![Darkmatter theme for LuCI - Load](https://github.com/apollo-ng/luci-theme-darkmatter/blob/master/screenshots/phone-load.jpg?raw=true) 78 | 79 | License 80 | ------- 81 | 82 | This program is free software; you can redistribute it and/or 83 | modify it under the terms of the GNU General Public License 84 | as published by the Free Software Foundation; either version 2 85 | of the License, or (at your option) any later version. 86 | -------------------------------------------------------------------------------- /luci/luci.mk: -------------------------------------------------------------------------------- 1 | # 2 | # Copyright (C) 2008-2015 The LuCI Team 3 | # 4 | # This is free software, licensed under the Apache License, Version 2.0 . 5 | # 6 | 7 | LUCI_NAME?=$(notdir ${CURDIR}) 8 | LUCI_TYPE?=$(word 2,$(subst -, ,$(LUCI_NAME))) 9 | LUCI_BASENAME?=$(patsubst luci-$(LUCI_TYPE)-%,%,$(LUCI_NAME)) 10 | LUCI_LANGUAGES:=$(filter-out templates,$(notdir $(wildcard ${CURDIR}/po/*))) 11 | LUCI_DEFAULTS:=$(notdir $(wildcard ${CURDIR}/root/etc/uci-defaults/*)) 12 | LUCI_PKGARCH?=$(if $(realpath src/Makefile),,all) 13 | 14 | # Language code titles 15 | LUCI_LANG.ca=Català (Catalan) 16 | LUCI_LANG.cs=Čeština (Czech) 17 | LUCI_LANG.de=Deutsch (German) 18 | LUCI_LANG.el=Ελληνικά (Greek) 19 | LUCI_LANG.en=English 20 | LUCI_LANG.es=Español (Spanish) 21 | LUCI_LANG.fr=Français (French) 22 | LUCI_LANG.he=עִבְרִית (Hebrew) 23 | LUCI_LANG.hu=Magyar (Hungarian) 24 | LUCI_LANG.it=Italiano (Italian) 25 | LUCI_LANG.ja=日本語 (Japanese) 26 | LUCI_LANG.ko=한국어 (Korean) 27 | LUCI_LANG.ms=Bahasa Melayu (Malay) 28 | LUCI_LANG.no=Norsk (Norwegian) 29 | LUCI_LANG.pl=Polski (Polish) 30 | LUCI_LANG.pt-br=Português do Brasil (Brazialian Portuguese) 31 | LUCI_LANG.pt=Português (Portuguese) 32 | LUCI_LANG.ro=Română (Romanian) 33 | LUCI_LANG.ru=Русский (Russian) 34 | LUCI_LANG.sk=Slovenčina (Slovak) 35 | LUCI_LANG.sv=Svenska (Swedish) 36 | LUCI_LANG.tr=Türkçe (Turkish) 37 | LUCI_LANG.uk=украї́нська (Ukrainian) 38 | LUCI_LANG.vi=Tiếng Việt (Vietnamese) 39 | LUCI_LANG.zh-cn=普通话 (Chinese) 40 | LUCI_LANG.zh-tw=臺灣華語 (Taiwanese) 41 | 42 | # Submenu titles 43 | LUCI_MENU.col=1. Collections 44 | LUCI_MENU.mod=2. Modules 45 | LUCI_MENU.app=3. Applications 46 | LUCI_MENU.theme=4. Themes 47 | LUCI_MENU.proto=5. Protocols 48 | LUCI_MENU.lib=6. Libraries 49 | 50 | 51 | PKG_NAME?=$(LUCI_NAME) 52 | 53 | PKG_VERSION?=$(if $(DUMP),x,$(strip $(shell \ 54 | if svn info >/dev/null 2>/dev/null; then \ 55 | revision="svn-r$$(LC_ALL=C svn info | sed -ne 's/^Revision: //p')"; \ 56 | elif git log -1 >/dev/null 2>/dev/null; then \ 57 | revision="svn-r$$(LC_ALL=C git log -1 | sed -ne 's/.*git-svn-id: .*@\([0-9]\+\) .*/\1/p')"; \ 58 | if [ "$$revision" = "svn-r" ]; then \ 59 | set -- $$(git log -1 --format="%ct %h"); \ 60 | secs="$$(($$1 % 86400))"; \ 61 | yday="$$(date --utc --date="@$$1" "+%y.%j")"; \ 62 | revision="$$(printf 'git-%s.%05d-%s' "$$yday" "$$secs" "$$2")"; \ 63 | fi; \ 64 | else \ 65 | revision="unknown"; \ 66 | fi; \ 67 | echo "$$revision" \ 68 | ))) 69 | 70 | PKG_GITBRANCH?=$(if $(DUMP),x,$(strip $(shell \ 71 | variant="LuCI"; \ 72 | if git log -1 >/dev/null 2>/dev/null; then \ 73 | branch="$$(git symbolic-ref --short -q HEAD 2>/dev/null)"; \ 74 | if [ "$$branch" != "master" ]; then \ 75 | variant="LuCI $$branch branch"; \ 76 | else \ 77 | variant="LuCI Master"; \ 78 | fi; \ 79 | fi; \ 80 | echo "$$variant" \ 81 | ))) 82 | 83 | PKG_RELEASE?=1 84 | PKG_INSTALL:=$(if $(realpath src/Makefile),1) 85 | PKG_BUILD_DEPENDS += lua/host luci-base/host $(LUCI_BUILD_DEPENDS) 86 | PKG_CONFIG_DEPENDS += CONFIG_LUCI_SRCDIET 87 | 88 | PKG_BUILD_DIR:=$(BUILD_DIR)/$(PKG_NAME) 89 | 90 | include $(INCLUDE_DIR)/package.mk 91 | 92 | define Package/$(PKG_NAME) 93 | SECTION:=luci 94 | CATEGORY:=LuCI 95 | SUBMENU:=$(if $(LUCI_MENU.$(LUCI_TYPE)),$(LUCI_MENU.$(LUCI_TYPE)),$(LUCI_MENU.app)) 96 | TITLE:=$(if $(LUCI_TITLE),$(LUCI_TITLE),LuCI $(LUCI_NAME) $(LUCI_TYPE)) 97 | DEPENDS:=$(LUCI_DEPENDS) 98 | $(if $(LUCI_PKGARCH),PKGARCH:=$(LUCI_PKGARCH)) 99 | endef 100 | 101 | ifneq ($(LUCI_DESCRIPTION),) 102 | define Package/$(PKG_NAME)/description 103 | $(strip $(LUCI_DESCRIPTION)) 104 | endef 105 | endif 106 | 107 | # Language selection for luci-base 108 | ifeq ($(PKG_NAME),luci-base) 109 | define Package/luci-base/config 110 | config LUCI_SRCDIET 111 | bool "Minify Lua sources" 112 | default n 113 | 114 | menu "Translations"$(foreach lang,$(LUCI_LANGUAGES), 115 | 116 | config LUCI_LANG_$(lang) 117 | tristate "$(shell echo '$(LUCI_LANG.$(lang))' | sed -e 's/^.* (\(.*\))$$/\1/') ($(lang))") 118 | 119 | endmenu 120 | endef 121 | endif 122 | 123 | define Build/Prepare 124 | for d in luasrc htdocs root src; do \ 125 | if [ -d ./$$$$d ]; then \ 126 | mkdir -p $(PKG_BUILD_DIR)/$$$$d; \ 127 | $(CP) ./$$$$d/* $(PKG_BUILD_DIR)/$$$$d/; \ 128 | fi; \ 129 | done 130 | $(call Build/Prepare/Default) 131 | endef 132 | 133 | define Build/Configure 134 | endef 135 | 136 | ifneq ($(wildcard ${CURDIR}/src/Makefile),) 137 | MAKE_PATH := src/ 138 | MAKE_VARS += FPIC="$(FPIC)" LUCI_VERSION="$(PKG_VERSION)" LUCI_GITBRANCH="$(PKG_GITBRANCH)" 139 | 140 | define Build/Compile 141 | $(call Build/Compile/Default,clean compile) 142 | endef 143 | else 144 | define Build/Compile 145 | endef 146 | endif 147 | 148 | HTDOCS = /www 149 | LUA_LIBRARYDIR = /usr/lib/lua 150 | LUCI_LIBRARYDIR = $(LUA_LIBRARYDIR)/luci 151 | 152 | define SrcDiet 153 | $(FIND) $(1) -type f -name '*.lua' | while read src; do \ 154 | if LuaSrcDiet --noopt-binequiv -o "$$$$src.o" "$$$$src"; \ 155 | then mv "$$$$src.o" "$$$$src"; fi; \ 156 | done 157 | endef 158 | 159 | define SubstituteVersion 160 | $(FIND) $(1) -type f -name '*.htm' | while read src; do \ 161 | $(SED) 's/<%# *\([^ ]*\)PKG_VERSION *%>/\1$(PKG_VERSION)/g' \ 162 | -e 's/"\(<%= *\(media\|resource\) *%>[^"]*\.\(js\|css\)\)"/"\1?v=$(PKG_VERSION)"/g' \ 163 | "$$$$src"; \ 164 | done 165 | endef 166 | 167 | define Package/$(PKG_NAME)/install 168 | if [ -d $(PKG_BUILD_DIR)/luasrc ]; then \ 169 | $(INSTALL_DIR) $(1)$(LUCI_LIBRARYDIR); \ 170 | cp -pR $(PKG_BUILD_DIR)/luasrc/* $(1)$(LUCI_LIBRARYDIR)/; \ 171 | $(FIND) $(1)$(LUCI_LIBRARYDIR)/ -type f -name '*.luadoc' | $(XARGS) rm; \ 172 | $(if $(CONFIG_LUCI_SRCDIET),$(call SrcDiet,$(1)$(LUCI_LIBRARYDIR)/),true); \ 173 | $(call SubstituteVersion,$(1)$(LUCI_LIBRARYDIR)/); \ 174 | else true; fi 175 | if [ -d $(PKG_BUILD_DIR)/htdocs ]; then \ 176 | $(INSTALL_DIR) $(1)$(HTDOCS); \ 177 | cp -pR $(PKG_BUILD_DIR)/htdocs/* $(1)$(HTDOCS)/; \ 178 | else true; fi 179 | if [ -d $(PKG_BUILD_DIR)/root ]; then \ 180 | $(INSTALL_DIR) $(1)/; \ 181 | cp -pR $(PKG_BUILD_DIR)/root/* $(1)/; \ 182 | else true; fi 183 | if [ -d $(PKG_BUILD_DIR)/src ]; then \ 184 | $(call Build/Install/Default) \ 185 | $(CP) $(PKG_INSTALL_DIR)/* $(1)/; \ 186 | else true; fi 187 | endef 188 | 189 | ifneq ($(LUCI_DEFAULTS),) 190 | define Package/$(PKG_NAME)/postinst 191 | [ -n "$${IPKG_INSTROOT}" ] || {$(foreach script,$(LUCI_DEFAULTS), 192 | (. /etc/uci-defaults/$(script)) && rm -f /etc/uci-defaults/$(script)) 193 | exit 0 194 | } 195 | endef 196 | endif 197 | 198 | 199 | LUCI_BUILD_PACKAGES := $(PKG_NAME) 200 | 201 | define LuciTranslation 202 | define Package/luci-i18n-$(LUCI_BASENAME)-$(1) 203 | SECTION:=luci 204 | CATEGORY:=LuCI 205 | TITLE:=$(PKG_NAME) - $(1) translation 206 | HIDDEN:=1 207 | DEFAULT:=LUCI_LANG_$(1)||(ALL&&m) 208 | DEPENDS:=$(PKG_NAME) 209 | PKGARCH:=all 210 | endef 211 | 212 | define Package/luci-i18n-$(LUCI_BASENAME)-$(1)/description 213 | Translation for $(PKG_NAME) - $(LUCI_LANG.$(1)) 214 | endef 215 | 216 | define Package/luci-i18n-$(LUCI_BASENAME)-$(1)/install 217 | $$(INSTALL_DIR) $$(1)/etc/uci-defaults 218 | echo "uci set luci.languages.$(subst -,_,$(1))='$(LUCI_LANG.$(1))'; uci commit luci" \ 219 | > $$(1)/etc/uci-defaults/luci-i18n-$(LUCI_BASENAME)-$(1) 220 | $$(INSTALL_DIR) $$(1)$(LUCI_LIBRARYDIR)/i18n 221 | $(foreach po,$(wildcard ${CURDIR}/po/$(1)/*.po), \ 222 | po2lmo $(po) \ 223 | $$(1)$(LUCI_LIBRARYDIR)/i18n/$(basename $(notdir $(po))).$(1).lmo;) 224 | endef 225 | 226 | define Package/luci-i18n-$(LUCI_BASENAME)-$(1)/postinst 227 | [ -n "$$$${IPKG_INSTROOT}" ] || { 228 | (. /etc/uci-defaults/luci-i18n-$(LUCI_BASENAME)-$(1)) && rm -f /etc/uci-defaults/luci-i18n-$(LUCI_BASENAME)-$(1) 229 | exit 0 230 | } 231 | endef 232 | 233 | LUCI_BUILD_PACKAGES += luci-i18n-$(LUCI_BASENAME)-$(1) 234 | 235 | endef 236 | 237 | $(foreach lang,$(LUCI_LANGUAGES),$(eval $(call LuciTranslation,$(lang)))) 238 | $(foreach pkg,$(LUCI_BUILD_PACKAGES),$(eval $(call BuildPackage,$(pkg)))) 239 | -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/Makefile: -------------------------------------------------------------------------------- 1 | # luci-theme-darkmatter 2 | # Copyright 2017 chrono 3 | # 4 | # Darkmatter is an alternative HTML5 theme for LuCI that has evolved from 5 | # luci-theme-bootstrap & luci-theme-material, in an attempt to bring a more 6 | # concise, clean and visually pleasing UX to LEDE/OpenWRT. 7 | # 8 | # Have a bug? Please create an issue here on GitHub! 9 | # https://github.com/apollo-ng/luci-theme-darkmatter/issues 10 | # 11 | # luci-theme-material 12 | # Copyright 2015 Lutty Yang 13 | # luci-theme-bootstrap: 14 | # Copyright 2008 Steven Barth 15 | # Copyright 2008 Jo-Philipp Wich 16 | # Copyright 2012 David Menting 17 | # 18 | # This program is free software; you can redistribute it and/or 19 | # modify it under the terms of the GNU General Public License 20 | # as published by the Free Software Foundation; either version 2 21 | # of the License, or (at your option) any later version. 22 | 23 | include $(TOPDIR)/rules.mk 24 | 25 | LUCI_TITLE:=Darkmatter Theme 26 | LUCI_DEPENDS:= 27 | 28 | include ../../luci.mk 29 | 30 | # call BuildPackage - OpenWrt buildroot signature 31 | -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/css/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | body, 3 | html { 4 | margin: 0; 5 | padding: 0 6 | } 7 | 8 | abbr, 9 | footer>a, 10 | header>.container>.brand { 11 | text-decoration: none 12 | } 13 | 14 | .main, 15 | .panel-title, 16 | header, 17 | table { 18 | width: 100% 19 | } 20 | 21 | @font-face { 22 | font-family: icomoon; 23 | src: url(../fonts/icon.woff) format("woff"); 24 | font-weight: 400; 25 | font-style: normal 26 | } 27 | 28 | @font-face { 29 | font-family: DIN; 30 | src: url(../fonts/DIN.woff) format("woff"); 31 | font-weight: 400; 32 | font-style: normal; 33 | font-stretch: normal; 34 | unicode-range: U+0020-F000 35 | } 36 | 37 | .cbi-button-down, 38 | .cbi-button-up, 39 | .cbi-value-helpicon, 40 | .main>.loading>span, 41 | .showSide { 42 | speak: none; 43 | font-style: normal !important; 44 | font-weight: 400 !important; 45 | font-variant: normal !important; 46 | text-transform: none !important; 47 | line-height: 1; 48 | -webkit-font-smoothing: antialiased; 49 | -moz-osx-font-smoothing: grayscale 50 | } 51 | 52 | * { 53 | box-sizing: border-box 54 | } 55 | 56 | .h1, 57 | .h2, 58 | .h3, 59 | .h4, 60 | .h5, 61 | .h6, 62 | h1, 63 | h2, 64 | h3, 65 | h4, 66 | h5, 67 | h6 { 68 | font-family: inherit; 69 | font-weight: 400; 70 | line-height: 1; 71 | color: inherit 72 | } 73 | 74 | html { 75 | -webkit-text-size-adjust: 100%; 76 | -ms-text-size-adjust: 100% 77 | } 78 | 79 | body, 80 | html { 81 | height: 100%; 82 | font-family: DIN, Helvetica, Arial, sans-serif 83 | } 84 | 85 | a, 86 | a:active, 87 | a:hover, 88 | a:link, 89 | a:visited { 90 | color: rgba(117, 137, 12, .75); 91 | text-decoration: none 92 | } 93 | 94 | input, 95 | select { 96 | background-color: #1f1e1a; 97 | color: #fff; 98 | text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0 3px #000; 99 | border: 1px solid #4f4e4a; 100 | outline: 0; 101 | padding: 0; 102 | box-shadow: inset 0 0 12px #000; 103 | border-radius: 0; 104 | background-image: none; 105 | height: 1.9rem; 106 | font-size: 1rem 107 | } 108 | 109 | input { 110 | padding-left: 4px 111 | } 112 | 113 | input[type=checkbox], 114 | input[type=radio] { 115 | background: 0 0; 116 | box-shadow: none 117 | } 118 | 119 | input[type=file] { 120 | padding: 0 !important; 121 | height: inherit 122 | } 123 | 124 | input:focus, 125 | select:not([multiple=multiple]):focus { 126 | border-color: rgba(117, 136, 12, .94) 127 | } 128 | 129 | select[multiple=multiple] { 130 | height: auto 131 | } 132 | 133 | code { 134 | color: #0f0e0a; 135 | text-shadow: none 136 | } 137 | 138 | abbr { 139 | color: rgba(117, 137, 12, .85); 140 | text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1); 141 | cursor: help 142 | } 143 | 144 | hr { 145 | margin: 1rem 0; 146 | border-color: #1f1e1a; 147 | opacity: .1 148 | } 149 | 150 | header { 151 | height: 56px; 152 | background: url(../img/stripes.svg) #1f1e1a; 153 | color: #d8d3c5; 154 | box-shadow: 0 2px 5px rgba(0, 0, 0, .26), inset 0 0 42px 0 #000; 155 | transition: box-shadow .2s; 156 | float: left; 157 | position: fixed; 158 | z-index: 101 159 | } 160 | 161 | header>.container { 162 | padding: 0 1rem; 163 | height: 56px; 164 | line-height: 56px 165 | } 166 | 167 | header>.container>.brand { 168 | font-size: 1.5rem; 169 | color: #d8d3c5; 170 | cursor: default; 171 | vertical-align: text-bottom 172 | } 173 | 174 | footer { 175 | text-align: right; 176 | padding: 1rem; 177 | color: #aaa; 178 | font-size: .8rem; 179 | text-shadow: 0 0 2px #BBB 180 | } 181 | 182 | .cbi-button, 183 | .cbi-section-table-cell, 184 | .cbi-section-table-row, 185 | .main>.loading>span { 186 | text-align: center 187 | } 188 | 189 | .main-right, 190 | .main>.main-left>.nav>li a { 191 | text-shadow: -1px 0 #1f1e1a, 0 1px #1f1e1a, 1px 0 #1f1e1a, 0 -1px #1f1e1a, 0 0 3px #1f1e1a 192 | } 193 | 194 | footer>a { 195 | color: #aaa 196 | } 197 | 198 | .main { 199 | top: 56px; 200 | bottom: 0; 201 | position: relative; 202 | height: 100%; 203 | height: calc(100% - 56px) 204 | } 205 | 206 | .main-left, 207 | .main>.loading { 208 | height: 100%; 209 | position: fixed 210 | } 211 | 212 | .main>.loading { 213 | width: 100%; 214 | z-index: 1000; 215 | display: block; 216 | background-color: #4f4e4a; 217 | top: 0 218 | } 219 | 220 | .main>.loading>span { 221 | display: block; 222 | margin-top: 20%; 223 | color: #d8d3c5; 224 | font-size: 2rem 225 | } 226 | 227 | .main>.loading>span>.loading-img:before { 228 | font-family: icomoon; 229 | content: "\e603" 230 | } 231 | 232 | .main>.loading>span>.loading-img { 233 | animation: anim-rotate 2s infinite linear; 234 | margin-right: 1rem; 235 | display: inline-block; 236 | color: rgba(117, 137, 12, 1) 237 | } 238 | 239 | @keyframes anim-rotate { 240 | 0% { 241 | -webkit-transform: rotate(0); 242 | -ms-transform: rotate(0); 243 | transform: rotate(0) 244 | } 245 | 246 | 100% { 247 | -webkit-transform: rotate(360deg); 248 | -ms-transform: rotate(360deg); 249 | transform: rotate(360deg) 250 | } 251 | } 252 | 253 | .main-left { 254 | float: left; 255 | top: 56px; 256 | width: 15%; 257 | width: calc(0% + 15rem); 258 | height: calc(100% - 56px); 259 | color: #d8d3c5; 260 | background: #2f2e2a; 261 | background: linear-gradient(to bottom, #2f2e2a 0, #1f1e1a 100%); 262 | background: -webkit-linear-gradient(top, #2f2e2a 0, #1f1e1a 100%); 263 | overflow-x: auto 264 | } 265 | 266 | .main-right, 267 | .pull-right { 268 | float: right 269 | } 270 | 271 | .main-right { 272 | width: 85%; 273 | width: calc(100% - 15rem); 274 | height: 100%; 275 | font-size: .85rem; 276 | background-color: #4f4e4a 277 | } 278 | 279 | .main-right>#maincontent { 280 | background-color: #4f4e4a; 281 | color: #fafafa 282 | } 283 | 284 | .pull-left { 285 | float: left 286 | } 287 | 288 | .warning { 289 | background-color: #FF7D60 !important; 290 | color: #FFF 291 | } 292 | 293 | .alert-message, 294 | .errorbox { 295 | margin: 2rem 0 0; 296 | padding: 2rem; 297 | border: 0; 298 | font-weight: 400; 299 | font-style: normal; 300 | line-height: 1; 301 | font-family: inherit; 302 | min-width: inherit; 303 | overflow: auto; 304 | border-radius: 0; 305 | background-color: #FFF; 306 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12) 307 | } 308 | 309 | .errorbox { 310 | color: #fff; 311 | background-color: #f0ad4e; 312 | border-color: #eea236 313 | } 314 | 315 | .error { 316 | color: red 317 | } 318 | 319 | #maincontent>.container>div:nth-child(1).alert-message.warning>a { 320 | font: inherit; 321 | overflow: visible; 322 | text-transform: none; 323 | display: inline-block; 324 | margin-bottom: 0; 325 | font-weight: 400; 326 | text-align: center; 327 | white-space: nowrap; 328 | vertical-align: middle; 329 | touch-action: manipulation; 330 | cursor: pointer; 331 | -webkit-user-select: none; 332 | -moz-user-select: none; 333 | -ms-user-select: none; 334 | user-select: none; 335 | background-image: none; 336 | min-width: 6rem; 337 | padding: .5rem 1rem; 338 | font-size: .9rem; 339 | line-height: 1.42857143; 340 | color: #fff; 341 | background-color: #5bc0de; 342 | border-color: #46b8da; 343 | margin-top: 2rem; 344 | text-decoration: inherit 345 | } 346 | 347 | .main>.main-left>.nav>.slide>a.menu.active, 348 | .main>.main-left>.nav>li { 349 | border-bottom: 1px solid #0f0e0a 350 | } 351 | 352 | .main>.main-left>.nav>li a { 353 | color: #d8d3c5; 354 | display: block 355 | } 356 | 357 | .main>.main-left>.nav>.slide>.menu.active, 358 | .main>.main-left>.nav>.slide>.slide-menu>.active>a, 359 | h2>a, 360 | h2>a:hover { 361 | color: #fafafa 362 | } 363 | 364 | .main>.main-left>.nav>li:nth-last-child(1) { 365 | background: rgba(175, 46, 17, .3); 366 | margin: 0 367 | } 368 | 369 | .main>.main-left>.nav>li:nth-last-child(1) a { 370 | text-decoration: none 371 | } 372 | 373 | .main>.main-left>.nav>li { 374 | background: url(../img/noise.png) #2f2e2a; 375 | padding: .5rem 1rem; 376 | cursor: pointer 377 | } 378 | 379 | .main>.main-left>.nav>.slide { 380 | padding: 0 381 | } 382 | 383 | h1, 384 | h3 { 385 | padding-bottom: 10px 386 | } 387 | 388 | .main>.main-left>.nav>.slide>ul { 389 | display: none 390 | } 391 | 392 | .main>.main-left>.nav>.slide>.menu { 393 | display: block; 394 | padding-left: 1rem; 395 | text-decoration: none; 396 | cursor: pointer; 397 | font-size: 1.1rem; 398 | line-height: 42px; 399 | height: 42px 400 | } 401 | 402 | .main>.main-left>.nav>.slide>.menu:hover { 403 | background: url(../img/noise.png) #4f4e4a 404 | } 405 | 406 | .main>.main-left>.nav>.slide>.menu.active:hover { 407 | background: 0 0 408 | } 409 | 410 | .main>.main-left>.nav>.slide>.slide-menu>.active { 411 | background: #4f4e4a !important; 412 | border-top: 1px solid #63615e !important 413 | } 414 | 415 | .main>.main-left>.nav>.slide>.slide-menu.active>li { 416 | padding-left: 2rem; 417 | border-top: 1px solid #4c4b48; 418 | border-bottom: 1px solid #0f0e0a; 419 | background: url(../img/noise.png) #3f3e3a 420 | } 421 | 422 | .main>.main-left>.nav>.slide>.slide-menu.active>li:nth-last-child(1) { 423 | border-bottom: none 424 | } 425 | 426 | .main>.main-left>.nav>.slide>.slide-menu.active>li:hover { 427 | background: rgba(117, 137, 12, .45) !important; 428 | border-top: 1px solid rgba(129, 140, 72, .45) 429 | } 430 | 431 | .main>.main-left>.nav>.slide>.slide-menu>li>a { 432 | text-decoration: none; 433 | white-space: nowrap; 434 | font-size: .95rem; 435 | line-height: 41px 436 | } 437 | 438 | .main>.main-left>.nav>.slide>.slide-menu>li:hover { 439 | background: url(../img/noise.png) #3f3e3a 440 | } 441 | 442 | .main>.main-left>.nav>.slide>.slide-menu>.active:hover { 443 | cursor: hand 444 | } 445 | 446 | li { 447 | list-style-type: none 448 | } 449 | 450 | #maincontent>.container { 451 | margin: 0 2rem 1rem 452 | } 453 | 454 | h1 { 455 | font-size: 2rem; 456 | border-bottom: 1px solid #eee 457 | } 458 | 459 | h2 { 460 | margin: 12px 0 0; 461 | font-size: 1.6rem; 462 | line-height: 2.5rem; 463 | padding-bottom: 12px 464 | } 465 | 466 | .panel-title, 467 | h3 { 468 | font-size: 1.4rem 469 | } 470 | 471 | h3 { 472 | margin: 2rem 0 0 473 | } 474 | 475 | fieldset { 476 | margin-bottom: 1rem; 477 | border: 1px solid rgba(37, 35, 35, .25); 478 | font-weight: 400; 479 | font-style: normal; 480 | line-height: 1; 481 | font-family: inherit; 482 | min-width: inherit; 483 | overflow-x: auto; 484 | overflow-y: hidden; 485 | border-radius: 0; 486 | -webkit-overflow-scrolling: touch; 487 | background: #2f2e2a 488 | } 489 | 490 | .cbi-map-descr+fieldset { 491 | margin-top: 1rem 492 | } 493 | 494 | legend { 495 | display: none !important 496 | } 497 | 498 | fieldset>fieldset { 499 | margin: 0; 500 | padding: 0; 501 | border: none; 502 | box-shadow: none 503 | } 504 | 505 | fieldset>button { 506 | margin: 8px 507 | } 508 | 509 | .panel-title { 510 | display: block; 511 | line-height: 2.2rem; 512 | padding-bottom: 0; 513 | background: #2f2e2a; 514 | padding-left: 8px; 515 | border-bottom: 1px solid #1f1e1a; 516 | border-top: 1px solid #1f1e1a 517 | } 518 | 519 | fieldset>.panel-title:nth-of-type(1) { 520 | border-top: none 521 | } 522 | 523 | /* 524 | * Tables.less 525 | * Tables for, you guessed it, tabular data 526 | * ---------------------------------------- */ 527 | 528 | .tr { display: table-row; } 529 | .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } 530 | .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } 531 | 532 | .table { 533 | display: table; 534 | width: 100%; 535 | margin-bottom: 18px; 536 | padding: 0; 537 | font-size: 13px; 538 | border-collapse: collapse; 539 | position: relative; 540 | } 541 | 542 | .table .th, .table .td { 543 | display: table-cell; 544 | vertical-align: middle; 545 | padding: 10px 10px 9px; 546 | line-height: 18px; 547 | text-align: left; 548 | } 549 | 550 | .table .tr:first-child .th { 551 | padding-top: 9px; 552 | font-weight: bold; 553 | vertical-align: top; 554 | } 555 | 556 | .tr.placeholder { 557 | height: calc(3em + 20px); 558 | } 559 | 560 | .tr.placeholder > .td { 561 | position: absolute; 562 | left: 0; 563 | right: 0; 564 | bottom: 0; 565 | text-align: center; 566 | line-height: 3em; 567 | } 568 | 569 | .table { 570 | border-spacing: 0; 571 | border-collapse: collapse; 572 | border: none; 573 | margin: 0 !important 574 | } 575 | 576 | .cbi-rowstyle-1, 577 | .cbi-rowstyle-2 { 578 | border-bottom: 1px solid #1f1e1a 579 | } 580 | 581 | .table .tr .td, 582 | .table .tr .th { 583 | padding: .5rem; 584 | white-space: nowrap 585 | } 586 | 587 | .table .tr { 588 | border-top: 1px solid #3f3e3a 589 | } 590 | 591 | .cbi-rowstyle-1 { 592 | background-color: #3f3e3a; 593 | border-top: 1px solid #4f4e4a 594 | } 595 | 596 | .cbi-rowstyle-2 { 597 | background-color: #2f2e2a; 598 | border-top: 1px solid #3f3e3a 599 | } 600 | 601 | .table .tr:nth-last-child(1) { 602 | border-bottom: none 603 | } 604 | 605 | #conns>div, 606 | #membuff>div, 607 | #memfree>div, 608 | #memtotal>div, 609 | #swapfree>div, 610 | #swaptotal>div { 611 | width: 100% !important; 612 | height: 1.2rem !important; 613 | background: #1f1e1a; 614 | border: 1px solid #000 !important 615 | } 616 | 617 | #conns>div>div, 618 | #membuff>div>div, 619 | #memfree>div>div, 620 | #memtotal>div>div, 621 | #swapfree>div>div, 622 | #swaptotal>div>div { 623 | height: 100% !important; 624 | background-color: rgba(117, 137, 12, .75) !important 625 | } 626 | 627 | #conns>div>div>div, 628 | #membuff>div>div>div, 629 | #memfree>div>div>div, 630 | #memtotal>div>div>div, 631 | #swapfree>div>div>div, 632 | #swaptotal>div>div>div { 633 | color: #fafafa !important; 634 | line-height: 17px 635 | } 636 | 637 | .cbi-value-field table, 638 | .cbi-value-field>table>tbody>tr>td, 639 | table table, 640 | td>table>tbody>tr>td { 641 | border: none 642 | } 643 | 644 | .cbi-button { 645 | height: 1.65rem; 646 | margin-top: -0.35rem; 647 | -webkit-appearance: none; 648 | display: inline-block; 649 | cursor: pointer; 650 | -ms-touch-action: manipulation; 651 | touch-action: manipulation; 652 | vertical-align: middle; 653 | white-space: nowrap; 654 | -webkit-user-select: none; 655 | -moz-user-select: none; 656 | -ms-user-select: none; 657 | user-select: none; 658 | width: auto !important; 659 | color: #d8d3c5; 660 | font-size: .8rem; 661 | font-family: DIN; 662 | font-weight: 700; 663 | text-shadow: 0 1px 1px #000; 664 | text-decoration: none; 665 | border-width: 1px; 666 | border-radius: 0; 667 | border-style: solid; 668 | border-color: #44433f #44433f #3a3935; 669 | box-shadow: inset 0 0 24px 0 #2f2e2c, 0 0 3px 0 #000; 670 | background: -webkit-linear-gradient(top, #494744 0, #2f2e2c 100%); 671 | background: linear-gradient(to bottom, #494744 0, #2f2e2c 100%); 672 | padding: 5px 673 | } 674 | 675 | .cbi-button:active, 676 | .cbi-button:focus, 677 | .cbi-button:hover { 678 | outline: 0; 679 | text-decoration: none; 680 | color: rgba(0, 0, 0, .87) 681 | } 682 | 683 | .cbi-button-apply, 684 | .cbi-button-edit, 685 | .cbi-button-remove, 686 | .cbi-button-reset, 687 | .cbi-input-apply, 688 | .cbi-input-remove, 689 | .cbi-input-reset, 690 | .cbi-section-remove>.cbi-button { 691 | color: #2f2e2a !important; 692 | text-shadow: 0 1px 1px rgba(255, 255, 255, .62); 693 | text-transform: uppercase 694 | } 695 | 696 | .cbi-button:focus, 697 | .cbi-button:hover { 698 | box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2) 699 | } 700 | 701 | .cbi-button:active { 702 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23) 703 | } 704 | 705 | .cbi-button:disabled { 706 | cursor: not-allowed; 707 | pointer-events: none; 708 | opacity: .6; 709 | box-shadow: none 710 | } 711 | 712 | .zonebadge, 713 | header>.container>.pull-right>* { 714 | cursor: pointer 715 | } 716 | 717 | .cbi-button+.cbi-button, 718 | form.inline+form.inline { 719 | margin-left: .6rem 720 | } 721 | 722 | .cbi-button-reset, 723 | .cbi-input-remove { 724 | box-shadow: inset 0 0 14px 0 #db4213, 0 0 3px 0 #db6113 !important; 725 | border: 1px solid rgba(255, 129, 92, .65) !important; 726 | background: #dbb013 !important; 727 | background: -moz-radial-gradient(center, ellipse cover, #dbb013 0, #c69611 100%) !important; 728 | background: -webkit-radial-gradient(center, ellipse cover, #dbb013 0, #c69611 100%) !important; 729 | background: radial-gradient(ellipse at center, #dbb013 0, #c69611 100%) !important 730 | } 731 | 732 | .cbi-button-add, 733 | .cbi-button-find, 734 | .cbi-button-reload, 735 | .cbi-button-save, 736 | .cbi-input-find, 737 | .cbi-input-reload, 738 | .cbi-input-save { 739 | color: #2f2e2a !important; 740 | text-shadow: 0 1px 1px rgba(255, 255, 255, .62); 741 | text-transform: uppercase; 742 | box-shadow: inset 0 0 24px 0 #606f11, 0 0 3px 0 #9db134 !important; 743 | border: 1px solid #799037 !important; 744 | background: #7eaa0f !important; 745 | background: -webkit-radial-gradient(center ellipse, #7eaa0f 0, #6d8006 100%) !important; 746 | background: radial-gradient(ellipse at center, #7eaa0f 0, #6d8006 100%) !important 747 | } 748 | 749 | .cbi-button-apply, 750 | .cbi-button-edit, 751 | .cbi-input-apply { 752 | box-shadow: inset 0 0 24px 0 rgba(62, 62, 62, .77), 0 0 4px 0 rgba(236, 232, 219, .75); 753 | border: 1px solid #969696 !important; 754 | background: #dbb013 !important; 755 | background: -webkit-radial-gradient(center ellipse, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important; 756 | background: radial-gradient(ellipse at center, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important 757 | } 758 | 759 | .cbi-button-remove, 760 | .cbi-input-reset, 761 | .cbi-section-remove>.cbi-button { 762 | box-shadow: inset 0 0 14px 0 #82290e, 0 0 3px 0 #db4213 !important; 763 | border: 1px solid #b73813 !important; 764 | background: #db4213 !important; 765 | background: -moz-radial-gradient(center, ellipse cover, #db4213 0, #c93612 100%) !important; 766 | background: -webkit-radial-gradient(center, ellipse cover, #db4213 0, #c93612 100%) !important; 767 | background: radial-gradient(ellipse at center, #db4213 0, #c93612 100%) !important 768 | } 769 | 770 | .a-to-btn { 771 | text-decoration: none 772 | } 773 | 774 | .tabs { 775 | margin: 0 -2rem; 776 | padding-left: .5rem; 777 | background-color: #3f3e3a; 778 | border-bottom: 1px solid #2f2e2a 779 | } 780 | 781 | .cbi-tabmenu>li, 782 | .tabs>li { 783 | display: inline-block; 784 | height: 42px; 785 | line-height: 42px 786 | } 787 | 788 | .cbi-tabmenu>li>a, 789 | .tabs>li>a { 790 | text-decoration: none; 791 | color: #d8d3c5; 792 | padding: .5rem .8rem 793 | } 794 | 795 | .tabs>li:hover, 796 | .tabs>li[class~=active] { 797 | cursor: pointer; 798 | border-bottom: .2rem solid rgba(117, 137, 12, .75); 799 | color: rgba(117, 137, 12, .9) 800 | } 801 | 802 | .cbi-tabmenu>li[class~=cbi-tab]>a, 803 | .tabs>li[class~=active]>a { 804 | color: #fafafa 805 | } 806 | 807 | .tabs>li:hover { 808 | border-bottom: .18751rem solid rgba(117, 137, 12, .5) 809 | } 810 | 811 | .cbi-tabmenu>li:hover { 812 | border-bottom: 2px solid #d8d3c5 813 | } 814 | 815 | .cbi-tabmenu>li[class~=cbi-tab] { 816 | border-bottom: 2px solid rgba(117, 137, 12, .85) 817 | } 818 | 819 | .cbi-tabmenu { 820 | background: url(../img/noise.png) #171612 821 | } 822 | 823 | .cbi-section-node:nth-of-type(2n), 824 | .cbi-section-remove:nth-of-type(2n) { 825 | background-color: #3f3e3a 826 | } 827 | 828 | .cbi-section-node-tabbed { 829 | padding: 0; 830 | margin-top: 0; 831 | background: #3f3e3a 832 | } 833 | 834 | .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { 835 | background-color: #2f2e2a 836 | } 837 | 838 | .cbi-value-description, 839 | .cbi-value-field { 840 | display: table-cell; 841 | line-height: 1.25; 842 | } 843 | .table .td.cbi-value-field { 844 | padding-left: 1px; 845 | padding-right: 1px; 846 | } 847 | 848 | .cbi-value-helpicon>img { 849 | display: none 850 | } 851 | 852 | .cbi-value-helpicon:before { 853 | font-family: icomoon; 854 | color: rgba(117, 137, 12, .5); 855 | content: "\f059" 856 | } 857 | 858 | .cbi-value-description { 859 | color: #d8d3c5 font-size: small; 860 | padding: .5rem 0 0 861 | } 862 | 863 | .cbi-value-title { 864 | word-wrap: break-word; 865 | padding-top: .6rem; 866 | width: 23rem; 867 | float: left; 868 | text-align: right; 869 | padding-right: 2rem; 870 | display: table-cell 871 | } 872 | 873 | .cbi-value { 874 | padding: .3rem 0; 875 | display: inline-block; 876 | width: 100% 877 | } 878 | 879 | .cbi-section-table-descr>.cbi-section-table-cell, 880 | .cbi-section-table-titles>.cbi-section-table-cell { 881 | border: none 882 | } 883 | 884 | .cbi-rowstyle-2 .cbi-button-down, 885 | .cbi-rowstyle-2 .cbi-button-up { 886 | background-color: #FFF !important 887 | } 888 | 889 | .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { 890 | width: auto !important 891 | } 892 | 893 | .cbi-section-table-titles { 894 | background: url(../img/noise.png) #292823 895 | } 896 | 897 | .cbi-map-descr, 898 | .cbi-section-descr { 899 | padding: .5rem; 900 | color: #1f1e1a; 901 | font-size: small; 902 | background: #6f6e6a; 903 | text-shadow: none 904 | } 905 | 906 | .hidden { 907 | display: none 908 | } 909 | 910 | .left { 911 | text-align: left !important 912 | } 913 | 914 | .right { 915 | text-align: right !important 916 | } 917 | 918 | .inline { 919 | display: inline 920 | } 921 | 922 | .cbi-page-actions { 923 | padding: 10px; 924 | border: 1px solid #3f3e3a; 925 | text-align: right; 926 | background: url(../img/stripes.svg) #2f2e2a; 927 | box-shadow: inset 0 0 15px rgba(0, 0, 0, .6) 928 | } 929 | 930 | .cbi-value input[type=password], 931 | .cbi-value input[type=text], 932 | .cbi-value-field .cbi-input-select { 933 | min-width: 15rem 934 | } 935 | 936 | .ifacebadge { 937 | display: inline-flex; 938 | padding: .5rem 1rem; 939 | background: rgba(15, 14, 10, .8); 940 | box-shadow: inset 0 0 42px 0 #000 941 | } 942 | 943 | td>.ifacebadge { 944 | font-size: .9rem 945 | } 946 | 947 | .ifacebadge>img { 948 | float: right; 949 | margin: 0 .3rem; 950 | width: 16px; 951 | height: 16px; 952 | vertical-align: middle; 953 | } 954 | 955 | .cbi-input-textarea { 956 | width: 100%; 957 | min-height: 16rem; 958 | min-width: 54rem; 959 | padding: .8rem; 960 | font-size: .8rem; 961 | margin-top: 10px 962 | } 963 | 964 | #syslog { 965 | width: 100%; 966 | min-height: 15rem; 967 | padding: 1rem; 968 | font-size: small; 969 | color: #d8d3c5; 970 | margin-bottom: 20px; 971 | border-radius: 0 972 | } 973 | 974 | #cbi-apply-uci-apply img { 975 | display: none 976 | } 977 | 978 | #cbi-apply-uci-apply #cbi-apply-uci-apply-status { 979 | display: block; 980 | color: #d8d3c5; 981 | padding: 10px 982 | } 983 | 984 | #cbi-apply-uci-apply #cbi-apply-uci-apply-status:before { 985 | font-family: icomoon; 986 | content: "\e603"; 987 | animation: anim-rotate 2s infinite linear; 988 | margin-right: 1rem; 989 | display: inline-block; 990 | color: rgba(117, 137, 12, 1) 991 | } 992 | 993 | .uci-change-list { 994 | font-family: monospace; 995 | padding: 10px; 996 | color: #fafafa; 997 | font-size: 14px 998 | } 999 | 1000 | .uci-change-legend-label ins, 1001 | .uci-change-list ins { 1002 | text-decoration: none; 1003 | border: 1px solid rgba(117, 137, 12, .75); 1004 | background-color: #505a18; 1005 | display: block; 1006 | padding: 2px 1007 | } 1008 | 1009 | .uci-change-legend-label del, 1010 | .uci-change-list del { 1011 | text-decoration: none; 1012 | border: 1px solid #c93612; 1013 | background-color: rgba(175, 46, 17, .53); 1014 | display: block; 1015 | font-style: normal; 1016 | padding: 2px 1017 | } 1018 | 1019 | .uci-change-legend-label var, 1020 | .uci-change-list var { 1021 | text-decoration: none; 1022 | border: 1px solid #3f3e3a; 1023 | display: block; 1024 | font-style: normal; 1025 | padding: 2px; 1026 | box-shadow: inset 0 0 24px 0 #000; 1027 | background: #1f1e1a 1028 | } 1029 | 1030 | .uci-change-list var del, 1031 | .uci-change-list var ins { 1032 | border: none; 1033 | white-space: pre; 1034 | font-style: normal; 1035 | padding: 0 1036 | } 1037 | 1038 | .uci-change-legend { 1039 | padding: 10px 1040 | } 1041 | 1042 | .uci-change-legend-label { 1043 | width: 150px; 1044 | float: left 1045 | } 1046 | 1047 | .uci-change-legend-label>del, 1048 | .uci-change-legend-label>ins, 1049 | .uci-change-legend-label>var { 1050 | float: left; 1051 | margin-right: 4px; 1052 | width: 10px; 1053 | height: 10px; 1054 | display: block 1055 | } 1056 | 1057 | .uci-change-legend-label var del, 1058 | .uci-change-legend-label var ins { 1059 | line-height: 6px; 1060 | border: none 1061 | } 1062 | 1063 | .uci-change-list del, 1064 | .uci-change-list ins, 1065 | .uci-change-list var { 1066 | padding: .5rem 1067 | } 1068 | 1069 | #bwsvg, 1070 | #iwsvg, 1071 | #iwsvg2 { 1072 | border: 1px solid #1f1e1a !important; 1073 | border-top: none !important; 1074 | box-shadow: inset 0 0 42px 0 #000; 1075 | background: url(../img/stripes.svg) #1f1e1a !important 1076 | } 1077 | 1078 | svg { 1079 | background: rgba(15, 14, 10, .8) !important 1080 | } 1081 | 1082 | .ifacebox { 1083 | border: 1px solid #0f0e0a; 1084 | margin: 5px; 1085 | background-color: #fff; 1086 | text-align: center; 1087 | white-space: nowrap; 1088 | background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); 1089 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 1090 | border-radius: 4px; 1091 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 1092 | display: inline-flex; 1093 | flex-direction: column; 1094 | line-height: 1.2em; 1095 | min-width: 100px; 1096 | } 1097 | 1098 | .ifacebox-head { 1099 | line-height: 20px; 1100 | color: #1f1e1a; 1101 | text-shadow: none 1102 | } 1103 | 1104 | .ifacebox-body { 1105 | box-shadow: inset 0 0 15px 0 #000; 1106 | background: #1f1e1a; 1107 | min-height: 40px; 1108 | line-height: 18px; 1109 | } 1110 | 1111 | /* --- network-status --- */ 1112 | .network-status-table { 1113 | } 1114 | 1115 | .network-status-table .ifacebox { 1116 | } 1117 | 1118 | .network-status-table .ifacebox-body { 1119 | height: 100%; 1120 | text-align: left; 1121 | } 1122 | 1123 | .network-status-table .ifacebox-body > span { 1124 | display: block; 1125 | margin: .5em 1.5em 1126 | } 1127 | 1128 | #dsl_status_table .ifacebox-body > span > strong { 1129 | display: inline-block; 1130 | min-width: 35%; 1131 | } 1132 | 1133 | .ifacebadge.large, 1134 | .network-status-table .ifacebox-body .ifacebadge { 1135 | display: inline-flex; 1136 | flex: 1; 1137 | padding: .25em; 1138 | min-width: 220px; 1139 | width: 100%; 1140 | } 1141 | 1142 | .cbi-tooltip-container { 1143 | cursor: help; 1144 | display: inline-block; 1145 | vertical-align: text-top; 1146 | } 1147 | 1148 | .cbi-tooltip { 1149 | display: block; 1150 | position: absolute; 1151 | z-index: 1000; 1152 | left: -1000px; 1153 | opacity: 0; 1154 | transition: opacity .25s ease-out; 1155 | width: auto !important; 1156 | padding: .75em; 1157 | text-align: left; 1158 | margin-left: 1.25em; 1159 | } 1160 | 1161 | .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { 1162 | left: auto; 1163 | opacity: 1; 1164 | transition: opacity .25s ease-in; 1165 | } 1166 | 1167 | .zonebadge .cbi-tooltip { 1168 | padding: 1px; 1169 | background: inherit; 1170 | margin: -1.6em 0 0 -5px; 1171 | border-radius: 3px; 1172 | pointer-events: none; 1173 | box-shadow: 0 0 3px #444; 1174 | } 1175 | 1176 | .cbi-image-button { 1177 | margin-left: .5rem 1178 | } 1179 | 1180 | .zonebadge { 1181 | padding: .2rem .5rem; 1182 | display: inline-block 1183 | } 1184 | 1185 | .zonebadge>.ifacebadge { 1186 | padding: .2rem 1rem; 1187 | margin: .3rem 1188 | } 1189 | 1190 | .zonebadge>input[type=text] { 1191 | padding: .16rem 1rem; 1192 | min-width: 10rem; 1193 | margin-top: .3rem 1194 | } 1195 | 1196 | .zone-forwards { 1197 | display: flex; 1198 | flex-wrap: wrap; 1199 | } 1200 | 1201 | .zone-forwards > * { 1202 | flex: 1 1 40%; 1203 | padding: 1px; 1204 | } 1205 | 1206 | .zone-forwards > span { 1207 | flex-basis: 10%; 1208 | text-align: center; 1209 | } 1210 | 1211 | .zone-forwards .zone-src, 1212 | .zone-forwards .zone-dest { 1213 | display: flex; 1214 | } 1215 | 1216 | 1217 | .cbi-value-field .cbi-input-checkbox, 1218 | .cbi-value-field .cbi-input-radio { 1219 | margin-top: .5rem; 1220 | height: 1rem 1221 | } 1222 | 1223 | .cbi-value-field>input+.cbi-value-description { 1224 | padding: 0 1225 | } 1226 | 1227 | .cbi-value-field>ul>li { 1228 | display: flex 1229 | } 1230 | 1231 | .cbi-value-field>ul>li>label { 1232 | margin-top: .5rem 1233 | } 1234 | 1235 | .cbi-value-field>ul>li .ifacebadge { 1236 | margin-left: .4rem; 1237 | margin-top: -.5rem 1238 | } 1239 | 1240 | .cbi-section-table-row>.cbi-value-field .cbi-input-select { 1241 | min-width: 7rem 1242 | } 1243 | 1244 | .cbi-section-create>.cbi-button-add { 1245 | margin: .5rem 1246 | } 1247 | 1248 | .cbi-section-remove { 1249 | padding: .5rem 1250 | } 1251 | 1252 | div.cbi-value var, 1253 | td.cbi-value-field var { 1254 | font-style: italic; 1255 | color: #0069D6 1256 | } 1257 | 1258 | small { 1259 | font-size: 90%; 1260 | white-space: normal; 1261 | line-height: 1.42857143 1262 | } 1263 | 1264 | .cbi-button-down, 1265 | .cbi-button-up { 1266 | display: inline-block; 1267 | min-width: 0; 1268 | padding: .2rem .3rem; 1269 | font-size: 1.2rem 1270 | } 1271 | 1272 | .cbi-optionals { 1273 | padding: 1rem 1rem 0; 1274 | border-top: 1px solid #CCC 1275 | } 1276 | 1277 | #diag-rc-output>pre { 1278 | display: block; 1279 | padding: 8.5px; 1280 | margin: 0 0 18px; 1281 | line-height: 1.5rem; 1282 | white-space: pre-wrap; 1283 | word-wrap: break-word; 1284 | font-size: 1.4rem 1285 | } 1286 | 1287 | .darkMask, 1288 | .node-main-login>.main>.main-left, 1289 | .showSide { 1290 | display: none 1291 | } 1292 | 1293 | .node-main-login>.main fieldset:nth-child(4) td:nth-child(2), 1294 | .node-status-overview>.main fieldset:nth-child(4) td:nth-child(2), 1295 | .node-status-processes>.main table tr td:nth-child(3) { 1296 | white-space: normal 1297 | } 1298 | 1299 | input[name=ping], 1300 | input[name=traceroute], 1301 | input[name=nslookup] { 1302 | width: 80% 1303 | } 1304 | 1305 | .darkMask, 1306 | .node-main-login>.main>.main-right { 1307 | width: 100% 1308 | } 1309 | 1310 | #xhr_poll_status>.label.success { 1311 | color: #fafafa !important; 1312 | text-shadow: 0 1px 1px rgba(65, 65, 65, .4) !important; 1313 | box-shadow: inset 0 0 24px 0 #606f11, 0 0 3px 0 #9db134 !important; 1314 | border: 1px solid #799037 !important; 1315 | background: #7eaa0f !important; 1316 | background: -webkit-radial-gradient(center ellipse, #7eaa0f 0, #6d8006 100%) !important; 1317 | background: radial-gradient(ellipse at center, #7eaa0f 0, #6d8006 100%) !important; 1318 | margin-right: 4px; 1319 | padding: 5px 1320 | } 1321 | 1322 | .label { 1323 | color: #d8d3c5 !important; 1324 | font-size: .8rem; 1325 | text-shadow: 0 1px 1px #000; 1326 | text-decoration: none; 1327 | border-width: 1px; 1328 | border-radius: 0; 1329 | border-style: solid; 1330 | border-color: #44433f #44433f #3a3935; 1331 | box-shadow: inset 0 0 24px 0 #2f2e2c, 0 0 3px 0 #000; 1332 | background: -webkit-linear-gradient(top, #494744 0, #2f2e2c 100%); 1333 | background: linear-gradient(to bottom, #494744 0, #2f2e2c 100%); 1334 | padding: 5px 1335 | } 1336 | 1337 | #modemenu>li .active>.label { 1338 | box-shadow: inset 0 0 24px 0 rgba(62, 62, 62, .77), 0 0 4px 0 rgba(236, 232, 219, .75); 1339 | border: 1px solid #969696 !important; 1340 | background: #dbb013 !important; 1341 | background: -webkit-radial-gradient(center ellipse, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important; 1342 | background: radial-gradient(ellipse at center, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important 1343 | } 1344 | 1345 | #modemenu>li .active>.label>a { 1346 | color: #d8d3c5 !important; 1347 | text-shadow: 0 1px 1px rgba(10, 9, 4, .4) !important 1348 | } 1349 | 1350 | .notice { 1351 | background-color: #5BC0DE 1352 | } 1353 | 1354 | .darkMask { 1355 | height: 100%; 1356 | position: fixed; 1357 | background-color: rgba(0, 0, 0, .56); 1358 | content: ""; 1359 | z-index: 99 1360 | } 1361 | 1362 | .node-main-login>.main fieldset { 1363 | padding: .5rem; 1364 | margin-bottom: 1rem; 1365 | display: inline; 1366 | background: 0 0; 1367 | border: none; 1368 | box-shadow: none; 1369 | overflow: hidden; 1370 | width: 100% 1371 | } 1372 | 1373 | .node-main-login>.main .cbi-value-title { 1374 | width: 7rem 1375 | } 1376 | 1377 | .node-main-login>.main #maincontent { 1378 | text-align: center 1379 | } 1380 | 1381 | .node-main-login>.main .container { 1382 | display: inline-block; 1383 | padding: 2rem 4rem; 1384 | margin-top: 3rem !important; 1385 | background-color: #1f1e1a; 1386 | text-align: left; 1387 | border: 1px solid #3f3e3a; 1388 | box-shadow: 0 0 42px 0 rgba(0, 0, 0, .66) 1389 | } 1390 | 1391 | .node-main-login fieldset:nth-child(3n) table table tr td, 1392 | .node-status-overview fieldset:nth-child(3n) table table tr td { 1393 | padding: 7px !important 1394 | } 1395 | 1396 | .node-main-login>.main form>div:nth-last-child(1) { 1397 | float: right 1398 | } 1399 | 1400 | .node-main-login>.main .cbi-value { 1401 | display: block 1402 | } 1403 | 1404 | .node-main-login>.main .cbi-value>* { 1405 | display: inline-block !important 1406 | } 1407 | 1408 | .node-main-login>.main .cbi-input-password, 1409 | .node-main-login>.main .cbi-input-user { 1410 | min-width: 15rem 1411 | } 1412 | 1413 | .node-main-login footer { 1414 | bottom: 0; 1415 | position: absolute; 1416 | width: 100% 1417 | } 1418 | 1419 | .node-main-login table>tbody>tr { 1420 | background-color: #2f2e2a; 1421 | border-top: 1px solid #3f3e3a; 1422 | border-bottom: 1px solid #1f1e1a 1423 | } 1424 | 1425 | .node-main-login table>tbody>tr:nth-of-type(2n) { 1426 | background-color: #3f3e3a; 1427 | border-top: 1px solid #4f4e4a; 1428 | border-bottom: 1px solid #1f1e1a 1429 | } 1430 | 1431 | .node-main-login fieldset:nth-child(3n) table table { 1432 | box-shadow: inset 0 0 15px 0 #000; 1433 | background: #1f1e1a; 1434 | border: 1px solid #000 1435 | } 1436 | 1437 | .node-main-login fieldset:nth-child(3n) table table tr { 1438 | background: 0 0; 1439 | border: none 1440 | } 1441 | 1442 | .node-status-overview table>tbody>tr { 1443 | background-color: #2f2e2a; 1444 | border-top: 1px solid #3f3e3a; 1445 | border-bottom: 1px solid #1f1e1a 1446 | } 1447 | 1448 | .node-status-overview table>tbody>tr:nth-of-type(2n) { 1449 | background-color: #3f3e3a; 1450 | border-top: 1px solid #4f4e4a; 1451 | border-bottom: 1px solid #1f1e1a 1452 | } 1453 | 1454 | .node-status-overview table>tbody>tr:last-child { 1455 | border: none 1456 | } 1457 | 1458 | .node-status-overview fieldset:nth-child(3n) table table { 1459 | box-shadow: inset 0 0 15px 0 #000; 1460 | background: #1f1e1a; 1461 | border: 1px solid #000 1462 | } 1463 | 1464 | .node-status-overview fieldset:nth-child(3n) table table tr { 1465 | background: 0 0; 1466 | border: none 1467 | } 1468 | 1469 | .node-status-iptables>.main div>.cbi-map>form { 1470 | margin: 2rem 2rem 0 0 1471 | } 1472 | 1473 | .cbi-tabmenu+.cbi-section, 1474 | .node-status-iptables fieldset, 1475 | .node-system-flashops fieldset, 1476 | .node-system-packages fieldset { 1477 | margin-top: 0 1478 | } 1479 | 1480 | .node-system-reboot>.main>.main-right h3, 1481 | .node-system-reboot>.main>.main-right p { 1482 | padding-left: 2rem; 1483 | margin-bottom: 8px 1484 | } 1485 | 1486 | .node-system-reboot>.main>.main-right p.warning { 1487 | padding: 2rem 1488 | } 1489 | 1490 | .node-system-reboot>.main>.main-right p:nth-last-child(1) { 1491 | background: url(../img/stripes.svg) #1f1e1a; 1492 | padding: 2rem 1493 | } 1494 | 1495 | .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { 1496 | margin-bottom: 1rem; 1497 | width: auto 1498 | } 1499 | 1500 | .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { 1501 | display: list-item 1502 | } 1503 | 1504 | #cbi-processes .cbi-section-descr, 1505 | #cbi-processes .cbi-section-table-descr, 1506 | #cbi-system-led .cbi-section-descr, 1507 | #cbi-system-led br, 1508 | .node-status-processes .cbi-page-actions, 1509 | .node-system-flashops br { 1510 | display: none 1511 | } 1512 | 1513 | .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { 1514 | padding-top: 1rem 1515 | } 1516 | 1517 | .node-system-packages>.main table tr td:nth-child(1) { 1518 | width: auto !important 1519 | } 1520 | 1521 | .node-system-packages>.main table tr td:nth-last-child(1) { 1522 | white-space: normal; 1523 | font-size: small 1524 | } 1525 | 1526 | .node-system-packages>.main .cbi-tabmenu>li>a, 1527 | .tabs>li>a { 1528 | padding: .5rem .8rem 1529 | } 1530 | 1531 | .node-system-packages>.main .cbi-value>pre { 1532 | overflow: auto 1533 | } 1534 | 1535 | .node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { 1536 | min-width: 4rem 1537 | } 1538 | 1539 | .node-status-iptables .cbi-tabmenu, 1540 | .node-system-flashops .cbi-tabmenu, 1541 | .node-system-packages .cbi-tabmenu { 1542 | border: none; 1543 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12) 1544 | } 1545 | 1546 | .node-system-flashops form.inline+form.inline { 1547 | margin-left: 0 1548 | } 1549 | 1550 | .node-system-flashops .cbi-section-node { 1551 | padding-top: 10px; 1552 | padding-bottom: 10px 1553 | } 1554 | 1555 | .node-system-flashops .cbi-input-apply { 1556 | height: 25px; 1557 | margin-top: -5px; 1558 | font-size: .8rem 1559 | } 1560 | 1561 | #cbi-firewall-redirect table *, 1562 | #cbi-firewall-zone table *, 1563 | #cbi-network-switch_vlan table * { 1564 | font-size: small 1565 | } 1566 | 1567 | #cbi-firewall-redirect table input[type=text], 1568 | #cbi-firewall-zone table input[type=text], 1569 | #cbi-network-switch_vlan table input[type=text] { 1570 | width: 5rem 1571 | } 1572 | 1573 | #cbi-firewall-redirect table select, 1574 | #cbi-firewall-zone table select, 1575 | #cbi-network-switch_vlan table select { 1576 | min-width: 3.5rem 1577 | } 1578 | 1579 | #cbi-system-led .cbi-section-create, 1580 | #cbi-system-led .cbi-section-remove { 1581 | background: #1f1e1a; 1582 | border-bottom: 1px solid #0f0e0a; 1583 | border-top: 1px solid #0f0e0a 1584 | } 1585 | 1586 | #cbi-processes .cbi-section-table-titles { 1587 | background-color: #1f1e1a; 1588 | border-top: none 1589 | } 1590 | 1591 | .node-status-realtime table { 1592 | border: 1px solid #1f1e1a 1593 | } 1594 | 1595 | .node-status-realtime table>tbody>tr { 1596 | background-color: #2f2e2a; 1597 | border-top: 1px solid #3f3e3a; 1598 | border-bottom: 1px solid #1f1e1a 1599 | } 1600 | 1601 | .node-status-realtime table>tbody>tr:nth-of-type(2n) { 1602 | background-color: #3f3e3a; 1603 | border-top: 1px solid #4f4e4a; 1604 | border-bottom: 1px solid #1f1e1a 1605 | } 1606 | 1607 | .node-status-realtime fieldset table { 1608 | border: none 1609 | } 1610 | 1611 | .node-status-realtime small { 1612 | display: inline-block; 1613 | width: 100%; 1614 | line-height: 25px; 1615 | background: #1f1e1a; 1616 | border: 1px solid #1f1e1a; 1617 | padding-right: 5px 1618 | } 1619 | 1620 | .node-status-realtime #cbi-table-table small { 1621 | border: none 1622 | } 1623 | 1624 | .node-status-realtime br, 1625 | .node-system-admin .cbi-section-table-descr, 1626 | .node-system-admin .cbi-section-table-titles, 1627 | .node-system-admin br, 1628 | .node-system-admin fieldset:nth-of-type(1) .cbi-section-descr, 1629 | .node-system-startup .cbi-map br, 1630 | .node-system-startup .cbi-section-descr, 1631 | .node-system-startup .cbi-section-table-descr, 1632 | .node-system-startup form:nth-of-type(1) .cbi-page-actions, 1633 | .node-system-system .cbi-section-descr, 1634 | .node-system-system fieldset br { 1635 | display: none 1636 | } 1637 | 1638 | .node-system-startup .cbi-map-descr br { 1639 | display: block 1640 | } 1641 | 1642 | .node-network-bmx7 .cbi-map-descr, 1643 | .node-network-bmx7 center img, 1644 | .node-network-dhcp #cbi-dhcp-dnsmasq br, 1645 | .node-network-dhcp .cbi-section-descr, 1646 | .node-network-dhcp .cbi-section-table-descr, 1647 | .node-network-network .cbi-section-descr, 1648 | .node-network-network fieldset br, 1649 | .node-system-fstab .cbi-section-descr:nth-of-type(1), 1650 | .node-system-fstab .cbi-section-table-descr { 1651 | display: none 1652 | } 1653 | 1654 | .node-system-flashops fieldset { 1655 | margin-top: 10px; 1656 | padding: 10px 1657 | } 1658 | 1659 | .node-network-bmx7 div#extra-info { 1660 | margin-bottom: 15px 1661 | } 1662 | 1663 | .node-network-network fieldset .cbi-section-node table { 1664 | box-shadow: inset 0 0 15px 0 #000; 1665 | background: #1f1e1a; 1666 | border: 1px solid #000 1667 | } 1668 | 1669 | .node-network-network fieldset .cbi-section-node table tr { 1670 | background: 0 0 1671 | } 1672 | 1673 | .node-network-network fieldset .cbi-section-node table td:nth-of-type(1) { 1674 | padding: 5px !important 1675 | } 1676 | 1677 | .node-network-network fieldset .cbi-section-node table td, 1678 | .node-network-wireless fieldset .cbi-section-node table td { 1679 | padding: 10px !important 1680 | } 1681 | 1682 | .node-network-network fieldset .cbi-section-table br { 1683 | display: initial 1684 | } 1685 | 1686 | .node-network-wireless fieldset br { 1687 | display: none 1688 | } 1689 | 1690 | .node-network-wireless fieldset .cbi-section-node table br, 1691 | .node-network-wireless fieldset .cbi-section-table:nth-of-type(1) br { 1692 | display: initial 1693 | } 1694 | 1695 | .node-network-wireless fieldset .cbi-section-node table { 1696 | box-shadow: inset 0 0 15px 0 #000; 1697 | background: #1f1e1a; 1698 | border: 1px solid #000 1699 | } 1700 | 1701 | .node-network-wireless fieldset .cbi-section-table tr:nth-of-type(1) { 1702 | background: url(../img/noise.png) #292823 1703 | } 1704 | 1705 | .node-network-hosts .cbi-section-descr, 1706 | .node-network-hosts .cbi-section-table-descr, 1707 | .node-network-routes .cbi-section-descr { 1708 | display: none 1709 | } 1710 | 1711 | .node-network-routes .cbi-input-select { 1712 | width: 100px; 1713 | min-width: 100px 1714 | } 1715 | 1716 | .node-network-routes input { 1717 | width: 130px; 1718 | max-width: 150px 1719 | } 1720 | 1721 | .node-network-routes td:nth-of-type(5) input, 1722 | .node-network-routes td:nth-of-type(6) input { 1723 | width: 50px !important; 1724 | max-width: 50px !important 1725 | } 1726 | 1727 | body.lang_pl.node-main-login .cbi-value-title { 1728 | width: 12rem 1729 | } 1730 | 1731 | .breadcrumb li { 1732 | display: inline-block 1733 | } 1734 | 1735 | .info { 1736 | background: 0 0 !important 1737 | } 1738 | 1739 | pre, 1740 | textarea { 1741 | border: 1px solid #0f0e0a; 1742 | padding: 15px; 1743 | color: #d8d3c5; 1744 | background: rgba(15, 14, 10, 1); 1745 | box-shadow: inset 0 0 36px 0 rgba(0, 0, 0, .8); 1746 | margin-top: 10px 1747 | } 1748 | 1749 | #content_syslog textarea { 1750 | margin-top: 0 1751 | } 1752 | 1753 | @media screen and (max-width:1600px) { 1754 | .main-left { 1755 | width: calc(0% + 13rem) 1756 | } 1757 | 1758 | .main-right { 1759 | width: calc(100% - 13rem) 1760 | } 1761 | 1762 | .cbi-button { 1763 | padding: .3rem .6rem 1764 | } 1765 | 1766 | .cbi-value-title { 1767 | width: 15rem; 1768 | padding-right: .6rem 1769 | } 1770 | 1771 | .cbi-input-textarea { 1772 | font-size: small 1773 | } 1774 | 1775 | .node-status-iptables>.main fieldset li>a { 1776 | padding: .3rem .6rem 1777 | } 1778 | } 1779 | 1780 | @media screen and (max-width:1280px) { 1781 | .main-left { 1782 | width: calc(0% + 13rem); 1783 | top: 3.5rem; 1784 | height: calc(100% - 3.5rem) 1785 | } 1786 | 1787 | .main-right { 1788 | width: calc(100% - 13rem) 1789 | } 1790 | 1791 | .cbi-tabmenu>li>a, 1792 | .tabs>li>a { 1793 | padding: .2rem .5rem 1794 | } 1795 | 1796 | .panel-title { 1797 | font-size: 1.1rem 1798 | } 1799 | 1800 | table { 1801 | font-size: .7rem !important; 1802 | width: 100% !important 1803 | } 1804 | } 1805 | 1806 | @media screen and (max-width:992px) { 1807 | .main-left { 1808 | width: 0; 1809 | position: fixed; 1810 | z-index: 100 1811 | } 1812 | 1813 | .main-right { 1814 | width: 100% 1815 | } 1816 | 1817 | .showSide { 1818 | padding: .1rem; 1819 | margin-right: .5rem; 1820 | display: inline-block; 1821 | line-height: 51px; 1822 | vertical-align: top 1823 | } 1824 | 1825 | .showSide:before { 1826 | font-family: icomoon; 1827 | content: "\e20e"; 1828 | font-size: 1.7rem 1829 | } 1830 | 1831 | .node-main-login .showSide { 1832 | display: none !important 1833 | } 1834 | 1835 | .cbi-value-title { 1836 | width: 9rem; 1837 | padding-right: 1rem 1838 | } 1839 | 1840 | .node-network-diagnostics>.main .cbi-map fieldset>div, 1841 | .node-network-diagnostics>.main .cbi-map fieldset>div * { 1842 | width: 100% !important 1843 | } 1844 | 1845 | .node-network-diagnostics>.main .cbi-map fieldset>div input[type=text] { 1846 | margin: 3rem 0 0 !important 1847 | } 1848 | 1849 | .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type=text] { 1850 | margin: 0 !important 1851 | } 1852 | 1853 | .node-network-diagnostics>.main .cbi-map fieldset>div input[type=button], 1854 | .node-network-diagnostics>.main .cbi-map fieldset>div select { 1855 | margin: 1rem 0 0 1856 | } 1857 | 1858 | #diag-rc-output>pre { 1859 | font-size: 1rem 1860 | } 1861 | 1862 | .node-main-login>.main .cbi-value-title { 1863 | text-align: left 1864 | } 1865 | } 1866 | 1867 | @media screen and (max-width:480px) { 1868 | body { 1869 | font-size: 1rem 1870 | } 1871 | 1872 | .tabs { 1873 | margin: 0 -1rem 1874 | } 1875 | 1876 | #maincontent>.container { 1877 | margin: 0 1rem 1.5rem 1878 | } 1879 | 1880 | .cbi-value-title { 1881 | width: 100%; 1882 | min-width: 0 !important; 1883 | display: block; 1884 | margin-top: 1rem; 1885 | margin-bottom: .5rem; 1886 | text-align: left 1887 | } 1888 | 1889 | .cbi-value-description, 1890 | .cbi-value-field { 1891 | width: 100% 1892 | } 1893 | 1894 | .cbi-value>.cbi-value-field { 1895 | display: inline-block 1896 | } 1897 | 1898 | .cbi-page-actions>div>input, 1899 | .mobile-hide { 1900 | display: none 1901 | } 1902 | 1903 | .cbi-tabmenu>li, 1904 | .tabs>li { 1905 | padding: .6rem 0 1906 | } 1907 | 1908 | .cbi-tabmenu>li>a, 1909 | .tabs>li>a { 1910 | padding: .2rem .3rem; 1911 | font-size: .9rem 1912 | } 1913 | 1914 | .node-main-login>.main .container { 1915 | padding: .5rem 1rem 2rem 1916 | } 1917 | 1918 | .node-main-login>.main .cbi-value { 1919 | padding: 0 1920 | } 1921 | 1922 | .node-main-login>.main form>div:nth-last-child(1) { 1923 | margin-top: 2rem 1924 | } 1925 | 1926 | .node-main-login>.main .cbi-value-title { 1927 | width: 100% !important; 1928 | font-size: 1.2rem 1929 | } 1930 | 1931 | .node-main-login>.main fieldset { 1932 | margin: 0; 1933 | padding: .5rem 1934 | } 1935 | 1936 | h2 { 1937 | font-size: 2rem 1938 | } 1939 | 1940 | .tabs>li>a, 1941 | input, 1942 | select { 1943 | font-size: .9rem 1944 | } 1945 | 1946 | .panel-title { 1947 | font-size: 1.4rem 1948 | } 1949 | 1950 | .node-system-packages>.main .cbi-value.cbi-value-last>div { 1951 | width: 100% !important 1952 | } 1953 | 1954 | .node-system-packages>.main .cbi-value .cbi-value-field input { 1955 | width: 100% 1956 | } 1957 | 1958 | .node-status-iptables>.main div>.cbi-map>form { 1959 | position: static !important; 1960 | margin: 0 0 2rem; 1961 | padding: 2rem; 1962 | border: 0; 1963 | font-weight: 400; 1964 | font-style: normal; 1965 | line-height: 1; 1966 | font-family: inherit; 1967 | min-width: inherit; 1968 | overflow-x: auto; 1969 | overflow-y: hidden; 1970 | border-radius: 0; 1971 | background-color: #FFF; 1972 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 1973 | -webkit-overflow-scrolling: touch 1974 | } 1975 | 1976 | .node-status-iptables>.main div>.cbi-map>form input[type=submit] { 1977 | width: 100% !important; 1978 | margin: 0 1979 | } 1980 | 1981 | .node-status-iptables>.main div>.cbi-map>form input[type=submit]+input[type=submit] { 1982 | margin-top: 1rem 1983 | } 1984 | } 1985 | 1986 | @media screen and (min-width:992px) { 1987 | 1988 | .cbi-value input[type=password], 1989 | .cbi-value input[type=text], 1990 | .cbi-value-field .cbi-input-select { 1991 | min-width: 20rem 1992 | } 1993 | } 1994 | 1995 | @media screen and (min-width:1280px) { 1996 | 1997 | .cbi-value input[type=password], 1998 | .cbi-value input[type=text], 1999 | .cbi-value-field .cbi-input-select { 2000 | min-width: 22rem 2001 | } 2002 | } 2003 | 2004 | @media screen and (min-width:1600px) { 2005 | 2006 | .cbi-value input[type=password], 2007 | .cbi-value input[type=text], 2008 | .cbi-value-field .cbi-input-select { 2009 | min-width: 25rem 2010 | } 2011 | } -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/fonts/DIN.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/fonts/DIN.woff -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/fonts/icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/fonts/icon.woff -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/favicon.ico -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/logo.png -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/noise.png -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/img/stripes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/htdocs/luci-static/darkmatter/js/script.js: -------------------------------------------------------------------------------- 1 | !function(a){function i(){var i=!1;return a("body").hasClass("logged-in")?(a(".main > .main-left > .nav > .slide > .menu").each(function(){var n=a(this);n.next().find("a").each(function(){var s=a(this),o=s.attr("href");return-1!=o.indexOf(e)?(n.click(),n.next(".slide-menu").stop(!0,!0),t=s.parent(),t.addClass("active"),i=!0,!0):void 0})}),i):(luciLocation=["Main","Login"],!0)}a(".main > .loading").fadeOut();var t=void 0,n=void 0,e="";!function(a){"admin"==a[0]?luciLocation=[a[1],a[2]]:luciLocation=a;for(var i in luciLocation)e+=luciLocation[i],i!=luciLocation.length-1&&(e+="/")}(luciLocation),a(".main > .main-left > .nav > .slide > .menu").click(function(){var i=a(this).next(".slide-menu"),t=a(this);i.is(":visible")?i.stop(!0).slideUp("fast",function(){t.removeClass("active"),i.removeClass("active")}):(t.addClass("active"),i.addClass("active"),i.stop(!0).slideDown("fast"))}),a(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function(){return void 0!=t&&t.removeClass("active"),a(this).parent().addClass("active"),a(".main > .loading").fadeIn("fast"),!0}),a(".main > .main-left > .nav > .slide > .slide-menu > li").click(function(){void 0!=t&&t.removeClass("active"),a(this).addClass("active"),a(".main > .loading").fadeIn("fast"),window.location=a(a(this).find("a")[0]).attr("href")}),i()&&(n="node-"+luciLocation[0]+"-"+luciLocation[1],n=n.replace(/[ \t\n\r\/]+/g,"_").toLowerCase(),a("body").addClass(n)),a(".cbi-button-up").val(""),a(".cbi-button-down").val(""),a("#maincontent > .container").find("a").each(function(){var i=a(this),t=i.attr("onclick");(void 0==t||""==t)&&i.click(function(){var t=i.attr("href");return-1==t.indexOf("#")?(a(".main > .loading").fadeIn("fast"),!0):void 0})});var s=!1;if(a(".showSide").click(function(){s?(a(".darkMask").stop(!0).fadeOut("fast"),a(".main-left").stop(!0).animate({width:"0"},"fast"),a(".main-right").css("overflow-y","auto"),s=!1):(a(".darkMask").stop(!0).fadeIn("fast"),a(".main-left").stop(!0).animate({width:"15rem"},"fast"),a(".main-right").css("overflow-y","hidden"),s=!0)}),a(".darkMask").click(function(){s&&(s=!1,a(".darkMask").stop(!0).fadeOut("fast"),a(".main-left").stop(!0).animate({width:"0"},"fast"),a(".main-right").css("overflow-y","auto"))}),a(window).resize(function(){a(window).width()>921&&(a(".main-left").css("width",""),a(".darkMask").stop(!0),a(".darkMask").css("display","none"),s=!1)}),a("legend").each(function(){var i=a(this);i.after(""+i.text()+"")}),a(".main-right").focus(),a(".main-right").blur(),a("input").attr("size","0"),void 0!=n)switch(console.log("mainNodeName",n),n){case"node-status-system_log":case"node-status-kernel_log":a("#syslog").focus(function(){a("#syslog").blur(),a(".main-right").focus(),a(".main-right").blur()});break;case"node-status-firewall":var o=a(".node-status-firewall > .main fieldset li > a");o.addClass("cbi-button cbi-button-reset a-to-btn");break;case"node-system-reboot":var o=a(".node-system-reboot > .main > .main-right p > a");o.addClass("cbi-button cbi-input-reset a-to-btn")}}(jQuery); 2 | -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/luasrc/view/themes/darkmatter/footer.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | 3 | luci-theme-darkmatter 4 | Copyright 2017 chrono 5 | 6 | Darkmatter is an alternative HTML5 theme for LuCI that has evolved from 7 | luci-theme-bootstrap & luci-theme-material, in an attempt to bring a more 8 | concise, clean and visually pleasing UX to LEDE/OpenWRT. 9 | 10 | Have a bug? Please create an issue here on GitHub! 11 | https://github.com/apollo-ng/luci-theme-darkmatter/issues 12 | 13 | luci-theme-material 14 | Copyright 2015 Lutty Yang 15 | luci-theme-bootstrap: 16 | Copyright 2012 David Menting 17 | Copyright 2008 Steven Barth 18 | Copyright 2008 Jo-Philipp Wich 19 | 20 | This program is free software; you can redistribute it and/or 21 | modify it under the terms of the GNU General Public License 22 | as published by the Free Software Foundation; either version 2 23 | of the License, or (at your option) any later version. 24 | -%> 25 | 26 | <% 27 | local disp = require "luci.dispatcher" 28 | local request = disp.context.path 29 | local category = request[1] 30 | local tree = disp.node() 31 | %> 32 | 33 |
34 |
35 | 36 | 37 | 38 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/luasrc/view/themes/darkmatter/header.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | 3 | luci-theme-darkmatter 4 | Copyright 2017 chrono 5 | 6 | Darkmatter is an alternative HTML5 theme for LuCI that has evolved from 7 | luci-theme-bootstrap & luci-theme-material, in an attempt to bring a more 8 | concise, clean and visually pleasing UX to LEDE/OpenWRT. 9 | 10 | Have a bug? Please create an issue here on GitHub! 11 | https://github.com/apollo-ng/luci-theme-darkmatter/issues 12 | 13 | luci-theme-material 14 | Copyright 2015 Lutty Yang 15 | luci-theme-bootstrap: 16 | Copyright 2008 Steven Barth 17 | Copyright 2008 Jo-Philipp Wich 18 | Copyright 2012 David Menting 19 | 20 | This program is free software; you can redistribute it and/or 21 | modify it under the terms of the GNU General Public License 22 | as published by the Free Software Foundation; either version 2 23 | of the License, or (at your option) any later version. 24 | 25 | -%> 26 | 27 | <% 28 | local ver = require "luci.version" 29 | local sys = require "luci.sys" 30 | local util = require "luci.util" 31 | local http = require "luci.http" 32 | local disp = require "luci.dispatcher" 33 | 34 | local boardinfo = util.ubus("system", "board") 35 | 36 | local request = disp.context.path 37 | local request2 = disp.context.request 38 | 39 | local category = request[1] 40 | local cattree = category and disp.node(category) 41 | 42 | local leaf = request2[#request2] 43 | 44 | local tree = disp.node() 45 | local node = disp.context.dispatched 46 | 47 | local categories = disp.node_childs(tree) 48 | 49 | local c = tree 50 | local i, r 51 | 52 | -- tag all nodes leading to this page 53 | for i, r in ipairs(request) do 54 | if c.nodes and c.nodes[r] then 55 | c = c.nodes[r] 56 | c._menu_selected = true 57 | end 58 | end 59 | 60 | -- send as HTML5 61 | http.prepare_content("text/html") 62 | controller = controller:gsub("%/$", "") 63 | 64 | local function nodeurl(prefix, name, query) 65 | local url = controller .. prefix .. name .. "/" 66 | if query then 67 | url = url .. http.build_querystring(query) 68 | end 69 | return pcdata(url) 70 | end 71 | 72 | local function subtree(prefix, node, level) 73 | if not level then 74 | level = 1 75 | end 76 | 77 | local childs = disp.node_childs(node) 78 | if #childs > 0 then 79 | 80 | if level > 2 then 81 | %> 82 |
    83 | <% 84 | end 85 | 86 | local selected_node 87 | local selected_name 88 | local i, v 89 | 90 | for i, v in ipairs(childs) do 91 | local nnode = node.nodes[v] 92 | if nnode._menu_selected then 93 | selected_node = nnode 94 | selected_name = v 95 | end 96 | if level > 2 then 97 | %> 98 |
  • 99 | <%=striptags(translate(nnode.title))%> 100 |
    • 101 | <% end 102 | end 103 | 104 | if level > 2 then 105 | %> 106 |
107 | <% end 108 | 109 | if selected_node then 110 | subtree(prefix .. selected_name .. "/", selected_node, level + 1) 111 | end 112 | end 113 | end 114 | -%> 115 | 116 | 117 | 118 | 119 | <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | <% if node and node.css then %> 135 | 136 | <% end -%> 137 | <% if css then %> 138 | 141 | <% end -%> 142 | 143 | 144 | 145 | 146 | 147 | 148 |
149 |
150 | 151 | <%=boardinfo.hostname or "?"%> 152 |
153 | <% if #categories > 1 then %> 154 | 159 | <% end %> 160 | <% 161 | -- calculate the number of unsaved changes 162 | if tree.nodes[category] and tree.nodes[category].ucidata then 163 | local ucichanges = 0 164 | for i, j in pairs(require("luci.model.uci").cursor():changes()) do 165 | for k, l in pairs(j) do 166 | for m, n in pairs(l) do 167 | ucichanges = ucichanges + 1; 168 | end 169 | end 170 | end 171 | %> 172 | <% if ucichanges > 0 then %> 173 | "><%:Unsaved Changes%>: <%=ucichanges%> 174 | <% end %> 175 | 179 | <% end %> 180 |
181 |
182 |
183 | 184 |
185 |
Loading...
186 |
187 |
    188 | <%- 189 | local function submenu(prefix, node) 190 | local childs = disp.node_childs(node) 191 | if #childs > 0 then 192 | %> 193 |
      194 | <%- 195 | for i, r in ipairs(childs) do 196 | local nnode = node.nodes[r] 197 | local href = controller .. prefix .. r .. 198 | (nnode.query and http.build_querystring(nnode.query) or "") 199 | %> 200 |
    • <%=pcdata(striptags(translate(nnode.title)))%>
      • 201 | <%- 202 | end 203 | %> 204 |
    205 | <%- 206 | end 207 | end 208 | 209 | childs = disp.node_childs(cattree) 210 | 211 | if #childs > 0 then 212 | for i, r in ipairs(childs) do 213 | local nnode = cattree.nodes[r] 214 | local href = controller .. "/" .. category .. "/" .. r .. 215 | (nnode.query and http.build_querystring(nnode.query) or "") 216 | local grandchildren = disp.node_childs(nnode) 217 | 218 | if #grandchildren > 0 then 219 | %> 220 |
  • 221 | <%=pcdata(striptags(translate(nnode.title)))%> 222 | <%- submenu("/" .. category .. "/" .. r .. "/", nnode) %> 223 |
    • 224 | <% else %> 225 |
  • 226 | <%=pcdata(striptags(translate(nnode.title)))%> 227 |
    • 228 | <% 229 | end 230 | end 231 | end 232 | %> 233 |
234 |
235 |
236 |
237 |
238 |
239 | <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> 240 |
241 |

<%:No password set!%>

242 | <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
243 | "><%:Go to password configuration...%> 244 |
245 | <%- end -%> 246 | <% if category then subtree("/" .. category .. "/", cattree) end %> 247 | -------------------------------------------------------------------------------- /luci/themes/luci-theme-darkmatter/root/etc/uci-defaults/30_luci-theme-darkmatter: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | uci batch <<-EOF 3 | set luci.themes.Darkmatter=/luci-static/darkmatter 4 | set luci.main.mediaurlbase=/luci-static/darkmatter 5 | commit luci 6 | EOF 7 | exit 0 8 | -------------------------------------------------------------------------------- /screenshots/desktop-interfaces.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/desktop-interfaces.jpg -------------------------------------------------------------------------------- /screenshots/desktop-load.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/desktop-load.jpg -------------------------------------------------------------------------------- /screenshots/desktop-status.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/desktop-status.jpg -------------------------------------------------------------------------------- /screenshots/desktop-wifi-edit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/desktop-wifi-edit.jpg -------------------------------------------------------------------------------- /screenshots/desktop-wifi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/desktop-wifi.jpg -------------------------------------------------------------------------------- /screenshots/phone-load.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/phone-load.jpg -------------------------------------------------------------------------------- /screenshots/phone-status.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/phone-status.jpg -------------------------------------------------------------------------------- /screenshots/tablet-startup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollo-ng/luci-theme-darkmatter/017fe1f448465c7b141036bb62ef7a3517c312b7/screenshots/tablet-startup.jpg -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * luci-theme-darkmatter 3 | * Copyright 2017 chrono 4 | * 5 | * Darkmatter is an alternative HTML5 theme for LuCI that has evolved from 6 | * luci-theme-bootstrap & luci-theme-material, in an attempt to bring a more 7 | * concise, clean and visually pleasing UX to LEDE/OpenWRT. 8 | * 9 | * Have a bug? Please create an issue here on GitHub! 10 | * https://github.com/apollo-ng/luci-theme-darkmatter/issues 11 | * 12 | * luci-theme-material 13 | * Copyright 2015 Lutty Yang 14 | * luci-theme-bootstrap: 15 | * Copyright 2008 Steven Barth 16 | * Copyright 2008 Jo-Philipp Wich 17 | * Copyright 2012 David Menting 18 | * 19 | * This program is free software; you can redistribute it and/or 20 | * modify it under the terms of the GNU General Public License 21 | * as published by the Free Software Foundation; either version 2 22 | * of the License, or (at your option) any later version. 23 | */ 24 | 25 | (function ($) { 26 | $(".main > .loading").fadeOut(); 27 | 28 | /** 29 | * trim text, Remove spaces, wrap 30 | * @param text 31 | * @returns {string} 32 | */ 33 | function trimText(text) { 34 | return text.replace(/[ \t\n\r]+/g, " "); 35 | } 36 | 37 | 38 | var lastNode = undefined; 39 | var mainNodeName = undefined; 40 | 41 | var nodeUrl = ""; 42 | (function(node){ 43 | if (node[0] == "admin"){ 44 | luciLocation = [node[1], node[2]]; 45 | }else{ 46 | luciLocation = node; 47 | } 48 | 49 | for(var i in luciLocation){ 50 | nodeUrl += luciLocation[i]; 51 | if (i != luciLocation.length - 1){ 52 | nodeUrl += "/"; 53 | } 54 | } 55 | })(luciLocation); 56 | 57 | /** 58 | * get the current node by Burl (primary) 59 | * @returns {boolean} success? 60 | */ 61 | function getCurrentNodeByUrl() { 62 | var ret = false; 63 | if (!$('body').hasClass('logged-in')) { 64 | luciLocation = ["Main", "Login"]; 65 | return true; 66 | } 67 | 68 | $(".main > .main-left > .nav > .slide > .menu").each(function () { 69 | var ulNode = $(this); 70 | ulNode.next().find("a").each(function () { 71 | var that = $(this); 72 | var href = that.attr("href"); 73 | 74 | if (href.indexOf(nodeUrl) != -1) { 75 | ulNode.click(); 76 | ulNode.next(".slide-menu").stop(true, true); 77 | lastNode = that.parent(); 78 | lastNode.addClass("active"); 79 | ret = true; 80 | return true; 81 | } 82 | }); 83 | }); 84 | return ret; 85 | } 86 | 87 | /** 88 | * menu click 89 | */ 90 | $(".main > .main-left > .nav > .slide > .menu").click(function () { 91 | var ul = $(this).next(".slide-menu"); 92 | var menu = $(this); 93 | if (!ul.is(":visible")) { 94 | menu.addClass("active"); 95 | ul.addClass("active"); 96 | ul.stop(true).slideDown("fast"); 97 | } else { 98 | ul.stop(true).slideUp("fast", function () { 99 | menu.removeClass("active"); 100 | ul.removeClass("active"); 101 | }); 102 | } 103 | }); 104 | 105 | /** 106 | * hook menu click and add the hash 107 | */ 108 | $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { 109 | if (lastNode != undefined) lastNode.removeClass("active"); 110 | $(this).parent().addClass("active"); 111 | $(".main > .loading").fadeIn("fast"); 112 | return true; 113 | }); 114 | 115 | /** 116 | * fix menu click 117 | */ 118 | $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { 119 | if (lastNode != undefined) lastNode.removeClass("active"); 120 | $(this).addClass("active"); 121 | $(".main > .loading").fadeIn("fast"); 122 | window.location = $($(this).find("a")[0]).attr("href"); 123 | return; 124 | }); 125 | 126 | /** 127 | * get current node and open it 128 | */ 129 | if (getCurrentNodeByUrl()) { 130 | mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; 131 | mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); 132 | $("body").addClass(mainNodeName); 133 | } 134 | $(".cbi-button-up").val(""); 135 | $(".cbi-button-down").val(""); 136 | 137 | 138 | /** 139 | * hook other "A Label" and add hash to it. 140 | */ 141 | $("#maincontent > .container").find("a").each(function () { 142 | var that = $(this); 143 | var onclick = that.attr("onclick"); 144 | if (onclick == undefined || onclick == "") { 145 | that.click(function () { 146 | var href = that.attr("href"); 147 | if (href.indexOf("#") == -1) { 148 | $(".main > .loading").fadeIn("fast"); 149 | return true; 150 | } 151 | }); 152 | } 153 | }); 154 | 155 | /** 156 | * Sidebar expand 157 | */ 158 | var showSide = false; 159 | $(".showSide").click(function () { 160 | if (showSide) { 161 | $(".darkMask").stop(true).fadeOut("fast"); 162 | $(".main-left").stop(true).animate({ 163 | width: "0" 164 | }, "fast"); 165 | $(".main-right").css("overflow-y", "auto"); 166 | showSide = false; 167 | } else { 168 | $(".darkMask").stop(true).fadeIn("fast"); 169 | $(".main-left").stop(true).animate({ 170 | width: "15rem" 171 | }, "fast"); 172 | $(".main-right").css("overflow-y", "hidden"); 173 | showSide = true; 174 | } 175 | }); 176 | 177 | 178 | $(".darkMask").click(function () { 179 | if (showSide) { 180 | showSide = false; 181 | $(".darkMask").stop(true).fadeOut("fast"); 182 | $(".main-left").stop(true).animate({ 183 | width: "0" 184 | }, "fast"); 185 | $(".main-right").css("overflow-y", "auto"); 186 | } 187 | }); 188 | 189 | $(window).resize(function () { 190 | if ($(window).width() > 921) { 191 | $(".main-left").css("width", ""); 192 | $(".darkMask").stop(true); 193 | $(".darkMask").css("display", "none"); 194 | showSide = false; 195 | } 196 | }); 197 | 198 | /** 199 | * fix legend position 200 | */ 201 | $("legend").each(function () { 202 | var that = $(this); 203 | that.after("" + that.text() + ""); 204 | }); 205 | 206 | 207 | $(".main-right").focus(); 208 | $(".main-right").blur(); 209 | $("input").attr("size", "0"); 210 | 211 | if (mainNodeName != undefined) { 212 | console.log('mainNodeName', mainNodeName); 213 | switch (mainNodeName) { 214 | case "node-status-system_log": 215 | case "node-status-kernel_log": 216 | $("#syslog").focus(function () { 217 | $("#syslog").blur(); 218 | $(".main-right").focus(); 219 | $(".main-right").blur(); 220 | }); 221 | break; 222 | case "node-status-firewall": 223 | var button = $(".node-status-firewall > .main fieldset li > a"); 224 | button.addClass("cbi-button cbi-button-reset a-to-btn"); 225 | break; 226 | case "node-system-reboot": 227 | var button = $(".node-system-reboot > .main > .main-right p > a"); 228 | button.addClass("cbi-button cbi-input-reset a-to-btn"); 229 | break; 230 | } 231 | } 232 | 233 | })(jQuery); 234 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * luci-theme-darkmatter 3 | * Copyright 2017 chrono 4 | * 5 | * Darkmatter is an alternative HTML5 theme for LuCI that has evolved from 6 | * luci-theme-bootstrap & luci-theme-material, in an attempt to bring a more 7 | * concise, clean and visually pleasing UX to LEDE/OpenWRT. 8 | * 9 | * Have a bug? Please create an issue here on GitHub! 10 | * https://github.com/apollo-ng/luci-theme-darkmatter/issues 11 | * 12 | * luci-theme-material 13 | * Copyright 2015 Lutty Yang 14 | * luci-theme-bootstrap: 15 | * Copyright 2008 Steven Barth 16 | * Copyright 2008 Jo-Philipp Wich 17 | * Copyright 2012 David Menting 18 | * 19 | * This program is free software; you can redistribute it and/or 20 | * modify it under the terms of the GNU General Public License 21 | * as published by the Free Software Foundation; either version 2 22 | * of the License, or (at your option) any later version. 23 | */ 24 | 25 | @font-face { 26 | font-family: "icomoon"; 27 | src: url("../fonts/icon.woff") format("woff"); 28 | font-weight: normal; 29 | font-style: normal; 30 | } 31 | 32 | @font-face { 33 | font-family: "DIN"; 34 | src: url("../fonts/DIN.woff") format("woff"); 35 | font-weight: 400; 36 | font-style: normal; 37 | font-stretch: normal; 38 | unicode-range: U+0020-F000; 39 | } 40 | 41 | .cbi-button-up, 42 | .cbi-button-down, 43 | .cbi-value-helpicon, 44 | .showSide, 45 | .main > .loading > span { 46 | speak: none; 47 | font-style: normal !important; 48 | font-weight: normal !important; 49 | font-variant: normal !important; 50 | text-transform: none !important; 51 | line-height: 1; 52 | -webkit-font-smoothing: antialiased; 53 | -moz-osx-font-smoothing: grayscale; 54 | } 55 | 56 | * { 57 | margin: 0; 58 | padding: 0; 59 | box-sizing: border-box; 60 | } 61 | 62 | .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 63 | font-family: inherit; 64 | font-weight: 400; 65 | line-height: 1; 66 | color: inherit; 67 | } 68 | 69 | html { 70 | -webkit-text-size-adjust: 100%; 71 | -ms-text-size-adjust: 100%; 72 | } 73 | 74 | html, body { 75 | margin: 0; 76 | padding: 0; 77 | height: 100%; 78 | font-family: "DIN", Helvetica, Arial, sans-serif; 79 | } 80 | 81 | a, 82 | a:link, 83 | a:active, 84 | a:visited, 85 | a:hover { 86 | color: rgba(117, 137, 12, 0.75); 87 | text-decoration: none; 88 | } 89 | 90 | select, 91 | input { 92 | background-color: #1f1e1a; 93 | color: #fff; 94 | text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0 3px #000; 95 | border: 1px solid #4f4e4a; 96 | outline: 0; 97 | padding: 0; 98 | box-shadow: inset 0 0 12px #000; 99 | border-radius: 0; 100 | background-image: none; 101 | height: 1.9rem; 102 | font-size: 1rem; 103 | } 104 | 105 | input { 106 | padding-left: 4px; 107 | } 108 | 109 | input[type='checkbox'], 110 | input[type='radio'] { 111 | background: transparent; 112 | box-shadow: none; 113 | } 114 | 115 | input[type='file'] { 116 | padding: 0 !important; 117 | height: inherit; 118 | } 119 | 120 | select:not([multiple="multiple"]):focus, 121 | input:focus { 122 | border-color: rgba(117, 136, 12, 0.94); 123 | } 124 | 125 | select[multiple="multiple"] { 126 | height: auto; 127 | } 128 | 129 | code { 130 | color: #0f0e0a; 131 | text-shadow: none; 132 | } 133 | 134 | abbr { 135 | color: rgba(117, 137, 12, 0.85); 136 | text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1); 137 | text-decoration: none; 138 | cursor: help; 139 | } 140 | 141 | hr { 142 | margin: 1rem 0; 143 | border-color: #1f1e1a; 144 | opacity: 0.1; 145 | } 146 | 147 | header, .main { 148 | width: 100%; 149 | position: absolute; 150 | } 151 | 152 | header { 153 | height: 56px; 154 | background: #1f1e1a url("../img/stripes.svg") repeat; 155 | color: #d8d3c5; 156 | box-shadow: 0 2px 5px rgba(0, 0, 0, .26), inset 0 0 42px 0 #000;; 157 | transition: box-shadow .2s; 158 | float: left; 159 | position: fixed; 160 | z-index: 101; 161 | } 162 | 163 | header > .container { 164 | padding: 0 1rem 0 1rem; 165 | height: 56px; 166 | line-height: 56px; 167 | } 168 | 169 | header > .container > .brand { 170 | font-size: 1.5rem; 171 | color: #d8d3c5; 172 | text-decoration: none; 173 | cursor: default; 174 | vertical-align: text-bottom; 175 | } 176 | 177 | footer { 178 | text-align: right; 179 | padding: 1rem; 180 | color: #aaa; 181 | font-size: 0.8rem; 182 | text-shadow: 0px 0px 2px #BBB; 183 | } 184 | 185 | footer > a { 186 | color: #aaa; 187 | text-decoration: none; 188 | } 189 | 190 | .main { 191 | top: 56px; 192 | bottom: 0rem; 193 | position: relative; 194 | height: 100%; 195 | height: calc(100% - 56px); 196 | } 197 | 198 | .main > .loading { 199 | position: fixed; 200 | width: 100%; 201 | height: 100%; 202 | z-index: 1000; 203 | display: block; 204 | background-color: #4f4e4a; 205 | top: 0; 206 | } 207 | 208 | .main > .loading > span { 209 | display: block; 210 | text-align: center; 211 | margin-top: 20%; 212 | color: #d8d3c5; 213 | font-size: 2rem; 214 | } 215 | 216 | .main > .loading > span > .loading-img:before { 217 | font-family: 'icomoon'; 218 | content: "\e603"; 219 | } 220 | 221 | .main > .loading > span > .loading-img { 222 | 223 | animation: anim-rotate 2s infinite linear; 224 | margin-right: 1rem; 225 | display: inline-block; 226 | color: rgba(117, 137, 12, 1); 227 | } 228 | 229 | @keyframes anim-rotate { 230 | 0% { 231 | -webkit-transform: rotate(0); 232 | -ms-transform: rotate(0); 233 | transform: rotate(0); 234 | } 235 | 100% { 236 | -webkit-transform: rotate(360deg); 237 | -ms-transform: rotate(360deg); 238 | transform: rotate(360deg) 239 | } 240 | } 241 | 242 | .main-left { 243 | float: left; 244 | top: 56px; 245 | width: 15%; 246 | width: calc(0% + 15rem); 247 | height: 100%; 248 | height: calc(100% - 56px); 249 | color: #d8d3c5; 250 | background-color: #2f2e2a; 251 | background: #2f2e2a; 252 | background: linear-gradient(to bottom, #2f2e2a 0%, #1f1e1a 100%); 253 | background: -webkit-linear-gradient(top, #2f2e2a 0%, #1f1e1a 100%); 254 | overflow-x: auto; 255 | position: fixed; 256 | } 257 | 258 | .main-right { 259 | width: 85%; 260 | width: calc(100% - 15rem); 261 | float: right; 262 | height: 100%; 263 | font-size: 0.85rem; 264 | background-color: #4f4e4a; 265 | text-shadow: -1px 0 #1f1e1a, 0 1px #1f1e1a, 1px 0 #1f1e1a, 0 -1px #1f1e1a, 0 0 3px #1f1e1a; 266 | } 267 | 268 | .main-right > #maincontent { 269 | background-color: #4f4e4a; 270 | color: #fafafa; 271 | } 272 | 273 | .pull-right { 274 | float: right; 275 | } 276 | 277 | .pull-left { 278 | float: left; 279 | } 280 | 281 | .warning { 282 | background-color: #FF7D60 !important; 283 | color: #FFF; 284 | } 285 | 286 | .errorbox, 287 | .alert-message { 288 | margin: 2rem 0 0 0; 289 | padding: 2rem; 290 | border: 0; 291 | font-weight: normal; 292 | font-style: normal; 293 | line-height: 1; 294 | font-family: inherit; 295 | min-width: inherit; 296 | overflow: auto; 297 | border-radius: 0; 298 | background-color: #FFF; 299 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 300 | } 301 | 302 | .errorbox { 303 | color: #fff; 304 | background-color: #f0ad4e; 305 | border-color: #eea236; 306 | } 307 | 308 | .error { 309 | color: red; 310 | } 311 | 312 | #maincontent > .container > div:nth-child(1).alert-message.warning > a { 313 | font: inherit; 314 | overflow: visible; 315 | text-transform: none; 316 | display: inline-block; 317 | margin-bottom: 0; 318 | font-weight: 400; 319 | text-align: center; 320 | white-space: nowrap; 321 | vertical-align: middle; 322 | touch-action: manipulation; 323 | cursor: pointer; 324 | -webkit-user-select: none; 325 | -moz-user-select: none; 326 | -ms-user-select: none; 327 | user-select: none; 328 | background-image: none; 329 | min-width: 6rem; 330 | padding: 0.5rem 1rem; 331 | font-size: 0.9rem; 332 | line-height: 1.42857143; 333 | color: #fff; 334 | background-color: #5bc0de; 335 | border-color: #46b8da; 336 | margin-top: 2rem; 337 | text-decoration: inherit; 338 | } 339 | 340 | .main > .main-left > .nav > li a { 341 | color: #d8d3c5; 342 | display: block; 343 | text-shadow: -1px 0 #1f1e1a, 0 1px #1f1e1a, 1px 0 #1f1e1a, 0 -1px #1f1e1a, 0 0 3px #1f1e1a; 344 | } 345 | 346 | .main > .main-left > .nav > li:nth-last-child(1) { 347 | background: rgba(175, 46, 17, 0.3); 348 | margin: 0; 349 | } 350 | 351 | .main > .main-left > .nav > li:nth-last-child(1) a { 352 | text-decoration: none; 353 | } 354 | 355 | .main > .main-left > .nav > li { 356 | /* border-top: 1px solid #3c3b38; */ 357 | border-bottom: 1px solid #0f0e0a; 358 | background: #2f2e2a url("../img/noise.png") repeat; 359 | padding: 0.5rem 1rem; 360 | cursor: pointer; 361 | } 362 | 363 | .main > .main-left > .nav > .slide { 364 | padding: 0; 365 | } 366 | 367 | .main > .main-left > .nav > .slide > ul { 368 | display: none; 369 | } 370 | 371 | .main > .main-left > .nav > .slide > .menu { 372 | display: block; 373 | padding-left: 1rem; 374 | text-decoration: none; 375 | cursor: pointer; 376 | font-size: 1.1rem; 377 | line-height: 42px; 378 | height: 42px; 379 | } 380 | 381 | .main > .main-left > .nav > .slide > a.menu.active { 382 | border-bottom: 1px solid #0f0e0a; 383 | } 384 | 385 | .main > .main-left > .nav > .slide > .menu:hover { 386 | background: #4f4e4a url("../img/noise.png") repeat; 387 | } 388 | 389 | .main > .main-left > .nav > .slide > .menu.active { 390 | color: #fafafa; 391 | } 392 | 393 | .main > .main-left > .nav > .slide > .menu.active:hover { 394 | background: transparent; 395 | } 396 | 397 | .main > .main-left > .nav > .slide > .slide-menu > .active { 398 | background: #4f4e4a !important; 399 | border-top: 1px solid #63615e !important; 400 | } 401 | 402 | .main > .main-left > .nav > .slide > .slide-menu.active > li { 403 | padding-left: 2rem; 404 | border-top: 1px solid #4c4b48; 405 | border-bottom: 1px solid #0f0e0a; 406 | background: #3f3e3a url("../img/noise.png") repeat; 407 | } 408 | 409 | .main > .main-left > .nav > .slide > .slide-menu.active > li:nth-last-child(1) { 410 | border-bottom: none; 411 | } 412 | 413 | .main > .main-left > .nav > .slide > .slide-menu.active > li:hover { 414 | background: rgba(117, 137, 12, 0.45) !important; 415 | border-top: 1px solid rgba(129, 140, 72, 0.45); 416 | } 417 | 418 | .main > .main-left > .nav > .slide > .slide-menu > li > a { 419 | text-decoration: none; 420 | white-space: nowrap; 421 | font-size: 0.95rem; 422 | line-height: 41px; 423 | } 424 | 425 | .main > .main-left > .nav > .slide > .slide-menu > .active > a { 426 | color: #fafafa; 427 | } 428 | 429 | .main > .main-left > .nav > .slide > .slide-menu > li:hover { 430 | background: #3f3e3a url("../img/noise.png") repeat; 431 | } 432 | 433 | .main > .main-left > .nav > .slide > .slide-menu > .active:hover { 434 | cursor: hand; 435 | } 436 | 437 | li { 438 | list-style-type: none; 439 | } 440 | 441 | #maincontent > .container { 442 | margin: 0 2rem 1rem 2rem; 443 | } 444 | 445 | h1 { 446 | font-size: 2rem; 447 | padding-bottom: 10px; 448 | border-bottom: 1px solid #eee; 449 | } 450 | 451 | h2 { 452 | margin: 12px 0 0 0; 453 | font-size: 1.6rem; 454 | line-height: 2.5rem; 455 | padding-bottom: 12px; 456 | } 457 | 458 | 459 | h2 > a, 460 | h2 > a:hover { 461 | color: #fafafa; 462 | } 463 | 464 | h3 { 465 | margin: 2rem 0 0 0; 466 | font-size: 1.4rem; 467 | padding-bottom: 10px; 468 | } 469 | 470 | h4 { 471 | 472 | } 473 | 474 | fieldset { 475 | margin-bottom: 1rem; 476 | border: 1px solid rgba(37, 35, 35, 0.25); 477 | font-weight: normal; 478 | font-style: normal; 479 | line-height: 1; 480 | font-family: inherit; 481 | min-width: inherit; 482 | overflow-x: auto; 483 | overflow-y: hidden; 484 | border-radius: 0; 485 | -webkit-overflow-scrolling: touch; 486 | background: #2f2e2a; 487 | } 488 | 489 | .cbi-map-descr + fieldset { 490 | margin-top: 1rem; 491 | } 492 | 493 | fieldset > legend { 494 | display: none !important; 495 | } 496 | 497 | fieldset > fieldset { 498 | margin: 0; 499 | padding: 0; 500 | border: none; 501 | box-shadow: none; 502 | } 503 | 504 | fieldset > button { 505 | margin: 8px; 506 | } 507 | 508 | .panel-title { 509 | width: 100%; 510 | display: block; 511 | line-height: 2.2rem; 512 | font-size: 1.4rem; 513 | padding-bottom: 0; 514 | background: #2f2e2a; 515 | padding-left: 8px; 516 | border-bottom: 1px solid #1f1e1a; 517 | border-top: 1px solid #1f1e1a; 518 | } 519 | 520 | fieldset > .panel-title:nth-of-type(1) { 521 | border-top: none; 522 | } 523 | 524 | table { 525 | border-spacing: 0; 526 | border-collapse: collapse; 527 | width: 100%; 528 | border: none; 529 | margin: 0 !important; 530 | } 531 | 532 | table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th { 533 | padding: .5rem; 534 | white-space: nowrap; 535 | } 536 | 537 | table > tbody > tr { 538 | border-top: 1px solid #3f3e3a; 539 | border-bottom: 1px solid #1f1e1a; 540 | } 541 | 542 | /*table > tbody > tr:nth-of-type(2n),*/ 543 | .cbi-rowstyle-1 { 544 | background-color: #3f3e3a; 545 | border-top: 1px solid #4f4e4a; 546 | border-bottom: 1px solid #1f1e1a;; 547 | } 548 | 549 | .cbi-rowstyle-2 { 550 | background-color: #2f2e2a; 551 | border-top: 1px solid #3f3e3a; 552 | border-bottom: 1px solid #1f1e1a; 553 | } 554 | 555 | table > tbody > tr:nth-last-child(1) { 556 | border-bottom: none; 557 | } 558 | 559 | .cbi-section-table-cell { 560 | text-align: center; 561 | } 562 | 563 | .cbi-section-table-row { 564 | text-align: center; 565 | } 566 | 567 | /* fix progress bar */ 568 | #swaptotal > div, 569 | #swapfree > div, 570 | #memfree > div, 571 | #membuff > div, 572 | #conns > div, 573 | #memtotal > div { 574 | width: 100% !important; 575 | height: 1.2rem !important; 576 | background: #1f1e1a; !important; 577 | border: 1px solid #000 !important; 578 | } 579 | 580 | #swaptotal > div > div, 581 | #swapfree > div > div, 582 | #memfree > div > div, 583 | #membuff > div > div, 584 | #conns > div > div, 585 | #memtotal > div > div { 586 | height: 100% !important; 587 | background-color: rgba(117, 137, 12, 0.75) !important; 588 | } 589 | 590 | #swaptotal > div > div > div, 591 | #swapfree > div > div > div, 592 | #memfree > div > div > div, 593 | #membuff > div > div > div, 594 | #conns > div > div > div, 595 | #memtotal > div > div > div { 596 | color: #fafafa !important; 597 | line-height: 17px; 598 | } 599 | 600 | /* fix multiple table */ 601 | 602 | table table { 603 | border: none; 604 | } 605 | 606 | .cbi-value-field table { 607 | border: none; 608 | } 609 | 610 | td > table > tbody > tr > td { 611 | border: none; 612 | } 613 | 614 | .cbi-value-field > table > tbody > tr > td { 615 | border: none; 616 | } 617 | 618 | /* button style */ 619 | 620 | .cbi-button { 621 | -webkit-appearance: none; 622 | display: inline-block; 623 | cursor: pointer; 624 | -ms-touch-action: manipulation; 625 | touch-action: manipulation; 626 | text-align: center; 627 | vertical-align: middle; 628 | white-space: nowrap; 629 | -webkit-user-select: none; 630 | -moz-user-select: none; 631 | -ms-user-select: none; 632 | user-select: none; 633 | width: auto !important; 634 | color: #d8d3c5; 635 | font-size: 0.8rem; 636 | font-family: "DIN"; 637 | font-weight: bold; 638 | text-shadow: 0 1px 1px #000; 639 | text-decoration: none; 640 | border-width: 1px; 641 | border-radius: 0; 642 | border-style: solid; 643 | border-color: #44433f; 644 | border-bottom-color: #3a3935; 645 | box-shadow: inset 0 0 24px 0 rgb(47, 46, 44), 0 0 3px 0 #000000; 646 | background: -webkit-linear-gradient(top, rgb(73, 71, 68) 0%, rgb(47, 46, 44) 100%); 647 | background: linear-gradient(to bottom, rgb(73, 71, 68) 0%, rgb(47, 46, 44) 100%); 648 | padding: 5px; 649 | } 650 | 651 | .cbi-button:hover, 652 | .cbi-button:focus, 653 | .cbi-button:active { 654 | color: rgba(0, 0, 0, 0.87); 655 | outline: 0; 656 | text-decoration: none; 657 | color: rgba(0, 0, 0, 0.87); 658 | } 659 | 660 | .cbi-button:hover, 661 | .cbi-button:focus { 662 | box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); 663 | } 664 | 665 | .cbi-button:active { 666 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 667 | } 668 | 669 | .cbi-button:disabled { 670 | cursor: not-allowed; 671 | pointer-events: none; 672 | opacity: 0.60; 673 | box-shadow: none; 674 | } 675 | 676 | form.inline + form.inline, 677 | .cbi-button + .cbi-button { 678 | margin-left: 0.6rem; 679 | } 680 | 681 | .cbi-button-reset, 682 | .cbi-input-remove { 683 | color: #2f2e2a !important; 684 | text-transform: uppercase; 685 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.62); 686 | box-shadow: inset 0 0 14px 0 #db4213, 0 0 3px 0 #db6113 !important; 687 | border: 1px solid rgba(255, 129, 92, 0.65) !important; 688 | background: #dbb013 !important; 689 | background: -moz-radial-gradient(center, ellipse cover, #dbb013 0%, #c69611 100%) !important; 690 | background: -webkit-radial-gradient(center, ellipse cover, #dbb013 0%,#c69611 100%) !important; 691 | background: radial-gradient(ellipse at center, #dbb013 0%,#c69611 100%) !important; 692 | } 693 | 694 | .cbi-input-find, 695 | .cbi-input-save, 696 | .cbi-button-add, 697 | .cbi-button-save, 698 | .cbi-button-find, 699 | .cbi-input-reload, 700 | .cbi-button-reload { 701 | color: #2f2e2a !important; 702 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.62); 703 | text-transform: uppercase; 704 | box-shadow: inset 0 0 24px 0 #606f11, 0 0 3px 0 #9db134 !important; 705 | border: 1px solid rgb(121, 144, 55) !important; 706 | background: #7eaa0f !important; 707 | background: -webkit-radial-gradient(center, ellipse cover, #7eaa0f 0%, #6d8006 100%) !important; 708 | background: -webkit-radial-gradient(center ellipse, #7eaa0f 0%, #6d8006 100%) !important; 709 | background: radial-gradient(ellipse at center, #7eaa0f 0%, #6d8006 100%) !important; 710 | } 711 | 712 | .cbi-input-apply, 713 | .cbi-button-apply, 714 | .cbi-button-edit { 715 | color: #2f2e2a !important; 716 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.62); 717 | text-transform: uppercase; 718 | box-shadow: inset 0 0 24px 0 rgba(62, 62, 62, 0.77), 0 0 4px 0 rgba(236, 232, 219, 0.75); 719 | border: 1px solid #969696 !important; 720 | background: #dbb013 !important; 721 | background: -webkit-radial-gradient(center, ellipse cover, rgb(224, 219, 207) 0%, rgba(224, 219, 204, 0.7) 100%) !important; 722 | background: -webkit-radial-gradient(center ellipse, rgb(224, 219, 207) 0%, rgba(224, 219, 204, 0.7) 100%) !important; 723 | background: radial-gradient(ellipse at center, rgb(224, 219, 207) 0%, rgba(224, 219, 204, 0.7) 100%) !important; 724 | } 725 | 726 | .cbi-input-reset, 727 | .cbi-section-remove > .cbi-button, 728 | .cbi-button-remove { 729 | color: #2f2e2a !important; 730 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.62); 731 | text-transform: uppercase; 732 | box-shadow: inset 0 0 14px 0 #82290e, 0 0 3px 0 #db4213 !important; 733 | border: 1px solid #b73813 !important; 734 | background: #db4213 !important; 735 | background: -moz-radial-gradient(center, ellipse cover, #db4213 0%, #c93612 100%) !important; 736 | background: -webkit-radial-gradient(center, ellipse cover, #db4213 0%,#c93612 100%) !important; 737 | background: radial-gradient(ellipse at center, #db4213 0%,#c93612 100%) !important; 738 | } 739 | 740 | .a-to-btn { 741 | text-decoration: none; 742 | } 743 | 744 | /* table */ 745 | 746 | .tabs { 747 | margin: 0 -2rem; 748 | padding-left: 0.5rem; 749 | background-color: #3f3e3a; 750 | border-bottom: 1px solid #2f2e2a; 751 | } 752 | 753 | .cbi-tabmenu > li, 754 | .tabs > li { 755 | display: inline-block; 756 | height: 42px; 757 | line-height: 42px; 758 | } 759 | 760 | .cbi-tabmenu > li > a, 761 | .tabs > li > a { 762 | text-decoration: none; 763 | color: #d8d3c5; 764 | padding: 0.5rem 0.8rem; 765 | } 766 | 767 | .tabs > li[class~="active"], 768 | .tabs > li:hover { 769 | cursor: pointer; 770 | border-bottom: 0.2rem solid rgba(117, 137, 12, 0.75); 771 | color: rgba(117, 137, 12, 0.9); 772 | } 773 | 774 | .tabs > li[class~="active"] > a { 775 | color: #fafafa; 776 | } 777 | 778 | .tabs > li:hover { 779 | border-bottom: 0.18751rem solid rgba(117, 137, 12, 0.5); 780 | } 781 | 782 | .cbi-tabmenu > li:hover { 783 | border-bottom: 2px solid #d8d3c5; 784 | } 785 | 786 | .cbi-tabmenu > li[class~="cbi-tab"] { 787 | border-bottom: 2px solid rgba(117, 137, 12, 0.85); 788 | } 789 | 790 | .cbi-tabmenu > li[class~="cbi-tab"] > a { 791 | color: #fafafa;; 792 | } 793 | 794 | .cbi-tabmenu { 795 | background: #171612 url("../img/noise.png") repeat; 796 | } 797 | 798 | .cbi-section-remove:nth-of-type(2n), 799 | .cbi-section-node:nth-of-type(2n){ 800 | background-color: #3f3e3a; 801 | } 802 | 803 | .cbi-section-node-tabbed { 804 | padding: 0; 805 | margin-top: 0; 806 | background: #3f3e3a; 807 | } 808 | 809 | .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { 810 | background-color: #2f2e2a; 811 | } 812 | 813 | .cbi-value-field, 814 | .cbi-value-description { 815 | display: table-cell; 816 | line-height: 1.25; 817 | } 818 | 819 | .cbi-value-helpicon > img { 820 | display: none; 821 | } 822 | 823 | .cbi-value-helpicon:before { 824 | font-family: 'icomoon'; 825 | color: rgba(117, 137, 12, 0.5); 826 | content: "\f059"; 827 | } 828 | 829 | .cbi-value-description { 830 | color: #d8d3c5 831 | font-size: small; 832 | padding: 0.5rem 0 0 0; 833 | } 834 | 835 | .cbi-value-title { 836 | word-wrap: break-word; 837 | padding-top: 0.6rem; 838 | width: 23rem; 839 | float: left; 840 | text-align: right; 841 | padding-right: 2rem; 842 | display: table-cell; 843 | } 844 | 845 | .cbi-value { 846 | padding: 0.3rem 1rem; 847 | display: inline-block; 848 | width: 100%; 849 | } 850 | 851 | .cbi-section-table-descr > .cbi-section-table-cell, 852 | .cbi-section-table-titles > .cbi-section-table-cell { 853 | border: none; 854 | } 855 | 856 | .cbi-rowstyle-2 .cbi-button-up, 857 | .cbi-rowstyle-2 .cbi-button-down { 858 | background-color: #FFF !important; 859 | } 860 | 861 | .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { 862 | width: auto !important; 863 | } 864 | 865 | .cbi-section-table-titles { 866 | background: #292823 url("../img/noise.png") repeat; 867 | } 868 | 869 | /* desc */ 870 | .cbi-section-descr, 871 | .cbi-map-descr { 872 | padding: 0.5rem; 873 | color: #1f1e1a; 874 | font-size: small; 875 | background: #6f6e6a; 876 | text-shadow: none; 877 | } 878 | 879 | /* luci */ 880 | 881 | .hidden { 882 | display: none 883 | } 884 | 885 | .left { 886 | text-align: left !important; 887 | } 888 | 889 | .right { 890 | text-align: right !important; 891 | } 892 | 893 | .inline { 894 | display: inline; 895 | } 896 | 897 | .cbi-page-actions { 898 | padding: 10px; 899 | border: 1px solid #3f3e3a; 900 | text-align: right; 901 | background: #2f2e2a url("../img/stripes.svg") repeat; 902 | box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); 903 | } 904 | 905 | /* input */ 906 | .cbi-value input[type="password"], 907 | .cbi-value input[type="text"] { 908 | min-width: 15rem; 909 | } 910 | 911 | /* select */ 912 | .cbi-value-field .cbi-input-select { 913 | min-width: 15rem; 914 | } 915 | 916 | .ifacebadge { 917 | display: inline-flex; 918 | padding: 0.5rem 1rem; 919 | background: rgba(15, 14, 10, 0.8); 920 | box-shadow: inset 0 0 42px 0 #000; 921 | } 922 | 923 | td > .ifacebadge { 924 | font-size: 0.9rem; 925 | } 926 | 927 | .ifacebadge > img { 928 | float: right; 929 | margin: 0 0.3rem; 930 | } 931 | 932 | /*textarea*/ 933 | 934 | .cbi-input-textarea { 935 | width: 100%; 936 | min-height: 14rem; 937 | padding: 0.8rem; 938 | font-size: 0.8rem; 939 | margin-top: 10px; 940 | } 941 | 942 | #syslog { 943 | width: 100%; 944 | min-height: 15rem; 945 | padding: 1rem; 946 | font-size: small; 947 | color: #d8d3c5; 948 | margin-bottom: 20px; 949 | border-radius: 0; 950 | } 951 | 952 | /* change */ 953 | 954 | #cbi-apply-uci-apply img { 955 | display: none; 956 | } 957 | 958 | #cbi-apply-uci-apply #cbi-apply-uci-apply-status { 959 | display: block; 960 | color: #d8d3c5; 961 | padding: 10px; 962 | } 963 | 964 | #cbi-apply-uci-apply #cbi-apply-uci-apply-status:before { 965 | font-family: 'icomoon'; 966 | content: "\e603"; 967 | animation: anim-rotate 2s infinite linear; 968 | margin-right: 1rem; 969 | display: inline-block; 970 | color: rgba(117, 137, 12, 1); 971 | } 972 | 973 | .uci-change-list { 974 | font-family: monospace; 975 | padding: 10px; 976 | color: #fafafa; 977 | font-size: 14px; 978 | } 979 | 980 | .uci-change-list ins, 981 | .uci-change-legend-label ins { 982 | text-decoration: none; 983 | border: 1px solid rgba(117, 137, 12, 0.75); 984 | background-color: #505a18; 985 | display: block; 986 | padding: 2px; 987 | } 988 | 989 | .uci-change-list del, 990 | .uci-change-legend-label del { 991 | text-decoration: none; 992 | border: 1px solid #c93612; 993 | background-color: rgba(175, 46, 17, 0.53); 994 | display: block; 995 | font-style: normal; 996 | padding: 2px; 997 | } 998 | 999 | .uci-change-list var, 1000 | .uci-change-legend-label var { 1001 | text-decoration: none; 1002 | border: 1px solid #3f3e3a; 1003 | display: block; 1004 | font-style: normal; 1005 | padding: 2px; 1006 | box-shadow: inset 0 0 24px 0 #000; 1007 | background: #1f1e1a; 1008 | } 1009 | 1010 | .uci-change-list var ins, 1011 | .uci-change-list var del { 1012 | border: none; 1013 | white-space: pre; 1014 | font-style: normal; 1015 | padding: 0px; 1016 | } 1017 | 1018 | .uci-change-legend { 1019 | padding: 10px; 1020 | } 1021 | 1022 | .uci-change-legend-label { 1023 | width: 150px; 1024 | float: left; 1025 | } 1026 | 1027 | .uci-change-legend-label > ins, 1028 | .uci-change-legend-label > del, 1029 | .uci-change-legend-label > var { 1030 | float: left; 1031 | margin-right: 4px; 1032 | width: 10px; 1033 | height: 10px; 1034 | display: block; 1035 | } 1036 | 1037 | .uci-change-legend-label var ins, 1038 | .uci-change-legend-label var del { 1039 | line-height: 6px; 1040 | border: none; 1041 | } 1042 | 1043 | .uci-change-list var, 1044 | .uci-change-list del, 1045 | .uci-change-list ins { 1046 | padding: 0.5rem; 1047 | } 1048 | 1049 | /* other fix */ 1050 | #iwsvg, 1051 | #iwsvg2, 1052 | #bwsvg { 1053 | border: 1px solid #1f1e1a !important; 1054 | border-top: none !important; 1055 | box-shadow: inset 0 0 42px 0 #000; 1056 | background: #1f1e1a url("../img/stripes.svg") repeat !important; 1057 | } 1058 | 1059 | svg { 1060 | background: rgba(15, 14, 10, 0.8) !important; 1061 | } 1062 | 1063 | .ifacebox { 1064 | border: 1px solid #0f0e0a; 1065 | margin: 5px; 1066 | } 1067 | 1068 | .ifacebox-head { 1069 | line-height: 20px; 1070 | color: #1f1e1a; 1071 | text-shadow: none; 1072 | } 1073 | 1074 | .ifacebox-body { 1075 | box-shadow: inset 0 0 15px 0 #000; 1076 | background: #1f1e1a; 1077 | min-height: 40px; 1078 | line-height: 18px; 1079 | padding-top: 12px; 1080 | padding-bottom: 8px; 1081 | } 1082 | 1083 | .cbi-image-button { 1084 | margin-left: 0.5rem; 1085 | } 1086 | 1087 | .zonebadge { 1088 | padding: 0.2rem 0.5rem; 1089 | display: inline-block; 1090 | cursor: pointer; 1091 | } 1092 | 1093 | .zonebadge > .ifacebadge { 1094 | padding: 0.2rem 1rem; 1095 | margin: 0.3rem; 1096 | } 1097 | 1098 | .zonebadge > input[type="text"] { 1099 | padding: 0.16rem 1rem; 1100 | min-width: 10rem; 1101 | margin-top: 0.3rem; 1102 | } 1103 | 1104 | .cbi-value-field .cbi-input-checkbox, 1105 | .cbi-value-field .cbi-input-radio { 1106 | margin-top: 0.5rem; 1107 | height: 1rem; 1108 | } 1109 | 1110 | .cbi-value-field > input + .cbi-value-description { 1111 | padding: 0; 1112 | } 1113 | 1114 | .cbi-value-field > ul > li { 1115 | display: flex; 1116 | } 1117 | 1118 | .cbi-value-field > ul > li > label { 1119 | margin-top: 0.5rem; 1120 | } 1121 | 1122 | .cbi-value-field > ul > li .ifacebadge { 1123 | margin-left: 0.4rem; 1124 | margin-top: -0.5rem; 1125 | } 1126 | 1127 | .cbi-section-table-row > .cbi-value-field .cbi-input-select { 1128 | min-width: 7rem; 1129 | } 1130 | 1131 | .cbi-section-create > .cbi-button-add { 1132 | margin: 0.5rem; 1133 | } 1134 | 1135 | .cbi-section-remove { 1136 | padding: 0.5rem; 1137 | } 1138 | 1139 | div.cbi-value var, td.cbi-value-field var { 1140 | font-style: italic; 1141 | color: #0069D6; 1142 | } 1143 | 1144 | small { 1145 | font-size: 90%; 1146 | white-space: normal; 1147 | line-height: 1.42857143; 1148 | } 1149 | 1150 | .cbi-button-up, 1151 | .cbi-button-down { 1152 | display: inline-block; 1153 | min-width: 0; 1154 | padding: 0.2rem 0.3rem; 1155 | font-size: 1.2rem; 1156 | } 1157 | 1158 | .cbi-optionals { 1159 | padding: 1rem 1rem 0 1rem; 1160 | border-top: 1px solid #CCC; 1161 | } 1162 | 1163 | #diag-rc-output > pre { 1164 | display: block; 1165 | padding: 8.5px; 1166 | margin: 0 0 18px; 1167 | line-height: 1.5rem; 1168 | white-space: pre-wrap; 1169 | word-wrap: break-word; 1170 | font-size: 1.4rem; 1171 | } 1172 | 1173 | input[name="ping"], 1174 | input[name="traceroute"], 1175 | input[name="nslookup"] { 1176 | width: 80%; 1177 | } 1178 | 1179 | header > .container > .pull-right > * { 1180 | cursor: pointer; 1181 | } 1182 | 1183 | #xhr_poll_status > .label.success { 1184 | color: #fafafa !important; 1185 | text-shadow: 0 1px 1px rgba(65, 65, 65, 0.4) !important; 1186 | box-shadow: inset 0 0 24px 0 #606f11, 0 0 3px 0 #9db134 !important; 1187 | border: 1px solid rgb(121, 144, 55) !important; 1188 | background: #7eaa0f !important; 1189 | background: -webkit-radial-gradient(center, ellipse cover, #7eaa0f 0%, #6d8006 100%) !important; 1190 | background: -webkit-radial-gradient(center ellipse, #7eaa0f 0%, #6d8006 100%) !important; 1191 | background: radial-gradient(ellipse at center, #7eaa0f 0%, #6d8006 100%) !important; 1192 | margin-right: 4px; 1193 | padding: 5px; 1194 | } 1195 | 1196 | .label { 1197 | color: #d8d3c5 !important; 1198 | font-size: 0.8rem; 1199 | text-shadow: 0 1px 1px #000; 1200 | text-decoration: none; 1201 | border-width: 1px; 1202 | border-radius: 0; 1203 | border-style: solid; 1204 | border-color: #44433f; 1205 | border-bottom-color: #3a3935; 1206 | box-shadow: inset 0 0 24px 0 rgb(47, 46, 44), 0 0 3px 0 #000000; 1207 | background: -webkit-linear-gradient(top, rgb(73, 71, 68) 0%, rgb(47, 46, 44) 100%); 1208 | background: linear-gradient(to bottom, rgb(73, 71, 68) 0%, rgb(47, 46, 44) 100%); 1209 | padding: 5px; 1210 | } 1211 | 1212 | #modemenu > li .active > .label { 1213 | box-shadow: inset 0 0 24px 0 rgba(62, 62, 62, 0.77), 0 0 4px 0 rgba(236, 232, 219, 0.75); 1214 | border: 1px solid #969696 !important; 1215 | background: #dbb013 !important; 1216 | background: -webkit-radial-gradient(center, ellipse cover, rgb(224, 219, 207) 0%, rgba(224, 219, 204, 0.7) 100%) !important; 1217 | background: -webkit-radial-gradient(center ellipse, rgb(224, 219, 207) 0%, rgba(224, 219, 204, 0.7) 100%) !important; 1218 | background: radial-gradient(ellipse at center, rgb(224, 219, 207) 0%, rgba(224, 219, 204, 0.7) 100%) !important; 1219 | } 1220 | 1221 | #modemenu > li .active > .label > a { 1222 | color: #d8d3c5 !important; 1223 | text-shadow: 0 1px 1px rgba(10, 9, 4, 0.4) !important; 1224 | } 1225 | 1226 | .notice { 1227 | background-color: #5BC0DE; 1228 | } 1229 | 1230 | .showSide { 1231 | display: none; 1232 | } 1233 | 1234 | .darkMask { 1235 | width: 100%; 1236 | height: 100%; 1237 | position: fixed; 1238 | background-color: rgba(0, 0, 0, 0.56); 1239 | content: ""; 1240 | z-index: 99; 1241 | display: none; 1242 | } 1243 | 1244 | /* fix Main Login*/ 1245 | .node-main-login > .main > .main-left { 1246 | display: none; 1247 | } 1248 | 1249 | .node-main-login > .main > .main-right { 1250 | width: 100%; 1251 | } 1252 | 1253 | .node-main-login > .main fieldset { 1254 | padding: 0.5rem; 1255 | margin-bottom: 1rem; 1256 | display: inline; 1257 | background: none; 1258 | border: none; 1259 | box-shadow: none; 1260 | overflow: hidden; 1261 | width: 100%; 1262 | } 1263 | 1264 | .node-main-login > .main .cbi-value-title { 1265 | width: 7rem; 1266 | } 1267 | 1268 | .node-main-login > .main #maincontent { 1269 | 1270 | text-align: center; 1271 | } 1272 | 1273 | .node-main-login > .main .container { 1274 | display: inline-block; 1275 | padding: 2rem 4rem; 1276 | margin-top: 3rem !important; 1277 | background-color: #1f1e1a; 1278 | text-align: left; 1279 | border: 1px solid #3f3e3a; 1280 | box-shadow: 0 0 42px 0px rgba(0, 0, 0, 0.66); 1281 | } 1282 | } 1283 | 1284 | .node-main-login > .main form > div:nth-last-child(1) { 1285 | float: right; 1286 | } 1287 | 1288 | .node-main-login > .main .cbi-value { 1289 | display: block; 1290 | } 1291 | 1292 | .node-main-login > .main .cbi-value > * { 1293 | display: inline-block !important; 1294 | } 1295 | 1296 | .node-main-login > .main .cbi-input-user, 1297 | .node-main-login > .main .cbi-input-password { 1298 | min-width: 15rem; 1299 | } 1300 | 1301 | .node-main-login footer { 1302 | bottom: 0; 1303 | position: absolute; 1304 | width: 100%; 1305 | } 1306 | 1307 | 1308 | .node-main-login table > tbody > tr { 1309 | background-color: #2f2e2a; 1310 | border-top: 1px solid #3f3e3a; 1311 | border-bottom: 1px solid #1f1e1a;; 1312 | } 1313 | 1314 | .node-main-login table > tbody > tr:nth-of-type(2n) { 1315 | background-color: #3f3e3a; 1316 | border-top: 1px solid #4f4e4a; 1317 | border-bottom: 1px solid #1f1e1a;; 1318 | } 1319 | 1320 | .node-main-login > .main fieldset:nth-child(4) td:nth-child(2) { 1321 | white-space: normal; 1322 | } 1323 | 1324 | .node-main-login fieldset:nth-child(3n) table table { 1325 | box-shadow: inset 0 0 15px 0 #000; 1326 | background: #1f1e1a; 1327 | border: 1px solid #000; 1328 | } 1329 | 1330 | .node-main-login fieldset:nth-child(3n) table table tr{ 1331 | background: transparent; 1332 | border: none; 1333 | } 1334 | 1335 | .node-main-login fieldset:nth-child(3n) table table tr td { 1336 | padding: 7px !important; 1337 | } 1338 | 1339 | /* fix status overview */ 1340 | 1341 | .node-status-overview table > tbody > tr { 1342 | background-color: #2f2e2a; 1343 | border-top: 1px solid #3f3e3a; 1344 | border-bottom: 1px solid #1f1e1a;; 1345 | } 1346 | 1347 | .node-status-overview table > tbody > tr:nth-of-type(2n) { 1348 | background-color: #3f3e3a; 1349 | border-top: 1px solid #4f4e4a; 1350 | border-bottom: 1px solid #1f1e1a;; 1351 | } 1352 | 1353 | .node-status-overview table > tbody > tr:last-child { 1354 | border: none; 1355 | } 1356 | 1357 | .node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) { 1358 | white-space: normal; 1359 | } 1360 | 1361 | .node-status-overview fieldset:nth-child(3n) table table { 1362 | box-shadow: inset 0 0 15px 0 #000; 1363 | background: #1f1e1a; 1364 | border: 1px solid #000; 1365 | } 1366 | 1367 | .node-status-overview fieldset:nth-child(3n) table table tr{ 1368 | background: transparent; 1369 | border: none; 1370 | } 1371 | 1372 | .node-status-overview fieldset:nth-child(3n) table table tr td { 1373 | padding: 7px !important; 1374 | } 1375 | 1376 | /* fix status processes */ 1377 | 1378 | .node-status-processes > .main table tr td:nth-child(3) { 1379 | white-space: normal; 1380 | } 1381 | 1382 | .node-status-iptables > .main div > .cbi-map > form { 1383 | margin: 2rem 2rem 0 0; 1384 | } 1385 | 1386 | /* fix system reboot */ 1387 | 1388 | .node-system-reboot > .main > .main-right p, 1389 | .node-system-reboot > .main > .main-right h3 { 1390 | padding-left: 2rem; 1391 | margin-bottom: 8px; 1392 | } 1393 | 1394 | .node-system-reboot > .main > .main-right p.warning { 1395 | padding: 2rem; 1396 | } 1397 | 1398 | .node-system-reboot > .main > .main-right p:nth-last-child(1){ 1399 | background: #1f1e1a url("../img/stripes.svg") repeat; 1400 | padding: 2rem; 1401 | } 1402 | 1403 | /* fix Services Network Shares*/ 1404 | .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { 1405 | margin-bottom: 1rem; 1406 | width: auto; 1407 | } 1408 | 1409 | .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { 1410 | display: list-item; 1411 | } 1412 | 1413 | .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { 1414 | padding-top: 1rem; 1415 | } 1416 | 1417 | 1418 | /* fix System Software*/ 1419 | .node-system-packages > .main table tr td:nth-child(1) { 1420 | width: auto !important; 1421 | } 1422 | 1423 | .node-system-packages > .main table tr td:nth-last-child(1) { 1424 | white-space: normal; 1425 | font-size: small; 1426 | } 1427 | 1428 | .node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a { 1429 | padding: 0.5rem 0.8rem; 1430 | } 1431 | 1432 | .node-system-packages > .main .cbi-value > pre { 1433 | overflow: auto; 1434 | } 1435 | 1436 | .cbi-tabmenu + .cbi-section { 1437 | margin-top: 0; 1438 | } 1439 | 1440 | /* fix network firewall*/ 1441 | .node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select { 1442 | min-width: 4rem; 1443 | } 1444 | 1445 | .node-status-iptables fieldset, 1446 | .node-system-packages fieldset, 1447 | .node-system-flashops fieldset { 1448 | margin-top: 0; 1449 | } 1450 | 1451 | .node-status-iptables .cbi-tabmenu, 1452 | .node-system-packages .cbi-tabmenu, 1453 | .node-system-flashops .cbi-tabmenu { 1454 | border: none; 1455 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 1456 | } 1457 | 1458 | .node-system-flashops form.inline + form.inline { 1459 | margin-left: 0; 1460 | } 1461 | 1462 | .node-system-flashops br { 1463 | display: none; 1464 | } 1465 | 1466 | .node-system-flashops .cbi-section-node { 1467 | padding-top: 10px; 1468 | padding-bottom: 10px; 1469 | } 1470 | 1471 | .node-system-flashops .cbi-input-apply { 1472 | height: 25px; 1473 | margin-top: -5px; 1474 | font-size: 0.8rem; 1475 | } 1476 | 1477 | 1478 | #cbi-firewall-redirect table *, 1479 | #cbi-network-switch_vlan table *, 1480 | #cbi-firewall-zone table * { 1481 | font-size: small; 1482 | } 1483 | 1484 | #cbi-firewall-redirect table input[type="text"], 1485 | #cbi-network-switch_vlan table input[type="text"], 1486 | #cbi-firewall-zone table input[type="text"] { 1487 | width: 5rem; 1488 | } 1489 | 1490 | #cbi-firewall-redirect table select, 1491 | #cbi-network-switch_vlan table select, 1492 | #cbi-firewall-zone table select { 1493 | min-width: 3.5rem; 1494 | } 1495 | 1496 | #cbi-system-led .cbi-section-descr, 1497 | #cbi-system-led br { 1498 | display: none; 1499 | } 1500 | 1501 | #cbi-system-led .cbi-section-remove, 1502 | #cbi-system-led .cbi-section-create { 1503 | background: #1f1e1a; 1504 | border-bottom: 1px solid #0f0e0a; 1505 | border-top: 1px solid #0f0e0a; 1506 | } 1507 | 1508 | /* processes fix */ 1509 | 1510 | #cbi-processes .cbi-section-descr, 1511 | #cbi-processes .cbi-section-table-descr, 1512 | .node-status-processes .cbi-page-actions { 1513 | display: none; 1514 | } 1515 | 1516 | #cbi-processes .cbi-section-table-titles { 1517 | background-color: #1f1e1a; 1518 | border-top: none; 1519 | } 1520 | 1521 | /* realtime graphs */ 1522 | 1523 | .node-status-realtime table { 1524 | border: 1px solid #1f1e1a; 1525 | } 1526 | 1527 | .node-status-realtime table > tbody > tr { 1528 | background-color: #2f2e2a; 1529 | border-top: 1px solid #3f3e3a; 1530 | border-bottom: 1px solid #1f1e1a;; 1531 | } 1532 | 1533 | .node-status-realtime table > tbody > tr:nth-of-type(2n) { 1534 | background-color: #3f3e3a; 1535 | border-top: 1px solid #4f4e4a; 1536 | border-bottom: 1px solid #1f1e1a;; 1537 | } 1538 | 1539 | .node-status-realtime fieldset table { 1540 | border: none; 1541 | } 1542 | 1543 | .node-status-realtime small { 1544 | display: inline-block; 1545 | width: 100%; 1546 | line-height: 25px; 1547 | background: #1f1e1a; 1548 | border: 1px solid #1f1e1a; 1549 | padding-right: 5px; 1550 | } 1551 | 1552 | .node-status-realtime #cbi-table-table small { 1553 | border: none; 1554 | } 1555 | 1556 | .node-status-realtime br { 1557 | display: none; 1558 | } 1559 | 1560 | /* system -> system */ 1561 | 1562 | .node-system-system fieldset br, 1563 | .node-system-system .cbi-section-descr { 1564 | display: none; 1565 | } 1566 | 1567 | /* system -> admin */ 1568 | 1569 | .node-system-admin br, 1570 | .node-system-admin .cbi-section-table-descr, 1571 | .node-system-admin .cbi-section-table-titles, 1572 | .node-system-admin fieldset:nth-of-type(1) .cbi-section-descr { 1573 | display: none; 1574 | } 1575 | 1576 | /* system -> startup */ 1577 | 1578 | .node-system-startup .cbi-map br, 1579 | .node-system-startup .cbi-section-descr, 1580 | .node-system-startup .cbi-section-table-descr, 1581 | .node-system-startup form:nth-of-type(1) .cbi-page-actions { 1582 | display: none; 1583 | } 1584 | 1585 | .node-system-startup .cbi-map-descr br { 1586 | display: block; 1587 | } 1588 | 1589 | /* system -> mounts */ 1590 | 1591 | .node-system-fstab .cbi-section-table-descr, 1592 | .node-system-fstab .cbi-section-descr:nth-of-type(1) { 1593 | display: none; 1594 | } 1595 | 1596 | /* system -> flashops */ 1597 | 1598 | .node-system-flashops fieldset { 1599 | margin-top: 10px; 1600 | padding: 10px; 1601 | } 1602 | 1603 | /* dnsmasq */ 1604 | 1605 | .node-network-dhcp .cbi-section-descr, 1606 | .node-network-dhcp .cbi-section-table-descr, 1607 | .node-network-dhcp #cbi-dhcp-dnsmasq br { 1608 | display: none; 1609 | } 1610 | 1611 | /* network -> bmx7 */ 1612 | 1613 | .node-network-bmx7 .cbi-map-descr, 1614 | .node-network-bmx7 center img { 1615 | display: none; 1616 | } 1617 | 1618 | .node-network-bmx7 div#extra-info { 1619 | margin-bottom: 15px; 1620 | } 1621 | 1622 | /* network -> interfaces */ 1623 | 1624 | .node-network-network .cbi-section-descr, 1625 | .node-network-network fieldset br { 1626 | display: none; 1627 | } 1628 | 1629 | .node-network-network fieldset .cbi-section-node table { 1630 | box-shadow: inset 0 0 15px 0 #000; 1631 | background: #1f1e1a; 1632 | border: 1px solid #000; 1633 | } 1634 | 1635 | .node-network-network fieldset .cbi-section-node table tr { 1636 | background: transparent; 1637 | } 1638 | 1639 | .node-network-network fieldset .cbi-section-node table td:nth-of-type(1) { 1640 | padding: 5px !important; 1641 | } 1642 | 1643 | .node-network-network fieldset .cbi-section-node table td { 1644 | padding: 10px !important; 1645 | } 1646 | 1647 | .node-network-network fieldset .cbi-section-table br { 1648 | display: initial; 1649 | } 1650 | 1651 | /* network -> wifi */ 1652 | 1653 | .node-network-wireless fieldset br { 1654 | display: none; 1655 | } 1656 | 1657 | .node-network-wireless fieldset .cbi-section-node table br { 1658 | display: initial; 1659 | } 1660 | 1661 | .node-network-wireless fieldset .cbi-section-node table { 1662 | box-shadow: inset 0 0 15px 0 #000; 1663 | background: #1f1e1a; 1664 | border: 1px solid #000; 1665 | } 1666 | 1667 | .node-network-wireless fieldset .cbi-section-node table td { 1668 | padding: 10px !important; 1669 | } 1670 | 1671 | .node-network-wireless fieldset .cbi-section-table tr:nth-of-type(1) { 1672 | background: #292823 url("../img/noise.png") repeat; 1673 | } 1674 | 1675 | .node-network-wireless fieldset .cbi-section-table:nth-of-type(1) br { 1676 | display: initial; 1677 | } 1678 | 1679 | /* network -> hosts */ 1680 | 1681 | .node-network-hosts .cbi-section-descr, 1682 | .node-network-hosts .cbi-section-table-descr { 1683 | display: none; 1684 | } 1685 | 1686 | /* network -> routes */ 1687 | 1688 | .node-network-routes .cbi-section-descr { 1689 | display: none; 1690 | } 1691 | 1692 | .node-network-routes .cbi-input-select { 1693 | width: 100px; 1694 | min-width: 100px; 1695 | } 1696 | 1697 | .node-network-routes input { 1698 | width: 130px; 1699 | max-width: 150px; 1700 | } 1701 | 1702 | .node-network-routes td:nth-of-type(5) input, 1703 | .node-network-routes td:nth-of-type(6) input { 1704 | width: 50px !important; 1705 | max-width: 50px !important; 1706 | } 1707 | 1708 | /* language fix */ 1709 | body.lang_pl.node-main-login .cbi-value-title { 1710 | width: 12rem; 1711 | } 1712 | 1713 | /* Mode Switch */ 1714 | 1715 | .breadcrumb li { 1716 | display: inline-block; 1717 | } 1718 | 1719 | .info { 1720 | background: transparent !important; 1721 | } 1722 | 1723 | pre, textarea { 1724 | border: 1px solid #0f0e0a; 1725 | padding: 15px; 1726 | color: #d8d3c5; 1727 | background: rgba(15, 14, 10, 1); 1728 | box-shadow: inset 0 0 36px 0 rgba(0, 0, 0, 0.8); 1729 | margin-top: 10px; 1730 | } 1731 | 1732 | #content_syslog textarea { 1733 | margin-top: 0; 1734 | } 1735 | 1736 | @media screen and (max-width: 1600px) { 1737 | .main-left { 1738 | width: calc(0% + 13rem); 1739 | } 1740 | 1741 | .main-right { 1742 | width: calc(100% - 13rem); 1743 | } 1744 | 1745 | .cbi-button { 1746 | padding: 0.3rem 0.6rem; 1747 | } 1748 | 1749 | .label { 1750 | 1751 | } 1752 | 1753 | .cbi-value-title { 1754 | width: 15rem; 1755 | padding-right: 0.6rem; 1756 | } 1757 | 1758 | .cbi-input-textarea { 1759 | font-size: small; 1760 | } 1761 | 1762 | .node-status-iptables > .main fieldset li > a { 1763 | padding: 0.3rem 0.6rem; 1764 | } 1765 | } 1766 | 1767 | @media screen and (max-width: 1280px) { 1768 | 1769 | .main-left { 1770 | width: calc(0% + 13rem); 1771 | top: 3.5rem; 1772 | height: calc(100% - 3.5rem); 1773 | } 1774 | 1775 | .main-right { 1776 | width: calc(100% - 13rem); 1777 | } 1778 | 1779 | .cbi-tabmenu > li > a, .tabs > li > a { 1780 | padding: 0.2rem 0.5rem; 1781 | } 1782 | 1783 | .panel-title { 1784 | font-size: 1.1rem; 1785 | } 1786 | 1787 | table { 1788 | font-size: 0.7rem !important; 1789 | width: 100% !important; 1790 | } 1791 | 1792 | 1793 | } 1794 | 1795 | @media screen and (max-width: 992px) { 1796 | .main-left { 1797 | width: 0; 1798 | position: fixed; 1799 | z-index: 100; 1800 | } 1801 | 1802 | .main-right { 1803 | width: 100%; 1804 | } 1805 | 1806 | .showSide { 1807 | padding: 0.1rem; 1808 | margin-right: 0.5rem; 1809 | display: inline-block; 1810 | line-height: 51px; 1811 | vertical-align: top; 1812 | } 1813 | 1814 | .showSide:before { 1815 | font-family: 'icomoon'; 1816 | content: "\e20e"; 1817 | font-size: 1.7rem; 1818 | } 1819 | 1820 | .node-main-login .showSide { 1821 | display: none !important; 1822 | } 1823 | 1824 | .cbi-value-title { 1825 | width: 9rem; 1826 | padding-right: 1rem; 1827 | } 1828 | 1829 | .node-network-diagnostics > .main .cbi-map fieldset > div * { 1830 | width: 100% !important; 1831 | } 1832 | 1833 | .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] { 1834 | margin: 3rem 0 0 0 !important; 1835 | } 1836 | 1837 | .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] { 1838 | margin: 0 !important; 1839 | } 1840 | 1841 | .node-network-diagnostics > .main .cbi-map fieldset > div select, 1842 | .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] { 1843 | margin: 1rem 0 0 0; 1844 | } 1845 | 1846 | .node-network-diagnostics > .main .cbi-map fieldset > div { 1847 | width: 100% !important; 1848 | } 1849 | 1850 | #diag-rc-output > pre { 1851 | font-size: 1rem; 1852 | } 1853 | 1854 | .node-main-login > .main .cbi-value-title { 1855 | text-align: left; 1856 | } 1857 | } 1858 | 1859 | @media screen and (max-width: 480px) { 1860 | body { 1861 | font-size: 1rem; 1862 | } 1863 | 1864 | .tabs { 1865 | margin: 0 -1rem; 1866 | } 1867 | 1868 | #maincontent > .container { 1869 | margin: 0 1rem 1.5rem 1rem; 1870 | } 1871 | 1872 | .cbi-value-title { 1873 | width: 100%; 1874 | min-width: 0rem !important; 1875 | display: block; 1876 | margin-top: 1rem; 1877 | margin-bottom: 0.5rem; 1878 | text-align: left; 1879 | } 1880 | 1881 | .cbi-value-field, .cbi-value-description { 1882 | width: 100%; 1883 | } 1884 | 1885 | .cbi-value > .cbi-value-field { 1886 | display: inline-block; 1887 | } 1888 | 1889 | .cbi-tabmenu > li, .tabs > li { 1890 | padding: 0.6rem 0rem; 1891 | } 1892 | 1893 | .cbi-tabmenu > li > a, .tabs > li > a { 1894 | padding: 0.2rem 0.3rem; 1895 | font-size: 0.9rem; 1896 | } 1897 | 1898 | .cbi-page-actions > div > input { 1899 | display: none; 1900 | } 1901 | 1902 | .node-main-login > .main .container { 1903 | padding: 0.5rem 1rem 2rem 1rem; 1904 | } 1905 | 1906 | .node-main-login > .main .cbi-value { 1907 | padding: 0; 1908 | } 1909 | 1910 | .node-main-login > .main form > div:nth-last-child(1) { 1911 | margin-top: 2rem; 1912 | } 1913 | 1914 | .node-main-login > .main .cbi-value-title { 1915 | width: 100% !important; 1916 | font-size: 1.2rem; 1917 | } 1918 | 1919 | .node-main-login > .main fieldset { 1920 | margin: 0; 1921 | padding: 0.5rem; 1922 | } 1923 | 1924 | h2 { 1925 | font-size: 2rem; 1926 | } 1927 | 1928 | .tabs > li > a { 1929 | font-size: 0.9rem; 1930 | } 1931 | 1932 | select, 1933 | input { 1934 | font-size: 0.9rem; 1935 | } 1936 | 1937 | .mobile-hide { 1938 | display: none; 1939 | } 1940 | 1941 | .panel-title { 1942 | font-size: 1.4rem; 1943 | } 1944 | 1945 | .node-system-packages > .main .cbi-value.cbi-value-last > div { 1946 | width: 100% !important; 1947 | } 1948 | 1949 | .node-system-packages > .main .cbi-value .cbi-value-field input { 1950 | width: 100%; 1951 | } 1952 | 1953 | .node-status-iptables > .main div > .cbi-map > form { 1954 | position: static !important; 1955 | margin: 0 0 2rem 0; 1956 | padding: 2rem; 1957 | border: 0; 1958 | font-weight: normal; 1959 | font-style: normal; 1960 | line-height: 1; 1961 | font-family: inherit; 1962 | min-width: inherit; 1963 | overflow-x: auto; 1964 | overflow-y: hidden; 1965 | border-radius: 0; 1966 | background-color: #FFF; 1967 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 1968 | -webkit-overflow-scrolling: touch; 1969 | } 1970 | 1971 | .node-status-iptables > .main div > .cbi-map > form input[type="submit"] { 1972 | width: 100% !important; 1973 | margin: 0; 1974 | } 1975 | 1976 | .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] { 1977 | margin-top: 1rem; 1978 | } 1979 | } 1980 | 1981 | @media screen and (min-width: 992px) { 1982 | .cbi-value input[type="password"], 1983 | .cbi-value input[type="text"] { 1984 | min-width: 20rem; 1985 | } 1986 | 1987 | .cbi-value-field .cbi-input-select { 1988 | min-width: 20rem; 1989 | } 1990 | } 1991 | 1992 | @media screen and (min-width: 1280px) { 1993 | .cbi-value input[type="password"], 1994 | .cbi-value input[type="text"] { 1995 | min-width: 22rem; 1996 | } 1997 | 1998 | .cbi-value-field .cbi-input-select { 1999 | min-width: 22rem; 2000 | } 2001 | } 2002 | 2003 | @media screen and (min-width: 1600px) { 2004 | .cbi-value input[type="password"], 2005 | .cbi-value input[type="text"] { 2006 | min-width: 25rem; 2007 | } 2008 | 2009 | .cbi-value-field .cbi-input-select { 2010 | min-width: 25rem; 2011 | } 2012 | } 2013 | --------------------------------------------------------------------------------