Add support for displaying images

3 files changed, 110 insertions, 0 deletions

diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index e4549bbf..acfa2782 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -94,3 +94,10 @@ h2 { border-bottom-color: #2f2f2f; }
 #term-pitch-accent-graph-dot-downstep>circle:last-of-type {
     fill: #ffffff;
 }
+
+.term-glossary-image-container {
+    background-color: #2f2f2f;
+}
+.term-glossary-image-container-overlay {
+    color: #888888;
+}
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index 7bcb1014..70f81eb6 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -94,3 +94,10 @@ h2 { border-bottom-color: #eeeeee; }
 #term-pitch-accent-graph-dot-downstep>circle:last-of-type {
     fill: #000000;
 }
+
+.term-glossary-image-container {
+    background-color: #eeeeee;
+}
+.term-glossary-image-container-overlay {
+    color: #777777;
+}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index d1a54064..ca1fa371 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -611,6 +611,102 @@ button.action-button {
     stroke-width: 5;
 }
 
+.term-glossary-image-container {
+    display: inline-block;
+    white-space: nowrap;
+    max-width: 100%;
+    position: relative;
+    vertical-align: top;
+    line-height: 0;
+    font-size: 0.07142857em; /* 14px => 1px */
+    overflow: hidden;
+}
+
+.term-glossary-image-link {
+    cursor: inherit;
+    color: inherit;
+}
+
+.term-glossary-image-link[href]:hover {
+    cursor: pointer;
+}
+
+.term-glossary-image-container-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 14em; /* 1px => 14px; */
+    line-height: 1.42857143; /* 14px => 20px */
+    display: table;
+    table-layout: fixed;
+    white-space: normal;
+}
+
+.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay:after {
+    content: "Image failed to load";
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    padding: 0.25em;
+}
+
+.term-glossary-image {
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+    object-fit: contain;
+    border: none;
+    outline: none;
+}
+
+.term-glossary-image:not([src]) {
+    display: none;
+}
+
+.term-glossary-image[data-pixelated=true] {
+    image-rendering: auto;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: pixelated;
+    image-rendering: crisp-edges;
+}
+
+.term-glossary-image-aspect-ratio-sizer {
+    content: "";
+    display: inline-block;
+    width: 0;
+    vertical-align: top;
+    font-size: 0;
+}
+
+.term-glossary-image-link-text:before {
+    content: "[";
+}
+
+.term-glossary-image-link-text:after {
+    content: "]";
+}
+
+:root[data-compact-glossaries=true] .term-glossary-image-container {
+    display: none;
+}
+
+:root:not([data-compact-glossaries=true]) .term-glossary-image-link-text {
+    display: none;
+}
+
+:root:not([data-compact-glossaries=true]) .term-glossary-image-description {
+    display: block;
+}
+
 
 /*
  * Kanji