Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 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

20
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,8 +225,9 @@ 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
@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
&:not(.-show-scrollbar) { &:not(.-show-scrollbar) {
scrollbar-width: none; scrollbar-width: none;
margin-right: calc(var(--___paddingIncrease) * -1); margin-right: calc(var(--___paddingIncrease) * -1);
@ -237,6 +238,7 @@ nav {
width: 0; width: 0;
} }
} }
}
.panel-heading.-sticky { .panel-heading.-sticky {
top: calc(var(--columnGap) / -2); top: calc(var(--columnGap) / -2);