diff options
Diffstat (limited to 'themes/luci-theme-material')
4 files changed, 162 insertions, 135 deletions
diff --git a/themes/luci-theme-material/Makefile b/themes/luci-theme-material/Makefile index 0fdd55edd4..67bc45463b 100644 --- a/themes/luci-theme-material/Makefile +++ b/themes/luci-theme-material/Makefile @@ -7,7 +7,7 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Material Theme -LUCI_DEPENDS:= +LUCI_DEPENDS:=+luci-base define Package/luci-theme-material/postrm #!/bin/sh 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 fa2f60ebf1..b2eb0602eb 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -181,7 +181,7 @@ select { padding: .36rem .8rem; color: #555; border: thin solid #ccc; - background-color: #fff; + background-color: var(--white-color); background-image: none; } @@ -212,8 +212,7 @@ select, select:not([multiple="multiple"]):focus, input:not(.cbi-button):focus, .cbi-dropdown:focus { - border-color: #09c; - border-color: var(--main-color); + border-color: var(--primary-color); } .cbi-dropdown, @@ -345,12 +344,9 @@ small { top: 4rem; float: left; overflow-x: auto; - width: 15%; width: calc(0% + 15rem); - height: 100%; height: calc(100% - 4rem); - background-color: #fff; - background-color: var(--menu-bg-color); + background-color: var(--white-color); transition: visibility 400ms, width 400ms; } @@ -383,10 +379,8 @@ small { } header { - color: #fff; - color: var(--header-color); - background: #09c; - background: var(--header-bg); + color: var(--secondary-color); + background: var(--primary-color); } header > .fill > .container { @@ -413,8 +407,7 @@ header > .fill > .container > .brand { cursor: default; vertical-align: text-bottom; text-decoration: none; - color: #fff; - color: var(--header-color); + color: var(--white-color); } header > .fill > .container > .status { @@ -436,10 +429,8 @@ header > .fill > .container > .status > * { display: flex; flex-wrap: wrap; align-items: center; - color: #fff; - color: var(--header-color); - background: #09c; - background: var(--header-bg); + color: var(--white-color); + background: var(--secondary-color); padding: .5rem; transition: box-shadow .2s; box-shadow: 0 2px 5px rgb(0 0 0 / 26%); @@ -459,22 +450,22 @@ header > .fill > .container > .status > * { white-space: nowrap; text-decoration: none; text-transform: uppercase; - color: #fff !important; + color: var(--white-color) !important; border-radius: 3px; background-color: #bfbfbf; text-shadow: none; } #modemenu > li > a.active { - background-color: #002B49 !important; + background-color: var(--dark-blue-color) !important; } #modemenu > li.divider { margin-left: .25rem; margin-right: .25rem; - border: .5rem solid var(--submenu-bg-hover); - border-left: 1px solid var(--submenu-bg-hover); - border-right: 1px solid var(--submenu-bg-hover); + border: .5rem solid var(--gray-color); + border-left: 1px solid var(--gray-color); + border-right: 1px solid var(--gray-color); border-radius: 1rem; } @@ -482,27 +473,6 @@ header > .fill > .container > .status > * { display: flex; } -.danger { - background-color: #ff7d60 !important; -} - -.warning { - background-color: #f0e68c !important; -} - -.success { - background-color: #5cb85c !important; -} - -.notice, -[data-indicator]:not([data-style="inactive"]) { - background-color: #002B49 !important; -} - -.error { - color: #f00; -} - .alert, .alert-message { font-weight: bold; @@ -510,7 +480,6 @@ header > .fill > .container > .status > * { padding: 1rem; border: 0; border-radius: 0 !important; - background-color: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); text-shadow: 1px 1px rgba(0, 0, 0, .1); } @@ -528,6 +497,44 @@ header > .fill > .container > .status > * { padding: .3rem .6rem; } +.alert-message.notice, +.label.notice { + background-color: var(--notice-color); + color: var(--on-notice-color); +} + +.alert-message.danger, +.btn.danger, +.label.danger { + background-color: var(--danger-color); + color: var(--on-danger-color); +} + +.alert-message.warning, +.btn.warning, +.label.warning { + background-color: var(--warning-color); + color: var(--on-warning-color); +} + +.alert-message.success, +.btn.success, +.label.success { + background-color: var(--success-color); + color: var(--on-success-color); +} + +.alert-message.error, +.btn.error, +.label.error { + background-color: var(--on-error-color); + color: var(--error-color); +} + +[data-indicator]:not([data-style="inactive"]) { + background-color: var(--notice-color) !important; +} + .container .alert, .container .alert-message { margin-top: 1rem; @@ -555,16 +562,14 @@ header > .fill > .container > .status > * { .main > .main-left > .nav > li a { display: block; color: #5f6368; - color: var(--menu-color); } .main > .main-left > .nav > li.active > a { - color: #fff; + color: var(--white-color); } .main > .main-left > .nav > li.active { - background-color: #09c; - background-color: var(--submenu-bg-hover-active); + background-color: var(--primary-color); } .main > .main-left > .nav > li.slide.active { @@ -592,8 +597,7 @@ header > .fill > .container > .status > * { width: 100%; padding: .5rem 1rem; text-decoration: none; - color: #202124; - color: var(--main-menu-color); + color: var(--black-color-low); } .main > .main-left > .nav > .slide > .menu::before { @@ -631,8 +635,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before .main > .main-left > .nav > li:hover, .main > .main-left > .nav > .slide > .menu:hover { - background: #d4d4d4; - background: var(--submenu-bg-hover); + background: var(--gray-color); } .main > .main-left > .nav > .slide:hover { @@ -640,8 +643,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before } .main > .main-left > .nav > .slide > .slide-menu > .active { - background-color: #09c; - background-color: var(--submenu-bg-hover-active); + background-color: var(--primary-color); } .main > .main-left > .nav > .slide > .slide-menu > li > a { @@ -651,22 +653,19 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before } .main > .main-left > .nav > .slide > .slide-menu > .active > a { - color: #fff; + color: var(--white-color); } .main > .main-left > .nav > .slide > .slide-menu > li:hover { - background: #d4d4d4; - background: var(--submenu-bg-hover); + background: var(--gray-color); } .main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a { - color: #202124; - color: var(--menu-color-hover); + color: #5f6368; } .main > .main-left > .nav > .slide > .slide-menu > .active:hover { - background-color: #09c; - background-color: var(--main-color); + background-color: var(--primary-color); } /* ripple effect */ @@ -692,7 +691,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before transform: scale(10, 10); pointer-events: none; opacity: 0; - background-image: radial-gradient(circle, #000 10%, transparent 10.01%); + background-image: radial-gradient(circle, var(--black-color) 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; } @@ -767,7 +766,7 @@ h5 { padding: 2rem; border: 0; border-radius: 0; - background-color: #fff; + background-color: var(--white-color); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } @@ -890,7 +889,7 @@ tr > th, .cbi-section-table-row { margin-bottom: 1rem; text-align: center !important; - background: #f4f4f4; + background: var(--white-color-low); } .cbi-section-table-row:last-child { @@ -915,7 +914,7 @@ tr > th, div > table > tbody > tr:nth-of-type(2n), div > .table > .tr:nth-of-type(2n) { - background-color: #f9f9f9; + background-color: var(--white-color-low); } /* fix multiple table */ @@ -1042,8 +1041,8 @@ td > table > tbody > tr > td, .cbi-button[name="restart"], .cbi-button[onclick="hide_empty(this)"] { font-weight: bold; - border: thin solid #bfbfbf; - background-color: #d4d4d4; + border: thin solid var(--gray-color-high); + background-color: var(--gray-color); } /* dark blue */ @@ -1059,9 +1058,9 @@ td > table > tbody > tr > td, .cbi-button[value^="Back"], .cbi-button-neutral[onclick="handleConfig(event)"] { font-weight: normal; - color: #fff; - border: thin solid #2e6da4; - background-color: #337ab7; + color: var(--on-dark-blue-color); + border: thin solid var(--dark-blue-color-high); + background-color: var(--dark-blue-color); } /* light blue */ @@ -1076,9 +1075,9 @@ td > table > tbody > tr > td, .cbi-button[value$="Apply"], .cbi-button[onclick="addKey(event)"] { font-weight: normal; - color: #fff; - border: thin solid #46b8da; - background-color: #5bc0de; + color: var(--on-light-blue-color); + border: thin solid var(--light-blue-color-high); + background-color: var(--light-blue-color); } /* red */ @@ -1092,9 +1091,9 @@ td > table > tbody > tr > td, .cbi-button[onclick="reboot(this)"], .cbi-button-neutral[value="Restart"] { font-weight: normal; - color: #fff; - border: thin solid #d43f3a; - background-color: #d9534f; + color: var(--on-red-color); + border: thin solid var(--red-color-high); + background-color: var(--red-color); } /* yellow */ @@ -1106,9 +1105,9 @@ td > table > tbody > tr > td, .cbi-button[onclick="handleReset(event)"], .cbi-button-neutral[value="Disable"] { font-weight: normal; - color: #fff; - border: thin solid #eea236; - background-color: #f0ad4e; + color: var(--on-yellow-color); + border: thin solid var(--yellow-color-high); + background-color: var(--yellow-color); } /* green */ @@ -1118,9 +1117,9 @@ td > table > tbody > tr > td, .cbi-button[value="Download"], .cbi-button[value="Save mtdblock"] { font-weight: normal; - color: #fff; - border: thin solid #4cae4c; - background-color: #5cb85c; + color: var(--on-green-color); + border: thin solid var(--green-color-high); + background-color: var(--green-color); } .cbi-page-actions .cbi-button-link:first-child { @@ -1140,7 +1139,7 @@ td > table > tbody > tr > td, .tabs { margin: 0 -2rem; padding-left: .5rem; - background-color: #fff; + background-color: var(--white-color); } .tabs > li, @@ -1157,8 +1156,7 @@ td > table > tbody > tr > td, .tabs > li[class~="active"], .tabs > li:hover { - border-bottom-color: #09c; - border-bottom-color: var(--main-color); + border-bottom-color: var(--primary-color); } .tabs > li:hover { @@ -1174,12 +1172,11 @@ td > table > tbody > tr > td, } .tabs > li[class~="active"] > a { - color: #09c; - color: var(--main-color); + color: var(--primary-color); } .cbi-tabmenu { - border: thin solid #d4d4d4; + border: thin solid var(--gray-color); border-bottom: 0; } @@ -1188,16 +1185,16 @@ td > table > tbody > tr > td, } .cbi-tabmenu > li[class~="cbi-tab"] { - background-color: #fff; + background-color: var(--white-color); } .cbi-tabmenu { - background-color: #d4d4d4; + background-color: var(--gray-color); } .cbi-section .cbi-section-remove:nth-of-type(2n), .container > .cbi-section .cbi-section-node:nth-of-type(2n) { - background-color: #f9f9f9; + background-color: var(--white-color-low); } [data-tab-title] { @@ -1218,18 +1215,18 @@ td > table > tbody > tr > td, .cbi-section[id] .cbi-section-remove:nth-of-type(4n+3), .cbi-section[id] .cbi-section-node:nth-of-type(4n+4) { - background-color: #f9f9f9; + background-color: var(--white-color-low); } .cbi-section-node-tabbed { margin-top: 0; padding: 0; - border: thin solid #d4d4d4; + border: thin solid var(--gray-color); border-top: 0; } .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { - background-color: #f9f9f9; + background-color: var(--white-color-low); } .cbi-value-field, @@ -1281,8 +1278,8 @@ td > table > tbody > tr > td, } .cbi-input-invalid { - color: #f00; - border-bottom-color: #f00; + color: var(--error-color); + border-bottom-color: var(--error-color); } .cbi-section-error { @@ -1290,7 +1287,7 @@ td > table > tbody > tr > td, line-height: 1.42857143; margin: 18px; padding: 6px; - border: thin solid #f00; + border: thin solid var(--error-color); border-radius: 3px; background-color: #fce6e6; } @@ -1301,7 +1298,7 @@ td > table > tbody > tr > td, .cbi-section-error ul li { font-weight: bold; - color: #f00; + color: var(--error-color); } .td[data-title]::before { @@ -1332,7 +1329,7 @@ td > table > tbody > tr > td, } .cbi-rowstyle-1 { - background-color: #f9f9f9; + background-color: var(--white-color-low); } .cbi-rowstyle-2 { @@ -1342,7 +1339,7 @@ td > table > tbody > tr > td, .cbi-rowstyle-2 .cbi-button-up, .cbi-rowstyle-2 .cbi-button-down, body:not(.Interfaces) .cbi-rowstyle-2:first-child { - background-color: #fff !important; + background-color: var(--white-color) !important; } .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { @@ -1401,9 +1398,9 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { padding: 0 6px; content: "\00D7"; pointer-events: auto; - color: #fff; - border: thin solid #d43f3a; - background-color: #d9534f; + color: var(--white-color); + border: thin solid var(--red-color); + background-color: var(--red-color-high); } .cbi-dynlist > .item > span { @@ -1500,7 +1497,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { font-weight: bold; display: none; color: #777; - text-shadow: 1px 1px 0 #fff; + text-shadow: 1px 1px 0 var(--white-color); } .cbi-dropdown > ul > li { @@ -1564,7 +1561,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { border: thin solid #918e8c; background: #f6f6f6; box-shadow: 0 0 4px #918e8c; - color: var(--main-menu-color); + color: var(--black-color-low); } .cbi-dropdown > ul > li[display], @@ -1601,7 +1598,8 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { background: #b0d0f0; } -.cbi-dropdown[open] > ul.dropdown > li.focus { +.cbi-dropdown[open] > ul.dropdown > li.focus, +.cbi-dropdown[open] > ul.dropdown > li:hover { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); } @@ -1645,8 +1643,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { width: 0; height: 100%; transition: width .25s ease-in; - background: #5bc0de; - background: var(--bar-bg); + background: var(--light-blue-color); } .cbi-progressbar::after { @@ -1692,7 +1689,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { margin: 5em auto; padding: 1em; border-radius: 3px !important; - background: #fff; + background: var(--white-color); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } @@ -1735,7 +1732,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { .modal p { padding-left: .25rem; word-break: break-word; - color: #fff; } .modal label.btn { @@ -1748,10 +1744,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { padding-top: 0.2rem; } -.modal label.warning { - background-color: #f0ad4e !important; -} - .modal.cbi-modal { max-width: 90%; max-height: none; @@ -1888,7 +1880,12 @@ td > .ifacebadge, min-width: 220px; margin: .5em .25em 0 .25em; padding: .5em; - background-color: #fff; + background-color: var(--white-color); +} + +#dsl_status_table .ifacebox-body span > strong { + display: inline-block; + min-width: 50%; } /* textarea */ @@ -1897,7 +1894,7 @@ td > .ifacebadge, width: 100%; min-height: 14rem; padding: .8rem; - color: #000; + color: var(--black-color); } #syslog { @@ -1995,7 +1992,7 @@ td > .ifacebadge, #iwsvg, #iwsvg2, #bwsvg { - border: thin solid #d4d4d4 !important; + border: thin solid var(--gray-color) !important; } #iwsvg, @@ -2009,7 +2006,7 @@ td > .ifacebadge, flex-direction: column; min-width: 100px; border-bottom: thin solid #ccc; - background-color: #f9f9f9; + background-color: var(--white-color-low); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2); } @@ -2019,8 +2016,7 @@ td > .ifacebadge, } .ifacebox-head.active { - background: #5bc0de; - background: var(--bar-bg); + background: var(--light-blue-color); } .ifacebox-body { @@ -2123,7 +2119,7 @@ span[data-tooltip] .label { pointer-events: none; opacity: 0; border-radius: 3px; - background: #fff; + background: var(--white-color); box-shadow: 0 0 2px #444; } @@ -2173,7 +2169,7 @@ span[data-tooltip] .label { white-space: nowrap; text-decoration: none; text-transform: uppercase; - color: #fff !important; + color: var(--white-color) !important; border-radius: 3px; background-color: #bfbfbf; text-shadow: none; @@ -2263,7 +2259,7 @@ input[name="nslookup"] { margin-top: 2rem !important; padding: 1rem 3.5rem 2rem; text-align: left; - background-color: #fff; + background-color: var(--white-color); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } 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 b2515fb5aa..b9ad8bbeb8 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css @@ -1,13 +1,44 @@ :root { - --main-color: #00B5E2; - --header-bg: #00B5E2; - --header-color: #fff; - --bar-bg: #5bc0de; - --menu-bg-color: #fff; - --menu-color: #5f6368; - --menu-color-hover: #202124; - --main-menu-color: #202124; - --submenu-bg-hover: #d4d4d4; - --submenu-bg-hover-active: #00B5E2; + /** General colors */ + --white-color: #ffffff; + --white-color-low: #f9f9f9; + --black-color: #000000; + --black-color-low: #202124; + --yellow-color: #f0ad4e; + --yellow-color-high: #eea236; + --on-yellow-color: var(--white-color); + --red-color: #d9534f; + --red-color-high: #d43f3a; + --on-red-color: var(--white-color); + --green-color: #5cb85c; + --green-color-high: #4cae4c; + --on-green-color: var(--white-color); + --dark-blue-color: #337ab7; + --dark-blue-color-high: #2e6da4; + --on-dark-blue-color: var(--white-color); + --gray-color: #d4d4d4; + --gray-color-high: #bfbfbf; + --light-blue-color: #5bc0de; + --light-blue-color-high: #46b8da; + --on-light-blue-color: var(--white-color); + + --primary-color: #00B5E2; + --secondary-color: #0099cc; + + --notice-color: #002B49; + --on-notice-color: var(--white-color); + + --danger-color: var(--red-color); + --on-danger-color: var(--on-red-color); + + --warning-color: #f0e68c; + --on-warning-color: var(--black-color); + + --success-color: var(--green-color); + --on-success-color: var(--on-green-color); + + --error-color: #ff0000; + --on-error-color: var(--white-color); + --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; } diff --git a/themes/luci-theme-material/ucode/template/themes/material/footer.ut b/themes/luci-theme-material/ucode/template/themes/material/footer.ut index 9249427a43..f0225e7329 100644 --- a/themes/luci-theme-material/ucode/template/themes/material/footer.ut +++ b/themes/luci-theme-material/ucode/template/themes/material/footer.ut @@ -20,7 +20,7 @@ </div> <footer class="mobile-hide"> - <a href="https://github.com/openwrt/luci">Powered by {{ version.luciname }} ({{ version.luciversion }})</a> / + <a href="https://github.com/openwrt/luci" target="_blank" rel="noreferrer">Powered by {{ version.luciname }} ({{ version.luciversion }})</a> / {{ version.distname }} {{ version.distversion }} ({{ version.distrevision }}) </footer> </div> |