Controller customization feature

src/assets/css/navigation-dialog.styl

@@ -17,6 +17,21 @@
         border-radius: 4px;
         padding: 0 5px;
     }
+
+    .bx-focusable {
+        &::after {
+            border-radius: 4px;
+        }
+
+        &:focus::after {
+            offset = 0;
+
+            top: offset;
+            left: offset;
+            right: offset;
+            bottom: offset;
+        }
+    }
 }
 
 .bx-navigation-dialog-overlay {
@@ -42,7 +57,7 @@
     color: white;
     background: #1a1b1e;
     border-radius: 10px;
-    width: 450px;
+    min-width: @css{ min(calc(100vw - 20px), 500px) };
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
     padding: 16px;
@@ -74,11 +89,9 @@
 
     .bx-dialog-content {
         flex: 1;
+        padding: 6px;
         overflow: auto;
         overflow-x: hidden;
-
-        > div {
-        }
     }
 
     .bx-dialog-preset-tools {
@@ -86,8 +99,9 @@
         margin-bottom: 12px;
         gap: 6px;
 
-        select {
-            flex: 1;
+        button {
+            align-self: center;
+            min-height: 50px;
         }
     }
 
@@ -164,29 +178,6 @@
                 letter-spacing: 6px;
             }
         }
-
-        .bx-shortcut-actions {
-            flex: 1;
-            position: relative;
-
-            select {
-                width: 100%;
-                height: 100%;
-                min-height: 38px;
-                display: block;
-
-                &:first-of-type {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                }
-
-                &:last-of-type {
-                    opacity: 0;
-                    z-index: calc(var(--bx-settings-z-index) + 1);
-                }
-            }
-        }
     }
 
     select:disabled {