comments to help with future additions/readability, wip buttons

denden.css

@@ -7,13 +7,11 @@
  * @source https://bunsin.space/forgejo/sundae/discord-denden-theme/src/branch/main/denden.css
  * @authorLink https://sundae.bunsin.space/
  */
-@import url('denden-assets.css');
+@import url("denden-assets.css");
 @supports (color: color-mix(in lch, red, blue)) {
 	.theme-dark {
 		--gel: rgb(76, 252, 252);
 		--multiply: 1;
-		--gel-box-shadow: inset 0 -5px 13px -5px var(--gel);
-		--gel-button-bg: linear-gradient(var(--neutral-75), var(--neutral-90));
 		/* Overwrite defaults */
 		--neutral-1-hsl: lch(from var(--gel) calc(99% * var(--multiply)) 1% h);
 		--neutral-2-hsl: lch(from var(--gel) calc(98% * var(--multiply)) 2% h);
@@ -415,15 +413,6 @@
 		--blurple-98-hsl: var(--neutral-98);
 		--blurple-99-hsl: var(--neutral-99);
 		--blurple-100-hsl: var(--neutral-100);
-		--background-surface-highest: var(--neutral-60);
-		--background-surface-higher: var(--neutral-65);
-		--background-surface-high: var(--neutral-70);
-		--background-base-low: var(--neutral-75);
-		--background-base-lower: var(--neutral-80);
-		--background-base-lowest: var(--neutral-85);
-		--radius-sm: var(--radius-xl);
-		--text-link: var(--gel);
-		--control-icon-only-icon-default: var(--neutral-10);
 	}
 }
 @keyframes bgpomo {
@@ -435,27 +424,63 @@
 	}
 }
 .theme-dark {
+	/* Colors */
+	--text-link: var(--gel);
+	--channels-default: var(--neutral-20);
+	--chat-text-muted: var(--neutral-20);
+	--interactive-text-default: var(--neutral-20);
+	--background-surface-highest: var(--neutral-60);
+	--background-surface-higher: var(--neutral-65);
+	--background-surface-high: var(--neutral-70);
+	--background-base-low: var(--neutral-75);
+	--background-base-lower: var(--neutral-80);
+	--background-base-lowest: var(--neutral-85);
+	--control-icon-only-icon-default: var(--neutral-10);
+	nav[aria-label] a[aria-label] /* Direct messages/friends list sidebar text color */ {
+		color: var(--neutral-10);
+	}
 	/* Reset default backgrounds */
 	[class*="chatGradient"],
 	[class*="channelTextArea"] > div {
 		background: none;
 	}
-	[class*="sidebar"]:has(nav[aria-label])::after {
+	[class*="sidebar"]:has(nav[aria-label])::after /* User area pseudo-element? */ {
 		content: unset;
 	}
 	/* Reset borders */
-	[class*="chat"]:has(main) {
-		border: unset;
-	}
 	[data-fullscreen] [class*="notice"] {
 		border-radius: unset;
 	}
-	div:has(> nav) {
+	div:has(> nav) /* Sidebar container */ {
 		border-radius: unset;
 	}
-	/* Borders */
+	/* Buttons */
-	[class*="chat"] article[class] {
+	:is(
-		border-color: var(--neutral-75);
+		nav[aria-label] div:has(> a), /* Sidebar/direct messages */
+		main [role="button"], 	/* Message actions ("React", "Reply", "Forward" and "More"), Message box buttons*/
+		section[aria-label="User area"] button, /* Mute/Unmute, Deafen/Undeafen, User settings buttons */
+		):not([class*="username"], main article *, main a, main span:has(img)) /* Doesn't apply to: Usernames, Embeds, Links, Stickers, Emoji */ {
+		background-image: linear-gradient(var(--neutral-75), var(--neutral-80));
+		box-shadow: inset 0 -5px 13px -5px var(--neutral-65);
+		&:hover {
+			background-image: linear-gradient(var(--neutral-50), var(--neutral-70));
+			box-shadow: inset 0 -5px 13px -5px var(--gel);
+		}
+	}
+	/* Message box and User profile area */
+	main > form [class*="channelTextArea"],
+	section[aria-label="User area"] {
+		background-color: var(--neutral-80);
+		border: unset;
+		box-shadow: inset 0 -5px 13px -5px var(--gel), 0 0 0 1px var(--neutral-30);
+	}
+	/* Backgrounds */
+	[data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ {
+		background-color: var(--neutral-80);
+	}
+	nav[aria-label] /* Server sidebar and Search bar */,
+	nav div:has([aria-label="Direct Messages"]) /* Direct messages/friends list sidebar */ {
+		background-color: var(--background-base-lower);
 	}
 	/* Discord icon replacement */
 	nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
@@ -469,27 +494,8 @@
 			opacity: 0;
 		}
 	}
-	/* Backgrounds */
-	[data-fullscreen] [class*="bar"] > [class*="title"] {
-		background-color: var(--neutral-80);
-	}
-	nav[aria-label="Servers sidebar"] {
-		margin: unset;
-		mask: unset;
-	}
-	nav[aria-label],
-	nav div:has([aria-label="Direct Messages"]) {
-		background-color: var(--background-base-lower);
-	}
-	/* Bubble-y look */
-	main > form [class*="channelTextArea"],
-	section[aria-label="User area"] {
-		background-color: var(--neutral-80);
-		border: unset;
-		box-shadow: var(--gel-box-shadow), 0 0 0 1px var(--neutral-30);
-	}
 	/* Animated gel background */
-	[class*="chat"] main {
+	main {
 		background-image: linear-gradient(#012f, #0205), var(--bubble1),
 			var(--bubble2);
 		background-size: auto, auto, auto;
@@ -498,7 +504,7 @@
 		background-attachment: fixed;
 	}
 	/* Kiophen mascot :3 */
-	[class*="chat"] main::before {
+	main::before {
 		background-image: var(--kiophen);
 		background-repeat: no-repeat;
 		background-size: auto 40vh;
@@ -516,7 +522,7 @@
 	}
 }
 .theme-dark:not(.reduce-motion) {
-	[class*="chat"] main {
+	main {
 		animation: bgpomo 16s infinite linear;
 	}
 }