From a138848c4f3b5992fb23edb7f4c50ebc236318f1 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Mon, 6 Jan 2025 12:07:33 +0100
Subject: [PATCH] chore: improve note from annotation button style

---
 src/modules/annotationNote.ts | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/modules/annotationNote.ts b/src/modules/annotationNote.ts
index 0cf4835..bfd1419 100644
--- a/src/modules/annotationNote.ts
+++ b/src/modules/annotationNote.ts
@@ -14,11 +14,30 @@ function registerReaderAnnotationButton() {
       const annotationData = params.annotation;
       append(
         ztoolkit.UI.createElement(doc, "div", {
-          tag: "div",
           classList: ["icon"],
           properties: {
             innerHTML: ICONS.readerQuickNote,
+            title: "Create note from annotation",
           },
+          children: [
+            {
+              tag: "style",
+              properties: {
+                innerHTML: `
+              .icon {
+                border-radius: 4px;
+              }
+              .icon:hover {
+                background-color: var(--fill-quinary);
+                outline: 2px solid var(--fill-quinary);
+              }
+              .icon:active {
+                background-color: var(--fill-quarternary);
+              }
+              `,
+              },
+            },
+          ],
           listeners: [
             {
               type: "click",
@@ -31,20 +50,6 @@ function registerReaderAnnotationButton() {
                 e.preventDefault();
               },
             },
-            {
-              type: "mouseover",
-              listener: (e) => {
-                (e.target as HTMLElement).style.backgroundColor = "#F0F0F0";
-              },
-            },
-            {
-              type: "mouseout",
-              listener: (e) => {
-                (e.target as HTMLElement).style.removeProperty(
-                  "background-color",
-                );
-              },
-            },
           ],
           enableElementRecord: false,
         }),