diff --git a/bin/build-sass.js b/bin/build-sass.js
index 9c62c006..b5199c8b 100755
--- a/bin/build-sass.js
+++ b/bin/build-sass.js
@@ -15,6 +15,7 @@ const now = require('performance-now')
const globalScss = path.join(__dirname, '../scss/global.scss')
const defaultThemeScss = path.join(__dirname, '../scss/themes/_default.scss')
const offlineThemeScss = path.join(__dirname, '../scss/themes/_offline.scss')
+const customScrollbarScss = path.join(__dirname, '../scss/custom-scrollbars.scss')
const html2xxFile = path.join(__dirname, '../templates/2xx.html')
const scssDir = path.join(__dirname, '../scss')
const themesScssDir = path.join(__dirname, '../scss/themes')
@@ -41,12 +42,14 @@ async function renderCss (file) {
async function compileGlobalSass () {
let mainStyle = (await Promise.all([defaultThemeScss, globalScss].map(renderCss))).join('')
let offlineStyle = (await renderCss(offlineThemeScss))
+ let scrollbarStyle = (await renderCss(customScrollbarScss))
let html = await readFile(html2xxFile, 'utf8')
html = html.replace(/[\s\S]+/,
`\n` +
`\n` +
`\n` +
+ `\n` +
``
)
diff --git a/inline-script.js b/inline-script.js
index 3d76f451..6dc37c74 100644
--- a/inline-script.js
+++ b/inline-script.js
@@ -25,6 +25,17 @@ if (!localStorage.store_currentInstance) {
document.head.appendChild(style)
}
+if (localStorage.store_disableCustomScrollbars === 'true') {
+ // if user has disabled custom scrollbars, remove this style
+ let theScrollbarStyle = document.getElementById('theScrollbarStyle')
+ theScrollbarStyle.setAttribute('media', 'only x') // disables the style
+}
+
+// hack to make the scrollbars rounded only on macOS
+if (/mac/i.test(navigator.platform)) {
+ document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')
+}
+
// TODO: remove this hack when Safari works with cross-origin window.open()
// in a PWA: https://github.com/nolanlawson/pinafore/issues/45
if (/iP(?:hone|ad|od)/.test(navigator.userAgent)) {
diff --git a/routes/_pages/settings/general.html b/routes/_pages/settings/general.html
index 0c2d30c1..81e03850 100644
--- a/routes/_pages/settings/general.html
+++ b/routes/_pages/settings/general.html
@@ -23,6 +23,11 @@
bind:checked="$omitEmojiInDisplayNames" on:change="$save()">
+
+
+
+
Themes
diff --git a/routes/_store/observers/customScrollbarObservers.js b/routes/_store/observers/customScrollbarObservers.js
new file mode 100644
index 00000000..231b621b
--- /dev/null
+++ b/routes/_store/observers/customScrollbarObservers.js
@@ -0,0 +1,12 @@
+let theScrollbarStyle = process.browser && document.getElementById('theScrollbarStyle')
+
+export function customScrollbarObservers (store) {
+ store.observe('disableCustomScrollbars', disableCustomScrollbars => {
+ if (!process.browser) {
+ return
+ }
+
+ // disables or enables the style
+ theScrollbarStyle.setAttribute('media', disableCustomScrollbars ? 'only x' : 'all')
+ }, { init: false })
+}
diff --git a/routes/_store/observers/observers.js b/routes/_store/observers/observers.js
index a66aa949..278424d4 100644
--- a/routes/_store/observers/observers.js
+++ b/routes/_store/observers/observers.js
@@ -7,6 +7,7 @@ import { autosuggestObservers } from './autosuggestObservers'
import { pageVisibilityObservers } from './pageVisibilityObservers'
import { resizeObservers } from './resizeObservers'
import { notificationPermissionObservers } from './notificationPermissionObservers'
+import { customScrollbarObservers } from './customScrollbarObservers'
export function observers (store) {
instanceObservers(store)
@@ -18,4 +19,5 @@ export function observers (store) {
pageVisibilityObservers(store)
resizeObservers(store)
notificationPermissionObservers(store)
+ customScrollbarObservers(store)
}
diff --git a/routes/_store/store.js b/routes/_store/store.js
index 9cc41f0e..28db1072 100644
--- a/routes/_store/store.js
+++ b/routes/_store/store.js
@@ -15,6 +15,7 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
'autoplayGifs',
'markMediaAsSensitive',
'reduceMotion',
+ 'disableCustomScrollbars',
'omitEmojiInDisplayNames',
'pinnedPages',
'composeData',
@@ -42,6 +43,7 @@ export const store = new PinaforeStore({
autoplayGifs: false,
markMediaAsSensitive: false,
reduceMotion: !process.browser || window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+ disableCustomScrollbars: false,
pinnedPages: {},
instanceLists: {},
pinnedStatuses: {},
diff --git a/scss/custom-scrollbars.scss b/scss/custom-scrollbars.scss
new file mode 100644
index 00000000..52866158
--- /dev/null
+++ b/scss/custom-scrollbars.scss
@@ -0,0 +1,34 @@
+html {
+ // Firefox with scrollbar config changes as of 2018-11
+ scrollbar-face-color: var(--scrollbar-face-color);
+ scrollbar-track-color: var(--scrollbar-track-color);
+ // Firefox nightly as of 2018-11, new standard version
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+ scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color);
+}
+
+::-webkit-scrollbar {
+ width: var(--scrollbar-width);
+ height: var(--scrollbar-height);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-face-color);
+ border-radius: var(--scrollbar-border-radius);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--scrollbar-face-color-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+ background: var(--scrollbar-face-color-active);
+}
+
+::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
+ background: var(--scrollbar-track-color);
+}
+
+::-webkit-scrollbar-corner {
+ background: var(--scrollbar-background-color);
+}
\ No newline at end of file
diff --git a/scss/themes/_scrollbars.scss b/scss/themes/_scrollbars.scss
index 89391e8f..3d490469 100644
--- a/scss/themes/_scrollbars.scss
+++ b/scss/themes/_scrollbars.scss
@@ -1,34 +1,10 @@
-html {
- // Firefox with scrollbar config changes as of 2018-11
- scrollbar-face-color: #{$scrollbar-face};
- scrollbar-track-color: #{$scrollbar-track};
- // Firefox nightly as of 2018-11, new standard version
- // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
- scrollbar-color: #{$scrollbar-face $scrollbar-track};
-}
-
-::-webkit-scrollbar {
- width: 12px;
- height: 12px;
-}
-
-::-webkit-scrollbar-thumb {
- background: #{$scrollbar-face};
- border-radius: 0;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #{$scrollbar-face-hover};
-}
-
-::-webkit-scrollbar-thumb:active {
- background: #{$scrollbar-face-active};
-}
-
-::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
- background: #{$scrollbar-track};
-}
-
-::-webkit-scrollbar-corner {
- background: transparent;
-}
+:root {
+ --scrollbar-face-color: #{$scrollbar-face};
+ --scrollbar-track-color: #{$scrollbar-track};
+ --scrollbar-border-radius: 0;
+ --scrollbar-face-color-hover: #{$scrollbar-face-hover};
+ --scrollbar-face-color-active: #{$scrollbar-face-active};
+ --scrollbar-width: 12px;
+ --scrollbar-height: 12px;
+ --scrollbar-background-color: transparent;
+}
\ No newline at end of file
diff --git a/templates/2xx.html b/templates/2xx.html
index e721627b..3d9b4412 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -16,11 +16,14 @@
+
@@ -71,6 +74,17 @@ if (!localStorage.store_currentInstance) {
document.head.appendChild(style)
}
+if (localStorage.store_disableCustomScrollbars === 'true') {
+ // if user has disabled custom scrollbars, remove this style
+ let theScrollbarStyle = document.getElementById('theScrollbarStyle')
+ theScrollbarStyle.setAttribute('media', 'only x') // disables the style
+}
+
+// hack to make the scrollbars rounded only on macOS
+if (/mac/i.test(navigator.platform)) {
+ document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')
+}
+
// TODO: remove this hack when Safari works with cross-origin window.open()
// in a PWA: https://github.com/nolanlawson/pinafore/issues/45
if (/iP(?:hone|ad|od)/.test(navigator.userAgent)) {