From f19c569cd3dda58fe42e3a2fd3bb6f63c1e5fbec Mon Sep 17 00:00:00 2001
From: Terranom674 <thomas_dannenberg@web.de>
Date: Sun, 16 Aug 2026 20:51:58 +0200
Subject: [PATCH] Style picture navigation hover zones

---
 css/picture_navigation.css | 64 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 css/picture_navigation.css

diff --git a/css/picture_navigation.css b/css/picture_navigation.css
new file mode 100644
index 0000000..438f379
--- /dev/null
+++ b/css/picture_navigation.css
@@ -0,0 +1,64 @@
+.bratonien-picture-zones {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.bratonien-picture-zone {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 160ms ease, background 160ms ease;
+  pointer-events: none;
+}
+
+.bratonien-picture-zone.is-active {
+  opacity: 1;
+}
+
+.bratonien-picture-zone-previous {
+  background: linear-gradient(
+    90deg,
+    rgba(212, 175, 55, 0.24) 0%,
+    rgba(212, 175, 55, 0.10) 55%,
+    rgba(212, 175, 55, 0.00) 100%
+  );
+}
+
+.bratonien-picture-zone-next {
+  background: linear-gradient(
+    270deg,
+    rgba(212, 175, 55, 0.24) 0%,
+    rgba(212, 175, 55, 0.10) 55%,
+    rgba(212, 175, 55, 0.00) 100%
+  );
+}
+
+.bratonien-picture-zone-thumbnails {
+  background: linear-gradient(
+    180deg,
+    rgba(212, 175, 55, 0.24) 0%,
+    rgba(212, 175, 55, 0.10) 55%,
+    rgba(212, 175, 55, 0.00) 100%
+  );
+}
+
+.bratonien-picture-zone-photoswipe {
+  background: radial-gradient(
+    ellipse at center,
+    rgba(212, 175, 55, 0.16) 0%,
+    rgba(212, 175, 55, 0.07) 45%,
+    rgba(212, 175, 55, 0.00) 78%
+  );
+}
+
+.bratonien-picture-zone i {
+  color: #d4af37;
+  font-size: clamp(1.6rem, 3vw, 2.8rem);
+  text-shadow:
+    1px 1px 0 #6f5818,
+    0 0 4px rgba(0, 0, 0, 0.65);
+}