├── Makefile ├── README.md ├── htdocs └── luci-static │ ├── argon_mc1 │ ├── css │ │ ├── purecss.css │ │ └── style.css │ ├── favicon.ico │ ├── fonts │ │ ├── TypoGraphica.eot │ │ ├── TypoGraphica.svg │ │ ├── TypoGraphica.ttf │ │ ├── TypoGraphica.woff │ │ ├── font.eot │ │ ├── font.svg │ │ ├── font.ttf │ │ ├── font.woff │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ ├── ssr.eot │ │ ├── ssr.svg │ │ ├── ssr.ttf │ │ └── ssr.woff │ ├── img │ │ ├── bg1.jpg │ │ ├── bg2.jpg │ │ └── bg3.jpg │ ├── js │ │ ├── jquery.min.js │ │ └── script.js │ └── logo.png │ └── argon_mc2 │ ├── css │ └── style.css │ ├── favicon.ico │ ├── fonts │ ├── font.eot │ ├── font.svg │ ├── font.ttf │ ├── font.woff │ ├── ssr.eot │ ├── ssr.svg │ ├── ssr.ttf │ └── ssr.woff │ ├── js │ ├── jquery.min.js │ └── script.js │ └── logo.png ├── luasrc └── view │ └── themes │ ├── argon_mc1 │ ├── footer.htm │ └── header.htm │ └── argon_mc2 │ ├── footer.htm │ └── header.htm ├── root └── etc │ └── uci-defaults │ └── 30_luci-theme-argon-mc └── screenshot └── 201912.png /Makefile: -------------------------------------------------------------------------------- 1 | # Copyright (C) 2008-2019 Jerrykuku 2 | # Copyright (C) 2019 Lienol 3 | # 4 | # This is free software, licensed under the Apache License, Version 2.0 . 5 | # 6 | 7 | include $(TOPDIR)/rules.mk 8 | 9 | LUCI_TITLE:=Argon Magic Change Theme 10 | LUCI_DEPENDS:= 11 | PKG_VERSION:=1.3 12 | PKG_RELEASE:=05-20191216 13 | 14 | include $(TOPDIR)/feeds/luci/luci.mk 15 | 16 | # call BuildPackage - OpenWrt buildroot signature -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # luci-theme-argon 2 | A new Luci theme for LEDE/OpenWRT 3 | # Screenshot 4 | ![image](https://github.com/sypopo/luci-theme-argon-mc/blob/master/screenshot/201912.png) 5 | 6 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/css/purecss.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v1.0.1 3 | Copyright 2013 Yahoo! 4 | Licensed under the BSD License. 5 | https://github.com/pure-css/pure/blob/master/LICENSE.md 6 | */ 7 | .pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%} -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/favicon.ico -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/TypoGraphica.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/TypoGraphica.eot -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/TypoGraphica.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/TypoGraphica.ttf -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/TypoGraphica.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/TypoGraphica.woff -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/font.eot -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/font.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/font.ttf -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/font.woff -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/icomoon.eot -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/icomoon.ttf -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/icomoon.woff -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/ssr.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/ssr.eot -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/ssr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/ssr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/ssr.ttf -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/fonts/ssr.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/fonts/ssr.woff -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/img/bg1.jpg -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/img/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/img/bg2.jpg -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/img/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/img/bg3.jpg -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/js/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template 3 | * 4 | * luci-theme-argon 5 | * Copyright 2019 Jerrykuku 6 | * 7 | * Have a bug? Please create an issue here on GitHub! 8 | * https://github.com/jerrykuku/luci-theme-argon/issues 9 | * 10 | * luci-theme-bootstrap: 11 | * Copyright 2008 Steven Barth 12 | * Copyright 2008 Jo-Philipp Wich 13 | * Copyright 2012 David Menting 14 | * 15 | * MUI: 16 | * https://github.com/muicss/mui 17 | * 18 | * luci-theme-material: 19 | * https://github.com/LuttyYang/luci-theme-material/ 20 | * 21 | * Agron Theme 22 | * https://demos.creative-tim.com/argon-dashboard/index.html 23 | * 24 | * Login background 25 | * https://unsplash.com/ 26 | * 27 | * Licensed to the public under the Apache License 2.0 28 | */ 29 | 30 | /* 31 | * Font generate by Icomoon 32 | */ 33 | (function ($) { 34 | $(".main > .loading").hide(); 35 | $(".main > .loading").fadeOut(); 36 | 37 | /** 38 | * trim text, Remove spaces, wrap 39 | * @param text 40 | * @returns {string} 41 | */ 42 | function trimText(text) { 43 | return text.replace(/[ \t\n\r]+/g, " "); 44 | } 45 | 46 | 47 | var lastNode = undefined; 48 | var mainNodeName = undefined; 49 | 50 | var nodeUrl = ""; 51 | (function (node) { 52 | if (node[0] == "admin") { 53 | luciLocation = [node[1], node[2]]; 54 | } else { 55 | luciLocation = node; 56 | } 57 | 58 | for (var i in luciLocation) { 59 | nodeUrl += luciLocation[i]; 60 | if (i != luciLocation.length - 1) { 61 | nodeUrl += "/"; 62 | } 63 | } 64 | })(luciLocation); 65 | 66 | /** 67 | * get the current node by Burl (primary) 68 | * @returns {boolean} success? 69 | */ 70 | function getCurrentNodeByUrl() { 71 | var ret = false; 72 | if (!$('body').hasClass('logged-in')) { 73 | luciLocation = ["Main", "Login"]; 74 | return true; 75 | } 76 | $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast"); 77 | $(".main > .main-left > .nav > .slide > .menu").removeClass("active"); 78 | $(".main > .main-left > .nav > .slide > .menu").each(function () { 79 | var ulNode = $(this); 80 | 81 | ulNode.next().find("a").each(function () { 82 | var that = $(this); 83 | var href = that.attr("href"); 84 | 85 | if (href.indexOf(nodeUrl) != -1) { 86 | ulNode.click(); 87 | ulNode.next(".slide-menu").stop(true, true); 88 | lastNode = that.parent(); 89 | lastNode.addClass("active"); 90 | ret = true; 91 | return true; 92 | } 93 | }); 94 | }); 95 | return ret; 96 | } 97 | 98 | /** 99 | * menu click 100 | */ 101 | $(".main > .main-left > .nav > .slide > .menu").click(function () { 102 | var ul = $(this).next(".slide-menu"); 103 | var menu = $(this); 104 | if (!menu.hasClass("exit")) { 105 | $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast"); 106 | $(".main > .main-left > .nav > .slide > .menu").removeClass("active"); 107 | if (!ul.is(":visible")) { 108 | menu.addClass("active"); 109 | ul.addClass("active"); 110 | ul.stop(true).slideDown("fast"); 111 | } else { 112 | ul.stop(true).slideUp("fast", function () { 113 | menu.removeClass("active"); 114 | ul.removeClass("active"); 115 | }); 116 | } 117 | 118 | return false; 119 | } 120 | 121 | }); 122 | 123 | 124 | 125 | 126 | // define what element should be observed by the observer 127 | // and what types of mutations trigger the callback 128 | if ($("#cbi-dhcp-lan-ignore").length > 0) { 129 | observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), { 130 | subtree: true, 131 | attributes: true 132 | }); 133 | } 134 | 135 | /** 136 | * hook menu click and add the hash 137 | */ 138 | $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { 139 | if (lastNode != undefined) 140 | lastNode.removeClass("active"); 141 | $(this).parent().addClass("active"); 142 | $(".main > .loading").fadeIn("fast"); 143 | return true; 144 | }); 145 | 146 | /** 147 | * fix menu click 148 | */ 149 | $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { 150 | if (lastNode != undefined) 151 | lastNode.removeClass("active"); 152 | $(this).addClass("active"); 153 | $(".main > .loading").fadeIn("fast"); 154 | window.location = $($(this).find("a")[0]).attr("href"); 155 | return false; 156 | }); 157 | 158 | /** 159 | * fix submenu click 160 | */ 161 | $("#maincontent > .container > .tabs > li").click(function () { 162 | $(".main > .loading").fadeIn("fast"); 163 | window.location = $($(this).find("a")[0]).attr("href"); 164 | return false; 165 | }); 166 | 167 | /** 168 | * get current node and open it 169 | */ 170 | if (getCurrentNodeByUrl()) { 171 | mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; 172 | mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); 173 | $("body").addClass(mainNodeName); 174 | } 175 | $(".cbi-button-up").val(""); 176 | $(".cbi-button-down").val(""); 177 | 178 | 179 | /** 180 | * hook other "A Label" and add hash to it. 181 | */ 182 | $("#maincontent > .container").find("a").each(function () { 183 | var that = $(this); 184 | var onclick = that.attr("onclick"); 185 | if (onclick == undefined || onclick == "") { 186 | that.click(function () { 187 | var href = that.attr("href"); 188 | if (href.indexOf("#") == -1) { 189 | $(".main > .loading").fadeIn("fast"); 190 | return true; 191 | } 192 | }); 193 | } 194 | }); 195 | 196 | /** 197 | * Sidebar expand 198 | */ 199 | var showSide = false; 200 | $(".showSide").click(function () { 201 | if (showSide) { 202 | $(".darkMask").stop(true).fadeOut("fast"); 203 | $(".main-left").stop(true).animate({ 204 | width: "0" 205 | }, "fast"); 206 | $(".main-right").css("overflow-y", "auto"); 207 | showSide = false; 208 | } else { 209 | $(".darkMask").stop(true).fadeIn("fast"); 210 | $(".main-left").stop(true).animate({ 211 | width: "15rem" 212 | }, "fast"); 213 | $(".main-right").css("overflow-y", "hidden"); 214 | showSide = true; 215 | } 216 | }); 217 | 218 | 219 | $(".darkMask").click(function () { 220 | if (showSide) { 221 | showSide = false; 222 | $(".darkMask").stop(true).fadeOut("fast"); 223 | $(".main-left").stop(true).animate({ 224 | width: "0" 225 | }, "fast"); 226 | $(".main-right").css("overflow-y", "auto"); 227 | } 228 | }); 229 | 230 | $(window).resize(function () { 231 | if ($(window).width() > 921) { 232 | $(".main-left").css("width", ""); 233 | $(".darkMask").stop(true); 234 | $(".darkMask").css("display", "none"); 235 | showSide = false; 236 | } 237 | }); 238 | 239 | /** 240 | * fix legend position 241 | */ 242 | $("legend").each(function () { 243 | var that = $(this); 244 | that.after("" + that.text() + ""); 245 | }); 246 | 247 | $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { 248 | var that = $(this); 249 | if (that.text().trim() == "") { 250 | that.css("display", "none"); 251 | } 252 | }); 253 | 254 | $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () { 255 | //$(".node-main-login > .main > .main-right > .login-bg").addClass("blur"); 256 | }); 257 | $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () { 258 | //$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur"); 259 | }); 260 | 261 | 262 | $(".main-right").focus(); 263 | $(".main-right").blur(); 264 | $("input").attr("size", "0"); 265 | 266 | if (mainNodeName != undefined) { 267 | console.log(mainNodeName); 268 | switch (mainNodeName) { 269 | case "node-status-system_log": 270 | case "node-status-kernel_log": 271 | $("#syslog").focus(function () { 272 | $("#syslog").blur(); 273 | $(".main-right").focus(); 274 | $(".main-right").blur(); 275 | }); 276 | break; 277 | case "node-status-firewall": 278 | var button = $(".node-status-firewall > .main fieldset li > a"); 279 | button.addClass("cbi-button cbi-button-reset a-to-btn"); 280 | break; 281 | case "node-system-reboot": 282 | var button = $(".node-system-reboot > .main > .main-right p > a"); 283 | button.addClass("cbi-button cbi-input-reset a-to-btn"); 284 | break; 285 | } 286 | } 287 | 288 | })(jQuery); 289 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc1/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc1/logo.png -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/css/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Netgear is a clean HTML5 theme for LuCI. It is based on luci-theme-material 3 | * 4 | * luci-theme-material 5 | * Copyright 2015 Lutty Yang 6 | * 7 | * Licensed to the public under the Apache License 2.0 8 | */ 9 | 10 | 11 | /* 12 | * Font generate by Icomoon 13 | * Mod again by Mask 14 | */ 15 | 16 | .pure-g { 17 | letter-spacing: -.31em; 18 | text-rendering: optimizespeed; 19 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 20 | display: -webkit-box; 21 | display: -webkit-flex; 22 | display: -ms-flexbox; 23 | display: flex; 24 | -webkit-flex-flow: row wrap; 25 | -ms-flex-flow: row wrap; 26 | flex-flow: row wrap; 27 | -webkit-align-content: flex-start; 28 | -ms-flex-line-pack: start; 29 | align-content: flex-start 30 | } 31 | 32 | @media all and (-ms-high-contrast:none), 33 | (-ms-high-contrast:active) { 34 | table .pure-g { 35 | display: block 36 | } 37 | } 38 | 39 | .opera-only :-o-prefocus, 40 | .pure-g { 41 | word-spacing: -.43em 42 | } 43 | 44 | .pure-u, 45 | .pure-u-1, 46 | .pure-u-1-1, 47 | .pure-u-1-12, 48 | .pure-u-1-2, 49 | .pure-u-1-24, 50 | .pure-u-1-3, 51 | .pure-u-1-4, 52 | .pure-u-1-5, 53 | .pure-u-1-6, 54 | .pure-u-1-8, 55 | .pure-u-10-24, 56 | .pure-u-11-12, 57 | .pure-u-11-24, 58 | .pure-u-12-24, 59 | .pure-u-13-24, 60 | .pure-u-14-24, 61 | .pure-u-15-24, 62 | .pure-u-16-24, 63 | .pure-u-17-24, 64 | .pure-u-18-24, 65 | .pure-u-19-24, 66 | .pure-u-2-24, 67 | .pure-u-2-3, 68 | .pure-u-2-5, 69 | .pure-u-20-24, 70 | .pure-u-21-24, 71 | .pure-u-22-24, 72 | .pure-u-23-24, 73 | .pure-u-24-24, 74 | .pure-u-3-24, 75 | .pure-u-3-4, 76 | .pure-u-3-5, 77 | .pure-u-3-8, 78 | .pure-u-4-24, 79 | .pure-u-4-5, 80 | .pure-u-5-12, 81 | .pure-u-5-24, 82 | .pure-u-5-5, 83 | .pure-u-5-6, 84 | .pure-u-5-8, 85 | .pure-u-6-24, 86 | .pure-u-7-12, 87 | .pure-u-7-24, 88 | .pure-u-7-8, 89 | .pure-u-8-24, 90 | .pure-u-9-24 { 91 | display: inline-block; 92 | zoom: 1; 93 | letter-spacing: normal; 94 | word-spacing: normal; 95 | vertical-align: top; 96 | text-rendering: auto 97 | } 98 | 99 | .pure-g [class*=pure-u] { 100 | font-family: sans-serif 101 | } 102 | 103 | .pure-u-1-24 { 104 | width: 4.1667% 105 | } 106 | 107 | .pure-u-1-12, 108 | .pure-u-2-24 { 109 | width: 8.3333% 110 | } 111 | 112 | .pure-u-1-8, 113 | .pure-u-3-24 { 114 | width: 12.5% 115 | } 116 | 117 | .pure-u-1-6, 118 | .pure-u-4-24 { 119 | width: 16.6667% 120 | } 121 | 122 | .pure-u-1-5 { 123 | width: 20% 124 | } 125 | 126 | .pure-u-5-24 { 127 | width: 20.8333% 128 | } 129 | 130 | .pure-u-1-4, 131 | .pure-u-6-24 { 132 | width: 25% 133 | } 134 | 135 | .pure-u-7-24 { 136 | width: 29.1667% 137 | } 138 | 139 | .pure-u-1-3, 140 | .pure-u-8-24 { 141 | width: 33.3333% 142 | } 143 | 144 | .pure-u-3-8, 145 | .pure-u-9-24 { 146 | width: 37.5% 147 | } 148 | 149 | .pure-u-2-5 { 150 | width: 40% 151 | } 152 | 153 | .pure-u-10-24, 154 | .pure-u-5-12 { 155 | width: 41.6667% 156 | } 157 | 158 | .pure-u-11-24 { 159 | width: 45.8333% 160 | } 161 | 162 | .pure-u-1-2, 163 | .pure-u-12-24 { 164 | width: 50% 165 | } 166 | 167 | .pure-u-13-24 { 168 | width: 54.1667% 169 | } 170 | 171 | .pure-u-14-24, 172 | .pure-u-7-12 { 173 | width: 58.3333% 174 | } 175 | 176 | .pure-u-3-5 { 177 | width: 60% 178 | } 179 | 180 | .pure-u-15-24, 181 | .pure-u-5-8 { 182 | width: 62.5% 183 | } 184 | 185 | .pure-u-16-24, 186 | .pure-u-2-3 { 187 | width: 66.6667% 188 | } 189 | 190 | .pure-u-17-24 { 191 | width: 70.8333% 192 | } 193 | 194 | .pure-u-18-24, 195 | .pure-u-3-4 { 196 | width: 75% 197 | } 198 | 199 | .pure-u-19-24 { 200 | width: 79.1667% 201 | } 202 | 203 | .pure-u-4-5 { 204 | width: 80% 205 | } 206 | 207 | .pure-u-20-24, 208 | .pure-u-5-6 { 209 | width: 83.3333% 210 | } 211 | 212 | .pure-u-21-24, 213 | .pure-u-7-8 { 214 | width: 87.5% 215 | } 216 | 217 | .pure-u-11-12, 218 | .pure-u-22-24 { 219 | width: 91.6667% 220 | } 221 | 222 | .pure-u-23-24 { 223 | width: 95.8333% 224 | } 225 | 226 | .pure-u-1, 227 | .pure-u-1-1, 228 | .pure-u-24-24, 229 | .pure-u-5-5 { 230 | width: 100% 231 | } 232 | 233 | @font-face { 234 | font-family: 'icomoon'; 235 | src: url('../fonts/font.eot'); 236 | src: url('../fonts/font.eot') format('embedded-opentype'), url('../fonts/font.ttf') format('truetype'), url('../fonts/font.woff') format('woff'), url('../fonts/font.svg') format('svg'); 237 | font-weight: normal; 238 | font-style: normal; 239 | } 240 | 241 | @font-face { 242 | font-family: 'ssr'; 243 | src: url('../fonts/ssr.eot?5zoxsi'); 244 | src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), url('../fonts/ssr.ttf?5zoxsi') format('truetype'), url('../fonts/ssr.woff?5zoxsi') format('woff'), url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); 245 | font-weight: normal; 246 | font-style: normal; 247 | } 248 | 249 | [class^="icon-"], 250 | [class*=" icon-"] { 251 | /* use !important to prevent issues with browser extensions that change fonts */ 252 | font-family: 'ssr' !important; 253 | speak: none; 254 | font-style: normal; 255 | font-weight: normal; 256 | font-variant: normal; 257 | text-transform: none; 258 | line-height: 1; 259 | /* Better Font Rendering =========== */ 260 | -webkit-font-smoothing: antialiased; 261 | -moz-osx-font-smoothing: grayscale; 262 | } 263 | 264 | .icon-dashboard:before { 265 | content: "\e906"; 266 | } 267 | 268 | .icon-logout:before { 269 | content: "\e907"; 270 | } 271 | 272 | .icon-Network:before { 273 | content: "\e908"; 274 | } 275 | 276 | .icon-services:before { 277 | content: "\e909"; 278 | } 279 | 280 | .icon-system:before { 281 | content: "\e90a"; 282 | } 283 | 284 | .icon-vpn:before { 285 | content: "\e90b"; 286 | } 287 | 288 | .icon-storage:before { 289 | content: "\e90c"; 290 | } 291 | 292 | .icon-statistics:before { 293 | content: "\e90d"; 294 | } 295 | 296 | .icon-delete:before { 297 | content: "\e900"; 298 | } 299 | 300 | .icon-edit:before { 301 | content: "\e901"; 302 | } 303 | 304 | .icon-ok:before { 305 | content: "\e902"; 306 | } 307 | 308 | .icon-loading:before { 309 | content: "\e903"; 310 | } 311 | 312 | .icon-switch:before { 313 | content: "\e904"; 314 | } 315 | 316 | .icon-error:before { 317 | content: "\e905"; 318 | } 319 | 320 | input[type=checkbox], 321 | input[type=radio] { 322 | width: auto; 323 | margin: 0; 324 | vertical-align: middle; 325 | cursor: pointer; 326 | } 327 | 328 | .cbi-button-up, 329 | .cbi-button-down, 330 | .cbi-value-helpicon, 331 | .showSide, 332 | .main>.loading>span { 333 | font-family: 'icomoon' !important; 334 | speak: none; 335 | font-style: normal !important; 336 | font-weight: normal !important; 337 | font-variant: normal !important; 338 | text-transform: none !important; 339 | line-height: 1; 340 | -webkit-font-smoothing: antialiased; 341 | -moz-osx-font-smoothing: grayscale; 342 | } 343 | 344 | * { 345 | margin: 0; 346 | padding: 0; 347 | box-sizing: border-box; 348 | } 349 | 350 | .left { 351 | text-align: left !important; 352 | } 353 | 354 | .right { 355 | text-align: right !important; 356 | } 357 | 358 | .center { 359 | text-align: center !important; 360 | } 361 | 362 | .top { 363 | vertical-align: top !important; 364 | } 365 | 366 | .middle { 367 | vertical-align: middle !important; 368 | } 369 | 370 | .bottom { 371 | vertical-align: bottom !important; 372 | } 373 | 374 | .pull-left { 375 | float: left !important; 376 | } 377 | 378 | .pull-right { 379 | float: right !important; 380 | } 381 | 382 | .inline { 383 | display: inline; 384 | } 385 | 386 | .hidden { 387 | display: none; 388 | } 389 | 390 | a { 391 | text-decoration: none; 392 | } 393 | 394 | .h1, 395 | .h2, 396 | .h3, 397 | .h4, 398 | .h5, 399 | .h6, 400 | h1, 401 | h2, 402 | h3, 403 | h4, 404 | h5, 405 | h6 { 406 | font-family: inherit; 407 | font-weight: 400; 408 | line-height: 1.1; 409 | color: inherit; 410 | } 411 | 412 | html { 413 | -webkit-text-size-adjust: 100%; 414 | -ms-text-size-adjust: 100%; 415 | } 416 | 417 | body { 418 | font-size: 0.8rem; 419 | background-color: #f9f9f9; 420 | } 421 | 422 | html, 423 | body { 424 | margin: 0px; 425 | padding: 0px; 426 | height: 100%; 427 | font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; 428 | } 429 | 430 | body div { 431 | line-height: 150%; 432 | } 433 | 434 | select { 435 | padding: 0.36rem 0.8rem; 436 | color: #555; 437 | background-color: #fff; 438 | background-image: none; 439 | border: 1px solid #ccc; 440 | } 441 | 442 | select, 443 | input { 444 | /* font-size: .875rem; 445 | transition: all .15s ease-in-out; 446 | line-height: 1.5; 447 | height: calc(2.75rem + 2px); 448 | padding: .625rem .75rem; 449 | transition: all .15s cubic-bezier(.68,-.55,.265,1.55); 450 | color: #8898aa; 451 | border: 1px solid #dee2e6; 452 | border-radius: .25rem; 453 | background-color: #fff; 454 | background-clip: padding-box; 455 | box-shadow: 0 3px 2px rgba(233,236,239,.05); 456 | margin:0.25rem; 457 | color: #76838f; */ 458 | padding: 6px 10px; 459 | margin: 0; 460 | height: 34px; 461 | line-height: normal; 462 | font-size: 10pt; 463 | font-family: "Roboto", sans-serif, Helvetica, Arial, sans-serif; 464 | border: 1px solid #e4eaec; 465 | background-color: #fff; 466 | transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease; 467 | -webkit-transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease; 468 | outline-style: none; 469 | vertical-align: baseline; 470 | border-radius: 3px; 471 | } 472 | 473 | select:not([multiple="multiple"]):focus, 474 | input:focus { 475 | border-color: #0099CC; 476 | } 477 | 478 | select[multiple="multiple"] { 479 | height: auto; 480 | } 481 | 482 | code { 483 | color: #0099CC; 484 | } 485 | 486 | abbr { 487 | color: #005470; 488 | text-decoration: underline; 489 | cursor: help; 490 | } 491 | 492 | hr { 493 | margin: 1rem 0; 494 | border-color: #EEE; 495 | opacity: 0.1; 496 | } 497 | 498 | header, 499 | .main { 500 | width: 100%; 501 | position: absolute; 502 | } 503 | 504 | header { 505 | height: 4rem; 506 | box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.09), 0px 3px 13px 0px #423b7852; 507 | transition: box-shadow .2s; 508 | float: left; 509 | position: fixed; 510 | z-index: 101; 511 | } 512 | 513 | footer { 514 | text-align: right; 515 | padding: 1rem; 516 | color: #aaa; 517 | font-size: 0.8rem; 518 | text-shadow: 0px 0px 2px #BBB; 519 | } 520 | 521 | footer>a { 522 | color: #aaa; 523 | text-decoration: none; 524 | } 525 | 526 | .main { 527 | top: 4rem; 528 | bottom: 0rem; 529 | position: relative; 530 | height: 100%; 531 | height: calc(100% - 4rem); 532 | } 533 | 534 | .main>.loading { 535 | position: fixed; 536 | width: 100%; 537 | height: 100%; 538 | z-index: 2000; 539 | display: flex; 540 | align-items: center; 541 | justify-content: center; 542 | background-color: #f8f9fe; 543 | top: 0; 544 | } 545 | 546 | .main>.loading>span { 547 | display: block; 548 | text-align: center; 549 | margin-top: 2rem; 550 | color: #525f7f; 551 | font-size: 2rem; 552 | } 553 | 554 | .main>.loading>span>.loading-img:before { 555 | content: "\e603"; 556 | } 557 | 558 | .main>.loading>span>.loading-img { 559 | animation: anim-rotate 2s infinite linear; 560 | margin-right: 0.4rem; 561 | display: inline-block; 562 | } 563 | 564 | @keyframes anim-rotate { 565 | 0% { 566 | -webkit-transform: rotate(0); 567 | -ms-transform: rotate(0); 568 | transform: rotate(0); 569 | } 570 | 100% { 571 | -webkit-transform: rotate(360deg); 572 | -ms-transform: rotate(360deg); 573 | transform: rotate(360deg) 574 | } 575 | } 576 | 577 | [id^="cbi-apply-"] { 578 | position: absolute; 579 | z-index: 200; 580 | left: 50%; 581 | top: 50%; 582 | font-size: 1.2rem; 583 | border-color: #525f7f; 584 | text-align: center; 585 | width: 300px; 586 | height: 180px; 587 | transform: translate(-50%, -50%); 588 | } 589 | 590 | [id^="cbi-apply-"]>.panel-title { 591 | border-bottom: none; 592 | } 593 | 594 | [id^="cbi-apply-"]>img { 595 | margin-top: 1rem; 596 | } 597 | 598 | [id^="cbi-apply-"]>[id^="cbi-apply-"] { 599 | height: auto; 600 | font-size: 1rem; 601 | display: block; 602 | top: 80%; 603 | } 604 | 605 | .main-left { 606 | float: left; 607 | top: 4rem; 608 | width: 15%; 609 | width: calc(0% + 15rem); 610 | height: 100%; 611 | height: calc(100% - 4rem); 612 | background-color: #161a33!important; 613 | box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); 614 | overflow-x: auto; 615 | position: fixed; 616 | } 617 | 618 | .main-right { 619 | width: 85%; 620 | width: calc(100% - 15rem); 621 | float: right; 622 | height: 100%; 623 | background-color: #ffffff; 624 | } 625 | 626 | .main-right>#maincontent { 627 | background-color: #ffffff; 628 | } 629 | 630 | header { 631 | background: linear-gradient(87deg, #32325d 0, #825ee4 100%)!important; 632 | color: white; 633 | } 634 | 635 | header>.container { 636 | margin-top: 0.5rem; 637 | padding: 0.5rem 1rem 0 1rem; 638 | } 639 | 640 | header>.container>.brand { 641 | font-size: 1.5rem; 642 | color: white; 643 | text-decoration: none; 644 | cursor: default; 645 | /* vertical-align: text-bottom; */ 646 | } 647 | 648 | .danger { 649 | background-color: #f5365c !important; 650 | color: black; 651 | } 652 | 653 | .warning { 654 | background-color: #fb6340 !important; 655 | color: black; 656 | } 657 | 658 | .success { 659 | background-color: #2dce89 !important; 660 | color: black; 661 | } 662 | 663 | .errorbox, 664 | .alert-message { 665 | margin: 2rem 0 0 0; 666 | padding: 2rem; 667 | border: 0; 668 | font-weight: normal; 669 | font-style: normal; 670 | line-height: 1; 671 | font-family: inherit; 672 | min-width: inherit; 673 | overflow: auto; 674 | border-radius: 0; 675 | background-color: #FFF; 676 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 677 | } 678 | 679 | .errorbox { 680 | color: #fff; 681 | background-color: #f0ad4e; 682 | border-color: #eea236; 683 | } 684 | 685 | .error { 686 | color: red; 687 | } 688 | 689 | #maincontent>.container>div:nth-child(1).alert-message.warning>a { 690 | font: inherit; 691 | overflow: visible; 692 | text-transform: none; 693 | display: inline-block; 694 | margin-bottom: 0; 695 | font-weight: 400; 696 | text-align: center; 697 | white-space: nowrap; 698 | vertical-align: middle; 699 | touch-action: manipulation; 700 | cursor: pointer; 701 | -webkit-user-select: none; 702 | -moz-user-select: none; 703 | -ms-user-select: none; 704 | user-select: none; 705 | background-image: none; 706 | min-width: 6rem; 707 | padding: 0.5rem 1rem; 708 | font-size: 0.9rem; 709 | line-height: 1.42857143; 710 | color: #fff; 711 | background-color: #5bc0de; 712 | border-color: #46b8da; 713 | margin-top: 2rem; 714 | text-decoration: inherit; 715 | } 716 | 717 | .main>.main-left>.nav { 718 | margin-top: 0.5rem; 719 | } 720 | 721 | .main>.main-left>.nav>li a { 722 | color: #8898aa; 723 | display: block; 724 | } 725 | 726 | .main>.main-left>.nav>li:nth-last-child(1) { 727 | margin-top: 2rem; 728 | font-size: 1.2rem; 729 | } 730 | 731 | .main>.main-left>.nav>li { 732 | padding: 0.5rem 1rem; 733 | cursor: pointer; 734 | } 735 | 736 | .main>.main-left>.nav>.slide { 737 | padding: 0; 738 | } 739 | 740 | .main>.main-left>.nav>.slide>ul { 741 | display: none; 742 | } 743 | 744 | .main>.main-left>.nav>.slide>.menu { 745 | display: block; 746 | margin: 0.1rem .5rem; 747 | padding: .675rem 0 .675rem 3rem; 748 | border-radius: .375rem; 749 | text-decoration: none; 750 | cursor: default; 751 | font-size: 1rem; 752 | transition: all 0.2s; 753 | border-left: transparent 3px solid; 754 | } 755 | 756 | .main>.main-left>.nav>li:hover, 757 | .main>.main-left>.nav>.slide>.menu:hover { 758 | color: #e8c6c6; 759 | background: #525f7f; 760 | } 761 | 762 | .main>.main-left>.nav>.slide:hover { 763 | background: none; 764 | } 765 | 766 | .main>.main-left>.nav>.slide>.menu:hover { 767 | /* border-left: #ffffff 3px solid; */ 768 | } 769 | 770 | .main>.main-left>.nav>.slide>.menu:before { 771 | font-family: 'ssr' !important; 772 | speak: none; 773 | font-style: normal; 774 | font-weight: normal; 775 | font-variant: normal; 776 | text-transform: none; 777 | line-height: 1; 778 | /* Better Font Rendering =========== */ 779 | -webkit-font-smoothing: antialiased; 780 | -moz-osx-font-smoothing: grayscale; 781 | position: absolute; 782 | left: 1rem; 783 | padding-top: 3px; 784 | } 785 | 786 | .main > .main-left > .nav > .slide > .menu[data-title= Status ]:before{ 787 | content: "\e906"; 788 | color: #5e72e4!important; 789 | } 790 | .main > .main-left > .nav > .slide > .menu[data-title= System ]:before{ 791 | content: "\e90a"; 792 | color: #fb6340!important; 793 | } 794 | .main > .main-left > .nav > .slide > .menu[data-title= Services ]:before{ 795 | content: "\e909"; 796 | color: #11cdef!important; 797 | } 798 | .main > .main-left > .nav > .slide > .menu[data-title= NAS ]:before{ 799 | content: "\e90c"; 800 | color: #f3a4b5!important; 801 | } 802 | .main > .main-left > .nav > .slide > .menu[data-title= Control ]:before{ 803 | content: "\e90e"; 804 | color: #f3a4b5!important; 805 | } 806 | .main > .main-left > .nav > .slide > .menu[data-title= VPN ]:before{ 807 | content: "\e90b"; 808 | color: #6de9ea!important; 809 | } 810 | .main > .main-left > .nav > .slide > .menu[data-title= Network ]:before{ 811 | content: "\e908"; 812 | color: #8965e0!important; 813 | } 814 | .main > .main-left > .nav > .slide > .menu[data-title= Bandwidth_Monitor ]:before{ 815 | content: "\e90d"; 816 | color: #2dce89!important; 817 | } 818 | .main > .main-left > .nav > .slide > .menu[data-title= Logout ]:before{ 819 | content: "\e907"; 820 | color: #32325d!important; 821 | } 822 | 823 | header>.container>.brand:before { 824 | font-family: 'ssr' !important; 825 | speak: none; 826 | font-style: normal; 827 | font-weight: normal; 828 | font-variant: normal; 829 | text-transform: none; 830 | line-height: 1; 831 | /* Better Font Rendering =========== */ 832 | -webkit-font-smoothing: antialiased; 833 | -moz-osx-font-smoothing: grayscale; 834 | content: "\e90e"; 835 | margin-right: 0.5rem; 836 | } 837 | 838 | .main>.main-left>.nav>.slide>.menu.active { 839 | color: #e8c6c6; 840 | background: #7764e43b; 841 | } 842 | 843 | .main>.main-left>.nav>.slide>.slide-menu>li {} 844 | 845 | .main>.main-left>.nav>.slide>.slide-menu>.active {} 846 | 847 | .main>.main-left>.nav>.slide>.slide-menu>li>a { 848 | margin: 0.1rem .5rem; 849 | padding: 0.5rem 1.5rem 0.5rem 2.5rem; 850 | text-decoration: none; 851 | border-radius: .375rem; 852 | white-space: nowrap; 853 | color: #be9e9e; 854 | border-left: transparent 12px solid; 855 | transition: all 0.2s; 856 | } 857 | 858 | .main>.main-left>.nav>.slide>.slide-menu>.active>a { 859 | /* border-left: #ffffff 15px solid; */ 860 | color: #FF9800; 861 | background-color: #607d8b54; 862 | } 863 | 864 | .main>.main-left>.nav>.slide>.slide-menu>li>a:hover { 865 | /* border-left: #ffffff 3px solid; */ 866 | color: white; 867 | background: #525f7f; 868 | } 869 | 870 | .main>.main-left>.nav>.slide>.slide-menu>.active>a:hover { 871 | /* border-left: #ffffff 3px solid; */ 872 | color: white; 873 | background-color: #525f7f; 874 | cursor: hand; 875 | } 876 | 877 | li { 878 | list-style-type: none; 879 | } 880 | 881 | #maincontent>.container { 882 | margin: 0 2rem 1rem 2rem; 883 | } 884 | 885 | h1 { 886 | font-size: 2rem; 887 | padding: 0.5rem; 888 | border-bottom: 1px solid #eee; 889 | } 890 | 891 | h2 { 892 | margin: 1rem 0 0 0; 893 | font-size: 1.5rem; 894 | padding: 0.5rem; 895 | /* border-bottom: 1px solid #eee; */ 896 | } 897 | 898 | h3 { 899 | font-size: 1.4rem; 900 | width: 100%; 901 | display: block; 902 | margin-bottom: 0; 903 | padding: 0.5rem; 904 | border-bottom: 1px solid rgba(0, 0, 0, .05); 905 | background-color: #fff; 906 | line-height: 1.5; 907 | margin-bottom: 0rem; 908 | letter-spacing: 0.1rem; 909 | color: #32325d; 910 | font-weight: bold; 911 | } 912 | 913 | h4 {} 914 | 915 | 916 | /* 917 | div.cbi-section, 918 | fieldset { 919 | margin: 2rem 0 0 0; 920 | padding: 0; 921 | font-weight: normal; 922 | font-style: normal; 923 | line-height: 1; 924 | font-family: inherit; 925 | 926 | min-width: inherit; 927 | overflow-x: auto; 928 | overflow-y: hidden; 929 | 930 | border: 1px solid rgba(0,0,0,.05); 931 | border-radius: .375rem; 932 | background-color: #fff; 933 | box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); 934 | 935 | -webkit-overflow-scrolling: touch; 936 | } */ 937 | 938 | div.cbi-section, 939 | fieldset { 940 | margin: 20px 0; 941 | padding: 1rem; 942 | border: 1px; 943 | font-weight: normal; 944 | font-style: normal; 945 | line-height: 1; 946 | font-family: inherit; 947 | min-width: inherit; 948 | overflow-x: hidden; 949 | overflow-y: hidden; 950 | border-radius: 4px; 951 | background-color: #FFF; 952 | box-shadow: 0px 0px 0px 0px #eee, 0px 0px 10px 0px #eee, 0px 0px 5px rgba(0,0,0,0); 953 | } 954 | 955 | .cbi-map-descr+div.cbi-section, 956 | .cbi-map-descr+fieldset { 957 | margin-top: 1rem; 958 | } 959 | 960 | div.cbi-section>legend, 961 | fieldset>legend { 962 | display: none !important; 963 | } 964 | 965 | div.cbi-section>div.cbi-section, 966 | fieldset>fieldset { 967 | margin: 0; 968 | padding: 0; 969 | border: none; 970 | box-shadow: none; 971 | } 972 | 973 | .panel-title { 974 | width: 100%; 975 | display: block; 976 | margin-bottom: 0; 977 | padding: 5px; 978 | border-bottom: 0px solid rgba(0, 0, 0, .05); 979 | background-color: #fff; 980 | line-height: 1.5; 981 | margin-bottom: 0rem; 982 | letter-spacing: 0.1rem; 983 | color: #32325d; 984 | font-weight: bold; 985 | } 986 | 987 | table, 988 | .table { 989 | border-spacing: 0; 990 | border-collapse: collapse; 991 | width: 100%; 992 | border: 0px solid #eee; 993 | display: table; 994 | margin: 0 0 10px !important; 995 | position: relative; 996 | } 997 | 998 | .table[width="33%"], 999 | .th[width="33%"], 1000 | .td[width="33%"] { 1001 | width: 33%; 1002 | } 1003 | 1004 | .table[width="100%"], 1005 | .th[width="100%"], 1006 | .td[width="100%"] { 1007 | width: 100%; 1008 | } 1009 | 1010 | 1011 | /* table>tbody>tr>td, 1012 | table>tfoot>tr>td, 1013 | table>tfoot>tr>th, 1014 | table>thead>tr>td, 1015 | table>thead>tr>th { 1016 | table>thead>tr>th, 1017 | .table>.tr>.td, 1018 | .table>.tr>.th, 1019 | .table>.tr>.td, 1020 | .table>.tr>.th, 1021 | .table>.tr>.td, 1022 | .table>.tr>.th { 1023 | padding: 6px; 1024 | line-height: 1.5; 1025 | border-top: 0px dashed #EEE; 1026 | white-space: nowrap; 1027 | } */ 1028 | 1029 | table>tbody>tr>td, 1030 | table>tfoot>tr>td, 1031 | table>thead>tr>td, 1032 | .table>.tr>.td, 1033 | .table>.tr>.td, 1034 | .table>.tr>.td { 1035 | font-size: .8125rem; 1036 | white-space: nowrap; 1037 | color: #32325d; 1038 | padding: 6px; 1039 | line-height: 1.5; 1040 | border-top: 0px solid #ddd; 1041 | white-space: nowrap; 1042 | } 1043 | 1044 | table>tbody>tr>th, 1045 | table>tfoot>tr>th, 1046 | table>thead>tr>th, 1047 | .table>.tr>.th, 1048 | .table>.tr>.th, 1049 | .table>.tr>.th { 1050 | padding-right: 1.5rem; 1051 | padding-left: 1.5rem; 1052 | color: #8898aa; 1053 | background-color: #f6f9fc; 1054 | font-size: .65rem; 1055 | padding-top: .75rem; 1056 | padding-bottom: .75rem; 1057 | letter-spacing: 1px; 1058 | text-transform: uppercase; 1059 | padding: 6px; 1060 | line-height: 1.5; 1061 | white-space: nowrap; 1062 | } 1063 | 1064 | .table .th, 1065 | .table .td { 1066 | display: table-cell; 1067 | vertical-align: middle; 1068 | } 1069 | 1070 | .table .tr.placeholder { 1071 | height: calc(3em + 20px); 1072 | } 1073 | 1074 | .table .tr.placeholder>.td { 1075 | position: absolute; 1076 | left: 0; 1077 | right: 0; 1078 | bottom: 0; 1079 | text-align: center; 1080 | line-height: 3em; 1081 | } 1082 | 1083 | .td.cbi-section-actions>* { 1084 | display: flex; 1085 | } 1086 | 1087 | .td.cbi-section-actions>*>*, 1088 | .td.cbi-section-actions>*>form>* { 1089 | flex: 1 1 4em; 1090 | margin: 0 1px; 1091 | } 1092 | 1093 | .td.cbi-section-actions>*>.cbi-button-up, 1094 | .cbi-input-up { 1095 | background: unset; 1096 | } 1097 | 1098 | .td.cbi-section-actions>*>.cbi-button-down, 1099 | .cbi-input-down { 1100 | background: unset; 1101 | } 1102 | 1103 | tr, 1104 | .tr { 1105 | display: table-row; 1106 | } 1107 | 1108 | .cbi-section-table-cell { 1109 | text-align: center; 1110 | } 1111 | 1112 | .cbi-section-table-row { 1113 | text-align: center; 1114 | } 1115 | 1116 | div.cbi-section>.table>.tr:nth-of-type(2n), 1117 | fieldset>table>tbody>tr:nth-of-type(2n) { 1118 | background-color: #fbfbfb; 1119 | } 1120 | 1121 | 1122 | /* fix progress bar */ 1123 | 1124 | #swaptotal>div, 1125 | #swapfree>div, 1126 | #swapcache>div, 1127 | #memfree>div, 1128 | #membuff>div, 1129 | #conns>div, 1130 | #memcache>div, 1131 | #memtotal>div, 1132 | #cpu_free>div { 1133 | width: 100% !important; 1134 | height: 1.6rem !important; 1135 | line-height: 1.6rem; 1136 | border-radius: .25rem; 1137 | } 1138 | 1139 | #swaptotal>div>div, 1140 | #swapfree>div>div, 1141 | #swapcache>div>div, 1142 | #memfree>div>div, 1143 | #membuff>div>div, 1144 | #conns>div>div, 1145 | #memcache>div>div, 1146 | #memtotal>div>div, 1147 | #cpu_free>div>div { 1148 | height: 100% !important; 1149 | background-color: #825ee4 !important; 1150 | } 1151 | 1152 | 1153 | /* fix multiple table */ 1154 | 1155 | table table { 1156 | border: none; 1157 | } 1158 | 1159 | .cbi-value-field table { 1160 | border: none; 1161 | } 1162 | 1163 | .td>.table>.tr>.td, 1164 | td>table>tbody>tr>td { 1165 | border: none; 1166 | } 1167 | 1168 | .cbi-value-field>.table>.tr.td, 1169 | .cbi-value-field>table>tbody>tr>td { 1170 | border: none; 1171 | } 1172 | 1173 | 1174 | /* button style */ 1175 | 1176 | .cbi-button { 1177 | -webkit-appearance: none; 1178 | text-transform: uppercase; 1179 | color: rgba(0, 0, 0, 0.87); 1180 | background-color: #F0F0F0; 1181 | transition: all 0.2s ease-in-out; 1182 | display: inline-block; 1183 | padding: 0 0.8rem; 1184 | border: none; 1185 | border-radius: 0.2rem; 1186 | cursor: pointer; 1187 | -ms-touch-action: manipulation; 1188 | touch-action: manipulation; 1189 | background-image: none; 1190 | text-align: center; 1191 | vertical-align: middle; 1192 | white-space: nowrap; 1193 | -webkit-user-select: none; 1194 | -moz-user-select: none; 1195 | -ms-user-select: none; 1196 | user-select: none; 1197 | font-size: 0.8rem; 1198 | width: auto !important; 1199 | } 1200 | 1201 | .cbi-button:hover, 1202 | .cbi-button:focus, 1203 | .cbi-button:active { 1204 | color: rgba(0, 0, 0, 0.87); 1205 | outline: 0; 1206 | text-decoration: none; 1207 | color: rgba(0, 0, 0, 0.87); 1208 | } 1209 | 1210 | .cbi-button:hover, 1211 | .cbi-button:focus { 1212 | box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); 1213 | } 1214 | 1215 | .cbi-button:active { 1216 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 1217 | } 1218 | 1219 | .cbi-button:disabled { 1220 | cursor: not-allowed; 1221 | pointer-events: none; 1222 | opacity: 0.60; 1223 | box-shadow: none; 1224 | } 1225 | 1226 | form.inline+form.inline, 1227 | .cbi-button+.cbi-button { 1228 | margin-left: 0.6rem; 1229 | } 1230 | 1231 | .cbi-button-reset, 1232 | .cbi-input-remove { 1233 | color: #fff !important; 1234 | background-color: #2dce89 !important; 1235 | border-color: #2dce89 !important; 1236 | } 1237 | 1238 | .cbi-input-find, 1239 | .cbi-input-save, 1240 | .cbi-button-add, 1241 | .cbi-button-save, 1242 | .cbi-button-find, 1243 | .cbi-input-reload, 1244 | .cbi-button-reload { 1245 | color: #fff !important; 1246 | background-color: #825ee4 !important; 1247 | border-color: #825ee4 !important; 1248 | } 1249 | 1250 | .cbi-input-apply, 1251 | .cbi-button-apply, 1252 | .cbi-button-edit { 1253 | color: #fff !important; 1254 | background-color: #4d418b !important; 1255 | border-color: #525f7f !important; 1256 | } 1257 | 1258 | .cbi-input-reset, 1259 | .cbi-section-remove>.cbi-button, 1260 | .cbi-button-remove { 1261 | color: #fff !important; 1262 | background-color: #fb6340 !important; 1263 | border-color: #fb6340 !important; 1264 | } 1265 | 1266 | .a-to-btn { 1267 | text-decoration: none; 1268 | } 1269 | 1270 | 1271 | /* table */ 1272 | 1273 | .tabs { 1274 | /* margin: 0 -2rem; */ 1275 | margin-top: 1rem; 1276 | /* padding-left: 0.5rem; */ 1277 | background-color: #FFFFFF; 1278 | } 1279 | 1280 | .cbi-tabmenu>li, 1281 | .tabs>li { 1282 | font-size: 1rem; 1283 | border-top-left-radius: 0.25rem; 1284 | border-top-right-radius: 0.25rem; 1285 | border-bottom-left-radius: 0.25rem; 1286 | border-bottom-right-radius: 0.25rem; 1287 | display: inline-block; 1288 | padding: 0.6rem; 1289 | } 1290 | 1291 | .cbi-tabmenu>li>a, 1292 | .tabs>li>a { 1293 | text-decoration: none; 1294 | color: #8898aa; 1295 | padding: 0.5rem 0.8rem; 1296 | } 1297 | 1298 | .cbi-tabmenu>li>a { 1299 | color: #525f7f; 1300 | } 1301 | 1302 | .tabs>li[class~="active"], 1303 | .tabs>li:hover { 1304 | background-color: #413a76; 1305 | border-bottom: 0.1rem solid #fb6340; 1306 | } 1307 | 1308 | .tabs>li[class~="active"]>a { 1309 | color: #e8c6c6; 1310 | } 1311 | 1312 | .tabs>li:hover { 1313 | border-bottom: 0.1rem solid #fb6340; 1314 | } 1315 | 1316 | .cbi-tabmenu { 1317 | color: white; 1318 | } 1319 | 1320 | .cbi-tabmenu>li:hover { 1321 | background-color: #F1F1F1; 1322 | } 1323 | 1324 | .cbi-tabmenu>li:hover>a { 1325 | color: #525f7f; 1326 | } 1327 | 1328 | .cbi-tabmenu>li[class~="cbi-tab"] { 1329 | background-color: #413a76; 1330 | } 1331 | 1332 | .cbi-tabmenu>li[class~="cbi-tab"]>a { 1333 | color: #be9e9e; 1334 | } 1335 | 1336 | .cbi-tabmenu { 1337 | background-color: #f9f9f9; 1338 | } 1339 | 1340 | .cbi-section-remove:nth-of-type(2n), 1341 | .cbi-section-node:nth-of-type(2n) { 1342 | /* background-color: #f9f9f9; */ 1343 | } 1344 | 1345 | .cbi-section-node-tabbed { 1346 | padding: 0; 1347 | margin-top: 0; 1348 | } 1349 | 1350 | .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { 1351 | background-color: #f9f9f9; 1352 | } 1353 | 1354 | .cbi-value-field { 1355 | display: table-cell; 1356 | padding-top: 0.5em; 1357 | } 1358 | 1359 | .cbi-value-helpicon>img { 1360 | display: none; 1361 | } 1362 | 1363 | .cbi-value-helpicon:before { 1364 | content: "\f059"; 1365 | } 1366 | 1367 | .cbi-value-description { 1368 | font-size: small; 1369 | opacity: 0.5; 1370 | display: unset; 1371 | } 1372 | 1373 | .cbi-value-description img { 1374 | vertical-align: sub; 1375 | } 1376 | 1377 | .cbi-value-title { 1378 | display: table-cell; 1379 | text-align: right; 1380 | width: 23rem; 1381 | line-height: unset; 1382 | padding-top: 0.5em; 1383 | margin-right: 1.5em; 1384 | float: left; 1385 | color: #404040; 1386 | /* white-space: nowrap; 1387 | overflow: hidden; 1388 | text-overflow: clip; */ 1389 | } 1390 | 1391 | .cbi-value { 1392 | padding: 0.3rem 1rem; 1393 | width: 100%; 1394 | clear: both; 1395 | } 1396 | 1397 | .cbi-section-table-descr>.cbi-section-table-cell, 1398 | .cbi-section-table-titles>.cbi-section-table-cell { 1399 | border: none; 1400 | } 1401 | 1402 | .cbi-rowstyle-2 { 1403 | background-color: #f9f9f9; 1404 | } 1405 | 1406 | .cbi-rowstyle-2 .cbi-button-up, 1407 | .cbi-rowstyle-2 .cbi-button-down { 1408 | background-color: #FFF !important; 1409 | } 1410 | 1411 | .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { 1412 | width: auto !important; 1413 | } 1414 | 1415 | 1416 | /* desc */ 1417 | 1418 | .cbi-section-descr, 1419 | .cbi-map-descr { 1420 | padding: 0.5rem; 1421 | color: #999; 1422 | font-size: small; 1423 | } 1424 | 1425 | .cbi-page-actions { 1426 | border-top: 1px solid #eee; 1427 | padding-top: 1rem; 1428 | text-align: right; 1429 | } 1430 | 1431 | 1432 | /* input */ 1433 | 1434 | .cbi-value input[type="password"], 1435 | .cbi-value input[type="text"] { 1436 | min-width: unset; 1437 | } 1438 | 1439 | 1440 | /* select */ 1441 | 1442 | .cbi-value-field .cbi-input-select { 1443 | min-width: 15rem; 1444 | } 1445 | 1446 | .ifacebadge { 1447 | display: inline-flex; 1448 | border-bottom: 1px solid #CCCCCC; 1449 | padding: 0.5rem 1rem; 1450 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 1451 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 1452 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 1453 | } 1454 | 1455 | td>.ifacebadge { 1456 | background-color: #F0F0F0; 1457 | font-size: 0.9rem; 1458 | } 1459 | 1460 | .ifacebadge>img { 1461 | float: right; 1462 | margin: 0 0.3rem; 1463 | } 1464 | 1465 | .ifacebox { 1466 | text-align: center; 1467 | margin-right: 60px; 1468 | } 1469 | 1470 | .ifacebox .ifacebox-head { 1471 | border-bottom: 1px solid #ccc; 1472 | padding: 2px; 1473 | background: #eee; 1474 | } 1475 | 1476 | .ifacebox .ifacebox-head.active { 1477 | background: #5e72e4; 1478 | } 1479 | 1480 | .ifacebox .ifacebox-body { 1481 | border: 2px solid #f2f2f2; 1482 | border-top: 0; 1483 | border-radius: 0 0 4px 4px; 1484 | padding: 2px 10px; 1485 | } 1486 | 1487 | .network-status-table .ifacebox-body { 1488 | display: flex; 1489 | flex-direction: column; 1490 | height: 100%; 1491 | text-align: left; 1492 | } 1493 | 1494 | .network-status-table .ifacebox { 1495 | margin: .5em; 1496 | flex-grow: 1; 1497 | } 1498 | 1499 | .ifacebox .ifacebox-body { 1500 | padding: .25em; 1501 | } 1502 | 1503 | .ifacebox { 1504 | background-color: #fff; 1505 | border: 1px solid #ccc; 1506 | margin: 0 10px; 1507 | text-align: center; 1508 | white-space: nowrap; 1509 | background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); 1510 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 1511 | border-radius: 4px; 1512 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 1513 | display: inline-flex; 1514 | flex-direction: column; 1515 | line-height: 1.2em; 1516 | min-width: 100px; 1517 | } 1518 | 1519 | .ifacebadge { 1520 | display: inline-block; 1521 | flex-direction: row; 1522 | white-space: nowrap; 1523 | background-color: #fff; 1524 | border: 1px solid #ccc; 1525 | padding: 2px; 1526 | background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); 1527 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 1528 | border-radius: 4px; 1529 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 1530 | cursor: default; 1531 | line-height: 1.2em; 1532 | } 1533 | 1534 | .ifacebadge.large, 1535 | .network-status-table .ifacebox-body .ifacebadge { 1536 | display: inline-flex; 1537 | flex: 1; 1538 | padding: .25em; 1539 | min-width: 220px; 1540 | margin: .125em; 1541 | float: left; 1542 | } 1543 | 1544 | .ifacebadge img { 1545 | width: 16px; 1546 | height: 16px; 1547 | vertical-align: middle; 1548 | } 1549 | 1550 | .ifacebadge>*, 1551 | .ifacebadge.large>* { 1552 | margin: 0 .125em; 1553 | } 1554 | 1555 | .ifacebadge>*, 1556 | .ifacebadge.large>* { 1557 | margin: 0 .125em; 1558 | } 1559 | 1560 | .network-status-table { 1561 | display: flex; 1562 | flex-wrap: wrap; 1563 | } 1564 | 1565 | .cbi-tooltip { 1566 | position: absolute; 1567 | z-index: 1000; 1568 | left: -1000px; 1569 | opacity: 0; 1570 | transition: opacity .25s ease-out; 1571 | } 1572 | 1573 | .cbi-tooltip-container { 1574 | /* cursor: help; */ 1575 | } 1576 | 1577 | 1578 | /*textarea*/ 1579 | 1580 | .cbi-input-textarea { 1581 | width: 100%; 1582 | resize: none; 1583 | border-radius: 0.25rem; 1584 | /* min-height: 14rem; */ 1585 | padding: 0.8rem; 1586 | font-size: 0.8rem; 1587 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 1588 | color: black; 1589 | } 1590 | 1591 | #syslog { 1592 | width: 100%; 1593 | min-height: 15rem; 1594 | padding: 1rem; 1595 | font-size: small; 1596 | color: #5F5F5F; 1597 | margin-bottom: 20px; 1598 | border-radius: 0; 1599 | background-color: #FFF; 1600 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 1601 | border: none; 1602 | } 1603 | 1604 | 1605 | /* change */ 1606 | 1607 | .uci-change-list { 1608 | font-family: monospace; 1609 | } 1610 | 1611 | .uci-change-list ins, 1612 | .uci-change-legend-label ins { 1613 | text-decoration: none; 1614 | border: 1px solid #00FF00; 1615 | background-color: #CCFFCC; 1616 | display: block; 1617 | padding: 2px; 1618 | } 1619 | 1620 | .uci-change-list del, 1621 | .uci-change-legend-label del { 1622 | text-decoration: none; 1623 | border: 1px solid #FF0000; 1624 | background-color: #FFCCCC; 1625 | display: block; 1626 | font-style: normal; 1627 | padding: 2px; 1628 | } 1629 | 1630 | .uci-change-list var, 1631 | .uci-change-legend-label var { 1632 | text-decoration: none; 1633 | border: 1px solid #CCCCCC; 1634 | background-color: #EEEEEE; 1635 | display: block; 1636 | font-style: normal; 1637 | padding: 2px; 1638 | } 1639 | 1640 | .uci-change-list var ins, 1641 | .uci-change-list var del { 1642 | border: none; 1643 | white-space: pre; 1644 | font-style: normal; 1645 | padding: 0px; 1646 | } 1647 | 1648 | .uci-change-legend { 1649 | padding: 5px; 1650 | } 1651 | 1652 | .uci-change-legend-label { 1653 | width: 150px; 1654 | float: left; 1655 | } 1656 | 1657 | .uci-change-legend-label>ins, 1658 | .uci-change-legend-label>del, 1659 | .uci-change-legend-label>var { 1660 | float: left; 1661 | margin-right: 4px; 1662 | width: 10px; 1663 | height: 10px; 1664 | display: block; 1665 | } 1666 | 1667 | .uci-change-legend-label var ins, 1668 | .uci-change-legend-label var del { 1669 | line-height: 6px; 1670 | border: none; 1671 | } 1672 | 1673 | .uci-change-list var, 1674 | .uci-change-list del, 1675 | .uci-change-list ins { 1676 | padding: 0.5rem; 1677 | } 1678 | 1679 | 1680 | /* other fix */ 1681 | 1682 | #iwsvg, 1683 | #iwsvg2, 1684 | #bwsvg { 1685 | border: 1px solid #D4D4D4 !important; 1686 | border-top: none !important; 1687 | } 1688 | 1689 | .ifacebox { 1690 | /* border: 1px solid #999; */ 1691 | background-color: #f9f9f9; 1692 | } 1693 | 1694 | .cbi-image-button { 1695 | margin-left: 0.5rem; 1696 | } 1697 | 1698 | .zonebadge { 1699 | padding: 0.2rem 0.5rem; 1700 | display: inline-block; 1701 | cursor: pointer; 1702 | } 1703 | 1704 | .zonebadge-empty { 1705 | border: 2px dashed #ddd; 1706 | color: #ddd; 1707 | font-style: italic; 1708 | } 1709 | 1710 | .zone-forwards { 1711 | display: flex; 1712 | flex-wrap: wrap; 1713 | } 1714 | 1715 | .zone-forwards .zone-src, 1716 | .zone-forwards .zone-dest { 1717 | display: flex; 1718 | flex-direction: column; 1719 | } 1720 | 1721 | .zone-forwards>span { 1722 | flex-basis: 10%; 1723 | text-align: center; 1724 | } 1725 | 1726 | .zone-forwards>* { 1727 | flex: 1 1 40%; 1728 | padding: 1px; 1729 | } 1730 | 1731 | .zonebadge>.ifacebadge { 1732 | padding: 0.2rem 1rem; 1733 | margin: 0.3rem; 1734 | border: 1px solid #6C6C6C; 1735 | } 1736 | 1737 | .zonebadge>input[type="text"] { 1738 | padding: 0.16rem 1rem; 1739 | min-width: 10rem; 1740 | margin-top: 0.3rem; 1741 | } 1742 | 1743 | .cbi-value-field .cbi-input-checkbox, 1744 | .cbi-value-field .cbi-input-radio { 1745 | height: 1rem; 1746 | } 1747 | 1748 | .cbi-value-field>input+.cbi-value-description { 1749 | padding: 0; 1750 | } 1751 | 1752 | .cbi-value-field>ul>li { 1753 | display: flex; 1754 | } 1755 | 1756 | .cbi-value-field>ul>li>label { 1757 | margin-top: 0rem; 1758 | } 1759 | 1760 | .cbi-value-field>ul>li .ifacebadge { 1761 | background-color: #eee; 1762 | margin-left: 0.4rem; 1763 | margin-top: -0.5rem; 1764 | } 1765 | 1766 | .cbi-section-table-row>.cbi-value-field .cbi-input-select { 1767 | min-width: 7rem; 1768 | } 1769 | 1770 | .cbi-section-create>.cbi-button-add { 1771 | margin: 0.5rem; 1772 | } 1773 | 1774 | .cbi-section-remove { 1775 | padding: 0.5rem; 1776 | } 1777 | 1778 | div.cbi-value var, 1779 | td.cbi-value-field var { 1780 | font-style: italic; 1781 | color: #0069D6; 1782 | } 1783 | 1784 | small { 1785 | font-size: 90%; 1786 | white-space: normal; 1787 | line-height: 1.42857143; 1788 | } 1789 | 1790 | .cbi-button-up, 1791 | .cbi-button-down { 1792 | display: inline-block; 1793 | min-width: 0; 1794 | padding: 0.2rem 0.3rem; 1795 | font-size: 1.2rem; 1796 | } 1797 | 1798 | .cbi-optionals { 1799 | padding: 1rem 1rem 0 1rem; 1800 | border-top: 1px solid #CCC; 1801 | } 1802 | 1803 | #diag-rc-output>pre { 1804 | background-color: #f5f5f5; 1805 | display: block; 1806 | padding: 8.5px; 1807 | margin: 0 0 18px; 1808 | line-height: 1.5rem; 1809 | -moz-border-radius: 3px; 1810 | white-space: pre-wrap; 1811 | word-wrap: break-word; 1812 | font-size: 1.4rem; 1813 | color: #404040; 1814 | } 1815 | 1816 | input[name="ping"], 1817 | input[name="traceroute"], 1818 | input[name="nslookup"] { 1819 | width: 80%; 1820 | } 1821 | 1822 | header>.container>.pull-right>* { 1823 | position: relative; 1824 | top: 0.45rem; 1825 | cursor: pointer; 1826 | } 1827 | 1828 | #xhr_poll_status>.label.success { 1829 | background-color: #2dce89; 1830 | } 1831 | 1832 | .label { 1833 | padding: 0.3rem 0.8rem; 1834 | font-size: 0.8rem; 1835 | font-weight: bold; 1836 | color: #ffffff !important; 1837 | text-transform: uppercase; 1838 | white-space: nowrap; 1839 | background-color: #bfbfbf; 1840 | -webkit-border-radius: 3px; 1841 | -moz-border-radius: 3px; 1842 | border-radius: 3px; 1843 | text-shadow: none; 1844 | text-decoration: none; 1845 | } 1846 | 1847 | .notice { 1848 | background-color: #11cdef; 1849 | } 1850 | 1851 | .showSide { 1852 | display: none; 1853 | } 1854 | 1855 | .darkMask { 1856 | width: 100%; 1857 | height: 100%; 1858 | position: fixed; 1859 | background-color: rgba(0, 0, 0, 0.56); 1860 | content: ""; 1861 | z-index: 99; 1862 | display: none; 1863 | } 1864 | 1865 | 1866 | /* fix Main Login*/ 1867 | 1868 | .node-main-login>.main>.main-left { 1869 | display: none; 1870 | } 1871 | 1872 | .node-main-login>.main>.main-right { 1873 | width: 100%; 1874 | background-color: #eee!important; 1875 | } 1876 | 1877 | .node-main-login>.main>.main-right>#maincontent { 1878 | margin-top: 5rem; 1879 | background-color: #eee!important; 1880 | } 1881 | 1882 | .node-main-login>.main div.cbi-section, 1883 | .node-main-login>.main fieldset { 1884 | padding: 0.5rem; 1885 | margin-bottom: 1rem; 1886 | display: inline; 1887 | background: none; 1888 | border: none; 1889 | box-shadow: none; 1890 | overflow: hidden; 1891 | } 1892 | 1893 | .node-main-login>.main .cbi-value-title { 1894 | width: 7rem; 1895 | font-size: 1rem; 1896 | line-height: 1.5; 1897 | color: #525f7f; 1898 | padding: .625rem; 1899 | } 1900 | 1901 | .node-main-login>.main #maincontent { 1902 | text-align: center; 1903 | } 1904 | 1905 | .node-main-login>.main .container { 1906 | display: inline-block; 1907 | padding: 2rem 2rem; 1908 | margin-top: 2rem !important; 1909 | background-color: #f7fafc!important; 1910 | border-radius: .375rem; 1911 | box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); 1912 | text-align: left; 1913 | } 1914 | 1915 | .node-main-login>.main .container h2 { 1916 | color: #525f7f; 1917 | text-align: center; 1918 | letter-spacing: 4px; 1919 | } 1920 | 1921 | .node-main-login>.main .container .cbi-map-descr { 1922 | text-align: center; 1923 | } 1924 | 1925 | .node-main-login>.main .container .cbi-value-field input { 1926 | font-size: 1rem; 1927 | line-height: 1.5; 1928 | display: block; 1929 | width: 100%; 1930 | height: calc(2.75rem + 2px); 1931 | padding: .625rem .75rem; 1932 | transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); 1933 | color: #8898aa; 1934 | border: 1px solid #dee2e6; 1935 | border-radius: .25rem; 1936 | background-color: #fff; 1937 | background-clip: padding-box; 1938 | box-shadow: 0 3px 2px rgba(233, 236, 239, .05); 1939 | } 1940 | 1941 | .node-main-login>.main .container .cbi-value-field input:focus { 1942 | color: #8898aa; 1943 | border-color: #525f7f; 1944 | outline: 0; 1945 | background-color: #fff; 1946 | box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) 1947 | } 1948 | 1949 | .node-main-login>.main .container input.cbi-button { 1950 | font-size: 1rem; 1951 | height: auto; 1952 | position: relative; 1953 | transition: all .15s ease; 1954 | letter-spacing: .2em; 1955 | text-transform: none; 1956 | padding: .625rem 1.25rem; 1957 | will-change: transform; 1958 | } 1959 | 1960 | .node-main-login>.main form>div:nth-last-child(1) { 1961 | text-align: center; 1962 | } 1963 | 1964 | .node-main-login>.main .cbi-value { 1965 | display: block; 1966 | } 1967 | 1968 | .node-main-login>.main .cbi-value>* { 1969 | display: inline-block !important; 1970 | } 1971 | 1972 | .node-main-login>.main .cbi-input-user, 1973 | .node-main-login>.main .cbi-input-password { 1974 | min-width: 15rem; 1975 | } 1976 | 1977 | .node-main-login footer { 1978 | bottom: 0; 1979 | position: absolute; 1980 | width: 100%; 1981 | } 1982 | 1983 | 1984 | /* fix status overview */ 1985 | 1986 | .node-status-overview>.main div.cbi-section:nth-child(4) td:nth-child(2), 1987 | .node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { 1988 | white-space: normal; 1989 | } 1990 | 1991 | 1992 | /* fix status processes */ 1993 | 1994 | .node-status-processes>.main .table .tr .td:nth-child(3), 1995 | .node-status-processes>.main table tr td:nth-child(3) { 1996 | white-space: normal; 1997 | } 1998 | 1999 | .node-status-iptables>.main div>.cbi-map>form { 2000 | margin: 1rem 2rem 0 0; 2001 | } 2002 | 2003 | 2004 | /* fix system reboot */ 2005 | 2006 | .node-system-reboot>.main>.main-right p, 2007 | .node-system-reboot>.main>.main-right h3 { 2008 | padding-left: 2rem; 2009 | } 2010 | 2011 | 2012 | /* fix Services Network Shares*/ 2013 | 2014 | .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { 2015 | margin-bottom: 1rem; 2016 | width: auto; 2017 | } 2018 | 2019 | .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { 2020 | display: list-item; 2021 | } 2022 | 2023 | .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { 2024 | padding-top: 1rem; 2025 | } 2026 | 2027 | 2028 | /* fix System Software*/ 2029 | 2030 | .node-system-packages>.main .table .tr .td:nth-child(1), 2031 | .node-system-packages>.main table tr td:nth-child(1) { 2032 | width: auto !important; 2033 | } 2034 | 2035 | .node-system-packages>.main .table .tr .td:nth-last-child(1), 2036 | .node-system-packages>.main table tr td:nth-last-child(1) { 2037 | white-space: normal; 2038 | font-size: small; 2039 | color: #404040; 2040 | } 2041 | 2042 | .node-system-packages>.main .cbi-tabmenu>li>a, 2043 | .tabs>li>a { 2044 | padding: 0.5rem 0.8rem; 2045 | } 2046 | 2047 | .node-system-packages>.main .cbi-value>pre { 2048 | background-color: #eee; 2049 | padding: 0.5rem; 2050 | overflow: auto; 2051 | } 2052 | 2053 | .cbi-tabmenu+.cbi-section { 2054 | margin-top: 0; 2055 | } 2056 | 2057 | 2058 | /* fix network firewall*/ 2059 | 2060 | .node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { 2061 | min-width: 4rem; 2062 | } 2063 | 2064 | .node-status-iptables div.cbi-section, 2065 | .node-system-packages div.cbi-section, 2066 | .node-system-flashops div.cbi-section, 2067 | .node-status-iptables fieldset, 2068 | .node-system-packages fieldset, 2069 | .node-system-flashops fieldset { 2070 | margin-top: 0; 2071 | } 2072 | 2073 | .node-status-iptables .cbi-tabmenu, 2074 | .node-system-packages .cbi-tabmenu, 2075 | .node-system-flashops .cbi-tabmenu { 2076 | border: none; 2077 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 2078 | } 2079 | 2080 | .node-system-flashops form.inline+form.inline { 2081 | margin-left: 0; 2082 | } 2083 | 2084 | #cbi-firewall-redirect table *, 2085 | #cbi-network-switch_vlan table *, 2086 | #cbi-firewall-zone table * { 2087 | font-size: small; 2088 | } 2089 | 2090 | #cbi-firewall-redirect table input[type="text"], 2091 | #cbi-network-switch_vlan table input[type="text"], 2092 | #cbi-firewall-zone table input[type="text"] { 2093 | width: 5rem; 2094 | } 2095 | 2096 | #cbi-firewall-redirect table select, 2097 | #cbi-network-switch_vlan table select, 2098 | #cbi-firewall-zone table select { 2099 | min-width: 3.5rem; 2100 | } 2101 | 2102 | 2103 | /* language fix */ 2104 | 2105 | body.lang_pl.node-main-login .cbi-value-title { 2106 | width: 12rem; 2107 | } 2108 | 2109 | .cbi-dropdown { 2110 | display: inline-block; 2111 | width: 210px; 2112 | height: 30px; 2113 | padding: 4px; 2114 | font-size: 13px; 2115 | line-height: 18px; 2116 | color: #808080; 2117 | border: 1px solid #ccc; 2118 | border-radius: 3px; 2119 | box-sizing: border-box; 2120 | } 2121 | 2122 | .cbi-dropdown { 2123 | border: 1px solid #ccc; 2124 | border-radius: 3px; 2125 | display: inline-flex; 2126 | padding: 0; 2127 | cursor: pointer; 2128 | height: auto; 2129 | background: linear-gradient(#fff 0%, #e9e8e6 100%); 2130 | position: relative; 2131 | color: #404040; 2132 | } 2133 | 2134 | .cbi-dropdown { 2135 | min-width: 210px; 2136 | max-width: 400px; 2137 | width: auto; 2138 | } 2139 | 2140 | .cbi-dropdown:focus { 2141 | outline: 2px solid #4b6e9b; 2142 | } 2143 | 2144 | .cbi-dropdown>ul { 2145 | margin: 0 !important; 2146 | padding: 0; 2147 | list-style: none; 2148 | overflow-x: hidden; 2149 | overflow-y: auto; 2150 | display: flex; 2151 | width: 100%; 2152 | } 2153 | 2154 | .cbi-dropdown>ul.preview { 2155 | display: none; 2156 | } 2157 | 2158 | .cbi-dropdown>.open, 2159 | .cbi-dropdown>.more { 2160 | flex-grow: 0; 2161 | flex-shrink: 0; 2162 | display: flex; 2163 | flex-direction: column; 2164 | justify-content: center; 2165 | text-align: center; 2166 | line-height: 2em; 2167 | padding: 0 .25em; 2168 | } 2169 | 2170 | .cbi-dropdown>.more, 2171 | .cbi-dropdown>ul>li[placeholder] { 2172 | color: #777; 2173 | font-weight: bold; 2174 | text-shadow: 1px 1px 0px #fff; 2175 | display: none; 2176 | } 2177 | 2178 | .cbi-dropdown>ul>li { 2179 | display: none; 2180 | padding: .25em; 2181 | white-space: nowrap; 2182 | overflow: hidden; 2183 | text-overflow: ellipsis; 2184 | flex-shrink: 1; 2185 | flex-grow: 1; 2186 | align-items: center; 2187 | align-self: center; 2188 | color: #404040; 2189 | min-height: 20px; 2190 | } 2191 | 2192 | .cbi-dropdown>ul>li .hide-open { 2193 | display: block; 2194 | display: initial; 2195 | } 2196 | 2197 | .cbi-dropdown>ul>li .hide-close { 2198 | display: none; 2199 | } 2200 | 2201 | .cbi-dropdown>ul>li[display]:not([display="0"]) { 2202 | border-left: 1px solid #ccc; 2203 | } 2204 | 2205 | .cbi-dropdown[empty]>ul { 2206 | max-width: 1px; 2207 | } 2208 | 2209 | .cbi-dropdown>ul>li>form { 2210 | display: none; 2211 | margin: 0; 2212 | padding: 0; 2213 | pointer-events: none; 2214 | } 2215 | 2216 | .cbi-dropdown>ul>li img { 2217 | vertical-align: middle; 2218 | margin-right: .25em; 2219 | } 2220 | 2221 | .cbi-dropdown>ul>li>form>input[type="checkbox"] { 2222 | margin: 0; 2223 | } 2224 | 2225 | .cbi-dropdown>ul>li input[type="text"] { 2226 | height: 20px; 2227 | } 2228 | 2229 | .cbi-dropdown[open] { 2230 | position: relative; 2231 | } 2232 | 2233 | .cbi-dropdown[open]>ul.dropdown { 2234 | display: block; 2235 | background: #f6f6f5; 2236 | border: 1px solid #918e8c; 2237 | box-shadow: 0 0 4px #918e8c; 2238 | position: absolute; 2239 | z-index: 1000; 2240 | max-width: none; 2241 | min-width: 100%; 2242 | width: auto; 2243 | } 2244 | 2245 | .cbi-dropdown>ul>li[display], 2246 | .cbi-dropdown[open]>ul.preview, 2247 | .cbi-dropdown[open]>ul.dropdown>li, 2248 | .cbi-dropdown[multiple]>ul>li>label, 2249 | .cbi-dropdown[multiple][open]>ul.dropdown>li, 2250 | .cbi-dropdown[multiple][more]>.more, 2251 | .cbi-dropdown[multiple][empty]>.more { 2252 | flex-grow: 1; 2253 | display: flex; 2254 | } 2255 | 2256 | .cbi-dropdown[empty]>ul>li, 2257 | .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder], 2258 | .cbi-dropdown[multiple][open]>ul.dropdown>li>form { 2259 | display: block; 2260 | } 2261 | 2262 | .cbi-dropdown[open]>ul.dropdown>li .hide-open { 2263 | display: none; 2264 | } 2265 | 2266 | .cbi-dropdown[open]>ul.dropdown>li .hide-close { 2267 | display: block; 2268 | display: initial; 2269 | } 2270 | 2271 | .cbi-dropdown[open]>ul.dropdown>li { 2272 | border-bottom: 1px solid #ccc; 2273 | } 2274 | 2275 | .cbi-dropdown[open]>ul.dropdown>li[selected] { 2276 | background: #b0d0f0; 2277 | } 2278 | 2279 | .cbi-dropdown[open]>ul.dropdown>li.focus { 2280 | background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); 2281 | } 2282 | 2283 | .cbi-dropdown[open]>ul.dropdown>li:last-child { 2284 | margin-bottom: 0; 2285 | border-bottom: none; 2286 | } 2287 | 2288 | .cbi-dropdown[disabled] { 2289 | pointer-events: none; 2290 | opacity: .6; 2291 | } 2292 | 2293 | @media screen and (max-width: 1600px) { 2294 | .main-left { 2295 | width: calc(0% + 13rem); 2296 | } 2297 | .main-right { 2298 | width: calc(100% - 13rem); 2299 | } 2300 | .cbi-button { 2301 | padding: 0.3rem 1.5rem; 2302 | font-size: 0.8rem; 2303 | } 2304 | header>.container>.pull-right>* { 2305 | top: 0.35rem; 2306 | } 2307 | .label { 2308 | padding: 0.2rem 0.6rem; 2309 | } 2310 | .cbi-value-title { 2311 | width: 15rem; 2312 | } 2313 | div.cbi-section,fieldset { 2314 | padding: 0; 2315 | margin: 1rem 0 0 0; 2316 | overflow-x: auto; 2317 | } 2318 | .cbi-input-textarea { 2319 | font-size: small; 2320 | } 2321 | .node-status-iptables>.main div.cbi-section li>a, 2322 | .node-status-iptables>.main fieldset li>a { 2323 | padding: 0.3rem 0.6rem; 2324 | } 2325 | } 2326 | 2327 | @media screen and (max-width: 1280px) { 2328 | header { 2329 | height: 3.5rem; 2330 | } 2331 | header>.container { 2332 | margin-top: 0.25rem; 2333 | } 2334 | .main { 2335 | top: 3.5rem; 2336 | height: calc(100% - 3.5rem); 2337 | } 2338 | .main-left { 2339 | width: calc(0% + 13rem); 2340 | top: 3.5rem; 2341 | height: calc(100% - 3.5rem); 2342 | } 2343 | .main-right { 2344 | width: calc(100% - 13rem); 2345 | } 2346 | .cbi-tabmenu>li>a, 2347 | .tabs>li>a { 2348 | padding: 0.2rem 0.5rem; 2349 | } 2350 | .panel-title { 2351 | /* font-size: 1.1rem; 2352 | padding-bottom: 1rem; */ 2353 | } 2354 | table { 2355 | font-size: 0.7rem !important; 2356 | width: 100% !important; 2357 | } 2358 | .main>.main-left>.nav>li, 2359 | .main>.main-left>.nav>li a, 2360 | .main>.main-left>.nav>.slide>.menu { 2361 | font-size: 0.9rem; 2362 | } 2363 | .main>.main-left>.nav>.slide>.slide-menu>li>a { 2364 | font-size: 0.7rem; 2365 | } 2366 | } 2367 | 2368 | @media screen and (max-width: 992px) { 2369 | .main-left { 2370 | width: 0; 2371 | position: fixed; 2372 | z-index: 100; 2373 | } 2374 | .main-right { 2375 | width: 100%; 2376 | } 2377 | .showSide { 2378 | padding: 0.1rem; 2379 | margin-right: 0.5rem; 2380 | display: inline-block; 2381 | } 2382 | .showSide:before { 2383 | content: "\e20e"; 2384 | font-size: 1.7rem; 2385 | } 2386 | .node-main-login .showSide { 2387 | display: none !important; 2388 | } 2389 | .cbi-value-title { 2390 | /* width: 9rem; */ 2391 | } 2392 | .node-network-diagnostics>.main .cbi-map div.cbi-section>div *, 2393 | .node-network-diagnostics>.main .cbi-map fieldset>div * { 2394 | width: 100% !important; 2395 | } 2396 | .node-network-diagnostics>.main .cbi-map div.cbi-section>div input[type="text"], 2397 | .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { 2398 | margin: 3rem 0 0 0 !important; 2399 | } 2400 | .node-network-diagnostics>.main .cbi-map div.cbi-section>div:nth-child(4) input[type="text"], 2401 | .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { 2402 | margin: 0 !important; 2403 | } 2404 | .node-network-diagnostics>.main .cbi-map div.cbi-section>div select, 2405 | .node-network-diagnostics>.main .cbi-map fieldset>div select, 2406 | .node-network-diagnostics>.main .cbi-map div.cbi-section>div input[type="button"], 2407 | .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { 2408 | margin: 1rem 0 0 0; 2409 | } 2410 | .node-network-diagnostics>.main .cbi-map div.cbi-section>div, 2411 | .node-network-diagnostics>.main .cbi-map fieldset>div { 2412 | width: 100% !important; 2413 | } 2414 | #diag-rc-output>pre { 2415 | font-size: 1rem; 2416 | } 2417 | .node-main-login>.main .cbi-value-title { 2418 | text-align: left; 2419 | } 2420 | } 2421 | 2422 | @media screen and (max-width: 480px) { 2423 | div.cbi-section,fieldset { 2424 | padding: 0; 2425 | margin: 1rem 0 0 0; 2426 | overflow-x: auto; 2427 | } 2428 | .tabs { 2429 | margin: 0 -1rem; 2430 | } 2431 | #maincontent>.container { 2432 | margin: 0 1rem 1.5rem 1rem; 2433 | } 2434 | .main>.main-left>.nav>.slide>.menu { 2435 | font-size: 1rem; 2436 | } 2437 | .main>.main-left>.nav>.slide>.slide-menu>li>a { 2438 | font-size: 0.9rem; 2439 | } 2440 | .cbi-value { 2441 | padding: 0.6em 0em; 2442 | } 2443 | .cbi-value-title { 2444 | width: 40%; 2445 | min-width: 0rem !important; 2446 | text-align: left; 2447 | padding-left: 1em; 2448 | } 2449 | .cbi-value-field, 2450 | .cbi-value-description { 2451 | width: 100%; 2452 | } 2453 | .cbi-value-field .cbi-input-select { 2454 | width: 95%; 2455 | min-width: unset; 2456 | } 2457 | .cbi-value-field .cbi-input-textarea { 2458 | width: 95% !important; 2459 | min-width: unset; 2460 | } 2461 | .cbi-value>.cbi-value-field { 2462 | display: table-cell; 2463 | width: 20em; 2464 | } 2465 | .cbi-tabmenu>li, 2466 | .tabs>li { 2467 | padding: 0.6rem 0rem; 2468 | } 2469 | .cbi-tabmenu>li>a, 2470 | .tabs>li>a { 2471 | padding: 0.2rem 0.3rem; 2472 | font-size: 0.9rem; 2473 | } 2474 | .cbi-page-actions>div>input { 2475 | display: none; 2476 | } 2477 | .node-main-login>.main .container { 2478 | padding: 0.5rem 1rem 2rem 1rem; 2479 | } 2480 | .node-main-login>.main .cbi-value { 2481 | padding: 0; 2482 | } 2483 | .node-main-login>.main .cbi-value>* { 2484 | width: 100%; 2485 | } 2486 | .node-main-login>.main form>div:nth-last-child(1) { 2487 | margin-top: 2rem; 2488 | } 2489 | .node-main-login>.main .cbi-value-title { 2490 | width: 100% !important; 2491 | font-size: 1.2rem; 2492 | } 2493 | .node-main-login>.main div.cbi-section, 2494 | .node-main-login>.main fieldset { 2495 | margin: 0; 2496 | padding: 0.5rem; 2497 | } 2498 | h2 { 2499 | font-size: 1.5rem; 2500 | } 2501 | .tabs>li>a { 2502 | font-size: 0.9rem; 2503 | } 2504 | select, 2505 | input { 2506 | font-size: 0.9rem; 2507 | } 2508 | .mobile-hide { 2509 | display: none; 2510 | } 2511 | .panel-title { 2512 | /*font-size: 1.4rem; 2513 | padding-bottom: 1rem; */ 2514 | } 2515 | .node-system-packages>.main .cbi-value.cbi-value-last>div { 2516 | width: 100% !important; 2517 | } 2518 | .node-system-packages>.main .cbi-value .cbi-value-field input { 2519 | width: 100%; 2520 | } 2521 | .node-status-iptables>.main div>.cbi-map>form { 2522 | position: static !important; 2523 | margin: 0 0 2rem 0; 2524 | padding: 2rem; 2525 | border: 0; 2526 | font-weight: normal; 2527 | font-style: normal; 2528 | line-height: 1; 2529 | font-family: inherit; 2530 | min-width: inherit; 2531 | overflow-x: auto; 2532 | overflow-y: hidden; 2533 | border-radius: 0; 2534 | background-color: #FFF; 2535 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); 2536 | -webkit-overflow-scrolling: touch; 2537 | } 2538 | .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { 2539 | width: 100% !important; 2540 | margin: 0; 2541 | } 2542 | .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { 2543 | margin-top: 1rem; 2544 | } 2545 | } 2546 | 2547 | @media screen and (min-width: 992px) { 2548 | .cbi-value input[type="password"], 2549 | .cbi-value input[type="text"] { 2550 | min-width: 20rem; 2551 | } 2552 | .cbi-value-field .cbi-input-select { 2553 | min-width: 20rem; 2554 | } 2555 | } 2556 | 2557 | @media screen and (min-width: 1280px) { 2558 | .cbi-value input[type="password"], 2559 | .cbi-value input[type="text"] { 2560 | min-width: 22rem; 2561 | } 2562 | .cbi-value-field .cbi-input-select { 2563 | min-width: 22rem; 2564 | } 2565 | } 2566 | 2567 | @media screen and (min-width: 1600px) { 2568 | .cbi-value input[type="password"], 2569 | .cbi-value input[type="text"] { 2570 | min-width: 25rem; 2571 | } 2572 | .cbi-value-field .cbi-input-select { 2573 | min-width: 25rem; 2574 | } 2575 | } -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/favicon.ico -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/fonts/font.eot -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/font.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/fonts/font.ttf -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/fonts/font.woff -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/ssr.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/fonts/ssr.eot -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/ssr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/ssr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/fonts/ssr.ttf -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/fonts/ssr.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/fonts/ssr.woff -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/js/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI 3 | * 4 | * luci-theme-material 5 | * Copyright 2015 Lutty Yang 6 | * 7 | * Have a bug? Please create an issue here on GitHub! 8 | * https://github.com/LuttyYang/luci-theme-material/issues 9 | * 10 | * luci-theme-bootstrap: 11 | * Copyright 2008 Steven Barth 12 | * Copyright 2008 Jo-Philipp Wich 13 | * Copyright 2012 David Menting 14 | * 15 | * MUI: 16 | * https://github.com/muicss/mui 17 | * 18 | * Licensed to the public under the Apache License 2.0 19 | */ 20 | 21 | 22 | (function ($) { 23 | $(".main > .loading").fadeOut(); 24 | 25 | /** 26 | * trim text, Remove spaces, wrap 27 | * @param text 28 | * @returns {string} 29 | */ 30 | function trimText(text) { 31 | return text.replace(/[ \t\n\r]+/g, " "); 32 | } 33 | 34 | 35 | var lastNode = undefined; 36 | var mainNodeName = undefined; 37 | 38 | var nodeUrl = ""; 39 | (function(node){ 40 | if (node[0] == "admin"){ 41 | luciLocation = [node[1], node[2]]; 42 | }else{ 43 | luciLocation = node; 44 | } 45 | 46 | for(var i in luciLocation){ 47 | nodeUrl += luciLocation[i]; 48 | if (i != luciLocation.length - 1){ 49 | nodeUrl += "/"; 50 | } 51 | } 52 | })(luciLocation); 53 | 54 | /** 55 | * get the current node by Burl (primary) 56 | * @returns {boolean} success? 57 | */ 58 | function getCurrentNodeByUrl() { 59 | var ret = false; 60 | if (!$('body').hasClass('logged-in')) { 61 | luciLocation = ["Main", "Login"]; 62 | return true; 63 | } 64 | 65 | $(".main > .main-left > .nav > .slide > .menu").each(function () { 66 | var ulNode = $(this); 67 | ulNode.next().find("a").each(function () { 68 | var that = $(this); 69 | var href = that.attr("href"); 70 | 71 | if (href.indexOf(nodeUrl) != -1) { 72 | ulNode.click(); 73 | ulNode.next(".slide-menu").stop(true, true); 74 | lastNode = that.parent(); 75 | lastNode.addClass("active"); 76 | ret = true; 77 | return true; 78 | } 79 | }); 80 | }); 81 | return ret; 82 | } 83 | 84 | /** 85 | * menu click 86 | */ 87 | $(".main > .main-left > .nav > .slide > .menu").click(function () { 88 | var ul = $(this).next(".slide-menu"); 89 | var menu = $(this); 90 | if (!ul.is(":visible")) { 91 | menu.addClass("active"); 92 | ul.addClass("active"); 93 | ul.stop(true).slideDown("fast"); 94 | } else { 95 | ul.stop(true).slideUp("fast", function () { 96 | menu.removeClass("active"); 97 | ul.removeClass("active"); 98 | }); 99 | } 100 | return false; 101 | }); 102 | 103 | /** 104 | * hook menu click and add the hash 105 | */ 106 | $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { 107 | if (lastNode != undefined) lastNode.removeClass("active"); 108 | $(this).parent().addClass("active"); 109 | $(".main > .loading").fadeIn("fast"); 110 | return true; 111 | }); 112 | 113 | /** 114 | * fix menu click 115 | */ 116 | $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { 117 | if (lastNode != undefined) lastNode.removeClass("active"); 118 | $(this).addClass("active"); 119 | $(".main > .loading").fadeIn("fast"); 120 | window.location = $($(this).find("a")[0]).attr("href"); 121 | return false; 122 | }); 123 | 124 | /** 125 | * fix submenu click 126 | */ 127 | $("#maincontent > .container > .tabs > li").click(function () { 128 | console.log("sub"); 129 | $(".main > .loading").fadeIn("fast"); 130 | window.location = $($(this).find("a")[0]).attr("href"); 131 | return false; 132 | }); 133 | /** 134 | * get current node and open it 135 | */ 136 | if (getCurrentNodeByUrl()) { 137 | mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; 138 | mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); 139 | $("body").addClass(mainNodeName); 140 | } 141 | $(".cbi-button-up").val(""); 142 | $(".cbi-button-down").val(""); 143 | 144 | 145 | /** 146 | * hook other "A Label" and add hash to it. 147 | */ 148 | $("#maincontent > .container").find("a").each(function () { 149 | var that = $(this); 150 | var href = that.attr("href"); 151 | if (href != undefined && href.indexOf("javascript") != -1) { 152 | return true; 153 | } 154 | var onclick = that.attr("onclick"); 155 | if (onclick == undefined || onclick == "") { 156 | that.click(function () { 157 | var href = that.attr("href"); 158 | if (href.indexOf("#") == -1) { 159 | $(".main > .loading").fadeIn("fast"); 160 | return true; 161 | } 162 | }); 163 | } 164 | }); 165 | 166 | /** 167 | * Sidebar expand 168 | */ 169 | var showSide = false; 170 | $(".showSide").click(function () { 171 | if (showSide) { 172 | $(".darkMask").stop(true).fadeOut("fast"); 173 | $(".main-left").stop(true).animate({ 174 | width: "0" 175 | }, "fast"); 176 | $(".main-right").css("overflow-y", "auto"); 177 | showSide = false; 178 | } else { 179 | $(".darkMask").stop(true).fadeIn("fast"); 180 | $(".main-left").stop(true).animate({ 181 | width: "15rem" 182 | }, "fast"); 183 | $(".main-right").css("overflow-y", "hidden"); 184 | showSide = true; 185 | } 186 | }); 187 | 188 | 189 | $(".darkMask").click(function () { 190 | if (showSide) { 191 | showSide = false; 192 | $(".darkMask").stop(true).fadeOut("fast"); 193 | $(".main-left").stop(true).animate({ 194 | width: "0" 195 | }, "fast"); 196 | $(".main-right").css("overflow-y", "auto"); 197 | } 198 | }); 199 | 200 | $(window).resize(function () { 201 | if ($(window).width() > 921) { 202 | $(".main-left").css("width", ""); 203 | $(".darkMask").stop(true); 204 | $(".darkMask").css("display", "none"); 205 | showSide = false; 206 | } 207 | }); 208 | 209 | /** 210 | * fix legend position 211 | */ 212 | $("legend").each(function () { 213 | var that = $(this); 214 | that.after("" + that.text() + ""); 215 | }); 216 | 217 | /* $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { 218 | var that = $(this); 219 | if (that.text().trim() == ""){ 220 | that.css("display", "none"); 221 | } 222 | }); */ 223 | 224 | 225 | $(".main-right").focus(); 226 | $(".main-right").blur(); 227 | $("input").attr("size", "0"); 228 | 229 | if (mainNodeName != undefined) { 230 | console.log(mainNodeName); 231 | switch (mainNodeName) { 232 | case "node-status-system_log": 233 | case "node-status-kernel_log": 234 | $("#syslog").focus(function () { 235 | $("#syslog").blur(); 236 | $(".main-right").focus(); 237 | $(".main-right").blur(); 238 | }); 239 | break; 240 | case "node-status-firewall": 241 | var button = $(".node-status-firewall > .main fieldset li > a"); 242 | button.addClass("cbi-button cbi-button-reset a-to-btn"); 243 | break; 244 | case "node-system-reboot": 245 | var button = $(".node-system-reboot > .main > .main-right p > a"); 246 | button.addClass("cbi-button cbi-input-reset a-to-btn"); 247 | break; 248 | } 249 | } 250 | 251 | })(jQuery); 252 | -------------------------------------------------------------------------------- /htdocs/luci-static/argon_mc2/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/htdocs/luci-static/argon_mc2/logo.png -------------------------------------------------------------------------------- /luasrc/view/themes/argon_mc1/footer.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template 3 | 4 | luci-theme-argon 5 | Copyright 2019 Jerrykuku 6 | 7 | Have a bug? Please create an issue here on GitHub! 8 | https://github.com/jerrykuku/luci-theme-argon/issues 9 | 10 | luci-theme-bootstrap: 11 | Copyright 2008 Steven Barth 12 | Copyright 2008-2016 Jo-Philipp Wich 13 | Copyright 2012 David Menting 14 | 15 | MUI: 16 | https://github.com/muicss/mui 17 | 18 | luci-theme-material: 19 | https://github.com/LuttyYang/luci-theme-material/ 20 | 21 | Agron Theme 22 | https://demos.creative-tim.com/argon-dashboard/index.html 23 | 24 | Login background 25 | https://unsplash.com/ 26 | 27 | Font generate by Icomoon 28 | https://icomoon.io/ 29 | 30 | Licensed to the public under the Apache License 2.0 31 | -%> 32 | 33 | <% 34 | local ver = require "luci.version" 35 | local disp = require "luci.dispatcher" 36 | local request = disp.context.path 37 | local category = request[1] 38 | local tree = disp.node() 39 | local categories = disp.node_childs(tree) 40 | %> 41 | 42 | 53 | 54 | 55 | 56 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /luasrc/view/themes/argon_mc1/header.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template 3 | 4 | luci-theme-argon 5 | Copyright 2019 Jerrykuku 6 | 7 | Have a bug? Please create an issue here on GitHub! 8 | https://github.com/jerrykuku/luci-theme-argon/issues 9 | 10 | luci-theme-bootstrap: 11 | Copyright 2008 Steven Barth 12 | Copyright 2008-2016 Jo-Philipp Wich 13 | Copyright 2012 David Menting 14 | 15 | MUI: 16 | https://github.com/muicss/mui 17 | 18 | Agron Theme 19 | https://demos.creative-tim.com/argon-dashboard/index.html 20 | 21 | Licensed to the public under the Apache License 2.0 22 | -%> 23 | 24 | <% 25 | local sys = require "luci.sys" 26 | local util = require "luci.util" 27 | local http = require "luci.http" 28 | local disp = require "luci.dispatcher" 29 | local fs = require "nixio.fs" 30 | local nutil = require "nixio.util" 31 | 32 | local boardinfo = util.ubus("system", "board") 33 | 34 | local request = disp.context.path 35 | local request2 = disp.context.request 36 | 37 | local category = request[1] 38 | local cattree = category and disp.node(category) 39 | 40 | local leaf = request2[#request2] 41 | 42 | local tree = disp.node() 43 | local node = disp.context.dispatched 44 | 45 | local categories = disp.node_childs(tree) 46 | 47 | local c = tree 48 | local i, r 49 | 50 | function glob(...) 51 | local iter, code, msg = fs.glob(...) 52 | if iter then 53 | return nutil.consume(iter) 54 | else 55 | return nil, code, msg 56 | end 57 | end 58 | 59 | -- tag all nodes leading to this page 60 | for i, r in ipairs(request) do 61 | if c.nodes and c.nodes[r] then 62 | c = c.nodes[r] 63 | c._menu_selected = true 64 | end 65 | end 66 | 67 | -- send as HTML5 68 | http.prepare_content("text/html") 69 | 70 | local function nodeurl(prefix, name, query) 71 | local u = url(prefix, name) 72 | if query then 73 | u = u .. http.build_querystring(query) 74 | end 75 | return pcdata(u) 76 | end 77 | 78 | local function render_tabmenu(prefix, node, level) 79 | if not level then 80 | level = 1 81 | end 82 | 83 | local childs = disp.node_childs(node) 84 | if #childs > 0 then 85 | if level > 2 then 86 | write('
    ') 87 | end 88 | 89 | local selected_node 90 | local selected_name 91 | local i, v 92 | 93 | for i, v in ipairs(childs) do 94 | local nnode = node.nodes[v] 95 | if nnode._menu_selected then 96 | selected_node = nnode 97 | selected_name = v 98 | end 99 | 100 | if level > 2 then 101 | write('
  • %s
    • ' %{ 102 | v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', 103 | nodeurl(prefix, v, nnode.query), 104 | striptags(translate(nnode.title)) 105 | }) 106 | end 107 | end 108 | 109 | if level > 2 then 110 | write('
') 111 | end 112 | 113 | if selected_node then 114 | render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) 115 | end 116 | end 117 | end 118 | 119 | local function render_submenu(prefix, node) 120 | local childs = disp.node_childs(node) 121 | if #childs > 0 then 122 | write('
    ') 123 | 124 | for i, r in ipairs(childs) do 125 | local nnode = node.nodes[r] 126 | local title = pcdata(striptags(translate(nnode.title))) 127 | 128 | write('
  • %s
    • ' %{ 129 | title, 130 | nodeurl(prefix, r, nnode.query), 131 | title 132 | }) 133 | end 134 | 135 | write('
') 136 | end 137 | end 138 | 139 | local function render_topmenu() 140 | local childs = disp.node_childs(cattree) 141 | if #childs > 0 then 142 | write('
    ') 143 | 144 | for i, r in ipairs(childs) do 145 | local nnode = cattree.nodes[r] 146 | local grandchildren = disp.node_childs(nnode) 147 | 148 | if #grandchildren > 0 then 149 | local title = pcdata(striptags(translate(nnode.title))) 150 | local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) 151 | write('
  • %s' %{ 152 | en_title, 153 | title 154 | }) 155 | 156 | render_submenu(category .. "/" .. r, nnode) 157 | write('
    • ') 158 | else 159 | local title = pcdata(striptags(translate(nnode.title))) 160 | local en_title = pcdata(striptags(nnode.title)) 161 | write('
  • %s
    • ' %{ 162 | en_title, 163 | nodeurl(category, r, nnode.query), 164 | title 165 | }) 166 | end 167 | end 168 | 169 | write('
') 170 | end 171 | end 172 | 173 | local function render_changes() 174 | -- calculate the number of unsaved changes 175 | if tree.nodes[category] and tree.nodes[category].ucidata then 176 | local ucichanges = 0 177 | local i, j 178 | for i, j in pairs(require("luci.model.uci").cursor():changes()) do 179 | ucichanges = ucichanges + #j 180 | end 181 | 182 | if ucichanges > 0 then 183 | write('%s: %d' %{ 184 | url(category, 'uci/changes'), 185 | http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")), 186 | translate('Unsaved Changes'), 187 | ucichanges 188 | }) 189 | end 190 | end 191 | end 192 | 193 | math.randomseed(os.time()) 194 | 195 | local bgcount = 0 196 | for f in ipairs(glob("/www/luci-static/argon_mc1/img/*")) do 197 | bgcount = bgcount + 1 198 | end 199 | 200 | 201 | -%> 202 | 203 | 204 | 205 | 206 | <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | - LuCI"> 220 | - LuCI"> 221 | 222 | 223 | 224 | 225 | 226 | 227 | <% if node and node.css then %> 228 | 229 | <% end -%> 230 | <% if css then %> 231 | 232 | <% end -%> 233 | 234 | 235 | 236 | 237 | 238 | 239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 | <%=boardinfo.hostname or "?"%> ™ 251 |
252 | 253 |
254 |
255 | 256 | 257 | 258 |
259 |
260 |
261 |
262 | <% render_topmenu() %> 263 |
264 |
265 |
266 |
267 |
268 | 269 | <%=boardinfo.hostname or "?"%> ™ 270 |
271 | <% render_changes() %> 272 | 276 |
277 |
278 |
279 |
280 |
281 | <% if bgcount > 0 then %> 282 | 283 | <% end %> 284 |
285 |
286 | <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> 287 |
288 |

<%:No password set!%>

289 |

<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>

290 |
"><%:Go to password configuration...%>
291 |
292 | <%- end -%> 293 | 294 | 300 | 301 | <% if category then render_tabmenu(category, cattree) end %> 302 | -------------------------------------------------------------------------------- /luasrc/view/themes/argon_mc2/footer.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI 3 | 4 | luci-theme-material 5 | Copyright 2015 Lutty Yang 6 | 7 | Have a bug? Please create an issue here on GitHub! 8 | https://github.com/LuttyYang/luci-theme-material/issues 9 | 10 | luci-theme-bootstrap: 11 | Copyright 2008 Steven Barth 12 | Copyright 2008 Jo-Philipp Wich 13 | Copyright 2012 David Menting 14 | 15 | MUI: 16 | https://github.com/muicss/mui 17 | 18 | Licensed to the public under the Apache License 2.0 19 | -%> 20 | 21 | <% 22 | local ver = require "luci.version" 23 | local disp = require "luci.dispatcher" 24 | local request = disp.context.path 25 | local category = request[1] 26 | local tree = disp.node() 27 | local categories = disp.node_childs(tree) 28 | %> 29 |
30 | 41 |
42 |
43 | 44 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /luasrc/view/themes/argon_mc2/header.htm: -------------------------------------------------------------------------------- 1 | <%# 2 | Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI 3 | 4 | luci-theme-material 5 | Copyright 2015-2017 Lutty Yang 6 | 7 | Have a bug? Please create an issue here on GitHub! 8 | https://github.com/LuttyYang/luci-theme-material/issues 9 | 10 | luci-theme-bootstrap: 11 | Copyright 2008 Steven Barth 12 | Copyright 2008-2016 Jo-Philipp Wich 13 | Copyright 2012 David Menting 14 | 15 | MUI: 16 | https://github.com/muicss/mui 17 | 18 | Licensed to the public under the Apache License 2.0 19 | -%> 20 | 21 | <% 22 | local sys = require "luci.sys" 23 | local util = require "luci.util" 24 | local http = require "luci.http" 25 | local disp = require "luci.dispatcher" 26 | 27 | local boardinfo = util.ubus("system", "board") 28 | 29 | local request = disp.context.path 30 | local request2 = disp.context.request 31 | 32 | local category = request[1] 33 | local cattree = category and disp.node(category) 34 | 35 | local leaf = request2[#request2] 36 | 37 | local tree = disp.node() 38 | local node = disp.context.dispatched 39 | 40 | local categories = disp.node_childs(tree) 41 | 42 | local c = tree 43 | local i, r 44 | 45 | -- tag all nodes leading to this page 46 | for i, r in ipairs(request) do 47 | if c.nodes and c.nodes[r] then 48 | c = c.nodes[r] 49 | c._menu_selected = true 50 | end 51 | end 52 | 53 | -- send as HTML5 54 | http.prepare_content("text/html") 55 | 56 | local function nodeurl(prefix, name, query) 57 | local u = url(prefix, name) 58 | if query then 59 | u = u .. http.build_querystring(query) 60 | end 61 | return pcdata(u) 62 | end 63 | 64 | local function render_tabmenu(prefix, node, level) 65 | if not level then 66 | level = 1 67 | end 68 | 69 | local childs = disp.node_childs(node) 70 | if #childs > 0 then 71 | if level > 2 then 72 | write('
    ') 73 | end 74 | 75 | local selected_node 76 | local selected_name 77 | local i, v 78 | 79 | for i, v in ipairs(childs) do 80 | local nnode = node.nodes[v] 81 | if nnode._menu_selected then 82 | selected_node = nnode 83 | selected_name = v 84 | end 85 | 86 | if level > 2 then 87 | write('
  • %s
    • ' %{ 88 | v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', 89 | nodeurl(prefix, v, nnode.query), 90 | striptags(translate(nnode.title)) 91 | }) 92 | end 93 | end 94 | 95 | if level > 2 then 96 | write('
') 97 | end 98 | 99 | if selected_node then 100 | render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) 101 | end 102 | end 103 | end 104 | 105 | local function render_submenu(prefix, node) 106 | local childs = disp.node_childs(node) 107 | if #childs > 0 then 108 | write('
    ') 109 | 110 | for i, r in ipairs(childs) do 111 | local nnode = node.nodes[r] 112 | local title = pcdata(striptags(translate(nnode.title))) 113 | 114 | write('
  • %s
    • ' %{ 115 | title, 116 | nodeurl(prefix, r, nnode.query), 117 | title 118 | }) 119 | end 120 | 121 | write('
') 122 | end 123 | end 124 | 125 | local function render_topmenu() 126 | local childs = disp.node_childs(cattree) 127 | if #childs > 0 then 128 | write('
    ') 129 | 130 | for i, r in ipairs(childs) do 131 | local nnode = cattree.nodes[r] 132 | local grandchildren = disp.node_childs(nnode) 133 | 134 | if #grandchildren > 0 then 135 | local title = pcdata(striptags(translate(nnode.title))) 136 | local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) 137 | 138 | write('
  • %s' %{ 139 | en_title, 140 | title 141 | }) 142 | 143 | render_submenu(category .. "/" .. r, nnode) 144 | write('
    • ') 145 | else 146 | local title = pcdata(striptags(translate(nnode.title))) 147 | local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) 148 | 149 | write('
  • %s
    • ' %{ 150 | en_title, 151 | nodeurl(category, r, nnode.query), 152 | title 153 | }) 154 | end 155 | end 156 | 157 | write('
') 158 | end 159 | end 160 | 161 | local function render_changes() 162 | -- calculate the number of unsaved changes 163 | if tree.nodes[category] and tree.nodes[category].ucidata then 164 | local ucichanges = 0 165 | 166 | for i, j in pairs(require("luci.model.uci").cursor():changes()) do 167 | for k, l in pairs(j) do 168 | for m, n in pairs(l) do 169 | ucichanges = ucichanges + 1; 170 | end 171 | end 172 | end 173 | 174 | if ucichanges > 0 then 175 | write('%s: %d' %{ 176 | url(category, 'uci/changes'), 177 | http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")), 178 | translate('Unsaved Changes'), 179 | ucichanges 180 | }) 181 | end 182 | end 183 | end 184 | -%> 185 | 186 | 187 | 188 | 189 | <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | - LuCI"> 203 | - LuCI"> 204 | 205 | 206 | 207 | 208 | 209 | 210 | <% if node and node.css then %> 211 | 212 | <% end -%> 213 | <% if css then %> 214 | 215 | <% end -%> 216 | 217 | 218 | 219 | 220 | 221 |
222 |
223 | 224 | <%=boardinfo.hostname or "?"%> 225 |
226 | <% render_changes() %> 227 | 231 |
232 |
233 |
234 |
235 |
Loading...
236 |
237 | <% render_topmenu() %> 238 |
239 |
240 |
241 |
242 |
243 | <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> 244 |
245 |

<%:No password set!%>

246 | <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
247 | "><%:Go to password configuration...%> 248 |
249 | <%- end -%> 250 | <% if category then render_tabmenu(category, cattree) end %> 251 | 252 | 258 | -------------------------------------------------------------------------------- /root/etc/uci-defaults/30_luci-theme-argon-mc: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | uci batch <<-EOF 3 | set luci.themes.Argon_MC1=/luci-static/argon_mc1 4 | set luci.themes.Argon_MC2=/luci-static/argon_mc2 5 | commit luci 6 | EOF 7 | exit 0 8 | -------------------------------------------------------------------------------- /screenshot/201912.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sypopo/luci-theme-argon-mc/6d2a31a7fcfeff66648dce30ad6e5f77d55cc656/screenshot/201912.png --------------------------------------------------------------------------------