[PoC] Fix style inconsistencies among informative events on IRC and modern layouts

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/_customization.pcss

@@ -0,0 +1,19 @@
+/*
+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 "./feature-improvement/consistency__TextEvent/index.pcss";
+
+@mixin consistency__TextEvent;

res/css/_sc/feature-improvement/consistency__TextEvent/index.pcss

@@ -0,0 +1,34 @@
+/*
+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.
+*/
+
+/* Fix upstream's style inconsistencies among text events and mx_DecryptionFailureBody */
+/* See https://github.com/SchildiChat/schildichat-desktop/issues/240 */
+
+@import "./views/rooms/_EventTile.pcss";
+@import "./views/messages/_DecryptionFailureBody.pcss";
+@import "./views/messages/_DisambiguatedProfile.pcss";
+
+@define-mixin consistency__TextEvent {
+    /* Applied to IRC, modern layout, and the right panel */
+    /* Not applied to Bubble layout, which has its own class name with sc_ */
+    :is(.mx_RoomView_body:where([data-layout="irc"], [data-layout="group"]), .mx_RightPanel) {
+        @mixin DisambiguatedProfile;
+        @mixin EventTile_line_M;
+        @mixin EventTile_line_color;
+        @mixin EventTile_line_font;
+        @mixin DecryptionFailureBody;
+    }
+}

res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_DecryptionFailureBody.pcss

@@ -0,0 +1,24 @@
+/*
+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.
+*/
+
+/* Since mx_DecryptionFailureBody is neither in mx_EventTile_info nor
+   mx_GenericEventListSummary, it requires rules which style it directly.  */
+@define-mixin DecryptionFailureBody {
+    .mx_DecryptionFailureBody {
+        color: $tertiary-content;
+        font: var(--cpd-font-body-sm-regular);
+    }
+}

res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_DisambiguatedProfile.pcss

@@ -0,0 +1,24 @@
+/*
+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 DisambiguatedProfile {
+    .mx_DisambiguatedProfile {
+        .mx_DisambiguatedProfile_mxid {
+            opacity: unset; /* Match mx_TextualEvent */
+            color: $tertiary-content;
+        }
+    }
+}

res/css/_sc/feature-improvement/consistency__TextEvent/views/rooms/_EventTile.pcss

@@ -0,0 +1,79 @@
+/*
+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.
+*/
+
+/* Specify text color with color property instead of opacity.
+   Note this mixin is applied to GELS as well. */
+@define-mixin EventTile_line_color {
+    /* Use :is to win against the specificity of
+       mx_EventTile_content.mx_ViewSourceEvent for example */
+    :is(.mx_EventTile_info, .mx_GenericEventListSummary) {
+        /* Get rid of opacity values for coloring from CSS files as it is very
+           confusing and makes it difficult to maintain consistency.
+           See: https://github.com/SchildiChat/schildichat-desktop/issues/241 */
+        .mx_EventTile_line * {
+            opacity: unset;
+        }
+
+        /* Then specify the color */
+        .mx_EventTile_line {
+            color: $tertiary-content;
+
+            /* Set the same color to the element directly below it */
+            > * {
+                color: $tertiary-content;
+            }
+
+            /* Revert the color value of call event */
+            .mx_CallEvent_wrapper {
+                color: initial;
+            }
+        }
+    }
+}
+
+/* Specify font for consistency */
+@define-mixin EventTile_line_font {
+    :is(.mx_EventTile_info, .mx_GenericEventListSummary) {
+        --font: var(--cpd-font-body-sm-regular); /* Replace with js when needed */
+
+        .mx_EventTile_line {
+            /* Set the same font to the element directly below it. This way,
+               it is possible to avoid applying the font value to elements
+               inside it, such as code element in mx_ViewSourceEvent. */
+            > * {
+                font: var(--font);
+            }
+        }
+    }
+}
+
+/* Specify text color with color property instead of opacity for properties
+   which start with mx_M */
+@define-mixin EventTile_line_M {
+    .mx_EventTile_line {
+        [class^="mx_M"] {
+            opacity: unset;
+        }
+
+        .mx_MNoticeBody {
+            /* See #fdroid:f-droid.org/$jrVZxdvY2NqNYvXigQ_sTZNeOadpOuFGFsraHy8GR3Y for an example */
+            .mx_EventTile_body.markdown-body {
+                /* !important flag is required as it is used on the upstream */
+                color: $tertiary-content !important;
+            }
+        }
+    }
+}