content, client, css: art tag "panel" appearance

4 files changed, 62 insertions, 13 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index a830d121..d198f338 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -57,14 +57,12 @@ export default {
           }),
 
           !empty(relations.tagLinks) &&
-            html.tag('p',
-              language.$('releaseInfo.artTags.inline', {
-                tags:
-                  language.formatUnitList(
-                    relations.tagLinks
-                      .map(tagLink => tagLink.slot('preferShortName', true))),
-              })),
-          ]);
+            html.tag('ul', {class: 'image-details'},
+              relations.tagLinks
+                .map(tagLink =>
+                  html.tag('li',
+                    tagLink.slot('preferShortName', true)))),
+        ]);
 
       case 'thumbnail':
         return relations.image.slots({
diff --git a/src/static/client3.js b/src/static/client3.js
index 4dab19d1..77999488 100644
--- a/src/static/client3.js
+++ b/src/static/client3.js
@@ -145,6 +145,34 @@ function dispatchInternalEvent(event, eventName, ...args) {
   return results;
 }
 
+// CSS compatibility-assistant ----------------------------
+
+const cssCompatibilityAssistantInfo = clientInfo.cssCompatibilityAssistantInfo = {
+  coverArtContainer: null,
+  coverArtImageDetails: null,
+};
+
+function getCSSCompatibilityAssistantInfoReferences() {
+  const info = cssCompatibilityAssistantInfo;
+
+  info.coverArtContainer =
+    document.getElementById('cover-art-container');
+
+  info.coverArtImageDetails =
+    info.coverArtContainer?.querySelector('.image-details');
+}
+
+function mutateCSSCompatibilityContent() {
+  const info = cssCompatibilityAssistantInfo;
+
+  if (info.coverArtImageDetails) {
+    info.coverArtContainer.classList.add('has-image-details');
+  }
+}
+
+clientSteps.getPageReferences.push(getCSSCompatibilityAssistantInfoReferences);
+clientSteps.mutatePageContent.push(mutateCSSCompatibilityContent);
+
 // JS-based links -----------------------------------------
 
 const scriptedLinkInfo = initInfo('scriptedLinkInfo', {
diff --git a/src/static/site6.css b/src/static/site6.css
index bf9bc2cc..0f5a8f59 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -635,10 +635,13 @@ p .current {
 
 #cover-art-container {
   font-size: 0.8em;
+  box-shadow: 0 3px 3px 6px rgba(0, 0, 0, 0.35);
 }
 
-#cover-art .square {
-  box-shadow: 0 0 3px 6px rgba(0, 0, 0, 0.35);
+#cover-art-container:has(.image-details),
+#cover-art-container.has-image-details {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 #cover-art img {
@@ -647,8 +650,28 @@ p .current {
   height: 100%;
 }
 
-#cover-art-container p {
-  margin-top: 5px;
+.image-details {
+  display: block;
+
+  padding: 6px 9px 4px 9px;
+  margin-top: 0;
+  margin-bottom: 0;
+  background: var(--bg-black-color);
+  border: 2px solid var(--primary-color);
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+
+  -webkit-backdrop-filter: blur(3px);
+          backdrop-filter: blur(3px);
+}
+
+ul.image-details li {
+  display: inline-block;
+  margin: 0;
+}
+
+#cover-art-container ul li:not(:last-child)::after {
+  content: " \00b7 ";
 }
 
 .commentary-entry-heading {
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index f976ac8d..0ef1812c 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -288,7 +288,7 @@ releaseInfo:
 
   artTags:
     _: "Tags:"
-    inline: "Tags: {TAGS}"
+    inline: "{TAGS}"
 
   # Actions