Improve the UI a bit

Buttons are now flat-looking. The view picker is now as wide as
the other elements. Presets have been moving to the menu. Settings are
padded differently. Menu buttons (just the popout menu) are now square.

macrovision.css

@@ -649,9 +649,11 @@ i.far {
 
 #entity-form,
 #entity-view {
+    max-width: 90%;
     text-align: center;
     font-weight: bold;
     font-size: 200%;
+    margin: auto;
 }
 
 #entity-view option {
@@ -843,15 +845,14 @@ option.filtered {
 }
 
 .menu-button {
-    height: 48pt;
+    height: 56pt;
     width: 56pt;
-    font-size: 40pt;
+    font-size: 36pt;
 }
 
 .menu-button-holder {
     display: flex;
     align-items: center;
-    margin: 5px 0px 5px;
 }
 
 .menu-text {
@@ -865,7 +866,6 @@ option.filtered {
 
 button {
     border: 3px;
-    border-style: outset;
 }
 
 
@@ -873,7 +873,6 @@ button:hover {
     background: #555;
 }
 button:enabled:active {
-    border-style: inset;
     background: #aaa;
 }
 
@@ -939,7 +938,8 @@ button {
 .settings-holder {
     display: flex;
     align-items: center;
-    padding: 10px 0px 10px;
+    justify-content: space-between;
+    padding: 10px 20px 10px 10px;
     border-color: #222;
     border-width: 5px;
     border-style: solid;

macrovision.html

@@ -185,7 +185,7 @@
         <span id="options-view">
         </span>
       </div>
-      <h3 class="options-header" id="attribution-category-header">Source</h3>
+      <h3 class="options-header" id="attribution-category-header">Attribution</h3>
       <div id="options-attribution">
         <div class="options-label">
           Authors
@@ -208,20 +208,6 @@
         <div id="options-attribution-source">
         </div>
       </div>
-      <h3 class="options-header" id="scenes-category-header">Preset Scenes</h3>
-      <div id="options-scenes">
-        <div class="options-row">
-          <select class="options-field-picker" id="scene-choices">
-
-          </select>
-        </div>
-        <div class="options-row">
-          <button id="load-scene">
-            <i class="fas fa-play-circle symbol-button"></i>
-            <span class="sr-only">Load Scene</span>
-          </button>
-        </div>
-      </div>
     </div>
     <div id="world">
       <div class="extra-info">

macrovision.js

@@ -1497,6 +1497,7 @@ function deselect(e) {
     if (e !== undefined && e.which != 1) {
         return;
     }
+
     if (selected) {
         selected.classList.remove("selected");
     }
@@ -1505,7 +1506,7 @@ function deselect(e) {
     }
 
     document.getElementById("options-selected-entity-none").selected = "selected";
-
+    document.getElementById("delete-entity").style.display = "none";
     clearAttribution();
 
     selected = null;
@@ -2481,6 +2482,12 @@ function prepareSidebar() {
             id: "menu-load-autosave",
             icon: "fas fa-redo"
         },
+        {
+            name: "Load Preset",
+            id: "menu-preset",
+            icon: "fas fa-play",
+            select: true
+        },
         {
             name: "Add Image",
             id: "menu-add-image",
@@ -3405,7 +3412,7 @@ document.addEventListener("DOMContentLoaded", () => {
         updateSizes();
     });
 
-    const sceneChoices = document.querySelector("#scene-choices");
+    const sceneChoices = document.querySelector("#menu-preset ~ select");
 
     Object.entries(scenes).forEach(([id, scene]) => {
         const option = document.createElement("option");
@@ -3414,11 +3421,12 @@ document.addEventListener("DOMContentLoaded", () => {
         sceneChoices.appendChild(option);
     });
 
-    document.querySelector("#load-scene").addEventListener("click", e => {
+    document.querySelector("#menu-preset").addEventListener("click", e => {
         const chosen = sceneChoices.value;
         removeAllEntities();
         scenes[chosen]();
     });
+
     entityX = document.querySelector("#entities").getBoundingClientRect().x;
     canvasWidth = document.querySelector("#display").clientWidth - 100;
     canvasHeight = document.querySelector("#display").clientHeight - 50;