css: fix multiple artworks z-index problems, do nicer shadows

1 files changed, 17 insertions, 2 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index ba8ef6b1..f95b428d 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1232,7 +1232,12 @@ label > input[type=checkbox]:not(:checked) + span {
   white-space: nowrap;
 }
 
-.isolate-tooltip-z-indexing > * {
+:where(.isolate-tooltip-z-indexing) {
+  position: relative;
+  z-index: 1;
+}
+
+:where(.isolate-tooltip-z-indexing > *) {
   position: relative;
   z-index: -1;
 }
@@ -1640,9 +1645,11 @@ hr.cute,
 }
 
 #artwork-column .cover-artwork {
+  --normal-shadow: 0 0 12px 12px #00000080;
+
   box-shadow:
     0 2px 14px -6px var(--primary-color),
-    0 0 12px 12px #00000080;
+    var(--normal-shadow);
 }
 
 #artwork-column .cover-artwork:not(:first-child),
@@ -1651,6 +1658,10 @@ hr.cute,
   margin-right: 5px;
 }
 
+#artwork-column .cover-artwork:not(:first-child) {
+  --normal-shadow: 0 0 9px 9px #00000068;
+}
+
 #artwork-column .cover-artwork:first-child + .cover-artwork-joiner,
 #artwork-column .cover-artwork.attached-artwork-is-main-artwork,
 #artwork-column .cover-artwork.attached-artwork-is-main-artwork + .cover-artwork-joiner {
@@ -4201,6 +4212,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
     max-width: unset;
   }
 
+  #artwork-column .cover-artwork {
+    --normal-shadow: 0 0 transparent;
+  }
+
   #artwork-column .cover-artwork:not(:first-child),
   #artwork-column .cover-artwork-joiner {
     margin-left: 30px;