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-width: thin;
scrollbar-color: var(--background-light) transparent;
}
*:hover, *:focus-within {
scrollbar-color: var(--background-hover) transparent; scrollbar-color: var(--background-hover) transparent;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 1.2rem; width: 0.7rem;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
background-color: var(--background-light); background-color: var(--background-light);
border: 2px solid #000000;
border-radius: 2rem; border-radius: 2rem;
transition: background 1s ease-in; 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); 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; padding: 0.2rem 0.5rem 0 0.2rem;
width: 24rem; width: 24rem;
align-items: flex-end; 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 { .sidebar__section {