animated gel background is applied to the sidebar now, replaced chat with forest background

denden.css

@@ -450,9 +450,6 @@
 	[class*="channelTextArea"] > div {
 		background: unset;
 	}
-	[aria-label="Message Actions"] div {
-		margin: 0 2px;
-	}
 	[class*="sidebar"]:has(nav[aria-label])::after /* This is a seemingly random User area pseudo-element with the default theme, so I'm throwing it into orbit. */ {
 		content: unset;
 	}
@@ -463,24 +460,53 @@
 	div:has(> nav) /* Sidebar container */ {
 		border-radius: unset;
 	}
+	/* Discord icon replacement */
+	nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
+		& foreignObject div {
+			background-image: var(--blob);
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: 30px;
+		}
+		& svg svg, img {
+			opacity: 0;
+		}
+	}
 	/* Buttons */
-	:is(nav[aria-label] div:has(> a), /* Sidebar/direct messages */
+	:is([aria-label="Message Actions"] [role="button"], /* Message actions ("React", "Reply", "Forward" and "More") */
-		[aria-label="Message Actions"] [role="button"], /* Message actions ("React", "Reply", "Forward" and "More") */
 		[class*="channelTextArea"] [class*="buttons"] [role], [class*="channelTextArea"] [class*="attach"]>[aria-label], /* Message box buttons (GIF, Sticker, Emoji picker)*/
 		section[aria-label="User area"] button, /* Mute/Unmute, Deafen/Undeafen, User settings buttons */
 		[class*="toolbar"] [role="button"], /* Chat toolbar buttons */
 		):not([class*="username"], [class*="search"] *) /* Doesn't apply to: Usernames, Toolbar search icon */ {
-		background-image: linear-gradient(var(--neutral-75), var(--neutral-80));
+		background-image: linear-gradient(
-		box-shadow: inset 0 -5px 13px -5px var(--neutral-65);
+			color-mix(in lch, var(--neutral-65), transparent),
+			color-mix(in lch, var(--neutral-70), transparent)
+		);
+		box-shadow: inset 0 -5px 13px -5px
+			color-mix(in lch, var(--neutral-80), transparent);
 		&:hover {
-			background-image: linear-gradient(var(--neutral-50), var(--neutral-70));
+			background-image: linear-gradient(
+				color-mix(in lch, var(--neutral-60), transparent),
+				color-mix(in lch, var(--neutral-80), transparent)
+			);
 			box-shadow: inset 0 -5px 13px -5px var(--gel);
 		}
 		/* Rounded buttons */
+		&:not(section[aria-label="User area"] [class*="Parent"] *) /* Doesn't apply to: Mute/Unmute, Deafen/Undeafen */ {
 			border-radius: var(--radius-round);
 		}
+	}
+	[class*="primary"][role="button"]:not(span *) {
+		border: 0;
+		background-image: linear-gradient(var(--neutral-100), var(--neutral-40));
+		box-shadow: inset 0 0 1em 0 var(--neutral-50);
+		border-radius: var(--radius-round);
+		&:hover {
+			box-shadow: inset 0 0 0.5em 0.3em var(--neutral-100),0 0 0.5em 0 var(--neutral-80);
+		}
+	}
 	/* Message box and User profile area */
-	main > form [class*="channelTextArea"],
+	main[class*="chat"] > form [class*="channelTextArea"],
 	section[aria-label="User area"] {
 		background-color: var(--neutral-80);
 		border: unset;
@@ -490,40 +516,23 @@
 	[data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ {
 		background-color: var(--neutral-80);
 	}
-	nav[aria-label] /* Server sidebar and Search bar */,
+	/* Chat background */
-	nav div:has([aria-label="Direct Messages"]) /* Direct messages/friends list sidebar */ {
+	main[class*="chat"] {
-		background-color: var(--background-base-lower);
+		background-image: linear-gradient(
-	}
+				color-mix(in lch, var(--neutral-70), transparent),
-	/* Discord icon replacement */
+				color-mix(in lch, var(--neutral-80), transparent) 80%,
-	nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
+				transparent
-		& div:has(> svg) {
+			),
-			background-image: var(--blob);
+			var(--forest);
-			background-position: center;
-			background-repeat: no-repeat;
-			background-size: 24px;
-		}
-		& svg svg {
-			opacity: 0;
-		}
-	}
-	/* Animated gel background */
-	main {
-		background-image: linear-gradient(#012f, #0205), var(--bubble1),
-			var(--bubble2);
-		background-size: auto, auto, auto;
-		background-blend-mode: darken, lighten, normal;
-		background-size: auto, 1024px 1024px, 1000px 800px;
-		background-attachment: fixed;
-	}
 		/* Kiophen mascot :3 */
-	main::before {
+		&::before {
 			background-image: var(--kiophen);
 			background-repeat: no-repeat;
 			background-size: auto 40vh;
 			bottom: 0;
 			content: "";
 			height: 100%;
-		opacity: 0.25;
+			opacity: 0.3;
 			position: absolute;
 			right: 0;
 			width: 100%;
@@ -533,8 +542,18 @@
 			background-position-x: 100%;
 		}
 	}
+	/* Animated gel background */
+	[aria-label="Servers sidebar"] {
+		background-image: linear-gradient(#012f, #0205), var(--bubble1),
+			var(--bubble2);
+		background-size: auto, auto, auto;
+		background-blend-mode: darken, lighten, normal;
+		background-size: auto, 1024px 1024px, 1000px 800px;
+		background-attachment: fixed;
+	}
+}
 .theme-dark:not(.reduce-motion) {
-	main {
+	[aria-label="Servers sidebar"] {
 		animation: bgpomo 16s infinite linear;
 	}
 }