Change rem bullet color if practice is enabled for that rem

Plugins and Custom CSS CSS
#1

This will indicate whether practice is enabled on a rem or not using the rem bullet color. You can change variable values in the :root to whatever color you like. This doesn’t change anything for cloze or image occlusion type cards. An example would look like this.

image

CSS

:root {
 /* color when practice is enabled for both directions*/
 --font-practice-enabled-indicator-c: #d73b3e;   
 /* color when practice is enabled only for forward direction*/
 --font-forward-practice-enabled-indicator-c: #f28500; 
 /* color when practice is enabled only for backward direction*/    
 --font-backward-practice-enabled-indicator-c: #af7ac5; 
}

/* Disable default practice indicators */
.rem-container  .separator-symbol,
.rem-container .MultiLineCardIndicator {
background: inherit;
}

/* This doesn't cover cloze cards or image occlusion cards*/
/* Change the color of all .rem-bullet(s) inside rem-bullet__container if forward practice is enabled */
.rem-container--forwards-practice-enabled .rem-bullet__container .rem-bullet {
  background-color: var(--font-forward-practice-enabled-indicator-c);
}

/* Change the color of all .rem-bullet(s) inside rem-bullet__container if backward practice is enabled */
.rem-container--backwards-practice-enabled  .rem-bullet__container .rem-bullet {
  background-color: var(--font-backward-practice-enabled-indicator-c);
}

/* Change the color of all .rem-bullet(s) inside rem-bullet__container if practice is enabled for both directions */
.rem-container--forwards-practice-enabled.rem-container--backwards-practice-enabled  .rem-bullet__container .rem-bullet {
  background-color: var(--font-practice-enabled-indicator-c);
}
12 Likes
#2

so helpful! thanks for this :slight_smile:

2 Likes
#3

Made some changes to the snippet to use separate color variables (if needed) when practice is enabled for forward only, backward only and both directions.

3 Likes
#4

Is it possible to change the color if practice is disabled?

#5

Yes, here is an example. This changes the color if practice is disabled in both the directions

/* Change the color of all .rem-bullet(s) inside rem-bullet__container if practice is disabled for both directions */
.rem-container--forwards-practice-disabled.rem-container--backwards-practice-disabled  .rem-bullet__container .rem-bullet {
   background-color: var(--font-practice-enabled-indicator-c);
}
2 Likes
#6

Thank you so much! These snippets are great :slight_smile:

2 Likes
#7

Awesome, I have been using it and I love it. Would it be posible to change the color of the Cloze cards??

#8

AFAIK, last time I checked there was not enough info to implement this for cloze and image occlusion type cards. Not sure if this can be achieved through some other CSS wizardry

1 Like