zine_studio

commit 7d610469085d67d3fa94a3eeea162702c1411c9d
parent 22767cdb2aaec0cb41282560e51f43b90de8ccd6
Author: Hunter
Date:   Tue,  3 Feb 2026 11:55:48 -0500

update nav styling

Diffstat:
M
index.html
 | 
2
+-
M
resources/editor.css
 | 
30
+++++++++++++++++++++++-------

2 files changed, 24 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 	<div class="preview-pane">
 		<iframe id="preview"></iframe>
 		<div class="spread-nav">
-			<button id="prevSpread" title="Previous spread">&larr;</button>
+			<button id="prevSpread" title="Previous spread" disabled>&larr;</button>
 			<span id="spreadIndicator">Cover</span>
 			<button id="nextSpread" title="Next spread">&rarr;</button>
 		</div>
diff --git a/resources/editor.css b/resources/editor.css
@@ -219,13 +219,15 @@ body {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: 16px;
+	gap: 8px;
 	padding: 12px 20px;
 }
 
 .spread-nav button {
-	background: rgba(255, 255, 255, 0.15);
+	background:
+		linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.15));
 	color: white;
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 	border: none;
 	border-radius: 50%;
 	width: 36px;
@@ -233,26 +235,40 @@ body {
 	padding: 0;
 	cursor: pointer;
 	font-size: 18px;
-	transition: background-color 0.15s;
+	transition: background 0.2s, opacity 0.2s, color 0.2s, box-shadow 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
+	box-shadow:
+		0 1px 3px rgba(0, 0, 0, 0.3),
+		inset 0 1px 0 rgba(255, 255, 255, 0.15),
+		inset 0 -1px 1px rgba(0, 0, 0, 0.08);
 }
 
 .spread-nav button:hover:not(:disabled) {
-	background: rgba(255, 255, 255, 0.25);
+	background:
+		linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.2));
 }
 
 .spread-nav button:disabled {
-	opacity: 0.3;
+	background:
+		linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
+	color: rgba(255, 255, 255, 0.3);
 	cursor: default;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.15),
+		inset 0 1px 0 rgba(255, 255, 255, 0.06),
+		inset 0 -1px 1px rgba(0, 0, 0, 0.04);
 }
 
 #spreadIndicator {
 	color: white;
-	font-size: 14px;
-	min-width: 100px;
+	font-size: 16px;
+	min-width: 110px;
 	text-align: center;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 /* Vertical layout for narrow screens */