Convert CSS to Stylus

2025-08-14 08:59:16 +02:00 · 2024-04-27 14:52:37 +07:00
parent 59c318e0e4
commit 4eeb6175d3
19 changed files with 1275 additions and 1272 deletions
--- a/src/assets/css/mkb.styl
+++ b/src/assets/css/mkb.styl
@@ -0,0 +1,166 @@
+.bx-mkb-settings {
+    display: flex;
+    flex-direction: column;
+    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 {
+    display: flex;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    margin: auto;
+    background: #000000e5;
+    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;
+    padding: 12px;
+    border-radius: 8px;
+    align-items: center;
+    box-shadow: 0 0 6px #000;
+
+    &:hover {
+        background: #151515;
+    }
+
+    button {
+        margin-right: 12px;
+        height: 60px;
+    }
+
+    svg {
+        width: 32px;
+    }
+
+    div {
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+    }
+
+    p {
+        margin: 0;
+
+        &:first-child {
+            font-size: 22px;
+            margin-bottom: 8px;
+        }
+
+        &:last-child {
+            font-size: 14px;
+            font-style: italic;
+        }
+    }
+}
+
+.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;
+
+
+    label {
+        margin-bottom: 0;
+        font-family: var(--bx-promptfont-font);
+        font-size: 26px;
+        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;
+        }
+    }
+}
+
+
+.bx-mkb-settings.bx-editing .bx-mkb-key-row button {
+    background: #393939;
+    border-radius: 4px;
+    border: none;
+
+    &:hover {
+        background: #333;
+        cursor: pointer;
+    }
+}
+
+.bx-mkb-action-buttons {
+    > div {
+        text-align: right;
+        display: none;
+    }
+
+    button {
+        margin-left: 8px;
+    }
+}
+
+.bx-mkb-settings:not(.bx-editing) .bx-mkb-action-buttons > div:first-child {
+    display: block;
+}
+
+.bx-mkb-settings.bx-editing .bx-mkb-action-buttons > div:last-child {
+    display: block;
+}
+
+.bx-mkb-note {
+    display: block;
+    margin: 16px 0 10px;
+    font-size: 12px;
+
+    &:first-of-type {
+        margin-top: 0;
+    }
+}