VasilijeBursac commented on code in PR #34640:
URL: https://github.com/apache/superset/pull/34640#discussion_r2267741341
##########
superset-frontend/src/pages/Login/index.tsx:
##########
@@ -74,7 +74,62 @@ const StyledLabel = styled(Typography.Text)`
`}
`;
+const StyledBackground = styled.div`
+ ${({ theme }) => {
+ const bgImageUrl = theme.loginPageBackgroundImageUrl;
+ const overlayColor =
+ theme.loginPageBackgroundOverlayColor || 'rgba(0, 0, 0, 0.5)';
+ const blurAmount = theme.loginPageBackgroundBlur || '0px';
+ return bgImageUrl
+ ? css`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 0;
+ pointer-events: none;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url(${bgImageUrl});
+ background-size: cover;
+ background-position: center;
+ filter: blur(${blurAmount});
+ z-index: -1;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: ${overlayColor};
+ z-index: 1;
+ }
Review Comment:
Thanks for the suggestion! I started with pseudo-elements to keep the
background image and overlay color visually separate, especially to support
blur effects on the image without affecting the overlay. That way, the image
can be blurred independently without affecting the overlay, and the overlay can
be styled, themed, or even animated without interference.
My idea was to always render both layers, but visually separate:
- The background image + optional blur effect (`::before`)
- The overlay (`::after`), which can be fully transparent via the
`loginPageBackgroundOverlayColor` token if users want to "turn off/hide" the
overlay.
The proposed shorthand `background: ${ bgImageUrl ? url(bgImageUrl) :
overlayColor` seems to assume we’re choosing between the image and the overlay,
whereas I intended to layer both. Did I understand that part correctly? Happy
to tweak the implementation if we can preserve that layering behavior.
I am also open to any ideas and suggestions!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
