Allow styles to differentiate unseen words from added but not yet reviewed words

[YamiZee]

I want to display unseen cards as purple text, and seen cards as blue text. This way when I encounter a purple word, I always add it to my mining deck / word list. If I see a blue word, I can first consider if I should review it or not. Just because I've seen a word before doesn't mean I want to add it to my review queue.

An unseen word that is not in a word list, should not be treated the same as a word that has been seen and added to a word list. These are not the same. One is unknown, the other is seen. I want to track which words I've seen, but not necessarily begin reviewing them. Currently if both "new" and "in word list" are styled in the styling settings, the "new" overwrites the "in word list" style.

To make it work with the current styles, this would require priority as such: young/matured/mastered/due > "in word list" > "new". This is the only way that unreviewed words would be differentiated from reviewed and new words.

This could also be clarified by adding a new tag such as "no reviews", or adding a "unknown" styling row to replace "new" and making "new" mean what it means in anki, which is added but not yet reviewed cards.

[ars-con]

I did it with some (very) sloppy CSS in "Custom word CSS":

(all of it can be shortened, jiten custom CSS supports SCSS, it turns out)

// has been reviewed 
.jiten-word.mastered,
.jiten-word.mastered:is(.in-word-list, .in-media-deck, .in-frequency-deck) {
  background-color: rgba(239, 109, 17, 0.07) !important;
}
.jiten-word.mastered.hovered,
.jiten-word.mastered:is(.in-word-list, .in-media-deck, .in-frequency-deck).hovered{
  background-color: rgba(239, 109, 17, 0.15) !important;
}

.jiten-word.mature, 
.jiten-word.mature:is(.in-word-list, .in-media-deck, .in-frequency-deck) {
  background-color: rgba(239, 109, 17, 0.15) !important;
}
.jiten-word.mature.hovered, 
.jiten-word.mature:is(.in-word-list, .in-media-deck, .in-frequency-deck).hovered {
  background-color: rgba(239, 109, 17, 0.25) !important;
}

.jiten-word.young,
.jiten-word.young:is(.in-word-list, .in-media-deck, .in-frequency-deck) {
  background-color: rgba(252, 222, 0, 0.2) !important;
}
.jiten-word.young.hovered,
.jiten-word.young:is(.in-word-list, .in-media-deck, .in-frequency-deck).hovered {
  background-color: rgba(252, 222, 0, 0.3) !important;
}

// new, but already saved in a word list
.jiten-word.in-word-list:not(.blacklisted, .young, .mastered, .mature) { 
  background-color: rgba(97, 172, 255, 0.1) !important;
}
.jiten-word.in-word-list:not(.blacklisted, .young, .mastered, .mature).hovered { 
  background-color: rgba(97, 172, 255, 0.2) !important;
}
// improve coverage the most for current media
.jiten-word.new.in-media-deck:not(.in-word-list, .blacklisted) {
  background-color: rgba(86, 224, 40, 0.3) !important;
}
.jiten-word.new.in-media-deck:not(.in-word-list, .blacklisted).hovered {
  background-color: rgba(86, 224, 40, 0.4) !important;
}
// common 
.jiten-word.new.in-frequency-deck:not(.in-media-deck, .in-word-list, .blacklisted) {
  background-color: rgba(86, 224, 40, 0.1) !important;
}
.jiten-word.new.in-frequency-deck:not(.in-media-deck, .in-word-list, .blacklisted).hovered {
  background-color: rgba(86, 224, 40, 0.2) !important;
}
// new, not in any of the deck
.jiten-word.new:not(.in-media-deck, .in-frequency-deck, .in-word-list, .blacklisted, .suspended) {
  background-color: rgba(0, 0, 0, 0.15) !important;
}
.jiten-word.new:not(.in-media-deck, .in-frequency-deck, .in-word-list, .blacklisted, .suspended).hovered {
  background-color: rgba(0, 0, 0, 0.25) !important;
}