Fix scrollbar issue in anki-editable component in two ways

- using :host-context(.nightMode) allows for applying the nightmode
  scroll bar inside the component
- apply max-width: 100% to all element within editable, not just images
This commit is contained in:
Henrik Giesel 2021-02-23 15:52:20 +01:00
parent 69448365c4
commit 8aa8174d4b
4 changed files with 53 additions and 37 deletions

View file

@ -2,7 +2,8 @@
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use 'ts/sass/core';
@use 'buttons';
@use 'ts/sass/scrollbar';
@use 'ts/sass/buttons';
// core.scss sets border-box, but we need to
// keep the old behaviour for now to avoid breaking
@ -20,29 +21,6 @@ h1 {
margin-bottom: 0.2em;
}
body.nightMode {
&::-webkit-scrollbar {
background: var(--window-bg);
&:horizontal {
height: 12px;
}
&:vertical {
width: 12px;
}
}
&::-webkit-scrollbar-thumb {
background: buttons.$fusion-button-hover-bg;
border-radius: 8px;
&:horizontal {
min-width: 50px;
}
&:vertical {
min-height: 50px;
}
}
.nightMode {
@include scrollbar.night-mode;
}

View file

@ -1,3 +1,5 @@
@use 'ts/sass/scrollbar';
anki-editable {
display: block;
overflow-wrap: break-word;
@ -8,16 +10,20 @@ anki-editable {
content: "\a";
white-space: pre;
}
}
img {
max-width: 100%;
&.drawing {
zoom: 50%;
.nightMode & {
filter: unquote("invert() hue-rotate(180deg)");
}
* {
max-width: 100%;
}
}
:host-context(.nightMode) * {
@include scrollbar.night-mode;
}
img.drawing {
zoom: 50%;
.nightMode & {
filter: unquote("invert() hue-rotate(180deg)");
}
}

View file

@ -66,4 +66,4 @@ $fusion-button-base-bg: #454545;
padding-left: 15px;
padding-right: 15px;
color: #e5e5e5;
}
}

32
ts/sass/scrollbar.scss Normal file
View file

@ -0,0 +1,32 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use 'vars';
@use 'buttons';
@mixin night-mode {
&::-webkit-scrollbar {
background: var(--window-bg);
&:horizontal {
height: 12px;
}
&:vertical {
width: 12px;
}
}
&::-webkit-scrollbar-thumb {
background: buttons.$fusion-button-hover-bg;
border-radius: 8px;
&:horizontal {
min-width: 50px;
}
&:vertical {
min-height: 50px;
}
}
}