From 1e704b51a859845e539224aeb389a4e493d64520 Mon Sep 17 00:00:00 2001
From: Daniel Dada <doesdeos@gmail.com>
Date: Thu, 26 Jun 2025 23:59:12 +0300
Subject: [PATCH] fix: colorbox styling

---
 popup/popup.css | 92 ++++++++++++++++++++++++++++++++++---------------
 1 file changed, 65 insertions(+), 27 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 47dbc75..6e389d1 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -7,6 +7,7 @@
   --button-hover: #444;
   --button-text: white;
   --accent: #ec9c23;
+  --accent-hover: #ffb84d;
   --accent-text: #000;
   --highlight-tag: #292929;
   --highlight-tag-border: #444;
@@ -18,6 +19,10 @@
   --switch-bg: #444;
   --checkbox-accent: #ec9c23;
   --checkbox-border: #666;
+  --scrollbar-bg: var(--section-bg);
+  --scrollbar-thumb: var(--accent);
+  --scrollbar-thumb-hover: var(--accent-hover);
+  --scrollbar-thumb-border: var(--section-bg);
 }
 
 body {
@@ -114,7 +119,7 @@ textarea {
 }
 
 input[type="color"] {
-  background: var(--input-bg);
+  background: none;
   border: 2px solid var(--input-border);
   border-radius: 8px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.10);
@@ -126,37 +131,29 @@ input[type="color"] {
   transition: border 0.2s, box-shadow 0.2s;
   appearance: none;
   -webkit-appearance: none;
+  overflow: hidden;
 }
 
-input[type="color"]:focus,
-input[type="color"]:hover {
-  border: 2px solid var(--accent);
-  box-shadow: 0 2px 8px rgba(236,156,35,0.15);
-  outline: none;
-}
-
-.color-label input[type="color"] {
-  width: 32px;
-  height: 32px;
-  margin-left: 0;
-}
-
-/* Remove default color input styling for Webkit browsers */
 input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
-  border-radius: 8px;
+  border-radius: 0;
 }
 
 input[type="color"]::-webkit-color-swatch {
-  border-radius: 8px;
+  border-radius: 0;
   border: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
 }
 
-/* Remove default color input styling for Firefox */
 input[type="color"]::-moz-color-swatch {
-  border-radius: 8px;
+  border-radius: 0;
   border: none;
   padding: 0;
+  width: 100%;
+  height: 100%;
 }
 
 input[type="checkbox"] {
@@ -165,9 +162,9 @@ input[type="checkbox"] {
   background-color: var(--input-bg);
   border: 1px solid var(--checkbox-border);
   border-radius: 4px;
-  width: 16px;
-  height: 16px;
-  transform: scale(1.2);
+  width: 12px;
+  height: 12px;
+  transform: scale(1);
   cursor: pointer;
   position: relative;
 }
@@ -175,10 +172,10 @@ input[type="checkbox"] {
 input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
-  top: 2px;
-  left: 5px;
-  width: 4px;
-  height: 9px;
+  top: 1px;
+  left: 3px;
+  width: 3px; 
+  height: 7px;
   border: solid var(--checkbox-accent);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
@@ -448,10 +445,51 @@ body::-webkit-scrollbar-thumb {
 
 #wordList::-webkit-scrollbar-thumb:hover,
 body::-webkit-scrollbar-thumb:hover {
-  background: #ffb84d;
+  background: var(--accent-hover);
 }
 
 #wordList::-webkit-scrollbar-corner,
 body::-webkit-scrollbar-corner {
   background: var(--section-bg);
+}
+
+:root {
+  --scrollbar-bg: var(--section-bg);
+  --scrollbar-thumb: var(--accent);
+  --scrollbar-thumb-hover: var(--accent-hover);
+  --scrollbar-thumb-border: var(--section-bg);
+}
+
+html, body, #wordList {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+#wordList::-webkit-scrollbar {
+  width: 8px;
+  background: var(--scrollbar-bg);
+  border-radius: 8px;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+#wordList::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 8px;
+  min-height: 24px;
+  border: 2px solid var(--scrollbar-thumb-border);
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+#wordList::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+html::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner,
+#wordList::-webkit-scrollbar-corner {
+  background: var(--scrollbar-bg);
 }
\ No newline at end of file