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 | 78 | ||||
| -rw-r--r--[-rwxr-xr-x] | themes/luci-theme-material/luasrc/view/themes/material/footer.htm | 67 | ||||
| -rw-r--r-- | themes/luci-theme-material/luasrc/view/themes/material/header.htm | 3 |
4 files changed, 69 insertions, 79 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 000000000..49fcb7d25 --- /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 fa0316343..8fa45d980 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 { @@ -384,7 +400,8 @@ header > .fill > .container > .brand { } .main > .main-left > .nav > li:nth-last-child(1) { - margin-top: 2rem; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1.2rem; } @@ -1537,6 +1554,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 +1770,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 +1803,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 +1820,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/footer.htm b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm index d69417e88..544866dde 100755..100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm @@ -1,21 +1,21 @@ <%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI - luci-theme-material - Copyright 2015 Lutty Yang <lutty@wcan.in> + luci-theme-material + Copyright 2015 Lutty Yang <lutty@wcan.in> - Have a bug? Please create an issue here on GitHub! - https://github.com/LuttyYang/luci-theme-material/issues + Have a bug? Please create an issue here on GitHub! + https://github.com/LuttyYang/luci-theme-material/issues - luci-theme-bootstrap: - Copyright 2008 Steven Barth <steven@midlink.org> - Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> - Copyright 2012 David Menting <david@nut-bolt.nl> + luci-theme-bootstrap: + Copyright 2008 Steven Barth <steven@midlink.org> + Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> + Copyright 2012 David Menting <david@nut-bolt.nl> - MUI: - https://github.com/muicss/mui + MUI: + https://github.com/muicss/mui - Licensed to the public under the Apache License 2.0 + Licensed to the public under the Apache License 2.0 -%> <% @@ -26,26 +26,27 @@ local tree = disp.node() local categories = disp.node_childs(tree) %> - </div> - <footer class="mobile-hide"> - <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / - <%= ver.distversion %> - <% if #categories > 1 then %> - <ul class="breadcrumb pull-right" id="modemenu"> - <% for i, r in ipairs(categories) do %> - <li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li> - <% end %> - </ul> - <% end %> - </footer> - </div> - </div> - - <script> - // thanks for Jo-Philipp Wich <jow@openwrt.org> - var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>; - </script> - <script src="<%=media%>/js/jquery.min.js"></script> - <script src="<%=media%>/js/script.js"></script> + </div> + <footer class="mobile-hide"> + <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %> + <% if #categories > 1 then %> + <ul class="breadcrumb pull-right" id="modemenu"> + <% for i, r in ipairs(categories) do %> + <li<% if request[1] == r then %> class="active"<%end%>> + <a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> + <span class="divider">|</span> + </li> + <% end %> + </ul> + <% end %> + </footer> + </div> +</div> +<script> + // thanks for Jo-Philipp Wich <jow@openwrt.org> + var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>; +</script> +<script src="<%=media%>/js/jquery.min.js"></script> +<script src="<%=media%>/js/script.js"></script> </body> </html> 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 564c680f1..1f1df9c9a 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> |
