From e44e470eb232c0762a90b8b61a90bb277c9239bf Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 26 Aug 2025 14:54:16 +0200
Subject: [PATCH] [Editor] Remove useless CSS and fix styling for the comment
 button

---
 src/display/annotation_layer.js | 4 ++--
 web/comment_manager.css         | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index 45f490c18..27e544957 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -2478,8 +2478,8 @@ class PopupElement {
       { signal }
     );
     const { style } = button;
-    style.left = `calc(${this.#commentButtonPosition[0]}% + var(--comment-button-offset))`;
-    style.top = `calc(${this.#commentButtonPosition[1]}% - var(--comment-button-dim) - var(--comment-button-offset))`;
+    style.left = `calc(${this.#commentButtonPosition[0]}%)`;
+    style.top = `calc(${this.#commentButtonPosition[1]}% - var(--comment-button-dim))`;
     if (this.#commentButtonColor) {
       style.backgroundColor = this.#commentButtonColor;
     }
diff --git a/web/comment_manager.css b/web/comment_manager.css
index 87410afe8..180a664dc 100644
--- a/web/comment_manager.css
+++ b/web/comment_manager.css
@@ -263,13 +263,14 @@
     --comment-button-active-fg: light-dark(white, #15141a);
     --comment-button-hover-bg: light-dark(#0053cb, #61dce9);
     --comment-button-hover-fg: light-dark(white, #15141a);
+    --comment-button-selected-bg: light-dark(#0062fa, #00cadb);
     --comment-button-border-color: light-dark(#8f8f9d, #bfbfc9);
+    --comment-button-active-border-color: var(--comment-button-active-bg);
     --comment-button-focus-border-color: light-dark(#cfcfd8, #3a3944);
     --comment-button-hover-border-color: var(--comment-button-hover-bg);
-    --comment-button-selected-bg: light-dark(#0062fa, #00cadb);
+    --comment-button-selected-border-color: var(--comment-button-selected-bg);
     --comment-button-selected-fg: light-dark(white, #15141a);
     --comment-button-dim: 24px;
-    --comment-button-offset: 1px;
     --comment-button-box-shadow:
       0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
       0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
@@ -317,7 +318,6 @@
     }
 
     &:focus-visible {
-      -moz-outline-radius: 7px 7px 7px 0;
       outline: 2px solid var(--comment-button-focus-outline-color);
       outline-offset: 1px;
       border-color: var(--comment-button-focus-border-color);
@@ -325,6 +325,7 @@
 
     &:hover {
       background-color: var(--comment-button-hover-bg) !important;
+      border-color: var(--comment-button-hover-border-color);
 
       &::before {
         background-color: var(--comment-button-hover-fg);
@@ -333,6 +334,7 @@
 
     &:active {
       background-color: var(--comment-button-active-bg) !important;
+      border-color: var(--comment-button-active-border-color);
 
       &::before {
         background-color: var(--comment-button-active-fg);
@@ -341,6 +343,7 @@
 
     &.selected {
       background-color: var(--comment-button-selected-bg) !important;
+      border-color: var(--comment-button-selected-border-color);
 
       &::before {
         background-color: var(--comment-button-selected-fg);