first iteration for message bubble layout

res/css/views/rooms/_EventBubbleTile.scss

@@ -0,0 +1,149 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EventTile[data-layout=bubble] {
+
+    --avatarSize: 32px;
+    --gutterSize: 7px;
+    --cornerRadius: 5px;
+
+    --maxWidth: 70%;
+
+    position: relative;
+    margin-top: var(--gutterSize);
+    margin-left: var(--avatarSize);
+    margin-right: var(--avatarSize);
+    padding: 2px 0;
+
+    &:hover {
+        background: rgb(242, 242, 242);
+    }
+
+    .mx_SenderProfile,
+    .mx_EventTile_line {
+        width: fit-content;
+        max-width: 70%;
+        background: var(--backgroundColor);
+    }
+
+    .mx_SenderProfile {
+        display: none;
+        padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize);
+        border-top-left-radius: var(--cornerRadius);
+        border-top-right-radius: var(--cornerRadius);
+    }
+
+    .mx_EventTile_line {
+        padding: var(--gutterSize);
+        border-radius: var(--cornerRadius);
+    }
+
+    /*
+    .mx_SenderProfile + .mx_EventTile_line {
+        padding-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    */
+
+    .mx_EventTile_avatar {
+        position: absolute;
+        top: 0;
+        img {
+            border: 2px solid #fff;
+            border-radius: 50%;
+        }
+    }
+
+    &[data-self=true] {
+        .mx_EventTile_line {
+            float: right;
+        }
+        .mx_ReactionsRow {
+            float: right;
+            clear: right;
+            display: flex;
+
+            /* Moving the "add reaction button" before the reactions */
+            > :last-child {
+                order: -1;
+            }
+        }
+        .mx_EventTile_avatar {
+            right: calc(-1 * var(--avatarSize));
+        }
+        --backgroundColor: #F8FDFC;
+    }
+
+    &:not([data-self=true]) {
+        .mx_EventTile_avatar {
+            left: calc(-1 * var(--avatarSize));
+        }
+        --backgroundColor: #F7F8F9;
+    }
+
+    &.mx_EventTile_bubbleContainer,
+    &.mx_EventTile_info,
+    & ~ .mx_EventListSummary[data-expanded=false] {
+
+        --backgroundColor: transparent;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .mx_EventTile_avatar {
+            position: static;
+            order: -1;
+        }
+    }
+
+    & ~ .mx_EventListSummary {
+        --maxWidth: 95%;
+        .mx_EventListSummary_toggle {
+            float: none;
+            margin: 0;
+            order: 9;
+        }
+    }
+
+    & + .mx_EventListSummary {
+        .mx_EventTile {
+            margin-top: 0;
+            padding: 0;
+        }
+    }
+
+    .mx_EventListSummary_toggle {
+        margin-right: 55px;
+    }
+
+    .mx_EventTile_line {
+        display: flex;
+        gap: var(--gutterSize);
+        > a {
+            order: 999; /* always display the timestamp as the last item */
+            align-self: flex-end;
+        }
+    }
+
+    .mx_EventTile_readAvatars {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
+
+}