Fix mismappings #3689

webextensions/sidebar/styles/base.css

@@ -40,7 +40,9 @@
                          min-height    var(--collapse-animation),
                          min-width     var(--collapse-animation),
                          opacity       var(--collapse-animation),
-                         padding       var(--collapse-animation); /* for extra margin on overlay-scrollbar mode */
+                         /* for extra margin on overlay-scrollbar mode */
+                         padding-inline-start var(--collapse-animation),
+                         padding-inline-end   var(--collapse-animation);
   --tab-animation: var(--tab-basic-animation),
                    background    var(--color-animation),
                    top           var(--collapse-animation);

webextensions/sidebar/styles/photon/base.css

@@ -22,11 +22,9 @@ tab-item,
   margin-block-end: -1px;
 }
 
-:root:not(.rtl) tab-item.pinned tab-item-substance {
-  border-width: 0 1px 1px 0;
-}
-:root.rtl tab-item.pinned tab-item-substance {
-  border-width: 0 0 1px 1px;
+tab-item.pinned tab-item-substance {
+  border-block-width: 0 1px;
+  border-inline-width: 0 1px;
 }
 
 

webextensions/sidebar/styles/proton/proton.css

@@ -250,15 +250,21 @@ tab-item-substance {
   z-index: 100;
 }
 
-:root.left tab-item:not(.pinned) tab-item-substance,
-:root.left .after-tabs button:not([data-menu-ui]),
-:root.left .after-tabs [role="button"]:not([data-menu-ui]) {
+:root.left:not(.rtl) tab-item:not(.pinned) tab-item-substance,
+:root.left:not(.rtl) .after-tabs button:not([data-menu-ui]),
+:root.left:not(.rtl) .after-tabs [role="button"]:not([data-menu-ui]),
+:root.right.rtl tab-item:not(.pinned) tab-item-substance,
+:root.right.rtl .after-tabs button:not([data-menu-ui]),
+:root.right.rtl .after-tabs [role="button"]:not([data-menu-ui]) {
   padding-inline-end: 0.35em;
 }
 
-:root.right tab-item:not(.pinned) tab-item-substance,
-:root.right .after-tabs button:not([data-menu-ui]),
-:root.right .after-tabs [role="button"]:not([data-menu-ui]) {
+:root.right:not(.rtl) tab-item:not(.pinned) tab-item-substance,
+:root.right:not(.rtl) .after-tabs button:not([data-menu-ui]),
+:root.right:not(.rtl) .after-tabs [role="button"]:not([data-menu-ui]),
+:root.left.rtl tab-item:not(.pinned) tab-item-substance,
+:root.left.rtl .after-tabs button:not([data-menu-ui]),
+:root.left.rtl .after-tabs [role="button"]:not([data-menu-ui]) {
   padding-inline-start: 0.35em;
 }
 
@@ -417,11 +423,13 @@ tab-item:not(.faviconized).subtree-collapsed.all-descendants-highlighted .highli
 
 /* contextual identity marker in tabs */
 
-:root.left tab-item:not(.faviconized) .contextual-identity-marker {
+:root.left:not(.rtl) tab-item:not(.faviconized) .contextual-identity-marker,
+:root.right.rtl tab-item:not(.faviconized) .contextual-identity-marker {
   inset-inline-end: calc(var(--tab-dropshadow-blur) - var(--tab-highlighter-size));
 }
 
-:root.right tab-item:not(.faviconized) .contextual-identity-marker {
+:root.right:not(.rtl) tab-item:not(.faviconized) .contextual-identity-marker,
+:root.left.rtl tab-item:not(.faviconized) .contextual-identity-marker {
   inset-inline-start: calc(var(--tab-dropshadow-blur) - var(--tab-highlighter-size));
 }
 

webextensions/sidebar/styles/sidebar/sidebar.css

@@ -14,7 +14,7 @@
  * The Original Code is the SidebarStyleTab.
  * 
  * The Initial Developer of the Original Code is YUKI "Piro" Hiroshi.
- * Portions created by the Initial Developer are Copyright (C) 2010-2024
+ * Portions created by the Initial Developer are Copyright (C) 2010-2025
  * the Initial Developer. All Rights Reserved.
  * 
  * Contributor(s): Philipp von Weitershausen <[email protected]>
@@ -78,17 +78,21 @@ body,
 }
 
 /* Use the splitter to display the border of tab-items */
-:root.left {
+:root.left:not(.rtl),
+:root.right.rtl {
   border-inline-end: 1px solid var(--shadow-color);
 }
-:root:not(.active).left {
+:root:not(.active).left:not(.rtl),
+:root:not(.active).right.rtl {
   border-inline-end-color: var(--shadow-color-inactive);
 }
 
-:root.right {
+:root.right:not(.rtl),
+:root.left.rtl {
   border-inline-start: 1px solid var(--shadow-color);
 }
-:root:not(.active).right {
+:root:not(.active).right:not(.rtl),
+:root:not(.active).left.rtl {
   border-inline-start-color: var(--shadow-color-inactive);
 }
 

webextensions/sidebar/styles/throbber.css

@@ -106,22 +106,30 @@ tab-item:not(.collapsed) .throbber {
   mask-image: url("./throbber.svg");
 }
 
-#tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized:not(.rtl) .throbber::before {
+#tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
   background-image: none;
+}
+:root:not(.rtl)
+  #tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
   mask: -moz-element(#conductor-throbber) no-repeat left center / 100%;
 }
-#tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized.rtl .throbber::before {
-  background-image: none;
+:root.rtl
+  #tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
   mask: -moz-element(#conductor-throbber) no-repeat right center / 100%;
 }
-:root.simulate-svg-context-fill #tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
+:root.simulate-svg-context-fill
+  #tabbar tab-item:not(.collapsed).loading.throbber-unsynchronized .throbber::before {
   mask: -moz-element(#conductor-throbber-container) no-repeat;
 }
 
-:root#conductor-throbber {
+:root:not(.rtl) #conductor-throbber {
   background: url("/resources/icons/hourglass.svg") no-repeat left center;
 }
-:root.animation #conductor-throbber {
+:root.rtl #conductor-throbber {
+  background: url("/resources/icons/hourglass.svg") no-repeat right center;
+}
+:root.animation:not(.rtl) #conductor-throbber,
+:root.animation.rtl #conductor-throbber {
   background-image: url("./throbber.svg");
 }