diff --git a/denden.css b/denden.css index 06ea72e..f7c6e7d 100644 --- a/denden.css +++ b/denden.css @@ -450,6 +450,9 @@ [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; } @@ -460,53 +463,24 @@ 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([aria-label="Message Actions"] [role="button"], /* Message actions ("React", "Reply", "Forward" and "More") */ + :is(nav[aria-label] div:has(> a), /* Sidebar/direct messages */ + [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( - 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); + 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( - color-mix(in lch, var(--neutral-60), transparent), - color-mix(in lch, var(--neutral-80), transparent) - ); + background-image: linear-gradient(var(--neutral-50), var(--neutral-70)); 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[class*="chat"] > form [class*="channelTextArea"], + main > form [class*="channelTextArea"], section[aria-label="User area"] { background-color: var(--neutral-80); border: unset; @@ -516,34 +490,24 @@ [data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ { background-color: var(--neutral-80); } - /* 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); + 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; background-repeat: no-repeat; - 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%; + background-size: 24px; + } + & svg svg { + opacity: 0; } } /* Animated gel background */ - [aria-label="Servers sidebar"] { + main { background-image: linear-gradient(#012f, #0205), var(--bubble1), var(--bubble2); background-size: auto, auto, auto; @@ -551,9 +515,26 @@ 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) { - [aria-label="Servers sidebar"] { + main { animation: bgpomo 16s infinite linear; } }