From fe4683df10436c089424205dbfef24a3b110a1f6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Apr 2022 12:24:44 +0100 Subject: [PATCH] Fix some issues with threads rendering (#8305) --- res/css/views/right_panel/_ThreadPanel.scss | 14 ++++++++++---- res/css/views/rooms/_EventTile.scss | 3 ++- res/themes/dark/css/_dark.scss | 1 + res/themes/legacy-dark/css/_legacy-dark.scss | 2 ++ res/themes/legacy-light/css/_legacy-light.scss | 1 + res/themes/light-custom/css/_custom.scss | 2 ++ res/themes/light/css/_light.scss | 1 + 7 files changed, 19 insertions(+), 5 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index d2755871ff5..4b4384f1d49 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -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_e2eIcon { left: 8px; @@ -212,19 +216,21 @@ limitations under the License. } // 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 { padding-left: 0 !important; // override main timeline padding .mx_EventTile_content { - margin-left: 54px; // align with text - width: calc(100% - 54px - 8px); // match width of parent + margin-left: 48px; // align with text + width: calc(100% - 48px - 8px); // match width of parent } } .mx_EventTile_avatar { position: absolute; - left: 36px !important; // override main timeline positioning + left: 30px !important; // override main timeline positioning z-index: 9; // position above the hover styling } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 29f6242c4b1..ddecd526aba 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -762,7 +762,8 @@ $left-gutter: 64px; bottom: 0; width: 60px; 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; transform: translateX(60px); diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 176a1dd9f31..aa95979a7db 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -7,6 +7,7 @@ $quaternary-content: #6F7882; $quinary-content: #394049; $system: #21262C; +$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug $background: #15191E; $overlay-background: rgba($background, 0.85); diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 2180e15e8f9..981495bd131 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -1,5 +1,6 @@ // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 $system: #21262C; +$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug // unified palette // try to use these colors when possible @@ -97,6 +98,7 @@ $tertiary-content: $tertiary-fg-color; $quaternary-content: #6F7882; $quinary-content: $quaternary-content; $system: #21262C; +$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 86b189b5332..d67b6243c7b 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -150,6 +150,7 @@ $tertiary-content: $tertiary-fg-color; $quaternary-content: #6F7882; $quinary-content: $quaternary-content; $system: #F4F6FA; +$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 88f29f89cdd..e2d4fef8fe1 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -26,6 +26,8 @@ $secondary-content: var(--secondary-content, $secondary-content); $tertiary-content: var(--tertiary-content, $tertiary-content); $quaternary-content: var(--quaternary-content, $quaternary-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); $background: var(--background, $background); $panels: rgba($system, 0.9); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index adebf7a2ce1..1c933a61468 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -34,6 +34,7 @@ $quaternary-content: #c1c6cd; $quinary-content: #E3E8F0; $system: #F4F6FA; +$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug $background: #ffffff; $overlay-background: rgba($background, 0.85);