From 21eab1deddc7bee13608f2790f1bc17a9a59ecb1 Mon Sep 17 00:00:00 2001
From: Core <core@coredev.uk>
Date: Thu, 23 Oct 2025 22:21:07 +0100
Subject: [PATCH] fix(pause-button): reposition to top-right and improve
 responsiveness

This will prevent the button being hidden underneath media cards and
will improve its sizing and visibility across all background and
interfaces.
---
 slideshowpure.css | 26 +++++++++++++++++++++++---
 slideshowpure.js  |  6 ++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/slideshowpure.css b/slideshowpure.css
index 63c0a86..1a2b268 100644
--- a/slideshowpure.css
+++ b/slideshowpure.css
@@ -181,20 +181,40 @@
 
 .pause-button {
   position: absolute;
-  bottom: 10vh;
-  right: 20px;
-  font-size: 24px;
+  top: 5rem;
+  right: 0.8rem;
   cursor: pointer;
   color: white;
   z-index: 10;
   opacity: 0.3;
   transition: opacity 0.3s ease;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+}
+
+.pause-button i {
+  font-size: 1.5rem;
 }
 
 .pause-button:hover {
   opacity: 0.9;
 }
 
+@media (max-width: 1599px) {
+  .pause-button {
+    top: 8rem;
+  }
+
+  .pause-button i {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .pause-button i {
+    font-size: 2.5rem;
+  }
+}
+
 .dots-container {
   position: absolute;
   top: calc(50% + 18vh);
diff --git a/slideshowpure.js b/slideshowpure.js
index 4b2c30e..5dd6059 100644
--- a/slideshowpure.js
+++ b/slideshowpure.js
@@ -1323,9 +1323,13 @@ const SlideshowManager = {
     if (STATE.slideshow.isPaused) {
       STATE.slideshow.slideInterval.stop();
       pauseButton.innerHTML = '<i class="material-icons">play_arrow</i>';
+      pauseButton.setAttribute("aria-label", "Play slideshow");
+      pauseButton.setAttribute("title", "Play slideshow");
     } else {
       STATE.slideshow.slideInterval.start();
       pauseButton.innerHTML = '<i class="material-icons">pause</i>';
+      pauseButton.setAttribute("aria-label", "Pause slideshow");
+      pauseButton.setAttribute("title", "Pause slideshow");
     }
   },
 
@@ -1502,6 +1506,8 @@ const initArrowNavigation = () => {
     className: "pause-button",
     innerHTML: '<i class="material-icons">pause</i>',
     tabIndex: "0",
+    "aria-label": "Pause slideshow",
+    title: "Pause slideshow",
     onclick: (e) => {
       e.preventDefault();
       e.stopPropagation();