Update display content generation to use HTML templates

3 files changed, 355 insertions, 120 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;
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index ac237e79..69141c9d 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -19,36 +19,53 @@
 
 body { background-color: #ffffff; color: #333333; }
 
-hr { border-top-color: #eeeeee; }
-
-.tag-default      { background-color: #8a8a91; }
-.tag-name         { background-color: #5cb85c; }
-.tag-expression   { background-color: #f0ad4e; }
-.tag-popular      { background-color: #0275d8; }
-.tag-frequent     { background-color: #5bc0de; }
-.tag-archaism     { background-color: #d9534f; }
-.tag-dictionary   { background-color: #aa66cc; }
-.tag-frequency    { background-color: #5cb85c; }
-.tag-partOfSpeech { background-color: #565656; }
-
-.reasons       { color: #777777; }
-.glossary li   { color: #777777; }
-.glossary-item { color: #000000; }
-.label         { color: #ffffff; }
-
-.expression .kanji-link {
+.navigation-header {
+    background-color: #ffffff;
+    border-bottom-color: #eeeeee;
+}
+
+.entry+.entry { border-top-color: #eeeeee; }
+
+.kanji-glyph-data>tbody>tr>* { border-top-color: #dddddd; }
+
+.tag { color: #ffffff; }
+.tag[data-category=default]      { background-color: #8a8a91; }
+.tag[data-category=name]         { background-color: #5cb85c; }
+.tag[data-category=expression]   { background-color: #f0ad4e; }
+.tag[data-category=popular]      { background-color: #0275d8; }
+.tag[data-category=frequent]     { background-color: #5bc0de; }
+.tag[data-category=archaism]     { background-color: #d9534f; }
+.tag[data-category=dictionary]   { background-color: #aa66cc; }
+.tag[data-category=frequency]    { background-color: #5cb85c; }
+.tag[data-category=partOfSpeech] { background-color: #565656; }
+
+.term-reasons { color: #777777; }
+
+.term-expression>.term-expression-text .kanji-link {
     border-bottom-color: #777777;
     color: #333333;
 }
 
-.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: #999999;
 }
 
+.term-definition-container,
+.kanji-glossary-container {
+    color: #777777;
+}
+
+.term-glossary,
+.kanji-glossary {
+    color: #000000;
+}
+
 .icon-checkbox:checked + label {
     /* invert colors */
     background-color: #333333;
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7a00bccb..ff42771a 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -38,30 +38,28 @@ html:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
-    line-height: 1.42857143;
+    line-height: 1.42857143; /* 14px => 20px */
     margin: 0;
     border: 0;
     padding: 0;
 }
 
-hr {
-    padding: 0px;
-    margin: 0px;
-    border: 0;
-    border-top-width: 1px;
-    border-top-style: solid;
-}
-
 ol, ul {
     margin-top: 0;
-    margin-bottom: 10px;
+    margin-bottom: 0.72em;
 }
 
 #spinner {
-    bottom: 5px;
     display: none;
     position: fixed;
-    right: 5px;
+    z-index: 1;
+    right: 0.36em;
+    bottom: 0.36em;
+}
+
+#spinner>img {
+    width: 2.28571428em; /* 14px => 32px */
+    height: 2.28571428em; /* 14px => 32px */
 }
 
 #error-orphaned {
@@ -76,10 +74,38 @@ ol, ul {
  * Navigation
  */
 
-.term-navigation {
+.navigation-header {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2.1em;
+    box-sizing: border-box;
+    padding: 0.25em 0.5em;
+    border-bottom-width: 0.07142857em; /* 14px => 1px */
+    border-bottom-style: solid;
+}
+
+html:root[data-yomichan-page=float] .navigation-header {
     position: fixed;
-    top: 0px;
-    right: 0px;
+}
+
+.navigation-header:not([hidden])~.navigation-header-spacer {
+    height: 2.1em;
+}
+
+.navigation-header-actions {
+    display: flex;
+}
+
+.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-previous>img,
+.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-next>img {
+    opacity: 0.25;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+.action-next>img {
+    transform: scaleX(-1);
 }
 
 
@@ -91,20 +117,20 @@ ol, ul {
     display: none;
 }
 
-.icon-checkbox + label {
+.icon-checkbox+label {
     cursor: pointer;
-    font-size: 22px;
-    padding: 2px;
+    font-size: 1.6em;
+    padding: 0.1em;
     user-select: none;
 }
 
 #query-parser {
-    margin-top: 10px;
-    font-size: 24px;
+    margin-top: 0.5em;
+    font-size: 2em;
 }
 
 .query-parser-term {
-    margin-right: 5px;
+    margin-right: 0.2em;
 }
 
 html:root[data-yomichan-page=search] body {
@@ -116,15 +142,14 @@ html:root[data-yomichan-page=search] body {
  * Entries
  */
 
-.entry, .note {
-    padding-top: 20px;
-    padding-bottom: 10px;
+.entry {
+    padding-top: 0.72em;
+    padding-bottom: 0.72em;
 }
 
-html:root[data-yomichan-page=float] .entry,
-html:root[data-yomichan-page=float] .note {
-    padding-left: 10px;
-    padding-right: 10px;
+html:root[data-yomichan-page=float] .entry {
+    padding-left: 0.72em;
+    padding-right: 0.72em;
 }
 
 .actions .disabled {
@@ -143,8 +168,9 @@ html:root[data-yomichan-page=float] .note {
 }
 
 .actions {
-    display: block;
+    display: flex;
     float: right;
+    margin: -0.25em;
 }
 
 .actions:after {
@@ -153,111 +179,286 @@ html:root[data-yomichan-page=float] .note {
     display: block;
 }
 
-.expression {
+.action-button {
     display: inline-block;
-    font-size: 24px;
+    border: 0;
+    margin: 0;
+    padding: 0.25em;
+    background: transparent;
+}
+
+button.action-button {
+    cursor: pointer;
 }
 
-.expression .kanji-link {
-    border-bottom-width: 1px;
+.icon-image {
+    width: 1.14285714em; /* 14px => 16px */
+    height: 1.14285714em; /* 14px => 16px */
+    display: block;
+}
+
+.term-expression .kanji-link {
+    border-bottom-width: 0.03571428em; /* 28px => 1px */
     border-bottom-style: dashed;
     text-decoration: none;
 }
 
-.expression .peek-wrapper {
-    font-size: 14px;
+.entry:not(.entry-current) .current {
+    display: none;
+}
+
+.tag {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
     white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+}
+
+.tag-list>.tag+.tag {
+    margin-left: 0.375em;
+}
+
+.entry-header2,
+.entry-header3 {
+    display: inline;
+}
+
+.term-frequency-separator::before {
+    content: ":";
+}
+
+.entry+.entry {
+    border-top-width: 0.07142857em; /* 14px => 1px */
+    border-top-style: solid;
+}
+
+.entry[data-type=term][data-multi-expression=true] .actions>.action-play-audio {
+    display: none;
+}
+
+.term-reasons {
+    display: inline-block;
+}
+
+.term-reasons>.term-reason+.term-reason:before {
+    content: " \00AB  "; /* The two spaces is not a typo */
+    display: inline;
+}
+
+.term-expression-list {
+    display: inline-block;
+}
+
+.term-expression {
+    display: inline-block;
+}
+
+.term-expression-text {
+    display: inline-block;
+    font-size: 2em;
+}
+
+.term-expression-details {
+    display: inline;
+}
+
+.term-expression-details>.action-play-audio {
+    display: none;
+}
+
+.term-expression-details>.tags {
+    display: inline;
+}
+
+.term-expression-details>.frequencies {
+    display: none;
+}
+
+.term-expression-list>.term-expression:not(:last-of-type):after {
+    font-size: 2em;
+    content: "\3001";
+}
+
+.term-expression-list[data-multi=true] .term-expression-details {
+    visibility: hidden;
+}
+
+.term-expression-list[data-multi=true] .term-expression-details {
     display: inline-block;
     position: relative;
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
     visibility: hidden;
 }
 
-.expression .peek-wrapper .action-play-audio {
+.term-expression-list[data-multi=true] .term-expression:hover .term-expression-details {
+    visibility: visible;
+}
+
+.term-expression-list[data-multi=true] .term-expression-details>.action-play-audio {
     position: absolute;
-    left: 0px;
-    bottom: 10px;
+    left: 0;
+    bottom: 0.5em;
 }
 
-.expression .peek-wrapper .tags {
+.term-expression-list[data-multi=true] .term-expression-details>.action-play-audio {
+    display: block;
+}
+
+.term-expression-list[data-multi=true] .term-expression-details>.tags {
+    display: block;
     position: absolute;
-    left: 0px;
-    bottom: -10px;
+    left: 0;
+    bottom: -0.5em;
+    white-space: nowrap;
 }
 
-.expression .peek-wrapper .frequencies {
+.term-expression-list[data-multi=true] .term-expression-details>.frequencies {
+    display: block;
     position: absolute;
-    left: 0px;
-    bottom: -30px;
+    left: 0;
+    bottom: -1.9em;
+    white-space: nowrap;
 }
 
-.expression:hover .peek-wrapper {
-    visibility: visible;
+.term-definition-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 
-.reasons {
-    display: inline-block;
+.term-definition-list:not([data-count="0"]):not([data-count="1"]) {
+    padding-left: 1.4em;
+    list-style-type: decimal;
 }
 
-.compact-info {
-    display: inline-block;
+.term-glossary-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 
-.glossary ol, .glossary ul {
+.term-glossary-list:not([data-count="0"]):not([data-count="1"]) {
     padding-left: 1.4em;
+    list-style-type: circle;
+}
+
+.term-definition-only-list[data-count="0"] {
+    display: none;
+}
+
+.term-definition-only-list:before {
+    content: "(";
+}
+
+.term-definition-only-list:after {
+    content: " only)";
+}
+
+.term-definition-only+.term-definition-only:before {
+    content: ", ";
+}
+
+.debug-info {
+    display: none;
+}
+
+:root[data-debug=true] .debug-info {
+    display: block;
+}
+
+:root[data-anki-enabled=false] .action-view-note,
+:root[data-anki-enabled=false] .action-add-note {
+    display: none;
+}
+
+:root[data-audio-enabled=false] .action-play-audio {
+    display: none;
 }
 
-.glossary ul.compact-glossary {
+:root[data-compact-glossaries=true] .term-definition-tag-list,
+:root[data-compact-glossaries=true] .term-definition-only-list:not([data-count="0"]) {
+    display: inline-block;
+}
+
+:root[data-compact-glossaries=true] .term-glossary-list {
     display: inline;
     list-style: none;
-    padding-left: 0px;
+    padding-left: 0;
 }
 
-.glossary .compact-glossary li {
+:root[data-compact-glossaries=true] .term-glossary-list>li {
     display: inline;
 }
 
-.glossary .compact-glossary li:not(:first-child):before {
+:root[data-compact-glossaries=true] .term-glossary-list>li:not(:first-child):before {
     content: " | ";
 }
 
-div.glossary-item.compact-glossary {
-    display: inline;
-}
+/*
+ * Kanji
+ */
 
-.glyph {
+.kanji-glyph {
     font-family: kanji-stroke-orders;
-    font-size: 120px;
-    line-height: 120px;
+    font-size: 8.5em;
+    line-height: 1;
     padding: 0.01em;
     vertical-align: top;
 }
 
-.glyph-data {
-    margin-top: 10px;
+.kanji-glyph-data {
+    margin-top: 0.75em;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.kanji-glyph-data>tbody>tr>* {
+    border-top-width: 0.07142857em; /* 14px => 1px */
+    border-top-style: solid;
+    text-align: left;
+    vertical-align: top;
+    padding: 0.36em;
+    margin: 0;
 }
 
-.info-output {
+.kanji-info-table {
     width: 100%;
 }
 
-.info-output td {
+.kanji-info-table>tbody>tr>th,
+.kanji-info-table>tbody>tr>td {
+    text-align: left;
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+}
+
+.kanji-info-table>tbody>tr>td {
     text-align: right;
 }
 
-.entry:not(.entry-current) .current {
-    display: none;
+.kanji-glyph-data dl {
+    margin-top: 0;
+    margin-bottom: 1.4em;
 }
 
-.label {
-    display: inline;
-    padding: 0.2em 0.6em 0.3em;
-    font-size: 75%;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: 0.25em;
+.kanji-glyph-data dd {
+    margin-left: 0;
+}
+
+.kanji-glossary-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.kanji-glossary-list:not([data-count="0"]):not([data-count="1"]) {
+    padding-left: 1.4em;
+    list-style-type: decimal;
 }