diff options
Diffstat (limited to 'themes')
6 files changed, 695 insertions, 129 deletions
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index c8ce19aff1..4a40f6d680 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -430,7 +430,6 @@ form .clearfix, form .cbi-value { margin-bottom: 18px; zoom: 1; - overflow: hidden; } form .clearfix:before, form .clearfix:after, @@ -477,6 +476,7 @@ input[type=checkbox], input[type=radio] { input, textarea, select, +.cbi-dropdown, .uneditable-input { display: inline-block; width: 210px; @@ -487,6 +487,13 @@ select, color: #808080; border: 1px solid #ccc; border-radius: 3px; + box-sizing: border-box; +} + +.cbi-dropdown { + min-width: 210px; + max-width: 400px; + width: auto; } select { @@ -1332,6 +1339,159 @@ footer { background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } +.cbi-dropdown { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-flex; + padding: 0; + cursor: pointer; + height: auto; + background: linear-gradient(#fff 0%, #e9e8e6 100%); + position: relative; + color: #404040; +} + +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + color: #404040; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + .btn.active, .btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -1423,7 +1583,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { opacity: 0.4; } -.alert-message, .errorbox { +.alert-message { position: relative; padding: 7px 15px; margin-bottom: 18px; @@ -1646,7 +1806,6 @@ table table td, background-color: #FFFFFF; border: 1px solid #CCCCCC; padding: 2px; - margin-left: 2px; background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; @@ -1712,7 +1871,7 @@ table table td, .zonebadge > em, .zonebadge > strong { - margin: 5px; + margin: 0 2px; display: inline-block; } @@ -1720,6 +1879,10 @@ table table td, width: 6em; } +.zonebadge > .ifacebadge { + margin-left: 2px; +} + .zonebadge-empty { border: 1px dashed #AAAAAA; color: #AAAAAA; @@ -1801,3 +1964,7 @@ div.cbi-value var, line-height: 6px; border: none; } + +html body.apply-overlay-active { + height: calc(100vh - 63px); +} diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index 39a55551ff..aaacf56b84 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -190,22 +190,20 @@ </div> </header> - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> - <div class="container"> + <div id="maincontent" class="container"> + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> <div class="alert-message warning"> <h4><%:No password set!%></h4> - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br> - <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> + <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p> + <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> </div> - </div> - <%- end -%> + <%- end -%> - <noscript> - <div class="alert-message warning"> - <strong><%:JavaScript required!%></strong><br /> - <%:You must enable JavaScript in your browser or LuCI will not work properly.%> - </div> - </noscript> + <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="maincontent" class="container"> <% if category then render_tabmenu(category, cattree) end %> 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 cc9caac556..a9585cf40e 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 @@ -107,7 +107,8 @@ select { } select, -input { +input, +.cbi-dropdown { background-color: transparent; color: rgba(0, 0, 0, .87); border: none; @@ -157,7 +158,7 @@ header { transition: box-shadow .2s; float: left; position: fixed; - z-index: 101; + z-index: 2000; } footer { @@ -287,10 +288,9 @@ header > .container > .brand { color: black; } -.errorbox, .alert-message { margin: 2rem 0 0 0; - padding: 2rem; + padding: 1rem; border: 0; font-weight: normal; font-style: normal; @@ -303,16 +303,19 @@ header > .container > .brand { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } -.errorbox { - color: #fff; - background-color: #f0ad4e; - border-color: #eea236; -} - .error { color: red; } +.alert-message > h4 { + font-weight: bold; + font-size: 110%; +} + +.alert-message > * { + margin: .5rem 0; +} + #maincontent > .container > div:nth-child(1).alert-message.warning > a { font: inherit; overflow: visible; @@ -450,11 +453,7 @@ fieldset { font-style: normal; line-height: 1; font-family: inherit; - min-width: inherit; - 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); @@ -565,7 +564,7 @@ td > table > tbody > tr > td, /* button style */ -.cbi-button { +.btn, .cbi-button { -webkit-appearance: none; text-transform: uppercase; color: rgba(0, 0, 0, 0.87); @@ -588,8 +587,13 @@ td > table > tbody > tr > td, user-select: none; font-size: 0.8rem; width: auto !important; + display: inline-block; + text-decoration: none; } +.btn:hover, +.btn:focus, +.btn:active, .cbi-button:hover, .cbi-button:focus, .cbi-button:active { @@ -599,15 +603,19 @@ td > table > tbody > tr > td, color: rgba(0, 0, 0, 0.87); } +.btn:hover, +.btn:focus, .cbi-button:hover, .cbi-button:focus { box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } +.btn:active, .cbi-button:active { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } +.btn:disabled, .cbi-button:disabled { cursor: not-allowed; pointer-events: none; @@ -615,6 +623,7 @@ td > table > tbody > tr > td, box-shadow: none; } +.btn + .btn, form.inline + form.inline, .cbi-button + .cbi-button { margin-left: 0.6rem; @@ -793,6 +802,172 @@ form.inline + form.inline, font-size: small; } + +.cbi-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + padding: 0; + height: auto; +} + +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open { + border: 2px outset #eee; + flex-basis: 15px; + background: #eee; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; + height: auto; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; + align-items: center; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + +.cbi-dropdown .zonebadge { + width: 100%; +} + +.cbi-dropdown[open] .zonebadge { + width: auto; +} + + /* luci */ .hidden { @@ -828,17 +1003,20 @@ form.inline + form.inline, } /* select */ -.cbi-value-field .cbi-input-select { +.cbi-value-field .cbi-dropdown { min-width: 15rem; } +.cbi-value-field .cbi-input-select { + width: 15rem; +} + .ifacebadge { 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); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background: #fff; } td > .ifacebadge, @@ -847,12 +1025,17 @@ td > .ifacebadge, font-size: 0.9rem; } +.ifacebadge > em, .ifacebadge > img { - float: right; - margin: 0 0.3rem; + display: inline-block; + margin: 0 .2rem; align-self: start; } +.ifacebadge > img + img { + margin: 0 .2rem 0 0; +} + .network-status-table { display: flex; flex-wrap: wrap; @@ -1027,8 +1210,8 @@ td > .ifacebadge, } .zonebadge > .ifacebadge { - padding: 0.2rem 1rem; - margin: 0.3rem; + padding: .2rem .3rem; + margin: 0.1rem 0.2rem; border: 1px solid #6C6C6C; } @@ -1038,6 +1221,12 @@ td > .ifacebadge, margin-top: 0.3rem; } +.zonebadge > em, +.zonebadge > strong { + margin: 0 0.2rem; + display: inline-block; +} + .cbi-value-field .cbi-input-checkbox, .cbi-value-field .cbi-input-radio { margin-top: 0.5rem; @@ -1062,10 +1251,14 @@ td > .ifacebadge, margin-top: -0.5rem; } -.cbi-section-table-row > .cbi-value-field .cbi-input-select { +.cbi-section-table-row > .cbi-value-field .cbi-dropdown { min-width: 7rem; } +.cbi-section-table-row > .cbi-value-field .cbi-input-select { + width: 7rem; +} + .cbi-section-create > .cbi-button-add { margin: 0.5rem; } @@ -1336,6 +1529,7 @@ body.lang_pl.node-main-login .cbi-value-title { width: calc(100% - 13rem); } + .btn, .cbi-button { padding: 0.3rem 0.6rem; font-size: 0.8rem; @@ -1595,8 +1789,6 @@ body.lang_pl.node-main-login .cbi-value-title { line-height: 1; font-family: inherit; min-width: inherit; - 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); @@ -1615,33 +1807,36 @@ body.lang_pl.node-main-login .cbi-value-title { @media screen and (min-width: 992px) { .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 20rem; + .cbi-value input[type="text"], + .cbi-value-field .cbi-input-select { + width: 20rem; } - .cbi-value-field .cbi-input-select { + .cbi-value-field .cbi-dropdown { min-width: 20rem; } } @media screen and (min-width: 1280px) { .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 22rem; + .cbi-value input[type="text"], + .cbi-value-field .cbi-input-select { + width: 22rem; } - .cbi-value-field .cbi-input-select { + .cbi-value-field .cbi-dropdown { min-width: 22rem; } } @media screen and (min-width: 1600px) { .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 25rem; + .cbi-value input[type="text"], + .cbi-value-field .cbi-input-select { + width: 25rem; } - .cbi-value-field .cbi-input-select { + .cbi-value-field .cbi-dropdown { min-width: 25rem; } } 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 0aca882c05..b6341a2c35 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -183,35 +183,35 @@ <!DOCTYPE html> <html lang="<%=luci.i18n.context.lang%>"> <head> - <meta charset="utf-8"> - <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> - <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> - <meta name="format-detection" content="telephone=no, email=no"/> - <meta name="apple-mobile-web-app-capable" content="yes"> - <meta name="mobile-web-app-capable" content="yes"> - <meta name="x5-fullscreen" content="true"> - <meta name="full-screen" content="yes"> - <meta name="x5-page-mode" content="app"> - <meta name="browsermode" content="application"> - <meta name="theme-color" content="#0099CC"> - <meta name="msapplication-tap-highlight" content="no"> - <meta name="msapplication-TileColor" content="#0099CC"> - - <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> - <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> - <meta name="msapplication-TileImage" content="<%=media%>/logo.png"/> - <link rel="icon" href="<%=media%>/logo.png" sizes="144x144"> - <link rel="apple-touch-icon-precomposed" href="<%=media%>/logo.png" sizes="144x144"> - - <link rel="stylesheet" href="<%=media%>/css/style.css"> - <link rel="shortcut icon" href="<%=media%>/favicon.ico"> - <% if node and node.css then %> - <link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> - <% end -%> - <% if css then %> - <style title="text/css"><%= css %></style> - <% end -%> - <script src="<%=resource%>/xhr.js"></script> + <meta charset="utf-8"> + <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> + <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> + <meta name="format-detection" content="telephone=no, email=no"/> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="x5-fullscreen" content="true"> + <meta name="full-screen" content="yes"> + <meta name="x5-page-mode" content="app"> + <meta name="browsermode" content="application"> + <meta name="theme-color" content="#0099CC"> + <meta name="msapplication-tap-highlight" content="no"> + <meta name="msapplication-TileColor" content="#0099CC"> + + <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> + <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> + <meta name="msapplication-TileImage" content="<%=media%>/logo.png"/> + <link rel="icon" href="<%=media%>/logo.png" sizes="144x144"> + <link rel="apple-touch-icon-precomposed" href="<%=media%>/logo.png" sizes="144x144"> + + <link rel="stylesheet" href="<%=media%>/css/style.css"> + <link rel="shortcut icon" href="<%=media%>/favicon.ico"> + <% if node and node.css then %> + <link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> + <% end -%> + <% if css then %> + <style title="text/css"><%= css %></style> + <% end -%> + <script src="<%=resource%>/xhr.js"></script> </head> <body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>"> <header> @@ -228,26 +228,27 @@ </div> </header> <div class="main"> - <div style="" class="loading"><span><div class="loading-img"></div>Loading...</span></div> - <div class="main-left"> + <div style="" class="loading"><span><div class="loading-img"></div>Loading...</span></div> + <div class="main-left"> <% render_topmenu() %> - </div> + </div> <div class="main-right"> - <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") then -%> - <div class="alert-message warning"> - <h4><%:No password set!%></h4> - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br> - <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> - </div> - <%- end -%> - <% if category then render_tabmenu(category, cattree) end %> + <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") then -%> + <div class="alert-message warning"> + <h4><%:No password set!%></h4> + <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p> + <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> + </div> + <%- end -%> <noscript> <div class="alert-message warning"> - <strong><%:JavaScript required!%></strong><br /> - <%:You must enable JavaScript in your browser or LuCI will not work properly.%> + <h4><%:JavaScript required!%></h4> + <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> </div> - </noscript> + </noscript> + + <% if category then render_tabmenu(category, cattree) end %> diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index b474bb9fe1..1d5ac8ab24 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -27,6 +27,7 @@ body { * { margin: 0; padding: 0; + box-sizing: border-box; } .table { display: table; } @@ -181,6 +182,33 @@ code { background-color: white; } +.alert-message { + font-size: 9pt; + font-weight: normal; + padding: .5em; + border-radius: 3px; + color: #000; +} + +.alert-message.notice { + background: linear-gradient(#ccc 0%, #eee 100%); + color: #4a6b7c; +} + +.alert-message.warning { + background: linear-gradient(#dda 0%, #dd8 100%); + color: #c00; +} + +.alert-message > * { + margin: .5em; +} + +.alert-message > h4 { + font-weight: bold; + font-size: 10pt; +} + div.hostinfo { float: left; margin: 0; @@ -429,13 +457,20 @@ select:hover { color: #000000; } +input[type=text], +input[type=password] { + padding: 1px 3px; +} + select, input[type=text], input[type=password] { + font-size: inherit; width: 20em; } .td select, +.td .cbi-dropdown, .td input[type=text], .td input[type=password] { width: 99%; @@ -447,18 +482,23 @@ img.cbi-image-button { vertical-align: middle; } -.cbi-button { +.btn, .cbi-button { padding: 2px; border-radius: 3px; border: 1px solid #aaa; background: #eee 1px center no-repeat; + text-decoration: none; + color: #000; + display: inline-block; } -.cbi-button:hover { +.btn:hover, .cbi-button:hover { border-color: #4a6b7c; background-color: #fff; } +.btn[disabled], +.btn[disabled]:hover, .cbi-button[disabled], .cbi-button[disabled]:hover { opacity: .6; @@ -741,6 +781,7 @@ div.cbi-section-create { vertical-align: top; } +div.cbi-section-create .btn, div.cbi-section-create .cbi-button { margin: 0.25em; } @@ -812,13 +853,6 @@ div.cbi-section-remove { vertical-align: bottom; } -div.cbi-error { - font-size: 95%; - font-weight: bold; - color: #ff0000; - background-color: #ffffff; -} - .td.cbi-value-error { border-color: red; } @@ -894,6 +928,169 @@ div.cbi-tab-descr { padding: 0.5em 0.5em 0.5em 2em; } + +.cbi-dropdown { + border: 1px inset #000; + display: inline-flex; + cursor: pointer; + background: #eee; + position: relative; + padding: 0; + color: #000; + min-width: 20em; +} + +.cbi-dropdown:hover { + background: #fff; +} + +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open { + border: 2px outset #eee; + flex-basis: 15px; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; + align-items: center; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + + .left { text-align: left !important; } @@ -934,17 +1131,6 @@ div.cbi-tab-descr { padding: 0.5em; } -.errorbox { - border: 1px solid #FF0000; - background-color: #FFCCCC; - padding: 5px; - margin-bottom: 5px; -} - -.errorbox a { - color: #000000 !important; -} - .ifacebadge, .ifacebox { display: inline-flex; @@ -964,9 +1150,16 @@ div.cbi-tab-descr { background: #90c0e0; } -.ifacebadge > img { +.ifacebadge, .zonebadge { + align-items: center; +} + +.ifacebadge > img, +.ifacebadge > em { margin-right: 5px; align-self: start; + display: inline-block; + height: 16px; } .ifacebadge-active { @@ -1000,7 +1193,7 @@ div.cbi-tab-descr { .network-status-table .ifacebox-body { display: flex; flex-direction: column; - height: 100%; + flex: 1 0; } .network-status-table .ifacebox-body > span { @@ -1026,12 +1219,12 @@ div.cbi-tab-descr { display: inline-block; white-space: nowrap; cursor: pointer; + border-radius: 3px; } -.zonebadge em, -.zonebadge strong { +.zonebadge > em, +.zonebadge > strong { margin: 3px; - display: inline-block; } .zonebadge input { @@ -1039,6 +1232,18 @@ div.cbi-tab-descr { height: 1.5em; } +.zonebadge .ifacebadge, +.cbi-dropdown .ifacebadge { + margin: 0 .125em; +} + +.zonebadge .ifacebadge img, +.zonebadge .ifacebadge em, +.cbi-dropdown .ifacebadge img, +.cbi-dropdown .ifacebadge em { + margin: 0 1px; +} + .zonebadge-empty { border: 1px dashed #AAAAAA; color: #AAAAAA; diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index 5b39f05af7..cbf02a76cd 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -167,16 +167,16 @@ <div id="maincontent"> <noscript> - <div class="errorbox"> - <strong><%:JavaScript required!%></strong><br /> - <%:You must enable JavaScript in your browser or LuCI will not work properly.%> + <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> <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" then -%> - <div class="errorbox"> - <strong><%:No password set!%></strong><br /> - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br /> - <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> + <div class="alert-message warning"> + <h4><%:No password set!%></h4> + <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p> + <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> </div> <%- end -%> |