diff --git a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss index e6fe67e30a4d8d56e867da0ee13053a4832080df..6789c3f97b56f5c27633b2bebc31c6806a164151 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss @@ -16,6 +16,7 @@ --arrow-left: -20px; --arrow-top-edge: -2.5rem; --arrow-left-edge: -21rem; + --rtl-hint-top: 15rem; } @mixin arrowIconStyle() { @@ -55,6 +56,12 @@ } } +@mixin useRTLPosition() { + right: none; + left: none; + top: var(--rtl-hint-top); +} + @mixin positionHint() { :global(.browser-edge) & { left: var(--position-left-edge); @@ -72,8 +79,7 @@ right: auto; [dir="rtl"] & { - right: var(--position-left-firefox-left-edge); - left: auto; + @include useRTLPosition(); } } :global(.browser-chrome) & { @@ -82,8 +88,7 @@ right: auto; [dir="rtl"] & { - left: auto; - right: var(--position-left-chrome); + @include useRTLPosition(); } } :global(.browser-safari) & { @@ -158,7 +163,7 @@ width: 340px; [dir="rtl"] & { - padding-right: 0 var(--jumbo-padding-x) 0 0; + padding: 0 var(--jumbo-padding-x) 0 0; } small {