diff options
-rwxr-xr-x | themes/luci-theme-material/htdocs/luci-static/material/css/style.css | 92 | ||||
-rwxr-xr-x | themes/luci-theme-material/htdocs/luci-static/material/js/script.js | 25 |
2 files changed, 100 insertions, 17 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css index d59060f04..347a97bf6 100755 --- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css @@ -62,6 +62,11 @@ color: inherit; } +html { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + html, body { margin: 0px; padding: 0px; @@ -90,10 +95,9 @@ input { background-image: none; height: 2rem; font-size: 1.1rem; - transition: all 0.2s ease-in-out; } -select:focus, +select:not([multiple="multiple"]):focus, input:focus { height: 2rem; height: calc(2rem + 1px); @@ -102,6 +106,10 @@ input:focus { border-width: 2px; } +select[multiple="multiple"]{ + height: auto; +} + code { color: #0099CC; } @@ -256,6 +264,10 @@ header > .container > .brand { border-color: #eea236; } +.error{ + color: red; +} + #maincontent > .container > div:nth-child(1).alert-message.warning > a { font: inherit; overflow: visible; @@ -395,11 +407,14 @@ fieldset { font-family: inherit; min-width: inherit; - overflow: auto; + overflow-x: auto; + overflow-y: hidden; border-radius: 0; background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); + + -webkit-overflow-scrolling:touch; } fieldset > legend { @@ -488,9 +503,10 @@ td > table > tbody > tr > td { /* button style */ .cbi-button { + -webkit-appearance: none; text-transform: uppercase; color: rgba(0, 0, 0, 0.87); - background-color: #FFF; + background-color: #F0F0F0; transition: all 0.2s ease-in-out; display: inline-block; padding: 0.5rem 1rem; @@ -515,7 +531,6 @@ td > table > tbody > tr > td { .cbi-button:focus, .cbi-button:active { color: rgba(0, 0, 0, 0.87); - background-color: white; outline: 0; text-decoration: none; color: rgba(0, 0, 0, 0.87); @@ -603,9 +618,9 @@ td > table > tbody > tr > td { .tabs > li[class~="active"], .tabs > li:hover { cursor: pointer; - background-color: white; border-bottom: 0.2rem solid #0099CC; color: #0099CC; + margin-bottom: -0.18751rem; } .tabs > li[class~="active"] > a { @@ -613,7 +628,7 @@ td > table > tbody > tr > td { } .tabs > li:hover { - border-bottom: 0.2rem solid #C9C9C9; + border-bottom: 0.18751rem solid #C9C9C9; } .cbi-tabmenu { @@ -677,6 +692,8 @@ td > table > tbody > tr > td { .cbi-value { padding: 1rem; + display: inline-block; + width: 100%; } .cbi-section-table-descr > .cbi-section-table-cell, @@ -697,6 +714,7 @@ td > table > tbody > tr > td { .cbi-map-descr { padding: 0.5rem; color: #999; + font-size: small; } /* luci */ @@ -735,8 +753,7 @@ td > table > tbody > tr > td { } .ifacebadge { - display: inline-block; - min-width: 8rem; + 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); @@ -914,6 +931,11 @@ small { font-size: 1.3rem; } +.cbi-optionals { + padding: 1rem 1rem 0 1rem; + border-top: 1px solid #CCC; +} + #diag-rc-output > pre { background-color: #f5f5f5; display: block; @@ -992,6 +1014,7 @@ header > .container > .pull-right > * { background: none; border: none; box-shadow: none; + overflow: hidden; } .node-main-login > .main .cbi-value-title { @@ -1016,6 +1039,19 @@ header > .container > .pull-right > * { float: right; } +.node-main-login > .main .cbi-value{ + display: block; +} + +.node-main-login > .main .cbi-value > *{ + display: inline-block !important; +} + +.node-main-login > .main .cbi-input-user, +.node-main-login > .main .cbi-input-password{ + min-width: 15rem; +} + .node-main-login footer{ bottom: 0; position: absolute; @@ -1081,6 +1117,11 @@ header > .container > .pull-right > * { margin-top: 0; } +/* fix network firewall*/ +.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select{ + min-width: 4rem; +} + .node-status-firewall fieldset, .node-system-software fieldset, .node-system-backup_flash_firmware fieldset { @@ -1349,3 +1390,36 @@ body.lang_pl.node-main-login .cbi-value-title { width: 100%; } } + +@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; + } +} + +@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; + } +} + +@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; + } +}
\ No newline at end of file diff --git a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js index 604c4da8a..a0f067595 100755 --- a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js +++ b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js @@ -201,9 +201,9 @@ if (!ul.is(":visible")) { menu.addClass("active"); ul.addClass("active"); - ul.stop(true).slideDown(); + ul.stop(true).slideDown("fast"); } else { - ul.slideUp(function () { + ul.stop(true).slideUp("fast", function () { menu.removeClass("active"); ul.removeClass("active"); }); @@ -274,16 +274,16 @@ var showSide = false; $(".showSide").click(function () { if (showSide){ - $(".darkMask").stop(true).fadeOut(); + $(".darkMask").stop(true).fadeOut("fast"); $(".main-left").stop(true).animate({ width: "0" - }); + },"fast"); showSide = false; }else{ - $(".darkMask").stop(true).fadeIn(); + $(".darkMask").stop(true).fadeIn("fast"); $(".main-left").stop(true).animate({ width: "15rem" - }); + },"fast"); showSide = true; } }); @@ -292,10 +292,10 @@ $(".darkMask").click(function () { if (showSide){ showSide = false; - $(".darkMask").stop(true).fadeOut(); + $(".darkMask").stop(true).fadeOut("fast"); $(".main-left").stop(true).animate({ width: "0" - }); + },"fast"); } }); @@ -342,4 +342,13 @@ break; } } + + + document.addEventListener("touchmove", function(evt){ + evt.preventDefault(); + }, false); + var container = document.getElementById("maincontent"); + container.addEventListener("touchmove", function(evt){ + evt.stopPropagation(); + }, false); })(jQuery); |