From 9b1d029a5a79264a5dcf7ced275c469e0afb1be8 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Thu, 10 Oct 2024 14:29:13 +0200
Subject: [PATCH] Replace radial icon shadows with drop shadows

We already use drop shadows for copyright and fullscreen indicators on
images.

REDMINE-20841
---
 .../hotspots/ScrollButton.module.css            | 17 +----------------
 .../imageGallery/ScrollButton.module.css        | 14 +-------------
 .../Panorama/FullscreenIndicator.module.css     | 13 +------------
 .../Panorama/PanoramaIndicator.module.css       | 13 +------------
 4 files changed, 4 insertions(+), 53 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
index 17889f866..ffdd98702 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
@@ -26,6 +26,7 @@
   display: block;
   width: var(--theme-hotspts-scroll-button-size);
   height: var(--theme-hotspots-scroll-button-size);
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .button:not(.disabled):hover svg,
@@ -33,22 +34,6 @@
   transform: scale(1.2);
 }
 
-.icon {
-  position: relative;
-}
-
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 .visuallyHidden {
   border: 0;
   clip: rect(0 0 0 0);
diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css b/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
index 9319fca43..a7ae3b216 100644
--- a/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
+++ b/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
@@ -18,6 +18,7 @@
   display: block;
   width: var(--theme-image-gallery-scroll-button-size);
   height: var(--theme-image-gallery-scroll-button-size);
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .button:not(.disabled):hover svg,
@@ -26,22 +27,9 @@
 }
 
 .icon {
-  position: relative;
   transition: opacity 0.2s linear;
 }
 
 .disabled .icon {
   opacity: 0;
 }
-
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
index b1ada71d4..9aa7b3788 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
+++ b/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css
@@ -18,6 +18,7 @@
 .icons svg {
   width: 50px;
   height: 50px;
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .text {
@@ -33,18 +34,6 @@
   animation: pulse 4s infinite ease;
 }
 
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 45px;
-  height: 45px;
-  transform: translate(-45%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 .iconTopLeft {
   composes: icon;
   transform: translate(-50%, -50%) rotate(45deg);
diff --git a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
index 4f9982e7a..6851414e3 100644
--- a/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
+++ b/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css
@@ -49,24 +49,13 @@
   transition: transform 0.2s ease;
   width: 40px;
   height: 40px;
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 *:hover > .indicator svg {
   transform: scale(1.2);
 }
 
-.arrow div::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30px;
-  height: 30px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 @keyframes nudgeLeft {
   0% {
   }