aboutsummaryrefslogtreecommitdiffstats
path: root/theme
diff options
context:
space:
mode:
authorThomas Lange <code@nerdmind.de>2021-08-26 19:20:09 +0200
committerThomas Lange <code@nerdmind.de>2021-08-26 19:26:14 +0200
commit3e35de0805f64759d3ff4c28632e65ec795223ac (patch)
tree8ea79338c4966f0010e158675deea873230076dc /theme
parent1b1c6f510673ec39c581a3370427adc369aaca6d (diff)
downloadblog-3e35de0805f64759d3ff4c28632e65ec795223ac.tar.gz
blog-3e35de0805f64759d3ff4c28632e65ec795223ac.tar.xz
blog-3e35de0805f64759d3ff4c28632e65ec795223ac.zip
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).
Diffstat (limited to 'theme')
-rw-r--r--theme/admin/rsrc/css/bright.css30
-rw-r--r--theme/admin/rsrc/css/bright.scss7
-rw-r--r--theme/admin/rsrc/css/dark.css30
-rw-r--r--theme/admin/rsrc/css/dark.scss7
-rw-r--r--theme/admin/rsrc/css/import/_styles.scss34
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 {