Update display content generation to use HTML templates

1 files changed, 38 insertions, 21 deletions

diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index e26c72aa..088fc741 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -19,36 +19,53 @@
 
 body { background-color: #1e1e1e; color: #d4d4d4; }
 
-hr { border-top-color: #2f2f2f; }
-
-.tag-default      { background-color: #69696e; }
-.tag-name         { background-color: #489148; }
-.tag-expression   { background-color: #b07f39; }
-.tag-popular      { background-color: #025caa; }
-.tag-frequent     { background-color: #4490a7; }
-.tag-archaism     { background-color: #b04340; }
-.tag-dictionary   { background-color: #9057ad; }
-.tag-frequency    { background-color: #489148; }
-.tag-partOfSpeech { background-color: #565656; }
-
-.reasons       { color: #888888; }
-.glossary li   { color: #888888; }
-.glossary-item { color: #d4d4d4; }
-.label         { color: #e1e1e1; }
-
-.expression .kanji-link {
+.navigation-header {
+    background-color: #1e1e1e;
+    border-bottom-color: #2f2f2f;
+}
+
+.entry+.entry { border-top-color: #2f2f2f; }
+
+.kanji-glyph-data>tbody>tr>* { border-top-color: #3f3f3f; }
+
+.tag { color: #e1e1e1; }
+.tag[data-category=default]      { background-color: #69696e; }
+.tag[data-category=name]         { background-color: #489148; }
+.tag[data-category=expression]   { background-color: #b07f39; }
+.tag[data-category=popular]      { background-color: #025caa; }
+.tag[data-category=frequent]     { background-color: #4490a7; }
+.tag[data-category=archaism]     { background-color: #b04340; }
+.tag[data-category=dictionary]   { background-color: #9057ad; }
+.tag[data-category=frequency]    { background-color: #489148; }
+.tag[data-category=partOfSpeech] { background-color: #565656; }
+
+.term-reasons { color: #888888; }
+
+.term-expression>.term-expression-text .kanji-link {
     border-bottom-color: #888888;
-    color: #CCCCCC;
+    color: #cccccc;
 }
 
-.expression-popular, .expression-popular .kanji-link {
+.term-expression[data-frequency=popular]>.term-expression-text,
+.term-expression[data-frequency=popular]>.term-expression-text .kanji-link {
     color: #0275d8;
 }
 
-.expression-rare, .expression-rare .kanji-link {
+.term-expression[data-frequency=rare]>.term-expression-text,
+.term-expression[data-frequency=rare]>.term-expression-text .kanji-link {
     color: #666666;
 }
 
+.term-definition-container,
+.kanji-glossary-container {
+    color: #888888;
+}
+
+.term-glossary,
+.kanji-glossary {
+    color: #d4d4d4;
+}
+
 .icon-checkbox:checked + label {
     /* invert colors */
     background-color: #d4d4d4;