Prepare some things for edit mode

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -1,6 +1,34 @@
 <template>
-  <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
+  <div class="flex flex-column">
+    <!-- 'Change UI' options is a tiny bit in upper right corner. -->
+    <div
+      class="options-bar flex flex-row"
+      :class="{isEditing: editMode}"
+    >
+      <template v-if="editMode">
+        <div class="flex-grow">
+          You are currently editing options and shortcuts.
+        </div>
+        <div
+          class="flex-nogrow flex-noshrink"
+          @click="editMode = false"
+        >
+          Exit edit mode
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex-grow"></div>
+        <div
+          class=""
+          @click="editMode = true"
+        >
+          Edit ratios and shortcuts
+        </div>
+      </template>
+    </div>
 
+    <!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
+    <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
 
       <!-- CROP OPTIONS -->
       <div v-if="settings" class="sub-panel">
@@ -10,7 +38,7 @@
         </div>
         <div class="sub-panel-content flex flex-row flex-wrap">
           <ShortcutButton v-for="(command, index) of settings?.active.commands.crop"
-                        class="flex b3 flex-grow button"
+                          class="flex b3 button"
                           :key="index"
                           :label="command.label"
                           :shortcut="parseShortcut(command)"
@@ -215,6 +243,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -241,7 +270,8 @@ export default {
       zoom: {
         x: 0,
         y: 0
-      }
+      },
+      editMode: true,
     }
   },
   mixins: [
@@ -398,6 +428,17 @@ export default {
 <style lang="scss" src="../res-common/common.scss" scoped module></style>
 
 <style lang="scss" scoped module>
+@import '../res-common/variables';
+
+.options-bar {
+  margin: 1rem;
+  padding: 1rem;
+
+  &.isEditing {
+    background-color: $primary;
+    color: #000;
+  }
+}
 .b3 {
   width: 9rem;
   padding-left: 0.33rem;

src/csui/src/res-common/_variables.scss

@@ -1 +1,3 @@
 $warning-color: #d6ba4a;
+
+$primary: rgb(255, 147, 85);