riot-web/res/css/views/rooms/_EventTile.pcss

1486 lines
42 KiB
Plaintext
Raw Normal View History

/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020-2021 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.
*/
$left-gutter: 64px;
.mx_EventTile {
--EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */
--EventTile_group_line-spacing-block-start: 1px;
--EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: $left-gutter;
--EventTile_group_line-line-height: $font-22px;
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
--EventTile_ThreadSummary-line-height: calc(2 * $font-12px);
flex-shrink: 0;
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
max-width: 100%;
clear: both; /* TODO: check if this is necessary */
padding-top: 18px;
font-size: $font-14px;
position: relative;
.mx_EventTile_avatar {
cursor: pointer;
user-select: none;
}
.mx_EventTile_body {
overflow-y: hidden;
}
.mx_EventTile_receiptSent,
.mx_EventTile_receiptSending {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
&::before {
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
width: 16px;
height: 16px;
2022-12-12 12:24:14 +01:00
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
.mx_EventTile_receiptSent::before {
2022-12-12 12:24:14 +01:00
mask-image: url("$(res)/img/element-icons/circle-sent.svg");
}
.mx_EventTile_receiptSending::before {
2022-12-12 12:24:14 +01:00
mask-image: url("$(res)/img/element-icons/circle-sending.svg");
}
.mx_EventTile_content {
&.mx_EditMessageComposer,
&.mx_EditWysiwygComposer {
/* Make sure the formatting bar is visible */
overflow: visible;
}
}
.mx_EventTile_searchHighlight {
background-color: $accent;
color: $accent-fg-color;
border-radius: 5px;
padding-inline: 2px;
cursor: pointer;
a {
background-color: $accent;
color: $accent-fg-color;
}
}
.mx_EventTileBubble {
margin-block: var(--EventTileBubble_margin-block);
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
display: flex;
align-items: center; /* on every layout */
}
}
.mx_DisambiguatedProfile {
color: $primary-content;
font-size: $font-14px;
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
}
.mx_ReactionsRow {
display: flex;
flex-flow: wrap;
align-items: center;
gap: $spacing-4;
}
.mx_ReplyChain--expanded {
.mx_EventTile_body {
display: block;
overflow-y: scroll;
}
.mx_EventTile_collapsedCodeBlock {
/* !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre */
display: block !important;
}
}
.mx_RoomView_searchResultsPanel & {
&.mx_EventTile_contextual {
opacity: 0.4;
}
}
&.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body,
&.mx_EventTile_highlight .mx_EventTile_edited {
color: $alert;
}
&.mx_EventTile_bubbleContainer {
display: grid;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
margin-right: 0;
grid-column: 1 / 3;
padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */
}
.mx_EventTile_msgOption {
grid-column: 2;
}
&:hover {
.mx_EventTile_line {
/* To avoid bubble events being highlighted */
background-color: inherit !important;
}
}
}
&.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}
&[data-layout="irc"],
&[data-layout="group"] {
--selected-message-border-width: 4px;
/* TODO: adjust the values for IRC layout */
--EventTile-box-shadow-offset-x: calc(50px + var(--selected-message-border-width));
--EventTile-box-shadow-spread-radius: -50px;
.mx_EventTile_e2eIcon {
position: absolute;
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
justify-content: flex-start;
min-height: $font-44px;
min-width: $font-44px;
}
}
.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
border-radius: 8px;
}
.mx_EventTile_reply {
margin-right: 10px;
}
.mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
width: 90px;
/* Hack to stop the height of this pushing the messages apart.
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
a {
text-decoration: none;
}
}
&.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body {
.mx_EventTile_line {
background-color: $event-highlight-bg-color;
}
}
&.focus-visible:focus-within,
&.mx_EventTile_actionBarFocused,
&.mx_EventTile_isEditing,
&.mx_EventTile_selected {
.mx_EventTile_line {
background-color: $event-selected-color;
}
}
/* this is used for the tile for the event which is selected via the URL. */
&.mx_EventTile_isEditing,
&.mx_EventTile_selected {
> .mx_EventTile_line {
/* TODO: ultimately we probably want some transition on here. */
2022-12-12 12:24:14 +01:00
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
$accent;
}
}
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:40:19 +02:00
&.mx_EventTile_info {
.mx_EventTile_e2eIcon {
top: 0;
}
}
&.mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}
&:hover {
.mx_EventTile_line {
background-color: $event-selected-color;
}
&.mx_EventTile_verified .mx_EventTile_line {
2022-12-12 12:24:14 +01:00
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
$e2e-verified-color;
}
&.mx_EventTile_unverified .mx_EventTile_line {
2022-12-12 12:24:14 +01:00
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
$e2e-unverified-color;
}
&.mx_EventTile_unknown .mx_EventTile_line {
2022-12-12 12:24:14 +01:00
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
$e2e-unknown-color;
}
}
}
&[data-layout="bubble"],
&[data-layout="group"] {
.mx_EventTileBubble {
margin-inline: auto;
}
.mx_ReplyChain {
margin-bottom: $spacing-8;
}
}
&[data-layout="irc"] {
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
--EventTile_irc_line-padding-block: 1px;
/* add --right-padding value of MessageTimestamp only */
/* stylelint-disable-next-line declaration-colon-space-after */
--EventTile_irc_line_info-margin-inline-start: calc(
var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
);
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
display: flex;
align-items: flex-start;
padding-top: 0;
> a {
text-decoration: none; /* timestamps are links which shouldn't be underlined */
min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
}
> * {
margin-right: var(--right-padding);
}
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
height: var(--irc-line-height);
}
.mx_EventTile_avatar,
.mx_DisambiguatedProfile,
.mx_EventTile_e2eIcon,
.mx_EventTile_msgOption {
flex-shrink: 0;
}
.mx_EventTile_avatar {
order: 1;
position: relative;
display: flex;
align-items: center;
/* Need to use important to override the js provided height and width values. */
> .mx_BaseAvatar,
> .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
line-height: $font-15px !important;
}
}
.mx_DisambiguatedProfile {
order: 2;
width: var(--name-width);
margin-inline-end: 0; /* override mx_EventTile > * */
> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
margin-left: 0; /* Override the inherited margin. */
padding: 0 5px; /* TODO: Use a spacing variable */
}
&:hover {
overflow: visible;
z-index: 10;
> .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
}
> .mx_DisambiguatedProfile_mxid {
visibility: visible;
opacity: 1;
background-color: $event-selected-color;
}
}
}
.mx_EventTile_e2eIcon {
padding: 0;
flex-grow: 0;
background-position: center;
}
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody {
display: inline-block;
}
.mx_ReplyTile {
.mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */
}
}
}
.mx_EventTile_line,
.mx_EventTile_reply {
order: 3;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
.mx_EventTile_reply {
order: 4;
}
.mx_EventTile_msgOption {
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
order: 5;
.mx_ReadReceiptGroup {
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
inset-block-start: -0.3rem; /* (var(--irc-line-height) - avatar height) / 2 */
}
}
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
.mx_ReplyChain {
margin: 0;
}
.mx_MessageTimestamp {
text-align: right;
}
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
.mx_EditMessageComposer_buttons {
position: relative;
}
.mx_EventTileBubble {
position: relative;
left: var(--EventTile_irc_line_info-margin-inline-start);
&.mx_cryptoEvent {
left: unset;
}
}
.mx_ReplyTile .mx_EventTileBubble {
left: unset; /* Cancel the value specified above for the tile inside ReplyTile */
}
&.mx_EventTile_isEditing > .mx_EventTile_line {
.mx_EditMessageComposer {
/* add space for the stroke on box-shadow */
padding-inline-start: calc(
var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline)
);
}
}
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:40:19 +02:00
&.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-margin-inline-start);
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:40:19 +02:00
top: 0;
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}
.mx_EventTile_line {
margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
}
Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:06:51 +02:00
.mx_ViewSourceEvent, /* For hidden events */
.mx_TextualEvent {
line-height: var(--irc-line-height);
}
}
&.mx_EventTile_emote {
.mx_EventTile_avatar {
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
}
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:40:19 +02:00
}
}
&[data-layout="group"] {
.mx_EventTile_avatar {
top: 14px;
left: $spacing-8;
}
.mx_EventTile_line,
.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);
line-height: var(--EventTile_group_line-line-height);
}
.mx_EventTile_e2eIcon {
inset: 6px 0 0 44px;
}
.mx_EventTile_msgOption {
margin-inline-end: 10px;
.mx_ReadReceiptGroup {
/* This aligns the avatar with the last line of the */
/* message. We want to move it one line up */
/* See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss */
inset-block-start: calc(-$font-22px - 3px);
}
}
.mx_MessageTimestamp {
position: absolute;
left: 0;
text-align: center;
}
.mx_ThreadSummary,
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
.mx_ThreadSummary_icon {
margin-left: $left-gutter;
}
.mx_ReactionsRow {
margin: $spacing-4 64px;
}
> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
max-width: calc(100% - $left-gutter);
}
> .mx_EventTile_avatar {
position: absolute;
z-index: 9;
}
.mx_RoomView_timeline_rr_enabled & {
$inline-end-margin: 80px; /* TODO: Use a spacing variable */
.mx_ThreadSummary,
.mx_ThreadSummary_icon,
.mx_EventTile_line {
margin-right: $inline-end-margin;
min-height: $font-14px;
}
.mx_ThreadSummary {
/* leave space on both left & right gutters */
max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px);
}
/* on ELS we need the margin to allow interaction with the expand/collapse button */
/* which is normally in the RR gutter */
}
&.mx_EventTile_continuation {
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
padding-top: 0;
}
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:40:19 +02:00
&.mx_EventTile_info {
$spacing-block-start: 3px;
$spacing-block-end: 2px;
padding-top: 0;
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
margin: $spacing-block-start 0 $spacing-block-end;
}
.mx_EventTile_avatar {
top: initial;
inset-inline-start: $left-gutter;
height: 14px;
}
.mx_EventTile_line {
padding-block: $spacing-block-start $spacing-block-end;
/* 20px: avatar area */
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:40:19 +02:00
.mx_MessageTimestamp {
top: 0;
}
}
&.mx_EventTile_selected .mx_EventTile_line {
/* TODO: check if this would be necessary; */
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
}
&:hover {
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-inline-start: calc($left-gutter + 18px + var(--selected-message-border-width));
}
}
}
&[data-layout="bubble"] {
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
/* Other half of the gutter is provided by margin-bottom on the last tile
of the section */
margin-top: calc(var(--gutterSize) / 2);
margin-left: var(--EventTile_bubble-margin-inline-start);
/* Reset default values. TODO: remove */
max-width: unset;
padding-top: 0;
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
position: absolute;
inset-block-start: auto;
/* as close to right gutter without clipping as possible */
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
/* (EventTileLine.line-height - ReadReceiptGroup.height) / 2 */
/* this centers the ReadReceiptGroup if weve got a single line */
inset-block-end: calc(($font-18px - 24px) / 2);
}
}
.mx_EventTileBubble {
/* Timestamps are inside the tile, so the width can be less constrained */
max-width: 600px;
}
&.mx_EventTile_continuation {
margin-top: 2px;
}
&.mx_EventTile_lastInSection {
/* Other half of the gutter is provided by margin-top on the first
tile of the section */
margin-bottom: calc(var(--gutterSize) / 2);
}
}
}
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
.mx_GenericEventListSummary {
&[data-layout="irc"],
&[data-layout="group"] {
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
.mx_EventTile_line .mx_RedactedBody {
line-height: 1; /* remove spacing between lines */
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
}
}
&[data-layout="irc"] {
/* Apply only collapsed events block */
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
> .mx_EventTile_line {
/* add --right-padding value of MessageTimestamp and avatar only */
/* stylelint-disable-next-line declaration-colon-space-after */
2022-12-12 12:24:14 +01:00
padding-left: calc(
var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
2022-12-12 12:24:14 +01:00
);
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
}
}
&[data-layout="group"] {
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
.mx_EventTile_line {
padding-left: $left-gutter;
}
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
/* override padding-left $left-gutter */
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 12:44:23 +02:00
}
}
}
2021-07-21 11:41:52 +02:00
.mx_EventTile_content {
/*
all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
horizontal scrollbars occasionally appearing, like in
https://github.com/vector-im/vector-web/issues/1154
*/
2021-07-21 11:41:52 +02:00
overflow-y: hidden;
overflow-x: hidden;
margin-right: var(--EventTile_content-margin-inline-end);
.mx_EventTile_edited,
.mx_EventTile_pendingModeration {
user-select: none;
font-size: $font-12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
}
.mx_EventTile_edited {
cursor: pointer;
}
.markdown-body {
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
font-size: $font-14px;
pre,
code {
font-family: $monospace-font-family !important;
background-color: $system;
}
code:not(pre *) {
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
// The horizontal padding is added by gfm.css .markdown-body
padding: $spacing-2 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;
}
code {
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}
pre {
/* have to use overlay rather than auto otherwise Linux and Windows */
/* Chrome gets very confused about vertical spacing: */
/* https://github.com/vector-im/vector-web/issues/754 */
overflow-x: overlay;
overflow-y: visible;
&::-webkit-scrollbar-corner {
background: transparent;
}
border: 1px solid $quinary-content;
code {
white-space: pre; /* we want code blocks to be scrollable and not wrap */
> * {
display: inline;
}
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit !important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
h1,
h2 {
font-size: 1.5em;
border-bottom: none !important; /* override GFM */
}
a {
color: $accent-alt;
}
blockquote {
border-left: 2px solid $blockquote-bar-color;
border-radius: 2px;
padding: 0 10px;
}
/*
// actually, removing the Italic TTF provides
// better results seemingly
// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
em {
transform: skewX(-14deg);
display: inline-block;
}
*/
/* Override nested lists being lower-roman */
2022-12-12 12:24:14 +01:00
ol ol,
ul ol {
list-style-type: revert;
}
/* Make list type disc to match rich text editor */
ul {
list-style-type: disc;
}
}
2021-07-21 11:41:52 +02:00
}
/* Spoiler stuff */
.mx_EventTile_spoiler {
cursor: pointer;
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: $font-11px;
}
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
.mx_EventTile_spoiler_content {
filter: blur(5px) saturate(0.1) sepia(1);
transition-duration: 0.5s;
}
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
&.visible > .mx_EventTile_spoiler_content {
filter: none;
}
}
.mx_EventTile_bigEmoji {
font-size: 48px;
line-height: 57px;
.mx_Emoji {
font-size: inherit !important;
}
}
.mx_EventTile_e2eIcon {
2021-07-07 15:13:58 +02:00
position: relative;
width: 14px;
height: 14px;
display: block;
background-repeat: no-repeat;
background-size: contain;
&::before,
&::after {
content: "";
display: block;
position: absolute;
inset: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
&::before {
mask-size: 80%;
}
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
&.mx_EventTile_e2eIcon_warning::after {
2022-12-12 12:24:14 +01:00
mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $e2e-warning-color;
}
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
&.mx_EventTile_e2eIcon_normal::after {
2022-12-12 12:24:14 +01:00
mask-image: url("$(res)/img/e2e/normal.svg");
2021-11-16 11:10:44 +01:00
background-color: $header-panel-text-primary-color;
}
Improve decryption error UI by consolidating error messages and providing instructions when possible (#9544) * Improve decryption error UI by consolidating error messages and providing instructions when possible * Fix TS strict errors * Rename .scss to .pcss * Avoid accessing clipboard, Cypress doesn't like it * Display DecryptionFailureBar alongside other AuxPanel bars * Add comments * Add small margin off-screen for visible decryption failures * Fix some more TS strict errors * Add unit tests for DecryptionFailureBar * Add button to resend key requests manually * Remove references to matrix-js-sdk crypto internals * Add hysteresis to visible decryption failures * Add comment Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comment Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Don't create empty div if we're not showing resend requests button * cancel updateSessions on unmount * Update unit tests * Fix lint and implicit any * Simplify visible event bounds checking * Adjust cypress test descriptions * Add percy snapshots * Update src/components/structures/TimelinePanel.tsx Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comments on TimelinePanel IState * comment * Add names to percy snapshots * Show Resend Key Requests button when there are sessions that haven't already been requested via this bar * We no longer request keys from senders * update i18n * update expected text in cypress test * don't download keys ourselves, update device info in response to updates from client * fix ts strict errors * visibledecryptionfailures undefined handling * Fix implicitAny errors Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-12-15 18:24:33 +01:00
&.mx_EventTile_e2eIcon_decryption_failure::after {
mask-image: url("$(res)/img/e2e/decryption-failure.svg");
background-color: $secondary-content;
}
}
.mx_EventTile_body {
a:hover {
text-decoration: underline;
}
pre {
border: 1px solid transparent;
.mx_EventTile:hover &,
.mx_EventTile.focus-visible:focus-within & {
border: 1px solid $tertiary-content;
}
}
/* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */
&.markdown-body img {
object-fit: contain;
object-position: left top;
}
.mx_EventTile_clamp & {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
}
.mx_EventTile_pre_container {
/* For correct positioning of _copyButton (See TextualBody) */
position: relative;
&:focus-within,
&:hover {
.mx_EventTile_button {
visibility: visible;
}
}
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
padding-top: $spacing-12;
padding-bottom: $spacing-12;
}
/* Inserted adjacent to <pre> blocks, (See TextualBody) */
.mx_EventTile_button {
position: absolute;
top: $spacing-8;
right: $spacing-8;
width: 19px;
height: 19px;
visibility: hidden;
background-color: $message-action-bar-fg-color;
&.mx_EventTile_buttonBottom {
top: 33px;
}
&.mx_EventTile_collapseButton,
&.mx_EventTile_expandButton {
mask-size: 75%;
}
}
.mx_EventTile_copyButton {
height: 17px;
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
right: 9px;
width: 17px;
}
}
}
.mx_EventTile_lineNumbers {
float: left;
margin: 0 0.5em 0 -1.5em;
color: gray;
& span {
text-align: right;
display: block;
padding-left: 1em;
}
}
.mx_EventTile_button {
display: inline-block;
cursor: pointer;
}
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
mask-position: center;
mask-repeat: no-repeat;
Prevent possible regressions of EventTile structurally (#8647) * '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 22:16:50 +02:00
}
.mx_EventTile_collapseButton {
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
.mx_EventTile_expandButton {
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}
.mx_EventTile_tileError {
color: red;
2020-03-26 14:47:32 +01:00
text-align: center;
/* Remove some of the default tile padding so that the error is centered */
2020-04-06 12:44:46 +02:00
margin-right: 0;
2021-08-24 10:09:28 +02:00
2020-04-06 12:44:46 +02:00
.mx_EventTile_line {
padding-left: 0;
margin-right: 0;
span {
padding: $spacing-4 $spacing-8;
}
}
a {
margin-left: 1em;
}
2020-02-25 11:20:42 +01:00
}
2021-07-07 12:04:28 +02:00
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
2022-12-12 12:24:14 +01:00
[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar,
2021-07-07 12:04:28 +02:00
.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
visibility: visible;
}
/* Inverse of the above to *disable* the animation on any indicators. This approach */
/* is less pretty, but is easier to target because otherwise we need to define the */
/* animation for when it's shown which means duplicating the style definition in */
/* multiple places. */
2022-12-12 12:24:14 +01:00
.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
&:not(.focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
animation: none;
}
}
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;
--leftOffset: 48px;
$borderRadius: 8px;
$padding: $spacing-8;
$hrHeight: 1px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
padding: $padding $spacing-24 $padding $padding;
border-radius: $borderRadius;
display: flex;
flex-flow: wrap;
align-items: center;
&::after,
&::before {
content: "";
position: absolute;
}
&::after {
$inset-block-start: auto;
$inset-inline-end: calc(32px - $padding);
$inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */
$inset-inline-start: calc(var(--leftOffset) + $padding);
inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;
height: $hrHeight;
background-color: $quinary-content;
pointer-events: none; /* disable the message action bar on hover */
}
&::before {
inset: 0;
pointer-events: none; /* ensures the title for the sender name can be correctly displayed */
}
/* Display notification dot */
&[data-notification]::before,
.mx_NotificationBadge {
position: absolute;
$notification-inset-block-start: 14px; /* 14px: align the dot with the timestamp row */
/* !important to fix overly specific CSS selector applied on mx_NotificationBadge */
width: $notification-dot-size !important;
height: $notification-dot-size !important;
border-radius: 50%;
inset: $notification-inset-block-start $spacing-8 auto auto;
}
.mx_NotificationBadge_count {
display: none;
}
&[data-notification="total"]::before {
background-color: $room-icon-unread-color;
}
&[data-notification="highlight"]::before {
background-color: $alert;
}
&:last-child {
&::after {
content: unset;
}
margin-bottom: 0;
}
&:first-child {
margin-top: 0;
}
.mx_EventTile_avatar {
inset: $padding auto auto $padding;
}
.mx_EventTile_details {
overflow: hidden;
}
.mx_DisambiguatedProfile {
display: inline-flex;
align-items: center;
flex: 1;
.mx_DisambiguatedProfile_displayName,
.mx_DisambiguatedProfile_mxid {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_DisambiguatedProfile_displayName {
flex: none;
max-width: 100%;
}
.mx_DisambiguatedProfile_mxid {
flex: 1;
}
}
.mx_EventTile_line {
width: 100%;
box-sizing: border-box;
padding-bottom: 0;
padding-inline-start: var(--leftOffset);
.mx_ThreadPanel_replies {
margin-top: $spacing-8;
display: flex;
align-items: center;
position: relative;
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
&::before {
@mixin ThreadSummaryIcon;
}
.mx_ThreadPanel_replies_amount {
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
@mixin ThreadRepliesAmount;
line-height: var(--EventTile_ThreadSummary-line-height);
font-size: $font-12px; /* Same font size as the counter on the main panel */
}
.mx_ThreadSummary_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.mx_MessageTimestamp {
font-size: $font-12px;
width: unset; /* Cancel the default width */
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 */
}
&:hover {
background-color: $system;
}
/* ThreadsList has always group layout */
&[data-layout="group"]:hover {
.mx_EventTile_line {
background-color: $system; /* override $event-selected-color */
box-shadow: none; /* don't show the verification left stroke in the thread list */
}
}
2021-08-23 15:44:44 +02:00
}
/* For style rules of ThreadView, see _ThreadPanel.pcss */
2021-08-17 12:10:02 +02:00
.mx_ThreadView {
--ThreadView_group_spacing-start: 56px; /* 56px: 64px - 8px (padding) */
--ThreadView_group_spacing-end: 8px; /* same as padding */
2021-08-17 12:10:02 +02:00
.mx_EventTile {
display: flex;
flex-direction: column;
.mx_EventTile_roomName {
display: none;
}
/* handling for hidden events (e.g reactions) in the thread view */
&.mx_EventTile_info {
.mx_EventTile_avatar {
position: absolute;
top: 1.5px; /* Align with hidden event content */
margin-top: 0;
margin-bottom: 0;
width: 14px; /* avatar img size */
height: 14px; /* avatar img size */
}
.mx_ViewSourceEvent_toggle {
display: none; /* hide the hidden event expand button, not enough
space, view source can still be used */
}
&.mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile_line {
$line-height: $font-12px;
padding-inline-start: 0;
line-height: $line-height;
.mx_EventTile_content,
.mx_RedactedBody {
width: auto;
font-size: $line-height;
}
}
&[data-layout="irc"],
&[data-layout="group"] {
padding-top: 0;
.mx_EventTile_avatar {
/* 14px: avatar width, 4px: align with text */
left: calc(var(--MessageTimestamp-width) + 14px - 4px);
z-index: 9; /* position above the hover styling */
}
.mx_MessageTimestamp {
top: 2px; /* Align with avatar */
}
&.mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile_line {
.mx_EventTile_content,
.mx_RedactedBody {
/* 14px: avatar width, 6px: 20px - 14px */
margin-inline-start: calc(14px + 6px);
}
}
}
&[data-layout="bubble"] {
.mx_EventTile_avatar {
inset-inline-start: 0;
}
&.mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile_line {
.mx_EventTile_content,
.mx_RedactedBody {
margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
}
}
}
}
&[data-layout="irc"],
&[data-layout="group"] {
padding-block-start: $spacing-16;
.mx_EventTile_line,
.mx_ReactionsRow {
margin-inline-end: var(--ThreadView_group_spacing-end);
}
.mx_EventTile_line {
padding-block: var(--BaseCard_EventTile_line-padding-block);
/* Add padding to align message text with summary text */
/* See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */
padding-inline-start: var(--ThreadView_group_spacing-start);
.mx_EventTile_content {
&.mx_EditMessageComposer {
padding-inline-start: 0; /* align start of first letter with that of the event body */
}
}
}
.mx_ReactionsRow {
/* Align with message text and summary text */
margin-inline-start: var(--ThreadView_group_spacing-start);
}
&.mx_EventTile_continuation {
padding-block-start: 0; /* Cancel padding-block-start */
}
}
&[data-layout="group"] {
width: 100%;
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: $spacing-16; /* gap between the avatar and the sender ID */
padding-inline-start: $spacing-8;
a {
flex: 1;
min-width: unset;
max-width: 100%;
display: flex;
align-items: center;
.mx_DisambiguatedProfile {
margin-left: 8px;
flex: 1;
}
}
}
.mx_MessageTimestamp {
position: absolute; /* for IRC layout */
top: 2px; /* Align with mx_EventTile_content */
}
&:hover {
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-inline-start: 0;
}
}
}
&[data-layout="bubble"] {
margin-inline: var(--BaseCard_EventTile-spacing-inline);
&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; /* enable background color on hover */
}
.mx_ReactionsRow {
position: relative; /* display on hover */
}
.mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0;
padding-inline-start: 0;
max-width: var(--EventBubbleTile_line-max-width);
}
&[data-self="true"] {
align-items: flex-end;
.mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */
}
}
}
2021-11-02 14:18:51 +01:00
}
.mx_GenericEventListSummary {
&[data-layout="irc"],
&[data-layout="group"] {
> .mx_EventTile_line {
padding-inline-start: var(--ThreadView_group_spacing-start); /* align summary text with message text */
padding-inline-end: var(--ThreadView_group_spacing-end); /* align summary text with message text */
}
}
}
2021-08-17 12:10:02 +02:00
}
/* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout {
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_ReplyChain {
margin-bottom: $spacing-4;
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
&.mx_EventTile_info {
padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
font-size: $font-13px;
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_e2eIcon,
.mx_EventTile_avatar {
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_line,
.mx_EventTile_reply {
line-height: $font-20px;
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
&.mx_EventTile_emote {
padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: 1px;
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
&.mx_EventTile_continuation {
.mx_EventTile_line,
.mx_EventTile_reply {
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
/* Cascading - apply zero padding to every element including mx_EventTile_emote */
&.mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_e2eIcon {
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_DisambiguatedProfile {
font-size: $font-13px;
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
/* This aligns the avatar with the last line of the */
/* message. We want to move it one line up - 2rem */
inset-block-start: -2rem;
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
.mx_EventTile_content .markdown-body {
p,
ul,
ol,
dl,
blockquote,
pre,
table {
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
}
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
}
Remove `mx_EventTile:not([data-layout="bubble"])` selector (#9033) * Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment about overriding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 15:02:34 +02:00
&[data-shape="ThreadsList"][data-notification]::before,
.mx_NotificationBadge {
/* stylelint-disable-next-line declaration-colon-space-after */
inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
}
}
.mx_EventTile_details {
display: flex;
2023-01-16 14:46:54 +01:00
width: stretch;
align-items: center;
justify-content: space-between;
gap: $spacing-8;
margin-left: var(--leftOffset);
.mx_EventTile_truncated {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Media query for mobile UI */
@media only screen and (max-width: 480px) {
.mx_EventTile_content {
margin-right: 0;
}
}