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
128 lines
2.1 KiB
SCSS
128 lines
2.1 KiB
SCSS
/* Copyright: Ankitects Pty Ltd and contributors
|
|
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
|
|
|
|
@use "sass/vars";
|
|
@use "ts/image-occlusion/review";
|
|
|
|
hr {
|
|
background-color: vars.palette(darkgray, 0);
|
|
}
|
|
|
|
body {
|
|
margin: 20px;
|
|
overflow-wrap: break-word;
|
|
// default background setting to fit with toolbar
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: top;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
// explicit nightMode definition required
|
|
// to override default .card styling
|
|
body.nightMode {
|
|
background-color: var(--canvas);
|
|
color: var(--fg);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 95vh;
|
|
}
|
|
|
|
li {
|
|
text-align: start;
|
|
}
|
|
|
|
#_flag {
|
|
position: fixed;
|
|
[dir="ltr"] & {
|
|
right: 10px;
|
|
}
|
|
[dir="rtl"] & {
|
|
left: 10px;
|
|
}
|
|
top: 0;
|
|
font-size: 30px;
|
|
-webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: black;
|
|
}
|
|
|
|
#_mark {
|
|
position: fixed;
|
|
[dir="ltr"] & {
|
|
left: 10px;
|
|
}
|
|
[dir="rtl"] & {
|
|
right: 10px;
|
|
}
|
|
top: 0;
|
|
font-size: 30px;
|
|
color: yellow;
|
|
-webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: black;
|
|
}
|
|
|
|
#typeans {
|
|
width: 100%;
|
|
// https://anki.tenderapp.com/discussions/beta-testing/1854-using-margin-auto-causes-horizontal-scrollbar-on-typesomething
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
code#typeans {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.typeGood {
|
|
background: #afa;
|
|
color: black;
|
|
}
|
|
|
|
.typeBad {
|
|
color: black;
|
|
background: #faa;
|
|
}
|
|
|
|
.typeMissed {
|
|
color: black;
|
|
background: #ccc;
|
|
}
|
|
|
|
button {
|
|
margin: 1em 0.5em;
|
|
}
|
|
|
|
.replay-button {
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
margin: 3px;
|
|
|
|
svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
circle {
|
|
fill: #fff;
|
|
stroke: #414141;
|
|
}
|
|
|
|
path {
|
|
fill: #414141;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nightMode {
|
|
.latex {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
.drawing {
|
|
zoom: 50%;
|
|
}
|
|
.nightMode img.drawing {
|
|
filter: unquote("invert(1) hue-rotate(180deg)");
|
|
}
|