Make the ground color configurable

macrovision.css

@@ -600,19 +600,12 @@ body.toggle-height-bars .height-bar,
 }
 
 .bottom-cover {
-    display: none;
     position: absolute;
     width: 100%;
     height: 100vh;
     left: 0%;
     top: calc(100% - 51px);
-    background: black;
-}
-
-body.toggle-bottom-cover .bottom-cover {
-    display: inline-block;
 }
-
 .transitions {
     transition: 0.2s all;
 }
@@ -1001,3 +994,8 @@ body.screenshot-mode #options,
 body.screenshot-mode .scroll-button {
     display: none;
 }
+
+#ground {
+    --ground-color: #000;
+    background-color: var(--ground-color);
+}

macrovision.js

@@ -2461,6 +2461,14 @@ function toggleBodyClass(cls, setting) {
     }
 }
 
+const backgroundColors = {
+    "none": "#00000000",
+    "black": "#000",
+    "dark": "#111",
+    "medium": "#333",
+    "light": "#555"
+}
+
 const settingsData = {
     "show-vertical-scale": {
         name: "Vertical Scale",
@@ -2560,16 +2568,24 @@ const settingsData = {
             updateSizes();
         }
     },
-    "solid-ground": {
+    "ground-type": {
         name: "Ground",
-        desc: "Draw solid ground at the y=0 line",
-        type: "toggle",
-        default: true,
+        desc: "What kind of ground to show, if any",
+        type: "select",
+        default: "black",
+        options: [
+            "none",
+            "black",
+            "dark",
+            "medium",
+            "light",
+        ],
         get value() {
-            return checkBodyClass("toggle-bottom-cover");
+            return config.groundKind;
         },
         set value(param) {
-            toggleBodyClass("toggle-bottom-cover", param);
+            config.groundKind = param;
+            document.querySelector("#ground").style.setProperty("--ground-color", backgroundColors[param])
         }
     },
     "ground-pos": {
@@ -4821,7 +4837,7 @@ const migrationDefs = [
         });
     },
     /*
-    Migration: 3 -> $
+    Migration: 3 -> 4
 
     Rotation is now stored
     */
@@ -4930,8 +4946,8 @@ function generateScreenshot(callback) {
     /** @type {CanvasRenderingContext2D} */
     const ctx = document.querySelector("#display").getContext("2d");
 
-    if (checkBodyClass("toggle-bottom-cover")) {
-        ctx.fillStyle = "#000";
+    if (config.groundKind !== "none") {
+        ctx.fillStyle = backgroundColors[config.groundKind];
         ctx.fillRect(0, pos2pix({x: 0, y: 0}).y, canvasWidth + 100, canvasHeight);
     }