diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
index d790d76837..bdd2a37f70 100644
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
@@ -5,11 +5,12 @@
:root {
--spoke-opacity: .5;
--talker-margin-sm: .5rem;
+ --talker-padding-lg: .75rem;
+ --talker-padding-xl: 1.62rem;
+ --talker-padding-xsm: .13rem;
--talker-max-width: 10rem;
--talker-font-weight: 400;
--talker-border-radius: 2rem;
- --max-speaker-height: 1.5rem;
- --icon-offset: 1.1rem;
}
.hidden {
@@ -32,7 +33,7 @@
.speaking {
flex-wrap: wrap;
- max-height: var(--max-speaker-height);
+ max-height: var(--talker-padding-xl);
}
.talker {
@@ -41,8 +42,7 @@
font-weight: var(--talker-font-weight);
border-radius: var(--talker-border-radius) var(--talker-border-radius);
font-size: var(--font-size-base);
- padding-left: var(--border-radius);
- padding-right: var(--border-radius);
+ padding: var(--talker-padding-xsm) var(--talker-padding-lg) var(--talker-padding-xsm) var(--talker-padding-lg);
margin-left: var(--border-radius);
margin-right: var(--border-radius);
@@ -51,6 +51,11 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ margin-right: var(--talker-margin-sm);
+ [dir="rtl"] & {
+ margin-right: 0;
+ margin-left: var(--talker-margin-sm);
+ }
}
i {
@@ -62,11 +67,11 @@
.spoke {
opacity: var(--spoke-opacity);
- padding-right: var(--icon-offset);
+ padding-right: var(--talker-padding-xl);
[dir="rtl"] & {
- padding-left: var(--icon-offset);
- padding-right: var(--border-radius);
+ padding-left: var(--talker-padding-xl);
+ padding-right: var(--talker-padding-lg)
}
}