diff --git a/index.html b/index.html
index 50b615b..a9f3190 100644
--- a/index.html
+++ b/index.html
@@ -155,24 +155,30 @@
* {
scrollbar-width: thin;
+ scrollbar-color: var(--background-light) transparent;
+ }
+
+ *:hover, *:focus-within {
scrollbar-color: var(--background-hover) transparent;
}
*::-webkit-scrollbar {
- width: 1.2rem;
+ width: 0.7rem;
}
*::-webkit-scrollbar-track {
- background: transparent;
+ background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--background-light);
+ border: 2px solid #000000;
border-radius: 2rem;
transition: background 1s ease-in;
+ padding-right: 0.2rem;
}
- *:hover::-webkit-scrollbar-thumb {
+ *:hover::-webkit-scrollbar-thumb, *:focus-within::-webkit-scrollbar-thumb {
background-color: var(--background-hover);
}
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b445292..d940f83 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -168,6 +168,14 @@ export default defineComponent({
padding: 0.2rem 0.5rem 0 0.2rem;
width: 24rem;
align-items: flex-end;
+
+ &:not(:hover):not(:focus-within) {
+ scrollbar-color: var(--background-base) transparent;
+ }
+
+ &:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb {
+ background-color: var(--background-base);
+ }
}
.sidebar__section {