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).

5 files changed, 108 insertions, 0 deletions

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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -50,6 +53,32 @@
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# 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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 a {
@@ -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
@@ -52,6 +52,13 @@ $messageListTextColor: #EEE;
 $messageListBackgroundColor: #C45C66;
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Scrollbars
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+$scrollbarColor: #A1A1A1;
+$scrollbarHoverColor: #888888;
+$scrollbarBackground: #E1E1E1;
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Import stylesheet
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @import "import/styles";
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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -50,6 +53,32 @@
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# 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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 a {
@@ -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
@@ -52,6 +52,13 @@ $messageListTextColor: #BBB;
 $messageListBackgroundColor: #8C434A;
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Scrollbars
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+$scrollbarColor: #838994;
+$scrollbarHoverColor: #4C566A;
+$scrollbarBackground: #2E3440;
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Import stylesheet
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @import "import/styles";
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
@@ -12,6 +12,39 @@
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# 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
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 a {
@@ -661,6 +694,7 @@ textarea {
 	padding: 0.5rem;
 	-webkit-hyphens: none;
 	hyphens: none;
+	cursor: auto;
 }
 
 input {