diff --git a/denden.css b/denden.css index 06ea72e..3c5bd00 100644 --- a/denden.css +++ b/denden.css @@ -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; } }