webui: fix some issue

fab position in rtl language, some styling issue

Author: KOWX712

webui/index.html

@@ -135,9 +135,11 @@
                     <div class="module-list content-padding fab-padding" id="kpm-list"></div>
                     <div class="empty-list" id="kpm-empty-msg" data-i18n="msg_no_module_loaded">No module loaded</div>
                 </div>
-                <md-fab variant="primary" aria-label="load" id="load">
-                    <md-icon slot="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-120v-320H120v-80h320v-320h80v320h320v80H520v320h-80Z"/></svg></md-icon>
-                </md-fab>
+                <div class="fab-container">
+                    <md-fab variant="primary" aria-label="load" id="load">
+                        <md-icon slot="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-120v-320H120v-80h320v-320h80v320h320v80H520v320h-80Z"/></svg></md-icon>
+                    </md-fab>
+                </div>
             </div>
             <!-- Exclude -->
             <div id="exclude-page" class="page">
@@ -153,7 +155,9 @@
                         <div class="list-item" id="clear-superkey">
                             <md-ripple></md-ripple>
                             <md-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 120q-100 0-170-70T40-480q0-100 70-170t170-70q81 0 141.5 46T506-560h335l79 79-140 160-100-79-80 80-80-80h-14q-25 72-87 116t-139 44Z" /></svg></md-icon>
-                            <div slot="headline" data-i18n="title_clear_superkey">Clear SuperKey</div>
+                            <div class="list-item-content">
+                                <div slot="headline" data-i18n="title_clear_superkey">Clear SuperKey</div>
+                            </div>
                         </div>
                         <div class="list-item" id="language">
                             <md-ripple></md-ripple>
@@ -202,9 +206,11 @@
                     <div class="output-terminal content-padding" id="patch-terminal"></div>
                     <div class="keyboard-inset" id="patch-keyboard-inset"></div>
                 </div>
-                <md-fab variant="primary" class="hide" aria-label="reboot" id="reboot-fab">
-                    <md-icon slot="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z"/></svg></md-icon>
-                </md-fab>
+                <div class="fab-container">
+                    <md-fab variant="primary" aria-label="reboot" id="reboot-fab">
+                        <md-icon slot="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z"/></svg></md-icon>
+                    </md-fab>
+                </div>
             </div>
         </div>
 

webui/language.js

@@ -183,7 +183,10 @@ async function generateLanguageMenu() {
         const radio = label.querySelector('md-radio');
 
         const currentLang = localStorage.getItem('kp-next_language') || 'default';
-        if (currentLang === lang) radio.checked = true;
+        if (currentLang === lang) {
+            radio.checked = true;
+            document.getElementById('current-language').textContent = name;
+        }
 
         radio.addEventListener('change', () => {
             if (radio.checked) setLanguage(lang);

webui/public/locales/strings/zh-CN.xml

@@ -53,7 +53,7 @@
     <string name="info_version">版本: %1$s</string>
     <string name="info_time">时间: %1$s</string>
     <string name="info_config">配置: %1$s</string>
-    <string name="info_slot">插槽: %1$s</string>
+    <string name="info_slot">槽位: %1$s</string>
     <string name="info_device">设备: %1$s</string>
     <string name="info_device_unknown">设备: 未知</string>
     <string name="info_author">作者: %1$s</string>

webui/styles.css

@@ -339,13 +339,24 @@ body {
     color: var(--md-sys-color-on-surface-variant);
 }
 
-md-fab {
+.fab-container {
     position: absolute;
-    bottom: 16px;
-    right: 16px;
+    bottom: 0;
+    left: 0;
+    padding: 16px;
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: none;
+    z-index: 1;
+}
+
+md-fab {
     transform: scale(1);
     opacity: 1;
     transition: all 0.2s ease;
+    pointer-events: auto;
 }
 
 md-fab.hide,
@@ -388,22 +399,26 @@ md-outlined-text-field {
     align-items: center;
     position: relative;
     width: 100%;
-    padding: 20px 16px;
+    padding: 0 16px;
     box-sizing: border-box;
 }
 
 .list-item-content {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     flex-grow: 1;
+    min-height: 64px;
+    padding: 8px 0;
+    box-sizing: border-box;
 }
 
 .list-item-content [slot="headline"] {
     font-size: 1.1em;
 }
 
 .list-item-content [slot="detail"] {
-    font-size: 0.9em;
+    font-size: 0.8em;
     color: var(--md-sys-color-outline);
 }
 
@@ -450,7 +465,8 @@ md-menu-item label {
 
 .icon-container {
     position: relative;
-    padding: 12px 4px;
+    padding: 4px;
+    margin: 8px 0;
     width: 40px;
     height: 40px;
     flex-shrink: 0;