diff options
Diffstat (limited to 'themes/luci-theme-material')
| -rw-r--r-- | themes/luci-theme-material/htdocs/luci-static/material/brand.png | bin | 6249 -> 3939 bytes | |||
| -rw-r--r-- | themes/luci-theme-material/htdocs/luci-static/material/cascade.css | 31 | ||||
| -rw-r--r-- | themes/luci-theme-material/htdocs/luci-static/material/custom.css | 6 | ||||
| -rw-r--r-- | themes/luci-theme-material/luasrc/view/themes/material/header.htm | 101 | ||||
| -rw-r--r-- | themes/luci-theme-material/ucode/template/themes/material/footer.ut (renamed from themes/luci-theme-material/luasrc/view/themes/material/footer.htm) | 20 | ||||
| -rw-r--r-- | themes/luci-theme-material/ucode/template/themes/material/header.ut | 96 |
6 files changed, 126 insertions, 128 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 differindex 1e903c5f96..749f8191b6 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/brand.png +++ 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 18ae319d7e..fa2f60ebf1 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -76,7 +76,8 @@ background: inherit; } -.td[width="33%"] { +.td[width="33%"], +.td[width="33%"]~.td { padding: 1.1em; } @@ -199,6 +200,7 @@ input, background-color: transparent; background-image: none; box-shadow: none; + align-items: center; } select, @@ -402,7 +404,7 @@ header > .fill > .container > #logo { header > .fill > .container > #logo > img { width: calc(0% + 10rem); - margin-top: -.1rem; + margin-top: -.5rem; } header > .fill > .container > .brand { @@ -464,7 +466,7 @@ header > .fill > .container > .status > * { } #modemenu > li > a.active { - background-color: #5bc0de !important; + background-color: #002B49 !important; } #modemenu > li.divider { @@ -494,7 +496,7 @@ header > .fill > .container > .status > * { .notice, [data-indicator]:not([data-style="inactive"]) { - background-color: #5bc0de !important; + background-color: #002B49 !important; } .error { @@ -582,8 +584,7 @@ header > .fill > .container > .status > * { } .main > .main-left > .nav > .slide > .menu, -.main > .main-left > .nav > li > [data-title="Logout"], -.main > .main-left > .nav > li > [data-title="Dashboard"] { +.main > .main-left > .nav > li > [data-title] { font-size: 1.15rem; font-weight: 500; display: flex; @@ -1650,7 +1651,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { .cbi-progressbar::after { font-family: monospace; - font-size: 1.3em; font-weight: bold; font-size-adjust: .38; line-height: normal; @@ -1735,6 +1735,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { .modal p { padding-left: .25rem; word-break: break-word; + color: #fff; } .modal label.btn { @@ -1836,6 +1837,7 @@ body.modal-overlay-active #modal_overlay { .ifacebadge { display: inline-flex; + gap: .2rem; padding: .5rem .8rem; border-bottom: thin solid #ccc; background: #eee; @@ -1852,11 +1854,6 @@ td > .ifacebadge, .ifacebadge > img { display: inline-block; align-self: flex-start; - margin: 0 .2rem; -} - -.ifacebadge > img + img { - margin: 0 .2rem 0 0; } .network-status-table { @@ -2341,6 +2338,12 @@ input[name="nslookup"] { margin-bottom: .2rem; } +.control-group { + display: flex; + flex-wrap: wrap; + gap: 2px; +} + [data-page="admin-system-opkg"] div.btn { line-height: 3; display: inline; @@ -2650,7 +2653,7 @@ input[name="nslookup"] { .main > .main-left > .nav > li, .main > .main-left > .nav > li a, .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { + .main > .main-left > .nav > li > [data-title] { font-size: .9rem; } @@ -2929,7 +2932,7 @@ input[name="nslookup"] { } .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { + .main > .main-left > .nav > li > [data-title] { font-size: 1.2rem; } diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css index 7a5bbb93e8..b2515fb5aa 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css @@ -1,6 +1,6 @@ :root { - --main-color: #09c; - --header-bg: #09c; + --main-color: #00B5E2; + --header-bg: #00B5E2; --header-color: #fff; --bar-bg: #5bc0de; --menu-bg-color: #fff; @@ -8,6 +8,6 @@ --menu-color-hover: #202124; --main-menu-color: #202124; --submenu-bg-hover: #d4d4d4; - --submenu-bg-hover-active: #09c; + --submenu-bg-hover-active: #00B5E2; --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; } diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm deleted file mode 100644 index a81991d0a0..0000000000 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ /dev/null @@ -1,101 +0,0 @@ -<%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI - - luci-theme-material - Copyright 2015-2017 Lutty Yang <lutty@wcan.in> - - 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-2016 Jo-Philipp Wich <jow@openwrt.org> - Copyright 2012 David Menting <david@nut-bolt.nl> - - MUI: - https://github.com/muicss/mui - - Licensed to the public under the Apache License 2.0 --%> - -<% - local sys = require "luci.sys" - local util = require "luci.util" - local http = require "luci.http" - local disp = require "luci.dispatcher" - local ver = require "luci.version" - - local boardinfo = util.ubus("system", "board") or { } - - local node = disp.context.dispatched - local path = table.concat(disp.context.path, "-") - - http.prepare_content("text/html; charset=UTF-8") --%> -<!DOCTYPE html> -<html lang="<%=luci.i18n.context.lang%>"> -<head> -<meta charset="utf-8"> -<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> -<meta name="apple-mobile-web-app-capable" content="yes"> -<meta name="mobile-web-app-capable" content="yes"> -<meta name="theme-color" content="#09c"> -<meta name="msapplication-tap-highlight" content="no"> -<meta name="msapplication-TileColor" content="#09c"> -<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> -<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> -<link rel="stylesheet" href="<%=media%>/cascade.css"> -<link rel="shortcut icon" href="<%=media%>/favicon.ico"> -<% if node and node.css then %> -<link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> -<% end -%> -<script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script> -<script src="<%=resource%>/cbi.js"></script> -<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> -<% if css then %><style title="text/css"> -<%= css %> -</style> -<% end -%> -</head> -<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>"> -<header> - <div class="fill"> - <div class="container"> - <span class="showSide"></span> - <a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"><img src="<%=media%>/brand.png" alt="OpenWrt"></a> - <a class="brand" href="#"><%=striptags(boardinfo.hostname or "?")%></a> - <span class="status" id="indicators"></span> - </div> - </div> -</header> -<div class="main"> - <div style="" class="loading"><span><div class="loading-img"></div><%:Collecting data...%></span></div> - <div class="main-left" id="mainmenu" style="display:none"></div> - <div class="main-right"> - <div class="modemenu-buttons" style="display:none"> - <ul id="modemenu"></ul> - </div> - <div class="darkMask"></div> - <div id="maincontent"> - <div class="container"> - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and path ~= "admin-system-admin-password" then -%> - <%- end -%> - - <%- if boardinfo.rootfs_type == "initramfs" then -%> - <div class="alert-message warning"> - <h4><%:Sytem running in recovery (initramfs) mode.%></h4> - <p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p> - <% if disp.lookup("admin/system/flash") then %> - <div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div> - <% end %> - </div> - <%- end -%> - - <noscript> - <div class="alert-message warning"> - <h4><%:JavaScript required!%></h4> - <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> - </div> - </noscript> - - <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm b/themes/luci-theme-material/ucode/template/themes/material/footer.ut index f572504f4b..9249427a43 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm +++ b/themes/luci-theme-material/ucode/template/themes/material/footer.ut @@ -1,4 +1,4 @@ -<%# +{# Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI luci-theme-material @@ -16,17 +16,17 @@ https://github.com/muicss/mui Licensed to the public under the Apache License 2.0 --%> - -<% local ver = require "luci.version" %> - </div> - <footer class="mobile-hide"> - <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %> - </footer> +-#} + + </div> + <footer class="mobile-hide"> + <a href="https://github.com/openwrt/luci">Powered by {{ version.luciname }} ({{ version.luciversion }})</a> / + {{ version.distname }} {{ version.distversion }} ({{ version.distrevision }}) + </footer> + </div> </div> -</div> -<script type="text/javascript">L.require('menu-material')</script> + <script type="text/javascript">L.require('menu-material')</script> </body> </html> diff --git a/themes/luci-theme-material/ucode/template/themes/material/header.ut b/themes/luci-theme-material/ucode/template/themes/material/header.ut new file mode 100644 index 0000000000..24b2c73517 --- /dev/null +++ b/themes/luci-theme-material/ucode/template/themes/material/header.ut @@ -0,0 +1,96 @@ +{# + Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + + luci-theme-material + Copyright 2015-2017 Lutty Yang <lutty@wcan.in> + + 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-2016 Jo-Philipp Wich <jow@openwrt.org> + Copyright 2012 David Menting <david@nut-bolt.nl> + + MUI: + https://github.com/muicss/mui + + Licensed to the public under the Apache License 2.0 +-#} + +{% + import { getuid, getspnam } from 'luci.core'; + + const boardinfo = ubus.call('system', 'board'); + const hostname = striptags(boardinfo?.hostname ?? '?'); + + http.prepare_content('text/html; charset=UTF-8'); +-%} + +<!DOCTYPE html> +<html lang="{{ dispatcher.lang }}"> +<head> +<meta charset="utf-8"> +<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> +<meta name="apple-mobile-web-app-capable" content="yes"> +<meta name="mobile-web-app-capable" content="yes"> +<meta name="theme-color" content="#09c"> +<meta name="msapplication-tap-highlight" content="no"> +<meta name="msapplication-TileColor" content="#09c"> +<meta name="application-name" content="{{ hostname }} - LuCI"> +<meta name="apple-mobile-web-app-title" content="{{ hostname }} - LuCI"> +<link rel="stylesheet" href="{{ media }}/cascade.css"> +<link rel="shortcut icon" href="{{ media }}/favicon.ico"> +{% if (node?.css): %} +<link rel="stylesheet" href="{{ resource }}/{{ node.css }}"> +{% endif %} +<script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script> +<script src="{{ resource }}/cbi.js"></script> +<title>{{ hostname }}{{ node?.title ? ` - ${striptags(node.title)}` : '' }} - LuCI</title> +{% if (css): %} +<style title="text/css">{{ css }}</style> +{% endif %} +</head> +<body class="lang_{{ dispatcher.lang }} {{ ctx.authsession ? 'logged-in' : '' }} {{ length(ctx.path) ? `node-${join('-', ctx.path)}` : 'node-main-login' }}" data-page="{{ entityencode(join('-', ctx.path), true) }}"> +<header> + <div class="fill"> + <div class="container"> + <span class="showSide"></span> + <a id="logo" href="{{ ctx.authsession ? dispatcher.build_url('admin/status/overview') : '#' }}"><img src="{{ media }}/brand.png" alt="OpenWrt"></a> + <a class="brand" href="#">{{ hostname }}</a> + <span class="status" id="indicators"></span> + </div> + </div> +</header> +<div class="main"> + <div style="" class="loading"><span><div class="loading-img"></div>{{ _('Collecting data...') }}</span></div> + <div class="main-left" id="mainmenu" style="display:none"></div> + <div class="main-right"> + <div class="modemenu-buttons" style="display:none"> + <ul id="modemenu"></ul> + </div> + <div class="darkMask"></div> + <div id="maincontent"> + <div class="container"> + {% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %} + <!-- no password set --> + {% endif %} + + {% if (boardinfo?.rootfs_type == "initramfs"): %} + <div class="alert-message warning"> + <h4>{{ _('System running in recovery (initramfs) mode.') }}</h4> + <p>{{ _('No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade') }}</p> + {% if (dispatcher.lookup("admin/system/flash")): %} + <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div> + {% endif %} + </div> + {% endif %} + + <noscript> + <div class="alert-message warning"> + <h4>{{ _('JavaScript required!') }}</h4> + <p>{{ _('You must enable JavaScript in your browser or LuCI will not work properly.') }}</p> + </div> + </noscript> + + <div id="tabmenu" style="display:none"></div> |
