Provide option to force use of system scrollbar styling (#32117)

This commit is contained in:
Michael Stanclift 2024-12-03 02:38:23 -06:00 committed by GitHub
parent be43b01eb1
commit 04b7046be1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 38 additions and 25 deletions

View file

@ -147,6 +147,7 @@ module ApplicationHelper
output << content_for(:body_classes) output << content_for(:body_classes)
output << "theme-#{current_theme.parameterize}" output << "theme-#{current_theme.parameterize}"
output << 'system-font' if current_account&.user&.setting_system_font_ui output << 'system-font' if current_account&.user&.setting_system_font_ui
output << 'custom-scrollbars' unless current_account&.user&.setting_system_scrollbars_ui
output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion') output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
output << 'rtl' if locale_direction == 'rtl' output << 'rtl' if locale_direction == 'rtl'
output.compact_blank.join(' ') output.compact_blank.join(' ')

View file

@ -523,6 +523,13 @@ a.sparkline {
} }
} }
.notification-group--annual-report {
.notification-group__icon,
.notification-group__main .link-button {
color: var(--indigo-3);
}
}
@supports not selector(::-webkit-scrollbar) { @supports not selector(::-webkit-scrollbar) {
html { html {
scrollbar-color: rgba($action-button-color, 0.25) scrollbar-color: rgba($action-button-color, 0.25)
@ -530,13 +537,8 @@ a.sparkline {
} }
} }
::-webkit-scrollbar-thumb { .custom-scrollbars {
opacity: 0.25; ::-webkit-scrollbar-thumb {
} opacity: 0.25;
.notification-group--annual-report {
.notification-group__icon,
.notification-group__main .link-button {
color: var(--indigo-3);
} }
} }

View file

@ -59,24 +59,26 @@ table {
} }
} }
::-webkit-scrollbar { .custom-scrollbars {
width: 8px; ::-webkit-scrollbar {
height: 8px; width: 8px;
} height: 8px;
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $action-button-color; background-color: $action-button-color;
border: 2px var(--background-border-color); border: 2px var(--background-border-color);
border-radius: 12px; border-radius: 12px;
width: 6px; width: 6px;
box-shadow: inset 0 0 0 2px var(--background-border-color); box-shadow: inset 0 0 0 2px var(--background-border-color);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: var(--background-border-color); background-color: var(--background-border-color);
border-radius: 0px; border-radius: 0px;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: transparent; background: transparent;
}
} }

View file

@ -43,6 +43,10 @@ module User::HasSettings
settings['web.use_system_font'] settings['web.use_system_font']
end end
def setting_system_scrollbars_ui
settings['web.use_system_scrollbars']
end
def setting_noindex def setting_noindex
settings['noindex'] settings['noindex']
end end

View file

@ -24,6 +24,7 @@ class UserSettings
setting :use_blurhash, default: true setting :use_blurhash, default: true
setting :use_pending_items, default: false setting :use_pending_items, default: false
setting :use_system_font, default: false setting :use_system_font, default: false
setting :use_system_scrollbars, default: false
setting :disable_swiping, default: false setting :disable_swiping, default: false
setting :disable_hover_cards, default: false setting :disable_hover_cards, default: false
setting :delete_modal, default: true setting :delete_modal, default: true

View file

@ -59,6 +59,7 @@
= ff.input :'web.disable_swiping', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_swiping') = ff.input :'web.disable_swiping', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_swiping')
= ff.input :'web.disable_hover_cards', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_hover_cards') = ff.input :'web.disable_hover_cards', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_hover_cards')
= ff.input :'web.use_system_font', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_system_font_ui') = ff.input :'web.use_system_font', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_system_font_ui')
= ff.input :'web.use_system_scrollbars', wrapper: :with_label, hint: I18n.t('simple_form.hints.defaults.setting_system_scrollbars_ui'), label: I18n.t('simple_form.labels.defaults.setting_system_scrollbars_ui')
%h4= t 'appearance.discovery' %h4= t 'appearance.discovery'

View file

@ -60,6 +60,7 @@ en:
setting_display_media_default: Hide media marked as sensitive setting_display_media_default: Hide media marked as sensitive
setting_display_media_hide_all: Always hide media setting_display_media_hide_all: Always hide media
setting_display_media_show_all: Always show media setting_display_media_show_all: Always show media
setting_system_scrollbars_ui: Applies only to desktop browsers based on Safari and Chrome
setting_use_blurhash: Gradients are based on the colors of the hidden visuals but obfuscate any details setting_use_blurhash: Gradients are based on the colors of the hidden visuals but obfuscate any details
setting_use_pending_items: Hide timeline updates behind a click instead of automatically scrolling the feed setting_use_pending_items: Hide timeline updates behind a click instead of automatically scrolling the feed
username: You can use letters, numbers, and underscores username: You can use letters, numbers, and underscores
@ -223,6 +224,7 @@ en:
setting_hide_network: Hide your social graph setting_hide_network: Hide your social graph
setting_reduce_motion: Reduce motion in animations setting_reduce_motion: Reduce motion in animations
setting_system_font_ui: Use system's default font setting_system_font_ui: Use system's default font
setting_system_scrollbars_ui: Use system's default scrollbar
setting_theme: Site theme setting_theme: Site theme
setting_trends: Show today's trends setting_trends: Show today's trends
setting_unfollow_modal: Show confirmation dialog before unfollowing someone setting_unfollow_modal: Show confirmation dialog before unfollowing someone