From f4447eb3a0162a3223a19d0433105a70250759d4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 00:19:29 +0300
Subject: [PATCH] deal with browsers that don't support hiding scrollbars
(somewhat)
---
src/App.scss | 34 ++++++++++++++++++----------------
1 file changed, 18 insertions(+), 16 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 236a2b54..90f1e0d5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -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;
+ }
}
}