From ab8d76d9fc9a139a36c14f2c5474ebb6abea0a08 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Apr 2022 09:56:58 +0100 Subject: [PATCH 1/5] Fix Safari 15.3 issue with rendering the linear-gradient on thread summaries --- res/css/views/rooms/_EventTile.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 29f6242c4b1..cf564b1ad82 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%); + // We use `rgba(255, 255, 255, 0)` instead of `transparent` to work around a Safari <15.4 bug + background: linear-gradient(270deg, $system 50%, rgba(255, 255, 255, 0) 100%); opacity: 0; transform: translateX(60px); From a8da1d996c25ec44f77308efc3204e3370a4301f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Apr 2022 10:06:05 +0100 Subject: [PATCH 2/5] Fix alignment of info events in thread view --- res/css/views/right_panel/_ThreadPanel.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 89b3f8aeb90..46c7a4d1206 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 } From 864a46b74c8bb9995259b24d2f5062b3ffae81e5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Apr 2022 10:09:30 +0100 Subject: [PATCH 3/5] comment --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index cf564b1ad82..1a23983f9a3 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -762,7 +762,7 @@ $left-gutter: 64px; bottom: 0; width: 60px; box-sizing: border-box; - // We use `rgba(255, 255, 255, 0)` instead of `transparent` to work around a Safari <15.4 bug + // XXX: We use `rgba(255, 255, 255, 0)` instead of `transparent` to work around a Safari <15.4 bug background: linear-gradient(270deg, $system 50%, rgba(255, 255, 255, 0) 100%); opacity: 0; From e1af829f435b98e614b3df7dde48425deb29b602 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Apr 2022 11:51:40 +0100 Subject: [PATCH 4/5] Introduce $system-transparent to work around Safari bug --- res/css/views/rooms/_EventTile.scss | 4 ++-- 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 | 1 + res/themes/light/css/_light.scss | 1 + 6 files changed, 8 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1a23983f9a3..ddecd526aba 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -762,8 +762,8 @@ $left-gutter: 64px; bottom: 0; width: 60px; box-sizing: border-box; - // XXX: We use `rgba(255, 255, 255, 0)` instead of `transparent` to work around a Safari <15.4 bug - background: linear-gradient(270deg, $system 50%, rgba(255, 255, 255, 0) 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 7921a4e1a80..4f14a1d003a 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; $panel-base: #8D97A5; // This color is not intended for use in the app diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 03ba8c70ea6..7aeb3320e71 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; $panels: rgba($system, 0.9); $panel-base: #8D97A5; // This color is not intended for use in the app diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index b039cfa70f6..9122b79a395 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; $panels: rgba($system, 0.9); $panel-base: #8D97A5; // This color is not intended for use in the app diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 88f29f89cdd..26fd3e916bb 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -27,6 +27,7 @@ $tertiary-content: var(--tertiary-content, $tertiary-content); $quaternary-content: var(--quaternary-content, $quaternary-content); $quinary-content: var(--quinary-content, $quinary-content); $system: var(--system, $system); +$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug $background: var(--background, $background); $panels: rgba($system, 0.9); $panel-base: var(--panel-base, $tertiary-content); // This color is not intended for use in the app diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 73e2ee71c04..1039db4ac1d 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; $panels: rgba($system, 0.9); From 8b4ec93ea1ead6fc5b37bc75aa4f29b8ff85b748 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Apr 2022 11:55:38 +0100 Subject: [PATCH 5/5] Fix --- res/themes/light-custom/css/_custom.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 26fd3e916bb..e2d4fef8fe1 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -26,8 +26,9 @@ $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); -$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug $background: var(--background, $background); $panels: rgba($system, 0.9); $panel-base: var(--panel-base, $tertiary-content); // This color is not intended for use in the app