sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Replace legacy $spacing-X vars with Compound Design Tokens (#34380)

Browse Source 
* Replace legacy `$spacing-X` vars with Compound Design Tokens

* Remove unused font size vars

* Use calc to get negative spacing vars
This commit is contained in:
Michael Telatynski
2026-07-22 10:10:57 +00:00
committed by GitHub
parent ef8cfda6fe
commit 49a2bdd7e4
87 changed files with 343 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/views/auth/_AuthBody.pcss
+15 -15
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
h1 {
font-size: $font-24px;
font-weight: var(--cpd-font-weight-semibold);
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
color: $authpage-primary-color;
}
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_text {
margin-bottom: $spacing-48;
margin-bottom: var(--cpd-space-12x);
margin-top: 0;
}
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Login_submit {
height: 32px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
.mx_ErrorMessage {
@@ -139,7 +139,7 @@ Please see LICENSE files in the repository root for full details.
min-height: 600px;
h1 {
margin: $spacing-24 0;
margin: var(--cpd-space-6x) 0;
}
.mx_AuthBody_button-container {
@@ -148,24 +148,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Login_submit {
margin: 0 0 $spacing-16;
margin: 0 0 var(--cpd-space-4x);
}
.mx_AuthBody_text {
margin-bottom: $spacing-32;
margin-bottom: var(--cpd-space-8x);
p {
margin: 0 0 $spacing-8;
margin: 0 0 var(--cpd-space-2x);
}
}
.mx_AuthBody_sign-in-instead-button {
font-weight: var(--cpd-font-weight-semibold);
padding: $spacing-4;
padding: var(--cpd-space-1x);
}
.mx_AuthBody_fieldRow {
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
}
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
align-items: center;
color: $secondary-content;
display: flex;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_AuthBody_resend-button {
@@ -190,8 +190,8 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
color: $accent;
display: flex;
gap: $spacing-4;
padding: $spacing-4;
gap: var(--cpd-space-1x);
padding: var(--cpd-space-1x);
&:hover {
background-color: $system;
@@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_AuthBody_paddedFooter_title {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
font-size: $font-15px;
line-height: $font-24px;
@@ -243,7 +243,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_paddedFooter_subtitle {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
font-size: $font-10px;
line-height: $font-14px;
}
@@ -259,7 +259,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
.mx_AuthBody_spinner {
apps/web/res/css/views/auth/_LoginWithQR.pcss
+13 -13
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQRSection p {
margin-top: 0;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
.mx_LoginWithQRSection {
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LoginWithQRSection .mx_AccessibleButton svg {
margin-right: $spacing-12;
margin-right: var(--cpd-space-3x);
}
.mx_LoginWithQR_dialog .mx_Dialog {
@@ -42,12 +42,12 @@ Please see LICENSE files in the repository root for full details.
}
h2 {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
.mx_LoginWithQR_qrWrapper {
display: flex;
padding: $spacing-28 0;
padding: var(--cpd-space-7x) 0;
.mx_Spinner {
/* Match the size of the QR code to prevent jumps */
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationDigits {
text-align: center;
margin: $spacing-48 auto;
margin: var(--cpd-space-12x) auto;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
color: $primary-content;
@@ -66,8 +66,8 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationAlert {
border: 1px solid $quaternary-content;
border-radius: $spacing-8;
padding: $spacing-8;
border-radius: var(--cpd-space-2x);
padding: var(--cpd-space-2x);
line-height: 1.5em;
display: flex;
@@ -128,14 +128,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_heading {
display: flex;
gap: $spacing-12;
gap: var(--cpd-space-3x);
align-items: center;
}
.mx_LoginWithQR_BackButton {
height: $spacing-28;
border-radius: $spacing-28;
padding: $spacing-4;
height: var(--cpd-space-7x);
border-radius: var(--cpd-space-7x);
padding: var(--cpd-space-1x);
box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-secondary);
svg {
@@ -166,7 +166,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
align-items: center;
gap: $spacing-16;
gap: var(--cpd-space-4x);
margin-top: var(--cpd-space-6x);
.mx_AccessibleButton {
@@ -177,7 +177,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_QRCode {
border-radius: $spacing-8;
border-radius: var(--cpd-space-2x);
display: flex;
justify-content: center;
}
apps/web/res/css/views/beta/_BetaCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_BetaCard {
padding: $spacing-24;
padding: var(--cpd-space-6x);
background-color: $panels;
border-radius: 8px;
box-sizing: border-box;
@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_columns {
display: flex;
flex-flow: wrap;
gap: $spacing-20;
gap: var(--cpd-space-5x);
justify-content: center;
.mx_BetaCard_columns_description {
@@ -27,11 +27,11 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
margin: $spacing-4 0 14px;
margin: var(--cpd-space-1x) 0 14px;
display: flex;
align-items: center;
column-gap: $spacing-12;
column-gap: var(--cpd-space-3x);
}
.mx_BetaCard_caption {
@@ -42,8 +42,8 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_buttons {
display: flex;
flex-wrap: wrap-reverse;
gap: $spacing-12;
margin: $spacing-20 auto 0;
gap: var(--cpd-space-3x);
margin: var(--cpd-space-5x) auto 0;
.mx_AccessibleButton {
padding: 7px 40px;
@@ -58,17 +58,17 @@ Please see LICENSE files in the repository root for full details.
}
.mx_BetaCard_refreshWarning {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
font-size: $font-10px;
text-align: center;
}
.mx_BetaCard_faq {
margin-top: $spacing-20;
margin-top: var(--cpd-space-5x);
font: var(--cpd-font-body-xs-regular);
> h4 {
margin: $spacing-12 0 0;
margin: var(--cpd-space-3x) 0 0;
}
> p {
@@ -92,13 +92,13 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_relatedSettings {
.mx_SettingsFlag {
margin: $spacing-16 0 0;
margin: var(--cpd-space-4x) 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
.mx_SettingsFlag_microcopy {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
font: var(--cpd-font-body-sm-regular);
}
}
@@ -107,7 +107,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_betaPill {
background-color: $accent-alt;
padding: $spacing-4 10px;
padding: var(--cpd-space-1x) 10px;
border-radius: 8px;
text-transform: uppercase;
font-size: $font-12px;
apps/web/res/css/views/dialogs/_ExportDialog.pcss
+1 -1
View File
@@ -79,5 +79,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ExportDialog_attachments-checkbox {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
apps/web/res/css/views/dialogs/_InviteDialog.pcss
+16 -16
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_transferWrapper .mx_Dialog {
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
}
.mx_InviteDialog_addressBar {
@@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: row;
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */
margin: $spacing-8 45px 0 0;
margin: var(--cpd-space-2x) 45px 0 0;
.mx_InviteDialog_editor {
flex: 1;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_section {
padding-bottom: $spacing-4;
padding-bottom: var(--cpd-space-1x);
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: $spacing-8 0 $spacing-16 0;
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x) 0;
font: var(--cpd-font-body-md-regular);
> span {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
border-top: 1px solid $input-border-color;
> h3 {
margin: $spacing-12 0;
margin: var(--cpd-space-3x) 0;
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
@@ -153,17 +153,17 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_addressBar {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
input[type="checkbox"] {
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
}
}
.mx_InviteDialog_userSections {
overflow-y: auto;
padding: 0 45px $spacing-4 0;
padding: 0 45px var(--cpd-space-1x) 0;
}
.mx_InviteDialog_helpText {
@@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_dialPad {
width: 224px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
margin-inline: auto;
.mx_InviteDialog_dialPadField {
@@ -199,19 +199,19 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DialPad {
row-gap: $spacing-16;
row-gap: var(--cpd-space-4x);
column-gap: 48px;
margin-inline: auto;
}
}
.mx_InviteDialog_transferConsultConnect {
padding-top: $spacing-16;
padding-top: var(--cpd-space-4x);
/* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
* then compensate with padding
*/
padding-inline: $spacing-24;
margin-inline: calc(-1 * $spacing-24);
padding-inline: var(--cpd-space-6x);
margin-inline: calc(-1 * var(--cpd-space-6x));
border-top: 1px solid $quinary-content;
display: flex;
@@ -226,12 +226,12 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_tile {
cursor: pointer;
display: grid;
gap: $spacing-8 $spacing-12;
gap: var(--cpd-space-2x) var(--cpd-space-3x);
align-items: center;
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
&:last-child {
margin-bottom: 0;
@@ -312,5 +312,5 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_oneThreepid {
font-size: $font-12px;
margin: $spacing-8 0;
margin: var(--cpd-space-2x) 0;
}
apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
+4 -4
View File
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_RoomSettingsDialog_BridgeList_listItem {
display: flex;
flex-wrap: wrap;
gap: $spacing-8;
gap: var(--cpd-space-2x);
padding: 5px;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
/* border-style around each bridge list item */
border-width: 1px 1px;
@@ -71,11 +71,11 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomSettingsDialog_column_data_details,
.mx_RoomSettingsDialog_column_data_metadata {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
}
.mx_RoomSettingsDialog_column_data_metadata li {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
.mx_RoomSettingsDialog_column_data_protocolName {
apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
+34 -34
View File
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: $spacing-8;
padding: var(--cpd-space-2x);
border-radius: 8px;
background-color: $background;
top: -60px; /* relative to the top of the modal */
@@ -36,8 +36,8 @@ Please see LICENSE files in the repository root for full details.
kbd {
display: inline-block;
padding: 2px $spacing-4;
margin: 0 $spacing-4;
padding: 2px var(--cpd-space-1x);
margin: 0 var(--cpd-space-1x);
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
margin: 0;
border: none;
border-radius: 8px 8px 0 0;
padding: $spacing-12 $spacing-16;
padding: var(--cpd-space-3x) var(--cpd-space-4x);
border-bottom: 1px solid $system;
> .mx_SpotlightDialog_filter {
@@ -72,19 +72,19 @@ Please see LICENSE files in the repository root for full details.
align-content: center;
align-items: center;
border-radius: 8px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
background-color: $quinary-content;
vertical-align: middle;
color: $primary-content;
position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px;
padding: var(--cpd-space-1x) var(--cpd-space-2x) var(--cpd-space-1x) 37px;
> svg {
color: $secondary-content;
width: 18px;
height: 18px;
position: absolute;
left: $spacing-8;
left: var(--cpd-space-2x);
top: 50%;
transform: translateY(-50%);
}
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
padding: 1px;
background: $system;
border-radius: 8px;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
text-align: center;
line-height: 16px;
color: $secondary-content;
@@ -126,7 +126,7 @@ Please see LICENSE files in the repository root for full details.
flex-grow: 0;
width: unset;
height: unset;
margin-left: $spacing-16;
margin-left: var(--cpd-space-4x);
}
&:not(:focus-within) + #mx_SpotlightDialog_content {
@@ -143,7 +143,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_content {
height: 100%;
overflow-y: auto;
padding: $spacing-16;
padding: var(--cpd-space-4x);
ul {
padding: 0;
@@ -161,23 +161,23 @@ Please see LICENSE files in the repository root for full details.
}
> h4 {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_SpotlightDialog_sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
.mx_SpotlightDialog_options {
display: flex;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
}
& + .mx_SpotlightDialog_section {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
}
@@ -201,7 +201,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_option {
padding: $spacing-4;
padding: var(--cpd-space-1x);
color: $primary-content;
font-size: $font-12px;
line-height: $font-15px;
@@ -213,11 +213,11 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */
margin: 0 9px var(--cpd-space-1x); /* maintain centering */
}
& + .mx_SpotlightDialog_option {
margin-left: $spacing-16;
margin-left: var(--cpd-space-4x);
}
}
}
@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_option {
--mx_SpotlightDialog_option_selectedBgColor: $system;
padding: 6px $spacing-4;
padding: 6px var(--cpd-space-1x);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
@@ -249,20 +249,20 @@ Please see LICENSE files in the repository root for full details.
align-items: flex-start;
.mx_AccessibleButton {
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4;
padding: var(--cpd-space-1x) var(--cpd-space-5x);
margin: 2px var(--cpd-space-1x);
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
}
> .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
width: 24px;
height: 24px;
flex-shrink: 0;
@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
line-height: $font-24px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
.mx_SpotlightDialog_result_publicRoomName {
color: $primary-content;
@@ -294,7 +294,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content;
font-size: $font-12px;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
overflow: hidden;
text-overflow: ellipsis;
}
@@ -313,7 +313,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_NotificationBadge {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
.mx_SpotlightDialog_option--menu,
@@ -356,17 +356,17 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_inviteLink,
.mx_SpotlightDialog_createRoom {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px $spacing-8 3px $spacing-28;
padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);
svg {
display: block;
position: absolute;
left: $spacing-8;
left: var(--cpd-space-2x);
width: 16px;
height: 16px;
color: var(--cpd-color-icon-primary);
@@ -376,7 +376,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_otherSearches {
.mx_SpotlightDialog_option {
padding-left: $spacing-32;
padding-left: var(--cpd-space-8x);
position: relative;
svg {
@@ -384,7 +384,7 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
height: 24px;
position: absolute;
left: $spacing-4;
left: var(--cpd-space-1x);
top: 50%;
transform: translateY(-50%);
}
@@ -397,8 +397,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_result_details {
margin-left: $spacing-8;
margin-right: $spacing-8;
margin-left: var(--cpd-space-2x);
margin-right: var(--cpd-space-2x);
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
@@ -415,7 +415,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4;
padding: 2px var(--cpd-space-1x);
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
@@ -424,7 +424,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content;
border-radius: 6px;
background-color: $quinary-content;
margin-right: $spacing-4;
margin-right: var(--cpd-space-1x);
display: none;
}
apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss
+2 -2
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Dialog {
color: $primary-content;
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-4x);
text-align: center;
/* !important override compound */
width: 485px !important;
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AuthBody_did-not-receive {
justify-content: center;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_Dialog_cancelButton {
apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+1 -1
View File
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
padding: 56px; /* 80px from design - 24px wrapper padding */
.mx_Dialog_title {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
}
apps/web/res/css/views/directory/_NetworkDropdown.pcss
+7 -7
View File
@@ -9,14 +9,14 @@ Please see LICENSE files in the repository root for full details.
.mx_NetworkDropdown_wrapper .mx_ContextualMenu {
.mx_GenericDropdownMenu_Option {
&.mx_GenericDropdownMenu_Option--header {
padding-top: $spacing-12;
padding-bottom: $spacing-4;
padding-top: var(--cpd-space-3x);
padding-bottom: var(--cpd-space-1x);
min-width: 160px;
}
&.mx_GenericDropdownMenu_Option--item {
padding-top: $spacing-4;
padding-bottom: $spacing-4;
padding-top: var(--cpd-space-1x);
padding-bottom: var(--cpd-space-1x);
> .mx_GenericDropdownMenu_Option--label span:first-child {
font-weight: normal;
@@ -30,15 +30,15 @@ Please see LICENSE files in the repository root for full details.
color: $primary-content;
span:not(:first-child) {
margin-left: $spacing-4;
margin-left: var(--cpd-space-1x);
color: $secondary-content;
}
}
}
.mx_GenericDropdownMenu_divider {
margin-top: $spacing-4;
margin-bottom: $spacing-4;
margin-top: var(--cpd-space-1x);
margin-bottom: var(--cpd-space-1x);
& + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
font-size: $font-15px;
apps/web/res/css/views/elements/_GenericEventListSummary.pcss
+3 -3
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
position: relative;
.mx_GenericEventListSummary_avatars {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_GenericEventListSummary_spacer {
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
}
&[data-layout="group"] {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
&[data-layout="bubble"] {
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MatrixChat_useCompactLayout & {
font-size: $font-13px;
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
.mx_EventTile_line {
line-height: 1.25;
apps/web/res/css/views/elements/_ServerPicker.pcss
+1 -1
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ServerPicker {
margin-bottom: 14px;
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
border-bottom: 1px solid rgb(141, 151, 165, 0.2);
display: grid;
grid-template-columns: auto min-content;
apps/web/res/css/views/location/_LocationPicker.pcss
+4 -4
View File
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
.maplibregl-ctrl.maplibregl-ctrl-group,
.maplibregl-ctrl.maplibregl-ctrl-attrib {
margin-right: $spacing-16;
margin-right: var(--cpd-space-4x);
}
.maplibregl-ctrl.maplibregl-ctrl-group {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
flex: 0;
width: 100%;
box-sizing: border-box;
padding: $spacing-16;
padding: var(--cpd-space-4x);
display: flex;
flex-direction: column;
justify-content: stretch;
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LocationPicker_pinText {
position: absolute;
top: $spacing-16;
top: var(--cpd-space-4x);
width: 100%;
box-sizing: border-box;
text-align: center;
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
span {
box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
border-radius: 8px;
padding: $spacing-8;
padding: var(--cpd-space-2x);
background-color: $background;
color: $primary-content;
apps/web/res/css/views/messages/_CallEvent.pcss
+5 -5
View File
@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
display: flex;
gap: $spacing-8;
gap: var(--cpd-space-2x);
> .mx_BaseAvatar,
> .mx_Icon {
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
> .mx_Icon {
padding: 0;
margin: $spacing-4 0;
margin: var(--cpd-space-1x) 0;
color: $secondary-content;
}
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
width: 16px;
height: 16px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_CallEvent_active .mx_CallEvent_title {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
.mx_CallEvent_columns {
flex-grow: 1;
display: flex;
gap: $spacing-12;
gap: var(--cpd-space-3x);
align-items: center;
justify-content: space-between;
}
@@ -70,7 +70,7 @@ Please see LICENSE files in the repository root for full details.
.mx_TimelineCard .mx_CallEvent_columns {
flex-direction: column;
align-items: flex-start;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_CallEvent_details {
apps/web/res/css/views/messages/_LegacyCallEvent.pcss
+10 -10
View File
@@ -16,11 +16,11 @@ Please see LICENSE files in the repository root for full details.
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: $spacing-4 0;
gap: var(--cpd-space-1x) 0;
position: relative;
margin: $spacing-4 0;
padding: $spacing-12 $spacing-24;
margin: var(--cpd-space-1x) 0;
padding: var(--cpd-space-3x) var(--cpd-space-6x);
box-sizing: border-box;
background-color: $dark-panel-bg-color;
border-radius: 8px;
@@ -47,14 +47,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_info_basic {
display: flex;
flex-direction: column;
gap: $spacing-4;
gap: var(--cpd-space-1x);
margin-left: 10px; /* To match mx_LegacyCallEvent */
margin-right: 10px;
min-width: 0;
.mx_LegacyCallEvent_sender {
font-weight: var(--cpd-font-weight-semibold);
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
overflow: hidden;
white-space: nowrap;
@@ -74,14 +74,14 @@ Please see LICENSE files in the repository root for full details.
align-items: center;
color: $secondary-content;
font-size: $font-12px;
gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
gap: var(--cpd-space-3x); /* See mx_IncomingLegacyCallToast_buttons */
margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
word-break: break-word;
max-width: fit-content;
.mx_LegacyCallEvent_content_button {
@mixin LegacyCallButton;
padding: 0 $spacing-12;
padding: 0 var(--cpd-space-3x);
font-size: inherit;
}
@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallEvent_narrow {
flex-direction: column;
align-items: unset;
gap: $spacing-4 $spacing-16;
gap: var(--cpd-space-1x) var(--cpd-space-4x);
height: unset;
min-width: 290px;
@@ -144,7 +144,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
&.mx_LegacyCallEvent_narrow {
gap: $spacing-8 $spacing-4;
gap: var(--cpd-space-2x) var(--cpd-space-1x);
}
}
}
@@ -153,7 +153,7 @@ Please see LICENSE files in the repository root for full details.
.mx_IRCLayout {
.mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
margin-inline-start: $spacing-4; /* display green line */
margin-inline-start: var(--cpd-space-1x); /* display green line */
}
}
}
apps/web/res/css/views/messages/_MImageReplyBody.pcss
+4 -4
View File
@@ -10,9 +10,9 @@ Please see LICENSE files in the repository root for full details.
.mx_MStickerBody_wrapper {
.mx_MImageBody_banner {
position: absolute;
bottom: $spacing-4;
left: $spacing-4;
padding: $spacing-4;
bottom: var(--cpd-space-1x);
left: var(--cpd-space-1x);
padding: var(--cpd-space-1x);
border-radius: var(--MBody-border-radius);
font-size: $font-15px;
user-select: none;
@@ -66,7 +66,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MImageReplyBody {
display: flex;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
.mx_MImageBody_thumbnail_container {
flex: 1;
apps/web/res/css/views/messages/_MPollBody.pcss
+3 -3
View File
@@ -47,7 +47,7 @@ $poll-max-width: 550px;
.mx_Spinner {
flex: 0;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
}
}
@@ -59,7 +59,7 @@ $poll-max-width: 550px;
.mx_MPollBody_allOptions {
display: grid;
gap: $spacing-16;
margin-bottom: $spacing-8;
gap: var(--cpd-space-4x);
margin-bottom: var(--cpd-space-2x);
max-width: $poll-max-width;
}
apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss
+1 -1
View File
@@ -15,5 +15,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_PollHistory_header.mx_Heading_h2 {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss
+6 -6
View File
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1 0;
align-content: flex-start;
display: grid;
gap: $spacing-20;
padding-right: $spacing-64;
margin: $spacing-32 0;
gap: var(--cpd-space-5x);
padding-right: var(--cpd-space-16x);
margin: var(--cpd-space-8x) 0;
&.mx_PollHistoryList_list_ENDED {
gap: $spacing-32;
gap: var(--cpd-space-8x);
}
}
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 0 $spacing-64;
padding: 0 var(--cpd-space-16x);
display: flex;
flex-direction: column;
align-items: center;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
.mx_PollHistoryList_loadMorePolls {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
}
apps/web/res/css/views/right_panel/_BaseCard.pcss
+1 -1
View File
@@ -87,7 +87,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_BaseCard_footer {
padding-top: $spacing-4;
padding-top: var(--cpd-space-1x);
text-align: center;
display: flex;
justify-content: space-around;
apps/web/res/css/views/right_panel/_ExtensionsCard.pcss
+1 -1
View File
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ExtensionsCard_container {
text-align: center;
margin: $spacing-20 var(--cpd-space-4x) 0;
margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
}
.mx_ExtensionsCard_Button {
apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss
+2 -2
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomSummaryCard_container {
text-align: center;
margin: $spacing-20 var(--cpd-space-4x) 0;
margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
}
.mx_RoomSummaryCard_roomName,
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
margin: var(--cpd-space-3x) 0 var(--cpd-space-1x);
}
.mx_RoomSummaryCard_bottomOptions {
apps/web/res/css/views/right_panel/_ThreadPanel.pcss
+3 -3
View File
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ThreadPanel_dropdown {
font: var(--cpd-font-body-sm-regular);
padding: 3px $spacing-4 3px $spacing-8;
padding: 3px var(--cpd-space-1x) 3px var(--cpd-space-2x);
border-radius: 4px;
line-height: 1.5;
user-select: none;
@@ -111,8 +111,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomView_MessageList {
padding-inline-start: $spacing-8;
padding-inline-end: $spacing-8;
padding-inline-start: var(--cpd-space-2x);
padding-inline-end: var(--cpd-space-2x);
content-visibility: visible;
}
apps/web/res/css/views/right_panel/_TimelineCard.pcss
+2 -2
View File
@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
.mx_EventTile_e2eIcon {
inset-inline-start: $spacing-8;
inset-inline-start: var(--cpd-space-2x);
}
}
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ReactionsRow {
/* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
}
.mx_ThreadSummary {
apps/web/res/css/views/right_panel/_UserInfo.pcss
+2 -2
View File
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
.mx_UserInfo_memberDetailsContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_RoomTile_titleContainer {
@@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content;
font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
margin: $spacing-4 0;
margin: var(--cpd-space-1x) 0;
}
p {
apps/web/res/css/views/rooms/_EventTile.pcss
+25 -25
View File
@@ -97,7 +97,7 @@ $left-gutter: 64px;
display: flex;
flex-flow: wrap;
align-items: center;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
.mx_ReplyChain--expanded {
@@ -236,7 +236,7 @@ $left-gutter: 64px;
}
.mx_ReplyChain {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
}
@@ -315,7 +315,7 @@ $left-gutter: 64px;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
padding-right: var(--cpd-space-2x);
}
> .mx_DisambiguatedProfile_mxid {
@@ -440,7 +440,7 @@ $left-gutter: 64px;
&[data-layout="group"] {
.mx_EventTile_avatar {
top: 14px;
left: $spacing-8;
left: var(--cpd-space-2x);
}
.mx_EventTile_line,
@@ -657,11 +657,11 @@ $left-gutter: 64px;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
/* The horizontal padding is added by github-markdown-css .markdown-body */
padding: $spacing-2 0;
padding: var(--cpd-space-0-5x) 0;
/* Avoid inline code blocks to be sticked when on multiple lines */
line-height: $font-22px;
/* Avoid the border to be glued to the other words */
margin-right: $spacing-2;
margin-right: var(--cpd-space-0-5x);
}
code {
@@ -860,15 +860,15 @@ $left-gutter: 64px;
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
padding-top: $spacing-12;
padding-bottom: $spacing-12;
padding-top: var(--cpd-space-3x);
padding-bottom: var(--cpd-space-3x);
}
/* Inserted adjacent to <pre> blocks, (See TextualBody) */
.mx_EventTile_button {
position: absolute;
top: $spacing-8;
right: $spacing-8;
top: var(--cpd-space-2x);
right: var(--cpd-space-2x);
visibility: hidden;
&.mx_EventTile_buttonBottom {
@@ -914,7 +914,7 @@ $left-gutter: 64px;
margin-right: 0;
span {
padding: $spacing-4 $spacing-8;
padding: var(--cpd-space-1x) var(--cpd-space-2x);
}
}
@@ -932,10 +932,10 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;
--topOffset: var(--cpd-space-3x);
--leftOffset: 48px;
$borderRadius: 8px;
$padding: $spacing-8;
$padding: var(--cpd-space-2x);
$hrHeight: 1px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */
@@ -1051,7 +1051,7 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"] {
.mx_ThreadPanel_replies {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
display: flex;
align-items: center;
position: relative;
@@ -1069,13 +1069,13 @@ $left-gutter: 64px;
.mx_ThreadSummary_icon {
display: inline-block;
margin-top: $spacing-8;
margin-bottom: $spacing-8;
margin-top: var(--cpd-space-2x);
margin-bottom: var(--cpd-space-2x);
> svg {
@mixin ThreadSummaryIcon;
vertical-align: middle;
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
margin-top: -2px;
}
@@ -1163,7 +1163,7 @@ $left-gutter: 64px;
&[data-layout="irc"],
&[data-layout="group"] {
padding-block-start: $spacing-16;
padding-block-start: var(--cpd-space-4x);
.mx_EventTile_line,
.mx_EventTile_footer {
@@ -1200,8 +1200,8 @@ $left-gutter: 64px;
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: $spacing-16; /* gap between the avatar and the sender ID */
padding-inline-start: $spacing-8;
gap: var(--cpd-space-4x); /* gap between the avatar and the sender ID */
padding-inline-start: var(--cpd-space-2x);
a {
flex: 1;
@@ -1265,7 +1265,7 @@ $left-gutter: 64px;
/* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout_group-padding-top: var(--cpd-space-1x);
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
@@ -1277,7 +1277,7 @@ $left-gutter: 64px;
}
.mx_ReplyChain {
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
}
&.mx_EventTile_info {
@@ -1297,7 +1297,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_emote {
padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
padding-top: var(--cpd-space-2x); /* add a bit more space for emotes so that avatars don't collide */
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1349,7 +1349,7 @@ $left-gutter: 64px;
blockquote,
pre,
table {
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
margin-bottom: var(--cpd-space-1x); /* 1/4 of the non-compact margin-bottom */
}
}
}
@@ -1360,7 +1360,7 @@ $left-gutter: 64px;
width: stretch;
align-items: center;
justify-content: space-between;
gap: $spacing-8;
gap: var(--cpd-space-2x);
margin-left: var(--leftOffset);
.mx_EventTile_truncated {
flex: 1;
apps/web/res/css/views/rooms/_ReplyPreview.pcss
+2 -2
View File
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
border-bottom: 1px solid $primary-hairline-color;
display: flex;
flex-flow: column;
row-gap: $spacing-8;
padding: $spacing-8 $spacing-8 0 0;
row-gap: var(--cpd-space-2x);
padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
.mx_ReplyPreview_header {
display: flex;
apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_RoomPreviewCard {
padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
padding: var(--cpd-space-8x) var(--cpd-space-6x) !important; /* Override SpaceRoomView's default padding */
margin: auto;
flex-grow: 1;
max-width: 480px;
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-24px;
color: $primary-content;
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
svg {
height: 1em;
width: 1em;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
color: $secondary-content;
vertical-align: -2px;
}
@@ -35,11 +35,11 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomPreviewCard_inviter {
display: flex;
align-items: center;
margin-bottom: $spacing-20;
margin-bottom: var(--cpd-space-5x);
font-size: $font-15px;
> div {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
.mx_RoomPreviewCard_inviter_name {
line-height: $font-18px;
@@ -75,18 +75,18 @@ Please see LICENSE files in the repository root for full details.
/* XXX Remove this when video rooms leave beta */
.mx_BetaCard_betaPill {
position: absolute;
inset-block-start: $spacing-32;
inset-inline-end: $spacing-24;
inset-block-start: var(--cpd-space-8x);
inset-inline-end: var(--cpd-space-6x);
}
}
h1.mx_RoomPreviewCard_name {
margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
margin: var(--cpd-space-4x) 0 !important; /* Override SpaceRoomView's default margins */
}
.mx_RoomPreviewCard_topic {
line-height: $font-22px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
max-height: 160px;
overflow-y: auto;
}
@@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
.mx_FacePile {
display: flex;
align-items: center;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
@@ -104,9 +104,9 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomPreviewCard_joinButtons {
margin-top: $spacing-20;
margin-top: var(--cpd-space-5x);
display: flex;
gap: $spacing-20;
gap: var(--cpd-space-5x);
.mx_AccessibleButton {
max-width: 200px;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
ol {
margin-top: 0;
margin-bottom: 0;
padding-inline-start: $spacing-28;
padding-inline-start: var(--cpd-space-7x);
}
/* Make list type disc to match rich text editor */
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
margin-top: 0;
margin-bottom: 0;
padding: $spacing-8 $spacing-12;
padding: var(--cpd-space-2x) var(--cpd-space-3x);
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
@@ -90,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
padding: $spacing-2;
padding: var(--cpd-space-0-5x);
&:empty {
border: unset;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+2 -2
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_LinkModal {
padding: $spacing-32;
padding: var(--cpd-space-8x);
max-width: 600px;
height: 341px;
box-sizing: border-box;
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
flex: 1;
gap: $spacing-8;
gap: var(--cpd-space-2x);
margin-top: 7px;
.mx_LinkModal_Field {
apps/web/res/css/views/settings/_FontScalingPanel.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
border: 1px solid $quinary-content;
border-radius: 10px;
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
padding: 0 var(--cpd-space-4x) var(--FontScalingPanel_preview-padding-block) var(--cpd-space-4x);
pointer-events: none;
display: flow-root;
apps/web/res/css/views/settings/_ImageSizePanel.pcss
+1 -1
View File
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ImageSizePanel_radios {
display: flex;
flex-direction: row;
gap: $spacing-16;
gap: var(--cpd-space-4x);
> label {
margin-right: 68px; /* keep the boxes separate */
apps/web/res/css/views/settings/_IntegrationManager.pcss
+1 -1
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
}
h3 {
margin-block: $spacing-20;
margin-block: var(--cpd-space-5x);
}
.mx_IntegrationManager_loading,
apps/web/res/css/views/settings/_Notifications.pcss
+1 -1
View File
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
justify-self: start;
padding-right: 30%;
/* collapse half of the grid-gap */
margin-top: -$spacing-4;
margin-top: calc(-1 * var(--cpd-space-1x));
}
.mx_UserNotifSettings_floatingSection {
apps/web/res/css/views/settings/_RoomProfileSettings.pcss
+4 -4
View File
@@ -17,11 +17,11 @@ Please see LICENSE files in the repository root for full details.
margin-inline-end: 54px;
.mx_Field {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
.mx_RoomProfileSettings_profile_controls_topic {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
& > textarea {
font-family: inherit;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomProfileSettings_profile_controls_userId {
margin-inline-end: $spacing-20;
margin-inline-end: var(--cpd-space-5x);
}
}
}
@@ -43,6 +43,6 @@ Please see LICENSE files in the repository root for full details.
display: flex;
gap: var(--cpd-space-4x);
margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
margin-bottom: $spacing-28;
margin-bottom: var(--cpd-space-7x);
}
}
apps/web/res/css/views/settings/_SetIntegrationManager.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
}
form {
margin-top: var(--cpd-space-3x);
apps/web/res/css/views/settings/_SettingsFieldset.pcss
+1 -1
View File
@@ -37,5 +37,5 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsFieldset_content {
display: flex;
flex-direction: column;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
+1 -1
View File
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
+2 -2
View File
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsSection_subSections {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: $spacing-32;
gap: var(--cpd-space-8x);
margin: $spacing-16 0;
margin: var(--cpd-space-4x) 0;
}
apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsTab_section {
$end-gutter: 80px;
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
.mx_SettingsFlag {
margin-inline-end: $end-gutter;
@@ -82,7 +82,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsTab_sections {
display: grid;
grid-template-columns: 1fr;
gap: $spacing-32;
gap: var(--cpd-space-8x);
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
}
apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+2 -2
View File
@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_SecurityRoomSettingsTab_advancedSection {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
.mx_SecurityRoomSettingsTab_warning {
display: flex;
align-items: center;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
svg {
color: #ff0064; /* Match legacy icon colour until redesign */
apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+3 -3
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
padding: 0;
width: 100%;
display: grid;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
.mx_KeyboardShortcut_shortcutRow,
@@ -23,10 +23,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_KeyboardShortcut_shortcutRow {
column-gap: $spacing-8;
column-gap: var(--cpd-space-2x);
}
.mx_KeyboardShortcut {
flex-wrap: nowrap;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
}
apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+3 -3
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SecurityUserSettingsTab_bulkOptions {
display: flex;
flex-direction: row;
column-gap: $spacing-8;
column-gap: var(--cpd-space-2x);
}
.mx_SecurityUserSettingsTab_ignoredUsers {
@@ -18,11 +18,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
}
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_SecurityUserSettingsTab_warning {