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

res/css/_components.pcss

@@ -382,3 +382,6 @@
 @import "./voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss";
 @import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";
+
+/* Customization for SchildiChat */
+@import "./_sc/_customization.pcss";

res/css/_sc/README.md

@@ -0,0 +1,27 @@
+<!--
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+# `_sc` folder for customization
+
+When it comes to styling, we could just import a custom CSS file after the last existing `@import` on `res/css/_components.pcss` and put anything such as custom CSS declarations and variables in it to let them override the inherited values.
+
+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, which has been prone to visual regressions, should also greatly reduce the manpower to rebase, without being worried about introducing new visual regressions. Doing so will also make it easier to fix the regressions on our codebase which the upstream project has not fixed yet.
+
+Even if the properties are styled with `!important` by the upstream to cover regressions, they can be overridden by ones with `!important` on the CSS loaded 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.
+
+**Please do not forget to update `_customization.pcss`** if you have added other CSS files for customization. Please mind where to import the files as it affects how styles cascade. Never import them alphabetically.

res/css/_sc/_customization.pcss

@@ -0,0 +1,21 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* TODO: replace @import with @mixin once multiple CSS files are created for customization in order to keep styling modular */
+/* Please mind where to import CSS files as it affects how styles cascade. */
+
+@import "./views/rooms/_EventTile.pcss";
+@import "./views/rooms/_IRCLayout.pcss";

res/css/_sc/views/rooms/_EventTile.pcss

@@ -0,0 +1,33 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import "./_ReplyTile.pcss";
+
+@define-mixin sc_EventTile_content {
+    .mx_EventTile_content {
+        .markdown-body .mx_EventTile_collapsedCodeBlock code {
+            background-color: unset; /* Remove duplicated background color */
+        }
+    }
+}
+
+.mx_EventTile {
+    /* Fix */
+    @mixin mx_ReplyTile;
+
+    /* Customization */
+    @mixin sc_EventTile_content;
+}

res/css/_sc/views/rooms/_IRCLayout.pcss

@@ -0,0 +1,213 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@define-mixin mx_ReplyChain_disambiguatedProfile {
+    .mx_ReplyChain .mx_DisambiguatedProfile:hover {
+        overflow: hidden; /* Override "overflow: visible" specified by the upstream */
+    }
+}
+
+/* This mixin defines border radius for corders */
+@define-mixin sc_borderRadius {
+    .mx_DisambiguatedProfile {
+        border-start-start-radius: var(--sc-border-radius-8px, 3px);
+        border-end-start-radius: var(--sc-border-radius-8px, 3px);
+
+        /* This removes top left and bottom left corders from mx_EventTile_line, if just mx_DisambiguatedProfile is hovered. This enables the highlight line straight without being dent by those corners. Please note that they do appear if just mx_EventTile_line is hovered. */
+        &:hover ~ .mx_EventTile_line {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+}
+
+@define-mixin sc_DisambiguatedProfile_visibility {
+    /* On the upstream, appearance of mxid on disambiguatedProfile is managed by
+       "visibility" property. Since it renders mxid hiding it and pushes
+       displayName to the left side, we need to use display property instead. */
+    .mx_DisambiguatedProfile {
+        > .mx_DisambiguatedProfile_mxid {
+            display: none;
+        }
+
+        &:hover {
+            > .mx_DisambiguatedProfile_mxid {
+                display: unset;
+            }
+        }
+    }
+
+    .mx_ReplyChain_wrapper .mx_ReplyChain .mx_DisambiguatedProfile {
+        /* Stop mxid from moving avatar up on ReplyChain by resetting display
+           value "none" defined above, in order to make visibility declaration
+           effective */
+        /* Mind difference of avatar placement between on upstream's
+           mx_EventTile and mx_ReplyTile_sender */
+        > .mx_DisambiguatedProfile_mxid {
+            display: unset;
+        }
+    }
+}
+
+@define-mixin sc_DisambiguatedProfile {
+    .mx_DisambiguatedProfile {
+        /* Align elements to the end side */
+        display: block;
+        text-align: end;
+
+        /* Set $accent as default color, in order to make ellipsis rendered with the accent color (green, by default) */
+        color: $accent;
+
+        &:hover {
+            background-color: $event-selected-color;
+        }
+
+        > .mx_DisambiguatedProfile_displayName {
+            padding-inline-end: var(--right-padding); /* Add padding between displayName and mx_EventTile_line */
+        }
+
+        > .mx_DisambiguatedProfile_mxid {
+            color: $primary-content; /* Override the color specified above to make the mxid rendered as $primary-content (black, by default) */
+            padding-inline-start: 0; /* Remove the value specified on upstream since var(--right-padding) is specified for mx_DisambiguatedProfile_displayName above */
+        }
+    }
+
+    @mixin sc_DisambiguatedProfile_visibility;
+}
+
+@define-mixin sc_BaseAvatar {
+    /* Need to use important to override the js provided height and width values. */
+    .mx_BaseAvatar,
+    .mx_BaseAvatar > * {
+        height: $font-14px !important;
+        width: $font-14px !important;
+    }
+
+    /* Fill the pill with the avatar */
+    /* TODO: Adjust the size for IRC layout */
+    .mx_Pill {
+        .mx_BaseAvatar,
+        .mx_BaseAvatar > * {
+            height: $font-16px !important; /* override the value specified above */
+            width: $font-16px !important; /* override the value specified above */
+        }
+    }
+}
+
+@define-mixin sc_ReplyChain {
+    .mx_ReplyChain_wrapper {
+        @mixin mx_ReplyChain_disambiguatedProfile;
+
+        /* "In reply to" line */
+        blockquote:first-of-type {
+            padding-bottom: 2px; /* Add padding between "In reply to" line and the replied content */
+        }
+
+        .mx_ReplyChain {
+            .mx_ReplyTile {
+                padding-block: unset; /* Unset the inherited value */
+            }
+
+            .mx_DisambiguatedProfile {
+                --cpd-font-line-height-regular: var(--line-height); /* Fix the line-height value specified with Compound for IRC layout */
+            }
+        }
+    }
+}
+
+@define-mixin sc_EventTile {
+    .mx_EventTile {
+        &[data-layout="irc"] {
+            * {
+                line-height: var(--line-height); /* Unify the line-height value for IRC layout. The value is applied by default to everything under data-layout="irc", enabling declarations with more specificity to override the value as this is not enforced with "!important" */
+            }
+
+            .mx_EventTile_line {
+                .mx_EventTile_e2eIcon,
+                .mx_TextualEvent,
+                .mx_ViewSourceEvent,
+                .mx_MTextBody {
+                    /* Cancel the padding specified by the upstream as it is taken care of by padding var(--EventTile_irc_line-padding-block) */
+                    padding: unset;
+                }
+            }
+
+            .mx_EventTile_bigEmoji {
+                /* Double the line height */
+                --big-emoji-font-size: calc(var(--line-height) * 2);
+                --big-emoji-line-height: calc(var(--line-height) * 2);
+                line-height: calc(var(--line-height) * 2);
+
+                .mx_Emoji {
+                    line-height: unset;
+                }
+            }
+
+            .mx_EventTile_content {
+                .markdown-body {
+                    code:not(pre *) {
+                        padding-block: 0; /* Remove block padding to avoid line height overflow */
+                    }
+                }
+            }
+
+            > * {
+                padding-block: var(--EventTile_irc_line-padding-block); /* Unify block padding value of anything directly under mx_EventTile */
+            }
+
+            @mixin sc_DisambiguatedProfile;
+            @mixin sc_BaseAvatar;
+            @mixin sc_borderRadius;
+            @mixin sc_ReplyChain;
+        }
+    }
+}
+
+@define-mixin sc_GenericEventListSummary {
+    .mx_GenericEventListSummary {
+        &[data-layout="irc"] {
+            .mx_GenericEventListSummary_avatars {
+                line-height: 14px; /* Same size as avatar height */
+
+                > * {
+                    line-height: inherit; /* Same size as avatar height */
+                }
+            }
+
+            .mx_EventTile_line .mx_RedactedBody {
+                line-height: var(--line-height); /* Unify the line-height value for IRC layout by overwriting the line-height value specified on upstream _EventTile.pcss */
+
+                &::before {
+                    height: var(--line-height); /* Set the line height value to the trash icon */
+                    top: 0px; /* Remove the value specified by the upstream as this is no longer needed */
+                }
+            }
+
+            @mixin sc_BaseAvatar;
+        }
+    }
+}
+
+.mx_IRCLayout {
+    --cpd-font-line-height-regular: var(--irc-line-height); /* Unify the line-height value for IRC layout */
+
+    * {
+        line-height: var(--line-height); /* Unify the line-height value for IRC layout. The value is applied by default to everything under data-layout="irc", enabling declarations with more specificity to override the value as this is not enforced with "!important" */
+    }
+
+    @mixin sc_EventTile;
+    @mixin sc_GenericEventListSummary;
+}

res/css/_sc/views/rooms/_ReplyTile.pcss

@@ -0,0 +1,23 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@define-mixin mx_ReplyTile {
+    .mx_ReplyTile {
+        &.mx_ReplyTile_inline > a {
+            align-items: flex-start; /* Fix avatar's position on emote in ReplyTile */
+        }
+    }
+}

res/css/rethemendex.sh

@@ -8,8 +8,17 @@ cd `dirname $0`
     # we used to have exclude /themes from the find at this point.
     # as themes are no longer a spurious subdirectory of css/, we don't
     # need it any more.
-    find . -iname _\*.pcss | fgrep -v _components.pcss | LC_ALL=C sort |
+    #
+    # Exclude "_sc" folder dedicated for our custom CSS files from being included
+    # to alphabetic sorting which causes cascading mess. Please note that CSS files
+    # inside the folder are imported at the end.
+    find . -iname _\*.pcss -not -path "./_sc/*" | fgrep -v _components.pcss | LC_ALL=C sort |
         while read i; do
             echo "@import \"$i\";"
         done
+
+        # Import the CSS file dedicated for customization to let our declarations
+        # inside it override the styles specified by the upstream project.
+        echo "\n/* Customization for SchildiChat */";
+        echo "@import \"./_sc/_customization.pcss\";";
 } > _components.pcss