sundae/discord-denden-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: sundae:a21ec8e9e41131cb9a452fe1684e90e00bc44ae0
Branches Tags
sundae:main
..
compare: sundae:1154d67a2c3fa079f38e4f6bde9d33549d618687
Branches Tags
sundae:main

2 commits
a21ec8e9e4 ... 1154d67a2c

Author SHA1 Message Date
sundae
1154d67a2c
 		animated gel background is applied to the sidebar now, replaced chat with forest background 2025-12-20 19:39:52 +02:00
sundae
b1c7276795
 		animated gel background is applied to the sidebar now, replaced chat with forest background 2025-12-20 19:39:14 +02:00
1 changed files with 60 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

101
denden.css
View file

@ -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"][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,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;
}
}