6.0

src/assets/css/mkb.styl

@@ -4,15 +4,6 @@
     flex: 1;
     padding-bottom: 10px;
     overflow: hidden;
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        text-align: right;
-        border: none;
-        color: #fff;
-    }
 }
 
 .bx-mkb-pointer-lock-msg {
@@ -20,13 +11,12 @@
     -webkit-user-select: none;
     position: fixed;
     left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    bottom: 40px;
+    transform: translateX(-50%);
     margin: auto;
     background: #151515;
     z-index: var(--bx-mkb-pointer-lock-msg-z-index);
     color: #fff;
-    text-align: center;
     font-weight: 400;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
@@ -34,117 +24,55 @@
     border-radius: 8px;
     align-items: center;
     box-shadow: 0 0 6px #000;
-    min-width: 220px;
+    min-width: 300px;
     opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 
     &:hover {
         opacity: 1;
     }
 
-    > div:first-of-type {
-        display: flex;
-        flex-direction: column;
+    > p {
+        margin: 0;
+        width: 100%;
+        font-size: 22px;
+        margin-bottom: 4px;
+        font-weight: bold;
         text-align: left;
     }
 
-    p {
-        margin: 0;
+    > div {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
 
-        &:first-child {
-            font-size: 22px;
-            margin-bottom: 4px;
-            font-weight: bold;
-        }
-
-        &:last-child {
-            font-size: 12px;
-            font-style: italic;
-        }
-    }
-
-    > div:last-of-type {
-        margin-top: 10px;
-
-        &[data-type='native'] {
-            button {
-                &:first-of-type {
-                    margin-bottom: 8px;
-                }
+        gap: 10px;
+        button {
+            &:first-of-type {
+                flex-shrink: 1;
             }
-        }
 
-        &[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;
-                    }
-                }
+            &:last-of-type {
+                flex-grow: 1;
             }
         }
     }
 }
 
-.bx-mkb-preset-tools {
-    display: flex;
-    margin-bottom: 12px;
-
-    select {
-        flex: 1;
-    }
-
-    button {
-        margin-left: 6px;
-    }
-}
-
-
-.bx-mkb-settings-rows {
-    flex: 1;
-    overflow: scroll;
-}
-
 .bx-mkb-key-row {
     display: flex;
     margin-bottom: 10px;
     align-items: center;
+    gap: 20px;
 
 
     label {
         margin-bottom: 0;
         font-family: var(--bx-promptfont-font);
-        font-size: 26px;
+        font-size: 32px;
         text-align: center;
-        width: 26px;
-        height: 32px;
-        line-height: 32px;
-    }
-
-    button {
-        flex: 1;
-        height: 32px;
-        line-height: 32px;
-        margin: 0 0 0 10px;
-        background: transparent;
-        border: none;
-        color: white;
-        border-radius: 0;
-        border-left: 1px solid #373737;
-
-        &:hover {
-            background: transparent;
-            cursor: default;
-        }
     }
 }
 
@@ -181,10 +109,58 @@
 
 .bx-mkb-note {
     display: block;
-    margin: 16px 0 10px;
+    margin: 0 0 10px;
     font-size: 12px;
+    text-align: center;
+}
 
-    &:first-of-type {
-        margin-top: 0;
+button.bx-binding-button {
+    flex: 1;
+    min-height: 38px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    align-self: center;
+    padding: 0 6px;
+
+    &:disabled {
+        background: #131416;
+        padding: 0 8px;
+    }
+
+    &:not(:disabled) {
+        border: 2px solid transparent;
+        border-top: none;
+        border-bottom: 4px solid #252525;
+        background: #3b3b3b;
+        cursor: pointer;
+
+        &:hover, &.bx-focusable:focus {
+            background: #20b217;
+            border-bottom-color: #186c13;
+        }
+
+        &:active {
+            background: #16900f;
+            border-bottom: 3px solid #0c4e08;
+            border-left-width: 2px;
+            border-right-width: 2px;
+        }
+
+        &.bx-focusable:focus {
+            &::after {
+                top: -6px;
+                left: -8px;
+                right: -8px;
+                bottom: -10px;
+            }
+        }
+    }
+
+    .bx-settings-row .bx-binding-button-wrapper & {
+        min-width: 60px;
     }
 }