Fixed user popout No.2

Author: Gibbu

src/theme/_vars.scss

@@ -36,6 +36,12 @@
 	--fb-popout-size: var(--popout-modal-size, var(--popout-image-size));
 	--fb-popout-position: var(--popout-modal-position, var(--popout-image-position));
 	--fb-popout-repeat: var(--popout-modal-repeat, var(--popout-image-repeat));
+
+	--fb-overlay-image: var(--popout-modal-image, var(--overlay-image));
+	--fb-overlay-blur: var(--popout-modal-blur, var(--overlay-image-blur));
+	--fb-overlay-size: var(--popout-modal-size, var(--overlay-image-size));
+	--fb-overlay-position: var(--popout-modal-position, var(--overlay-image-position));
+	--fb-overlay-repeat: var(--popout-modal-repeat, var(--overlay-image-repeat));
 }
 
 .theme-dark {

src/theme/app/_background.scss

@@ -46,19 +46,19 @@
 		border-radius: 3px;
 		&::before {
 			content: '';
-			background: linear-gradient(var(--tint), var(--tint)), var(--fb-popout-modal-image);
-			background-position: var(--fb-popout-modal-position, center);
-			background-size: var(--fb-popout-modal-size, cover);
-			background-attachment: var(--popout-modal-attachment, fixed);
-			background-repeat: var(--popout-modal-repeat, no-repeat);
+			background: linear-gradient(var(--tint), var(--tint)), var(--fb-overlay-image);
+			background-position: var(--fb-overlay-position, center);
+			background-size: var(--fb-overlay-size, cover);
+			background-attachment: var(--fb-overlay-attachment, fixed);
+			background-repeat: var(--fb-overlay-repeat, no-repeat);
 			box-shadow: inset 0 0 0 100vmax rgb(0, 0, 0, var(--overlay-brightness, var(--popout-modal-brightness)));
-			height: calc(100% + var(--fb-popout-modal-blur) * 5);
-			width: calc(100% + var(--fb-popout-modal-blur) * 5);
-			top: calc(var(--fb-popout-modal-blur) / -1 * 2.5);
-			left: calc(var(--fb-popout-modal-blur) / -1 * 2.5);
+			height: calc(100% + var(--fb-overlay-blur) * 5);
+			width: calc(100% + var(--fb-overlay-blur) * 5);
+			top: calc(var(--fb-overlay-blur) / -1 * 2.5);
+			left: calc(var(--fb-overlay-blur) / -1 * 2.5);
 			position: absolute;
-			filter: blur(var(--fb-popout-modal-blur));
-			transform: translate(var(--fb-popout-modal-blur) / -1, calc(var(--fb-popout-modal-blur) / -1));
+			filter: blur(var(--fb-overlay-blur));
+			transform: translate(var(--fb-overlay-blur) / -1, calc(var(--fb-overlay-blur) / -1));
 			pointer-events: none;
 			user-select: none;
 			z-index: -1;

src/theme/popouts/_userpopout.scss

@@ -1,10 +1,11 @@
-#app-mount [class*='userPopoutOuter-3AVBmJ'] {
+#app-mount .userPopoutOuter-3AVBmJ {
 	box-shadow: none;
 	overflow: hidden !important;
 	position: relative;
-	border-radius: 3px;
+	border-radius: 8px;
 	opacity: 0;
 	animation: fadeIn 0.3s ease forwards;
+	padding: 0;
 
 	&::before {
 		content: '';
@@ -26,11 +27,27 @@
 		z-index: -1;
 	}
 
-	.userProfileInnerWithBanner-3CJ1Og {
-		background: transparent;
+	.userPopoutInner-1hXSeY {
 		&::before {
-			background: linear-gradient(var(--profile-gradient-primary-color), var(--profile-gradient-primary-color) 120px, var(--profile-gradient-secondary-color));
-			opacity: 0.25;
+			top: 4px;
+			left: 4px;
+		}
+		&:not(.userProfileInnerThemedNonPremium-1gT-zY) {
+			.avatarPositionPremiumBanner-2nq2Fy {
+				top: 73px;
+				left: 21px;
+			}
+			.bannerSVGWrapper-qc0szY {
+				margin: 2px 4px 4px 4px;
+				box-sizing: border-box;
+				width: calc(100% - 8px);
+				min-width: unset !important;
+			}
+		}
+		&.userProfileInnerThemedNonPremium-1gT-zY {
+			.overlayBackground-1KgwVi {
+				margin: 0 8px 8px;
+			}
 		}
 	}