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

more buttons

Browse source
This commit is contained in:
sundae 2025-12-21 14:33:39 +02:00
commit c117739082
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
1 changed files with 48 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

65
denden.css
View file

@ -447,7 +447,8 @@
}
/* Reset default backgrounds */
[class*="chatGradient"],
[class*="channelTextArea"] > div {
[class*="channelTextArea"] > div,
nav[aria-label="Private channels"] {
background: unset;
}
[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. */ {
@ -460,6 +461,10 @@
div:has(> nav) /* Sidebar container */ {
border-radius: unset;
}
/* Reset margins */
nav[aria-label="Private channels"] [class*="scroller"] {
margin-bottom: 0;
}
/* Discord icon replacement */
nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
& foreignObject div {
@ -468,14 +473,42 @@
background-repeat: no-repeat;
background-size: 30px;
}
& svg svg, img {
& svg svg,
img {
opacity: 0;
}
}
/* Buttons */
/* Primary buttons */
:is([class*="primary"][role="button"], button)
:not(span button, [aria-label="User area"] button) /* Doesn't apply to: Text buttons, Mute/Deafen, User settings buttons */ {
color: var(--neutral-1);
border: 1px solid var(--neutral-30);
background-image: linear-gradient(var(--neutral-80), var(--neutral-40));
box-shadow: inset 0 0 1em 0 var(--neutral-50);
cursor: pointer;
transition: unset;
&:hover {
transition: inherit;
border-color: var(--neutral-60);
background-image: linear-gradient(var(--neutral-60), var(--neutral-80));
box-shadow: inset 0 0 0.5em 0.3em var(--neutral-80);
}
&[class*="critical"] /* Warning buttons */ {
color: var(--red-300);
border-color: var(--red-500);
background-image: linear-gradient(var(--red-400), var(--red-800));
box-shadow: inset 0 0 0.5em 0.3em var(--red-500);
&:hover {
border-color: var(--red-600);
background-image: linear-gradient(var(--red-600), var(--red-800));
box-shadow: inset 0 0 0.5em 0.3em var(--red-800);
}
}
}
/* Miscellaneous buttons */
: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 */
section[aria-label="User area"] button, /* Mute/Deafen, 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(
@ -496,15 +529,6 @@
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"],
section[aria-label="User area"] {
@ -513,8 +537,13 @@
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="Private channels"] [class*="scroller"] /* Direct messages/friends list sidebar */,
aside>[class*="members"] /* Members sidebar */ {
box-shadow: inset var(--neutral-100) 0 0 110px -26px,
inset var(--neutral-50) 0 0 8px 4px;
}
nav[aria-label="Private channels"] {
background: var(--neutral-80);
}
/* Chat background */
main[class*="chat"] {
@ -543,7 +572,8 @@
}
}
/* Animated gel background */
[aria-label="Servers sidebar"] {
[aria-label="Servers sidebar"],
[data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ {
background-image: linear-gradient(#012f, #0205), var(--bubble1),
var(--bubble2);
background-size: auto, auto, auto;
@ -553,7 +583,8 @@
}
}
.theme-dark:not(.reduce-motion) {
[aria-label="Servers sidebar"] {
[aria-label="Servers sidebar"],
[data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ {
animation: bgpomo 16s infinite linear;
}
}