From f65f9e32ac0ad321aca8d7ff77d66d6619b5427d Mon Sep 17 00:00:00 2001 From: jerrykuku Date: Sun, 13 Sep 2020 22:08:31 +0800 Subject: [PATCH] v2.2.5 --- Makefile | 4 +- README.md | 16 +- README_ZH.md | 17 +- htdocs/luci-static/argon/css/cascade.css | 3800 +---------------- htdocs/luci-static/argon/css/dark.css | 628 +-- htdocs/luci-static/argon/js/script.js | 5 + htdocs/luci-static/argon/less/cascade.less | 1185 ++--- htdocs/luci-static/argon/less/dark.less | 64 +- luasrc/view/themes/argon/header.htm | 211 +- luasrc/view/themes/argon/header_login.htm | 48 +- ...0_luci-theme-argon => 39_luci-theme-argon} | 1 + 11 files changed, 472 insertions(+), 5507 deletions(-) rename root/etc/uci-defaults/{30_luci-theme-argon => 39_luci-theme-argon} (50%) diff --git a/Makefile b/Makefile index c8833c4..66cd95d 100644 --- a/Makefile +++ b/Makefile @@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Argon Theme LUCI_DEPENDS:= -PKG_VERSION:=2.2.4 -PKG_RELEASE:=20200821 +PKG_VERSION:=2.2.5 +PKG_RELEASE:=20200913 include $(TOPDIR)/feeds/luci/luci.mk diff --git a/README.md b/README.md index f555854..5a030ab 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ [4]: https://github.com/jerrykuku/luci-theme-argon/pulls [5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg [6]: https://github.com/jerrykuku/luci-theme-argon/issues/new -[7]: https://img.shields.io/badge/release-v2.2.4-blue.svg? +[7]: https://img.shields.io/badge/release-v2.2.5-blue.svg? [8]: https://github.com/jerrykuku/luci-theme-argon/releases [9]: https://img.shields.io/github/downloads/jerrykuku/luci-theme-argon/total [10]: https://img.shields.io/badge/Contact-telegram-blue @@ -25,12 +25,20 @@ A new Luci theme for LEDE/OpenWRT Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template ## Notice +It is strongly recommended to use the Chrome browser. Some new css3 features are used in the theme, and currently only Chrome has the best compatibility. +The mainline version of IE series currently has bugs to be resolved. +FireFox does not enable the backdrop-filter by default, see here for the opening method: https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter v2.x.x Adapt to official mainline snapshot. You can checkout branch 18.06 for OpenWRT 18.06 or lean 19.07. -## Update log 2020.08.21 v2.2.4 +## 更新日志 2020.09.13 v2.2.5 +- 【v2.2.5】New config app for argon theme. You can set the blur and transparency of the login page of argon theme, and manage the background pictures and videos.[Chrome is recommended] [Download](https://github.com/jerrykuku/luci-app-argon-config/releases/download/v0.8-beta/luci-app-argon-config_0.8-beta_all.ipk) +- 【v2.2.5】Automatically set as the default theme when compiling. +- 【v2.2.5】Modify the file structure to adapt to luci-app-argon-config. The old method of turning on dark mode is no longer applicable, please use it with luci-app-argon-config. +- 【v2.2.5】Adapt to Koolshare lede 2.3.6。 +- 【v2.2.5】Fix some Bug。 - 【v2.2.4】Fix the problem that the login background cannot be displayed on some phones. - 【v2.2.4】Remove the dependency of luasocket. - 【v2.2.3】Fix Firmware flash page display error in dark mode. @@ -78,14 +86,14 @@ make -j1 V=s ### For Lean openwrt 18.06 LuCI ``` -wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.6.9/luci-theme-argon_1.6.9-20200821_all.ipk +wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.7.0/luci-theme-argon_1.7.0-20200909_all.ipk opkg install luci-theme-argon*.ipk ``` ### For openwrt official 19.07 Snapshots LuCI master ``` -wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.4/luci-theme-argon_2.2.4-20200821_all.ipk +wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.5/luci-theme-argon_2.2.5-20200913_all.ipk opkg install luci-theme-argon*.ipk ``` diff --git a/README_ZH.md b/README_ZH.md index 2998ea7..c54a95a 100644 --- a/README_ZH.md +++ b/README_ZH.md @@ -5,7 +5,7 @@ [4]: https://github.com/jerrykuku/luci-theme-argon/pulls [5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg [6]: https://github.com/jerrykuku/luci-theme-argon/issues/new -[7]: https://img.shields.io/badge/release-v2.2.4-blue.svg? +[7]: https://img.shields.io/badge/release-v2.2.5-blue.svg? [8]: https://github.com/jerrykuku/luci-theme-argon/releases [9]: https://img.shields.io/github/downloads/jerrykuku/luci-theme-argon/total [10]: https://img.shields.io/badge/Contact-telegram-blue @@ -23,14 +23,21 @@ 全新的 Openwrt 主题，基于luci-theme-material 和 开源免费的 Argon 模板进行移植。 ## 注意 - +强烈建议使用Chrome 浏览器。主题中使用了一些新的css3特性，目前只有Chrome有最佳的兼容性。 +主线版本 IE 系列目前还有Bug有待解决。 +FireFox 默认不开启backdrop-filter，开启方法见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter 当前master版本基于官方 OpenWrt 19.07.1 稳定版固件进行移植适配。 v2.x.x 适配主线快照版本。 v1.x.x 适配18.06 和 Lean Openwrt [如果你是lean代码 请选择这个版本] -## 更新日志 2020.08.21 v2.2.4 +## 更新日志 2020.09.13 v2.2.5 +- 【v2.2.5】全新的设置app.你可以设置argon 主题的登录页面的模糊和透明度，并管理背景图片与视频。[建议使用 Chrome][点击下载](https://github.com/jerrykuku/luci-app-argon-config/releases/download/v0.8-beta/luci-app-argon-config_0.8-beta_all.ipk) +- 【v2.2.5】当编译固件时，将自动设置为默认主题。 +- 【v2.2.5】修改文件结构，以适应luci-app-argon-config，旧的开启暗色模式方法将不再适用，请搭配luci-app-argon-config使用。 +- 【v2.2.5】适配Koolshare lede 2.3.6。 +- 【v2.2.5】修复了一些Bug。 - 【v2.2.4】修复了在某些手机下图片背景第一次加载不能显示的问题。 - 【v2.2.4】取消 luasocket 的依赖，无需再担心依赖问题。 - 【v2.2.3】修正了在暗色模式下，固件刷写弹窗内的显示错误。 @@ -78,14 +85,14 @@ make -j1 V=s ### Lean源码 ``` -wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.6.9/luci-theme-argon_1.6.9-20200821_all.ipk +wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.7.0/luci-theme-argon_1.7.0-20200909_all.ipk opkg install luci-theme-argon*.ipk ``` ### For openwrt official 19.07 Snapshots LuCI master ``` -wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.4/luci-theme-argon_2.2.4-20200821_all.ipk +wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.5/luci-theme-argon_2.2.5-20200913_all.ipk opkg install luci-theme-argon*.ipk ``` diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css index c99a95f..0150065 100644 --- a/htdocs/luci-static/argon/css/cascade.css +++ b/htdocs/luci-static/argon/css/cascade.css @@ -1,3799 +1 @@ -/** - * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template - * - * luci-theme-argon - * Copyright 2020 Jerrykuku - * - * Have a bug? Please create an issue here on GitHub! - * https://github.com/jerrykuku/luci-theme-argon/issues - * - * luci-theme-material: - * Copyright 2015 Lutty Yang - * https://github.com/LuttyYang/luci-theme-material/ - * - * Agron Theme - * https://demos.creative-tim.com/argon-dashboard/index.html - * - * Login background - * https://unsplash.com/ - * Font generate by Icomoon - * - * Licensed to the public under the Apache License 2.0 - */ -/* - * Include base and custom css - */ -@import url("fonts.css?v=3"); -@import url("pure-min.css?v=1"); -:root { - --main-color: #09c; - --header-bg: #09c; - --header-color: #fff; - --bar-bg: #5e72e4; - --menu-bg-color: #fff; - --menu-color: #5f6368; - --menu-color-hover: #202124; - --main-menu-color: #202124; - --submenu-bg-hover: #d4d4d4; - --submenu-bg-hover-active: #09c; - --blue: #5e72e4; - --indigo: #5603ad; - --purple: #8965e0; - --pink: #f3a4b5; - --red: #f5365c; - --orange: #fb6340; - --yellow: #ffd600; - --green: #2dce89; - --teal: #11cdef; - --cyan: #2bffc6; - --gray: #8898aa; - --gray-dark: #32325d; - --light: #ced4da; - --lighter: #e9ecef; - --primary: #5e72e4; - --secondary: #f7fafc; - --success: #2dce89; - --info: #11cdef; - --warning: #fb6340; - --danger: #f5365c; - --light: #adb5bd; - --dark: #212529; - --default: #172b4d; - --white: #fff; - --neutral: #fff; - --darker: black; - --background-color: #f4f5f7; - --login-form-bg-color: rgba(244, 245, 247, 0.8); - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --blur-radius: 10px; - --blur-opacity: 0.5; - --blur-radius-dark: 10px; - --blur-opacity-dark: 0.5; - --font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - --font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif; -} -html, -body { - margin: 0px; - padding: 0px; - height: 100%; - font-size: 16px; - font-family: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; - font-family: var(--font-family-sans-serif); -} -html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -body { - font-size: 0.875rem; - background-color: #f4f5f7; - background-color: var(--background-color); - color: #32325d; - color: var(--gray-dark); -} -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} -::selection { - background-color: #5e72e4; - background-color: var(--primary); - color: #ffffff; - color: var(--white); -} -a:link, -a:visited, -a:active { - color: #5e72e4; - color: var(--primary); - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -li { - list-style-type: none; -} -.table { - position: relative; - display: table; -} -.tr { - display: table-row; -} -.thead { - display: table-header-group; -} -.tbody { - display: table-row-group; -} -.tfoot { - display: table-footer-group; -} -.td, -.th { - line-height: normal; - display: table-cell; - padding: 0.5em; - text-align: center; - vertical-align: middle; -} -.th { - font-weight: bold; - white-space: nowrap; -} -.tr.placeholder { - height: 4em; -} -.tr.placeholder > .td { - line-height: 3; - position: absolute; - right: 0; - bottom: 0; - left: 0; - padding: 0.4rem 0 !important; - text-align: center !important; - background: inherit; -} -.td[width="33%"] { - padding: 1.1em 1.5rem; -} -.table[width="33%"], -.th[width="33%"], -.td[width="33%"] { - width: 33%; -} -.table[width="100%"], -.th[width="100%"], -.td[width="100%"] { - width: 100%; -} -.col-1 { - flex: 1 1 30px !important; -} -.col-2 { - flex: 2 2 60px !important; -} -.col-3 { - flex: 3 3 90px !important; -} -.col-4 { - flex: 4 4 120px !important; -} -.col-5 { - flex: 5 5 150px !important; -} -.col-6 { - flex: 6 6 180px !important; -} -.col-7 { - flex: 7 7 210px !important; -} -.col-8 { - flex: 8 8 240px !important; -} -.col-9 { - flex: 9 9 270px !important; -} -.col-10 { - flex: 10 10 300px !important; -} -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: inherit; - font-weight: normal; - line-height: 1.1 !important; - color: inherit; -} -select { - padding: 0.36rem 0.8rem; - color: #555; - border: thin solid #ccc; - background-color: #fff; - background-image: none; -} -.btn, -button, -select, -input, -.cbi-dropdown { - line-height: 1.5rem; - padding: 0.5rem 0.75rem; - margin: 0.25rem 0.1rem; - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: 0.25rem; - outline: 0; - background-image: none; - box-shadow: none; - transition: box-shadow 0.15s ease; -} -select, -.cbi-dropdown { - width: inherit; - cursor: default; -} -select:not([multiple="multiple"]):focus, -input:not(.cbi-button):focus, -.cbi-dropdown:focus { - border-color: #5e72e4; - border-color: var(--primary); - box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, 0.1); -} -.cbi-dropdown, -select[multiple="multiple"] { - height: auto; -} -pre { - overflow: auto; -} -code { - font-size: 1rem; - font-size-adjust: 0.35; - padding: 1px 3px; - color: #101010; - border-radius: 2px; - background: #ddd; -} -abbr { - cursor: help; - text-decoration: underline; - color: #5e72e4; -} -hr { - margin: 1rem 0; - opacity: 0.1; - border-color: #eee; -} -/*********************** -* -* Login Page -* -***************************/ -.login-page { - height: 100%; - background-image: url(../img/blank.png); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all 0.5s; -} -.login-page .video { - position: absolute; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: #000; - background-color: var(--darker); - overflow: hidden; - pointer-events: none; -} -.login-page .video video { - width: 100%; - height: auto; -} -.login-page .volume-control { - position: fixed; - right: 1rem; - top: 1rem; - width: 1.5rem; - height: 1.5rem; - z-index: 5000; - cursor: pointer; - background-size: contain; - background-image: url(../img/volume_high.svg); -} -.login-page .volume-control.mute { - background-image: url(../img/volume_off.svg); -} -.login-page .main-bg { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background-image: url(../img/blank.png); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all 0.5s; -} -.login-page .login-container { - height: 100%; - margin-left: 4.5rem; - position: absolute; - top: 0px; - display: flex; - flex-direction: column; - -webkit-box-pack: center; - justify-content: center; - align-items: flex-start; - min-height: 100%; - z-index: 2; - width: 420px; - box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 35px -5px; - margin-left: 5%; - background: transparent; -} -.login-page .login-container .login-form { - display: flex; - flex-direction: column; - -webkit-box-align: center; - align-items: center; - position: absolute; - top: 0px; - width: 100%; - min-height: 100%; - max-width: 420px; - background-color: #ffffff; -} -.login-page .login-container .login-form .brand { - display: flex; - -webkit-box-align: center; - align-items: center; - margin: 50px auto 100px 50px; - color: #525461; -} -.login-page .login-container .login-form .brand .icon { - width: 50px; - height: auto; - margin-right: 25px; -} -.login-page .login-container .login-form .brand .brand-text { - font-size: 1.25rem; - font-weight: 700; - font-family: "TypoGraphica"; -} -.login-page .login-container .login-form .brand:hover { - text-decoration: none; -} -.login-page .login-container .login-form .form-login { - width: 100%; - padding: 20px 50px; - box-sizing: border-box; -} -.login-page .login-container .login-form .form-login .errorbox { - text-align: center; - color: #fb6340; - color: var(--warning); - padding-bottom: 2rem; -} -.login-page .login-container .login-form .form-login .input-group { - margin-bottom: 1.25rem; - position: relative; -} -.login-page .login-container .login-form .form-login .input-group::before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #525461; - font-size: 1.5rem; - position: absolute; - z-index: 100; - left: 10px; - top: 10px; -} -.login-page .login-container .login-form .form-login .input-group .border { - position: absolute; - width: 100%; - height: 1px; - bottom: 0; - border-bottom: 1px #5e72e4 solid; - transform: scaleX(0); - transition: transform 0.3s; -} -.login-page .login-container .login-form .form-login .input-group input { - font-size: 1rem; - line-height: 1.5em; - display: block; - width: 100%; - padding: 0.5rem 0.75rem 0.5rem 3rem; - margin: 0.825rem 0; - box-sizing: border-box; - transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); - color: #525461; - border: 0; - border-radius: 0; - border-bottom: 1px solid #fff; - background-color: transparent; - background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233, 236, 239, 0.05); - outline: none; -} -.login-page .login-container .login-form .form-login .input-group input:focus + .border { - transform: scaleX(1); -} -.login-page .login-container .login-form .form-login .input-group .cbi-input-password { - margin-bottom: 2rem; - position: relative; -} -.login-page .login-container .login-form .form-login .user-icon::before { - content: "\e971"; -} -.login-page .login-container .login-form .form-login .pass-icon::before { - content: "\e910"; -} -.login-page .login-container .login-form .cbi-button-apply { - width: 100% !important; - box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px; - font-weight: 600; - font-size: 15px; - color: #ffffff; - text-align: center; - width: 100%; - cursor: pointer; - min-height: 50px; - background-color: #5e72e4 !important; - border-radius: 6px; - outline: none; - border-width: initial; - border-style: none; - border-color: initial; - border-image: initial; - padding: 10px 0px; - margin: 30px 0px 100px; - transition: all 0.3s; - letter-spacing: 0.8rem; -} -.login-page .login-container .login-form .cbi-button-apply:hover, -.login-page .login-container .login-form .cbi-button-apply :focus { - background-color: #5065d8 !important; -} -.login-page .login-container footer { - box-sizing: border-box; - width: 100%; - text-align: center; - line-height: 1.6rem; - display: flex; - justify-content: space-evenly; - margin-top: auto; - padding: 0px 0px 30px; - color: #525461; - z-index: 10; -} -.login-page .login-container footer .ftc { - position: absolute; - bottom: 30px; - width: 100%; -} -.login-page .login-container footer .luci-link { - display: block; -} -@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { - .login-page .login-container .login-form { - -webkit-backdrop-filter: blur(var(--blur-radius)); - backdrop-filter: blur(var(--blur-radius)); - background-color: rgba(244, 245, 247, var(--blur-opacity)); - } -} -header, -.main { - width: 100%; -} -footer { - font-size: 0.8rem; - overflow: hidden; - padding: 1rem; - text-align: right; - white-space: nowrap; - color: #aaa; -} -footer > a { - text-decoration: none; - color: #aaa; -} -small { - font-size: 90%; - line-height: 1.42857143; - white-space: normal; -} -.main { - position: relative; - top: 0; - bottom: 0; - overflow-y: auto; - height: 100%; -} -.main-left { - top: 0; - float: left; - width: 15%; - width: calc(0% + 15rem); - height: 100%; - background-color: #fff; - background-color: var(--menu-bg-color); - box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px; - overflow-x: auto; - position: fixed; - z-index: 100; -} -.main-left .sidenav-header { - padding: 1.5rem; - text-align: center; -} -.main-left .sidenav-header .brand { - font-size: 1.8rem; - color: #5e72e4; - font-family: "TypoGraphica"; - text-decoration: none; - text-align: center; - cursor: default; - vertical-align: text-bottom; - white-space: nowrap; -} -.main-left::-webkit-scrollbar { - width: 5px; - height: 1px; -} -.main-left::-webkit-scrollbar-thumb { - background-color: #f6f9fc; -} -.main-left::-webkit-scrollbar-track { - background-color: #fff; -} -.main-right { - float: right; - width: 85%; - width: calc(100% - 15rem); - height: 100%; - transition: all 0.2s; -} -.main-right > #maincontent { - position: relative; - z-index: 50; -} -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.nowrap:not(.td) { - white-space: nowrap; -} -[disabled="disabled"] { - pointer-events: none; -} -header { - color: #fff; - color: var(--header-color); - padding: 0; - position: relative; -} -header.bg-primary { - background-color: #5e72e4 !important; - background-color: var(--primary) !important; -} -header::after { - content: ""; - position: absolute; - height: 2rem; - width: 100%; - background-color: #5e72e4 !important; -} -header .fill { - padding: 0.8rem 0; - border-bottom: 0px solid rgba(255, 255, 255, 0.08) !important; -} -header .fill .container { - height: 2rem; - padding: 0 1.25rem; -} -header .fill .container .showSide { - display: none; - color: #fff; - font-size: 1.4rem; -} -header .fill .container .showSide:hover { - text-decoration: none; -} -header .fill .container .brand { - font-size: 1.5rem; - color: #fff; - font-family: "TypoGraphica"; - text-decoration: none; - padding-left: 1rem; - cursor: default; - vertical-align: text-bottom; - display: none; -} -header .fill .container .pull-right { - float: right; - margin-top: 0rem; - display: flex; -} -header .fill .status { - position: absolute; - top: 25%; - right: 1.25rem; - float: right; -} -header .fill .status span[data-indicator="poll-status"] { - display: block; - font-size: 0.8rem; - font-weight: bold; - padding: 0.3rem 0.8rem; - white-space: nowrap; - text-decoration: none; - text-transform: uppercase; - text-shadow: none; - border-radius: 3px; - cursor: pointer; - transition: all 0.3s; -} -header .fill .status span[data-style="active"] { - color: #32325d !important; - background-color: #fff; -} -header .fill .status span[data-style="inactive"] { - color: #ffffff !important; - background-color: #32325d; -} -#xhr_poll_status { - display: flex; - margin-left: 0.5rem; -} -#xhr_poll_status * { - color: #fff; -} -div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { - border: 0 !important; -} -.danger { - background-color: #ff7d60 !important; -} -.warning { - background-color: #f0e68c !important; -} -.success { - background-color: #5cb85c !important; -} -.notice { - background-color: #11cdef !important; - color: #fff; -} -.error { - color: #f00; -} -.alert, -.alert-message { - font-weight: bold; - margin-bottom: 1em; - padding: 1rem; - border: 0; - border-radius: 0.375rem !important; - background-color: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); - text-shadow: 1px 1px rgba(0, 0, 0, 0.1); -} -.alert.error, -.alert-message.error { - background-color: #ffd600; -} -.alert h4, -.alert-message h4 { - padding: 0rem 1.5rem 0.75rem 0rem; -} -.alert .btn, -.alert-message .btn { - height: auto; -} -.alert-message > h4 { - font-size: 110%; - font-weight: bold; -} -.alert-message > * { - margin: 0.5rem 0; -} -.alert-message .btn { - padding: 0.3rem 0.6rem; -} -.container .alert, -.container .alert-message { - margin-top: 1rem; -} -/* - * Main Menu - */ -.main .main-left { - transition: all 0.2s; -} -.main .main-left .nav { - margin-top: 0.5rem; -} -.main .main-left .nav li { - padding: 0.5rem 1rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.main .main-left .nav li a { - display: block; - color: #5f6368; - color: var(--menu-color); -} -.main .main-left .nav li.slide { - padding: 0; -} -.main .main-left .nav li.slide ul { - display: none; -} -.main .main-left .nav li.slide .menu { - display: block; - margin: 0.1rem 0.5rem 0.1rem 0.5rem; - padding: 0.675rem 0 0.675rem 2.5rem; - border-radius: 0.375rem; - text-decoration: none; - cursor: default; - font-size: 1rem; - transition: all 0.2s; - position: relative; -} -.main .main-left .nav li.slide .menu.active { - color: #fff; - background: #5e72e4; - background: var(--primary); -} -.main .main-left .nav li.slide .menu.active::before { - color: #fff !important; -} -.main .main-left .nav li.slide .menu.active::after { - transform: rotate(90deg); - color: #fff !important; -} -.main .main-left .nav li.slide .menu:hover { - cursor: pointer; - color: #fff; - background: #5e72e4; - background: var(--primary); -} -.main .main-left .nav li.slide .menu:hover::before { - color: #fff !important; -} -.main .main-left .nav li.slide .menu::before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - left: 0.8rem; - padding-top: 3px; - transition: all 0.3s; - content: "\e915"; - color: #5e72e4; -} -.main .main-left .nav li.slide .menu::after { - position: absolute; - right: 0.5rem; - top: 0.8rem; - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -moz-osx-font-smoothing: grayscale; - content: '\e90f'; - transition: all 0.15s ease; - color: #ced4da; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - transition: all 0.3s; -} -.main .main-left .nav li.slide .menu[data-title=Status]:before { - content: "\e906"; - color: #5e72e4; -} -.main .main-left .nav li.slide .menu[data-title=System]:before { - content: "\e90a"; - color: #fb6340; -} -.main .main-left .nav li.slide .menu[data-title=Services]:before { - content: "\e909"; - color: #11cdef; -} -.main .main-left .nav li.slide .menu[data-title=NAS]:before { - content: "\e90c"; - color: #f3a4b5; -} -.main .main-left .nav li.slide .menu[data-title=VPN]:before { - content: "\e90b"; - color: #8965e0; -} -.main .main-left .nav li.slide .menu[data-title=Network]:before { - content: "\e908"; - color: #8965e0; -} -.main .main-left .nav li.slide .menu[data-title=Bandwidth_Monitor]:before { - content: "\e90d"; - color: #2dce89; -} -.main .main-left .nav li.slide .menu[data-title=Docker]:before { - content: "\e911"; - color: #6699ff; -} -.main .main-left .nav li.slide .menu[data-title=Statistics]:before { - content: "\e913"; - color: #8965e0; -} -.main .main-left .nav li.slide .menu[data-title=Control]:before { - content: "\e912"; - color: #5e72e4; -} -.main .main-left .nav li.slide .menu[data-title=Asterisk]:before { - content: "\e914"; - color: #fb6340; -} -.main .main-left .nav li.slide .menu[data-title=Logout]:before { - content: "\e907"; - color: #adb5bd; -} -.main .main-left .nav li.slide:hover { - background: none; -} -.main .main-left .nav li.slide .slide-menu { - margin: 0 0.5rem 0 2.5rem; - padding: 0rem 0.5rem; -} -.main .main-left .nav li.slide .slide-menu li { - position: relative; - border-radius: 0.375rem; - margin: 0.2rem 0; - padding: 0.5rem 0rem; - background: none; -} -.main .main-left .nav li.slide .slide-menu li a { - white-space: nowrap; - text-decoration: none; -} -.main .main-left .nav li.slide .slide-menu li::after { - content: ""; - position: absolute; - left: 0; - bottom: 0; - width: 0; - height: 2px; - background-color: #5e72e4; - transition: all 0.2s; -} -.main .main-left .nav li.slide .slide-menu li:hover { - background: none; -} -.main .main-left .nav li.slide .slide-menu li:hover::after { - width: 100%; -} -.main .main-left .nav li.slide .slide-menu .active { - background: none; - color: var(--menu-color); -} -.main .main-left .nav li.slide .slide-menu .active a { - color: var(--menu-color); -} -.main .main-left .nav li.slide .slide-menu .active::after { - content: ""; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 2px; - background-color: #5e72e4; - transition: all 0.2s; -} -.main .main-left .nav li.slide .slide-menu .active:hover { - background: none; -} -.main .main-left .nav li.slide .slide-menu .active:hover::after { - width: 100%; -} -.lg { - margin: 0; - padding: 0 !important; -} -.logout { - display: block; - margin: 0.8rem 0.5rem 0.1rem 0.5rem; - padding: 0.675rem 0 0.675rem 2.5rem; - border-radius: 0.375rem; - text-decoration: none; - font-size: 1rem; - transition: all 0.2s; - position: relative; -} -.logout:before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - left: 0.8rem; - padding-top: 3px; - transition: all 0.3s; - content: "\e907"; - color: #32325d !important; -} -body[class*="node-"] > .main > .main-left > .nav > .slide > .menu::before { - transition: transform 0.1s ease-in-out; -} -body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before { - transition: transform 0.2s ease-in-out; -} -.main > .main-left[style*="overflow: hidden"] > .nav > .slide > .menu::before { - display: none; -} -#maincontent > .container { - margin: 0 1.25rem 1rem 1.25rem; -} -ul { - line-height: normal; -} -li { - list-style-type: none; -} -h1 { - font-size: 2rem; - padding-bottom: 10px; - border-bottom: thin solid #eee; -} -h2 { - margin: 0 0 1rem 0; - font-size: 1.25rem; - letter-spacing: 0.1rem; - padding: 1rem 1.5rem; - color: #32325d; - border-radius: 0.375rem; - background: #fff; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); -} -h3 { - font-size: 1.1rem; - line-height: 1; - display: block; - width: 100%; - margin: 0; - margin-bottom: 0; - padding: 0.8755rem 1.5rem; - color: #32325d; - color: var(--gray-dark); - border-radius: 0.375rem; - background: #fff; -} -h4 { - margin: 0; - padding: 0.75rem 1.5rem; - font-size: 0.7rem; - font-weight: 600; - color: #525f7f; - background-color: #e9ecef; - background-color: var(--lighter); -} -h4 em { - padding: 0 0.5rem; -} -h5 { - font-size: 1rem; - margin: 2rem 0 0 0; - padding-bottom: 10px; -} -.cbi-section, -.cbi-section-error, -#iptables, -.Firewall form, -#cbi-network > .cbi-section-node, -#cbi-wireless > .cbi-section-node, -#cbi-wireless > #wifi_assoclist_table, -[data-tab-title], -[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), -[data-page="admin-system-opkg"] #maincontent > .container { - font-family: inherit; - font-weight: normal; - font-style: normal; - line-height: normal; - min-width: inherit; - margin: 1.5rem 0; - padding: 0rem; - border: 0; - border-radius: 0.375rem; - background-color: #fff; - box-shadow: 0 0 1rem 0 rgba(136, 152, 170, 0.15); -} -.cbi-modal .cbi-section, -.cbi-section .cbi-section { - padding: 0; - box-shadow: none; -} -.cbi-modal .cbi-tabmenu { - margin-left: 0; -} -.cbi-map-descr, -.cbi-section-descr { - font-size: small; - line-height: 1.42857143; - padding: 0.5rem 1.5rem; -} -.cbi-map-descr + fieldset { - margin-top: 1rem; -} -.cbi-map-descr > abbr { - cursor: help; - text-decoration: underline; -} -.cbi-section > legend { - display: none !important; -} -fieldset > fieldset, -.cbi-section > .cbi-section { - margin: 0; - padding: 0; - border: 0; - box-shadow: none; -} -.cbi-section > h3:first-child, -.panel-title { - font-size: 1.1rem; - line-height: 1; - display: block; - width: 100%; - margin: 0; - margin-bottom: 0; - padding: 0.8755rem 1.5rem; - color: #32325d; - color: var(--gray-dark); -} -.cbi-section > h3:first-child, -.cbi-section > h4:first-child, -.cbi-section > p:first-child, -[data-tab-title] > h3:first-child, -[data-tab-title] > h4:first-child, -[data-tab-title] > p:first-child { - padding: 1rem; -} -.cbi-section p { - padding: 1rem; -} -table { - border-spacing: 0; - border-collapse: collapse; -} -table, -.table { - overflow-y: hidden; - width: 100%; - font-size: 90%; -} -.table .table-titles th { - background-color: #e9ecef; - background-color: var(--lighter); -} -table > tbody > tr > td, -table > tbody > tr > th, -table > tfoot > tr > td, -table > tfoot > tr > th, -table > thead > tr > td, -table > thead > tr > th, -.table > .tbody > .tr > .td, -.table > .tbody > .tr > .th, -.table > .tfoot > .tr > .td, -.table > .tfoot > .tr > .th, -.table > .thead > .tr > .td, -.table > .thead > .tr > .th, -.table > .tr > .td.cbi-value-field, -.table > .tr > .th.cbi-section-table-cell { - padding: 0.5rem; -} -.container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td { - padding: 0.6rem; -} -.cbi-section-table-cell { - line-height: 1.1; - align-self: flex-end; - flex: 1 1 auto; -} -tr > td, -tr > th, -.tr > .td, -.tr > .th, -.cbi-section-table-row::before, -#cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) { - border-top: thin solid #ddd; - padding: 1.1em 1.5rem; -} -#cbi-wireless .td, -#cbi-network .tr:first-child > .td, -.table[width="100%"] > .tr:first-child > .td, -[data-page="admin-network-diagnostics"] .tr > .td, -.tr.table-titles > .th, -.tr.cbi-section-table-titles > .th { - border-top: 0 !important; - background-color: #f6f9fc; - padding: 1.1em 1.5rem; - line-height: 1.3rem; -} -.table[width="100%"] > .tr:first-child > .td { - margin: auto 0; -} -.cbi-section-table-row { - margin-bottom: 1rem; - text-align: center !important; - background: #f4f4f4; -} -.cbi-section-table-row:last-child { - margin-bottom: 0; -} -.cbi-section-table-row > .cbi-value-field .cbi-dropdown, -.cbi-section-table-row > .cbi-value-field .cbi-input-select, -.cbi-section-table-row > .cbi-value-field .cbi-input-text, -.cbi-section-table-row > .cbi-value-field .cbi-input-password { - width: 100%; -} -.cbi-section-table-row > .cbi-value-field [data-dynlist] > input, -.cbi-section-table-row > .cbi-value-field input.cbi-input-password { - width: calc(100% - 1.5rem); -} -.cbi-section-table-row .td { - text-align: center !important; -} -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tr:nth-of-type(2n) { - background-color: #f9f9f9; -} -/* fix multiple table */ -table table, -.table .table, -.cbi-value-field table, -.cbi-value-field .table, -td > table > tbody > tr > td, -.td > .table > .tbody > .tr > .td, -.cbi-value-field > table > tbody > tr > td, -.cbi-value-field > .table > .tbody > .tr > .td { - border: 0; -} -/* button style */ -.btn, -.cbi-button, -.item::after { - font-size: 0.8rem; - display: inline-block; - width: auto !important; - padding: 0.45rem 0.8rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: all 0.2s ease-in-out; - text-align: center; - vertical-align: middle; - white-space: nowrap; - text-decoration: none; - text-transform: uppercase; - color: rgba(0, 0, 0, 0.87); - border: 0; - border-radius: 0.2rem; - background-color: #f0f0f0; - background-image: none; - -webkit-appearance: none; - -ms-touch-action: manipulation; - touch-action: manipulation; -} -.cbi-button-up, -.cbi-button-down { - font-size: 1.2rem; - display: inline-block; - min-width: 0; - padding: 0.2rem 0.3rem; - color: transparent !important; - background: url(../icon/arrow.svg) no-repeat center; - background-size: 12px 20px; -} -.cbi-button-up { - transform: scaleY(-1); -} -.cbi-button:not(select) { - -webkit-appearance: none !important; -} -.btn:hover, -.btn:focus, -.btn:active, -.cbi-button:hover, -.cbi-button:focus, -.cbi-button:active, -.item:hover::after, -.item:focus::after, -.item:active::after, -.cbi-page-actions .cbi-button-apply + .cbi-button-save:hover, -.cbi-page-actions .cbi-button-apply + .cbi-button-save:focus, -.cbi-page-actions .cbi-button-apply + .cbi-button-save:active { - text-decoration: none; - outline: 0; -} -.btn:hover, -.btn:focus, -.cbi-button:hover, -.cbi-button:focus, -.item:hover::after, -.item:focus::after { - box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); -} -.btn:active, -.cbi-button:active, -.item:active::after { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} -.cbi-button-up:hover, -.cbi-button-up:focus { - box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.2); -} -.cbi-button-up:active { - box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 -6px 6px rgba(0, 0, 0, 0.23); -} -.btn:disabled, -.cbi-button:disabled { - cursor: not-allowed; - pointer-events: none; - opacity: 0.5; - box-shadow: none; -} -/* gray */ -.alert-message [class="btn"], -.modal div[class="btn"], -.cbi-button-find, -.cbi-button-link, -.cbi-button-up, -.cbi-button-down, -.cbi-button-neutral, -.cbi-button[name="zero"], -.cbi-button[name="restart"], -.cbi-button[onclick="hide_empty(this)"] { - font-weight: bold; - color: #fff; - border: thin solid #8898aa; - background-color: #8898aa; -} -/* dark blue */ -.btn.primary, -.cbi-page-actions .cbi-button-save, -.cbi-page-actions .cbi-button-apply + .cbi-button-save, -.cbi-button-add, -.cbi-button-save, -.cbi-button-positive, -.cbi-button-link, -.cbi-button[value="Enable"], -.cbi-button[value="Scan"], -.cbi-button[value^="Back"], -.cbi-button-neutral[onclick="handleConfig(event)"] { - font-weight: normal; - color: #fff !important; - border: thin solid #5e72e4; - border: thin solid var(--primary); - background-color: #5e72e4; - background-color: var(--primary); -} -/* light blue */ -.cbi-page-actions .cbi-button-apply, -.cbi-section-actions .cbi-button-edit, -.cbi-button-edit, -.cbi-button-apply, -.cbi-button-reload, -.cbi-button-action, -.cbi-button[value="Submit"], -.cbi-button[value="Upload"], -.cbi-button[value$="Apply"], -.cbi-button[onclick="addKey(event)"] { - font-weight: normal; - color: #fff !important; - border: thin solid #5e72e4; - border: thin solid var(--primary); - background-color: #5e72e4; - background-color: var(--primary); -} -/* red */ -.btn.danger, -.cbi-section-remove > .cbi-button, -.cbi-button-remove, -.cbi-button-reset, -.cbi-button-negative, -.cbi-button[value="Stop"], -.cbi-button[value="Kill"], -.cbi-button[onclick="reboot(this)"], -.cbi-button-neutral[value="Restart"] { - font-weight: normal; - color: #fff; - border: thin solid #f5365c; - border: thin solid var(--red); - background-color: #f5365c; - background-color: var(--red); -} -/* yellow */ -.btn[value="Dismiss"], -.cbi-button[value="Terminate"], -.cbi-button[value="Reset"], -.cbi-button[value="Disabled"], -.cbi-button[onclick^="iface_reconnect"], -.cbi-button[onclick="handleReset(event)"], -.cbi-button-neutral[value="Disable"] { - font-weight: normal; - color: #fff; - border: thin solid #eea236; - background-color: #f0ad4e; -} -/* green */ -.cbi-button-success, -.cbi-button-download, -.cbi-button[name="backup"], -.cbi-button[value="Download"], -.cbi-button[value="Save mtdblock"] { - font-weight: normal; - color: #fff; - border: thin solid #4cae4c; - background-color: #5cb85c; -} -.cbi-page-actions .cbi-button-link:first-child { - float: left; -} -.a-to-btn { - text-decoration: none; -} -.cbi-value-field .cbi-button-add { - font-weight: bold; - margin: 4px 0 4px 3px; - padding: 1px 6px; - display: flex; - align-items: center; -} -.tabs { - margin: 0 0 1rem 0; - padding: 0 1rem; - background-color: #FFFFFF; - border-radius: 0.375rem; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); - white-space: nowrap; - overflow-x: auto; -} -.tabs::-webkit-scrollbar { - width: 1px; - height: 5px; -} -.tabs::-webkit-scrollbar-thumb { - background-color: #f6f9fc; -} -.tabs::-webkit-scrollbar-track { - background-color: #fff; -} -.tabs li[class~="active"], -.tabs li:hover { - cursor: pointer; - border-bottom: 0.18751rem solid #5e72e4; - color: #5e72e4; - background-color: #dce1fe; - margin-bottom: 0; - border-radius: 0; -} -.tabs li[class~="active"] a, -.tabs li:hover a { - color: #5e72e4; -} -.tabs li { - font-size: 0.875rem; - display: inline-block; - padding: 0.875rem 0rem; - border-bottom: 0.18751rem solid rgba(0, 0, 0, 0); - margin: 0 0.2rem; -} -.tabs li a { - text-decoration: none; - color: #404040; - padding: 0.5rem 0.8rem; -} -.tabs li:hover { - border-bottom: 0.18751rem solid #5e72e4; -} -.cbi-tabmenu { - color: white; - padding: 0.5rem 1rem 0 1rem; - white-space: nowrap; - overflow-x: auto; -} -.cbi-tabmenu::-webkit-scrollbar { - width: 1px; - height: 5px; -} -.cbi-tabmenu::-webkit-scrollbar-thumb { - background-color: #f6f9fc; -} -.cbi-tabmenu::-webkit-scrollbar-track { - background-color: #fff; -} -.cbi-tabmenu li { - background: #dce3e9; - display: inline-block; - font-size: 0.875rem; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - padding: 0.5rem 0rem; - border-bottom: 0.18751rem solid rgba(0, 0, 0, 0); - margin: 0 0.2rem; -} -.cbi-tabmenu li a { - text-decoration: none; - color: #404040; - padding: 0.5rem 0.8rem; -} -.cbi-tabmenu li:hover { - cursor: pointer; - border-bottom: 0.18751rem solid #5e72e4; - color: #5e72e4; - background-color: #dce1fe; - margin-bottom: 0; -} -.cbi-tabmenu li:hover a { - color: #525f7f; -} -.cbi-tabmenu li[class~="cbi-tab"] { - border-bottom: 0.18751rem solid #5e72e4; - color: #5e72e4; - background-color: #dce1fe; - margin-bottom: 0; -} -.cbi-tabmenu li[class~="cbi-tab"] a { - color: #5e72e4; -} -.cbi-tab-descr { - padding: 0.5rem 1.5rem; -} -.cbi-section .cbi-section-remove:nth-of-type(2n), -.container > .cbi-section .cbi-section-node:nth-of-type(2n) { - background-color: #f9f9f9; -} -[data-tab-title] { - overflow: hidden; - height: 0; - opacity: 0; - margin: 0; - padding: 0rem 0rem !important; -} -[data-tab-title] p { - margin-left: 1rem; - margin-bottom: 1rem; -} -[data-tab-active="true"] { - overflow: visible; - height: auto; - opacity: 1; - transition: opacity 0.25s ease-in; - margin: inherit !important; -} -.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3), -.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) { - background-color: #f9f9f9; -} -.cbi-section-node-tabbed { - margin-top: 0; - padding: 0; - border: 0 solid #d4d4d4; - border-radius: 0.375rem; -} -.cbi-tabcontainer > .cbi-value:nth-of-type(2n) { - background-color: #f9f9f9; -} -.cbi-value-field, -.cbi-value-description { - line-height: 1.25; - display: table-cell; -} -.cbi-value-field abbr, -.cbi-value-description abbr { - color: #32325d; - color: var(--gray-dark); -} -.cbi-value-description { - font-size: small; - padding: 0.5rem; - opacity: 0.5; -} -.cbi-value-title { - display: table-cell; - float: left; - width: 23rem; - padding-top: 0.25rem; - padding-right: 2rem; - text-align: right; - word-wrap: break-word; -} -.cbi-value { - display: inline-block; - width: 100%; - padding: 0.35rem 1rem 0.2rem 1rem; - line-height: 2.4rem; -} -.cbi-value ul { - line-height: 1.25; -} -.cbi-value-field .cbi-dropdown, -.cbi-value-field .cbi-input-select, -.cbi-value input[type="text"], -.cbi-value input[type="password"] { - min-width: 18rem; -} -.cbi-value input[type="password"] { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - margin-right: 0; -} -.cbi-value input[type="password"] + .cbi-button-neutral { - height: 42px; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: 0; - border: 0; -} -#cbi-firewall-zone .cbi-input-select, -#cbi-network-switch_vlan .cbi-input-select { - min-width: 11rem; -} -#cbi-network-switch_vlan .cbi-input-text { - max-width: 3rem; -} -.cbi-input-invalid { - color: #f5365c; - border-bottom-color: #f5365c; -} -.cbi-section-error { - font-weight: bold; - line-height: 1.42857143; - margin: 18px; - padding: 6px; - border: thin solid #f5365c; - border-radius: 3px; - background-color: #fce6e6; -} -.cbi-section-error ul { - margin: 0 0 0 20px; -} -.cbi-section-error ul li { - font-weight: bold; - color: #f5365c; -} -.td[data-title]::before { - font-weight: bold; - display: none; - padding: 0.25rem 0; - content: attr(data-title) ":\20"; - text-align: left; - white-space: nowrap; -} -.tr.placeholder .td[data-title]::before { - display: none; -} -.tr[data-title]::before, -.tr.cbi-section-table-titles.named::before { - font-weight: bold; - display: table-cell; - align-self: center; - flex: 1 1 5%; - padding: 0.25rem; - content: attr(data-title) "\20"; - text-align: center; - vertical-align: middle; - white-space: normal; - word-wrap: break-word; -} -.cbi-rowstyle-1 { - background-color: #f9f9f9; -} -.cbi-rowstyle-2 { - background-color: #eee; -} -.cbi-rowstyle-2 .cbi-button-up, -.cbi-rowstyle-2 .cbi-button-down, -body:not(.Interfaces) .cbi-rowstyle-2:first-child { - background-color: #fff !important; -} -.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - width: auto !important; -} -.td.cbi-section-actions { - text-align: right !important; - vertical-align: middle; -} -.td.cbi-section-actions > * { - display: inline-flex; -} -.td.cbi-section-actions > * > *, -.td.cbi-section-actions > * > form > * { - margin: 0 5px; - display: flex; - align-items: center; -} -.td.cbi-section-actions > * > form { - display: inline-flex; - margin: 0; -} -.cbi-checkbox { - margin: 0 0.25rem; -} -/* lists */ -.cbi-dynlist { - line-height: 1.3; - flex-direction: column; - min-height: 30px; - cursor: text; -} -.cbi-dynlist > .item { - position: relative; - max-width: 25rem; - pointer-events: none; - color: #8898aa; - outline: 0; -} -.cbi-dynlist[name="sshkeys"] > .item { - max-width: none; -} -.cbi-dynlist > .item::after { - position: absolute; - width: 2.2rem !important; - height: calc(100% - 0.5rem - 2px); - right: 0; - bottom: 0; - content: "\00D7"; - pointer-events: auto; - background-color: var(--red); - font-weight: normal; - font-size: 1.2rem; - display: flex; - align-items: center; - justify-content: center; - line-height: 1.5rem; - padding: 0; - margin: 0.25rem 0.1rem 0.25rem 0; - color: #fff; - border: 1px solid #f5365c; - border-radius: 0.25rem; - outline: 0; - background-image: none; - box-shadow: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.cbi-dynlist > .item > span { - white-space: normal; - word-break: break-word; - line-height: 1.5rem; - padding: 0.5rem 0.5rem; - margin: 0.25rem 0.1rem; - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: 0.25rem; - outline: 0; - background-image: none; - box-shadow: none; - display: block; - transition: box-shadow 0.15s ease; - box-sizing: border-box; - min-width: 15rem; -} -.cbi-dynlist > .add-item { - display: inline-flex; - align-items: center; - width: 100%; - min-width: 16rem; -} -.cbi-dynlist > .add-item input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - margin-right: 0; - border-right: none; -} -.cbi-dynlist > .add-item .cbi-button-add { - font-weight: normal; - font-size: 1.2rem; - display: flex; - align-items: center; - line-height: 1.5rem; - padding: 0.5rem 0.75rem; - margin: 0.25rem 0.1rem 0.25rem 0; - color: #fff; - border: 1px solid #5e72e4; - border-radius: 0.25rem; - outline: 0; - background-image: none; - box-shadow: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.cbi-dynlist > .add-item:not([ondrop]) > input { - overflow: hidden; - width: 100%; - min-width: 15rem; - white-space: nowrap; - text-overflow: ellipsis; -} -.cbi-dynlist > .add-item[ondrop] > input { - min-width: 13rem; -} -.cbi-dynlist, -.cbi-dropdown { - position: relative; - display: inline-flex; - padding: 0.2rem 0.2rem; -} -.cbi-dropdown[placeholder*="select"] { - max-width: 25rem; - height: auto; - margin-top: -3px; -} -.cbi-dropdown > ul { - display: flex; - overflow-x: hidden; - overflow-y: auto; - width: 100%; - margin: 0 !important; - padding: 0; - list-style: none; - outline: 0; -} -.cbi-dropdown > ul.preview { - display: none; -} -.cbi-button-apply > ul.preview { - display: none; -} -.cbi-button-apply > ul.preview li { - color: #fff; -} -.cbi-button-apply > ul:first-child li { - color: #fff; -} -.cbi-dropdown > .open { - flex-basis: 15px; -} -.cbi-dropdown > .open, -.cbi-dropdown > .more { - font-size: 1rem; - font-weight: 900; - line-height: 2; - display: flex; - flex-direction: column; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - padding: 0 0.25em; - cursor: default; - text-align: center; - outline: 0; -} -.cbi-dropdown > .more, -.cbi-dropdown > ul > li[placeholder] { - font-weight: bold; - display: none; - color: #777; - text-shadow: 1px 1px 0 #fff; -} -.cbi-dropdown > ul > li { - display: none; - overflow: hidden; - align-items: center; - align-self: center; - flex-grow: 1; - flex-shrink: 1; - min-height: 20px; - padding: 0.25em; - white-space: nowrap; - text-overflow: ellipsis; -} -.cbi-dropdown > ul > li .hide-open { - display: initial; -} -.cbi-dropdown > ul > li .hide-close { - display: none; -} -.cbi-dropdown > ul > li[display]:not([display="0"]) { - border-left: thin solid #ccc; -} -.cbi-dropdown[empty] > ul { - max-width: 1px; -} -.cbi-dropdown > ul > li > form { - display: none; - margin: 0; - padding: 0; - pointer-events: none; -} -.cbi-dropdown > ul > li img { - margin-right: 0.25em; - vertical-align: middle; -} -.cbi-dropdown > ul > li > form > input[type="checkbox"] { - height: auto; - margin: 0; -} -.cbi-dropdown > ul > li input[type="text"] { - height: 20px; -} -.cbi-dropdown[open] > ul.dropdown { - position: absolute; - z-index: 1100; - display: block; - width: auto; - min-width: 100%; - max-width: none; - max-height: 200px !important; - border: 0 solid #918e8c; - background: #ffffff; - box-shadow: 0 0 4px #918e8c; - border-bottom-left-radius: 0.35rem; - border-bottom-right-radius: 0.35rem; - color: var(--main-menu-color); - margin-left: -0.2rem !important; -} -.cbi-dropdown[open] > ul.dropdown li { - color: #000; -} -.cbi-dropdown > ul > li[display], -.cbi-dropdown[open] > ul.preview, -.cbi-dropdown[open] > ul.dropdown > li, -.cbi-dropdown[multiple] > ul > li > label, -.cbi-dropdown[multiple][open] > ul.dropdown > li, -.cbi-dropdown[multiple][more] > .more, -.cbi-dropdown[multiple][empty] > .more { - display: flex; - align-items: center; - flex-grow: 1; -} -.cbi-dropdown[empty] > ul > li, -.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], -.cbi-dropdown[multiple][open] > ul.dropdown > li > form { - display: block; -} -.cbi-dropdown[open] > ul.dropdown > li .hide-open { - display: none; -} -.cbi-dropdown[open] > ul.dropdown > li .hide-close { - display: initial; -} -.cbi-dropdown[open] > ul.dropdown > li { - border-bottom: thin solid #ccc; - padding: 0.5rem 0.8rem; -} -.cbi-dropdown[open] > ul.dropdown > li label { - margin-left: 0.5rem; -} -.cbi-dropdown[open] > ul.dropdown > li[selected] { - background: #dce1fe; -} -.cbi-dropdown[open] > ul.dropdown > li.focus { - background: #dce1fe; - outline: none; -} -.cbi-dropdown[open] > ul.dropdown > li:last-child { - margin-bottom: 0; - border-bottom: 0; -} -.cbi-dropdown[open] > ul.dropdown > li[unselectable] { - opacity: 0.7; -} -.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child { - width: 100%; -} -.cbi-dropdown[disabled] { - pointer-events: none; - opacity: 0.6; -} -.cbi-dropdown .zonebadge { - width: 100%; -} -.cbi-dropdown[open] .zonebadge { - width: auto; -} -/* progressbar */ -.cbi-progressbar { - position: relative; - min-width: 170px; - height: 20px; - margin: 6px 0; - border: thin solid #999; - background: #eee; - border-radius: 0.2rem; - overflow: hidden; -} -.cbi-progressbar > div { - width: 0; - height: 100%; - transition: width 0.25s ease-in; - background: #5bc0de; - background: var(--bar-bg); -} -.cbi-progressbar::after { - font-family: monospace; - font-size: 1em; - font-weight: bold; - font-size-adjust: 0.38; - line-height: normal; - position: absolute; - top: 2px; - right: 0; - bottom: 2px; - left: 0; - overflow: hidden; - content: attr(title); - text-align: center; - white-space: pre; - text-overflow: ellipsis; -} -#modal_overlay { - position: fixed; - z-index: 900; - top: 0; - right: 10000px; - bottom: 0; - left: -10000px; - overflow-y: scroll; - transition: opacity 0.125s ease-in; - opacity: 0; - background: rgba(0, 0, 0, 0.7); - -webkit-overflow-scrolling: touch; -} -.modal { - display: flex; - align-items: center; - flex-wrap: wrap; - width: 90%; - min-width: 270px; - max-width: 600px; - min-height: 32px; - margin: 5em auto; - padding: 1em; - border-radius: 3px !important; - background: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); -} -.modal > * { - line-height: normal; - flex-basis: 100%; - margin-bottom: 0.5em; - max-width: 100%; -} -.modal > pre, -.modal > textarea { - font-size: 1rem; - font-size-adjust: 0.35; - overflow: auto; - margin-bottom: 0.5em; - padding: 8.5px; - cursor: auto; - white-space: pre-wrap; - color: #eee; - outline: 0; - background-color: #101010; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); -} -.modal > h4 { - margin: 0.5em 0; -} -.modal ul { - margin-left: 2.2em; -} -.modal li { - list-style-type: square; - color: #808080; -} -.modal p { - word-break: break-word; -} -.modal .label { - font-size: 0.6rem; - font-weight: normal; - padding: 0.1rem 0.3rem; - padding-bottom: 0; - cursor: default; - border-radius: 0; -} -.modal .label.warning { - background-color: #f0ad4e !important; -} -.modal .btn { - padding: 0.45rem 0.8rem; -} -.modal.cbi-modal { - max-width: 90%; - max-height: none; -} -body.modal-overlay-active { - overflow: hidden; - height: 100vh; -} -body.modal-overlay-active #modal_overlay { - right: 0; - left: 0; - opacity: 1; -} -.spinning { - position: relative; - padding-left: 32px !important; -} -.spinning::before { - position: absolute; - top: 0; - bottom: 0; - left: 0.2em; - width: 32px; - content: ""; - background: url(/luci-static/resources/icons/loading.gif) no-repeat center; - background-size: 16px; -} -/* luci */ -.hidden { - display: none; -} -.left, -.left::before { - text-align: left !important; -} -.right, -.right::before { - text-align: right !important; -} -.center, -.center::before { - text-align: center !important; -} -.top { - align-self: flex-start !important; - vertical-align: top !important; -} -.bottom { - align-self: flex-end !important; - vertical-align: bottom !important; -} -.inline { - display: inline; -} -.cbi-page-actions { - padding-top: 1rem; - text-align: right; -} -.cbi-page-actions > form[method="post"] { - display: inline-block; -} -.th[data-type="button"], -.td[data-type="button"], -.th[data-type="fvalue"], -.td[data-type="fvalue"] { - flex: 1 1 2em; - text-align: center; -} -.ifacebadge { - display: inline-flex; - padding: 0.5rem 0.8rem; - border-bottom: thin solid #ccc; - background: #eee; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} -td > .ifacebadge, -.td > .ifacebadge { - font-size: 0.8rem; - background-color: #f0f0f0; -} -.ifacebadge > em, -.ifacebadge > img { - display: inline-block; - align-self: flex-start; - margin: 0 0.2rem; -} -.ifacebadge > img + img { - margin: 0 0.2rem 0 0; -} -.network-status-table { - display: flex; - flex-wrap: wrap; -} -.network-status-table .ifacebox { - flex-grow: 1; - margin: 0.5em; -} -.network-status-table .ifacebox-body { - display: flex; - flex-direction: column; - height: 100%; -} -.network-status-table .ifacebox-body > span { - flex: 10 10 auto; - height: 100%; -} -.network-status-table .ifacebox-body > div { - display: flex; - flex-wrap: wrap; -} -.network-status-table .ifacebox-body .ifacebadge { - align-items: center; - flex: 1 1 auto; - min-width: 220px; - margin: 0.5em 0em 0 0em; - padding: 0.5em; - background-color: #fff; -} -/* textarea */ -.cbi-input-textarea { - font-family: monospace; - width: 100%; - font-size: 0.875rem; - min-height: 14rem; - padding: 0.8rem; - color: #000; -} -#syslog { - font-size: small; - line-height: 1.25; - overflow-y: hidden; - width: 100%; - min-height: 15rem; - padding: 1rem; - resize: none; - color: #eee; - border: 0; - border-radius: 0.375rem; - background-color: #242424; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); -} -#syslog:focus { - outline: 0; -} -/* config changes */ -.uci-change-list { - font-family: monospace; -} -.uci-change-list ins, -.uci-change-legend-label ins { - display: block; - padding: 2px; - text-decoration: none; - border: thin solid #0f0; - background-color: #cfc; -} -.uci-change-list del, -.uci-change-legend-label del { - font-style: normal; - display: block; - padding: 2px; - text-decoration: none; - border: thin solid #f00; - background-color: #fcc; -} -.uci-change-list var, -.uci-change-legend-label var { - font-style: normal; - display: block; - padding: 2px; - text-decoration: none; - border: thin solid #ccc; - background-color: #eee; -} -.uci-change-list var ins, -.uci-change-list var del { - font-style: normal; - padding: 0; - white-space: pre; - border: 0; -} -.uci-change-legend { - padding: 5px; -} -.uci-change-legend-label { - float: left; - width: 150px; -} -.uci-change-legend-label > ins, -.uci-change-legend-label > del, -.uci-change-legend-label > var { - display: block; - float: left; - width: 10px; - height: 10px; - margin-right: 4px; -} -.uci-change-legend-label var ins, -.uci-change-legend-label var del { - line-height: 0.4; - border: 0; -} -.uci-change-list var, -.uci-change-list del, -.uci-change-list ins { - padding: 0.5rem; -} -/* other fix */ -#iwsvg, -#iwsvg2, -#bwsvg { - border: thin solid #d4d4d4 !important; -} -#iwsvg, -[data-page="admin-status-realtime-bandwidth"] #bwsvg { - border-top: 0 !important; -} -.ifacebox { - line-height: 1.25; - display: inline-flex; - flex-direction: column; - min-width: 100px; - border-bottom: thin solid #ccc; - background-color: #f9f9f9; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); -} -.ifacebox-head { - padding: 0.25em; - background: #eee; -} -.ifacebox-head.active { - background: #5e72e4; - background: var(--bar-bg); -} -.ifacebox-head.active * { - color: #fff; - color: var(--white); -} -.ifacebox-body { - padding: 0.5em 1rem; - line-height: 1.6em; -} -.cbi-image-button { - margin-left: 0.5rem; -} -.zonebadge { - display: inline-block; - padding: 0.2rem 0.5rem; -} -.zonebadge .ifacebadge { - margin: 0.1rem 0.2rem; - padding: 0.2rem 0.3rem; - border: thin solid #6c6c6c; -} -.zonebadge > input[type="text"] { - min-width: 10rem; - margin-top: 0.3rem; - padding: 0.16rem 1rem; -} -.zonebadge > em, -.zonebadge > strong { - display: inline-block; - margin: 0 0.2rem; -} -.cbi-value-field .cbi-input-checkbox, -.cbi-value-field .cbi-input-radio { - margin-top: 0.1rem; -} -.cbi-value-field > ul > li { - display: flex; -} -.cbi-value-field > ul > li > label { - margin-top: 0.5rem; -} -.cbi-value-field > ul > li .ifacebadge { - margin-top: -0.5rem; - margin-left: 0.4rem; - background-color: #eee; -} -.cbi-section-table-row > .cbi-value-field .cbi-dropdown { - min-width: 7rem; -} -.cbi-section-create { - display: inline-flex; - align-items: center; - margin: 0.25rem 0 0.25rem 1rem; -} -.cbi-section-create > * { - margin: 0.5rem; -} -.cbi-section-remove { - padding: 0.5rem; -} -div.cbi-value var, -td.cbi-value-field var, -.td.cbi-value-field var { - font-style: italic; - color: #0069d6; -} -.cbi-optionals { - padding: 1rem 1rem 0 1rem; - border-top: thin solid #ccc; -} -.cbi-dropdown-container { - position: relative; -} -.cbi-tooltip-container, -span[data-tooltip], -span[data-tooltip] .label { - cursor: help !important; -} -.cbi-tooltip { - position: absolute; - z-index: 1000; - left: -1000px; - padding: 2px 5px; - transition: opacity 0.25s ease-out; - white-space: pre; - pointer-events: none; - opacity: 0; - border-radius: 3px; - background: #fff; - box-shadow: 0 0 2px #444; -} -.cbi-tooltip-container:hover .cbi-tooltip { - left: auto; - transition: opacity 0.25s ease-in; - opacity: 1; -} -.zonebadge .cbi-tooltip { - margin: -1.5rem 0 0 -0.5rem; - padding: 0.25rem; - background: inherit; -} -.zonebadge-empty { - color: #404040; - background: repeating-linear-gradient(45deg, rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0.5) 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px); -} -.zone-forwards { - display: flex; - min-width: 10rem; -} -.zone-forwards > * { - flex: 1 1 45%; -} -.zone-forwards > span { - flex-basis: 10%; - padding: 0 0.25rem; - text-align: center; -} -.zone-forwards .zone-src, -.zone-forwards .zone-dest { - display: flex; - flex-direction: column; -} -.label { - font-size: 0.8rem; - font-weight: bold; - padding: 0.3rem 0.8rem; - white-space: nowrap; - text-decoration: none; - text-transform: uppercase; - color: #fff !important; - border-radius: 3px; - background-color: #bfbfbf; - text-shadow: none; -} -label > input[type="checkbox"], -label > input[type="radio"] { - position: relative; - top: 0.4rem; - right: 0.2rem; - margin: 0; - vertical-align: bottom; -} -label[data-index][data-depends] { - padding-right: 2em; -} -.showSide { - display: none; -} -.darkMask { - position: fixed; - z-index: 99; - display: none; - width: 100%; - height: 100%; - content: ""; - top: 0; - background-color: rgba(0, 0, 0, 0.56); -} -/* diagnostics */ -#diag-rc-output > pre, -#command-rc-output > pre, -[data-page="admin-services-wol"] .notice code { - font-size: 1.2rem; - font-size-adjust: 0.35; - line-height: normal; - display: block; - overflow-y: hidden; - width: 100%; - padding: 8.5px; - white-space: pre; - color: #eee; - background-color: #101010; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); -} -[data-page="admin-network-diagnostics"] .table { - box-shadow: none; -} -input[name="ping"], -input[name="traceroute"], -input[name="nslookup"] { - width: 80%; -} -/* fix status */ -.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2), -.node-status-processes > .main .table .tr .td:nth-child(3) { - white-space: normal; -} -/* fix system reboot */ -[data-page="admin-system-reboot"] p { - padding-left: 1.5rem; -} -[data-page="admin-system-reboot"] .cbi-button { - background: #fb6340 !important; -} -[data-page="admin-system-reboot"] p > span { - position: relative; - top: 0.1rem; - left: 1rem; -} -[data-page="admin-vpn-passwall"] h4 { - background: transparent; -} -/* samba */ -#cbi-samba [data-tab="template"] .cbi-value-field { - display: block; -} -#cbi-samba [data-tab="template"] .cbi-value-title { - width: auto; - padding-bottom: 0.6rem; -} -/* admin-system-admin-password */ -[data-page="admin-system-admin"] .cbi-map h2, -[data-page="admin-system-admin-password"] .cbi-map h2, -[data-page="admin-system-admin"] .cbi-map .cbi-map-descr, -[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { - margin-left: 0; - color: #32325d; - color: var(--gray-dark); -} -/* software */ -[data-page="admin-system-opkg"] h2 { - margin-left: 0; - color: #32325d; - color: var(--gray-dark); -} -.controls { - margin: 0.5em 1rem 1em 1rem !important; -} -.controls > * > .btn:not([aria-label$="page"]) { - flex-grow: initial !important; - margin-top: 0.25rem; -} -.controls > #pager > .btn[aria-label$="page"] { - font-size: 1.4rem; - font-weight: bold; -} -.controls > * > label { - margin-bottom: 0.2rem; -} -[data-page="admin-system-opkg"] div.btn { - line-height: 3; - display: inline; - padding: 0.3rem 0.6rem; -} -[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), -[data-page="admin-system-opkg"] #maincontent > .container { - margin-top: 2rem; - padding-top: 0.1rem; -} -[data-page="admin-system-opkg"] #maincontent > .container { - margin: 0 1.25rem 1rem 1.25rem; - margin-bottom: 1rem; -} -.td.version, -.td.size { - white-space: normal !important; - word-break: break-word; -} -.cbi-tabmenu + .cbi-section { - margin-top: 0; -} -/* admin-system-crontab*/ -[data-page="admin-system-crontab"] #view p { - margin-bottom: 1rem; -} -/*admin-system-flash*/ -[data-page="admin-system-flash"] .cbi-value { - padding: 0; -} -[data-page="admin-system-flash"] .cbi-section .cbi-section { - margin-top: 0; -} -[data-page="admin-system-flash"] .cbi-map-tabbed { - border-radius: 0.375rem; -} -[data-page="admin-system-flash"] legend { - display: block !important; - font-size: 1.2rem; - width: 100%; - display: block; - margin-bottom: 0; - padding: 1rem 0 1rem 1.5rem; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - line-height: 1.5; - margin-bottom: 0rem; - letter-spacing: 0.1rem; - color: #32325d; - font-weight: bold; -} -[data-page="admin-system-flash"] .cbi-section-descr { - font-weight: 600; - padding: 1rem 0 1rem 1.5rem; - color: #525f7f; -} -[data-page="admin-system-flash"] .modal label > input[type="checkbox"] { - top: -0.35rem; -} -[data-page="admin-system-flash"] .modal .btn { - white-space: normal !important; -} -/* wireless overview */ -#cbi-wireless > #wifi_assoclist_table > .tr { - box-shadow: inset 1px -1px 0 #ddd, inset -1px -1px 0 #ddd; -} -#cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td { - right: 33px; - bottom: 33px; - left: 33px; - border-top: thin solid #ddd !important; -} -#cbi-wireless > #wifi_assoclist_table > .tr.table-titles { - box-shadow: inset 1px 0 0 #ddd, inset -1px 0 0 #ddd; -} -#cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th { - border-bottom: thin solid #ddd; - box-shadow: 0 -1px 0 0 #ddd; -} -#wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] { - width: 23rem; -} -[data-page="admin-network-dhcp"] .cbi-value { - padding: 0; -} -[data-page="admin-network-dhcp"] [data-tab-active="true"] { - padding: 1rem 0 !important; -} -/* firewall */ -#iptables { - margin: 0; -} -.Firewall form { - margin: 2rem 2rem 0 0; - padding: 0; - box-shadow: none; -} -#cbi-firewall-redirect table *, -#cbi-network-switch_vlan table *, -#cbi-firewall-zone table * { - font-size: small; -} -#cbi-firewall-redirect table input[type="text"], -#cbi-network-switch_vlan table input[type="text"], -#cbi-firewall-zone table input[type="text"] { - width: 5rem; -} -#cbi-firewall-redirect table select, -#cbi-network-switch_vlan table select, -#cbi-firewall-zone table select { - min-width: 3.5rem; -} -#cbi-network-switch_vlan .th, -#cbi-network-switch_vlan .td { - flex-basis: 12%; -} -#cbi-firewall-zone .table, -#cbi-network-switch_vlan .table { - display: block; -} -#cbi-firewall-zone .td, -#cbi-network-switch_vlan .td { - width: 100%; -} -[data-page="admin-network-firewall-custom"] #view p, -[data-page="admin-status-routes"] #view p { - padding: 0 1.5rem; - margin-bottom: 1rem; -} -[data-page="admin-network-firewall-custom"] #view p textarea, -[data-page="admin-status-routes"] #view p textarea { - padding: 1rem; - border-radius: 0.375rem; -} -/* applyreboot fix */ -#applyreboot-container { - margin: 2rem; -} -#applyreboot-section { - line-height: 300%; - margin: 2rem; -} -/* openvpn bug fix */ -.OpenVPN a { - line-height: initial !important; -} -/* custom commands */ -.commandbox { - width: 24% !important; - margin: 10px 0 0 10px !important; - padding: 0.5rem 1rem; - border-bottom: thin solid #ccc; - background: #eee; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} -.commandbox h3 { - line-height: normal !important; - overflow: hidden; - margin: 6px 0 !important; - white-space: nowrap; - text-overflow: ellipsis; -} -.commandbox div { - left: auto !important; -} -.commandbox code { - position: absolute; - overflow: hidden; - max-width: 60%; - margin-left: 4px; - padding: 2px 3px; - white-space: nowrap; - text-overflow: ellipsis; -} -.commandbox code:hover { - overflow-y: auto; - max-height: 50px; - white-space: normal; -} -.commandbox p:first-of-type { - margin-top: -6px; -} -.commandbox p:nth-of-type(2) { - margin-top: 2px; -} -[data-page^="admin-system-commands"] .panel-title, -[data-page^="command-cfg"] .mobile-hide, -[data-page^="command-cfg"] .showSide { - display: none; -} -#command-rc-output .alert-message { - line-height: 1.42857143; - position: absolute; - top: 40px; - right: 32px; - max-width: 40%; - margin: 0; - animation: anim-fade-in 1.5s forwards; - word-break: break-word; - opacity: 0; -} -@keyframes anim-fade-in { - 100% { - opacity: 1; - } -} -/* other fix */ -input[type="checkbox"] { - appearance: none !important; - -webkit-appearance: none !important; - border: 1px solid #dee2e6; - width: 16px !important; - height: 16px !important; - padding: 0; - cursor: pointer; - transition: all 0.2s; - margin: 1rem 0 0 0; -} -input[type="checkbox"]:checked { - border: 1px solid #5e72e4; - background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; - background-color: #5e72e4; - background-size: 70%; - background-repeat: no-repeat; - background-position: center; -} -.fb-container .cbi-button { - height: auto !important; -} -#cbi-usb_printer-printer em { - display: block; - padding: 1rem; - text-align: center; -} -pre.command-output { - padding: 1.5rem; -} -[data-page="admin-nlbw-display"] .cbi-section[data-tab="export"] { - padding: 1.5rem !important; -} -[data-page="admin-nlbw-backup"] form { - padding-left: 1.5rem; -} -[data-page="admin-status-iptables"] .right { - margin-bottom: 0 !important; -} -/* IE hacks */ -@media all and (-ms-high-contrast: none) { - .main > .main-left > .nav > .slide > .menu::before { - top: 30.25%; - } - .main > .main-left > .nav > li:last-child::before { - top: 20%; - } - .showSide::before { - top: -12px; - } -} -@media screen and (max-width: 1600px) { - header > .fill > .container > #logo { - margin: 0 2.5rem 0 0.5rem; - } - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - .btn:not(button), - .cbi-button { - font-size: 0.8rem; - } - .label { - padding: 0.2rem 0.6rem; - } - .cbi-value-title { - width: 15rem; - padding-right: 0.6rem; - } - .cbi-value-field .cbi-dropdown, - .cbi-value-field .cbi-input-select, - .cbi-value input[type="text"], - .cbi-value input[type="password"] { - min-width: 18rem; - } - #cbi-firewall-zone .cbi-input-select { - min-width: 9rem; - } - .cbi-input-textarea { - font-size: small; - } - .node-admin-status > .main fieldset li > a { - padding: 0.3rem 0.6rem; - } -} -@media screen and (max-width: 1366px) { - header > .fill > .container { - cursor: default; - } - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - .tabs > li > a, - .cbi-tabmenu > li > a { - padding: 0.2rem 0.8rem; - } - .panel-title { - font-size: 1.1rem; - padding-bottom: 1rem; - } - table { - font-size: 0.7rem !important; - width: 100% !important; - } - .table .cbi-input-text { - width: 100%; - } - .cbi-value-field .cbi-dropdown, - .cbi-value-field .cbi-input-select, - .cbi-value input[type="text"], - .cbi-value input[type="password"] { - min-width: 16rem; - } - #cbi-firewall-zone .cbi-input-select { - min-width: 4rem; - } - .main > .main-left > .nav > li, - .main > .main-left > .nav > li a, - .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { - font-size: 0.9rem; - } - .main > .main-left > .nav > .slide > .slide-menu > li > a { - font-size: 0.7rem; - } - #modal_overlay { - top: 0rem; - } - [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) { - display: block; - } - [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table), - [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table), - [data-page="admin-network-hosts"] .table, - [data-page="admin-network-routes"] .table { - overflow-y: visible; - } - .commandbox { - width: 32% !important; - } - .btn:not(button), - .cbi-button { - font-size: 0.8rem; - } -} -@media screen and (max-width: 1152px) { - header > .fill > .container > #logo { - display: none; - } - header > .fill > .container > .brand { - position: relative; - } - html, - .main { - overflow-y: visible; - } - .main > .loading > span { - top: 25%; - } - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - body:not(.logged-in) .showSide { - visibility: hidden; - width: 0; - margin: 0; - } - .node-main-login > .main .cbi-value-title { - text-align: left; - } - .cbi-value-title { - width: 12rem; - padding-right: 1rem; - } - .cbi-value-field .cbi-dropdown, - .cbi-value-field .cbi-input-select, - .cbi-value input[type="text"] { - width: 16rem; - min-width: 16rem; - } - /*.cbi-value input[type="password"],*/ - .cbi-value input[name^="pw"], - .cbi-value input[data-update="change"]:nth-child(2) { - width: 13rem !important; - min-width: 13rem; - } - #diag-rc-output > pre, - #command-rc-output > pre, - [data-page="admin-services-wol"] .notice code { - font-size: 1rem; - } - .table { - display: block; - } - .Interfaces .table { - overflow-x: hidden; - } - #packages.table { - display: grid; - } - .tr { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - .Overview .table[width="100%"] > .tr { - flex-wrap: nowrap; - } - .tr.placeholder { - border-bottom: thin solid #ddd; - } - .tr.placeholder > .td, - #cbi-firewall .tr > .td, - #cbi-network .tr:nth-child(2) > .td, - .cbi-section #wifi_assoclist_table .tr > .td { - border-top: 0; - } - .th, - .td { - display: inline-block; - align-self: flex-start; - flex: 2 2 10%; - text-overflow: ellipsis; - word-wrap: break-word; - } - .td select, - .td input[type="text"] { - width: 100%; - word-wrap: normal; - } - .td [data-dynlist] > input, - .td input.cbi-input-password { - width: calc(100% - 1.5rem); - } - .td[data-type="button"], - .td[data-type="fvalue"] { - flex: 1 1 12.5%; - text-align: left; - } - .th.cbi-value-field, - .td.cbi-value-field, - .th.cbi-section-table-cell, - .td.cbi-section-table-cell { - flex-basis: auto; - padding-top: 1rem; - } - .cbi-section-table-row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); - } - .td.cbi-value-field, - .cbi-section-table-cell { - display: inline-block; - flex: 10 10 auto; - flex-basis: 50%; - text-align: center; - } - .td.cbi-section-actions { - vertical-align: bottom; - } - .tr.table-titles, - .tr.cbi-section-table-titles, - .tr.cbi-section-table-descr { - display: none; - } - .tr[data-title]::before, - .tr.cbi-section-table-titles.named::before { - font-size: 0.9rem; - display: block; - flex: 1 1 100%; - border-bottom: thin solid rgba(0, 0, 0, 0.26); - background: #e9ecef; - } - .td[data-title], - [data-page^="admin-status-realtime"] .td[id] { - text-align: left; - } - .td[data-title]::before { - display: block; - } - .cbi-button + .cbi-button { - margin-left: 0; - } - .td.cbi-section-actions > * > *, - .td.cbi-section-actions > * > form > * { - margin: 2.1px 3px; - } - .Firewall form { - position: static !important; - margin: 0 0 2rem 0; - padding: 2rem; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); - } - .Firewall form input { - width: 100% !important; - margin: 0; - margin-top: 1rem; - } - .Firewall .center, - .Firewall .center::before { - text-align: left !important; - } - .commandbox { - width: 100% !important; - margin-left: 0 !important; - } - .btn:not(button), - .cbi-button { - font-size: 0.8rem; - } -} -@media screen and (max-width: 768px) { - body { - font-size: 0.8rem; - } - .cbi-progressbar::after { - font-size: 0.5rem; - line-height: 1.5; - } - .main-left { - position: fixed; - z-index: 100; - width: 0; - } - .main-right { - width: 100%; - } - .showSide { - padding: 0.1rem; - position: relative; - z-index: 99; - display: inline-block !important; - } - .showSide::before { - font-family: 'argon' !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - content: "\e20e"; - font-size: 1.7rem; - } - header > .fill > .container > .brand { - display: inline-block; - } - .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { - font-size: 1.2rem; - } - .main > .main-left > .nav > .slide > .slide-menu > li > a { - font-size: 0.8rem; - } -} -@media screen and (max-width: 600px) { - .mobile-hide { - display: none; - } - #maincontent > .container { - margin: 0 1rem 1rem 1rem; - } - .cbi-value-title { - text-align: left; - } - [data-page="admin-system-flash"] legend { - padding: 1rem 0 1rem 1rem; - } - [data-page="admin-system-flash"] .cbi-section-descr { - padding: 1rem 0 1rem 1rem; - } - [data-page="admin-system-flash"] .cbi-value { - padding: 0 1rem; - } - [data-page="admin-network-dhcp"] [data-tab-active="true"] { - padding: 1rem 1rem !important; - } - .cbi-dynlist p { - padding: 0.5rem 1rem; - } - body { - overflow-x: hidden; - } - .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field { - width: 16rem; - } - .node-main-login footer { - display: none; - } - .tabs::-webkit-scrollbar, - .cbi-tabmenu::-webkit-scrollbar { - width: 0px; - height: 0px; - } - .cbi-value-field, - .cbi-value-description { - display: block !important; - padding-left: 0 !important; - padding-right: 0 !important; - } - [data-page="admin-system-admin-password"] .cbi-value-field { - display: table-cell !important; - } - .modal.cbi-modal { - max-width: 100%; - max-height: none; - } - .modal { - display: flex; - align-items: center; - flex-wrap: wrap; - width: 100%; - min-width: 270px; - max-width: 600px; - min-height: 32px; - margin: 5em auto; - padding: 1em; - border-radius: 3px !important; - background: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); - } - .cbi-dropdown[open] > ul.dropdown { - left: 0.2rem !important; - right: 0 !important; - margin-bottom: 1rem; - } -} -@media screen and (min-width: 600px) { - ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - ::-webkit-scrollbar, - ::-webkit-scrollbar-corner { - background: transparent; - } - ::-webkit-scrollbar-thumb { - background: #9e9e9e; - } - ::-webkit-scrollbar-thumb:hover { - background: #757575; - } - ::-webkit-scrollbar-thumb:active { - background: #424242; - } -} -@media screen and (max-width: 480px) { - .mobile-hide { - display: none; - } - .login-page .login-container { - margin-left: 0rem !important; - width: 100%; - } - .login-page .login-container .login-form .form-login .input-group::before { - color: #525461; - } - .login-page .login-container .login-form .form-login .input-group input { - color: #525461; - border-bottom: white 1px solid; - border-bottom: var(--white) 1px solid; - border-radius: 0; - } -} -@media (prefers-color-scheme: dark) { - body { - background: #1e1e1e; - color: #cccccc; - } - .login-page .login-container .login-form { - background-color: #1e1e1e; - } - .login-page .login-container .login-form .brand { - color: #adb5bd; - } - .login-page .login-container .login-form .form-login .input-group::before { - color: #adb5bd; - } - .login-page .login-container .login-form .form-login .input-group input { - background-color: transparent !important; - color: #adb5bd; - border-bottom: #adb5bd 1px solid !important; - border-radius: 0 !important; - border-top: none !important; - border-left: none !important; - border-right: none !important; - box-shadow: none; - } - .login-page .login-container .login-form .form-login .cbi-button-apply { - background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); - } - .login-page .login-container .login-form .form-login .cbi-button-apply:hover, - .login-page .login-container .login-form .form-login .cbi-button-apply:focus { - background-image: linear-gradient(-135deg, #554c8a 0%, #483d8b 100%); - } - header::after { - background-color: #1e1e1e !important; - } - .main .main-left { - background-color: #333333 !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15); - } - .main .main-left .sidenav-header .brand { - color: #ccc; - } - .main .main-left .nav .slide .slide-menu .active a { - color: #cccccc; - } - .main .main-left .nav .slide .slide-menu .active a::after { - background-color: #cccccc !important; - } - .main .main-left .nav .slide .slide-menu li a { - color: #cccccc; - } - .main .main-left .nav .slide .slide-menu li a:hover { - background: none !important; - } - .main .main-left .nav .slide .menu.active { - background-color: darkslateblue !important; - color: #cccccc !important; - } - .main .main-left .nav .slide .menu.active a::after { - background-color: #cccccc !important; - } - .main .main-left .nav li a { - color: #cccccc !important; - } - .main .main-left .nav li a:hover { - background-color: darkslateblue !important; - color: #cccccc !important; - } - .main .main-left::-webkit-scrollbar-thumb { - background-color: #252526 !important; - } - .main .main-left::-webkit-scrollbar-track { - background-color: #333; - } - .main .main-right { - background-color: #1e1e1e; - } - h2 { - color: #ccc; - background: #333333; - } - h3 { - color: #ccc; - border-bottom: 0; - background: #333333; - } - a:-webkit-any-link { - color: -webkit-link; - cursor: pointer; - color: darkslateblue; - } - input:-webkit-autofill { - background-color: #3c3c3c !important; - } - .cbi-value-field .cbi-input-apply, - .cbi-button-apply, - .cbi-button-edit { - color: #fff !important; - background-color: darkslateblue !important; - border-color: darkslateblue !important; - } - .cbi-section em { - color: #ccc; - } - header.bg-primary { - background-color: #1e1e1e !important; - } - .cbi-map-descr { - color: #ccc; - } - .cbi-section { - background: none; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } - .panel-title { - color: #ccc; - background-color: #333333; - border-bottom: 0px; - } - div > table > tbody > tr:nth-of-type(2n), - div > .table > .tr:nth-of-type(2n) { - background-color: #252526; - } - table > tbody > tr > td, - table > tfoot > tr > td, - table > thead > tr > td { - color: #ccc; - } - fieldset > table > tbody > tr:nth-of-type(2n) { - background-color: #252526; - } - table > tbody > tr > td, - table > tfoot > tr > td, - table > thead > tr > td { - border-top: 1px solid #252526; - } - #swaptotal > div > div, - #swapfree > div > div, - #memfree > div > div, - #membuff > div > div, - #conns > div > div, - #memtotal > div > div { - background-color: #32325d !important; - } - #swaptotal > div > div > div > small, - #swapfree > div > div > div > small, - #memfree > div > div > div > small, - #membuff > div > div > div > small, - #conns > div > div > div > small, - #memtotal > div > div > div > small { - color: #ccc !important; - } - .node-system-packages > .main .cbi-section-node:first-child .cbi-value-last { - line-height: 1.8em; - } - .node-system-packages > .main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] { - border: 1px solid #999999 !important; - background-color: transparent !important; - } - .node-system-packages > .main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] div { - background-color: #32325d !important; - } - table > tbody > tr > th, - table > tfoot > tr > th, - table > thead > tr > th { - background-color: #252526; - border-bottom: black 1px solid !important; - } - tr > td, - tr > th, - .tr > .td, - .tr > .th, - .cbi-section-table-row::before, - #cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) { - border-top: 0; - } - .cbi-rowstyle-2 { - background-color: #1e1e1e; - } - .cbi-rowstyle-1 { - background-color: #252526; - } - .cbi-section > h3:first-child, - .panel-title, - h3 { - color: #ccc; - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - h4 { - background-color: #1e1e1f; - } - .cbi-progressbar { - position: relative; - min-width: 170px; - height: 20px; - margin: 6px 0; - border: thin solid #999; - background: transparent; - border-radius: 0.2rem; - overflow: hidden; - } - .cbi-progressbar div { - background-color: #32325d !important; - } - .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - background-color: #1e1e1f; - } - .cbi-button { - color: #ccc !important; - background-color: darkslateblue; - } - .cbi-section-node { - background: none; - border-radius: 0 0 0.375rem 0.375rem; - padding: 0rem; - } - abbr { - color: #5e72e4; - } - div > table > tbody > tr:nth-of-type(2n), - div > .table > .tbody > .tr:nth-of-type(2n) { - background-color: #252526; - } - #content_syslog { - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } - #syslog { - color: #ccc; - background-color: #1e1e1e; - } - #iwsvg, - #iwsvg2, - #bwsvg { - overflow: hidden; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - background-color: #1e1e1e !important; - } - .tabs { - background-color: #252526; - } - .tabs > li[class~="active"] > a { - color: #ccc; - } - .tabs > li[class~="active"], - .tabs > li:hover { - border-bottom: 0.18751rem solid darkslateblue; - color: #ccc; - background-color: #181819; - } - .cbi-tabmenu > li > a, - .tabs > li > a { - color: #ccc; - } - .cbi-tabmenu > li > a:hover, - .tabs > li > a:hover { - color: #ccc; - } - .cbi-tabmenu > li { - background: #2d2d2d; - } - .cbi-tabmenu li[class~="cbi-tab"] a { - color: #ccc; - } - .cbi-tabmenu > li:hover { - color: #ccc; - background: #2d2d2d; - } - .cbi-tabmenu > li[class~="cbi-tab"] { - background-color: #181819; - } - .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { - background-color: #252526; - } - .cbi-value-title { - color: #ccc; - } - select, - input { - color: #ccc; - background-color: transparent !important; - border: 1px solid #252526; - box-shadow: none; - } - select:not([multiple="multiple"]):focus, - input:focus { - border-color: darkslateblue !important; - outline: 0; - } - select { - background-color: #1e1e1e !important; - } - #cbi-dropbear h2, - #cbi-dropbear .cbi-map-descr, - #cbi-dropbear .cbi-map-descr abbr, - #cbi-rc h2, - #cbi-rc .cbi-map-descr, - #cbi-distfeedconf h2, - #cbi-distfeedconf .cbi-map-descr, - #cbi-customfeedconf h2, - #cbi-customfeedconf .cbi-map-descr, - #cbi-download h2, - #cbi-filelist h2 { - color: #ccc !important; - } - .cbi-value-field > ul > li .ifacebadge { - background-color: #3c3c3c; - } - .cbi-section-descr { - color: #ccc; - } - .cbi-input-textarea { - background-color: #1e1e1e; - color: #ccc; - } - .cbi-section-remove:nth-of-type(2n), - .cbi-section-node:nth-of-type(2n) { - background-color: #1e1e1e; - } - .node-system-packages > .main table tr td:nth-last-child(1) { - color: #ccc; - } - .cbi-section-node .cbi-value { - padding: 1rem 1rem 0.3rem 1rem; - } - .ifacebox { - background-color: none; - border: 1px solid #1e1e1e; - } - .ifacebox-head { - color: #666; - } - .ifacebox-body { - background-color: #333; - } - .zonebadge strong { - color: #333; - } - .zonebadge > .ifacebadge { - background-color: #3c3c3c; - } - div.cbi-value var, - td.cbi-value-field var { - color: #5e72e4; - } - #diag-rc-output > pre { - color: #ccc; - background-color: #1e1e1e; - } - .node-services-vssr .block { - background-color: #3c3c3c !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } - .node-services-vssr .block h4 { - color: #ccc !important; - } - .node-services-vssr .status-bar { - color: #ccc; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - background-color: #1e1e1e; - } - .node-services-vssr .cbi-section-table-row { - color: #ccc; - background-color: #3c3c3c !important; - box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); - } - .node-services-vssr .cbi-section-table-row.fast { - background: darkslateblue !important; - color: #fff; - } - .node-services-vssr .ssr-button { - color: #ccc; - } - .node-services-vssr .incon:nth-child(2) { - border-right: #1e1e1e 1px solid; - } - #xhr_poll_status > .label.success { - color: #ccc !important; - background-color: darkolivegreen !important; - } - .notice { - background-color: darkslateblue !important; - } - .cbi-input-find, - .cbi-input-save, - .cbi-button-add, - .cbi-button-save, - .cbi-button-find, - .cbi-input-reload, - .cbi-button-reload { - color: #fff !important; - background-color: darkseagreen !important; - border-color: darkseagreen !important; - } - .cbi-button-reset, - .cbi-input-remove { - color: #fff !important; - background-color: darkorange !important; - border-color: darkorange !important; - } - .cbi-page-actions .cbi-button-apply, - .cbi-section-actions .cbi-button-edit, - .cbi-button-edit.important, - .cbi-button-apply.important, - .cbi-button-reload.important, - .cbi-button-action.important { - border: 1px darkslateblue solid !important; - } - fieldset[id^="cbi-apply-"] { - background-color: #333333; - } - #detail-bubble > div { - border: 1px solid #ccc; - border-radius: 2px; - padding: 5px; - background: #252525; - } - .ifacebox-head.active { - background-color: #32325d !important; - } - header .fill .status span[data-style="active"] { - color: #ccc !important; - background-color: darkolivegreen !important; - } - #cbi-wireless .td, - #cbi-network .tr:first-child > .td, - .table[width="100%"] > .tr:first-child > .td, - [data-page="admin-network-diagnostics"] .tr > .td, - .tr.table-titles > .th, - .tr.cbi-section-table-titles > .th { - background-color: #252526; - border-bottom: black 1px solid !important; - } - .network-status-table .ifacebox-body .ifacebadge { - background-color: #252526; - border-bottom: 0; - box-shadow: none; - } - td > .ifacebadge, - .td > .ifacebadge { - background-color: darkslateblue; - border: 0; - } - .btn.danger, - .cbi-section-remove > .cbi-button, - .cbi-button-remove, - .cbi-button-reset, - .cbi-button-negative, - .cbi-button[value="Stop"], - .cbi-button[value="Kill"], - .cbi-button[onclick="reboot(this)"], - .cbi-button-neutral[value="Restart"] { - border: thin solid darkorange !important; - background-color: darkorange !important; - } - .cbi-section, - .cbi-section-error, - #iptables, - .Firewall form, - #cbi-network > .cbi-section-node, - #cbi-wireless > .cbi-section-node, - #cbi-wireless > #wifi_assoclist_table, - [data-tab-title], - [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), - [data-page="admin-system-opkg"] #maincontent > .container { - background: #1e1e1e !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } - div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { - background: transparent !important; - } - [data-page="admin-system-admin"] .cbi-map h2, - [data-page="admin-system-admin-password"] .cbi-map h2, - [data-page="admin-system-admin"] .cbi-map .cbi-map-descr, - [data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { - color: #ccc; - } - [data-page="admin-system-flash"] .modal label > input[type="checkbox"] { - top: -0.35rem; - } - [data-page="admin-system-flash"] .modal .btn { - white-space: normal !important; - background-color: darkseagreen; - } - [data-page="admin-system-flash"] .modal .alert-message { - background-color: transparent !important; - } - [data-page="admin-system-flash"] .modal .danger { - border: thin solid darkorange !important; - background-color: darkorange !important; - } - .cbi-value input[type="password"] + .cbi-button-neutral { - background-color: darkslateblue !important; - } - .btn, - button, - select, - input, - .cbi-dropdown { - border: 1px solid #3c3c3c !important; - } - .cbi-dropdown .preview { - color: #ccc; - } - .cbi-section-table-row { - background-color: #1e1e1e !important; - } - .modal { - background-color: #1e1e1e; - } - .cbi-button-positive { - color: #fff !important; - background-color: darkseagreen !important; - } - [data-page="admin-system-flash"] legend { - color: #ccc; - } - .logout:before { - color: #adb5bd !important; - } - .cbi-dropdown[open] { - border-color: darkslateblue !important; - } - .cbi-dropdown[open] > ul.dropdown { - background: #252526 !important; - color: #ccc !important; - box-shadow: none; - border: 1px solid #3c3c3c !important; - } - .cbi-dropdown[open] > ul.dropdown li { - color: #ccc; - border-bottom: 1px solid #3c3c3c !important; - } - .cbi-dropdown[open] > ul.dropdown > li[selected] { - background-color: darkslateblue !important; - border-bottom: 1px solid #3c3c3c !important; - } - .cbi-dropdown[open] > ul.dropdown > li.focus { - background: darkslateblue; - outline: none; - } - .ifacebadge { - background-color: #333333; - } - .cbi-dynlist > .item > span { - border: 1px solid #3c3c3c !important; - } - .cbi-page-actions .cbi-button-apply, - .cbi-section-actions .cbi-button-edit, - .cbi-button-edit, - .cbi-button-apply, - .cbi-button-reload, - .cbi-button-action, - .cbi-button[value="Submit"], - .cbi-button[value="Upload"], - .cbi-button[value$="Apply"], - .cbi-button[onclick="addKey(event)"] { - background: darkslateblue !important; - } - .btn.primary, - .cbi-page-actions .cbi-button-save, - .cbi-page-actions .cbi-button-apply + .cbi-button-save, - .cbi-button-add, - .cbi-button-save, - .cbi-button-positive, - .cbi-button-link, - .cbi-button[value="Enable"], - .cbi-button[value="Scan"], - .cbi-button[value^="Back"], - .cbi-button-neutral[onclick="handleConfig(event)"] { - background: darkslateblue !important; - } - [data-page="admin-system-opkg"] h2 { - color: #ccc !important; - } - @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { - .login-page .login-container .login-form { - -webkit-backdrop-filter: blur(var(--blur-radius-dark)); - backdrop-filter: blur(var(--blur-radius-dark)); - background-color: rgba(0, 0, 0, var(--blur-opacity-dark)); - } - } -} -@media (prefers-color-scheme: dark) and (max-width: 480px) { - .node-status-iptables > .main div > .cbi-map > form { - background-color: #1e1e1e; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } -} +@import url("fonts.css?v=3");@import url("pure-min.css?v=1");:root{--primary:#5e72e4;--dark-primary:#483d8b;--main-color:#09c;--header-bg:#09c;--header-color:#fff;--bar-bg:#5e72e4;--menu-bg-color:#fff;--menu-color:#5f6368;--menu-color-hover:#202124;--main-menu-color:#202124;--submenu-bg-hover:#d4d4d4;--submenu-bg-hover-active:#09c;--blue:#5e72e4;--indigo:#5603ad;--purple:#8965e0;--pink:#f3a4b5;--red:#f5365c;--orange:#fb6340;--yellow:#ffd600;--green:#2dce89;--teal:#11cdef;--cyan:#2bffc6;--gray:#8898aa;--gray-dark:#32325d;--light:#ced4da;--lighter:#e9ecef;--secondary:#f7fafc;--success:#2dce89;--info:#11cdef;--warning:#fb6340;--danger:#f5365c;--light:#adb5bd;--dark:#212529;--default:#172b4d;--white:#fff;--neutral:#fff;--darker:black;--background-color:#f4f5f7;--login-form-bg-color:rgba(244,245,247,0.8);--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--blur-radius:10px;--blur-opacity:.5;--blur-radius-dark:10px;--blur-opacity-dark:.5;--font-family-sans-serif:"Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";--font-family-monospace:SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--font-family-normal:Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif}html,body{margin:0px;padding:0px;height:100%;font-size:16px;font-family:"Google Sans","Microsoft Yahei","WenQuanYi Micro Hei","sans-serif","Helvetica Neue","Helvetica","Hiragino Sans GB";font-family:var(--font-family-sans-serif)}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:.875rem;background-color:#f4f5f7;background-color:var(--background-color);color:#32325d;color:var(--gray-dark);overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}::selection{background-color:#5e72e4;background-color:var(--primary);color:#ffffff;color:var(--white)}a:link,a:visited,a:active{color:#5e72e4;color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}li{list-style-type:none}.table{position:relative;display:table}.tr{display:table-row}.thead{display:table-header-group}.tbody{display:table-row-group}.tfoot{display:table-footer-group}.td,.th{line-height:normal;display:table-cell;padding:.5em;text-align:center;vertical-align:middle}.th{font-weight:bold;white-space:nowrap}.tr.placeholder{height:4em}.tr.placeholder>.td{line-height:3;position:absolute;right:0;bottom:0;left:0;padding:.4rem 0 !important;text-align:center !important;background:inherit}.td[width="33%"]{padding:1.1em 1.5rem}.table[width="33%"],.th[width="33%"],.td[width="33%"]{width:33%}.table[width="100%"],.th[width="100%"],.td[width="100%"]{width:100%}.col-1{flex:1 1 30px !important}.col-2{flex:2 2 60px !important}.col-3{flex:3 3 90px !important}.col-4{flex:4 4 120px !important}.col-5{flex:5 5 150px !important}.col-6{flex:6 6 180px !important}.col-7{flex:7 7 210px !important}.col-8{flex:8 8 240px !important}.col-9{flex:9 9 270px !important}.col-10{flex:10 10 300px !important}*{box-sizing:border-box;margin:0;padding:0}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:normal;line-height:1.1 !important;color:inherit}select{padding:.36rem .8rem;color:#555;border:thin solid #ccc;background-color:#fff;background-image:none}.btn,button,select,input,.cbi-dropdown{line-height:1.5rem;padding:.5rem .75rem;margin:.25rem .1rem;color:#8898aa;border:1px solid #dee2e6;border-radius:.25rem;outline:0;background-image:none;box-shadow:none;transition:box-shadow .15s ease}select,.cbi-dropdown{width:inherit;cursor:default}select:not([multiple="multiple"]):focus,input:not(.cbi-button):focus,.cbi-dropdown:focus{border-color:#5e72e4;border-color:var(--primary);box-shadow:0 3px 9px rgba(50,50,9,0),3px 4px 8px rgba(94,114,228,0.1)}.cbi-dropdown,select[multiple="multiple"]{height:auto}pre{overflow:auto}code{font-size:1rem;font-size-adjust:.35;padding:1px 3px;color:#101010;border-radius:2px;background:#ddd}abbr{cursor:help;text-decoration:underline;color:#5e72e4;color:var(--primary)}hr{margin:1rem 0;opacity:.1;border-color:#eee}.login-page{height:100%}.login-page .video{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#000;background-color:var(--darker);overflow:hidden}.login-page .video video{width:100%;height:auto}.login-page .volume-control{position:fixed;right:1rem;top:1rem;width:1.5rem;height:1.5rem;z-index:5000;cursor:pointer;background-size:contain;background-image:url(../img/volume_high.svg)}.login-page .volume-control.mute{background-image:url(../img/volume_off.svg)}.login-page .main-bg{position:absolute;width:100%;height:100%;left:0;top:0;background-image:url(../img/blank.png);background-repeat:no-repeat;background-position:center;background-size:cover;transition:all .5s}.login-page .login-container{height:100%;margin-left:4.5rem;position:absolute;top:0px;display:flex;flex-direction:column;-webkit-box-pack:center;justify-content:center;align-items:flex-start;min-height:100%;z-index:2;width:420px;box-shadow:rgba(0,0,0,0.75) 0 0 35px -5px;margin-left:5%;background:transparent}.login-page .login-container .login-form{display:flex;flex-direction:column;-webkit-box-align:center;align-items:center;position:absolute;top:0px;width:100%;min-height:100%;max-width:420px;background-color:#fff;background-color:var(--white)}.login-page .login-container .login-form .brand{display:flex;-webkit-box-align:center;align-items:center;margin:50px auto 100px 50px;color:#525461;color:var(--default)}.login-page .login-container .login-form .brand .icon{width:50px;height:auto;margin-right:25px}.login-page .login-container .login-form .brand .brand-text{font-size:1.25rem;font-weight:700;font-family:"TypoGraphica"}.login-page .login-container .login-form .brand:hover{text-decoration:none}.login-page .login-container .login-form .form-login{width:100%;padding:20px 50px;box-sizing:border-box}.login-page .login-container .login-form .form-login .errorbox{text-align:center;color:#fb6340;color:var(--warning);padding-bottom:2rem}.login-page .login-container .login-form .form-login .input-group{margin-bottom:1.25rem;position:relative}.login-page .login-container .login-form .form-login .input-group::before{font-family:'argon' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#525461;color:var(--default);font-size:1.5rem;position:absolute;z-index:100;left:10px;top:10px}.login-page .login-container .login-form .form-login .input-group .border{position:absolute;width:100%;height:1px;bottom:0;border-bottom:1px #5e72e4 solid;border-bottom:1px var(--primary) solid;transform:scaleX(0);transition:transform .3s}.login-page .login-container .login-form .form-login .input-group input{font-size:1rem;line-height:1.5em;display:block;width:100%;padding:.5rem .75rem .5rem 3rem;margin:.825rem 0;box-sizing:border-box;transition:all .3s cubic-bezier(.68, -0.55, .265, 1.55);color:#525461;color:var(--default);border:0;border-radius:0;border-bottom:1px solid #fff;border-bottom:1px solid var(--white);background-color:transparent;background-clip:padding-box;box-shadow:0 3px 2px rgba(233,236,239,0.05);outline:none}.login-page .login-container .login-form .form-login .input-group input:focus+.border{transform:scaleX(1)}.login-page .login-container .login-form .form-login .input-group .cbi-input-password{margin-bottom:2rem;position:relative}.login-page .login-container .login-form .form-login .user-icon::before{content:"\e971"}.login-page .login-container .login-form .form-login .pass-icon::before{content:"\e910"}.login-page .login-container .login-form .cbi-button-apply{width:100% !important;box-shadow:rgba(0,0,0,0.1) 0 0 50px 0;font-weight:600;font-size:15px;color:#fff;color:var(--white);text-align:center;width:100%;cursor:pointer;min-height:50px;background-color:#5e72e4 !important;background-color:var(--primary) !important;border-radius:6px;outline:none;border-width:initial;border-style:none;border-color:initial;border-image:initial;padding:10px 0px;margin:30px 0px 100px;transition:all .3s !important;letter-spacing:.8rem}.login-page .login-container .login-form .cbi-button-apply:hover,.login-page .login-container .login-form .cbi-button-apply :focus{opacity:.9}.login-page .login-container footer{box-sizing:border-box;width:100%;text-align:center;line-height:1.6rem;display:flex;justify-content:space-evenly;margin-top:auto;padding:0px 0px 30px;z-index:10;color:#525461;color:var(--default);position:absolute;bottom:0}.login-page .login-container footer .ftc{position:absolute;bottom:30px;width:100%}.login-page .login-container footer .luci-link{display:block}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.login-page .login-container .login-form{-webkit-backdrop-filter:blur(var(--blur-radius));backdrop-filter:blur(var(--blur-radius));background-color:rgba(244, 245, 247, var(--blur-opacity))}}header,.main{width:100%}footer{font-size:.8rem;overflow:hidden;padding:1rem;text-align:right;white-space:nowrap;color:#aaa}footer>a{text-decoration:none;color:#aaa}small{font-size:90%;line-height:1.42857143;white-space:normal}.main{position:relative;top:0;bottom:0;overflow-y:auto;height:100%}.main-left{top:0;float:left;width:15%;width:calc(0% + 15rem);height:100%;background-color:#fff;background-color:var(--menu-bg-color);box-shadow:rgba(0,0,0,0.75) 0 0 15px -5px;overflow-x:auto;position:fixed;z-index:100}.main-left .sidenav-header{padding:1.5rem;text-align:center}.main-left .sidenav-header .brand{font-size:1.8rem;color:#5e72e4;color:var(--primary);font-family:"TypoGraphica";text-decoration:none;text-align:center;cursor:default;vertical-align:text-bottom;white-space:nowrap}.main-left::-webkit-scrollbar{width:5px;height:1px}.main-left::-webkit-scrollbar-thumb{background-color:#f6f9fc}.main-left::-webkit-scrollbar-track{background-color:#fff}.main-right{float:right;width:85%;width:calc(100% - 15rem);height:100%;transition:all .2s}.main-right>#maincontent{position:relative;z-index:50}.pull-right{float:right}.pull-left{float:left}.nowrap:not(.td){white-space:nowrap}[disabled="disabled"]{pointer-events:none}header{color:#fff;color:var(--header-color);padding:0;position:relative}header.bg-primary{background-color:#5e72e4 !important;background-color:var(--primary) !important}header::after{content:"";position:absolute;height:2rem;width:100%;background-color:#5e72e4 !important;background-color:var(--primary) !important}header .fill{padding:.8rem 0;border-bottom:0 solid rgba(255,255,255,0.08) !important}header .fill .container{height:2rem;padding:0 1.25rem}header .fill .container .showSide{display:none;color:#fff;font-size:1.4rem}header .fill .container .showSide:hover{text-decoration:none}header .fill .container .brand{font-size:1.5rem;color:#fff;font-family:"TypoGraphica";text-decoration:none;padding-left:1rem;cursor:default;vertical-align:text-bottom;display:none}header .fill .container .pull-right{float:right;margin-top:0rem;display:flex}header .fill .status{position:absolute;top:25%;right:1.25rem;float:right}header .fill .status span[data-indicator="poll-status"]{display:block;font-size:.8rem;font-weight:bold;padding:.3rem .8rem;white-space:nowrap;text-decoration:none;text-transform:uppercase;text-shadow:none;border-radius:3px;cursor:pointer;transition:all .3s}header .fill .status span[data-style="active"]{color:#32325d !important;background-color:#fff}header .fill .status span[data-style="inactive"]{color:#ffffff !important;background-color:#32325d}#xhr_poll_status{display:flex;margin-left:.5rem}#xhr_poll_status *{color:#fff}div[style="width:100%;height:300px;border:1px solid #000;background:#fff"]{border:0 !important}.danger{background-color:#ff7d60 !important}.warning{background-color:#f0e68c !important}.success{background-color:#5cb85c !important}.notice{background-color:#11cdef !important;color:#fff}.error{color:#f00}.alert,.alert-message{font-weight:bold;margin-bottom:1em;padding:1rem;border:0;border-radius:.375rem !important;background-color:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12);text-shadow:1px 1px rgba(0,0,0,0.1)}.alert.error,.alert-message.error{background-color:#ffd600}.alert h4,.alert-message h4{padding:0 1.5rem .75rem 0}.alert .btn,.alert-message .btn{height:auto}.alert-message>h4{font-size:110%;font-weight:bold}.alert-message>*{margin:.5rem 0}.alert-message .btn{padding:.3rem .6rem}.container .alert,.container .alert-message{margin-top:1rem}.main .main-left{transition:all .2s}.main .main-left .nav{margin-top:.5rem}.main .main-left .nav>li>a:first-child{display:block;margin:.1rem .5rem .1rem .5rem;padding:.675rem 0 .675rem 2.5rem;border-radius:.375rem;text-decoration:none;cursor:default;font-size:1rem;transition:all .2s;position:relative}.main .main-left .nav>li>a:first-child.active{color:#fff;background:#5e72e4;background:var(--primary)}.main .main-left .nav>li>a:first-child.active::before{color:#fff !important}.main .main-left .nav>li>a:first-child.active::after{transform:rotate(90deg);color:#fff !important}.main .main-left .nav>li>a:first-child:hover{cursor:pointer;color:#fff;background:#5e72e4;background:var(--primary)}.main .main-left .nav>li>a:first-child:hover::before{color:#fff !important}.main .main-left .nav>li>a:first-child::before{font-family:'argon' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;left:.8rem;padding-top:3px;transition:all .3s;content:"\e915";color:#5e72e4;color:var(--primary)}.main .main-left .nav li{padding:.5rem 1rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0}.main .main-left .nav li a{display:block;color:#5f6368;color:var(--menu-color)}.main .main-left .nav li.slide{padding:0}.main .main-left .nav li.slide ul{display:none}.main .main-left .nav li.slide:hover{background:none}.main .main-left .nav li.slide .slide-menu{margin:0 .5rem 0 2.5rem;padding:0 .5rem}.main .main-left .nav li.slide .slide-menu li{position:relative;border-radius:.375rem;margin:.2rem 0;padding:.5rem 0;background:none;list-style:none}.main .main-left .nav li.slide .slide-menu li a{white-space:nowrap;text-decoration:none}.main .main-left .nav li.slide .slide-menu li::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background-color:#5e72e4;background-color:var(--primary);transition:all .2s}.main .main-left .nav li.slide .slide-menu li:hover{background:none}.main .main-left .nav li.slide .slide-menu li:hover::after{width:100%}.main .main-left .nav li.slide .slide-menu .active{background:none;color:var(--menu-color)}.main .main-left .nav li.slide .slide-menu .active a{color:var(--menu-color)}.main .main-left .nav li.slide .slide-menu .active::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#5e72e4;background-color:var(--primary);transition:all .2s}.main .main-left .nav li.slide .slide-menu .active:hover{background:none}.main .main-left .nav li.slide .slide-menu .active:hover::after{width:100%}.main .main-left .nav li .menu{display:block;margin:.1rem .5rem .1rem .5rem;padding:.675rem 0 .675rem 2.5rem;border-radius:.375rem;text-decoration:none;cursor:default;font-size:1rem;transition:all .2s;position:relative}.main .main-left .nav li .menu.active{color:#fff;background:#5e72e4;background:var(--primary)}.main .main-left .nav li .menu.active::before{color:#fff !important}.main .main-left .nav li .menu.active::after{transform:rotate(90deg);color:#fff !important}.main .main-left .nav li .menu:hover{cursor:pointer;color:#fff;background:#5e72e4;background:var(--primary)}.main .main-left .nav li .menu:hover::before{color:#fff !important}.main .main-left .nav li .menu::before{font-family:'argon' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;left:.8rem;padding-top:3px;transition:all .3s;content:"\e915";color:#5e72e4;color:var(--primary)}.main .main-left .nav li .menu::after{position:absolute;right:.5rem;top:.8rem;font-family:'argon' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-moz-osx-font-smoothing:grayscale;content:'\e90f';transition:all .15s ease;color:#ced4da;text-rendering:auto;-webkit-font-smoothing:antialiased;transition:all .3s}.main .main-left .nav li .menu[data-title=Status]:before{content:"\e906";color:#5e72e4;color:var(--primary)}.main .main-left .nav li .menu[data-title=System]:before{content:"\e90a";color:#fb6340}.main .main-left .nav li .menu[data-title=Services]:before{content:"\e909";color:#11cdef}.main .main-left .nav li .menu[data-title=NAS]:before{content:"\e90c";color:#f3a4b5}.main .main-left .nav li .menu[data-title=VPN]:before{content:"\e90b";color:#8965e0}.main .main-left .nav li .menu[data-title=Network]:before{content:"\e908";color:#8965e0}.main .main-left .nav li .menu[data-title=Bandwidth_Monitor]:before{content:"\e90d";color:#2dce89}.main .main-left .nav li .menu[data-title=Docker]:before{content:"\e911";color:#6699ff}.main .main-left .nav li .menu[data-title=Statistics]:before{content:"\e913";color:#8965e0}.main .main-left .nav li .menu[data-title=Control]:before{content:"\e912";color:#5e72e4;color:var(--primary)}.main .main-left .nav li .menu[data-title=Asterisk]:before{content:"\e914";color:#fb6340}.main .main-left .nav li a[data-title=Logout]:before{content:"\e907";color:#adb5bd}.lg{margin:0;padding:0 !important}.logout{display:block;margin:.8rem .5rem .1rem .5rem;padding:.675rem 0 .675rem 2.5rem;border-radius:.375rem;text-decoration:none;font-size:1rem;transition:all .2s;position:relative}.logout:before{font-family:'argon' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;left:.8rem;padding-top:3px;transition:all .3s;content:"\e907";color:#32325d !important}body[class*="node-"]>.main>.main-left>.nav>.slide>.menu::before{transition:transform .1s ease-in-out}body[class*="node-"]>.main>.main-left>.nav>.slide>.menu.active::before{transition:transform .2s ease-in-out}.main>.main-left[style*="overflow: hidden"]>.nav>.slide>.menu::before{display:none}#maincontent>.container{margin:0 1.25rem 1rem 1.25rem}ul{line-height:normal}li{list-style-type:none}h1{font-size:2rem;padding-bottom:10px;border-bottom:thin solid #eee}h2{margin:0 0 1rem 0;font-size:1.25rem;letter-spacing:.1rem;padding:1rem 1.5rem;color:#32325d;border-radius:.375rem;background:#fff;box-shadow:0 4px 8px rgba(0,0,0,0.03)}h3{font-size:1.1rem;line-height:1;display:block;width:100%;margin:0;margin-bottom:0;padding:.8755rem 1.5rem;color:#32325d;color:var(--gray-dark);border-radius:.375rem;background:#fff}h4{margin:0;padding:.75rem 1.5rem;font-size:.7rem;font-weight:600;color:#525f7f;background-color:#e9ecef;background-color:var(--lighter)}h4 em{padding:0 .5rem}h5{font-size:1rem;margin:2rem 0 0 0;padding-bottom:10px}.cbi-section,.cbi-section-error,#iptables,.Firewall form,#cbi-network>.cbi-section-node,#cbi-wireless>.cbi-section-node,#cbi-wireless>#wifi_assoclist_table,[data-tab-title],[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),[data-page="admin-system-opkg"] #maincontent>.container{font-family:inherit;font-weight:normal;font-style:normal;line-height:normal;min-width:inherit;margin:1.5rem 0;padding:0rem;border:0;border-radius:.375rem;background-color:#fff;box-shadow:0 0 1rem 0 rgba(136,152,170,0.15)}.cbi-modal .cbi-section,.cbi-section .cbi-section{padding:0;box-shadow:none}.cbi-modal .cbi-tabmenu{margin-left:0}.cbi-map-descr,.cbi-section-descr{font-size:small;line-height:1.42857143;padding:.5rem 1.5rem}.cbi-map-descr+fieldset{margin-top:1rem}.cbi-map-descr>abbr{cursor:help;text-decoration:underline}.cbi-section>legend{display:none !important}fieldset>fieldset,.cbi-section>.cbi-section{margin:0;padding:0;border:0;box-shadow:none}.cbi-section>h3:first-child,.panel-title{font-size:1.1rem;line-height:1;display:block;width:100%;margin:0;margin-bottom:0;padding:.8755rem 1.5rem;color:#32325d;color:var(--gray-dark)}.cbi-section>h3:first-child,.cbi-section>h4:first-child,.cbi-section>p:first-child,[data-tab-title]>h3:first-child,[data-tab-title]>h4:first-child,[data-tab-title]>p:first-child{padding:1rem}.cbi-section p{padding:1rem}table{border-spacing:0;border-collapse:collapse}table,.table{overflow-y:hidden;width:100%;font-size:90%}.table .table-titles th{background-color:#e9ecef;background-color:var(--lighter)}table>tbody>tr>td,table>tbody>tr>th,table>tfoot>tr>td,table>tfoot>tr>th,table>thead>tr>td,table>thead>tr>th,.table>.tbody>.tr>.td,.table>.tbody>.tr>.th,.table>.tfoot>.tr>.td,.table>.tfoot>.tr>.th,.table>.thead>.tr>.td,.table>.thead>.tr>.th,.table>.tr>.td.cbi-value-field,.table>.tr>.th.cbi-section-table-cell{padding:.5rem}.container>.cbi-section:first-of-type>.table[width="100%"]>.tr>.td{padding:.6rem}.cbi-section-table-cell{line-height:1.1;align-self:flex-end;flex:1 1 auto}tr>td,tr>th,.tr>.td,.tr>.th,.cbi-section-table-row::before,#cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2){border-top:thin solid #ddd;padding:1.1em 1.5rem}#cbi-wireless .td,#cbi-network .tr:first-child>.td,.table[width="100%"]>.tr:first-child>.td,[data-page="admin-network-diagnostics"] .tr>.td,.tr.table-titles>.th,.tr.cbi-section-table-titles>.th{border-top:0 !important;background-color:#f6f9fc;padding:1.1em 1.5rem;line-height:1.3rem}.table[width="100%"]>.tr:first-child>.td{margin:auto 0}.cbi-section-table-row{margin-bottom:1rem;text-align:center !important;background:#f4f4f4}.cbi-section-table-row:last-child{margin-bottom:0}.cbi-section-table-row>.cbi-value-field .cbi-dropdown,.cbi-section-table-row>.cbi-value-field .cbi-input-select,.cbi-section-table-row>.cbi-value-field .cbi-input-text,.cbi-section-table-row>.cbi-value-field .cbi-input-password{width:100%}.cbi-section-table-row>.cbi-value-field [data-dynlist]>input,.cbi-section-table-row>.cbi-value-field input.cbi-input-password{width:calc(100% - 1.5rem)}.cbi-section-table-row .td{text-align:center !important}div>table>tbody>tr:nth-of-type(2n),div>.table>.tr:nth-of-type(2n){background-color:#f9f9f9}table table,.table .table,.cbi-value-field table,.cbi-value-field .table,td>table>tbody>tr>td,.td>.table>.tbody>.tr>.td,.cbi-value-field>table>tbody>tr>td,.cbi-value-field>.table>.tbody>.tr>.td{border:0}.btn,.cbi-button,.item::after{font-size:.8rem;display:inline-block;width:auto !important;padding:.45rem .8rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center;vertical-align:middle;white-space:nowrap;text-decoration:none;text-transform:uppercase;color:rgba(0,0,0,0.87);border:0;border-radius:.2rem;background-color:#f0f0f0;background-image:none;-webkit-appearance:none;-ms-touch-action:manipulation;touch-action:manipulation}.cbi-button-up,.cbi-button-down{font-size:1.2rem;display:inline-block;min-width:0;padding:.2rem .3rem;color:transparent !important;background:url(../icon/arrow.svg) no-repeat center;background-size:12px 20px}.cbi-button-up{transform:scaleY(-1)}.cbi-button:not(select){-webkit-appearance:none !important}.btn:hover,.btn:focus,.btn:active,.cbi-button:hover,.cbi-button:focus,.cbi-button:active,.item:hover::after,.item:focus::after,.item:active::after,.cbi-page-actions .cbi-button-apply+.cbi-button-save:hover,.cbi-page-actions .cbi-button-apply+.cbi-button-save:focus,.cbi-page-actions .cbi-button-apply+.cbi-button-save:active{text-decoration:none;outline:0}.btn:hover,.btn:focus,.cbi-button:hover,.cbi-button:focus,.item:hover::after,.item:focus::after{box-shadow:0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.2)}.btn:active,.cbi-button:active,.item:active::after{box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}.cbi-button-up:hover,.cbi-button-up:focus{box-shadow:0 0 2px rgba(0,0,0,0.12),0 -2px 2px rgba(0,0,0,0.2)}.cbi-button-up:active{box-shadow:0 -10px 20px rgba(0,0,0,0.19),0 -6px 6px rgba(0,0,0,0.23)}.btn:disabled,.cbi-button:disabled{cursor:not-allowed;pointer-events:none;opacity:.5;box-shadow:none}.alert-message [class="btn"],.modal div[class="btn"],.cbi-button-find,.cbi-button-link,.cbi-button-up,.cbi-button-down,.cbi-button-neutral,.cbi-button[name="zero"],.cbi-button[name="restart"],.cbi-button[onclick="hide_empty(this)"]{font-weight:bold;color:#fff;border:thin solid #8898aa;background-color:#8898aa}.btn.primary,.cbi-page-actions .cbi-button-save,.cbi-page-actions .cbi-button-apply+.cbi-button-save,.cbi-button-add,.cbi-button-save,.cbi-button-positive,.cbi-button-link,.cbi-button[value="Enable"],.cbi-button[value="Scan"],.cbi-button[value^="Back"],.cbi-button-neutral[onclick="handleConfig(event)"]{font-weight:normal;color:#fff !important;border:thin solid #5e72e4;border:thin solid var(--primary);background-color:#5e72e4;background-color:var(--primary)}.cbi-page-actions .cbi-button-apply,.cbi-section-actions .cbi-button-edit,.cbi-button-edit,.cbi-button-apply,.cbi-button-reload,.cbi-button-action,.cbi-button[value="Submit"],.cbi-button[value="Upload"],.cbi-button[value$="Apply"],.cbi-button[onclick="addKey(event)"]{font-weight:normal;color:#fff !important;border:thin solid #5e72e4;border:thin solid var(--primary);background-color:#5e72e4;background-color:var(--primary)}.btn.danger,.cbi-section-remove>.cbi-button,.cbi-button-remove,.cbi-button-reset,.cbi-button-negative,.cbi-button[value="Stop"],.cbi-button[value="Kill"],.cbi-button[onclick="reboot(this)"],.cbi-button-neutral[value="Restart"]{font-weight:normal;color:#fff;border:thin solid #f5365c;border:thin solid var(--red);background-color:#f5365c;background-color:var(--red)}.btn[value="Dismiss"],.cbi-button[value="Terminate"],.cbi-button[value="Reset"],.cbi-button[value="Disabled"],.cbi-button[onclick^="iface_reconnect"],.cbi-button[onclick="handleReset(event)"],.cbi-button-neutral[value="Disable"]{font-weight:normal;color:#fff;border:thin solid #eea236;background-color:#f0ad4e}.cbi-button-success,.cbi-button-download,.cbi-button[name="backup"],.cbi-button[value="Download"],.cbi-button[value="Save mtdblock"]{font-weight:normal;color:#fff;border:thin solid #4cae4c;background-color:#5cb85c}.cbi-page-actions .cbi-button-link:first-child{float:left}.a-to-btn{text-decoration:none}.cbi-value-field .cbi-button-add{font-weight:bold;margin:4px 0 4px 3px;padding:1px 6px;display:flex;align-items:center}.tabs{margin:0 0 1rem 0;padding:0 1rem;background-color:#FFFFFF;border-radius:.375rem;box-shadow:0 4px 8px rgba(0,0,0,0.03);white-space:nowrap;overflow-x:auto}.tabs::-webkit-scrollbar{width:1px;height:5px}.tabs::-webkit-scrollbar-thumb{background-color:#f6f9fc}.tabs::-webkit-scrollbar-track{background-color:#fff}.tabs li[class~="active"],.tabs li:hover{cursor:pointer;border-bottom:.18751rem solid #5e72e4;border-bottom:.18751rem solid var(--primary);color:#5e72e4;color:var(--primary);background-color:#dce1fe;margin-bottom:0;border-radius:0}.tabs li[class~="active"] a,.tabs li:hover a{color:#5e72e4;color:var(--primary)}.tabs li{font-size:.875rem;display:inline-block;padding:.875rem 0;border-bottom:.18751rem solid rgba(0,0,0,0);margin:0 .2rem}.tabs li a{text-decoration:none;color:#404040;padding:.5rem .8rem}.tabs li:hover{border-bottom:.18751rem solid #5e72e4;border-bottom:.18751rem solid var(--primary)}.cbi-tabmenu{color:white;padding:.5rem 1rem 0 1rem;white-space:nowrap;overflow-x:auto}.cbi-tabmenu::-webkit-scrollbar{width:1px;height:5px}.cbi-tabmenu::-webkit-scrollbar-thumb{background-color:#f6f9fc}.cbi-tabmenu::-webkit-scrollbar-track{background-color:#fff}.cbi-tabmenu li{background:#dce3e9;display:inline-block;font-size:.875rem;border-top-left-radius:.25rem;border-top-right-radius:.25rem;padding:.5rem 0;border-bottom:.18751rem solid rgba(0,0,0,0);margin:0 .2rem}.cbi-tabmenu li a{text-decoration:none;color:#404040;padding:.5rem .8rem}.cbi-tabmenu li:hover{cursor:pointer;border-bottom:.18751rem solid #5e72e4;border-bottom:.18751rem solid var(--primary);color:#5e72e4;color:var(--primary);background-color:#dce1fe;margin-bottom:0}.cbi-tabmenu li:hover a{color:#525f7f}.cbi-tabmenu li[class~="cbi-tab"]{border-bottom:.18751rem solid #5e72e4;border-bottom:.18751rem solid var(--primary);color:#5e72e4;color:var(--primary);background-color:#dce1fe;margin-bottom:0}.cbi-tabmenu li[class~="cbi-tab"] a{color:#5e72e4;color:var(--primary)}.cbi-tab-descr{padding:.5rem 1.5rem}.cbi-section .cbi-section-remove:nth-of-type(2n),.container>.cbi-section .cbi-section-node:nth-of-type(2n){background-color:#f9f9f9}[data-tab-title]{overflow:hidden;height:0;opacity:0;margin:0;padding:0rem 0rem !important}[data-tab-title] p{margin-left:1rem;margin-bottom:1rem}[data-tab-active="true"]{overflow:visible;height:auto;opacity:1;transition:opacity .25s ease-in;margin:inherit !important}.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),.cbi-section[id] .cbi-section-node:nth-of-type(4n+4){background-color:#f9f9f9}.cbi-section-node-tabbed{margin-top:0;padding:0;border:0 solid #d4d4d4;border-radius:.375rem}.cbi-tabcontainer>.cbi-value:nth-of-type(2n){background-color:#f9f9f9}.cbi-value-field,.cbi-value-description{line-height:1.25;display:table-cell}.cbi-value-field abbr,.cbi-value-description abbr{color:#32325d;color:var(--gray-dark)}.cbi-value-description{font-size:small;padding:.5rem;opacity:.5}.cbi-value-title{display:table-cell;float:left;width:23rem;padding-top:.25rem;padding-right:2rem;text-align:right;word-wrap:break-word}.cbi-value{display:inline-block;width:100%;padding:.35rem 1rem .2rem 1rem;line-height:2.4rem}.cbi-value ul{line-height:1.25}.cbi-value-field .cbi-dropdown,.cbi-value-field .cbi-input-select,.cbi-value input[type="text"],.cbi-value input[type="password"]{min-width:18rem}.cbi-value input[type="password"]{border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}.cbi-value input[type="password"]+.cbi-button-neutral{height:42px;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:0;border:0}#cbi-firewall-zone .cbi-input-select,#cbi-network-switch_vlan .cbi-input-select{min-width:11rem}#cbi-network-switch_vlan .cbi-input-text{max-width:3rem}.cbi-input-invalid{color:#f5365c;border-bottom-color:#f5365c}.cbi-section-error{font-weight:bold;line-height:1.42857143;margin:18px;padding:6px;border:thin solid #f5365c;border-radius:3px;background-color:#fce6e6}.cbi-section-error ul{margin:0 0 0 20px}.cbi-section-error ul li{font-weight:bold;color:#f5365c}.td[data-title]::before{font-weight:bold;display:none;padding:.25rem 0;content:attr(data-title) ":\20";text-align:left;white-space:nowrap}.tr.placeholder .td[data-title]::before{display:none}.tr[data-title]::before,.tr.cbi-section-table-titles.named::before{font-weight:bold;display:table-cell;align-self:center;flex:1 1 5%;padding:.25rem;content:attr(data-title) "\20";text-align:center;vertical-align:middle;white-space:normal;word-wrap:break-word}.cbi-rowstyle-1{background-color:#f9f9f9}.cbi-rowstyle-2{background-color:#eee}.cbi-rowstyle-2 .cbi-button-up,.cbi-rowstyle-2 .cbi-button-down,body:not(.Interfaces) .cbi-rowstyle-2:first-child{background-color:#fff !important}.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell{width:auto !important}.td.cbi-section-actions{text-align:right !important;vertical-align:middle}.td.cbi-section-actions>*{display:inline-flex}.td.cbi-section-actions>*>*,.td.cbi-section-actions>*>form>*{margin:0 5px;display:flex;align-items:center}.td.cbi-section-actions>*>form{display:inline-flex;margin:0}.cbi-checkbox{margin:0 .25rem}.cbi-dynlist{line-height:1.3;flex-direction:column;min-height:30px;cursor:text}.cbi-dynlist>.item{position:relative;max-width:25rem;pointer-events:none;color:#8898aa;outline:0}.cbi-dynlist[name="sshkeys"]>.item{max-width:none}.cbi-dynlist>.item::after{position:absolute;width:2.2rem !important;height:calc(100% - .5rem - 2px);right:0;bottom:0;content:"\00D7";pointer-events:auto;background-color:var(--red);font-weight:normal;font-size:1.2rem;display:flex;align-items:center;justify-content:center;line-height:1.5rem;padding:0;margin:.25rem .1rem .25rem 0;color:#fff;border:1px solid #f5365c;border-radius:.25rem;outline:0;background-image:none;box-shadow:none;border-top-left-radius:0;border-bottom-left-radius:0}.cbi-dynlist>.item>span{white-space:normal;word-break:break-word;line-height:1.5rem;padding:.5rem .5rem;margin:.25rem .1rem;color:#8898aa;border:1px solid #dee2e6;border-radius:.25rem;outline:0;background-image:none;box-shadow:none;display:block;transition:box-shadow .15s ease;box-sizing:border-box;min-width:15rem}.cbi-dynlist>.add-item{display:inline-flex;align-items:center;width:100%;min-width:16rem}.cbi-dynlist>.add-item input{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0;border-right:none}.cbi-dynlist>.add-item .cbi-button-add{font-weight:normal;font-size:1.2rem;display:flex;align-items:center;line-height:1.5rem;padding:.5rem .75rem;margin:.25rem .1rem .25rem 0;color:#fff;border:1px solid #5e72e4;border:1px solid var(--primary);border-radius:.25rem;outline:0;background-image:none;box-shadow:none;border-top-left-radius:0;border-bottom-left-radius:0}.cbi-dynlist>.add-item:not([ondrop])>input{overflow:hidden;width:100%;min-width:15rem;white-space:nowrap;text-overflow:ellipsis}.cbi-dynlist>.add-item[ondrop]>input{min-width:13rem}.cbi-dynlist,.cbi-dropdown{position:relative;display:inline-flex;padding:.2rem .2rem}.cbi-dropdown[placeholder*="select"]{max-width:25rem;height:auto;margin-top:-3px}.cbi-dropdown>ul{display:flex;overflow-x:hidden;overflow-y:auto;width:100%;margin:0 !important;padding:0;list-style:none;outline:0}.cbi-dropdown>ul.preview{display:none}.cbi-button-apply>ul.preview{display:none}.cbi-button-apply>ul.preview li{color:#fff}.cbi-button-apply>ul:first-child li{color:#fff}.cbi-dropdown>.open{flex-basis:15px}.cbi-dropdown>.open,.cbi-dropdown>.more{font-size:1rem;font-weight:900;line-height:2;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;justify-content:center;padding:0 .25em;cursor:default;text-align:center;outline:0}.cbi-dropdown>.more,.cbi-dropdown>ul>li[placeholder]{font-weight:bold;display:none;color:#777;text-shadow:1px 1px 0 #fff}.cbi-dropdown>ul>li{display:none;overflow:hidden;align-items:center;align-self:center;flex-grow:1;flex-shrink:1;min-height:20px;padding:.25em;white-space:nowrap;text-overflow:ellipsis}.cbi-dropdown>ul>li .hide-open{display:initial}.cbi-dropdown>ul>li .hide-close{display:none}.cbi-dropdown>ul>li[display]:not([display="0"]){border-left:thin solid #ccc}.cbi-dropdown[empty]>ul{max-width:1px}.cbi-dropdown>ul>li>form{display:none;margin:0;padding:0;pointer-events:none}.cbi-dropdown>ul>li img{margin-right:.25em;vertical-align:middle}.cbi-dropdown>ul>li>form>input[type="checkbox"]{height:auto;margin:0}.cbi-dropdown>ul>li input[type="text"]{height:20px}.cbi-dropdown[open]>ul.dropdown{position:absolute;z-index:1100;display:block;width:auto;min-width:100%;max-width:none;max-height:200px !important;border:0 solid #918e8c;background:#ffffff;box-shadow:0 0 4px #918e8c;border-bottom-left-radius:.35rem;border-bottom-right-radius:.35rem;color:var(--main-menu-color);margin-left:-0.2rem !important}.cbi-dropdown[open]>ul.dropdown li{color:#000}.cbi-dropdown>ul>li[display],.cbi-dropdown[open]>ul.preview,.cbi-dropdown[open]>ul.dropdown>li,.cbi-dropdown[multiple]>ul>li>label,.cbi-dropdown[multiple][open]>ul.dropdown>li,.cbi-dropdown[multiple][more]>.more,.cbi-dropdown[multiple][empty]>.more{display:flex;align-items:center;flex-grow:1}.cbi-dropdown[empty]>ul>li,.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],.cbi-dropdown[multiple][open]>ul.dropdown>li>form{display:block}.cbi-dropdown[open]>ul.dropdown>li .hide-open{display:none}.cbi-dropdown[open]>ul.dropdown>li .hide-close{display:initial}.cbi-dropdown[open]>ul.dropdown>li{border-bottom:thin solid #ccc;padding:.5rem .8rem}.cbi-dropdown[open]>ul.dropdown>li label{margin-left:.5rem}.cbi-dropdown[open]>ul.dropdown>li[selected]{background:#dce1fe}.cbi-dropdown[open]>ul.dropdown>li.focus{background:#dce1fe;outline:none}.cbi-dropdown[open]>ul.dropdown>li:last-child{margin-bottom:0;border-bottom:0}.cbi-dropdown[open]>ul.dropdown>li[unselectable]{opacity:.7}.cbi-dropdown[open]>ul.dropdown>li>input.create-item-input:first-child:last-child{width:100%}.cbi-dropdown[disabled]{pointer-events:none;opacity:.6}.cbi-dropdown .zonebadge{width:100%}.cbi-dropdown[open] .zonebadge{width:auto}.cbi-progressbar{position:relative;min-width:170px;height:20px;margin:6px 0;border:thin solid #999;background:#eee;border-radius:.2rem;overflow:hidden}.cbi-progressbar>div{width:0;height:100%;transition:width .25s ease-in;background:#5bc0de;background:var(--bar-bg)}.cbi-progressbar::after{font-family:monospace;font-size:1em;font-weight:bold;font-size-adjust:.38;line-height:normal;position:absolute;top:2px;right:0;bottom:2px;left:0;overflow:hidden;content:attr(title);text-align:center;white-space:pre;text-overflow:ellipsis}#modal_overlay{position:fixed;z-index:900;top:0;right:10000px;bottom:0;left:-10000px;overflow-y:scroll;transition:opacity .125s ease-in;opacity:0;background:rgba(0,0,0,0.7);-webkit-overflow-scrolling:touch}.modal{display:flex;align-items:center;flex-wrap:wrap;width:90%;min-width:270px;max-width:600px;min-height:32px;margin:5em auto;padding:1em;border-radius:3px !important;background:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}.modal>*{line-height:normal;flex-basis:100%;margin-bottom:.5em;max-width:100%}.modal>pre,.modal>textarea{font-size:1rem;font-size-adjust:.35;overflow:auto;margin-bottom:.5em;padding:8.5px;cursor:auto;white-space:pre-wrap;color:#eee;outline:0;background-color:#101010;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}.modal>h4{margin:.5em 0}.modal ul{margin-left:2.2em}.modal li{list-style-type:square;color:#808080}.modal p{word-break:break-word}.modal .label{font-size:.6rem;font-weight:normal;padding:.1rem .3rem;padding-bottom:0;cursor:default;border-radius:0}.modal .label.warning{background-color:#f0ad4e !important}.modal .btn{padding:.45rem .8rem}.modal.cbi-modal{max-width:90%;max-height:none}body.modal-overlay-active{overflow:hidden;height:100vh}body.modal-overlay-active #modal_overlay{right:0;left:0;opacity:1}.spinning{position:relative;padding-left:32px !important}.spinning::before{position:absolute;top:0;bottom:0;left:.2em;width:32px;content:"";background:url(/luci-static/resources/icons/loading.gif) no-repeat center;background-size:16px}.hidden{display:none}.left,.left::before{text-align:left !important}.right,.right::before{text-align:right !important}.center,.center::before{text-align:center !important}.top{align-self:flex-start !important;vertical-align:top !important}.bottom{align-self:flex-end !important;vertical-align:bottom !important}.inline{display:inline}.cbi-page-actions{padding-top:1rem;text-align:right}.cbi-page-actions>form[method="post"]{display:inline-block}.th[data-type="button"],.td[data-type="button"],.th[data-type="fvalue"],.td[data-type="fvalue"]{flex:1 1 2em;text-align:center}.ifacebadge{display:inline-flex;padding:.5rem .8rem;border-bottom:thin solid #ccc;background:#eee;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}td>.ifacebadge,.td>.ifacebadge{font-size:.8rem;background-color:#f0f0f0}.ifacebadge>em,.ifacebadge>img{display:inline-block;align-self:flex-start;margin:0 .2rem}.ifacebadge>img+img{margin:0 .2rem 0 0}.network-status-table{display:flex;flex-wrap:wrap}.network-status-table .ifacebox{flex-grow:1;margin:.5em}.network-status-table .ifacebox-body{display:flex;flex-direction:column;height:100%}.network-status-table .ifacebox-body>span{flex:10 10 auto;height:100%}.network-status-table .ifacebox-body>div{display:flex;flex-wrap:wrap}.network-status-table .ifacebox-body .ifacebadge{align-items:center;flex:1 1 auto;min-width:220px;margin:.5em 0 0 0;padding:.5em;background-color:#fff}.cbi-input-textarea{font-family:monospace;width:100%;font-size:.875rem;min-height:14rem;padding:.8rem;color:#000}#syslog{font-size:small;line-height:1.25;overflow-y:hidden;width:100%;min-height:15rem;padding:1rem;resize:none;color:#242424;border:0;border-radius:.375rem;background-color:#ffffff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}#syslog:focus{outline:0}.uci-change-list{font-family:monospace}.uci-change-list ins,.uci-change-legend-label ins{display:block;padding:2px;text-decoration:none;border:thin solid #0f0;background-color:#cfc}.uci-change-list del,.uci-change-legend-label del{font-style:normal;display:block;padding:2px;text-decoration:none;border:thin solid #f00;background-color:#fcc}.uci-change-list var,.uci-change-legend-label var{font-style:normal;display:block;padding:2px;text-decoration:none;border:thin solid #ccc;background-color:#eee}.uci-change-list var ins,.uci-change-list var del{font-style:normal;padding:0;white-space:pre;border:0}.uci-change-legend{padding:5px}.uci-change-legend-label{float:left;width:150px}.uci-change-legend-label>ins,.uci-change-legend-label>del,.uci-change-legend-label>var{display:block;float:left;width:10px;height:10px;margin-right:4px}.uci-change-legend-label var ins,.uci-change-legend-label var del{line-height:.4;border:0}.uci-change-list var,.uci-change-list del,.uci-change-list ins{padding:.5rem}#iwsvg,#iwsvg2,#bwsvg{border:thin solid #d4d4d4 !important}#iwsvg,[data-page="admin-status-realtime-bandwidth"] #bwsvg{border-top:0 !important}.ifacebox{line-height:1.25;display:inline-flex;flex-direction:column;min-width:100px;border-bottom:thin solid #ccc;background-color:#f9f9f9;box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.2)}.ifacebox-head{padding:.25em;background:#eee}.ifacebox-head.active{background:#5e72e4;background:var(--primary)}.ifacebox-head.active *{color:#fff;color:var(--white)}.ifacebox-body{padding:.5em 1rem;line-height:1.6em}.cbi-image-button{margin-left:.5rem}.zonebadge{display:inline-block;padding:.2rem .5rem}.zonebadge .ifacebadge{margin:.1rem .2rem;padding:.2rem .3rem;border:thin solid #6c6c6c}.zonebadge>input[type="text"]{min-width:10rem;margin-top:.3rem;padding:.16rem 1rem}.zonebadge>em,.zonebadge>strong{display:inline-block;margin:0 .2rem}.cbi-value-field .cbi-input-checkbox,.cbi-value-field .cbi-input-radio{margin-top:.1rem}.cbi-value-field>ul>li{display:flex}.cbi-value-field>ul>li>label{margin-top:.5rem}.cbi-value-field>ul>li .ifacebadge{margin-top:-0.5rem;margin-left:.4rem;background-color:#eee}.cbi-section-table-row>.cbi-value-field .cbi-dropdown{min-width:7rem}.cbi-section-create{display:inline-flex;align-items:center;margin:.25rem 0 .25rem 1rem}.cbi-section-create>*{margin:.5rem}.cbi-section-remove{padding:.5rem}div.cbi-value var,td.cbi-value-field var,.td.cbi-value-field var{font-style:italic;color:#0069d6}.cbi-optionals{padding:1rem 1rem 0 1rem;border-top:thin solid #ccc}.cbi-dropdown-container{position:relative}.cbi-tooltip-container,span[data-tooltip],span[data-tooltip] .label{cursor:help !important}.cbi-tooltip{position:absolute;z-index:1000;left:-1000px;padding:2px 5px;transition:opacity .25s ease-out;white-space:pre;pointer-events:none;opacity:0;border-radius:3px;background:#fff;box-shadow:0 0 2px #444}.cbi-tooltip-container:hover .cbi-tooltip{left:auto;transition:opacity .25s ease-in;opacity:1}.zonebadge .cbi-tooltip{margin:-1.5rem 0 0 -0.5rem;padding:.25rem;background:inherit}.zonebadge-empty{color:#404040;background:repeating-linear-gradient(45deg, rgba(204,204,204,0.5), rgba(204,204,204,0.5) 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}.zone-forwards{display:flex;min-width:10rem}.zone-forwards>*{flex:1 1 45%}.zone-forwards>span{flex-basis:10%;padding:0 .25rem;text-align:center}.zone-forwards .zone-src,.zone-forwards .zone-dest{display:flex;flex-direction:column}.label{font-size:.8rem;font-weight:bold;padding:.3rem .8rem;white-space:nowrap;text-decoration:none;text-transform:uppercase;color:#fff !important;border-radius:3px;background-color:#bfbfbf;text-shadow:none}label>input[type="checkbox"],label>input[type="radio"]{position:relative;top:.4rem;right:.2rem;margin:0;vertical-align:bottom}label[data-index][data-depends]{padding-right:2em}.showSide{display:none}.darkMask{position:fixed;z-index:99;display:none;width:100%;height:100%;content:"";top:0;background-color:rgba(0,0,0,0.56)}#diag-rc-output>pre,#command-rc-output>pre,[data-page="admin-services-wol"] .notice code{font-size:1.2rem;font-size-adjust:.35;line-height:normal;display:block;overflow-y:hidden;width:100%;padding:8.5px;white-space:pre;color:#eee;background-color:#101010;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}[data-page="admin-network-diagnostics"] .table{box-shadow:none}input[name="ping"],input[name="traceroute"],input[name="nslookup"]{width:80%}.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2),.node-status-processes>.main .table .tr .td:nth-child(3){white-space:normal}[data-page="admin-system-reboot"] p{padding-left:1.5rem}[data-page="admin-system-reboot"] .cbi-button{background:#fb6340 !important}[data-page="admin-system-reboot"] p>span{position:relative;top:.1rem;left:1rem}[data-page="admin-vpn-passwall"] h4{background:transparent}#cbi-samba [data-tab="template"] .cbi-value-field{display:block}#cbi-samba [data-tab="template"] .cbi-value-title{width:auto;padding-bottom:.6rem}[data-page="admin-system-admin"] .cbi-map h2,[data-page="admin-system-admin-password"] .cbi-map h2,[data-page="admin-system-admin"] .cbi-map .cbi-map-descr,[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr{margin-left:0;color:#32325d;color:var(--gray-dark)}[data-page="admin-system-opkg"] h2{margin-left:0;color:#32325d;color:var(--gray-dark)}.controls{margin:.5em 1rem 1em 1rem !important}.controls>*>.btn:not([aria-label$="page"]){flex-grow:initial !important;margin-top:.25rem}.controls>#pager>.btn[aria-label$="page"]{font-size:1.4rem;font-weight:bold}.controls>*>label{margin-bottom:.2rem}[data-page="admin-system-opkg"] div.btn{line-height:3;display:inline;padding:.3rem .6rem}[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),[data-page="admin-system-opkg"] #maincontent>.container{margin-top:2rem;padding-top:.1rem}[data-page="admin-system-opkg"] #maincontent>.container{margin:0 1.25rem 1rem 1.25rem;margin-bottom:1rem}.td.version,.td.size{white-space:normal !important;word-break:break-word}.cbi-tabmenu+.cbi-section{margin-top:0}[data-page="admin-system-crontab"] #view p{margin-bottom:1rem}[data-page="admin-system-flash"] .cbi-value{padding:0}[data-page="admin-system-flash"] .cbi-section .cbi-section{margin-top:0}[data-page="admin-system-flash"] .cbi-map-tabbed{border-radius:.375rem}[data-page="admin-system-flash"] legend{display:block !important;font-size:1.2rem;width:100%;display:block;margin-bottom:0;padding:1rem 0 1rem 1.5rem;border-bottom:1px solid rgba(0,0,0,0.05);line-height:1.5;margin-bottom:0rem;letter-spacing:.1rem;color:#32325d;font-weight:bold}[data-page="admin-system-flash"] .cbi-section-descr{font-weight:600;padding:1rem 0 1rem 1.5rem;color:#525f7f}[data-page="admin-system-flash"] .modal label>input[type="checkbox"]{top:-0.35rem}[data-page="admin-system-flash"] .modal .btn{white-space:normal !important}#cbi-wireless>#wifi_assoclist_table>.tr{box-shadow:inset 1px -1px 0 #ddd,inset -1px -1px 0 #ddd}#cbi-wireless>#wifi_assoclist_table>.tr.placeholder>.td{right:33px;bottom:33px;left:33px;border-top:thin solid #ddd !important}#cbi-wireless>#wifi_assoclist_table>.tr.table-titles{box-shadow:inset 1px 0 0 #ddd,inset -1px 0 0 #ddd}#cbi-wireless>#wifi_assoclist_table>.tr.table-titles>.th{border-bottom:thin solid #ddd;box-shadow:0 -1px 0 0 #ddd}#wifi_assoclist_table>.tr>.td[data-title="RX Rate / TX Rate"]{width:23rem}[data-page="admin-network-dhcp"] .cbi-value{padding:0}[data-page="admin-network-dhcp"] [data-tab-active="true"]{padding:1rem 0 !important}#iptables{margin:0}.Firewall form{margin:2rem 2rem 0 0;padding:0;box-shadow:none}#cbi-firewall-redirect table *,#cbi-network-switch_vlan table *,#cbi-firewall-zone table *{font-size:small}#cbi-firewall-redirect table input[type="text"],#cbi-network-switch_vlan table input[type="text"],#cbi-firewall-zone table input[type="text"]{width:5rem}#cbi-firewall-redirect table select,#cbi-network-switch_vlan table select,#cbi-firewall-zone table select{min-width:3.5rem}#cbi-network-switch_vlan .th,#cbi-network-switch_vlan .td{flex-basis:12%}#cbi-firewall-zone .table,#cbi-network-switch_vlan .table{display:block}#cbi-firewall-zone .td,#cbi-network-switch_vlan .td{width:100%}[data-page="admin-network-firewall-custom"] #view p,[data-page="admin-status-routes"] #view p{padding:0 1.5rem;margin-bottom:1rem}[data-page="admin-network-firewall-custom"] #view p textarea,[data-page="admin-status-routes"] #view p textarea{padding:1rem;border-radius:.375rem}#applyreboot-container{margin:2rem}#applyreboot-section{line-height:300%;margin:2rem}.OpenVPN a{line-height:initial !important}.commandbox{width:24% !important;margin:10px 0 0 10px !important;padding:.5rem 1rem;border-bottom:thin solid #ccc;background:#eee;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.commandbox h3{line-height:normal !important;overflow:hidden;margin:6px 0 !important;white-space:nowrap;text-overflow:ellipsis}.commandbox div{left:auto !important}.commandbox code{position:absolute;overflow:hidden;max-width:60%;margin-left:4px;padding:2px 3px;white-space:nowrap;text-overflow:ellipsis}.commandbox code:hover{overflow-y:auto;max-height:50px;white-space:normal}.commandbox p:first-of-type{margin-top:-6px}.commandbox p:nth-of-type(2){margin-top:2px}[data-page^="admin-system-commands"] .panel-title,[data-page^="command-cfg"] .mobile-hide,[data-page^="command-cfg"] .showSide{display:none}#command-rc-output .alert-message{line-height:1.42857143;position:absolute;top:40px;right:32px;max-width:40%;margin:0;animation:anim-fade-in 1.5s forwards;word-break:break-word;opacity:0}@keyframes anim-fade-in{100%{opacity:1}}input[type="checkbox"]{appearance:none !important;-webkit-appearance:none !important;border:1px solid #dee2e6;width:16px !important;height:16px !important;padding:0;cursor:pointer;transition:all .2s;margin:1rem 0 0 0}input[type="checkbox"]:checked{border:1px solid #5e72e4;border:1px solid var(--primary);background-image:url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important;background-color:#5e72e4;background-color:var(--primary);background-size:70%;background-repeat:no-repeat;background-position:center}.fb-container .cbi-button{height:auto !important}#cbi-usb_printer-printer em{display:block;padding:1rem;text-align:center}pre.command-output{padding:1.5rem}[data-page="admin-nlbw-display"] .cbi-section[data-tab="export"]{padding:1.5rem !important}[data-page="admin-nlbw-backup"] form{padding-left:1.5rem}[data-page="admin-status-iptables"] .right{margin-bottom:0 !important}@media all and (-ms-high-contrast:none){.main>.main-left>.nav>.slide>.menu::before{top:30.25%}.main>.main-left>.nav>li:last-child::before{top:20%}.showSide::before{top:-12px}}@media screen and (max-width:1600px){header>.fill>.container>#logo{margin:0 2.5rem 0 .5rem}.main-left{width:calc(0% + 13rem)}.main-right{width:calc(100% - 13rem)}.btn:not(button),.cbi-button{font-size:.8rem}.label{padding:.2rem .6rem}.cbi-value-title{width:15rem;padding-right:.6rem}.cbi-value-field .cbi-dropdown,.cbi-value-field .cbi-input-select,.cbi-value input[type="text"],.cbi-value input[type="password"]{min-width:18rem}#cbi-firewall-zone .cbi-input-select{min-width:9rem}.cbi-input-textarea{font-size:small}.node-admin-status>.main fieldset li>a{padding:.3rem .6rem}}@media screen and (max-width:1366px){header>.fill>.container{cursor:default}.main-left{width:calc(0% + 13rem)}.main-right{width:calc(100% - 13rem)}.tabs>li>a,.cbi-tabmenu>li>a{padding:.2rem .8rem}.panel-title{font-size:1.1rem;padding-bottom:1rem}table{font-size:.7rem !important;width:100% !important}.table .cbi-input-text{width:100%}.cbi-value-field .cbi-dropdown,.cbi-value-field .cbi-input-select,.cbi-value input[type="text"],.cbi-value input[type="password"]{min-width:16rem}#cbi-firewall-zone .cbi-input-select{min-width:4rem}.main>.main-left>.nav>li,.main>.main-left>.nav>li a,.main>.main-left>.nav>.slide>.menu,.main>.main-left>.nav>li>[data-title="Logout"]{font-size:.9rem}.main>.main-left>.nav>.slide>.slide-menu>li>a{font-size:.7rem}#modal_overlay{top:0rem}[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table){display:block}[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),[data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),[data-page="admin-network-hosts"] .table,[data-page="admin-network-routes"] .table{overflow-y:visible}.commandbox{width:32% !important}.btn:not(button),.cbi-button{font-size:.8rem}}@media screen and (max-width:1152px){header>.fill>.container>#logo{display:none}header>.fill>.container>.brand{position:relative}html,.main{overflow-y:visible}.main>.loading>span{top:25%}.main-left{width:calc(0% + 13rem)}.main-right{width:calc(100% - 13rem)}body:not(.logged-in) .showSide{visibility:hidden;width:0;margin:0}.node-main-login>.main .cbi-value-title{text-align:left}.cbi-value-title{width:12rem;padding-right:1rem}.cbi-value-field .cbi-dropdown,.cbi-value-field .cbi-input-select,.cbi-value input[type="text"]{width:16rem;min-width:16rem}.cbi-value input[name^="pw"],.cbi-value input[data-update="change"]:nth-child(2){width:13rem !important;min-width:13rem}#diag-rc-output>pre,#command-rc-output>pre,[data-page="admin-services-wol"] .notice code{font-size:1rem}.table{display:block}.Interfaces .table{overflow-x:hidden}#packages.table{display:grid}.tr{display:flex;flex-direction:row;flex-wrap:wrap}.Overview .table[width="100%"]>.tr{flex-wrap:nowrap}.tr.placeholder{border-bottom:thin solid #ddd}.tr.placeholder>.td,#cbi-firewall .tr>.td,#cbi-network .tr:nth-child(2)>.td,.cbi-section #wifi_assoclist_table .tr>.td{border-top:0}.th,.td{display:inline-block;align-self:flex-start;flex:2 2 10%;text-overflow:ellipsis;word-wrap:break-word}.td select,.td input[type="text"]{width:100%;word-wrap:normal}.td [data-dynlist]>input,.td input.cbi-input-password{width:calc(100% - 1.5rem)}.td[data-type="button"],.td[data-type="fvalue"]{flex:1 1 12.5%;text-align:left}.th.cbi-value-field,.td.cbi-value-field,.th.cbi-section-table-cell,.td.cbi-section-table-cell{flex-basis:auto;padding-top:1rem}.cbi-section-table-row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}.td.cbi-value-field,.cbi-section-table-cell{display:inline-block;flex:10 10 auto;flex-basis:50%;text-align:center}.td.cbi-section-actions{vertical-align:bottom}.tr.table-titles,.tr.cbi-section-table-titles,.tr.cbi-section-table-descr{display:none}.tr[data-title]::before,.tr.cbi-section-table-titles.named::before{font-size:.9rem;display:block;flex:1 1 100%;border-bottom:thin solid rgba(0,0,0,0.26);background:#e9ecef}.td[data-title],[data-page^="admin-status-realtime"] .td[id]{text-align:left}.td[data-title]::before{display:block}.cbi-button+.cbi-button{margin-left:0}.td.cbi-section-actions>*>*,.td.cbi-section-actions>*>form>*{margin:2.1px 3px}.Firewall form{position:static !important;margin:0 0 2rem 0;padding:2rem;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}.Firewall form input{width:100% !important;margin:0;margin-top:1rem}.Firewall .center,.Firewall .center::before{text-align:left !important}.commandbox{width:100% !important;margin-left:0 !important}.btn:not(button),.cbi-button{font-size:.8rem}}@media screen and (max-width:768px){body{font-size:.8rem}.cbi-progressbar::after{font-size:.5rem;line-height:1.5}.main-left{position:fixed;z-index:100;width:0}.main-right{width:100%}.showSide{padding:.1rem;position:relative;z-index:99;display:inline-block !important}.showSide::before{font-family:'argon' !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\e20e";font-size:1.7rem}header>.fill>.container>.brand{display:inline-block}.main>.main-left>.nav>li>a,.main>.main-left>.nav>.slide>.menu,.main>.main-left>.nav>li>[data-title="Logout"]{font-size:1.2rem !important}.main>.main-left>.nav>.slide>.slide-menu>li>a{font-size:.8rem}}@media screen and (max-width:600px){.mobile-hide{display:none}#maincontent>.container{margin:0 1rem 1rem 1rem}.cbi-value-title{text-align:left}[data-page="admin-system-flash"] legend{padding:1rem 0 1rem 1rem}[data-page="admin-system-flash"] .cbi-section-descr{padding:1rem 0 1rem 1rem}[data-page="admin-system-flash"] .cbi-value{padding:0 1rem}[data-page="admin-network-dhcp"] [data-tab-active="true"]{padding:1rem 1rem !important}.cbi-dynlist p{padding:.5rem 1rem}body{overflow-x:hidden}.node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field{width:16rem}.node-main-login footer{display:none}.tabs::-webkit-scrollbar,.cbi-tabmenu::-webkit-scrollbar{width:0px;height:0px}.cbi-value-field,.cbi-value-description{display:block !important;padding-left:0 !important;padding-right:0 !important}[data-page="admin-system-admin-password"] .cbi-value-field{display:table-cell !important}.modal.cbi-modal{max-width:100%;max-height:none}.modal{display:flex;align-items:center;flex-wrap:wrap;width:100%;min-width:270px;max-width:600px;min-height:32px;margin:5em auto;padding:1em;border-radius:3px !important;background:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12)}.cbi-dropdown[open]>ul.dropdown{left:.2rem !important;right:0 !important;margin-bottom:1rem}}@media screen and (min-width:600px){::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar,::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-thumb{background:#9e9e9e}::-webkit-scrollbar-thumb:hover{background:#757575}::-webkit-scrollbar-thumb:active{background:#424242}}@media screen and (max-width:480px){.mobile-hide{display:none}.login-page .login-container{margin-left:0rem !important;width:100%}.login-page .login-container .login-form .form-login .input-group::before{color:#525461}.login-page .login-container .login-form .form-login .input-group input{color:#525461;border-bottom:white 1px solid;border-bottom:var(--white) 1px solid;border-radius:0}} \ No newline at end of file diff --git a/htdocs/luci-static/argon/css/dark.css b/htdocs/luci-static/argon/css/dark.css index 6a1cc07..1c17ff7 100644 --- a/htdocs/luci-static/argon/css/dark.css +++ b/htdocs/luci-static/argon/css/dark.css @@ -1,627 +1 @@ -/** - * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template - * - * luci-theme-argon - * Copyright 2020 Jerryk - * - * Have a bug? Please create an issue here on GitHub! - * https://github.com/jerrykuku/luci-theme-argon/issues - * - * luci-theme-bootstrap: - * Copyright 2008 Steven Barth - * Copyright 2008 Jo-Philipp Wich - * Copyright 2012 David Menting - * - * MUI: - * https://github.com/muicss/mui - * - * luci-theme-material: - * https://github.com/LuttyYang/luci-theme-material/ - * - * Agron Theme - * https://demos.creative-tim.com/argon-dashboard/index.html - * - * Login background - * https://unsplash.com/ - * - * Licensed to the public under the Apache License 2.0 - */ -body { - background: #1e1e1e; - color: #cccccc; -} -.login-page .login-container .login-form { - background-color: #1e1e1e; -} -.login-page .login-container .login-form .brand { - color: #adb5bd; -} -.login-page .login-container .login-form .form-login .input-group::before { - color: #adb5bd; -} -.login-page .login-container .login-form .form-login .input-group input { - background-color: transparent !important; - color: #adb5bd; - border-bottom: #adb5bd 1px solid !important; - border-radius: 0 !important; - border-top: none !important; - border-left: none !important; - border-right: none !important; - box-shadow: none; -} -.login-page .login-container .login-form .form-login .cbi-button-apply { - background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); -} -.login-page .login-container .login-form .form-login .cbi-button-apply:hover, -.login-page .login-container .login-form .form-login .cbi-button-apply:focus { - background-image: linear-gradient(-135deg, #554c8a 0%, #483d8b 100%); -} -header::after { - background-color: #1e1e1e !important; -} -.main .main-left { - background-color: #333333 !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15); -} -.main .main-left .sidenav-header .brand { - color: #ccc; -} -.main .main-left .nav .slide .slide-menu .active a { - color: #cccccc; -} -.main .main-left .nav .slide .slide-menu .active a::after { - background-color: #cccccc !important; -} -.main .main-left .nav .slide .slide-menu li a { - color: #cccccc; -} -.main .main-left .nav .slide .slide-menu li a:hover { - background: none !important; -} -.main .main-left .nav .slide .menu.active { - background-color: darkslateblue !important; - color: #cccccc !important; -} -.main .main-left .nav .slide .menu.active a::after { - background-color: #cccccc !important; -} -.main .main-left .nav li a { - color: #cccccc !important; -} -.main .main-left .nav li a:hover { - background-color: darkslateblue !important; - color: #cccccc !important; -} -.main .main-left::-webkit-scrollbar-thumb { - background-color: #252526 !important; -} -.main .main-left::-webkit-scrollbar-track { - background-color: #333; -} -.main .main-right { - background-color: #1e1e1e; -} -h2 { - color: #ccc; - background: #333333; -} -h3 { - color: #ccc; - border-bottom: 0; - background: #333333; -} -a:-webkit-any-link { - color: -webkit-link; - cursor: pointer; - color: darkslateblue; -} -input:-webkit-autofill { - background-color: #3c3c3c !important; -} -.cbi-value-field .cbi-input-apply, -.cbi-button-apply, -.cbi-button-edit { - color: #fff !important; - background-color: darkslateblue !important; - border-color: darkslateblue !important; -} -.cbi-section em { - color: #ccc; -} -header.bg-primary { - background-color: #1e1e1e !important; -} -.cbi-map-descr { - color: #ccc; -} -.cbi-section { - background: none; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); -} -.panel-title { - color: #ccc; - background-color: #333333; - border-bottom: 0px; -} -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tr:nth-of-type(2n) { - background-color: #252526; -} -table > tbody > tr > td, -table > tfoot > tr > td, -table > thead > tr > td { - color: #ccc; -} -fieldset > table > tbody > tr:nth-of-type(2n) { - background-color: #252526; -} -table > tbody > tr > td, -table > tfoot > tr > td, -table > thead > tr > td { - border-top: 1px solid #252526; -} -#swaptotal > div > div, -#swapfree > div > div, -#memfree > div > div, -#membuff > div > div, -#conns > div > div, -#memtotal > div > div { - background-color: #32325d !important; -} -#swaptotal > div > div > div > small, -#swapfree > div > div > div > small, -#memfree > div > div > div > small, -#membuff > div > div > div > small, -#conns > div > div > div > small, -#memtotal > div > div > div > small { - color: #ccc !important; -} -.node-system-packages > .main .cbi-section-node:first-child .cbi-value-last { - line-height: 1.8em; -} -.node-system-packages > .main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] { - border: 1px solid #999999 !important; - background-color: transparent !important; -} -.node-system-packages > .main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] div { - background-color: #32325d !important; -} -table > tbody > tr > th, -table > tfoot > tr > th, -table > thead > tr > th { - background-color: #252526; - border-bottom: black 1px solid !important; -} -tr > td, -tr > th, -.tr > .td, -.tr > .th, -.cbi-section-table-row::before, -#cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) { - border-top: 0; -} -.cbi-rowstyle-2 { - background-color: #1e1e1e; -} -.cbi-rowstyle-1 { - background-color: #252526; -} -.cbi-section > h3:first-child, -.panel-title, -h3 { - color: #ccc; - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -h4 { - background-color: #1e1e1f; -} -.cbi-progressbar { - position: relative; - min-width: 170px; - height: 20px; - margin: 6px 0; - border: thin solid #999; - background: transparent; - border-radius: 0.2rem; - overflow: hidden; -} -.cbi-progressbar div { - background-color: #32325d !important; -} -.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - background-color: #1e1e1f; -} -.cbi-button { - color: #ccc !important; - background-color: darkslateblue; -} -.cbi-section-node { - background: none; - border-radius: 0 0 0.375rem 0.375rem; - padding: 0rem; -} -abbr { - color: #5e72e4; -} -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tbody > .tr:nth-of-type(2n) { - background-color: #252526; -} -#content_syslog { - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); -} -#syslog { - color: #ccc; - background-color: #1e1e1e; -} -#iwsvg, -#iwsvg2, -#bwsvg { - overflow: hidden; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - background-color: #1e1e1e !important; -} -.tabs { - background-color: #252526; -} -.tabs > li[class~="active"] > a { - color: #ccc; -} -.tabs > li[class~="active"], -.tabs > li:hover { - border-bottom: 0.18751rem solid darkslateblue; - color: #ccc; - background-color: #181819; -} -.cbi-tabmenu > li > a, -.tabs > li > a { - color: #ccc; -} -.cbi-tabmenu > li > a:hover, -.tabs > li > a:hover { - color: #ccc; -} -.cbi-tabmenu > li { - background: #2d2d2d; -} -.cbi-tabmenu li[class~="cbi-tab"] a { - color: #ccc; -} -.cbi-tabmenu > li:hover { - color: #ccc; - background: #2d2d2d; -} -.cbi-tabmenu > li[class~="cbi-tab"] { - background-color: #181819; -} -.cbi-tabcontainer > .cbi-value:nth-of-type(2n) { - background-color: #252526; -} -.cbi-value-title { - color: #ccc; -} -select, -input { - color: #ccc; - background-color: transparent !important; - border: 1px solid #252526; - box-shadow: none; -} -select:not([multiple="multiple"]):focus, -input:focus { - border-color: darkslateblue !important; - outline: 0; -} -select { - background-color: #1e1e1e !important; -} -#cbi-dropbear h2, -#cbi-dropbear .cbi-map-descr, -#cbi-dropbear .cbi-map-descr abbr, -#cbi-rc h2, -#cbi-rc .cbi-map-descr, -#cbi-distfeedconf h2, -#cbi-distfeedconf .cbi-map-descr, -#cbi-customfeedconf h2, -#cbi-customfeedconf .cbi-map-descr, -#cbi-download h2, -#cbi-filelist h2 { - color: #ccc !important; -} -.cbi-value-field > ul > li .ifacebadge { - background-color: #3c3c3c; -} -.cbi-section-descr { - color: #ccc; -} -.cbi-input-textarea { - background-color: #1e1e1e; - color: #ccc; -} -.cbi-section-remove:nth-of-type(2n), -.cbi-section-node:nth-of-type(2n) { - background-color: #1e1e1e; -} -.node-system-packages > .main table tr td:nth-last-child(1) { - color: #ccc; -} -.cbi-section-node .cbi-value { - padding: 1rem 1rem 0.3rem 1rem; -} -.ifacebox { - background-color: none; - border: 1px solid #1e1e1e; -} -.ifacebox-head { - color: #666; -} -.ifacebox-body { - background-color: #333; -} -.zonebadge strong { - color: #333; -} -.zonebadge > .ifacebadge { - background-color: #3c3c3c; -} -div.cbi-value var, -td.cbi-value-field var { - color: #5e72e4; -} -#diag-rc-output > pre { - color: #ccc; - background-color: #1e1e1e; -} -.node-services-vssr .block { - background-color: #3c3c3c !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); -} -.node-services-vssr .block h4 { - color: #ccc !important; -} -.node-services-vssr .status-bar { - color: #ccc; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - background-color: #1e1e1e; -} -.node-services-vssr .cbi-section-table-row { - color: #ccc; - background-color: #3c3c3c !important; - box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); -} -.node-services-vssr .cbi-section-table-row.fast { - background: darkslateblue !important; - color: #fff; -} -.node-services-vssr .ssr-button { - color: #ccc; -} -.node-services-vssr .incon:nth-child(2) { - border-right: #1e1e1e 1px solid; -} -#xhr_poll_status > .label.success { - color: #ccc !important; - background-color: darkolivegreen !important; -} -.notice { - background-color: darkslateblue !important; -} -.cbi-input-find, -.cbi-input-save, -.cbi-button-add, -.cbi-button-save, -.cbi-button-find, -.cbi-input-reload, -.cbi-button-reload { - color: #fff !important; - background: darkolivegreen !important; - border-color: darkolivegreen !important; -} -.cbi-button-reset, -.cbi-input-remove { - color: #fff !important; - background-color: darkorange !important; - border-color: darkorange !important; -} -.cbi-page-actions .cbi-button-apply, -.cbi-section-actions .cbi-button-edit, -.cbi-button-edit.important, -.cbi-button-apply.important, -.cbi-button-reload.important, -.cbi-button-action.important { - border: 1px darkslateblue solid !important; -} -.btn[value="Dismiss"], -.cbi-button[value="Terminate"], -.cbi-button[value="Reset"], -.cbi-button[value="Disabled"], -.cbi-button[onclick^="iface_reconnect"], -.cbi-button[onclick="handleReset(event)"], -.cbi-button-neutral[value="Disable"] { - font-weight: normal; - color: #fff; - border: thin solid darkorange!important; - background-color: darkorange!important; -} -fieldset[id^="cbi-apply-"] { - background-color: #333333; -} -#detail-bubble > div { - border: 1px solid #ccc; - border-radius: 2px; - padding: 5px; - background: #252525; -} -.ifacebox-head.active { - background-color: #32325d !important; -} -header .fill .status span[data-style="active"] { - color: #ccc !important; - background-color: darkolivegreen !important; -} -#cbi-wireless .td, -#cbi-network .tr:first-child > .td, -.table[width="100%"] > .tr:first-child > .td, -[data-page="admin-network-diagnostics"] .tr > .td, -.tr.table-titles > .th, -.tr.cbi-section-table-titles > .th { - background-color: #252526; - border-bottom: black 1px solid !important; -} -.network-status-table .ifacebox-body .ifacebadge { - background-color: #252526; - border-bottom: 0; - box-shadow: none; -} -td > .ifacebadge, -.td > .ifacebadge { - background-color: darkslateblue; - border: 0; -} -.btn.danger, -.cbi-section-remove > .cbi-button, -.cbi-button-remove, -.cbi-button-reset, -.cbi-button-negative, -.cbi-button[value="Stop"], -.cbi-button[value="Kill"], -.cbi-button[onclick="reboot(this)"], -.cbi-button-neutral[value="Restart"] { - border: thin solid darkorange !important; - background-color: darkorange !important; -} -.cbi-section, -.cbi-section-error, -#iptables, -.Firewall form, -#cbi-network > .cbi-section-node, -#cbi-wireless > .cbi-section-node, -#cbi-wireless > #wifi_assoclist_table, -[data-tab-title], -[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), -[data-page="admin-system-opkg"] #maincontent > .container { - background: #1e1e1e !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); -} -div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { - background: transparent !important; -} -[data-page="admin-system-admin"] .cbi-map h2, -[data-page="admin-system-admin-password"] .cbi-map h2, -[data-page="admin-system-admin"] .cbi-map .cbi-map-descr, -[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { - color: #ccc; -} -[data-page="admin-system-flash"] .modal label > input[type="checkbox"] { - top: -0.35rem; -} -[data-page="admin-system-flash"] .modal .btn { - white-space: normal !important; - background-color: darkseagreen; -} -[data-page="admin-system-flash"] .modal .alert-message { - background-color: transparent !important; -} -[data-page="admin-system-flash"] .modal .danger { - border: thin solid darkorange !important; - background-color: darkorange !important; -} -.cbi-value input[type="password"] + .cbi-button-neutral { - background-color: darkslateblue !important; -} -.btn, -button, -select, -input, -.cbi-dropdown { - border: 1px solid #3c3c3c !important; -} -.cbi-dropdown .preview { - color: #ccc; -} -.cbi-section-table-row { - background-color: #1e1e1e !important; -} -.modal { - background-color: #1e1e1e; -} -.cbi-button-positive { - color: #fff !important; - background-color: darkolivegreen !important; -} -[data-page="admin-system-flash"] legend { - color: #ccc; -} -.logout:before { - color: #adb5bd !important; -} -.cbi-dropdown[open] { - border-color: darkslateblue !important; -} -.cbi-dropdown[open] > ul.dropdown { - background: #252526 !important; - color: #ccc !important; - box-shadow: none; - border: 1px solid #3c3c3c !important; -} -.cbi-dropdown[open] > ul.dropdown li { - color: #ccc; - border-bottom: 1px solid #3c3c3c !important; -} -.cbi-dropdown[open] > ul.dropdown > li[selected] { - background-color: darkslateblue !important; - border-bottom: 1px solid #3c3c3c !important; -} -.cbi-dropdown[open] > ul.dropdown > li.focus { - background: darkslateblue; - outline: none; -} -.ifacebadge { - background-color: #333333; -} -.cbi-dynlist > .item > span { - border: 1px solid #3c3c3c !important; -} -.cbi-page-actions .cbi-button-apply, -.cbi-section-actions .cbi-button-edit, -.cbi-button-edit, -.cbi-button-apply, -.cbi-button-reload, -.cbi-button-action, -.cbi-button[value="Submit"], -.cbi-button[value="Upload"], -.cbi-button[value$="Apply"], -.cbi-button[onclick="addKey(event)"] { - background: darkslateblue !important; -} -.btn.primary, -.cbi-page-actions .cbi-button-save, -.cbi-page-actions .cbi-button-apply + .cbi-button-save, -.cbi-button-add, -.cbi-button-save, -.cbi-button-positive, -.cbi-button-link, -.cbi-button[value="Enable"], -.cbi-button[value="Scan"], -.cbi-button[value^="Back"], -.cbi-button-neutral[onclick="handleConfig(event)"] { - background: darkslateblue; -} -[data-page="admin-system-opkg"] h2 { - color: #ccc !important; -} -@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { - .login-page .login-container .login-form { - -webkit-backdrop-filter: blur(var(--blur-radius-dark)); - backdrop-filter: blur(var(--blur-radius-dark)); - background-color: rgba(0, 0, 0, var(--blur-opacity-dark)); - } -} -@media screen and (max-width: 480px) { - .node-status-iptables > .main div > .cbi-map > form { - background-color: #1e1e1e; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } -} +body{background:#1e1e1e;color:#cccccc}.login-page .login-container .login-form{background-color:#1e1e1e}.login-page .login-container .login-form .brand{color:#adb5bd}.login-page .login-container .login-form .form-login .input-group::before{color:#adb5bd}.login-page .login-container .login-form .form-login .input-group input{background-color:transparent !important;color:#adb5bd;border-bottom:#adb5bd 1px solid !important;border-radius:0 !important;border-top:none !important;border-left:none !important;border-right:none !important;box-shadow:none}.login-page .login-container .login-form .form-login .cbi-button-apply{background-color:#483d8b !important;background-color:var(--dark-primary) !important}.login-page .login-container .login-form .form-login .cbi-button-apply:hover,.login-page .login-container .login-form .form-login .cbi-button-apply:focus{opacity:.9}header::after{background-color:#1e1e1e !important}.main .main-left{background-color:#333333 !important;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.15)}.main .main-left .sidenav-header .brand{color:#ccc}.main .main-left .nav .slide .slide-menu .active a{color:#cccccc}.main .main-left .nav .slide .slide-menu .active a::after{background-color:#cccccc !important}.main .main-left .nav .slide .slide-menu li a{color:#cccccc}.main .main-left .nav .slide .slide-menu li a:hover{background:none !important}.main .main-left .nav .slide .menu.active{background-color:#483d8b !important;background-color:var(--dark-primary) !important;color:#cccccc !important}.main .main-left .nav .slide .menu.active a::after{background-color:#cccccc !important}.main .main-left .nav li a{color:#cccccc !important}.main .main-left .nav li a:hover{background-color:#483d8b !important;background-color:var(--dark-primary) !important;color:#cccccc !important}.main .main-left::-webkit-scrollbar-thumb{background-color:#252526 !important}.main .main-left::-webkit-scrollbar-track{background-color:#333}.main .main-right{background-color:#1e1e1e}h2{color:#ccc;background:#333333}h3{color:#ccc;border-bottom:0;background:#333333}a:-webkit-any-link{color:-webkit-link;cursor:pointer;color:#483d8b;color:var(--dark-primary)}input:-webkit-autofill{background-color:#3c3c3c !important}.cbi-value-field .cbi-input-apply,.cbi-button-apply,.cbi-button-edit{color:#fff !important;background-color:#483d8b !important;background-color:var(--dark-primary) !important;border-color:#483d8b !important;border-color:var(--dark-primary) !important}.cbi-section em{color:#ccc}header.bg-primary{background-color:#1e1e1e !important}.cbi-map-descr{color:#ccc}.cbi-section{background:none;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}.panel-title{color:#ccc;background-color:#333333;border-bottom:0px}div>table>tbody>tr:nth-of-type(2n),div>.table>.tr:nth-of-type(2n){background-color:#252526}table>tbody>tr>td,table>tfoot>tr>td,table>thead>tr>td{color:#ccc}fieldset>table>tbody>tr:nth-of-type(2n){background-color:#252526}table>tbody>tr>td,table>tfoot>tr>td,table>thead>tr>td{border-top:1px solid #252526}#swaptotal>div>div,#swapfree>div>div,#memfree>div>div,#membuff>div>div,#conns>div>div,#memtotal>div>div{background-color:#32325d !important}#swaptotal>div>div>div>small,#swapfree>div>div>div>small,#memfree>div>div>div>small,#membuff>div>div>div>small,#conns>div>div>div>small,#memtotal>div>div>div>small{color:#ccc !important}.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last{line-height:1.8em}.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"]{border:1px solid #999999 !important;background-color:transparent !important}.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] div{background-color:#32325d !important}table>tbody>tr>th,table>tfoot>tr>th,table>thead>tr>th{background-color:#252526;border-bottom:black 1px solid !important}tr>td,tr>th,.tr>.td,.tr>.th,.cbi-section-table-row::before,#cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2){border-top:0}.cbi-rowstyle-2{background-color:#1e1e1e}.cbi-rowstyle-1{background-color:#252526}.cbi-section>h3:first-child,.panel-title,h3{color:#ccc;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}h4{background-color:#1e1e1f}.cbi-progressbar{position:relative;min-width:170px;height:20px;margin:6px 0;border:thin solid #999;background:transparent;border-radius:.2rem;overflow:hidden}.cbi-progressbar div{background-color:#32325d !important}.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell{background-color:#1e1e1f}.cbi-button{color:#ccc !important;background-color:#483d8b;background-color:var(--dark-primary)}.cbi-section-node{background:none;border-radius:0 0 .375rem .375rem;padding:0rem}abbr{color:#5e72e4}div>table>tbody>tr:nth-of-type(2n),div>.table>.tbody>.tr:nth-of-type(2n){background-color:#252526}#content_syslog{box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}#syslog{color:#ccc;background-color:#1e1e1e}#iwsvg,#iwsvg2,#bwsvg{overflow:hidden;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35);background-color:#1e1e1e !important}.tabs{background-color:#252526}.tabs>li[class~="active"]>a{color:#ccc}.tabs>li[class~="active"],.tabs>li:hover{border-bottom:.18751rem solid #483d8b;border-bottom:.18751rem solid var(--dark-primary);color:#ccc;background-color:#181819}.cbi-tabmenu>li>a,.tabs>li>a{color:#ccc}.cbi-tabmenu>li>a:hover,.tabs>li>a:hover{color:#ccc}.cbi-tabmenu>li{background:#2d2d2d}.cbi-tabmenu li[class~="cbi-tab"] a{color:#ccc}.cbi-tabmenu>li:hover{color:#ccc;background:#2d2d2d}.cbi-tabmenu>li[class~="cbi-tab"]{background-color:#181819}.cbi-tabcontainer>.cbi-value:nth-of-type(2n){background-color:#252526}.cbi-value-title{color:#ccc}select,input{color:#ccc;background-color:transparent !important;border:1px solid #252526;box-shadow:none}select:not([multiple="multiple"]):focus,input:focus{border-color:#483d8b !important;border-color:var(--dark-primary) !important;outline:0}select{background-color:#1e1e1e !important}#cbi-dropbear h2,#cbi-dropbear .cbi-map-descr,#cbi-dropbear .cbi-map-descr abbr,#cbi-rc h2,#cbi-rc .cbi-map-descr,#cbi-distfeedconf h2,#cbi-distfeedconf .cbi-map-descr,#cbi-customfeedconf h2,#cbi-customfeedconf .cbi-map-descr,#cbi-download h2,#cbi-filelist h2{color:#ccc !important}.cbi-value-field>ul>li .ifacebadge{background-color:#3c3c3c}.cbi-section-descr{color:#ccc}.cbi-input-textarea{background-color:#1e1e1e;color:#ccc}.cbi-section-remove:nth-of-type(2n),.cbi-section-node:nth-of-type(2n){background-color:#1e1e1e}.node-system-packages>.main table tr td:nth-last-child(1){color:#ccc}.cbi-section-node .cbi-value{padding:1rem 1rem .3rem 1rem}.ifacebox{background-color:none;border:1px solid #1e1e1e}.ifacebox-head{color:#666}.ifacebox-body{background-color:#333}.zonebadge strong{color:#333}.zonebadge>.ifacebadge{background-color:#3c3c3c}div.cbi-value var,td.cbi-value-field var{color:#5e72e4}#diag-rc-output>pre{color:#ccc;background-color:#1e1e1e}.node-services-vssr .block{background-color:#3c3c3c !important;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}.node-services-vssr .block h4{color:#ccc !important}.node-services-vssr .status-bar{color:#ccc;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35);background-color:#1e1e1e}.node-services-vssr .cbi-section-table-row{color:#ccc;background-color:#3c3c3c !important;box-shadow:0 0 5px 0 rgba(0,0,0,0.35)}.node-services-vssr .cbi-section-table-row.fast{background:#483d8b !important;background:var(--dark-primary) !important;color:#fff}.node-services-vssr .ssr-button{color:#ccc}.node-services-vssr .incon:nth-child(2){border-right:#1e1e1e 1px solid}#xhr_poll_status>.label.success{color:#ccc !important;background-color:darkolivegreen !important}.notice{background-color:#483d8b !important;background-color:var(--dark-primary) !important}.cbi-input-find,.cbi-input-save,.cbi-button-add,.cbi-button-save,.cbi-button-find,.cbi-input-reload,.cbi-button-reload{color:#fff !important;background:darkolivegreen !important;border-color:darkolivegreen !important}.cbi-button-reset,.cbi-input-remove{color:#fff !important;background-color:darkorange !important;border-color:darkorange !important}.cbi-page-actions .cbi-button-apply,.cbi-section-actions .cbi-button-edit,.cbi-button-edit.important,.cbi-button-apply.important,.cbi-button-reload.important,.cbi-button-action.important{border:1px #483d8b solid !important;border:1px var(--dark-primary) solid !important}.btn[value="Dismiss"],.cbi-button[value="Terminate"],.cbi-button[value="Reset"],.cbi-button[value="Disabled"],.cbi-button[onclick^="iface_reconnect"],.cbi-button[onclick="handleReset(event)"],.cbi-button-neutral[value="Disable"]{font-weight:normal;color:#fff;border:thin solid darkorange !important;background-color:darkorange !important}fieldset[id^="cbi-apply-"]{background-color:#333333}#detail-bubble>div{border:1px solid #ccc;border-radius:2px;padding:5px;background:#252525}.ifacebox-head.active{background-color:#32325d !important}header .fill .status span[data-style="active"]{color:#ccc !important;background-color:darkolivegreen !important}#cbi-wireless .td,#cbi-network .tr:first-child>.td,.table[width="100%"]>.tr:first-child>.td,[data-page="admin-network-diagnostics"] .tr>.td,.tr.table-titles>.th,.tr.cbi-section-table-titles>.th{background-color:#252526;border-bottom:black 1px solid !important}.network-status-table .ifacebox-body .ifacebadge{background-color:#252526;border-bottom:0;box-shadow:none}td>.ifacebadge,.td>.ifacebadge{background-color:#483d8b;background-color:var(--dark-primary);border:0}.btn.danger,.cbi-section-remove>.cbi-button,.cbi-button-remove,.cbi-button-reset,.cbi-button-negative,.cbi-button[value="Stop"],.cbi-button[value="Kill"],.cbi-button[onclick="reboot(this)"],.cbi-button-neutral[value="Restart"]{border:thin solid darkorange !important;background-color:darkorange !important}.cbi-section,.cbi-section-error,#iptables,.Firewall form,#cbi-network>.cbi-section-node,#cbi-wireless>.cbi-section-node,#cbi-wireless>#wifi_assoclist_table,[data-tab-title],[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),[data-page="admin-system-opkg"] #maincontent>.container{background:#1e1e1e !important;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}div[style="width:100%;height:300px;border:1px solid #000;background:#fff"]{background:transparent !important}[data-page="admin-system-admin"] .cbi-map h2,[data-page="admin-system-admin-password"] .cbi-map h2,[data-page="admin-system-admin"] .cbi-map .cbi-map-descr,[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr{color:#ccc}[data-page="admin-system-flash"] .modal label>input[type="checkbox"]{top:-0.35rem}[data-page="admin-system-flash"] .modal .btn{white-space:normal !important;background-color:darkseagreen}[data-page="admin-system-flash"] .modal .alert-message{background-color:transparent !important}[data-page="admin-system-flash"] .modal .danger{border:thin solid darkorange !important;background-color:darkorange !important}.cbi-value input[type="password"]+.cbi-button-neutral{background-color:#483d8b !important;background-color:var(--dark-primary) !important}.btn,button,select,input,.cbi-dropdown{border:1px solid #3c3c3c !important}.cbi-dropdown .preview{color:#ccc}.cbi-section-table-row{background-color:#1e1e1e !important}.modal{background-color:#1e1e1e}.cbi-button-positive{color:#fff !important;background-color:darkolivegreen !important}[data-page="admin-system-flash"] legend{color:#ccc}.logout:before{color:#adb5bd !important}.cbi-dropdown[open]{border-color:#483d8b !important;border-color:var(--dark-primary) !important}.cbi-dropdown[open]>ul.dropdown{background:#252526 !important;color:#ccc !important;box-shadow:none;border:1px solid #3c3c3c !important}.cbi-dropdown[open]>ul.dropdown li{color:#ccc;border-bottom:1px solid #3c3c3c !important}.cbi-dropdown[open]>ul.dropdown>li[selected]{background-color:#483d8b !important;background-color:var(--dark-primary) !important;border-bottom:1px solid #3c3c3c !important}.cbi-dropdown[open]>ul.dropdown>li.focus{background:#483d8b;background:var(--dark-primary);outline:none}.ifacebadge{background-color:#333333}.cbi-dynlist>.item>span{border:1px solid #3c3c3c !important}.cbi-page-actions .cbi-button-apply,.cbi-section-actions .cbi-button-edit,.cbi-button-edit,.cbi-button-apply,.cbi-button-reload,.cbi-button-action,.cbi-button[value="Submit"],.cbi-button[value="Upload"],.cbi-button[value$="Apply"],.cbi-button[onclick="addKey(event)"]{background:#483d8b !important;background:var(--dark-primary) !important}.btn.primary,.cbi-page-actions .cbi-button-save,.cbi-page-actions .cbi-button-apply+.cbi-button-save,.cbi-button-add,.cbi-button-save,.cbi-button-positive,.cbi-button-link,.cbi-button[value="Enable"],.cbi-button[value="Scan"],.cbi-button[value^="Back"],.cbi-button-neutral[onclick="handleConfig(event)"]{background:#483d8b;background:var(--dark-primary)}[data-page="admin-system-opkg"] h2{color:#ccc !important}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.login-page .login-container .login-form{-webkit-backdrop-filter:blur(var(--blur-radius-dark));backdrop-filter:blur(var(--blur-radius-dark));background-color:rgba(0, 0, 0, var(--blur-opacity-dark))}}@media screen and (max-width:480px){.node-status-iptables>.main div>.cbi-map>form{background-color:#1e1e1e;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}} \ No newline at end of file diff --git a/htdocs/luci-static/argon/js/script.js b/htdocs/luci-static/argon/js/script.js index e13b568..2a673ce 100644 --- a/htdocs/luci-static/argon/js/script.js +++ b/htdocs/luci-static/argon/js/script.js @@ -89,6 +89,11 @@ document.addEventListener('luci-loaded', function(ev) { $(".main > .main-left > .nav > .slide > .menu").click(function () { var ul = $(this).next(".slide-menu"); var menu = $(this); + $(".main > .main-left > .nav > .slide > .menu").each(function () { + var ulNode = $(this); + ulNode.removeClass("active"); + ulNode.next(".slide-menu").stop(true).slideUp("fast") + }); if (!ul.is(":visible")) { menu.addClass("active"); ul.addClass("active"); diff --git a/htdocs/luci-static/argon/less/cascade.less b/htdocs/luci-static/argon/less/cascade.less index 96e3864..d9da93d 100644 --- a/htdocs/luci-static/argon/less/cascade.less +++ b/htdocs/luci-static/argon/less/cascade.less @@ -1,4 +1,4 @@ -// out: ../css/cascade.css, compress: false , sourceMap: false +// out: ../css/cascade.css, compress: true , sourceMap: false /** * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * @@ -30,6 +30,8 @@ @import url("pure-min.css?v=1"); :root { + --primary: #5e72e4; + --dark-primary: #483d8b; --main-color: #09c; --header-bg: #09c; --header-color: #fff; @@ -40,7 +42,6 @@ --main-menu-color: #202124; --submenu-bg-hover: #d4d4d4; --submenu-bg-hover-active: #09c; - --blue: #5e72e4; --indigo: #5603ad; --purple: #8965e0; @@ -56,7 +57,6 @@ --gray-dark: #32325d; --light: #ced4da; --lighter: #e9ecef; - --primary: #5e72e4; --secondary: #f7fafc; --success: #2dce89; --info: #11cdef; @@ -105,6 +105,7 @@ body { background-color: var(--background-color); color: #32325d; color: var(--gray-dark); + overflow: hidden; } * { @@ -333,6 +334,7 @@ abbr { cursor: help; text-decoration: underline; color: #5e72e4; + color: var(--primary); } hr { @@ -352,11 +354,6 @@ hr { .login-page { height: 100%; - background-image: url(../img/blank.png); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all 0.5s; .video { position: absolute; @@ -368,15 +365,13 @@ hr { background-color: #000; background-color: var(--darker); overflow: hidden; - pointer-events: none; - video { width: 100%; height: auto; } } - .volume-control { + .volume-control{ position: fixed; right: 1rem; top: 1rem; @@ -386,8 +381,7 @@ hr { cursor: pointer; background-size: contain; background-image: url(../img/volume_high.svg); - - &.mute { + &.mute{ background-image: url(../img/volume_off.svg); } } @@ -432,7 +426,8 @@ hr { width: 100%; min-height: 100%; max-width: 420px; - background-color: rgb(255, 255, 255); + background-color: #fff; + background-color: var(--white); .brand { display: flex; @@ -440,6 +435,7 @@ hr { align-items: center; margin: 50px auto 100px 50px; color: #525461; + color: var(--default); .icon { width: 50px; @@ -485,6 +481,7 @@ hr { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #525461; + color: var(--default); font-size: 1.5rem; position: absolute; z-index: 100; @@ -498,6 +495,7 @@ hr { height: 1px; bottom: 0; border-bottom: 1px #5e72e4 solid; + border-bottom: 1px var(--primary) solid; transform: scaleX(0); transition: transform 0.3s; } @@ -512,9 +510,11 @@ hr { box-sizing: border-box; transition: all .3s cubic-bezier(.68, -.55, .265, 1.55); color: #525461; + color:var(--default); border: 0; border-radius: 0; border-bottom: 1px solid #fff; + border-bottom: 1px solid var(--white); background-color: transparent; background-clip: padding-box; box-shadow: 0 3px 2px rgba(233, 236, 239, .05); @@ -546,12 +546,14 @@ hr { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px; font-weight: 600; font-size: 15px; - color: rgb(255, 255, 255); + color: #fff; + color: var(--white); text-align: center; width: 100%; cursor: pointer; min-height: 50px; background-color: #5e72e4 !important; + background-color: var(--primary) !important; border-radius: 6px; outline: none; border-width: initial; @@ -560,12 +562,12 @@ hr { border-image: initial; padding: 10px 0px; margin: 30px 0px 100px; - transition: all 0.3s; + transition: all 0.3s !important; letter-spacing: 0.8rem; &:hover, :focus { - background-color: #5065d8 !important; + opacity: 0.9; } } } @@ -579,10 +581,12 @@ hr { justify-content: space-evenly; margin-top: auto; padding: 0px 0px 30px; - color: #525461; z-index: 10; - - .ftc { + color: #525461; + color: var(--default); + position: absolute; + bottom: 0; + .ftc{ position: absolute; bottom: 30px; width: 100%; @@ -595,7 +599,6 @@ hr { } } - @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .login-page .login-container .login-form { -webkit-backdrop-filter: blur(var(--blur-radius)); @@ -663,6 +666,7 @@ small { .brand { font-size: 1.8rem; color: #5e72e4; + color: var(--primary); font-family: "TypoGraphica"; text-decoration: none; text-align: center; @@ -732,6 +736,7 @@ header { height: 2rem; width: 100%; background-color: #5e72e4 !important; + background-color: var(--primary) !important; } .fill { @@ -895,6 +900,62 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { .nav { margin-top: 0.5rem; + >li>a:first-child { + display: block; + margin: 0.1rem .5rem 0.1rem .5rem; + padding: .675rem 0 .675rem 2.5rem; + border-radius: .375rem; + text-decoration: none; + cursor: default; + font-size: 1rem; + transition: all 0.2s; + position: relative; + + &.active { + color: #fff; + background: #5e72e4; + background: var(--primary); + + &::before { + color: #fff !important; + } + + &::after { + transform: rotate(90deg); + color: #fff !important; + } + } + + &:hover { + cursor: pointer; + color: #fff; + background: #5e72e4; + background: var(--primary); + + &::before { + color: #fff !important; + } + } + + &::before { + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + left: 0.8rem; + padding-top: 3px; + transition: all 0.3s; + content: "\e915"; + color: #5e72e4; + color: var(--primary); + } + } + li { padding: 0.5rem 1rem; cursor: pointer; @@ -902,6 +963,7 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { -moz-user-select: none; -ms-user-select: none; user-select: none; + padding: 0; a { display: block; @@ -916,140 +978,7 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { display: none; } - .menu { - display: block; - margin: 0.1rem .5rem 0.1rem .5rem; - padding: .675rem 0 .675rem 2.5rem; - border-radius: .375rem; - text-decoration: none; - cursor: default; - font-size: 1rem; - transition: all 0.2s; - position: relative; - &.active { - color: #fff; - background: #5e72e4; - background: var(--primary); - - &::before { - color: #fff !important; - } - - &::after { - transform: rotate(90deg); - color: #fff !important; - } - } - - &:hover { - cursor: pointer; - color: #fff; - background: #5e72e4; - background: var(--primary); - - &::before { - color: #fff !important; - } - } - - &::before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - left: 0.8rem; - padding-top: 3px; - transition: all 0.3s; - content: "\e915"; - color: #5e72e4; - } - - &::after { - position: absolute; - right: 0.5rem; - top: 0.8rem; - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - content: '\e90f'; - transition: all .15s ease; - color: #ced4da; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - transition: all 0.3s; - } - } - - .menu[data-title=Status]:before { - content: "\e906"; - color: #5e72e4; - } - - .menu[data-title=System]:before { - content: "\e90a"; - color: #fb6340; - } - - .menu[data-title=Services]:before { - content: "\e909"; - color: #11cdef; - } - - .menu[data-title=NAS]:before { - content: "\e90c"; - color: #f3a4b5; - } - - .menu[data-title=VPN]:before { - content: "\e90b"; - color: #8965e0; - } - - .menu[data-title=Network]:before { - content: "\e908"; - color: #8965e0; - } - - .menu[data-title=Bandwidth_Monitor]:before { - content: "\e90d"; - color: #2dce89; - } - - .menu[data-title=Docker]:before { - content: "\e911"; - color: #6699ff; - } - - .menu[data-title=Statistics]:before { - content: "\e913"; - color: #8965e0; - } - - .menu[data-title=Control]:before { - content: "\e912"; - color: #5e72e4; - } - - .menu[data-title=Asterisk]:before { - content: "\e914"; - color: #fb6340; - } - - .menu[data-title=Logout]:before { - content: "\e907"; - color: #adb5bd; - } &:hover { background: none; @@ -1065,6 +994,7 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { margin: 0.2rem 0; padding: 0.5rem 0rem; background: none; + list-style: none; a { white-space: nowrap; @@ -1079,6 +1009,7 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { width: 0; height: 2px; background-color: #5e72e4; + background-color: var(--primary); transition: all 0.2s; } @@ -1109,6 +1040,7 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { width: 100%; height: 2px; background-color: #5e72e4; + background-color: var(--primary); transition: all 0.2s; } @@ -1124,6 +1056,147 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { } } + + + + .menu { + display: block; + margin: 0.1rem .5rem 0.1rem .5rem; + padding: .675rem 0 .675rem 2.5rem; + border-radius: .375rem; + text-decoration: none; + cursor: default; + font-size: 1rem; + transition: all 0.2s; + position: relative; + + &.active { + color: #fff; + background: #5e72e4; + background: var(--primary); + + &::before { + color: #fff !important; + } + + &::after { + transform: rotate(90deg); + color: #fff !important; + } + } + + &:hover { + cursor: pointer; + color: #fff; + background: #5e72e4; + background: var(--primary); + + &::before { + color: #fff !important; + } + } + + &::before { + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + left: 0.8rem; + padding-top: 3px; + transition: all 0.3s; + content: "\e915"; + color: #5e72e4; + color: var(--primary); + } + + &::after { + position: absolute; + right: 0.5rem; + top: 0.8rem; + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: '\e90f'; + transition: all .15s ease; + color: #ced4da; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + transition: all 0.3s; + } + } + + + .menu[data-title=Status]:before { + content: "\e906"; + color: #5e72e4; + color: var(--primary); + } + + .menu[data-title=System]:before { + content: "\e90a"; + color: #fb6340; + } + + .menu[data-title=Services]:before { + content: "\e909"; + color: #11cdef; + } + + .menu[data-title=NAS]:before { + content: "\e90c"; + color: #f3a4b5; + } + + .menu[data-title=VPN]:before { + content: "\e90b"; + color: #8965e0; + } + + .menu[data-title=Network]:before { + content: "\e908"; + color: #8965e0; + } + + .menu[data-title=Bandwidth_Monitor]:before { + content: "\e90d"; + color: #2dce89; + } + + .menu[data-title=Docker]:before { + content: "\e911"; + color: #6699ff; + } + + .menu[data-title=Statistics]:before { + content: "\e913"; + color: #8965e0; + } + + .menu[data-title=Control]:before { + content: "\e912"; + color: #5e72e4; + color: var(--primary); + } + + .menu[data-title=Asterisk]:before { + content: "\e914"; + color: #fb6340; + } + + a[data-title=Logout]:before { + content: "\e907"; + color: #adb5bd; + } } } } @@ -1687,13 +1760,16 @@ td>table>tbody>tr>td, li:hover { cursor: pointer; border-bottom: 0.18751rem solid #5e72e4; + border-bottom: 0.18751rem solid var(--primary); color: #5e72e4; + color: var(--primary); background-color: #dce1fe; margin-bottom: 0; border-radius: 0; a { color: #5e72e4; + color: var(--primary); } } @@ -1712,6 +1788,7 @@ td>table>tbody>tr>td, &:hover { border-bottom: 0.18751rem solid #5e72e4; + border-bottom: 0.18751rem solid var(--primary); } } } @@ -1757,7 +1834,9 @@ td>table>tbody>tr>td, &:hover { cursor: pointer; border-bottom: 0.18751rem solid #5e72e4; + border-bottom: 0.18751rem solid var(--primary); color: #5e72e4; + color: var(--primary); background-color: #dce1fe; margin-bottom: 0; @@ -1769,12 +1848,15 @@ td>table>tbody>tr>td, li[class~="cbi-tab"] { border-bottom: 0.18751rem solid #5e72e4; + border-bottom: 0.18751rem solid var(--primary); color: #5e72e4; + color: var(--primary); background-color: #dce1fe; margin-bottom: 0; a { color: #5e72e4; + color: var(--primary); } } } @@ -2080,6 +2162,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { margin: 0.25rem 0.1rem 0.25rem 0; color: #fff; border: 1px solid #5e72e4; + border: 1px solid var(--primary); border-radius: 0.25rem; outline: 0; background-image: none; @@ -2421,7 +2504,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { } .modal p { - + word-break: break-word; } @@ -2605,10 +2688,10 @@ td>.ifacebadge, min-height: 15rem; padding: 1rem; resize: none; - color: #eee; + color: #242424; border: 0; border-radius: 0.375rem; - background-color: #242424; + background-color: #ffffff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } @@ -2718,7 +2801,7 @@ td>.ifacebadge, .ifacebox-head.active { background: #5e72e4; - background: var(--bar-bg); + background: var(--primary); * { color: #fff; @@ -3082,7 +3165,7 @@ input[name="nslookup"] { } .modal { - + label>input[type="checkbox"] { top: -0.35rem; @@ -3284,8 +3367,10 @@ input[type="checkbox"] { input[type="checkbox"]:checked { border: 1px solid #5e72e4; + border: 1px solid var(--primary); background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; background-color: #5e72e4; + background-color: var(--primary); background-size: 70%; background-repeat: no-repeat; background-position: center; @@ -3728,9 +3813,10 @@ pre.command-output { display: inline-block; } + .main>.main-left>.nav>li>a, .main>.main-left>.nav>.slide>.menu, .main>.main-left>.nav>li>[data-title="Logout"] { - font-size: 1.2rem; + font-size: 1.2rem !important; } .main>.main-left>.nav>.slide>.slide-menu>li>a { @@ -3897,782 +3983,3 @@ pre.command-output { } - -@media (prefers-color-scheme: dark) { - body { - background: #1e1e1e; - color: #cccccc; - } - - .login-page .login-container { - - .login-form { - background-color: #1e1e1e; - - .brand { - color: #adb5bd; - } - - .form-login { - .input-group { - &::before { - color: #adb5bd; - } - - input { - background-color: transparent !important; - color: #adb5bd; - border-bottom: #adb5bd 1px solid !important; - border-radius: 0 !important; - border-top: none !important; - border-left: none !important; - border-right: none !important; - box-shadow: none; - } - - } - - .cbi-button-apply { - background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); - - &:hover, - &:focus { - background-image: linear-gradient(-135deg, rgb(85, 76, 138) 0%, rgb(72, 61, 139) 100%); - } - } - } - } - - } - - header::after { - background-color: #1e1e1e !important; - } - - - .main { - .main-left { - - background-color: #333333 !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .15); - - .sidenav-header .brand { - color: #ccc; - } - - .nav { - .slide { - .slide-menu { - .active { - a { - color: #cccccc; - - &::after { - background-color: #cccccc !important; - } - } - } - - li { - a { - color: #cccccc; - } - - a:hover { - background: none !important; - } - } - } - - .menu.active { - background-color: darkslateblue !important; - color: #cccccc !important; - - a::after { - background-color: #cccccc !important; - } - } - } - - li { - a { - color: #cccccc !important; - } - - a:hover { - background-color: darkslateblue !important; - color: #cccccc !important; - - - } - } - } - - - &::-webkit-scrollbar-thumb { - background-color: #252526 !important; - } - - &::-webkit-scrollbar-track { - background-color: #333; - } - } - - .main-right { - background-color: #1e1e1e; - } - } - - h2 { - color: #ccc; - background: #333333; - } - - h3 { - color: #ccc; - border-bottom: 0; - background: #333333; - } - - a:-webkit-any-link { - color: -webkit-link; - cursor: pointer; - color: darkslateblue; - } - - - input:-webkit-autofill { - background-color: #3c3c3c !important; - } - - .cbi-value-field .cbi-input-apply, - .cbi-button-apply, - .cbi-button-edit { - color: #fff !important; - background-color: darkslateblue !important; - border-color: darkslateblue !important; - } - - - .cbi-section em { - color: #ccc; - } - - - - header.bg-primary { - background-color: #1e1e1e !important; - } - - - - .cbi-map-descr { - color: #ccc; - } - - .cbi-section { - background: none; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) - } - - .panel-title { - color: #ccc; - background-color: #333333; - border-bottom: 0px; - } - - div>table>tbody>tr:nth-of-type(2n), - div>.table>.tr:nth-of-type(2n) { - background-color: #252526; - } - - table>tbody>tr>td, - table>tfoot>tr>td, - table>thead>tr>td { - color: #ccc; - } - - fieldset>table>tbody>tr:nth-of-type(2n) { - background-color: #252526; - } - - table>tbody>tr>td, - table>tfoot>tr>td, - table>thead>tr>td { - border-top: 1px solid #252526; - } - - #swaptotal>div>div, - #swapfree>div>div, - #memfree>div>div, - #membuff>div>div, - #conns>div>div, - #memtotal>div>div { - background-color: #32325d !important; - } - - #swaptotal>div>div>div>small, - #swapfree>div>div>div>small, - #memfree>div>div>div>small, - #membuff>div>div>div>small, - #conns>div>div>div>small, - #memtotal>div>div>div>small { - - color: #ccc !important; - } - - .node-system-packages>.main .cbi-section-node:first-child .cbi-value-last { - line-height: 1.8em; - - div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] { - border: 1px solid #999999 !important; - background-color: transparent !important; - - div { - background-color: #32325d !important; - } - } - - } - - - table>tbody>tr>th, - table>tfoot>tr>th, - table>thead>tr>th { - - background-color: #252526; - border-bottom: black 1px solid !important; - } - - tr>td, - tr>th, - .tr>.td, - .tr>.th, - .cbi-section-table-row::before, - #cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) { - border-top: 0; - } - - .cbi-rowstyle-2 { - background-color: #1e1e1e; - } - - .cbi-rowstyle-1 { - background-color: #252526; - } - - .cbi-section>h3:first-child, - .panel-title, - h3 { - color: #ccc; - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - h4 { - background-color: #1e1e1f; - } - - .cbi-progressbar { - position: relative; - min-width: 170px; - height: 20px; - margin: 6px 0; - border: thin solid #999; - background: transparent; - border-radius: 0.2rem; - overflow: hidden; - - div { - background-color: #32325d !important; - } - } - - .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - background-color: #1e1e1f; - } - - .cbi-button { - color: #ccc !important; - background-color: darkslateblue; - } - - .cbi-section-node { - background: none; - border-radius: 0 0 .375rem .375rem; - padding: 0rem; - } - - abbr { - color: #5e72e4; - - } - - div>table>tbody>tr:nth-of-type(2n), - div>.table>.tbody>.tr:nth-of-type(2n) { - background-color: #252526; - } - - #content_syslog { - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) - } - - #syslog { - color: #ccc; - background-color: #1e1e1e; - } - - #iwsvg, - #iwsvg2, - #bwsvg { - overflow: hidden; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); - background-color: #1e1e1e !important; - } - - .tabs { - background-color: #252526; - } - - .tabs>li[class~="active"]>a { - color: #ccc; - } - - .tabs>li[class~="active"], - .tabs>li:hover { - border-bottom: 0.18751rem solid darkslateblue; - color: #ccc; - background-color: #181819; - } - - .cbi-tabmenu>li>a, - .tabs>li>a { - color: #ccc; - - &:hover { - color: #ccc; - } - } - - .cbi-tabmenu>li { - background: #2d2d2d; - } - - .cbi-tabmenu li[class~="cbi-tab"] a { - color: #ccc; - } - - .cbi-tabmenu>li:hover { - color: #ccc; - background: #2d2d2d; - } - - .cbi-tabmenu>li[class~="cbi-tab"] { - background-color: #181819; - } - - .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { - background-color: #252526; - } - - .cbi-value-title { - color: #ccc; - } - - select, - input { - color: #ccc; - background-color: transparent !important; - border: 1px solid #252526; - box-shadow: none; - } - - select:not([multiple="multiple"]):focus, - input:focus { - border-color: darkslateblue !important; - outline: 0; - - } - - select { - background-color: #1e1e1e !important; - } - - #cbi-dropbear h2, - #cbi-dropbear .cbi-map-descr, - #cbi-dropbear .cbi-map-descr abbr, - #cbi-rc h2, - #cbi-rc .cbi-map-descr, - #cbi-distfeedconf h2, - #cbi-distfeedconf .cbi-map-descr, - #cbi-customfeedconf h2, - #cbi-customfeedconf .cbi-map-descr, - #cbi-download h2, - #cbi-filelist h2 { - color: #ccc !important; - } - - .cbi-value-field>ul>li .ifacebadge { - background-color: #3c3c3c; - } - - .cbi-section-descr { - color: #ccc; - } - - .cbi-input-textarea { - background-color: #1e1e1e; - color: #ccc; - } - - - - .cbi-section-remove:nth-of-type(2n), - .cbi-section-node:nth-of-type(2n) { - background-color: #1e1e1e; - } - - .node-system-packages>.main table tr td:nth-last-child(1) { - color: #ccc; - - } - - .cbi-section-node .cbi-value { - padding: 1rem 1rem 0.3rem 1rem; - } - - .ifacebox { - background-color: none; - border: 1px solid #1e1e1e; - } - - .ifacebox-head { - color: #666; - } - - .ifacebox-body { - background-color: #333; - } - - .zonebadge strong { - color: #333; - } - - .zonebadge>.ifacebadge { - background-color: #3c3c3c; - } - - div.cbi-value var, - td.cbi-value-field var { - color: #5e72e4; - } - - #diag-rc-output>pre { - color: #ccc; - background-color: #1e1e1e; - } - - .node-services-vssr .block { - background-color: #3c3c3c !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); - } - - .node-services-vssr .block h4 { - color: #ccc !important; - } - - .node-services-vssr .status-bar { - color: #ccc; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); - background-color: #1e1e1e; - } - - .node-services-vssr .cbi-section-table-row { - color: #ccc; - background-color: #3c3c3c !important; - box-shadow: 0 0 5px 0 rgba(0, 0, 0, .35) - } - - .node-services-vssr .cbi-section-table-row.fast { - background: darkslateblue !important; - color: #fff; - } - - .node-services-vssr .ssr-button { - color: #ccc; - - } - - .node-services-vssr .incon:nth-child(2) { - border-right: #1e1e1e 1px solid; - } - - #xhr_poll_status>.label.success { - color: #ccc !important; - - background-color: darkolivegreen !important; - } - - .notice { - background-color: darkslateblue !important; - } - - .cbi-input-find, - .cbi-input-save, - .cbi-button-add, - .cbi-button-save, - .cbi-button-find, - .cbi-input-reload, - .cbi-button-reload { - color: #fff !important; - background-color: darkseagreen !important; - border-color: darkseagreen !important; - } - - .cbi-button-reset, - .cbi-input-remove { - color: #fff !important; - background-color: darkorange !important; - border-color: darkorange !important; - } - - .cbi-page-actions .cbi-button-apply, - .cbi-section-actions .cbi-button-edit, - .cbi-button-edit.important, - .cbi-button-apply.important, - .cbi-button-reload.important, - .cbi-button-action.important { - border: 1px darkslateblue solid !important; - } - - - - fieldset[id^="cbi-apply-"] { - background-color: #333333; - } - - #detail-bubble>div { - border: 1px solid #ccc; - border-radius: 2px; - padding: 5px; - background: #252525; - } - - .ifacebox-head.active { - background-color: #32325d !important; - } - - header .fill .status span[data-style="active"] { - color: #ccc !important; - background-color: darkolivegreen !important; - } - - #cbi-wireless .td, - #cbi-network .tr:first-child>.td, - .table[width="100%"]>.tr:first-child>.td, - [data-page="admin-network-diagnostics"] .tr>.td, - .tr.table-titles>.th, - .tr.cbi-section-table-titles>.th { - background-color: #252526; - border-bottom: black 1px solid !important; - - } - - .network-status-table .ifacebox-body .ifacebadge { - background-color: #252526; - border-bottom: 0; - box-shadow: none; - } - - td>.ifacebadge, - .td>.ifacebadge { - - background-color: darkslateblue; - border: 0; - } - - .btn.danger, - .cbi-section-remove>.cbi-button, - .cbi-button-remove, - .cbi-button-reset, - .cbi-button-negative, - .cbi-button[value="Stop"], - .cbi-button[value="Kill"], - .cbi-button[onclick="reboot(this)"], - .cbi-button-neutral[value="Restart"] { - border: thin solid darkorange !important; - background-color: darkorange !important; - } - - .cbi-section, - .cbi-section-error, - #iptables, - .Firewall form, - #cbi-network>.cbi-section-node, - #cbi-wireless>.cbi-section-node, - #cbi-wireless>#wifi_assoclist_table, - [data-tab-title], - [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), - [data-page="admin-system-opkg"] #maincontent>.container { - background: #1e1e1e !important; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); - } - - div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { - background: transparent !important; - } - - [data-page="admin-system-admin"] .cbi-map h2, - [data-page="admin-system-admin-password"] .cbi-map h2, - [data-page="admin-system-admin"] .cbi-map .cbi-map-descr, - [data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { - color: #ccc; - } - - [data-page="admin-system-flash"] { - .modal { - label>input[type="checkbox"] { - top: -0.35rem; - } - - .btn { - white-space: normal !important; - background-color: darkseagreen; - } - - .alert-message { - background-color: transparent !important; - } - - .danger { - border: thin solid darkorange !important; - background-color: darkorange !important; - } - } - } - - .cbi-value input[type="password"]+.cbi-button-neutral { - background-color: darkslateblue !important; - } - - .btn, - button, - select, - input, - .cbi-dropdown { - border: 1px solid #3c3c3c !important; - } - - - .cbi-dropdown .preview { - color: #ccc; - } - - .cbi-section-table-row { - background-color: #1e1e1e !important; - } - - .modal { - background-color: #1e1e1e; - } - - .cbi-button-positive { - color: #fff !important; - background-color: darkseagreen !important; - } - - [data-page="admin-system-flash"] legend { - color: #ccc; - } - - .logout:before { - color: #adb5bd !important; - } - - .cbi-dropdown[open] { - border-color: darkslateblue !important; - } - - .cbi-dropdown[open]>ul.dropdown { - background: #252526 !important; - color: #ccc !important; - box-shadow: none; - border: 1px solid #3c3c3c !important; - - - } - - .cbi-dropdown[open]>ul.dropdown li { - color: #ccc; - border-bottom: 1px solid #3c3c3c !important; - } - - .cbi-dropdown[open]>ul.dropdown>li[selected] { - background-color: darkslateblue !important; - border-bottom: 1px solid #3c3c3c !important; - } - - .cbi-dropdown[open]>ul.dropdown>li.focus { - background: darkslateblue; - outline: none; - } - - .ifacebadge { - background-color: #333333; - } - - .cbi-dynlist>.item>span { - border: 1px solid #3c3c3c !important; - } - - .cbi-page-actions .cbi-button-apply, - .cbi-section-actions .cbi-button-edit, - .cbi-button-edit, - .cbi-button-apply, - .cbi-button-reload, - .cbi-button-action, - .cbi-button[value="Submit"], - .cbi-button[value="Upload"], - .cbi-button[value$="Apply"], - .cbi-button[onclick="addKey(event)"] { - background: darkslateblue !important; - } - - .btn.primary, - .cbi-page-actions .cbi-button-save, - .cbi-page-actions .cbi-button-apply+.cbi-button-save, - .cbi-button-add, - .cbi-button-save, - .cbi-button-positive, - .cbi-button-link, - .cbi-button[value="Enable"], - .cbi-button[value="Scan"], - .cbi-button[value^="Back"], - .cbi-button-neutral[onclick="handleConfig(event)"] { - background: darkslateblue !important; - } - - [data-page="admin-system-opkg"] h2 { - - color: #ccc !important; - } - - @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { - .login-page .login-container .login-form { - -webkit-backdrop-filter: blur(var(--blur-radius-dark)); - backdrop-filter: blur(var(--blur-radius-dark)); - background-color: rgba(0, 0, 0, var(--blur-opacity-dark)); - - } - } -} - -@media (prefers-color-scheme: dark) and (max-width: 480px) { - .node-status-iptables>.main div>.cbi-map>form { - background-color: #1e1e1e; - box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); - } - - -} \ No newline at end of file diff --git a/htdocs/luci-static/argon/less/dark.less b/htdocs/luci-static/argon/less/dark.less index c1285dd..0a0d470 100644 --- a/htdocs/luci-static/argon/less/dark.less +++ b/htdocs/luci-static/argon/less/dark.less @@ -1,3 +1,4 @@ +// compress: true /** * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * @@ -61,11 +62,12 @@ body { } .cbi-button-apply { - background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; &:hover, &:focus { - background-image: linear-gradient(-135deg, rgb(85, 76, 138) 0%, rgb(72, 61, 139) 100%); + opacity: 0.9; } } } @@ -113,7 +115,8 @@ header::after { } .menu.active { - background-color: darkslateblue !important; + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; color: #cccccc !important; a::after { @@ -128,7 +131,8 @@ header::after { } a:hover { - background-color: darkslateblue !important; + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; color: #cccccc !important; } } @@ -163,7 +167,8 @@ h3 { a:-webkit-any-link { color: -webkit-link; cursor: pointer; - color: darkslateblue; + color: #483d8b; + color: var(--dark-primary); } @@ -175,8 +180,10 @@ input:-webkit-autofill { .cbi-button-apply, .cbi-button-edit { color: #fff !important; - background-color: darkslateblue !important; - border-color: darkslateblue !important; + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; + border-color: #483d8b !important; + border-color: var(--dark-primary) !important; } @@ -316,7 +323,8 @@ h4 { .cbi-button { color: #ccc !important; - background-color: darkslateblue; + background-color: #483d8b; + background-color: var(--dark-primary); } .cbi-section-node { @@ -361,7 +369,8 @@ div>.table>.tbody>.tr:nth-of-type(2n) { .tabs>li[class~="active"], .tabs>li:hover { - border-bottom: 0.18751rem solid darkslateblue; + border-bottom: 0.18751rem solid #483d8b; + border-bottom: 0.18751rem solid var(--dark-primary); color: #ccc; background-color: #181819; } @@ -410,7 +419,8 @@ input { select:not([multiple="multiple"]):focus, input:focus { - border-color: darkslateblue !important; + border-color: #483d8b !important; + border-color: var(--dark-primary) !important; outline: 0; } @@ -515,7 +525,8 @@ td.cbi-value-field var { } .node-services-vssr .cbi-section-table-row.fast { - background: darkslateblue !important; + background: #483d8b !important; + background: var(--dark-primary) !important; color: #fff; } @@ -535,7 +546,8 @@ td.cbi-value-field var { } .notice { - background-color: darkslateblue !important; + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; } .cbi-input-find, @@ -563,7 +575,8 @@ td.cbi-value-field var { .cbi-button-apply.important, .cbi-button-reload.important, .cbi-button-action.important { - border: 1px darkslateblue solid !important; + border: 1px #483d8b solid !important; + border: 1px var(--dark-primary) solid !important; } .btn[value="Dismiss"], @@ -575,8 +588,8 @@ td.cbi-value-field var { .cbi-button-neutral[value="Disable"] { font-weight: normal; color: #fff; - border: thin solid darkorange!important; - background-color: darkorange!important; + border: thin solid darkorange !important; + background-color: darkorange !important; } fieldset[id^="cbi-apply-"] { @@ -619,7 +632,8 @@ header .fill .status span[data-style="active"] { td>.ifacebadge, .td>.ifacebadge { - background-color: darkslateblue; + background-color: #483d8b; + background-color: var(--dark-primary); border: 0; } @@ -684,7 +698,8 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { } .cbi-value input[type="password"]+.cbi-button-neutral { - background-color: darkslateblue !important; + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; } .btn, @@ -722,7 +737,8 @@ input, } .cbi-dropdown[open] { - border-color: darkslateblue !important; + border-color: #483d8b !important; + border-color: var(--dark-primary) !important; } .cbi-dropdown[open]>ul.dropdown { @@ -740,12 +756,14 @@ input, } .cbi-dropdown[open]>ul.dropdown>li[selected] { - background-color: darkslateblue !important; + background-color: #483d8b !important; + background-color: var(--dark-primary) !important; border-bottom: 1px solid #3c3c3c !important; } .cbi-dropdown[open]>ul.dropdown>li.focus { - background: darkslateblue; + background: #483d8b; + background: var(--dark-primary); outline: none; } @@ -767,7 +785,8 @@ input, .cbi-button[value="Upload"], .cbi-button[value$="Apply"], .cbi-button[onclick="addKey(event)"] { - background: darkslateblue !important; + background: #483d8b !important; + background: var(--dark-primary) !important; } .btn.primary, @@ -781,7 +800,8 @@ input, .cbi-button[value="Scan"], .cbi-button[value^="Back"], .cbi-button-neutral[onclick="handleConfig(event)"] { - background: darkslateblue; + background: #483d8b; + background: var(--dark-primary); } [data-page="admin-system-opkg"] h2 { diff --git a/luasrc/view/themes/argon/header.htm b/luasrc/view/themes/argon/header.htm index 85756fe..5e72744 100644 --- a/luasrc/view/themes/argon/header.htm +++ b/luasrc/view/themes/argon/header.htm @@ -28,46 +28,79 @@ local fs = require "nixio.fs" local nutil = require "nixio.util" + local uci = require 'luci.model.uci'.cursor() -- send as HTML5 http.prepare_content("text/html") - math.randomseed(os.time()) + math.randomseed(os.time()) + + -- Custom settings + local mode = 'normal' + local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css') + local bar_color = '#5e72e4' + local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity + if fs.access('/etc/config/argon') then + primary = uci:get_first('argon', 'global', 'primary') + dark_primary = uci:get_first('argon', 'global', 'dark_primary') + blur_radius = uci:get_first('argon', 'global', 'blur') + blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark') + blur_opacity = uci:get_first('argon', 'global', 'transparency') + blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark') + mode = uci:get_first('argon', 'global', 'mode') + bar_color = mode == 'dark' and dark_primary or primary + end -%> - - <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - - LuCI - - - - - - - - - - - - LuCI"> - - LuCI"> - - - - - - - - - - - - - <% if nixio.fs.access("/etc/dark") then %> - - <% end -%> + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> + - LuCI + + + + + + + + + + + - LuCI"> + - LuCI"> + + + + + + + + + + + + + <% if node and node.css then %> @@ -77,136 +110,110 @@ <%=css %> <% end -%> - - - - - + + + + + diff --git a/luasrc/view/themes/argon/header_login.htm b/luasrc/view/themes/argon/header_login.htm index 7f7434e..7de0f90 100644 --- a/luasrc/view/themes/argon/header_login.htm +++ b/luasrc/view/themes/argon/header_login.htm @@ -25,12 +25,30 @@ local boardinfo = util.ubus("system", "board") local node = disp.context.dispatched local fs = require "nixio.fs" - local nutil = require "nixio.util" + local nutil = require "nixio.util" + local uci = require 'luci.model.uci'.cursor() -- send as HTML5 http.prepare_content("text/html") math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9))) + + -- Custom settings + local mode = 'normal' + local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css') + local bar_color = '#5e72e4' + local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity + if fs.access('/etc/config/argon') then + primary = uci:get_first('argon', 'global', 'primary') + dark_primary = uci:get_first('argon', 'global', 'dark_primary') + blur_radius = uci:get_first('argon', 'global', 'blur') + blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark') + blur_opacity = uci:get_first('argon', 'global', 'transparency') + blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark') + mode = uci:get_first('argon', 'global', 'mode') + bar_color = mode == 'dark' and dark_primary or primary + end + -%> @@ -49,7 +67,7 @@ - + - LuCI"> - LuCI"> @@ -60,14 +78,30 @@ - + - + + - <% if nixio.fs.access("/etc/dark") then %> - - <% end -%> <% if node and node.css then %> <% end -%> diff --git a/root/etc/uci-defaults/30_luci-theme-argon b/root/etc/uci-defaults/39_luci-theme-argon similarity index 50% rename from root/etc/uci-defaults/30_luci-theme-argon rename to root/etc/uci-defaults/39_luci-theme-argon index 428183b..e898052 100644 --- a/root/etc/uci-defaults/30_luci-theme-argon +++ b/root/etc/uci-defaults/39_luci-theme-argon @@ -4,6 +4,7 @@ uci batch <<-EOF set luci.main.mediaurlbase=/luci-static/argon commit luci EOF +sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua [ -f /usr/lib/lua/luci/view/themes/argon/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argon/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm rm -Rf /var/luci-modulecache rm -Rf /var/luci-indexcache