From d42e7f51229535424e6bbf01378797d83dc16af6 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Thu, 31 Aug 2023 13:56:19 +0200 Subject: [PATCH 1/2] fix backdrop-filter causing weird positional behaviour --- packages/bridge-ui-v2/src/styles/components.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css index f4dc880cd93..ce6bf8734d6 100644 --- a/packages/bridge-ui-v2/src/styles/components.css +++ b/packages/bridge-ui-v2/src/styles/components.css @@ -167,11 +167,18 @@ hover:background-color: var(--interactive-dark-tertiary-hover, #5D636F); } - .glassy-gradient-card { - /* Trying to be consistent with design */ - /* grey-500/10 => grey-800/20 */ + /* .glassy-gradient-card { background: linear-gradient(226deg, rgba(93, 99, 111, 0.1) 1.26%, rgba(25, 30, 40, 0.2) 100%); backdrop-filter: blur(10px); + } */ + + .glassy-gradient-card::before { + background: linear-gradient(226deg, rgba(93, 99, 111, 0.1) 1.26%, rgba(25, 30, 40, 0.2) 100%); + content: ''; + backdrop-filter: blur(2px); + position: absolute; + inset: 0%; + z-index: -1; } input { From ffeab5fad4847a0d08dbc87c0e38524302428cc0 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Thu, 31 Aug 2023 14:10:53 +0200 Subject: [PATCH 2/2] remove old style --- packages/bridge-ui-v2/src/styles/components.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css index ce6bf8734d6..a26170b8611 100644 --- a/packages/bridge-ui-v2/src/styles/components.css +++ b/packages/bridge-ui-v2/src/styles/components.css @@ -167,11 +167,6 @@ hover:background-color: var(--interactive-dark-tertiary-hover, #5D636F); } - /* .glassy-gradient-card { - background: linear-gradient(226deg, rgba(93, 99, 111, 0.1) 1.26%, rgba(25, 30, 40, 0.2) 100%); - backdrop-filter: blur(10px); - } */ - .glassy-gradient-card::before { background: linear-gradient(226deg, rgba(93, 99, 111, 0.1) 1.26%, rgba(25, 30, 40, 0.2) 100%); content: '';