Merge pull request #1038 from hgiesel/imgmaxwidth

Fix scrollbar issue in anki-editable component in two ways
This commit is contained in:
Damien Elmes 2021-02-24 10:16:12 +10:00 committed by GitHub
commit c9992e395f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use 'ts/sass/core'; @use 'ts/sass/core';
@use 'buttons'; @use 'ts/sass/scrollbar';
@use 'ts/sass/buttons';
// core.scss sets border-box, but we need to // core.scss sets border-box, but we need to
// keep the old behaviour for now to avoid breaking // keep the old behaviour for now to avoid breaking
@ -20,29 +21,6 @@ h1 {
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
body.nightMode { .nightMode {
&::-webkit-scrollbar { @include scrollbar.night-mode;
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;
}
}
} }

View file

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