Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scrollbar styles

Browse Source
This commit is contained in:
James Lyne 2021-05-25 21:23:12 +01:00
parent 0841640e76
commit 68bd830ab9
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -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);
}

8
src/components/Sidebar.vue
View File

@ -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 {