diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 8163b29fc98..cd4371b6a02 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -17,57 +17,54 @@ limitations under the License. $irc-line-height: $font-18px; .mx_IRCLayout { - --name-width: 80px; // cf. ircDisplayNameWidth on Settings.tsx + --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */ --icon-width: 14px; - --right-padding: 5px; --line-height: $irc-line-height; + --right-padding: 5px; /* TODO: Use a spacing variable */ line-height: var(--line-height) !important; + blockquote { + margin: 0; + } + .mx_NewRoomIntro { > h2 { line-height: initial; /* Cancel $irc-line-height */ } } - .mx_EventTile { + .mx_EventTile[data-layout="irc"] { --EventTile_irc_line-padding-block: 1px; - /* timestamps are links which shouldn't be underlined */ - > a { - text-decoration: none; - min-width: $MessageTimestamp_width; - } - display: flex; - flex-direction: row; align-items: flex-start; padding-top: 0; + > a { + text-decoration: none; /* timestamps are links which shouldn't be underlined */ + min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */ + } + > * { margin-right: var(--right-padding); } - .mx_EventTile_msgOption { - order: 5; - flex-shrink: 0; + .mx_EventTile_avatar, + .mx_EventTile_e2eIcon { + height: $irc-line-height; } - .mx_EventTile_line, - .mx_EventTile_reply { - display: flex; - flex-direction: column; - order: 3; - flex-grow: 1; - flex-shrink: 1; - min-width: 0; + .mx_EventTile_avatar, + .mx_DisambiguatedProfile, + .mx_EventTile_e2eIcon, + .mx_EventTile_msgOption { + flex-shrink: 0; } .mx_EventTile_avatar { order: 1; position: relative; - flex-shrink: 0; - height: $irc-line-height; display: flex; align-items: center; @@ -82,10 +79,9 @@ $irc-line-height: $font-18px; } .mx_DisambiguatedProfile { + order: 2; width: var(--name-width); margin-inline-end: 0; /* override mx_EventTile > * */ - order: 2; - flex-shrink: 0; > .mx_DisambiguatedProfile_displayName { width: 100%; @@ -96,9 +92,8 @@ $irc-line-height: $font-18px; > .mx_DisambiguatedProfile_mxid { visibility: collapse; - /* Override the inherited margin. */ - margin-left: 0; - padding: 0 5px; + margin-left: 0; /* Override the inherited margin. */ + padding: 0 5px; /* TODO: Use a spacing variable */ } &:hover { @@ -110,7 +105,7 @@ $irc-line-height: $font-18px; display: inline; background-color: $event-selected-color; border-radius: 8px 0 0 8px; - padding-right: 8px; + padding-right: $spacing-8; } > .mx_DisambiguatedProfile_mxid { @@ -123,12 +118,7 @@ $irc-line-height: $font-18px; .mx_EventTile_e2eIcon { padding: 0; - - flex-shrink: 0; flex-grow: 0; - - height: $font-18px; - background-position: center; } @@ -155,13 +145,34 @@ $irc-line-height: $font-18px; } } + .mx_EventTile_line, + .mx_EventTile_reply { + order: 3; + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + } + .mx_EventTile_reply { order: 4; } + .mx_EventTile_msgOption { + order: 5; + } + .mx_EditMessageComposer_buttons { position: relative; } + + &.mx_EventTile_info { + .mx_ViewSourceEvent, /* For hidden events */ + .mx_TextualEvent { + line-height: $irc-line-height; + } + } } .mx_EventTile_emote { @@ -171,17 +182,6 @@ $irc-line-height: $font-18px; } } - blockquote { - margin: 0; - } - - .mx_EventTile.mx_EventTile_info { - .mx_ViewSourceEvent, /* For hidden events */ - .mx_TextualEvent { - line-height: $irc-line-height; - } - } - .mx_ReplyChain { .mx_DisambiguatedProfile { width: unset;