From 8f8c373a57cda7172f5c9852203835abca402b85 Mon Sep 17 00:00:00 2001
From: Daniel Haller <zerotwofa@proton.me>
Date: Sun, 21 Apr 2024 04:21:43 +0200
Subject: [PATCH] better scrollbar

---
 pages/index.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index fb71228..40bcfa5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="h-screen overflow-hidden">
     <MainHeader />
-    <div class="flex flex-col text-white pt-16">
+    <div class="flex flex-col text-white mt-16 overflow-y-scroll h-[calc(100vh-4rem)]">
       <!-- <button @click="deletePlaylist">
         Delete Playlist
       </button> -->
@@ -103,11 +103,29 @@ onMounted(() => {
 })
 </script>
 
-<style>
+<style scoped>
 .loading-a {
   animation: animation infinite 3s;
 }
 
+::-webkit-scrollbar-track {
+  background: #303030;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #cac9c9;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
 @keyframes animation {
   0% {
     left: 0%;