diff --git a/src/inline-script/inline-script.js b/src/inline-script/inline-script.js index 3d9d4aa..d7f5406 100644 --- a/src/inline-script/inline-script.js +++ b/src/inline-script/inline-script.js @@ -45,6 +45,11 @@ if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') { theScrollbarStyle.setAttribute('media', 'only x') // disables the style } +if (hasLocalStorage && localStorage.store_underlineLinks === 'true') { + // if the user wants links underlined, then underline 'em + document.body.classList.add('underline-links') +} + // hack to make the scrollbars rounded only on macOS if (/mac/i.test(navigator.platform)) { document.documentElement.style.setProperty('--scrollbar-border-radius', '50px') diff --git a/src/routes/_components/settings/SettingsListItem.html b/src/routes/_components/settings/SettingsListItem.html index 92ee21c..b5eb0e6 100644 --- a/src/routes/_components/settings/SettingsListItem.html +++ b/src/routes/_components/settings/SettingsListItem.html @@ -23,6 +23,7 @@ background: var(--settings-list-item-bg); } .settings-list-item a, .settings-list-item a:visited { + text-decoration: none; color: var(--settings-list-item-text); } .settings-list-item a:hover { @@ -70,4 +71,4 @@ offsetForIcon: void 0 }) } - \ No newline at end of file + diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html index 9504348..a9ae7b2 100644 --- a/src/routes/_pages/settings/general.html +++ b/src/routes/_pages/settings/general.html @@ -1,8 +1,8 @@

General Settings

-

Preferences

-
+

Media

+
@@ -18,20 +18,29 @@ bind:checked="$largeInlineMedia" on:change="onChange(event)">
-
- - -
-
- -

Accessibility

-
+
+ +

UI

+
+
+ + +
+
+ + +
+
+ +

Accessibility

+
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js index 35261f5..893fbbe 100644 --- a/src/routes/_store/observers/loggedInObservers.js +++ b/src/routes/_store/observers/loggedInObservers.js @@ -4,6 +4,7 @@ import { notificationObservers } from './notificationObservers' import { autosuggestObservers } from './autosuggestObservers' import { notificationPermissionObservers } from './notificationPermissionObservers' import { customScrollbarObservers } from './customScrollbarObservers' +import { underlineLinksObservers } from './underlineLinksObservers' // These observers can be lazy-loaded when the user is actually logged in. // Prevents circular dependencies and reduces the size of main.js @@ -14,4 +15,5 @@ export default function loggedInObservers () { autosuggestObservers() notificationPermissionObservers() customScrollbarObservers() + underlineLinksObservers() } diff --git a/src/routes/_store/observers/underlineLinksObservers.js b/src/routes/_store/observers/underlineLinksObservers.js new file mode 100644 index 0000000..db805d6 --- /dev/null +++ b/src/routes/_store/observers/underlineLinksObservers.js @@ -0,0 +1,12 @@ +import { store } from '../store' + +export function underlineLinksObservers () { + store.observe('underlineLinks', underlineLinks => { + if (!process.browser) { + return + } + + // disables or enables the style + document.body.classList.toggle('underline-links', underlineLinks) + }, { init: false }) +} diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js index a0c1b9a..d02c290 100644 --- a/src/routes/_store/store.js +++ b/src/routes/_store/store.js @@ -26,7 +26,8 @@ const persistedState = { pushSubscription: null, reduceMotion: !process.browser || - window.matchMedia('(prefers-reduced-motion: reduce)').matches + window.matchMedia('(prefers-reduced-motion: reduce)').matches, + underlineLinks: false } const nonPersistedState = { diff --git a/src/scss/global.scss b/src/scss/global.scss index d1606c3..031f648 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -90,14 +90,19 @@ h1 { a { color: var(--anchor-text); text-decoration: none; -} -a:visited { - color: var(--anchor-text); -} + &:visited { + color: var(--anchor-text); + } + + &:hover { + text-decoration: underline; + } + + .underline-links & { + text-decoration: underline; + } -a:hover { - text-decoration: underline; } input {