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
-Added box-sizing to annotation menu buttons
-Added --color-background-lighter to annotation-img outline

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

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 {
@@ -764,7 +766,7 @@ body {
 	height: var(--default-height);
 	width: var(--default-width);
 	padding: 0;
-	outline: 2px solid #fff;
+	outline: 2px solid var(--color-background-lighter);
 	outline-offset: -3px;
 }
 
@@ -845,6 +847,7 @@ body {
 	border: 1px solid transparent !important;
 	display: inline-block !important;
 	cursor: pointer;
+	box-sizing: border-box;
 }
 
 .cool-redline-accept-button {
@@ -877,7 +880,7 @@ body {
 
 .cool-annotation-date {
 	font-size: 0.625rem;
-	color: #555555;
+	color: var(--color-date-text);
 }
 
 .annotation-button-autosaved {