From 3acc8bc3733bbbb6c20b40bcb7b8f27d50b63779 Mon Sep 17 00:00:00 2001 From: Daniel Nilsson Date: Thu, 22 Feb 2024 20:50:09 +0100 Subject: luci-theme-material: improve theming system colors and contrasts This changed spawned from trying to make certain text colors readable (such as white text on white background in many dialogs) introduced by commit 4ee2bc6 (ref: #5841) which made obvious the need to improve the color and contrast situation in the theme. Alot of colors were duplicated in cascade.css and made for a hard time to align colors across different elements. This commit tries to rectify that by introducing variables for all commonly used colors. * All base colors (white, blue, red, green, blue, yellow, etc) has been consolidated and moved to common variables * Introduced more specific selectors for info levels to avoid colors bleeding over to other elements * Removed duplicated properties which were overriden at the next row Signed-off-by: Daniel Nilsson --- .../htdocs/luci-static/material/custom.css | 51 +++++++++++++++++----- 1 file changed, 41 insertions(+), 10 deletions(-) (limited to 'themes/luci-theme-material/htdocs/luci-static/material/custom.css') 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"; } -- cgit v1.2.3