nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix styling issue when using EW modules (#31533)

Browse Source 
* style: move compound loading order

* fix: spotlight fiting

* fix: don't use internal compound css var in settings subsection

* fix: don't use internaal compound css var in read receipt group

* fix: add important to font settings on body element

* fix: remove play pause button color and fix padding

This color wasn't apply because this PR. Removing to avoid visual
regression

* fix: add important to form help message override in preference settings

* fix: override compound in space panel buttons

* fix: layout of forgot password

* fix: height of encryption tab

* fix: widget avatar border radius
This commit is contained in:
Florian Duros
2025-12-19 11:08:23 +01:00
committed by GitHub
parent 2a669d492d
commit e15f80c371
20 changed files with 44 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
res/css/_common.pcss
View File

@@ -9,8 +9,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
@import url("@vector-im/compound-web/dist/style.css");
@import "./_font-sizes.pcss";
@import "./_animations.pcss";
@import "./_spacing.pcss";
@@ -85,8 +83,9 @@ html {
}
body {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
/* !important because compound overrides these font settings for body */
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
/**
* We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
* We need to tweak the `letter-spacing` property and doing so, disables by
@@ -97,7 +96,7 @@ body {
font-feature-settings:
"kern" 1,
"liga" 1,
"calt" 1;
"calt" 1 !important;
background-color: $background;
color: $primary-content;

3
res/css/_compound.pcss Normal file
View File

@@ -0,0 +1,3 @@
/* Modules bundled with compound apply compound lastly. In order to catch issue due to css class ordering, we put compound at the end */
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
@import url("@vector-im/compound-web/dist/style.css");

5
res/css/components/views/settings/shared/_SettingsSubsection.pcss
View File

@@ -20,9 +20,10 @@ Please see LICENSE files in the repository root for full details.
/**
* The gap between subsections is 32px and inside the subsection is 24px.
* The separator separates the subsections, so it should have the same gap as the subsections.
* We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections.
* We add 12px and the separator spacing (8px) to the top margin to make the separator visually centered between the subsections.
* !important because it's overriding compound margin.
*/
margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing));
margin-top: var(--cpd-space-5x) !important;
}
}

2
res/css/rethemendex.sh
View File

@@ -8,7 +8,7 @@ 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 |
find . -iname _\*.pcss | fgrep -v _components.pcss | fgrep -v _compound.pcss | LC_ALL=C sort |
while read i; do
echo "@import \"$i\";"
done

6
res/css/structures/_QuickSettingsButton.pcss
View File

@@ -7,7 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_QuickSettingsButton {
border-radius: 8px;
/* !important override compound */
border-radius: 8px !important;
margin: 12px auto 12px;
svg {
@@ -57,7 +58,8 @@ Please see LICENSE files in the repository root for full details.
}
& .mx_QuickSettingsButton_label {
color: $secondary-content;
/* !important override compound */
color: $secondary-content !important;
}
}
}

9
res/css/structures/_ThreadsActivityCentre.pcss
View File

@@ -11,7 +11,8 @@
}
.mx_ThreadsActivityCentreButton {
border-radius: 8px;
/* !important override compound */
border-radius: 8px !important;
margin: 18px auto auto auto;
&.expanded {
@@ -50,14 +51,16 @@
}
& .mx_ThreadsActivityCentreButton_Text {
color: $secondary-content;
/* !important override compound */
color: $secondary-content !important;
}
}
&:not(.expanded) {
&:hover,
&:hover .mx_ThreadsActivityCentreButton_Icon {
background-color: $quaternary-content;
/* !important override compound */
background-color: $quaternary-content !important;
fill: $primary-content;
}
}

4
res/css/views/audio_messages/_PlayPauseButton.pcss
View File

@@ -14,11 +14,11 @@ Please see LICENSE files in the repository root for full details.
min-height: 32px; /* for when the button is used in a flexbox */
border-radius: 32px;
background-color: $system;
padding: var(--cpd-space-1-5x);
/* !important override compound icon button */
padding: var(--cpd-space-1-5x) !important;
box-sizing: border-box;
svg {
color: $secondary-content;
width: 20px;
height: 20px;
}

3
res/css/views/avatars/_WidgetAvatar.pcss
View File

@@ -7,5 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_WidgetAvatar {
border-radius: 4px;
/* !important override compound avatar */
border-radius: 4px !important;
}

7
res/css/views/dialogs/_SpotlightDialog.pcss
View File

@@ -13,11 +13,12 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Dialog {
width: fit-content;
border-radius: 8px;
/* !important because it's overriding compound */
width: fit-content !important;
border-radius: 8px !important;
height: 60% !important;
overflow-y: initial;
position: relative;
height: 60%;
padding: 0;
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */

3
res/css/views/dialogs/_VerifyEMailDialog.pcss
View File

@@ -15,7 +15,8 @@ Please see LICENSE files in the repository root for full details.
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
text-align: center;
width: 485px;
/* !important override compound */
width: 485px !important;
h1 {
font-size: $font-24px;

4
res/css/views/rooms/_ReadReceiptGroup.pcss
View File

@@ -44,8 +44,8 @@ Please see LICENSE files in the repository root for full details.
/* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
box-sizing: content-box;
border: 1px solid $background !important;
/* Reset the line height as we are no longer box-sizing border-box */
line-height: var(--cpd-avatar-size);
/* Reset the line height as we are no longer box-sizing border-box. 14px because avatar is set at 14px in component */
line-height: 14px;
position: absolute;
will-change: left, top;
transition:

3
res/css/views/settings/encryption/_AdvancedPanel.pcss
View File

@@ -9,7 +9,8 @@
.mx_OtherSettings {
display: flex;
flex-direction: column;
gap: var(--cpd-space-6x);
/* !important override compound form */
gap: var(--cpd-space-6x) !important;
width: 100%;
align-items: start;

3
res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss
View File

@@ -14,7 +14,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MediaPreviewAccountSetting_RadioHelp {
margin-top: 0;
/* !important because it's overriding compound help message */
margin-top: 0 !important;
margin-bottom: var(--cpd-space-1x);
}

1
res/themes/dark-custom/css/dark-custom.pcss
View File

@@ -5,4 +5,5 @@
@import "../../legacy-dark/css/_legacy-dark.pcss";
@import "../../light-custom/css/_custom.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("github-markdown-css/github-markdown-dark.css");

1
res/themes/dark/css/dark.pcss
View File

@@ -5,5 +5,6 @@
@import "_dark.pcss";
@import "../../light/css/_mods.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("highlight.js/styles/atom-one-dark.min.css");
@import url("github-markdown-css/github-markdown-dark.css");

1
res/themes/legacy-dark/css/legacy-dark.pcss
View File

@@ -4,5 +4,6 @@
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_legacy-dark.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("highlight.js/styles/atom-one-dark.min.css");
@import url("github-markdown-css/github-markdown-dark.css");

1
res/themes/legacy-light/css/legacy-light.pcss
View File

@@ -3,5 +3,6 @@
@import "_fonts.pcss";
@import "_legacy-light.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");

1
res/themes/light-custom/css/light-custom.pcss
View File

@@ -4,4 +4,5 @@
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_custom.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("github-markdown-css/github-markdown-light.css");

1
res/themes/light-high-contrast/css/light-high-contrast.pcss
View File

@@ -5,5 +5,6 @@
@import "_light-high-contrast.pcss";
@import "../../light/css/_mods.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");

1
res/themes/light/css/light.pcss
View File

@@ -4,5 +4,6 @@
@import "_light.pcss";
@import "_mods.pcss";
@import "../../../../res/css/_components.pcss";
@import "../../../../res/css/_compound.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");