Fix slider and some other colours to be more intelligent

to close #665

CHANGELOG.md

@@ -1,3 +1,9 @@
+### 2.26.2: Maintenance Release
+
+**Fixes**
+
+ - Fix slider text colour to better contrast with widget background. Issue #665
+
 ### 2.26.1: Maintenance Release
 
 **Enhancements**

README.md

@@ -155,11 +155,11 @@ The dashboard has 4 sets of icons built in. They are
  - [Weather Icons Lite](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md) : e.g. `wi-wu-sunny`
  - [Material Design Iconfont](https://jossef.github.io/material-design-icons-iconfont/) ; e.g. `mi-alarm_on` - note add mi- to the icon name in the iconset.
 
-And 1 that can only be used if you have a permanent connection to the internet
+And one that can only be used if you have a permanent connection to the internet
 
  - [Iconify](https://iconify.design/icon-sets/) : e.g. `iconify-mdi:car-battery 48px`
 
-Again note you have to add `iconify-` to the icon name in the icon set of your choice. You may also optionally specify a size in standard px or em notation. Default is 24px. You must add a **ui_template** node that loads the necessary iconify library into the header of the dashboard. It should contain
+Again note you have to add `iconify-` to the icon name in the icon set of your choice. You may also optionally specify a size in standard px or em notation. Default is 24px. You must also add a **ui_template** node that loads the necessary iconify library into the header of the dashboard. It should contain
 
 ```
 <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

dist/css/app.min.less

@@ -175,6 +175,7 @@ md-card {
 @nrTemplateTheme: true;
 @nrUnitHeight: 24px;
 @wtc-light: boolean(luma(@widgetTextColor) > 50%);
+@wbc-light: boolean(luma(@widgetBackgroundColor) > 50%);
 
 // define some CSS variables for user usage
 :root {
@@ -249,6 +250,10 @@ body.nr-dashboard-theme md-toolbar {
     background-color: @pageTitlebarBackgroundColor;
     color: #fff;
 }
+body.nr-dashboard-theme md-toolbar .md-toolbar-tools {
+    color: #fff;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
 
 /*
     DASHBOARD SIDEBAR
@@ -311,6 +316,10 @@ a.md-no-style, button.md-no-style {
     background-color: @widgetBackgroundColor;
     color: white;
 }
+.nr-dashboard-theme .nr-dashboard-button .md-button > span{
+    color: white;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
 .nr-dashboard-theme .nr-dashboard-button .md-button:hover {
     background-color: lighten(@widgetBackgroundColor, 6);
 }
@@ -524,6 +533,10 @@ md-select-menu md-option:focus:not([disabled]):not([selected]) {
     transform: scale(0.4);
     animation: unset;
 }
+.nr-dashboard-theme .nr-dashboard-slider .md-thumb-text {
+    color: white;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
 
 /* Switch */
 .nr-dashboard-theme .nr-dashboard-switch {}

dist/dashboard.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Time: Tue Dec 29 2020 00:15:10 GMT+0000 (Greenwich Mean Time)
+# Time: Sun Jan 03 2021 16:04:26 GMT+0000 (Greenwich Mean Time)
 
 CACHE:
 i18n.js
@@ -26,4 +26,4 @@ loading.html
 NETWORK:
 *
 
-# hash: 39b95ea38ec43b9c47773e99fbe36210c79e0db39f0224ff2daf82150841df2d
+# hash: ec02f95b2e0874f6c77aaf0dc26068b8887e156425368947f476e06630e98333

src/theme.less

@@ -16,6 +16,7 @@
 @nrTemplateTheme: true;
 @nrUnitHeight: 24px;
 @wtc-light: boolean(luma(@widgetTextColor) > 50%);
+@wbc-light: boolean(luma(@widgetBackgroundColor) > 50%);
 
 // define some CSS variables for user usage
 :root {
@@ -90,6 +91,10 @@ body.nr-dashboard-theme md-toolbar {
     background-color: @pageTitlebarBackgroundColor;
     color: #fff;
 }
+body.nr-dashboard-theme md-toolbar .md-toolbar-tools {
+    color: #fff;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
 
 /*
     DASHBOARD SIDEBAR
@@ -152,6 +157,10 @@ a.md-no-style, button.md-no-style {
     background-color: @widgetBackgroundColor;
     color: white;
 }
+.nr-dashboard-theme .nr-dashboard-button .md-button > span{
+    color: white;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
 .nr-dashboard-theme .nr-dashboard-button .md-button:hover {
     background-color: lighten(@widgetBackgroundColor, 6);
 }
@@ -365,6 +374,10 @@ md-select-menu md-option:focus:not([disabled]):not([selected]) {
     transform: scale(0.4);
     animation: unset;
 }
+.nr-dashboard-theme .nr-dashboard-slider .md-thumb-text {
+    color: white;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
 
 /* Switch */
 .nr-dashboard-theme .nr-dashboard-switch {}