bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
2019-11-14 13:12:22 +00:00

74 lines
1.3 KiB
SCSS

@import "../../../stylesheets/variables/_all";
@import "../../../stylesheets/variables/typography";
:root {
--spoke-padding-right: 1.3rem;
--spoke-opacity: .75;
--talker-margin-xsm: .25rem;
--talker-margin-sm: .5rem;
--talker-max-width: 10rem;
--talker-font-weight: 400;
--talker-border-radius: 2rem;
}
.isTalkingWrapper,
.speaking,
.talker,
.spoke {
display: flex;
flex-direction: row;
}
.isTalkingWrapper {
position: absolute;
left: var(--md-padding-x);
top: 3.7rem;
[dir="rtl"] & {
left: none;
right: var(--md-padding-x);
}
}
.speaking {
flex-wrap: wrap;
}
.talker {
color: white;
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(--talker-margin-sm);
padding-right: var(--sm-padding-y);
margin-right: var(--talker-margin-sm);
margin-bottom: var(--talker-margin-xsm);
> span {
max-width: var(--talker-max-width);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i {
position: relative;
top: var(--border-size-large);
margin-left: var(--border-size);
font-size: var(--font-size-small);
}
}
.spoke{
padding-right: var(--spoke-padding-right);
opacity: .5;
}
.unmuted {
cursor: pointer;
}
.muted {
cursor: default;
}