From 7ce4e288e1c74f8c9e369be60565dba4d2d5efd8 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 26 Jul 2023 15:05:50 +0200
Subject: [PATCH] Improve rendering of buttons in the toolbar in HCM (bug
 1845515)

With this patch, in HCM, make a button visible when it's active and
add an outline around toggled buttons when they're hovered.
---
 web/viewer.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/viewer.css b/web/viewer.css
index f0b156e40..f84220700 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -53,6 +53,7 @@
   --toggled-btn-color: rgba(0, 0, 0, 1);
   --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
   --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
+  --toggled-hover-btn-outline: none;
   --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
   --dropdown-btn-border: none;
   --separator-color: rgba(0, 0, 0, 0.3);
@@ -181,6 +182,8 @@
     --toolbar-icon-opacity: 1;
     --toolbar-icon-bg-color: ButtonText;
     --toolbar-icon-hover-bg-color: ButtonFace;
+    --toggled-hover-active-btn-color: ButtonText;
+    --toggled-hover-btn-outline: 2px solid ButtonBorder;
     --toolbar-border-color: CanvasText;
     --toolbar-border-bottom: 1px solid var(--toolbar-border-color);
     --toolbar-box-shadow: none;
@@ -764,6 +767,11 @@ body {
   color: var(--toggled-btn-color);
 }
 
+:is(.toolbarButton, .secondaryToolbarButton).toggled:hover,
+.splitToolbarButton.toggled > .toolbarButton.toggled:hover {
+  outline: var(--toggled-hover-btn-outline) !important;
+}
+
 :is(.toolbarButton, .secondaryToolbarButton).toggled::before {
   background-color: var(--toggled-btn-color);
 }