Add native MKB support for Android app

src/assets/css/button.styl

@@ -59,6 +59,10 @@
         }
     }
 
+    &.bx-tall {
+        height: calc(var(--bx-button-height) * 1.5) !important;
+    }
+
     svg {
         display: inline-block;
         width: 16px;

src/assets/css/global-settings.styl

@@ -1,6 +1,5 @@
 .bx-settings-reload-button {
     margin-top: 10px;
-    height: calc(var(--bx-button-height) * 1.5);
 }
 
 .bx-settings-container {

src/assets/css/mkb.styl

@@ -16,7 +16,6 @@
 }
 
 .bx-mkb-pointer-lock-msg {
-    cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
@@ -24,7 +23,7 @@
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     margin: auto;
-    background: #000000b3;
+    background: #151515;
     z-index: var(--bx-mkb-pointer-lock-msg-z-index);
     color: #fff;
     text-align: center;
@@ -35,9 +34,11 @@
     border-radius: 8px;
     align-items: center;
     box-shadow: 0 0 6px #000;
+    min-width: 220px;
+    opacity: 0.9;
 
     &:hover {
-        background: #151515;
+        opacity: 1;
     }
 
     > div:first-of-type {
@@ -51,33 +52,46 @@
 
         &:first-child {
             font-size: 22px;
-            margin-bottom: 8px;
+            margin-bottom: 4px;
+            font-weight: bold;
         }
 
         &:last-child {
-            font-size: 14px;
+            font-size: 12px;
             font-style: italic;
         }
     }
 
     > div:last-of-type {
-        display: flex;
-        flex-flow: row;
         margin-top: 10px;
 
-        button {
-            flex: 1;
-
-            &:first-of-type {
-                margin-right: 5px;
-            }
-
-            &:last-of-type {
-                margin-left: 5px;
+        &[data-type='native'] {
+            button {
+                &:first-of-type {
+                    margin-bottom: 8px;
+                }
             }
         }
 
-        button
+        &[data-type='virtual'] {
+            div {
+                display: flex;
+                flex-flow: row;
+                margin-top: 8px;
+
+                button {
+                    flex: 1;
+
+                    &:first-of-type {
+                        margin-right: 5px;
+                    }
+
+                    &:last-of-type {
+                        margin-left: 5px;
+                    }
+                }
+            }
+        }
     }
 }
 

src/assets/svg/native-mkb.svg

@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <g stroke-width="2.1">
+        <path d="m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21"/>
+        <path d="m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2"/>
+    </g>
+    <g stroke-width="2.13">
+        <path d="m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z"/>
+        <path d="m23.705 14.715v-4.753"/>
+    </g>
+</svg>

src/assets/svg/virtual-controller.svg

@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <g stroke-width="2.06">
+        <path d="M8.417 13.218h4.124"/>
+        <path d="M10.479 11.155v4.125"/>
+        <path d="M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192"/>
+    </g>
+    <g stroke-width="2.11">
+        <path d="M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z"/>
+        <path d="M23.7 14.724V9.966"/>
+    </g>
+</svg>