fix: scrollbar sizing (#20)

* components: select/textarea: style scroll bar

* style: all: update scroll bar

Author: IamPete1

src/components/sdpi-item.ts

@@ -12,7 +12,8 @@ export class SdpiItem extends LitElement {
 		hostStyle,
 		css`
 			::-webkit-scrollbar {
-				width: 5px;
+				width: 8px;
+				height: 8px;
 			}
 			::-webkit-scrollbar-track {
 				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
@@ -21,7 +22,6 @@ export class SdpiItem extends LitElement {
 			::-webkit-scrollbar-thumb {
 				background-color: #666666;
 				border-radius: 5px;
-				outline: 1px solid slategrey;
 			}
 
 			.container {

src/components/select.ts

@@ -32,6 +32,21 @@ export class Select extends Persisted(
 					opacity: var(--opacity-disabled);
 				}
 
+				::-webkit-scrollbar {
+					width: 8px;
+					height: 8px;
+				}
+
+				::-webkit-scrollbar-track {
+					-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+					box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+				}
+
+				::-webkit-scrollbar-thumb {
+					background-color: #666666;
+					border-radius: 5px;
+				}
+
 				.refresh {
 					background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTgiIHdpZHRoPSIxOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjOUM5QzlDIj48cGF0aCBkPSJNMTIgMjBxLTMuMzUgMC01LjY3NS0yLjMyNVE0IDE1LjM1IDQgMTJxMC0zLjM1IDIuMzI1LTUuNjc1UTguNjUgNCAxMiA0cTEuNzI1IDAgMy4zLjcxMyAxLjU3NS43MTIgMi43IDIuMDM3VjRoMnY3aC03VjloNC4ycS0uOC0xLjQtMi4xODctMi4yUTEzLjYyNSA2IDEyIDYgOS41IDYgNy43NSA3Ljc1VDYgMTJxMCAyLjUgMS43NSA0LjI1VDEyIDE4cTEuOTI1IDAgMy40NzUtMS4xVDE3LjY1IDE0aDIuMXEtLjcgMi42NS0yLjg1IDQuMzI1UTE0Ljc1IDIwIDEyIDIwWiIvPjwvc3ZnPg==)
 						no-repeat -1px -1px;

src/components/textarea.ts

@@ -31,6 +31,21 @@ export class Textarea extends Persisted(Focusable(Input<typeof LitElement, strin
 					font-family: var(--font-family);
 					font-size: var(--font-size);
 				}
+
+				::-webkit-scrollbar {
+					width: 8px;
+					height: 8px;
+				}
+
+				::-webkit-scrollbar-track {
+					-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+					box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+				}
+
+				::-webkit-scrollbar-thumb {
+					background-color: #666666;
+					border-radius: 5px;
+				}
 			`,
 		];
 	}

src/styles/document.ts

@@ -11,7 +11,8 @@ style.innerHTML = css`
 		background-color: #2d2d2d;
 	}
 	::-webkit-scrollbar {
-		width: 5px;
+		width: 8px;
+		height: 8px;
 	}
 	::-webkit-scrollbar-track {
 		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
@@ -20,7 +21,6 @@ style.innerHTML = css`
 	::-webkit-scrollbar-thumb {
 		background-color: #666666;
 		border-radius: 5px;
-		outline: 1px solid slategrey;
 	}
 `.cssText;