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

2 files changed, 55 insertions, 4 deletions

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 {