Replace radial icon shadows with drop shadows

We already use drop shadows for copyright and fullscreen indicators on images. REDMINE-20841
codevise · Oct 10, 2024 · 9b1d029 · 9b1d029
1 parent 7cd7a01
commit 9b1d029
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 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
@@ -26,29 +26,14 @@
   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,
 .button:not(.disabled):active svg {
   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
@@ -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
@@ -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
@@ -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% {
   }