From b1c72767952231a101ed2a7a83cdfd42878c44b0 Mon Sep 17 00:00:00 2001 From: sundae Date: Sat, 20 Dec 2025 19:39:14 +0200 Subject: [PATCH 1/2] animated gel background is applied to the sidebar now, replaced chat with forest background --- denden.css | 101 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 60 insertions(+), 41 deletions(-) diff --git a/denden.css b/denden.css index f7c6e7d..c99d4a7 100644 --- a/denden.css +++ b/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 */ - [aria-label="Message Actions"] [role="button"], /* Message actions ("React", "Reply", "Forward" and "More") */ + :is([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)); - box-shadow: inset 0 -5px 13px -5px var(--neutral-65); + background-image: linear-gradient( + 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"]: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,24 +516,34 @@ [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 { - & div:has(> svg) { - background-image: var(--blob); - background-position: center; + /* Chat background */ + main[class*="chat"] { + background-image: linear-gradient( + color-mix(in lch, var(--neutral-70), transparent), + color-mix(in lch, var(--neutral-80), transparent) 80%, + transparent + ), + var(--forest); + /* Kiophen mascot :3 */ + &::before { + background-image: var(--kiophen); background-repeat: no-repeat; - background-size: 24px; - } - & svg svg { - opacity: 0; + background-size: auto 40vh; + bottom: 0; + content: ""; + height: 100%; + opacity: 0.3; + position: absolute; + right: 0; + width: 100%; + z-index: 0; + pointer-events: none; + background-position-y: calc(100% - 32px); + background-position-x: 100%; } } /* Animated gel background */ - main { + [aria-label="Servers sidebar"] { background-image: linear-gradient(#012f, #0205), var(--bubble1), var(--bubble2); background-size: auto, auto, auto; @@ -515,26 +551,9 @@ background-size: auto, 1024px 1024px, 1000px 800px; background-attachment: fixed; } - /* Kiophen mascot :3 */ - main::before { - background-image: var(--kiophen); - background-repeat: no-repeat; - background-size: auto 40vh; - bottom: 0; - content: ""; - height: 100%; - opacity: 0.25; - position: absolute; - right: 0; - width: 100%; - z-index: 0; - pointer-events: none; - background-position-y: calc(100% - 32px); - background-position-x: 100%; - } } .theme-dark:not(.reduce-motion) { - main { + [aria-label="Servers sidebar"] { animation: bgpomo 16s infinite linear; } } From 1154d67a2c3fa079f38e4f6bde9d33549d618687 Mon Sep 17 00:00:00 2001 From: sundae Date: Sat, 20 Dec 2025 19:39:52 +0200 Subject: [PATCH 2/2] animated gel background is applied to the sidebar now, replaced chat with forest background --- denden.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/denden.css b/denden.css index c99d4a7..06ea72e 100644 --- a/denden.css +++ b/denden.css @@ -496,7 +496,7 @@ border-radius: var(--radius-round); } } - [class*="primary"]:not(span *) { + [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);