Publish Anki's default CSS (for overwriting styles)

My apologies, I included the wrong text above.

html {
    // iPad defaults; get updated by setInsets()
    --top-inset: 74px;
    --bottom-inset: 100px;
    --io-header: 24px;
}

div {
    overflow-wrap: break-word;
}

body {
    text-align: center;
    font-size: 1em;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: antialiased;
    font: -apple-system-body;
    margin: 15px;
    /* Needs to be large enough that content doesn't underflow the bottom buttons when
     scrolling to the answer. */
    margin-bottom: 100px;
    margin-left: max(15px, env(safe-area-inset-left));
    margin-right: max(15px, env(safe-area-inset-right));
}

img {
    max-width: 95%;
}

.drawing {
    zoom: 50%;
}
.nightMode img.drawing {
    filter: #{"invert()"} hue-rotate(180deg);
}
.nightMode .latex {
    filter: #{"invert()"};
}

#typeans {
    width: 95%;
    margin-top: 5px;
}
.invis {
    visibility: hidden;
}

.playImage {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.soundLink {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
a.soundLink:active {
    -webkit-tap-highlight-color: #00000000;
}
.soundLink {
    text-decoration: none;
}

.replay-button {
    display: inline-flex;
    vertical-align: middle;
}

.replay-button svg {
    width: 64px;
    height: 64px;
}

.replay-button svg circle {
    fill: #fff;
    stroke: #414141;
}

.replay-button svg path {
    fill: #414141;
}

.typeGood {
    background: #afa;
    color: black;
}

.typeBad {
    color: black;
    background: #faa;
}

.typeMissed {
    color: black;
    background: #ccc;
}

body.nightMode {
    background-color: black;
    color: white;
}

.nightMode a {
    color: #77ccff;
}

#image-occlusion-container {
    max-height: calc(100vh - var(--top-inset) - var(--bottom-inset) - var(--io-header));
}

button.toggle {
    font-size: 14px;
}

    <body class="card">
        <div id="qa"></div>
        <div class="missing-media">
            <div></div>
            <div>
                <a href="https://docs.ankimobile.net/syncing.html#missing-images"
                    >More Info</a
                >
            </div>
        </div>
    </body>

2 Likes