fine-tuning for RTL languages

src/css/popup.css

@@ -83,23 +83,40 @@ body.tScopeSite .scopeRel:not(.disabled) {
     color: #a00;
     }
 
+html.ltr #buttonMtxSwitches + .dropdown-menu {
+    left: -80%;
+    }
+html.rtl #buttonMtxSwitches + .dropdown-menu {
+    right: -80%;
+    }
 #mtxSwitches > li  {
     color: #888;
     }
 #mtxSwitches > li.switchTrue {
     color: #000;
     }
-#mtxSwitches > li > span:before  {
+html.ltr #mtxSwitches > li > span:before  {
     content: '\f204';
     font: 120% FontAwesome;
     padding-right: 0.5em;
     }
-#mtxSwitches > li.switchTrue > span:before {
+html.ltr #mtxSwitches > li.switchTrue > span:before {
     color: #000;
     content: '\f205';
     font: 120% FontAwesome;
     padding-right: 0.5em;
     }
+html.rtl #mtxSwitches > li > span:after  {
+    content: '\f204';
+    font: 120% FontAwesome;
+    padding-left: 0.5em;
+    }
+html.rtl #mtxSwitches > li.switchTrue > span:after {
+    color: #000;
+    content: '\f205';
+    font: 120% FontAwesome;
+    padding-left: 0.5em;
+    }
 
 
 .dropdown-menu {

src/popup.html

@@ -29,7 +29,7 @@
         </div>
         <div class="dropdown-menu-capture"></div>
         <button id="mtxSwitch_matrix-off" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixMtxButtonTip">&#xf011;<span class="badge"></span></button>
-        <div style="display: inline-block;">
+        <div style="display: inline-block; position: relative">
             <button id="buttonMtxSwitches" type="button" class="dropdown-menu-button fa scopeRel" tabindex="-1">&#xf141;</button>
             <div class="dropdown-menu">
                 <ul id="mtxSwitches">