alex/yomichan
1
Fork 0
Code Releases Activity

Add support for dark theme scrollbar colors (#1038)

Browse Source
This commit is contained in:
toasted-nutbread 2020-11-15 14:39:37 -05:00 committed by GitHub
parent e4f28b31ce
commit 37ea7e2c9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/bg/search.html
View File

@ -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>

4
ext/fg/float.html
View File

@ -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>

30
ext/mixed/css/display.css
View File

@ -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%;