From 24ef820ba816411288d8bc739f6e69abb511deb0 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 27 Jun 2021 15:01:35 -0400
Subject: [PATCH] Update structured content CSS styles (#1770)

---
 ext/css/structured-content.css                | 21 +++++++++++++------
 .../display/structured-content-generator.js   |  2 +-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
index 4dd164a5..cff2c83c 100644
--- a/ext/css/structured-content.css
+++ b/ext/css/structured-content.css
@@ -62,16 +62,24 @@
     padding: 0.25em;
 }
 .gloss-image-background {
+    --image: none;
+
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--text-color);
-
-    --image: none;
-    --icon-size: contain;
-    --icon-image: var(--image);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center center;
+    -webkit-mask-mode: alpha;
+    -webkit-mask-size: contain;
+    -webkit-mask-image: var(--image);
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-mode: alpha;
+    mask-size: contain;
+    mask-image: var(--image);
 }
 .gloss-image {
     display: inline-block;
@@ -192,7 +200,6 @@
 .gloss-sc-table {
     table-layout: auto;
     border-collapse: collapse;
-    border-spacing: 0;
 }
 .gloss-sc-tbody {
     background-color: transparent;
@@ -205,7 +212,9 @@
 }
 .gloss-sc-th,
 .gloss-sc-td {
-    border: calc(1em / var(--font-size-no-units)) solid var(--text-color-light2);
+    border-width: calc(1em / var(--font-size-no-units));
+    border-style: solid;
+    border-color: var(--text-color-light2);
     padding: 0.25em;
     vertical-align: top;
 }
diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js
index 28f63f54..5b10811f 100644
--- a/ext/js/display/structured-content-generator.js
+++ b/ext/js/display/structured-content-generator.js
@@ -104,7 +104,7 @@ class StructuredContentGenerator {
         const aspectRatioSizer = this._createElement('span', 'gloss-image-aspect-ratio-sizer');
         imageContainer.appendChild(aspectRatioSizer);
 
-        const imageBackground = this._createElement('span', 'gloss-image-background icon');
+        const imageBackground = this._createElement('span', 'gloss-image-background');
         imageContainer.appendChild(imageBackground);
 
         const image = this._createElement('img', 'gloss-image');