7686cb8de8
* Cloze styling is not required in I/O notetype * Use raw string for IO template * Rename to notetype.css and use more specific ids * Move internal i/o styling into runtime Storing it in the notetype makes it difficult to make changes, and makes it easier for the user to break. * Fix misaligned occlusions At larger screen sizes, the canvas was not increasing above its configured size, so it ended up being placed top center instead of expanding to fit the entire container area. To resolve this, both the image and canvas are forced to the container size, and the container is constrained to the size of the viewport, with the same aspect ratio as the image. Closes #2492
28 lines
629 B
SCSS
28 lines
629 B
SCSS
#image-occlusion-container {
|
|
position: relative;
|
|
// if height-constrained, ensure container is centered
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
// allow for 20px margin on html element, or short windows can truncate
|
|
// image
|
|
max-height: calc(95vh - 40px);
|
|
}
|
|
|
|
#image-occlusion-container img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
// remove the default image limits, as we rely on container
|
|
max-width: unset;
|
|
max-height: unset;
|
|
}
|
|
|
|
#image-occlusion-canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
} |