lilypichu.scss

@use 'selectors';
@forward "stuff/chat";
@forward "stuff/server-list";
@forward "stuff/channel-list";
@forward "stuff/channel-bar";
@forward "stuff/member-list";
@forward "stuff/settings";
@forward "stuff/friends";
@forward "stuff/other";

@import url("https://nyri4.github.io/donators/donators.css");
@import url("https://fonts.googleapis.com/css2?family=Nunito");

// Donators
#{selectors.$profileBadges} > :last-child::before,
#{selectors.$badgeList} > :last-child::before {
	z-index: 10;
}

// Right popout
@media (min-width: 1350px) {
	#{selectors.$chatContent} + :last-child, // user profile in dms
	#{selectors.$memberListContainer} { // member list
		position: fixed;
		top: 280px;
		bottom: 120px;
		right: 60px;
		width: 320px;
		height: unset;
	}
	#{selectors.$tabBody} { // wrapper around friend list in starting screen
		transform: none;
	}

	// settings
	#{selectors.$layers} > #{selectors.$layer}:nth-child(2) {
		margin-right: 450px;
	}

	#{selectors.$layers} > #{selectors.$layer} > #{selectors.$container} {
		margin-right: 450px;
		// Basic right popout when there's nothing
		&::after {
			content: "Stay comfy";
			position: fixed;
			top: 220px;
			bottom: 85px;
			right: 60px;
			z-index: -2;
			width: 320px;
			background-color: var(--background-primary);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
			color: var(--text-normal);
			border-radius: var(--border-radius);
			overflow: hidden;
		}

		&::before {
			content: "";
			position: fixed;
			top: 220px;
			bottom: 85px;
			right: 70px;
			z-index: -1;
			width: 300px;
			border-radius: var(--border-radius);
			background: var(--jumping-gif) bottom/40% no-repeat;
		}
	}

	// Adding space for right popout
	#{selectors.$guilds} + :nth-child(2) {
		margin-right: 450px;
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}


	// User area
	#{selectors.$panels} > :last-child {
		position: fixed;
		display: flex;
		width: 305px;
		height: 50px;
		bottom: 28px;
		right: 60px;
		justify-content: space-between;
		background-color: var(--background-primary);
		border-radius: var(--border-radius);

		#{selectors.$avatarWrapper} {
			border-radius: var(--border-radius);
		}
	}

	// TODO: NOT UPDATED - what was this ???
	.container__037ed {
		overflow: visible;
	}

	#{selectors.$membersWrap} > #{selectors.$members} {
		width: 100%;
		background-color: var(--background-primary);

		& > #{selectors.$content} {
			min-height: 1000px;
			background-color: transparent;
		}
		[role='list'] > div#{selectors.$member} {
			max-width: 300px;
			border-radius: var(--border-radius);
			background-color: var(--background-primary);
		}
	}
}