Allow CSS styling based on card state

Anki Suggestions
4

I’m just going to list what I’ve learned from reading the above:

  1. The “Custom scheduling” javascript is a monkey patch, while it runs the states object exists, but states is not accessible from the normal card design.
  2. If we want to expose states, it can be injected directly into the HTML. (shown later)
  3. I’m assuming states is not exposed on purpose to avoid API surface increase.

Custom scheduling:

// expose states
e = document.createElement("script")
e.text='var states='+JSON.stringify(states)
document.body.appendChild(e)

// add ankiState_* to body class, e.g. ankiState_new
ankiState = Object.keys(states.current.normal).shift()
document.body.classList.add('ankiState_'+ankiState)

Card template styling (untested):

body.ankiState_new .notifier::before {
  content: 'NEW!  ';
  color: blue;
  font-size: 60%;
  white-space: pre;
}