Anki: use CSS classes for term frequency color

2 files changed, 11 insertions, 15 deletions

diff --git a/ext/bg/js/handlebars.js b/ext/bg/js/handlebars.js
index 72908cab..66d5fa2b 100644
--- a/ext/bg/js/handlebars.js
+++ b/ext/bg/js/handlebars.js
@@ -75,18 +75,6 @@ function handlebarsMultiLine(options) {
     return options.fn(this).split('\n').join('<br>');
 }
 
-function handlebarsTermFrequencyColor(options) {
-    const termFrequency = options.fn(this);
-
-    if (termFrequency === 'popular') {
-        return '#0275d8';
-    } else if (termFrequency === 'rare') {
-        return '#999';
-    } else {
-        return 'inherit';
-    }
-}
-
 function handlebarsRegisterHelpers() {
     if (Handlebars.partials !== Handlebars.templates) {
         Handlebars.partials = Handlebars.templates;
@@ -95,7 +83,6 @@ function handlebarsRegisterHelpers() {
         Handlebars.registerHelper('furiganaPlain', handlebarsFuriganaPlain);
         Handlebars.registerHelper('kanjiLinks', handlebarsKanjiLinks);
         Handlebars.registerHelper('multiLine', handlebarsMultiLine);
-        Handlebars.registerHelper('termFrequencyColor', handlebarsTermFrequencyColor);
     }
 }
 
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 87609fcb..2cb7dbec 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -19,6 +19,15 @@
 
 function optionsFieldTemplates() {
     return `
+<style>
+.expression-popular {
+    color: #0275d8;
+}
+
+.expression-rare {
+    color: #999;
+}
+</style>
 {{#*inline "glossary-single"}}
     {{~#unless brief~}}
         {{~#if definitionTags~}}<i>({{#each definitionTags}}{{name}}{{#unless @last}}, {{/unless}}{{/each}})</i> {{/if~}}
@@ -79,7 +88,7 @@ function optionsFieldTemplates() {
 {{#*inline "furigana"}}
     {{~#if merge~}}
         {{~#each definition.expressions~}}
-            <span style="color: {{#termFrequencyColor}}{{termFrequency}}{{/termFrequencyColor}}">{{~#furigana}}{{{.}}}{{/furigana~}}</span>
+            <span class="expression-{{termFrequency}}">{{~#furigana}}{{{.}}}{{/furigana~}}</span>
             {{~#unless @last}}、{{/unless~}}
         {{~/each~}}
     {{~else~}}
@@ -90,7 +99,7 @@ function optionsFieldTemplates() {
 {{#*inline "furigana-plain"}}
     {{~#if merge~}}
         {{~#each definition.expressions~}}
-            <span style="color: {{#termFrequencyColor}}{{termFrequency}}{{/termFrequencyColor}}">{{~#furiganaPlain}}{{{.}}}{{/furiganaPlain~}}</span>
+            <span class="expression-{{termFrequency}}">{{~#furiganaPlain}}{{{.}}}{{/furiganaPlain~}}</span>
             {{~#unless @last}}、{{/unless~}}
         {{~/each~}}
     {{~else~}}