Gradual shadows on legend text

Deltares · May 30, 2024 · 545dce9 · 545dce9
1 parent 9e117e1
commit 545dce9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/components/wms/ColourBar.vue b/src/components/wms/ColourBar.vue
@@ -101,10 +101,12 @@ function updateColourBar() {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   text-shadow:
-    rgb(var(--v-theme-background)) 1px 1px 1px,
-    rgb(var(--v-theme-background)) -1px 1px 1px,
-    rgb(var(--v-theme-background)) 1px -1px 1px,
-    rgb(var(--v-theme-background)) -1px -1px 1px;
+    rgb(var(--v-theme-background)) 0px 0px 1px,
+    rgb(var(--v-theme-background)) 0px 0px 2px,
+    rgb(var(--v-theme-background)) 0px 0px 3px,
+    rgb(var(--v-theme-background)) 0px 0px 4px,
+    rgb(var(--v-theme-background)) 0px 0px 5px,
+    rgb(var(--v-theme-background)) 0px 0px 6px;
 }
 
 .colourbar :deep(.axis .tick line) {

diff --git a/src/components/wms/ColourLegend.vue b/src/components/wms/ColourLegend.vue
@@ -24,10 +24,10 @@ defineProps<Props>()
   text-rendering: optimizeLegibility;
   text-shadow:
     rgb(var(--v-theme-background)) 0px 0px 1px,
-    rgb(var(--v-theme-background)) 0px 0px 1px,
-    rgb(var(--v-theme-background)) 0px 0px 1px,
-    rgb(var(--v-theme-background)) 0px 0px 1px,
-    rgb(var(--v-theme-background)) 0px 0px 1px,
-    rgb(var(--v-theme-background)) 0px 0px 1px;
+    rgb(var(--v-theme-background)) 0px 0px 2px,
+    rgb(var(--v-theme-background)) 0px 0px 3px,
+    rgb(var(--v-theme-background)) 0px 0px 4px,
+    rgb(var(--v-theme-background)) 0px 0px 5px,
+    rgb(var(--v-theme-background)) 0px 0px 6px;
 }
 </style>