Fix custom CSS not being applied to scrollbars in night mode (#1525)

This commit is contained in:
Hikaru Y 2021-12-05 07:20:42 +09:00 committed by GitHub
parent eefa46dc8e
commit e8b795ba69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 10 additions and 15 deletions

View file

@ -33,6 +33,6 @@ h1 {
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
.nightMode { .night-mode {
@include scrollbar.night-mode; @include scrollbar.night-mode;
} }

View file

@ -41,7 +41,7 @@ body {
overscroll-behavior: none; overscroll-behavior: none;
} }
.nightMode { .night-mode {
@include scrollbar.night-mode; @include scrollbar.night-mode;
} }

View file

@ -5,7 +5,7 @@
@use "fusion-vars"; @use "fusion-vars";
@mixin night-mode { @mixin night-mode {
&::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: var(--window-bg); background-color: var(--window-bg);
&:horizontal { &:horizontal {
@ -17,7 +17,7 @@
} }
} }
&::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: fusion-vars.$button-hover-bg; background: fusion-vars.$button-hover-bg;
border-radius: 8px; border-radius: 8px;
@ -30,7 +30,7 @@
} }
} }
&::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: var(--window-bg); background-color: var(--window-bg);
} }
} }

View file

@ -110,12 +110,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div> </div>
<style lang="scss"> <style lang="scss">
@use "sass/scrollbar";
.nightMode {
@include scrollbar.night-mode;
}
.button-toolbar { .button-toolbar {
flex-wrap: var(--buttons-wrap); flex-wrap: var(--buttons-wrap);
padding-left: 0.15rem; padding-left: 0.15rem;

View file

@ -2,10 +2,6 @@
* { * {
max-width: 100%; max-width: 100%;
:host(.nightMode) & {
@include scrollbar.night-mode;
}
} }
p { p {
@ -21,3 +17,7 @@ p {
[hidden] { [hidden] {
display: none; display: none;
} }
:host(.night-mode) {
@include scrollbar.night-mode;
}

View file

@ -245,6 +245,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
<div <div
class:hidden class:hidden
class:night-mode={$pageTheme.isDark}
use:attachShadow use:attachShadow
use:attachStyles use:attachStyles
use:attachContentEditable={{ stylesDidLoad }} use:attachContentEditable={{ stylesDidLoad }}