From c7e7122e25208f9e039bb7cb1d9d5c3640d9141d Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Fri, 1 Mar 2024 16:05:27 +0100
Subject: [PATCH 1/2] [Editor] Indicate if the highlight-thickness slider is
 disabled

The fact that the highlight-thickness can only be changed in "free" mode isn't really obvious visually in the toolbar, so attempt to provide at least some indication of the `disabled`-state by "dimming" the slider.
---
 web/annotation_editor_layer_builder.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index e69fb93ef..6e93f787d 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -1188,6 +1188,10 @@
         --example-color: CanvasText;
       }
 
+      :is(& > .editorParamsSlider[disabled]) {
+        opacity: 0.4;
+      }
+
       &::before {
         content: "";
         width: 8px;

From e781b553cb4da296be492ef540bb41563a08cfeb Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Fri, 1 Mar 2024 16:14:07 +0100
Subject: [PATCH 2/2] [Editor] Reduce a bit of CSS duplication for the
 highlight-thickness "indicators"

---
 web/annotation_editor_layer_builder.css | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 6e93f787d..d468b2df6 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -1192,7 +1192,8 @@
         opacity: 0.4;
       }
 
-      &::before {
+      &::before,
+      &::after {
         content: "";
         width: 8px;
         aspect-ratio: 1;
@@ -1200,20 +1201,14 @@
         border-radius: 100%;
         background-color: var(--example-color);
       }
+      &::after {
+        width: 24px;
+      }
 
       .editorParamsSlider {
         width: unset;
         height: 14px;
       }
-
-      &::after {
-        content: "";
-        width: 24px;
-        aspect-ratio: 1;
-        display: block;
-        border-radius: 100%;
-        background-color: var(--example-color);
-      }
     }
   }
 }