thomate/pleroma-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) {
// 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;
@ -96,6 +92,10 @@ body {
}
// 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 {
@ -225,16 +225,18 @@ nav {
margin-left: calc(var(--___paddingIncrease) * -1);
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
// Only show custom scrollbars on devices which
// have a cursor/pointer to operate them
&:not(.-show-scrollbar) {
scrollbar-width: none;
margin-right: calc(var(--___paddingIncrease) * -1);
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
// might implement old style of hiding scrollbars later if there's demand
@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
&:not(.-show-scrollbar) {
scrollbar-width: none;
margin-right: calc(var(--___paddingIncrease) * -1);
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
&::-webkit-scrollbar {
display: block;
width: 0;
&::-webkit-scrollbar {
display: block;
width: 0;
}
}
}