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 {