From 1d26ae3edac924b0f2f76afcbbe9b13cb30d95c7 Mon Sep 17 00:00:00 2001 From: videogame hacker Date: Sat, 10 Jul 2021 16:58:22 +0100 Subject: [PATCH] Initial commit - Split from joint injector-theme repo --- 00-base.css | 106 +++++++++++++++++++++++++++++++++++++++++ 01-scrollbars.css | 13 +++++ 02-roles-and-pings.css | 14 ++++++ 03-cat-icon.css | 11 +++++ 04-internal-links.css | 10 ++++ 05-autocomplete.css | 7 +++ 06-reactions.css | 9 ++++ theme.json | 4 ++ 8 files changed, 174 insertions(+) create mode 100644 00-base.css create mode 100644 01-scrollbars.css create mode 100644 02-roles-and-pings.css create mode 100644 03-cat-icon.css create mode 100644 04-internal-links.css create mode 100644 05-autocomplete.css create mode 100644 06-reactions.css create mode 100644 theme.json diff --git a/00-base.css b/00-base.css new file mode 100644 index 0000000..a09bb8f --- /dev/null +++ b/00-base.css @@ -0,0 +1,106 @@ +:root { + --lavender: #b4a4f8; + --lavender-dark: #8971f4; + --violet: #738adb; + --pink: #ffd1dc; + + --background-primary: #292841 !important; + --background-secondary: #242338 !important; + --background-secondary-alt: #3c3a5e !important; + --background-tertiary: #1c1b29 !important; + --background-accent: #413f66 !important; + --background-accent-alt: #646194 !important; + --background-floating: #15141e !important; + --background-modifier-hover: rgba(255, 255, 255, 0.01) !important; + --background-modifier-active: rgba(255, 255, 255, 0.03) !important; + --background-modifier-selected: rgba(255, 255, 255, 0.04) !important; + --background-modifier-accent: hsla(0, 0%, 100%, 0.06) !important; + + --channeltextarea-background: var(--background-accent) !important; + + --deprecated-card-bg: rgba(0, 0, 0, 0.2) !important; + --deprecated-card-editable-bg: rgba(0, 0, 0, 0.1) !important; + --deprecated-text-input-bg: var(--background-tertiary) !important; + --deprecated-text-input-border: var(--background-floating) !important; + --deprecated-text-input-border-disabled: var(--background-tertiary) !important; + + --activity-card-background: var(--background-primary) !important; + --channels-default: #9f9f9f !important; + + --text-muted: #b6b6b6 !important; + --text-normal: #fbfbfb !important; + --text-link: var(--lavender) !important; + + --text-positive: var(--pink) !important; + --info-positive-foreground: var(--pink) !important; + + --interactive-normal: #c8c8c8 !important; + --interactive-hover: #dcddde !important; + --interactive-active: #fff !important; + --interactive-muted: #747474 !important; + + --header-primary: white !important; + --header-secondary: #c9c9c9 !important; + + --toast-background: var(--background-primary) !important; + --toast-header: var(--background-tertiary) !important; + --toast-contents: var(--background-secondary) !important; + --toast-box-shadow: rgba(0, 0, 0, 0.2) !important; + --toast-border: var(--background-tertiary) !important; + + --brand-experiment: var(--lavender-dark) !important; +} + +/* Bottom sidebar panels */ .sidebar .panels { + background-color: var(--background-tertiary); +} + +/* Buttons */ +.buttonColor, .lookFilled.colorBrand { + background-color: var(--lavender-dark); +} + +.buttonColor:hover, .lookFilled.colorBrand:hover { + background-color: var(--lavender); +} + +.lookFilled.colorGrey { + background-color: var(--background-secondary-alt) !important; +} + +.lookFilled.colorGrey:hover { + background-color: var(--background-accent-alt) !important; +} + +/* Sidebar {add server, explore servers} buttons */ +.tree .circleIconButton { + color: var(--violet); +} + +.tree .circleIconButton.selected { + color: var(--background-secondary-alt); + background-color: var(--violet); +} + +/* Modals */ .root, .modal .footer, .uploadModal, +/* Friends list */ .tabBody { + background-color: var(--background-primary) !important; +} + +.spoilerText.hidden { + background-color: var(--background-tertiary) !important; +} + +/* The role list has .root (applied by Modals), so reset background-color */ +.userPopout .rolesList { + background-color: transparent !important; +} + + +.button { + border-radius: 0.75em; +} + +.sidebar .content .containerDefault .selected { + border-radius: 2em; +} diff --git a/01-scrollbars.css b/01-scrollbars.css new file mode 100644 index 0000000..48a2c9b --- /dev/null +++ b/01-scrollbars.css @@ -0,0 +1,13 @@ +.chatContent .scroller::-webkit-scrollbar-track, .peopleList.scrollerBase::-webkit-scrollbar-track, .privateChannels .scroller::-webkit-scrollbar-track { + background-color: var(--background-secondary) !important; +} + +.chatContent .scroller::-webkit-scrollbar-thumb, .peopleList.scrollerBase::-webkit-scrollbar-thumb { + background-color: var(--background-secondary-alt) !important; + border-color: transparent !important; +} + +.scroller.thin::-webkit-scrollbar-thumb { + background-color: var(--background-accent-alt) !important; + border-color: transparent !important; +} diff --git a/02-roles-and-pings.css b/02-roles-and-pings.css new file mode 100644 index 0000000..b2d5902 --- /dev/null +++ b/02-roles-and-pings.css @@ -0,0 +1,14 @@ + + +.botTag { + background-color: var(--pink); + border-radius: 0.667em !important; + color: var(--background-primary) +} + +/* Ping count badges */ .lowerBadge, .numberBadge { + border-radius: 50%; + background-color: var(--pink) !important; + color: var(--background-primary); + filter: drop-shadow(0 0 3px var(--pink)); +} diff --git a/03-cat-icon.css b/03-cat-icon.css new file mode 100644 index 0000000..583105e --- /dev/null +++ b/03-cat-icon.css @@ -0,0 +1,11 @@ +.homeIcon { + background: url(https://cdn.discordapp.com/emojis/710491923512819783.png?v=1) center no-repeat; + background-size: 36px; + + z-index: 2; + + width: 100%; + height: 100%; + + color: transparent !important; +} diff --git a/04-internal-links.css b/04-internal-links.css new file mode 100644 index 0000000..5e599fb --- /dev/null +++ b/04-internal-links.css @@ -0,0 +1,10 @@ +.anchorUnderlineOnHover[href*="//discord.com/channels"]::before { + content: "➜"; + color: var(--lavender); + padding-right: 0.5ch; +} + +.anchorUnderlineOnHover[href*="//discord.com/channels"]:hover { + text-decoration: none !important; + border-bottom: 1px solid; +} diff --git a/05-autocomplete.css b/05-autocomplete.css new file mode 100644 index 0000000..f2e9c69 --- /dev/null +++ b/05-autocomplete.css @@ -0,0 +1,7 @@ +.channelTextArea .autocomplete { + background-color: var(--background-secondary); +} + +.autocompleteRow .selected { + background-color: var(--background-secondary-alt); +} diff --git a/06-reactions.css b/06-reactions.css new file mode 100644 index 0000000..b4f0716 --- /dev/null +++ b/06-reactions.css @@ -0,0 +1,9 @@ + +.reactionMe { + background-color: rgba(180,164,248, 0.2) !important; + border: none; +} + +.reactionMe .reactionCount { + color: var(--lavender) !important; +} diff --git a/theme.json b/theme.json new file mode 100644 index 0000000..b96e5e5 --- /dev/null +++ b/theme.json @@ -0,0 +1,4 @@ +{ + "name": "Lesbos for Discord", + "description": "A purple sapphic CSS theme for Discord" +}