Add _EventTile.pcss for setting text color in general way

SchildiChat · Mar 4, 2024 · c59eb04 · c59eb04
1 parent f6115b8
commit c59eb04
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/index.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/index.pcss
@@ -17,11 +17,13 @@ limitations under the License.
 /* Fix upstream's style inconsistencies among mx_TextualEvent, mx_RedactedBody, 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/_TextualEvent.pcss";
 @import "./views/messages/_RedactedBody.pcss";
 
 @define-mixin consistency__TextEvent {
+    @mixin EventTile_color;
     @mixin DecryptionFailureBody;
     @mixin TextualEvent;
     @mixin RedactedBody;

diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_RedactedBody.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_RedactedBody.pcss
@@ -16,7 +16,6 @@ limitations under the License.
 
 @define-mixin RedactedBody {
     .mx_RedactedBody {
-        color: $tertiary-content;
         font: var(--cpd-font-body-sm-regular);
     }
 }
diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_TextualEvent.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_TextualEvent.pcss
@@ -16,8 +16,6 @@ limitations under the License.
 
 @define-mixin TextualEvent {
     .mx_TextualEvent {
-        opacity: unset; /* Unset as it is very confusing to use opacity value to set text color */
-        color: $tertiary-content;
         font: var(--cpd-font-body-sm-regular);
     }
 }
diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/views/rooms/_EventTile.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/views/rooms/_EventTile.pcss
@@ -0,0 +1,43 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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_color {
+    :where(.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;
+            }
+        }
+    }
+}