diff options
| -rw-r--r-- | themes/luci-theme-material/htdocs/luci-static/material/brand.png | bin | 0 -> 7026 bytes | |||
| -rw-r--r-- | themes/luci-theme-material/htdocs/luci-static/material/cascade.css | 75 | ||||
| -rw-r--r-- | themes/luci-theme-material/luasrc/view/themes/material/header.htm | 3 |
3 files changed, 33 insertions, 45 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/brand.png b/themes/luci-theme-material/htdocs/luci-static/material/brand.png Binary files differnew file mode 100644 index 0000000000..49fcb7d257 --- /dev/null +++ b/themes/luci-theme-material/htdocs/luci-static/material/brand.png diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index fa0316343b..c6e893715d 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -183,7 +183,6 @@ header, .main { } header { - height: 4rem; box-shadow: 0 2px 5px rgba(0, 0, 0, .26); transition: box-shadow .2s; float: left; @@ -205,7 +204,7 @@ footer > a { } .main { - top: 4rem; + top: 5rem; bottom: 0rem; position: relative; height: 100%; @@ -255,7 +254,7 @@ footer > a { .main-left { float: left; - top: 4rem; + top: 5rem; width: 15%; width: calc(0% + 15rem); height: 100%; @@ -288,19 +287,36 @@ footer > a { header { background: var(--header-bg, #0099CC); color: var(--header-color, #FFFFFF); + height: 5rem; } header > .fill > .container { - margin-top: 0.5rem; - padding: 0.5rem 1rem 0 1rem; + padding-top: 0.25rem; + padding-right: 1rem; + padding-bottom: 0.25rem; + display: flex; + align-items: center; + height: 5rem; } header > .fill > .container > .brand { - font-size: 1.4rem; + font-size: 2rem; color: var(--header-color, #FFFFFF); text-decoration: none; cursor: default; - vertical-align: text-bottom; + margin-left: 1rem; +} + +header > .fill > .container > img{ + max-height: 4.5rem; + width: calc(0% + 13rem); + margin: 1rem; +} + +header > .fill > .container > .status { + display: flex; + justify-content: flex-end; + flex-grow: 8; } .danger { @@ -1537,6 +1553,10 @@ header > .container > .pull-right > * { background-color: #14CE14; } +#xhr_poll_status { + display: flex; +} + .label { padding: 0.3rem 0.8rem; font-size: 0.8rem; @@ -1749,14 +1769,6 @@ body.lang_pl.node-main-login .cbi-value-title { } @media screen and (max-width: 1600px) { - .main-left { - width: calc(0% + 13rem); - } - - .main-right { - width: calc(100% - 13rem); - } - .btn, .cbi-button { padding: 0.3rem 0.6rem; @@ -1790,29 +1802,10 @@ body.lang_pl.node-main-login .cbi-value-title { } @media screen and (max-width: 1280px) { - header { - height: 3.5rem; - } - header > .container { margin-top: 0.25rem; } - .main { - top: 3.5rem; - height: calc(100% - 3.5rem); - } - - .main-left { - width: calc(0% + 13rem); - top: 3.5rem; - height: calc(100% - 3.5rem); - } - - .main-right { - width: calc(100% - 13rem); - } - .cbi-tabmenu > li > a, .tabs > li > a { padding: 0.2rem 0.5rem; } @@ -1826,19 +1819,13 @@ body.lang_pl.node-main-login .cbi-value-title { 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) { + header > .fill > .container > img { + display: none; + } + .main-left { width: 0; position: fixed; diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm index 564c680f1d..1f1df9c9ad 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -215,8 +215,9 @@ <div class="fill"> <div class="container"> <span class="showSide"></span> + <img src="<%=media%>/brand.png"/> <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a> - <div class="pull-right"> + <div class="status"> <% render_changes() %> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> <span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span> |
