css: demo dimming cover artwork UI until hovered/focused

We're immediately reverting this but I want to keep the code
and functionality on the record. Neatness!

1 files changed, 43 insertions, 0 deletions

diff --git a/src/static/css/features.css b/src/static/css/features.css
index 3a1a0cdd..5e9f9e0d 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -823,6 +823,49 @@
 }
 
 @layer interaction {
+  /* Wide or Medium layout - so, not thin/phone! */
+  @media (min-width: 601px) {
+    .cover-artwork,
+    .cover-artwork .image-container,
+    .cover-artwork .image-details {
+      transition-duration: 0.4s;
+
+      /* Here be spooky. This is an evil Firefox and Safari detection
+       * because those browsers both play nice and let transition-duration
+       * depend on an animated CSS variable. Chrome does not.
+       */
+      @supports (-moz-orient: inline) or (hanging-punctuation: first) {
+        transition-duration: calc(var(--deferred-non-mobile-switch) * 0.4s);
+      }
+
+      transition-timing-function: steps(6, start);
+    }
+
+    .cover-artwork {
+      transition-property: border-color;
+    }
+
+    .cover-artwork:not(:hover, :focus-within):not(:has(.reveal:not(.revealed))) {
+      border-color: var(--dim-color);
+    }
+
+    .cover-artwork .image-container {
+      transition-property: background-color;
+    }
+
+    .cover-artwork:not(:hover, :focus-within) .image-container {
+      background-color: var(--dark-color) !important;
+    }
+
+    .cover-artwork .image-details {
+      transition-property: opacity;
+    }
+
+    .cover-artwork:not(:hover, :focus-within) .image-details:not(.origin-details) {
+      opacity: 0.6;
+    }
+  }
+
   .music-video .image-link::after {
     content: "▶︎";
     background: #0008;