yanchan09/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

deal with browsers that don't support hiding scrollbars (somewhat)

Browse source
This commit is contained in:
Henry Jameson 2022-04-12 00:19:29 +03:00
parent 2e10c1b0a3
commit f4447eb3a0
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/App.scss
View file

@ -27,14 +27,10 @@ body {
} }
} }
// Apply Custom scrollbars // ## Custom scrollbars
// Only show custom scrollbars on devices which
// have a cursor/pointer to operate them
@media (any-pointer: fine) { @media (any-pointer: fine) {
// Body should have background to scrollbar otherwise it will use white (body color?)
body {
background: var(--bg);
scrollbar-color: var(--btn) var(--bg);
}
* { * {
scrollbar-color: var(--btn) transparent; scrollbar-color: var(--btn) transparent;
@ -96,6 +92,10 @@ body {
} }
// stylelint-enable selector-pseudo-class-no-unknown // stylelint-enable selector-pseudo-class-no-unknown
} }
// Body should have background to scrollbar otherwise it will use white (body color?)
html {
scrollbar-color: var(--selectedMenu) var(--wallpaper);
}
} }
a { a {
@ -225,16 +225,18 @@ nav {
margin-left: calc(var(--___paddingIncrease) * -1); margin-left: calc(var(--___paddingIncrease) * -1);
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
// Only show custom scrollbars on devices which // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
// have a cursor/pointer to operate them // might implement old style of hiding scrollbars later if there's demand
&:not(.-show-scrollbar) { @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
scrollbar-width: none; &:not(.-show-scrollbar) {
margin-right: calc(var(--___paddingIncrease) * -1); scrollbar-width: none;
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); margin-right: calc(var(--___paddingIncrease) * -1);
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: block; display: block;
width: 0; width: 0;
}
} }
} }