mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 21:08:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix some issues with threads rendering (#8305)

Browse source
This commit is contained in:
Michael Telatynski 2022-04-13 12:24:44 +01:00 committed by GitHub
parent e59edb7101
commit fe4683df10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -165,6 +165,10 @@ limitations under the License.
} }
} }
.mx_GenericEventListSummary > .mx_EventTile_line {
padding-left: 30px !important; // Override main timeline styling - align summary text with message text
}
.mx_EventTile:not([data-layout=bubble]) { .mx_EventTile:not([data-layout=bubble]) {
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
left: 8px; left: 8px;
@ -212,19 +216,21 @@ limitations under the License.
} }
// handling for hidden events (e.g reactions) in the thread view // handling for hidden events (e.g reactions) in the thread view
&.mx_ThreadView .mx_GenericEventListSummary_unstyledList .mx_EventTile_info { &.mx_ThreadView .mx_EventTile_info {
padding-top: 0 !important; // override main timeline padding
.mx_EventTile_line { .mx_EventTile_line {
padding-left: 0 !important; // override main timeline padding padding-left: 0 !important; // override main timeline padding
.mx_EventTile_content { .mx_EventTile_content {
margin-left: 54px; // align with text margin-left: 48px; // align with text
width: calc(100% - 54px - 8px); // match width of parent width: calc(100% - 48px - 8px); // match width of parent
} }
} }
.mx_EventTile_avatar { .mx_EventTile_avatar {
position: absolute; position: absolute;
left: 36px !important; // override main timeline positioning left: 30px !important; // override main timeline positioning
z-index: 9; // position above the hover styling z-index: 9; // position above the hover styling
} }

3
res/css/views/rooms/_EventTile.scss
View file

@ -762,7 +762,8 @@ $left-gutter: 64px;
bottom: 0; bottom: 0;
width: 60px; width: 60px;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(270deg, $system 52.6%, transparent 100%); // XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
opacity: 0; opacity: 0;
transform: translateX(60px); transform: translateX(60px);

1
res/themes/dark/css/_dark.scss
View file

@ -7,6 +7,7 @@ $quaternary-content: #6F7882;
$quinary-content: #394049; $quinary-content: #394049;
$system: #21262C; $system: #21262C;
$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
$background: #15191E; $background: #15191E;
$overlay-background: rgba($background, 0.85); $overlay-background: rgba($background, 0.85);

2
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -1,5 +1,6 @@
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
$system: #21262C; $system: #21262C;
$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
// unified palette // unified palette
// try to use these colors when possible // try to use these colors when possible
@ -97,6 +98,7 @@ $tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882; $quaternary-content: #6F7882;
$quinary-content: $quaternary-content; $quinary-content: $quaternary-content;
$system: #21262C; $system: #21262C;
$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
$background: $primary-bg-color; $background: $primary-bg-color;
$overlay-background: rgba($background, 0.85); $overlay-background: rgba($background, 0.85);

1
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -150,6 +150,7 @@ $tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882; $quaternary-content: #6F7882;
$quinary-content: $quaternary-content; $quinary-content: $quaternary-content;
$system: #F4F6FA; $system: #F4F6FA;
$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
$background: $primary-bg-color; $background: $primary-bg-color;
$overlay-background: rgba($background, 0.85); $overlay-background: rgba($background, 0.85);

2
res/themes/light-custom/css/_custom.scss
View file

@ -26,6 +26,8 @@ $secondary-content: var(--secondary-content, $secondary-content);
$tertiary-content: var(--tertiary-content, $tertiary-content); $tertiary-content: var(--tertiary-content, $tertiary-content);
$quaternary-content: var(--quaternary-content, $quaternary-content); $quaternary-content: var(--quaternary-content, $quaternary-content);
$quinary-content: var(--quinary-content, $quinary-content); $quinary-content: var(--quinary-content, $quinary-content);
// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
$system-transparent: var(--system-transparent, rgba($system, 0.0));
$system: var(--system, $system); $system: var(--system, $system);
$background: var(--background, $background); $background: var(--background, $background);
$panels: rgba($system, 0.9); $panels: rgba($system, 0.9);

1
res/themes/light/css/_light.scss
View file

@ -34,6 +34,7 @@ $quaternary-content: #c1c6cd;
$quinary-content: #E3E8F0; $quinary-content: #E3E8F0;
$system: #F4F6FA; $system: #F4F6FA;
$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
$background: #ffffff; $background: #ffffff;
$overlay-background: rgba($background, 0.85); $overlay-background: rgba($background, 0.85);