Merge pull request #99 from Obbaxobax/master

Fixed user profile popups and gif/emoji window
DiscordStyles · Apr 30, 2024 · 2634374 · 2634374
2 parents 831a6b3 + 9e7be62
commit 2634374
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/src/theme/app/_background.scss b/src/theme/app/_background.scss
@@ -7,6 +7,7 @@
 		background: var(--background-image);
 		background-position: var(--background-image-position, center);
 		background-size: var(--background-image-size, cover);
+
 		&::before {
 			content: '';
 			position: absolute;
@@ -20,6 +21,7 @@
 			display: var(--background-blur-visiblity, block);
 		}
 	}
+
 	[role='menu'],
 	.autocompleteInner_ad9e21,
 	.container__84c26,
@@ -32,7 +34,6 @@
 	.root-1gCeng:not(.fullscreenOnMobile-1bD22y),
 	.root-8LYsGj,
 	.subMenuContext-2n_9YM .scrollerWrap-2lJEkd,
-	section.positionContainer_f54115 .drawerSizingWrapper_e20f1f,
 	.quickswitcher_b5bb0a,
 	.root-1gCeng.wrapper-2ZbzR9,
 	.modalRoot-1Kx4Hb,
@@ -50,6 +51,7 @@
 		overflow: hidden !important;
 		position: relative;
 		border-radius: 3px;
+
 		&::before {
 			content: '';
 			background: linear-gradient(var(--tint), var(--tint)), var(--fb-overlay-image);
@@ -70,4 +72,29 @@
 			z-index: -1;
 		}
 	}
+
+	section.positionContainer_f54115 .drawerSizingWrapper_e20f1f {
+		overflow: hidden !important;
+		position: absolute;
+		border-radius: 3px;
+
+		&::before {
+			content: '';
+			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-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);
+			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;
+		}
+	}
 }
diff --git a/src/theme/popouts/_userpopout.scss b/src/theme/popouts/_userpopout.scss
@@ -1,4 +1,4 @@
-#app-mount .userPopoutOuter__3884e {
+#app-mount .userPopoutOuter_d67f56 {
 	box-shadow: none;
 	overflow: hidden !important;
 	position: relative;
@@ -32,18 +32,21 @@
 			top: 4px;
 			left: 4px;
 		}
+
 		&:not(.userProfileInnerThemedNonPremium_ed9022) {
 			.avatarPositionPremiumBanner-2nq2Fy {
 				top: 73px;
 				left: 21px;
 			}
+
 			.bannerSVGWrapper__8a38c {
 				margin: 2px 4px 4px 4px;
 				box-sizing: border-box;
 				width: calc(100% - 8px);
 				min-width: unset !important;
 			}
 		}
+
 		&.userProfileInnerThemedNonPremium_ed9022 {
 			.overlayBackground__2666e {
 				margin: 0 8px 8px;
@@ -54,41 +57,52 @@
 	.headerNormal-T_seeN {
 		background: transparent;
 	}
+
 	.headerPlaying-j0WQBV {
 		background: var(--gradient-50);
 	}
+
 	.headerXbox-3G-4PF {
 		background: rgb(var(--discord-xbox), 0.3);
 	}
+
 	.headerSpotify-zpWxgT {
 		background: hsl(var(--discord-spotify) / 0.3);
 	}
+
 	.headerStreaming-2FjmGz {
 		background: rgb(var(--discord-twitch), 0.3);
 	}
+
 	.wrapper-1VLyxH::after {
 		border-radius: 3px;
 	}
+
 	.activityName_a7b7de,
 	.headerTag-2pZJzA,
 	.nameNormal-2lqVQK,
 	.nameWrap-3Z4G_9,
 	.textRow_c835f1 {
 		color: var(--text-normal);
 	}
+
 	.body-3iLsc4 {
 		background: transparent;
 	}
+
 	.roles__74a2b {
 		gap: 4px;
 	}
+
 	.roleRemoveButton__20c70 {
 		position: unset;
+
 		& + .roleName__851c9 {
 			position: relative;
 			z-index: 1;
 		}
 	}
+
 	.role_d81130 {
 		margin: 0;
 		position: relative;
@@ -98,11 +112,13 @@
 		padding: 6px;
 		border: none;
 	}
+
 	.roleCircle__61ad8 {
 		position: unset;
 		overflow: visible;
 		filter: none;
 		margin: 0;
+
 		&::before {
 			content: '';
 			position: absolute;
@@ -113,32 +129,39 @@
 			pointer-events: none;
 		}
 	}
+
 	.roleRemoveIcon_c3913a {
 		left: 12px;
 	}
+
 	.roleName__851c9 {
 		margin: 0;
 		color: var(--text-focus);
 	}
+
 	.footer-1fjuF6 {
 		background: transparent;
 		border: none;
 	}
+
 	.quickMessage-1yeL4E {
 		background: var(--background-secondary);
 		border: none;
 		color: var(--text-normal);
+
 		&::placeholder {
 			color: rgb(255, 255, 255, 0.3);
 		}
 	}
+
 	.protip-YaFfgO {
 		display: none;
 	}
 
 	.userProfileInnerNonPremium-1XjSjn .overlayBackground__2666e {
 		background: var(--background-secondary);
 	}
+
 	&.theme-light .inputDefault-3FGxgL::placeholder {
 		color: #000;
 	}