Move style declarations out of :not([data-layout=bubble]) in ThreadView (#9020)

* Move mx_EventTile out of mx_EventTile:not([data-layout=bubble]) in mx_ThreadView

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a logical property

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a redundant declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply zero inline start padding to group layout only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Reorder style blocks; irc/group before bubble

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move styles for mx_EventTile_avatar of info event lines on ThreadView out of :not() pseudo class

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move styles in mx_GenericEventListSummary on ThreadView out of :not() pseudo class

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Shorthand for inline margin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/rooms/_EventTile.scss

@@ -326,7 +326,7 @@ $left-gutter: 64px;
             &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
             &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
             &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
-                padding-left: calc($left-gutter + 18px + $selected-message-border-width);
+                padding-inline-start: calc($left-gutter + 18px + $selected-message-border-width);
             }
         }
     }
@@ -957,8 +957,7 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_line {
-            padding-top: var(--BaseCard_EventTile_line-padding-block);
+            padding-block: var(--BaseCard_EventTile_line-padding-block);
-            padding-bottom: var(--BaseCard_EventTile_line-padding-block);
         }
 
         .mx_EventTile_line,
@@ -1004,16 +1003,14 @@ $left-gutter: 64px;
             &[data-layout=group] {
                 padding-top: 0;
 
-                .mx_MessageTimestamp {
-                    top: 2px; // Align with avatar
-                }
-            }
-
-            &:not([data-layout=bubble]) {
                 .mx_EventTile_avatar {
                     left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
                     z-index: 9; // position above the hover styling
                 }
+
+                .mx_MessageTimestamp {
+                    top: 2px; // Align with avatar
+                }
             }
 
             &[data-layout=bubble] {
@@ -1023,19 +1020,11 @@ $left-gutter: 64px;
             }
         }
 
-        &:not([data-layout=bubble]) {
+        &[data-layout=irc],
-            padding-top: $spacing-16;
+        &[data-layout=group] {
-
+            padding-block-start: $spacing-16;
-            &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
-            &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
-            &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
-                padding-inline-start: 0; // Override
-            }
 
             .mx_EventTile_line {
-                padding-top: var(--BaseCard_EventTile_line-padding-block);
-                padding-bottom: var(--BaseCard_EventTile_line-padding-block);
-
                 .mx_EventTile_content {
                     &.mx_EditMessageComposer {
                         padding-inline-start: 0; // align start of first letter with that of the event body
@@ -1044,34 +1033,6 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-layout=bubble] {
-            margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
-            margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
-
-            &::before {
-                inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
-                z-index: auto; // enable background color on hover
-            }
-
-            .mx_ReactionsRow {
-                position: relative; // display on hover
-            }
-
-            .mx_EventTile_line.mx_EventTile_mediaLine {
-                padding-block: 0;
-                padding-inline-start: 0;
-                max-width: var(--EventBubbleTile_line-max-width);
-            }
-
-            &[data-self=true] {
-                align-items: flex-end;
-
-                .mx_EventTile_line.mx_EventTile_mediaLine {
-                    margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
-                }
-            }
-        }
-
         &[data-layout=group] {
             width: 100%;
 
@@ -1139,13 +1100,51 @@ $left-gutter: 64px;
                 position: absolute; // for IRC layout
                 top: 2px; // Align with mx_EventTile_content
             }
+
+            &:hover {
+                &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
+                &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
+                &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
+                    padding-inline-start: 0;
+                }
+            }
+        }
+
+        &[data-layout=bubble] {
+            margin-inline: var(--BaseCard_EventTile-spacing-inline);
+
+            &::before {
+                inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
+                z-index: auto; // enable background color on hover
+            }
+
+            .mx_ReactionsRow {
+                position: relative; // display on hover
+            }
+
+            .mx_EventTile_line.mx_EventTile_mediaLine {
+                padding-block: 0;
+                padding-inline-start: 0;
+                max-width: var(--EventBubbleTile_line-max-width);
+            }
+
+            &[data-self=true] {
+                align-items: flex-end;
+
+                .mx_EventTile_line.mx_EventTile_mediaLine {
+                    margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
+                }
+            }
         }
     }
 
     .mx_GenericEventListSummary {
-        &:not([data-layout=bubble]) > .mx_EventTile_line {
+        &[data-layout=irc],
-            padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
+        &[data-layout=group] {
-            padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
+            > .mx_EventTile_line {
+                padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
+                padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
+            }
         }
     }
 }