diff --git a/package/lienol/luci-theme-argon-light-mod/Makefile b/package/lienol/luci-theme-argon-light-mod/Makefile index 1d6bcfc850..873ce914dd 100644 --- a/package/lienol/luci-theme-argon-light-mod/Makefile +++ b/package/lienol/luci-theme-argon-light-mod/Makefile @@ -9,7 +9,7 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Argon Light Mod Theme LUCI_DEPENDS:= PKG_VERSION:=1.4 -PKG_RELEASE:=02-20200101 +PKG_RELEASE:=03-20200101 include $(TOPDIR)/feeds/luci/luci.mk diff --git a/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light/css/style.css b/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light/css/style.css index 5984dcd84d..f1d2377688 100644 --- a/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light/css/style.css +++ b/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light/css/style.css @@ -65,8 +65,8 @@ --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; - --font-family-sans-serif: Open Sans,sans-serif; - --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; + --font-family-sans-serif: Open Sans, sans-serif; + --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } @@ -84,24 +84,26 @@ @font-face { font-family: 'ssr'; - src: url('../fonts/ssr.eot?5zoxsi'); - src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), + src: url('../fonts/ssr.eot?5zoxsi'); + src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), url('../fonts/ssr.ttf?5zoxsi') format('truetype'), url('../fonts/ssr.woff?5zoxsi') format('woff'), url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'TypoGraphica'; - src: url('../fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('../fonts/TypoGraphica.woff') format('woff'), url('../fonts/TypoGraphica.ttf') format('truetype'), url('../fonts/TypoGraphica.svg#TypoGraphica') format('svg'); + src: url('../fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('../fonts/TypoGraphica.woff') format('woff'), url('../fonts/TypoGraphica.ttf') format('truetype'), url('../fonts/TypoGraphica.svg#TypoGraphica') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'icomoon'; - src: url('../fonts/icomoon.eot?1peg26'); - src: url('../fonts/icomoon.eot?1peg26#iefix') format('embedded-opentype'), + src: url('../fonts/icomoon.eot?1peg26'); + src: url('../fonts/icomoon.eot?1peg26#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?1peg26') format('truetype'), url('../fonts/icomoon.woff?1peg26') format('woff'), url('../fonts/icomoon.svg?1peg26#icomoon') format('svg'); @@ -111,7 +113,8 @@ -[class^="icon-"], [class*=" icon-"] { +[class^="icon-"], +[class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'ssr' !important; speak: none; @@ -129,42 +132,55 @@ .icon-dashboard:before { content: "\e906"; } + .icon-logout:before { content: "\e907"; } + .icon-Network:before { content: "\e908"; } + .icon-services:before { content: "\e909"; } + .icon-system:before { content: "\e90a"; } + .icon-vpn:before { content: "\e90b"; } + .icon-storage:before { content: "\e90c"; } + .icon-statistics:before { content: "\e90d"; } + .icon-delete:before { content: "\e900"; } + .icon-edit:before { content: "\e901"; } + .icon-ok:before { content: "\e902"; } + .icon-loading:before { content: "\e903"; } + .icon-switch:before { content: "\e904"; } + .icon-error:before { content: "\e905"; } @@ -175,7 +191,18 @@ box-sizing: border-box; } -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { font-family: inherit; font-weight: 400; line-height: 1.1; @@ -192,11 +219,12 @@ body { background-color: rgb(255, 255, 255); } -html, body { +html, +body { margin: 0px; padding: 0px; height: 100%; - font-family: Open Sans,sans-serif Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; + font-family: Open Sans, sans-serif Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; } body div { @@ -207,10 +235,11 @@ body div { .cbi-button-up, .cbi-button-down, -.main > .loading{ +.main>.loading { - background: linear-gradient(87deg,#5e72e4 0,#5e72e4 100%)!important; + background: linear-gradient(87deg, #5e72e4 0, #5e72e4 100%) !important; } + .sk-folding-cube { margin: 20px auto; width: 40px; @@ -227,8 +256,9 @@ body div { position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); - transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { content: ''; position: absolute; @@ -243,60 +273,82 @@ body div { -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; - animation-delay: 0.6s; + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { - 0%, 10% { + + 0%, + 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); - opacity: 0; - } 25%, 75% { + opacity: 0; + } + + 25%, + 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); - opacity: 1; - } 90%, 100% { + opacity: 1; + } + + 90%, + 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); - opacity: 0; - } + opacity: 0; + } } @keyframes sk-foldCubeAngle { - 0%, 10% { + + 0%, + 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); - opacity: 0; - } 25%, 75% { + opacity: 0; + } + + 25%, + 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); - opacity: 1; - } 90%, 100% { + opacity: 1; + } + + 90%, + 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); - opacity: 0; + opacity: 0; } } @@ -305,7 +357,7 @@ body div { .cbi-button-down, .cbi-value-helpicon, .showSide, -.main > .loading > span { +.main>.loading>span { font-family: 'icomoon' !important; speak: none; font-style: normal !important; @@ -341,7 +393,7 @@ hr { -footer > a { +footer>a { color: #aaa; text-decoration: none; } @@ -354,7 +406,7 @@ footer > a { height: calc(100% - 4rem); } -.main > .loading { +.main>.loading { position: fixed; width: 100%; height: 100%; @@ -364,7 +416,7 @@ footer > a { top: 0; } -.main > .loading > span { +.main>.loading>span { display: block; text-align: center; margin-top: 2rem; @@ -372,11 +424,11 @@ footer > a { font-size: 1.2rem; } -.main > .loading > span > .loading-img:before { +.main>.loading>span>.loading-img:before { content: "\e603"; } -.main > .loading > span > .loading-img { +.main>.loading>span>.loading-img { animation: anim-rotate 2s infinite linear; margin-right: 0.2rem; display: inline-block; @@ -388,6 +440,7 @@ footer > a { -ms-transform: rotate(0); transform: rotate(0); } + 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); @@ -407,12 +460,12 @@ footer > a { float: left; } - -#maincontent > .container > div:nth-child(1).alert-message.warning > a { + +#maincontent>.container>div:nth-child(1).alert-message.warning>a { font: inherit; overflow: visible; text-transform: none; @@ -440,7 +493,7 @@ footer > a { text-decoration: inherit; } -#maincontent > .container > p{ +#maincontent>.container>p { color: #fff; } @@ -450,41 +503,41 @@ li { -.cbi-map-descr + fieldset { +.cbi-map-descr+fieldset { margin-top: 1rem; } -.cbi-section > legend { +.cbi-section>legend { display: none !important; } /* fix progress bar */ -#swaptotal > div, -#swapfree > div, -#swapcache > div, -#memfree > div, -#membuff > div, -#conns > div, -#memcache > div, -#memtotal > div, -#cpu_free > div, -.progress_bar > div { +#swaptotal>div, +#swapfree>div, +#swapcache>div, +#memfree>div, +#membuff>div, +#conns>div, +#memcache>div, +#memtotal>div, +#cpu_free>div, +.progress_bar>div { width: 100% !important; height: 1.6rem !important; - line-height:1.6rem; + line-height: 1.6rem; border-radius: .25rem; } -#swaptotal > div > div, -#swapfree > div > div, -#swapcache > div > div, -#memfree > div > div, -#membuff > div > div, -#conns > div > div, -#memcache > div > div, -#memtotal > div > div, -#cpu_free > div > div, -.progress_bar > div > div { +#swaptotal>div>div, +#swapfree>div>div, +#swapcache>div>div, +#memfree>div>div, +#membuff>div>div, +#conns>div>div, +#memcache>div>div, +#memtotal>div>div, +#cpu_free>div>div, +.progress_bar>div>div { height: 100% !important; background-color: #5e72e4 !important; } @@ -501,13 +554,13 @@ table table, border: none; } -td > table > tbody > tr > td, -.td > .table > .tbody > .tr > .td { +td>table>tbody>tr>td, +.td>.table>.tbody>.tr>.td { border: none; } -.cbi-value-field > table > tbody > tr > td, -.cbi-value-field > .table > .tbody > .tr > .td { +.cbi-value-field>table>tbody>tr>td, +.cbi-value-field>.table>.tbody>.tr>.td { border: none; } @@ -559,7 +612,7 @@ td > table > tbody > tr > td, background-color: transparent; } -.cbi-page-actions .cbi-button-apply + .cbi-button-save, +.cbi-page-actions .cbi-button-apply+.cbi-button-save, .cbi-button-add, .cbi-button-save, .cbi-button-positive { @@ -568,7 +621,7 @@ td > table > tbody > tr > td, background-color: transparent; } -.cbi-section-remove > .cbi-button, +.cbi-section-remove>.cbi-button, .cbi-button-remove, .cbi-button-reset, .cbi-button-negative { @@ -596,17 +649,17 @@ td > table > tbody > tr > td, vertical-align: middle; } -.td.cbi-section-actions > * { +.td.cbi-section-actions>* { display: flex; } -.td.cbi-section-actions > * > *, -.td.cbi-section-actions > * > form > * { +.td.cbi-section-actions>*>*, +.td.cbi-section-actions>*>form>* { flex: 1 1 4em; margin: 0 1px; } -.td.cbi-section-actions > * > form { +.td.cbi-section-actions>*>form { display: inline-flex; margin: 0; } @@ -619,15 +672,18 @@ td > table > tbody > tr > td, display: none } -.left, .left::before { +.left, +.left::before { text-align: left !important; } -.right, .right::before { +.right, +.right::before { text-align: right !important; } -.center, .center::before { +.center, +.center::before { text-align: center !important; } @@ -664,17 +720,19 @@ td > table > tbody > tr > td, select { width: 15rem; - appearance:none; - -webkit-appearance:none; - background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY1MzQ4MDM3OTIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4qIHsgdGV4dC1zaGFkb3c6IHRyYW5zcGFyZW50IDBweCAwcHggMHB4LCByZ2JhKDAsIDAsIDAsIDAuNSkgMHB4IDBweCAwcHggIWltcG9ydGFudDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjAuNDggMjQ1Ljc2aDk4My4wNEw1MTIgNzc4LjI0eiIgcC1pZD0iMjU4NCIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==') !important; - background-position: 96%; + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY1MzQ4MDM3OTIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4qIHsgdGV4dC1zaGFkb3c6IHRyYW5zcGFyZW50IDBweCAwcHggMHB4LCByZ2JhKDAsIDAsIDAsIDAuNSkgMHB4IDBweCAwcHggIWltcG9ydGFudDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjAuNDggMjQ1Ljc2aDk4My4wNEw1MTIgNzc4LjI0eiIgcC1pZD0iMjU4NCIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==') !important; + background-position: 96%; background-size: 8px; background-repeat: no-repeat; - + } -.th[data-type="button"], .td[data-type="button"], -.th[data-type="fvalue"], .td[data-type="fvalue"] { +.th[data-type="button"], +.td[data-type="button"], +.th[data-type="fvalue"], +.td[data-type="fvalue"] { flex: 1 1 2em; text-align: center; } @@ -746,9 +804,9 @@ select { float: left; } -.uci-change-legend-label > ins, -.uci-change-legend-label > del, -.uci-change-legend-label > var { +.uci-change-legend-label>ins, +.uci-change-legend-label>del, +.uci-change-legend-label>var { float: left; margin-right: 4px; width: 10px; @@ -769,48 +827,49 @@ select { } /* other fix */ -input[type="checkbox"]{ - appearance:none !important; - -webkit-appearance:none !important; - border:1px solid #dee2e6 ; - - width: 16px !important; +input[type="checkbox"] { + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid #dee2e6; + + width: 16px !important; height: 16px !important; - padding:0; - cursor:pointer; - transition:all 0.2s; - margin: 0.25rem 0; + padding: 0; + cursor: pointer; + transition: all 0.2s; + margin: 0.25rem 0; } -input[type="checkbox"]:checked{ - border:1px solid #5e72e4; - background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; +input[type="checkbox"]:checked { + border: 1px solid #5e72e4; + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; background-color: #5e72e4; background-size: 70%; background-repeat: no-repeat; background-position: center; } -ul li .cbi-input-checkbox{ - margin-top:0.5rem !important; + +ul li .cbi-input-checkbox { + margin-top: 0.5rem !important; } -.cbi-input-radio{ - appearance:none !important; - -webkit-appearance:none !important; - border:1px solid #dee2e6 ; - - width: 16px !important; +.cbi-input-radio { + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid #dee2e6; + + width: 16px !important; height: 16px !important; - padding:0; - border-radius:50%; - cursor:pointer; - transition:all 0.2s; - margin: 0.25rem 0; + padding: 0; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s; + margin: 0.25rem 0; } -.cbi-input-radio:checked{ - border:1px solid #5e72e4; - background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; +.cbi-input-radio:checked { + border: 1px solid #5e72e4; + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; background-color: #5e72e4; background-size: 70%; background-repeat: no-repeat; @@ -826,8 +885,9 @@ ul li .cbi-input-checkbox{ cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0); - margin:1em 0; + margin: 1em 0; } + .toggle:before { content: ""; position: relative; @@ -840,6 +900,7 @@ ul li .cbi-input-checkbox{ border-radius: 8px; transition: background 0.2s ease; } + .toggle span { position: absolute; top: 0; @@ -852,6 +913,7 @@ ul li .cbi-input-checkbox{ box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); transition: all 0.2s ease; } + .toggle span:before { content: ""; position: absolute; @@ -866,16 +928,18 @@ ul li .cbi-input-checkbox{ pointer-events: none; } -.cbi-input-checkbox:checked + .toggle:before { +.cbi-input-checkbox:checked+.toggle:before { background: #947ADA; } -.cbi-input-checkbox:checked + .toggle span { + +.cbi-input-checkbox:checked+.toggle span { background: #4F2EDC; transform: translateX(20px); transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2); } -.cbi-input-checkbox:checked + .toggle span:before { + +.cbi-input-checkbox:checked+.toggle span:before { transform: scale(1); opacity: 0; transition: all 0.4s ease; @@ -886,25 +950,25 @@ ul li .cbi-input-checkbox{ margin-top: 0; } -.cbi-value-field > input + .cbi-value-description { +.cbi-value-field>input+.cbi-value-description { padding: 0; } -.cbi-value-field > ul > li { +.cbi-value-field>ul>li { display: flex; } -.cbi-value-field > ul > li > label { +.cbi-value-field>ul>li>label { margin-top: 0.5rem; } -.cbi-value-field > ul > li .ifacebadge { +.cbi-value-field>ul>li .ifacebadge { background-color: #eee; margin-left: 0.4rem; margin-top: -0.5rem; } -.cbi-section-table-row > .cbi-value-field .cbi-dropdown { +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { min-width: 7rem; } @@ -914,7 +978,7 @@ ul li .cbi-input-checkbox{ align-items: center; } -.cbi-section-create > * { +.cbi-section-create>* { margin: 0.5rem; } @@ -922,7 +986,9 @@ ul li .cbi-input-checkbox{ padding: 0.5rem; } -div.cbi-value var, td.cbi-value-field var, .td.cbi-value-field var { +div.cbi-value var, +td.cbi-value-field var, +.td.cbi-value-field var { font-style: italic; color: #0069D6; } @@ -978,7 +1044,7 @@ small { } .zonebadge-empty { - background: repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px); + 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; } @@ -987,11 +1053,11 @@ small { min-width: 10rem; } -.zone-forwards > * { +.zone-forwards>* { flex: 1 1 45%; } -.zone-forwards > span { +.zone-forwards>span { flex-basis: 10%; text-align: center; padding: 0 .25rem; @@ -1003,7 +1069,7 @@ small { flex-direction: column; } -#diag-rc-output > pre { +#diag-rc-output>pre { background-color: #fff; display: block; padding: 8.5px; @@ -1023,11 +1089,12 @@ input[name="nslookup"] { } -#xhr_poll_status{ +#xhr_poll_status { display: inline-block; } -#xhr_poll_status > .label.success { + +#xhr_poll_status>.label.success { background-color: #fff !important; color: #32325d !important; } @@ -1068,63 +1135,64 @@ input[name="nslookup"] { /* fix status overview */ -.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) { +.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2) { white-space: normal; } /* fix status processes */ -.node-status-processes > .main .table .tr .td:nth-child(3) { +.node-status-processes>.main .table .tr .td:nth-child(3) { white-space: normal; } -.node-status-iptables > .main div > .cbi-map > form { +.node-status-iptables>.main div>.cbi-map>form { margin: 2rem 2rem 0 0; } /* fix system reboot */ -.node-system-reboot > .main > .main-right p, -.node-system-reboot > .main > .main-right h3 { +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { padding-left: 2rem; } /* fix Services Network Shares*/ -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; width: auto; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { display: list-item; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { padding-top: 1rem; } /* fix System Software*/ -.node-system-packages > .main table tr td:nth-child(1) { +.node-system-packages>.main table tr td:nth-child(1) { width: auto !important; } -.node-system-packages > .main table tr td:nth-last-child(1) { +.node-system-packages>.main table tr td:nth-last-child(1) { white-space: normal; font-size: small; color: #404040; } -.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a { +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { padding: 0.5rem 0.8rem; } -.node-system-packages > .main .cbi-value > pre { +.node-system-packages>.main .cbi-value>pre { background-color: #eee; padding: 0.5rem; overflow: auto; } -.cbi-tabmenu + .cbi-section { +.cbi-tabmenu+.cbi-section { margin-top: 0; } @@ -1135,7 +1203,7 @@ input[name="nslookup"] { } -.node-system-flashops form.inline + form.inline { +.node-system-flashops form.inline+form.inline { margin-left: 0; } @@ -1183,21 +1251,40 @@ body.lang_pl.node-main-login .cbi-value-title { -.table { display: table; position: relative; color: #525f7f; border-collapse: collapse; } -.tr { display: table-row; border-bottom: 1px solid rgba(0,0,0,.05); } -.thead { display: table-header-group; } -.tbody { display: table-row-group; } -.tfoot { display: table-footer-group; } -.td, .th { +.table { + display: table; + position: relative; + color: #525f7f; + border-collapse: collapse; +} + +.tr { + display: table-row; + border-bottom: 1px solid rgba(0, 0, 0, .05); +} + +.thead { + display: table-header-group; +} + +.tbody { + display: table-row-group; +} + +.tfoot { + display: table-footer-group; +} + +.td, +.th { vertical-align: middle; text-align: center; display: table-cell; padding: 1rem; white-space: nowrap; } -.cbi-section-table-row .td{ -} +.cbi-section-table-row .td {} .th { font-weight: bold; @@ -1207,7 +1294,7 @@ body.lang_pl.node-main-login .cbi-value-title { height: 4em; } -.tr.placeholder > .td { +.tr.placeholder>.td { position: absolute; left: 0; right: 0; @@ -1216,25 +1303,76 @@ body.lang_pl.node-main-login .cbi-value-title { background: inherit; } -.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; padding-left: 1.5rem; padding-right: 1.5rem } -.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } +.table[width="33%"], +.th[width="33%"], +.td[width="33%"] { + width: 33%; + padding-left: 1.5rem; + padding-right: 1.5rem +} -.table-titles .th{ +.table[width="100%"], +.th[width="100%"], +.td[width="100%"] { + width: 100%; +} + +.table-titles .th { padding: 0.75rem 1rem; color: #8898aa; background-color: #f6f9fc; } -.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; } -.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; } -.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; } -.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; } -.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; } -.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; } -.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; } -.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; } -.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; } -.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; white-space: inherit;} +.col-1 { + flex: 1 1 30px !important; + -webkit-flex: 1 1 30px !important; +} + +.col-2 { + flex: 2 2 60px !important; + -webkit-flex: 2 2 60px !important; +} + +.col-3 { + flex: 3 3 90px !important; + -webkit-flex: 3 3 90px !important; +} + +.col-4 { + flex: 4 4 120px !important; + -webkit-flex: 4 4 120px !important; +} + +.col-5 { + flex: 5 5 150px !important; + -webkit-flex: 5 5 150px !important; +} + +.col-6 { + flex: 6 6 180px !important; + -webkit-flex: 6 6 180px !important; +} + +.col-7 { + flex: 7 7 210px !important; + -webkit-flex: 7 7 210px !important; +} + +.col-8 { + flex: 8 8 240px !important; + -webkit-flex: 8 8 240px !important; +} + +.col-9 { + flex: 9 9 270px !important; + -webkit-flex: 9 9 270px !important; +} + +.col-10 { + flex: 10 10 300px !important; + -webkit-flex: 10 10 300px !important; + white-space: inherit; +} @@ -1266,15 +1404,18 @@ input { border-radius: .25rem; background-color: #fff; background-clip: padding-box; - box-shadow:0 3px 2px rgba(233,236,239,.05); + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); outline: none; transition: box-shadow .15s ease; - margin:0; + margin: 0; } select:not([multiple="multiple"]):focus, input:focus { - border-color:#5e72e4;outline:0;background-color:#fff;box-shadow:0 3px 9px rgba(50,50,9,0),3px 4px 8px rgba(94,114,228,.1); + border-color: #5e72e4; + outline: 0; + background-color: #fff; + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1); } select[multiple="multiple"] { @@ -1299,10 +1440,11 @@ hr { } .bg-primary { - background-color: #5e72e4!important; + background-color: #5e72e4 !important; } -header, .main { +header, +.main { width: 100%; } @@ -1316,10 +1458,10 @@ footer { color: #aaa; font-size: 0.8rem; text-shadow: 0px 0px 2px #BBB; - padding: 2rem; + padding: 2rem; } -footer > a { +footer>a { color: #aaa; text-decoration: none; } @@ -1332,7 +1474,7 @@ footer > a { height: calc(100% - 4rem); } -.main > .loading { +.main>.loading { position: fixed; width: 100%; height: 100%; @@ -1344,7 +1486,7 @@ footer > a { top: 0; } -.main > .loading > span { +.main>.loading>span { display: block; text-align: center; margin-top: 2rem; @@ -1352,18 +1494,18 @@ footer > a { font-size: 2rem; } -.main > .loading > span > .loading-img:before { +.main>.loading>span>.loading-img:before { content: "\e603"; } -.main > .loading > span > .loading-img { +.main>.loading>span>.loading-img { animation: anim-rotate 2s infinite linear; margin-right: 0.4rem; display: inline-block; } -.main > .main-right > .login-bg { - display:none; +.main>.main-right>.login-bg { + display: none; } @keyframes anim-rotate { @@ -1372,6 +1514,7 @@ footer > a { -ms-transform: rotate(0); transform: rotate(0); } + 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); @@ -1383,8 +1526,8 @@ footer > a { position: fixed; z-index: 200; width: 20rem; - margin-left:-10rem; - margin-top:-5rem; + margin-left: -10rem; + margin-top: -5rem; height: 10rem; left: 50%; top: 50%; @@ -1392,33 +1535,45 @@ footer > a { border-color: #5e72e4; text-align: center; } -[id^="cbi-apply-"] > .panel-title { - border-bottom:none; + +[id^="cbi-apply-"]>.panel-title { + border-bottom: none; } -[id^="cbi-apply-"] > [id^="cbi-apply-"]{ + +[id^="cbi-apply-"]>[id^="cbi-apply-"] { position: initial; - width:auto; - height:auto; + width: auto; + height: auto; font-size: 1rem; - margin-left:0rem; - margin-top:.8rem; - display:block; + margin-left: 0rem; + margin-top: .8rem; + display: block; } + .main-left { float: left; width: 15%; width: calc(0% + 15rem); height: 100%; - background-color: #fff!important; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + background-color: #fff !important; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); overflow-x: auto; position: fixed; z-index: 100; } -.main-left::-webkit-scrollbar {width: 5px;height: 1px;} -.main-left::-webkit-scrollbar-thumb {background-color: #f6f9fc} -.main-left::-webkit-scrollbar-track {background-color:#fff ;} +.main-left::-webkit-scrollbar { + width: 5px; + height: 1px; +} + +.main-left::-webkit-scrollbar-thumb { + background-color: #f6f9fc +} + +.main-left::-webkit-scrollbar-track { + background-color: #fff; +} .main-right { @@ -1429,7 +1584,7 @@ footer > a { background-color: #ffffff; } -.main-right > #maincontent { +.main-right>#maincontent { position: relative; z-index: 50; @@ -1439,19 +1594,19 @@ footer > a { -header > .container { +header>.container { margin-top: 0.5rem; padding: 0.5rem 1rem 0 1rem; } -.cbi-section > h3:first-child, +.cbi-section>h3:first-child, .panel-title { font-size: 1.2rem; width: 100%; display: block; margin-bottom: 0; padding: 1.25rem 1.5rem; - border-bottom: 1px solid rgba(0,0,0,.05); + border-bottom: 1px solid rgba(0, 0, 0, .05); line-height: 1.5; margin-bottom: 0rem; letter-spacing: 0.1rem; @@ -1464,12 +1619,23 @@ table { border-collapse: collapse; } -table, .table { +table, +.table { width: 100%; } -table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th, -.table > .tbody > .tr > .td, .table > .tbody > .tr > .th, .table > .tfoot > .tr > .td, .table > .tfoot > .tr > .th, .table > .thead > .tr > .td, .table > .thead > .tr > .th { +table>tbody>tr>td, +table>tbody>tr>th, +table>tfoot>tr>td, +table>tfoot>tr>th, +table>thead>tr>td, +table>thead>tr>th, +.table>.tbody>.tr>.td, +.table>.tbody>.tr>.th, +.table>.tfoot>.tr>.td, +.table>.tfoot>.tr>.th, +.table>.thead>.tr>.td, +.table>.thead>.tr>.th { padding: .5rem; border-top: 1px solid #ddd; white-space: nowrap; @@ -1491,25 +1657,25 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table margin-bottom: 0; } -.cbi-section-table-row > .cbi-value-field .cbi-input-select, -.cbi-section-table-row > .cbi-value-field .cbi-input-text, -.cbi-section-table-row > .cbi-value-field .cbi-input-password, -.cbi-section-table-row > .cbi-value-field .cbi-dropdown { +.cbi-section-table-row>.cbi-value-field .cbi-input-select, +.cbi-section-table-row>.cbi-value-field .cbi-input-text, +.cbi-section-table-row>.cbi-value-field .cbi-input-password, +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { width: 100%; } -.cbi-section-table-row > .cbi-value-field [data-dynlist] > input, -.cbi-section-table-row > .cbi-value-field input.cbi-input-password { +.cbi-section-table-row>.cbi-value-field [data-dynlist]>input, +.cbi-section-table-row>.cbi-value-field input.cbi-input-password { width: calc(100% - 1.5rem); } -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tbody > .tr:nth-of-type(2n) { +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { background-color: #f9f9f9; } -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tbody > .tr:nth-of-type(2n) { +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { background-color: #f9f9f9; } @@ -1519,8 +1685,8 @@ div > .table > .tbody > .tr:nth-of-type(2n) { } .warning { - background-color: #8965e0 !important; - color: #fff; + background-color: #ffd600 !important; + color: #f00; } .notice { @@ -1534,13 +1700,13 @@ div > .table > .tbody > .tr:nth-of-type(2n) { } .alert-message { - margin: 5rem 0 0 0 !important; - color: #5e72e4 !important; + /* margin: 5rem 0 0 0 !important; + color: #5e72e4 !important; */ } .errorbox, .alert-message { - margin: 2rem 0 0 0; + /* margin: 2rem 0 0 0; */ padding: 2rem; border: 0; font-weight: normal; @@ -1564,10 +1730,11 @@ div > .table > .tbody > .tr:nth-of-type(2n) { color: red; } -.main > .main-left > .sidenav-header{ +.main>.main-left>.sidenav-header { padding: 1.5rem; } -.main > .main-left > .sidenav-header > .brand { + +.main>.main-left>.sidenav-header>.brand { font-size: 1.8rem; color: #5e72e4; font-family: "TypoGraphica"; @@ -1575,42 +1742,44 @@ div > .table > .tbody > .tr:nth-of-type(2n) { padding-left: 2rem; cursor: default; vertical-align: text-bottom; - white-space: nowrap; + white-space: nowrap; } -.main > .main-left > .nav { + +.main>.main-left>.nav { margin-top: 0.5rem; } -.main > .main-left > .nav > li a { +.main>.main-left>.nav>li a { color: #8699ad; display: block; } -.main > .main-left > .nav > li:nth-last-child(1) { +.main>.main-left>.nav>li:nth-last-child(1) { margin-top: 2rem; font-size: 1.2rem; } -.main > .main-left > .nav > li:nth-last-child(1) > .menu:after{ + +.main>.main-left>.nav>li:nth-last-child(1)>.menu:after { content: ""; } -.main > .main-left > .nav > li { +.main>.main-left>.nav>li { padding: 0.5rem 1rem; cursor: pointer; } -.main > .main-left > .nav > .slide { +.main>.main-left>.nav>.slide { padding: 0; } -.main > .main-left > .nav > .slide > ul { +.main>.main-left>.nav>.slide>ul { display: none; } -.main > .main-left > .nav > .slide > .menu { +.main>.main-left>.nav>.slide>.menu { display: block; margin: 0.1rem .5rem 0.1rem .5rem; - padding: .675rem 0 .675rem 3rem; + padding: .675rem 0 .675rem 3rem; border-radius: .375rem; text-decoration: none; cursor: default; @@ -1619,22 +1788,20 @@ div > .table > .tbody > .tr:nth-of-type(2n) { position: relative; } -.main > .main-left > .nav > li:hover, -.main > .main-left > .nav > .slide > .menu:hover { +.main>.main-left>.nav>li:hover, +.main>.main-left>.nav>.slide>.menu:hover { cursor: pointer; color: #000; } -.main > .main-left > .nav > .slide:hover { +.main>.main-left>.nav>.slide:hover { background: none; } -.main > .main-left > .nav > .slide > .menu:hover { +.main>.main-left>.nav>.slide>.menu:hover {} -} - -.main > .main-left > .nav > .slide > .menu:before{ +.main>.main-left>.nav>.slide>.menu:before { font-family: 'ssr' !important; speak: none; font-style: normal; @@ -1647,46 +1814,56 @@ div > .table > .tbody > .tr:nth-of-type(2n) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; - left:1.3rem; - padding-top:3px; + left: 1.3rem; + padding-top: 3px; } -.main > .main-left > .nav > .slide > .menu[data-title= Status ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Status]:before { content: "\e906"; - color: #5e72e4!important; + color: #5e72e4 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= System ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=System]:before { content: "\e90a"; - color: #fb6340!important; + color: #fb6340 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Services ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Services]:before { content: "\e909"; - color: #11cdef!important; + color: #11cdef !important; } -.main > .main-left > .nav > .slide > .menu[data-title= NAS ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=NAS]:before { content: "\e90c"; - color: #f3a4b5!important; + color: #f3a4b5 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Control ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Control]:before { content: "\e90e"; - color: #f3a4b5!important; + color: #f3a4b5 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= VPN ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=VPN]:before { content: "\e90b"; - color: #172b4d!important; + color: #172b4d !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Network ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Network]:before { content: "\e908"; - color: #8965e0!important; + color: #8965e0 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Bandwidth_Monitor ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Bandwidth_Monitor]:before { content: "\e90d"; - color: #2dce89!important; + color: #2dce89 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Logout ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Logout]:before { content: "\e907"; - color: #32325d!important; + color: #32325d !important; } -.main > .main-left > .nav > .slide > .menu:after { + +.main>.main-left>.nav>.slide>.menu:after { position: absolute; right: 0.5rem; top: 0.8rem; @@ -1708,16 +1885,18 @@ div > .table > .tbody > .tr:nth-of-type(2n) { -webkit-font-smoothing: antialiased; transition: all 0.3s; } -header > .fill{ + +header>.fill { padding: 0.8rem 0; } -header > .fill > .container{ + +header>.fill>.container { height: 2rem; padding: 0 1rem; } -header > .fill > .container > .brand{ +header>.fill>.container>.brand { font-size: 1.5rem; color: #fff; font-family: "TypoGraphica"; @@ -1728,49 +1907,42 @@ header > .fill > .container > .brand{ display: none; } -.main > .main-left > .nav > .slide > .menu.active{ +.main>.main-left>.nav>.slide>.menu.active { color: #000; background: #f6f9fc; } -.main > .main-left > .nav > .slide > .menu.active:after{ + +.main>.main-left>.nav>.slide>.menu.active:after { color: #5e72e4; transform: rotate(90deg); } -.main > .main-left > .nav > .slide > .slide-menu > li { +.main>.main-left>.nav>.slide>.slide-menu>li {} -} +.main>.main-left>.nav>.slide>.slide-menu>.active {} -.main > .main-left > .nav > .slide > .slide-menu > .active { - -} - -.main > .main-left > .nav > .slide > .slide-menu > li > a { +.main>.main-left>.nav>.slide>.slide-menu>li>a { margin: 0.1rem .5rem 0.1rem 0.5rem; padding: 0.5rem 1.5rem 0.5rem 3rem; text-decoration: none; white-space: nowrap; - color:rgba(0,0,0,.6); + color: rgba(0, 0, 0, .6); transition: all 0.2s; } -.main > .main-left > .nav > .slide > .slide-menu > .active > a { +.main>.main-left>.nav>.slide>.slide-menu>.active>a { color: #000; } -.main > .main-left > .nav > .slide > .slide-menu > li > a:hover { +.main>.main-left>.nav>.slide>.slide-menu>li>a:hover {} -} - -.main > .main-left > .nav > .slide > .slide-menu > .active > a:hover { - -} +.main>.main-left>.nav>.slide>.slide-menu>.active>a:hover {} li { list-style-type: none; } -#maincontent > .container { +#maincontent>.container { margin: 0 2rem 1rem 2rem; } @@ -1783,21 +1955,20 @@ h1 { h2 { margin: 0 0 0 0; font-size: 1.5rem; - padding: 1.5rem 0!important; + padding: 1.5rem 0 !important; color: #fff; } -#cbi-dropbear h2 , -#cbi-dropbear .cbi-map-descr , +#cbi-dropbear h2, +#cbi-dropbear .cbi-map-descr, #cbi-dropbear .cbi-map-descr abbr, #cbi-rc h2, #cbi-rc .cbi-map-descr, #cbi-distfeedconf h2, #cbi-distfeedconf .cbi-map-descr, #cbi-customfeedconf h2, -#cbi-customfeedconf .cbi-map-descr -{ - color: #32325d!important; +#cbi-customfeedconf .cbi-map-descr { + color: #32325d !important; } h3 { @@ -1814,11 +1985,10 @@ h3 { font-weight: bold; } -h4 { +h4 {} -} - -div.cbi-section, fieldset { +div.cbi-section, +fieldset { margin: 10px 0; padding: 1rem; font-weight: normal; @@ -1830,27 +2000,29 @@ div.cbi-section, fieldset { overflow-x: auto; overflow-y: hidden; - border: 1px solid rgba(0,0,0,.05); + border: 1px solid rgba(0, 0, 0, .05); border-radius: .375rem; background-color: #fff; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); -webkit-overflow-scrolling: touch; } -fieldset > legend { +fieldset>legend { display: none !important; } -div.cbi-section > div.cbi-section, fieldset > fieldset { +div.cbi-section>div.cbi-section, +fieldset>fieldset { margin: 0; padding: 0; border: none; box-shadow: none; } -fieldset.cbi-section p{ + +fieldset.cbi-section p { padding: 1em; } @@ -1859,14 +2031,14 @@ fieldset.cbi-section p{ display: block; margin-bottom: 0; padding: 0.5rem; - border-bottom: 1px solid rgba(0,0,0,.05); + border-bottom: 1px solid rgba(0, 0, 0, .05); background-color: #fff; line-height: 1.5; margin-bottom: 0rem; - letter-spacing:0.1rem; + letter-spacing: 0.1rem; color: #32325d; - font-weight:bold; - font-size: 0.8rem; + font-weight: bold; + font-size: 0.8rem; } table { @@ -1879,7 +2051,9 @@ table { position: relative; } -table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { +table>tbody>tr>td, +table>tfoot>tr>td, +table>thead>tr>td { font-size: .8125rem; white-space: nowrap; color: #525f7f; @@ -1889,7 +2063,9 @@ table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { line-height: 1.3; } -table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { +table>tbody>tr>th, +table>tfoot>tr>th, +table>thead>tr>th { padding-right: 1.5rem; padding-left: 1.5rem; @@ -1902,6 +2078,7 @@ table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { text-transform: uppercase; border-bottom: 1px solid #e9ecef; } + .cbi-section-table-cell { text-align: center; } @@ -1910,7 +2087,7 @@ table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { text-align: center; } -fieldset > table > tbody > tr:nth-of-type(2n) { +fieldset>table>tbody>tr:nth-of-type(2n) { /* background-color: #f9f9f9; */ } @@ -1931,11 +2108,11 @@ table table { border: none; } -td > table > tbody > tr > td { +td>table>tbody>tr>td { border: none; } -.cbi-value-field > table > tbody > tr > td { +.cbi-value-field>table>tbody>tr>td { border: none; } @@ -1946,7 +2123,7 @@ td > table > tbody > tr > td { .cbi-button { -webkit-appearance: none; text-transform: uppercase; -/* height: 2.5rem; + /* height: 2.5rem; line-height: 2.5rem; */ color: rgba(0, 0, 0, 0.87); @@ -1994,8 +2171,8 @@ td > table > tbody > tr > td { box-shadow: none; } -form.inline + form.inline, -.cbi-button + .cbi-button { +form.inline+form.inline, +.cbi-button+.cbi-button { margin-left: 0.6rem; } @@ -2020,8 +2197,7 @@ form.inline + form.inline, border-color: #2e6da4 !important; } -.cbi-value-field -.cbi-input-apply, +.cbi-value-field .cbi-input-apply, .cbi-button-apply, .cbi-button-edit { @@ -2031,16 +2207,19 @@ form.inline + form.inline, } -.cbi-section-remove > .cbi-button, +.cbi-section-remove>.cbi-button, .cbi-button-remove { color: #fff !important; background-color: #fb6340 !important; border-color: #fb6340 !important; } -.cbi-value-field .cbi-button-add ,.cbi-value-field .cbi-button-remove ,.cbi-value-field .cbi-button-neutral{ + +.cbi-value-field .cbi-button-add, +.cbi-value-field .cbi-button-remove, +.cbi-value-field .cbi-button-neutral { height: 2.5rem; line-height: 2.5rem; - min-width: 2.5rem!important; + min-width: 2.5rem !important; } @@ -2053,28 +2232,31 @@ form.inline + form.inline, border-radius: 0.375rem; } -.cbi-tabmenu > li, -.tabs > li { - font-size:1rem; +.cbi-tabmenu>li, +.tabs>li { + font-size: 1rem; /* border-top-left-radius:0.25rem; */ /* border-top-right-radius:0.25rem; */ display: inline-block; padding: 0.6rem; - border-bottom: 0.18751rem solid rgba(0,0,0,0); + border-bottom: 0.18751rem solid rgba(0, 0, 0, 0); } -.cbi-tabmenu > li{ + +.cbi-tabmenu>li { background: #adb5bd; } -.cbi-tabmenu > li > a, -.tabs > li > a { +.cbi-tabmenu>li>a, +.tabs>li>a { text-decoration: none; - color:#404040; + color: #404040; padding: 0.5rem 0.8rem; } -.cbi-tabmenu > li > a{ + +.cbi-tabmenu>li>a { color: #fff; } + .cbi-dropdown { display: inline-flex; cursor: pointer; @@ -2087,7 +2269,7 @@ form.inline + form.inline, outline: 2px solid #4b6e9b; } -.cbi-dropdown > ul { +.cbi-dropdown>ul { margin: 0 !important; padding: 0; list-style: none; @@ -2097,18 +2279,18 @@ form.inline + form.inline, width: 100%; } -.cbi-dropdown > ul.preview { +.cbi-dropdown>ul.preview { display: none; } -.cbi-dropdown > .open { +.cbi-dropdown>.open { border: 0px outset #eee; flex-basis: 15px; background: #fff; } -.cbi-dropdown > .open, -.cbi-dropdown > .more { +.cbi-dropdown>.open, +.cbi-dropdown>.more { flex-grow: 0; flex-shrink: 0; display: flex; @@ -2119,15 +2301,15 @@ form.inline + form.inline, padding: 0 .25em; } -.cbi-dropdown > .more, -.cbi-dropdown > ul > li[placeholder] { +.cbi-dropdown>.more, +.cbi-dropdown>ul>li[placeholder] { color: #777; font-weight: bold; text-shadow: 1px 1px 0px #fff; display: none; } -.cbi-dropdown > ul > li { +.cbi-dropdown>ul>li { display: none; padding: .25em; white-space: nowrap; @@ -2140,44 +2322,49 @@ form.inline + form.inline, min-height: 20px; } -.cbi-dropdown > ul > li .hide-open { display: initial; } -.cbi-dropdown > ul > li .hide-close { display: none; } +.cbi-dropdown>ul>li .hide-open { + display: initial; +} -.cbi-dropdown > ul > li[display]:not([display="0"]) { +.cbi-dropdown>ul>li .hide-close { + display: none; +} + +.cbi-dropdown>ul>li[display]:not([display="0"]) { border-left: 1px solid #ccc; } -.cbi-dropdown[empty] > ul { +.cbi-dropdown[empty]>ul { max-width: 1px; } -.cbi-dropdown > ul > li > form { +.cbi-dropdown>ul>li>form { display: none; margin: 0; padding: 0; pointer-events: none; } -.cbi-dropdown > ul > li img { +.cbi-dropdown>ul>li img { vertical-align: middle; margin-right: .25em; } -.cbi-dropdown > ul > li > form > input[type="checkbox"] { +.cbi-dropdown>ul>li>form>input[type="checkbox"] { margin: 0; height: auto; } -.cbi-dropdown > ul > li input[type="text"] { +.cbi-dropdown>ul>li input[type="text"] { height: 20px; } .cbi-dropdown[open] { position: relative; - border-color:#5e72e4; + border-color: #5e72e4; } -.cbi-dropdown[open] > ul.dropdown { +.cbi-dropdown[open]>ul.dropdown { display: block; background: #fff; border-color: #5e72e4; @@ -2186,43 +2373,48 @@ form.inline + form.inline, max-width: none; min-width: 100%; width: auto; - box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.05); + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .05); } -.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 { +.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 { flex-grow: 1; display: flex; align-items: center; } -.cbi-dropdown[empty] > ul > li, -.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], -.cbi-dropdown[multiple][open] > ul.dropdown > li > form { +.cbi-dropdown[empty]>ul>li, +.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder], +.cbi-dropdown[multiple][open]>ul.dropdown>li>form { display: block; } -.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } -.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } +.cbi-dropdown[open]>ul.dropdown>li .hide-open { + display: none; +} -.cbi-dropdown[open] > ul.dropdown > li { +.cbi-dropdown[open]>ul.dropdown>li .hide-close { + display: initial; +} + +.cbi-dropdown[open]>ul.dropdown>li { border-bottom: 1px solid #ccc; } -.cbi-dropdown[open] > ul.dropdown > li[selected] { +.cbi-dropdown[open]>ul.dropdown>li[selected] { background: #b0d0f0; } -.cbi-dropdown[open] > ul.dropdown > li.focus { +.cbi-dropdown[open]>ul.dropdown>li.focus { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); } -.cbi-dropdown[open] > ul.dropdown > li:last-child { +.cbi-dropdown[open]>ul.dropdown>li:last-child { margin-bottom: 0; border-bottom: none; } @@ -2251,13 +2443,15 @@ form.inline + form.inline, border-radius: .25rem; background-color: #fff; background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233,236,239,.05); + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); margin: 0.25rem; } + .cbi-value-field .cbi-dropdown { min-width: 20rem; } -.cbi-value-field .cbi-dropdown .zonebadge > .ifacebadge { + +.cbi-value-field .cbi-dropdown .zonebadge>.ifacebadge { padding: 0rem 1rem; margin: 0rem 0.3rem; border: 1px solid #6C6C6C; @@ -2269,7 +2463,7 @@ select[multiple="multiple"] { height: auto; } -.cbi-dropdown > ul { +.cbi-dropdown>ul { margin: 0 !important; padding: 0; list-style: none; @@ -2281,22 +2475,22 @@ select[multiple="multiple"] { -.cbi-section > legend { +.cbi-section>legend { display: none !important; } -.tabs > li[class~="active"], -.tabs > li:hover { +.tabs>li[class~="active"], +.tabs>li:hover { cursor: pointer; background: #eee; margin-bottom: 0; } -.tabs > li[class~="active"] > a { +.tabs>li[class~="active"]>a { color: #5e72e4; } -.tabs > li:hover { +.tabs>li:hover { border-bottom: 0.2rem solid #32325d; } @@ -2305,25 +2499,27 @@ select[multiple="multiple"] { /* padding: 0.5rem 1rem 0 1rem; */ } -.cbi-tabmenu > li:hover { +.cbi-tabmenu>li:hover { background-color: #F1F1F1; } -.cbi-tabmenu > li:hover > a{ + +.cbi-tabmenu>li:hover>a { color: #525f7f; } -.cbi-tabmenu > li[class~="cbi-tab"] { +.cbi-tabmenu>li[class~="cbi-tab"] { background-color: #fb6340; } -.cbi-tabmenu > li[class~="cbi-tab"] > a{ + +.cbi-tabmenu>li[class~="cbi-tab"]>a { color: #fff; } .cbi-section-remove:nth-of-type(2n), -.cbi-section-node:nth-of-type(2n){ +.cbi-section-node:nth-of-type(2n) { background-color: #f9f9f9; } @@ -2332,29 +2528,33 @@ select[multiple="multiple"] { margin-top: 0; } -.cbi-section-node{ + +.cbi-section-node { background: #fff; border: 0; border-radius: .375rem; margin-bottom: 0px; - box-shadow: 0 0 0rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 0rem 0 rgba(136, 152, 170, .15); overflow-x: auto; overflow-y: hidden; - padding:0rem 0; + padding: 0rem 0; } -#cbi-network-lan.cbi-section-node{ - overflow-x:visible; + +#cbi-network-lan.cbi-section-node { + overflow-x: visible; overflow-y: visible; } -#cbi-network .cbi-section , #cbi-network .cbi-section .cbi-section-node{ -} -.cbi-section-node .cbi-value{ -/* padding: 0.3rem 0rem 0.3rem 1rem; + +#cbi-network .cbi-section, +#cbi-network .cbi-section .cbi-section-node {} + +.cbi-section-node .cbi-value { + /* padding: 0.3rem 0rem 0.3rem 1rem; */ } -.cbi-tabcontainer > .cbi-value:nth-of-type(2n) { +.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { background-color: #f9f9f9; } @@ -2364,7 +2564,7 @@ select[multiple="multiple"] { padding-top: 0.5em; } -.cbi-value-helpicon > img { +.cbi-value-helpicon>img { display: none; } @@ -2375,8 +2575,9 @@ select[multiple="multiple"] { .cbi-value-description { font-size: small; opacity: 0.8; - display: unset; + display: unset; } + .cbi-value-title { display: table-cell; text-align: right; @@ -2407,11 +2608,11 @@ select[multiple="multiple"] { padding: 0.3rem 1rem; display: inline-block; width: 100%; - clear: both; + clear: both; } -.cbi-section-table-descr > .cbi-section-table-cell, -.cbi-section-table-titles > .cbi-section-table-cell { +.cbi-section-table-descr>.cbi-section-table-cell, +.cbi-section-table-titles>.cbi-section-table-cell { border: none; } @@ -2420,16 +2621,17 @@ select[multiple="multiple"] { } .cbi-rowstyle-2 { - background-color:#fefefe; + background-color: #fefefe; } /* desc */ -.cbi-section-descr{ +.cbi-section-descr { padding: 1rem 0 1rem 2rem; font-size: 0.7rem; font-weight: 600; color: #525f7f; } + .cbi-map-descr { padding: 0rem 0 1rem 0rem; color: #fff; @@ -2469,12 +2671,12 @@ input[type="checkbox"] { box-shadow: none; } -td > .ifacebadge { +td>.ifacebadge { background-color: #F0F0F0; font-size: 0.9rem; } -.ifacebadge > img { +.ifacebadge>img { float: right; margin: 0 0.3rem; } @@ -2483,14 +2685,14 @@ td > .ifacebadge { .cbi-input-textarea { width: 100%; - resize: none; + resize: none; outline: none; min-height: 14rem; padding: 0.8rem; font-size: 0.8rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: black; - border-radius: 0.25rem; + border-radius: 0.25rem; } #syslog { @@ -2512,8 +2714,8 @@ td > .ifacebadge { font-family: monospace; } -.uci-change-list ins strong{ - display: inline; +.uci-change-list ins strong { + display: inline; } .uci-change-list ins, @@ -2522,7 +2724,7 @@ td > .ifacebadge { border: 1px solid #00FF00; background-color: #CCFFCC; display: block; - padding: 0 1rem; + padding: 0 1rem; margin: 0.5rem 0; } @@ -2577,130 +2779,130 @@ td > .ifacebadge { .ifacebadge { - display: inline-flex; - border-bottom: 1px solid #CCCCCC; - padding: 0.5rem 1rem; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + border-bottom: 1px solid #CCCCCC; + padding: 0.5rem 1rem; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } td>.ifacebadge { - background-color: #F0F0F0; - font-size: 0.9rem; + background-color: #F0F0F0; + font-size: 0.9rem; } .ifacebadge>img { - float: right; - margin: 0 0.3rem; + float: right; + margin: 0 0.3rem; } .ifacebox { - text-align: center; - margin-right: 60px; + text-align: center; + margin-right: 60px; } .ifacebox .ifacebox-head { - border-bottom: 1px solid #ccc; - padding: 2px; - background: #eee; + border-bottom: 1px solid #ccc; + padding: 2px; + background: #eee; } .ifacebox .ifacebox-head.active { - background: #5e72e4; + background: #5e72e4; } .ifacebox .ifacebox-body { - border: 2px solid #f2f2f2; - border-top: 0; - border-radius: 0 0 4px 4px; - padding: 2px 10px; + border: 2px solid #f2f2f2; + border-top: 0; + border-radius: 0 0 4px 4px; + padding: 2px 10px; } .network-status-table .ifacebox-body { - display: flex; - flex-direction: column; - height: 100%; - text-align: left; + display: flex; + flex-direction: column; + height: 100%; + text-align: left; } .network-status-table .ifacebox { - margin: .5em; - flex-grow: 1; + margin: .5em; + flex-grow: 1; } .ifacebox .ifacebox-body { - padding: .25em; + padding: .25em; } .ifacebox { - background-color: #fff; - border: 1px solid #ccc; - margin: 0 10px; - text-align: center; - white-space: nowrap; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - display: inline-flex; - flex-direction: column; - line-height: 1.2em; - min-width: 100px; + background-color: #fff; + border: 1px solid #ccc; + margin: 0 10px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; } .ifacebadge { - display: inline-block; - flex-direction: row; - white-space: nowrap; - background-color: #fff; - border: 1px solid #ccc; - padding: 2px; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: default; - line-height: 1.2em; + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #fff; + border: 1px solid #ccc; + padding: 2px; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; } .ifacebadge.large, .network-status-table .ifacebox-body .ifacebadge { - display: inline-flex; - flex: 1; - padding: .25em; - min-width: 220px; - margin: .125em; - float: left; + display: inline-flex; + flex: 1; + padding: .25em; + min-width: 220px; + margin: .125em; + float: left; } .ifacebadge img { - width: 16px; - height: 16px; - vertical-align: middle; + width: 16px; + height: 16px; + vertical-align: middle; } .ifacebadge>*, .ifacebadge.large>* { - margin: 0 .125em; + margin: 0 .125em; } .ifacebadge>*, .ifacebadge.large>* { - margin: 0 .125em; + margin: 0 .125em; } .network-status-table { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .cbi-tooltip { - position: absolute; - z-index: 1000; - left: -1000px; - opacity: 0; - transition: opacity .25s ease-out; + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; } .cbi-image-button { @@ -2712,7 +2914,7 @@ td>.ifacebadge { #bwsvg { border: none !important; border-radius: 0.375rem; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); overflow: hidden; } @@ -2728,13 +2930,13 @@ td>.ifacebadge { cursor: pointer; } -.zonebadge > .ifacebadge { +.zonebadge>.ifacebadge { padding: 0.2rem 1rem; margin: 0.3rem; border: 1px solid #6C6C6C; } -.zonebadge > input[type="text"] { +.zonebadge>input[type="text"] { padding: 0.16rem 1rem; min-width: 10rem; margin-top: 0.3rem; @@ -2746,36 +2948,37 @@ td>.ifacebadge { height: 1rem; } -input[type=checkbox], input[type=radio] { +input[type=checkbox], +input[type=radio] { width: auto; margin: 0; vertical-align: middle; cursor: pointer; } -.cbi-value-field > input + .cbi-value-description { +.cbi-value-field>input+.cbi-value-description { padding: 0; } -.cbi-value-field > ul > li { +.cbi-value-field>ul>li { display: flex; } -.cbi-value-field > ul > li > label { +.cbi-value-field>ul>li>label { margin-top: -0.1rem; } -.cbi-value-field > ul > li .ifacebadge { +.cbi-value-field>ul>li .ifacebadge { background-color: #eee; margin-left: 0.4rem; margin-top: -0.5rem; } -.cbi-section-table-row > .cbi-value-field .cbi-input-select { +.cbi-section-table-row>.cbi-value-field .cbi-input-select { min-width: 7rem; } -.cbi-section-create > .cbi-button-add { +.cbi-section-create>.cbi-button-add { margin: 0.5rem; } @@ -2783,7 +2986,8 @@ input[type=checkbox], input[type=radio] { padding: 0.5rem; } -div.cbi-value var, td.cbi-value-field var { +div.cbi-value var, +td.cbi-value-field var { font-style: italic; color: #0069D6; } @@ -2807,7 +3011,7 @@ input[name="nslookup"] { width: 80%; } -header > .container > .pull-right > * { +header>.container>.pull-right>* { position: relative; top: 0.45rem; cursor: pointer; @@ -2849,36 +3053,40 @@ header > .container > .pull-right > * { } /* fix Main Login*/ -.node-main-login > .main > .main-right > header { +.node-main-login>.main>.main-right>header { background: none !important; - box-shadow:none !important; - display:none; -} -.node-main-login > .main > .main-right > header > .fill > .container{ - margin: 2rem auto; - max-width: 1140px; -} -.node-main-login > .main > .main-right > header > .fill > .container > .brand{ - font-size:2rem; - color:#5e72e4; - display:none; - -} -.node-main-login > .main{ - top:0; - height:100% !important; -} -.node-main-login > .main > .main-left { + box-shadow: none !important; display: none; } -.node-main-login > .main > .main-right { +.node-main-login>.main>.main-right>header>.fill>.container { + margin: 2rem auto; + max-width: 1140px; +} + +.node-main-login>.main>.main-right>header>.fill>.container>.brand { + font-size: 2rem; + color: #5e72e4; + display: none; + +} + +.node-main-login>.main { + top: 0; + height: 100% !important; +} + +.node-main-login>.main>.main-left { + display: none; +} + +.node-main-login>.main>.main-right { width: 100%; } -.node-main-login > .main > .main-right > .login-bg{ - display:block; - position:fixed; +.node-main-login>.main>.main-right>.login-bg { + display: block; + position: fixed; width: 100%; height: 100%; left: 0px; @@ -2889,20 +3097,21 @@ header > .container > .pull-right > * { transition: all 0.5s; } -.node-main-login > .main > .main-right > .login-bg.blur{ +.node-main-login>.main>.main-right>.login-bg.blur { transform: scale(1.05); - -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ + -webkit-filter: blur(5px); + /* Chrome, Safari, Opera */ filter: blur(5px); } -.node-main-login > .main > .main-right > #maincontent { +.node-main-login>.main>.main-right>#maincontent { padding-top: 23vh; height: 100%; background-color: transparent !important; margin-top: 0rem; } -.node-main-login > .main fieldset { +.node-main-login>.main fieldset { padding: 0.5rem; margin: 0rem; display: inline; @@ -2912,30 +3121,30 @@ header > .container > .pull-right > * { overflow: hidden; } -.node-main-login > .main .cbi-value-title { +.node-main-login>.main .cbi-value-title { font-size: 1rem; line-height: 1.5; - color:#525f7f; + color: #525f7f; padding: .625rem; } -.node-main-login > .main #maincontent { +.node-main-login>.main #maincontent { text-align: center; } -.node-main-login > .main .container { +.node-main-login>.main .container { display: inline-block; padding: 2rem 2rem; - position:relative; + position: relative; margin-top: 2rem !important; - background-color: #f7fafc!important; + background-color: #f7fafc !important; border-radius: .375rem; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); text-align: left; } -.node-main-login > .main .container h2{ +.node-main-login>.main .container h2 { width: 120px; height: 120px; color: #fff; @@ -2949,46 +3158,50 @@ header > .container > .pull-right > * { border-radius: 60px; border: #fff 3px solid; - background-image:url(../logo.png); - background-size:cover; + background-image: url(../logo.png); + background-size: cover; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); } -.node-main-login > .main .container .cbi-map-descr{ - text-align:center; + +.node-main-login>.main .container .cbi-map-descr { + text-align: center; padding: 1rem; color: #8898aa; } -.node-main-login > .main .container .cbi-section-node{ - padding:0; + +.node-main-login>.main .container .cbi-section-node { + padding: 0; } -.node-main-login > .main .container .cbi-value-field input{ +.node-main-login>.main .container .cbi-value-field input { font-size: 1rem; line-height: 1.5; display: block; width: 100%; height: calc(2.75rem + 2px); padding: .625rem .75rem; - transition: all .15s cubic-bezier(.68,-.55,.265,1.55); + transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); color: #8898aa; border: 0px solid #dee2e6; border-radius: .25rem; background-color: #fff; background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233,236,239,.05); + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); } -.node-main-login > .main .container .cbi-value-field input:focus { + +.node-main-login>.main .container .cbi-value-field input:focus { color: #8898aa; outline: 0; background-color: #fff; - box-shadow: 0 3px 9px rgba(50,50,9,0),3px 4px 8px rgba(94,114,228,.1) + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) } -.node-main-login > .main .container input.cbi-button{ + +.node-main-login>.main .container input.cbi-button { font-size: 1rem; - height:auto; + height: auto; position: relative; transition: all .15s ease; letter-spacing: .2em; @@ -2998,51 +3211,56 @@ header > .container > .pull-right > * { line-height: 1.5em; } -.node-main-login > .main form > div:nth-last-child(1) { - text-align:center; - border-top:0; +.node-main-login>.main form>div:nth-last-child(1) { + text-align: center; + border-top: 0; padding-top: 2rem; } -.node-main-login > .main .cbi-value { +.node-main-login>.main .cbi-value { display: block; padding: 0; } -.node-main-login > .main .cbi-value > * { +.node-main-login>.main .cbi-value>* { display: inline-block !important; } -.node-main-login > .main .cbi-value:first-child , .node-main-login > .main .cbi-button-reset{ - display:none !important; -} - -.node-main-login > .main .cbi-value.cbi-value-last .cbi-value-title{ +.node-main-login>.main .cbi-value:first-child, +.node-main-login>.main .cbi-button-reset { display: none !important; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text{ - box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); - transition: box-shadow .15s ease; - border-radius: .375rem; - box-sizing:border-box; - padding-left:3em; - margin: 0; + + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-title { + display: none !important; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-input-password{ - box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-text { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); transition: box-shadow .15s ease; border-radius: .375rem; - box-sizing:border-box; - padding-left:3em; + box-sizing: border-box; + padding-left: 3em; margin: 0; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-value-field{ - position:relative; - width: 20rem; +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-password { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); + transition: box-shadow .15s ease; + border-radius: .375rem; + box-sizing: border-box; + padding-left: 3em; + margin: 0; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-value-field:before{ + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field { + position: relative; + width: 20rem; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field:before { font-family: 'icomoon' !important; speak: none; font-style: normal; @@ -3061,12 +3279,12 @@ header > .container > .pull-right > * { top: 10px; } -.node-main-login > .main .cbi-input-user, -.node-main-login > .main .cbi-input-password { +.node-main-login>.main .cbi-input-user, +.node-main-login>.main .cbi-input-password { min-width: 15rem; } -.node-main-login .alert-message.warning{ +.node-main-login .alert-message.warning { position: absolute; color: #fff; width: calc(100% - 4rem); @@ -3077,10 +3295,11 @@ header > .container > .pull-right > * { border-radius: 5px; padding: 1rem 2rem; text-align: center; + display: none; } -.node-main-login .errorbox{ - position: absolute; +.node-main-login .errorbox { + position: absolute; color: #fff; width: calc(100% - 4rem); border-color: #eea236; @@ -3090,83 +3309,86 @@ header > .container > .pull-right > * { padding: 1rem 2rem; text-align: center; background-color: #8965e0 !important; - + } .node-main-login footer { bottom: 0; position: absolute; width: 100%; - color:#fff; + color: #fff; } -.node-main-login footer > a{ - color:#fff; + +.node-main-login footer>a { + color: #fff; } /* fix status overview */ -.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) { +.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { white-space: normal; } /* fix status processes */ -.node-status-processes > .main table tr td:nth-child(3) { +.node-status-processes>.main table tr td:nth-child(3) { white-space: normal; } -.node-status-iptables > .main div > .cbi-map > form { +.node-status-iptables>.main div>.cbi-map>form { margin: 0.5rem 2rem 0 0; } /* fix system reboot */ -.node-system-reboot > .main > .main-right p, -.node-system-reboot > .main > .main-right h3 { +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { padding-left: 2rem; color: #fff; } /* fix Services Network Shares*/ -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; width: auto; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { display: list-item; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { padding-top: 1rem; } /* fix System Software*/ -.node-system-packages > .main table tr td:nth-child(1) { +.node-system-packages>.main table tr td:nth-child(1) { width: auto !important; } -.node-system-packages > .main table tr td:nth-last-child(1) { +.node-system-packages>.main table tr td:nth-last-child(1) { white-space: normal; font-size: small; color: #404040; } -.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a { +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { padding: 0.5rem 0.8rem; } -.node-system-packages > .main .cbi-value > pre { +.node-system-packages>.main .cbi-value>pre { background-color: #eee; padding: 0.5rem; overflow: auto; } -.cbi-tabmenu + .cbi-section { +.cbi-tabmenu+.cbi-section { margin-top: 0; } -.cbi-section{ -/* background: #fff; + +.cbi-section { + /* background: #fff; border: 0; border-radius: .375rem; margin-bottom: 30px; @@ -3175,42 +3397,47 @@ header > .container > .pull-right > * { overflow-y:hidden; */ } -.cbi-section em{ - padding :0rem 1.5rem; + +.cbi-section em { + padding: 0rem 1.5rem; font-size: 0.7rem; font-weight: 600; color: #525f7f; } -#cbi-system-led em{ +#cbi-system-led em { /* padding :0.75rem 1.5rem; */ } -.cbi-section h4{ + +.cbi-section h4 { /* padding :0.75rem 1.5rem; */ font-size: 0.7rem; font-weight: 600; color: #525f7f; } -.node-main-login .cbi-section{ +.node-main-login .cbi-section { margin-bottom: 0px; padding-bottom: 0px; } -#content_syslog{ +#content_syslog { border-radius: .375rem; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); overflow: hidden; } -.node-system-packages .cbi-section-node .cbi-value { - /* padding: 1rem 1rem; */ + +.node-system-packages .cbi-section-node .cbi-value { + /* padding: 1rem 1rem; */ } -.node-system-packages br{ + +.node-system-packages br { display: none; } + /* fix network firewall*/ -.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select { +.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { min-width: 4rem; } @@ -3227,7 +3454,7 @@ header > .container > .pull-right > * { /* padding-left: 2rem; */ } -.node-system-flashops form.inline + form.inline { +.node-system-flashops form.inline+form.inline { margin-left: 0; } @@ -3248,7 +3475,7 @@ header > .container > .pull-right > * { font-size: 0.8rem; } - header > .container > .pull-right > * { + header>.container>.pull-right>* { top: 0.35rem; } @@ -3269,14 +3496,14 @@ header > .container > .pull-right > * { font-size: small; } - .node-status-iptables > .main fieldset li > a { + .node-status-iptables>.main fieldset li>a { padding: 0.3rem 0.6rem; } } @media screen and (max-width: 1280px) { - - header > .container { + + header>.container { margin-top: 0.25rem; } @@ -3289,7 +3516,8 @@ header > .container > .pull-right > * { width: calc(100% - 13rem); } - .cbi-tabmenu > li > a, .tabs > li > a { + .cbi-tabmenu>li>a, + .tabs>li>a { padding: 0.2rem 0.5rem; } @@ -3303,13 +3531,13 @@ header > .container > .pull-right > * { width: 100% !important; } - .main > .main-left > .nav > li, - .main > .main-left > .nav > li a, - .main > .main-left > .nav > .slide > .menu { + .main>.main-left>.nav>li, + .main>.main-left>.nav>li a, + .main>.main-left>.nav>.slide>.menu { font-size: 0.9rem; } - .main > .main-left > .nav > .slide > .slide-menu > li > a { + .main>.main-left>.nav>.slide>.slide-menu>li>a { font-size: 0.7rem; } } @@ -3327,8 +3555,8 @@ header > .container > .pull-right > * { .showSide { padding: 0.1rem; - position:relative; - z-index:999; + position: relative; + z-index: 999; display: inline-block; } @@ -3340,7 +3568,8 @@ header > .container > .pull-right > * { .node-main-login .showSide { display: none !important; } - header > .fill > .container > .brand{ + + header>.fill>.container>.brand { display: inline-block; } @@ -3349,32 +3578,32 @@ header > .container > .pull-right > * { padding-right: 1rem; */ } - .node-network-diagnostics > .main .cbi-map fieldset > div * { + .node-network-diagnostics>.main .cbi-map fieldset>div * { width: 100% !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] { + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { margin: 3rem 0 0 0 !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] { + .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { margin: 0 !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div select, - .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] { + .node-network-diagnostics>.main .cbi-map fieldset>div select, + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { margin: 1rem 0 0 0; } - .node-network-diagnostics > .main .cbi-map fieldset > div { + .node-network-diagnostics>.main .cbi-map fieldset>div { width: 100% !important; } - #diag-rc-output > pre { + #diag-rc-output>pre { font-size: 1rem; } - .node-main-login > .main .cbi-value-title { + .node-main-login>.main .cbi-value-title { text-align: left; } } @@ -3392,97 +3621,106 @@ header > .container > .pull-right > * { .tabs { margin: 0.5rem 0rem } + .toggle { margin: 0; } - #maincontent > .container { + + #maincontent>.container { margin: 0 1rem 1.5rem 1rem; } - .main > .main-left > .nav > .slide > .menu { + .main>.main-left>.nav>.slide>.menu { font-size: 1rem; } - .main > .main-left > .nav > .slide > .slide-menu > li > a { + .main>.main-left>.nav>.slide>.slide-menu>li>a { font-size: 0.9rem; } - .main > .main-left > .nav > .slide > .menu:before{ - padding-top:5px; + + .main>.main-left>.nav>.slide>.menu:before { + padding-top: 5px; } - .main > .main-left > .nav > .slide > .menu:after { + + .main>.main-left>.nav>.slide>.menu:after { top: 0.9rem; } - - .cbi-value { - padding: 0.6em 0em; - } + + .cbi-value { + padding: 0.6em 0em; + } .cbi-value-title { width: 40%; - min-width: 0rem !important; - text-align: left; - padding-left: 1em; - } - - - .cbi-value-field, - .cbi-value-description { - width: 95%; - } - select, input { - width: 95%; - min-width: unset; - } - .cbi-value-field .cbi-input-select { - width: 95%; - min-width: unset; - } - - .cbi-value-field .cbi-input-textarea { - width: 95% !important; - min-width: unset; - } - - .cbi-value > .cbi-value-field { - /* display: inline-block; - padding-left: 1rem; */ - - display: table-cell; - width: 20em; + min-width: 0rem !important; + text-align: left; + padding-left: 1em; } - .node-main-login .cbi-value > .cbi-value-field { - width: 18rem; + + .cbi-value-field, + .cbi-value-description { + width: 95%; + } + + select, + input { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-select { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-textarea { + width: 95% !important; + min-width: unset; + } + + .cbi-value>.cbi-value-field { + /* display: inline-block; + padding-left: 1rem; */ + + display: table-cell; + width: 20em; + } + + .node-main-login .cbi-value>.cbi-value-field { + width: 18rem; padding-left: 0rem; } - .cbi-tabmenu > li, .tabs > li { + .cbi-tabmenu>li, + .tabs>li { padding: 0.6rem 0rem; } - .cbi-tabmenu > li > a, .tabs > li > a { + .cbi-tabmenu>li>a, + .tabs>li>a { padding: 0.2rem 0.3rem; font-size: 0.9rem; } - .cbi-page-actions > div > input { + .cbi-page-actions>div>input { display: none; } - .node-main-login > .main .container { + .node-main-login>.main .container { padding: 0.5rem 1rem 2rem 1rem; - margin: 0 auto !important; + margin: 0 auto !important; } - .node-main-login > .main form > div:nth-last-child(1) { + .node-main-login>.main form>div:nth-last-child(1) { margin-top: 0rem; } - .node-main-login > .main .cbi-value-title { + .node-main-login>.main .cbi-value-title { width: 100% !important; margin-top: 0rem; font-size: 1rem; @@ -3490,29 +3728,31 @@ header > .container > .pull-right > * { padding: 0 0.5rem; } - .node-main-login > .main fieldset { + .node-main-login>.main fieldset { margin: 0; padding: 0.5rem; } - .node-main-login .alert-message.warning{ + + .node-main-login .alert-message.warning { width: calc(100% - 2rem); padding: 1rem 1rem; - font-size:12px; + font-size: 12px; } h2 { font-size: 1.5rem; - + } - .node-main-login > .main .container h2 { + + .node-main-login>.main .container h2 { margin: -70px auto 15px auto; } - .tabs > li > a { + .tabs>li>a { font-size: 0.9rem; } @@ -3530,18 +3770,19 @@ header > .container > .pull-right > * { padding-bottom: 1rem; } - .node-system-packages > .main .cbi-value.cbi-value-last > div { + .node-system-packages>.main .cbi-value.cbi-value-last>div { width: 100% !important; } - .node-system-packages .cbi-section-node .cbi-value { + + .node-system-packages .cbi-section-node .cbi-value { padding: 0.3rem 1rem; } - .node-system-packages > .main .cbi-value .cbi-value-field input { + .node-system-packages>.main .cbi-value .cbi-value-field input { width: 100%; } - .node-status-iptables > .main div > .cbi-map > form { + .node-status-iptables>.main div>.cbi-map>form { position: static !important; margin: 0 0 2rem 0; padding: 2rem; @@ -3555,46 +3796,52 @@ header > .container > .pull-right > * { overflow-y: hidden; border-radius: 0.375rem; background-color: #FFF; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); -webkit-overflow-scrolling: touch; } - .node-status-iptables > .main div > .cbi-map > form input[type="submit"] { + .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { width: 100% !important; margin: 0; - } + } - .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] { + .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { margin-top: 1rem; } } @media screen and (min-width: 992px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 20rem; - } - .cbi-value-field .cbi-input-select { - min-width: 20rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 20rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 20rem; + } } @media screen and (min-width: 1280px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 22rem; - } - .cbi-value-field .cbi-input-select { - min-width: 22rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 22rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 22rem; + } } @media screen and (min-width: 1600px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 25rem; - } - .cbi-value-field .cbi-input-select { - min-width: 25rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 25rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 25rem; + } } \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light_green/css/style.css b/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light_green/css/style.css index fabe3c2208..f32a7ce7c2 100644 --- a/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light_green/css/style.css +++ b/package/lienol/luci-theme-argon-light-mod/htdocs/luci-static/argon_light_green/css/style.css @@ -65,8 +65,8 @@ --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; - --font-family-sans-serif: Open Sans,sans-serif; - --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; + --font-family-sans-serif: Open Sans, sans-serif; + --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } @@ -84,24 +84,26 @@ @font-face { font-family: 'ssr'; - src: url('../fonts/ssr.eot?5zoxsi'); - src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), + src: url('../fonts/ssr.eot?5zoxsi'); + src: url('../fonts/ssr.eot?5zoxsi#iefix') format('embedded-opentype'), url('../fonts/ssr.ttf?5zoxsi') format('truetype'), url('../fonts/ssr.woff?5zoxsi') format('woff'), url('../fonts/ssr.svg?5zoxsi#ssr') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'TypoGraphica'; - src: url('../fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('../fonts/TypoGraphica.woff') format('woff'), url('../fonts/TypoGraphica.ttf') format('truetype'), url('../fonts/TypoGraphica.svg#TypoGraphica') format('svg'); + src: url('../fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('../fonts/TypoGraphica.woff') format('woff'), url('../fonts/TypoGraphica.ttf') format('truetype'), url('../fonts/TypoGraphica.svg#TypoGraphica') format('svg'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'icomoon'; - src: url('../fonts/icomoon.eot?1peg26'); - src: url('../fonts/icomoon.eot?1peg26#iefix') format('embedded-opentype'), + src: url('../fonts/icomoon.eot?1peg26'); + src: url('../fonts/icomoon.eot?1peg26#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?1peg26') format('truetype'), url('../fonts/icomoon.woff?1peg26') format('woff'), url('../fonts/icomoon.svg?1peg26#icomoon') format('svg'); @@ -111,7 +113,8 @@ -[class^="icon-"], [class*=" icon-"] { +[class^="icon-"], +[class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'ssr' !important; speak: none; @@ -129,42 +132,55 @@ .icon-dashboard:before { content: "\e906"; } + .icon-logout:before { content: "\e907"; } + .icon-Network:before { content: "\e908"; } + .icon-services:before { content: "\e909"; } + .icon-system:before { content: "\e90a"; } + .icon-vpn:before { content: "\e90b"; } + .icon-storage:before { content: "\e90c"; } + .icon-statistics:before { content: "\e90d"; } + .icon-delete:before { content: "\e900"; } + .icon-edit:before { content: "\e901"; } + .icon-ok:before { content: "\e902"; } + .icon-loading:before { content: "\e903"; } + .icon-switch:before { content: "\e904"; } + .icon-error:before { content: "\e905"; } @@ -175,7 +191,18 @@ box-sizing: border-box; } -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { font-family: inherit; font-weight: 400; line-height: 1.1; @@ -192,11 +219,12 @@ body { background-color: rgb(255, 255, 255); } -html, body { +html, +body { margin: 0px; padding: 0px; height: 100%; - font-family: Open Sans,sans-serif Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; + font-family: Open Sans, sans-serif Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; } body div { @@ -207,10 +235,11 @@ body div { .cbi-button-up, .cbi-button-down, -.main > .loading{ +.main>.loading { - background: linear-gradient(87deg,#5e72e4 0,#5e72e4 100%)!important; + background: linear-gradient(87deg, #5e72e4 0, #5e72e4 100%) !important; } + .sk-folding-cube { margin: 20px auto; width: 40px; @@ -227,8 +256,9 @@ body div { position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); - transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { content: ''; position: absolute; @@ -243,60 +273,82 @@ body div { -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; - animation-delay: 0.6s; + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { - 0%, 10% { + + 0%, + 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); - opacity: 0; - } 25%, 75% { + opacity: 0; + } + + 25%, + 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); - opacity: 1; - } 90%, 100% { + opacity: 1; + } + + 90%, + 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); - opacity: 0; - } + opacity: 0; + } } @keyframes sk-foldCubeAngle { - 0%, 10% { + + 0%, + 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); - opacity: 0; - } 25%, 75% { + opacity: 0; + } + + 25%, + 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); - opacity: 1; - } 90%, 100% { + opacity: 1; + } + + 90%, + 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); - opacity: 0; + opacity: 0; } } @@ -305,7 +357,7 @@ body div { .cbi-button-down, .cbi-value-helpicon, .showSide, -.main > .loading > span { +.main>.loading>span { font-family: 'icomoon' !important; speak: none; font-style: normal !important; @@ -341,7 +393,7 @@ hr { -footer > a { +footer>a { color: #aaa; text-decoration: none; } @@ -354,7 +406,7 @@ footer > a { height: calc(100% - 4rem); } -.main > .loading { +.main>.loading { position: fixed; width: 100%; height: 100%; @@ -364,7 +416,7 @@ footer > a { top: 0; } -.main > .loading > span { +.main>.loading>span { display: block; text-align: center; margin-top: 2rem; @@ -372,11 +424,11 @@ footer > a { font-size: 1.2rem; } -.main > .loading > span > .loading-img:before { +.main>.loading>span>.loading-img:before { content: "\e603"; } -.main > .loading > span > .loading-img { +.main>.loading>span>.loading-img { animation: anim-rotate 2s infinite linear; margin-right: 0.2rem; display: inline-block; @@ -388,6 +440,7 @@ footer > a { -ms-transform: rotate(0); transform: rotate(0); } + 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); @@ -407,12 +460,12 @@ footer > a { float: left; } - -#maincontent > .container > div:nth-child(1).alert-message.warning > a { + +#maincontent>.container>div:nth-child(1).alert-message.warning>a { font: inherit; overflow: visible; text-transform: none; @@ -440,7 +493,7 @@ footer > a { text-decoration: inherit; } -#maincontent > .container > p{ +#maincontent>.container>p { color: #fff; } @@ -450,44 +503,44 @@ li { -.cbi-map-descr + fieldset { +.cbi-map-descr+fieldset { margin-top: 1rem; } -.cbi-section > legend { +.cbi-section>legend { display: none !important; } /* fix progress bar */ -#swaptotal > div, -#swapfree > div, -#swapcache > div, -#memfree > div, -#membuff > div, -#conns > div, -#memcache > div, -#memtotal > div, -#cpu_free > div, -.progress_bar > div { +#swaptotal>div, +#swapfree>div, +#swapcache>div, +#memfree>div, +#membuff>div, +#conns>div, +#memcache>div, +#memtotal>div, +#cpu_free>div, +.progress_bar>div { width: 100% !important; height: 1.6rem !important; - line-height:1.6rem; + line-height: 1.6rem; border-radius: .25rem; } -#swaptotal > div > div, -#swapfree > div > div, -#swapcache > div > div, -#memfree > div > div, -#membuff > div > div, -#conns > div > div, -#memcache > div > div, -#memtotal > div > div, -#cpu_free > div > div, -.progress_bar > div > div { +#swaptotal>div>div, +#swapfree>div>div, +#swapcache>div>div, +#memfree>div>div, +#membuff>div>div, +#conns>div>div, +#memcache>div>div, +#memtotal>div>div, +#cpu_free>div>div, +.progress_bar>div>div { height: 100% !important; border-radius: 5px; - background: linear-gradient(65deg,#46c34a 0,#64ca58b8 100%); + background: linear-gradient(65deg, #46c34a 0, #64ca58b8 100%); box-shadow: 0px 0px 8px #58ca7e57; } @@ -503,13 +556,13 @@ table table, border: none; } -td > table > tbody > tr > td, -.td > .table > .tbody > .tr > .td { +td>table>tbody>tr>td, +.td>.table>.tbody>.tr>.td { border: none; } -.cbi-value-field > table > tbody > tr > td, -.cbi-value-field > .table > .tbody > .tr > .td { +.cbi-value-field>table>tbody>tr>td, +.cbi-value-field>.table>.tbody>.tr>.td { border: none; } @@ -561,7 +614,7 @@ td > table > tbody > tr > td, background-color: transparent; } -.cbi-page-actions .cbi-button-apply + .cbi-button-save, +.cbi-page-actions .cbi-button-apply+.cbi-button-save, .cbi-button-add, .cbi-button-save, .cbi-button-positive { @@ -570,7 +623,7 @@ td > table > tbody > tr > td, background-color: transparent; } -.cbi-section-remove > .cbi-button, +.cbi-section-remove>.cbi-button, .cbi-button-remove, .cbi-button-reset, .cbi-button-negative { @@ -598,17 +651,17 @@ td > table > tbody > tr > td, vertical-align: middle; } -.td.cbi-section-actions > * { +.td.cbi-section-actions>* { display: flex; } -.td.cbi-section-actions > * > *, -.td.cbi-section-actions > * > form > * { +.td.cbi-section-actions>*>*, +.td.cbi-section-actions>*>form>* { flex: 1 1 4em; margin: 0 1px; } -.td.cbi-section-actions > * > form { +.td.cbi-section-actions>*>form { display: inline-flex; margin: 0; } @@ -621,15 +674,18 @@ td > table > tbody > tr > td, display: none } -.left, .left::before { +.left, +.left::before { text-align: left !important; } -.right, .right::before { +.right, +.right::before { text-align: right !important; } -.center, .center::before { +.center, +.center::before { text-align: center !important; } @@ -666,17 +722,19 @@ td > table > tbody > tr > td, select { width: 15rem; - appearance:none; - -webkit-appearance:none; - background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY1MzQ4MDM3OTIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4qIHsgdGV4dC1zaGFkb3c6IHRyYW5zcGFyZW50IDBweCAwcHggMHB4LCByZ2JhKDAsIDAsIDAsIDAuNSkgMHB4IDBweCAwcHggIWltcG9ydGFudDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjAuNDggMjQ1Ljc2aDk4My4wNEw1MTIgNzc4LjI0eiIgcC1pZD0iMjU4NCIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==') !important; - background-position: 96%; + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY1MzQ4MDM3OTIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4qIHsgdGV4dC1zaGFkb3c6IHRyYW5zcGFyZW50IDBweCAwcHggMHB4LCByZ2JhKDAsIDAsIDAsIDAuNSkgMHB4IDBweCAwcHggIWltcG9ydGFudDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjAuNDggMjQ1Ljc2aDk4My4wNEw1MTIgNzc4LjI0eiIgcC1pZD0iMjU4NCIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==') !important; + background-position: 96%; background-size: 8px; background-repeat: no-repeat; - + } -.th[data-type="button"], .td[data-type="button"], -.th[data-type="fvalue"], .td[data-type="fvalue"] { +.th[data-type="button"], +.td[data-type="button"], +.th[data-type="fvalue"], +.td[data-type="fvalue"] { flex: 1 1 2em; text-align: center; } @@ -748,9 +806,9 @@ select { float: left; } -.uci-change-legend-label > ins, -.uci-change-legend-label > del, -.uci-change-legend-label > var { +.uci-change-legend-label>ins, +.uci-change-legend-label>del, +.uci-change-legend-label>var { float: left; margin-right: 4px; width: 10px; @@ -771,48 +829,49 @@ select { } /* other fix */ -input[type="checkbox"]{ - appearance:none !important; - -webkit-appearance:none !important; - border:1px solid #dee2e6 ; - - width: 16px !important; +input[type="checkbox"] { + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid #dee2e6; + + width: 16px !important; height: 16px !important; - padding:0; - cursor:pointer; - transition:all 0.2s; - margin: 0.25rem 0; + padding: 0; + cursor: pointer; + transition: all 0.2s; + margin: 0.25rem 0; } -input[type="checkbox"]:checked{ - border:1px solid #5e72e4; - background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; +input[type="checkbox"]:checked { + border: 1px solid #5e72e4; + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; background-color: #5e72e4; background-size: 70%; background-repeat: no-repeat; background-position: center; } -ul li .cbi-input-checkbox{ - margin-top:0.5rem !important; + +ul li .cbi-input-checkbox { + margin-top: 0.5rem !important; } -.cbi-input-radio{ - appearance:none !important; - -webkit-appearance:none !important; - border:1px solid #dee2e6 ; - - width: 16px !important; +.cbi-input-radio { + appearance: none !important; + -webkit-appearance: none !important; + border: 1px solid #dee2e6; + + width: 16px !important; height: 16px !important; - padding:0; - border-radius:50%; - cursor:pointer; - transition:all 0.2s; - margin: 0.25rem 0; + padding: 0; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s; + margin: 0.25rem 0; } -.cbi-input-radio:checked{ - border:1px solid #5e72e4; - background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; +.cbi-input-radio:checked { + border: 1px solid #5e72e4; + background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; background-color: #5e72e4; background-size: 70%; background-repeat: no-repeat; @@ -828,8 +887,9 @@ ul li .cbi-input-checkbox{ cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0); - margin:1em 0; + margin: 1em 0; } + .toggle:before { content: ""; position: relative; @@ -842,6 +902,7 @@ ul li .cbi-input-checkbox{ border-radius: 8px; transition: background 0.2s ease; } + .toggle span { position: absolute; top: 0; @@ -854,6 +915,7 @@ ul li .cbi-input-checkbox{ box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); transition: all 0.2s ease; } + .toggle span:before { content: ""; position: absolute; @@ -868,16 +930,18 @@ ul li .cbi-input-checkbox{ pointer-events: none; } -.cbi-input-checkbox:checked + .toggle:before { +.cbi-input-checkbox:checked+.toggle:before { background: #947ADA; } -.cbi-input-checkbox:checked + .toggle span { + +.cbi-input-checkbox:checked+.toggle span { background: #4F2EDC; transform: translateX(20px); transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2); } -.cbi-input-checkbox:checked + .toggle span:before { + +.cbi-input-checkbox:checked+.toggle span:before { transform: scale(1); opacity: 0; transition: all 0.4s ease; @@ -888,25 +952,25 @@ ul li .cbi-input-checkbox{ margin-top: 0; } -.cbi-value-field > input + .cbi-value-description { +.cbi-value-field>input+.cbi-value-description { padding: 0; } -.cbi-value-field > ul > li { +.cbi-value-field>ul>li { display: flex; } -.cbi-value-field > ul > li > label { +.cbi-value-field>ul>li>label { margin-top: 0.5rem; } -.cbi-value-field > ul > li .ifacebadge { +.cbi-value-field>ul>li .ifacebadge { background-color: #eee; margin-left: 0.4rem; margin-top: -0.5rem; } -.cbi-section-table-row > .cbi-value-field .cbi-dropdown { +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { min-width: 7rem; } @@ -916,7 +980,7 @@ ul li .cbi-input-checkbox{ align-items: center; } -.cbi-section-create > * { +.cbi-section-create>* { margin: 0.5rem; } @@ -924,7 +988,9 @@ ul li .cbi-input-checkbox{ padding: 0.5rem; } -div.cbi-value var, td.cbi-value-field var, .td.cbi-value-field var { +div.cbi-value var, +td.cbi-value-field var, +.td.cbi-value-field var { font-style: italic; color: #0069D6; } @@ -980,7 +1046,7 @@ small { } .zonebadge-empty { - background: repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px); + 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; } @@ -989,11 +1055,11 @@ small { min-width: 10rem; } -.zone-forwards > * { +.zone-forwards>* { flex: 1 1 45%; } -.zone-forwards > span { +.zone-forwards>span { flex-basis: 10%; text-align: center; padding: 0 .25rem; @@ -1005,7 +1071,7 @@ small { flex-direction: column; } -#diag-rc-output > pre { +#diag-rc-output>pre { background-color: #fff; display: block; padding: 8.5px; @@ -1025,11 +1091,12 @@ input[name="nslookup"] { } -#xhr_poll_status{ +#xhr_poll_status { display: inline-block; } -#xhr_poll_status > .label.success { + +#xhr_poll_status>.label.success { background-color: #fff !important; color: #32325d !important; } @@ -1070,63 +1137,64 @@ input[name="nslookup"] { /* fix status overview */ -.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) { +.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2) { white-space: normal; } /* fix status processes */ -.node-status-processes > .main .table .tr .td:nth-child(3) { +.node-status-processes>.main .table .tr .td:nth-child(3) { white-space: normal; } -.node-status-iptables > .main div > .cbi-map > form { +.node-status-iptables>.main div>.cbi-map>form { margin: 2rem 2rem 0 0; } /* fix system reboot */ -.node-system-reboot > .main > .main-right p, -.node-system-reboot > .main > .main-right h3 { +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { padding-left: 2rem; } /* fix Services Network Shares*/ -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; width: auto; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { display: list-item; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { padding-top: 1rem; } /* fix System Software*/ -.node-system-packages > .main table tr td:nth-child(1) { +.node-system-packages>.main table tr td:nth-child(1) { width: auto !important; } -.node-system-packages > .main table tr td:nth-last-child(1) { +.node-system-packages>.main table tr td:nth-last-child(1) { white-space: normal; font-size: small; color: #404040; } -.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a { +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { padding: 0.5rem 0.8rem; } -.node-system-packages > .main .cbi-value > pre { +.node-system-packages>.main .cbi-value>pre { background-color: #eee; padding: 0.5rem; overflow: auto; } -.cbi-tabmenu + .cbi-section { +.cbi-tabmenu+.cbi-section { margin-top: 0; } @@ -1137,7 +1205,7 @@ input[name="nslookup"] { } -.node-system-flashops form.inline + form.inline { +.node-system-flashops form.inline+form.inline { margin-left: 0; } @@ -1185,21 +1253,40 @@ body.lang_pl.node-main-login .cbi-value-title { -.table { display: table; position: relative; color: #525f7f; border-collapse: collapse; } -.tr { display: table-row; border-bottom: 1px solid rgba(0,0,0,.05); } -.thead { display: table-header-group; } -.tbody { display: table-row-group; } -.tfoot { display: table-footer-group; } -.td, .th { +.table { + display: table; + position: relative; + color: #525f7f; + border-collapse: collapse; +} + +.tr { + display: table-row; + border-bottom: 1px solid rgba(0, 0, 0, .05); +} + +.thead { + display: table-header-group; +} + +.tbody { + display: table-row-group; +} + +.tfoot { + display: table-footer-group; +} + +.td, +.th { vertical-align: middle; text-align: center; display: table-cell; padding: 1rem; white-space: nowrap; } -.cbi-section-table-row .td{ -} +.cbi-section-table-row .td {} .th { font-weight: bold; @@ -1209,7 +1296,7 @@ body.lang_pl.node-main-login .cbi-value-title { height: 4em; } -.tr.placeholder > .td { +.tr.placeholder>.td { position: absolute; left: 0; right: 0; @@ -1218,25 +1305,76 @@ body.lang_pl.node-main-login .cbi-value-title { background: inherit; } -.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; padding-left: 1.5rem; padding-right: 1.5rem } -.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } +.table[width="33%"], +.th[width="33%"], +.td[width="33%"] { + width: 33%; + padding-left: 1.5rem; + padding-right: 1.5rem +} -.table-titles .th{ +.table[width="100%"], +.th[width="100%"], +.td[width="100%"] { + width: 100%; +} + +.table-titles .th { padding: 0.75rem 1rem; color: #8898aa; background-color: #f6f9fc; } -.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; } -.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; } -.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; } -.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; } -.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; } -.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; } -.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; } -.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; } -.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; } -.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; white-space: inherit;} +.col-1 { + flex: 1 1 30px !important; + -webkit-flex: 1 1 30px !important; +} + +.col-2 { + flex: 2 2 60px !important; + -webkit-flex: 2 2 60px !important; +} + +.col-3 { + flex: 3 3 90px !important; + -webkit-flex: 3 3 90px !important; +} + +.col-4 { + flex: 4 4 120px !important; + -webkit-flex: 4 4 120px !important; +} + +.col-5 { + flex: 5 5 150px !important; + -webkit-flex: 5 5 150px !important; +} + +.col-6 { + flex: 6 6 180px !important; + -webkit-flex: 6 6 180px !important; +} + +.col-7 { + flex: 7 7 210px !important; + -webkit-flex: 7 7 210px !important; +} + +.col-8 { + flex: 8 8 240px !important; + -webkit-flex: 8 8 240px !important; +} + +.col-9 { + flex: 9 9 270px !important; + -webkit-flex: 9 9 270px !important; +} + +.col-10 { + flex: 10 10 300px !important; + -webkit-flex: 10 10 300px !important; + white-space: inherit; +} @@ -1268,15 +1406,18 @@ input { border-radius: .25rem; background-color: #fff; background-clip: padding-box; - box-shadow:0 3px 2px rgba(233,236,239,.05); + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); outline: none; transition: box-shadow .15s ease; - margin:0; + margin: 0; } select:not([multiple="multiple"]):focus, input:focus { - border-color:#5e72e4;outline:0;background-color:#fff;box-shadow:0 3px 9px rgba(50,50,9,0),3px 4px 8px rgba(94,114,228,.1); + border-color: #5e72e4; + outline: 0; + background-color: #fff; + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1); } select[multiple="multiple"] { @@ -1301,11 +1442,12 @@ hr { } .bg-primary { - background: linear-gradient(65deg,#46c34a 0,#64ca58b8 100%); + background: linear-gradient(65deg, #46c34a 0, #64ca58b8 100%); box-shadow: 0 3px 16px #58ca7e57; } -header, .main { +header, +.main { width: 100%; } @@ -1319,10 +1461,10 @@ footer { color: #aaa; font-size: 0.8rem; text-shadow: 0px 0px 2px #BBB; - padding: 2rem; + padding: 2rem; } -footer > a { +footer>a { color: #aaa; text-decoration: none; } @@ -1335,7 +1477,7 @@ footer > a { height: calc(100% - 4rem); } -.main > .loading { +.main>.loading { position: fixed; width: 100%; height: 100%; @@ -1347,7 +1489,7 @@ footer > a { top: 0; } -.main > .loading > span { +.main>.loading>span { display: block; text-align: center; margin-top: 2rem; @@ -1355,18 +1497,18 @@ footer > a { font-size: 2rem; } -.main > .loading > span > .loading-img:before { +.main>.loading>span>.loading-img:before { content: "\e603"; } -.main > .loading > span > .loading-img { +.main>.loading>span>.loading-img { animation: anim-rotate 2s infinite linear; margin-right: 0.4rem; display: inline-block; } -.main > .main-right > .login-bg { - display:none; +.main>.main-right>.login-bg { + display: none; } @keyframes anim-rotate { @@ -1375,6 +1517,7 @@ footer > a { -ms-transform: rotate(0); transform: rotate(0); } + 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); @@ -1386,8 +1529,8 @@ footer > a { position: fixed; z-index: 200; width: 20rem; - margin-left:-10rem; - margin-top:-5rem; + margin-left: -10rem; + margin-top: -5rem; height: 10rem; left: 50%; top: 50%; @@ -1395,33 +1538,45 @@ footer > a { border-color: #5e72e4; text-align: center; } -[id^="cbi-apply-"] > .panel-title { - border-bottom:none; + +[id^="cbi-apply-"]>.panel-title { + border-bottom: none; } -[id^="cbi-apply-"] > [id^="cbi-apply-"]{ + +[id^="cbi-apply-"]>[id^="cbi-apply-"] { position: initial; - width:auto; - height:auto; + width: auto; + height: auto; font-size: 1rem; - margin-left:0rem; - margin-top:.8rem; - display:block; + margin-left: 0rem; + margin-top: .8rem; + display: block; } + .main-left { float: left; width: 15%; width: calc(0% + 15rem); height: 100%; - background-color: #fff!important; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + background-color: #fff !important; + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); overflow-x: auto; position: fixed; z-index: 100; } -.main-left::-webkit-scrollbar {width: 5px;height: 1px;} -.main-left::-webkit-scrollbar-thumb {background-color: #f6f9fc} -.main-left::-webkit-scrollbar-track {background-color:#fff ;} +.main-left::-webkit-scrollbar { + width: 5px; + height: 1px; +} + +.main-left::-webkit-scrollbar-thumb { + background-color: #f6f9fc +} + +.main-left::-webkit-scrollbar-track { + background-color: #fff; +} .main-right { @@ -1432,7 +1587,7 @@ footer > a { background-color: #ffffff; } -.main-right > #maincontent { +.main-right>#maincontent { position: relative; z-index: 50; @@ -1442,19 +1597,19 @@ footer > a { -header > .container { +header>.container { margin-top: 0.5rem; padding: 0.5rem 1rem 0 1rem; } -.cbi-section > h3:first-child, +.cbi-section>h3:first-child, .panel-title { font-size: 1.2rem; width: 100%; display: block; margin-bottom: 0; padding: 1.25rem 1.5rem; - border-bottom: 1px solid rgba(0,0,0,.05); + border-bottom: 1px solid rgba(0, 0, 0, .05); line-height: 1.5; margin-bottom: 0rem; letter-spacing: 0.1rem; @@ -1467,12 +1622,23 @@ table { border-collapse: collapse; } -table, .table { +table, +.table { width: 100%; } -table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th, -.table > .tbody > .tr > .td, .table > .tbody > .tr > .th, .table > .tfoot > .tr > .td, .table > .tfoot > .tr > .th, .table > .thead > .tr > .td, .table > .thead > .tr > .th { +table>tbody>tr>td, +table>tbody>tr>th, +table>tfoot>tr>td, +table>tfoot>tr>th, +table>thead>tr>td, +table>thead>tr>th, +.table>.tbody>.tr>.td, +.table>.tbody>.tr>.th, +.table>.tfoot>.tr>.td, +.table>.tfoot>.tr>.th, +.table>.thead>.tr>.td, +.table>.thead>.tr>.th { padding: .5rem; border-top: 1px solid #ddd; white-space: nowrap; @@ -1494,25 +1660,25 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table margin-bottom: 0; } -.cbi-section-table-row > .cbi-value-field .cbi-input-select, -.cbi-section-table-row > .cbi-value-field .cbi-input-text, -.cbi-section-table-row > .cbi-value-field .cbi-input-password, -.cbi-section-table-row > .cbi-value-field .cbi-dropdown { +.cbi-section-table-row>.cbi-value-field .cbi-input-select, +.cbi-section-table-row>.cbi-value-field .cbi-input-text, +.cbi-section-table-row>.cbi-value-field .cbi-input-password, +.cbi-section-table-row>.cbi-value-field .cbi-dropdown { width: 100%; } -.cbi-section-table-row > .cbi-value-field [data-dynlist] > input, -.cbi-section-table-row > .cbi-value-field input.cbi-input-password { +.cbi-section-table-row>.cbi-value-field [data-dynlist]>input, +.cbi-section-table-row>.cbi-value-field input.cbi-input-password { width: calc(100% - 1.5rem); } -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tbody > .tr:nth-of-type(2n) { +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { background-color: #f9f9f9; } -div > table > tbody > tr:nth-of-type(2n), -div > .table > .tbody > .tr:nth-of-type(2n) { +div>table>tbody>tr:nth-of-type(2n), +div>.table>.tbody>.tr:nth-of-type(2n) { background-color: #f9f9f9; } @@ -1522,8 +1688,8 @@ div > .table > .tbody > .tr:nth-of-type(2n) { } .warning { - background-color: #8965e0 !important; - color: #fff; + background-color: #ffd600 !important; + color: #f00; } .notice { @@ -1537,13 +1703,13 @@ div > .table > .tbody > .tr:nth-of-type(2n) { } .alert-message { - margin: 5rem 0 0 0 !important; - color: #5e72e4 !important; + /* margin: 5rem 0 0 0 !important; + color: #5e72e4 !important; */ } .errorbox, .alert-message { - margin: 2rem 0 0 0; + /* margin: 2rem 0 0 0; */ padding: 2rem; border: 0; font-weight: normal; @@ -1567,10 +1733,11 @@ div > .table > .tbody > .tr:nth-of-type(2n) { color: red; } -.main > .main-left > .sidenav-header{ +.main>.main-left>.sidenav-header { padding: 1.5rem; } -.main > .main-left > .sidenav-header > .brand { + +.main>.main-left>.sidenav-header>.brand { font-size: 1.8rem; color: #4fc352; font-family: "TypoGraphica"; @@ -1580,40 +1747,42 @@ div > .table > .tbody > .tr:nth-of-type(2n) { vertical-align: text-bottom; white-space: nowrap; } -.main > .main-left > .nav { + +.main>.main-left>.nav { margin-top: 0.5rem; } -.main > .main-left > .nav > li a { +.main>.main-left>.nav>li a { color: #8898aa; display: block; } -.main > .main-left > .nav > li:nth-last-child(1) { +.main>.main-left>.nav>li:nth-last-child(1) { margin-top: 2rem; font-size: 1.2rem; } -.main > .main-left > .nav > li:nth-last-child(1) > .menu:after{ + +.main>.main-left>.nav>li:nth-last-child(1)>.menu:after { content: ""; } -.main > .main-left > .nav > li { +.main>.main-left>.nav>li { padding: 0.5rem 1rem; cursor: pointer; } -.main > .main-left > .nav > .slide { +.main>.main-left>.nav>.slide { padding: 0; } -.main > .main-left > .nav > .slide > ul { +.main>.main-left>.nav>.slide>ul { display: none; } -.main > .main-left > .nav > .slide > .menu { +.main>.main-left>.nav>.slide>.menu { display: block; margin: 0.1rem .5rem 0.1rem .5rem; - padding: .675rem 0 .675rem 3rem; + padding: .675rem 0 .675rem 3rem; border-radius: .375rem; text-decoration: none; cursor: default; @@ -1622,22 +1791,20 @@ div > .table > .tbody > .tr:nth-of-type(2n) { position: relative; } -.main > .main-left > .nav > li:hover, -.main > .main-left > .nav > .slide > .menu:hover { +.main>.main-left>.nav>li:hover, +.main>.main-left>.nav>.slide>.menu:hover { cursor: pointer; color: #000; } -.main > .main-left > .nav > .slide:hover { +.main>.main-left>.nav>.slide:hover { background: none; } -.main > .main-left > .nav > .slide > .menu:hover { +.main>.main-left>.nav>.slide>.menu:hover {} -} - -.main > .main-left > .nav > .slide > .menu:before{ +.main>.main-left>.nav>.slide>.menu:before { font-family: 'ssr' !important; speak: none; font-style: normal; @@ -1650,46 +1817,56 @@ div > .table > .tbody > .tr:nth-of-type(2n) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; - left:1.3rem; - padding-top:3px; + left: 1.3rem; + padding-top: 3px; } -.main > .main-left > .nav > .slide > .menu[data-title= Status ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Status]:before { content: "\e906"; - color: #4fc352!important; + color: #4fc352 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= System ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=System]:before { content: "\e90a"; - color: #fb6340!important; + color: #fb6340 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Services ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Services]:before { content: "\e909"; - color: #11cdef!important; + color: #11cdef !important; } -.main > .main-left > .nav > .slide > .menu[data-title= NAS ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=NAS]:before { content: "\e90c"; - color: #f3a4b5!important; + color: #f3a4b5 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Control ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Control]:before { content: "\e90e"; - color: #f3a4b5!important; + color: #f3a4b5 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= VPN ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=VPN]:before { content: "\e90b"; - color: #172b4d!important; + color: #172b4d !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Network ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Network]:before { content: "\e908"; - color: #8965e0!important; + color: #8965e0 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Bandwidth_Monitor ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Bandwidth_Monitor]:before { content: "\e90d"; - color: #5e72e4!important; + color: #5e72e4 !important; } -.main > .main-left > .nav > .slide > .menu[data-title= Logout ]:before{ + +.main>.main-left>.nav>.slide>.menu[data-title=Logout]:before { content: "\e907"; - color: #32325d!important; + color: #32325d !important; } -.main > .main-left > .nav > .slide > .menu:after { + +.main>.main-left>.nav>.slide>.menu:after { position: absolute; right: 0.5rem; top: 0.8rem; @@ -1711,16 +1888,18 @@ div > .table > .tbody > .tr:nth-of-type(2n) { -webkit-font-smoothing: antialiased; transition: all 0.3s; } -header > .fill{ + +header>.fill { padding: 0.8rem 0; } -header > .fill > .container{ + +header>.fill>.container { height: 2rem; padding: 0 1rem; } -header > .fill > .container > .brand{ +header>.fill>.container>.brand { font-size: 1.5rem; color: #fff; font-family: "TypoGraphica"; @@ -1731,24 +1910,21 @@ header > .fill > .container > .brand{ display: none; } -.main > .main-left > .nav > .slide > .menu.active{ +.main>.main-left>.nav>.slide>.menu.active { color: #000; background: #f6f9fc; } -.main > .main-left > .nav > .slide > .menu.active:after{ + +.main>.main-left>.nav>.slide>.menu.active:after { color: #4fc352; transform: rotate(90deg); } -.main > .main-left > .nav > .slide > .slide-menu > li { +.main>.main-left>.nav>.slide>.slide-menu>li {} -} +.main>.main-left>.nav>.slide>.slide-menu>.active {} -.main > .main-left > .nav > .slide > .slide-menu > .active { - -} - -.main > .main-left > .nav > .slide > .slide-menu > li > a { +.main>.main-left>.nav>.slide>.slide-menu>li>a { margin: 0.1rem .5rem 0.1rem 0.5rem; padding: 0.5rem 1.5rem 0.5rem 3rem; text-decoration: none; @@ -1757,23 +1933,19 @@ header > .fill > .container > .brand{ transition: all 0.2s; } -.main > .main-left > .nav > .slide > .slide-menu > .active > a { +.main>.main-left>.nav>.slide>.slide-menu>.active>a { color: #000; } -.main > .main-left > .nav > .slide > .slide-menu > li > a:hover { +.main>.main-left>.nav>.slide>.slide-menu>li>a:hover {} -} - -.main > .main-left > .nav > .slide > .slide-menu > .active > a:hover { - -} +.main>.main-left>.nav>.slide>.slide-menu>.active>a:hover {} li { list-style-type: none; } -#maincontent > .container { +#maincontent>.container { margin: 0 2rem 1rem 2rem; } @@ -1786,21 +1958,20 @@ h1 { h2 { margin: 0 0 0 0; font-size: 1.5rem; - padding: 1.5rem 0!important; + padding: 1.5rem 0 !important; color: #fff; } -#cbi-dropbear h2 , -#cbi-dropbear .cbi-map-descr , +#cbi-dropbear h2, +#cbi-dropbear .cbi-map-descr, #cbi-dropbear .cbi-map-descr abbr, #cbi-rc h2, #cbi-rc .cbi-map-descr, #cbi-distfeedconf h2, #cbi-distfeedconf .cbi-map-descr, #cbi-customfeedconf h2, -#cbi-customfeedconf .cbi-map-descr -{ - color: #32325d!important; +#cbi-customfeedconf .cbi-map-descr { + color: #32325d !important; } h3 { @@ -1817,11 +1988,10 @@ h3 { font-weight: bold; } -h4 { +h4 {} -} - -div.cbi-section, fieldset { +div.cbi-section, +fieldset { margin: 10px 0; padding: 1rem; font-weight: normal; @@ -1831,26 +2001,28 @@ div.cbi-section, fieldset { min-width: inherit; overflow-x: auto; overflow-y: hidden; - border: 1px solid rgba(0,0,0,.05); + border: 1px solid rgba(0, 0, 0, .05); border-radius: .375rem; background-color: #fff; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); -webkit-overflow-scrolling: touch; } -fieldset > legend { +fieldset>legend { display: none !important; } -div.cbi-section > div.cbi-section, fieldset > fieldset { +div.cbi-section>div.cbi-section, +fieldset>fieldset { margin: 0; padding: 0; border: none; box-shadow: none; } -fieldset.cbi-section p{ + +fieldset.cbi-section p { padding: 1em; } @@ -1859,13 +2031,13 @@ fieldset.cbi-section p{ display: block; margin-bottom: 0; padding: 0.5rem; - border-bottom: 1px solid rgba(0,0,0,.05); + border-bottom: 1px solid rgba(0, 0, 0, .05); background-color: #fff; line-height: 1.5; margin-bottom: 0rem; - letter-spacing:0.1rem; + letter-spacing: 0.1rem; color: #32325d; - font-weight:bold; + font-weight: bold; font-size: 0.8rem; } @@ -1879,7 +2051,9 @@ table { position: relative; } -table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { +table>tbody>tr>td, +table>tfoot>tr>td, +table>thead>tr>td { font-size: .8125rem; white-space: nowrap; color: #525f7f; @@ -1889,7 +2063,9 @@ table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { line-height: 1.3; } -table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { +table>tbody>tr>th, +table>tfoot>tr>th, +table>thead>tr>th { padding-right: 1.5rem; padding-left: 1.5rem; @@ -1902,6 +2078,7 @@ table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { text-transform: uppercase; border-bottom: 1px solid #e9ecef; } + .cbi-section-table-cell { text-align: center; } @@ -1910,7 +2087,7 @@ table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { text-align: center; } -fieldset > table > tbody > tr:nth-of-type(2n) { +fieldset>table>tbody>tr:nth-of-type(2n) { /* background-color: #f9f9f9; */ } @@ -1931,11 +2108,11 @@ table table { border: none; } -td > table > tbody > tr > td { +td>table>tbody>tr>td { border: none; } -.cbi-value-field > table > tbody > tr > td { +.cbi-value-field>table>tbody>tr>td { border: none; } @@ -1946,7 +2123,7 @@ td > table > tbody > tr > td { .cbi-button { -webkit-appearance: none; text-transform: uppercase; -/* height: 2.5rem; + /* height: 2.5rem; line-height: 2.5rem; */ color: rgba(0, 0, 0, 0.87); @@ -1994,8 +2171,8 @@ td > table > tbody > tr > td { box-shadow: none; } -form.inline + form.inline, -.cbi-button + .cbi-button { +form.inline+form.inline, +.cbi-button+.cbi-button { margin-left: 0.6rem; } @@ -2020,8 +2197,7 @@ form.inline + form.inline, border-color: #2e6da4 !important; } -.cbi-value-field -.cbi-input-apply, +.cbi-value-field .cbi-input-apply, .cbi-button-apply, .cbi-button-edit { @@ -2031,16 +2207,19 @@ form.inline + form.inline, } -.cbi-section-remove > .cbi-button, +.cbi-section-remove>.cbi-button, .cbi-button-remove { color: #fff !important; background-color: #fb6340 !important; border-color: #fb6340 !important; } -.cbi-value-field .cbi-button-add ,.cbi-value-field .cbi-button-remove ,.cbi-value-field .cbi-button-neutral{ + +.cbi-value-field .cbi-button-add, +.cbi-value-field .cbi-button-remove, +.cbi-value-field .cbi-button-neutral { height: 2.5rem; line-height: 2.5rem; - min-width: 2.5rem!important; + min-width: 2.5rem !important; } @@ -2053,28 +2232,31 @@ form.inline + form.inline, border-radius: 0.375rem; } -.cbi-tabmenu > li, -.tabs > li { - font-size:1rem; +.cbi-tabmenu>li, +.tabs>li { + font-size: 1rem; /* border-top-left-radius:0.25rem; */ /* border-top-right-radius:0.25rem; */ display: inline-block; padding: 0.6rem; - border-bottom: 0.18751rem solid rgba(0,0,0,0); + border-bottom: 0.18751rem solid rgba(0, 0, 0, 0); } -.cbi-tabmenu > li{ + +.cbi-tabmenu>li { background: #adb5bd; } -.cbi-tabmenu > li > a, -.tabs > li > a { +.cbi-tabmenu>li>a, +.tabs>li>a { text-decoration: none; - color:#404040; + color: #404040; padding: 0.5rem 0.8rem; } -.cbi-tabmenu > li > a{ + +.cbi-tabmenu>li>a { color: #fff; } + .cbi-dropdown { display: inline-flex; cursor: pointer; @@ -2087,7 +2269,7 @@ form.inline + form.inline, outline: 2px solid #4b6e9b; } -.cbi-dropdown > ul { +.cbi-dropdown>ul { margin: 0 !important; padding: 0; list-style: none; @@ -2097,18 +2279,18 @@ form.inline + form.inline, width: 100%; } -.cbi-dropdown > ul.preview { +.cbi-dropdown>ul.preview { display: none; } -.cbi-dropdown > .open { +.cbi-dropdown>.open { border: 0px outset #eee; flex-basis: 15px; background: #fff; } -.cbi-dropdown > .open, -.cbi-dropdown > .more { +.cbi-dropdown>.open, +.cbi-dropdown>.more { flex-grow: 0; flex-shrink: 0; display: flex; @@ -2119,15 +2301,15 @@ form.inline + form.inline, padding: 0 .25em; } -.cbi-dropdown > .more, -.cbi-dropdown > ul > li[placeholder] { +.cbi-dropdown>.more, +.cbi-dropdown>ul>li[placeholder] { color: #777; font-weight: bold; text-shadow: 1px 1px 0px #fff; display: none; } -.cbi-dropdown > ul > li { +.cbi-dropdown>ul>li { display: none; padding: .25em; white-space: nowrap; @@ -2140,44 +2322,49 @@ form.inline + form.inline, min-height: 20px; } -.cbi-dropdown > ul > li .hide-open { display: initial; } -.cbi-dropdown > ul > li .hide-close { display: none; } +.cbi-dropdown>ul>li .hide-open { + display: initial; +} -.cbi-dropdown > ul > li[display]:not([display="0"]) { +.cbi-dropdown>ul>li .hide-close { + display: none; +} + +.cbi-dropdown>ul>li[display]:not([display="0"]) { border-left: 1px solid #ccc; } -.cbi-dropdown[empty] > ul { +.cbi-dropdown[empty]>ul { max-width: 1px; } -.cbi-dropdown > ul > li > form { +.cbi-dropdown>ul>li>form { display: none; margin: 0; padding: 0; pointer-events: none; } -.cbi-dropdown > ul > li img { +.cbi-dropdown>ul>li img { vertical-align: middle; margin-right: .25em; } -.cbi-dropdown > ul > li > form > input[type="checkbox"] { +.cbi-dropdown>ul>li>form>input[type="checkbox"] { margin: 0; height: auto; } -.cbi-dropdown > ul > li input[type="text"] { +.cbi-dropdown>ul>li input[type="text"] { height: 20px; } .cbi-dropdown[open] { position: relative; - border-color:#5e72e4; + border-color: #5e72e4; } -.cbi-dropdown[open] > ul.dropdown { +.cbi-dropdown[open]>ul.dropdown { display: block; background: #fff; border-color: #5e72e4; @@ -2186,43 +2373,48 @@ form.inline + form.inline, max-width: none; min-width: 100%; width: auto; - box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.05); + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .05); } -.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 { +.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 { flex-grow: 1; display: flex; align-items: center; } -.cbi-dropdown[empty] > ul > li, -.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], -.cbi-dropdown[multiple][open] > ul.dropdown > li > form { +.cbi-dropdown[empty]>ul>li, +.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder], +.cbi-dropdown[multiple][open]>ul.dropdown>li>form { display: block; } -.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } -.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } +.cbi-dropdown[open]>ul.dropdown>li .hide-open { + display: none; +} -.cbi-dropdown[open] > ul.dropdown > li { +.cbi-dropdown[open]>ul.dropdown>li .hide-close { + display: initial; +} + +.cbi-dropdown[open]>ul.dropdown>li { border-bottom: 1px solid #ccc; } -.cbi-dropdown[open] > ul.dropdown > li[selected] { +.cbi-dropdown[open]>ul.dropdown>li[selected] { background: #b0d0f0; } -.cbi-dropdown[open] > ul.dropdown > li.focus { +.cbi-dropdown[open]>ul.dropdown>li.focus { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); } -.cbi-dropdown[open] > ul.dropdown > li:last-child { +.cbi-dropdown[open]>ul.dropdown>li:last-child { margin-bottom: 0; border-bottom: none; } @@ -2251,13 +2443,15 @@ form.inline + form.inline, border-radius: .25rem; background-color: #fff; background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233,236,239,.05); + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); margin: 0.25rem; } + .cbi-value-field .cbi-dropdown { min-width: 20rem; } -.cbi-value-field .cbi-dropdown .zonebadge > .ifacebadge { + +.cbi-value-field .cbi-dropdown .zonebadge>.ifacebadge { padding: 0rem 1rem; margin: 0rem 0.3rem; border: 1px solid #6C6C6C; @@ -2269,7 +2463,7 @@ select[multiple="multiple"] { height: auto; } -.cbi-dropdown > ul { +.cbi-dropdown>ul { margin: 0 !important; padding: 0; list-style: none; @@ -2281,22 +2475,22 @@ select[multiple="multiple"] { -.cbi-section > legend { +.cbi-section>legend { display: none !important; } -.tabs > li[class~="active"], -.tabs > li:hover { +.tabs>li[class~="active"], +.tabs>li:hover { cursor: pointer; background: #eee; margin-bottom: 0; } -.tabs > li[class~="active"] > a { +.tabs>li[class~="active"]>a { color: #5e72e4; } -.tabs > li:hover { +.tabs>li:hover { border-bottom: 0.2rem solid #32325d; } @@ -2305,25 +2499,27 @@ select[multiple="multiple"] { /* padding: 0.5rem 1rem 0 1rem; */ } -.cbi-tabmenu > li:hover { +.cbi-tabmenu>li:hover { background-color: #F1F1F1; } -.cbi-tabmenu > li:hover > a{ + +.cbi-tabmenu>li:hover>a { color: #525f7f; } -.cbi-tabmenu > li[class~="cbi-tab"] { +.cbi-tabmenu>li[class~="cbi-tab"] { background-color: #fb6340; } -.cbi-tabmenu > li[class~="cbi-tab"] > a{ + +.cbi-tabmenu>li[class~="cbi-tab"]>a { color: #fff; } .cbi-section-remove:nth-of-type(2n), -.cbi-section-node:nth-of-type(2n){ +.cbi-section-node:nth-of-type(2n) { background-color: #f9f9f9; } @@ -2332,29 +2528,33 @@ select[multiple="multiple"] { margin-top: 0; } -.cbi-section-node{ + +.cbi-section-node { background: #fff; border: 0; border-radius: .375rem; margin-bottom: 0px; - box-shadow: 0 0 0rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 0rem 0 rgba(136, 152, 170, .15); overflow-x: auto; overflow-y: hidden; - padding:0rem 0; + padding: 0rem 0; } -#cbi-network-lan.cbi-section-node{ - overflow-x:visible; + +#cbi-network-lan.cbi-section-node { + overflow-x: visible; overflow-y: visible; } -#cbi-network .cbi-section , #cbi-network .cbi-section .cbi-section-node{ -} -.cbi-section-node .cbi-value{ -/* padding: 0.3rem 0rem 0.3rem 1rem; + +#cbi-network .cbi-section, +#cbi-network .cbi-section .cbi-section-node {} + +.cbi-section-node .cbi-value { + /* padding: 0.3rem 0rem 0.3rem 1rem; */ } -.cbi-tabcontainer > .cbi-value:nth-of-type(2n) { +.cbi-tabcontainer>.cbi-value:nth-of-type(2n) { background-color: #f9f9f9; } @@ -2364,7 +2564,7 @@ select[multiple="multiple"] { padding-top: 0.5em; } -.cbi-value-helpicon > img { +.cbi-value-helpicon>img { display: none; } @@ -2375,8 +2575,9 @@ select[multiple="multiple"] { .cbi-value-description { font-size: small; opacity: 0.8; - display: unset; + display: unset; } + .cbi-value-title { display: table-cell; text-align: right; @@ -2407,11 +2608,11 @@ select[multiple="multiple"] { padding: 0.3rem 1rem; display: inline-block; width: 100%; - clear: both; + clear: both; } -.cbi-section-table-descr > .cbi-section-table-cell, -.cbi-section-table-titles > .cbi-section-table-cell { +.cbi-section-table-descr>.cbi-section-table-cell, +.cbi-section-table-titles>.cbi-section-table-cell { border: none; } @@ -2420,16 +2621,17 @@ select[multiple="multiple"] { } .cbi-rowstyle-2 { - background-color:#fefefe; + background-color: #fefefe; } /* desc */ -.cbi-section-descr{ +.cbi-section-descr { padding: 1rem 0 1rem 2rem; font-size: 0.7rem; font-weight: 600; color: #525f7f; } + .cbi-map-descr { padding: 0rem 0 1rem 0rem; color: #fff; @@ -2469,12 +2671,12 @@ input[type="checkbox"] { box-shadow: none; } -td > .ifacebadge { +td>.ifacebadge { background-color: #F0F0F0; font-size: 0.9rem; } -.ifacebadge > img { +.ifacebadge>img { float: right; margin: 0 0.3rem; } @@ -2483,14 +2685,14 @@ td > .ifacebadge { .cbi-input-textarea { width: 100%; - resize: none; + resize: none; outline: none; min-height: 14rem; padding: 0.8rem; font-size: 0.8rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: black; - border-radius: 0.25rem; + border-radius: 0.25rem; } #syslog { @@ -2512,8 +2714,8 @@ td > .ifacebadge { font-family: monospace; } -.uci-change-list ins strong{ - display: inline; +.uci-change-list ins strong { + display: inline; } .uci-change-list ins, @@ -2522,7 +2724,7 @@ td > .ifacebadge { border: 1px solid #00FF00; background-color: #CCFFCC; display: block; - padding: 0 1rem; + padding: 0 1rem; margin: 0.5rem 0; } @@ -2577,130 +2779,130 @@ td > .ifacebadge { .ifacebadge { - display: inline-flex; - border-bottom: 1px solid #CCCCCC; - padding: 0.5rem 1rem; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + border-bottom: 1px solid #CCCCCC; + padding: 0.5rem 1rem; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } td>.ifacebadge { - background-color: #F0F0F0; - font-size: 0.9rem; + background-color: #F0F0F0; + font-size: 0.9rem; } .ifacebadge>img { - float: right; - margin: 0 0.3rem; + float: right; + margin: 0 0.3rem; } .ifacebox { - text-align: center; - margin-right: 60px; + text-align: center; + margin-right: 60px; } .ifacebox .ifacebox-head { - border-bottom: 1px solid #ccc; - padding: 2px; - background: #eee; + border-bottom: 1px solid #ccc; + padding: 2px; + background: #eee; } .ifacebox .ifacebox-head.active { - background: #5e72e4; + background: #5e72e4; } .ifacebox .ifacebox-body { - border: 2px solid #f2f2f2; - border-top: 0; - border-radius: 0 0 4px 4px; - padding: 2px 10px; + border: 2px solid #f2f2f2; + border-top: 0; + border-radius: 0 0 4px 4px; + padding: 2px 10px; } .network-status-table .ifacebox-body { - display: flex; - flex-direction: column; - height: 100%; - text-align: left; + display: flex; + flex-direction: column; + height: 100%; + text-align: left; } .network-status-table .ifacebox { - margin: .5em; - flex-grow: 1; + margin: .5em; + flex-grow: 1; } .ifacebox .ifacebox-body { - padding: .25em; + padding: .25em; } .ifacebox { - background-color: #fff; - border: 1px solid #ccc; - margin: 0 10px; - text-align: center; - white-space: nowrap; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - display: inline-flex; - flex-direction: column; - line-height: 1.2em; - min-width: 100px; + background-color: #fff; + border: 1px solid #ccc; + margin: 0 10px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; } .ifacebadge { - display: inline-block; - flex-direction: row; - white-space: nowrap; - background-color: #fff; - border: 1px solid #ccc; - padding: 2px; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: default; - line-height: 1.2em; + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #fff; + border: 1px solid #ccc; + padding: 2px; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; } .ifacebadge.large, .network-status-table .ifacebox-body .ifacebadge { - display: inline-flex; - flex: 1; - padding: .25em; - min-width: 220px; - margin: .125em; - float: left; + display: inline-flex; + flex: 1; + padding: .25em; + min-width: 220px; + margin: .125em; + float: left; } .ifacebadge img { - width: 16px; - height: 16px; - vertical-align: middle; + width: 16px; + height: 16px; + vertical-align: middle; } .ifacebadge>*, .ifacebadge.large>* { - margin: 0 .125em; + margin: 0 .125em; } .ifacebadge>*, .ifacebadge.large>* { - margin: 0 .125em; + margin: 0 .125em; } .network-status-table { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .cbi-tooltip { - position: absolute; - z-index: 1000; - left: -1000px; - opacity: 0; - transition: opacity .25s ease-out; + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; } .cbi-image-button { @@ -2712,7 +2914,7 @@ td>.ifacebadge { #bwsvg { border: none !important; border-radius: 0.375rem; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); overflow: hidden; } @@ -2728,13 +2930,13 @@ td>.ifacebadge { cursor: pointer; } -.zonebadge > .ifacebadge { +.zonebadge>.ifacebadge { padding: 0.2rem 1rem; margin: 0.3rem; border: 1px solid #6C6C6C; } -.zonebadge > input[type="text"] { +.zonebadge>input[type="text"] { padding: 0.16rem 1rem; min-width: 10rem; margin-top: 0.3rem; @@ -2746,36 +2948,37 @@ td>.ifacebadge { height: 1rem; } -input[type=checkbox], input[type=radio] { +input[type=checkbox], +input[type=radio] { width: auto; margin: 0; vertical-align: middle; cursor: pointer; } -.cbi-value-field > input + .cbi-value-description { +.cbi-value-field>input+.cbi-value-description { padding: 0; } -.cbi-value-field > ul > li { +.cbi-value-field>ul>li { display: flex; } -.cbi-value-field > ul > li > label { +.cbi-value-field>ul>li>label { margin-top: -0.1rem; } -.cbi-value-field > ul > li .ifacebadge { +.cbi-value-field>ul>li .ifacebadge { background-color: #eee; margin-left: 0.4rem; margin-top: -0.5rem; } -.cbi-section-table-row > .cbi-value-field .cbi-input-select { +.cbi-section-table-row>.cbi-value-field .cbi-input-select { min-width: 7rem; } -.cbi-section-create > .cbi-button-add { +.cbi-section-create>.cbi-button-add { margin: 0.5rem; } @@ -2783,7 +2986,8 @@ input[type=checkbox], input[type=radio] { padding: 0.5rem; } -div.cbi-value var, td.cbi-value-field var { +div.cbi-value var, +td.cbi-value-field var { font-style: italic; color: #0069D6; } @@ -2807,7 +3011,7 @@ input[name="nslookup"] { width: 80%; } -header > .container > .pull-right > * { +header>.container>.pull-right>* { position: relative; top: 0.45rem; cursor: pointer; @@ -2849,36 +3053,40 @@ header > .container > .pull-right > * { } /* fix Main Login*/ -.node-main-login > .main > .main-right > header { +.node-main-login>.main>.main-right>header { background: none !important; - box-shadow:none !important; - display:none; -} -.node-main-login > .main > .main-right > header > .fill > .container{ - margin: 2rem auto; - max-width: 1140px; -} -.node-main-login > .main > .main-right > header > .fill > .container > .brand{ - font-size:2rem; - color:#5e72e4; - display:none; - -} -.node-main-login > .main{ - top:0; - height:100% !important; -} -.node-main-login > .main > .main-left { + box-shadow: none !important; display: none; } -.node-main-login > .main > .main-right { +.node-main-login>.main>.main-right>header>.fill>.container { + margin: 2rem auto; + max-width: 1140px; +} + +.node-main-login>.main>.main-right>header>.fill>.container>.brand { + font-size: 2rem; + color: #5e72e4; + display: none; + +} + +.node-main-login>.main { + top: 0; + height: 100% !important; +} + +.node-main-login>.main>.main-left { + display: none; +} + +.node-main-login>.main>.main-right { width: 100%; } -.node-main-login > .main > .main-right > .login-bg{ - display:block; - position:fixed; +.node-main-login>.main>.main-right>.login-bg { + display: block; + position: fixed; width: 100%; height: 100%; left: 0px; @@ -2889,20 +3097,21 @@ header > .container > .pull-right > * { transition: all 0.5s; } -.node-main-login > .main > .main-right > .login-bg.blur{ +.node-main-login>.main>.main-right>.login-bg.blur { transform: scale(1.05); - -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ + -webkit-filter: blur(5px); + /* Chrome, Safari, Opera */ filter: blur(5px); } -.node-main-login > .main > .main-right > #maincontent { +.node-main-login>.main>.main-right>#maincontent { padding-top: 23vh; height: 100%; background-color: transparent !important; margin-top: 0rem; } -.node-main-login > .main fieldset { +.node-main-login>.main fieldset { padding: 0.5rem; margin: 0rem; display: inline; @@ -2912,30 +3121,30 @@ header > .container > .pull-right > * { overflow: hidden; } -.node-main-login > .main .cbi-value-title { +.node-main-login>.main .cbi-value-title { font-size: 1rem; line-height: 1.5; - color:#525f7f; + color: #525f7f; padding: .625rem; } -.node-main-login > .main #maincontent { +.node-main-login>.main #maincontent { text-align: center; } -.node-main-login > .main .container { +.node-main-login>.main .container { display: inline-block; padding: 2rem 2rem; - position:relative; + position: relative; margin-top: 2rem !important; - background-color: #f7fafc!important; + background-color: #f7fafc !important; border-radius: .375rem; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); text-align: left; } -.node-main-login > .main .container h2{ +.node-main-login>.main .container h2 { width: 120px; height: 120px; color: #fff; @@ -2949,46 +3158,50 @@ header > .container > .pull-right > * { border-radius: 60px; border: #fff 3px solid; - background-image:url(../logo.png); - background-size:cover; + background-image: url(../logo.png); + background-size: cover; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); } -.node-main-login > .main .container .cbi-map-descr{ - text-align:center; + +.node-main-login>.main .container .cbi-map-descr { + text-align: center; padding: 1rem; color: #8898aa; } -.node-main-login > .main .container .cbi-section-node{ - padding:0; + +.node-main-login>.main .container .cbi-section-node { + padding: 0; } -.node-main-login > .main .container .cbi-value-field input{ +.node-main-login>.main .container .cbi-value-field input { font-size: 1rem; line-height: 1.5; display: block; width: 100%; height: calc(2.75rem + 2px); padding: .625rem .75rem; - transition: all .15s cubic-bezier(.68,-.55,.265,1.55); + transition: all .15s cubic-bezier(.68, -.55, .265, 1.55); color: #8898aa; border: 0px solid #dee2e6; border-radius: .25rem; background-color: #fff; background-clip: padding-box; - box-shadow: 0 3px 2px rgba(233,236,239,.05); + box-shadow: 0 3px 2px rgba(233, 236, 239, .05); } -.node-main-login > .main .container .cbi-value-field input:focus { + +.node-main-login>.main .container .cbi-value-field input:focus { color: #8898aa; outline: 0; background-color: #fff; - box-shadow: 0 3px 9px rgba(50,50,9,0),3px 4px 8px rgba(94,114,228,.1) + box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1) } -.node-main-login > .main .container input.cbi-button{ + +.node-main-login>.main .container input.cbi-button { font-size: 1rem; - height:auto; + height: auto; position: relative; transition: all .15s ease; letter-spacing: .2em; @@ -2998,51 +3211,56 @@ header > .container > .pull-right > * { line-height: 1.5em; } -.node-main-login > .main form > div:nth-last-child(1) { - text-align:center; - border-top:0; +.node-main-login>.main form>div:nth-last-child(1) { + text-align: center; + border-top: 0; padding-top: 2rem; } -.node-main-login > .main .cbi-value { +.node-main-login>.main .cbi-value { display: block; padding: 0; } -.node-main-login > .main .cbi-value > * { +.node-main-login>.main .cbi-value>* { display: inline-block !important; } -.node-main-login > .main .cbi-value:first-child , .node-main-login > .main .cbi-button-reset{ - display:none !important; -} - -.node-main-login > .main .cbi-value.cbi-value-last .cbi-value-title{ +.node-main-login>.main .cbi-value:first-child, +.node-main-login>.main .cbi-button-reset { display: none !important; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text{ - box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); - transition: box-shadow .15s ease; - border-radius: .375rem; - box-sizing:border-box; - padding-left:3em; - margin: 0; + + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-title { + display: none !important; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-input-password{ - box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-text { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); transition: box-shadow .15s ease; border-radius: .375rem; - box-sizing:border-box; - padding-left:3em; + box-sizing: border-box; + padding-left: 3em; margin: 0; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-value-field{ - position:relative; - width: 20rem; +.node-main-login>.main .cbi-value.cbi-value-last .cbi-input-password { + box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); + transition: box-shadow .15s ease; + border-radius: .375rem; + box-sizing: border-box; + padding-left: 3em; + margin: 0; } -.node-main-login > .main .cbi-value.cbi-value-last .cbi-value-field:before{ + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field { + position: relative; + width: 20rem; +} + +.node-main-login>.main .cbi-value.cbi-value-last .cbi-value-field:before { font-family: 'icomoon' !important; speak: none; font-style: normal; @@ -3061,12 +3279,12 @@ header > .container > .pull-right > * { top: 10px; } -.node-main-login > .main .cbi-input-user, -.node-main-login > .main .cbi-input-password { +.node-main-login>.main .cbi-input-user, +.node-main-login>.main .cbi-input-password { min-width: 15rem; } -.node-main-login .alert-message.warning{ +.node-main-login .alert-message.warning { position: absolute; color: #fff; width: calc(100% - 4rem); @@ -3077,10 +3295,11 @@ header > .container > .pull-right > * { border-radius: 5px; padding: 1rem 2rem; text-align: center; + display: none; } -.node-main-login .errorbox{ - position: absolute; +.node-main-login .errorbox { + position: absolute; color: #fff; width: calc(100% - 4rem); border-color: #eea236; @@ -3090,83 +3309,86 @@ header > .container > .pull-right > * { padding: 1rem 2rem; text-align: center; background-color: #8965e0 !important; - + } .node-main-login footer { bottom: 0; position: absolute; width: 100%; - color:#fff; + color: #fff; } -.node-main-login footer > a{ - color:#fff; + +.node-main-login footer>a { + color: #fff; } /* fix status overview */ -.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) { +.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2) { white-space: normal; } /* fix status processes */ -.node-status-processes > .main table tr td:nth-child(3) { +.node-status-processes>.main table tr td:nth-child(3) { white-space: normal; } -.node-status-iptables > .main div > .cbi-map > form { +.node-status-iptables>.main div>.cbi-map>form { margin: 0.5rem 2rem 0 0; } /* fix system reboot */ -.node-system-reboot > .main > .main-right p, -.node-system-reboot > .main > .main-right h3 { +.node-system-reboot>.main>.main-right p, +.node-system-reboot>.main>.main-right h3 { padding-left: 2rem; color: #fff; } /* fix Services Network Shares*/ -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; width: auto; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field { display: list-item; } -.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { +.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description { padding-top: 1rem; } /* fix System Software*/ -.node-system-packages > .main table tr td:nth-child(1) { +.node-system-packages>.main table tr td:nth-child(1) { width: auto !important; } -.node-system-packages > .main table tr td:nth-last-child(1) { +.node-system-packages>.main table tr td:nth-last-child(1) { white-space: normal; font-size: small; color: #404040; } -.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a { +.node-system-packages>.main .cbi-tabmenu>li>a, +.tabs>li>a { padding: 0.5rem 0.8rem; } -.node-system-packages > .main .cbi-value > pre { +.node-system-packages>.main .cbi-value>pre { background-color: #eee; padding: 0.5rem; overflow: auto; } -.cbi-tabmenu + .cbi-section { +.cbi-tabmenu+.cbi-section { margin-top: 0; } -.cbi-section{ -/* background: #fff; + +.cbi-section { + /* background: #fff; border: 0; border-radius: .375rem; margin-bottom: 30px; @@ -3175,42 +3397,47 @@ header > .container > .pull-right > * { overflow-y:hidden; */ } -.cbi-section em{ - padding :0rem 1.5rem; + +.cbi-section em { + padding: 0rem 1.5rem; font-size: 0.7rem; font-weight: 600; color: #525f7f; } -#cbi-system-led em{ +#cbi-system-led em { /* padding :0.75rem 1.5rem; */ } -.cbi-section h4{ + +.cbi-section h4 { /* padding :0.75rem 1.5rem; */ font-size: 0.7rem; font-weight: 600; color: #525f7f; } -.node-main-login .cbi-section{ +.node-main-login .cbi-section { margin-bottom: 0px; padding-bottom: 0px; } -#content_syslog{ +#content_syslog { border-radius: .375rem; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); overflow: hidden; } -.node-system-packages .cbi-section-node .cbi-value { - /* padding: 1rem 1rem; */ + +.node-system-packages .cbi-section-node .cbi-value { + /* padding: 1rem 1rem; */ } -.node-system-packages br{ + +.node-system-packages br { display: none; } + /* fix network firewall*/ -.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select { +.node-network-firewall>.main .cbi-section-table-row>.cbi-value-field .cbi-input-select { min-width: 4rem; } @@ -3227,7 +3454,7 @@ header > .container > .pull-right > * { /* padding-left: 2rem; */ } -.node-system-flashops form.inline + form.inline { +.node-system-flashops form.inline+form.inline { margin-left: 0; } @@ -3248,7 +3475,7 @@ header > .container > .pull-right > * { font-size: 0.8rem; } - header > .container > .pull-right > * { + header>.container>.pull-right>* { top: 0.35rem; } @@ -3269,14 +3496,14 @@ header > .container > .pull-right > * { font-size: small; } - .node-status-iptables > .main fieldset li > a { + .node-status-iptables>.main fieldset li>a { padding: 0.3rem 0.6rem; } } @media screen and (max-width: 1280px) { - - header > .container { + + header>.container { margin-top: 0.25rem; } @@ -3289,7 +3516,8 @@ header > .container > .pull-right > * { width: calc(100% - 13rem); } - .cbi-tabmenu > li > a, .tabs > li > a { + .cbi-tabmenu>li>a, + .tabs>li>a { padding: 0.2rem 0.5rem; } @@ -3303,13 +3531,13 @@ header > .container > .pull-right > * { width: 100% !important; } - .main > .main-left > .nav > li, - .main > .main-left > .nav > li a, - .main > .main-left > .nav > .slide > .menu { + .main>.main-left>.nav>li, + .main>.main-left>.nav>li a, + .main>.main-left>.nav>.slide>.menu { font-size: 0.9rem; } - .main > .main-left > .nav > .slide > .slide-menu > li > a { + .main>.main-left>.nav>.slide>.slide-menu>li>a { font-size: 0.7rem; } } @@ -3327,8 +3555,8 @@ header > .container > .pull-right > * { .showSide { padding: 0.1rem; - position:relative; - z-index:999; + position: relative; + z-index: 999; display: inline-block; } @@ -3340,7 +3568,8 @@ header > .container > .pull-right > * { .node-main-login .showSide { display: none !important; } - header > .fill > .container > .brand{ + + header>.fill>.container>.brand { display: inline-block; } @@ -3349,32 +3578,32 @@ header > .container > .pull-right > * { padding-right: 1rem; */ } - .node-network-diagnostics > .main .cbi-map fieldset > div * { + .node-network-diagnostics>.main .cbi-map fieldset>div * { width: 100% !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] { + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="text"] { margin: 3rem 0 0 0 !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] { + .node-network-diagnostics>.main .cbi-map fieldset>div:nth-child(4) input[type="text"] { margin: 0 !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div select, - .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] { + .node-network-diagnostics>.main .cbi-map fieldset>div select, + .node-network-diagnostics>.main .cbi-map fieldset>div input[type="button"] { margin: 1rem 0 0 0; } - .node-network-diagnostics > .main .cbi-map fieldset > div { + .node-network-diagnostics>.main .cbi-map fieldset>div { width: 100% !important; } - #diag-rc-output > pre { + #diag-rc-output>pre { font-size: 1rem; } - .node-main-login > .main .cbi-value-title { + .node-main-login>.main .cbi-value-title { text-align: left; } } @@ -3392,97 +3621,106 @@ header > .container > .pull-right > * { .tabs { margin: 0.5rem 0rem } + .toggle { margin: 0; } - #maincontent > .container { + + #maincontent>.container { margin: 0 1rem 1.5rem 1rem; } - .main > .main-left > .nav > .slide > .menu { + .main>.main-left>.nav>.slide>.menu { font-size: 1rem; } - .main > .main-left > .nav > .slide > .slide-menu > li > a { + .main>.main-left>.nav>.slide>.slide-menu>li>a { font-size: 0.9rem; } - .main > .main-left > .nav > .slide > .menu:before{ - padding-top:5px; + + .main>.main-left>.nav>.slide>.menu:before { + padding-top: 5px; } - .main > .main-left > .nav > .slide > .menu:after { + + .main>.main-left>.nav>.slide>.menu:after { top: 0.9rem; } - - .cbi-value { - padding: 0.6em 0em; - } + + .cbi-value { + padding: 0.6em 0em; + } .cbi-value-title { width: 40%; - min-width: 0rem !important; - text-align: left; - padding-left: 1em; - } - - - .cbi-value-field, - .cbi-value-description { - width: 95%; - } - select, input { - width: 95%; - min-width: unset; - } - .cbi-value-field .cbi-input-select { - width: 95%; - min-width: unset; - } - - .cbi-value-field .cbi-input-textarea { - width: 95% !important; - min-width: unset; - } - - .cbi-value > .cbi-value-field { - /* display: inline-block; - padding-left: 1rem; */ - - display: table-cell; - width: 20em; + min-width: 0rem !important; + text-align: left; + padding-left: 1em; } - .node-main-login .cbi-value > .cbi-value-field { - width: 18rem; + + .cbi-value-field, + .cbi-value-description { + width: 95%; + } + + select, + input { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-select { + width: 95%; + min-width: unset; + } + + .cbi-value-field .cbi-input-textarea { + width: 95% !important; + min-width: unset; + } + + .cbi-value>.cbi-value-field { + /* display: inline-block; + padding-left: 1rem; */ + + display: table-cell; + width: 20em; + } + + .node-main-login .cbi-value>.cbi-value-field { + width: 18rem; padding-left: 0rem; } - .cbi-tabmenu > li, .tabs > li { + .cbi-tabmenu>li, + .tabs>li { padding: 0.6rem 0rem; } - .cbi-tabmenu > li > a, .tabs > li > a { + .cbi-tabmenu>li>a, + .tabs>li>a { padding: 0.2rem 0.3rem; font-size: 0.9rem; } - .cbi-page-actions > div > input { + .cbi-page-actions>div>input { display: none; } - .node-main-login > .main .container { + .node-main-login>.main .container { padding: 0.5rem 1rem 2rem 1rem; - margin: 0 auto !important; + margin: 0 auto !important; } - .node-main-login > .main form > div:nth-last-child(1) { + .node-main-login>.main form>div:nth-last-child(1) { margin-top: 0rem; } - .node-main-login > .main .cbi-value-title { + .node-main-login>.main .cbi-value-title { width: 100% !important; margin-top: 0rem; font-size: 1rem; @@ -3490,29 +3728,31 @@ header > .container > .pull-right > * { padding: 0 0.5rem; } - .node-main-login > .main fieldset { + .node-main-login>.main fieldset { margin: 0; padding: 0.5rem; } - .node-main-login .alert-message.warning{ + + .node-main-login .alert-message.warning { width: calc(100% - 2rem); padding: 1rem 1rem; - font-size:12px; + font-size: 12px; } h2 { font-size: 1.5rem; - + } - .node-main-login > .main .container h2 { + + .node-main-login>.main .container h2 { margin: -70px auto 15px auto; } - .tabs > li > a { + .tabs>li>a { font-size: 0.9rem; } @@ -3530,18 +3770,19 @@ header > .container > .pull-right > * { padding-bottom: 1rem; } - .node-system-packages > .main .cbi-value.cbi-value-last > div { + .node-system-packages>.main .cbi-value.cbi-value-last>div { width: 100% !important; } - .node-system-packages .cbi-section-node .cbi-value { + + .node-system-packages .cbi-section-node .cbi-value { padding: 0.3rem 1rem; } - .node-system-packages > .main .cbi-value .cbi-value-field input { + .node-system-packages>.main .cbi-value .cbi-value-field input { width: 100%; } - .node-status-iptables > .main div > .cbi-map > form { + .node-status-iptables>.main div>.cbi-map>form { position: static !important; margin: 0 0 2rem 0; padding: 2rem; @@ -3555,46 +3796,52 @@ header > .container > .pull-right > * { overflow-y: hidden; border-radius: 0.375rem; background-color: #FFF; - box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); + box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); -webkit-overflow-scrolling: touch; } - .node-status-iptables > .main div > .cbi-map > form input[type="submit"] { + .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { width: 100% !important; margin: 0; - } + } - .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] { + .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { margin-top: 1rem; } } @media screen and (min-width: 992px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 20rem; - } - .cbi-value-field .cbi-input-select { - min-width: 20rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 20rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 20rem; + } } @media screen and (min-width: 1280px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 22rem; - } - .cbi-value-field .cbi-input-select { - min-width: 22rem; - } + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 22rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 22rem; + } } @media screen and (min-width: 1600px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 25rem; - } - .cbi-value-field .cbi-input-select { - min-width: 25rem; - } -} + + .cbi-value input[type="password"], + .cbi-value input[type="text"] { + min-width: 25rem; + } + + .cbi-value-field .cbi-input-select { + min-width: 25rem; + } +} \ No newline at end of file diff --git a/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light/header.htm b/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light/header.htm index 988b1e986b..3b603d57bd 100644 --- a/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light/header.htm +++ b/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light/header.htm @@ -196,7 +196,7 @@ math.randomseed(os.time()) local bgcount = 0 - for f in ipairs(glob("/www/luci-static/argon_mc1/img/*")) do + for f in ipairs(glob("/www/luci-static/argon_light/img/*")) do bgcount = bgcount + 1 end diff --git a/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light_green/header.htm b/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light_green/header.htm index 988b1e986b..f75304fa7e 100644 --- a/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light_green/header.htm +++ b/package/lienol/luci-theme-argon-light-mod/luasrc/view/themes/argon_light_green/header.htm @@ -196,7 +196,7 @@ math.randomseed(os.time()) local bgcount = 0 - for f in ipairs(glob("/www/luci-static/argon_mc1/img/*")) do + for f in ipairs(glob("/www/luci-static/argon_light_green/img/*")) do bgcount = bgcount + 1 end