luci-theme-material: fix unreadable text

Fix low-contrast text in dark mode that caused
labels to be hard to read.

Signed-off-by: Brian White <redacted>

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 27b598de046e9b999c1b8d49b6a2af02c52bd1a1..f31b5edd9eb9e58b7b4524ef297a46d2b0db8820 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -501,36 +501,36 @@ header > .fill > .container > .status > * {
 
 .alert-message.notice,
 .label.notice {
-       background-color: var(--notice-color);
-       color: var(--on-notice-color);
+       background-color: var(--notice-color) !important;
+       color: var(--on-notice-color) !important;
 }
 
 .alert-message.danger,
 .btn.danger,
 .label.danger {
-       background-color: var(--danger-color);
-       color: var(--on-danger-color);
+       background-color: var(--danger-color) !important;
+       color: var(--on-danger-color) !important;
 }
 
 .alert-message.warning,
 .btn.warning,
 .label.warning {
-       background-color: var(--warning-color);
-       color: var(--on-warning-color);
+       background-color: var(--warning-color) !important;
+       color: var(--on-warning-color) !important;
 }
 
 .alert-message.success,
 .btn.success,
 .label.success {
-       background-color: var(--success-color);
-       color: var(--on-success-color);
+       background-color: var(--success-color) !important;
+       color: var(--on-success-color) !important;
 }
 
 .alert-message.error,
 .btn.error,
 .label.error {
-       background-color: var(--on-error-color);
-       color: var(--error-color);
+       background-color: var(--error-color) !important;
+       color: var(--on-error-color) !important;
 }
 
 [data-indicator]:not([data-style="inactive"]) {
@@ -542,6 +542,17 @@ header > .fill > .container > .status > * {
        margin-top: 1rem;
 }
 
+/* Fix for table text in notifications - ensures table content inherits notification colors */
+.alert-message.notice table,
+.alert-message.notice .table,
+.alert-message.notice td,
+.alert-message.notice th,
+.alert-message.notice .td,
+.alert-message.notice .th {
+       color: var(--on-notice-color) !important;
+       background: transparent !important;
+}
+
 .main > .main-left > .nav {
        margin-top: .5rem;
 }

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index 66841eee4a23ee0efd675eab105f4e96d48714c6..521bcc5572f0128fbc40cc918ef7fb41e3d22840 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -874,21 +874,30 @@ p > a {
 }
 
 .alert-message.info {
+       color: var(--secondary-bright-color);
        background: var(--main-bright-color);
 }
 
 .alert-message.warning {
+       color: var(--secondary-bright-color);
        background: var(--warning-color);
 }
 
 .alert-message.danger {
+       color: var(--secondary-bright-color);
        background: var(--danger-color);
 }
 
 .alert-message.success {
+       color: var(--secondary-bright-color);
        background: var(--success-color);
 }
 
+.alert-message.notice {
+       color: var(--main-bright-color);
+       background: var(--secondary-bright-color);
+}
+
 .alert-message .btn {
        box-shadow: 0 0 2px var(--secondary-bright-color);
 }
@@ -897,6 +906,17 @@ p > a {
        box-shadow: 0 0 4px 1px var(--secondary-bright-color);
 }
 
+/* Fix for table text in notifications */
+.alert-message.notice table,
+.alert-message.notice .table,
+.alert-message.notice td,
+.alert-message.notice th,
+.alert-message.notice .td,
+.alert-message.notice .th {
+       color: var(--main-bright-color) !important;
+       background: transparent !important;
+}
+
 @keyframes fade-in {
        0% { opacity: 0; }
        100% { opacity: 1; }