Fix IRC layout, adding a dedicated CSS file for customization and editing rethemendex.sh

[luixxiul]

This PR intends to achieve these things:

1. Create a dedicated CSS for customization, making it semi-modular based on @mixin
2. Align various elements on IRC layout by fixing line-height etc.
3. Fix visual bugs not specific to IRC layout

--

(1)

When it comes to styling, basically we could just import a custom CSS file after the last existing @import on _components.pcss and put every custom stuff like CSS declarations and variables in it to let them override the inherited values in the way which the concept of CSS expects. This commit also takes advantage of PostCSS to make our style codebase modular by creating files, on which only mixins are defined to be used elsewhere. In order to achieve it, I have edited rethemendex.sh to have it exclude CSS files under _sc from alphabetical sorting and import _sc/_customization.pcss at the end.

The obvious merit of doing so is that it will remove the burden of applying customization directly on the upstream CSS codebase fixing conflicts. Separating customized styles from the upstream codebase should also greatly reduce the manpower to rebase, without being worried about possible regressions, avoding the tech debt of the upstream project which might not be solved. Doing so will also make it easier to fix the regressions on our codebase which the upstream project has not fixed yet. Additionally, it will make contributing easier for those who would like to contribute but are not familiar with the style codebase for SchildiChat, like me. Using @mixin extensively might be opinionated, but this way it should be possible to maintain and develop style rules as modular, as the upstream project has probably hoped somewhat.

Even if properties will be styled with !important by the upstream to cover a new regression, they will be able to be overridden by ones with !important on the CSS files imported later than that. It is better than importing CSS styles and leaving them vulnerable to be accidentally overridden by something imported later than that.

The way in which the upstream project generates concatenated CSS files has been very stable (essentially same since at least 2018. See: https://github.com/matrix-org/matrix-react-sdk/commits/develop/res/css/rethemendex.sh), so we should be able to depend on the current way how it works for a reasonable time.

--

(2)

Based on that, this PR also intends to fix and improve IRC layout, by fixing the wrong Compound implementation introduced by the upstream project.

For reference, I have voluntarily worked on IRC layout to improve it 2022-2023 as a contributor, and most of the style rules I have worked on still remain there and in effect. See:

• https://github.com/matrix-org/matrix-react-sdk/blame/a7f8e82d165f3da128cb754639612a60527dcb71/res/css/views/rooms/_EventTile.pcss#L275-L472
• https://github.com/matrix-org/matrix-react-sdk/commits/master/res/css/views/rooms/_IRCLayout.pcss

Nobody at the upstream project does not seem to have fixed the regressions introduced by Compound's wrong implementation, and this PR should fix those issues earlier than Element will eventually.

For IRC layout, this PR intends to fix these regressions inherited from the upstream:

• Specify the same line-height to any elements on mx_IRClayout by default, letting declarations with more specificity override the value.
• Align displayName to the right side
• Make big emoji 2x size of the line-height value
• Add corner settings to mx_EventTile on IRC layout
• Apply 14x14 avatar size to EventTile and GELS
• Align avatar inside ReplyChain (ReplyTile)

--

(3)

This PR also intends to fix bugs not specific to IRC layout:

• Cancel a duplicated background color value on code snippet area
• Fix avatar's position on emote in ReplyTile

--

	Before	After
Message Panel	display names are aligned to left 👎	display names are aligned to right 👍
Avatar and displayName	Not aligned 👎	Aligned well 👍
Line highlight on hover	displayName is slightly larger than EventTile 👎	displayName height is same as EventTile 👍
Alignment	Aligned well 👍	Aligned well 👍
Avatar on ReplyChain (size and alignment)	Not aligned at all (16x16) ❌	Aligned (14x14) 👍
Alignment	Aligned well 👍	Aligned well 👍
Line height on reply tile	Inconsistent ❌	Consistent 👍
Hidden event via Devtools	Not aligned at all ❌	Aligned well 👍
Hidden event via Devtools	Not aligned ❌	Aligned well 👍
Green ellipsis	Ellipsis is rendered in black 👎	Ellipsis is rendered in green 👍
With mxId	mxID is not aligned with elements around it 👎	mxID is aligned with displayName 👍 On ReplyTile
Profile on ReplyTile	overflow ❌	Fit well 👍
Big emoji		2x size of line-height

The other bugs which this PR intends to fix:

	Before	After
Duplicated background color on code snippet area
Avatar's position on emote

Before:

before.webm

After:

after.webm

---

• I agree to release my changes under this project's license

[luixxiul]

Following the reasonable suggestion here https://matrix.to/#/!eSTlitQAfqxWWEHMFD:matrix.org/$ezvD9S1tokciSKpyxoSQEv2npu7Y0_cpYAaGR2mJwJQ?via=supercable.onl&via=matrix.org, I will split this PR into two; one for fixing IRC layout and the other for adding a dedicated CSS file for customization and editing rethemendex.sh.

Created the PR: #23