diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 313027bde6..48011951cc 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -67,7 +67,7 @@ limitations under the License. .mx_SenderProfile { position: relative; top: -2px; - left: calc(-1 * var(--gutterSize)); + left: 2px; } &[data-self=false] { @@ -75,7 +75,7 @@ limitations under the License. border-bottom-right-radius: var(--cornerRadius); } .mx_EventTile_avatar { - left: -48px; + left: -34px; } .mx_MessageActionBar { @@ -91,7 +91,7 @@ limitations under the License. float: right; > a { left: auto; - right: -35px; + right: -48px; } } .mx_SenderProfile { @@ -123,10 +123,10 @@ limitations under the License. background: var(--backgroundColor); display: flex; gap: 5px; - margin: 0 -12px 0 -22px; + margin: 0 -12px 0 -9px; > a { position: absolute; - left: -35px; + left: -48px; } } @@ -167,6 +167,7 @@ limitations under the License. margin: 0 calc(-1 * var(--gutterSize)); .mx_EventTile_reply { + max-width: 90%; padding: 0; > a { display: none !important; @@ -186,6 +187,23 @@ limitations under the License. } } + .mx_EditMessageComposer_buttons { + position: static; + padding: 0; + margin: 0; + background: transparent; + } + + .mx_ReactionsRow { + margin-right: -18px; + margin-left: -9px; + } + + .mx_ReplyThread { + border-left-width: 2px; + border-left-color: $eventbubble-reply-color; + } + &.mx_EventTile_bubbleContainer, &.mx_EventTile_info, & ~ .mx_EventListSummary[data-expanded=false] { @@ -225,6 +243,19 @@ limitations under the License. .mx_EventTile { margin: 0 58px; } + + .mx_EventTile_line { + margin: 0 5px; + > a { + left: auto; + right: 0; + transform: translateX(calc(100% + 5px)); + } + } + + .mx_MessageActionBar { + transform: translate3d(50%, 0, 0); + } } /* events that do not require bubble layout */ @@ -283,7 +314,6 @@ limitations under the License. } .mx_MTextBody { - /* 30px equates to the width of the timestamp */ - max-width: calc(100% - 35px - var(--gutterSize)); + max-width: 100%; } } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0b3444c95b..a43936c46e 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -234,6 +234,7 @@ $eventbubble-self-bg: #143A34; $eventbubble-others-bg: #394049; $eventbubble-bg-hover: #433C23; $eventbubble-avatar-outline: $bg-color; +$eventbubble-reply-color: #C1C6CD; // ***** Mixins! ***** diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index e485028774..f349a804a8 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -352,6 +352,7 @@ $eventbubble-self-bg: #F8FDFC; $eventbubble-others-bg: #F7F8F9; $eventbubble-bg-hover: rgb(242, 242, 242); $eventbubble-avatar-outline: #fff; +$eventbubble-reply-color: #C1C6CD; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 6f0bcadaf7..ef5f4d8c86 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -354,6 +354,7 @@ $eventbubble-self-bg: #F8FDFC; $eventbubble-others-bg: #F7F8F9; $eventbubble-bg-hover: #FEFCF5; $eventbubble-avatar-outline: $primary-bg-color; +$eventbubble-reply-color: #C1C6CD; // ***** Mixins! *****