diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 7747f4c6a5ec81c48d0486fb91657cee34f9b8d7..87b75b837ce8de03b2b1526849a101e0fadea0b7 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -63,7 +63,6 @@ flex-grow: 1; height: 80%; margin-bottom: 0; - margin-left: -0.5rem; border-radius: 1rem 1rem 0 0; border: 1px solid $ui-black-transparent; @@ -82,9 +81,24 @@ white-space: nowrap; } +[dir="ltr"] .tab { + margin-left: -0.5rem; +} + +[dir="rtl"] .tab { + margin-right: -0.5rem; +} + +[dir="ltr"] .tab:nth-of-type(1) { + margin-left: 0; +} + +[dir="rtl"] .tab:nth-of-type(1) { + margin-right: 0; +} + /* Use z-indices to force left-on-top for tabs */ .tab:nth-of-type(1) { - margin-left: 0; z-index: 3; } .tab:nth-of-type(2) { @@ -106,11 +120,18 @@ } .tab img { - margin-right: 0.125rem; width: 1.375rem; filter: grayscale(100%); } +[dir="ltr"] .tab img { + margin-right: 0.125rem; +} + +[dir="rtl"] .tab img { + margin-left: 0.125rem; +} + .tab.is-selected img { filter: none; } @@ -191,7 +212,7 @@ padding-right: $space; min-height: 0; /* this makes it work in Firefox */ - + /* For making the sprite-selector a scrollable pane @todo: Not working in Safari