diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 12d2457fc5d..8ddcf474cf8 100644 --- a/res/css/_components.pcss +++ b/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"; diff --git a/res/css/_sc/_customization.pcss b/res/css/_sc/_customization.pcss new file mode 100644 index 00000000000..17edfd79db2 --- /dev/null +++ b/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; diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/index.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/index.pcss new file mode 100644 index 00000000000..a09349b8fb9 --- /dev/null +++ b/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; + } +} diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_DecryptionFailureBody.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_DecryptionFailureBody.pcss new file mode 100644 index 00000000000..82e6af7bb4e --- /dev/null +++ b/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); + } +} diff --git a/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_DisambiguatedProfile.pcss b/res/css/_sc/feature-improvement/consistency__TextEvent/views/messages/_DisambiguatedProfile.pcss new file mode 100644 index 00000000000..8b2c3b1c8f3 --- /dev/null +++ b/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; + } + } +} 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 new file mode 100644 index 00000000000..5f8ddb7b4d7 --- /dev/null +++ b/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; + } + } + } +}