diff --git a/luci-theme-argon/Makefile b/luci-theme-argon/Makefile index b1a6f2b..4ca2ccb 100644 --- a/luci-theme-argon/Makefile +++ b/luci-theme-argon/Makefile @@ -7,9 +7,8 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Argon Theme -LUCI_DEPENDS:= -PKG_VERSION:=2.2.7 -PKG_RELEASE:=20210318 +PKG_VERSION:=2.3.1 +PKG_RELEASE:=20230420 include $(TOPDIR)/feeds/luci/luci.mk diff --git a/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css b/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css index ce937f1..754f6bf 100644 --- a/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css +++ b/luci-theme-argon/htdocs/luci-static/argon/css/cascade.css @@ -2,17 +2,17 @@ * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * * luci-theme-argon - * Copyright 2020 Jerrykuku + * Copyright 2023 Jerrykuku * * Have a bug? Please create an issue here on GitHub! * https://github.com/jerrykuku/luci-theme-argon/issues * - * luci-theme-material: + * luci-theme-material: * Copyright 2015 Lutty Yang - * https://github.com/LuttyYang/luci-theme-material/ + * https://github.com/LuttyYang/luci-theme-material/ * * Agron Theme - * https://demos.creative-tim.com/argon-dashboard/index.html + * https://demos.creative-tim.com/argon-dashboard/index.html * * Login background * https://unsplash.com/ @@ -20,155 +20,181 @@ * * Licensed to the public under the Apache License 2.0 */ + /* - * Include base and custom css + * Include base and custom css */ -@import url("fonts.css?v=3"); + @import url("pure-min.css?v=1"); +@import url("fonts.css?v=3"); + :root { - --primary: #5e72e4; - --dark-primary: #483d8b; - --main-color: #09c; - --header-bg: #09c; - --header-color: #fff; - --bar-bg: #5e72e4; - --menu-bg-color: #fff; - --menu-color: #5f6368; - --menu-color-hover: #202124; - --main-menu-color: #202124; - --submenu-bg-hover: #d4d4d4; - --submenu-bg-hover-active: #09c; - --blue: #5e72e4; - --indigo: #5603ad; - --purple: #8965e0; - --pink: #f3a4b5; - --red: #f5365c; - --orange: #fb6340; - --yellow: #ffd600; - --green: #2dce89; - --teal: #11cdef; - --cyan: #2bffc6; - --gray: #8898aa; - --gray-dark: #32325d; - --light: #ced4da; - --lighter: #e9ecef; - --secondary: #f7fafc; - --success: #2dce89; - --info: #11cdef; - --warning: #fb6340; - --danger: #f5365c; - --light: #adb5bd; - --dark: #212529; - --default: #172b4d; - --white: #fff; - --neutral: #fff; - --darker: black; - --background-color: #f4f5f7; - --login-form-bg-color: rgba(244, 245, 247, 0.8); - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --blur-radius: 10px; - --blur-opacity: 0.5; - --blur-radius-dark: 10px; - --blur-opacity-dark: 0.5; - --font-family-sans-serif: -apple-system,BlinkMacSystemFont, "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - --font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif; + --primary: #5e72e4; + --dark-primary: #483d8b; + --main-color: #09c; + --header-bg: #09c; + --header-color: #fff; + --bar-bg: #5e72e4; + --menu-bg-color: #fff; + --menu-color: #5f6368; + --menu-color-hover: #202124; + --main-menu-color: #202124; + --submenu-bg-hover: #d4d4d4; + --submenu-bg-hover-active: #09c; + --blue: #5e72e4; + --indigo: #5603ad; + --purple: #8965e0; + --pink: #f3a4b5; + --red: #f5365c; + --orange: #fb6340; + --yellow: #ffd600; + --green: #2dce89; + --teal: #11cdef; + --cyan: #2bffc6; + --gray: #8898aa; + --gray-dark: #32325d; + --light: #ced4da; + --lighter: #e9ecef; + --secondary: #f7fafc; + --success: #2dce89; + --info: #11cdef; + --warning: #fb6340; + --danger: #f5365c; + --light: #adb5bd; + --dark: #212529; + --default: #172b4d; + --white: #fff; + --neutral: #fff; + --darker: black; + --background-color: #f4f5f7; + --login-form-bg-color: rgba(244,245,247,0.8); + --breakpoint-xs: 0; + --breakpoint-sm: 576px; + --breakpoint-md: 768px; + --breakpoint-lg: 992px; + --breakpoint-xl: 1200px; + --blur-radius: 10px; + --blur-opacity: 0.5; + --blur-radius-dark: 10px; + --blur-opacity-dark: 0.5; + --font-family-sans-serif: -apple-system,BlinkMacSystemFont, "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; + --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif } -html, -body { - margin: 0px; - padding: 0px; - height: 100%; - font-size: 16px; - font-family: var(--font-family-sans-serif); + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box } + +html,body { + margin: 0px; + padding: 0px; + height: 100%; + font-size: 16px; + font-family: var(--font-family-sans-serif) +} + 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.975rem; - background-color: #f4f5f7; - background-color: var(--background-color); - color: #32325d; - color: var(--gray-dark); + background-color: #f4f5f7; + background-color: var(--background-color); + color: #32325d; + color: var(--gray-dark); + -webkit-tap-highlight-color: transparent } -span { - cursor: pointer; + +textarea { + padding: .2rem } -* { - margin: 0; - padding: 0; - box-sizing: border-box; + +textarea:focus-visible { + outline: none; + border: 1px solid var(--primary) } + ::selection { - background-color: #5e72e4; - background-color: var(--primary); - color: #ffffff; - color: var(--white); + background-color: #5e72e4; + background-color: var(--primary); + color: #ffffff; + color: var(--white) } -a:link, -a:visited, -a:active { - color: #5e72e4; - color: var(--primary); - text-decoration: none; + +::placeholder { + color: var(--lighter) } + +a:link,a:visited,a:active { + color: #5e72e4; + color: var(--primary); + text-decoration: none +} + a:hover { - text-decoration: underline; + text-decoration: underline } + li { - list-style-type: none; + list-style-type: none } + .table { - position: relative; - display: table; + position: relative; + display: table } + .tr { - display: table-row; + display: table-row } + .thead { - display: table-header-group; + display: table-header-group } + .tbody { - display: table-row-group; + display: table-row-group } + .tfoot { - display: table-footer-group; + display: table-footer-group } -.td, + +.td,.th { + line-height: normal; + display: table-cell; + padding: .5em; + text-align: center; + vertical-align: middle +} + .th { - line-height: normal; - display: table-cell; - padding: 0.5em; - text-align: center; - vertical-align: middle; - max-width: 375px; - word-wrap: break-word; -} -.th { - font-weight: bold; - white-space: nowrap; + font-weight: bold; + white-space: nowrap } + .tr.placeholder { - height: 4em; + height: 4em } -.tr.placeholder > .td { - line-height: 3; - position: absolute; - right: 0; - bottom: 0; - left: 0; - padding: 0.4rem 0 !important; - text-align: center !important; - background: inherit; + +.tr.placeholder>.td { + line-height: 3; + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: .4rem 0 !important; + text-align: center !important; + background: inherit } + .td[width="33%"] { - padding: 1.1em 1.5rem; + padding: 1.1em 1.5rem } .table[width="33%"], .th[width="33%"], @@ -180,138 +206,211 @@ li { .td[width="100%"] { width: 100%; } + .col-1 { - flex: 1 1 30px !important; + flex: 1 1 30px !important } + .col-2 { - flex: 2 2 60px !important; + flex: 2 2 60px !important } + .col-3 { - flex: 3 3 90px !important; + flex: 3 3 90px !important } + .col-4 { - flex: 4 4 120px !important; + flex: 4 4 120px !important } + .col-5 { - flex: 5 5 150px !important; + flex: 5 5 150px !important } + .col-6 { - flex: 6 6 180px !important; + flex: 6 6 180px !important } + .col-7 { - flex: 7 7 210px !important; + flex: 7 7 210px !important } + .col-8 { - flex: 8 8 240px !important; + flex: 8 8 240px !important } + .col-9 { - flex: 9 9 270px !important; + flex: 9 9 270px !important } + .col-10 { - flex: 10 10 300px !important; + flex: 10 10 300px !important } + * { - box-sizing: border-box; - margin: 0; - padding: 0; + box-sizing: border-box; + margin: 0; + padding: 0 } -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: inherit; - font-weight: normal; - line-height: 1.1 !important; - color: inherit; + +.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 { + font-family: inherit; + font-weight: normal; + line-height: 1.1 !important; + color: inherit } + select { - padding: 0.36rem 0.8rem; - color: #555; - border: thin solid #ccc; - background-color: #fff; - background-image: none; + padding: .36rem .8rem; + color: #555; + border: thin solid #ccc; + background-color: #fff; + background-image: none } -.btn, -button, -select, -input, -.cbi-dropdown { - line-height: 1.5rem; - padding: 0.5rem 0.75rem; - margin: 0.25rem 0.1rem; - color: #8898aa; - border: 1px solid #dee2e6; - border-radius: 0.25rem; - outline: 0; - background-image: none; - box-shadow: none; - transition: box-shadow 0.15s ease; + +.btn,button,select,input,.cbi-dropdown { + line-height: 1.5em; + padding: .5rem .75rem; + color: #8898aa; + border: 1px solid #dee2e6; + border-radius: .25rem; + outline: 0; + background-image: none; + box-shadow: none; + transition: box-shadow .15s ease } -select, -.cbi-dropdown { - width: inherit; - cursor: default; + +select,.cbi-dropdown { + width: inherit; + cursor: default } -select:not([multiple="multiple"]):focus, -input:not(.cbi-button):focus, -.cbi-dropdown:focus { - border-color: #5e72e4; - border-color: var(--primary); - box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, 0.1); + +select:not([multiple="multiple"]):focus,input:not(.cbi-button):focus,.cbi-dropdown:focus { + border-color: #5e72e4; + border-color: var(--primary); + box-shadow: 0 3px 9px rgba(50,50,9,0),3px 4px 8px rgba(94,114,228,0.1) } -.cbi-dropdown, -select[multiple="multiple"] { - height: auto; + +.cbi-dropdown,select[multiple="multiple"] { + height: auto } + pre { - overflow: auto; + overflow: auto } + code { font-size: 1rem; font-size-adjust: 0.35; - padding: 1px 3px; - color: #101010; - border-radius: 2px; - background: #ddd; + padding: 1px 3px; + color: #101010; + border-radius: 2px; + background: #ddd } + abbr { - cursor: help; - text-decoration: underline; - color: #5e72e4; - color: var(--primary); + cursor: help; + text-decoration: underline; + color: #5e72e4; + color: var(--primary) } + hr { - margin: 1rem 0; - opacity: 0.1; - border-color: #eee; + margin: 1rem 0; + opacity: .1; + border-color: #eee } -/*********************** -* -* Login Page -* -***************************/ + +ul { + line-height: normal +} + +li { + list-style-type: none +} + +h1 { + font-size: 2rem; + padding-bottom: 10px; + border-bottom: thin solid #eee +} + +h2 { + margin: 0 0 1rem 0; + font-size: 1.25rem; + letter-spacing: .1rem; + padding: 1rem 1.25rem; + color: #32325d; + border-radius: .375rem; + background: #fff; + box-shadow: 0 4px 8px rgba(0,0,0,0.03); + font-weight: bold +} + +h3 { + font-size: 1.1rem; + line-height: 1; + display: block; + width: 100%; + margin: 0; + margin-bottom: 0; + padding: .8755rem 1.25rem; + color: #32325d; + color: var(--gray-dark); + border-radius: .375rem; + background: #fff; + font-weight: bold +} + +h4 { + margin: 0; + padding: .75rem 1.25rem; + font-size: .7rem; + font-weight: 600; + color: #525f7f; + font-weight: bold +} + +h4 em { + padding: 0 .5rem +} + +h5 { + font-size: 1rem; + margin: 2rem 0 0 0; + padding-bottom: 10px +} + +.pull-right { + float: right +} + +.pull-left { + float: left +} + +.nowrap:not(.td) { + white-space: nowrap +}[disabled="disabled"] { + pointer-events: none +} + .login-page { - height: 100%; + height: 100% } + .login-page .video { - position: absolute; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: #000; - background-color: var(--darker); - overflow: hidden; + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #000; + background-color: var(--darker); + overflow: hidden } + .login-page .video video { position: absolute; top: 50%; @@ -321,723 +420,839 @@ hr { height: 100%; width: 100%; } + .login-page .volume-control { - position: fixed; - right: 1rem; - top: 1rem; - width: 1.5rem; - height: 1.5rem; - z-index: 5000; - cursor: pointer; - background-size: contain; - background-image: url(../img/volume_high.svg); + position: fixed; + right: 1rem; + top: 1rem; + width: 1.5rem; + height: 1.5rem; + z-index: 5000; + cursor: pointer; + background-size: contain; + background-image: url(../img/volume_high.svg) } + .login-page .volume-control.mute { - background-image: url(../img/volume_off.svg); + background-image: url(../img/volume_off.svg) } + .login-page .main-bg { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background-image: url(../img/blank.png); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all 0.5s; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-image: url(../img/blank.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: all .5s } + .login-page .login-container { - height: 100%; - margin-left: 4.5rem; - position: absolute; - top: 0px; - display: flex; - flex-direction: column; - -webkit-box-pack: center; - justify-content: center; - align-items: flex-start; - min-height: 100%; - z-index: 2; - width: 420px; - box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 35px -5px; - margin-left: 5%; - background: transparent; + height: 100%; + margin-left: 4.5rem; + position: absolute; + top: 0px; + display: flex; + flex-direction: column; + -webkit-box-pack: center; + justify-content: center; + align-items: flex-start; + min-height: 100%; + z-index: 2; + width: 420px; + box-shadow: rgba(0,0,0,0.75) 0 0 35px -5px; + margin-left: 5%; + background: transparent } + .login-page .login-container .login-form { - display: flex; - flex-direction: column; - -webkit-box-align: center; - align-items: center; - position: absolute; - top: 0px; - width: 100%; - min-height: 100%; - max-width: 420px; - background-color: #fff; - background-color: var(--white); -} -.login-page .login-container .login-form .brand { - display: flex; - -webkit-box-align: center; - align-items: center; - margin: 50px auto 100px 50px; - color: #525461; - color: var(--default); -} -.login-page .login-container .login-form .brand .icon { - width: 50px; - height: auto; - margin-right: 25px; -} -.login-page .login-container .login-form .brand .brand-text { - font-size: 1.25rem; - font-weight: 700; - font-family: "Sniglet-Regular"; - font-weight:bold; -} -.login-page .login-container .login-form .brand:hover { - text-decoration: none; -} -.login-page .login-container .login-form .form-login { - width: 100%; - padding: 20px 50px; - box-sizing: border-box; -} -.login-page .login-container .login-form .form-login .errorbox { - text-align: center; - color: #fb6340; - color: var(--warning); - padding-bottom: 2rem; -} -.login-page .login-container .login-form .form-login .input-group { - margin-bottom: 1.25rem; - position: relative; -} -.login-page .login-container .login-form .form-login .input-group::before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #525461; - color: var(--default); - font-size: 1.5rem; - position: absolute; - z-index: 100; - left: 10px; - top: 10px; -} -.login-page .login-container .login-form .form-login .input-group .border { - position: absolute; - width: 100%; - height: 1px; - bottom: 0; - border-bottom: 1px #5e72e4 solid; - border-bottom: 1px var(--primary) solid; - transform: scaleX(0); - transition: transform 0.3s; -} -.login-page .login-container .login-form .form-login .input-group input { - font-size: 1rem; - line-height: 1.5em; - display: block; - width: 100%; - padding: 0.5rem 0.75rem 0.5rem 3rem; - margin: 0.825rem 0; - box-sizing: border-box; - transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); - color: #525461; - color: var(--default); - border: 0; - border-radius: 0; - border-bottom: 1px solid #fff; - border-bottom: 1px solid var(--white); - background-color: transparent; - background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233, 236, 239, 0.05); - outline: none; -} -.login-page .login-container .login-form .form-login .input-group input:focus + .border { - transform: scaleX(1); -} -.login-page .login-container .login-form .form-login .input-group .cbi-input-password { - margin-bottom: 2rem; - position: relative; -} -.login-page .login-container .login-form .form-login .user-icon::before { - content: "\e971"; -} -.login-page .login-container .login-form .form-login .pass-icon::before { - content: "\e910"; -} -.login-page .login-container .login-form .cbi-button-apply { - width: 100% !important; - box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px; - font-weight: 600; - font-size: 15px; - color: #fff; - color: var(--white); - text-align: center; - width: 100%; - cursor: pointer; - min-height: 50px; - background-color: #5e72e4 !important; - background-color: var(--primary) !important; - border-radius: 6px; - outline: none; - border-width: initial; - border-style: none; - border-color: initial; - border-image: initial; - padding: 10px 0px; - margin: 30px 0px 100px; - transition: all 0.3s !important; - letter-spacing: 0.8rem; -} -.login-page .login-container .login-form .cbi-button-apply:hover, -.login-page .login-container .login-form .cbi-button-apply :focus { - opacity: 0.9; -} -.login-page .login-container footer { - box-sizing: border-box; - width: 100%; - text-align: center; - line-height: 1.6rem; - display: flex; - justify-content: space-evenly; - margin-top: auto; - padding: 0px 0px 30px; - z-index: 10; - color: #525461; - color: var(--default); - position: absolute; - bottom: 0; -} -.login-page .login-container footer .ftc { - position: absolute; - bottom: 30px; - width: 100%; -} -.login-page .login-container footer .luci-link { - display: block; -} -@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { - .login-page .login-container .login-form { + display: flex; + flex-direction: column; + -webkit-box-align: center; + align-items: center; + position: absolute; + top: 0px; + width: 100%; + min-height: 100%; + max-width: 420px; + background-color: #fff; + background-color: var(--white); -webkit-backdrop-filter: blur(var(--blur-radius)); backdrop-filter: blur(var(--blur-radius)); - background-color: rgba(244, 245, 247, var(--blur-opacity)); - } + background-color: rgba(244, 245, 247, var(--blur-opacity)) } -header, -.main { - width: 100%; + +.login-page .login-container .login-form .brand { + display: flex; + -webkit-box-align: center; + align-items: center; + margin: 50px auto 100px 50px; + color: #525461; + color: var(--default); + justify-content: center } + +.login-page .login-container .login-form .brand .icon { + width: 50px; + height: auto; + margin-right: 25px +} + +.login-page .login-container .login-form .brand .brand-text { + font-size: 1.25rem; + font-weight: 700; + font-family: "Sniglet-Regular"; + font-weight:bold; +} + +.login-page .login-container .login-form .brand:hover { + text-decoration: none +} + +.login-page .login-container .login-form .form-login { + width: 100%; + padding: 20px 50px; + box-sizing: border-box +} + +.login-page .login-container .login-form .form-login .errorbox { + text-align: center; + color: #fb6340; + color: var(--warning); + padding-bottom: 2rem +} + +.login-page .login-container .login-form .form-login .input-group { + margin-bottom: 1.25rem; + position: relative +} + +.login-page .login-container .login-form .form-login .input-group::before { + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #525461; + color: var(--default); + font-size: 1.5rem; + position: absolute; + z-index: 100; + left: 10px; + top: 10px +} + +.login-page .login-container .login-form .form-login .input-group .border { + position: absolute; + width: 100%; + height: 1px; + bottom: 0; + border-bottom: 1px #5e72e4 solid; + border-bottom: 1px var(--primary) solid; + transform: scaleX(0); + transition: transform .3s +} + +.login-page .login-container .login-form .form-login .input-group input { + font-size: 1rem; + line-height: 1.5em; + display: block; + width: 100%; + padding: .5rem .75rem .5rem 3rem; + margin: .825rem 0; + box-sizing: border-box; + transition: all .3s cubic-bezier(.68, -0.55, .265, 1.55); + color: #525461; + color: var(--default); + border: 0; + border-radius: 0; + border-bottom: 1px solid #fff; + border-bottom: 1px solid var(--white); + background-color: transparent; + background-clip: padding-box; + box-shadow: 0 3px 2px rgba(233,236,239,0.05); + outline: none +} + +.login-page .login-container .login-form .form-login .input-group input:focus+.border { + transform: scaleX(1) +} + +.login-page .login-container .login-form .form-login .input-group .cbi-input-password { + margin-bottom: 2rem; + position: relative +} + +.login-page .login-container .login-form .form-login .user-icon::before { + content: "\e971" +} + +.login-page .login-container .login-form .form-login .pass-icon::before { + content: "\e910" +} + +.login-page .login-container .login-form .cbi-button-apply { + width: 100% !important; + box-shadow: rgba(0,0,0,0.1) 0 0 50px 0; + font-weight: 600; + font-size: 15px; + color: #fff; + color: var(--white); + text-align: center; + width: 100%; + cursor: pointer; + min-height: 50px; + background-color: #5e72e4 !important; + background-color: var(--primary) !important; + border-radius: 6px; + outline: none; + border-width: initial; + border-style: none; + border-color: initial; + border-image: initial; + padding: 10px 0px; + margin: 30px 0px 100px; + transition: all .3s !important; + letter-spacing: .8rem +} + +.login-page .login-container .login-form .cbi-button-apply:hover,.login-page .login-container .login-form .cbi-button-apply :focus { + opacity: .9 +} + +.login-page .login-container footer { + box-sizing: border-box; + width: 100%; + text-align: center; + line-height: 1.6rem; + display: flex; + justify-content: space-evenly; + margin-top: auto; + padding: 0px 0px 30px; + z-index: 10; + color: #525461; + color: var(--default); + position: absolute; + bottom: 0 +} + +.login-page .login-container footer .ftc { + position: absolute; + bottom: 30px; + width: 100% +} + +.login-page .login-container footer .luci-link { + display: block +} + +header,.main { + width: 100% +} + footer { - font-size: 0.8rem; - overflow: hidden; - padding: 1rem; - text-align: right; - white-space: nowrap; - color: #aaa; + font-size: .8rem; + overflow: hidden; + padding: 1rem; + text-align: right; + white-space: nowrap; + color: #aaa } -footer > a { - text-decoration: none; - color: #aaa; + +footer>a { + text-decoration: none; + color: #aaa } + small { - font-size: 90%; - line-height: 1.42857143; - white-space: normal; + font-size: 90%; + line-height: 1.42857143; + white-space: normal } + .main { - position: relative; - top: 0; - bottom: 0; - overflow-y: auto; - height: 100%; + position: relative; + top: 0; + bottom: 0; + overflow-y: auto; + height: 100%; + display: flex; + flex-direction: row } + .main-left { - top: 0; - float: left; - width: 15%; - width: calc(0% + 15rem); - height: 100%; - background-color: #fff; - background-color: var(--menu-bg-color); - box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px; - overflow-x: auto; - position: fixed; - z-index: 100; + flex-shrink: 0; + width: 15rem; + height: 100%; + background-color: var(--menu-bg-color); + box-shadow: rgba(0,0,0,0.75) 0 0 15px -5px; + overflow-x: auto; + z-index: 100 } + .main-left .sidenav-header { - padding: 1.5rem; - text-align: center; + padding: 1.5rem .5rem; + text-align: center } + .main-left .sidenav-header .brand { - font-size: 1.8rem; - color: #5e72e4; - color: var(--primary); + display: block; + font-size: 1.8rem; + color: #5e72e4; + color: var(--primary); font-family: "Sniglet-Regular"; font-weight:bold; - text-decoration: none; - text-align: center; - cursor: default; - vertical-align: text-bottom; - white-space: nowrap; + text-decoration: none; + text-align: center; + cursor: default; + margin: 0 2rem } + +.main-left .sidenav-header .brand .logo { + max-width: 100%; + height: auto +} + .main-left::-webkit-scrollbar { - width: 5px; - height: 1px; + width: 5px; + height: 1px } + .main-left::-webkit-scrollbar-thumb { - background-color: #f6f9fc; + background-color: #f6f9fc } + .main-left::-webkit-scrollbar-track { - background-color: #fff; + background-color: #fff } + .main-right { - float: right; - width: 85%; - width: calc(100% - 15rem); - height: 100%; - transition: all 0.2s; + flex-grow: 1; + height: 100%; + transition: all .2s; + overflow-x: hidden; + overflow-y: auto; + display: flex; + flex-direction: column } -.main-right > #maincontent { - position: relative; - z-index: 50; + +.main-right>#maincontent { + position: relative; + z-index: 50; + flex: 1; + display: flex; + flex-direction: column } -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.nowrap:not(.td) { - white-space: nowrap; -} -[disabled="disabled"] { - pointer-events: none; + +.main-right>#maincontent>.container { + margin: 0 1.25rem 1rem 1.25rem; + flex-grow: 1 } + header { - color: #fff; - color: var(--header-color); - padding: 0; - position: relative; + color: #fff; + color: var(--header-color); + padding: 0; + position: relative } + header.bg-primary { - background-color: #5e72e4 !important; - background-color: var(--primary) !important; + background-color: #5e72e4 !important; + background-color: var(--primary) !important } + header::after { - content: ""; - position: absolute; - height: 2rem; - width: 100%; - background-color: #5e72e4 !important; - background-color: var(--primary) !important; + content: ""; + position: absolute; + height: 2rem; + width: 100%; + background-color: #5e72e4 !important; + background-color: var(--primary) !important } + header .fill { - padding: 0.8rem 0; - border-bottom: 0px solid rgba(255, 255, 255, 0.08) !important; + padding: .8rem 0; + border-bottom: 0 solid rgba(255,255,255,0.08) !important; + display: flex } + header .fill .container { - height: 2rem; - padding: 0 1.25rem; + height: 2rem; + padding: 0 1.25rem; + display: flex; + align-items: center; + width: 100% } -header .fill .container .showSide { - display: none; - color: #fff; - font-size: 1.4rem; + +header .fill .container .flex1 { + flex: 1 } -header .fill .container .showSide:hover { - text-decoration: none; + +header .fill .container .flex1 .showSide { + display: none; + color: #fff; + font-size: 1.4rem } -header .fill .container .brand { - font-size: 1.5rem; - color: #fff; + +header .fill .container .flex1 .showSide:hover { + text-decoration: none +} + +header .fill .container .flex1 .brand { + font-size: 1.5rem; + color: #fff; font-family: "Sniglet-Regular"; font-weight:bold; - text-decoration: none; - padding-left: 1rem; - cursor: default; - vertical-align: text-bottom; - display: none; + text-decoration: none; + padding-left: 1rem; + cursor: default; + vertical-align: text-bottom; + display: none } + header .fill .container .pull-right { - float: right; - margin-top: 0rem; - display: flex; + float: right; + margin-top: 0rem; + display: flex } -header .fill .status { - position: absolute; - top: 25%; - right: 1.25rem; - float: right; + +header .fill .status span { + display: inline-block; + font-size: .8rem; + font-weight: bold; + padding: .3rem .8rem; + white-space: nowrap; + text-decoration: none; + text-transform: uppercase; + text-shadow: none; + border-radius: 4px; + cursor: pointer; + transition: all .3s; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12); + margin: 0 .25rem } -header .fill .status span[data-indicator] { - display: inline-block; - font-size: 0.8rem; - font-weight: bold; - padding: 0.3rem 0.8rem; - margin: 0 0.5rem; - white-space: nowrap; - text-decoration: none; - text-transform: uppercase; - text-shadow: none; - border-radius: 3px; - cursor: pointer; - transition: all 0.3s; + +header .fill .status span:last-child { + margin-right: 0 } + +header .fill .status span[data-indicator="poll-status"] { + color: #fff +} + header .fill .status span[data-style="active"] { color: #32325d !important; background-color: #fff; } + header .fill .status span[data-style="inactive"] { color: #ffffff !important; background-color: #fb6340; } + #xhr_poll_status { - display: flex; - margin-left: 0.5rem; + display: flex; + margin-left: .5rem } + #xhr_poll_status * { - color: #fff; + color: #fff } + div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { - border: 0 !important; + border: 0 !important } + .danger { - background-color: #ff7d60 !important; + background-color: #ff7d60 !important } + .warning { - background-color: #f0e68c !important; + background-color: #f0e68c !important } + .success { - background-color: #5cb85c !important; + background-color: #5cb85c !important } + .notice { - background-color: #11cdef !important; - color: #fff; + background-color: #11cdef !important; + color: #fff } + .error { - color: #f00; + color: #f00 } -.alert, -.alert-message { - font-weight: bold; - padding: 1rem; - border: 0; - border-radius: 0.375rem !important; - background-color: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); - text-shadow: 1px 1px rgba(0, 0, 0, 0.1); - margin: 0 0 1em 0; + +.alert,.alert-message { + font-weight: bold; + margin-bottom: 1.25rem; + margin-left: 1.25rem; + margin-right: 1.25rem; + padding: 1rem 1.25rem; + border: 0; + border-radius: .375rem !important; + background-color: #fff; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12); + text-shadow: 1px 1px rgba(0,0,0,0.1) } -.alert-message.fade-in { - margin: 1.2rem !important; + +.alert.error,.alert-message.error { + background-color: #ffd600 } -.alert.error, -.alert-message.error { - background-color: #ffd600; + +.alert h4,.alert-message h4 { + padding: .25rem 0; + border-radius: 4px; + background-color: #ffd600 } -.alert h4, -.alert-message h4 { - padding: 0rem 1.5rem 0.75rem 0rem; + +.alert .btn,.alert-message .btn { + height: auto } -.alert .btn, + +.alert-message>h4 { + font-size: 110%; + font-weight: bold +} + +.alert-message>* { + margin: .5rem 0 +} + .alert-message .btn { - height: auto; + padding: .3rem .6rem } -.alert-message > h4 { - font-size: 110%; - font-weight: bold; + +.container .alert,.container .alert-message { + margin-left: 0; + margin-right: 0; + margin-top: 0rem } -.alert-message.error > h4 { - background-color: #ffd600; -} -.alert-message > * { - margin: 0.5rem 0; -} -.alert-message .btn { - padding: 0.3rem 0.6rem; -} -.container .alert, -.container .alert-message { - margin-top: 1rem; -} -/* - * Main Menu - */ + .main .main-left { - transition: all 0.2s; + transition: all .2s } + .main .main-left .nav { - margin-top: 0.5rem; + margin-top: .5rem } -.main .main-left .nav > li > a:first-child { - display: block; - margin: 0.1rem 0.5rem 0.1rem 0.5rem; - padding: 0.675rem 0 0.675rem 2.5rem; - border-radius: 0.375rem; - text-decoration: none; - cursor: default; - font-size: 1rem; - transition: all 0.2s; - position: relative; + +.main .main-left .nav>li>a:first-child { + display: block; + margin: .1rem .5rem .1rem .5rem; + padding: .675rem 0 .675rem 2.5rem; + border-radius: .375rem; + text-decoration: none; + cursor: default; + font-size: 1rem; + transition: all .2s; + position: relative } -.main .main-left .nav > li > a:first-child.active { - color: #fff; - background: #5e72e4; - background: var(--primary); + +.main .main-left .nav>li>a:first-child.active { + color: #fff; + background: #5e72e4; + background: var(--primary) } -.main .main-left .nav > li > a:first-child.active::before { - color: #fff !important; + +.main .main-left .nav>li>a:first-child.active::before { + color: #fff !important } -.main .main-left .nav > li > a:first-child.active::after { - transform: rotate(90deg); - color: #fff !important; + +.main .main-left .nav>li>a:first-child.active::after { + transform: rotate(90deg); + color: #fff !important } -.main .main-left .nav > li > a:first-child:hover { - cursor: pointer; - color: #fff; - background: #5e72e4; - background: var(--primary); + +.main .main-left .nav>li>a:first-child:hover { + cursor: pointer; + color: #fff; + background: #5e72e4; + background: var(--primary) } -.main .main-left .nav > li > a:first-child:hover::before { - color: #fff !important; + +.main .main-left .nav>li>a:first-child:hover::before { + color: #fff !important } -.main .main-left .nav > li > a:first-child::before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - left: 0.8rem; - padding-top: 3px; - transition: all 0.3s; - content: "\e915"; - color: #5e72e4; - color: var(--primary); + +.main .main-left .nav>li>a:first-child::before { + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + left: .8rem; + padding-top: 3px; + transition: all .3s; + content: "\e915"; + color: #5e72e4; + color: var(--primary) } + .main .main-left .nav li { - padding: 0.5rem 1rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding: 0; + padding: .5rem 1rem; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding: 0 } + .main .main-left .nav li a { - display: block; - color: #5f6368; - color: var(--menu-color); + display: block; + color: #5f6368; + color: var(--menu-color) } + .main .main-left .nav li.slide { - padding: 0; + padding: 0 } + .main .main-left .nav li.slide ul { - display: none; + display: none; + overflow: hidden } + .main .main-left .nav li.slide:hover { - background: none; + background: none } + .main .main-left .nav li.slide .slide-menu { - margin: 0 0.5rem 0 2.5rem; - padding: 0rem 0.5rem; + margin: 0 .5rem 0 2.5rem; + padding: 0 .5rem } + +.main .main-left .nav li.slide .slide-menu.active { + display: block +} + .main .main-left .nav li.slide .slide-menu li { - position: relative; - border-radius: 0.375rem; - margin: 0; - padding: 0.5rem 0rem; - background: none; - list-style: none; + position: relative; + border-radius: .375rem; + margin: 0; + background: none; + list-style: none } + .main .main-left .nav li.slide .slide-menu li a { - white-space: nowrap; - text-decoration: none; + text-decoration: none; + padding: .5rem 0 } + .main .main-left .nav li.slide .slide-menu li::after { - content: ""; - position: absolute; - left: 0; - bottom: 0; - width: 0; - height: 2px; - background-color: #5e72e4; - background-color: var(--primary); - transition: all 0.2s; + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0; + height: 2px; + background-color: #5e72e4; + background-color: var(--primary); + transition: all .2s } + .main .main-left .nav li.slide .slide-menu li:hover { - background: none; + background: none } + .main .main-left .nav li.slide .slide-menu li:hover::after { - width: 100%; + width: 100% } + .main .main-left .nav li.slide .slide-menu .active { - background: none; - color: var(--menu-color); + background: none; + color: var(--menu-color) } + .main .main-left .nav li.slide .slide-menu .active a { - color: var(--menu-color); + color: var(--menu-color) } + .main .main-left .nav li.slide .slide-menu .active::after { - content: ""; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 2px; - background-color: #5e72e4; - background-color: var(--primary); - transition: all 0.2s; + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background-color: #5e72e4; + background-color: var(--primary); + transition: all .2s } + .main .main-left .nav li.slide .slide-menu .active:hover { - background: none; + background: none } + .main .main-left .nav li.slide .slide-menu .active:hover::after { - width: 100%; + width: 100% } + .main .main-left .nav li .menu { - display: block; - margin: 0.1rem 0.5rem 0.1rem 0.5rem; - padding: 0.675rem 0 0.675rem 2.5rem; - border-radius: 0.375rem; - text-decoration: none; - cursor: default; - font-size: 1rem; - transition: all 0.2s; - position: relative; + display: block; + margin: .1rem .5rem .1rem .5rem; + padding: .675rem 0 .675rem 2.5rem; + border-radius: .375rem; + text-decoration: none; + cursor: default; + font-size: 1rem; + transition: all .2s; + position: relative } + .main .main-left .nav li .menu.active { - color: #fff; - background: #5e72e4; - background: var(--primary); + color: #fff; + background: #5e72e4; + background: var(--primary) } + .main .main-left .nav li .menu.active::before { - color: #fff !important; + color: #fff !important } + .main .main-left .nav li .menu.active::after { - transform: rotate(90deg); - color: #fff !important; + transform: rotate(90deg); + color: #fff !important } + .main .main-left .nav li .menu:hover { - cursor: pointer; - color: #fff; - background: #5e72e4; - background: var(--primary); + cursor: pointer; + color: #fff; + background: #5e72e4; + background: var(--primary) } + .main .main-left .nav li .menu:hover::before { - color: #fff !important; + color: #fff !important } + .main .main-left .nav li .menu::before { - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - left: 0.8rem; - padding-top: 3px; - transition: all 0.3s; - content: "\e915"; - color: #5e72e4; - color: var(--primary); + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + left: .8rem; + padding-top: 3px; + transition: all .3s; + content: "\e915"; + color: #5e72e4; + color: var(--primary) } + .main .main-left .nav li .menu::after { - position: absolute; - right: 0.5rem; - top: 0.8rem; - font-family: 'argon' !important; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -moz-osx-font-smoothing: grayscale; - content: '\e90f'; - transition: all 0.15s ease; - color: #ced4da; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - transition: all 0.3s; + position: absolute; + right: .5rem; + top: .8rem; + font-family: 'argon' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + content: '\e90f'; + transition: all .15s ease; + color: #ced4da; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + transition: all .3s } + .main .main-left .nav li .menu[data-title=Status]:before { - content: "\e906"; - color: #5e72e4; - color: var(--primary); + content: "\e906"; + color: #5e72e4; + color: var(--primary) } + .main .main-left .nav li .menu[data-title=System]:before { - content: "\e90a"; - color: #fb6340; + content: "\e90a"; + color: #fb6340 } + .main .main-left .nav li .menu[data-title=Services]:before { - content: "\e909"; - color: #11cdef; + content: "\e909"; + color: #11cdef } + .main .main-left .nav li .menu[data-title=NAS]:before { - content: "\e90c"; - color: #f3a4b5; + content: "\e90c"; + color: #f3a4b5 } + .main .main-left .nav li .menu[data-title=VPN]:before { - content: "\e90b"; - color: #8965e0; + content: "\e90b"; + color: #8965e0 } + .main .main-left .nav li .menu[data-title=Network]:before { - content: "\e908"; - color: #8965e0; + content: "\e908"; + color: #8965e0 } + .main .main-left .nav li .menu[data-title=Bandwidth_Monitor]:before { - content: "\e90d"; - color: #2dce89; + content: "\e90d"; + color: #2dce89 } + .main .main-left .nav li .menu[data-title=Docker]:before { - content: "\e911"; - color: #6699ff; + content: "\e911"; + color: #6699ff } + .main .main-left .nav li .menu[data-title=Statistics]:before { - content: "\e913"; - color: #8965e0; + content: "\e913"; + color: #8965e0 } + .main .main-left .nav li .menu[data-title=Control]:before { - content: "\e912"; - color: #5e72e4; - color: var(--primary); + content: "\e912"; + color: #5e72e4; + color: var(--primary) } + .main .main-left .nav li .menu[data-title=Asterisk]:before { - content: "\e914"; - color: #fb6340; + content: "\e914"; + color: #fb6340 } -.main .main-left .nav li a[data-title=Logout]:before { - content: "\e907"; - color: #adb5bd; + +.main .main-left .nav li a[data-title=Logout]::before,.main .main-left .nav li .food[data-title=Logout]::before { + content: "\e907"; + color: #adb5bd } + .lg { - margin: 0; - padding: 0 !important; + margin: 0; + padding: 0 !important } + .logout { - display: block; - margin: 0.8rem 0.5rem 0.1rem 0.5rem; - padding: 0.675rem 0 0.675rem 2.5rem; - border-radius: 0.375rem; - text-decoration: none; - font-size: 1rem; - transition: all 0.2s; - position: relative; + display: block; + margin: .8rem .5rem .1rem .5rem; + padding: .675rem 0 .675rem 2.5rem; + border-radius: .375rem; + text-decoration: none; + font-size: 1rem; + transition: all .2s; + position: relative } + .logout:before { font-family: 'argon' !important; font-style: normal; @@ -1157,23 +1372,27 @@ h5 { line-height: 1.42857143; padding: 0.5rem 1.5rem; } -.cbi-map-descr + fieldset { - margin-top: 1rem; + +.cbi-map-descr+fieldset { + margin-top: 1rem } -.cbi-map-descr > abbr { - cursor: help; - text-decoration: underline; + +.cbi-map-descr>abbr { + cursor: help; + text-decoration: underline } -.cbi-section > legend { - display: none !important; + +.cbi-section>legend { + display: none !important } -fieldset > fieldset, -.cbi-section > .cbi-section { - margin: 0; - padding: 0; - border: 0; - box-shadow: none; + +fieldset>fieldset,.cbi-section>.cbi-section { + margin: 0; + padding: 0; + border: 0; + box-shadow: none } + .cbi-section > h3:first-child, .panel-title { font-size: 1.1rem; @@ -1198,8 +1417,8 @@ fieldset > fieldset, padding: 1rem; } table { - border-spacing: 0; - border-collapse: collapse; + border-spacing: 0; + border-collapse: collapse } table, .table { @@ -1208,6 +1427,7 @@ table, font-size: 95%; border-collapse: separate; } + .table .table-titles th { background-color: #e9ecef; background-color: var(--lighter); @@ -1231,6 +1451,7 @@ table > thead > tr > th, .container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td { padding: 0.6rem; } + .cbi-section-table-cell { line-height: 1.1; align-self: flex-end; @@ -1351,32 +1572,28 @@ td > table > tbody > tr > td, text-decoration: none; outline: 0; } -.btn:hover, -.btn:focus, -.cbi-button:hover, -.cbi-button:focus, -.item:hover::after, -.item:focus::after { - box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); + +.btn:hover,.btn:focus,.cbi-button:hover,.cbi-button:focus,.item:hover::after,.item:focus::after { + box-shadow: 0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.2) } -.btn:active, -.cbi-button:active, -.item:active::after { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + +.btn:active,.cbi-button:active,.item:active::after { + box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23) } -.cbi-button-up:hover, -.cbi-button-up:focus { - box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.2); + +.cbi-button-up:hover,.cbi-button-up:focus { + box-shadow: 0 0 2px rgba(0,0,0,0.12),0 -2px 2px rgba(0,0,0,0.2) } + .cbi-button-up:active { - box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 -6px 6px rgba(0, 0, 0, 0.23); + box-shadow: 0 -10px 20px rgba(0,0,0,0.19),0 -6px 6px rgba(0,0,0,0.23) } -.btn:disabled, -.cbi-button:disabled { - cursor: not-allowed; - pointer-events: none; - opacity: 0.5; - box-shadow: none; + +.btn:disabled,.cbi-button:disabled { + cursor: not-allowed; + pointer-events: none; + opacity: .5; + box-shadow: none } /* gray */ .alert-message [class="btn"], @@ -1394,238 +1611,225 @@ td > table > tbody > tr > td, border: thin solid #8898aa; background-color: #8898aa; } -/* dark blue */ -.btn.primary, -.cbi-button, -.cbi-page-actions .cbi-button-save, -.cbi-page-actions .cbi-button-apply + .cbi-button-save, -.cbi-button-add, -.cbi-button-save, -.cbi-button-positive, -.cbi-button-link, -.cbi-button[value="Enable"], -.cbi-button[value="Scan"], -.cbi-button[value^="Back"], -.cbi-button-neutral[onclick="handleConfig(event)"] { - font-weight: normal; - color: #fff !important; - border: thin solid #5e72e4; - border: thin solid var(--primary); - background-color: #5e72e4; - background-color: var(--primary); + +.btn.primary,.cbi-page-actions .cbi-button-save,.cbi-page-actions .cbi-button-apply+.cbi-button-save,.cbi-button-add,.cbi-button-save,.cbi-button-positive,.cbi-button-link,.cbi-button[value="Enable"],.cbi-button[value="Scan"],.cbi-button[value^="Back"],.cbi-button-neutral[onclick="handleConfig(event)"] { + font-weight: normal; + color: #fff !important; + border: thin solid #5e72e4; + border: thin solid var(--primary); + background-color: #5e72e4; + background-color: var(--primary) } -/* light blue */ -.cbi-button, -.cbi-page-actions .cbi-button-apply, -.cbi-section-actions .cbi-button-edit, -.cbi-button-edit, -.cbi-button-apply, -.cbi-button-reload, -.cbi-button-action, -.cbi-button[value="Submit"], -.cbi-button[value="Upload"], -.cbi-button[value$="Apply"], -.cbi-button[onclick="addKey(event)"] { - font-weight: normal; - cursor: pointer; - color: #fff !important; - border: thin solid #5e72e4; - border: thin solid var(--primary); - background-color: #5e72e4; - background-color: var(--primary); + +.cbi-page-actions .cbi-button-apply,.cbi-section-actions .cbi-button-edit,.cbi-button-edit,.cbi-button-apply,.cbi-button-reload,.cbi-button-action,.cbi-button[value="Submit"],.cbi-button[value="Upload"],.cbi-button[value$="Apply"],.cbi-button[onclick="addKey(event)"] { + font-weight: normal; + color: #fff !important; + border: thin solid #5e72e4; + border: thin solid var(--primary); + background-color: #5e72e4; + background-color: var(--primary) } -/* red */ -.btn.danger, -.cbi-section-remove > .cbi-button, -.cbi-button-remove, -.cbi-button-reset, -.cbi-button-negative, -.cbi-button[value="Stop"], -.cbi-button[value="Kill"], -.cbi-button[onclick="reboot(this)"], -.cbi-button-neutral[value="Restart"] { - font-weight: normal; - color: #fff; - border: thin solid #f5365c; - border: thin solid var(--red); - background-color: #f5365c; - background-color: var(--red); + +.btn.danger,.cbi-section-remove>.cbi-button,.cbi-button-remove,.cbi-button-reset,.cbi-button-negative,.cbi-button[value="Stop"],.cbi-button[value="Kill"],.cbi-button[onclick="reboot(this)"],.cbi-button-neutral[value="Restart"] { + font-weight: normal; + color: #fff; + border: thin solid #f5365c; + border: thin solid var(--red); + background-color: #f5365c; + background-color: var(--red) } -/* yellow */ -.btn[value="Dismiss"], -.cbi-button[value="Terminate"], -.cbi-button[value="Reset"], -.cbi-button[value="Disabled"], -.cbi-button[onclick^="iface_reconnect"], -.cbi-button[onclick="handleReset(event)"], -.cbi-button-neutral[value="Disable"] { - font-weight: normal; - color: #fff; - border: thin solid #eea236; - background-color: #f0ad4e; + +.btn[value="Dismiss"],.cbi-button[value="Terminate"],.cbi-button[value="Reset"],.cbi-button[value="Disabled"],.cbi-button[onclick^="iface_reconnect"],.cbi-button[onclick="handleReset(event)"],.cbi-button-neutral[value="Disable"] { + font-weight: normal; + color: #fff; + border: thin solid #eea236; + background-color: #f0ad4e } -/* green */ -.cbi-button-success, -.cbi-button-download { - font-weight: normal; - color: #fff; - border: thin solid #4cae4c; - background-color: #5cb85c; + +.cbi-button-success,.cbi-button-download { + font-weight: normal; + color: #fff; + border: thin solid #4cae4c; + background-color: #5cb85c } + .cbi-page-actions .cbi-button-link:first-child { - float: left; + float: left } + .a-to-btn { - text-decoration: none; + text-decoration: none } + .cbi-value-field .cbi-button-add { - font-weight: bold; - margin: 4px 0 4px 3px; - padding: 1px 6px; - display: flex; - align-items: center; + font-weight: bold; + padding: 1px 6px; + display: inline-block; + align-items: center } + .tabs { - margin: 0 0 1rem 0; - padding: 0 1rem; - background-color: #FFFFFF; - border-radius: 0.375rem; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); - white-space: nowrap; - overflow-x: auto; + margin: 0 0 1rem 0; + padding: 0 1rem; + background-color: #FFFFFF; + border-radius: .375rem; + box-shadow: 0 4px 8px rgba(0,0,0,0.03); + white-space: nowrap; + overflow-x: auto } + .tabs::-webkit-scrollbar { - width: 1px; - height: 5px; + width: 1px; + height: 5px } + .tabs::-webkit-scrollbar-thumb { - background-color: #f6f9fc; + background-color: #f6f9fc } + .tabs::-webkit-scrollbar-track { - background-color: #fff; + background-color: #fff } -.tabs li[class~="active"], -.tabs li:hover { - cursor: pointer; - border-bottom: 0.18751rem solid #5e72e4; - border-bottom: 0.18751rem solid var(--primary); - color: #5e72e4; - color: var(--primary); - background-color: #dce1fe; - margin-bottom: 0; - border-radius: 0; + +.tabs li[class~="active"],.tabs li:hover { + cursor: pointer; + border-bottom: .18751rem solid #5e72e4; + border-bottom: .18751rem solid var(--primary); + color: #5e72e4; + color: var(--primary); + background-color: #e4e9ee; + margin-bottom: 0; + border-radius: 0 } -.tabs li[class~="active"] a, -.tabs li:hover a { - color: #5e72e4; - color: var(--primary); + +.tabs li[class~="active"] a,.tabs li:hover a { + color: #5e72e4; + color: var(--primary) } + .tabs li { - font-size: 0.875rem; - display: inline-block; - padding: 0.875rem 0rem; - border-bottom: 0.18751rem solid rgba(0, 0, 0, 0); - margin: 0 0.2rem; + font-size: .875rem; + display: inline-block; + padding: .875rem 0; + border-bottom: .18751rem solid rgba(0,0,0,0); + margin: 0; + transition: all .2s } + .tabs li a { - text-decoration: none; - color: #404040; - padding: 0.5rem 0.8rem; + text-decoration: none; + color: #404040; + padding: .5rem .8rem } + .tabs li:hover { - border-bottom: 0.18751rem solid #5e72e4; - border-bottom: 0.18751rem solid var(--primary); + border-bottom: .18751rem solid #5e72e4; + border-bottom: .18751rem solid var(--primary) } + .cbi-tabmenu { - color: white; - padding: 0.5rem 1rem 0 1rem; - white-space: nowrap; - overflow-x: auto; + color: white; + padding: .5rem 1rem 0 1rem; + white-space: nowrap; + overflow-x: auto } + .cbi-tabmenu::-webkit-scrollbar { - width: 1px; - height: 5px; + width: 1px; + height: 5px } + .cbi-tabmenu::-webkit-scrollbar-thumb { - background-color: #f6f9fc; + background-color: #f6f9fc } + .cbi-tabmenu::-webkit-scrollbar-track { - background-color: #fff; + background-color: #fff } + .cbi-tabmenu li { - background: #dce3e9; - display: inline-block; - font-size: 0.875rem; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - padding: 0.5rem 0rem; - border-bottom: 0.18751rem solid rgba(0, 0, 0, 0); - margin: 0 0.2rem; + background: #dce3e9; + display: inline-block; + font-size: .875rem; + border-top-left-radius: .25rem; + border-top-right-radius: .25rem; + padding: .5rem 0; + border-bottom: .18751rem solid rgba(0,0,0,0); + margin: 0 .2rem } + .cbi-tabmenu li a { - text-decoration: none; - color: #404040; - padding: 0.5rem 0.8rem; + text-decoration: none; + color: #404040; + padding: .5rem .8rem } + .cbi-tabmenu li:hover { - cursor: pointer; - border-bottom: 0.18751rem solid #5e72e4; - border-bottom: 0.18751rem solid var(--primary); - color: #5e72e4; - color: var(--primary); - background-color: #dce1fe; - margin-bottom: 0; + cursor: pointer; + border-bottom: .18751rem solid #5e72e4; + border-bottom: .18751rem solid var(--primary); + color: #5e72e4; + color: var(--primary); + background-color: #e4e9ee; + margin-bottom: 0 } + .cbi-tabmenu li:hover a { - color: #525f7f; + color: #525f7f } + .cbi-tabmenu li[class~="cbi-tab"] { - border-bottom: 0.18751rem solid #5e72e4; - border-bottom: 0.18751rem solid var(--primary); - color: #5e72e4; - color: var(--primary); - background-color: #dce1fe; - margin-bottom: 0; + border-bottom: .18751rem solid #5e72e4; + border-bottom: .18751rem solid var(--primary); + color: #5e72e4; + color: var(--primary); + background-color: #e4e9ee; + margin-bottom: 0 } + .cbi-tabmenu li[class~="cbi-tab"] a { - color: #5e72e4; - color: var(--primary); + color: #5e72e4; + color: var(--primary) } + .cbi-tab-descr { - padding: 0.5rem 1.5rem; + padding: .5rem 1.5rem } -.cbi-section .cbi-section-remove:nth-of-type(2n), -.container > .cbi-section .cbi-section-node:nth-of-type(2n) { - background-color: #f9f9f9; + +.cbi-section-node { + padding: 0 } -[data-tab-title] { - overflow: hidden; - height: 0; - opacity: 0; - margin: 0; - padding: 0rem 0rem !important; + +.cbi-section .cbi-section-remove:nth-of-type(2n),.container>.cbi-section .cbi-section-node:nth-of-type(2n) { + background-color: #f9f9f9 +}[data-tab-title] { + overflow: hidden; + height: 0; + opacity: 0; + margin: 0; + padding: 0rem 0rem !important +}[data-tab-title] p { + margin-left: 1rem; + margin-bottom: 1rem +}[data-tab-active="true"] { + overflow: visible; + height: auto; + opacity: 1; + transition: opacity .25s ease-in; + margin: inherit !important } -[data-tab-title] p { - margin-left: 1rem; - margin-bottom: 1rem; -} -[data-tab-active="true"] { - overflow: visible; - height: auto; - opacity: 1; - transition: opacity 0.25s ease-in; - margin: inherit !important; -} -.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3), -.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) { - background-color: #f9f9f9; + +.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) { + background-color: #f9f9f9 } + .cbi-section-node-tabbed { - margin-top: 0; - padding: 0; - border: 0 solid #d4d4d4; - border-radius: 0.375rem; + margin-top: 0; + padding: 0; + border: 0 solid #d4d4d4; + border-radius: .375rem } + .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { background-color: #f9f9f9; } @@ -1639,28 +1843,30 @@ td > table > tbody > tr > td, color: #32325d; color: var(--gray-dark); } + .cbi-value-description { - font-size: small; - padding: 0.5rem; - opacity: 0.5; + font-size: small; + padding: .5rem; + opacity: .5 } + .cbi-value-title { - display: table-cell; - /*float: left;*/ - width: 23rem; - padding-top: 0.25rem; - padding-right: 2rem; - text-align: right; - word-wrap: break-word; + display: table-cell; + float: left; + width: 23rem; + padding-right: 2rem; + text-align: right; + word-wrap: break-word } + .cbi-value { - display: inline-block; - width: 100%; - padding: 0.35rem 1rem 0.2rem 1rem; - line-height: 2.4rem; + display: inline-block; + width: 100%; + padding: .35rem 1rem .2rem 1rem; + line-height: 2.4rem } .cbi-value ul { - line-height: 1.25; + line-height: 1.25 } .cbi-value-field .cbi-dropdown, .cbi-value-field .cbi-input-select, @@ -1680,41 +1886,48 @@ td > table > tbody > tr > td, margin-left: 0; border: 0; } -#cbi-firewall-zone .cbi-input-select, -#cbi-network-switch_vlan .cbi-input-select { - min-width: 11rem; + +#cbi-firewall-zone .cbi-input-select,#cbi-network-switch_vlan .cbi-input-select { + min-width: 11rem } + #cbi-network-switch_vlan .cbi-input-text { - max-width: 3rem; + max-width: 3rem } + .cbi-input-invalid { - color: #f5365c; - border-bottom-color: #f5365c; + color: #f5365c !important; + border-color: #f5365c !important } + .cbi-section-error { - font-weight: bold; - line-height: 1.42857143; - margin: 18px; - padding: 6px; - border: thin solid #f5365c; - border-radius: 3px; - background-color: #fce6e6; + font-weight: bold; + line-height: 1.42857143; + margin: 18px; + padding: 6px; + border: thin solid #f5365c; + border-radius: 3px; + background-color: #fce6e6 } + .cbi-section-error ul { - margin: 0 0 0 20px; + margin: 0 0 0 20px } + .cbi-section-error ul li { - font-weight: bold; - color: #f5365c; + font-weight: bold; + color: #f5365c } + .td[data-title]::before { - font-weight: bold; - display: none; - padding: 0.25rem 0; - content: attr(data-title) ":\20"; - text-align: left; - white-space: nowrap; + font-weight: bold; + display: none; + padding: .25rem 0; + content: attr(data-title) ":\20"; + text-align: left; + white-space: nowrap } + .tr.placeholder .td[data-title]::before { display: none; } @@ -1745,8 +1958,9 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { } */ .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { - width: auto !important; + width: auto !important } + .td.cbi-section-actions { text-align: right !important; vertical-align: middle; @@ -1759,18 +1973,20 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { .td.cbi-section-actions > * { display: inline-flex; } -.td.cbi-section-actions > * > *, -.td.cbi-section-actions > * > form > * { - margin: 0 5px; - display: flex; - align-items: center; + +.td.cbi-section-actions>*>*,.td.cbi-section-actions>*>form>* { + margin: 0 5px; + display: flex; + align-items: center } -.td.cbi-section-actions > * > form { - display: inline-flex; - margin: 0; + +.td.cbi-section-actions>*>form { + display: inline-flex; + margin: 0 } + .cbi-checkbox { - margin: 0 0.25rem; + margin: 0 .25rem } /* lists */ .cbi-dynlist { @@ -1838,213 +2054,270 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { width: 100%; min-width: 16rem; } -.cbi-dynlist > .add-item input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - margin-right: 0; - border-right: none; + +.cbi-dynlist>.add-item input { + display: block; + padding: .5rem .75rem; + box-sizing: border-box; + min-width: 15.5rem; + width: 15.5rem; + transition: box-shadow .15s ease; + white-space: nowrap; + word-break: break-word; + font-size: .875rem; + line-height: 1.5rem; + color: #8898aa; + border: 1px solid #dee2e6; + border-radius: .25rem 0 0 .25rem; + border-right-width: 0; + outline: 0; + background-image: none; + box-shadow: none } -.cbi-dynlist > .add-item .cbi-button-add { - font-weight: normal; - font-size: 1.2rem; - display: flex; - align-items: center; - line-height: 1.5rem; - padding: 0.5rem 0.75rem; - margin: 0.25rem 0.1rem 0.25rem 0; - color: #fff; - border: 1px solid #5e72e4; - border: 1px solid var(--primary); - border-radius: 0.25rem; - outline: 0; - background-image: none; - box-shadow: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; + +.cbi-dynlist>.add-item .cbi-button { + display: flex; + width: auto !important; + padding-left: .8rem; + padding-right: .8rem; + margin-left: 0; + align-items: center; + justify-content: center; + font-size: .875rem; + line-height: 1.5rem; + outline: 0; + background-image: none; + background-color: var(--gray); + box-shadow: none; + color: var(--white); + border-color: var(--gray); + border-radius: .25rem; + border-top-left-radius: 0; + border-bottom-left-radius: 0 } -.cbi-dynlist > .add-item:not([ondrop]) > input { - overflow: hidden; - width: 100%; - min-width: 15rem; - white-space: nowrap; - text-overflow: ellipsis; + +.cbi-dynlist>.add-item .cbi-button-add { + width: 2.5rem !important; + padding: .5rem 0 !important; + font-weight: normal; + font-size: 1.2rem; + color: #fff; + background-color: var(--primary); + border: 1px solid var(--primary) } -.cbi-dynlist > .add-item[ondrop] > input { - min-width: 13rem; + +.cbi-dynlist>.add-item:not([ondrop])>input { + overflow: hidden; + min-width: 15.5rem; + width: 15.5rem; + white-space: nowrap; + text-overflow: ellipsis } -.cbi-dynlist, -.cbi-dropdown { - position: relative; - display: inline-flex; - padding: 0.2rem 0.2rem; + +.cbi-dynlist[name="sshkeys"]>.item { + max-width: none } + +.cbi-dynlist>.cbi-dynlist>.add-item[ondrop]>input { + min-width: 13rem +} + +.cbi-dynlist,.cbi-dropdown { + position: relative; + display: inline-flex; + min-height: 2.1875rem +} + .cbi-dropdown[placeholder*="select"] { - max-width: 25rem; - height: auto; - margin-top: -3px; + max-width: 25rem; + height: auto; + margin-top: -3px } -.cbi-dropdown > ul { - display: flex; - overflow-x: hidden; - overflow-y: auto; - width: 100%; - margin: 0 !important; - padding: 0; - list-style: none; - outline: 0; + +.cbi-dropdown>ul { + display: flex; + overflow-x: hidden; + overflow-y: auto; + width: 100%; + margin: 0 !important; + padding: 0; + list-style: none; + outline: 0 } -.cbi-dropdown > ul.preview { - display: none; + +.cbi-dropdown>ul.preview { + display: none } -.cbi-button-apply > ul.preview { - display: none; + +.cbi-button-apply>ul.preview { + display: none } -.cbi-button-apply > ul.preview li { - color: #fff; + +.cbi-button-apply>ul.preview li { + color: #fff } -.cbi-button-apply > ul:first-child li { - color: #fff; + +.cbi-button-apply>ul:first-child li { + color: #fff } -.cbi-dropdown > .open { - flex-basis: 15px; + +.cbi-dropdown>.open { + flex-basis: 15px } -.cbi-dropdown > .open, -.cbi-dropdown > .more { - font-size: 1rem; - font-weight: 900; - line-height: 2; - display: flex; - flex-direction: column; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - padding: 0 0.25em; - cursor: default; - text-align: center; - outline: 0; + +.cbi-dropdown>.open,.cbi-dropdown>.more { + font-size: 1rem; + font-weight: 900; + line-height: 1em; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + padding: 0 .25em; + cursor: default; + text-align: center; + outline: 0 } -.cbi-dropdown > .more, -.cbi-dropdown > ul > li[placeholder] { - font-weight: bold; - display: none; - color: #777; - text-shadow: 1px 1px 0 #fff; + +.cbi-dropdown>.more,.cbi-dropdown>ul>li[placeholder] { + font-weight: bold; + display: none; + color: #777; + text-shadow: 1px 1px 0 #fff } -.cbi-dropdown > ul > li { - display: none; - overflow: hidden; - align-items: center; - align-self: center; - flex-grow: 1; - flex-shrink: 1; - min-height: 20px; - padding: 0.25em; - white-space: nowrap; - text-overflow: ellipsis; + +.cbi-dropdown>ul>li { + display: none; + overflow: hidden; + align-items: center; + align-self: center; + flex-grow: 1; + flex-shrink: 1; + min-height: 20px; + padding: .125rem .25em; + white-space: nowrap; + text-overflow: ellipsis } -.cbi-dropdown > ul > li .hide-open { - display: initial; + +.cbi-dropdown>ul>li .hide-open { + display: initial } -.cbi-dropdown > ul > li .hide-close { - display: none; + +.cbi-dropdown>ul>li .hide-close { + display: none } -.cbi-dropdown > ul > li[display]:not([display="0"]) { - border-left: thin solid #ccc; + +.cbi-dropdown>ul>li[display]:not([display="0"]) { + border-left: thin solid #ccc } -.cbi-dropdown[empty] > ul { - max-width: 1px; + +.cbi-dropdown[empty]>ul { + max-width: 1px } -.cbi-dropdown > ul > li > form { - display: none; - margin: 0; - padding: 0; - pointer-events: none; + +.cbi-dropdown>ul>li>form { + display: none; + margin: 0; + padding: 0; + pointer-events: none } -.cbi-dropdown > ul > li img { - margin-right: 0.25em; - vertical-align: middle; + +.cbi-dropdown>ul>li img { + margin-right: .25em; + vertical-align: middle } -.cbi-dropdown > ul > li > form > input[type="checkbox"] { - height: auto; - margin: 0; + +.cbi-dropdown>ul>li>form>input[type="checkbox"] { + height: auto; + margin: 0 } -.cbi-dropdown > ul > li input[type="text"] { - height: 20px; + +.cbi-dropdown>ul>li input[type="text"] { + height: 20px } -.cbi-dropdown[open] > ul.dropdown { - position: absolute; - z-index: 1100; - display: block; - width: auto; - min-width: 100%; - max-width: none; - max-height: 200px !important; - border: 0 solid #918e8c; - background: #ffffff; - box-shadow: 0 0 4px #918e8c; - border-bottom-left-radius: 0.35rem; - border-bottom-right-radius: 0.35rem; - color: var(--main-menu-color); - margin-left: -0.2rem !important; + +.cbi-dropdown[open]>ul.dropdown { + position: absolute; + z-index: 1100; + display: block; + width: auto; + min-width: 100%; + max-width: none; + max-height: 200px !important; + border: 0 solid #918e8c; + background: #ffffff; + box-shadow: 0 0 4px #918e8c; + border-bottom-left-radius: .35rem; + border-bottom-right-radius: .35rem; + color: var(--main-menu-color); + margin-left: -0.55rem !important } -.cbi-dropdown[open] > ul.dropdown li { - color: #000; + +.cbi-dropdown[open]>ul.dropdown li { + color: #000 } -.cbi-dropdown > ul > li[display], -.cbi-dropdown[open] > ul.preview, -.cbi-dropdown[open] > ul.dropdown > li, -.cbi-dropdown[multiple] > ul > li > label, -.cbi-dropdown[multiple][open] > ul.dropdown > li, -.cbi-dropdown[multiple][more] > .more, -.cbi-dropdown[multiple][empty] > .more { - display: flex; - align-items: center; - flex-grow: 1; + +.cbi-dropdown>ul>li[display],.cbi-dropdown[open]>ul.preview,.cbi-dropdown[open]>ul.dropdown>li,.cbi-dropdown[multiple]>ul>li>label,.cbi-dropdown[multiple][open]>ul.dropdown>li,.cbi-dropdown[multiple][more]>.more,.cbi-dropdown[multiple][empty]>.more { + display: flex; + align-items: center; + flex-grow: 1 } -.cbi-dropdown[empty] > ul > li, -.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], -.cbi-dropdown[multiple][open] > ul.dropdown > li > form { - display: block; + +.cbi-dropdown[empty]>ul>li,.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],.cbi-dropdown[multiple][open]>ul.dropdown>li>form { + display: block } -.cbi-dropdown[open] > ul.dropdown > li .hide-open { - display: none; + +.cbi-dropdown[open]>ul.dropdown>li .hide-open { + display: none } -.cbi-dropdown[open] > ul.dropdown > li .hide-close { - display: initial; + +.cbi-dropdown[open]>ul.dropdown>li .hide-close { + display: initial } -.cbi-dropdown[open] > ul.dropdown > li { - border-bottom: thin solid #ccc; - padding: 0.5rem 0.8rem; + +.cbi-dropdown[open]>ul.dropdown>li { + border-bottom: thin solid #ccc; + padding: .5rem .8rem } -.cbi-dropdown[open] > ul.dropdown > li label { - margin-left: 0.5rem; + +.cbi-dropdown[open]>ul.dropdown>li label { + margin-left: .5rem } -.cbi-dropdown[open] > ul.dropdown > li[selected] { - background: #dce1fe; + +.cbi-dropdown[open]>ul.dropdown>li[selected] { + background: #e4e9ee } -.cbi-dropdown[open] > ul.dropdown > li.focus { - background: #dce1fe; - outline: none; + +.cbi-dropdown[open]>ul.dropdown>li.focus { + background: #e4e9ee; + outline: none } -.cbi-dropdown[open] > ul.dropdown > li:last-child { - margin-bottom: 0; - border-bottom: 0; + +.cbi-dropdown[open]>ul.dropdown>li:last-child { + margin-bottom: 0; + border-bottom: 0 } -.cbi-dropdown[open] > ul.dropdown > li[unselectable] { - opacity: 0.7; + +.cbi-dropdown[open]>ul.dropdown>li[unselectable] { + opacity: .7 } -.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child { - width: 100%; + +.cbi-dropdown[open]>ul.dropdown>li>input.create-item-input:first-child:last-child { + width: 100% } + .cbi-dropdown[disabled] { - pointer-events: none; - opacity: 0.6; + pointer-events: none; + opacity: .6 } + .cbi-dropdown .zonebadge { - width: 100%; + width: 100% } + .cbi-dropdown[open] .zonebadge { - width: auto; + width: auto } /* progressbar */ .cbi-progressbar { @@ -2081,300 +2354,381 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { white-space: pre; text-overflow: ellipsis; } + #modal_overlay { - position: fixed; - z-index: 900; - top: 0; - right: 10000px; - bottom: 0; - left: -10000px; - overflow-y: scroll; - transition: opacity 0.125s ease-in; - opacity: 0; - background: rgba(0, 0, 0, 0.7); - -webkit-overflow-scrolling: touch; + position: fixed; + z-index: 900; + top: 0; + right: 10000px; + bottom: 0; + left: -10000px; + overflow-y: scroll; + transition: opacity .125s ease-in; + opacity: 0; + background: rgba(0,0,0,0.7); + -webkit-overflow-scrolling: touch } + .modal { - display: flex; - align-items: center; - flex-wrap: wrap; - width: 90%; - min-width: 270px; - max-width: 600px; - min-height: 32px; - margin: 5em auto; + display: flex; + align-items: center; + flex-wrap: wrap; + width: 90%; + min-width: 270px; + max-width: 600px; + min-height: 32px; + margin: 5em auto; padding: 1em; border-radius: 10px !important; - background: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); + background: #fff; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12) } -.modal > * { - line-height: normal; - flex-basis: 100%; - margin-bottom: 0.5em; - max-width: 100%; + +.modal>* { + line-height: normal; + flex-basis: 100%; + margin-bottom: .5em; + max-width: 100% } -.modal > pre, -.modal > textarea { - font-size: 0.8rem; - font-size-adjust: 0.35; - overflow: auto; - margin-bottom: 0.5em; - padding: 8.5px; - cursor: auto; - white-space: pre-wrap; - color: #ffc100; - outline: 0; - background-color: #101010; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); + +.modal>pre,.modal>textarea { + font-size: 1rem; + font-size-adjust: .35; + overflow: auto; + margin-bottom: .5em; + padding: 8.5px; + cursor: auto; + white-space: pre-wrap; + color: #eee; + outline: 0; + background-color: #101010; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12) } -.modal > h4 { - margin: 0.5em 0; + +.modal>h4 { + display: block; + flex-grow: 1; + max-width: none; + padding: 1rem; + margin: -1rem -1rem 0 -1rem; + font-size: 1rem; + box-shadow: 0 4px 8px rgba(0,0,0,0.03); + border-radius: .375rem 0 0 .375rem } + +.modal h5 { + margin-top: 1rem; + font-weight: 600 +} + +.modal label>input[type="checkbox"] { + top: 0 +} + .modal ul { - margin-left: 2.2em; + margin-left: 2.2em } -.modal li { - list-style-type: square; + +.modal ul:not(.cbi-tabmenu) { + margin-top: 1rem +} + +.modal ul li { + list-style-type: square; /* color: #808080; */ } + .modal p { - word-break: break-word; + word-break: break-word; + margin-top: 1rem } + .modal .label { - font-size: 0.6rem; - font-weight: normal; - padding: 0.1rem 0.3rem; - padding-bottom: 0; - cursor: default; - border-radius: 0; + font-size: .6rem; + font-weight: normal; + padding: .1rem .3rem; + padding-bottom: 0; + cursor: default; + border-radius: 0 } + .modal .label.warning { - background-color: #f0ad4e !important; + background-color: #f0ad4e !important } + .modal .btn { - padding: 0.45rem 0.8rem; + padding: .45rem .8rem } + .modal.cbi-modal { - max-width: 90%; - max-height: none; + max-width: 90%; + max-height: none } + body.modal-overlay-active { - overflow: hidden; - height: 100vh; + overflow: hidden; + height: 100vh } + body.modal-overlay-active #modal_overlay { - right: 0; - left: 0; - opacity: 1; + right: 0; + left: 0; + opacity: 1 } + .spinning { - position: relative; - padding-left: 32px !important; + position: relative; + padding-left: 32px !important } + .spinning::before { - position: absolute; - top: 0; - bottom: 0; - left: 0.2em; - width: 32px; - content: ""; - background: url(/luci-static/resources/icons/loading.gif) no-repeat center; - background-size: 16px; + position: absolute; + top: 0; + bottom: 0; + left: .2em; + width: 32px; + content: ""; + background: url(/luci-static/resources/icons/loading.gif) no-repeat center; + background-size: 16px } -/* luci */ + +#view { + border-radius: .375rem; + overflow: hidden +} + +#view>.spinning { + position: fixed; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + padding: 1rem; + border-radius: .5rem; + background: #ffffff; + box-shadow: 0 0 1rem 0 rgba(136,152,170,0.15) +} + .hidden { - display: none; + display: none } -.left, -.left::before { - text-align: left !important; + +.left,.left::before { + text-align: left !important } -.right, -.right::before { - text-align: right !important; + +.right,.right::before { + text-align: right !important } -.center, -.center::before { - text-align: center !important; + +.center,.center::before { + text-align: center !important } + .top { - align-self: flex-start !important; - vertical-align: top !important; + align-self: flex-start !important; + vertical-align: top !important } + .bottom { - align-self: flex-end !important; - vertical-align: bottom !important; + align-self: flex-end !important; + vertical-align: bottom !important } + .inline { - display: inline; + display: inline } + .cbi-page-actions { - padding-top: 1rem; - text-align: right; + padding: 1rem; + text-align: right; + justify-content: flex-end } -.cbi-page-actions > form[method="post"] { - display: inline-block; + +.cbi-page-actions>form[method="post"] { + display: inline-block } -.th[data-type="button"], -.td[data-type="button"], -.th[data-type="fvalue"], -.td[data-type="fvalue"] { - flex: 1 1 2em; - text-align: center; + +.th[data-type="button"],.td[data-type="button"],.th[data-type="fvalue"],.td[data-type="fvalue"] { + flex: 1 1 2em; + text-align: center } + .ifacebadge { - display: inline-flex; - padding: 0.5rem 0.8rem; - border-bottom: thin solid #ccc; - background: #eee; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + align-items: center; + gap: .2rem; + padding: .25rem .8rem; + background: #eee; + border-radius: 4px } -td > .ifacebadge, -.td > .ifacebadge { - font-size: 0.8rem; - background-color: #f0f0f0; - border-radius: 0.375rem; + +td>.ifacebadge,.td>.ifacebadge { + font-size: .8rem; + background-color: #f0f0f0 } -.ifacebadge > em, -.ifacebadge > img { - display: inline-block; - align-self: flex-start; - margin: 0 0.2rem; + +.ifacebadge>em,.ifacebadge>img { + display: inline-block; + margin: 0 .75rem } -.ifacebadge > img + img { - margin: 0 0.2rem 0 0; + +.ifacebadge>img+img { + margin: 0 .2rem 0 0 } + .network-status-table { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap } + .network-status-table .ifacebox { flex-grow: 1; margin: 0.5em; border-radius: 0.375rem; } + .network-status-table .ifacebox-body { display: flex; flex-direction: column; height: 100%; border-radius: 0 0 0.375rem 0.375rem; } + .network-status-table .ifacebox-body > span { flex: 10 10 auto; height: 100%; } -.network-status-table .ifacebox-body > div { - display: flex; - flex-wrap: wrap; + +.network-status-table .ifacebox-body>div { + display: flex; + flex-wrap: wrap; + gap: .5rem; + height: 100% } + .network-status-table .ifacebox-body .ifacebadge { align-items: center; flex: 1 1 auto; min-width: 220px; margin: 0.5em 0em 0 0em; padding: 0.5em; - background-color: #fff; -} -/* textarea */ -.cbi-input-textarea { - font-family: monospace; - width: 100%; - font-size: 0.875rem; - min-height: 14rem; - padding: 0.8rem; - color: #000; -} -#syslog { - font-size: small; - line-height: 1.25; - overflow-y: hidden; - width: 100%; - min-height: 15rem; - padding: 1rem; - resize: none; - color: #242424; - border: 0; - border-radius: 0.375rem; - background-color: #ffffff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); -} -#syslog:focus { - outline: 0; -} -/* config changes */ -.uci-change-list { - font-family: monospace; -} -.uci-change-list ins, -.uci-change-legend-label ins { - display: block; - padding: 2px; - text-decoration: none; - border: thin solid #0f0; - background-color: #cfc; -} -.uci-change-list del, -.uci-change-legend-label del { - font-style: normal; - display: block; - padding: 2px; - text-decoration: none; - border: thin solid #f00; - background-color: #fcc; -} -.uci-change-list var, -.uci-change-legend-label var { - font-style: normal; - display: block; - padding: 2px; - text-decoration: none; - border: thin solid #ccc; background-color: #eee; } -.uci-change-list var ins, -.uci-change-list var del { - font-style: normal; - padding: 0; - white-space: pre; - border: 0; + +.network-status-table .ifacebox-body .ifacebadge>span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis } + +.cbi-input-textarea { + font-family: monospace; + width: 100%; + font-size: .875rem; + min-height: 14rem; + padding: .8rem; + color: #000; + border-radius: .375rem +} + +#content_syslog { + box-shadow: 0 4px 8px rgba(0,0,0,0.03) +} + +#syslog { + font-size: small; + line-height: 1.25; + overflow-y: hidden; + width: 100%; + min-height: 15rem; + padding: 1rem; + resize: none; + color: #242424; + border: 0; + border-radius: .375rem; + background-color: #ffffff +} + +#syslog:focus { + outline: 0 +} + +.uci-change-list { + font-family: monospace; + overflow: scroll; + width: 100%; + display: flex; + flex-direction: column; + flex-wrap: wrap +} + +.uci-change-list ins,.uci-change-legend-label ins { + display: block; + padding: 2px; + text-decoration: none; + border: thin solid #0f0; + background-color: #cfc +} + +.uci-change-list del,.uci-change-legend-label del { + font-style: normal; + display: block; + padding: 2px; + text-decoration: none; + border: thin solid #f00; + background-color: #fcc +} + +.uci-change-list var,.uci-change-legend-label var { + font-style: normal; + display: block; + padding: 2px; + text-decoration: none; + border: thin solid #ccc; + background-color: #eee +} + +.uci-change-list var ins,.uci-change-list var del { + font-style: normal; + padding: 0; + white-space: pre; + border: 0 +} + .uci-change-legend { - padding: 5px; + padding: 5px } + .uci-change-legend-label { - float: left; - width: 150px; + float: left; + width: 150px } -.uci-change-legend-label > ins, -.uci-change-legend-label > del, -.uci-change-legend-label > var { - display: block; - float: left; - width: 10px; - height: 10px; - margin-right: 4px; + +.uci-change-legend-label>ins,.uci-change-legend-label>del,.uci-change-legend-label>var { + display: block; + float: left; + width: 10px; + height: 10px; + margin-right: 4px } -.uci-change-legend-label var ins, -.uci-change-legend-label var del { - line-height: 0.4; - border: 0; + +.uci-change-legend-label var ins,.uci-change-legend-label var del { + line-height: .4; + border: 0 } -.uci-change-list var, -.uci-change-list del, -.uci-change-list ins { - padding: 0.5rem; + +.uci-change-list var,.uci-change-list del,.uci-change-list ins { + padding: .5rem } -/* other fix */ -#iwsvg, -#iwsvg2, -#bwsvg { - border: thin solid #d4d4d4 !important; + +#iwsvg,#iwsvg2,#bwsvg { + border: thin solid #d4d4d4 !important } -#iwsvg, -[data-page="admin-status-realtime-bandwidth"] #bwsvg { - border-top: 0 !important; + +#iwsvg,[data-page="admin-status-realtime-bandwidth"] #bwsvg { + border-top: 0 !important } + .ifacebox { line-height: 1.25; display: inline-flex; @@ -2429,87 +2783,96 @@ td > .ifacebadge, .cbi-value-field .cbi-input-radio { margin-top: 0.1rem; } -.cbi-value-field > ul > li { - display: flex; +.cbi-value-field>ul>li { + display: flex } -.cbi-value-field > ul > li > label { - margin-top: 0.5rem; + +.cbi-value-field>ul>li>label { + margin-top: .5rem } -.cbi-value-field > ul > li .ifacebadge { - margin-top: -0.5rem; - margin-left: 0.4rem; - background-color: #eee; + +.cbi-value-field>ul>li .ifacebadge { + margin-top: -0.5rem; + margin-left: .4rem; + background-color: #eee } + .cbi-section-table-row > .cbi-value-field .cbi-dropdown { min-width: 7rem; } + .cbi-section-create { - display: inline-flex; - align-items: center; - margin: 0.25rem 0 0.25rem 1rem; -} -.cbi-section-create > * { - margin: 0.5rem; + display: inline-flex; + align-items: center; + padding: .5rem 1rem } + .cbi-section-remove { - padding: 0.5rem; + padding: .5rem 1rem } -div.cbi-value var, -td.cbi-value-field var, -.td.cbi-value-field var { - font-style: italic; - color: #0069d6; + +div.cbi-value var,td.cbi-value-field var,.td.cbi-value-field var { + font-style: italic; + color: #0069d6 } + .cbi-optionals { - padding: 1rem 1rem 0 1rem; - border-top: thin solid #ccc; + padding: 1rem 1rem 0 1rem; + border-top: thin solid #ccc } + .cbi-dropdown-container { - position: relative; + position: relative } -.cbi-tooltip-container, -span[data-tooltip], -span[data-tooltip] .label { - cursor: help !important; + +.cbi-tooltip-container,span[data-tooltip],span[data-tooltip] .label { + cursor: help !important } + .cbi-tooltip { - position: absolute; - z-index: 1000; - left: -1000px; - padding: 2px 5px; - transition: opacity 0.25s ease-out; - white-space: pre; - pointer-events: none; - opacity: 0; - border-radius: 3px; - background: #fff; - box-shadow: 0 0 2px #444; + position: absolute; + z-index: 1000; + left: -1000px; + padding: 2px 5px; + transition: opacity .25s ease-out; + white-space: pre; + pointer-events: none; + opacity: 0; + border-radius: 3px; + background: #fff; + box-shadow: 0 0 2px #444 } + .cbi-tooltip-container:hover .cbi-tooltip { - left: auto; - transition: opacity 0.25s ease-in; - opacity: 1; + left: auto; + transition: opacity .25s ease-in; + opacity: 1 } + .zonebadge .cbi-tooltip { - margin: -1.5rem 0 0 -0.5rem; - padding: 0.25rem; - background: inherit; + margin: -1.5rem 0 0 -0.5rem; + padding: .25rem; + background: inherit } + .zonebadge-empty { - color: #404040; - background: repeating-linear-gradient(45deg, rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0.5) 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px); + color: #404040; + background: repeating-linear-gradient(45deg, rgba(204,204,204,0.5), rgba(204,204,204,0.5) 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px) } + .zone-forwards { - display: flex; - min-width: 10rem; + display: flex; + min-width: 10rem } -.zone-forwards > * { - flex: 1 1 45%; + +.zone-forwards>* { + flex: 1 1 45% } -.zone-forwards > span { - flex-basis: 10%; - padding: 0 0.25rem; - text-align: center; + +.zone-forwards>span { + flex-basis: 10%; + padding: 0 .25rem; + text-align: center } .zone-forwards .zone-src, .zone-forwards .zone-dest { @@ -2542,64 +2905,70 @@ label[data-index][data-depends] { .showSide { display: none; } + .darkMask { - position: fixed; - z-index: 99; - display: none; - width: 100%; - height: 100%; - content: ""; - top: 0; - background-color: rgba(0, 0, 0, 0.56); + position: fixed; + z-index: 99; + display: none; + width: 100%; + height: 100%; + content: ""; + top: 0; + background-color: rgba(0,0,0,0.56); + transition: all .2s } -/* diagnostics */ -#diag-rc-output > pre, -#command-rc-output > pre, -[data-page="admin-services-wol"] .notice code { - font-size: 1.2rem; - font-size-adjust: 0.35; - line-height: normal; - display: block; - overflow-y: hidden; - width: 100%; - padding: 8.5px; - white-space: pre; - color: #eee; - background-color: #101010; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); + +.darkMask.active { + display: block } -[data-page="admin-network-diagnostics"] .table { - box-shadow: none; + +#diag-rc-output>pre,#command-rc-output>pre,[data-page="admin-services-wol"] .notice code { + font-size: 1.2rem; + font-size-adjust: .35; + line-height: normal; + display: block; + overflow-y: hidden; + width: 100%; + padding: 8.5px; + white-space: pre; + color: #eee; + background-color: #101010; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12) +}[data-page="admin-network-diagnostics"] .table { + box-shadow: none } -input[name="ping"], -input[name="traceroute"], -input[name="nslookup"] { - width: 80%; + +input[name="ping"],input[name="traceroute"],input[name="nslookup"] { + width: 80% } -/* fix status */ -.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2), -.node-status-processes > .main .table .tr .td:nth-child(3) { - white-space: normal; + +.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2),.node-status-processes>.main .table .tr .td:nth-child(3) { + white-space: normal +}[data-page="admin-system-attendedsysupgrade"] .cbi-button { + margin-left: 0 !important; + margin-top: 1rem !important +}[data-page="admin-system-reboot"] p { + padding-left: 1.5rem +}[data-page="admin-system-reboot"] .cbi-button { + background: #fb6340 !important; + border-color: #fb6340 !important; + margin-left: 0 !important +}[data-page="admin-system-reboot"] p>span { + position: relative; + top: .1rem; + left: 1rem +}[data-page="admin-vpn-passwall"] h4 { + background: transparent +}[data-page="admin-system-filetransfer"] #cbi-upload { + margin-top: 0 +}[data-page="admin-system-filetransfer"] .cbi-section-table { + box-shadow: 0 4px 8px rgba(0,0,0,0.03) } -/* fix system reboot */ -[data-page="admin-system-reboot"] p { - padding-left: 1.5rem; -} -[data-page="admin-system-reboot"] .cbi-button { - background: #fb6340 !important; -} -[data-page="admin-system-reboot"] p > span { - position: relative; - top: 0.1rem; - left: 1rem; -} -[data-page="admin-vpn-passwall"] h4 { - background: transparent; -} -/* samba */ + #cbi-samba [data-tab="template"] .cbi-value-field { - display: block; + display: block } + #cbi-samba [data-tab="template"] .cbi-value-title { width: auto; padding-bottom: 0.6rem; @@ -2622,36 +2991,36 @@ input[name="nslookup"] { .controls { margin: 0.5em 1rem 1em 1rem !important; } -.controls > * > .btn:not([aria-label$="page"]) { - flex-grow: initial !important; - margin-top: 0.25rem; + +.controls>*>.btn:not([aria-label$="page"]) { + flex-grow: initial !important; + margin-top: .25rem } -.controls > #pager > .btn[aria-label$="page"] { - font-size: 1.4rem; - font-weight: bold; + +.controls>#pager>.btn[aria-label$="page"] { + font-size: 1.4rem; + font-weight: bold } -.controls > * > label { - margin-bottom: 0.2rem; + +.controls>*>label { + margin-bottom: .2rem +}[data-page="admin-system-opkg"] div.btn { + line-height: 3; + display: inline; + padding: .3rem .6rem +}[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),[data-page="admin-system-opkg"] #maincontent>.container { + margin-top: 1rem; + padding-top: .01rem +}[data-page="admin-system-opkg"] #maincontent>.container { + margin: 0 1.25rem 1rem 1.25rem; + margin-bottom: 1rem } -[data-page="admin-system-opkg"] div.btn { - line-height: 3; - display: inline; - padding: 0.3rem 0.6rem; -} -[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), -[data-page="admin-system-opkg"] #maincontent > .container { - margin-top: 2rem; - padding-top: 0.1rem; -} -[data-page="admin-system-opkg"] #maincontent > .container { - margin: 0 1.25rem 1rem 1.25rem; - margin-bottom: 1rem; -} -.td.version, -.td.size { - white-space: normal !important; - word-break: break-word; + +.td.version,.td.size { + white-space: normal !important; + word-break: break-word } + .cbi-tabmenu + .cbi-section { margin-top: 0; } @@ -2720,100 +3089,103 @@ input[name="nslookup"] { [data-page="admin-network-dhcp"] [data-tab-active="true"] { padding: 1rem 0 !important; } -/* firewall */ + #iptables { - margin: 0; + margin: 0 } + .Firewall form { - margin: 2rem 2rem 0 0; - padding: 0; - box-shadow: none; + margin: 2rem 2rem 0 0; + padding: 0; + box-shadow: none } -#cbi-firewall-redirect table *, -#cbi-network-switch_vlan table *, -#cbi-firewall-zone table * { - font-size: small; + +#cbi-firewall-redirect table *,#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 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-firewall-redirect table select,#cbi-network-switch_vlan table select,#cbi-firewall-zone table select { + min-width: 3.5rem } -#cbi-network-switch_vlan .th, -#cbi-network-switch_vlan .td { - flex-basis: 12%; + +#cbi-network-switch_vlan .th,#cbi-network-switch_vlan .td { + flex-basis: 12% } -#cbi-firewall-zone .table, -#cbi-network-switch_vlan .table { - display: block; + +#cbi-firewall-zone .table,#cbi-network-switch_vlan .table { + display: block } -#cbi-firewall-zone .td, -#cbi-network-switch_vlan .td { - width: 100%; + +#cbi-firewall-zone .td,#cbi-network-switch_vlan .td { + width: 100% +}[data-page="admin-network-firewall-custom"] #view p,[data-page="admin-status-routes"] #view p { + padding: 0 1.5rem; + margin-bottom: 1rem +}[data-page="admin-network-firewall-custom"] #view p textarea,[data-page="admin-status-routes"] #view p textarea { + padding: 1rem; + border-radius: .375rem +}[data-page="admin-network-firewall-custom"] #view>h3,[data-page="admin-status-routes"] #view>h3 { + border-radius: .375rem .375rem 0 0 } -[data-page="admin-network-firewall-custom"] #view p, -[data-page="admin-status-routes"] #view p { - padding: 0 1.5rem; - margin-bottom: 1rem; -} -[data-page="admin-network-firewall-custom"] #view p textarea, -[data-page="admin-status-routes"] #view p textarea { - padding: 1rem; - border-radius: 0.375rem; -} -/* applyreboot fix */ + #applyreboot-container { - margin: 2rem; + margin: 2rem } + #applyreboot-section { - line-height: 300%; - margin: 2rem; + line-height: 300%; + margin: 2rem } -/* openvpn bug fix */ + .OpenVPN a { - line-height: initial !important; + line-height: initial !important } -/* custom commands */ + .commandbox { - width: 24% !important; - margin: 10px 0 0 10px !important; - padding: 0.5rem 1rem; - border-bottom: thin solid #ccc; - background: #eee; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + width: 24% !important; + margin: 10px 0 0 10px !important; + padding: .5rem 1rem; + border-bottom: thin solid #ccc; + background: #eee; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05) } + .commandbox h3 { - line-height: normal !important; - overflow: hidden; - margin: 6px 0 !important; - white-space: nowrap; - text-overflow: ellipsis; + line-height: normal !important; + overflow: hidden; + margin: 6px 0 !important; + white-space: nowrap; + text-overflow: ellipsis } + .commandbox div { - left: auto !important; + left: auto !important } + .commandbox code { - position: absolute; - overflow: hidden; - max-width: 60%; - margin-left: 4px; - padding: 2px 3px; - white-space: nowrap; - text-overflow: ellipsis; + position: absolute; + overflow: hidden; + max-width: 60%; + margin-left: 4px; + padding: 2px 3px; + white-space: nowrap; + text-overflow: ellipsis } + .commandbox code:hover { - overflow-y: auto; - max-height: 50px; - white-space: normal; + overflow-y: auto; + max-height: 50px; + white-space: normal } + .commandbox p:first-of-type { - margin-top: -6px; + margin-top: -6px } + .commandbox p:nth-of-type(2) { margin-top: 2px; } @@ -2822,78 +3194,82 @@ input[name="nslookup"] { [data-page^="command-cfg"] .showSide { display: none; } + #command-rc-output .alert-message { - line-height: 1.42857143; - position: absolute; - top: 40px; - right: 32px; - max-width: 40%; - margin: 0; - animation: anim-fade-in 1.5s forwards; - word-break: break-word; - opacity: 0; + line-height: 1.42857143; + position: absolute; + top: 40px; + right: 32px; + max-width: 40%; + margin: 0; + animation: anim-fade-in 1.5s forwards; + word-break: break-word; + opacity: 0 } + @keyframes anim-fade-in { - 100% { - opacity: 1; - } + 100% { + opacity: 1 + } } -/* other fix */ + input[type="checkbox"] { - appearance: none !important; - -webkit-appearance: none !important; - border: 1px solid #dee2e6; - width: 16px !important; - height: 16px !important; - padding: 0; - cursor: pointer; - transition: all 0.2s; - margin: 0 auto; - margin-bottom: -3px; - margin-right: 3px; + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid var(--primary); + width: 16px !important; + height: 16px !important; + padding: 0; + cursor: pointer; + transition: all .2s; + margin: .75rem 0 0 0 } + input[type="checkbox"]:checked { - border: 1px solid #5e72e4; - border: 1px solid var(--primary); - background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; - background-color: #5e72e4; - background-color: var(--primary); - background-size: 70%; - background-repeat: no-repeat; - background-position: center; + border: 1px solid #5e72e4; + border: 1px solid var(--primary); + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; + background-color: #5e72e4; + background-color: var(--primary); + background-size: 70%; + background-repeat: no-repeat; + background-position: center } + .fb-container .cbi-button { - height: auto !important; + height: auto !important } + #cbi-usb_printer-printer em { - display: block; - padding: 1rem; - text-align: center; + display: block; + padding: 1rem; + text-align: center } + pre.command-output { - padding: 1.5rem; + padding: 1.5rem +}[data-page="admin-nlbw-display"] .cbi-section[data-tab="export"] { + padding: 1.5rem !important +}[data-page="admin-nlbw-backup"] form { + padding-left: 1.5rem +}[data-page="admin-status-iptables"] .right { + margin-bottom: 0 !important } -[data-page="admin-nlbw-display"] .cbi-section[data-tab="export"] { - padding: 1.5rem !important; -} -[data-page="admin-nlbw-backup"] form { - padding-left: 1.5rem; -} -[data-page="admin-status-iptables"] .right { - margin-bottom: 0 !important; -} -/* IE hacks */ -@media all and (-ms-high-contrast: none) { - .main > .main-left > .nav > .slide > .menu::before { - top: 30.25%; - } - .main > .main-left > .nav > li:last-child::before { - top: 20%; - } - .showSide::before { - top: -12px; - } + +@media all and (-ms-high-contrast:none) { + .main>.main-left>.nav>.slide>.menu::before { + top: 30.25% + } + + .main>.main-left>.nav>li:last-child::before { + top: 20% + } + + .showSide::before { + top: -12px + } } + @media screen and (max-width: 1600px) { header > .fill > .container > #logo { margin: 0 2.5rem 0 0.5rem; @@ -2921,60 +3297,65 @@ pre.command-output { .cbi-value input[type="password"] { min-width: 18rem; } - #cbi-firewall-zone .cbi-input-select { - min-width: 9rem; - } - .cbi-input-textarea { - font-size: small; - } - .node-admin-status > .main fieldset li > a { - padding: 0.3rem 0.6rem; - } + + #cbi-firewall-zone .cbi-input-select { + min-width: 9rem + } + + .cbi-input-textarea { + font-size: small + } + + .node-admin-status>.main fieldset li>a { + padding: .3rem .6rem + } } -@media screen and (max-width: 1366px) { - header > .fill > .container { - cursor: default; - } - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - .tabs > li > a, - .cbi-tabmenu > li > a { - padding: 0.2rem 0.8rem; - } - .panel-title { - font-size: 1.1rem; - padding-bottom: 1rem; - } - table { - font-size: 0.78rem !important; - width: 100% !important; - } - .table .cbi-input-text { - width: 100%; - } + +@media screen and (max-width:1366px) { + header>.fill>.container { + cursor: default + } + + .main-left { + width: calc(0% + 13rem) + } + + .tabs>li>a,.cbi-tabmenu>li>a { + padding: .2rem .8rem + } + + .panel-title { + font-size: 1.1rem; + padding-bottom: 1rem + } + + table { + font-size: .7rem !important; + width: 100% !important + } + + .table .cbi-input-text { + width: 100% + } .cbi-value-field .cbi-dropdown, .cbi-value-field .cbi-input-select, .cbi-value input[type="text"], .cbi-value input[type="password"] { min-width: 16rem; } - #cbi-firewall-zone .cbi-input-select { - min-width: 4rem; - } - .main > .main-left > .nav > li, - .main > .main-left > .nav > li > a, - .main .main-left .nav > li > a:first-child, - .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { - font-size: 0.9rem; - } - .main > .main-left > .nav > .slide > .slide-menu > li > a { - font-size: 0.7rem; - } + + #cbi-firewall-zone .cbi-input-select { + min-width: 4rem + } + + .main>.main-left>.nav>li,.main>.main-left>.nav>li>a,.main .main-left .nav>li>a:first-child,.main>.main-left>.nav>.slide>.menu,.main>.main-left>.nav>li>[data-title="Logout"] { + font-size: .9rem + } + + .main>.main-left>.nav>.slide>.slide-menu>li>a { + font-size: .7rem + } + #modal_overlay { top: 0rem; } @@ -2987,52 +3368,56 @@ pre.command-output { [data-page="admin-network-routes"] .table { overflow-y: visible; } - .commandbox { - width: 32% !important; - } - .btn:not(button), - .cbi-button { - font-size: 0.8rem; - } + + .commandbox { + width: 32% !important + } + + .btn:not(button),.cbi-button { + font-size: .8rem + } } -@media screen and (max-width: 1280px) { - header > .fill > .container > #logo { - display: none; - } - header > .fill > .container > .brand { - position: relative; - } - html, - .main { - overflow-y: visible; - } - .main > .loading > span { - top: 25%; - } - .main-left { - width: calc(0% + 13rem); - } - .main-right { - width: calc(100% - 13rem); - } - body:not(.logged-in) .showSide { - visibility: hidden; - width: 0; - margin: 0; - } - .node-main-login > .main .cbi-value-title { - text-align: left; - } - .cbi-value-title { - width: 12rem; - padding-right: 1rem; - } - .cbi-value-field .cbi-dropdown, - .cbi-value-field .cbi-input-select, - .cbi-value input[type="text"] { - width: 16rem; - min-width: 16rem; - } + +@media screen and (max-width:1152px) { + header>.fill>.container>#logo { + display: none + } + + header>.fill>.container>.brand { + position: relative + } + + html,.main { + overflow-y: visible + } + + .main>.loading>span { + top: 25% + } + + .main-left { + width: calc(0% + 13rem) + } + + body:not(.logged-in) .showSide { + visibility: hidden; + width: 0; + margin: 0 + } + + .node-main-login>.main .cbi-value-title { + text-align: left + } + + .cbi-value-title { + width: 12rem; + padding-right: 1rem + } + + .cbi-value-field .cbi-dropdown,.cbi-value-field .cbi-input-select,.cbi-value input[type="text"] { + width: 16rem; + min-width: 16rem + } /*.cbi-value input[type="password"],*/ .cbi-value input[name^="pw"], .cbi-value input[data-update="change"]:nth-child(2) { @@ -3044,6 +3429,7 @@ pre.command-output { [data-page="admin-services-wol"] .notice code { font-size: 1rem; } + .table { display: block; border-radius: 0.375rem; @@ -3055,20 +3441,24 @@ pre.command-output { .Interfaces .table { overflow-x: hidden; } - #packages.table { - display: grid; - } - .tr { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - .Overview .table[width="100%"] > .tr { - flex-wrap: nowrap; - } - .tr.placeholder { - border-bottom: thin solid #ddd; - } + + #packages.table { + display: grid + } + + .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap + } + + .Overview .table[width="100%"]>.tr { + flex-wrap: nowrap + } + + .tr.placeholder { + border-bottom: thin solid #ddd + } .tr.placeholder > .td, #cbi-firewall .tr > .td, #cbi-network .tr:nth-child(2) > .td, @@ -3185,140 +3575,175 @@ pre.command-output { z-index: 100; width: 0; } - .main-right { - width: 100%; - } - .showSide { - padding: 0.1rem; - position: relative; - z-index: 99; - display: inline-block !important; - } - .showSide::before { - font-family: 'argon' !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - content: "\e20e"; - font-size: 1.7rem; - } - header > .fill > .container > .brand { - display: inline-block; - } - .main > .main-left > .nav > .slide > .slide-menu > li > a { - font-size: 0.8rem; - } + + .main-left.active { + width: 13rem + } + + .main-right { + width: 100% + } + + .main-right.active { + overflow-y: hidden + } + + .darkMask.active { + display: block + } + + .showSide { + padding: .1rem; + position: relative; + z-index: 99; + display: inline-block !important + } + + .showSide::before { + font-family: 'argon' !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\e20e"; + font-size: 1.7rem + } + + header>.fill>.container>.flex1>.brand { + display: inline-block + } + + .main>.main-left>.nav>.slide>.slide-menu>li>a { + font-size: .8rem + } } -@media screen and (max-width: 600px) { - .mobile-hide { - display: none; - } - #maincontent > .container { - margin: 0 1rem 1rem 1rem; - } - .cbi-value-title { - text-align: left; - } - [data-page="admin-system-flash"] legend { - padding: 1rem 0 1rem 1rem; - } - [data-page="admin-system-flash"] .cbi-section-descr { - padding: 1rem 0 1rem 1rem; - } - [data-page="admin-system-flash"] .cbi-value { - padding: 0 1rem; - } - [data-page="admin-network-dhcp"] [data-tab-active="true"] { - padding: 1rem 1rem !important; - } - .cbi-dynlist p { - padding: 0.5rem 1rem; - } - body { - overflow-x: hidden; - } - .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field { - width: 16rem; - } - .node-main-login footer { - display: none; - } - .tabs::-webkit-scrollbar, - .cbi-tabmenu::-webkit-scrollbar { - width: 0px; - height: 0px; - } - .cbi-value-field, - .cbi-value-description { - display: block !important; - padding-left: 0 !important; - padding-right: 0 !important; - } - [data-page="admin-system-admin-password"] .cbi-value-field { - display: table-cell !important; - } + +@media screen and (max-width:600px) { + .mobile-hide { + display: none + } + + #maincontent>.container { + margin: 0 1rem 1rem 1rem + } + + .cbi-value-title { + text-align: left + }[ data-page="admin-system-flash"] legend { + padding: 1rem 0 1rem 1rem + }[ data-page="admin-system-flash"] .cbi-section-descr { + padding: 1rem 0 1rem 1rem + }[ data-page="admin-system-flash"] .cbi-value { + padding: 0 1rem + }[ data-page="admin-network-dhcp"] [data-tab-active="true"] { + padding: 1rem 1rem !important + } + + .cbi-dynlist p { + padding: .5rem 1rem + } + + body { + overflow-x: hidden + } + + .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field { + width: 16rem + } + + .node-main-login footer { + display: none + } + + .tabs::-webkit-scrollbar,.cbi-tabmenu::-webkit-scrollbar { + width: 0px; + height: 0px + } + + .cbi-value-field,.cbi-value-description { + display: block !important; + padding-left: 0 !important; + padding-right: 0 !important + }[ data-page="admin-system-admin-password"] .cbi-value-field { + display: table-cell !important + } + .modal.cbi-modal { max-width: 95%; max-height: none; } - .modal { - display: flex; - align-items: center; - flex-wrap: wrap; - width: 100%; - min-width: 270px; + + .modal { + display: flex; + align-items: center; + flex-wrap: wrap; + width: 100%; + min-width: 270px; max-width: 95%; - min-height: 32px; - margin: 5em auto; - padding: 1em; + min-height: 32px; + margin: 5em auto; + padding: 1em; border-radius: 15px !important; - background: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12); - } - .cbi-dropdown[open] > ul.dropdown { - left: 0.2rem !important; - right: 0 !important; - margin-bottom: 1rem; - } + background: #fff; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.12) + } + + .cbi-dropdown[open]>ul.dropdown { + left: .2rem !important; + right: 0 !important; + margin-bottom: 1rem + } + + .login-page .login-container footer { + display: none + } } -@media screen and (min-width: 600px) { - ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - ::-webkit-scrollbar, - ::-webkit-scrollbar-corner { - background: transparent; - } - ::-webkit-scrollbar-thumb { - background: #9e9e9e; - } - ::-webkit-scrollbar-thumb:hover { - background: #757575; - } - ::-webkit-scrollbar-thumb:active { - background: #424242; - } + +@media screen and (min-width:600px) { + ::-webkit-scrollbar { + width: 10px; + height: 10px + } + + ::-webkit-scrollbar,::-webkit-scrollbar-corner { + background: transparent + } + + ::-webkit-scrollbar-thumb { + background: var(--primary); + border-radius: 10px + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--primary) + } + + ::-webkit-scrollbar-thumb:active { + background: var(--primary) + } } -@media screen and (max-width: 480px) { - .mobile-hide { - display: none; - } - .login-page .login-container { - margin-left: 0rem !important; - width: 100%; - } - .login-page .login-container .login-form .form-login .input-group::before { - color: #525461; - } - .login-page .login-container .login-form .form-login .input-group input { - color: #525461; - border-bottom: white 1px solid; - border-bottom: var(--white) 1px solid; - border-radius: 0; - } + +@media screen and (max-width:480px) { + .mobile-hide { + display: none + } + + .login-page .login-container { + margin-left: 0rem !important; + width: 100% + } + + .login-page .login-container .login-form .form-login .input-group::before { + color: #525461 + } + + .login-page .login-container .login-form .form-login .input-group input { + color: #525461; + border-bottom: white 1px solid; + border-bottom: var(--white) 1px solid; + border-radius: 0 + } } diff --git a/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg b/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg index f01ad5c..ef84c3c 100644 --- a/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg +++ b/luci-theme-argon/htdocs/luci-static/argon/img/volume_high.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg b/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg index 0598d58..5467d4d 100644 --- a/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg +++ b/luci-theme-argon/htdocs/luci-static/argon/img/volume_off.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/luci-theme-argon/htdocs/luci-static/argon/js/script.js b/luci-theme-argon/htdocs/luci-static/argon/js/script.js deleted file mode 100644 index 82df7b0..0000000 --- a/luci-theme-argon/htdocs/luci-static/argon/js/script.js +++ /dev/null @@ -1,219 +0,0 @@ -/** - * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template - * - * 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-material: - * Copyright 2015 Lutty Yang - * https://github.com/LuttyYang/luci-theme-material/ - * - * Agron Theme - * https://demos.creative-tim.com/argon-dashboard/index.html - * - * Login background - * https://unsplash.com/ - * Font generate by Icomoon - * - * Licensed to the public under the Apache License 2.0 - */ - -document.addEventListener('luci-loaded', function(ev) { -(function ($) { - - /** - * trim text, Remove spaces, wrap - * @param text - * @returns {string} - */ - function trimText(text) { - return text.replace(/[ \t\n\r]+/g, " "); - } - - var lastNode = undefined; - var mainNodeName = undefined; - - var nodeUrl = ""; - (function(node){ - var luciLocation; - if (node[0] == "admin"){ - luciLocation = [node[1], node[2]]; - }else{ - luciLocation = node; - } - - for(var i in luciLocation){ - nodeUrl += luciLocation[i]; - if (i != luciLocation.length - 1){ - nodeUrl += "/"; - } - } - })(luciLocation); - - /** - * get the current node by Burl (primary) - * @returns {boolean} success? - */ - function getCurrentNodeByUrl() { - var ret = false; - if (!$('body').hasClass('logged-in')) { - luciLocation = ["Main", "Login"]; - return true; - } - - $(".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"); - - if (href.indexOf(nodeUrl) != -1) { - ulNode.click(); - ulNode.next(".slide-menu").stop(true, true); - lastNode = that.parent(); - lastNode.addClass("active"); - ret = true; - return true; - } - }); - }); - return ret; - } - - /** - * menu click - */ - $(".main > .main-left > .nav > .slide > .menu").click(function () { - var ul = $(this).next(".slide-menu"); - var menu = $(this); - $(".main > .main-left > .nav > .slide > .menu").each(function () { - var ulNode = $(this); - ulNode.removeClass("active"); - ulNode.next(".slide-menu").stop(true).slideUp("fast") - }); - if (!ul.is(":visible")) { - menu.addClass("active"); - ul.addClass("active"); - ul.stop(true).slideDown("fast"); - } else { - ul.stop(true).slideUp("fast", function () { - menu.removeClass("active"); - ul.removeClass("active"); - }); - } - return false; - }); - - /** - * hook menu click and add the hash - */ - $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); - $(this).parent().addClass("active"); - return true; - }); - - /** - * fix menu click - */ - $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); - $(this).addClass("active"); - window.location = $($(this).find("a")[0]).attr("href"); - return false; - }); - - /** - * get current node and open it - */ - if (getCurrentNodeByUrl()) { - mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; - mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); - $("body").addClass(mainNodeName); - } - - /** - * Sidebar expand - */ - var showSide = false; - $(".showSide").click(function () { - if (showSide) { - $(".darkMask").stop(true).fadeOut("fast"); - $(".main-left").width(0); - $(".main-right").css("overflow-y", "visible"); - showSide = false; - } else { - $(".darkMask").stop(true).fadeIn("fast"); - $(".main-left").width("13rem") - $(".main-right").css("overflow-y", "hidden"); - showSide = true; - } - }); - - $(".darkMask").click(function () { - if (showSide) { - showSide = false; - $(".darkMask").stop(true).fadeOut("fast"); - $(".main-left").width(0); - $(".main-right").css("overflow-y", "visible"); - } - }); - - $(window).resize(function () { - if ($(window).width() > 921) { - $(".main-left").css("width", ""); - $(".darkMask").stop(true); - $(".darkMask").css("display", "none"); - showSide = false; - } - }); - - /** - * fix legend position - */ - $("legend").each(function () { - var that = $(this); - that.after("" + that.text() + ""); - }); - - $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { - var that = $(this); - if (that.text().trim() == ""){ - that.css("display", "none"); - } - }); - - $(".main-right").focus(); - $(".main-right").blur(); - $("input").attr("size", "0"); - $(".cbi-button-up").val("__"); - $(".cbi-button-down").val("__"); - $(".slide > a").removeAttr("href"); - - if (mainNodeName != undefined) { - console.log(mainNodeName); - switch (mainNodeName) { - case "node-status-system_log": - case "node-status-kernel_log": - $("#syslog").focus(function () { - $("#syslog").blur(); - $(".main-right").focus(); - $(".main-right").blur(); - }); - break; - case "node-status-firewall": - var button = $(".node-status-firewall > .main fieldset li > a"); - button.addClass("cbi-button cbi-button-reset a-to-btn"); - break; - case "node-system-reboot": - var button = $(".node-system-reboot > .main > .main-right p > a"); - button.addClass("cbi-button cbi-input-reset a-to-btn"); - break; - } - } - -})(jQuery); -}); diff --git a/luci-theme-argon/htdocs/luci-static/resources/menu-argon.js b/luci-theme-argon/htdocs/luci-static/resources/menu-argon.js new file mode 100644 index 0000000..cc4d4b6 --- /dev/null +++ b/luci-theme-argon/htdocs/luci-static/resources/menu-argon.js @@ -0,0 +1,158 @@ +'use strict'; +'require baseclass'; +'require ui'; + +return baseclass.extend({ + __init__: function () { + ui.menu.load().then(L.bind(this.render, this)); + }, + + render: function (tree) { + var node = tree, + url = '', + children = ui.menu.getChildren(tree); + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); + + if (isActive) + this.renderMainMenu(children[i], children[i].name); + } + + if (L.env.dispatchpath.length >= 3) { + for (var i = 0; i < 3 && node; i++) { + node = node.children[L.env.dispatchpath[i]]; + url = url + (url ? '/' : '') + L.env.dispatchpath[i]; + } + + if (node) + this.renderTabMenu(node, url); + } + + document.querySelector('a.showSide') + .addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle')); + document.querySelector('.darkMask') + .addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle')); + }, + + handleMenuExpand: function (ev) { + var a = ev.target, slide = a.parentNode, slide_menu = a.nextElementSibling; + var collapse = false; + + document.querySelectorAll('.main .main-left .nav > li >ul.active').forEach(function (ul) { + $(ul).stop(true).slideUp("fast", function () { + ul.classList.remove('active'); + ul.previousElementSibling.classList.remove('active'); + }); + if (!collapse && ul === slide_menu) { + collapse = true; + } + + }); + + if (!slide_menu) + return; + + + if (!collapse) { + $(slide).find(".slide-menu").slideDown("fast",function(){ + slide_menu.classList.add('active'); + a.classList.add('active'); + }); + a.blur(); + } + ev.preventDefault(); + ev.stopPropagation(); + }, + + renderMainMenu: function (tree, url, level) { + var l = (level || 0) + 1, + ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }), + children = ui.menu.getChildren(tree); + + if (children.length == 0 || l > 2) + return E([]); + + for (var i = 0; i < children.length; i++) { + var isActive = ((L.env.dispatchpath[l] == children[i].name) && (L.env.dispatchpath[l - 1] == tree.name)), + submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l), + hasChildren = submenu.children.length, + slideClass = hasChildren ? 'slide' : null, + menuClass = hasChildren ? 'menu' : 'food'; + if (isActive) { + ul.classList.add('active'); + slideClass += " active"; + menuClass += " active"; + } + + ul.appendChild(E('li', { 'class': slideClass }, [ + E('a', { + 'href': L.url(url, children[i].name), + 'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null, + 'class': menuClass, + 'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"), + }, [_(children[i].title)]), + submenu + ])); + } + + if (l == 1) { + document.querySelector('#mainmenu').appendChild(ul); + document.querySelector('#mainmenu').style.display = ''; + + } + return ul; + }, + + renderTabMenu: function (tree, url, level) { + var container = document.querySelector('#tabmenu'), + l = (level || 0) + 1, + ul = E('ul', { 'class': 'tabs' }), + children = ui.menu.getChildren(tree), + activeNode = null; + + if (children.length == 0) + return E([]); + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.dispatchpath[l + 2] == children[i].name), + activeClass = isActive ? ' active' : '', + className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); + + ul.appendChild(E('li', { 'class': className }, [ + E('a', { 'href': L.url(url, children[i].name) }, [_(children[i].title)]) + ])); + + if (isActive) + activeNode = children[i]; + } + + container.appendChild(ul); + container.style.display = ''; + + if (activeNode) + container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l)); + + return ul; + }, + + handleSidebarToggle: function (ev) { + var showside = document.querySelector('a.showSide'), + sidebar = document.querySelector('#mainmenu'), + darkmask = document.querySelector('.darkMask'), + scrollbar = document.querySelector('.main-right'); + + if (showside.classList.contains('active')) { + showside.classList.remove('active'); + sidebar.classList.remove('active'); + scrollbar.classList.remove('active'); + darkmask.classList.remove('active'); + } + else { + showside.classList.add('active'); + sidebar.classList.add('active'); + scrollbar.classList.add('active'); + darkmask.classList.add('active'); + } + } +}); diff --git a/luci-theme-argon/luasrc/view/themes/argon/footer.htm b/luci-theme-argon/luasrc/view/themes/argon/footer.htm index 25655fa..3fc930e 100644 --- a/luci-theme-argon/luasrc/view/themes/argon/footer.htm +++ b/luci-theme-argon/luasrc/view/themes/argon/footer.htm @@ -7,13 +7,13 @@ Have a bug? Please create an issue here on GitHub! https://github.com/jerrykuku/luci-theme-argon/issues - luci-theme-material: + luci-theme-material: Copyright 2015 Lutty Yang - + Agron Theme - https://demos.creative-tim.com/argon-dashboard/index.html + https://demos.creative-tim.com/argon-dashboard/index.html - Licensed to the public under the Apache License 2.0 + Licensed to the public under the Apache License 2.0 -%> <% local ver = require "luci.version" %> @@ -40,6 +40,6 @@ } }) - + diff --git a/luci-theme-argon/luasrc/view/themes/argon/footer_login.htm b/luci-theme-argon/luasrc/view/themes/argon/footer_login.htm index dfe0764..99f85f3 100644 --- a/luci-theme-argon/luasrc/view/themes/argon/footer_login.htm +++ b/luci-theme-argon/luasrc/view/themes/argon/footer_login.htm @@ -40,6 +40,5 @@ } }) - diff --git a/luci-theme-argon/luasrc/view/themes/argon/header.htm b/luci-theme-argon/luasrc/view/themes/argon/header.htm index 5a6503a..edaccc1 100644 --- a/luci-theme-argon/luasrc/view/themes/argon/header.htm +++ b/luci-theme-argon/luasrc/view/themes/argon/header.htm @@ -21,6 +21,7 @@ local util = require "luci.util" local http = require "luci.http" local disp = require "luci.dispatcher" + local ver = require "luci.version" local boardinfo = util.ubus("system", "board") @@ -58,33 +59,32 @@ - - - <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - - LuCI - - - - - - - - - - - - LuCI"> - - LuCI"> - - - - - - - - - - - + + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> + - LuCI + + + + + + + + + + + - LuCI"> + - LuCI"> + + + + + + + + + + <% if mode == 'normal' then %> - - - - - + + + +
- - <%=brand_name%> -
- -
+
+ + <%=brand_name%> +
+
diff --git a/luci-theme-argon/luasrc/view/themes/argon/header_login.htm b/luci-theme-argon/luasrc/view/themes/argon/header_login.htm index faea0b3..9a22aa0 100644 --- a/luci-theme-argon/luasrc/view/themes/argon/header_login.htm +++ b/luci-theme-argon/luasrc/view/themes/argon/header_login.htm @@ -21,6 +21,7 @@ local util = require "luci.util" local http = require "luci.http" local disp = require "luci.dispatcher" + local ver = require "luci.version" local boardinfo = util.ubus("system", "board") @@ -55,32 +56,32 @@ - - - <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - - LuCI - - - - - - - - - - - - LuCI"> - - LuCI"> - - - - - - - - - - + + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> + - LuCI + + + + + + + + + + + - LuCI"> + - LuCI"> + + + + + + + + + + <% if mode == 'normal' then %> - - - + + + + <% if node and node.css then %> + + <% end -%> + <% if css then %> + + <% end -%> + -"> + diff --git a/luci-theme-argon/luasrc/view/themes/argon/out_header_login.htm b/luci-theme-argon/luasrc/view/themes/argon/out_header_login.htm index 075c1e8..35e73ec 100644 --- a/luci-theme-argon/luasrc/view/themes/argon/out_header_login.htm +++ b/luci-theme-argon/luasrc/view/themes/argon/out_header_login.htm @@ -5,34 +5,10 @@ -%> <% + local ver = require "luci.version" + if not luci.dispatcher.context.template_header_sent then include("themes/" .. theme .. "/header_login") luci.dispatcher.context.template_header_sent = true end - - local applyconf = luci.config and luci.config.apply %> - - - -