git/zine_studio

update nav styling

Hunter
Tuesday, February 3rd, 2026 at 11:55 AM

index.html
+1
-1
resources/editor.css
+23
-7

17  	<div class="preview-pane">
18  		<iframe id="preview"></iframe>
19  		<div class="spread-nav">
   -			<button id="prevSpread" title="Previous spread">&larr;</button>
20 +			<button id="prevSpread" title="Previous spread" disabled>&larr;</button>
21  			<span id="spreadIndicator">Cover</span>
22  			<button id="nextSpread" title="Next spread">&rarr;</button>
23  		</div>

219  	display: flex;
220  	align-items: center;
221  	justify-content: center;
    -	gap: 16px;
222 +	gap: 8px;
223  	padding: 12px 20px;
224  }
225  
226  .spread-nav button {
    -	background: rgba(255, 255, 255, 0.15);
227 +	background:
228 +		linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.15));
229  	color: white;
230 +	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
231  	border: none;
232  	border-radius: 50%;
233  	width: 36px;

235  	padding: 0;
236  	cursor: pointer;
237  	font-size: 18px;
    -	transition: background-color 0.15s;
238 +	transition: background 0.2s, opacity 0.2s, color 0.2s, box-shadow 0.2s;
239  	display: flex;
240  	align-items: center;
241  	justify-content: center;
242 +	backdrop-filter: blur(8px);
243 +	-webkit-backdrop-filter: blur(8px);
244 +	box-shadow:
245 +		0 1px 3px rgba(0, 0, 0, 0.3),
246 +		inset 0 1px 0 rgba(255, 255, 255, 0.15),
247 +		inset 0 -1px 1px rgba(0, 0, 0, 0.08);
248  }
249  
250  .spread-nav button:hover:not(:disabled) {
    -	background: rgba(255, 255, 255, 0.25);
251 +	background:
252 +		linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.2));
253  }
254  
255  .spread-nav button:disabled {
    -	opacity: 0.3;
256 +	background:
257 +		linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
258 +	color: rgba(255, 255, 255, 0.3);
259  	cursor: default;
260 +	box-shadow:
261 +		0 1px 2px rgba(0, 0, 0, 0.15),
262 +		inset 0 1px 0 rgba(255, 255, 255, 0.06),
263 +		inset 0 -1px 1px rgba(0, 0, 0, 0.04);
264  }
265  
266  #spreadIndicator {
267  	color: white;
    -	font-size: 14px;
    -	min-width: 100px;
268 +	font-size: 16px;
269 +	min-width: 110px;
270  	text-align: center;
271 +	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
272  }
273  
274  /* Vertical layout for narrow screens */