Keep custom map options hidden by default

Author: StrawberryMaster

index.html

@@ -253,7 +253,7 @@ <h3>Stage</h3>
                         <input type="checkbox" id="enable-custom-bounds" /><label for="enable-custom-bounds"
                             title="[EXPERIMENTAL] Define custom map boundaries instead of auto-cropping.">Use custom map boundaries</label>
                     </div>
-                    <div id="custom-bounds-inputs" class="hidden">
+                    <div id="custom-bounds-inputs">
                         <div>
                             <label for="min-lat">Min lat:</label><input type="number" id="min-lat" step="any" min="-90" max="90">
                             <label for="max-lat">Max lat:</label><input type="number" id="max-lat" step="any" min="-90" max="90">

static/css/style.css

@@ -508,11 +508,21 @@ ion-icon+span {
 #custom-bounds-inputs {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
 	margin-top: 0.5rem;
-	padding: 0.75rem;
 	background-color: rgba(0, 0, 0, 0.05);
 	border-radius: 0.25rem;
+	max-height: 0;
+	overflow: hidden;
+	opacity: 0;
+	transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s, padding 0.25s, gap 0.25s;
+}
+
+#custom-bounds-inputs.show {
+	max-height: 200px;
+	opacity: 1;
+	padding: 0.75rem;
+	gap: 0.5rem;
+	transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s, padding 0.25s, gap 0.25s;
 }
 
 #custom-bounds-inputs>div {

static/js/generate.js

@@ -255,8 +255,9 @@ document.addEventListener("DOMContentLoaded", () => {
     const customBoundsCheckbox = document.getElementById("enable-custom-bounds");
     const customBoundsInputs = document.getElementById("custom-bounds-inputs");
     if (customBoundsCheckbox && customBoundsInputs) {
+        customBoundsInputs.classList.toggle("show", customBoundsCheckbox.checked);
         customBoundsCheckbox.addEventListener("change", (e) => {
-            customBoundsInputs.classList.toggle("hidden", !e.target.checked);
+            customBoundsInputs.classList.toggle("show", e.target.checked);
         });
     }
 });