BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pulse animation added to the avatar and audio controls when the user is talking.

Browse Source
This commit is contained in:
Bobak Oftadeh 2018-05-31 10:16:39 -07:00
parent 136fa72a7e
commit 5ef6bab9a5
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss Normal file → Executable file
View File

@ -31,8 +31,19 @@
}
&.glow {
span:first-child{
box-shadow: 0 0 0 1px #ffffff, 0 0 0 1px;
}
animation: pulse 1s infinite ease-in;
border-radius: 50%;
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 white;
}
70% {
box-shadow: 0 0 0 0.5625rem transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}

15
bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
View File

@ -10,6 +10,7 @@ $user-indicator-presenter-bg: $color-primary;
$user-indicator-voice-bg: $color-success;
$user-indicator-muted-bg: $color-danger;
$user-list-bg: $color-off-white;
$user-color: currentColor; //picks the current color reference in the class
.avatar {
position: relative;
@ -49,7 +50,19 @@ $user-list-bg: $color-off-white;
}
.talking {
box-shadow: 0 0 0 1px $user-list-bg, 0 0 0 6px;
animation: pulse 1s infinite ease-in;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 $user-color;
}
70% {
box-shadow: 0 0 0 0.5625rem transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.moderator {