aboutsummaryrefslogtreecommitdiff
path: root/ext
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
parente4f28b31ce594f16483347d35fe55265d68cbe53 (diff)
Add support for dark theme scrollbar colors (#1038)
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/search.html2
-rw-r--r--ext/fg/float.html4
-rw-r--r--ext/mixed/css/display.css30
3 files changed, 33 insertions, 3 deletions
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 063aae1e..4feec8d5 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -16,7 +16,7 @@
</head>
<body>
-<div class="content" id="content"><div class="content-body" id="content-body">
+<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
<span tabindex="-1" id="content-scroll-focus"></span>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 818bee32..69418472 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -16,7 +16,7 @@
<body>
<div class="content-outer">
-<div class="content" id="content"><div class="content-body" id="content-body">
+<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
<span tabindex="-1" id="content-scroll-focus"></span>
@@ -48,7 +48,7 @@
</div>
</div></div>
-<div class="content-sidebar" id="content-sidebar" hidden><div class="content-sidebar-inner">
+<div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
<div class="content-sidebar-top">
<button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
<button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition (Alt + B)"><span class="sidebar-button-icon" data-icon="left-chevron"></span></button>
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%;