aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-15 14:39:37 -0500
committerGitHub <noreply@github.com>2020-11-15 14:39:37 -0500
commit37ea7e2c9a3d15b6de61972a2163a323572acd28 (patch)
treef2a80b4e33d405df3c846ee2e8e6e6b344a5d62d /ext/mixed
parente4f28b31ce594f16483347d35fe55265d68cbe53 (diff)
Add support for dark theme scrollbar colors (#1038)
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/display.css30
1 files changed, 30 insertions, 0 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 5a8c0212..d4fb8b4c 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -85,6 +85,9 @@
--sidebar-button-icon-color: #333333;
--sidebar-button-disabled-icon-color: #888888;
--sidebar-button-danger-icon-color: #ffffff;
+
+ --scrollbar-thumb-color: #c1c1c1;
+ --scrollbar-track-color: #f1f1f1;
}
:root[data-yomichan-theme=dark] {
/* Colors */
@@ -127,6 +130,9 @@
--sidebar-button-icon-color: #cccccc;
--sidebar-button-disabled-icon-color: #777777;
--sidebar-button-danger-icon-color: #ffffff;
+
+ --scrollbar-thumb-color: #444444;
+ --scrollbar-track-color: #2f2f2f;
}
@@ -185,6 +191,30 @@ a {
}
+/* Scrollbars */
+:root[data-yomichan-theme=dark] .scrollbar {
+ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar {
+ width: auto;
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-button {
+ height: 0;
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-track {
+ background-color: var(--scrollbar-thumb-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-track-piece {
+ background-color: var(--scrollbar-track-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-corner {
+ background-color: var(--scrollbar-track-color);
+}
+
+
/* Main layout */
.content {
width: 100%;