Make some sidebar content unselectable

macrovision.css

@@ -156,6 +156,11 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     flex-direction: column;
 }
 
+.options-label {
+    text-align: center;
+    user-select: none;
+}
+
 .options-block.options-block-optional {
     display: none;
 }
@@ -184,6 +189,8 @@ body.show-extra-options .options-block.options-block-optional {
     font-size: 24pt;
     margin-top: 10px;
     margin-bottom: 10px;
+    background: #333;
+    user-select: none;
 }
 
 .options-banner {
@@ -193,6 +200,7 @@ body.show-extra-options .options-block.options-block-optional {
     margin-bottom: 10px;
     background: #232;
     text-decoration: none;
+    user-select: none;
 }
 
 .options-banner:hover {
@@ -270,10 +278,6 @@ body.toggle-scale #display {
     font-size: 150%;
 }
 
-.options-label {
-    text-align: center;
-}
-
 .options-row .options-field-numeric {
     flex: 1 1 60%;
     min-width: 0px;

macrovision.html

@@ -76,7 +76,7 @@
   </div>
   <div id="main-area">
     <div id="options" class="">
-      <div class="options-header">World options</div>
+      <h3 class="options-header">World options</h3>
       <span id="options-world">
         <div class="options-label">
           World height
@@ -145,7 +145,7 @@
           </select>
         </div>
       </span>
-      <div class="options-header">Entity options</div>
+      <h3 class="options-header">Entity options</h3>
       <div class="options-label">
         Ordering
       </div>
@@ -165,10 +165,10 @@
       </div>
       <span id="options-entity">
       </span>
-      <div class="options-header">View options</div>
+      <h3 class="options-header">View options</h3>
       <span id="options-view">
       </span>
-      <div class="options-header">Attribution</div>
+      <h3 class="options-header">Attribution</h3>
       <span id="options-attribution">
         <div class="options-label">
           Authors