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% { }