bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

213 lines
3.6 KiB
SCSS
Raw Normal View History

2018-06-14 00:27:30 +08:00
@import "/imports/ui/stylesheets/mixins/_indicators";
/* Variables
* ==========
*/
:root {
--user-avatar-border: var(--color-gray-light);
--user-avatar-text: var(--color-white);
--user-indicator-voice-bg: var(--color-success);
--user-indicator-muted-bg: var(--color-danger);
--user-color: currentColor; //picks the current color reference in the class
}
2017-07-28 21:43:39 +08:00
.avatar {
2016-07-05 04:44:29 +08:00
position: relative;
height: 2.25rem;
min-width: 2.25rem;
border-radius: 50%;
text-align: center;
2017-10-05 22:43:08 +08:00
font-size: .85rem;
2019-04-10 22:59:25 +08:00
border: 2px solid transparent;
2017-07-28 21:43:39 +08:00
:global(.animationsEnabled) & {
transition: .3s ease-in-out;
}
&:after,
&:before {
2017-07-28 21:43:39 +08:00
content: "";
position: absolute;
width: 0;
height: 0;
padding-top: .5rem;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
2017-07-28 21:43:39 +08:00
color: inherit;
top: auto;
left: auto;
bottom: var(--user-indicators-offset);
right: var(--user-indicators-offset);
border: 1.5px solid var(--user-list-bg);
2017-07-28 21:43:39 +08:00
border-radius: 50%;
background-color: var(--user-indicator-voice-bg);
color: var(--user-avatar-text);
2017-07-28 21:43:39 +08:00
opacity: 0;
font-family: 'bbb-icons';
font-size: .65rem;
line-height: 0;
text-align: center;
vertical-align: middle;
letter-spacing: -.65rem;
2018-08-04 00:31:58 +08:00
z-index: 1;
[dir="rtl"] & {
left: var(--user-indicators-offset);
right: auto;
padding-right: .65rem;
padding-left: 0;
}
:global(.animationsEnabled) & {
transition: .3s ease-in-out;
}
2017-07-28 21:43:39 +08:00
}
}
2017-07-28 21:43:39 +08:00
.talking {
2018-08-04 00:31:58 +08:00
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--user-color);
2018-08-04 00:31:58 +08:00
border-radius: inherit;
:global(.animationsEnabled) & {
animation: pulse 1s infinite ease-in;
}
&::before {
:global(.animationsDisabled) & {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--user-color);
border-radius: inherit;
box-shadow: 0 0 0 4px var(--user-color);
opacity: .5;
}
}
}
@keyframes pulse {
0% {
2018-08-04 00:31:58 +08:00
opacity: 1;
transform: scale(1);
}
100% {
2018-08-04 00:31:58 +08:00
opacity: 0;
transform: scale(1.5);
}
}
2016-07-05 04:44:29 +08:00
.moderator {
2017-07-28 21:43:39 +08:00
border-radius: 5px;
}
2016-07-05 04:44:29 +08:00
.presenter {
2017-07-28 21:43:39 +08:00
&:before {
content: "\00a0\e90b\00a0";
padding: var(--md-padding-y);
2017-07-28 21:43:39 +08:00
}
2018-06-14 00:27:30 +08:00
@include presenterIndicator();
}
2016-07-05 04:44:29 +08:00
.whiteboardAccess {
&:before {
content: "\00a0\e925\00a0";
padding: var(--md-padding-y);
border-radius: 50% !important;
}
@include presenterIndicator();
}
2017-07-28 21:43:39 +08:00
.voice {
&:after {
content: "\00a0\e931\00a0";
background-color: var(--user-indicator-voice-bg);
2018-05-30 00:40:50 +08:00
top: 1.375rem;
left: 1.375rem;
right: auto;
[dir="rtl"] & {
left: auto;
right: 1.375rem;
}
2017-07-28 21:43:39 +08:00
}
}
.noVoice {
&:after {
content: "";
background-color: var(--color-off-white);
top: 1.375rem;
left: 1.375rem;
right: auto;
[dir="rtl"] & {
left: auto;
right: 1.375rem;
}
}
}
2017-07-28 21:43:39 +08:00
.muted {
&:after {
content: "\00a0\e932\00a0";
background-color: var(--user-indicator-muted-bg);
2017-07-28 21:43:39 +08:00
}
2016-07-09 03:09:16 +08:00
}
2017-07-28 21:43:39 +08:00
.listenOnly {
&:after {
content: "\00a0\e90c\00a0";
}
}
.listenOnly,
.muted,
.voice,
.noVoice {
2018-06-14 00:27:30 +08:00
@include indicatorStyles();
2016-07-09 03:09:16 +08:00
}
.image {
display: flex;
height: 2rem;
width: 2rem;
.img {
object-fit: cover;
overflow: hidden;
}
.circle {
border-radius: 50%;
}
.square {
border-radius: 3px;
}
}
2017-07-28 21:43:39 +08:00
.content {
color: var(--user-avatar-text);
2017-07-28 21:43:39 +08:00
top: 50%;
position: absolute;
text-align: center;
left: 0;
right: 0;
font-size: 110%;
text-transform: capitalize;
&,
& > * {
2017-07-28 21:43:39 +08:00
line-height: 0; // to keep centralized vertically
}
2016-07-05 04:44:29 +08:00
}