From 62165ae9b73abd985aeea251daa6886873494d1d Mon Sep 17 00:00:00 2001 From: protoclown Date: Mon, 2 Sep 2024 22:44:53 +0200 Subject: [PATCH] fix(css): make scrollbar visible again Signed-off-by: protoclown --- apps/theming/css/default.css | 2 +- apps/theming/lib/Themes/DarkHighContrastTheme.php | 2 +- apps/theming/lib/Themes/DarkTheme.php | 2 -- apps/theming/lib/Themes/DefaultTheme.php | 2 +- apps/theming/lib/Themes/HighContrastTheme.php | 2 +- core/css/styles.scss | 3 +-- 6 files changed, 5 insertions(+), 8 deletions(-) diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 11041c5c4c7..ad5b27530c3 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -22,7 +22,7 @@ --color-text-light: var(--color-main-text); /** @deprecated use `--color-text-maxcontrast` instead */ --color-text-lighter: var(--color-text-maxcontrast); - --color-scrollbar: rgba(34,34,34, .15); + --color-scrollbar: var(--color-border-maxcontrast) transparent; --color-error: #DB0606; --color-error-rgb: 219,6,6; --color-error-hover: #df2525; diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php index 64804d24e76..127a0bd464c 100644 --- a/apps/theming/lib/Themes/DarkHighContrastTheme.php +++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php @@ -89,7 +89,7 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme { '--color-info-hover' => $this->util->lighten($colorInfo, 10), '--color-info-text' => $this->util->lighten($colorInfo, 20), - '--color-scrollbar' => $this->util->lighten($colorMainBackground, 35), + '--color-scrollbar' => 'auto', // used for the icon loading animation '--color-loading-light' => '#000000', diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index ed8e7649c33..fd273d4697d 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -66,8 +66,6 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-main-background-rgb' => $colorMainBackgroundRGB, '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)', - '--color-scrollbar' => $this->util->lighten($colorMainBackground, 15), - '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 47a54eb0e1a..34084d4ccbc 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -126,7 +126,7 @@ class DefaultTheme implements ITheme { '--color-text-light' => 'var(--color-main-text)', // deprecated '--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated - '--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)', + '--color-scrollbar' => 'var(--color-border-maxcontrast) transparent', // error/warning/success/info feedback colours '--color-error' => $colorError, diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php index 6f33c0bbcd9..3eee51630ba 100644 --- a/apps/theming/lib/Themes/HighContrastTheme.php +++ b/apps/theming/lib/Themes/HighContrastTheme.php @@ -94,7 +94,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme { '--color-favorite' => '#936B06', - '--color-scrollbar' => $this->util->darken($colorMainBackground, 25), + '--color-scrollbar' => 'auto', // used for the icon loading animation '--color-loading-light' => '#dddddd', diff --git a/core/css/styles.scss b/core/css/styles.scss index ef85a7964d6..8aa95fffe50 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -20,8 +20,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr font-family: inherit; vertical-align: baseline; cursor: default; - scrollbar-color: var(--color-border-dark) transparent; - scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar); } .js-focus-visible :focus:not(.focus-visible) {