From 3e35de0805f64759d3ff4c28632e65ec795223ac Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Thu, 26 Aug 2021 19:20:09 +0200 Subject: Explicitly set scrollbar colors for admin theme Explicitly set the scrollbar colors for the admin theme instead of using the default colors of the web browser and integrate the scrollbar colors better into the user-selected color scheme (bright or dark). --- theme/admin/rsrc/css/bright.css | 30 ++++++++++++++++++++++++++++ theme/admin/rsrc/css/bright.scss | 7 +++++++ theme/admin/rsrc/css/dark.css | 30 ++++++++++++++++++++++++++++ theme/admin/rsrc/css/dark.scss | 7 +++++++ theme/admin/rsrc/css/import/_styles.scss | 34 ++++++++++++++++++++++++++++++++ 5 files changed, 108 insertions(+) diff --git a/theme/admin/rsrc/css/bright.css b/theme/admin/rsrc/css/bright.css index df7027a..3f76207 100644 --- a/theme/admin/rsrc/css/bright.css +++ b/theme/admin/rsrc/css/bright.css @@ -21,6 +21,9 @@ # Information message box ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Import stylesheet ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -49,6 +52,32 @@ color: #000; } +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +* { + scrollbar-color: #A1A1A1 #E1E1E1; +} +*::-webkit-scrollbar { + width: 0.75rem; +} +*::-webkit-scrollbar-track { + background: #E1E1E1; +} +*::-webkit-scrollbar-thumb { + background: #A1A1A1; + background-clip: padding-box; + border: 0.15rem solid transparent; +} +*::-webkit-scrollbar-thumb:hover { + background: #888888; + background-clip: padding-box; + border: 0.15rem solid transparent; +} +*::-webkit-scrollbar-corner { + background: transparent; +} + /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hyperlinks ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -624,6 +653,7 @@ textarea { padding: 0.5rem; -webkit-hyphens: none; hyphens: none; + cursor: auto; } input[type=submit] { diff --git a/theme/admin/rsrc/css/bright.scss b/theme/admin/rsrc/css/bright.scss index 8173497..a3d5fb2 100644 --- a/theme/admin/rsrc/css/bright.scss +++ b/theme/admin/rsrc/css/bright.scss @@ -51,6 +51,13 @@ $deleteButtonBackgroundColor: #C45C66; $messageListTextColor: #EEE; $messageListBackgroundColor: #C45C66; +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +$scrollbarColor: #A1A1A1; +$scrollbarHoverColor: #888888; +$scrollbarBackground: #E1E1E1; + /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Import stylesheet ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ diff --git a/theme/admin/rsrc/css/dark.css b/theme/admin/rsrc/css/dark.css index a69bfc5..3d5b883 100644 --- a/theme/admin/rsrc/css/dark.css +++ b/theme/admin/rsrc/css/dark.css @@ -21,6 +21,9 @@ # Information message box ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Import stylesheet ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -49,6 +52,32 @@ color: #000; } +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +* { + scrollbar-color: #838994 #2E3440; +} +*::-webkit-scrollbar { + width: 0.75rem; +} +*::-webkit-scrollbar-track { + background: #2E3440; +} +*::-webkit-scrollbar-thumb { + background: #838994; + background-clip: padding-box; + border: 0.15rem solid transparent; +} +*::-webkit-scrollbar-thumb:hover { + background: #4C566A; + background-clip: padding-box; + border: 0.15rem solid transparent; +} +*::-webkit-scrollbar-corner { + background: transparent; +} + /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hyperlinks ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -624,6 +653,7 @@ textarea { padding: 0.5rem; -webkit-hyphens: none; hyphens: none; + cursor: auto; } input[type=submit] { diff --git a/theme/admin/rsrc/css/dark.scss b/theme/admin/rsrc/css/dark.scss index e75e280..3c4ace8 100644 --- a/theme/admin/rsrc/css/dark.scss +++ b/theme/admin/rsrc/css/dark.scss @@ -51,6 +51,13 @@ $deleteButtonBackgroundColor: #8F4F55; $messageListTextColor: #BBB; $messageListBackgroundColor: #8C434A; +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +$scrollbarColor: #838994; +$scrollbarHoverColor: #4C566A; +$scrollbarBackground: #2E3440; + /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Import stylesheet ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ diff --git a/theme/admin/rsrc/css/import/_styles.scss b/theme/admin/rsrc/css/import/_styles.scss index 87614a8..b499700 100644 --- a/theme/admin/rsrc/css/import/_styles.scss +++ b/theme/admin/rsrc/css/import/_styles.scss @@ -11,6 +11,39 @@ color: #000; } +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Scrollbars +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +* { + // Firefox (TODO: Possibility to add padding?!) + scrollbar-color: $scrollbarColor $scrollbarBackground; + + // Chrome, Edge & Safari + &::-webkit-scrollbar { + width: 0.75rem; + + &-track { + background: $scrollbarBackground; + } + + &-thumb { + background: $scrollbarColor; + background-clip: padding-box; + border: 0.15rem solid transparent; + + &:hover { + background: $scrollbarHoverColor; + background-clip: padding-box; + border: 0.15rem solid transparent; + } + } + + &-corner { + background: transparent; + } + } +} + /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hyperlinks ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -661,6 +694,7 @@ textarea { padding: 0.5rem; -webkit-hyphens: none; hyphens: none; + cursor: auto; } input { -- cgit v1.2.3