Merge pull request #20200 from calixteman/remove_useless_css2

[Editor] Remove useless CSS and fix styling for the comment button

Author: calixteman

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;
     }

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,14 +318,14 @@
     }
 
     &: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);
     }
 
     &: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);