Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compound Typography pass (#11103)

Browse Source 
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* Delete unused or incorrect - sass variables

* Typography pass

* Deprecate _font-weights.pcss and use Compound instead

* lint fix

* Fix snapshot

* Fix typography pass feedback

* Remove unwanted e2e test

cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties

* lintfix

* Migration script for baseFontSize

* Updates after design review

* Update font scaling panel to use min/max size

* Fix custom font

* Fix font slider e2e test

* Update custom font

* Update new baseFontSizeV2

* Disambiguate heading props

* Fix appearance test

* change max font size

* fix e2ee test

* fix tests

* test baseFontSize migration code

* typescript strict

* Migrate baseFontSize account setting

* Change assertion for font size

* Fix font size controller test
This commit is contained in:
Germain 2023-06-29 11:30:25 +01:00 committed by GitHub
parent ce479c5774
commit 9c7d935aae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
199 changed files with 606 additions and 608 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/e2e/right-panel/file-panel.spec.ts
View File

@ -238,22 +238,6 @@ describe("FilePanel", () => {
});
});
});
it("should not add inline padding to a tile when it is selected with right click", () => {
// Upload a file
uploadFile("cypress/fixtures/1sec.ogg");
cy.get(".mx_FilePanel .mx_RoomView_MessageList").within(() => {
// Wait until the spinner of the audio player vanishes
cy.get(".mx_InlineSpinner").should("not.exist");
// Right click the uploaded file to select the tile
cy.get(".mx_EventTile").rightclick();
// Assert that inline padding is not applied
cy.get(".mx_EventTile_selected .mx_EventTile_line").should("have.css", "padding-inline", "0px");
});
});
});
describe("download", () => {

12
cypress/e2e/settings/appearance-user-settings-tab.spec.ts
View File

@ -122,9 +122,10 @@ describe("Appearance user settings tab", () => {
// Click the left position of the slider
cy.get("input").realClick({ position: "left" });
const MIN_FONT_SIZE = 11;
// Assert that the smallest font size is selected
cy.get("input[value='13']").should("exist");
cy.get("output .mx_Slider_selection_label").findByText("13");
cy.get(`input[value='${MIN_FONT_SIZE}']`).should("exist");
cy.get("output .mx_Slider_selection_label").findByText(MIN_FONT_SIZE);
});
cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - smallest (13)", {
@ -135,12 +136,13 @@ describe("Appearance user settings tab", () => {
// Click the right position of the slider
cy.get("input").realClick({ position: "right" });
const MAX_FONT_SIZE = 21;
// Assert that the largest font size is selected
cy.get("input[value='18']").should("exist");
cy.get("output .mx_Slider_selection_label").findByText("18");
cy.get(`input[value='${MAX_FONT_SIZE}']`).should("exist");
cy.get("output .mx_Slider_selection_label").findByText(MAX_FONT_SIZE);
});
cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (18)", {
cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (21)", {
widths: [486],
});
});

14
cypress/e2e/timeline/timeline.spec.ts
View File

@ -204,13 +204,6 @@ describe("Timeline", () => {
cy.findByRole("button", { name: "collapse" }).should("exist");
});
// Check the height of expanded GELS line
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should(
"have.css",
"line-height",
"18px", // var(--irc-line-height): $font-18px (See: _IRCLayout.pcss)
);
cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS });
});
@ -238,13 +231,6 @@ describe("Timeline", () => {
cy.findByRole("button", { name: "collapse" }).should("exist");
});
// Check the height of expanded GELS line
cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should(
"have.css",
"line-height",
"22px", // $font-22px (See: _GenericEventListSummary.pcss)
);
cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS });
});

34
res/css/_common.pcss
View File

@ -2,7 +2,7 @@
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2017 - 2019 New Vector Ltd
Copyright 2019 - 2021 The Matrix.org Foundation C.I.C
Copyright 2019 - 2023 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.
@ -19,7 +19,6 @@ limitations under the License.
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
@import "./_font-sizes.pcss";
@import "./_font-weights.pcss";
@import "./_animations.pcss";
@import "./_spacing.pcss";
@import url("maplibre-gl/dist/maplibre-gl.css");
@ -77,8 +76,9 @@ html {
}
body {
font-family: $font-family;
font-size: $font-15px;
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
background-color: $background;
color: $primary-content;
border: 0px;
@ -119,8 +119,8 @@ b {
h2 {
color: $primary-content;
font-weight: 400;
font-size: $font-18px;
font: var(--cpd-font-heading-lg-regular);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
margin-top: 16px;
margin-bottom: 16px;
}
@ -134,10 +134,9 @@ a:visited {
input[type="text"],
input[type="search"],
input[type="password"] {
font-family: inherit;
padding: 9px;
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
min-width: 0;
}
@ -337,11 +336,9 @@ legend {
/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
.markdown-body {
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
font-size: $font-14px;
pre,
code {
@ -498,7 +495,7 @@ legend {
.mx_Dialog_content {
margin: 24px 0 68px;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
word-wrap: break-word;
}
@ -535,8 +532,7 @@ legend {
vertical-align: middle;
border: 0px;
border-radius: 8px;
font-family: $font-family;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $button-fg-color;
background-color: $accent;
width: auto;
@ -570,7 +566,7 @@ legend {
margin-bottom: 5px;
/* flip colours for the secondary ones */
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
border: 1px solid $accent;
color: $accent;
background-color: $button-secondary-bg-color;
@ -758,7 +754,7 @@ legend {
@define-mixin LegacyCallButton {
box-sizing: border-box;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
@ -780,7 +776,7 @@ legend {
@define-mixin ThreadRepliesAmount {
color: $secondary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;

1
res/css/_components.pcss
View File

@ -2,7 +2,6 @@
@import "./_animations.pcss";
@import "./_common.pcss";
@import "./_font-sizes.pcss";
@import "./_font-weights.pcss";
@import "./_spacing.pcss";
@import "./components/views/beacon/_BeaconListItem.pcss";
@import "./components/views/beacon/_BeaconStatus.pcss";

88
res/css/_font-sizes.pcss
View File

@ -21,63 +21,33 @@ limitations under the License.
* "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS
* easier.
*
* That means that, slightly confusingly, `$font-10px` is only *actually* 10px at the default font size: at a base
* `font-size` of 15, it is actually 15px.
*/
$font-1px: 0.1rem;
$font-1-5px: 0.15rem;
$font-2px: 0.2rem;
$font-3px: 0.3rem;
$font-4px: 0.4rem;
$font-5px: 0.5rem;
$font-6px: 0.6rem;
$font-7px: 0.7rem;
$font-8px: 0.8rem;
$font-9px: 0.9rem;
$font-10px: 1rem;
$font-10-4px: 1.04rem;
$font-11px: 1.1rem;
$font-12px: 1.2rem;
$font-13px: 1.3rem;
$font-14px: 1.4rem;
$font-15px: 1.5rem;
$font-16px: 1.6rem;
$font-17px: 1.7rem;
$font-18px: 1.8rem;
$font-19px: 1.9rem;
$font-20px: 2rem;
$font-21px: 2.1rem;
$font-22px: 2.2rem;
$font-23px: 2.3rem;
$font-24px: 2.4rem;
$font-25px: 2.5rem;
$font-26px: 2.6rem;
$font-27px: 2.7rem;
$font-28px: 2.8rem;
$font-29px: 2.9rem;
$font-30px: 3rem;
$font-31px: 3.1rem;
$font-32px: 3.2rem;
$font-33px: 3.3rem;
$font-34px: 3.4rem;
$font-35px: 3.5rem;
$font-36px: 3.6rem;
$font-37px: 3.7rem;
$font-38px: 3.8rem;
$font-39px: 3.9rem;
$font-40px: 4rem;
$font-41px: 4.1rem;
$font-42px: 4.2rem;
$font-43px: 4.3rem;
$font-44px: 4.4rem;
$font-45px: 4.5rem;
$font-46px: 4.6rem;
$font-47px: 4.7rem;
$font-48px: 4.8rem;
$font-49px: 4.9rem;
$font-50px: 5rem;
$font-51px: 5.1rem;
$font-52px: 5.2rem;
$font-78px: 7.8rem;
$font-88px: 8.8rem;
$font-400px: 40rem;
$font-1px: 0.0625rem;
$font-8px: 0.5rem;
$font-9px: 0.5625rem;
$font-10px: 0.625rem;
$font-10-4px: 0.6275rem;
$font-11px: 0.6875rem;
$font-12px: 0.75rem;
$font-13px: 0.8125rem;
$font-14px: 0.875rem;
$font-15px: 0.9375rem;
$font-16px: 1rem;
$font-17px: 1.0625rem;
$font-18px: 1.125rem;
$font-20px: 1.25rem;
$font-22px: 1.375rem;
$font-23px: 1.4375rem;
$font-24px: 1.5rem;
$font-25px: 1.5625rem;
$font-26px: 1.625rem;
$font-28px: 1.75rem;
$font-29px: 1.8125rem;
$font-30px: 1.875rem;
$font-32px: 2rem;
$font-34px: 2.125rem;
$font-35px: 2.1875rem;
$font-39px: 2.4375rem;
$font-42px: 2.625rem;
$font-44px: 2.75rem;
$font-48px: 3rem;

20
res/css/_font-weights.pcss
View File

@ -1,20 +0,0 @@
/*
Copyright 2020 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.
*/
:root {
--font-normal: 400;
--font-semi-bold: 600;
}

2
res/css/components/views/beacon/_BeaconListItem.pcss
View File

@ -55,7 +55,7 @@ limitations under the License.
margin-bottom: $spacing-8;
.mx_BeaconStatus_label {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

2
res/css/components/views/beacon/_DialogSidebar.pcss
View File

@ -57,6 +57,6 @@ limitations under the License.
}
.mx_DialogSidebar_noResults {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
}

2
res/css/components/views/beacon/_OwnBeaconStatus.pcss
View File

@ -27,5 +27,5 @@ limitations under the License.
.mx_OwnBeaconStatus_destructiveButton {
/* override button link_inline styles */
color: $alert !important;
font-weight: var(--font-semi-bold) !important;
font-weight: var(--cpd-font-weight-semibold) !important;
}

4
res/css/components/views/elements/_AppPermission.pcss
View File

@ -19,7 +19,9 @@ limitations under the License.
font-size: $font-12px;
width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
overflow-y: scroll;
.mx_AppPermission_bolder {
font-weight: var(--cpd-font-weight-semibold);
}
.mx_AppPermission_content {
margin-block: auto; /* place at the center */

2
res/css/components/views/elements/_FilterDropdown.pcss
View File

@ -72,7 +72,7 @@ limitations under the License.
}
.mx_FilterDropdown_optionLabel {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
display: block;
}

2
res/css/components/views/elements/_FilterTabGroup.pcss
View File

@ -38,7 +38,7 @@ limitations under the License.
&:checked + span {
color: $accent;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
// underline
box-shadow: 0 1.5px 0 0 currentColor;
}

2
res/css/components/views/pips/_WidgetPip.pcss
View File

@ -42,7 +42,7 @@ limitations under the License.
padding: $spacing-12;
display: flex;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

2
res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
View File

@ -65,7 +65,7 @@ limitations under the License.
}
.mx_DeviceSecurityCard_description {
margin: 0;
font-size: $font-12px;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
}

2
res/css/components/views/spaces/_QuickThemeSwitcher.pcss
View File

@ -30,7 +30,7 @@ limitations under the License.
}
.mx_QuickThemeSwitcher_heading {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;

2
res/css/components/views/typography/_Caption.pcss
View File

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_Caption {
font-size: $font-12px;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
&.mx_Caption_error {

1
res/css/structures/_ContextualMenu.pcss
View File

@ -35,7 +35,6 @@ limitations under the License.
background-color: $menu-bg-color;
color: $primary-content;
position: absolute;
font-size: $font-14px;
z-index: 5001;
width: max-content;
}

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

@ -70,11 +70,11 @@ limitations under the License.
padding-top: $spacing-8;
display: flex;
justify-content: space-between;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $event-timestamp-color;
.mx_MImageBody_size {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
text-align: right;
white-space: nowrap;
}
@ -100,7 +100,7 @@ limitations under the License.
.mx_MessageTimestamp {
text-align: right;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
}
}
}

2
res/css/structures/_GenericDropdownMenu.pcss
View File

@ -92,7 +92,7 @@ limitations under the License.
span:first-child {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

8
res/css/structures/_HomePage.pcss
View File

@ -37,15 +37,15 @@ limitations under the License.
}
h1 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
line-height: $font-44px;
line-height: 1.375;
margin-bottom: 4px;
}
h2 {
margin-top: 4px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-25px;
color: $muted-fg-color;
@ -73,7 +73,7 @@ limitations under the License.
word-break: break-word;
box-sizing: border-box;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-20px;
color: #fff; /* on all themes */

2
res/css/structures/_LargeLoader.pcss
View File

@ -29,7 +29,7 @@ limitations under the License.
.mx_LargeLoader_text {
font-size: 24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding: 0 16px;
position: relative;
text-align: center;

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

@ -59,7 +59,7 @@ limitations under the License.
contain: unset; /* let the dropdown paint beyond the context menu */
> div > h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
@ -72,7 +72,7 @@ limitations under the License.
}
> div > h4 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
text-transform: uppercase;

4
res/css/structures/_RightPanel.pcss
View File

@ -83,7 +83,7 @@ limitations under the License.
h2,
p {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
}
&::before {
@ -103,7 +103,7 @@ limitations under the License.
.mx_RightPanel_scopeHeader {
margin: 24px;
text-align: center;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;

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

@ -43,15 +43,13 @@ limitations under the License.
}
.mx_RoomSearch_spotlightTriggerText {
font-size: $font-12px;
line-height: $font-16px;
color: $tertiary-content;
flex: 1;
min-width: 0;
/* the following rules are to match that of a real input field */
overflow: hidden;
margin: 9px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-sm-semibold);
}
.mx_RoomSearch_shortcutPrompt {
@ -62,7 +60,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
font-family: inherit;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $light-fg-color;
margin-right: 6px;
white-space: nowrap;

4
res/css/structures/_RoomStatusBar.pcss
View File

@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: $font-50px;
line-height: 50px;
color: $primary-content;
opacity: 0.5;
@ -205,6 +205,6 @@ limitations under the License.
.mx_RoomStatusBar_typingBar {
height: 40px;
line-height: $font-40px;
line-height: 40px;
}
}

10
res/css/structures/_SpaceHierarchy.pcss
View File

@ -46,7 +46,7 @@ limitations under the License.
.mx_SpaceHierarchy_listHeader_header {
grid-column-start: 1;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0;
}
@ -71,7 +71,7 @@ limitations under the License.
.mx_SpaceHierarchy_error {
position: relative;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $alert;
font-size: $font-15px;
line-height: $font-18px;
@ -94,7 +94,7 @@ limitations under the License.
.mx_SpaceHierarchy_roomCount {
> h3 {
display: inline;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
@ -167,7 +167,7 @@ limitations under the License.
gap: 6px 12px;
.mx_SpaceHierarchy_roomTile_item {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
display: grid;
@ -233,7 +233,7 @@ limitations under the License.
.mx_SpaceHierarchy_roomTile_info {
grid-row: 2;
grid-column: 2;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
font-weight: initial;
line-height: $font-18px;
color: $secondary-content;

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

@ -156,8 +156,7 @@ limitations under the License.
display: block;
text-overflow: ellipsis;
overflow: hidden;
font-size: $font-14px;
line-height: $font-18px;
font: var(--cpd-font-body-md-regular);
}
.mx_SpaceButton_toggleCollapse {
@ -275,7 +274,7 @@ limitations under the License.
border-radius: 8px;
background-color: $panel-actions;
font-size: $font-15px !important; /* override inline style */
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-18px;
& + .mx_BaseAvatar_image {
@ -379,7 +378,7 @@ limitations under the License.
.mx_SpacePanel_contextMenu_header {
margin: 12px 16px 12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
overflow: hidden;
@ -431,7 +430,7 @@ limitations under the License.
color: $tertiary-content;
font-size: $font-10px;
line-height: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
//margin-left: 8px;
}
}

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

@ -22,7 +22,7 @@ limitations under the License.
border-radius: 8px;
border: 1px solid $input-border-color;
font-size: $font-17px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 20px 0;
> div {
@ -73,7 +73,7 @@ limitations under the License.
h1 {
margin: 0;
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
width: max-content;
}
@ -120,7 +120,7 @@ limitations under the License.
}
.mx_SpaceRoomView_errorText {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $alert;

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

@ -118,8 +118,8 @@ limitations under the License.
h2 {
margin: 0;
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-heading-sm-medium);
font-weight: var(--cpd-font-weight-medium);
display: inline;
width: auto;
}
@ -153,7 +153,7 @@ limitations under the License.
overflow: hidden;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: $font-12px;
font: var(--cpd-font-body-sm-regular);
a {
text-decoration: none;

13
res/css/structures/_UserMenu.pcss
View File

@ -47,7 +47,7 @@ limitations under the License.
}
.mx_UserMenu_name {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-left: 10px;
@ -104,7 +104,7 @@ limitations under the License.
.mx_UserMenu_contextMenu_displayName,
.mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
font: var(--cpd-font-heading-sm-regular);
/* Automatically grow subelements to fit the container */
flex: 1;
@ -117,12 +117,7 @@ limitations under the License.
}
.mx_UserMenu_contextMenu_displayName {
font-weight: bold;
line-height: $font-20px;
}
.mx_UserMenu_contextMenu_userId {
line-height: $font-24px;
font-weight: var(--cpd-font-weight-semibold);
}
}
@ -147,7 +142,7 @@ limitations under the License.
display: inline-block;
> span {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
display: block;
& + span {

2
res/css/structures/auth/_Login.pcss
View File

@ -18,7 +18,7 @@ limitations under the License.
.mx_Login_submit {
@mixin mx_DialogButton;
font-size: 15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
width: 100%;
margin-top: 24px;
margin-bottom: 24px;

2
res/css/structures/auth/_Registration.pcss
View File

@ -21,7 +21,7 @@ limitations under the License.
min-height: 270px;
p {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $authpage-primary-color;
&.secondary {

15
res/css/views/auth/_AuthBody.pcss
View File

@ -25,7 +25,7 @@ limitations under the License.
box-sizing: border-box;
b {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AuthBody_flex {
@ -35,14 +35,13 @@ limitations under the License.
h1 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin-top: $spacing-8;
color: $authpage-primary-color;
}
h2 {
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
color: $authpage-secondary-color;
}
@ -141,7 +140,7 @@ limitations under the License.
/* specialisation for password reset views */
.mx_AuthBody.mx_AuthBody_forgot-password {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
padding: 50px 32px;
min-height: 600px;
@ -156,7 +155,7 @@ limitations under the License.
}
.mx_Login_submit {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0 0 $spacing-16;
}
@ -169,7 +168,7 @@ limitations under the License.
}
.mx_AuthBody_sign-in-instead-button {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding: $spacing-4;
}
@ -263,7 +262,7 @@ limitations under the License.
text-align: center;
> a {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

2
res/css/views/auth/_AuthFooter.pcss
View File

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthFooter {
text-align: center;
width: 100%;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
opacity: 0.72;
padding: 20px 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

5
res/css/views/auth/_CompleteSecurityBody.pcss
View File

@ -25,13 +25,12 @@ limitations under the License.
h2 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin-top: 0;
}
h3 {
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
}
a:link,

3
res/css/views/auth/_LanguageSelector.pcss
View File

@ -20,8 +20,7 @@ limitations under the License.
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
color: $authpage-lang-color;
width: auto;
}

4
res/css/views/auth/_LoginWithQR.pcss
View File

@ -57,7 +57,7 @@ limitations under the License.
margin-left: $spacing-12;
}
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
h1 {
font-size: $font-24px;
@ -111,7 +111,7 @@ limitations under the License.
.mx_LoginWithQR_confirmationDigits {
text-align: center;
margin: $spacing-48 auto;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
color: $primary-content;
}

10
res/css/views/beta/_BetaCard.pcss
View File

@ -31,7 +31,7 @@ limitations under the License.
flex: 1;
.mx_BetaCard_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
@ -73,8 +73,7 @@ limitations under the License.
.mx_BetaCard_faq {
margin-top: $spacing-20;
font-size: $font-12px;
line-height: $font-15px;
font: var(--cpd-font-body-xs-regular);
> h4 {
margin: $spacing-12 0 0;
@ -108,8 +107,7 @@ limitations under the License.
.mx_SettingsFlag_microcopy {
margin-top: $spacing-4;
font-size: $font-12px;
line-height: $font-15px;
font: var(--cpd-font-body-sm-regular);
}
}
}
@ -121,7 +119,7 @@ limitations under the License.
border-radius: 8px;
text-transform: uppercase;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: 15px;
color: $button-primary-fg-color;
display: inline-block;

5
res/css/views/context_menus/_IconizedContextMenu.pcss
View File

@ -30,7 +30,7 @@ limitations under the License.
.mx_IconizedContextMenu_optionList_label {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
@ -79,8 +79,7 @@ limitations under the License.
padding-bottom: 12px;
text-decoration: none;
color: $primary-content;
font-size: $font-15px;
line-height: $font-24px;
font: var(--cpd-font-body-md-regular);
/* Create a flexbox to more easily define the list items */
display: flex;

6
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View File

@ -48,7 +48,7 @@ limitations under the License.
margin: 0;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}
@ -96,7 +96,7 @@ limitations under the License.
}
.mx_AddExistingToSpace_errorHeading {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
color: $alert;
@ -171,7 +171,7 @@ limitations under the License.
> div {
> h1 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
margin: 0;

2
res/css/views/dialogs/_CompoundDialog.pcss
View File

@ -37,7 +37,7 @@ limitations under the License.
h1 {
display: inline-block;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
margin: 0; /* managed by header class */
}

2
res/css/views/dialogs/_ConfirmUserActionDialog.pcss
View File

@ -34,7 +34,7 @@ limitations under the License.
}
.mx_ConfirmUserActionDialog_reasonField {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
background-color: $background;
}

4
res/css/views/dialogs/_CreateRoomDialog.pcss
View File

@ -19,7 +19,7 @@ limitations under the License.
.mx_CreateRoomDialog_details_summary {
list-style: none;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
cursor: pointer;
color: $accent;
@ -96,7 +96,7 @@ limitations under the License.
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ToggleSwitch {

2
res/css/views/dialogs/_ExportDialog.pcss
View File

@ -19,7 +19,7 @@ limitations under the License.
font-size: $font-16px;
display: block;
font-family: $font-family;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
margin-top: 18px;
margin-bottom: 12px;

2
res/css/views/dialogs/_FeedbackDialog.pcss
View File

@ -41,7 +41,7 @@ limitations under the License.
> h3 {
margin-top: 0;
margin-bottom: 8px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
}

2
res/css/views/dialogs/_ForwardDialog.pcss
View File

@ -27,7 +27,7 @@ limitations under the License.
margin: 0 0 6px;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}

2
res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss
View File

@ -17,7 +17,7 @@ limitations under the License.
.mx_GenericFeatureFeedbackDialog {
.mx_GenericFeatureFeedbackDialog_subheading {
color: $primary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-20px;
margin-bottom: 24px;
}

10
res/css/views/dialogs/_InviteDialog.pcss
View File

@ -52,8 +52,8 @@ limitations under the License.
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
font-size: $font-14px;
padding-inline-start: $spacing-12;
border: 0 !important;
outline: 0 !important;
@ -110,11 +110,11 @@ limitations under the License.
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: $spacing-8 0 $spacing-16 0;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
> span {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
> p {
@ -277,7 +277,7 @@ limitations under the License.
input {
font-size: 18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding-top: 0;
}
@ -429,7 +429,7 @@ limitations under the License.
.mx_InviteDialog_tile_nameStack_name {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
}

6
res/css/views/dialogs/_JoinRuleDropdown.pcss
View File

@ -16,9 +16,7 @@ limitations under the License.
.mx_JoinRuleDropdown {
margin-bottom: 8px;
font-weight: normal;
font-family: $font-family;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
.mx_Dropdown_input {
@ -26,7 +24,7 @@ limitations under the License.
}
.mx_Dropdown_option {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-32px;
height: 32px;
min-height: 32px;

2
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
View File

@ -54,7 +54,7 @@ limitations under the License.
margin: 0;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}

2
res/css/views/dialogs/_MessageEditHistoryDialog.pcss
View File

@ -31,7 +31,7 @@ limitations under the License.
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
padding: 0;
color: $primary-content;

2
res/css/views/dialogs/_PollCreateDialog.pcss
View File

@ -23,7 +23,7 @@ limitations under the License.
}
h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;

2
res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
View File

@ -94,7 +94,7 @@ limitations under the License.
.mx_RoomSettingsDialog_workspace_channel_details {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
.mx_RoomSettingsDialog_channel {
margin-inline-start: 5px;

5
res/css/views/dialogs/_ServerPickerDialog.pcss
View File

@ -23,7 +23,8 @@ limitations under the License.
> p {
color: $secondary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin: 16px 0;
&:first-of-type {
@ -37,7 +38,7 @@ limitations under the License.
> h2 {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $secondary-content;
margin: 16px 0 16px 8px;
}

6
res/css/views/dialogs/_SpaceSettingsDialog.pcss
View File

@ -18,7 +18,7 @@ limitations under the License.
color: $primary-content;
.mx_SpaceSettings_errorText {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $alert;
@ -42,7 +42,7 @@ limitations under the License.
margin-bottom: 4px;
.mx_StyledRadioButton_content {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-18px;
color: $primary-content;
}
@ -71,7 +71,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind {
&.mx_AccessibleButton_kind_link {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {

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

@ -163,7 +163,7 @@ limitations under the License.
.mx_SpotlightDialog_section {
> h4,
> .mx_SpotlightDialog_sectionHeader > h4 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;

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

@ -20,14 +20,14 @@ limitations under the License.
.mx_Dialog {
color: $primary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
text-align: center;
width: 485px;
h1 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_VerifyEMailDialog_text-light {

4
res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
View File

@ -38,7 +38,7 @@ limitations under the License.
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ToggleSwitch {
@ -103,7 +103,7 @@ limitations under the License.
.mx_CreateSecretStorageDialog_optionTitle {
color: $dialog-title-fg-color;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
padding-bottom: 10px;
}

4
res/css/views/elements/_AccessibleButton.pcss
View File

@ -40,7 +40,7 @@ limitations under the License.
display: inline-flex;
align-items: center;
justify-content: center;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
@ -90,7 +90,7 @@ limitations under the License.
&.mx_AccessibleButton_kind_primary,
&.mx_AccessibleButton_kind_primary_outline,
&.mx_AccessibleButton_kind_secondary {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_primary,

2
res/css/views/elements/_ExternalLink.pcss
View File

@ -26,6 +26,6 @@ limitations under the License.
mask-size: contain;
width: $font-11px;
height: $font-11px;
margin-left: $font-3px;
margin-left: 0.3rem;
vertical-align: middle;
}

2
res/css/views/elements/_FacePile.pcss
View File

@ -63,7 +63,7 @@ limitations under the License.
.mx_FacePile_summary {
margin-left: 12px;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
color: $tertiary-content;
}

8
res/css/views/elements/_Field.pcss
View File

@ -38,9 +38,7 @@ limitations under the License.
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
font-family: inherit;
font-weight: normal;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
border: none;
/* Even without a border here, we still need this avoid overlapping the rounded */
/* corners on the field above. */
@ -99,7 +97,7 @@ limitations under the License.
transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
background-color: transparent;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
transform: translateY(0);
position: absolute;
left: 0px;
@ -183,5 +181,5 @@ limitations under the License.
}
.mx_Field .mx_CountryDropdown {
width: $font-78px;
width: fit-content;
}

13
res/css/views/elements/_GenericEventListSummary.pcss
View File

@ -95,17 +95,22 @@ limitations under the License.
margin-top: $spacing-4;
.mx_EventTile_line {
line-height: $font-20px;
line-height: 1.25;
}
.mx_GenericEventListSummary_spacer {
line-height: $font-22px;
line-height: 1.375;
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-13px;
font: var(--cpd-font-body-sm-regular);
}
}
/* Make all state events one order smaller than the other events */
.mx_EventTile {
font: var(--cpd-font-body-sm-regular);
}
}
.mx_GenericEventListSummary_unstyledList {
@ -114,7 +119,7 @@ limitations under the License.
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-14px;
font: var(--cpd-font-body-sm-regular);
display: inline-flex;
}

2
res/css/views/elements/_RoomAliasField.pcss
View File

@ -39,7 +39,7 @@ limitations under the License.
color: $info-plinth-fg-color;
border-left: none;
border-right: none;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding: 9px 10px;
flex: 0 0 auto;
}

3
res/css/views/elements/_SSOButtons.pcss
View File

@ -32,8 +32,7 @@ limitations under the License.
text-align: center;
border-radius: 8px;
display: inline-block;
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
border: 1px solid $input-border-color;
color: $primary-content;

5
res/css/views/elements/_ServerPicker.pcss
View File

@ -21,11 +21,10 @@ limitations under the License.
display: grid;
grid-template-columns: auto min-content;
grid-template-rows: auto auto auto;
font-size: $font-14px;
line-height: $font-20px;
font: var(--cpd-font-body-md-regular);
> h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0 0 20px;
grid-column: 1;
grid-row: 1;

4
res/css/views/elements/_SettingsFlag.pcss
View File

@ -44,7 +44,6 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-14px;
color: $primary-content;
padding-right: 10px;
padding-top: 4px;
@ -52,8 +51,7 @@ limitations under the License.
.mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
/* Support code/pre elements in settings flag descriptions */

2
res/css/views/elements/_Slider.pcss
View File

@ -120,7 +120,7 @@ limitations under the License.
.mx_Slider_selection_label {
color: $muted-fg-color;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
}
}
}

5
res/css/views/elements/_StyledCheckbox.pcss
View File

@ -16,8 +16,7 @@ limitations under the License.
.mx_Checkbox {
$size: $font-16px;
$border-size: $font-1-5px;
$border-radius: $font-4px;
$border-radius: 0.4rem;
display: flex;
align-items: flex-start;
@ -44,7 +43,7 @@ limitations under the License.
width: $size;
size: 0.5rem;
border: $border-size solid rgba($muted-fg-color, 0.5);
border: 1px solid rgba($muted-fg-color, 0.5);
box-sizing: border-box;
border-radius: $border-radius;

2
res/css/views/elements/_StyledRadioButton.pcss
View File

@ -65,7 +65,7 @@ limitations under the License.
width: $font-16px;
margin-left: 2px; /* For the highlight on focus */
border: $font-1-5px solid $radio-circle-color;
border: 1px solid $radio-circle-color;
border-radius: $font-16px;
> div {

2
res/css/views/elements/_Tooltip.pcss
View File

@ -107,7 +107,7 @@ limitations under the License.
}
.mx_Tooltip_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_Tooltip_sub {

2
res/css/views/elements/_UseCaseSelection.pcss
View File

@ -26,7 +26,7 @@ limitations under the License.
justify-content: flex-end;
h1 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
text-align: center;
}

4
res/css/views/emojipicker/_EmojiPicker.pcss
View File

@ -213,7 +213,7 @@ limitations under the License.
.mx_EmojiPicker_category_label,
.mx_EmojiPicker_preview_name {
font-size: $font-16px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0;
}
@ -246,7 +246,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode {
color: $light-fg-color;
overflow-wrap: break-word;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
&::before,
&::after {

2
res/css/views/messages/_CallEvent.pcss
View File

@ -67,7 +67,7 @@ limitations under the License.
}
.mx_CallEvent_active .mx_CallEvent_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_CallEvent_columns {

2
res/css/views/messages/_DateSeparator.pcss
View File

@ -19,7 +19,7 @@ limitations under the License.
margin: 4px 0;
display: flex;
align-items: center;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $roomtopic-color;
}

5
res/css/views/messages/_DisambiguatedProfile.pcss
View File

@ -22,13 +22,12 @@ limitations under the License.
cursor: pointer;
.mx_DisambiguatedProfile_displayName {
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
margin-inline-end: 0;
}
.mx_DisambiguatedProfile_mxid {
font-weight: var(--font-semi-bold);
font-size: 1.1rem;
font: var(--cpd-font-body-sm-semibold);
margin-inline-start: 5px;
opacity: 0.5; /* Match mx_TextualEvent */
color: $primary-content;

2
res/css/views/messages/_EventTileBubble.pcss
View File

@ -48,7 +48,7 @@ limitations under the License.
}
.mx_EventTileBubble_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
grid-row: 1;
}

2
res/css/views/messages/_LegacyCallEvent.pcss
View File

@ -118,7 +118,7 @@ limitations under the License.
min-width: 0;
.mx_LegacyCallEvent_sender {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: $spacing-4;

2
res/css/views/messages/_MPollBody.pcss
View File

@ -18,7 +18,7 @@ limitations under the License.
margin-top: 8px;
h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;

2
res/css/views/messages/_MediaBody.pcss
View File

@ -23,7 +23,7 @@ limitations under the License.
max-width: 243px; /* use max-width instead of width so it fits within right panels */
color: $secondary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
padding: 6px 12px;

15
res/css/views/right_panel/_BaseCard.pcss
View File

@ -25,6 +25,7 @@ limitations under the License.
display: flex;
flex-direction: column;
flex: 1;
font-size: var(--cpd-font-size-body-sm);
.mx_BaseCard_header {
--BaseCard_header_button-margin: $spacing-12;
@ -33,8 +34,7 @@ limitations under the License.
> h2 {
margin: 0 44px;
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-sm-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -153,8 +153,7 @@ limitations under the License.
> h2 {
color: $tertiary-content;
font-size: $font-12px;
font-weight: 500;
font: var(--cpd-font-body-sm-medium);
margin: $spacing-12;
}
@ -163,9 +162,8 @@ limitations under the License.
padding-inline-start: $spacing-12;
margin: 0;
position: relative;
font-size: $font-13px;
font: var(--cpd-font-heading-sm-medium);
height: 20px;
line-height: 20px;
border-radius: 8px;
overflow: hidden;
white-space: nowrap;
@ -199,8 +197,7 @@ limitations under the License.
.mx_AccessibleButton_kind_secondary {
color: $secondary-content;
background-color: rgba(141, 151, 165, 0.2);
font-weight: var(--font-semi-bold);
font-size: $font-14px;
font: var(--cpd-font-body-md-semibold);
}
.mx_AccessibleButton_disabled {
@ -227,7 +224,7 @@ limitations under the License.
position: initial;
span:first-of-type {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: inherit;
color: $primary-content;
}

7
res/css/views/right_panel/_RoomSummaryCard.pcss
View File

@ -30,11 +30,12 @@ limitations under the License.
.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-17px;
}
.mx_RoomSummaryCard_alias {
font-size: $font-13px;
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
text-overflow: ellipsis;
}
@ -237,7 +238,7 @@ limitations under the License.
margin-top: 12px;
margin-bottom: 12px;
font-size: $font-13px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

4
res/css/views/right_panel/_ThreadPanel.pcss
View File

@ -174,7 +174,7 @@ limitations under the License.
h2 {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
margin-top: 24px;
margin-bottom: 10px;
@ -204,7 +204,7 @@ limitations under the License.
line-height: $font-15px;
> b {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}
}

15
res/css/views/right_panel/_UserInfo.pcss
View File

@ -19,7 +19,6 @@ limitations under the License.
/* UserInfo has a circular image at the top so it fits between the back & close buttons */
padding-top: 0;
overflow-y: auto;
font-size: $font-12px;
.mx_UserInfo_cancel {
cursor: pointer;
@ -43,7 +42,7 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 18px 0 0 0;
}
@ -145,8 +144,8 @@ limitations under the License.
h3 {
text-transform: uppercase;
color: $tertiary-content;
font-weight: var(--font-semi-bold);
font-size: $font-12px;
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
margin: $spacing-4 0;
}
@ -159,7 +158,7 @@ limitations under the License.
h2 {
display: flex;
font-size: $font-18px;
font-size: $font-17px;
line-height: $font-25px;
flex: 1;
justify-content: center;
@ -221,17 +220,17 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
$statusLineHeight: 16px;
$statusNumberOfLines: 3;
font: var(--cpd-font-body-sm-regular);
font-size: $font-11px;
line-height: $statusLineHeight;
line-height: 1rem;
opacity: 0.5;
overflow: hidden;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
max-height: calc($statusLineHeight * $statusNumberOfLines);
max-height: calc(1rem * $statusNumberOfLines);
-webkit-line-clamp: $statusNumberOfLines;
-webkit-box-orient: vertical;
}

2
res/css/views/right_panel/_VerificationPanel.pcss
View File

@ -134,7 +134,7 @@ limitations under the License.
}
.mx_VerificationPanel_QRPhase_helpText {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin: 30px 0;
text-align: center;
}

2
res/css/views/room_settings/_AliasSettings.pcss
View File

@ -17,7 +17,7 @@ limitations under the License.
.mx_AliasSettings_localAddresses {
cursor: pointer;
color: $accent;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
list-style: none;
/* list-style doesn't do it for webkit */

2
res/css/views/rooms/_DecryptionFailureBar.pcss
View File

@ -73,7 +73,7 @@ limitations under the License.
.mx_DecryptionFailureBar_start_headline {
grid-area: headline;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-16px;
align-self: center;
}

2
res/css/views/rooms/_EntityTile.pcss
View File

@ -72,7 +72,7 @@ limitations under the License.
.mx_EntityTile_name {
flex: 1 1 0;
overflow: hidden;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
text-overflow: ellipsis;
white-space: nowrap;
}

9
res/css/views/rooms/_EventTile.pcss
View File

@ -29,7 +29,6 @@ $left-gutter: 64px;
max-width: 100%;
clear: both; /* TODO: check if this is necessary */
padding-top: 18px;
font-size: $font-14px;
position: relative;
.mx_EventTile_avatar {
@ -105,7 +104,7 @@ $left-gutter: 64px;
.mx_DisambiguatedProfile {
color: $primary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
@ -697,11 +696,9 @@ $left-gutter: 64px;
}
.markdown-body {
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
font-size: $font-14px;
pre,
code {

2
res/css/views/rooms/_MemberInfo.pcss
View File

@ -23,7 +23,7 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 16px 0 16px 15px;
}

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

@ -31,7 +31,7 @@ limitations under the License.
h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-13px;
padding-left: 3px;
padding-right: 12px;
@ -85,7 +85,7 @@ limitations under the License.
display: flex;
justify-content: center;
color: $button-fg-color;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_MemberList_invite.mx_AccessibleButton_disabled {

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

@ -114,7 +114,7 @@ limitations under the License.
min-height: 60px;
justify-content: flex-start;
align-items: flex-start;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin-right: 6px;
pre {
@ -135,7 +135,7 @@ limitations under the License.
box-shadow: none;
color: $primary-content;
background-color: $background;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
max-height: 120px;
overflow: auto;

2
res/css/views/rooms/_MessageComposerFormatBar.pcss
View File

@ -99,7 +99,7 @@ limitations under the License.
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: $font-13px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
min-width: 54px;
text-align: center;

2
res/css/views/rooms/_NewRoomIntro.pcss
View File

@ -55,7 +55,7 @@ limitations under the License.
> h2 {
margin-top: 24px;
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
> p {

2
res/css/views/rooms/_PinnedEventTile.pcss
View File

@ -48,7 +48,7 @@ limitations under the License.
.mx_PinnedEventTile_sender {
grid-area: name;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
text-overflow: ellipsis;

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

@ -86,7 +86,7 @@ limitations under the License.
font-size: 12px;
line-height: 15px;
margin: 16px 16px 8px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
/* shouldn’t be actually focusable */
outline: none;
}

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_ReplyTile {
position: relative;
padding: 2px 0;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/speaker.svg");
@ -122,7 +122,7 @@ limitations under the License.
gap: 4px;
.mx_DisambiguatedProfile {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
display: inline-block; // anti-zalgo, with overflow hidden
padding: 0;

3
res/css/views/rooms/_RoomBreadcrumbs.pcss
View File

@ -44,8 +44,7 @@ limitations under the License.
}
.mx_RoomBreadcrumbs_placeholder {
font-weight: var(--font-semi-bold);
font-size: $font-14px;
font: var(--cpd-font-body-md-semibold);
line-height: 32px; /* specifically to match the height this is not scaled */
height: 32px;
}

2
res/css/views/rooms/_RoomCallBanner.pcss
View File

@ -36,7 +36,7 @@ limitations under the License.
.mx_RoomCallBanner_label {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding-right: $spacing-8;
&::before {

Some files were not shown because too many files have changed in this diff Show More