diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index ef75fc154bd..4860224e723 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -36,6 +36,11 @@ $left-gutter: 64px; overflow-y: hidden; } + .mx_EventTile_line, + .mx_EventTile_reply { + text-align: start; + } + .mx_EventTile_receiptSent, .mx_EventTile_receiptSending { position: relative; @@ -142,7 +147,7 @@ $left-gutter: 64px; grid-template-columns: 1fr 100px; .mx_EventTile_line { - margin-right: 0; + margin-inline-end: 0; grid-column: 1 / 3; padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */ } @@ -187,7 +192,7 @@ $left-gutter: 64px; } .mx_EventTile_reply { - margin-right: 10px; + margin-inline-end: 10px; } .mx_EventTile_msgOption { @@ -320,7 +325,7 @@ $left-gutter: 64px; .mx_EventTile_avatar { left: var(--EventTile_irc_line_info-margin-inline-start); top: 0; - margin-right: var(--right-padding); + margin-inline-end: var(--right-padding); padding-block: var(--EventTile_irc_line-padding-block); } @@ -340,7 +345,7 @@ $left-gutter: 64px; .mx_EventTile_reply { padding-top: var(--EventTile_group_line-spacing-block-start); padding-bottom: var(--EventTile_group_line-spacing-block-end); - padding-left: var(--EventTile_group_line-spacing-inline-start); + padding-inline-start: var(--EventTile_group_line-spacing-inline-start); line-height: var(--EventTile_group_line-line-height); } @@ -367,7 +372,7 @@ $left-gutter: 64px; .mx_ThreadSummary, .mx_ThreadSummary_icon { - margin-left: $left-gutter; + margin-inline-start: $left-gutter; } .mx_ReactionsRow { @@ -376,7 +381,7 @@ $left-gutter: 64px; > .mx_DisambiguatedProfile { line-height: $font-20px; - margin-left: $left-gutter; + margin-inline-start: $left-gutter; max-width: calc(100% - $left-gutter); } @@ -391,7 +396,7 @@ $left-gutter: 64px; .mx_ThreadSummary, .mx_ThreadSummary_icon, .mx_EventTile_line { - margin-right: $inline-end-margin; + margin-inline-end: $inline-end-margin; min-height: $font-14px; } @@ -501,7 +506,7 @@ $left-gutter: 64px; > .mx_EventTile_line { /* add --right-padding value of MessageTimestamp and avatar only */ /* stylelint-disable-next-line declaration-colon-space-after */ - padding-left: calc( + padding-inline-start: calc( var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding) ); } @@ -509,11 +514,11 @@ $left-gutter: 64px; &[data-layout="group"] { .mx_EventTile_line { - padding-left: $left-gutter; + padding-inline-start: $left-gutter; } .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { - /* override padding-left $left-gutter */ + /* override padding-inline-start $left-gutter */ padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); } } @@ -529,7 +534,7 @@ $left-gutter: 64px; */ overflow-y: hidden; overflow-x: hidden; - margin-right: var(--EventTile_content-margin-inline-end); + margin-inline-end: var(--EventTile_content-margin-inline-end); .mx_EventTile_edited, .mx_EventTile_pendingModeration { @@ -537,7 +542,7 @@ $left-gutter: 64px; font-size: $font-12px; color: $roomtopic-color; display: inline-block; - margin-left: 9px; + margin-inline-start: 9px; /* TODO: use a spacing variable */ } .mx_EventTile_edited { @@ -551,6 +556,11 @@ $left-gutter: 64px; color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */ font-size: $font-14px; + ol, + ul { + padding-inline: 2em 0; /* replace with logical ones for correct text alignment in RTL languages */ + } + pre, code { font-family: $monospace-font-family !important; @@ -566,7 +576,7 @@ $left-gutter: 64px; // 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-inline-end: $spacing-2; } code { @@ -617,7 +627,10 @@ $left-gutter: 64px; } blockquote { - border-left: 2px solid $blockquote-bar-color; + /* Override the default values with logical ones */ + border-inline-start: 2px solid $blockquote-bar-color; + border-inline-end: 0; + border-radius: 2px; padding: 0 10px; } @@ -802,7 +815,7 @@ $left-gutter: 64px; & span { text-align: right; display: block; - padding-left: 1em; + padding-inline-start: 1em; } } @@ -830,11 +843,11 @@ $left-gutter: 64px; text-align: center; /* Remove some of the default tile padding so that the error is centered */ - margin-right: 0; + margin-inline-end: 0; .mx_EventTile_line { - padding-left: 0; - margin-right: 0; + padding-inline-start: 0; + margin-inline-end: 0; span { padding: $spacing-4 $spacing-8; @@ -842,7 +855,7 @@ $left-gutter: 64px; } a { - margin-left: 1em; + margin-inline-start: 1em; } } @@ -1006,7 +1019,7 @@ $left-gutter: 64px; overflow: hidden; /* ensure correct overflow behavior */ text-overflow: ellipsis; position: initial; - margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */ + margin-inline-start: auto; /* to ensure it's end-aligned even if it's the only element of its parent */ } &:hover { @@ -1153,7 +1166,7 @@ $left-gutter: 64px; align-items: center; .mx_DisambiguatedProfile { - margin-left: 8px; + margin-inline-start: 8px; flex: 1; } } @@ -1323,7 +1336,7 @@ $left-gutter: 64px; align-items: center; justify-content: space-between; gap: $spacing-8; - margin-left: var(--leftOffset); + margin-inline-start: var(--leftOffset); .mx_EventTile_truncated { flex: 1; overflow: hidden; @@ -1335,6 +1348,6 @@ $left-gutter: 64px; /* Media query for mobile UI */ @media only screen and (max-width: 480px) { .mx_EventTile_content { - margin-right: 0; + margin-inline-end: 0; } }