Apply direction:rtl to UI on RTL environment #3689

piroor · Jan 6, 2025 · 51b17e5 · 51b17e5
1 parent 159c5a5
commit 51b17e5
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/webextensions/sidebar/styles/base.css b/webextensions/sidebar/styles/base.css
@@ -246,6 +246,12 @@ tab-sound-button */ {
   overflow: hidden;
 }
 
+:root.rtl #pinned-tabs-container,
+:root.rtl #normal-tabs-container,
+:root.rtl tab-item-substance .caption {
+  direction: rtl;
+}
+
 .virtual-scroll-container {
   /* We need to use min-height instead of height for a flexbox. */
   min-height: 0px; /* this will be updated dynamically by scroll.js */
@@ -547,17 +553,19 @@ tab-item.duplicating tab-item-substance {
 }
 
 
-:root.left tab-item tab-twisty {
+:root.left tab-item tab-twisty,
+:root.right.rtl tab-item tab-twisty {
   order: -1;
 }
-:root.left tab-item tab-closebox {
+:root.left tab-item tab-closebox,
+:root.right.rtl tab-item tab-closebox {
   order: 10000;
 }
 
-:root.right tab-item tab-twisty {
+:root.right:not(.rtl) tab-item tab-twisty {
   order: 10000;
 }
-:root.right tab-item tab-closebox {
+:root.right:not(.rtl) tab-item tab-closebox {
   order: -1;
 }