Publish Anki's default CSS (for overwriting styles)

Anki Suggestions
1

There’s been a handful of occasions where I’ve had to overwrite Anki’s default css styling, and at the moment it’s trial and error (hopefully !important rules are not needed). I’m sure default styles are light, but it’d be handy to know what they are explicitly to save time.

I’ve also had situations where styling differs (for instance inline code padding-bottom being different in Safari mac OS and Anki’s built in browser) so publishing the Safari version you’re using might also be helpful (I can’t find it in releases here)

Apologies if these suggestions have come before, I couldn’t find them when searching. This plugin is an option, but I’d still prefer a downloadable/viewable file.

2

Main styles for the desktop reviewer:

AnkiWeb:
https://ankiuser.net/_app/immutable/assets/29.DNH0ipdQ.css

4 Likes
3

That’s great thanks! Does AnkiMobile use exactly the same styling?

4

Probably not, I’ve encountered quite a few discrepancies in the styles relative to the desktop version in the past as well. But AnkiMobile is closed source, so there is nothing to reference for that one, unfortunately.

5

The next AnkiMobile update will allow inspecting the contents of the review screen using Safari debugging, so you’ll be able to inspect the source there too. The styling tries to match the desktop version, but there are sometimes differences due to compatibility drift over time, and due to the differences between the way the different platforms present their webviews.

4 Likes
6

Publishing the AnkiMobile CSS code specifically would still be extremely helpful for someone developing shared decks without access to an Apple device.

2 Likes
7 

hr {
    background-color: vars.palette(darkgray, 0);
    margin: 1em 0;
    border: none;
    height: 1px;
}

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;
}

pre {
    text-align: left;
}

#_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;
    line-height: 1.75;
}

code#typeans {
    white-space: pre-wrap;
    font-variant-ligatures: none;
}

.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)");
}
2 Likes
8

AnkiDroid can quickly be set up to support debugging via chrome://inspect on a connected computer to obtain the styles used. See:

1 Like
9

Is there any other general style AnkiMobile applies in addition to the reviewer CSS?
AnkiMobile tends to center text on the card, but I didn’t find any relevant style in the provided code above. For example, here:

The elements on the screenshots are all basic <h3>-<h5> and <label> elements inside a couple of layers of nested divs. The card styles are intended to align all content to the left, and this is how it looks on every other platform (desktop, AnkiDroid, AnkiWeb in every web browser, including Safari on iOS):

Screenshot_20250531-115647
Screenshot_20250531-115647576×1152 119 KB

So it seems there is something unique to AnkiMobile that overwrites the intended behavior.

10

Thanks @Eltaurus @dae @David for the input. Hopefully we can have a central place in the documentation for this in future. I’ve never used Safari debugging on iOS before, so let’s see. It’d be great to try and have those styles in sync :slight_smile:

11

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