feat: add rtl language ui support

module/webui/styles/about.css

@@ -20,7 +20,6 @@
 .about-menu p {
     margin: 0;
     font-size: 16px;
-    text-align: left;
 }
 
 #module_name_line1 {
@@ -55,10 +54,9 @@
 .link-icon {
     font-size: 17px;
     font-weight: bold;
-    min-height: calc(1em + 15px);
+    min-height: calc(1em + 20px);
     padding: 3px 10px;
     color: #fff;
-    fill: #fff;
     user-select: none;
     display: inline-flex;
     align-items: center;
@@ -69,6 +67,7 @@
     transition: background-color 0.2s ease;
 
     svg {
+        fill: #fff;
         padding-right: 3px;
     }
 }

module/webui/styles/applist.css

@@ -273,7 +273,6 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    margin-left: auto;
 }
 
 .checkbox {

module/webui/styles/file_selector.css

@@ -71,12 +71,12 @@
     position: relative;
     overflow: hidden;
     user-select: none;
-}
 
-.file-item svg {
-    flex-shrink: 0;
-    margin-right: 10px;
-    fill: var(--text-secondary);
+    svg {
+        flex-shrink: 0;
+        margin-right: 10px;
+        fill: var(--text-secondary);
+    }
 }
 
 .file-item span {

module/webui/styles/header.css

@@ -1,7 +1,7 @@
 .header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     position: fixed;
     top: 0;
     left: 0;
@@ -27,26 +27,34 @@
 }
 
 .no-connection {
-    padding: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
     display: none;
-    margin-right: 0px;
     background: none;
     border: none;
+
+    svg {
+        fill: var(--border-color);
+    }
 }
 
 .language-dropdown {
+    margin-left: auto;
     position: relative;
     display: inline-block;
 }
 
 .language-button {
-    padding-top: 5px;
+    height: 100%;
+    display: flex;
+    align-items: center;
     background: none;
     border: none;
-}
 
-.language-icon {
-    fill: var(--text-primary);
+    svg {
+        fill: var(--text-primary);
+    }
 }
 
 .language-menu {
@@ -121,10 +129,16 @@
 }
 
 .help-button {
-    padding-left: 5px;
-    margin-right: auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 5px;
     background: none;
     border: none;
+
+    svg {
+        fill: var(--border-color);
+    }
 }
 
 .help-overlay {
@@ -139,7 +153,6 @@
     background-color: var(--bg-secondary);
     padding: 30px;
     border-radius: 15px;
-    text-align: left;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -148,7 +161,9 @@
     flex-direction: column;
     gap: 20px;
     max-height: calc(85vh - 60px);
+    padding-bottom: 20px;
     overflow-y: auto;
+    mask-image: linear-gradient(black 0%, black calc(100% - 20px), transparent 100%);
 }
 
 .help-content-header {
@@ -162,4 +177,4 @@
 
 .instruction p {
     margin: 0;
-}
+}

module/webui/styles/rtl_styles.css

@@ -0,0 +1,57 @@
+#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

@@ -133,7 +133,6 @@
 
 .menu-options li {
     padding: 12px 15px;
-    text-align: left;
 }
 
 .menu-options li::after {