diff options
3 files changed, 296 insertions, 14 deletions
diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css index 77f0ecf3e2..ca65dad85c 100644 --- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css +++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css @@ -23,25 +23,32 @@ font-weight: normal; font-style: normal; } + strong { font-weight: normal; } + .table { display: table; position: relative; } + .tr { display: table-row; } + .thead { display: table-header-group; } + .tbody { display: table-row-group; } + .tfoot { display: table-footer-group; } + .td, .th { vertical-align: middle; @@ -49,13 +56,16 @@ strong { display: table-cell; padding: .8em; } + .th { font-weight: normal; } + .tr.placeholder { height: 4em; background-color: #f9f9f9; } + .tr.placeholder>.td { position: absolute; left: 0; @@ -65,56 +75,69 @@ strong { line-height: 3em; background: #f9f9f9; } + .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } + .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } + .col-1 { flex: 1 1 30px !important; -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; } + .cbi-button-up, .cbi-button-down, .cbi-value-helpicon, @@ -129,26 +152,42 @@ strong { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + * { margin: 0; padding: 0; 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: normal; line-height: 1.1; color: inherit; } + html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; position: relative; } + body { font-size: 0.8rem; background-color: #EEE; } + html, body { margin: 0px; @@ -157,6 +196,7 @@ body { min-height: 100%; font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB; } + select { padding: 0.36rem 0.8rem; color: #555; @@ -164,6 +204,7 @@ select { background-image: none; border: 1px solid #ccc; } + select, input, .cbi-dropdown { @@ -179,30 +220,37 @@ input, height: auto; font-size: 0.8rem; } + select:not([multiple="multiple"]):focus, input:focus { border-color: #0099CC; } + select[multiple="multiple"] { height: auto; } + code { color: #0099CC; } + abbr { color: #005470; text-decoration: underline; cursor: help; } + hr { margin: 1rem 0; border-color: #EEE; opacity: 0.1; } + footer>a { color: #aaa; text-decoration: none; } + .main>.loading { position: fixed; width: 100%; @@ -212,6 +260,7 @@ footer>a { background-color: #354057; top: 0; } + .main>.loading>span { display: block; text-align: center; @@ -220,27 +269,34 @@ footer>a { font-size: 1.2rem; line-height: 45px; } + .main>.loading>span>.loading-img { margin-right: 0.2rem; display: inline-block; } + .main>.loading>span>.loading-img img { vertical-align: middle; } + .pull-right { float: right; } + .pull-left { float: left; } + li { list-style-type: none; } + h1 { font-size: 2rem; padding-bottom: 10px; border-bottom: 1px solid #eee; } + h2 { margin: 2rem 0 0 0; color: #354057; @@ -248,23 +304,28 @@ h2 { padding-bottom: 10px; border-bottom: 1px solid #eee; } + h3 { margin: 2rem 0 0 0; font-size: 1.4rem; padding-bottom: 10px; } + h4 { margin: 2rem 0 0 0; font-size: 1.2rem; padding-bottom: 10px; } + .mobile-hide { display: inline-block; } + .PC-hide { width: 100%; display: none; } + .cbi-section { margin: 1rem 0 0 0; padding: 2rem; @@ -278,9 +339,11 @@ h4 { background-color: #FFF; -webkit-overflow-scrolling: touch; } + .cbi-section>legend { display: none !important; } + .cbi-section>h3:first-child, .panel-title { width: 100%; @@ -291,10 +354,12 @@ h4 { padding-bottom: 1rem; margin: 0; } + .table { width: 100%; border-radius: 20px; } + .table>.tbody>.tr>.td, .table>.tbody>.tr>.th, .table>.tfoot>.tr>.td, @@ -305,65 +370,81 @@ h4 { border-top: 1px solid #ddd; white-space: nowrap; } + .cbi-section-table-cell { white-space: nowrap; align-self: flex-end; flex: 1 1 auto; } + .cbi-section-table { border: none; } + .cbi-section-table-row { text-align: center; margin-bottom: 1rem; background: #f4f4f4; } + .cbi-section-table-row:last-child { margin-bottom: 0; } + .cbi-section-table-row>.cbi-value-field .cbi-input-select, .cbi-section-table-row>.cbi-value-field .cbi-input-text, .cbi-section-table-row>.cbi-value-field .cbi-input-password, .cbi-section-table-row>.cbi-value-field .cbi-dropdown { width: 100%; } + .cbi-section-table-row>.cbi-value-field [data-dynlist]>input, .cbi-section-table-row>.cbi-value-field input.cbi-input-password { width: calc(100% - 1.5rem); } + div>table>tbody>tr:nth-of-type(2n), div>.table>.tbody>.tr:nth-of-type(2n) { background-color: #f9f9f9; } + div>table>tbody>tr:nth-of-type(2n), div>.table>.tbody>.tr:nth-of-type(2n) { background-color: #f9f9f9; } + .cbi-section .table .tr.table-titles { background-color: #eee; } + .table .tr:first-child .td:first-child, .table .tr:first-child::before, .table .tr:first-child .th:first-child { border-top-left-radius: 10px; } + .table .tr:first-child .td:last-child, .table .tr:first-child .th:last-child { border-top-right-radius: 10px; } + .table .tr:last-child .td:first-child, .table .tr:last-child::before { border-bottom-left-radius: 10px; } + .table .tr:last-child .td:last-child { border-bottom-right-radius: 10px; } + .table .tr.placeholder:last-child { background-color: transparent; } + .cbi-section .table .cbi-section-table-titles { background-color: #e0e0e0; } + /* fix progress bar */ .cbi-progressbar { background-color: #9bc1cc; @@ -371,11 +452,13 @@ div>.table>.tbody>.tr:nth-of-type(2n) { overflow: hidden; position: relative; } + .cbi-progressbar div { background-color: #468ea4; height: 20px; border-radius: 20px; } + .cbi-progressbar::after { content: attr(title); position: absolute; @@ -387,34 +470,39 @@ div>.table>.tbody>.tr:nth-of-type(2n) { line-height: 1.2rem; color: #fff; } + /* fix multiple table */ table table, .table .table { border: none; } + .cbi-value-field table, .cbi-value-field .table { border: none; } + td>table>tbody>tr>td, .td>.table>.tbody>.tr>.td { border: none; } + .cbi-value-field>table>tbody>tr>td, .cbi-value-field>.table>.tbody>.tr>.td { border: none; } + /* button style */ .btn, .cbi-button { margin: 0 .8rem .5rem 0; -webkit-appearance: none; - color: #354057; - background-color: transparent; + color: rgba(0, 0, 0, 0.87); + background-color: #F0F0F0; transition: all 0.2s ease-in-out; display: inline-block; padding: .5rem .8rem; - border: 1px solid; + border: none; border-radius: 25px; cursor: pointer; -ms-touch-action: manipulation; @@ -432,6 +520,7 @@ td>table>tbody>tr>td, display: inline-block; text-decoration: none; } + .btn:disabled, .cbi-button:disabled { cursor: not-allowed; @@ -439,6 +528,7 @@ td>table>tbody>tr>td, opacity: 0.60; box-shadow: none; } + .cbi-page-actions .cbi-button-apply, .cbi-section-actions .cbi-button-edit, .cbi-button-edit.important, @@ -450,6 +540,7 @@ td>table>tbody>tr>td, background-color: #337ab7; border: none; } + .cbi-button-add.important, .cbi-button-save.important, .cbi-button-positive.important, @@ -459,6 +550,7 @@ td>table>tbody>tr>td, background-color: transparent; border: 1px solid #337ab7; } + .cbi-button-remove.important, .cbi-button-reset.important, .cbi-button-negative.important { @@ -466,6 +558,7 @@ td>table>tbody>tr>td, background-color: #d9534f; border: none; } + .cbi-button-find, .cbi-button-link, .cbi-button-up, @@ -475,6 +568,7 @@ td>table>tbody>tr>td, background-color: transparent; border: 1px solid #468ea4; } + .cbi-button-edit, .cbi-button-reload, .cbi-button-action { @@ -482,6 +576,7 @@ td>table>tbody>tr>td, background-color: transparent; border: 1px solid #468ea4; } + .cbi-page-actions .cbi-button-apply+.cbi-button-save, .cbi-button-add, .cbi-button-save, @@ -490,6 +585,7 @@ td>table>tbody>tr>td, background-color: transparent; border: 1px solid #354057; } + .cbi-section-remove>.cbi-button, .cbi-button-remove, .cbi-button-reset, @@ -498,12 +594,15 @@ td>table>tbody>tr>td, background-color: transparent; border: 1px solid #F24C7C; } + .cbi-page-actions .cbi-button-link:first-child { float: left; } + .a-to-btn { text-decoration: none; } + /* table */ .container>.tabs, .container>.tabs>li[class~="active"], @@ -513,78 +612,91 @@ td>table>tbody>tr>td, .container>.cbi-tabmenu>li:hover { border-radius: 20px; } + .container .cbi-map .cbi-tabmenu, .container .cbi-map .cbi-tabmenu>li[class~="cbi-tab"], .container .cbi-map .cbi-tabmenu>li:hover { border-top-left-radius: 10px; border-top-right-radius: 10px; } + .container .cbi-map .cbi-tabmenu, .container>.tabs, .container>.cbi-tabmenu { overflow: hidden; } + .container .cbi-map .cbi-tabmenu+div { border-radius: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } + .tabs { background-color: #FFFFFF; margin-top: 1rem; } + .cbi-tabmenu>li, .tabs>li { margin-right: .4rem; display: inline-block; padding: 0.6rem 0rem; } + .cbi-tabmenu>li>a, .tabs>li>a { text-decoration: none; color: #404040; padding: 0.5rem 0.8rem; } + .tabs>li[class~="active"], .tabs>li:hover { cursor: pointer; background-color: #337ab7; } + .tabs>li[class~="active"]>a, .tabs>li:hover>a { color: #fff; } + .cbi-tabmenu { border-top: 1px solid #D4D4D4; border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; } + .cbi-tabmenu>li:hover { background-color: #F1F1F1; } + .cbi-tabmenu>li[class~="cbi-tab"] { background-color: #fff; } + .cbi-tabmenu { background-color: #D4D4D4; } [data-tab-title] { - height: 0; - opacity: 0; - overflow: hidden; + height: 0; + opacity: 0; + overflow: hidden; } [data-tab-active="true"] { - opacity: 1; - height: auto; - overflow: visible; - transition: opacity .25s ease-in; + opacity: 1; + height: auto; + overflow: visible; + transition: opacity .25s ease-in; } .cbi-section-remove:nth-of-type(2n) { background-color: #f9f9f9; } + .cbi-section-node-tabbed { padding: 0; margin-top: 0; @@ -592,20 +704,25 @@ td>table>tbody>tr>td, border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; } + .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { background-color: #f9f9f9; } + .cbi-value-field, .cbi-value-description { display: table-cell; line-height: 1.25; } + .cbi-value-helpicon>img { display: none; } + .cbi-value-helpicon:before { content: "\f059"; } + .cbi-value-description { font-size: small; opacity: 0.5; @@ -1370,6 +1487,7 @@ header>.container>.pull-right>* { .node-status-processes .cbi-section { overflow-x: scroll; } + .node-status-iptables #iptables .table-titles, .node-system-opkg #packages .cbi-section-table-titles { background-color: #eee; @@ -1418,6 +1536,7 @@ header>.container>.pull-right>* { .node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container { overflow-x: scroll; } + .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; width: auto; @@ -1645,8 +1764,7 @@ header .logout a { float: right; width: calc(100% + 10px); height: calc(100% - 110px); - overflow-y: scroll; - overflow-x: hidden; + overflow: hidden; } .main>.main-left .nav { @@ -1837,20 +1955,25 @@ footer { min-height: 100%; background: #fff url(./loginBG.png) no-repeat center center / cover; } + .node-main-login header { display: none; } + .node-main-login .main { height: auto; } + .node-main-login>.main>.main-left { display: none; } + .node-main-login>.main>.main-right { width: 100%; height: auto; min-height: 100%; } + .node-main-login>.main #maincontent { position: absolute; min-width: 492px; @@ -1861,12 +1984,14 @@ footer { height: auto; text-align: center; } + .node-main-login>.main .container { padding: 0; width: 30%; max-width: 492px; display: inline-block; } + .node-main-login>.main .logoImg a { margin: 0 0 18px 0; display: block; @@ -1874,13 +1999,16 @@ footer { color: #fff; text-decoration: none; } + .node-main-login>.main .logoImg img:first-child { width: 72px; } + .node-main-login .warning { background-color: #3E4A62; color: #fff; } + .node-main-login>.main form h2 { margin: 17px 0; padding: 0; @@ -1889,32 +2017,38 @@ footer { font-weight: normal; border: 0; } + .node-main-login>.main form .cbi-map-descr { margin: 0 0 12px; padding: 0; font-size: 12px; color: #B1B6BB; } + .node-main-login>.main form .cbi-section { margin: 0; padding: 0; background-color: transparent; box-shadow: none; } + .node-main-login>.main form .cbi-value { display: block; } + .node-main-login>.main form .cbi-value-title { margin: 0; padding: 0; display: none; } -.node-main-login>.main form .cbi-value-field { + +.node-main-login>.main form .cbi-value .cbi-value-field { margin-bottom: 16px; display: block; width: 100%; position: relative; } + .node-main-login>.main form .cbi-value-field input { padding-left: 48px; width: 100%; @@ -1924,6 +2058,7 @@ footer { font-size: 20px; color: #9c9fa1; } + .node-main-login form .cbi-value-field .iconpwd, .node-main-login form .cbi-value-field .iconuser, .node-main-login form .cbi-value-field .iconeye { @@ -1934,28 +2069,35 @@ footer { left: 16px; transform: translateY(-50%); } + .node-main-login form .cbi-value-field .iconpwd { background: transparent url(./pwd.png) no-repeat center center / 100%; } + .node-main-login form .cbi-value-field .iconuser { background: transparent url(./user.png) no-repeat center center / 100%; } + .node-main-login form .cbi-value-field .iconeye { left: auto; right: 16px; background: transparent url(./op-eye.png) no-repeat center center / 100%; } + .node-main-login form .cbi-value-field .cleye { background-image: url(./cl-eye.png); } + .node-main-login form .cbi-value-field .opeye { background-image: url(./op-eye.png); } + .node-main-login form .cbi-page-actions { padding: 0; border: 0; text-align: center; } + .node-main-login form .cbi-page-actions input { margin: 0 0 0 -4px; padding: 9px 0; @@ -1965,38 +2107,47 @@ footer { width: 50%; font-size: 18px; } + .node-main-login form .cbi-page-actions .cbi-button-apply { background-color: #F24C7C; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } + .node-main-login form .cbi-page-actions .cbi-button-reset { background-color: #8a4568; color: #fff; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } + .node-main-login input.cbi-input-text { box-shadow: 0 0 0 1000px white inset; } + /* Interface after login */ .logged-in { background-color: #EBF1F6; } + .logged-in header { height: 70px; } + .logged-in .main { overflow: hidden; } + .logged-in .main-right { padding: 0 1rem 3rem 0; margin-top: 90px; float: right; } + .logged-in .main .logoImg { display: none; } + .logged-in .main .main-left .nav-container { background-color: #354057; border-radius: 20px; @@ -2006,6 +2157,7 @@ footer { right: -10px; bottom: 10px; } + .logged-in .main .main-left .brand { margin: 0 auto; padding: 44px 0 23px; @@ -2023,11 +2175,13 @@ footer { -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } + .logged-in .alert-message { padding: 20px 2rem; border: none; background-color: #fff; } + .logged-in .alert-message a { padding: 8px 2rem; width: auto; @@ -2035,65 +2189,81 @@ footer { background-color: #468EA4; color: #fff; } + @media screen and (max-width: 1600px) { .main-left { width: calc(0% + 13rem); } + .btn, .cbi-button { padding: 0.3rem 0.6rem; font-size: 0.8rem; } + header>.container>.pull-right>* { top: 0.35rem; } + .label { padding: 0.2rem 0.6rem; } + .cbi-value-title { width: 15rem; padding-right: 0.6rem; } + .cbi-input-textarea { font-size: small; } } + @media screen and (max-width: 1280px) { .node-main-login>.main .container { width: 50%; } + .cbi-tabmenu>li>a, .tabs>li>a { padding: 0.2rem 0.5rem; } + .panel-title { font-size: 1.1rem; padding-bottom: 1rem; } + table { font-size: 0.7rem !important; width: 100% !important; } + .main>.main-left .nav>li, .main>.main-left .nav>li a, .main>.main-left .nav>.slide>.menu { font-size: 0.9rem; } + .main>.main-left .nav>.slide>.slide-menu>li>a { font-size: 0.7rem; } } + @media screen and (max-width: 992px) { .logged-in header { padding: 0 .8rem; height: 45px; } + header .brand { display: none; } + header .btn-con { line-height: 45px; } + .main-left { width: auto; height: auto; @@ -2108,35 +2278,49 @@ footer { min-width: 0; overflow: hidden; } + + .main>.main-left .navbar-container { + overflow-y: scroll; + overflow-x: hidden; + } + .main>.main-left .nav>.slide>.slide-menu>li { width: 90%; } + header .container { line-height: 43px; } + .main-right { width: 100%; } + .node-main-login>.main .container { width: 60%; } + .showSide { padding: 0.1rem; display: inline-block; vertical-align: middle; } + .cbi-value-title { width: 9rem; padding-right: 1rem; } + #diag-rc-output>pre { font-size: 1rem; } + .tr { display: flex; flex-direction: row; flex-wrap: wrap; } + .th, .td { flex: 2 2 25%; @@ -2145,48 +2329,57 @@ footer { word-wrap: break-word; display: inline-block; } + .td select, .td input[type="text"] { word-wrap: normal; width: 100%; } + .td [data-dynlist]>input, .td input.cbi-input-password { width: calc(100% - 1.5rem); } + .td[data-type="button"], .td[data-type="fvalue"] { flex: 1 1 12.5%; text-align: left; } + .th.cbi-value-field, .td.cbi-value-field, .th.cbi-section-table-cell, .td.cbi-section-table-cell { flex-basis: auto; } + .cbi-section-table-row { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; } + .td.cbi-value-field, .cbi-section-table-cell { text-align: center; display: inline-block; flex: 10 10 auto; } + .td.cbi-section-actions { text-align: right; align-self: flex-end; vertical-align: bottom; } + .tr.table-titles, .tr.cbi-section-table-titles, .tr.cbi-section-table-descr { display: none; } + .tr[data-title]::before, .tr.cbi-section-table-titles.named::before { display: block; @@ -2195,24 +2388,30 @@ footer { font-size: .9rem; border-bottom: 1px solid rgba(0, 0, 0, .26); } + .td[data-title] { text-align: left; font-size: 12px; } + .td[data-title]::before { display: block; } + .hide-sm, .hide-xs { display: none; } + /* All styles of the login interface */ .node-main-login .showSide { display: none !important; } + .logged-in .main { padding-bottom: .8rem; } + .logged-in .main .main-left .nav-container { background-color: #354057; border-radius: 0; @@ -2222,6 +2421,7 @@ footer { right: 20%; bottom: 0; } + .logged-in .main-right { padding: 0 .8rem; margin-top: calc(45px + .8rem); @@ -2229,69 +2429,86 @@ footer { max-width: unset; float: unset; } + .logged-in .alert-message { padding: 8px .8rem; } + .cbi-section { margin: .8rem 0 0 0; padding: .8rem; } + small { font-size: 10px; line-height: 0; } + .cbi-section>h3:first-child, .panel-title { font-size: 1rem; } + .network-status-table .ifacebox-body>span { font-size: 12px; } + .cbi-section .ifacebox-body .ifacebadge>span { font-size: 12px; } + .table .tr.cbi-rowstyle-1:nth-child(n), .table .tr:nth-child(n) { font-size: 12px; } + .node-network-firewall .table .tr.cbi-rowstyle-1:nth-child(n), .node-network-firewall .table .tr:nth-child(n) { border-radius: 20px; overflow: hidden; } + h2 { margin: 1rem 0 0 0; font-size: 1.4rem; padding-bottom: 0; border-bottom: none; } + h4 { font-size: 1rem; } + .cbi-section-node-tabbed { padding: 0 .5rem; } + .cbi-button, .cbi-button-action.important { margin-right: .3rem; } + select { border-bottom: 1px solid rgba(0, 0, 0, .26); } + .node-status-processes .table .tr.cbi-rowstyle-1:nth-child(n), .node-status-processes .table .tr:nth-child(n) { border-radius: 20px; } } + @media screen and (max-width: 768px) { .node-main-login { background: none; } + .node-main-login>.main .logoImg a { font-size: 30px; margin: 12px 0 22px 0; color: #354057; } + .node-main-login>.main #maincontent { padding-top: 0; padding-bottom: 1rem; @@ -2299,49 +2516,61 @@ footer { top: 0; transform: translateY(0) translateX(-50%); } + .alert-message { padding: 8px 15%; } + .alert-message>h4 { font-size: 14px; } + .alert-message>p, .alert-message a { font-size: 12px; } + .a lert-message>h4 { padding: 8px 0 8px 36px; } + .alert-message a { padding: 8px 0; margin-top: 8px; } + .node-main-login .warning { background-color: #F5F5F6; color: #354057; } + .alert-message a { color: #f24c7c; background: #fff; } + .node-main-login>.main form h2 { font-size: 16px; margin: 20px 0 16px; color: #354057; } + .node-main-login>.main form .cbi-value-field input { padding-left: 34px; height: 36px; background-size: 16px; font-size: 16px; } + .node-main-login>.main form .cbi-value-field { margin-bottom: 20px; } + .node-main-login form .cbi-page-actions input { padding: 6px 0; font-size: 16px; } + .node-main-login form .cbi-value-field .iconpwd, .node-main-login form .cbi-value-field .iconuser, .node-main-login form .cbi-value-field .iconeye { @@ -2349,21 +2578,26 @@ footer { width: 16px; left: 12px; } + .node-main-login form .cbi-value-field .iconeye { left: auto; right: 12px; } + .mobile-hide { display: none; } + .PC-hide { display: inline-block; } } + @media screen and (max-width: 480px) { body { font-size: 1rem; } + .cbi-value-title { width: 100%; min-width: 0rem !important; @@ -2372,42 +2606,53 @@ footer { margin-bottom: 0.5rem; text-align: left; } + .cbi-value-field, .cbi-value-description { width: 100%; } + .cbi-value>.cbi-value-field { display: inline-block; } + .cbi-tabmenu>li, .tabs>li { padding: 0.6rem 0rem; } + .cbi-tabmenu>li>a, .tabs>li>a { padding: 0.2rem 0.3rem; font-size: 0.9rem; } + .cbi-page-actions>div>input { display: none; } + .tabs>li>a { font-size: 0.9rem; } + select, input { font-size: 10px; } + .panel-title { font-size: 1.4rem; padding-bottom: 1rem; } + .node-system-packages>.main .cbi-value.cbi-value-last>div { width: 100% !important; } + .node-system-packages>.main .cbi-value .cbi-value-field input { width: 100%; } + .node-status-iptables>.main div>.cbi-map>form { position: static !important; margin: 0 0 2rem 0; @@ -2422,66 +2667,83 @@ footer { border-radius: 20px; -webkit-overflow-scrolling: touch; } + .node-status-iptables>.main div>.cbi-map>form input[type="submit"] { width: 100% !important; margin: 0; } + .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] { margin-top: 1rem; } + .node-main-login>.main .container { min-width: 90%; } + .th, .td { flex-basis: 50%; } + .td.cbi-value-field { flex-basis: 100%; } + .td.cbi-value-field[data-type="dvalue"] { flex-basis: 50%; } + .td.cbi-value-field[data-type="button"], .td.cbi-value-field[data-type="fvalue"] { flex-basis: 25%; text-align: left; } + .tr[data-title]::before, .tr.cbi-section-table-titles.named::before { font-size: 1rem; } + .hide-xs { display: none; } + /* All styles of the login interface */ .node-main-login>.main .cbi-value { padding: 0; } + .alert-message { padding: 8px 10%; } } + @media screen and (min-width: 992px) { .cbi-value-field .cbi-input-select { width: 20rem; } + .cbi-value-field .cbi-dropdown { min-width: 20rem; } } + @media screen and (min-width: 1280px) { .cbi-value-field .cbi-input-select { width: 22rem; } + .cbi-value-field .cbi-dropdown { min-width: 22rem; } } + @media screen and (min-width: 1600px) { .cbi-value-field .cbi-input-select { width: 25rem; } + .cbi-value-field .cbi-dropdown { min-width: 25rem; } diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/ScrollY.js b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/ScrollY.js new file mode 100644 index 0000000000..38d82d103e --- /dev/null +++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/ScrollY.js @@ -0,0 +1 @@ +!function(win,dom){function MyScrollBar(o){this.init(o)}function getStyle(obj,name){return win.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]}function setStyle(obj,oStyle){for(var i in oStyle)obj.style[i]=oStyle[i]}function getOffsetSize(obj){var sDisplay=getStyle(obj,"display"),res={};if("none"!=sDisplay)res.width=obj.offsetWidth,res.height=obj.offsetHeight;else{var oldStyle={position:getStyle(obj,"position"),visibility:getStyle(obj,"visibility"),display:sDisplay},newStyle;setStyle(obj,{position:"absolute",visibility:"hidden",display:"inline-block"}),res.width=obj.offsetWidth,res.height=obj.offsetHeight,setStyle(obj,oldStyle)}return res}function getClientSize(obj){var iTopW=parseInt(getStyle(obj,"borderTopWidth")),iRightW=parseInt(getStyle(obj,"borderRightWidth")),iBottomW=parseInt(getStyle(obj,"borderBottomWidth")),iLeftW=parseInt(getStyle(obj,"borderLeftWidth")),oOffset=getOffsetSize(obj);return{width:oOffset.width<=0?oOffset.width:oOffset.width-iLeftW-iRightW,height:oOffset.height<=0?oOffset.height:oOffset.height-iTopW-iBottomW}}function canSelectText(bCan){bCan?(dom.body.style.mozUserSelect="text",dom.body.style.webkitUserSelect="text",dom.body.style.msUserSelect="text",dom.body.style.khtmlUserSelect="text",dom.body.style.userSelect="text"):(dom.body.style.mozUserSelect="none",dom.body.style.webkitUserSelect="none",dom.body.style.msUserSelect="none",dom.body.style.khtmlUserSelect="none",dom.body.style.userSelect="none")}function getPosition(obj,goal){var oPos={top:obj.offsetTop,left:obj.offsetLeft};if(obj.parentNode==goal)return oPos;var obj=getPosition(obj.parentNode,goal);oPos.top+=obj.top,oPos.left+=obj.left}MyScrollBar.prototype.init=function(o){this.bYBar=!1,this.iScrollTop=0,this.iScrollLeft=0,this.bYShow=!1,this.oWrapper=dom.getElementById(o.selId),this.oScroll=this.oWrapper.firstElementChild,this.setParam(o),this.addScrollBar(),this.initState(),this.initEvent()},MyScrollBar.prototype.initState=function(){var sWPosition;"static"==getStyle(this.oWrapper,"position")&&setStyle(this.oWrapper,{position:"relative"}),setStyle(this.oScroll,{position:"relative"}),this.bYBar&&(setStyle(this.oYBox,{display:this.enterShow?"none":"block",position:"absolute",top:0,right:0,zIndex:10,width:this.width+"px",height:"100%",backgroundColor:this.bgColor}),setStyle(this.oYBar,{position:"absolute",top:0,left:0,width:"100%",backgroundColor:this.barColor,borderRadius:this.borderRadius+"px",transition:"all "+this.time+"ms"})),this.setSize()},MyScrollBar.prototype.initEvent=function(){var _this=this,sUserAgent;-1!=win.navigator.userAgent.toLowerCase().indexOf("firefox")?this.oWrapper.addEventListener("DOMMouseScroll",function(e){_this.bYBar&&_this.bYShow&&(e.preventDefault(),_this.iScrollTop+=e.detail>0?60:-60,_this.iScrollTop=_this.iScrollTop<=0?0:_this.iScrollTop>=_this.iScrollH-_this.iWrapperH?_this.iScrollH-_this.iWrapperH:_this.iScrollTop,_this.setTransLate(),_this.setYTop(_this.iScrollTop/_this.iScrollH*_this.iYBoxH))}):this.oWrapper.onmousewheel=function(evt){if(_this.bYBar&&_this.bYShow){var e=evt||win.event;evt?e.preventDefault():e.returnValue=!1,_this.iScrollTop+=e.wheelDelta<0?60:-60,_this.iScrollTop=_this.iScrollTop<=0?0:_this.iScrollTop>=_this.iScrollH-_this.iWrapperH?_this.iScrollH-_this.iWrapperH:_this.iScrollTop,_this.setTransLate(),_this.setYTop(_this.iScrollTop/_this.iScrollH*_this.iYBoxH)}};var isInWrapper=!1;this.oWrapper.onmouseenter=function(){isInWrapper=!0,_this.enterShow&&_this.bYBar&&_this.bYShow&&setStyle(_this.oYBox,{display:"block"})},this.oWrapper.onmouseleave=function(){isInWrapper=!1,_this.enterShow&&_this.bYBar&&!bYDown&&_this.bYShow&&setStyle(_this.oYBox,{display:"none"})};var bYDown=!1,bYLeave=!0,iDownPageY=0,iYBarTop=0;this.bYBar&&(this.enterColor&&(this.oYBar.onmouseenter=function(){bYLeave=!1,setStyle(this,{backgroundColor:_this.enterColor})},this.oYBar.onmouseleave=function(){bYLeave=!0,bYDown||setStyle(this,{backgroundColor:_this.barColor})}),this.oYBar.onmousedown=function(e){_this.bYShow&&(bYDown=!0,iDownPageY=e.clientY+dom.documentElement.scrollTop||dom.body.scrollTop,iYBarTop=parseInt(getStyle(this,"top")),_this.setYTime(0),canSelectText(!1))},dom.addEventListener("mouseup",function(){bYDown&&_this.bYShow&&(bYDown=!1,_this.setYTime(_this.time),canSelectText(!0),!isInWrapper&&_this.enterShow&&setStyle(_this.oYBox,{display:"none"})),!bYDown&&bYLeave&&setStyle(_this.oYBar,{backgroundColor:_this.barColor})}),dom.addEventListener("mousemove",function(e){if(bYDown&&_this.bYShow){var iNowPageY=e.clientY+dom.documentElement.scrollTop||dom.body.scrollTop,iNowTop=iYBarTop+iNowPageY-iDownPageY;iNowTop=iNowTop<=0?0:iNowTop>=_this.iYBoxH-_this.iYBarH?_this.iYBoxH-_this.iYBarH:iNowTop,_this.iScrollTop=iNowTop/_this.iYBoxH*_this.iScrollH,_this.setTransLate(),_this.setYTop(iNowTop)}}),this.oYBar.ondrag=function(e){var e=evt||win.event;evt?e.preventDefault():e.returnValue=!1})},MyScrollBar.prototype.setParam=function(o){this.width=o.width?o.width:10,this.bgColor=o.bgColor?o.bgColor:"#eaeaea",this.barColor=o.barColor?o.barColor:"#ccc",this.enterColor=o.enterColor||!1,this.enterShow=!1!==o.enterShow,this.hasY=!1!==o.hasY,this.borderRadius=o.borderRadius>=0?o.borderRadius:this.width/2,this.time=o.time||0},MyScrollBar.prototype.addScrollBar=function(){this.getSize(),this.hasY&&(this.bYBar=!0,this.oYBox=dom.createElement("div"),this.oYBar=dom.createElement("div"),this.oYBox.appendChild(this.oYBar),this.oWrapper.insertBefore(this.oYBox,this.oScroll))},MyScrollBar.prototype.getSize=function(){var oWrapperSize=getClientSize(this.oWrapper),oScrollSize=getClientSize(this.oScroll);this.iWrapperClientH=oWrapperSize.height,this.iPaddingT=parseInt(getStyle(this.oWrapper,"paddingTop")),this.iPaddingR=parseInt(getStyle(this.oWrapper,"paddingRight")),this.iPaddingB=parseInt(getStyle(this.oWrapper,"paddingBottom")),this.iPaddingL=parseInt(getStyle(this.oWrapper,"paddingLeft")),this.iWrapperH=oWrapperSize.height-this.iPaddingT-this.iPaddingB,this.iScrollH=oScrollSize.height,this.bYBar&&(this.iYBoxH=oWrapperSize.height,this.iYBarH=this.iWrapperH/this.iScrollH*this.iYBoxH)},MyScrollBar.prototype.setSize=function(time){var _this=this;time=time||100,setTimeout(function(){_this.getSize(),_this.iScrollTop>=_this.iScrollH-_this.iWrapperH&&(_this.iScrollTop=_this.iScrollH-_this.iWrapperH),_this.bYBar&&(_this.iWrapperH>=_this.iScrollH?(setStyle(_this.oYBox,{display:"none"}),_this.bYShow=!1):(_this.enterShow||setStyle(_this.oYBox,{display:"block"}),setStyle(_this.oYBar,{height:_this.iYBarH+"px",top:_this.iScrollTop/_this.iScrollH*_this.iYBoxH+"px"},0),_this.bYShow=!0))},time)},MyScrollBar.prototype.setTransLate=function(iTime){var sTranslate="translate(-"+this.iScrollLeft+"px, -"+this.iScrollTop+"px)";setStyle(this.oScroll,{transition:"all "+(iTime>=0?iTime:this.time)+"ms",transform:sTranslate,msTransform:sTranslate,mozTransform:sTranslate,webkitTransform:sTranslate,oTransform:sTranslate})},MyScrollBar.prototype.setYTime=function(iTime){setStyle(this.oYBar,{transition:"all "+(iTime>=0?iTime:this.time)+"ms"})},MyScrollBar.prototype.setYTop=function(iTop){setStyle(this.oYBar,{top:iTop+"px"})},MyScrollBar.prototype.jump=function(o){o=o||{};var oPos={top:0,left:0},iTop=0,iBottome=this.iScrollH-this.iWrapperClientH+this.iPaddingT+this.iPaddingB>0?this.iScrollH-this.iWrapperClientH+this.iPaddingT+this.iPaddingB:0,iLeft=0,iRight=this.iScrollW-this.iWrapperClientW+this.iPaddingL+this.iPaddingR>0?this.iScrollW-this.iWrapperClientW+this.iPaddingL+this.iPaddingR:0,obj;if(o.id)oPos=getPosition(document.getElementById(o.id),this.oScroll),this.bYBar&&(oPos.top+=this.iPaddingT);else if(o.pos)if("string"==typeof o.pos)switch(o.pos){case"top":oPos.top=0;break;case"bottom":oPos.top=iBottome;break;case"left":oPos.left=0;break;case"right":oPos.left=iRight}else"object"==typeof o.pos&&(oPos=o.pos);oPos.top=oPos.top>iBottome?iBottome:oPos.top>=0?oPos.top:0,this.iScrollTop=oPos.top,this.setTransLate(o.time),this.bYBar&&(this.setYTime(o.time),this.setYTop(this.iScrollTop/this.iScrollH*this.iYBoxH))},"function"==typeof define&&define.amd&&define([],function(){return MyScrollBar}),win.MyScrollBar=MyScrollBar}(window,document);
\ No newline at end of file diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js index 76ee383ccb..cda7b471b4 100755 --- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js +++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js @@ -81,6 +81,17 @@ /** * menu click */ + if ($('.nav').length > 0 && $(window).width() > 992) { + var oScroll = new MyScrollBar({ + selId: 'navBox', + time: 100, + bgColor: 'transprent', + barColor: '#839dd67a', + enterColor: '#839dd6cc', + enterShow: false + }); + } + $(".main > .main-left .nav > .slide > .menu").click(function () { var ul = $(this).next(".slide-menu"); var menu = $(this); @@ -94,6 +105,14 @@ ul.removeClass("active"); }); } + if ($('.nav').length > 0 && $(window).width() > 992) { + oScroll.setSize(200); + } + setInterval(function(){ + if($('.nav').height() < $('.navbar-container').height()){ + $('.nav').css('transform', 'translate(0px, 0px)'); + } + }, 300); return false; }); |