content, css: generateGroupGalleryPage: make switcher shiny drop

1 files changed, 29 insertions, 1 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index 6fa4da38..9394e4c8 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1914,6 +1914,8 @@ ul.quick-info li:not(:last-child)::after {
 }
 
 .gallery-view-switcher {
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
   line-height: 1.4;
 }
@@ -2512,7 +2514,33 @@ html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:las
     linear-gradient(#000000bb, #000000bb),
     var(--primary-color);
 
-  box-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+  --drop-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+  box-shadow: var(--drop-shadow);
+}
+
+.drop.shiny {
+  cursor: default;
+}
+
+@supports (box-shadow: 1px 1px 1px color-mix(in srgb, blue, 40% red)) {
+  @property --drop-shine {
+    syntax: '<percentage>';
+    initial-value: 0%;
+    inherits: false;
+  }
+
+  .drop.shiny {
+    cursor: default;
+    transition: --drop-shine 0.2s;
+  }
+
+  .drop.shiny:hover {
+    --drop-shine: 100%;
+
+    box-shadow:
+      var(--drop-shadow),
+      0 2px 4px -0.5px color-mix(in srgb, var(--primary-color), calc(100% - var(--drop-shine)) transparent);
+  }
 }
 
 .commentary-drop {