anki/ts/editable/editable-base.scss
Matthias Metelka dc4a915de1
Prevent skewing of resized images in editor (#2488)
* Unset inline size when shrinking images

to prevent skewing (https://forums.ankiweb.net/t/is-there-a-way-to-prevent-the-squish-skew-of-the-image-in-the-browser-editor/29925)

* Unset inline width/height for all images when shrinking is enabled
2023-05-05 19:16:06 +10:00

47 lines
841 B
SCSS

@use "sass/scrollbar";
* {
max-width: 100%;
}
p {
margin-top: 0;
margin-bottom: 1rem;
&:empty::after {
content: "\a";
white-space: pre;
}
}
[hidden] {
display: none;
}
:host(body),
:host(body) * {
@include scrollbar.custom;
}
pre {
white-space: pre-wrap;
}
// image size constraints
img:not(.mathjax) {
&:not([data-editor-shrink="false"]) {
:host-context(.shrink-image) & {
max-width: var(--editor-default-max-width);
max-height: var(--editor-default-max-height);
// prevent inline width/height from skewing aspect ratio
width: unset;
height: unset;
}
}
&[data-editor-shrink="true"] {
max-width: var(--editor-shrink-max-width);
max-height: var(--editor-shrink-max-height);
}
}