comments: improve annotation scrollbar styling

-The scrollbar in annotation content was oversized, taking up
 unnecessary space.
-Introduced --scrollbar-color variable with light/dark theme values
 and set scrollbar-width to thin for improved visual consistency.
-Added color-text-date to use annotation date for light/dark theme

Signed-off-by: Banobe Pascal <[email protected]>
Change-Id: I557098506743a975199da8d8b3b34db8f38e539a

Author: banobepascal

browser/css/color-palette-dark.css

@@ -12,6 +12,7 @@
 	--color-text-lighter: #fff; /* secondard text, disabled */
 	--color-status-badge: #d6d6d6;
 	--color-slideshow: #d6d6d6;
+	--color-date-text: #d6d6d6;
 
 	--color-main-background: #121212;
 	--color-background-dark: #1E1E1E;  /* select */
@@ -73,6 +74,7 @@
 	--color-smart-guides-helper-line: #f36d4f;
 
 	--color-quickfind-border: #444;
+	--scrollbar-color: #c0bfbc transparent;
 }
 
 [data-bg-theme='dark'] {

browser/css/color-palette.css

@@ -14,6 +14,7 @@
 	--color-text-calc-header: #e8e8e8;
 	--color-status-badge: #616161;
 	--color-slideshow: #A8A8A8;
+	--color-date-text: #555555;
 
 	--color-main-background: #F8F9FA;
 	--color-background-dark: #e8e8e8;  /* select */
@@ -82,6 +83,7 @@
 	--color-treeview-highlight: #FFEE80;
 	--color-treeview-highlight-text: #222;
 	--color-quickfind-border: #e1dfdd;
+	--scrollbar-color: #c0bfbc #fafafa;
 }
 
 [data-bg-theme='light'] {

browser/css/cool.css

@@ -642,6 +642,8 @@ body {
 	line-height: 1.4;
 	max-height: var(--annotation-input-size);
 	overflow: auto;
+	scrollbar-color: var(--scrollbar-color);
+	scrollbar-width: thin;
 }
 
 .cool-annotation-info-collapsed {
@@ -877,7 +879,7 @@ body {
 
 .cool-annotation-date {
 	font-size: 0.625rem;
-	color: #555555;
+	color: var(--color-date-text);
 }
 
 .annotation-button-autosaved {