Memrise card template [support thread]

Anki Card Design
355

Memrise-styled progress bar can be incorporated into to the template cards with the help of the Progression add-on:

Memrise progress bar
Memrise progress bar927×825 144 KB

The style for recreating the original design (including the bouncing change animation, excluding the corner aliasing bug) can be found below. It does not require any setup beyond copy-pasting as a whole to the ⚙️ USER STYLES ⚙️ section in the Styling tab of the Card Type editor:

#lt-progress-bar::before, /* resets */
#lt-progress-bar::after,
#lt-progress-bar *::before,
#lt-progress-bar *::after {
    display: none;
}
#lt-progress-bar,
#lt-progress-bar * {
    all: revert;
}


#lt-progress-bar {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    box-sizing: border-box;
    background: var(--col-input-bg);

    position: static;
    max-width: calc(60rem - 6.75rem);
    min-width: 13rem;
    box-sizing: content-box;

    width: calc(100vw - 2 * 1rem);
    margin: 1rem auto calc(0rem);

    border-radius: 0.25rem;
    overflow: hidden;
}

#lt-progress-bar span {
    display: none;
}

body.card:has(#lt-progress-bar) {
    min-height: calc(100vh - 1rem);
}

@media (min-width: 33.25rem) {
  #lt-progress-bar {
    margin: 2rem auto calc(-2rem - 0rem);
  }
  body.card:has(#lt-progress-bar) {
    min-height: calc(100vh - 2rem);
  }
}

@media (min-width: 38.25rem) {
  #lt-progress-bar {
    margin: 2rem auto calc(-2rem - 1rem);
    width: calc(100vw - 2 * 2rem);
  }
}

@media (min-width: 53.25rem) {
  #lt-progress-bar {
    margin: 2rem auto calc(-2rem - 2rem);  /* height + top-margin */
  }
}

#lt-progress-bar .prog-segment.done:not(.empty):not(:has(~ .done:not(.empty))) {
    border-radius: 0 0.25rem 0.25rem 0;
}

#lt-progress-bar .prog-segment {
    flex-basis: 0;
    flex-grow: var(--count);
    height: 2rem;
}

#lt-progress-bar .prog-segment.done {
    background: var(--col-audio-bg);
    order: -1;
}

#lt-progress-bar .prog-segment.future,
#lt-progress-bar .prog-segment.cooldown {
    display: none;
}

#lt-progress-bar .prog-segment.animated {
    transition: flex-grow 0.2s;
    transition-timing-function: cubic-bezier(.28, 2.0, .77, .77);	
}

Additional adjustments can be appended to further differentiate between different Anki card states (new/review/learn/relearn) in the not completed segment of the progress bar.

(pinging @tienppham2 as a follow-up to the progress bar discussion).