diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-11-15 14:39:37 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-11-15 14:39:37 -0500 |
| commit | 37ea7e2c9a3d15b6de61972a2163a323572acd28 (patch) | |
| tree | f2a80b4e33d405df3c846ee2e8e6e6b344a5d62d | |
| parent | e4f28b31ce594f16483347d35fe55265d68cbe53 (diff) | |
Add support for dark theme scrollbar colors (#1038)
| -rw-r--r-- | ext/bg/search.html | 2 | ||||
| -rw-r--r-- | ext/fg/float.html | 4 | ||||
| -rw-r--r-- | ext/mixed/css/display.css | 30 |
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%; |