Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve _IRCLayout.scss to remove space between the avatar and info text #8858

Closed
wants to merge 10 commits into from
Closed

Improve _IRCLayout.scss to remove space between the avatar and info text #8858

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
48db20a
Specify the data-layout=irc explicitly against :not([data-layout=bubb…
luixxiul Jun 17, 2022
3dfe83a
Include mx_EventTile_info in mx_EventTile[data-layout=irc]
luixxiul Jun 17, 2022
1881967
Move declarations directly under mx_EventTile[data-layout=irc] up, re…
luixxiul Jun 17, 2022
ac624b4
Tidy up mx_EventTile:hover etc.
luixxiul Jun 17, 2022
cbe4171
Use a spacing variable
luixxiul Jun 17, 2022
eedc52a
Sort by order properties
luixxiul Jun 17, 2022
5bbb8d3
Remove a redundant declaration
luixxiul Jul 7, 2022
07e82ff
Separate selectors
luixxiul Jul 7, 2022
8130210
Merge style declarations - flex-shrink
luixxiul Jul 12, 2022
d31d357
Remove a redundant declaration about padding
luixxiul Jul 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 49 additions & 46 deletions res/css/views/rooms/_IRCLayout.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,53 +19,47 @@ $irc-line-height: $font-18px;
.mx_IRCLayout {
--name-width: 70px;
--icon-width: 14px;
--right-padding: 5px;
--right-padding: 5px; // TODO: Use a spacing variable

line-height: $irc-line-height !important;

.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 {
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;

// Need to use important to override the js provided height and width values.
> .mx_BaseAvatar, > .mx_BaseAvatar > * {
> .mx_BaseAvatar,
> .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
Expand All @@ -77,7 +71,6 @@ $irc-line-height: $font-18px;
width: var(--name-width);
margin-inline-end: 0; // override mx_EventTile > *
order: 2;
flex-shrink: 0;

> .mx_DisambiguatedProfile_displayName {
width: 100%;
Expand All @@ -90,7 +83,7 @@ $irc-line-height: $font-18px;
visibility: collapse;
// Override the inherited margin.
margin-left: 0;
padding: 0 5px;
padding: 0 5px; // TODO: Use a spacing variable
}

&:hover {
Expand All @@ -102,7 +95,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 {
Expand All @@ -114,13 +107,7 @@ $irc-line-height: $font-18px;
}

.mx_EventTile_e2eIcon {
padding: 0;

flex-shrink: 0;
flex-grow: 0;

height: $font-18px;

background-position: center;
}

Expand All @@ -141,13 +128,43 @@ $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;
}
}

// Suppress highlight thing from the normal Layout.
&:hover.mx_EventTile_verified,
&:hover.mx_EventTile_unverified,
&:hover.mx_EventTile_unknown {
.mx_EventTile_line {
border-left: 0;
}
}
}

.mx_EventTile_emote {
Expand All @@ -160,20 +177,6 @@ $irc-line-height: $font-18px;
margin: 0;
}

.mx_EventTile.mx_EventTile_info {
.mx_ViewSourceEvent, // For hidden events
.mx_TextualEvent {
line-height: $irc-line-height;
}
}

// Suppress highlight thing from the normal Layout.
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: 0;
}

.mx_ReplyChain {
margin: 0;
.mx_DisambiguatedProfile {
Expand Down