62 lines
1.5 KiB
SCSS
62 lines
1.5 KiB
SCSS
|
// Copyright 2023 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
.CallingReactionsToasts {
|
||
|
|
position: absolute;
|
||
|
|
inset-block-end: calc($CallControls__height + 32px);
|
||
|
|
inset-inline-start: 65px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Normally the newest toasts are appended on top, like this:
|
||
|
|
// | Second |
|
||
|
|
// | First | -> | First |
|
||
|
|
//
|
||
|
|
// For Reactions we need the newest toasts to come in at the bottom:
|
||
|
|
// | First |
|
||
|
|
// | First | -> | Second |
|
||
|
|
//
|
||
|
|
// To achieve this, rotate the outer container 180deg so everything is upside-down,
|
||
|
|
// then rotate each toast 180deg to reset the rotation of the actual toasts to 0deg.
|
||
|
|
.CallingReactionsToasts .CallingToasts {
|
||
|
|
position: absolute;
|
||
|
|
inset-block-start: 0;
|
||
|
|
transform: translateY(-100%) rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.CallingReactionsToasts .CallingToast {
|
||
|
|
@include font-body-1;
|
||
|
|
padding-inline: 16px;
|
||
|
|
color: $color-gray-20;
|
||
|
|
font-size: 15px;
|
||
|
|
line-height: 20px;
|
||
|
|
transform: rotate(-180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.CallingReactionsToasts .CallingToasts__inner {
|
||
|
|
width: 100%;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: flex-end;
|
||
|
|
pointer-events: none;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CallingReactionsToasts .CallingToasts__inner div:nth-child(4) .CallingToast {
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CallingReactionsToasts .CallingToasts__inner div:nth-child(5) .CallingToast {
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CallingReactionsToasts__reaction {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CallingReactionsToasts__reaction .module-emoji {
|
||
|
|
position: absolute;
|
||
|
|
// Float the emoji outside of the toast bubble
|
||
|
|
inset-inline-start: -60px;
|
||
|
|
inset-block-start: -5px;
|
||
|
|
}
|