Reorganize some CSS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-22 09:06:20 +02:00
parent c2aada6aa7
commit 7ad62a8b1a
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
2 changed files with 23 additions and 12 deletions

View file

@ -19,19 +19,20 @@ limitations under the License.
right: 16px; right: 16px;
bottom: 16px; bottom: 16px;
z-index: 100; // To be above the primary feed z-index: 100; // To be above the primary feed
width: 20%;
min-width: 160px; height: 100%;
width: 25%;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: flex-start;
align-items: flex-end;
gap: 12px;
.mx_VideoFeed { > .mx_VideoFeed {
border-radius: 4px;
width: 100%; width: 100%;
margin-bottom: 12px;
&.mx_VideoFeed_voice { &.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -39,16 +40,13 @@ limitations under the License.
min-width: 160px; min-width: 160px;
min-height: 90px; min-height: 90px;
} }
&.mx_VideoFeed_video {
background-color: transparent;
}
} }
&.mx_CallViewSidebar_pipMode { &.mx_CallViewSidebar_pipMode {
top: 16px; top: 16px;
bottom: unset; bottom: unset;
min-width: unset; justify-content: flex-end;
gap: 4px;
.mx_VideoFeed_voice { .mx_VideoFeed_voice {
min-width: 64px; min-width: 64px;

View file

@ -14,6 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_VideoFeed {
border-radius: 4px;
&.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
}
&.mx_VideoFeed_video {
background-color: transparent;
}
}
.mx_VideoFeed_mirror { .mx_VideoFeed_mirror {
transform: scale(-1, 1); transform: scale(-1, 1);
} }