imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a pulse animation to the pinned messages indicator and move it

Browse source
This commit is contained in:
Michael Telatynski 2021-05-25 13:02:09 +01:00
parent 152c178ea9
commit 13427aaf07
3 changed files with 37 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

41
res/css/views/rooms/_RoomHeader.scss
View file

@ -281,18 +281,39 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
.mx_RoomHeader_pinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $pinned-color;
}
$dot-size: 8px;
$pulse-color: $pinned-unread-color;
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
position: absolute;
right: 0;
top: 0;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RoomHeader_indicator_pulse 2s infinite;
animation-iteration-count: 1;
}
@keyframes mx_RoomHeader_indicator_pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba($pulse-color, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0);
}
}
@media only screen and (max-width: 480px) {