diff --git a/package/lienol/luci-theme-argon-dark-mod/Makefile b/package/lienol/luci-theme-argon-dark-mod/Makefile index b82b624c3d..28459ee87b 100644 --- a/package/lienol/luci-theme-argon-dark-mod/Makefile +++ b/package/lienol/luci-theme-argon-dark-mod/Makefile @@ -1,5 +1,5 @@ # Copyright (C) 2008-2019 Jerrykuku -# Copyright (C) 2019-2020 Lienol +# Copyright (C) 2019-2020 Lienol # # This is free software, licensed under the Apache License, Version 2.0 . # @@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Argon Dark Mod Theme LUCI_DEPENDS:= -PKG_VERSION:=1.4 -PKG_RELEASE:=02-20200101 +PKG_VERSION:=1.6 +PKG_RELEASE:=20200523 include $(TOPDIR)/feeds/luci/luci.mk diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/purecss.css b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/purecss.css new file mode 100644 index 0000000000..0b2bf6426e --- /dev/null +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/purecss.css @@ -0,0 +1,7 @@ +/*! +Pure v1.0.1 +Copyright 2013 Yahoo! +Licensed under the BSD License. +https://github.com/pure-css/pure/blob/master/LICENSE.md +*/ +.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%} \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/style.css b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/style.css index 54c815e8a7..087b32cb3f 100644 --- a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/style.css +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/css/style.css @@ -1,393 +1,195 @@ /** - * Netgear is a clean HTML5 theme for LuCI. It is based on luci-theme-material + * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * - * luci-theme-material - * Copyright 2015 Lutty Yang + * luci-theme-argon + * Copyright 2019 Jerrykuku + * + * 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 */ - /* * Font generate by Icomoon + * Mod again by Mask + * Mod again by Lienol */ -.pure-g { - letter-spacing: -.31em; - text-rendering: optimizespeed; - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start +:root { + --blue: #5e72e4; + --indigo: #5603ad; + --purple: #8965e0; + --pink: #f3a4b5; + --red: #f5365c; + --orange: #fb6340; + --yellow: #ffd600; + --green: #2dce89; + --teal: #11cdef; + --cyan: #2bffc6; + --white: #fff; + --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; + --breakpoint-xs: 0; + --breakpoint-sm: 576px; + --breakpoint-md: 768px; + --breakpoint-lg: 992px; + --breakpoint-xl: 1200px; + --font-family-sans-serif: Open Sans, sans-serif; + --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } -@media all and (-ms-high-contrast:none), -(-ms-high-contrast:active) { - table .pure-g { - display: block - } -} -.opera-only :-o-prefocus, -.pure-g { - word-spacing: -.43em -} -.pure-u, -.pure-u-1, -.pure-u-1-1, -.pure-u-1-12, -.pure-u-1-2, -.pure-u-1-24, -.pure-u-1-3, -.pure-u-1-4, -.pure-u-1-5, -.pure-u-1-6, -.pure-u-1-8, -.pure-u-10-24, -.pure-u-11-12, -.pure-u-11-24, -.pure-u-12-24, -.pure-u-13-24, -.pure-u-14-24, -.pure-u-15-24, -.pure-u-16-24, -.pure-u-17-24, -.pure-u-18-24, -.pure-u-19-24, -.pure-u-2-24, -.pure-u-2-3, -.pure-u-2-5, -.pure-u-20-24, -.pure-u-21-24, -.pure-u-22-24, -.pure-u-23-24, -.pure-u-24-24, -.pure-u-3-24, -.pure-u-3-4, -.pure-u-3-5, -.pure-u-3-8, -.pure-u-4-24, -.pure-u-4-5, -.pure-u-5-12, -.pure-u-5-24, -.pure-u-5-5, -.pure-u-5-6, -.pure-u-5-8, -.pure-u-6-24, -.pure-u-7-12, -.pure-u-7-24, -.pure-u-7-8, -.pure-u-8-24, -.pure-u-9-24 { - display: inline-block; - zoom: 1; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto -} - -.pure-g [class*=pure-u] { - font-family: sans-serif -} - -.pure-u-1-24 { - width: 4.1667% -} - -.pure-u-1-12, -.pure-u-2-24 { - width: 8.3333% -} - -.pure-u-1-8, -.pure-u-3-24 { - width: 12.5% -} - -.pure-u-1-6, -.pure-u-4-24 { - width: 16.6667% -} - -.pure-u-1-5 { - width: 20% -} - -.pure-u-5-24 { - width: 20.8333% -} - -.pure-u-1-4, -.pure-u-6-24 { - width: 25% -} - -.pure-u-7-24 { - width: 29.1667% -} - -.pure-u-1-3, -.pure-u-8-24 { - width: 33.3333% -} - -.pure-u-3-8, -.pure-u-9-24 { - width: 37.5% -} - -.pure-u-2-5 { - width: 40% -} - -.pure-u-10-24, -.pure-u-5-12 { - width: 41.6667% -} - -.pure-u-11-24 { - width: 45.8333% -} - -.pure-u-1-2, -.pure-u-12-24 { - width: 50% -} - -.pure-u-13-24 { - width: 54.1667% -} - -.pure-u-14-24, -.pure-u-7-12 { - width: 58.3333% -} - -.pure-u-3-5 { - width: 60% -} - -.pure-u-15-24, -.pure-u-5-8 { - width: 62.5% -} - -.pure-u-16-24, -.pure-u-2-3 { - width: 66.6667% -} - -.pure-u-17-24 { - width: 70.8333% -} - -.pure-u-18-24, -.pure-u-3-4 { - width: 75% -} - -.pure-u-19-24 { - width: 79.1667% -} - -.pure-u-4-5 { - width: 80% -} - -.pure-u-20-24, -.pure-u-5-6 { - width: 83.3333% -} - -.pure-u-21-24, -.pure-u-7-8 { - width: 87.5% -} - -.pure-u-11-12, -.pure-u-22-24 { - width: 91.6667% -} - -.pure-u-23-24 { - width: 95.8333% -} - -.pure-u-1, -.pure-u-1-1, -.pure-u-24-24, -.pure-u-5-5 { - width: 100% +@font-face { + font-family: 'icomoon'; + src: url('../fonts/font.eot'); + src: url('../fonts/font.eot') format('embedded-opentype'), + url('../fonts/font.ttf') format('truetype'), + url('../fonts/font.woff') format('woff'), + url('../fonts/font.svg') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'icomoon'; - src: url('../fonts/font.eot'); - src: url('../fonts/font.eot') format('embedded-opentype'), url('../fonts/font.ttf') format('truetype'), url('../fonts/font.woff') format('woff'), url('../fonts/font.svg') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'ssr'; + src: url('../fonts/ssr.eot?5zoxsi'); + src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), + url('../fonts/ssr.ttf?5zoxsi') format('truetype'), + url('../fonts/ssr.woff?5zoxsi') format('woff'), + url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'ssr'; - src: url('../fonts/ssr.eot?5zoxsi'); - src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), url('../fonts/ssr.ttf?5zoxsi') format('truetype'), url('../fonts/ssr.woff?5zoxsi') format('woff'), url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'TypoGraphica'; + src: url('../fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('../fonts/TypoGraphica.woff') format('woff'), url('../fonts/TypoGraphica.ttf') format('truetype'), url('../fonts/TypoGraphica.svg#TypoGraphica') format('svg'); + font-weight: normal; + font-style: normal; } +@font-face { + font-family: 'icomoon'; + src: url('../fonts/icomoon.eot?1peg26'); + src: url('../fonts/icomoon.eot?1peg26#iefix') format('embedded-opentype'), + url('../fonts/icomoon.ttf?1peg26') format('truetype'), + url('../fonts/icomoon.woff?1peg26') format('woff'), + url('../fonts/icomoon.svg?1peg26#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + + + [class^="icon-"], [class*=" icon-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'ssr' !important; - speak: none; - 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; + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'ssr' !important; + speak: none; + 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; } .icon-dashboard:before { - content: "\e906"; + content: "\e906"; } .icon-logout:before { - content: "\e907"; + content: "\e907"; } .icon-Network:before { - content: "\e908"; + content: "\e908"; } .icon-services:before { - content: "\e909"; + content: "\e909"; } .icon-system:before { - content: "\e90a"; + content: "\e90a"; } .icon-vpn:before { - content: "\e90b"; + content: "\e90b"; } .icon-storage:before { - content: "\e90c"; + content: "\e90c"; } .icon-statistics:before { - content: "\e90d"; + content: "\e90d"; } .icon-delete:before { - content: "\e900"; + content: "\e900"; } .icon-edit:before { - content: "\e901"; + content: "\e901"; } .icon-ok:before { - content: "\e902"; + content: "\e902"; } .icon-loading:before { - content: "\e903"; + content: "\e903"; } .icon-switch:before { - content: "\e904"; + content: "\e904"; } .icon-error:before { - content: "\e905"; -} - -input[type=checkbox], -input[type=radio] { - width: auto; - margin: 0; - vertical-align: middle; - cursor: pointer; -} - -.cbi-button-up, -.cbi-button-down, -.cbi-value-helpicon, -.showSide, -.main>.loading>span { - font-family: 'icomoon' !important; - speak: none; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + content: "\e905"; } * { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.left { - text-align: left !important; -} - -.right { - text-align: right !important; -} - -.center { - text-align: center !important; -} - -.top { - vertical-align: top !important; -} - -.middle { - vertical-align: middle !important; -} - -.bottom { - vertical-align: bottom !important; -} - -.pull-left { - float: left !important; -} - -.pull-right { - float: right !important; -} - -.inline { - display: inline; -} - -.hidden { - display: none; -} - -a { - text-decoration: none; + margin: 0; + padding: 0; + box-sizing: border-box; } .h1, @@ -402,724 +204,315 @@ h3, h4, h5, h6 { - font-family: inherit; - font-weight: 400; - line-height: 1.1; - color: inherit; + font-family: inherit; + font-weight: 400; + line-height: 1.1; + color: inherit; } html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } body { - font-size: 0.8rem; - background-color: #f8f9fe; + font-size: 0.8rem; + background-color: rgb(255, 255, 255); } html, body { - margin: 0px; - padding: 0px; - height: 100%; - font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; + margin: 0px; + padding: 0px; + height: 100%; + font-family: Open Sans, sans-serif Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; } body div { - line-height: 150%; + line-height: 150%; } -select { - padding: 0.36rem 0.8rem; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; +/*** Main Loading ***/ + +.cbi-button-up, +.cbi-button-down, +.main>.loading { + + background: linear-gradient(87deg, #5e72e4 0, #5e72e4 100%) !important; } -select, -input { - /* font-size: .875rem; - transition: all .15s ease-in-out; - line-height: 1.5; - height: calc(2.75rem + 2px); - padding: .625rem .75rem; - transition: all .15s cubic-bezier(.68,-.55,.265,1.55); - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: .25rem; +.sk-folding-cube { + margin: 20px auto; + width: 40px; + height: 40px; + position: relative; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); +} + +.sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} + +.sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; background-color: #fff; - background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233,236,239,.05); - margin:0.25rem; - color: #76838f; */ - padding: 6px 10px; - margin: 0; - height: 34px; - line-height: normal; - font-size: 10pt; - font-family: "Roboto", sans-serif, Helvetica, Arial, sans-serif; - border: 1px solid #e4eaec; - background-color: #fff; - transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease; - -webkit-transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease; - outline-style: none; - vertical-align: baseline; - border-radius: 3px; + -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -webkit-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } -select:not([multiple="multiple"]):focus, -input:focus { - border-color: #0099CC; +.sk-folding-cube .sk-cube2 { + -webkit-transform: scale(1.1) rotateZ(90deg); + transform: scale(1.1) rotateZ(90deg); } +.sk-folding-cube .sk-cube3 { + -webkit-transform: scale(1.1) rotateZ(180deg); + transform: scale(1.1) rotateZ(180deg); +} + +.sk-folding-cube .sk-cube4 { + -webkit-transform: scale(1.1) rotateZ(270deg); + transform: scale(1.1) rotateZ(270deg); +} + +.sk-folding-cube .sk-cube2:before { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +.sk-folding-cube .sk-cube3:before { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; +} + +.sk-folding-cube .sk-cube4:before { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; +} + +@-webkit-keyframes sk-foldCubeAngle { + + 0%, + 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; + } + + 25%, + 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; + } + + 90%, + 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; + } +} + +@keyframes sk-foldCubeAngle { + + 0%, + 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; + } + + 25%, + 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; + } + + 90%, + 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; + } +} + + +.cbi-button-up, +.cbi-button-down, +.cbi-value-helpicon, +.showSide, +.main>.loading>span { + font-family: 'icomoon' !important; + speak: none; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + + select[multiple="multiple"] { - height: auto; + height: auto; } code { - color: #0099CC; + color: #0099CC; } abbr { - color: #005470; - text-decoration: underline; - cursor: help; + color: #005470; + text-decoration: underline; + cursor: help; } hr { - margin: 1rem 0; - border-color: #EEE; - opacity: 0.1; + margin: 1rem 0; + border-color: #EEE; + opacity: 0.1; } -header, -.main { - width: 100%; - position: absolute; -} -header { - height: 4rem; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 12px -5px rgba(156, 39, 176, .46); - transition: box-shadow .2s; - float: left; - position: fixed; - z-index: 101; -} - -footer { - text-align: right; - padding: 1rem; - color: #aaa; - font-size: 0.8rem; - text-shadow: 0px 0px 2px #BBB; -} footer>a { - color: #aaa; - text-decoration: none; + color: #aaa; + text-decoration: none; } .main { - top: 4rem; - bottom: 0rem; - position: relative; - height: 100%; - height: calc(100% - 4rem); + top: 4rem; + bottom: 0rem; + position: relative; + height: 100%; + height: calc(100% - 4rem); } .main>.loading { - position: fixed; - width: 100%; - height: 100%; - z-index: 2000; - display: flex; - align-items: center; - justify-content: center; - background-color: #f8f9fe; - top: 0; + position: fixed; + width: 100%; + height: 100%; + z-index: 1000; + display: block; + background-color: rgb(240, 240, 240); + top: 0; } .main>.loading>span { - display: block; - text-align: center; - margin-top: 2rem; - color: #5e72e4; - font-size: 2rem; + display: block; + text-align: center; + margin-top: 2rem; + color: #888; + font-size: 1.2rem; } .main>.loading>span>.loading-img:before { - content: "\e603"; + content: "\e603"; } .main>.loading>span>.loading-img { - animation: anim-rotate 2s infinite linear; - margin-right: 0.4rem; - display: inline-block; + animation: anim-rotate 2s infinite linear; + margin-right: 0.2rem; + display: inline-block; } @keyframes anim-rotate { - 0% { - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg) - } + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg) + } } -[id^="cbi-apply-"] { - position: absolute; - z-index: 200; - left: 50%; - top: 50%; - font-size: 1.2rem; - border-color: #5e72e4; - text-align: center; - width: 300px; - height: 180px; - transform: translate(-50%, -50%); + + + +.pull-right { + float: right; + margin-top: 0.5rem; } -[id^="cbi-apply-"]>.panel-title { - border-bottom: none; +.pull-left { + float: left; } -[id^="cbi-apply-"]>img { - margin-top: 1rem; -} -[id^="cbi-apply-"]>[id^="cbi-apply-"] { - height: auto; - font-size: 1rem; - display: block; - top: 80%; -} -.main-left { - float: left; - top: 4rem; - width: 15%; - width: calc(0% + 15rem); - height: 100%; - height: calc(100% - 4rem); - background-color: #172b4d!important; - box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); - overflow-x: auto; - position: fixed; -} -.main-right { - width: 85%; - width: calc(100% - 15rem); - float: right; - height: 100%; - background-color: #f8f9fe; -} -.main-right>#maincontent { - background-color: #f8f9fe; -} - -header { - background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%)!important; - color: white; -} - -header>.container { - margin-top: 0.5rem; - padding: 0.5rem 1rem 0 1rem; -} - -header>.container>.brand { - font-size: 1.5rem; - color: white; - text-decoration: none; - cursor: default; - /* vertical-align: text-bottom; */ -} - -.danger { - background-color: #f5365c !important; - color: black; -} - -.warning { - background-color: #fb6340 !important; - color: black; -} - -.success { - background-color: #2dce89 !important; - color: black; -} - -.errorbox, -.alert-message { - margin: 2rem 0 0 0; - padding: 2rem; - border: 0; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - min-width: inherit; - overflow: auto; - border-radius: 0; - background-color: #FFF; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); -} - -.errorbox { - color: #fff; - background-color: #f0ad4e; - border-color: #eea236; -} - -.error { - color: red; -} #maincontent>.container>div:nth-child(1).alert-message.warning>a { - font: inherit; - overflow: visible; - text-transform: none; - display: inline-block; - margin-bottom: 0; - font-weight: 400; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-image: none; - min-width: 6rem; - padding: 0.5rem 1rem; - font-size: 0.9rem; - line-height: 1.42857143; - color: #fff; - background-color: #5bc0de; - border-color: #46b8da; - margin-top: 2rem; - text-decoration: inherit; + font: inherit; + overflow: visible; + text-transform: none; + display: inline-block; + margin-bottom: 0; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-image: none; + min-width: 6rem; + padding: 0.5rem 1rem; + font-size: 0.9rem; + line-height: 1.42857143; + color: #fff; + background-color: #5bc0de; + border-color: #46b8da; + margin-top: 2rem; + text-decoration: inherit; } -.main>.main-left>.nav { - margin-top: 0.5rem; -} - -.main>.main-left>.nav>li a { - color: #8699ad; - display: block; -} - -.main>.main-left>.nav>li:nth-last-child(1) { - margin-top: 2rem; - font-size: 1.2rem; -} - -.main>.main-left>.nav>li { - padding: 0.5rem 1rem; - cursor: pointer; -} - -.main>.main-left>.nav>.slide { - padding: 0; -} - -.main>.main-left>.nav>.slide>ul { - display: none; -} - -.main>.main-left>.nav>.slide>.menu { - display: block; - margin: 0.1rem .5rem; - padding: .675rem 0 .675rem 3rem; - border-radius: .375rem; - text-decoration: none; - cursor: default; - font-size: 1rem; - transition: all 0.2s; - border-left: transparent 3px solid; -} - -.main>.main-left>.nav>li:hover, -.main>.main-left>.nav>.slide>.menu:hover { - color: white; - background: #5e72e4; -} - -.main>.main-left>.nav>.slide:hover { - background: none; -} - -.main>.main-left>.nav>.slide>.menu:hover { - /* border-left: #ffffff 3px solid; */ -} - -.main>.main-left>.nav>.slide>.menu:before { - font-family: 'ssr' !important; - speak: none; - 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: 1rem; - padding-top: 3px; -} - -.main > .main-left > .nav > .slide > .menu[data-title= Status ]:before{ - content: "\e906"; - color: #5e72e4!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= System ]:before{ - content: "\e90a"; - color: #fb6340!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Services ]:before{ - content: "\e909"; - color: #11cdef!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= NAS ]:before{ - content: "\e90c"; - color: #f3a4b5!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Control ]:before{ - content: "\e90e"; - color: #f3a4b5!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= VPN ]:before{ - content: "\e90b"; - color: #6de9ea!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Network ]:before{ - content: "\e908"; - color: #8965e0!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Bandwidth_Monitor ]:before{ - content: "\e90d"; - color: #2dce89!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Logout ]:before{ - content: "\e907"; - color: #32325d!important; -} - -header>.container>.brand:before { - font-family: 'ssr' !important; - speak: none; - 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; - content: "\e90e"; - margin-right: 0.5rem; -} - -.main>.main-left>.nav>.slide>.menu.active { - color: white; - background: #7764e4; -} - -.main>.main-left>.nav>.slide>.slide-menu>li {} - -.main>.main-left>.nav>.slide>.slide-menu>.active {} - -.main>.main-left>.nav>.slide>.slide-menu>li>a { - margin: 0.1rem .5rem; - padding: 0.5rem 1.5rem 0.5rem 2.5rem; - text-decoration: none; - border-radius: .375rem; - white-space: nowrap; - color: #8699ad; - border-left: transparent 3px solid; - transition: all 0.2s; -} - -.main>.main-left>.nav>.slide>.slide-menu>.active>a { - /* border-left: #ffffff 3px solid; */ - color: white; - background-color: #5e72e4; -} - -.main>.main-left>.nav>.slide>.slide-menu>li>a:hover { - /* border-left: #ffffff 3px solid; */ - color: white; - background: #5e72e4; -} - -.main>.main-left>.nav>.slide>.slide-menu>.active>a:hover { - /* border-left: #ffffff 3px solid; */ - color: white; - background-color: #5e72e4; - cursor: hand; +#maincontent>.container>p { + color: #fff; } li { - list-style-type: none; + list-style-type: none; } -#maincontent>.container { - margin: 0 2rem 1rem 2rem; -} - -h1 { - font-size: 2rem; - padding: 0.5rem; - border-bottom: 1px solid #eee; -} - -h2 { - margin: 1rem 0 0 0; - font-size: 1.5rem; - padding: 0.5rem; - /* border-bottom: 1px solid #eee; */ -} - -h3 { - font-size: 1.4rem; - width: 100%; - display: block; - margin-bottom: 0; - padding: 0.5rem; - border-bottom: 1px solid rgba(0, 0, 0, .05); - background-color: #fff; - line-height: 1.5; - margin-bottom: 0rem; - letter-spacing: 0.1rem; - color: #32325d; - font-weight: bold; -} - -h4 {} -/* -div.cbi-section, -fieldset { - margin: 2rem 0 0 0; - padding: 0; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - - min-width: inherit; - overflow-x: auto; - overflow-y: hidden; - - border: 1px solid rgba(0,0,0,.05); - border-radius: .375rem; - background-color: #fff; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); - - -webkit-overflow-scrolling: touch; -} */ - -div.cbi-section, -fieldset { - margin: 10px 0; - padding: 1rem; - border: 1px; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - min-width: inherit; - overflow-x: hidden; - overflow-y: hidden; - border-radius: 4px; - background-color: #FFF; - box-shadow: 3px 3px 3px rgba(0, 0, 0, .05); -} - -.cbi-map-descr+div.cbi-section, .cbi-map-descr+fieldset { - margin-top: 1rem; + margin-top: 1rem; } -div.cbi-section>legend, -fieldset>legend { - display: none !important; +.cbi-section>legend { + display: none !important; } -div.cbi-section>div.cbi-section, -fieldset>fieldset { - margin: 0; - padding: 0; - border: none; - box-shadow: none; -} - -.panel-title { - width: 100%; - display: block; - margin-bottom: 0; - padding: 5px; - border-bottom: 1px solid rgba(0, 0, 0, .05); - background-color: #fff; - line-height: 1.5; - margin-bottom: 0rem; - letter-spacing: 0.1rem; - color: #32325d; - font-weight: bold; -} - -table, -.table { - border-spacing: 0; - border-collapse: collapse; - width: 100%; - border: 1px solid #eee; - display: table; - margin: 0 0 10px !important; - position: relative; -} - -.table[width="33%"], -.th[width="33%"], -.td[width="33%"] { - width: 33%; -} - -.table[width="100%"], -.th[width="100%"], -.td[width="100%"] { - width: 100%; -} - - -/* table>tbody>tr>td, -table>tfoot>tr>td, -table>tfoot>tr>th, -table>thead>tr>td, -table>thead>tr>th { -table>thead>tr>th, -.table>.tr>.td, -.table>.tr>.th, -.table>.tr>.td, -.table>.tr>.th, -.table>.tr>.td, -.table>.tr>.th { - padding: 6px; - line-height: 1.5; - border-top: 0px dashed #EEE; - white-space: nowrap; -} */ - -table>tbody>tr>td, -table>tfoot>tr>td, -table>thead>tr>td, -.table>.tr>.td, -.table>.tr>.td, -.table>.tr>.td { - font-size: .8125rem; - white-space: nowrap; - color: #525f7f; - padding: 6px; - line-height: 1.5; - border-top: 1px solid #ddd; - white-space: nowrap; -} - -table>tbody>tr>th, -table>tfoot>tr>th, -table>thead>tr>th, -.table>.tr>.th, -.table>.tr>.th, -.table>.tr>.th { - padding-right: 1.5rem; - padding-left: 1.5rem; - color: #8898aa; - background-color: #f6f9fc; - font-size: .65rem; - padding-top: .75rem; - padding-bottom: .75rem; - letter-spacing: 1px; - text-transform: uppercase; - padding: 6px; - line-height: 1.5; - white-space: nowrap; -} - -.table .th, -.table .td { - display: table-cell; - vertical-align: middle; -} - -.table .tr.placeholder { - height: calc(3em + 20px); -} - -.table .tr.placeholder>.td { - position: absolute; - left: 0; - right: 0; - bottom: 0; - text-align: center; - line-height: 3em; -} - -.td.cbi-section-actions>* { - display: flex; -} - -.td.cbi-section-actions>*>*, -.td.cbi-section-actions>*>form>* { - flex: 1 1 4em; - margin: 0 1px; -} - -.td.cbi-section-actions>*>.cbi-button-up, -.cbi-input-up { - background: unset; -} - -.td.cbi-section-actions>*>.cbi-button-down, -.cbi-input-down { - background: unset; -} - -tr, -.tr { - display: table-row; -} - -.cbi-section-table-cell { - text-align: center; -} - -.cbi-section-table-row { - text-align: center; -} - -div.cbi-section>.table>.tr:nth-of-type(2n), -fieldset>table>tbody>tr:nth-of-type(2n) { - background-color: #f9f9f9; -} - - /* fix progress bar */ - #swaptotal>div, #swapfree>div, #swapcache>div, @@ -1128,11 +521,12 @@ fieldset>table>tbody>tr:nth-of-type(2n) { #conns>div, #memcache>div, #memtotal>div, -#cpu_free>div { - width: 100% !important; - height: 1.6rem !important; - line-height: 1.6rem; - border-radius: .25rem; +#cpu_free>div, +.progress_bar>div { + width: 100% !important; + height: 1.6rem !important; + line-height: 1.6rem; + border-radius: .25rem; } #swaptotal>div>div, @@ -1143,95 +537,1640 @@ fieldset>table>tbody>tr:nth-of-type(2n) { #conns>div>div, #memcache>div>div, #memtotal>div>div, -#cpu_free>div>div { - height: 100% !important; - background-color: #5e72e4 !important; +#cpu_free>div>div, +.progress_bar>div>div { + height: 100% !important; + border-radius: 5px; + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%)!important; } +/* fix multiple table */ + +table table, +.table .table { + border: none; +} + +.cbi-value-field table, +.cbi-value-field .table { + border: none; +} + +td>table>tbody>tr>td, +.td>.table>.tbody>.tr>.td { + border: none; +} + +.cbi-value-field>table>tbody>tr>td, +.cbi-value-field>.table>.tbody>.tr>.td { + border: none; +} + +/* button style */ + + + +.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 { + color: #fff; + background-color: #337ab7; + border: none; +} + +.cbi-page-actions .cbi-button-save, +.cbi-button-add.important, +.cbi-button-save.important, +.cbi-button-positive.important { + color: #fff; + background-color: #5bc0de; + border: none; +} + +.cbi-button-remove.important, +.cbi-button-reset.important, +.cbi-button-negative.important { + color: #fff; + background-color: #d9534f; + border: none; +} + +.cbi-button-find, +.cbi-button-link, +.cbi-button-neutral { + color: #fff !important; + background-color: #f0ad4e !important; + border: none; +} + +.cbi-button-edit, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-action { + color: #2e6da4; + background-color: transparent; + border: none; +} + +.cbi-page-actions .cbi-button-apply+.cbi-button-save, +.cbi-button-add, +.cbi-button-save, +.cbi-button-positive { + color: #46b8da; + background-color: transparent; + border: none; +} + +.cbi-section-remove>.cbi-button, +.cbi-button-remove, +.cbi-button-reset, +.cbi-button-negative { + color: #fff !important; + background-color: #fb6340 !important; + border: none; +} + +.cbi-page-actions .cbi-button-link:first-child { + float: left; +} + +.a-to-btn { + text-decoration: none; +} + +/* table */ + +.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { + width: auto; +} + +.td.cbi-section-actions { + /* text-align: right; */ + vertical-align: middle; +} + +.td.cbi-section-actions>* { + /* display: flex; */ +} + +.td.cbi-section-actions>*>*, +.td.cbi-section-actions>*>form>* { + flex: 1 1 4em; + margin: 0 1px; +} + +.td.cbi-section-actions>*>form { + display: inline-flex; + margin: 0; +} + +/* desc */ + +/* 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 { + border-top: 1px solid #eee; + padding-top: 1rem; + text-align: right; +} + +/* input */ +.cbi-value input[type="password"], +.cbi-value input[type="text"] { + min-width: unset; +} + +select { + width: 15rem; + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY1MzQ4MDM3OTIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4qIHsgdGV4dC1zaGFkb3c6IHRyYW5zcGFyZW50IDBweCAwcHggMHB4LCByZ2JhKDAsIDAsIDAsIDAuNSkgMHB4IDBweCAwcHggIWltcG9ydGFudDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjAuNDggMjQ1Ljc2aDk4My4wNEw1MTIgNzc4LjI0eiIgcC1pZD0iMjU4NCIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==') !important; + background-position: 96%; + background-size: 8px; + background-repeat: no-repeat; + +} + +.th[data-type="button"], +.td[data-type="button"], +.th[data-type="fvalue"], +.td[data-type="fvalue"] { + flex: 1 1 2em; + text-align: center; +} + + + +/*textarea*/ + +.cbi-input-textarea { + width: 100%; + min-height: 14rem; + padding: 0.8rem; + font-size: 0.8rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: black; +} + + + +/* change */ + +.uci-change-list { + font-family: monospace; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + text-decoration: none; + border: 1px solid #00FF00; + background-color: #CCFFCC; + display: block; + padding: 2px; +} + +.uci-change-list del, +.uci-change-legend-label del { + text-decoration: none; + border: 1px solid #FF0000; + background-color: #FFCCCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var, +.uci-change-legend-label var { + text-decoration: none; + border: 1px solid #CCCCCC; + background-color: #EEEEEE; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var ins, +.uci-change-list var del { + border: none; + white-space: pre; + font-style: normal; + padding: 0px; +} + +.uci-change-legend { + padding: 5px; +} + +.uci-change-legend-label { + width: 150px; + float: left; +} + +.uci-change-legend-label>ins, +.uci-change-legend-label>del, +.uci-change-legend-label>var { + float: left; + margin-right: 4px; + width: 10px; + height: 10px; + display: block; +} + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + line-height: 6px; + border: none; +} + +.uci-change-list var, +.uci-change-list del, +.uci-change-list ins { + padding: 0.5rem; +} + +/* 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: 0.25rem 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: #5e72e4; + background-size: 70%; + background-repeat: no-repeat; + background-position: center; +} + +ul li .cbi-input-checkbox { + margin-top: 0.5rem !important; +} + +.cbi-input-radio { + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid #dee2e6; + + width: 16px !important; + height: 16px !important; + padding: 0; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s; + margin: 0.25rem 0; +} + +.cbi-input-radio:checked { + border: 1px solid #5e72e4; + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; + background-color: #5e72e4; + background-size: 70%; + background-repeat: no-repeat; + background-position: center; +} + + +.toggle { + position: relative; + display: block; + width: 40px; + height: 20px; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + transform: translate3d(0, 0, 0); + margin: 1em 0; +} + +.toggle:before { + content: ""; + position: relative; + top: 3px; + left: 3px; + width: 34px; + height: 14px; + display: block; + background: #9A9999; + border-radius: 8px; + transition: background 0.2s ease; +} + +.toggle span { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 20px; + display: block; + background: white; + border-radius: 10px; + box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); + transition: all 0.2s ease; +} + +.toggle span:before { + content: ""; + position: absolute; + display: block; + margin: -18px; + width: 56px; + height: 56px; + background: rgba(79, 46, 220, 0.5); + border-radius: 50%; + transform: scale(0); + opacity: 1; + pointer-events: none; +} + +.cbi-input-checkbox:checked+.toggle:before { + background: #947ADA; +} + +.cbi-input-checkbox:checked+.toggle span { + background: #4F2EDC; + transform: translateX(20px); + transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; + box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2); +} + +.cbi-input-checkbox:checked+.toggle span:before { + transform: scale(1); + opacity: 0; + transition: all 0.4s ease; +} + +.td .cbi-input-checkbox, +.td .cbi-input-radio { + margin-top: 0; +} + +.cbi-value-field>input+.cbi-value-description { + padding: 0; +} + +.cbi-value-field>ul>li { + display: flex; +} + +.cbi-value-field>ul>li>label { + margin-top: 0.5rem; +} + +.cbi-value-field>ul>li .ifacebadge { + background-color: #eee; + margin-left: 0.4rem; + margin-top: -0.5rem; +} + +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { + min-width: 7rem; +} + +.cbi-section-create { + margin: .5rem -3px; + display: inline-flex; + align-items: center; +} + +.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; +} + +small { + font-size: 90%; + white-space: normal; + line-height: 1.42857143; +} + +.cbi-button-up, +.cbi-button-down { + display: inline-block; + min-width: 0; + padding: 0.2rem 0.6rem; + font-size: 1.2rem; + color: #FFF !important; +} + +.cbi-optionals { + padding: 1rem 1rem 0 1rem; + border-top: 1px solid #CCC; +} + +.cbi-dropdown-container { + position: relative; +} + +.cbi-tooltip-container { + cursor: help; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; + pointer-events: none; + box-shadow: 0 0 2px #444; +} + +.cbi-tooltip-container:hover .cbi-tooltip { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; +} + +.zonebadge .cbi-tooltip { + padding: .25rem; + background: inherit; + margin: -1.5rem 0 0 -.5rem; +} + +.zonebadge-empty { + 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); + color: #404040; +} + +.zone-forwards { + display: flex; + min-width: 10rem; +} + +.zone-forwards>* { + flex: 1 1 45%; +} + +.zone-forwards>span { + flex-basis: 10%; + text-align: center; + padding: 0 .25rem; +} + +.zone-forwards .zone-src, +.zone-forwards .zone-dest { + display: flex; + flex-direction: column; +} + +#diag-rc-output>pre { + background-color: #fff; + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 1.5rem; + -moz-border-radius: 3px; + white-space: pre-wrap; + word-wrap: break-word; + font-size: 1.4rem; + color: #404040; +} + +input[name="ping"], +input[name="traceroute"], +input[name="nslookup"] { + width: 80%; +} + + +#xhr_poll_status { + display: inline-block; + +} + +#xhr_poll_status>.label.success { + background-color: #fff !important; + color: #32325d !important; +} + +.label { + padding: 0.3rem 0.8rem; + font-size: 0.8rem; + font-weight: bold; + color: #ffffff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #bfbfbf; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + text-shadow: none; + text-decoration: none; +} + +.notice { + background-color: #5BC0DE; +} + +.showSide { + display: none; +} + +.darkMask { + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0, 0, 0, 0.56); + content: ""; + z-index: 99; + display: none; +} + + +/* fix status overview */ + +.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2) { + white-space: normal; +} + +/* fix status processes */ + +.node-status-processes>.main .table .tr .td:nth-child(3) { + white-space: normal; +} + +.node-status-iptables>.main div>.cbi-map>form { + margin: 2rem 2rem 0 0; +} + +/* fix system reboot */ + +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { + padding-left: 2rem; +} + +/* fix Services Network Shares*/ +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { + margin-bottom: 1rem; + width: auto; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { + display: list-item; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { + padding-top: 1rem; +} + +/* fix System Software*/ +.node-system-packages>.main table tr td:nth-child(1) { + width: auto !important; +} + +.node-system-packages>.main table tr td:nth-last-child(1) { + white-space: normal; + font-size: small; + color: #404040; +} + +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { + padding: 0.5rem 0.8rem; +} + +.node-system-packages>.main .cbi-value>pre { + background-color: #eee; + padding: 0.5rem; + overflow: auto; +} + +.cbi-tabmenu+.cbi-section { + margin-top: 0; +} + +.node-status-iptables fieldset, +.node-system-packages fieldset, +.node-system-flashops fieldset { + margin-top: 0; +} + + +.node-system-flashops form.inline+form.inline { + margin-left: 0; +} + +#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%; +} + +/* language fix */ +body.lang_pl.node-main-login .cbi-value-title { + width: 12rem; +} + +/* applyreboot fix */ + +#applyreboot-container { + margin: 2rem; +} + +#applyreboot-section { + margin: 2rem; + line-height: 300%; +} + +.tr { + display: table-row; + border-bottom: 1px solid rgba(0, 0, 0, .05); +} + +.td, +.th { + vertical-align: middle; + text-align: center; + display: table-cell; + padding: 1rem; + white-space: nowrap; +} + +.cbi-section-table-row .td {} + +.th { + font-weight: bold; +} + +.tr.placeholder { + height: 4em; +} + +.tr.placeholder>.td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + background: inherit; +} + +.table[width="33%"], +.th[width="33%"], +.td[width="33%"] { + width: 33%; + padding-left: 1.5rem; + padding-right: 1.5rem +} + +.table[width="100%"], +.th[width="100%"], +.td[width="100%"] { + width: 100%; +} + +.table-titles .th { + padding: 0.75rem 1rem; + color: #8898aa; + background-color: #f6f9fc; +} + +.col-1 { + flex: 1 1 30px !important; + -webkit-flex: 1 1 30px !important; +} + +.col-2 { + flex: 2 2 60px !important; + -webkit-flex: 2 2 60px !important; +} + +.col-3 { + flex: 3 3 90px !important; + -webkit-flex: 3 3 90px !important; +} + +.col-4 { + flex: 4 4 120px !important; + -webkit-flex: 4 4 120px !important; +} + +.col-5 { + flex: 5 5 150px !important; + -webkit-flex: 5 5 150px !important; +} + +.col-6 { + flex: 6 6 180px !important; + -webkit-flex: 6 6 180px !important; +} + +.col-7 { + flex: 7 7 210px !important; + -webkit-flex: 7 7 210px !important; +} + +.col-8 { + flex: 8 8 240px !important; + -webkit-flex: 8 8 240px !important; +} + +.col-9 { + flex: 9 9 270px !important; + -webkit-flex: 9 9 270px !important; +} + +.col-10 { + flex: 10 10 300px !important; + -webkit-flex: 10 10 300px !important; + white-space: inherit; +} + + + +.cbi-rowstyle-2 .cbi-button-up, +.cbi-rowstyle-2 .cbi-button-down { + background-color: #FFF !important; +} + + + + +select { + padding: 0.36rem 0.8rem; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; +} + +select, +input { + font-size: .875rem; + transition: all .15s ease-in-out; + /* line-height: 1.5; */ + height: calc(2rem); + padding: 0 .75rem; + color: #8898aa; + border: 1px solid #dee2e6; + border-radius: .25rem; + background-color: #fff; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); + outline: none; + transition: box-shadow .15s ease; + margin: 0; +} + +select:not([multiple="multiple"]):focus, +input:focus { + border-color: #5e72e4; + outline: 0; + background-color: #fff; + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1); +} + +select[multiple="multiple"] { + height: auto; +} + +code { + color: #0099CC; +} + +abbr { + color: #005470; + text-decoration: underline; + cursor: help; +} + + +hr { + margin: 1rem 0; + border-color: #EEE; + opacity: 0.1; +} + +.bg-primary { + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%)!important; +} + +header, +.main { + width: 100%; +} + +header { + /* padding: 0 0 14rem 0; */ +} + +footer { + text-align: right; + /* padding: 1rem; */ + color: #aaa; + font-size: 0.8rem; + text-shadow: 0px 0px 2px #BBB; + padding: 2rem; +} + +footer>a { + color: #aaa; + text-decoration: none; +} + +.main { + top: 0rem; + bottom: 0rem; + position: relative; + height: 100%; + height: calc(100% - 4rem); +} + +.main>.loading { + position: fixed; + width: 100%; + height: 100%; + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + background-color: #f8f9fe; + top: 0; +} + +.main>.loading>span { + display: block; + text-align: center; + margin-top: 2rem; + color: #5e72e4; + font-size: 2rem; +} + +.main>.loading>span>.loading-img:before { + content: "\e603"; +} + +.main>.loading>span>.loading-img { + animation: anim-rotate 2s infinite linear; + margin-right: 0.4rem; + display: inline-block; +} + +.main>.main-right>.login-bg { + display: none; +} + +@keyframes anim-rotate { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +[id^="cbi-apply-"] { + position: fixed; + z-index: 200; + width: 20rem; + margin-left: -10rem; + margin-top: -5rem; + height: 10rem; + left: 50%; + top: 50%; + font-size: 1.2rem; + border-color: #5e72e4; + text-align: center; +} + +[id^="cbi-apply-"]>.panel-title { + border-bottom: none; +} + +[id^="cbi-apply-"]>[id^="cbi-apply-"] { + position: initial; + width: auto; + height: auto; + font-size: 1rem; + margin-left: 0rem; + margin-top: .8rem; + display: block; +} + +.main-left { + float: left; + width: 15%; + width: calc(0% + 15rem); + height: 100%; + background-color: #172b4d !important; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + overflow-x: auto; + position: fixed; + z-index: 100; +} + +.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 { + width: 85%; + width: calc(100% - 15rem); + float: right; + height: 100%; + background-color: #ffffff; +} + +.main-right>#maincontent { + position: relative; + z-index: 50; +} + +header>.container { + margin-top: 0.5rem; + padding: 0.5rem 1rem 0 1rem; +} + +.cbi-section>h3:first-child { + width: 100%; + display: block; + margin-bottom: 0; + padding: 0.5rem; + border-bottom: 1px solid rgba(0, 0, 0, .05); + background-color: #fff; + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; + font-size: 0.8rem; +} + +.panel-title { + font-size: 1.2rem; + width: 100%; + display: block; + margin-bottom: 0; + padding: 1.25rem 1.5rem; + border-bottom: 1px solid rgba(0, 0, 0, .05); + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +table, +.table { + width: 100%; +} + +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 { + padding: .5rem; + border-top: 1px solid #ddd; + white-space: nowrap; +} + +.cbi-section-table-cell { + white-space: nowrap; + align-self: flex-end; + flex: 1 1 auto; +} + +.cbi-section-table { + border: none; + margin: 0 !important; +} + + +.cbi-section-table-row:last-child { + margin-bottom: 0; +} + +.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, +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { + 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); +} + +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.danger { + background-color: #f5365c !important; + color: #fff; +} + +.warning { + background-color: #ffd600 !important; + color: #f00; +} + +.notice { + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important; + color: #fff !important; +} + +.success { + background-color: #ffffff !important; + color: #525f7f; +} + +.alert-message { + /* margin: 5rem 0 0 0 !important; + color: #5e72e4 !important; */ +} + +.errorbox, +.alert-message { + /* margin: 2rem 0 0 0; */ + padding: 2rem; + border: 0; + font-weight: normal; + font-style: normal; + line-height: 1.5em; + font-family: inherit; + min-width: inherit; + overflow: auto; + border-radius: 0.3rem; + background-color: #ffd600; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); +} + +.errorbox { + color: #fff; + background-color: #f0ad4e; + border-color: #eea236; +} + +.error { + color: red; +} + +.main>.main-left>.sidenav-header { + padding: 1.5rem; +} + +.main>.main-left>.sidenav-header>.brand { + font-size: 1.8rem; + color: #5e72e4; + font-family: "TypoGraphica"; + text-decoration: none; + padding-left: 2rem; + cursor: default; + vertical-align: text-bottom; + white-space: nowrap; +} + +.main>.main-left>.nav { + margin-top: 0.5rem; +} + +.main>.main-left>.nav>li a { + color: #8898aa; + display: block; +} + +.main>.main-left>.nav>li:nth-last-child(1) { + margin-top: 2rem; + font-size: 1.2rem; +} + +.main>.main-left>.nav>li:nth-last-child(1)>.menu:after { + content: ""; +} + +.main>.main-left>.nav>li { + padding: 0.5rem 1rem; + cursor: pointer; +} + +.main>.main-left>.nav>.slide { + padding: 0; +} + +.main>.main-left>.nav>.slide>ul { + display: none; +} + +.main>.main-left>.nav>.slide>.menu { + display: block; + margin: 0.1rem .5rem 0.1rem .5rem; + padding: .675rem 0 .675rem 3rem; + border-radius: .375rem; + text-decoration: none; + cursor: default; + font-size: 1rem; + transition: all 0.2s; + position: relative; +} + +.main>.main-left>.nav>li:hover, +.main>.main-left>.nav>.slide>.menu:hover { + cursor: pointer; + color: #fff; +} + +.main>.main-left>.nav>.slide:hover { + background: none; + +} + +.main>.main-left>.nav>.slide>.menu:hover {} + +.main>.main-left>.nav>.slide>.menu:before { + font-family: 'ssr' !important; + speak: none; + 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: 1.3rem; + padding-top: 3px; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Status]:before { + content: "\e906"; + color: #4fc352 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=System]:before { + content: "\e90a"; + color: #fb6340 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Services]:before { + content: "\e909"; + color: #11cdef !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=NAS]:before { + content: "\e90c"; + color: #f3a4b5 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Control]:before { + content: "\e90e"; + color: #f3a4b5 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=VPN]:before { + content: "\e90b"; + color: #172b4d !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Network]:before { + content: "\e908"; + color: #8965e0 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Bandwidth_Monitor]:before { + content: "\e90d"; + color: #5e72e4 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Logout]:before { + content: "\e907"; + color: #32325d !important; +} + +.main>.main-left>.nav>.slide>.menu:after { + position: absolute; + right: 0.5rem; + top: 0.8rem; + font-family: 'icomoon' !important; + speak: none; + 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; + content: '\e900'; + transition: all .15s ease; + color: #ced4da; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + transition: all 0.3s; +} + +header>.fill { + padding: 0.8rem 0; +} + +header>.fill>.container { + height: 2rem; + padding: 0 1rem; + +} + +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; +} + +.main>.main-left>.nav>.slide>.menu.active { + color: #fff; + background: #7764e4; +} + +.main>.main-left>.nav>.slide>.menu.active:after { + color: #4fc352; + transform: rotate(90deg); +} + +.main>.main-left>.nav>.slide>.slide-menu>li {} + +.main>.main-left>.nav>.slide>.slide-menu>.active { +} + +.main>.main-left>.nav>.slide>.slide-menu>li>a { + margin: 0.1rem .5rem 0.1rem 0.5rem; + padding: 0.5rem 1.5rem 0.5rem 3rem; + text-decoration: none; + white-space: nowrap; + color: #8699ad; + transition: all 0.2s; + border-radius: .375rem; +} + +.main>.main-left>.nav>.slide>.slide-menu>.active>a { + background-color: #5e72e4; + color: #fff; +} + +.main>.main-left>.nav>.slide>.slide-menu>li>a:hover { + background-color: #5e72e4; + color: #fff; +} + +.main>.main-left>.nav>.slide>.slide-menu>.active>a:hover { + background-color: #5e72e4; + color: #fff; +} + +li { + list-style-type: none; +} + +#maincontent>.container { + margin: 0 2rem 1rem 2rem; +} + +h1 { + font-size: 2rem; + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} + +h2 { + margin: 0 0 0 0; + font-size: 1.5rem; + padding: 1rem 0 !important; + color: #000; +} + +#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 { + color: #32325d !important; +} + +h3 { + font-size: 1.4rem; + width: 100%; + display: block; + margin-bottom: 0; + padding: 1.25rem 1.5rem; + padding-bottom: 10px; + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; +} + +h4 {} + +div.cbi-section, +fieldset { + margin: 10px 0; + padding: 1rem; + font-weight: normal; + font-style: normal; + line-height: 1; + font-family: inherit; + min-width: inherit; + /* overflow-x: auto; + overflow-y: hidden; */ + border: 1px solid rgba(0, 0, 0, .05); + border-radius: .375rem; + background-color: #fff; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + -webkit-overflow-scrolling: touch; +} + + + +fieldset>legend { + display: none !important; +} + +div.cbi-section>div.cbi-section, +fieldset>fieldset { + margin: 0; + padding: 0; + border: none; + box-shadow: none; +} + +fieldset.cbi-section p { + padding: 1em; +} + +.panel-title { + width: 100%; + display: block; + margin-bottom: 0; + padding: 0.5rem; + border-bottom: 1px solid rgba(0, 0, 0, .05); + background-color: #fff; + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; + font-size: 0.8rem; +} + +.table, +table { + border-spacing: 0; + border-collapse: collapse; + width: 100%; + border: 1px solid #eee; + display: table; + margin: 0 0 10px !important; + position: relative; +} + +.table>.tr>.td, +table>tbody>tr>td, +table>tfoot>tr>td, +table>thead>tr>td { + font-size: .8125rem; + white-space: nowrap; + color: #525f7f; + padding: 0.5rem; + border-top: 1px solid #f9f9f9; + white-space: nowrap; + line-height: 1.3; +} + +.table>.tr>.th, +table>tbody>tr>th, +table>tfoot>tr>th, +table>thead>tr>th { + + padding-right: 1.5rem; + padding-left: 1.5rem; + color: #8898aa; + background-color: #f6f9fc; + font-size: .65rem; + padding-top: .75rem; + padding-bottom: .75rem; + letter-spacing: 1px; + text-transform: uppercase; + border-bottom: 1px solid #e9ecef; +} + +.cbi-section-table-cell { + text-align: center; +} + +.cbi-section-table-row { + text-align: center; +} + +fieldset>table>tbody>tr:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.cbi-section-create { + margin: .5rem -3px; + display: inline-flex; + align-items: center; + padding-left: 1rem; +} /* fix multiple table */ table table { - border: none; + border: none; } .cbi-value-field table { - border: none; + border: none; } -.td>.table>.tr>.td, td>table>tbody>tr>td { - border: none; + border: none; } -.cbi-value-field>.table>.tr.td, .cbi-value-field>table>tbody>tr>td { - border: none; + border: none; } + /* button style */ .cbi-button { - -webkit-appearance: none; - text-transform: uppercase; - color: rgba(0, 0, 0, 0.87); - background-color: #F0F0F0; - transition: all 0.2s ease-in-out; - display: inline-block; - padding: 0 0.8rem; - border: none; - border-radius: 0.2rem; - cursor: pointer; - -ms-touch-action: manipulation; - touch-action: manipulation; - background-image: none; - text-align: center; - vertical-align: middle; - white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 0.8rem; - width: auto !important; + -webkit-appearance: none; + text-transform: uppercase; + /* height: 2.5rem; + line-height: 2.5rem; */ + color: rgba(0, 0, 0, 0.87); + background-color: #F0F0F0; + transition: all 0.2s ease-in-out; + display: inline-block; + padding: 0 0.8rem; + /* border: none; */ + border-radius: 0.2rem; + cursor: pointer; + -ms-touch-action: manipulation; + touch-action: manipulation; + background-image: none; + text-align: center; + vertical-align: middle; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 0.8rem; + width: auto !important; + margin-left: 0.3em; } .cbi-button:hover, .cbi-button:focus, .cbi-button:active { - color: rgba(0, 0, 0, 0.87); - outline: 0; - text-decoration: none; - color: rgba(0, 0, 0, 0.87); + outline: 0; + text-decoration: none; } .cbi-button:hover, .cbi-button:focus { - box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } .cbi-button:active { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .cbi-button:disabled { - cursor: not-allowed; - pointer-events: none; - opacity: 0.60; - box-shadow: none; + cursor: not-allowed; + pointer-events: none; + opacity: 0.60; + box-shadow: none; } form.inline+form.inline, -.cbi-button+.cbi-button { - margin-left: 0.6rem; -} +.cbi-button+.cbi-button {} .cbi-button-reset, .cbi-input-remove { - color: #fff !important; - background-color: #f0ad4e !important; - border-color: #eea236 !important; + color: #fff !important; + background-color: #f0ad4e !important; + border-color: #eea236 !important; } .cbi-input-find, @@ -1241,1007 +2180,186 @@ form.inline+form.inline, .cbi-button-find, .cbi-input-reload, .cbi-button-reload { - color: #fff !important; - background-color: #337ab7 !important; - border-color: #2e6da4 !important; + color: #fff !important; + background-color: #825ee4 !important; + border-color: #825ee4 !important; } -.cbi-input-apply, +.cbi-value-field .cbi-input-apply, .cbi-button-apply, .cbi-button-edit { - color: #fff !important; - background-color: #5e72e4 !important; - border-color: #5e72e4 !important; + color: #fff !important; + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%); } -.cbi-input-reset, + .cbi-section-remove>.cbi-button, .cbi-button-remove { - color: #fff !important; - background-color: #fb6340 !important; - border-color: #fb6340 !important; + color: #fff !important; + background-color: #fb6340 !important; + border-color: #fb6340 !important; } -.a-to-btn { - text-decoration: none; +.cbi-value-field .cbi-button-add, +.cbi-value-field .cbi-button-remove, +.cbi-value-field .cbi-button-neutral {} + +input[type="text"]+.cbi-button, +input[type="password"]+.cbi-button, +select+.cbi-button { + padding: 4px 8px; } /* table */ .tabs { - /* margin: 0 -2rem; */ - margin-top: 1rem; - /* padding-left: 0.5rem; */ - background-color: #FFFFFF; + margin: 0.5rem 0rem; + padding-left: 1rem; + background-color: #FFFFFF; + border-radius: 0.375rem; } .cbi-tabmenu>li, .tabs>li { - font-size: 1rem; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - display: inline-block; - padding: 0.6rem; + font-size: 1rem; + /* border-top-left-radius:0.25rem; */ + /* border-top-right-radius:0.25rem; */ + display: inline-block; + padding: 0.6rem; +} + +.cbi-tabmenu>li { + background: #adb5bd; } .cbi-tabmenu>li>a, .tabs>li>a { - text-decoration: none; - color: #404040; - padding: 0.5rem 0.8rem; + text-decoration: none; + color: #404040; + padding: 0.5rem 0.8rem; } .cbi-tabmenu>li>a { - color: white; -} - -.tabs>li[class~="active"], -.tabs>li:hover { - cursor: pointer; - border-bottom: 0.2rem solid #5e72e4; - color: #5e72e4; - margin-bottom: -0.2rem; -} - -.tabs>li[class~="active"]>a { - color: #5e72e4; -} - -.tabs>li:hover { - border-bottom: 0.2rem solid #C9C9C9; -} - -.cbi-tabmenu { - color: white; -} - -.cbi-tabmenu>li:hover { - background-color: #F1F1F1; -} - -.cbi-tabmenu>li:hover>a { - color: #525f7f; -} - -.cbi-tabmenu>li[class~="cbi-tab"] { - background-color: white; -} - -.cbi-tabmenu>li[class~="cbi-tab"]>a { - color: #525f7f; -} - -.cbi-tabmenu { - background-color: #adb5bd; - margin -} - -.cbi-section-remove:nth-of-type(2n), -.cbi-section-node:nth-of-type(2n) { - /* background-color: #f9f9f9; */ -} - -.cbi-section-node-tabbed { - padding: 0; - margin-top: 0; -} - -.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { - background-color: #f9f9f9; -} - -.cbi-value-field { - display: table-cell; - padding-top: 0.5em; -} - -.cbi-value-helpicon>img { - display: none; -} - -.cbi-value-helpicon:before { - content: "\f059"; -} - -.cbi-value-description { - font-size: small; - opacity: 0.5; - display: unset; -} - -.cbi-value-description img { - vertical-align: sub; -} - -.cbi-value-title { - display: table-cell; - text-align: right; - width: 23rem; - line-height: unset; - padding-top: 0.5em; - margin-right: 1.5em; - float: left; - color: #404040; - /* white-space: nowrap; - overflow: hidden; - text-overflow: clip; */ -} - -.cbi-value { - padding: 0.3rem 1rem; - width: 100%; - clear: both; -} - -.cbi-section-table-descr>.cbi-section-table-cell, -.cbi-section-table-titles>.cbi-section-table-cell { - border: none; -} - -.cbi-rowstyle-2 { - background-color: #f9f9f9; -} - -.cbi-rowstyle-2 .cbi-button-up, -.cbi-rowstyle-2 .cbi-button-down { - background-color: #FFF !important; -} - -.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - width: auto !important; -} - - -/* desc */ - -.cbi-section-descr, -.cbi-map-descr { - padding: 0.5rem; - color: #999; - font-size: small; -} - -.cbi-page-actions { - border-top: 1px solid #eee; - padding-top: 1rem; - text-align: right; -} - - -/* input */ - -.cbi-value input[type="password"], -.cbi-value input[type="text"] { - min-width: unset; -} - - -/* select */ - -.cbi-value-field .cbi-input-select { - min-width: 15rem; -} - -.ifacebadge { - display: inline-flex; - border-bottom: 1px solid #CCCCCC; - padding: 0.5rem 1rem; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -td>.ifacebadge { - background-color: #F0F0F0; - font-size: 0.9rem; -} - -.ifacebadge>img { - float: right; - margin: 0 0.3rem; -} - -.ifacebox { - text-align: center; - margin-right: 60px; -} - -.ifacebox .ifacebox-head { - border-bottom: 1px solid #ccc; - padding: 2px; - background: #eee; -} - -.ifacebox .ifacebox-head.active { - background: #5e72e4; -} - -.ifacebox .ifacebox-body { - border: 2px solid #f2f2f2; - border-top: 0; - border-radius: 0 0 4px 4px; - padding: 2px 10px; -} - -.network-status-table .ifacebox-body { - display: flex; - flex-direction: column; - height: 100%; - text-align: left; -} - -.network-status-table .ifacebox { - margin: .5em; - flex-grow: 1; -} - -.ifacebox .ifacebox-body { - padding: .25em; -} - -.ifacebox { - background-color: #fff; - border: 1px solid #ccc; - margin: 0 10px; - text-align: center; - white-space: nowrap; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - display: inline-flex; - flex-direction: column; - line-height: 1.2em; - min-width: 100px; -} - -.ifacebadge { - display: inline-block; - flex-direction: row; - white-space: nowrap; - background-color: #fff; - border: 1px solid #ccc; - padding: 2px; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: default; - line-height: 1.2em; -} - -.ifacebadge.large, -.network-status-table .ifacebox-body .ifacebadge { - display: inline-flex; - flex: 1; - padding: .25em; - min-width: 220px; - margin: .125em; - float: left; -} - -.ifacebadge img { - width: 16px; - height: 16px; - vertical-align: middle; -} - -.ifacebadge>*, -.ifacebadge.large>* { - margin: 0 .125em; -} - -.ifacebadge>*, -.ifacebadge.large>* { - margin: 0 .125em; -} - -.network-status-table { - display: flex; - flex-wrap: wrap; -} - -.cbi-tooltip { - position: absolute; - z-index: 1000; - left: -1000px; - opacity: 0; - transition: opacity .25s ease-out; -} - -.cbi-tooltip-container { - /* cursor: help; */ -} - - -/*textarea*/ - -.cbi-input-textarea { - width: 100%; - resize: none; - border-radius: 0.25rem; - /* min-height: 14rem; */ - padding: 0.8rem; - font-size: 0.8rem; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: black; -} - -#syslog { - width: 100%; - min-height: 15rem; - padding: 1rem; - font-size: small; - color: #5F5F5F; - margin-bottom: 20px; - border-radius: 0; - background-color: #FFF; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); - border: none; -} - - -/* change */ - -.uci-change-list { - font-family: monospace; -} - -.uci-change-list ins, -.uci-change-legend-label ins { - text-decoration: none; - border: 1px solid #00FF00; - background-color: #CCFFCC; - display: block; - padding: 2px; -} - -.uci-change-list del, -.uci-change-legend-label del { - text-decoration: none; - border: 1px solid #FF0000; - background-color: #FFCCCC; - display: block; - font-style: normal; - padding: 2px; -} - -.uci-change-list var, -.uci-change-legend-label var { - text-decoration: none; - border: 1px solid #CCCCCC; - background-color: #EEEEEE; - display: block; - font-style: normal; - padding: 2px; -} - -.uci-change-list var ins, -.uci-change-list var del { - border: none; - white-space: pre; - font-style: normal; - padding: 0px; -} - -.uci-change-legend { - padding: 5px; -} - -.uci-change-legend-label { - width: 150px; - float: left; -} - -.uci-change-legend-label>ins, -.uci-change-legend-label>del, -.uci-change-legend-label>var { - float: left; - margin-right: 4px; - width: 10px; - height: 10px; - display: block; -} - -.uci-change-legend-label var ins, -.uci-change-legend-label var del { - line-height: 6px; - border: none; -} - -.uci-change-list var, -.uci-change-list del, -.uci-change-list ins { - padding: 0.5rem; -} - - -/* other fix */ - -#iwsvg, -#iwsvg2, -#bwsvg { - border: 1px solid #D4D4D4 !important; - border-top: none !important; -} - -.ifacebox { - /* border: 1px solid #999; */ - background-color: #f9f9f9; -} - -.cbi-image-button { - margin-left: 0.5rem; -} - -.zonebadge { - padding: 0.2rem 0.5rem; - display: inline-block; - cursor: pointer; -} - -.zonebadge-empty { - border: 2px dashed #ddd; - color: #ddd; - font-style: italic; -} - -.zone-forwards { - display: flex; - flex-wrap: wrap; -} - -.zone-forwards .zone-src, -.zone-forwards .zone-dest { - display: flex; - flex-direction: column; -} - -.zone-forwards>span { - flex-basis: 10%; - text-align: center; -} - -.zone-forwards>* { - flex: 1 1 40%; - padding: 1px; -} - -.zonebadge>.ifacebadge { - padding: 0.2rem 1rem; - margin: 0.3rem; - border: 1px solid #6C6C6C; -} - -.zonebadge>input[type="text"] { - padding: 0.16rem 1rem; - min-width: 10rem; - margin-top: 0.3rem; -} - -.cbi-value-field .cbi-input-checkbox, -.cbi-value-field .cbi-input-radio { - height: 1rem; -} - -.cbi-value-field>input+.cbi-value-description { - padding: 0; -} - -.cbi-value-field>ul>li { - display: flex; -} - -.cbi-value-field>ul>li>label { - margin-top: 0.5rem; -} - -.cbi-value-field>ul>li .ifacebadge { - background-color: #eee; - margin-left: 0.4rem; - margin-top: -0.5rem; -} - -.cbi-section-table-row>.cbi-value-field .cbi-input-select { - min-width: 7rem; -} - -.cbi-section-create>.cbi-button-add { - margin: 0.5rem; -} - -.cbi-section-remove { - padding: 0.5rem; -} - -div.cbi-value var, -td.cbi-value-field var { - font-style: italic; - color: #0069D6; -} - -small { - font-size: 90%; - white-space: normal; - line-height: 1.42857143; -} - -.cbi-button-up, -.cbi-button-down { - display: inline-block; - min-width: 0; - padding: 0.2rem 0.3rem; - font-size: 1.2rem; -} - -.cbi-optionals { - padding: 1rem 1rem 0 1rem; - border-top: 1px solid #CCC; -} - -#diag-rc-output>pre { - background-color: #f5f5f5; - display: block; - padding: 8.5px; - margin: 0 0 18px; - line-height: 1.5rem; - -moz-border-radius: 3px; - white-space: pre-wrap; - word-wrap: break-word; - font-size: 1.4rem; - color: #404040; -} - -input[name="ping"], -input[name="traceroute"], -input[name="nslookup"] { - width: 80%; -} - -header>.container>.pull-right>* { - position: relative; - top: 0.45rem; - cursor: pointer; -} - -#xhr_poll_status>.label.success { - background-color: #14CE14; -} - -.label { - padding: 0.3rem 0.8rem; - font-size: 0.8rem; - font-weight: bold; - color: #ffffff !important; - text-transform: uppercase; - white-space: nowrap; - background-color: #bfbfbf; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - text-shadow: none; - text-decoration: none; -} - -.notice { - background-color: #11cdef; -} - -.showSide { - display: none; -} - -.darkMask { - width: 100%; - height: 100%; - position: fixed; - background-color: rgba(0, 0, 0, 0.56); - content: ""; - z-index: 99; - display: none; -} - - -/* fix Main Login*/ - -.node-main-login>.main>.main-left { - display: none; -} - -.node-main-login>.main>.main-right { - width: 100%; - background-color: #172b4d!important; -} - -.node-main-login>.main>.main-right>#maincontent { - margin-top: 5rem; - background-color: #172b4d!important; -} - -.node-main-login>.main div.cbi-section, -.node-main-login>.main fieldset { - padding: 0.5rem; - margin-bottom: 1rem; - display: inline; - background: none; - border: none; - box-shadow: none; - overflow: hidden; -} - -.node-main-login>.main .cbi-value-title { - width: 7rem; - font-size: 1rem; - line-height: 1.5; - color: #525f7f; - padding: .625rem; -} - -.node-main-login>.main #maincontent { - text-align: center; -} - -.node-main-login>.main .container { - display: inline-block; - padding: 2rem 2rem; - margin-top: 2rem !important; - background-color: #f7fafc!important; - border-radius: .375rem; - box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); - text-align: left; -} - -.node-main-login>.main .container h2 { - color: #5e72e4; - text-align: center; - letter-spacing: 4px; -} - -.node-main-login>.main .container .cbi-map-descr { - text-align: center; -} - -.node-main-login>.main .container .cbi-value-field input { - font-size: 1rem; - line-height: 1.5; - display: block; - width: 100%; - height: calc(2.75rem + 2px); - padding: .625rem .75rem; - transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: .25rem; - background-color: #fff; - background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233, 236, 239, .05); -} - -.node-main-login>.main .container .cbi-value-field input:focus { - color: #8898aa; - border-color: #5e72e4; - outline: 0; - background-color: #fff; - box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) -} - -.node-main-login>.main .container input.cbi-button { - font-size: 1rem; - height: auto; - position: relative; - transition: all .15s ease; - letter-spacing: .2em; - text-transform: none; - padding: .625rem 1.25rem; - will-change: transform; -} - -.node-main-login>.main form>div:nth-last-child(1) { - text-align: center; -} - -.node-main-login>.main .cbi-value { - display: block; -} - -.node-main-login>.main .cbi-value>* { - display: inline-block !important; -} - -.node-main-login>.main .cbi-input-user, -.node-main-login>.main .cbi-input-password { - min-width: 15rem; -} - -.node-main-login footer { - bottom: 0; - position: absolute; - width: 100%; -} - - -/* fix status overview */ - -.node-status-overview>.main div.cbi-section:nth-child(4) td:nth-child(2), -.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { - white-space: normal; -} - - -/* fix status processes */ - -.node-status-processes>.main .table .tr .td:nth-child(3), -.node-status-processes>.main table tr td:nth-child(3) { - white-space: normal; -} - -.node-status-iptables>.main div>.cbi-map>form { - margin: 1rem 2rem 0 0; -} - - -/* fix system reboot */ - -.node-system-reboot>.main>.main-right p, -.node-system-reboot>.main>.main-right h3 { - padding-left: 2rem; -} - - -/* fix Services Network Shares*/ - -.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { - margin-bottom: 1rem; - width: auto; -} - -.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { - display: list-item; -} - -.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { - padding-top: 1rem; -} - - -/* fix System Software*/ - -.node-system-packages>.main .table .tr .td:nth-child(1), -.node-system-packages>.main table tr td:nth-child(1) { - width: auto !important; -} - -.node-system-packages>.main .table .tr .td:nth-last-child(1), -.node-system-packages>.main table tr td:nth-last-child(1) { - white-space: normal; - font-size: small; - color: #404040; -} - -.node-system-packages>.main .cbi-tabmenu>li>a, -.tabs>li>a { - padding: 0.5rem 0.8rem; -} - -.node-system-packages>.main .cbi-value>pre { - background-color: #eee; - padding: 0.5rem; - overflow: auto; -} - -.cbi-tabmenu+.cbi-section { - margin-top: 0; -} - - -/* fix network firewall*/ - -.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { - min-width: 4rem; -} - -.node-status-iptables div.cbi-section, -.node-system-packages div.cbi-section, -.node-system-flashops div.cbi-section, -.node-status-iptables fieldset, -.node-system-packages fieldset, -.node-system-flashops fieldset { - margin-top: 0; -} - -.node-status-iptables .cbi-tabmenu, -.node-system-packages .cbi-tabmenu, -.node-system-flashops .cbi-tabmenu { - border: none; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); -} - -.node-system-flashops form.inline+form.inline { - margin-left: 0; -} - -#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; -} - - -/* language fix */ - -body.lang_pl.node-main-login .cbi-value-title { - width: 12rem; + color: #fff; } .cbi-dropdown { - display: inline-block; - width: 210px; - height: 30px; - padding: 4px; - font-size: 13px; - line-height: 18px; - color: #808080; - border: 1px solid #ccc; - border-radius: 3px; - box-sizing: border-box; -} - -.cbi-dropdown { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-flex; - padding: 0; - cursor: pointer; - height: auto; - background: linear-gradient(#fff 0%, #e9e8e6 100%); - position: relative; - color: #404040; -} - -.cbi-dropdown { - min-width: 210px; - max-width: 400px; - width: auto; + display: inline-flex; + cursor: pointer; + position: relative; + padding: 0; + height: auto; } .cbi-dropdown:focus { - outline: 2px solid #4b6e9b; + outline: 2px solid #4b6e9b; } .cbi-dropdown>ul { - margin: 0 !important; - padding: 0; - list-style: none; - overflow-x: hidden; - overflow-y: auto; - display: flex; - width: 100%; + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; } .cbi-dropdown>ul.preview { - display: none; + display: none; +} + +.cbi-dropdown>.open { + border: 0px outset #eee; + flex-basis: 15px; + background: #fff; } .cbi-dropdown>.open, .cbi-dropdown>.more { - flex-grow: 0; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - line-height: 2em; - padding: 0 .25em; + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; } .cbi-dropdown>.more, .cbi-dropdown>ul>li[placeholder] { - color: #777; - font-weight: bold; - text-shadow: 1px 1px 0px #fff; - display: none; + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; } .cbi-dropdown>ul>li { - display: none; - padding: .25em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 1; - flex-grow: 1; - align-items: center; - align-self: center; - color: #404040; - min-height: 20px; + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + min-height: 20px; } .cbi-dropdown>ul>li .hide-open { - display: block; - display: initial; + display: initial; } .cbi-dropdown>ul>li .hide-close { - display: none; + display: none; } .cbi-dropdown>ul>li[display]:not([display="0"]) { - border-left: 1px solid #ccc; + border-left: 1px solid #ccc; } .cbi-dropdown[empty]>ul { - max-width: 1px; + max-width: 1px; } .cbi-dropdown>ul>li>form { - display: none; - margin: 0; - padding: 0; - pointer-events: none; + display: none; + margin: 0; + padding: 0; + pointer-events: none; } .cbi-dropdown>ul>li img { - vertical-align: middle; - margin-right: .25em; + vertical-align: middle; + margin-right: .25em; } .cbi-dropdown>ul>li>form>input[type="checkbox"] { - margin: 0; + margin: 0; + height: auto; } .cbi-dropdown>ul>li input[type="text"] { - height: 20px; + height: 20px; } .cbi-dropdown[open] { - position: relative; + position: relative; + border-color: #5e72e4; } .cbi-dropdown[open]>ul.dropdown { - display: block; - background: #f6f6f5; - border: 1px solid #918e8c; - box-shadow: 0 0 4px #918e8c; - position: absolute; - z-index: 1000; - max-width: none; - min-width: 100%; - width: auto; + display: block; + background: #fff; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .05); } .cbi-dropdown>ul>li[display], @@ -2251,327 +2369,1469 @@ body.lang_pl.node-main-login .cbi-value-title { .cbi-dropdown[multiple][open]>ul.dropdown>li, .cbi-dropdown[multiple][more]>.more, .cbi-dropdown[multiple][empty]>.more { - flex-grow: 1; - display: flex; + flex-grow: 1; + display: flex; + align-items: center; } .cbi-dropdown[empty]>ul>li, .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder], .cbi-dropdown[multiple][open]>ul.dropdown>li>form { - display: block; + display: block; } .cbi-dropdown[open]>ul.dropdown>li .hide-open { - display: none; + display: none; } .cbi-dropdown[open]>ul.dropdown>li .hide-close { - display: block; - display: initial; + display: initial; } .cbi-dropdown[open]>ul.dropdown>li { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #ccc; + color: #000; } .cbi-dropdown[open]>ul.dropdown>li[selected] { - background: #b0d0f0; + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%); } .cbi-dropdown[open]>ul.dropdown>li.focus { - background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); + background: linear-gradient(90deg, #825ee4 0%, #5e72e4 100%); } .cbi-dropdown[open]>ul.dropdown>li:last-child { - margin-bottom: 0; - border-bottom: none; + margin-bottom: 0; + border-bottom: none; } .cbi-dropdown[disabled] { - pointer-events: none; - opacity: .6; + pointer-events: none; + opacity: .6; } +.cbi-dropdown .zonebadge { + width: 100%; +} + +.cbi-dropdown[open] .zonebadge { + width: 100%; +} + +.cbi-dropdown { + font-size: .875rem; + transition: all .15s ease-in-out; + line-height: 1.5; + color: #8898aa; + border: 1px solid #dee2e6; + border-radius: .25rem; + background-color: #fff; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); + margin: 0.25rem; +} + +.cbi-value-field .cbi-dropdown .zonebadge>.ifacebadge { + padding: 0rem 1rem; + margin: 0rem 0.3rem; + border: 1px solid #6C6C6C; +} + +select[multiple="multiple"] { + height: auto; +} + +.cbi-dropdown>ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: hidden; + display: flex; + width: 100%; +} + +/* select */ +.cbi-value-field .cbi-dropdown { + min-width: 15rem; +} + +.cbi-section>legend { + display: none !important; +} + +.tabs>li[class~="active"], +.tabs>li:hover { + cursor: pointer; + margin-bottom: 0; + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%); +} + +.tabs>li[class~="active"] > a, +.tabs>li:hover > a { + color: #fff; +} + +.cbi-tabmenu { + color: white; + /* padding: 0.5rem 1rem 0 1rem; */ +} + +.cbi-tabmenu>li:hover { + background-color: #F1F1F1; +} + +.cbi-tabmenu>li:hover>a { + color: #525f7f; +} + +.cbi-tabmenu>li[class~="cbi-tab"] { + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%); +} + +.cbi-tabmenu>li[class~="cbi-tab"]>a { + color: #fff; +} + + + +.cbi-section-remove:nth-of-type(2n), +.cbi-section-node:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.cbi-section-node-tabbed { + padding: 0; + margin-top: 0; + +} + +.cbi-section-node { + background: #fff; + border: 0; + border-radius: .375rem; + margin-bottom: 0px; + box-shadow: 0 0 0rem 0 rgba(136, 152, 170, .15); + overflow-x: auto; + overflow-y: hidden; + padding: 0rem 0; +} + +#cbi-network-lan.cbi-section-node { + overflow-x: visible; + overflow-y: visible; +} + +#cbi-network .cbi-section, +#cbi-network .cbi-section .cbi-section-node {} + +.cbi-section-node .cbi-value { + /* padding: 0.3rem 0rem 0.3rem 1rem; +*/ +} + + +.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.cbi-value-field { + display: table-cell; + /* line-height: 1.25; */ + padding-top: 0.5em; +} + +.cbi-value-helpicon>img { + display: none; +} + +.cbi-value-helpicon:before { + content: "\f059"; +} + +.cbi-value-description { + font-size: small; + opacity: 0.8; + display: unset; +} + +.cbi-value-title { + display: table-cell; + text-align: right; + width: 23rem; + line-height: unset; + padding-top: 0.5em; + margin-right: 1.5em; + float: left; + color: #404040; +} + +/* +.cbi-value-title { + word-wrap: break-word; + font-size: 0.875rem; + line-height: 1.6; + color: #525f7f; + padding: .7rem; + padding-left:0; + width: 23rem; + float: left; + text-align: right; + display: table-cell; +} +*/ + +.cbi-value { + /* margin-bottom: 0.1em; */ + display: inline-block; + width: 100%; + clear: both; +} + +.cbi-section-table-descr>.cbi-section-table-cell, +.cbi-section-table-titles>.cbi-section-table-cell { + border: none; +} + +.cbi-rowstyle-1 { + background-color: #fff; +} + +.cbi-rowstyle-2 { + background-color: #fefefe; +} + +/* desc */ +.cbi-section-descr { + padding: 1rem 0 1rem 2rem; + font-size: 0.7rem; + font-weight: 600; + color: #525f7f; +} + +.cbi-map-descr { + padding: 0rem 0 1rem 0rem; + color: #000; + font-size: small; +} + +/* luci */ + +.hidden { + display: none +} + +.left { + text-align: left !important; +} + +.right { + text-align: right !important; +} + +.inline { + display: inline; +} + +input[type="checkbox"] { + height: auto; +} + +/* select */ + + +.cbi-value-field .ifacebadge { + display: inline-flex; + /* border-bottom: 0px solid #CCCCCC; */ + padding: 0.5rem 1rem; + box-shadow: none; +} + +td>.ifacebadge { + background-color: #F0F0F0; + font-size: 0.9rem; +} + +.ifacebadge>img { + float: right; + margin: 0 0.3rem; +} + +/*textarea*/ + +.cbi-input-textarea { + width: 100%; + resize: none; + outline: none; + min-height: 14rem; + padding: 0.8rem; + font-size: 0.8rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: black; + border-radius: 0.25rem; +} + +#syslog { + width: 100%; + min-height: 15rem; + padding: 1rem; + font-size: small; + color: #5F5F5F; + border-radius: 0; + background-color: #FFF; + border: none; + outline: none; +} + +/* change */ + +.uci-change-list { + + font-family: monospace; +} + +.uci-change-list ins strong { + display: inline; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + text-decoration: none; + border: 1px solid #00FF00; + background-color: #CCFFCC; + display: block; + padding: 0 1rem; + margin: 0.5rem 0; +} + +.uci-change-list del, +.uci-change-legend-label del { + text-decoration: none; + border: 1px solid #FF0000; + background-color: #FFCCCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var, +.uci-change-legend-label var { + text-decoration: none; + border: 1px solid #CCCCCC; + background-color: #CCFFCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var ins, +.uci-change-list var del { + border: none; + white-space: pre; + font-style: normal; + padding: 0px; +} + +.uci-change-legend { + padding: 5px 2rem; +} + + + + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + line-height: 6px; + border: none; +} + +.uci-change-list var, +.uci-change-list del, +.uci-change-list ins { + padding: 0.5rem; +} + +/* other fix */ + + +.ifacebadge { + display: inline-flex; + border-bottom: 1px solid #CCCCCC; + padding: 0.5rem 1rem; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +td>.ifacebadge { + background-color: #F0F0F0; + font-size: 0.9rem; +} + +.ifacebadge>img { + float: right; + margin: 0 0.3rem; +} + +.ifacebox { + text-align: center; + margin-right: 60px; +} + +.ifacebox .ifacebox-head { + border-bottom: 1px solid #ccc; + padding: 2px; + background: #eee; +} + +.ifacebox .ifacebox-head.active { + background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%)!important; + color: #fff; +} + +.ifacebox .ifacebox-body { + border: 2px solid #f2f2f2; + border-top: 0; + border-radius: 0 0 4px 4px; + padding: 2px 10px; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; +} + +.network-status-table .ifacebox { + margin: .5em; + flex-grow: 1; +} + +.ifacebox .ifacebox-body { + padding: .25em; +} + +.ifacebox { + background-color: #fff; + border: 1px solid #ccc; + margin: 0 10px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; +} + +.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #fff; + border: 1px solid #ccc; + padding: 2px; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + display: inline-flex; + flex: 1; + padding: .25em; + min-width: 220px; + margin: .125em; + float: left; +} + +.ifacebadge img { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.ifacebadge>*, +.ifacebadge.large>* { + margin: 0 .125em; +} + +.ifacebadge>*, +.ifacebadge.large>* { + margin: 0 .125em; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; +} + +.cbi-image-button { + margin-left: 0.5rem; +} + +#iwsvg, +#iwsvg2, +#bwsvg { + border: none !important; + border-radius: 0.375rem; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + overflow: hidden; +} + + + +.cbi-image-button { + margin-left: 0.5rem; +} + +.zonebadge { + display: inline-block; + border-radius: 4px; + color: #000; + white-space: nowrap; + padding: 0 8px; + cursor: pointer; +} + +.zonebadge em, +.zonebadge strong { + margin: 0 5px; + color: #000; +} + +.zonebadge>.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #3c3a38; + border: 1px solid #ccc; + padding: 2px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.zonebadge>input[type="text"] { + padding: 0.16rem 1rem; + min-width: 10rem; + margin-top: 0.3rem; +} + +.cbi-value-field .cbi-input-checkbox, +.cbi-value-field .cbi-input-radio { + /* margin-top: 0.9rem; */ + height: 1rem; +} + +input[type=checkbox], +input[type=radio] { + width: auto; + margin: 0; + vertical-align: middle; + cursor: pointer; +} + +.cbi-value-field>input+.cbi-value-description { + padding: 0; +} + +.cbi-value-field>ul>li { + display: flex; +} + +.cbi-value-field>ul>li>label { + margin-top: -0.1rem; +} + +.cbi-value-field>ul>li .ifacebadge { + background-color: #eee; + margin-left: 0.4rem; + margin-top: -0.5rem; +} + +.cbi-section-table-row>.cbi-value-field .cbi-input-select { + min-width: 7rem; +} + +.cbi-section-create>.cbi-button-add { + margin: 0.5rem; +} + +.cbi-section-remove { + padding: 0.5rem; +} + +div.cbi-value var, +td.cbi-value-field var { + font-style: italic; + color: #0069D6; +} + +small { + font-size: 90%; + white-space: normal; + line-height: 1.42857143; +} + + +.cbi-optionals { + padding: 1rem 1rem 0 1rem; + border-top: 1px solid #CCC; +} + + +input[name="ping"], +input[name="traceroute"], +input[name="nslookup"] { + width: 80%; +} + +header>.container>.pull-right>* { + position: relative; + top: 0.45rem; + cursor: pointer; +} + + +.label { + padding: 0.3rem 0.8rem; + font-size: 0.8rem; + font-weight: bold; + color: #fff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #32325d; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + text-shadow: none; + text-decoration: none; +} + + + +.showSide { + display: none; + color: #fff; + font-size: 1.4rem; +} + +.darkMask { + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0, 0, 0, 0.56); + z-index: 99; + left: 0; + top: 0; + display: none; +} + +/* fix Main Login*/ +.node-main-login>.main>.main-right>header { + background: none !important; + box-shadow: none !important; + display: none; +} + +.node-main-login>.main>.main-right>header>.fill>.container { + margin: 2rem auto; + max-width: 1140px; +} + +.node-main-login>.main>.main-right>header>.fill>.container>.brand { + font-size: 2rem; + color: #5e72e4; + display: none; + +} + +.node-main-login>.main { + top: 0; + height: 100% !important; +} + +.node-main-login>.main>.main-left { + display: none; +} + +.node-main-login>.main>.main-right { + width: 100%; +} + +.node-main-login>.main>.main-right>.login-bg { + display: block; + position: fixed; + width: 100%; + height: 100%; + left: 0px; + top: 0px; + background-size: cover; + background-color: #000; + background-position: top center; + transition: all 0.5s; +} + +.node-main-login>.main>.main-right>.login-bg.blur { + transform: scale(1.05); + -webkit-filter: blur(5px); + /* Chrome, Safari, Opera */ + filter: blur(5px); +} + +.node-main-login>.main>.main-right>#maincontent { + padding-top: 23vh; + height: 100%; + background-color: transparent !important; + margin-top: 0rem; +} + +.node-main-login>.main fieldset, +.node-main-login>.main .cbi-section, +.node-main-login>.main .cbi-section>.cbi-section-node { + padding: 0.5rem; + margin: 0rem; + /* display: inline; */ + background: none; + border: none; + box-shadow: none; + overflow: hidden; +} + +.node-main-login>.main .cbi-value-title { + font-size: 1rem; + line-height: 1.5; + color: #525f7f; + padding: .625rem; +} + +.node-main-login>.main #maincontent { + + text-align: center; +} + +.node-main-login>.main .container { + display: inline-block; + padding: 2rem 2rem; + position: relative; + margin-top: 2rem !important; + background-color: #f7fafc !important; + border-radius: .375rem; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + text-align: left; +} + +.node-main-login>.main .container h2 { + width: 120px; + height: 120px; + color: #fff; + text-align: center; + letter-spacing: 4px; + display: block; + margin: -100px auto 15px auto; + padding: 0; + text-indent: -500px; + overflow: hidden; + border-radius: 60px; + border: #fff 3px solid; + + background-image: url(../logo.png); + background-size: cover; + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); + +} + +.node-main-login>.main .container .cbi-map-descr { + text-align: center; + padding: 1rem; + color: #8898aa; +} + +.node-main-login>.main .container .cbi-section-node { + padding: 0; +} + + +.node-main-login>.main .container .cbi-value-field input { + font-size: 1rem; + line-height: 1.5; + display: block; + width: 100%; + height: calc(2.75rem + 2px); + padding: .625rem .75rem; + transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); + color: #8898aa; + border: 0px solid #dee2e6; + border-radius: .25rem; + background-color: #fff; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); +} + +.node-main-login>.main .container .cbi-value-field input:focus { + color: #8898aa; + + outline: 0; + background-color: #fff; + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) +} + +.node-main-login>.main .container input.cbi-button { + font-size: 1rem; + height: auto; + position: relative; + transition: all .15s ease; + letter-spacing: .2em; + text-transform: none; + padding: .625rem 1.25rem; + will-change: transform; + line-height: 1.5em; +} + +.node-main-login>.main form>div:nth-last-child(1) { + text-align: center; + border-top: 0; + padding-top: 2rem; +} + +.node-main-login>.main .cbi-value { + display: block; + padding: 0; +} + + +.node-main-login>.main .cbi-value>* { + display: inline-block !important; +} + +.node-main-login>.main .cbi-value:first-child, +.node-main-login>.main .cbi-button-reset { + display: none !important; +} + + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-title { + display: none !important; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-text { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); + transition: box-shadow .15s ease; + border-radius: .375rem; + box-sizing: border-box; + padding-left: 3em; + margin: 0; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-password, +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-text[type="password"] { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); + transition: box-shadow .15s ease; + border-radius: .375rem; + box-sizing: border-box; + padding-left: 3em; + margin: 0; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field { + position: relative; + width: 20rem; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field:before { + font-family: 'icomoon' !important; + speak: none; + 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: "\e901"; + color: #adb5bd; + font-size: 1.5rem; + position: absolute; + z-index: 100; + left: 10px; + top: 10px; +} + +.node-main-login>.main .cbi-input-user, +.node-main-login>.main .cbi-input-password, +.node-main-login>.main .cbi-input-text[type="user"], +.node-main-login>.main .cbi-input-text[type="password"] { + min-width: 15rem; +} + +.node-main-login .errorbox, +.node-main-login .alert-message.warning { + position: absolute; + color: #fff; + width: calc(100% - 4rem); + border-color: #eea236; + box-sizing: border-box; + margin-top: 8rem; + border-radius: 5px; + padding: 1rem 2rem; + text-align: center; + background-color: #8965e0 !important; + +} + +.node-main-login footer { + bottom: 0; + position: absolute; + width: 100%; + color: #fff; +} + +.node-main-login footer>a { + color: #fff; +} + +/* fix status overview */ + +.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { + white-space: normal; +} + +/* fix status processes */ + +.node-status-processes>.main table tr td:nth-child(3) { + white-space: normal; +} + +.node-status-iptables>.main div>.cbi-map>form { + margin: 0.5rem 2rem 0 0; +} + +/* fix system reboot */ + +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { + padding-left: 2rem; + color: #fff; +} + +/* fix Services Network Shares*/ +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { + margin-bottom: 1rem; + width: auto; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { + display: list-item; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { + padding-top: 1rem; +} + +/* fix System Software*/ +.node-system-packages>.main table tr td:nth-child(1) { + width: auto !important; +} + +.node-system-packages>.main table tr td:nth-last-child(1) { + white-space: normal; + font-size: small; + color: #404040; +} + +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { + padding: 0.5rem 0.8rem; +} + +.node-system-packages>.main .cbi-value>pre { + background-color: #eee; + padding: 0.5rem; + overflow: auto; +} + +.cbi-tabmenu+.cbi-section { + margin-top: 0; +} + +.cbi-section { + /* background: #fff; + border: 0; + border-radius: .375rem; + margin-bottom: 30px; + box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + overflow-x: auto; + overflow-y:hidden; +*/ +} + +.cbi-section em { + padding: 0rem 1.5rem; + font-size: 0.7rem; + font-weight: 600; + color: #525f7f; +} + + +#cbi-system-led em { + /* padding :0.75rem 1.5rem; */ +} + +.cbi-section h4 { + /* padding :0.75rem 1.5rem; */ + font-size: 0.7rem; + font-weight: 600; + color: #525f7f; +} + +.node-main-login .cbi-section { + margin-bottom: 0px; + padding-bottom: 0px; +} + +#content_syslog { + border-radius: .375rem; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + overflow: hidden; +} + +.node-system-packages .cbi-section-node .cbi-value { + /* padding: 1rem 1rem; */ +} + +.node-system-packages br { + display: none; +} + +/* fix network firewall*/ +.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { + min-width: 4rem; +} + +.node-status-iptables fieldset, +.node-system-packages fieldset, +.node-system-flashops fieldset { + margin-top: 0; +} + +.node-status-iptables .cbi-tabmenu, +.node-system-packages .cbi-tabmenu, +.node-system-flashops .cbi-tabmenu { + border: none; + /* padding-left: 2rem; */ +} + +.node-system-flashops form.inline+form.inline { + margin-left: 0; +} + + + + @media screen and (max-width: 1600px) { - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - .cbi-button { - padding: 0.3rem 1.5rem; - font-size: 0.8rem; - } - header>.container>.pull-right>* { - top: 0.35rem; - } - .label { - padding: 0.2rem 0.6rem; - } - .cbi-value-title { - width: 15rem; - } - div.cbi-section,fieldset { - padding: 0; - margin: 1rem 0 0 0; - overflow-x: auto; - } - .cbi-input-textarea { - font-size: small; - } - .node-status-iptables>.main div.cbi-section li>a, - .node-status-iptables>.main fieldset li>a { - padding: 0.3rem 0.6rem; - } + .main-left { + width: calc(0% + 13rem); + } + + .main-right { + width: calc(100% - 13rem); + } + + .cbi-button { + /*padding: 0.3rem 1.5rem;*/ + font-size: 0.8rem; + } + + header>.container>.pull-right>* { + top: 0.35rem; + } + + .label { + padding: 0.2rem 0.6rem; + } + + .cbi-value-title { + width: 15rem; + padding-right: 0.6rem; + } + + fieldset { + padding: 0; + } + + .cbi-input-textarea { + font-size: small; + } + + .node-status-iptables>.main fieldset li>a { + padding: 0.3rem 0.6rem; + } } @media screen and (max-width: 1280px) { - header { - height: 3.5rem; - } - header>.container { - margin-top: 0.25rem; - } - .main { - top: 3.5rem; - height: calc(100% - 3.5rem); - } - .main-left { - width: calc(0% + 13rem); - top: 3.5rem; - height: calc(100% - 3.5rem); - } - .main-right { - width: calc(100% - 13rem); - } - .cbi-tabmenu>li>a, - .tabs>li>a { - padding: 0.2rem 0.5rem; - } - .panel-title { - /* font-size: 1.1rem; - padding-bottom: 1rem; */ - } - table { - font-size: 0.7rem !important; - width: 100% !important; - } - .main>.main-left>.nav>li, - .main>.main-left>.nav>li a, - .main>.main-left>.nav>.slide>.menu { - font-size: 0.9rem; - } - .main>.main-left>.nav>.slide>.slide-menu>li>a { - font-size: 0.7rem; - } + + header>.container { + margin-top: 0.25rem; + } + + + .main-left { + width: calc(0% + 13rem); + } + + .main-right { + width: calc(100% - 13rem); + } + + .cbi-tabmenu>li>a, + .tabs>li>a { + padding: 0.2rem 0.5rem; + } + + .panel-title { + font-size: 1.1rem; + padding-bottom: 1rem; + } + + .table, + table { + font-size: 0.7rem !important; + width: 100% !important; + } + + .main>.main-left>.nav>li, + .main>.main-left>.nav>li a, + .main>.main-left>.nav>.slide>.menu { + font-size: 0.9rem; + } + + .main>.main-left>.nav>.slide>.slide-menu>li>a { + font-size: 0.7rem; + } } @media screen and (max-width: 992px) { - .main-left { - width: 0; - position: fixed; - z-index: 100; - } - .main-right { - width: 100%; - } - .showSide { - padding: 0.1rem; - margin-right: 0.5rem; - display: inline-block; - } - .showSide:before { - content: "\e20e"; - font-size: 1.7rem; - } - .node-main-login .showSide { - display: none !important; - } - .cbi-value-title { - /* width: 9rem; */ - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div *, - .node-network-diagnostics>.main .cbi-map fieldset>div * { - width: 100% !important; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div input[type="text"], - .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { - margin: 3rem 0 0 0 !important; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div:nth-child(4) input[type="text"], - .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { - margin: 0 !important; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div select, - .node-network-diagnostics>.main .cbi-map fieldset>div select, - .node-network-diagnostics>.main .cbi-map div.cbi-section>div input[type="button"], - .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { - margin: 1rem 0 0 0; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div, - .node-network-diagnostics>.main .cbi-map fieldset>div { - width: 100% !important; - } - #diag-rc-output>pre { - font-size: 1rem; - } - .node-main-login>.main .cbi-value-title { - text-align: left; - } + .main-left { + width: 0; + position: fixed; + z-index: 100; + } + + .main-right { + width: 100%; + } + + .showSide { + padding: 0.1rem; + position: relative; + z-index: 999; + display: inline-block; + } + + .showSide:before { + content: "\e20e"; + font-size: 1.7rem; + } + + .node-main-login .showSide { + display: none !important; + } + + header>.fill>.container>.brand { + display: inline-block; + } + + .cbi-value-title { + /* width: 9rem; + padding-right: 1rem; */ + } + + .node-network-diagnostics>.main .cbi-map fieldset>div * { + width: 100% !important; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { + margin: 3rem 0 0 0 !important; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { + margin: 0 !important; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div select, + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { + margin: 1rem 0 0 0; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div { + width: 100% !important; + } + + #diag-rc-output>pre { + font-size: 1rem; + } + + .node-main-login>.main .cbi-value-title { + text-align: left; + } } @media screen and (max-width: 480px) { - div.cbi-section,fieldset { - padding: 0; - margin: 1rem 0 0 0; - overflow-x: auto; - } - .tabs { - margin: 0 -1rem; - } - #maincontent>.container { - margin: 0 1rem 1.5rem 1rem; - } - .main>.main-left>.nav>.slide>.menu { - font-size: 1rem; - } - .main>.main-left>.nav>.slide>.slide-menu>li>a { - font-size: 0.9rem; - } - .cbi-value { - padding: 0.6em 0em; - } - .cbi-value-title { - width: 40%; - min-width: 0rem !important; - text-align: left; - padding-left: 1em; - } - .cbi-value-field, - .cbi-value-description { - width: 100%; - } - .cbi-value-field .cbi-input-select { - width: 95%; - min-width: unset; - } - .cbi-value-field .cbi-input-textarea { - width: 95% !important; - min-width: unset; - } - .cbi-value>.cbi-value-field { - display: table-cell; - width: 20em; - } - .cbi-tabmenu>li, - .tabs>li { - padding: 0.6rem 0rem; - } - .cbi-tabmenu>li>a, - .tabs>li>a { - padding: 0.2rem 0.3rem; - font-size: 0.9rem; - } - .cbi-page-actions>div>input { - display: none; - } - .node-main-login>.main .container { - padding: 0.5rem 1rem 2rem 1rem; - } - .node-main-login>.main .cbi-value { - padding: 0; - } - .node-main-login>.main .cbi-value>* { - width: 100%; - } - .node-main-login>.main form>div:nth-last-child(1) { - margin-top: 2rem; - } - .node-main-login>.main .cbi-value-title { - width: 100% !important; - font-size: 1.2rem; - } - .node-main-login>.main div.cbi-section, - .node-main-login>.main fieldset { - margin: 0; - padding: 0.5rem; - } - h2 { - font-size: 1.5rem; - } - .tabs>li>a { - font-size: 0.9rem; - } - select, - input { - font-size: 0.9rem; - } - .mobile-hide { - display: none; - } - .panel-title { - /*font-size: 1.4rem; - padding-bottom: 1rem; */ - } - .node-system-packages>.main .cbi-value.cbi-value-last>div { - width: 100% !important; - } - .node-system-packages>.main .cbi-value .cbi-value-field input { - width: 100%; - } - .node-status-iptables>.main div>.cbi-map>form { - position: static !important; - margin: 0 0 2rem 0; - padding: 2rem; - border: 0; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - min-width: inherit; - overflow-x: auto; - overflow-y: hidden; - border-radius: 0; - background-color: #FFF; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); - -webkit-overflow-scrolling: touch; - } - .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { - width: 100% !important; - margin: 0; - } - .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { - margin-top: 1rem; - } + body { + font-size: 0.8rem; + } + + div.cbi-section, + fieldset { + padding: 0; + margin: 1rem 0 0 0; + overflow-x: auto; + } + + .tabs { + margin: 0.5rem 0rem + } + + .toggle { + margin: 0; + } + + #maincontent>.container { + margin: 0 1rem 1.5rem 1rem; + } + + .main>.main-left>.nav>.slide>.menu { + font-size: 1rem; + } + + .main>.main-left>.nav>.slide>.slide-menu>li>a { + font-size: 0.9rem; + } + + .main>.main-left>.nav>.slide>.menu:before { + padding-top: 5px; + } + + .main>.main-left>.nav>.slide>.menu:after { + top: 0.9rem; + } + + .cbi-value { + padding: 0.6em 0em; + } + + .cbi-value-title { + width: 40%; + min-width: 0rem !important; + text-align: left; + padding-left: 1em; + } + + + .cbi-value-field, + .cbi-value-description { + width: 95%; + } + + select, + input { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-select { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-textarea { + width: 95% !important; + min-width: unset; + } + + .cbi-value>.cbi-value-field { + /* display: inline-block; + padding-left: 1rem; */ + + display: table-cell; + width: 20em; + } + + .node-main-login .cbi-value>.cbi-value-field { + width: 18rem; + padding-left: 0rem; + } + + .cbi-tabmenu>li, + .tabs>li { + padding: 0.6rem 0rem; + } + + .cbi-tabmenu>li>a, + .tabs>li>a { + padding: 0.2rem 0.3rem; + font-size: 0.9rem; + } + + .cbi-page-actions>div>input { + display: none; + } + + + + .node-main-login>.main .container { + padding: 0.5rem 1rem 2rem 1rem; + margin: 0 auto !important; + } + + + + .node-main-login>.main form>div:nth-last-child(1) { + margin-top: 0rem; + } + + .node-main-login>.main .cbi-value-title { + width: 100% !important; + margin-top: 0rem; + font-size: 1rem; + margin-bottom: 0; + padding: 0 0.5rem; + } + + .node-main-login>.main fieldset { + margin: 0; + padding: 0.5rem; + } + + .node-main-login .alert-message.warning { + width: calc(100% - 2rem); + padding: 1rem 1rem; + font-size: 12px; + } + + + h2 { + font-size: 1.5rem; + + } + + .node-main-login>.main .container h2 { + + margin: -70px auto 15px auto; + + + } + + .tabs>li>a { + font-size: 0.9rem; + } + + select, + input { + font-size: 0.9rem; + } + + .mobile-hide { + display: none; + } + + .panel-title { + font-size: 1.4rem; + padding-bottom: 1rem; + } + + .node-system-packages>.main .cbi-value.cbi-value-last>div { + width: 100% !important; + } + + .node-system-packages .cbi-section-node .cbi-value { + padding: 0.3rem 1rem; + } + + .node-system-packages>.main .cbi-value .cbi-value-field input { + width: 100%; + } + + .node-status-iptables>.main div>.cbi-map>form { + position: static !important; + margin: 0 0 2rem 0; + padding: 2rem; + border: 0; + font-weight: normal; + font-style: normal; + line-height: 1; + font-family: inherit; + min-width: inherit; + overflow-x: auto; + overflow-y: hidden; + border-radius: 0.375rem; + background-color: #FFF; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + -webkit-overflow-scrolling: touch; + } + + .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { + width: 100% !important; + margin: 0; + } + + .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { + margin-top: 1rem; + } } @media screen and (min-width: 992px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 20rem; - } - .cbi-value-field .cbi-input-select { - min-width: 20rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 20rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 20rem; + } } @media screen and (min-width: 1280px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 22rem; - } - .cbi-value-field .cbi-input-select { - min-width: 22rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 22rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 22rem; + } } @media screen and (min-width: 1600px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 25rem; - } - .cbi-value-field .cbi-input-select { - min-width: 25rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 25rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 25rem; + } } \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/favicon.ico b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/favicon.ico index b407d18455..82faa6bf92 100644 Binary files a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/favicon.ico and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/favicon.ico differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.eot b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.eot new file mode 100644 index 0000000000..efce636a84 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.eot differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.svg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.svg new file mode 100644 index 0000000000..c555b7594f --- /dev/null +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.svg @@ -0,0 +1,1191 @@ + + + + +Created by FontForge 20090622 at Tue Jul 23 03:29:07 2019 + By deploy user +TypoGraphica ©Sharkshock Productions 2015. All Rights Reserved + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.ttf b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.ttf new file mode 100644 index 0000000000..e11f89a0f7 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.ttf differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.woff b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.woff new file mode 100644 index 0000000000..fef38ca003 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/TypoGraphica.woff differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.eot b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.eot new file mode 100644 index 0000000000..2bce3c8b37 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.eot differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.svg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.svg new file mode 100644 index 0000000000..d5495c14aa --- /dev/null +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.svg @@ -0,0 +1,12 @@ + + + +Generated by IcoMoon + + + + + + + + \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.ttf b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.ttf new file mode 100644 index 0000000000..ca364a1b69 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.ttf differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.woff b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.woff new file mode 100644 index 0000000000..7c3a2fee71 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/fonts/icomoon.woff differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg1.jpg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg1.jpg new file mode 100644 index 0000000000..ab7821c7f1 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg1.jpg differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg2.jpg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg2.jpg new file mode 100644 index 0000000000..35f6b02431 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg2.jpg differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg3.jpg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg3.jpg new file mode 100644 index 0000000000..a614e1a985 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/img/bg3.jpg differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/js/script.js b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/js/script.js index 454c31eb79..01957172ee 100644 --- a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/js/script.js +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark/js/script.js @@ -1,11 +1,11 @@ /** - * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * - * luci-theme-material - * Copyright 2015 Lutty Yang + * luci-theme-argon + * Copyright 2019 Jerrykuku * * Have a bug? Please create an issue here on GitHub! - * https://github.com/LuttyYang/luci-theme-material/issues + * https://github.com/jerrykuku/luci-theme-argon/issues * * luci-theme-bootstrap: * Copyright 2008 Steven Barth @@ -15,11 +15,23 @@ * 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 */ - - + +/* + * Font generate by Icomoon + */ (function ($) { + $(".main > .loading").hide(); $(".main > .loading").fadeOut(); /** @@ -36,16 +48,16 @@ var mainNodeName = undefined; var nodeUrl = ""; - (function(node){ - if (node[0] == "admin"){ + (function (node) { + if (node[0] == "admin") { luciLocation = [node[1], node[2]]; - }else{ + } else { luciLocation = node; } - for(var i in luciLocation){ + for (var i in luciLocation) { nodeUrl += luciLocation[i]; - if (i != luciLocation.length - 1){ + if (i != luciLocation.length - 1) { nodeUrl += "/"; } } @@ -61,9 +73,11 @@ luciLocation = ["Main", "Login"]; return true; } - + $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast"); + $(".main > .main-left > .nav > .slide > .menu").removeClass("active"); $(".main > .main-left > .nav > .slide > .menu").each(function () { var ulNode = $(this); + ulNode.next().find("a").each(function () { var that = $(this); var href = that.attr("href"); @@ -87,24 +101,43 @@ $(".main > .main-left > .nav > .slide > .menu").click(function () { var ul = $(this).next(".slide-menu"); var menu = $(this); - if (!ul.is(":visible")) { - menu.addClass("active"); - ul.addClass("active"); - ul.stop(true).slideDown("fast"); - } else { - ul.stop(true).slideUp("fast", function () { - menu.removeClass("active"); - ul.removeClass("active"); - }); + if (!menu.hasClass("exit")) { + $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast"); + $(".main > .main-left > .nav > .slide > .menu").removeClass("active"); + if (!ul.is(":visible")) { + menu.addClass("active"); + ul.addClass("active"); + ul.stop(true).slideDown("fast"); + } else { + ul.stop(true).slideUp("fast", function () { + menu.removeClass("active"); + ul.removeClass("active"); + }); + } + + return false; } - return false; + }); + + + +// define what element should be observed by the observer +// and what types of mutations trigger the callback + if ($("#cbi-dhcp-lan-ignore").length > 0) { + observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), { + subtree: true, + attributes: true + }); + } + /** * hook menu click and add the hash */ $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); + if (lastNode != undefined) + lastNode.removeClass("active"); $(this).parent().addClass("active"); $(".main > .loading").fadeIn("fast"); return true; @@ -114,22 +147,23 @@ * fix menu click */ $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); + if (lastNode != undefined) + lastNode.removeClass("active"); $(this).addClass("active"); $(".main > .loading").fadeIn("fast"); window.location = $($(this).find("a")[0]).attr("href"); return false; }); - - /** + + /** * fix submenu click */ $("#maincontent > .container > .tabs > li").click(function () { - console.log("sub"); $(".main > .loading").fadeIn("fast"); window.location = $($(this).find("a")[0]).attr("href"); return false; }); + /** * get current node and open it */ @@ -147,10 +181,6 @@ */ $("#maincontent > .container").find("a").each(function () { var that = $(this); - var href = that.attr("href"); - if (href != undefined && href.indexOf("javascript") != -1) { - return true; - } var onclick = that.attr("onclick"); if (onclick == undefined || onclick == "") { that.click(function () { @@ -214,12 +244,19 @@ that.after("" + that.text() + ""); }); - /* $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { + $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { var that = $(this); - if (that.text().trim() == ""){ + if (that.text().trim() == "") { that.css("display", "none"); } - }); */ + }); + + $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () { + //$(".node-main-login > .main > .main-right > .login-bg").addClass("blur"); + }); + $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () { + //$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur"); + }); $(".main-right").focus(); diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/purecss.css b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/purecss.css new file mode 100644 index 0000000000..0b2bf6426e --- /dev/null +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/purecss.css @@ -0,0 +1,7 @@ +/*! +Pure v1.0.1 +Copyright 2013 Yahoo! +Licensed under the BSD License. +https://github.com/pure-css/pure/blob/master/LICENSE.md +*/ +.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%} \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/style.css b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/style.css index 3b6061e776..fbcb681ae8 100644 --- a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/style.css +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/css/style.css @@ -1,394 +1,195 @@ /** - * Netgear is a clean HTML5 theme for LuCI. It is based on luci-theme-material + * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * - * luci-theme-material - * Copyright 2015 Lutty Yang + * luci-theme-argon + * Copyright 2019 Jerrykuku + * + * 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 */ - /* * Font generate by Icomoon * Mod again by Mask + * Mod again by Lienol */ -.pure-g { - letter-spacing: -.31em; - text-rendering: optimizespeed; - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start +:root { + --blue: #5e72e4; + --indigo: #5603ad; + --purple: #8965e0; + --pink: #f3a4b5; + --red: #f5365c; + --orange: #fb6340; + --yellow: #ffd600; + --green: #2dce89; + --teal: #11cdef; + --cyan: #2bffc6; + --white: #fff; + --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; + --breakpoint-xs: 0; + --breakpoint-sm: 576px; + --breakpoint-md: 768px; + --breakpoint-lg: 992px; + --breakpoint-xl: 1200px; + --font-family-sans-serif: Open Sans, sans-serif; + --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } -@media all and (-ms-high-contrast:none), -(-ms-high-contrast:active) { - table .pure-g { - display: block - } -} -.opera-only :-o-prefocus, -.pure-g { - word-spacing: -.43em -} -.pure-u, -.pure-u-1, -.pure-u-1-1, -.pure-u-1-12, -.pure-u-1-2, -.pure-u-1-24, -.pure-u-1-3, -.pure-u-1-4, -.pure-u-1-5, -.pure-u-1-6, -.pure-u-1-8, -.pure-u-10-24, -.pure-u-11-12, -.pure-u-11-24, -.pure-u-12-24, -.pure-u-13-24, -.pure-u-14-24, -.pure-u-15-24, -.pure-u-16-24, -.pure-u-17-24, -.pure-u-18-24, -.pure-u-19-24, -.pure-u-2-24, -.pure-u-2-3, -.pure-u-2-5, -.pure-u-20-24, -.pure-u-21-24, -.pure-u-22-24, -.pure-u-23-24, -.pure-u-24-24, -.pure-u-3-24, -.pure-u-3-4, -.pure-u-3-5, -.pure-u-3-8, -.pure-u-4-24, -.pure-u-4-5, -.pure-u-5-12, -.pure-u-5-24, -.pure-u-5-5, -.pure-u-5-6, -.pure-u-5-8, -.pure-u-6-24, -.pure-u-7-12, -.pure-u-7-24, -.pure-u-7-8, -.pure-u-8-24, -.pure-u-9-24 { - display: inline-block; - zoom: 1; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto -} - -.pure-g [class*=pure-u] { - font-family: sans-serif -} - -.pure-u-1-24 { - width: 4.1667% -} - -.pure-u-1-12, -.pure-u-2-24 { - width: 8.3333% -} - -.pure-u-1-8, -.pure-u-3-24 { - width: 12.5% -} - -.pure-u-1-6, -.pure-u-4-24 { - width: 16.6667% -} - -.pure-u-1-5 { - width: 20% -} - -.pure-u-5-24 { - width: 20.8333% -} - -.pure-u-1-4, -.pure-u-6-24 { - width: 25% -} - -.pure-u-7-24 { - width: 29.1667% -} - -.pure-u-1-3, -.pure-u-8-24 { - width: 33.3333% -} - -.pure-u-3-8, -.pure-u-9-24 { - width: 37.5% -} - -.pure-u-2-5 { - width: 40% -} - -.pure-u-10-24, -.pure-u-5-12 { - width: 41.6667% -} - -.pure-u-11-24 { - width: 45.8333% -} - -.pure-u-1-2, -.pure-u-12-24 { - width: 50% -} - -.pure-u-13-24 { - width: 54.1667% -} - -.pure-u-14-24, -.pure-u-7-12 { - width: 58.3333% -} - -.pure-u-3-5 { - width: 60% -} - -.pure-u-15-24, -.pure-u-5-8 { - width: 62.5% -} - -.pure-u-16-24, -.pure-u-2-3 { - width: 66.6667% -} - -.pure-u-17-24 { - width: 70.8333% -} - -.pure-u-18-24, -.pure-u-3-4 { - width: 75% -} - -.pure-u-19-24 { - width: 79.1667% -} - -.pure-u-4-5 { - width: 80% -} - -.pure-u-20-24, -.pure-u-5-6 { - width: 83.3333% -} - -.pure-u-21-24, -.pure-u-7-8 { - width: 87.5% -} - -.pure-u-11-12, -.pure-u-22-24 { - width: 91.6667% -} - -.pure-u-23-24 { - width: 95.8333% -} - -.pure-u-1, -.pure-u-1-1, -.pure-u-24-24, -.pure-u-5-5 { - width: 100% +@font-face { + font-family: 'icomoon'; + src: url('../fonts/font.eot'); + src: url('../fonts/font.eot') format('embedded-opentype'), + url('../fonts/font.ttf') format('truetype'), + url('../fonts/font.woff') format('woff'), + url('../fonts/font.svg') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'icomoon'; - src: url('../fonts/font.eot'); - src: url('../fonts/font.eot') format('embedded-opentype'), url('../fonts/font.ttf') format('truetype'), url('../fonts/font.woff') format('woff'), url('../fonts/font.svg') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'ssr'; + src: url('../fonts/ssr.eot?5zoxsi'); + src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), + url('../fonts/ssr.ttf?5zoxsi') format('truetype'), + url('../fonts/ssr.woff?5zoxsi') format('woff'), + url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'ssr'; - src: url('../fonts/ssr.eot?5zoxsi'); - src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), url('../fonts/ssr.ttf?5zoxsi') format('truetype'), url('../fonts/ssr.woff?5zoxsi') format('woff'), url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'TypoGraphica'; + src: url('../fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('../fonts/TypoGraphica.woff') format('woff'), url('../fonts/TypoGraphica.ttf') format('truetype'), url('../fonts/TypoGraphica.svg#TypoGraphica') format('svg'); + font-weight: normal; + font-style: normal; } +@font-face { + font-family: 'icomoon'; + src: url('../fonts/icomoon.eot?1peg26'); + src: url('../fonts/icomoon.eot?1peg26#iefix') format('embedded-opentype'), + url('../fonts/icomoon.ttf?1peg26') format('truetype'), + url('../fonts/icomoon.woff?1peg26') format('woff'), + url('../fonts/icomoon.svg?1peg26#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + + + [class^="icon-"], [class*=" icon-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'ssr' !important; - speak: none; - 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; + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'ssr' !important; + speak: none; + 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; } .icon-dashboard:before { - content: "\e906"; + content: "\e906"; } .icon-logout:before { - content: "\e907"; + content: "\e907"; } .icon-Network:before { - content: "\e908"; + content: "\e908"; } .icon-services:before { - content: "\e909"; + content: "\e909"; } .icon-system:before { - content: "\e90a"; + content: "\e90a"; } .icon-vpn:before { - content: "\e90b"; + content: "\e90b"; } .icon-storage:before { - content: "\e90c"; + content: "\e90c"; } .icon-statistics:before { - content: "\e90d"; + content: "\e90d"; } .icon-delete:before { - content: "\e900"; + content: "\e900"; } .icon-edit:before { - content: "\e901"; + content: "\e901"; } .icon-ok:before { - content: "\e902"; + content: "\e902"; } .icon-loading:before { - content: "\e903"; + content: "\e903"; } .icon-switch:before { - content: "\e904"; + content: "\e904"; } .icon-error:before { - content: "\e905"; -} - -input[type=checkbox], -input[type=radio] { - width: auto; - margin: 0; - vertical-align: middle; - cursor: pointer; -} - -.cbi-button-up, -.cbi-button-down, -.cbi-value-helpicon, -.showSide, -.main>.loading>span { - font-family: 'icomoon' !important; - speak: none; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + content: "\e905"; } * { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.left { - text-align: left !important; -} - -.right { - text-align: right !important; -} - -.center { - text-align: center !important; -} - -.top { - vertical-align: top !important; -} - -.middle { - vertical-align: middle !important; -} - -.bottom { - vertical-align: bottom !important; -} - -.pull-left { - float: left !important; -} - -.pull-right { - float: right !important; -} - -.inline { - display: inline; -} - -.hidden { - display: none; -} - -a { - text-decoration: none; + margin: 0; + padding: 0; + box-sizing: border-box; } .h1, @@ -403,724 +204,315 @@ h3, h4, h5, h6 { - font-family: inherit; - font-weight: 400; - line-height: 1.1; - color: inherit; + font-family: inherit; + font-weight: 400; + line-height: 1.1; + color: inherit; } html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } body { - font-size: 0.8rem; - background-color: #f9f9f9; + font-size: 0.8rem; + background-color: rgb(255, 255, 255); } html, body { - margin: 0px; - padding: 0px; - height: 100%; - font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; + margin: 0px; + padding: 0px; + height: 100%; + font-family: Open Sans, sans-serif Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; } body div { - line-height: 150%; + line-height: 150%; } -select { - padding: 0.36rem 0.8rem; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; +/*** Main Loading ***/ + +.cbi-button-up, +.cbi-button-down, +.main>.loading { + + background: linear-gradient(87deg, #5e72e4 0, #5e72e4 100%) !important; } -select, -input { - /* font-size: .875rem; - transition: all .15s ease-in-out; - line-height: 1.5; - height: calc(2.75rem + 2px); - padding: .625rem .75rem; - transition: all .15s cubic-bezier(.68,-.55,.265,1.55); - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: .25rem; +.sk-folding-cube { + margin: 20px auto; + width: 40px; + height: 40px; + position: relative; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); +} + +.sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} + +.sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; background-color: #fff; - background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233,236,239,.05); - margin:0.25rem; - color: #76838f; */ - padding: 6px 10px; - margin: 0; - height: 34px; - line-height: normal; - font-size: 10pt; - font-family: "Roboto", sans-serif, Helvetica, Arial, sans-serif; - border: 1px solid #e4eaec; - background-color: #fff; - transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease; - -webkit-transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease; - outline-style: none; - vertical-align: baseline; - border-radius: 3px; + -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -webkit-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } -select:not([multiple="multiple"]):focus, -input:focus { - border-color: #0099CC; +.sk-folding-cube .sk-cube2 { + -webkit-transform: scale(1.1) rotateZ(90deg); + transform: scale(1.1) rotateZ(90deg); } +.sk-folding-cube .sk-cube3 { + -webkit-transform: scale(1.1) rotateZ(180deg); + transform: scale(1.1) rotateZ(180deg); +} + +.sk-folding-cube .sk-cube4 { + -webkit-transform: scale(1.1) rotateZ(270deg); + transform: scale(1.1) rotateZ(270deg); +} + +.sk-folding-cube .sk-cube2:before { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +.sk-folding-cube .sk-cube3:before { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; +} + +.sk-folding-cube .sk-cube4:before { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; +} + +@-webkit-keyframes sk-foldCubeAngle { + + 0%, + 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; + } + + 25%, + 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; + } + + 90%, + 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; + } +} + +@keyframes sk-foldCubeAngle { + + 0%, + 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; + } + + 25%, + 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; + } + + 90%, + 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; + } +} + + +.cbi-button-up, +.cbi-button-down, +.cbi-value-helpicon, +.showSide, +.main>.loading>span { + font-family: 'icomoon' !important; + speak: none; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + + select[multiple="multiple"] { - height: auto; + height: auto; } code { - color: #0099CC; + color: #0099CC; } abbr { - color: #005470; - text-decoration: underline; - cursor: help; + color: #005470; + text-decoration: underline; + cursor: help; } hr { - margin: 1rem 0; - border-color: #EEE; - opacity: 0.1; + margin: 1rem 0; + border-color: #EEE; + opacity: 0.1; } -header, -.main { - width: 100%; - position: absolute; -} -header { - height: 4rem; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.09), 0px 3px 13px 0px #423b7852; - transition: box-shadow .2s; - float: left; - position: fixed; - z-index: 101; -} - -footer { - text-align: right; - padding: 1rem; - color: #aaa; - font-size: 0.8rem; - text-shadow: 0px 0px 2px #BBB; -} footer>a { - color: #aaa; - text-decoration: none; + color: #aaa; + text-decoration: none; } .main { - top: 4rem; - bottom: 0rem; - position: relative; - height: 100%; - height: calc(100% - 4rem); + top: 4rem; + bottom: 0rem; + position: relative; + height: 100%; + height: calc(100% - 4rem); } .main>.loading { - position: fixed; - width: 100%; - height: 100%; - z-index: 2000; - display: flex; - align-items: center; - justify-content: center; - background-color: #f8f9fe; - top: 0; + position: fixed; + width: 100%; + height: 100%; + z-index: 1000; + display: block; + background-color: rgb(240, 240, 240); + top: 0; } .main>.loading>span { - display: block; - text-align: center; - margin-top: 2rem; - color: #525f7f; - font-size: 2rem; + display: block; + text-align: center; + margin-top: 2rem; + color: #888; + font-size: 1.2rem; } .main>.loading>span>.loading-img:before { - content: "\e603"; + content: "\e603"; } .main>.loading>span>.loading-img { - animation: anim-rotate 2s infinite linear; - margin-right: 0.4rem; - display: inline-block; + animation: anim-rotate 2s infinite linear; + margin-right: 0.2rem; + display: inline-block; } @keyframes anim-rotate { - 0% { - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg) - } + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg) + } } -[id^="cbi-apply-"] { - position: absolute; - z-index: 200; - left: 50%; - top: 50%; - font-size: 1.2rem; - border-color: #525f7f; - text-align: center; - width: 300px; - height: 180px; - transform: translate(-50%, -50%); + + + +.pull-right { + float: right; + margin-top: 0.5rem; } -[id^="cbi-apply-"]>.panel-title { - border-bottom: none; +.pull-left { + float: left; } -[id^="cbi-apply-"]>img { - margin-top: 1rem; -} -[id^="cbi-apply-"]>[id^="cbi-apply-"] { - height: auto; - font-size: 1rem; - display: block; - top: 80%; -} -.main-left { - float: left; - top: 4rem; - width: 15%; - width: calc(0% + 15rem); - height: 100%; - height: calc(100% - 4rem); - background-color: #161a33!important; - box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); - overflow-x: auto; - position: fixed; -} -.main-right { - width: 85%; - width: calc(100% - 15rem); - float: right; - height: 100%; - background-color: #ffffff; -} -.main-right>#maincontent { - background-color: #ffffff; -} - -header { - background: linear-gradient(87deg, #32325d 0, #825ee4 100%)!important; - color: white; -} - -header>.container { - margin-top: 0.5rem; - padding: 0.5rem 1rem 0 1rem; -} - -header>.container>.brand { - font-size: 1.5rem; - color: white; - text-decoration: none; - cursor: default; - /* vertical-align: text-bottom; */ -} - -.danger { - background-color: #f5365c !important; - color: black; -} - -.warning { - background-color: #fb6340 !important; - color: black; -} - -.success { - background-color: #2dce89 !important; - color: black; -} - -.errorbox, -.alert-message { - margin: 2rem 0 0 0; - padding: 2rem; - border: 0; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - min-width: inherit; - overflow: auto; - border-radius: 0; - background-color: #FFF; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); -} - -.errorbox { - color: #fff; - background-color: #f0ad4e; - border-color: #eea236; -} - -.error { - color: red; -} #maincontent>.container>div:nth-child(1).alert-message.warning>a { - font: inherit; - overflow: visible; - text-transform: none; - display: inline-block; - margin-bottom: 0; - font-weight: 400; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-image: none; - min-width: 6rem; - padding: 0.5rem 1rem; - font-size: 0.9rem; - line-height: 1.42857143; - color: #fff; - background-color: #5bc0de; - border-color: #46b8da; - margin-top: 2rem; - text-decoration: inherit; + font: inherit; + overflow: visible; + text-transform: none; + display: inline-block; + margin-bottom: 0; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-image: none; + min-width: 6rem; + padding: 0.5rem 1rem; + font-size: 0.9rem; + line-height: 1.42857143; + color: #fff; + background-color: #5bc0de; + border-color: #46b8da; + margin-top: 2rem; + text-decoration: inherit; } -.main>.main-left>.nav { - margin-top: 0.5rem; -} - -.main>.main-left>.nav>li a { - color: #8898aa; - display: block; -} - -.main>.main-left>.nav>li:nth-last-child(1) { - margin-top: 2rem; - font-size: 1.2rem; -} - -.main>.main-left>.nav>li { - padding: 0.5rem 1rem; - cursor: pointer; -} - -.main>.main-left>.nav>.slide { - padding: 0; -} - -.main>.main-left>.nav>.slide>ul { - display: none; -} - -.main>.main-left>.nav>.slide>.menu { - display: block; - margin: 0.1rem .5rem; - padding: .675rem 0 .675rem 3rem; - border-radius: .375rem; - text-decoration: none; - cursor: default; - font-size: 1rem; - transition: all 0.2s; - border-left: transparent 3px solid; -} - -.main>.main-left>.nav>li:hover, -.main>.main-left>.nav>.slide>.menu:hover { - color: #e8c6c6; - background: #525f7f; -} - -.main>.main-left>.nav>.slide:hover { - background: none; -} - -.main>.main-left>.nav>.slide>.menu:hover { - /* border-left: #ffffff 3px solid; */ -} - -.main>.main-left>.nav>.slide>.menu:before { - font-family: 'ssr' !important; - speak: none; - 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: 1rem; - padding-top: 3px; -} - -.main > .main-left > .nav > .slide > .menu[data-title= Status ]:before{ - content: "\e906"; - color: #5e72e4!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= System ]:before{ - content: "\e90a"; - color: #fb6340!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Services ]:before{ - content: "\e909"; - color: #11cdef!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= NAS ]:before{ - content: "\e90c"; - color: #f3a4b5!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Control ]:before{ - content: "\e90e"; - color: #f3a4b5!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= VPN ]:before{ - content: "\e90b"; - color: #6de9ea!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Network ]:before{ - content: "\e908"; - color: #8965e0!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Bandwidth_Monitor ]:before{ - content: "\e90d"; - color: #2dce89!important; -} -.main > .main-left > .nav > .slide > .menu[data-title= Logout ]:before{ - content: "\e907"; - color: #32325d!important; -} - -header>.container>.brand:before { - font-family: 'ssr' !important; - speak: none; - 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; - content: "\e90e"; - margin-right: 0.5rem; -} - -.main>.main-left>.nav>.slide>.menu.active { - color: #e8c6c6; - background: #7764e43b; -} - -.main>.main-left>.nav>.slide>.slide-menu>li {} - -.main>.main-left>.nav>.slide>.slide-menu>.active {} - -.main>.main-left>.nav>.slide>.slide-menu>li>a { - margin: 0.1rem .5rem; - padding: 0.5rem 1.5rem 0.5rem 2.5rem; - text-decoration: none; - border-radius: .375rem; - white-space: nowrap; - color: #be9e9e; - border-left: transparent 12px solid; - transition: all 0.2s; -} - -.main>.main-left>.nav>.slide>.slide-menu>.active>a { - /* border-left: #ffffff 15px solid; */ - color: #FF9800; - background-color: #607d8b54; -} - -.main>.main-left>.nav>.slide>.slide-menu>li>a:hover { - /* border-left: #ffffff 3px solid; */ - color: white; - background: #525f7f; -} - -.main>.main-left>.nav>.slide>.slide-menu>.active>a:hover { - /* border-left: #ffffff 3px solid; */ - color: white; - background-color: #525f7f; - cursor: hand; +#maincontent>.container>p { + color: #fff; } li { - list-style-type: none; + list-style-type: none; } -#maincontent>.container { - margin: 0 2rem 1rem 2rem; -} - -h1 { - font-size: 2rem; - padding: 0.5rem; - border-bottom: 1px solid #eee; -} - -h2 { - margin: 1rem 0 0 0; - font-size: 1.5rem; - padding: 0.5rem; - /* border-bottom: 1px solid #eee; */ -} - -h3 { - font-size: 1.4rem; - width: 100%; - display: block; - margin-bottom: 0; - padding: 0.5rem; - border-bottom: 1px solid rgba(0, 0, 0, .05); - background-color: #fff; - line-height: 1.5; - margin-bottom: 0rem; - letter-spacing: 0.1rem; - color: #32325d; - font-weight: bold; -} - -h4 {} -/* -div.cbi-section, -fieldset { - margin: 2rem 0 0 0; - padding: 0; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - - min-width: inherit; - overflow-x: auto; - overflow-y: hidden; - - border: 1px solid rgba(0,0,0,.05); - border-radius: .375rem; - background-color: #fff; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); - - -webkit-overflow-scrolling: touch; -} */ - -div.cbi-section, -fieldset { - margin: 20px 0; - padding: 1rem; - border: 1px; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - min-width: inherit; - overflow-x: hidden; - overflow-y: hidden; - border-radius: 4px; - background-color: #FFF; - box-shadow: 0px 0px 0px 0px #eee, 0px 0px 10px 0px #eee, 0px 0px 5px rgba(0,0,0,0); -} - -.cbi-map-descr+div.cbi-section, .cbi-map-descr+fieldset { - margin-top: 1rem; + margin-top: 1rem; } -div.cbi-section>legend, -fieldset>legend { - display: none !important; +.cbi-section>legend { + display: none !important; } -div.cbi-section>div.cbi-section, -fieldset>fieldset { - margin: 0; - padding: 0; - border: none; - box-shadow: none; -} - -.panel-title { - width: 100%; - display: block; - margin-bottom: 0; - padding: 5px; - border-bottom: 0px solid rgba(0, 0, 0, .05); - background-color: #fff; - line-height: 1.5; - margin-bottom: 0rem; - letter-spacing: 0.1rem; - color: #32325d; - font-weight: bold; -} - -table, -.table { - border-spacing: 0; - border-collapse: collapse; - width: 100%; - border: 0px solid #eee; - display: table; - margin: 0 0 10px !important; - position: relative; -} - -.table[width="33%"], -.th[width="33%"], -.td[width="33%"] { - width: 33%; -} - -.table[width="100%"], -.th[width="100%"], -.td[width="100%"] { - width: 100%; -} - - -/* table>tbody>tr>td, -table>tfoot>tr>td, -table>tfoot>tr>th, -table>thead>tr>td, -table>thead>tr>th { -table>thead>tr>th, -.table>.tr>.td, -.table>.tr>.th, -.table>.tr>.td, -.table>.tr>.th, -.table>.tr>.td, -.table>.tr>.th { - padding: 6px; - line-height: 1.5; - border-top: 0px dashed #EEE; - white-space: nowrap; -} */ - -table>tbody>tr>td, -table>tfoot>tr>td, -table>thead>tr>td, -.table>.tr>.td, -.table>.tr>.td, -.table>.tr>.td { - font-size: .8125rem; - white-space: nowrap; - color: #32325d; - padding: 6px; - line-height: 1.5; - border-top: 0px solid #ddd; - white-space: nowrap; -} - -table>tbody>tr>th, -table>tfoot>tr>th, -table>thead>tr>th, -.table>.tr>.th, -.table>.tr>.th, -.table>.tr>.th { - padding-right: 1.5rem; - padding-left: 1.5rem; - color: #8898aa; - background-color: #f6f9fc; - font-size: .65rem; - padding-top: .75rem; - padding-bottom: .75rem; - letter-spacing: 1px; - text-transform: uppercase; - padding: 6px; - line-height: 1.5; - white-space: nowrap; -} - -.table .th, -.table .td { - display: table-cell; - vertical-align: middle; -} - -.table .tr.placeholder { - height: calc(3em + 20px); -} - -.table .tr.placeholder>.td { - position: absolute; - left: 0; - right: 0; - bottom: 0; - text-align: center; - line-height: 3em; -} - -.td.cbi-section-actions>* { - display: flex; -} - -.td.cbi-section-actions>*>*, -.td.cbi-section-actions>*>form>* { - flex: 1 1 4em; - margin: 0 1px; -} - -.td.cbi-section-actions>*>.cbi-button-up, -.cbi-input-up { - background: unset; -} - -.td.cbi-section-actions>*>.cbi-button-down, -.cbi-input-down { - background: unset; -} - -tr, -.tr { - display: table-row; -} - -.cbi-section-table-cell { - text-align: center; -} - -.cbi-section-table-row { - text-align: center; -} - -div.cbi-section>.table>.tr:nth-of-type(2n), -fieldset>table>tbody>tr:nth-of-type(2n) { - background-color: #fbfbfb; -} - - /* fix progress bar */ - #swaptotal>div, #swapfree>div, #swapcache>div, @@ -1129,11 +521,12 @@ fieldset>table>tbody>tr:nth-of-type(2n) { #conns>div, #memcache>div, #memtotal>div, -#cpu_free>div { - width: 100% !important; - height: 1.6rem !important; - line-height: 1.6rem; - border-radius: .25rem; +#cpu_free>div, +.progress_bar>div { + width: 100% !important; + height: 1.6rem !important; + line-height: 1.6rem; + border-radius: .25rem; } #swaptotal>div>div, @@ -1144,95 +537,1640 @@ fieldset>table>tbody>tr:nth-of-type(2n) { #conns>div>div, #memcache>div>div, #memtotal>div>div, -#cpu_free>div>div { - height: 100% !important; - background-color: #825ee4 !important; +#cpu_free>div>div, +.progress_bar>div>div { + height: 100% !important; + border-radius: 5px; + background: #825ee4 !important; } +/* fix multiple table */ + +table table, +.table .table { + border: none; +} + +.cbi-value-field table, +.cbi-value-field .table { + border: none; +} + +td>table>tbody>tr>td, +.td>.table>.tbody>.tr>.td { + border: none; +} + +.cbi-value-field>table>tbody>tr>td, +.cbi-value-field>.table>.tbody>.tr>.td { + border: none; +} + +/* button style */ + + + +.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 { + color: #fff; + background-color: #337ab7; + border: none; +} + +.cbi-page-actions .cbi-button-save, +.cbi-button-add.important, +.cbi-button-save.important, +.cbi-button-positive.important { + color: #fff; + background-color: #5bc0de; + border: none; +} + +.cbi-button-remove.important, +.cbi-button-reset.important, +.cbi-button-negative.important { + color: #fff; + background-color: #d9534f; + border: none; +} + +.cbi-button-find, +.cbi-button-link, +.cbi-button-neutral { + color: #fff !important; + background-color: #f0ad4e !important; + border: none; +} + +.cbi-button-edit, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-action { + color: #2e6da4; + background-color: transparent; + border: none; +} + +.cbi-page-actions .cbi-button-apply+.cbi-button-save, +.cbi-button-add, +.cbi-button-save, +.cbi-button-positive { + color: #46b8da; + background-color: transparent; + border: none; +} + +.cbi-section-remove>.cbi-button, +.cbi-button-remove, +.cbi-button-reset, +.cbi-button-negative { + color: #fff !important; + background-color: #fb6340 !important; + border: none; +} + +.cbi-page-actions .cbi-button-link:first-child { + float: left; +} + +.a-to-btn { + text-decoration: none; +} + +/* table */ + +.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { + width: auto; +} + +.td.cbi-section-actions { + /* text-align: right; */ + vertical-align: middle; +} + +.td.cbi-section-actions>* { + /* display: flex; */ +} + +.td.cbi-section-actions>*>*, +.td.cbi-section-actions>*>form>* { + flex: 1 1 4em; + margin: 0 1px; +} + +.td.cbi-section-actions>*>form { + display: inline-flex; + margin: 0; +} + +/* desc */ + +/* 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 { + border-top: 1px solid #eee; + padding-top: 1rem; + text-align: right; +} + +/* input */ +.cbi-value input[type="password"], +.cbi-value input[type="text"] { + min-width: unset; +} + +select { + width: 15rem; + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY1MzQ4MDM3OTIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4qIHsgdGV4dC1zaGFkb3c6IHRyYW5zcGFyZW50IDBweCAwcHggMHB4LCByZ2JhKDAsIDAsIDAsIDAuNSkgMHB4IDBweCAwcHggIWltcG9ydGFudDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjAuNDggMjQ1Ljc2aDk4My4wNEw1MTIgNzc4LjI0eiIgcC1pZD0iMjU4NCIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==') !important; + background-position: 96%; + background-size: 8px; + background-repeat: no-repeat; + +} + +.th[data-type="button"], +.td[data-type="button"], +.th[data-type="fvalue"], +.td[data-type="fvalue"] { + flex: 1 1 2em; + text-align: center; +} + + + +/*textarea*/ + +.cbi-input-textarea { + width: 100%; + min-height: 14rem; + padding: 0.8rem; + font-size: 0.8rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: black; +} + + + +/* change */ + +.uci-change-list { + font-family: monospace; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + text-decoration: none; + border: 1px solid #00FF00; + background-color: #CCFFCC; + display: block; + padding: 2px; +} + +.uci-change-list del, +.uci-change-legend-label del { + text-decoration: none; + border: 1px solid #FF0000; + background-color: #FFCCCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var, +.uci-change-legend-label var { + text-decoration: none; + border: 1px solid #CCCCCC; + background-color: #EEEEEE; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var ins, +.uci-change-list var del { + border: none; + white-space: pre; + font-style: normal; + padding: 0px; +} + +.uci-change-legend { + padding: 5px; +} + +.uci-change-legend-label { + width: 150px; + float: left; +} + +.uci-change-legend-label>ins, +.uci-change-legend-label>del, +.uci-change-legend-label>var { + float: left; + margin-right: 4px; + width: 10px; + height: 10px; + display: block; +} + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + line-height: 6px; + border: none; +} + +.uci-change-list var, +.uci-change-list del, +.uci-change-list ins { + padding: 0.5rem; +} + +/* 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: 0.25rem 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: #5e72e4; + background-size: 70%; + background-repeat: no-repeat; + background-position: center; +} + +ul li .cbi-input-checkbox { + margin-top: 0.5rem !important; +} + +.cbi-input-radio { + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid #dee2e6; + + width: 16px !important; + height: 16px !important; + padding: 0; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s; + margin: 0.25rem 0; +} + +.cbi-input-radio:checked { + border: 1px solid #5e72e4; + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; + background-color: #5e72e4; + background-size: 70%; + background-repeat: no-repeat; + background-position: center; +} + + +.toggle { + position: relative; + display: block; + width: 40px; + height: 20px; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + transform: translate3d(0, 0, 0); + margin: 1em 0; +} + +.toggle:before { + content: ""; + position: relative; + top: 3px; + left: 3px; + width: 34px; + height: 14px; + display: block; + background: #9A9999; + border-radius: 8px; + transition: background 0.2s ease; +} + +.toggle span { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 20px; + display: block; + background: white; + border-radius: 10px; + box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); + transition: all 0.2s ease; +} + +.toggle span:before { + content: ""; + position: absolute; + display: block; + margin: -18px; + width: 56px; + height: 56px; + background: rgba(79, 46, 220, 0.5); + border-radius: 50%; + transform: scale(0); + opacity: 1; + pointer-events: none; +} + +.cbi-input-checkbox:checked+.toggle:before { + background: #947ADA; +} + +.cbi-input-checkbox:checked+.toggle span { + background: #4F2EDC; + transform: translateX(20px); + transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; + box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2); +} + +.cbi-input-checkbox:checked+.toggle span:before { + transform: scale(1); + opacity: 0; + transition: all 0.4s ease; +} + +.td .cbi-input-checkbox, +.td .cbi-input-radio { + margin-top: 0; +} + +.cbi-value-field>input+.cbi-value-description { + padding: 0; +} + +.cbi-value-field>ul>li { + display: flex; +} + +.cbi-value-field>ul>li>label { + margin-top: 0.5rem; +} + +.cbi-value-field>ul>li .ifacebadge { + background-color: #eee; + margin-left: 0.4rem; + margin-top: -0.5rem; +} + +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { + min-width: 7rem; +} + +.cbi-section-create { + margin: .5rem -3px; + display: inline-flex; + align-items: center; +} + +.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; +} + +small { + font-size: 90%; + white-space: normal; + line-height: 1.42857143; +} + +.cbi-button-up, +.cbi-button-down { + display: inline-block; + min-width: 0; + padding: 0.2rem 0.6rem; + font-size: 1.2rem; + color: #FFF !important; +} + +.cbi-optionals { + padding: 1rem 1rem 0 1rem; + border-top: 1px solid #CCC; +} + +.cbi-dropdown-container { + position: relative; +} + +.cbi-tooltip-container { + cursor: help; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; + pointer-events: none; + box-shadow: 0 0 2px #444; +} + +.cbi-tooltip-container:hover .cbi-tooltip { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; +} + +.zonebadge .cbi-tooltip { + padding: .25rem; + background: inherit; + margin: -1.5rem 0 0 -.5rem; +} + +.zonebadge-empty { + 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); + color: #404040; +} + +.zone-forwards { + display: flex; + min-width: 10rem; +} + +.zone-forwards>* { + flex: 1 1 45%; +} + +.zone-forwards>span { + flex-basis: 10%; + text-align: center; + padding: 0 .25rem; +} + +.zone-forwards .zone-src, +.zone-forwards .zone-dest { + display: flex; + flex-direction: column; +} + +#diag-rc-output>pre { + background-color: #fff; + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 1.5rem; + -moz-border-radius: 3px; + white-space: pre-wrap; + word-wrap: break-word; + font-size: 1.4rem; + color: #404040; +} + +input[name="ping"], +input[name="traceroute"], +input[name="nslookup"] { + width: 80%; +} + + +#xhr_poll_status { + display: inline-block; + +} + +#xhr_poll_status>.label.success { + background-color: #fff !important; + color: #32325d !important; +} + +.label { + padding: 0.3rem 0.8rem; + font-size: 0.8rem; + font-weight: bold; + color: #ffffff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #bfbfbf; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + text-shadow: none; + text-decoration: none; +} + +.notice { + background-color: #5BC0DE; +} + +.showSide { + display: none; +} + +.darkMask { + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0, 0, 0, 0.56); + content: ""; + z-index: 99; + display: none; +} + + +/* fix status overview */ + +.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2) { + white-space: normal; +} + +/* fix status processes */ + +.node-status-processes>.main .table .tr .td:nth-child(3) { + white-space: normal; +} + +.node-status-iptables>.main div>.cbi-map>form { + margin: 2rem 2rem 0 0; +} + +/* fix system reboot */ + +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { + padding-left: 2rem; +} + +/* fix Services Network Shares*/ +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { + margin-bottom: 1rem; + width: auto; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { + display: list-item; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { + padding-top: 1rem; +} + +/* fix System Software*/ +.node-system-packages>.main table tr td:nth-child(1) { + width: auto !important; +} + +.node-system-packages>.main table tr td:nth-last-child(1) { + white-space: normal; + font-size: small; + color: #404040; +} + +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { + padding: 0.5rem 0.8rem; +} + +.node-system-packages>.main .cbi-value>pre { + background-color: #eee; + padding: 0.5rem; + overflow: auto; +} + +.cbi-tabmenu+.cbi-section { + margin-top: 0; +} + +.node-status-iptables fieldset, +.node-system-packages fieldset, +.node-system-flashops fieldset { + margin-top: 0; +} + + +.node-system-flashops form.inline+form.inline { + margin-left: 0; +} + +#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%; +} + +/* language fix */ +body.lang_pl.node-main-login .cbi-value-title { + width: 12rem; +} + +/* applyreboot fix */ + +#applyreboot-container { + margin: 2rem; +} + +#applyreboot-section { + margin: 2rem; + line-height: 300%; +} + +.tr { + display: table-row; + border-bottom: 1px solid rgba(0, 0, 0, .05); +} + +.td, +.th { + vertical-align: middle; + text-align: center; + display: table-cell; + padding: 1rem; + white-space: nowrap; +} + +.cbi-section-table-row .td {} + +.th { + font-weight: bold; +} + +.tr.placeholder { + height: 4em; +} + +.tr.placeholder>.td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + background: inherit; +} + +.table[width="33%"], +.th[width="33%"], +.td[width="33%"] { + width: 33%; + padding-left: 1.5rem; + padding-right: 1.5rem +} + +.table[width="100%"], +.th[width="100%"], +.td[width="100%"] { + width: 100%; +} + +.table-titles .th { + padding: 0.75rem 1rem; + color: #8898aa; + background-color: #f6f9fc; +} + +.col-1 { + flex: 1 1 30px !important; + -webkit-flex: 1 1 30px !important; +} + +.col-2 { + flex: 2 2 60px !important; + -webkit-flex: 2 2 60px !important; +} + +.col-3 { + flex: 3 3 90px !important; + -webkit-flex: 3 3 90px !important; +} + +.col-4 { + flex: 4 4 120px !important; + -webkit-flex: 4 4 120px !important; +} + +.col-5 { + flex: 5 5 150px !important; + -webkit-flex: 5 5 150px !important; +} + +.col-6 { + flex: 6 6 180px !important; + -webkit-flex: 6 6 180px !important; +} + +.col-7 { + flex: 7 7 210px !important; + -webkit-flex: 7 7 210px !important; +} + +.col-8 { + flex: 8 8 240px !important; + -webkit-flex: 8 8 240px !important; +} + +.col-9 { + flex: 9 9 270px !important; + -webkit-flex: 9 9 270px !important; +} + +.col-10 { + flex: 10 10 300px !important; + -webkit-flex: 10 10 300px !important; + white-space: inherit; +} + + + +.cbi-rowstyle-2 .cbi-button-up, +.cbi-rowstyle-2 .cbi-button-down { + background-color: #FFF !important; +} + + + + +select { + padding: 0.36rem 0.8rem; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; +} + +select, +input { + font-size: .875rem; + transition: all .15s ease-in-out; + /* line-height: 1.5; */ + height: calc(2rem); + padding: 0 .75rem; + color: #8898aa; + border: 1px solid #dee2e6; + border-radius: .25rem; + background-color: #fff; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); + outline: none; + transition: box-shadow .15s ease; + margin: 0; +} + +select:not([multiple="multiple"]):focus, +input:focus { + border-color: #5e72e4; + outline: 0; + background-color: #fff; + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1); +} + +select[multiple="multiple"] { + height: auto; +} + +code { + color: #0099CC; +} + +abbr { + color: #005470; + text-decoration: underline; + cursor: help; +} + + +hr { + margin: 1rem 0; + border-color: #EEE; + opacity: 0.1; +} + +.bg-primary { + background: linear-gradient(87deg, #32325d 0, #825ee4 100%)!important; +} + +header, +.main { + width: 100%; +} + +header { + /* padding: 0 0 14rem 0; */ +} + +footer { + text-align: right; + /* padding: 1rem; */ + color: #aaa; + font-size: 0.8rem; + text-shadow: 0px 0px 2px #BBB; + padding: 2rem; +} + +footer>a { + color: #aaa; + text-decoration: none; +} + +.main { + top: 0rem; + bottom: 0rem; + position: relative; + height: 100%; + height: calc(100% - 4rem); +} + +.main>.loading { + position: fixed; + width: 100%; + height: 100%; + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + background-color: #f8f9fe; + top: 0; +} + +.main>.loading>span { + display: block; + text-align: center; + margin-top: 2rem; + color: #5e72e4; + font-size: 2rem; +} + +.main>.loading>span>.loading-img:before { + content: "\e603"; +} + +.main>.loading>span>.loading-img { + animation: anim-rotate 2s infinite linear; + margin-right: 0.4rem; + display: inline-block; +} + +.main>.main-right>.login-bg { + display: none; +} + +@keyframes anim-rotate { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +[id^="cbi-apply-"] { + position: fixed; + z-index: 200; + width: 20rem; + margin-left: -10rem; + margin-top: -5rem; + height: 10rem; + left: 50%; + top: 50%; + font-size: 1.2rem; + border-color: #5e72e4; + text-align: center; +} + +[id^="cbi-apply-"]>.panel-title { + border-bottom: none; +} + +[id^="cbi-apply-"]>[id^="cbi-apply-"] { + position: initial; + width: auto; + height: auto; + font-size: 1rem; + margin-left: 0rem; + margin-top: .8rem; + display: block; +} + +.main-left { + float: left; + width: 15%; + width: calc(0% + 15rem); + height: 100%; + background-color: #161a33 !important; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + overflow-x: auto; + position: fixed; + z-index: 100; +} + +.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 { + width: 85%; + width: calc(100% - 15rem); + float: right; + height: 100%; + background-color: #ffffff; +} + +.main-right>#maincontent { + position: relative; + z-index: 50; +} + +header>.container { + margin-top: 0.5rem; + padding: 0.5rem 1rem 0 1rem; +} + +.cbi-section>h3:first-child { + width: 100%; + display: block; + margin-bottom: 0; + padding: 0.5rem; + border-bottom: 1px solid rgba(0, 0, 0, .05); + background-color: #fff; + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; + font-size: 0.8rem; +} + +.panel-title { + font-size: 1.2rem; + width: 100%; + display: block; + margin-bottom: 0; + padding: 1.25rem 1.5rem; + border-bottom: 1px solid rgba(0, 0, 0, .05); + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +table, +.table { + width: 100%; +} + +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 { + padding: .5rem; + border-top: 1px solid #ddd; + white-space: nowrap; +} + +.cbi-section-table-cell { + white-space: nowrap; + align-self: flex-end; + flex: 1 1 auto; +} + +.cbi-section-table { + border: none; + margin: 0 !important; +} + + +.cbi-section-table-row:last-child { + margin-bottom: 0; +} + +.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, +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { + 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); +} + +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.danger { + background-color: #f5365c !important; + color: #fff; +} + +.warning { + background-color: #ffd600 !important; + color: #f00; +} + +.notice { + background: linear-gradient(87deg, #32325d 0, #825ee4 100%) !important; + color: #fff !important; +} + +.success { + background-color: #ffffff !important; + color: #525f7f; +} + +.alert-message { + /* margin: 5rem 0 0 0 !important; + color: #5e72e4 !important; */ +} + +.errorbox, +.alert-message { + /* margin: 2rem 0 0 0; */ + padding: 2rem; + border: 0; + font-weight: normal; + font-style: normal; + line-height: 1.5em; + font-family: inherit; + min-width: inherit; + overflow: auto; + border-radius: 0.3rem; + background-color: #ffd600; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); +} + +.errorbox { + color: #fff; + background-color: #f0ad4e; + border-color: #eea236; +} + +.error { + color: red; +} + +.main>.main-left>.sidenav-header { + padding: 1.5rem; +} + +.main>.main-left>.sidenav-header>.brand { + font-size: 1.8rem; + color: #825ee4; + font-family: "TypoGraphica"; + text-decoration: none; + padding-left: 2rem; + cursor: default; + vertical-align: text-bottom; + white-space: nowrap; +} + +.main>.main-left>.nav { + margin-top: 0.5rem; +} + +.main>.main-left>.nav>li a { + color: #8898aa; + display: block; +} + +.main>.main-left>.nav>li:nth-last-child(1) { + margin-top: 2rem; + font-size: 1.2rem; +} + +.main>.main-left>.nav>li:nth-last-child(1)>.menu:after { + content: ""; +} + +.main>.main-left>.nav>li { + padding: 0.5rem 1rem; + cursor: pointer; +} + +.main>.main-left>.nav>.slide { + padding: 0; +} + +.main>.main-left>.nav>.slide>ul { + display: none; +} + +.main>.main-left>.nav>.slide>.menu { + display: block; + margin: 0.1rem .5rem 0.1rem .5rem; + padding: .675rem 0 .675rem 3rem; + border-radius: .375rem; + text-decoration: none; + cursor: default; + font-size: 1rem; + transition: all 0.2s; + position: relative; +} + +.main>.main-left>.nav>li:hover, +.main>.main-left>.nav>.slide>.menu:hover { + cursor: pointer; + color: #fff; +} + +.main>.main-left>.nav>.slide:hover { + background: none; + +} + +.main>.main-left>.nav>.slide>.menu:hover {} + +.main>.main-left>.nav>.slide>.menu:before { + font-family: 'ssr' !important; + speak: none; + 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: 1.3rem; + padding-top: 3px; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Status]:before { + content: "\e906"; + color: #4fc352 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=System]:before { + content: "\e90a"; + color: #fb6340 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Services]:before { + content: "\e909"; + color: #11cdef !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=NAS]:before { + content: "\e90c"; + color: #f3a4b5 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Control]:before { + content: "\e90e"; + color: #f3a4b5 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=VPN]:before { + content: "\e90b"; + color: #172b4d !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Network]:before { + content: "\e908"; + color: #8965e0 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Bandwidth_Monitor]:before { + content: "\e90d"; + color: #5e72e4 !important; +} + +.main>.main-left>.nav>.slide>.menu[data-title=Logout]:before { + content: "\e907"; + color: #32325d !important; +} + +.main>.main-left>.nav>.slide>.menu:after { + position: absolute; + right: 0.5rem; + top: 0.8rem; + font-family: 'icomoon' !important; + speak: none; + 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; + content: '\e900'; + transition: all .15s ease; + color: #ced4da; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + transition: all 0.3s; +} + +header>.fill { + padding: 0.8rem 0; +} + +header>.fill>.container { + height: 2rem; + padding: 0 1rem; + +} + +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; +} + +.main>.main-left>.nav>.slide>.menu.active { + color: #e8c6c6; + background: #7764e43b; +} + +.main>.main-left>.nav>.slide>.menu.active:after { + color: #4fc352; + transform: rotate(90deg); +} + +.main>.main-left>.nav>.slide>.slide-menu>li {} + +.main>.main-left>.nav>.slide>.slide-menu>.active { +} + +.main>.main-left>.nav>.slide>.slide-menu>li>a { + margin: 0.1rem .5rem 0.1rem 0.5rem; + padding: 0.5rem 1.5rem 0.5rem 3rem; + text-decoration: none; + white-space: nowrap; + color: #be9e9e; + transition: all 0.2s; + border-radius: .375rem; +} + +.main>.main-left>.nav>.slide>.slide-menu>.active>a { + background-color: #607d8b54; + color: #FF9800; +} + +.main>.main-left>.nav>.slide>.slide-menu>li>a:hover { + background-color: #607d8b54; + color: #FF9800; +} + +.main>.main-left>.nav>.slide>.slide-menu>.active>a:hover { + background-color: #607d8b54; + color: #FF9800; +} + +li { + list-style-type: none; +} + +#maincontent>.container { + margin: 0 2rem 1rem 2rem; +} + +h1 { + font-size: 2rem; + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} + +h2 { + margin: 0 0 0 0; + font-size: 1.5rem; + padding: 1rem 0 !important; + color: #000; +} + +#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 { + color: #32325d !important; +} + +h3 { + font-size: 1.4rem; + width: 100%; + display: block; + margin-bottom: 0; + padding: 1.25rem 1.5rem; + padding-bottom: 10px; + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; +} + +h4 {} + +div.cbi-section, +fieldset { + margin: 10px 0; + padding: 1rem; + font-weight: normal; + font-style: normal; + line-height: 1; + font-family: inherit; + min-width: inherit; + /* overflow-x: auto; + overflow-y: hidden; */ + border: 1px solid rgba(0, 0, 0, .05); + border-radius: .375rem; + background-color: #fff; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + -webkit-overflow-scrolling: touch; +} + + + +fieldset>legend { + display: none !important; +} + +div.cbi-section>div.cbi-section, +fieldset>fieldset { + margin: 0; + padding: 0; + border: none; + box-shadow: none; +} + +fieldset.cbi-section p { + padding: 1em; +} + +.panel-title { + width: 100%; + display: block; + margin-bottom: 0; + padding: 0.5rem; + border-bottom: 1px solid rgba(0, 0, 0, .05); + background-color: #fff; + line-height: 1.5; + margin-bottom: 0rem; + letter-spacing: 0.1rem; + color: #32325d; + font-weight: bold; + font-size: 0.8rem; +} + +.table, +table { + border-spacing: 0; + border-collapse: collapse; + width: 100%; + border: 1px solid #eee; + display: table; + margin: 0 0 10px !important; + position: relative; +} + +.table>.tr>.td, +table>tbody>tr>td, +table>tfoot>tr>td, +table>thead>tr>td { + font-size: .8125rem; + white-space: nowrap; + color: #525f7f; + padding: 0.5rem; + border-top: 1px solid #f9f9f9; + white-space: nowrap; + line-height: 1.3; +} + +.table>.tr>.th, +table>tbody>tr>th, +table>tfoot>tr>th, +table>thead>tr>th { + + padding-right: 1.5rem; + padding-left: 1.5rem; + color: #8898aa; + background-color: #f6f9fc; + font-size: .65rem; + padding-top: .75rem; + padding-bottom: .75rem; + letter-spacing: 1px; + text-transform: uppercase; + border-bottom: 1px solid #e9ecef; +} + +.cbi-section-table-cell { + text-align: center; +} + +.cbi-section-table-row { + text-align: center; +} + +fieldset>table>tbody>tr:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.cbi-section-create { + margin: .5rem -3px; + display: inline-flex; + align-items: center; + padding-left: 1rem; +} /* fix multiple table */ table table { - border: none; + border: none; } .cbi-value-field table { - border: none; + border: none; } -.td>.table>.tr>.td, td>table>tbody>tr>td { - border: none; + border: none; } -.cbi-value-field>.table>.tr.td, .cbi-value-field>table>tbody>tr>td { - border: none; + border: none; } + /* button style */ .cbi-button { - -webkit-appearance: none; - text-transform: uppercase; - color: rgba(0, 0, 0, 0.87); - background-color: #F0F0F0; - transition: all 0.2s ease-in-out; - display: inline-block; - padding: 0 0.8rem; - border: none; - border-radius: 0.2rem; - cursor: pointer; - -ms-touch-action: manipulation; - touch-action: manipulation; - background-image: none; - text-align: center; - vertical-align: middle; - white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 0.8rem; - width: auto !important; + -webkit-appearance: none; + text-transform: uppercase; + /* height: 2.5rem; + line-height: 2.5rem; */ + color: rgba(0, 0, 0, 0.87); + background-color: #F0F0F0; + transition: all 0.2s ease-in-out; + display: inline-block; + padding: 0 0.8rem; + /* border: none; */ + border-radius: 0.2rem; + cursor: pointer; + -ms-touch-action: manipulation; + touch-action: manipulation; + background-image: none; + text-align: center; + vertical-align: middle; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 0.8rem; + width: auto !important; + margin-left: 0.3em; } .cbi-button:hover, .cbi-button:focus, .cbi-button:active { - color: rgba(0, 0, 0, 0.87); - outline: 0; - text-decoration: none; - color: rgba(0, 0, 0, 0.87); + outline: 0; + text-decoration: none; } .cbi-button:hover, .cbi-button:focus { - box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } .cbi-button:active { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .cbi-button:disabled { - cursor: not-allowed; - pointer-events: none; - opacity: 0.60; - box-shadow: none; + cursor: not-allowed; + pointer-events: none; + opacity: 0.60; + box-shadow: none; } form.inline+form.inline, -.cbi-button+.cbi-button { - margin-left: 0.6rem; -} +.cbi-button+.cbi-button {} .cbi-button-reset, .cbi-input-remove { - color: #fff !important; - background-color: #2dce89 !important; - border-color: #2dce89 !important; + color: #fff !important; + background-color: #f0ad4e !important; + border-color: #eea236 !important; } .cbi-input-find, @@ -1242,1004 +2180,186 @@ form.inline+form.inline, .cbi-button-find, .cbi-input-reload, .cbi-button-reload { - color: #fff !important; - background-color: #825ee4 !important; - border-color: #825ee4 !important; + color: #fff !important; + background-color: #825ee4 !important; + border-color: #825ee4 !important; } -.cbi-input-apply, +.cbi-value-field .cbi-input-apply, .cbi-button-apply, .cbi-button-edit { - color: #fff !important; - background-color: #4d418b !important; - border-color: #525f7f !important; + color: #fff !important; + background: linear-gradient(87deg, #32325d 0, #825ee4 100%); } -.cbi-input-reset, + .cbi-section-remove>.cbi-button, .cbi-button-remove { - color: #fff !important; - background-color: #fb6340 !important; - border-color: #fb6340 !important; + color: #fff !important; + background-color: #fb6340 !important; + border-color: #fb6340 !important; } -.a-to-btn { - text-decoration: none; +.cbi-value-field .cbi-button-add, +.cbi-value-field .cbi-button-remove, +.cbi-value-field .cbi-button-neutral {} + +input[type="text"]+.cbi-button, +input[type="password"]+.cbi-button, +select+.cbi-button { + padding: 4px 8px; } /* table */ .tabs { - /* margin: 0 -2rem; */ - margin-top: 1rem; - /* padding-left: 0.5rem; */ - background-color: #FFFFFF; + margin: 0.5rem 0rem; + padding-left: 1rem; + background-color: #FFFFFF; + border-radius: 0.375rem; } .cbi-tabmenu>li, .tabs>li { - font-size: 1rem; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - display: inline-block; - padding: 0.6rem; + font-size: 1rem; + /* border-top-left-radius:0.25rem; */ + /* border-top-right-radius:0.25rem; */ + display: inline-block; + padding: 0.6rem; +} + +.cbi-tabmenu>li { + background: #adb5bd; } .cbi-tabmenu>li>a, .tabs>li>a { - text-decoration: none; - color: #8898aa; - padding: 0.5rem 0.8rem; + text-decoration: none; + color: #404040; + padding: 0.5rem 0.8rem; } .cbi-tabmenu>li>a { - color: #525f7f; -} - -.tabs>li[class~="active"], -.tabs>li:hover { - background-color: #413a76; - border-bottom: 0.1rem solid #fb6340; -} - -.tabs>li[class~="active"]>a { - color: #e8c6c6; -} - -.tabs>li:hover { - border-bottom: 0.1rem solid #fb6340; -} - -.cbi-tabmenu { - color: white; -} - -.cbi-tabmenu>li:hover { - background-color: #F1F1F1; -} - -.cbi-tabmenu>li:hover>a { - color: #525f7f; -} - -.cbi-tabmenu>li[class~="cbi-tab"] { - background-color: #413a76; -} - -.cbi-tabmenu>li[class~="cbi-tab"]>a { - color: #be9e9e; -} - -.cbi-tabmenu { - background-color: #f9f9f9; -} - -.cbi-section-remove:nth-of-type(2n), -.cbi-section-node:nth-of-type(2n) { - /* background-color: #f9f9f9; */ -} - -.cbi-section-node-tabbed { - padding: 0; - margin-top: 0; -} - -.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { - background-color: #f9f9f9; -} - -.cbi-value-field { - display: table-cell; - padding-top: 0.5em; -} - -.cbi-value-helpicon>img { - display: none; -} - -.cbi-value-helpicon:before { - content: "\f059"; -} - -.cbi-value-description { - font-size: small; - opacity: 0.5; - display: unset; -} - -.cbi-value-description img { - vertical-align: sub; -} - -.cbi-value-title { - display: table-cell; - text-align: right; - width: 23rem; - line-height: unset; - padding-top: 0.5em; - margin-right: 1.5em; - float: left; - color: #404040; - /* white-space: nowrap; - overflow: hidden; - text-overflow: clip; */ -} - -.cbi-value { - padding: 0.3rem 1rem; - width: 100%; - clear: both; -} - -.cbi-section-table-descr>.cbi-section-table-cell, -.cbi-section-table-titles>.cbi-section-table-cell { - border: none; -} - -.cbi-rowstyle-2 { - background-color: #f9f9f9; -} - -.cbi-rowstyle-2 .cbi-button-up, -.cbi-rowstyle-2 .cbi-button-down { - background-color: #FFF !important; -} - -.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - width: auto !important; -} - - -/* desc */ - -.cbi-section-descr, -.cbi-map-descr { - padding: 0.5rem; - color: #999; - font-size: small; -} - -.cbi-page-actions { - border-top: 1px solid #eee; - padding-top: 1rem; - text-align: right; -} - - -/* input */ - -.cbi-value input[type="password"], -.cbi-value input[type="text"] { - min-width: unset; -} - - -/* select */ - -.cbi-value-field .cbi-input-select { - min-width: 15rem; -} - -.ifacebadge { - display: inline-flex; - border-bottom: 1px solid #CCCCCC; - padding: 0.5rem 1rem; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -td>.ifacebadge { - background-color: #F0F0F0; - font-size: 0.9rem; -} - -.ifacebadge>img { - float: right; - margin: 0 0.3rem; -} - -.ifacebox { - text-align: center; - margin-right: 60px; -} - -.ifacebox .ifacebox-head { - border-bottom: 1px solid #ccc; - padding: 2px; - background: #eee; -} - -.ifacebox .ifacebox-head.active { - background: #5e72e4; -} - -.ifacebox .ifacebox-body { - border: 2px solid #f2f2f2; - border-top: 0; - border-radius: 0 0 4px 4px; - padding: 2px 10px; -} - -.network-status-table .ifacebox-body { - display: flex; - flex-direction: column; - height: 100%; - text-align: left; -} - -.network-status-table .ifacebox { - margin: .5em; - flex-grow: 1; -} - -.ifacebox .ifacebox-body { - padding: .25em; -} - -.ifacebox { - background-color: #fff; - border: 1px solid #ccc; - margin: 0 10px; - text-align: center; - white-space: nowrap; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - display: inline-flex; - flex-direction: column; - line-height: 1.2em; - min-width: 100px; -} - -.ifacebadge { - display: inline-block; - flex-direction: row; - white-space: nowrap; - background-color: #fff; - border: 1px solid #ccc; - padding: 2px; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: default; - line-height: 1.2em; -} - -.ifacebadge.large, -.network-status-table .ifacebox-body .ifacebadge { - display: inline-flex; - flex: 1; - padding: .25em; - min-width: 220px; - margin: .125em; - float: left; -} - -.ifacebadge img { - width: 16px; - height: 16px; - vertical-align: middle; -} - -.ifacebadge>*, -.ifacebadge.large>* { - margin: 0 .125em; -} - -.ifacebadge>*, -.ifacebadge.large>* { - margin: 0 .125em; -} - -.network-status-table { - display: flex; - flex-wrap: wrap; -} - -.cbi-tooltip { - position: absolute; - z-index: 1000; - left: -1000px; - opacity: 0; - transition: opacity .25s ease-out; -} - -.cbi-tooltip-container { - /* cursor: help; */ -} - - -/*textarea*/ - -.cbi-input-textarea { - width: 100%; - resize: none; - border-radius: 0.25rem; - /* min-height: 14rem; */ - padding: 0.8rem; - font-size: 0.8rem; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: black; -} - -#syslog { - width: 100%; - min-height: 15rem; - padding: 1rem; - font-size: small; - color: #5F5F5F; - margin-bottom: 20px; - border-radius: 0; - background-color: #FFF; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); - border: none; -} - - -/* change */ - -.uci-change-list { - font-family: monospace; -} - -.uci-change-list ins, -.uci-change-legend-label ins { - text-decoration: none; - border: 1px solid #00FF00; - background-color: #CCFFCC; - display: block; - padding: 2px; -} - -.uci-change-list del, -.uci-change-legend-label del { - text-decoration: none; - border: 1px solid #FF0000; - background-color: #FFCCCC; - display: block; - font-style: normal; - padding: 2px; -} - -.uci-change-list var, -.uci-change-legend-label var { - text-decoration: none; - border: 1px solid #CCCCCC; - background-color: #EEEEEE; - display: block; - font-style: normal; - padding: 2px; -} - -.uci-change-list var ins, -.uci-change-list var del { - border: none; - white-space: pre; - font-style: normal; - padding: 0px; -} - -.uci-change-legend { - padding: 5px; -} - -.uci-change-legend-label { - width: 150px; - float: left; -} - -.uci-change-legend-label>ins, -.uci-change-legend-label>del, -.uci-change-legend-label>var { - float: left; - margin-right: 4px; - width: 10px; - height: 10px; - display: block; -} - -.uci-change-legend-label var ins, -.uci-change-legend-label var del { - line-height: 6px; - border: none; -} - -.uci-change-list var, -.uci-change-list del, -.uci-change-list ins { - padding: 0.5rem; -} - - -/* other fix */ - -#iwsvg, -#iwsvg2, -#bwsvg { - border: 1px solid #D4D4D4 !important; - border-top: none !important; -} - -.ifacebox { - /* border: 1px solid #999; */ - background-color: #f9f9f9; -} - -.cbi-image-button { - margin-left: 0.5rem; -} - -.zonebadge { - padding: 0.2rem 0.5rem; - display: inline-block; - cursor: pointer; -} - -.zonebadge-empty { - border: 2px dashed #ddd; - color: #ddd; - font-style: italic; -} - -.zone-forwards { - display: flex; - flex-wrap: wrap; -} - -.zone-forwards .zone-src, -.zone-forwards .zone-dest { - display: flex; - flex-direction: column; -} - -.zone-forwards>span { - flex-basis: 10%; - text-align: center; -} - -.zone-forwards>* { - flex: 1 1 40%; - padding: 1px; -} - -.zonebadge>.ifacebadge { - padding: 0.2rem 1rem; - margin: 0.3rem; - border: 1px solid #6C6C6C; -} - -.zonebadge>input[type="text"] { - padding: 0.16rem 1rem; - min-width: 10rem; - margin-top: 0.3rem; -} - -.cbi-value-field .cbi-input-checkbox, -.cbi-value-field .cbi-input-radio { - height: 1rem; -} - -.cbi-value-field>input+.cbi-value-description { - padding: 0; -} - -.cbi-value-field>ul>li { - display: flex; -} - -.cbi-value-field>ul>li>label { - margin-top: 0rem; -} - -.cbi-value-field>ul>li .ifacebadge { - background-color: #eee; - margin-left: 0.4rem; - margin-top: -0.5rem; -} - -.cbi-section-table-row>.cbi-value-field .cbi-input-select { - min-width: 7rem; -} - -.cbi-section-create>.cbi-button-add { - margin: 0.5rem; -} - -.cbi-section-remove { - padding: 0.5rem; -} - -div.cbi-value var, -td.cbi-value-field var { - font-style: italic; - color: #0069D6; -} - -small { - font-size: 90%; - white-space: normal; - line-height: 1.42857143; -} - -.cbi-button-up, -.cbi-button-down { - display: inline-block; - min-width: 0; - padding: 0.2rem 0.3rem; - font-size: 1.2rem; -} - -.cbi-optionals { - padding: 1rem 1rem 0 1rem; - border-top: 1px solid #CCC; -} - -#diag-rc-output>pre { - background-color: #f5f5f5; - display: block; - padding: 8.5px; - margin: 0 0 18px; - line-height: 1.5rem; - -moz-border-radius: 3px; - white-space: pre-wrap; - word-wrap: break-word; - font-size: 1.4rem; - color: #404040; -} - -input[name="ping"], -input[name="traceroute"], -input[name="nslookup"] { - width: 80%; -} - -header>.container>.pull-right>* { - position: relative; - top: 0.45rem; - cursor: pointer; -} - -#xhr_poll_status>.label.success { - background-color: #2dce89; -} - -.label { - padding: 0.3rem 0.8rem; - font-size: 0.8rem; - font-weight: bold; - color: #ffffff !important; - text-transform: uppercase; - white-space: nowrap; - background-color: #bfbfbf; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - text-shadow: none; - text-decoration: none; -} - -.notice { - background-color: #11cdef; -} - -.showSide { - display: none; -} - -.darkMask { - width: 100%; - height: 100%; - position: fixed; - background-color: rgba(0, 0, 0, 0.56); - content: ""; - z-index: 99; - display: none; -} - - -/* fix Main Login*/ - -.node-main-login>.main>.main-left { - display: none; -} - -.node-main-login>.main>.main-right { - width: 100%; - background-color: #eee!important; -} - -.node-main-login>.main>.main-right>#maincontent { - margin-top: 5rem; - background-color: #eee!important; -} - -.node-main-login>.main div.cbi-section, -.node-main-login>.main fieldset { - padding: 0.5rem; - margin-bottom: 1rem; - display: inline; - background: none; - border: none; - box-shadow: none; - overflow: hidden; -} - -.node-main-login>.main .cbi-value-title { - width: 7rem; - font-size: 1rem; - line-height: 1.5; - color: #525f7f; - padding: .625rem; -} - -.node-main-login>.main #maincontent { - text-align: center; -} - -.node-main-login>.main .container { - display: inline-block; - padding: 2rem 2rem; - margin-top: 2rem !important; - background-color: #f7fafc!important; - border-radius: .375rem; - box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); - text-align: left; -} - -.node-main-login>.main .container h2 { - color: #525f7f; - text-align: center; - letter-spacing: 4px; -} - -.node-main-login>.main .container .cbi-map-descr { - text-align: center; -} - -.node-main-login>.main .container .cbi-value-field input { - font-size: 1rem; - line-height: 1.5; - display: block; - width: 100%; - height: calc(2.75rem + 2px); - padding: .625rem .75rem; - transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: .25rem; - background-color: #fff; - background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233, 236, 239, .05); -} - -.node-main-login>.main .container .cbi-value-field input:focus { - color: #8898aa; - border-color: #525f7f; - outline: 0; - background-color: #fff; - box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) -} - -.node-main-login>.main .container input.cbi-button { - font-size: 1rem; - height: auto; - position: relative; - transition: all .15s ease; - letter-spacing: .2em; - text-transform: none; - padding: .625rem 1.25rem; - will-change: transform; -} - -.node-main-login>.main form>div:nth-last-child(1) { - text-align: center; -} - -.node-main-login>.main .cbi-value { - display: block; -} - -.node-main-login>.main .cbi-value>* { - display: inline-block !important; -} - -.node-main-login>.main .cbi-input-user, -.node-main-login>.main .cbi-input-password { - min-width: 15rem; -} - -.node-main-login footer { - bottom: 0; - position: absolute; - width: 100%; -} - - -/* fix status overview */ - -.node-status-overview>.main div.cbi-section:nth-child(4) td:nth-child(2), -.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { - white-space: normal; -} - - -/* fix status processes */ - -.node-status-processes>.main .table .tr .td:nth-child(3), -.node-status-processes>.main table tr td:nth-child(3) { - white-space: normal; -} - -.node-status-iptables>.main div>.cbi-map>form { - margin: 1rem 2rem 0 0; -} - - -/* fix system reboot */ - -.node-system-reboot>.main>.main-right p, -.node-system-reboot>.main>.main-right h3 { - padding-left: 2rem; -} - - -/* fix Services Network Shares*/ - -.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { - margin-bottom: 1rem; - width: auto; -} - -.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { - display: list-item; -} - -.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { - padding-top: 1rem; -} - - -/* fix System Software*/ - -.node-system-packages>.main .table .tr .td:nth-child(1), -.node-system-packages>.main table tr td:nth-child(1) { - width: auto !important; -} - -.node-system-packages>.main .table .tr .td:nth-last-child(1), -.node-system-packages>.main table tr td:nth-last-child(1) { - white-space: normal; - font-size: small; - color: #404040; -} - -.node-system-packages>.main .cbi-tabmenu>li>a, -.tabs>li>a { - padding: 0.5rem 0.8rem; -} - -.node-system-packages>.main .cbi-value>pre { - background-color: #eee; - padding: 0.5rem; - overflow: auto; -} - -.cbi-tabmenu+.cbi-section { - margin-top: 0; -} - - -/* fix network firewall*/ - -.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { - min-width: 4rem; -} - -.node-status-iptables div.cbi-section, -.node-system-packages div.cbi-section, -.node-system-flashops div.cbi-section, -.node-status-iptables fieldset, -.node-system-packages fieldset, -.node-system-flashops fieldset { - margin-top: 0; -} - -.node-status-iptables .cbi-tabmenu, -.node-system-packages .cbi-tabmenu, -.node-system-flashops .cbi-tabmenu { - border: none; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); -} - -.node-system-flashops form.inline+form.inline { - margin-left: 0; -} - -#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; -} - - -/* language fix */ - -body.lang_pl.node-main-login .cbi-value-title { - width: 12rem; + color: #fff; } .cbi-dropdown { - display: inline-block; - width: 210px; - height: 30px; - padding: 4px; - font-size: 13px; - line-height: 18px; - color: #808080; - border: 1px solid #ccc; - border-radius: 3px; - box-sizing: border-box; -} - -.cbi-dropdown { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-flex; - padding: 0; - cursor: pointer; - height: auto; - background: linear-gradient(#fff 0%, #e9e8e6 100%); - position: relative; - color: #404040; -} - -.cbi-dropdown { - min-width: 210px; - max-width: 400px; - width: auto; + display: inline-flex; + cursor: pointer; + position: relative; + padding: 0; + height: auto; } .cbi-dropdown:focus { - outline: 2px solid #4b6e9b; + outline: 2px solid #4b6e9b; } .cbi-dropdown>ul { - margin: 0 !important; - padding: 0; - list-style: none; - overflow-x: hidden; - overflow-y: auto; - display: flex; - width: 100%; + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; } .cbi-dropdown>ul.preview { - display: none; + display: none; +} + +.cbi-dropdown>.open { + border: 0px outset #eee; + flex-basis: 15px; + background: #fff; } .cbi-dropdown>.open, .cbi-dropdown>.more { - flex-grow: 0; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - line-height: 2em; - padding: 0 .25em; + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; } .cbi-dropdown>.more, .cbi-dropdown>ul>li[placeholder] { - color: #777; - font-weight: bold; - text-shadow: 1px 1px 0px #fff; - display: none; + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; } .cbi-dropdown>ul>li { - display: none; - padding: .25em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 1; - flex-grow: 1; - align-items: center; - align-self: center; - color: #404040; - min-height: 20px; + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + min-height: 20px; } .cbi-dropdown>ul>li .hide-open { - display: block; - display: initial; + display: initial; } .cbi-dropdown>ul>li .hide-close { - display: none; + display: none; } .cbi-dropdown>ul>li[display]:not([display="0"]) { - border-left: 1px solid #ccc; + border-left: 1px solid #ccc; } .cbi-dropdown[empty]>ul { - max-width: 1px; + max-width: 1px; } .cbi-dropdown>ul>li>form { - display: none; - margin: 0; - padding: 0; - pointer-events: none; + display: none; + margin: 0; + padding: 0; + pointer-events: none; } .cbi-dropdown>ul>li img { - vertical-align: middle; - margin-right: .25em; + vertical-align: middle; + margin-right: .25em; } .cbi-dropdown>ul>li>form>input[type="checkbox"] { - margin: 0; + margin: 0; + height: auto; } .cbi-dropdown>ul>li input[type="text"] { - height: 20px; + height: 20px; } .cbi-dropdown[open] { - position: relative; + position: relative; + border-color: #5e72e4; } .cbi-dropdown[open]>ul.dropdown { - display: block; - background: #f6f6f5; - border: 1px solid #918e8c; - box-shadow: 0 0 4px #918e8c; - position: absolute; - z-index: 1000; - max-width: none; - min-width: 100%; - width: auto; + display: block; + background: #fff; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .05); } .cbi-dropdown>ul>li[display], @@ -2249,326 +2369,1469 @@ body.lang_pl.node-main-login .cbi-value-title { .cbi-dropdown[multiple][open]>ul.dropdown>li, .cbi-dropdown[multiple][more]>.more, .cbi-dropdown[multiple][empty]>.more { - flex-grow: 1; - display: flex; + flex-grow: 1; + display: flex; + align-items: center; } .cbi-dropdown[empty]>ul>li, .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder], .cbi-dropdown[multiple][open]>ul.dropdown>li>form { - display: block; + display: block; } .cbi-dropdown[open]>ul.dropdown>li .hide-open { - display: none; + display: none; } .cbi-dropdown[open]>ul.dropdown>li .hide-close { - display: block; - display: initial; + display: initial; } .cbi-dropdown[open]>ul.dropdown>li { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #ccc; + color: #000; } .cbi-dropdown[open]>ul.dropdown>li[selected] { - background: #b0d0f0; + background: linear-gradient(87deg, #32325d 0, #825ee4 100%); } .cbi-dropdown[open]>ul.dropdown>li.focus { - background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); + background: linear-gradient(90deg, #825ee4 0%, #5e72e4 100%); } .cbi-dropdown[open]>ul.dropdown>li:last-child { - margin-bottom: 0; - border-bottom: none; + margin-bottom: 0; + border-bottom: none; } .cbi-dropdown[disabled] { - pointer-events: none; - opacity: .6; + pointer-events: none; + opacity: .6; } +.cbi-dropdown .zonebadge { + width: 100%; +} + +.cbi-dropdown[open] .zonebadge { + width: 100%; +} + +.cbi-dropdown { + font-size: .875rem; + transition: all .15s ease-in-out; + line-height: 1.5; + color: #8898aa; + border: 1px solid #dee2e6; + border-radius: .25rem; + background-color: #fff; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); + margin: 0.25rem; +} + +.cbi-value-field .cbi-dropdown .zonebadge>.ifacebadge { + padding: 0rem 1rem; + margin: 0rem 0.3rem; + border: 1px solid #6C6C6C; +} + +select[multiple="multiple"] { + height: auto; +} + +.cbi-dropdown>ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: hidden; + display: flex; + width: 100%; +} + +/* select */ +.cbi-value-field .cbi-dropdown { + min-width: 15rem; +} + +.cbi-section>legend { + display: none !important; +} + +.tabs>li[class~="active"], +.tabs>li:hover { + cursor: pointer; + margin-bottom: 0; + background: linear-gradient(87deg, #32325d 0, #825ee4 100%); +} + +.tabs>li[class~="active"] > a, +.tabs>li:hover > a { + color: #fff; +} + +.cbi-tabmenu { + color: white; + /* padding: 0.5rem 1rem 0 1rem; */ +} + +.cbi-tabmenu>li:hover { + background-color: #F1F1F1; +} + +.cbi-tabmenu>li:hover>a { + color: #525f7f; +} + +.cbi-tabmenu>li[class~="cbi-tab"] { + background: linear-gradient(87deg, #32325d 0, #825ee4 100%); +} + +.cbi-tabmenu>li[class~="cbi-tab"]>a { + color: #fff; +} + + + +.cbi-section-remove:nth-of-type(2n), +.cbi-section-node:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.cbi-section-node-tabbed { + padding: 0; + margin-top: 0; + +} + +.cbi-section-node { + background: #fff; + border: 0; + border-radius: .375rem; + margin-bottom: 0px; + box-shadow: 0 0 0rem 0 rgba(136, 152, 170, .15); + overflow-x: auto; + overflow-y: hidden; + padding: 0rem 0; +} + +#cbi-network-lan.cbi-section-node { + overflow-x: visible; + overflow-y: visible; +} + +#cbi-network .cbi-section, +#cbi-network .cbi-section .cbi-section-node {} + +.cbi-section-node .cbi-value { + /* padding: 0.3rem 0rem 0.3rem 1rem; +*/ +} + + +.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { + /* background-color: #f9f9f9; */ +} + +.cbi-value-field { + display: table-cell; + /* line-height: 1.25; */ + padding-top: 0.5em; +} + +.cbi-value-helpicon>img { + display: none; +} + +.cbi-value-helpicon:before { + content: "\f059"; +} + +.cbi-value-description { + font-size: small; + opacity: 0.8; + display: unset; +} + +.cbi-value-title { + display: table-cell; + text-align: right; + width: 23rem; + line-height: unset; + padding-top: 0.5em; + margin-right: 1.5em; + float: left; + color: #404040; +} + +/* +.cbi-value-title { + word-wrap: break-word; + font-size: 0.875rem; + line-height: 1.6; + color: #525f7f; + padding: .7rem; + padding-left:0; + width: 23rem; + float: left; + text-align: right; + display: table-cell; +} +*/ + +.cbi-value { + /* margin-bottom: 0.1em; */ + display: inline-block; + width: 100%; + clear: both; +} + +.cbi-section-table-descr>.cbi-section-table-cell, +.cbi-section-table-titles>.cbi-section-table-cell { + border: none; +} + +.cbi-rowstyle-1 { + background-color: #fff; +} + +.cbi-rowstyle-2 { + background-color: #fefefe; +} + +/* desc */ +.cbi-section-descr { + padding: 1rem 0 1rem 2rem; + font-size: 0.7rem; + font-weight: 600; + color: #525f7f; +} + +.cbi-map-descr { + padding: 0rem 0 1rem 0rem; + color: #000; + font-size: small; +} + +/* luci */ + +.hidden { + display: none +} + +.left { + text-align: left !important; +} + +.right { + text-align: right !important; +} + +.inline { + display: inline; +} + +input[type="checkbox"] { + height: auto; +} + +/* select */ + + +.cbi-value-field .ifacebadge { + display: inline-flex; + /* border-bottom: 0px solid #CCCCCC; */ + padding: 0.5rem 1rem; + box-shadow: none; +} + +td>.ifacebadge { + background-color: #F0F0F0; + font-size: 0.9rem; +} + +.ifacebadge>img { + float: right; + margin: 0 0.3rem; +} + +/*textarea*/ + +.cbi-input-textarea { + width: 100%; + resize: none; + outline: none; + min-height: 14rem; + padding: 0.8rem; + font-size: 0.8rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: black; + border-radius: 0.25rem; +} + +#syslog { + width: 100%; + min-height: 15rem; + padding: 1rem; + font-size: small; + color: #5F5F5F; + border-radius: 0; + background-color: #FFF; + border: none; + outline: none; +} + +/* change */ + +.uci-change-list { + + font-family: monospace; +} + +.uci-change-list ins strong { + display: inline; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + text-decoration: none; + border: 1px solid #00FF00; + background-color: #CCFFCC; + display: block; + padding: 0 1rem; + margin: 0.5rem 0; +} + +.uci-change-list del, +.uci-change-legend-label del { + text-decoration: none; + border: 1px solid #FF0000; + background-color: #FFCCCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var, +.uci-change-legend-label var { + text-decoration: none; + border: 1px solid #CCCCCC; + background-color: #CCFFCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var ins, +.uci-change-list var del { + border: none; + white-space: pre; + font-style: normal; + padding: 0px; +} + +.uci-change-legend { + padding: 5px 2rem; +} + + + + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + line-height: 6px; + border: none; +} + +.uci-change-list var, +.uci-change-list del, +.uci-change-list ins { + padding: 0.5rem; +} + +/* other fix */ + + +.ifacebadge { + display: inline-flex; + border-bottom: 1px solid #CCCCCC; + padding: 0.5rem 1rem; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +td>.ifacebadge { + background-color: #F0F0F0; + font-size: 0.9rem; +} + +.ifacebadge>img { + float: right; + margin: 0 0.3rem; +} + +.ifacebox { + text-align: center; + margin-right: 60px; +} + +.ifacebox .ifacebox-head { + border-bottom: 1px solid #ccc; + padding: 2px; + background: #eee; +} + +.ifacebox .ifacebox-head.active { + background: linear-gradient(87deg, #32325d 0, #825ee4 100%)!important; + color: #fff; +} + +.ifacebox .ifacebox-body { + border: 2px solid #f2f2f2; + border-top: 0; + border-radius: 0 0 4px 4px; + padding: 2px 10px; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; +} + +.network-status-table .ifacebox { + margin: .5em; + flex-grow: 1; +} + +.ifacebox .ifacebox-body { + padding: .25em; +} + +.ifacebox { + background-color: #fff; + border: 1px solid #ccc; + margin: 0 10px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; +} + +.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #fff; + border: 1px solid #ccc; + padding: 2px; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + display: inline-flex; + flex: 1; + padding: .25em; + min-width: 220px; + margin: .125em; + float: left; +} + +.ifacebadge img { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.ifacebadge>*, +.ifacebadge.large>* { + margin: 0 .125em; +} + +.ifacebadge>*, +.ifacebadge.large>* { + margin: 0 .125em; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; +} + +.cbi-image-button { + margin-left: 0.5rem; +} + +#iwsvg, +#iwsvg2, +#bwsvg { + border: none !important; + border-radius: 0.375rem; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + overflow: hidden; +} + + + +.cbi-image-button { + margin-left: 0.5rem; +} + +.zonebadge { + display: inline-block; + border-radius: 4px; + color: #000; + white-space: nowrap; + padding: 0 8px; + cursor: pointer; +} + +.zonebadge em, +.zonebadge strong { + margin: 0 5px; + color: #000; +} + +.zonebadge>.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #3c3a38; + border: 1px solid #ccc; + padding: 2px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.zonebadge>input[type="text"] { + padding: 0.16rem 1rem; + min-width: 10rem; + margin-top: 0.3rem; +} + +.cbi-value-field .cbi-input-checkbox, +.cbi-value-field .cbi-input-radio { + /* margin-top: 0.9rem; */ + height: 1rem; +} + +input[type=checkbox], +input[type=radio] { + width: auto; + margin: 0; + vertical-align: middle; + cursor: pointer; +} + +.cbi-value-field>input+.cbi-value-description { + padding: 0; +} + +.cbi-value-field>ul>li { + display: flex; +} + +.cbi-value-field>ul>li>label { + margin-top: -0.1rem; +} + +.cbi-value-field>ul>li .ifacebadge { + background-color: #eee; + margin-left: 0.4rem; + margin-top: -0.5rem; +} + +.cbi-section-table-row>.cbi-value-field .cbi-input-select { + min-width: 7rem; +} + +.cbi-section-create>.cbi-button-add { + margin: 0.5rem; +} + +.cbi-section-remove { + padding: 0.5rem; +} + +div.cbi-value var, +td.cbi-value-field var { + font-style: italic; + color: #0069D6; +} + +small { + font-size: 90%; + white-space: normal; + line-height: 1.42857143; +} + + +.cbi-optionals { + padding: 1rem 1rem 0 1rem; + border-top: 1px solid #CCC; +} + + +input[name="ping"], +input[name="traceroute"], +input[name="nslookup"] { + width: 80%; +} + +header>.container>.pull-right>* { + position: relative; + top: 0.45rem; + cursor: pointer; +} + + +.label { + padding: 0.3rem 0.8rem; + font-size: 0.8rem; + font-weight: bold; + color: #fff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #32325d; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + text-shadow: none; + text-decoration: none; +} + + + +.showSide { + display: none; + color: #fff; + font-size: 1.4rem; +} + +.darkMask { + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0, 0, 0, 0.56); + z-index: 99; + left: 0; + top: 0; + display: none; +} + +/* fix Main Login*/ +.node-main-login>.main>.main-right>header { + background: none !important; + box-shadow: none !important; + display: none; +} + +.node-main-login>.main>.main-right>header>.fill>.container { + margin: 2rem auto; + max-width: 1140px; +} + +.node-main-login>.main>.main-right>header>.fill>.container>.brand { + font-size: 2rem; + color: #5e72e4; + display: none; + +} + +.node-main-login>.main { + top: 0; + height: 100% !important; +} + +.node-main-login>.main>.main-left { + display: none; +} + +.node-main-login>.main>.main-right { + width: 100%; +} + +.node-main-login>.main>.main-right>.login-bg { + display: block; + position: fixed; + width: 100%; + height: 100%; + left: 0px; + top: 0px; + background-size: cover; + background-color: #000; + background-position: top center; + transition: all 0.5s; +} + +.node-main-login>.main>.main-right>.login-bg.blur { + transform: scale(1.05); + -webkit-filter: blur(5px); + /* Chrome, Safari, Opera */ + filter: blur(5px); +} + +.node-main-login>.main>.main-right>#maincontent { + padding-top: 23vh; + height: 100%; + background-color: transparent !important; + margin-top: 0rem; +} + +.node-main-login>.main fieldset, +.node-main-login>.main .cbi-section, +.node-main-login>.main .cbi-section>.cbi-section-node { + padding: 0.5rem; + margin: 0rem; + /* display: inline; */ + background: none; + border: none; + box-shadow: none; + overflow: hidden; +} + +.node-main-login>.main .cbi-value-title { + font-size: 1rem; + line-height: 1.5; + color: #525f7f; + padding: .625rem; +} + +.node-main-login>.main #maincontent { + + text-align: center; +} + +.node-main-login>.main .container { + display: inline-block; + padding: 2rem 2rem; + position: relative; + margin-top: 2rem !important; + background-color: #f7fafc !important; + border-radius: .375rem; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + text-align: left; +} + +.node-main-login>.main .container h2 { + width: 120px; + height: 120px; + color: #fff; + text-align: center; + letter-spacing: 4px; + display: block; + margin: -100px auto 15px auto; + padding: 0; + text-indent: -500px; + overflow: hidden; + border-radius: 60px; + border: #fff 3px solid; + + background-image: url(../logo.png); + background-size: cover; + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); + +} + +.node-main-login>.main .container .cbi-map-descr { + text-align: center; + padding: 1rem; + color: #8898aa; +} + +.node-main-login>.main .container .cbi-section-node { + padding: 0; +} + + +.node-main-login>.main .container .cbi-value-field input { + font-size: 1rem; + line-height: 1.5; + display: block; + width: 100%; + height: calc(2.75rem + 2px); + padding: .625rem .75rem; + transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); + color: #8898aa; + border: 0px solid #dee2e6; + border-radius: .25rem; + background-color: #fff; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); +} + +.node-main-login>.main .container .cbi-value-field input:focus { + color: #8898aa; + + outline: 0; + background-color: #fff; + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) +} + +.node-main-login>.main .container input.cbi-button { + font-size: 1rem; + height: auto; + position: relative; + transition: all .15s ease; + letter-spacing: .2em; + text-transform: none; + padding: .625rem 1.25rem; + will-change: transform; + line-height: 1.5em; +} + +.node-main-login>.main form>div:nth-last-child(1) { + text-align: center; + border-top: 0; + padding-top: 2rem; +} + +.node-main-login>.main .cbi-value { + display: block; + padding: 0; +} + + +.node-main-login>.main .cbi-value>* { + display: inline-block !important; +} + +.node-main-login>.main .cbi-value:first-child, +.node-main-login>.main .cbi-button-reset { + display: none !important; +} + + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-title { + display: none !important; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-text { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); + transition: box-shadow .15s ease; + border-radius: .375rem; + box-sizing: border-box; + padding-left: 3em; + margin: 0; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-password, +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-text[type="password"] { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); + transition: box-shadow .15s ease; + border-radius: .375rem; + box-sizing: border-box; + padding-left: 3em; + margin: 0; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field { + position: relative; + width: 20rem; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field:before { + font-family: 'icomoon' !important; + speak: none; + 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: "\e901"; + color: #adb5bd; + font-size: 1.5rem; + position: absolute; + z-index: 100; + left: 10px; + top: 10px; +} + +.node-main-login>.main .cbi-input-user, +.node-main-login>.main .cbi-input-password, +.node-main-login>.main .cbi-input-text[type="user"], +.node-main-login>.main .cbi-input-text[type="password"] { + min-width: 15rem; +} + +.node-main-login .errorbox, +.node-main-login .alert-message.warning { + position: absolute; + color: #fff; + width: calc(100% - 4rem); + border-color: #eea236; + box-sizing: border-box; + margin-top: 8rem; + border-radius: 5px; + padding: 1rem 2rem; + text-align: center; + background-color: #8965e0 !important; + +} + +.node-main-login footer { + bottom: 0; + position: absolute; + width: 100%; + color: #fff; +} + +.node-main-login footer>a { + color: #fff; +} + +/* fix status overview */ + +.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { + white-space: normal; +} + +/* fix status processes */ + +.node-status-processes>.main table tr td:nth-child(3) { + white-space: normal; +} + +.node-status-iptables>.main div>.cbi-map>form { + margin: 0.5rem 2rem 0 0; +} + +/* fix system reboot */ + +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { + padding-left: 2rem; + color: #fff; +} + +/* fix Services Network Shares*/ +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { + margin-bottom: 1rem; + width: auto; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { + display: list-item; +} + +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { + padding-top: 1rem; +} + +/* fix System Software*/ +.node-system-packages>.main table tr td:nth-child(1) { + width: auto !important; +} + +.node-system-packages>.main table tr td:nth-last-child(1) { + white-space: normal; + font-size: small; + color: #404040; +} + +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { + padding: 0.5rem 0.8rem; +} + +.node-system-packages>.main .cbi-value>pre { + background-color: #eee; + padding: 0.5rem; + overflow: auto; +} + +.cbi-tabmenu+.cbi-section { + margin-top: 0; +} + +.cbi-section { + /* background: #fff; + border: 0; + border-radius: .375rem; + margin-bottom: 30px; + box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + overflow-x: auto; + overflow-y:hidden; +*/ +} + +.cbi-section em { + padding: 0rem 1.5rem; + font-size: 0.7rem; + font-weight: 600; + color: #525f7f; +} + + +#cbi-system-led em { + /* padding :0.75rem 1.5rem; */ +} + +.cbi-section h4 { + /* padding :0.75rem 1.5rem; */ + font-size: 0.7rem; + font-weight: 600; + color: #525f7f; +} + +.node-main-login .cbi-section { + margin-bottom: 0px; + padding-bottom: 0px; +} + +#content_syslog { + border-radius: .375rem; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + overflow: hidden; +} + +.node-system-packages .cbi-section-node .cbi-value { + /* padding: 1rem 1rem; */ +} + +.node-system-packages br { + display: none; +} + +/* fix network firewall*/ +.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { + min-width: 4rem; +} + +.node-status-iptables fieldset, +.node-system-packages fieldset, +.node-system-flashops fieldset { + margin-top: 0; +} + +.node-status-iptables .cbi-tabmenu, +.node-system-packages .cbi-tabmenu, +.node-system-flashops .cbi-tabmenu { + border: none; + /* padding-left: 2rem; */ +} + +.node-system-flashops form.inline+form.inline { + margin-left: 0; +} + + + + @media screen and (max-width: 1600px) { - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - .cbi-button { - padding: 0.3rem 1.5rem; - font-size: 0.8rem; - } - header>.container>.pull-right>* { - top: 0.35rem; - } - .label { - padding: 0.2rem 0.6rem; - } - .cbi-value-title { - width: 15rem; - } - div.cbi-section,fieldset { - padding: 20px; - margin: 1rem 0 0 0; - overflow-x: auto; - } - .cbi-input-textarea { - font-size: small; - } - .node-status-iptables>.main div.cbi-section li>a, - .node-status-iptables>.main fieldset li>a { - padding: 0.3rem 0.6rem; - } + .main-left { + width: calc(0% + 13rem); + } + + .main-right { + width: calc(100% - 13rem); + } + + .cbi-button { + /*padding: 0.3rem 1.5rem;*/ + font-size: 0.8rem; + } + + header>.container>.pull-right>* { + top: 0.35rem; + } + + .label { + padding: 0.2rem 0.6rem; + } + + .cbi-value-title { + width: 15rem; + padding-right: 0.6rem; + } + + fieldset { + padding: 0; + } + + .cbi-input-textarea { + font-size: small; + } + + .node-status-iptables>.main fieldset li>a { + padding: 0.3rem 0.6rem; + } } @media screen and (max-width: 1280px) { - header { - height: 3.5rem; - } - header>.container { - margin-top: 0.25rem; - } - .main { - top: 3.5rem; - height: calc(100% - 3.5rem); - } - .main-left { - width: calc(0% + 13rem); - top: 3.5rem; - height: calc(100% - 3.5rem); - } - .main-right { - width: calc(100% - 13rem); - } - .cbi-tabmenu>li>a, - .tabs>li>a { - padding: 0.2rem 0.5rem; - } - .panel-title { - /* font-size: 1.1rem; - padding-bottom: 1rem; */ - } - table { - font-size: 0.7rem !important; - width: 100% !important; - } - .main>.main-left>.nav>li, - .main>.main-left>.nav>li a, - .main>.main-left>.nav>.slide>.menu { - font-size: 0.9rem; - } - .main>.main-left>.nav>.slide>.slide-menu>li>a { - font-size: 0.7rem; - } + + header>.container { + margin-top: 0.25rem; + } + + + .main-left { + width: calc(0% + 13rem); + } + + .main-right { + width: calc(100% - 13rem); + } + + .cbi-tabmenu>li>a, + .tabs>li>a { + padding: 0.2rem 0.5rem; + } + + .panel-title { + font-size: 1.1rem; + padding-bottom: 1rem; + } + + .table, + table { + font-size: 0.7rem !important; + width: 100% !important; + } + + .main>.main-left>.nav>li, + .main>.main-left>.nav>li a, + .main>.main-left>.nav>.slide>.menu { + font-size: 0.9rem; + } + + .main>.main-left>.nav>.slide>.slide-menu>li>a { + font-size: 0.7rem; + } } @media screen and (max-width: 992px) { - .main-left { - width: 0; - position: fixed; - z-index: 100; - } - .main-right { - width: 100%; - } - .showSide { - padding: 0.1rem; - margin-right: 0.5rem; - display: inline-block; - } - .showSide:before { - content: "\e20e"; - font-size: 1.7rem; - } - .node-main-login .showSide { - display: none !important; - } - .cbi-value-title { - /* width: 9rem; */ - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div *, - .node-network-diagnostics>.main .cbi-map fieldset>div * { - width: 100% !important; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div input[type="text"], - .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { - margin: 3rem 0 0 0 !important; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div:nth-child(4) input[type="text"], - .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { - margin: 0 !important; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div select, - .node-network-diagnostics>.main .cbi-map fieldset>div select, - .node-network-diagnostics>.main .cbi-map div.cbi-section>div input[type="button"], - .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { - margin: 1rem 0 0 0; - } - .node-network-diagnostics>.main .cbi-map div.cbi-section>div, - .node-network-diagnostics>.main .cbi-map fieldset>div { - width: 100% !important; - } - #diag-rc-output>pre { - font-size: 1rem; - } - .node-main-login>.main .cbi-value-title { - text-align: left; - } + .main-left { + width: 0; + position: fixed; + z-index: 100; + } + + .main-right { + width: 100%; + } + + .showSide { + padding: 0.1rem; + position: relative; + z-index: 999; + display: inline-block; + } + + .showSide:before { + content: "\e20e"; + font-size: 1.7rem; + } + + .node-main-login .showSide { + display: none !important; + } + + header>.fill>.container>.brand { + display: inline-block; + } + + .cbi-value-title { + /* width: 9rem; + padding-right: 1rem; */ + } + + .node-network-diagnostics>.main .cbi-map fieldset>div * { + width: 100% !important; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { + margin: 3rem 0 0 0 !important; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { + margin: 0 !important; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div select, + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { + margin: 1rem 0 0 0; + } + + .node-network-diagnostics>.main .cbi-map fieldset>div { + width: 100% !important; + } + + #diag-rc-output>pre { + font-size: 1rem; + } + + .node-main-login>.main .cbi-value-title { + text-align: left; + } } @media screen and (max-width: 480px) { - div.cbi-section,fieldset { - padding: 15px; - margin: 1rem 0 0 0; - overflow-x: auto; - } - .tabs { - } - #maincontent>.container { - margin: 0 1rem 1.5rem 1rem; - } - .main>.main-left>.nav>.slide>.menu { - font-size: 1rem; - } - .main>.main-left>.nav>.slide>.slide-menu>li>a { - font-size: 0.9rem; - } - .cbi-value { - padding: 0.6em 0em; - } - .cbi-value-title { - width: 40%; - min-width: 0rem !important; - text-align: left; - padding-left: 1em; - } - .cbi-value-field, - .cbi-value-description { - width: 100%; - } - .cbi-value-field .cbi-input-select { - width: 95%; - min-width: unset; - } - .cbi-value-field .cbi-input-textarea { - width: 95% !important; - min-width: unset; - } - .cbi-value>.cbi-value-field { - display: table-cell; - width: 20em; - } - .cbi-tabmenu>li, - .tabs>li { - padding: 0.6rem 0rem; - } - .cbi-tabmenu>li>a, - .tabs>li>a { - padding: 0.2rem 0.3rem; - font-size: 0.9rem; - } - .cbi-page-actions>div>input { - display: none; - } - .node-main-login>.main .container { - padding: 0.5rem 1rem 2rem 1rem; - } - .node-main-login>.main .cbi-value { - padding: 0; - } - .node-main-login>.main .cbi-value>* { - width: 100%; - } - .node-main-login>.main form>div:nth-last-child(1) { - margin-top: 2rem; - } - .node-main-login>.main .cbi-value-title { - width: 100% !important; - font-size: 1.2rem; - } - .node-main-login>.main div.cbi-section, - .node-main-login>.main fieldset { - margin: 0; - padding: 0.5rem; - } - h2 { - font-size: 1.5rem; - } - .tabs>li>a { - font-size: 0.9rem; - } - select, - input { - font-size: 0.9rem; - } - .mobile-hide { - display: none; - } - .panel-title { - /*font-size: 1.4rem; - padding-bottom: 1rem; */ - } - .node-system-packages>.main .cbi-value.cbi-value-last>div { - width: 100% !important; - } - .node-system-packages>.main .cbi-value .cbi-value-field input { - width: 100%; - } - .node-status-iptables>.main div>.cbi-map>form { - position: static !important; - margin: 0 0 2rem 0; - padding: 2rem; - border: 0; - font-weight: normal; - font-style: normal; - line-height: 1; - font-family: inherit; - min-width: inherit; - overflow-x: auto; - overflow-y: hidden; - border-radius: 0; - background-color: #FFF; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); - -webkit-overflow-scrolling: touch; - } - .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { - width: 100% !important; - margin: 0; - } - .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { - margin-top: 1rem; - } + body { + font-size: 0.8rem; + } + + div.cbi-section, + fieldset { + padding: 0; + margin: 1rem 0 0 0; + overflow-x: auto; + } + + .tabs { + margin: 0.5rem 0rem + } + + .toggle { + margin: 0; + } + + #maincontent>.container { + margin: 0 1rem 1.5rem 1rem; + } + + .main>.main-left>.nav>.slide>.menu { + font-size: 1rem; + } + + .main>.main-left>.nav>.slide>.slide-menu>li>a { + font-size: 0.9rem; + } + + .main>.main-left>.nav>.slide>.menu:before { + padding-top: 5px; + } + + .main>.main-left>.nav>.slide>.menu:after { + top: 0.9rem; + } + + .cbi-value { + padding: 0.6em 0em; + } + + .cbi-value-title { + width: 40%; + min-width: 0rem !important; + text-align: left; + padding-left: 1em; + } + + + .cbi-value-field, + .cbi-value-description { + width: 95%; + } + + select, + input { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-select { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-textarea { + width: 95% !important; + min-width: unset; + } + + .cbi-value>.cbi-value-field { + /* display: inline-block; + padding-left: 1rem; */ + + display: table-cell; + width: 20em; + } + + .node-main-login .cbi-value>.cbi-value-field { + width: 18rem; + padding-left: 0rem; + } + + .cbi-tabmenu>li, + .tabs>li { + padding: 0.6rem 0rem; + } + + .cbi-tabmenu>li>a, + .tabs>li>a { + padding: 0.2rem 0.3rem; + font-size: 0.9rem; + } + + .cbi-page-actions>div>input { + display: none; + } + + + + .node-main-login>.main .container { + padding: 0.5rem 1rem 2rem 1rem; + margin: 0 auto !important; + } + + + + .node-main-login>.main form>div:nth-last-child(1) { + margin-top: 0rem; + } + + .node-main-login>.main .cbi-value-title { + width: 100% !important; + margin-top: 0rem; + font-size: 1rem; + margin-bottom: 0; + padding: 0 0.5rem; + } + + .node-main-login>.main fieldset { + margin: 0; + padding: 0.5rem; + } + + .node-main-login .alert-message.warning { + width: calc(100% - 2rem); + padding: 1rem 1rem; + font-size: 12px; + } + + + h2 { + font-size: 1.5rem; + + } + + .node-main-login>.main .container h2 { + + margin: -70px auto 15px auto; + + + } + + .tabs>li>a { + font-size: 0.9rem; + } + + select, + input { + font-size: 0.9rem; + } + + .mobile-hide { + display: none; + } + + .panel-title { + font-size: 1.4rem; + padding-bottom: 1rem; + } + + .node-system-packages>.main .cbi-value.cbi-value-last>div { + width: 100% !important; + } + + .node-system-packages .cbi-section-node .cbi-value { + padding: 0.3rem 1rem; + } + + .node-system-packages>.main .cbi-value .cbi-value-field input { + width: 100%; + } + + .node-status-iptables>.main div>.cbi-map>form { + position: static !important; + margin: 0 0 2rem 0; + padding: 2rem; + border: 0; + font-weight: normal; + font-style: normal; + line-height: 1; + font-family: inherit; + min-width: inherit; + overflow-x: auto; + overflow-y: hidden; + border-radius: 0.375rem; + background-color: #FFF; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); + -webkit-overflow-scrolling: touch; + } + + .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { + width: 100% !important; + margin: 0; + } + + .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { + margin-top: 1rem; + } } @media screen and (min-width: 992px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 20rem; - } - .cbi-value-field .cbi-input-select { - min-width: 20rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 20rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 20rem; + } } @media screen and (min-width: 1280px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 22rem; - } - .cbi-value-field .cbi-input-select { - min-width: 22rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 22rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 22rem; + } } @media screen and (min-width: 1600px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 25rem; - } - .cbi-value-field .cbi-input-select { - min-width: 25rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 25rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 25rem; + } } \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/favicon.ico b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/favicon.ico index b407d18455..82faa6bf92 100644 Binary files a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/favicon.ico and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/favicon.ico differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.eot b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.eot new file mode 100644 index 0000000000..efce636a84 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.eot differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.svg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.svg new file mode 100644 index 0000000000..c555b7594f --- /dev/null +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.svg @@ -0,0 +1,1191 @@ + + + + +Created by FontForge 20090622 at Tue Jul 23 03:29:07 2019 + By deploy user +TypoGraphica ©Sharkshock Productions 2015. All Rights Reserved + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.ttf b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.ttf new file mode 100644 index 0000000000..e11f89a0f7 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.ttf differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.woff b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.woff new file mode 100644 index 0000000000..fef38ca003 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/TypoGraphica.woff differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.eot b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.eot new file mode 100644 index 0000000000..2bce3c8b37 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.eot differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.svg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.svg new file mode 100644 index 0000000000..d5495c14aa --- /dev/null +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.svg @@ -0,0 +1,12 @@ + + + +Generated by IcoMoon + + + + + + + + \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.ttf b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.ttf new file mode 100644 index 0000000000..ca364a1b69 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.ttf differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.woff b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.woff new file mode 100644 index 0000000000..7c3a2fee71 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/fonts/icomoon.woff differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg1.jpg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg1.jpg new file mode 100644 index 0000000000..ab7821c7f1 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg1.jpg differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg2.jpg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg2.jpg new file mode 100644 index 0000000000..35f6b02431 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg2.jpg differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg3.jpg b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg3.jpg new file mode 100644 index 0000000000..a614e1a985 Binary files /dev/null and b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/img/bg3.jpg differ diff --git a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/js/script.js b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/js/script.js index 454c31eb79..01957172ee 100644 --- a/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/js/script.js +++ b/package/lienol/luci-theme-argon-dark-mod/htdocs/luci-static/argon_dark_purple/js/script.js @@ -1,11 +1,11 @@ /** - * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * - * luci-theme-material - * Copyright 2015 Lutty Yang + * luci-theme-argon + * Copyright 2019 Jerrykuku * * Have a bug? Please create an issue here on GitHub! - * https://github.com/LuttyYang/luci-theme-material/issues + * https://github.com/jerrykuku/luci-theme-argon/issues * * luci-theme-bootstrap: * Copyright 2008 Steven Barth @@ -15,11 +15,23 @@ * 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 */ - - + +/* + * Font generate by Icomoon + */ (function ($) { + $(".main > .loading").hide(); $(".main > .loading").fadeOut(); /** @@ -36,16 +48,16 @@ var mainNodeName = undefined; var nodeUrl = ""; - (function(node){ - if (node[0] == "admin"){ + (function (node) { + if (node[0] == "admin") { luciLocation = [node[1], node[2]]; - }else{ + } else { luciLocation = node; } - for(var i in luciLocation){ + for (var i in luciLocation) { nodeUrl += luciLocation[i]; - if (i != luciLocation.length - 1){ + if (i != luciLocation.length - 1) { nodeUrl += "/"; } } @@ -61,9 +73,11 @@ luciLocation = ["Main", "Login"]; return true; } - + $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast"); + $(".main > .main-left > .nav > .slide > .menu").removeClass("active"); $(".main > .main-left > .nav > .slide > .menu").each(function () { var ulNode = $(this); + ulNode.next().find("a").each(function () { var that = $(this); var href = that.attr("href"); @@ -87,24 +101,43 @@ $(".main > .main-left > .nav > .slide > .menu").click(function () { var ul = $(this).next(".slide-menu"); var menu = $(this); - if (!ul.is(":visible")) { - menu.addClass("active"); - ul.addClass("active"); - ul.stop(true).slideDown("fast"); - } else { - ul.stop(true).slideUp("fast", function () { - menu.removeClass("active"); - ul.removeClass("active"); - }); + if (!menu.hasClass("exit")) { + $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast"); + $(".main > .main-left > .nav > .slide > .menu").removeClass("active"); + if (!ul.is(":visible")) { + menu.addClass("active"); + ul.addClass("active"); + ul.stop(true).slideDown("fast"); + } else { + ul.stop(true).slideUp("fast", function () { + menu.removeClass("active"); + ul.removeClass("active"); + }); + } + + return false; } - return false; + }); + + + +// define what element should be observed by the observer +// and what types of mutations trigger the callback + if ($("#cbi-dhcp-lan-ignore").length > 0) { + observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), { + subtree: true, + attributes: true + }); + } + /** * hook menu click and add the hash */ $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); + if (lastNode != undefined) + lastNode.removeClass("active"); $(this).parent().addClass("active"); $(".main > .loading").fadeIn("fast"); return true; @@ -114,22 +147,23 @@ * fix menu click */ $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); + if (lastNode != undefined) + lastNode.removeClass("active"); $(this).addClass("active"); $(".main > .loading").fadeIn("fast"); window.location = $($(this).find("a")[0]).attr("href"); return false; }); - - /** + + /** * fix submenu click */ $("#maincontent > .container > .tabs > li").click(function () { - console.log("sub"); $(".main > .loading").fadeIn("fast"); window.location = $($(this).find("a")[0]).attr("href"); return false; }); + /** * get current node and open it */ @@ -147,10 +181,6 @@ */ $("#maincontent > .container").find("a").each(function () { var that = $(this); - var href = that.attr("href"); - if (href != undefined && href.indexOf("javascript") != -1) { - return true; - } var onclick = that.attr("onclick"); if (onclick == undefined || onclick == "") { that.click(function () { @@ -214,12 +244,19 @@ that.after("" + that.text() + ""); }); - /* $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { + $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { var that = $(this); - if (that.text().trim() == ""){ + if (that.text().trim() == "") { that.css("display", "none"); } - }); */ + }); + + $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () { + //$(".node-main-login > .main > .main-right > .login-bg").addClass("blur"); + }); + $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () { + //$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur"); + }); $(".main-right").focus(); diff --git a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/footer.htm b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/footer.htm index d7d4db96d2..e63f26873d 100644 --- a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/footer.htm +++ b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/footer.htm @@ -1,21 +1,33 @@ <%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template - luci-theme-material - Copyright 2015 Lutty Yang + luci-theme-argon + Copyright 2019 Jerrykuku - Have a bug? Please create an issue here on GitHub! - https://github.com/LuttyYang/luci-theme-material/issues + 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 + luci-theme-bootstrap: + Copyright 2008 Steven Barth + Copyright 2008-2016 Jo-Philipp Wich + Copyright 2012 David Menting - MUI: - https://github.com/muicss/mui + MUI: + https://github.com/muicss/mui - Licensed to the public under the Apache License 2.0 + 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/ + + Font generate by Icomoon + https://icomoon.io/ + + Licensed to the public under the Apache License 2.0 -%> <% @@ -46,6 +58,6 @@ var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>; - + diff --git a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/header.htm b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/header.htm index 79c3a2e859..0a8b379899 100644 --- a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/header.htm +++ b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark/header.htm @@ -1,11 +1,11 @@ <%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template - luci-theme-material - Copyright 2015-2017 Lutty Yang + luci-theme-argon + Copyright 2019 Jerrykuku Have a bug? Please create an issue here on GitHub! - https://github.com/LuttyYang/luci-theme-material/issues + https://github.com/jerrykuku/luci-theme-argon/issues luci-theme-bootstrap: Copyright 2008 Steven Barth @@ -15,6 +15,9 @@ MUI: https://github.com/muicss/mui + Agron Theme + https://demos.creative-tim.com/argon-dashboard/index.html + Licensed to the public under the Apache License 2.0 -%> @@ -23,6 +26,8 @@ local util = require "luci.util" local http = require "luci.http" local disp = require "luci.dispatcher" + local fs = require "nixio.fs" + local nutil = require "nixio.util" local boardinfo = util.ubus("system", "board") @@ -41,7 +46,16 @@ local c = tree local i, r - + + function glob(...) + local iter, code, msg = fs.glob(...) + if iter then + return nutil.consume(iter) + else + return nil, code, msg + end + end + -- tag all nodes leading to this page for i, r in ipairs(request) do if c.nodes and c.nodes[r] then @@ -133,8 +147,7 @@ if #grandchildren > 0 then local title = pcdata(striptags(translate(nnode.title))) - local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) - + local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) write('
  • %s' %{ en_title, title @@ -144,9 +157,8 @@ write('
    • ') else local title = pcdata(striptags(translate(nnode.title))) - local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) - - write('
  • %s
    • ' %{ + local en_title = pcdata(striptags(nnode.title)) + write('
  • %s
    • ' %{ en_title, nodeurl(category, r, nnode.query), title @@ -162,7 +174,6 @@ -- calculate the number of unsaved changes if tree.nodes[category] and tree.nodes[category].ucidata then local ucichanges = 0 - for i, j in pairs(require("luci.model.uci").cursor():changes()) do for k, l in pairs(j) do for m, n in pairs(l) do @@ -181,77 +192,113 @@ end end end + + math.randomseed(os.time()) + + local bgcount = 0 + for f in ipairs(glob("/www/luci-static/argon_light_green/img/*")) do + bgcount = bgcount + 1 + end + + -%> - - <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI - - - - - - - - - - - + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI + + + + + + + + + + + - - LuCI"> - - LuCI"> - - - - - - - <% if node and node.css then %> - - <% end -%> - <% if css then %> - - <% end -%> - - - + - LuCI"> + - LuCI"> + + + + + + + <% if node and node.css then %> + + <% end -%> + <% if css then %> + + <% end -%> + + + -
    -
    - - <%=boardinfo.hostname or "?"%> -
    - <% render_changes() %> - -
    -
    -
    +
    -
    Loading...
    -
    - <% render_topmenu() %> -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + <%=boardinfo.hostname or "?"%> +
    + +
    +
    + + + +
    +
    +
    +
    + <% render_topmenu() %> +
    -
    -
    -
    - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> -
    -

    <%:No password set!%>

    - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
    - "><%:Go to password configuration...%> -
    - <%- end -%> - <% if category then render_tabmenu(category, cattree) end %> +
    +
    +
    + + <%=boardinfo.hostname or "?"%> ™ +
    + <% render_changes() %> + +
    +
    +
    +
    +
    + <% if bgcount > 0 then %> + + <% end %> +
    +
    + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> +
    +

    <%:No password set!%>

    +

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

    +
    "><%:Go to password configuration...%>
    +
    + <%- end -%> + + + <% if category then render_tabmenu(category, cattree) end %> diff --git a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/footer.htm b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/footer.htm index d7d4db96d2..e63f26873d 100644 --- a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/footer.htm +++ b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/footer.htm @@ -1,21 +1,33 @@ <%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template - luci-theme-material - Copyright 2015 Lutty Yang + luci-theme-argon + Copyright 2019 Jerrykuku - Have a bug? Please create an issue here on GitHub! - https://github.com/LuttyYang/luci-theme-material/issues + 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 + luci-theme-bootstrap: + Copyright 2008 Steven Barth + Copyright 2008-2016 Jo-Philipp Wich + Copyright 2012 David Menting - MUI: - https://github.com/muicss/mui + MUI: + https://github.com/muicss/mui - Licensed to the public under the Apache License 2.0 + 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/ + + Font generate by Icomoon + https://icomoon.io/ + + Licensed to the public under the Apache License 2.0 -%> <% @@ -46,6 +58,6 @@ var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>; - + diff --git a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/header.htm b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/header.htm index 79c3a2e859..0a8b379899 100644 --- a/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/header.htm +++ b/package/lienol/luci-theme-argon-dark-mod/luasrc/view/themes/argon_dark_purple/header.htm @@ -1,11 +1,11 @@ <%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template - luci-theme-material - Copyright 2015-2017 Lutty Yang + luci-theme-argon + Copyright 2019 Jerrykuku Have a bug? Please create an issue here on GitHub! - https://github.com/LuttyYang/luci-theme-material/issues + https://github.com/jerrykuku/luci-theme-argon/issues luci-theme-bootstrap: Copyright 2008 Steven Barth @@ -15,6 +15,9 @@ MUI: https://github.com/muicss/mui + Agron Theme + https://demos.creative-tim.com/argon-dashboard/index.html + Licensed to the public under the Apache License 2.0 -%> @@ -23,6 +26,8 @@ local util = require "luci.util" local http = require "luci.http" local disp = require "luci.dispatcher" + local fs = require "nixio.fs" + local nutil = require "nixio.util" local boardinfo = util.ubus("system", "board") @@ -41,7 +46,16 @@ local c = tree local i, r - + + function glob(...) + local iter, code, msg = fs.glob(...) + if iter then + return nutil.consume(iter) + else + return nil, code, msg + end + end + -- tag all nodes leading to this page for i, r in ipairs(request) do if c.nodes and c.nodes[r] then @@ -133,8 +147,7 @@ if #grandchildren > 0 then local title = pcdata(striptags(translate(nnode.title))) - local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) - + local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) write('
  • %s' %{ en_title, title @@ -144,9 +157,8 @@ write('
    • ') else local title = pcdata(striptags(translate(nnode.title))) - local en_title = pcdata(striptags(string.gsub(nnode.title," ","_"))) - - write('
  • %s
    • ' %{ + local en_title = pcdata(striptags(nnode.title)) + write('
  • %s
    • ' %{ en_title, nodeurl(category, r, nnode.query), title @@ -162,7 +174,6 @@ -- calculate the number of unsaved changes if tree.nodes[category] and tree.nodes[category].ucidata then local ucichanges = 0 - for i, j in pairs(require("luci.model.uci").cursor():changes()) do for k, l in pairs(j) do for m, n in pairs(l) do @@ -181,77 +192,113 @@ end end end + + math.randomseed(os.time()) + + local bgcount = 0 + for f in ipairs(glob("/www/luci-static/argon_light_green/img/*")) do + bgcount = bgcount + 1 + end + + -%> - - <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI - - - - - - - - - - - + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI + + + + + + + + + + + - - LuCI"> - - LuCI"> - - - - - - - <% if node and node.css then %> - - <% end -%> - <% if css then %> - - <% end -%> - - - + - LuCI"> + - LuCI"> + + + + + + + <% if node and node.css then %> + + <% end -%> + <% if css then %> + + <% end -%> + + + -
    -
    - - <%=boardinfo.hostname or "?"%> -
    - <% render_changes() %> - -
    -
    -
    +
    -
    Loading...
    -
    - <% render_topmenu() %> -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + <%=boardinfo.hostname or "?"%> +
    + +
    +
    + + + +
    +
    +
    +
    + <% render_topmenu() %> +
    -
    -
    -
    - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> -
    -

    <%:No password set!%>

    - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
    - "><%:Go to password configuration...%> -
    - <%- end -%> - <% if category then render_tabmenu(category, cattree) end %> +
    +
    +
    + + <%=boardinfo.hostname or "?"%> ™ +
    + <% render_changes() %> + +
    +
    +
    +
    +
    + <% if bgcount > 0 then %> + + <% end %> +
    +
    + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> +
    +

    <%:No password set!%>

    +

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

    +
    "><%:Go to password configuration...%>
    +
    + <%- end -%> + + + <% if category then render_tabmenu(category, cattree) end %>