opt: refine rtl related code

module/webui/scripts/language.js

@@ -101,23 +101,8 @@ export async function loadTranslations() {
 
         // Support for rtl language
         const isRTL = rtlLang.includes(lang.split('-')[0]);
-        if (isRTL) {
-            document.documentElement.setAttribute('dir', 'rtl');
-            document.documentElement.setAttribute('lang', lang);
-            
-            // Load extra rtl css
-            fetch('styles/rtl_styles.css')
-                .then(res => res.text())
-                .then(css => {
-                    const style = document.createElement('style');
-                    style.textContent = css;
-                    document.head.appendChild(style);
-                });
-        } else {
-            document.documentElement.setAttribute('dir', 'ltr');
-            document.documentElement.setAttribute('lang', lang);
-        }
-
+        document.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
+ 
         // Generate language menu
         await generateLanguageMenu();
     } catch (error) {

module/webui/styles/about.css

@@ -72,6 +72,11 @@
     }
 }
 
+[dir="rtl"] .link-icon svg {
+    padding-right: unset;
+    padding-left: 3px;
+}
+
 #telegram {
     background-color: #38A7ED;
 }

module/webui/styles/applist.css

@@ -240,6 +240,11 @@
     position: relative;
 }
 
+[dir="rtl"] .app-icon-container {
+    margin-right: unset;
+    margin-left: 10px;
+}
+
 .loader {
     position: absolute;
     top: 0;

module/webui/styles/file_selector.css

@@ -79,6 +79,11 @@
     }
 }
 
+[dir="rtl"] .file-item svg {
+    margin-right: unset;
+    margin-left: 10px;
+}
+
 .file-item span {
     flex-grow: 1;
     overflow: hidden;

module/webui/styles/global.css

@@ -111,6 +111,11 @@ body {
     user-select: none;
 }
 
+[dir="rtl"] .close-btn {
+    right: unset;
+    left: 12px;
+}
+
 .prompt {
     position: fixed;
     bottom: 0;

module/webui/styles/header.css

@@ -26,6 +26,12 @@
     font-weight: bold;
 }
 
+[dir="rtl"] #module-version,
+[dir="rtl"] #title {
+    padding-left: unset;
+    padding-right: 5px;
+}
+
 .no-connection {
     height: 100%;
     display: flex;
@@ -45,6 +51,11 @@
     display: inline-block;
 }
 
+[dir="rtl"] .language-dropdown {
+    margin-left: unset;
+    margin-right: auto;
+}
+
 .language-button {
     height: 100%;
     display: flex;
@@ -76,6 +87,12 @@
     transition: all 0.2s ease;
 }
 
+[dir="rtl"] .language-menu {
+    right: unset;
+    left: 5px;
+    transform-origin: top left;
+}
+
 .language-menu.show {
     opacity: 1;
     transform: translateY(0) scale(1);

module/webui/styles/rtl_styles.css

@@ -1,57 +0,0 @@
-#module-version,
-#title {
-    padding-left: unset;
-    padding-right: 5px;
-}
-
-.language-dropdown {
-    margin-left: unset;
-    margin-right: auto;
-}
-
-.language-menu {
-    right: unset;
-    left: 5px;
-    transform-origin: top left;
-}
-
-.close-btn {
-    right: unset;
-    left: 12px;
-}
-
-.search-icon {
-    left: unset;
-    right: 15px;
-}
-
-.search-card {
-    left: unset;
-    right: 0;
-}
-
-.menu {
-    right: unset;
-    left: 0;
-}
-
-.menu-options {
-    right: unset;
-    left: 0;
-    transform: translateX(-120%);
-}
-
-.app-icon-container {
-    margin-right: unset;
-    margin-left: 10px;
-}
-
-.link-icon svg {
-    padding-right: unset;
-    padding-left: 3px;
-}
-
-.file-item svg {
-    margin-right: unset;
-    margin-left: 10px;
-}

module/webui/styles/search_menu.css

@@ -26,6 +26,11 @@
     position: absolute;
 }
 
+[dir="rtl"] .search-card {
+    left: unset;
+    right: 0;
+}
+
 .search-icon {
     position: absolute;
     padding-top: 5px;
@@ -33,6 +38,11 @@
     z-index: 1000;
 }
 
+[dir="rtl"] .search-icon {
+    left: unset;
+    right: 15px;
+}
+
 .search-input {
     position: absolute;
     border: none;
@@ -65,6 +75,11 @@
     height: 100%;
 }
 
+[dir="rtl"] .menu {
+    right: unset;
+    left: 0;
+}
+
 .menu-toggle {
     display: none;
 }
@@ -113,6 +128,12 @@
     user-select: none;
 }
 
+[dir="rtl"] .menu-options {
+    right: unset;
+    left: 0;
+    transform: translateX(-120%);
+}
+
 #select-denylist,
 #security-patch {
     display: none;