fix scrollbar

mstrow · Nov 10, 2022 · 5cace1e · 5cace1e
1 parent 26da3e7
commit 5cace1e
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/src/layout/FeaturesSection/preview/PreviewShowcase.scss b/src/layout/FeaturesSection/preview/PreviewShowcase.scss
@@ -182,6 +182,7 @@
 	// Files GridView
 	// Serves as a picker for previewing files
 	.files-grid {
+
 		position: relative;
 		z-index: 1;
 		display: grid;
@@ -228,6 +229,47 @@
 			}
 		}
 	}
+	/* Scrollbar size */
+	.files-grid::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+		transition: 1.0s;
+	}
+
+	.files-grid::-webkit-scrollbar-thumb {
+		background-color: rgba(127, 127, 127, 0.6);
+		background-clip: padding-box;
+		border: 2px solid transparent;
+		border-radius: 5px;
+		transition: 1.0s;
+	}
+
+	.files-grid::-webkit-scrollbar-thumb:vertical:hover,
+	.files-grid::-webkit-scrollbar-thumb:horizontal:hover {
+		background-color: rgb(110, 110, 110);
+		transition: 0.3s;
+	}
+
+	.files-grid::-webkit-scrollbar-track {
+		background-color: transparent;
+	}
+	.files-grid::-webkit-scrollbar-track:hover {
+		background-color: hsl(var(--mica-tint), calc(var(--mica-tint-opacity)));
+		backdrop-filter: blur(60px) saturate(150%);
+		border-radius: 5px;
+	}
+
+
+	.files-grid::-webkit-scrollbar-thumb:vertical:active,
+	.files-grid::-webkit-scrollbar-thumb:horizontal:active {
+		background: rgba(95, 91, 91, 1);
+
+	}
+
+	.files-grid::-webkit-scrollbar-corner {
+		background: none;
+	}
+
 }
 
 // Preview pane entrance animation