denden.css

@@ -450,6 +450,9 @@
 	[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;
 	}
@@ -460,53 +463,24 @@
 	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([aria-label="Message Actions"] [role="button"], /* Message actions ("React", "Reply", "Forward" and "More") */
+	:is(nav[aria-label] div:has(> a), /* Sidebar/direct messages */
+		[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(
+		background-image: linear-gradient(var(--neutral-75), var(--neutral-80));
-			color-mix(in lch, var(--neutral-65), transparent),
+		box-shadow: inset 0 -5px 13px -5px var(--neutral-65);
-			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(
+			background-image: linear-gradient(var(--neutral-50), var(--neutral-70));
-				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[class*="chat"] > form [class*="channelTextArea"],
+	main > form [class*="channelTextArea"],
 	section[aria-label="User area"] {
 		background-color: var(--neutral-80);
 		border: unset;
@@ -516,23 +490,40 @@
 	[data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ {
 		background-color: var(--neutral-80);
 	}
-	/* Chat background */
+	nav[aria-label] /* Server sidebar and Search bar */,
-	main[class*="chat"] {
+	nav div:has([aria-label="Direct Messages"]) /* Direct messages/friends list sidebar */ {
-		background-image: linear-gradient(
+		background-color: var(--background-base-lower);
-				color-mix(in lch, var(--neutral-70), transparent),
+	}
-				color-mix(in lch, var(--neutral-80), transparent) 80%,
+	/* Discord icon replacement */
-				transparent
+	nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
-			),
+		& div:has(> svg) {
-			var(--forest);
+			background-image: var(--blob);
+			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 */
-		&::before {
+	main::before {
 		background-image: var(--kiophen);
 		background-repeat: no-repeat;
 		background-size: auto 40vh;
 		bottom: 0;
 		content: "";
 		height: 100%;
-			opacity: 0.3;
+		opacity: 0.25;
 		position: absolute;
 		right: 0;
 		width: 100%;
@@ -542,18 +533,8 @@
 		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) {
-	[aria-label="Servers sidebar"] {
+	main {
 		animation: bgpomo 16s infinite linear;
 	}
 }