├── .github ├── emojis.webp ├── preview.webp ├── oldcontext.webp ├── previewLight.webp └── showeffects.webp ├── src ├── assets │ ├── banned.gif │ ├── bold.woff2 │ ├── shapes.jpg │ ├── skype.webp │ ├── thin.woff2 │ ├── battle.webp │ ├── league.webp │ ├── normal.woff2 │ ├── reddit.webp │ ├── twitch.webp │ ├── twitter.webp │ ├── youtube.webp │ ├── cursive.woff2 │ ├── facebook.webp │ ├── kindaBold.woff2 │ ├── normal600.woff2 │ ├── normal700.woff2 │ ├── veryBold.woff2 │ ├── cursiveBold.woff2 │ ├── mod.svg │ ├── riot.svg │ ├── gif_tag.svg │ ├── partner.svg │ ├── playstation.svg │ ├── spotify.svg │ ├── github.svg │ ├── steam.svg │ ├── xbox.svg │ ├── oldPlead.svg │ ├── oldHoldingBack.svg │ ├── DiscordWordmark.svg │ ├── employee.svg │ ├── Discord_Nitro_Logo.svg │ ├── Discord_Nitro_Wordmark_Filled.svg │ ├── system.svg │ └── epic.svg ├── components │ ├── oldContext.css │ ├── oldEmojis.css │ ├── showTags.css │ ├── hidetitlebar.css │ ├── miyamoto.css │ ├── showEffects.css │ ├── color.css │ ├── vars.css │ └── profile.css └── main.css ├── OldCord.theme.css └── README.md /.github/emojis.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/.github/emojis.webp -------------------------------------------------------------------------------- /.github/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/.github/preview.webp -------------------------------------------------------------------------------- /src/assets/banned.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/banned.gif -------------------------------------------------------------------------------- /src/assets/bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/bold.woff2 -------------------------------------------------------------------------------- /src/assets/shapes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/shapes.jpg -------------------------------------------------------------------------------- /src/assets/skype.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/skype.webp -------------------------------------------------------------------------------- /src/assets/thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/thin.woff2 -------------------------------------------------------------------------------- /.github/oldcontext.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/.github/oldcontext.webp -------------------------------------------------------------------------------- /src/assets/battle.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/battle.webp -------------------------------------------------------------------------------- /src/assets/league.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/league.webp -------------------------------------------------------------------------------- /src/assets/normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/normal.woff2 -------------------------------------------------------------------------------- /src/assets/reddit.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/reddit.webp -------------------------------------------------------------------------------- /src/assets/twitch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/twitch.webp -------------------------------------------------------------------------------- /src/assets/twitter.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/twitter.webp -------------------------------------------------------------------------------- /src/assets/youtube.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/youtube.webp -------------------------------------------------------------------------------- /.github/previewLight.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/.github/previewLight.webp -------------------------------------------------------------------------------- /.github/showeffects.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/.github/showeffects.webp -------------------------------------------------------------------------------- /src/assets/cursive.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/cursive.woff2 -------------------------------------------------------------------------------- /src/assets/facebook.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/facebook.webp -------------------------------------------------------------------------------- /src/assets/kindaBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/kindaBold.woff2 -------------------------------------------------------------------------------- /src/assets/normal600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/normal600.woff2 -------------------------------------------------------------------------------- /src/assets/normal700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/normal700.woff2 -------------------------------------------------------------------------------- /src/assets/veryBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/veryBold.woff2 -------------------------------------------------------------------------------- /src/assets/cursiveBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/HEAD/src/assets/cursiveBold.woff2 -------------------------------------------------------------------------------- /src/components/oldContext.css: -------------------------------------------------------------------------------- 1 | .c1e9c47c23f12ca3-focused{background-color: var(--background-modifier-hover) !important;} 2 | .c1e9c47c23f12ca3-focused.c1e9c47c23f12ca3-colorDanger{color: var(--red) !important;background-color: var(--background-modifier-hover) !important;} 3 | -------------------------------------------------------------------------------- /src/components/oldEmojis.css: -------------------------------------------------------------------------------- 1 | /*plead 🥺*/ 2 | [src="/assets/059679850d492e83.svg"]{content: url("https://milbits.github.io/oldcord/src/assets/oldPlead.svg");} 3 | /*holding back 🥹*/ 4 | [src="/assets/5df2da052fc1ddc6.svg"]{content: url("https://milbits.github.io/oldcord/src/assets/oldHoldingBack.svg");} 5 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://milbits.github.io/oldcord/src/components/vars.css"); 2 | @import url("https://milbits.github.io/oldcord/src/components/color.css"); 3 | @import url("https://milbits.github.io/oldcord/src/components/imgs.css"); 4 | @import url("https://milbits.github.io/oldcord/src/components/other.css"); 5 | @import url("https://milbits.github.io/oldcord/src/components/profile.css"); 6 | @import url("https://milbits.github.io/oldcord/src/components/redesign.css"); 7 | -------------------------------------------------------------------------------- /src/assets/mod.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/riot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/gif_tag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/showTags.css: -------------------------------------------------------------------------------- 1 | ._63ed30c16c7151f2-guildTagContainer, 2 | .c19a557985eb7793-clanTagChiplet, 3 | .chipletContainerInline__4a25c, 4 | ._10651c5cfe637db6-chipletContainerInline, 5 | ._10651c5cfe637db6-chipletContainerInner, 6 | ._5d473ecff348c314-clanTag { 7 | display: unset !important; 8 | } 9 | 10 | ._63ed30c16c7151f2-guildTagContainer { 11 | border: none; 12 | } 13 | ._5d473ecff348c314-clanTag, 14 | ._63ed30c16c7151f2-guildTag, 15 | ._972a0d22c8afa7f0-clanTag { 16 | border-radius: 3px; 17 | background: var(--background-modifier-accent); 18 | & ._10651c5cfe637db6-tagText { 19 | color: var(--text-secondary, var(--header-secondary)); 20 | } 21 | & img { 22 | opacity: 0.6; 23 | } 24 | &:hover img { 25 | opacity: 1; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/partner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/playstation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/hidetitlebar.css: -------------------------------------------------------------------------------- 1 | html { 2 | ._5e434347c823b592-base { 3 | grid-template-areas: "titleBar titleBar titleBar" "notice notice notice" "guildsList channelsList page"; 4 | grid-template-rows: [top] 0px [titlebarEnd] min-content [page] 0px [end] !important; 5 | } 6 | .c38106a3f0c3ca76-bar { 7 | height: 0 !important; 8 | } 9 | .c38106a3f0c3ca76-bar .c38106a3f0c3ca76-title { 10 | display: none; 11 | } 12 | .c38106a3f0c3ca76-bar .c38106a3f0c3ca76-trailing { 13 | top: 40px !important; 14 | } 15 | .ef3116c2da186559-scroller { 16 | padding-top: 12px !important; 17 | } 18 | ._6e2b9359c6f84cfd-notice, 19 | #bd-notices { 20 | margin-top: 0px !important; 21 | } 22 | ._5e434347c823b592-base:has(._6e2b9359c6f84cfd-notice, .bd-notice) .c38106a3f0c3ca76-bar .c38106a3f0c3ca76-trailing { 23 | top: 69px !important; 24 | } 25 | } 26 | #app-mount ._5e434347c823b592-sidebarListRounded { 27 | border-top-left-radius: 0px !important; 28 | } 29 | #app-mount .c38106a3f0c3ca76-trailing{ 30 | margin-top: 0px !important; 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/spotify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/steam.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/miyamoto.css: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --background-primary: url("https://cdn.discordapp.com/attachments/1056211378882498641/1373479248517660703/1200px-Shigeru_Miyamoto_2019-137347526.jpg?ex=682a8fba&is=68293e3a&hm=d2676459a43abc64e361255c86bb54d45ad45a7c752f6107b5c034459375dcd3&") !important; 3 | --background-secondary: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages6.alphacoders.com%2F445%2F445791.jpg&f=1&ipt=3bab04ff81c2291346ac3af3b23f2246360bfce67e047985cf2582dc0eed2d8d") !important; 4 | --background-secondary-alt:url(https://nationaltoday.com/wp-content/uploads/2022/09/Shigeru-Miyamoto.jpg.webp) !important; 5 | --background-tertiary:url("https://cdn.discordapp.com/attachments/1056211378882498641/1373483703233151016/shigeru_miyamoto_cloud-2419184245.jpg?ex=682a93e0&is=68294260&hm=b707e1782f66c68ea57a04ef25713dd84dafbecd7f1146b7839eaeb592665d08&") !important; 6 | --text-default: red !important; 7 | } 8 | .guilds__5e434{ 9 | background: url(https://cdn.discordapp.com/attachments/1056211378882498641/1373485850771587113/unknown.png?ex=682a95e0&is=68294460&hm=26b06ab046ec8821d1678637f6f8fa3caaf2111a44b2182fb5799a36961cafec&) 10 | } 11 | .childWrapperNoHoverBg__6e9f8 { 12 | content: url("https://preview.redd.it/official-nintendo-switch-2-logo-with-and-without-background-v0-db06bgkbbfde1.png?width=640&crop=smart&auto=webp&s=43517c3d91972d27bcc50f7d2234e09cf6638834") 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/xbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/oldPlead.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /OldCord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name OldCord 3 | * @version 2.1 4 | * @author milbit, kinggamingyt 5 | * @source https://github.com/milbits/oldcord 6 | * @website https://github.com/milbits/oldcord 7 | * @description Restores discord's 2020 UI 8 | */ 9 | 10 | /* Everything in one */ 11 | @import url("https://milbits.github.io/oldcord/src/main.css"); 12 | 13 | /* If you want to enable/disable each part (like disable profile theming), remove the above line and a [slash]* below. */ 14 | 15 | /*@import url("https://milbits.github.io/oldcord/src/components/vars.css");*/ /* I don't recommend disabling this */ 16 | 17 | /*@import url("https://milbits.github.io/oldcord/src/components/color.css");*/ /* Restores old blurple n stuff*/ 18 | /*@import url("https://milbits.github.io/oldcord/src/components/imgs.css");*/ /* 2020 default avatars and other icons */ 19 | /*@import url("https://milbits.github.io/oldcord/src/components/other.css");*/ /* Random stuff that add to the theme */ 20 | /*@import url("https://milbits.github.io/oldcord/src/components/profile.css");*/ /* Restores the original 2020 Profile UI. Disables cosmetics by default, look at "addons" below */ 21 | /*@import url("https://milbits.github.io/oldcord/src/components/redesign.css");*/ /* The old Discord layout, pre-2025. */ 22 | 23 | 24 | /* 25 | * Addons 26 | * remove a "/*" below to enable one 27 | */ 28 | /* profile cosmetics! woah! funky banners and colors and nametags and stuff! so cool! */ 29 | /*@import url("https://milbits.github.io/oldcord/src/components/showEffects.css");*/ 30 | /* Clan tags ( [🗡️CLAN] )*/ 31 | /*@import url("https://milbits.github.io/oldcord/src/components/showTags.css");*/ 32 | 33 | 34 | /* The old 🥺🥹 */ 35 | /*@import url("https://milbits.github.io/oldcord/src/components/oldEmojis.css");*/ 36 | /* Old color when you use right click menus*/ 37 | /*@import url("https://milbits.github.io/oldcord/src/components/oldContext.css");*/ 38 | 39 | :root{ 40 | --oldcord-tint: 210; /*Light mode tint. Has to be hue in HSL*/ 41 | --oldcord-tint-intensity: 11.11; /*Tint intensity/Saturation. 0 for grayscale, 10000 for an awesome party*/ 42 | 43 | --reaction-animation: 0; /*animation when someone reacts. 0 off 1 on. buggy.*/ 44 | } 45 | -------------------------------------------------------------------------------- /src/assets/oldHoldingBack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/DiscordWordmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/assets/employee.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/Discord_Nitro_Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/Discord_Nitro_Wordmark_Filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/showEffects.css: -------------------------------------------------------------------------------- 1 | /*make cosmetics show again*/ 2 | ._44b0c28be7879b7b-avatarDecoration, 3 | .c19a557985eb7793-avatarDecoration, 4 | ._0137000bc80ab6ea-profileEffects, 5 | ._68edb95846a37624-mask, 6 | ._4bbc6dc06e75ad52-container, 7 | ._9c3bea41fd465666-backgroundImage { 8 | display: unset !important; 9 | } 10 | 11 | .faf9c0f0be1b8685-animatorTop ._68edb95846a37624-mask { 12 | display: none !important; 13 | } 14 | /*adjust profile effect opacity*/ 15 | ._0137000bc80ab6ea-profileEffects { 16 | opacity: 0.2; 17 | } 18 | 19 | .custom-user-profile-theme { 20 | --text-default: #fffffff0 !important; 21 | --header-secondary: #ffffffe0 !important; 22 | } 23 | 24 | /*move that weird circle to the middle*/ 25 | ._68edb95846a37624-mask mask circle { 26 | transform: translateX(69px); 27 | } 28 | .custom-theme-background ._68edb95846a37624-mask mask circle { 29 | transform: translateX(73px) translateY(5px); 30 | } 31 | .user-profile-modal-v2 ._68edb95846a37624-mask mask circle { 32 | display: none !important; 33 | } 34 | /*fix some overlaying stuff*/ 35 | ._5be3ef42f92174b2-header { 36 | z-index: 2; 37 | } 38 | /*make banners not so zoomed-in*/ 39 | .user-profile-popout ._68edb95846a37624-banner { 40 | max-width: 250px; 41 | } 42 | .user-profile-popout ._68edb95846a37624-banner { 43 | min-height: 55px !important; 44 | height: 100px !important; 45 | } 46 | .user-profile-popout ._68edb95846a37624-banner { 47 | mask-image: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0%)); 48 | } 49 | 50 | .custom-user-profile-theme ._5be3ef42f92174b2-header { 51 | background: var(--profile-gradient-overlay-color); 52 | } 53 | 54 | /*move header stuff a bit down*/ 55 | ._9c3bea41fd465666-profileHeader { 56 | min-height: 295px !important; 57 | } 58 | .user-profile-modal-v2 ._9c3bea41fd465666-profileHeader ._75742e4cc9019aeb-avatar { 59 | top: 85px !important; 60 | background: var(--background-floating); 61 | outline: 10px solid var(--background-floating); 62 | } 63 | .user-profile-modal-v2 ._63ed30c16c7151f2-nickname { 64 | top: 195px; 65 | } 66 | .user-profile-modal-v2 ._63ed30c16c7151f2-tags { 67 | top: 220px; 68 | } 69 | .user-profile-modal-v2 .ab86098b36386ff7-container{ 70 | top: 270px !important; 71 | } 72 | ._9c3bea41fd465666-profileButtons { 73 | top: 290px; 74 | padding-top: 20px; 75 | } 76 | 77 | .c0bea05627c5dc35-outer:is(.user-profile-popout.c0bea05627c5dc35-outer) ._63ed30c16c7151f2-container { 78 | padding-top: 44px; 79 | } 80 | .user-profile-popout .ab86098b36386ff7-container { 81 | top: 140px; 82 | } 83 | .user-profile-popout.c0bea05627c5dc35-outer:has(._63ed30c16c7151f2-pronouns) .ab86098b36386ff7-container { 84 | top: 147px !important; 85 | } 86 | .user-profile-popout .c0bea05627c5dc35-inner ._75742e4cc9019aeb-avatar { 87 | top: 61px !important; 88 | left: 85px !important; 89 | } 90 | /*add colors back*/ 91 | .custom-user-profile-theme 92 | :is(.c0bea05627c5dc35-inner, ._9c3bea41fd465666-profileBody, ._63ed30c16c7151f2-container, ._530ce51b6bf15868-mutuals, ._9c3bea41fd465666-profile ._9c3bea41fd465666-profileHeader) { 93 | margin-top: 0; 94 | --profile-gradient-overlay-color: rgb(0 0 0 / 40%); 95 | background: linear-gradient( 96 | color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-primary-color)), 97 | color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-primary-color)), 98 | color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-secondary-color)) 99 | ) !important; 100 | & ._9c3bea41fd465666-profile ._9c3bea41fd465666-profileHeader { 101 | --profile-gradient-overlay-color: rgb(0 0 0 / 60%); 102 | } 103 | } 104 | .custom-user-profile-theme :is(._63ed30c16c7151f2-tags, ._9c3bea41fd465666-profileButtons) { 105 | background: none; 106 | } 107 | 108 | .custom-user-profile-theme ._5be3ef42f92174b2-footer ._740174f3d6a2c8fe-themedBackground { 109 | background: var(--profile-gradient-overlay-color) !important; 110 | } 111 | 112 | /* banners */ 113 | .user-profile-modal-v2 .c0bea05627c5dc35-inner ._68edb95846a37624-mask { 114 | position: absolute; 115 | z-index: 0; 116 | } 117 | .user-profile-modal-v2 .c0bea05627c5dc35-inner ._24502a4069848acb-headerInner { 118 | background: transparent !important; 119 | } 120 | .user-profile-modal-v2 ._68edb95846a37624-banner { 121 | max-width: 350px; 122 | } 123 | 124 | .user-profile-modal-v2:has(._68edb95846a37624-mask) { 125 | :is(._9c3bea41fd465666-profileButtons, .tabBar__37bfc) { 126 | z-index: 2; 127 | } 128 | :where(._68edb95846a37624-banner) { 129 | border-radius: 0px; 130 | } 131 | } 132 | 133 | /* apply ONLY if they have an avatar deco*/ 134 | 135 | ._1fed1dd06c7aabf7-accountProfileCard :is(._68edb95846a37624-banner, ._68edb95846a37624-mask) { 136 | display: none !important; 137 | } 138 | 139 | .custom-user-profile-theme ._764cdd81a2bebd88-cards li, 140 | .custom-user-profile-theme ._62dd31d5e86f2841-container { 141 | background: rgba(255, 255, 255, 0.1) !important; 142 | } 143 | -------------------------------------------------------------------------------- /src/assets/system.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # a fix is being worked on! 2 | There's nothing *you* can do. This is neither vencord's, mine or discord's (intentional) fault. 3 | 4 | Discord changed something behind-the-scenes, and as a side effect, it killed every theme. 5 | It seems like it's easy to fix, though! please be patient :3 6 | 7 | It's not to get you to use the new ui, it's simply them updating their [backend](https://en.wikipedia.org/wiki/Front_end_and_back_end). 8 | Discord themes are also not dependent on vencord or betterdiscord, they simply add the theme into discord's code. 9 | 10 | # OldCord 11 | 12 | A Discord theme that tries to restore its 2020 UI 13 | 14 | By default, it removes profile effects (like banners) and clan tags. See `addons` below to get them back! 15 | 16 | ![Preview](https://raw.githubusercontent.com/milbits/oldcord/master/.github/preview.webp) 17 | 18 | > [!IMPORTANT] 19 | > - For the old grey colors, use the "Ash" theme in `Appearance` under settings 20 | > - Don't use vencord's "Client Theme" plugin, use Discord's own theme picker (with fakenitro if needed) 21 | > - Enable "Sync Profile Themes" in `Settings > Accessibility` to fix broken profile colors 22 | > - Disable "display name style" in `Settings > Accessibility` if you don't want the flashy names 23 | > - UI Density should be on default, i won't support the other 2 options (they still kinda work, though) 24 | > - If you use BetterFolders, expect half your screen to turn blank every few months 25 | 26 |

Light mode

 27 | 28 | Light mode is CUSTOM, it has higher contrast and slightly darker colors with adjustable tint, keeping it bright while not burning your retinas 29 | 30 | It is currently not compatible with ShowEffects, sorry 31 | 32 | 33 | 34 | ###### preview slightly outdated 35 | 36 | Adjust the tint with `--oldcord-tint`, value/number has to be in HSL hue (e.g. 200). You can find it in the theme's `oldcord.theme.css` file. 37 | 38 |
39 | 40 | 41 | 42 |

Addons

 43 | 44 | ## By OldCord 45 | 46 | These are usually included in oldcord.theme.css, so all you need to do is remove `/*` in the file for each addon you want to use 47 | 48 | | Name | Preview | CSS | 49 | | ---------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | 50 | | Show Profile Effects (the one you prob want) | ![Image](https://raw.githubusercontent.com/milbits/oldcord/master/.github/showeffects.webp) | `@import url("https://milbits.github.io/oldcord/src/components/showEffects.css");` | 51 | | Show Clan Tags | im too lazy for an image | `@import url("https://milbits.github.io/oldcord/src/components/showTags.css");` | 52 | | Old Plead Emoji | ![Image](https://raw.githubusercontent.com/milbits/oldcord/master/.github/emojis.webp) | `@import url("https://milbits.github.io/oldcord/src/components/oldEmojis.css");` | 53 | | Context Menu hover bg. | | `@import url("https://milbits.github.io/oldcord/src/components/oldContext.css");` | 54 | | [Tanza3D & KingGamingYT's NoMosaic plugin (BetterDiscord)](https://github.com/KingGamingYT/discord-no-mosaic) | Restores the old image layout | 55 | 56 | If you use custom/quickcss, paste the CSS at the very top! 57 | 58 | ## 3rd party 59 | 60 | | Name | Description | 61 | | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | 62 | | [Icon Revert](https://github.com/davart154/Icon-Revert-2023/blob/main/2023%20Icon%20Revert.theme.css) | Reverts all icons to pre-2023. Can cause lag (see #37) | 63 | | [Vencord's NoMosaic plugin](https://vencord.dev/plugins/NoMosaic) | Restores the old image layout | 64 | | [hide-nitro-upselling](https://github.com/D3SOX/complementary-discord-theme/blob/master/hide-nitro-upselling.betterdiscord.theme.css) | Hides nitro ads, could cause lag | 65 | 66 | --- 67 | 68 |
69 | 70 | # Installation 71 | 72 | ## 😺[Vencord](https://github.com/Vendicated/Vencord) 73 | 74 | #### Local method 75 | 76 | 1. Download [OldCord.theme.css](https://raw.githubusercontent.com/milbits/oldcord/main/OldCord.theme.css) (right-click > "Save As") 77 | 2. Move the file to the Vencord theme folder: 78 | 79 | - `Settings > Themes > Open theme folder` 80 | 81 | #### Online method 82 | 83 | Paste the following in `Settings > Themes`: 84 | 85 | - `https://milbits.github.io/oldcord/src/main.css` 86 | 87 | 88 | ## 🚮[BetterDiscord](https://betterdiscord.app/) 89 | 90 | 1. Download [OldCord.theme.css](https://raw.githubusercontent.com/milbits/oldcord/main/OldCord.theme.css) (right-click > "Save As") 91 | 2. Save the file to your BetterDiscord theme folder: 92 | 93 | - Windows: `%appdata%/BetterDiscord/themes` 94 | - Linux: `~/.config/BetterDiscord/themes` 95 | - MacOS: `/Library/Application\ Support/BetterDiscord/themes/` 96 | 97 | 98 | ## 🎛️ Other 99 | 100 | 1. Paste the following at **the top** of the CSS file/window: 101 | 102 | ```css 103 | @import url("https://milbits.github.io/oldcord/src/main.css"); 104 | ``` 105 | 106 | 107 | -------------------------------------------------------------------------------- /src/assets/epic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/color.css: -------------------------------------------------------------------------------- 1 | /* 2 | [fill="#3ba55c"], 3 | [fill="#3BA55C"], 4 | [fill="rgba(59, 165, 92, 1)"], 5 | [fill="#23a55a"], 6 | [fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], 7 | [fill="rgba(35, 165, 90, 1)"] { 8 | fill: var(--green) !important; 9 | } 10 | [style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"], 11 | [style*="background-color: rgb(59, 165, 92);"], 12 | [style="background: rgb(35 165 90);"] { 13 | background-color: var(--green) !important; 14 | } 15 | [style*="color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"]:not(.themed-2-lozF) { 16 | color: var(--green) !important; 17 | } 18 | 19 | [fill="#3ba55c"], 20 | [style="background-color: rgb(237, 66, 69);"], 21 | .f1ceaca61b18918e-red { 22 | background-color: var(--red) !important; 23 | } 24 | .aeaaeb2a573807f0-topGuildEmojiBadge { 25 | background: var(--red); 26 | } 27 | [fill="#ed4245"] { 28 | fill: var(--red); 29 | } 30 | 31 | [fill="#6370f4"] { 32 | fill: var(--brand-experiment-530); 33 | } 34 | [fill="#5865f2"], 35 | [fill="#5865F2"], 36 | [fill="hsl(234.94,85.56%,64.71%)"], 37 | [fill="hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%)"] { 38 | fill: var(--brand-experiment); 39 | } 40 | [style^="color: rgb(88, 101, 242);"] { 41 | color: var(--brand-experiment) !important; 42 | } 43 | 44 | [style*="background-color: rgb(88, 101, 242);"], 45 | ._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand:disabled, 46 | [style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);"], 47 | .a562c840daab72a7-barFill { 48 | background-color: var(--brand-experiment) !important; 49 | } 50 | 51 | [fill="#23a55a"] { 52 | fill: var(--green) !important; 53 | } 54 | */ 55 | 56 | /*discovery and add button*/ 57 | ._5bc7ed9d4097f6b5-circleIcon { 58 | color: var(--green); 59 | transform: scale(1.3); 60 | ._5bc7ed9d4097f6b5-selected & { 61 | color: #fff; 62 | } 63 | } 64 | ._5bc7ed9d4097f6b5-circleIconButton:is(._5bc7ed9d4097f6b5-selected, :hover) { 65 | color: #fff; 66 | background-color: var(--green) !important; 67 | } 68 | 69 | :is(._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand, .a22cb0c66246f5d3-primary, .a22cb0c66246f5d3-primary:disabled) { 70 | background-color: var(--blurple); 71 | &:hover { 72 | background-color: var(--blurple-hover) !important; 73 | } 74 | &:active { 75 | background-color: var(--blurple-active) !important; 76 | } 77 | } 78 | 79 | /*context menu*/ 80 | .c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused { 81 | background: var(--brand-experiment-560); 82 | &:active { 83 | background: var(--brand-experiment-600) !important; 84 | } 85 | } 86 | /** Dropdown*/ 87 | .popout__3f413 { 88 | background: var(--background-secondary); 89 | margin-top: 0 !important; 90 | border: none; 91 | border-radius: 0 0px 4px 4px !important; 92 | box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high); 93 | } 94 | .option__3f413 { 95 | color: var(--interactive-active) !important; 96 | &:is(:hover, :focus) { 97 | background-color: var(--background-secondary-alt) !important; 98 | } 99 | &[aria-selected="true"] { 100 | background-color: var(--background-tertiary) !important; 101 | } 102 | } 103 | 104 | .c1e9c47c23f12ca3-colorDanger.c1e9c47c23f12ca3-focused, 105 | .a22cb0c66246f5d3-button.critical-a22cb0c66246f5d3-primary { 106 | background-color: var(--red); 107 | &:hover { 108 | background-color: var(--red-hover); 109 | } 110 | &:active { 111 | background-color: var(--red-active) !important; 112 | } 113 | } 114 | 115 | .e131a99484292a19-buttonColor { 116 | background-color: var(--background-primary) !important; 117 | color: var(--interactive-active); 118 | &:hover { 119 | background-color: var(--background-secondary) !important; 120 | } 121 | } 122 | .overlay-a22cb0c66246f5d3-primary { 123 | background: var(--blurple-inverted); 124 | &:hover { 125 | background: var(--blurple-inverted-hover); 126 | } 127 | &:active { 128 | background: var(--blurple-inverted-active); 129 | } 130 | } 131 | 132 | .a2f5142ba8328dfd-tipTitle { 133 | color: var(--brand-experiment) !important; 134 | } 135 | 136 | /*._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen:not(:hover):not(:active) { 137 | border-color: hsla(153, calc(var(--saturation-factor, 1) * 46%), 49%, 0.302); 138 | }*/ 139 | 140 | ._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen, 141 | .a22cb0c66246f5d3-button.a22cb0c66246f5d3-active { 142 | background-color: var(--green); 143 | &:hover { 144 | background-color: var(--green-hover); 145 | } 146 | &:active { 147 | background-color: var(--green-active); 148 | } 149 | } 150 | 151 | /* Green Speaking Border in Maximized Voice Chats */ 152 | ._2f4f7eb58b61c328-border._2f4f7eb58b61c328-speaking { 153 | box-shadow: inset 0 0 0 2px var(--green-360); 154 | } 155 | 156 | .aeaaeb2a573807f0-newlyAddedBadge { 157 | background: var(--green); 158 | } 159 | 160 | /*._48112cbe77dc5022-folderIconWrapper[style="background-color: rgba(88, 101, 242, 0.4);"] { 161 | background-color: var(--brand-experiment-40a) !important; 162 | }*/ 163 | 164 | ._841c8f861f7b2704-mentionButton { 165 | --text-link: var(--brand-experiment); 166 | } 167 | 168 | /** Add Friend Chip*/ 169 | ._133bf5eea8e33a34-addFriend.selected_b3f026 { 170 | color: var(--green) !important; 171 | background-color: var(--green-transparent) !important; 172 | } 173 | ._133bf5eea8e33a34-addFriend { 174 | background-color: var(--green) !important; 175 | } 176 | 177 | .barFill-2Bh7CX { 178 | background: var(--brand-experiment); 179 | height: 100%; 180 | } 181 | 182 | ._09691b0a8e9f4365-partnered:not(.disableColor-2z9rkr) { 183 | color: var(--brand-experiment); 184 | } 185 | 186 | /**Search page*/ 187 | /*search menu thing*/ 188 | ._55c999adcf6db265-container { 189 | background: var(--background-gradient-low, var(--background-primary)); 190 | } 191 | ._55c999adcf6db265-container ._56fec8e8b8048fe0-option:hover { 192 | background: var(--background-gradient-lowest, var(--background-tertiary)); 193 | } 194 | /*search results*/ 195 | .f3b986a284a18c78-searchHeader { 196 | background: var(--background-overlay-chat); 197 | box-shadow: var(--elevation-low); 198 | border: none; 199 | height: 48px; 200 | padding: 0 20px; 201 | } 202 | .f3b986a284a18c78-searchHeaderTabList .selected_b3f026 { 203 | box-shadow: inset 0 -2px var(--interactive-active); 204 | } 205 | .f3b986a284a18c78-searchHeaderTabList .item_b3f026 { 206 | padding: 15px 8px; 207 | border-radius: 0; 208 | background-color: transparent !important; 209 | font-size: 14px; 210 | border-radius: 0 !important; 211 | } 212 | 213 | .c68065c20f8328a7-searchResultGroup:before { 214 | content: ""; 215 | width: 100%; 216 | height: 1px; 217 | display: block; 218 | background: var(--background-modifier-accent); 219 | position: relative; 220 | top: 12px; 221 | } 222 | 223 | ._02a39cb2980ceaaf-searchResult { 224 | border: solid 1px var(--background-tertiary); 225 | border-radius: 4px; 226 | } 227 | 228 | /** Mentions/Pings*/ 229 | .f61d60ed65f9a128-wrapper { 230 | font-weight: 500; 231 | color: var(--brand-experiment-460); 232 | background: var(--brand-experiment-10a); 233 | padding: 0 2px; 234 | } 235 | .f61d60ed65f9a128-wrapper:hover { 236 | background: var(--brand-experiment); 237 | color: var(--brand-experiment-100); 238 | } 239 | 240 | .interactive { 241 | transition: background-color 50ms ease-out, color 50ms ease-out; 242 | cursor: pointer; 243 | text-decoration: none !important; 244 | } 245 | ._5126c0cd07f243a0-mentioned .interactive { 246 | /* make background transparent when mentioned*/ 247 | background: transparent; 248 | } 249 | .interactive:hover { 250 | color: white; 251 | background-color: var(--brand-experiment); 252 | } 253 | 254 | .b7556324b2bdb82b-iconMentionText .b7556324b2bdb82b-icon { 255 | display: none; 256 | } 257 | .b7556324b2bdb82b-iconMentionText .b7556324b2bdb82b-name:before { 258 | content: "#"; 259 | } 260 | 261 | /** Log Out, Server Boost, Delete Server Buttons*/ 262 | .side_b3f026 .item_b3f026 { 263 | border-radius: 3px; 264 | } 265 | 266 | .item_b3f026.destructive_b3f026:hover { 267 | background-color: var(--red-transparent) !important; 268 | } 269 | .item_b3f026.destructive_b3f026:active { 270 | background-color: var(--red) !important; 271 | color: white !important; 272 | } 273 | 274 | .serverBoostTabItem_cbe0b4, 275 | ._581eac78e841159b-premiumTab { 276 | color: var(--blurple) !important; 277 | } 278 | :is(.serverBoostTabItem_cbe0b4, ._581eac78e841159b-premiumTab):hover { 279 | background-color: var(--brand-experiment-10a) !important; 280 | } 281 | :is(.serverBoostTabItem_cbe0b4, ._581eac78e841159b-premiumTab):active { 282 | color: white !important; 283 | background-color: var(--blurple) !important; 284 | } 285 | 286 | /*! Reactions*/ 287 | /*selectors for forums and normal messages*/ 288 | 289 | ._23977d5b7cef7361-reactions { 290 | padding-top: 0; 291 | margin-top: -0.125rem; 292 | } 293 | 294 | .theme-dark ._23977d5b7cef7361-reactionBtn { 295 | border-radius: 2px; 296 | margin-bottom: 1px; 297 | background: none; 298 | border: none; 299 | } 300 | ._23977d5b7cef7361-reactionBtn.forceShowLook_ec6b19:hover { 301 | background-color: unset; 302 | } 303 | 304 | .f8896c4f6be18f59-reaction, 305 | ._23977d5b7cef7361-reaction { 306 | border-radius: 0.25rem; 307 | border: none; 308 | margin-bottom: 0.125rem; 309 | transition: background-color 0.1s ease; 310 | background: var(--background-modifier-accent) !important; 311 | &:hover { 312 | background-color: var(--background-modifier-selected) !important; 313 | } 314 | } 315 | .f8896c4f6be18f59-reaction:hover, 316 | ._23977d5b7cef7361-reaction:hover { 317 | background-color: var(--background-modifier-selected) !important; 318 | } 319 | ._5126c0cd07f243a0-mentioned .f8896c4f6be18f59-reaction, 320 | ._5126c0cd07f243a0-mentioned .f8896c4f6be18f59-reaction:hover { 321 | background-color: var(--background-modifier-accent); 322 | } 323 | 324 | ._23977d5b7cef7361-reaction:hover ._23977d5b7cef7361-reactionCount, 325 | .f8896c4f6be18f59-reaction:hover .f8896c4f6be18f59-reactionCount { 326 | color: var(--interactive-active) !important; 327 | } 328 | 329 | ._5126c0cd07f243a0-mentioned .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe, 330 | ._5126c0cd07f243a0-mentioned .f8896c4f6be18f59-reactionMe.f8896c4f6be18f59-reaction:hover, 331 | .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe, 332 | ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe { 333 | background-color: var(--brand-experiment-30a) !important; 334 | } 335 | 336 | ._23977d5b7cef7361-reactionInner, 337 | .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionInner { 338 | padding: 0 0.375rem !important; 339 | } 340 | .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe .f8896c4f6be18f59-reactionCount, 341 | ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe ._23977d5b7cef7361-reactionCount { 342 | color: var(--brand-experiment) !important; 343 | } 344 | 345 | ._23977d5b7cef7361-reactionCount, 346 | .f8896c4f6be18f59-reactionCount { 347 | font-weight: 500; 348 | color: var(--text-muted); 349 | } 350 | 351 | /** Select Menus*/ 352 | .select__3f413, 353 | .fffc15720e237bf1-copyInput { 354 | background-color: var(--background-secondary) !important; 355 | border-radius: 3px; 356 | transition: border 0.2s ease-in-out; 357 | cursor: default !important; 358 | } 359 | .open__3f413 { 360 | border-color: var(--deprecated-text-input-border-hover) !important; 361 | } 362 | /* icon*/ 363 | .select__3f413 [d="M7.41 16.0001L12 11.4201L16.59 16.0001L18 14.5901L12 8.59006L6 14.5901L7.41 16.0001Z"] { 364 | d: path("M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z"); 365 | } 366 | .icons__3f413 { 367 | color: var(--text-muted); 368 | } 369 | .select__3f413.open__3f413 .icons__3f413 { 370 | color: var(--interactive-active); 371 | } 372 | 373 | /** Close Button*/ 374 | :is(.e9e3ed8b8badfe05-contentHeader .a22cb0c66246f5d3-buttonChildren, .c2b141c0f80863fb-closeButton) path { 375 | d: path("M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12"); 376 | } 377 | .theme-light .c2b141c0f80863fb-closeButton, .theme-light ._8a031a135bfcb9ba-container[data-mana-component="layer-modal"] .e9e3ed8b8badfe05-contentHeader .a22cb0c66246f5d3-buttonChildren { 378 | outline: 2px solid #dcddde; 379 | border: none; 380 | background: transparent !important; 381 | &:hover { 382 | background: #f6f6f7 !important; 383 | color: #dcddde !important; 384 | } 385 | & svg { 386 | color: var(--text-muted) !important; 387 | transform: scale(1.4); 388 | 389 | } 390 | } 391 | .theme-dark .c2b141c0f80863fb-closeButton, .theme-dark ._8a031a135bfcb9ba-container[data-mana-component="layer-modal"] .e9e3ed8b8badfe05-contentHeader .a22cb0c66246f5d3-buttonChildren { 392 | outline: 2px solid var(--text-muted); 393 | border: none; 394 | background: transparent !important; 395 | & svg { 396 | color: #dcddde !important; 397 | transform: scale(1.4); 398 | } 399 | &:hover { 400 | background: rgb(114 118 126 / 30%) !important; 401 | color: var(--text-muted) !important; 402 | } 403 | } 404 | .c2b141c0f80863fb-keybind { 405 | color: var(--text-muted) !important; 406 | } 407 | 408 | .a22cb0c66246f5d3-button.critical-a22cb0c66246f5d3-secondary { 409 | background: transparent !important; 410 | color: var(--red) !important; 411 | border: 1px solid var(--text-danger) !important; 412 | } 413 | .a22cb0c66246f5d3-button.critical-a22cb0c66246f5d3-secondary:active { 414 | background: var(--red-transparent) !important; 415 | } 416 | 417 | html:not(.custom-theme-background) ._2ea32c412048f708-icon:not(._2ea32c412048f708-modeMuted ._2ea32c412048f708-icon) { 418 | color: var(--text-muted); 419 | } 420 | 421 | .critical__98277 { 422 | color: var(--text-danger); 423 | } 424 | 425 | .a22cb0c66246f5d3-expressive canvas { 426 | display: none; 427 | } 428 | 429 | /* revert new unread bar*/ 430 | ._7aaec78b97ff00f7-bar { 431 | padding-left: 71px; 432 | margin-top: 8px; 433 | width: 146px !important; 434 | background-color: var(--background-accent); 435 | opacity: 0.9; 436 | font-family: var(--font-display); 437 | box-shadow: 0 2px 6px hsl(var(--black-500-hsl) / 0.24); 438 | &:active { 439 | top: 1px; 440 | } 441 | } 442 | 443 | ._3b95d7d910416e54-unread { 444 | background-color: var(--background-accent); 445 | opacity: 0.9; 446 | } 447 | ._7aaec78b97ff00f7-barText { 448 | color: white !important; 449 | } 450 | /* unread bar in channels*/ 451 | ._0f481cbbd7530492-newMessagesBar { 452 | height: 0; 453 | } 454 | 455 | /* revert tab focus color*/ 456 | .focus-rings-ring { 457 | box-shadow: 0 0 0 4px var(--brand-experiment); 458 | } 459 | 460 | /*channels and roles*/ 461 | ._0b56311ebc6682e2-container, 462 | ._0b56311ebc6682e2-header { 463 | background-color: var(--background-primary) !important; 464 | } 465 | .e4503acec53c64dd-channelRow:hover { 466 | background-color: var(--background-modifier-hover) !important; 467 | } 468 | 469 | ._270d7a28db32b312-optionButtonWrapper { 470 | transition: 0.1s ease-in-out; 471 | border-radius: 4px; 472 | } 473 | 474 | /** active now in friends tab*/ 475 | ._133bf5eea8e33a34-nowPlayingColumn ._7d20cf18f8a2784c-container, 476 | ._5d7c9a81ac5dd074-profileCard, 477 | ._5d7c9a81ac5dd074-prompt { 478 | background-color: var(--background-secondary); 479 | } 480 | ._7d20cf18f8a2784c-scroller { 481 | border: none; 482 | } 483 | ._133bf5eea8e33a34-nowPlayingColumn ._7d20cf18f8a2784c-header { 484 | color: var(--header-secondary); 485 | text-transform: uppercase; 486 | font-size: 12px; 487 | margin: 0; 488 | margin-bottom: var(--space-16); 489 | font-weight: 600; 490 | } 491 | ._00943886e1cf89d1-wrapper { 492 | border: none; 493 | background: var(--background-tertiary); 494 | border-radius: 4px; 495 | } 496 | 497 | /*GIF Selector*/ 498 | ._2dc39186a9b98da4-result:hover:after { 499 | box-shadow: inset 0 0 0 2px var(--brand-experiment), inset 0 0 0 3px var(--primary-630); 500 | } 501 | ._2dc39186a9b98da4-result:after { 502 | background: none !important; 503 | z-index: 10; 504 | } 505 | 506 | .d02962a38047ac3c-categoryFade { 507 | background: hsl(var(--black-500-hsl) / 0.4); 508 | transition: background-color.15s ease-out; 509 | &:hover { 510 | backdrop-filter: none; 511 | background: rgba(0, 0, 0, 0.7); 512 | } 513 | } 514 | .d02962a38047ac3c-categoryFadeBlurple { 515 | transition: background-color.15s ease-out; 516 | &:hover { 517 | background: var(--brand-experiment-95a); 518 | backdrop-filter: none; 519 | } 520 | } 521 | 522 | .vc-addon-card { 523 | background: var(--background-secondary-alt) !important; 524 | border: none !important; 525 | &:hover { 526 | background: var(--background-tertiary) !important; 527 | } 528 | } -------------------------------------------------------------------------------- /src/components/vars.css: -------------------------------------------------------------------------------- 1 | html:not(.custom-theme-background).theme-dark:not(.theme-darker, .theme-midnight), 2 | html:not(.custom-theme-background) .theme-dark:not(.theme-darker, .theme-midnight) { 3 | --autocomplete-bg: color-mix(in oklab, var(--primary-630) 100%, var(--theme-base-color, #000) var(--theme-base-color-amount, 0%)); 4 | --chat-background-default: hsl(218, calc(var(--saturation-factor, 1) * 8%), 27%); 5 | --header-primary: var(--white-500); 6 | --header-secondary: #b9bbbe; 7 | --channels-default: #8e9297; 8 | --interactive-normal: #b9bbbe; 9 | --interactive-hover: #dcddde; 10 | --interactive-active: var(--white-500); 11 | --interactive-muted: hsl(217, calc(var(--saturation-factor, 1) * 8%), 34%); 12 | --background-primary: hsl(220, calc(var(--saturation-factor, 1) * 8%), 23%); 13 | --modal-background: var(--background-primary); 14 | --primary-600: var(--background-primary); 15 | --primary-630: var(--background-secondary); 16 | --background-secondary: hsl(223, calc(var(--saturation-factor, 1) * 7%), 20%); 17 | --background-secondary-alt: hsl(220, calc(var(--saturation-factor, 1) * 7%), 17%); 18 | --background-tertiary: hsl(216, calc(var(--saturation-factor, 1) * 7%), 14%); 19 | --background-accent: hsl(217, calc(var(--saturation-factor, 1) * 8%), 34%); 20 | --background-floating: #18191c; 21 | --background-modifier-hover: #4f545c29; 22 | --background-modifier-active: #4f545c3d; 23 | --background-modifier-selected: #4f545c52; 24 | --background-modifier-accent: #ffffff0f; 25 | --background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.051); 26 | --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.078); 27 | --background-message-hover: #04040512; 28 | --background-help-warning: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.102); 29 | --background-help-info: #00b0f41a; 30 | --scrollbar-thin-thumb: #202225; 31 | --scrollbar-thin-track: transparent; 32 | --scrollbar-auto-thumb: #202225; 33 | --scrollbar-auto-track: #2e3338; 34 | --scrollbar-auto-scrollbar-color-thumb: #202225; 35 | --scrollbar-auto-scrollbar-color-track: #2f3136; 36 | --elevation-stroke: 0 0 0 1px #04040526; 37 | --elevation-low: 0 1px 0 #04040533, 0 1.5px 0 #0606070d, 0 2px 0 #0404050d; 38 | --elevation-medium: 0 4px 4px #00000029; 39 | --elevation-high: 0 8px 16px #0000003d; 40 | --bg-base-tertiary: var(--background-tertiary); 41 | --icon-primary: var(--interactive-normal); 42 | --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl) / 0.3); 43 | --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.2); 44 | --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl) / 0.6); 45 | 46 | --logo-primary: var(--white-500); 47 | --focus-primary: var(--brand-experiment); 48 | --deprecated-card-bg: hsla(216, calc(var(--saturation-factor, 1) * 7%), 14%, 0.6); 49 | --deprecated-card-editable-bg: #2022254d; 50 | --deprecated-store-bg: var(--background-primary); 51 | --deprecated-quickswitcher-input-background: #72767d; 52 | --deprecated-quickswitcher-input-placeholder: #ffffff4d; 53 | --deprecated-text-input-bg: #0000001a; 54 | --deprecated-text-input-border: #0000004d; 55 | --deprecated-text-input-border-hover: #040405; 56 | --deprecated-text-input-border-disabled: #202225; 57 | --deprecated-text-input-prefix: #dcddde; 58 | --button-secondary: #4f545c; 59 | --button-secondary-hover: #72767d; 60 | --button-secondary-active: #72767d; 61 | --primary-transparent: #ffffff1a; 62 | 63 | --search-popout-option-user-nickname: var(--text-default); 64 | --search-popout-option-user-username: var(--text-muted); 65 | --search-popout-option-filter-text: var(--primary-400); 66 | --search-popout-option-non-text-color: #caccce; 67 | --search-popout-option-filter-color: #caccce; 68 | --search-popout-option-answer-color: #caccce; 69 | --search-popout-date-picker-border: 1px solid hsl(228 calc(1 * 6.667%) 14.706% /0.3); 70 | --search-popout-date-picker-hint-text: #caccce; 71 | --search-popout-date-picker-hint-value-text: #fff; 72 | --search-popout-date-picker-hint-value-background: var(--brand-500); 73 | --search-popout-date-picker-hint-value-background-hover: var(--brand-430); 74 | 75 | --shadow-border: 0 0 0 1px hsl(none 0% 100%/0.08); 76 | --shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100%/0.08)); 77 | --shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0%/0.24); 78 | --shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24)); 79 | --shadow-high: 0 12px 24px 0 hsl(none 0% 0%/0.24); 80 | --shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24)); 81 | --shadow-ledge: 0 2px 0 0 hsl(none 0% 0%/0.05), 0 1.5px 0 0 hsl(none 0% 0%/0.05), 0 1px 0 0 hsl(none 0% 0%/0.16); 82 | --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0%/0.24)); 83 | --shadow-low: 0 1px 4px 0 hsl(none 0% 0%/0.14); 84 | --shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0%/0.14)); 85 | --shadow-low-active: 0 0 4px 0 hsl(none 0% 0%/0.14); 86 | --shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0%/0.14)); 87 | --shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0%/0.14); 88 | --shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0%/0.14)); 89 | --shadow-medium: 0 4px 8px 0 hsl(none 0% 0%/0.16); 90 | --shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0%/0.16)); 91 | --shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0%/0.22); 92 | --shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0%/0.22)); 93 | --shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0%/0.24); 94 | --shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0%/0.24)); 95 | --shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0%/0.05), 0 -1.5px 0 0 hsl(none 0% 0%/0.05), 0 -1px 0 0 hsl(none 0% 0%/0.16); 96 | --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0%/0.24)); 97 | --shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0%/0.14); 98 | --shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0%/0.14)); 99 | 100 | --text-muted: #72767d; 101 | 102 | --info-positive-foreground: var(--green); 103 | --text-positive: var(--green); 104 | --status-positive-background: var(--green); 105 | --button-danger-background-active: var(--red-active); 106 | --button-danger-background: var(--red); 107 | --text-danger: var(--red); 108 | --info-danger-foreground: var(--red); 109 | --status-danger-background: var(--red); 110 | --font-display: var(--font-primary); 111 | --control-brand-foreground: var(--brand-experiment); 112 | --notice-background-warning: #f26522; 113 | --notice-text-warning: #fff; 114 | --notice-background-critical: #f23f42; 115 | --notice-text-critical: #fff; 116 | --notice-background-info: var(--blurple); 117 | --notice-text-info: #fff; 118 | --background-surface-high: var(--background-secondary); 119 | --control-background-active-default: var(--green); 120 | --control-background-active-hover: var(--green-hover); 121 | --control-background-active-active: var(--green-active); 122 | --control-text-active-default: var(--white); 123 | } 124 | 125 | html:not(.custom-theme-background).theme-light, 126 | html:not(.custom-theme-background) .theme-light { 127 | --background-primary: hsl(var(--oldcord-tint) var(--oldcord-tint-intensity) 95%) !important; 128 | --background-secondary: hsl(var(--oldcord-tint) var(--oldcord-tint-intensity) 90%); 129 | --background-tertiary: hsl(var(--oldcord-tint) var(--oldcord-tint-intensity) 85%); 130 | --background-secondary-alt: hsl(var(--oldcord-tint) var(--oldcord-tint-intensity) 83%); 131 | --text-default: hsl(0deg 0% 13.33%); 132 | --chat-background-default: hsl(var(--oldcord-tint) var(--oldcord-tint-intensity) 90.94%); 133 | --bg-base-tertiary: var(--background-tertiary); 134 | 135 | --background-modifier-accent: #06060714; 136 | --background-modifier-hover: hsl(calc(var(--oldcord-tint) + 12) 25% 88.5%); 137 | --background-modifier-active: hsl(calc(var(--oldcord-tint) + 15) 25% 87%) !important; 138 | --background-modifier-selected: hsl(calc(var(--oldcord-tint) + 20) 25% 84%); 139 | 140 | --background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.1); 141 | --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.2); 142 | --background-message-hover: rgba(6, 6, 7, 0.02); 143 | --elevation-stroke: 0 0 0 1px rgba(6, 6, 7, 0.08); 144 | --elevation-low: 0 1px 0 rgba(6, 6, 7, 0.1), 0 1.5px 0 rgba(6, 6, 7, 0.025), 0 2px 0 rgba(6, 6, 7, 0.025); 145 | --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.08); 146 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.16); 147 | 148 | --legacy-elevation-low: 0 1px 5px hsl(var(--black-500-hsl) / 0.2); 149 | --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1); 150 | --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3); 151 | 152 | --logo-primary: var(--brand-experiment); 153 | --focus-primary: var(--brand-experiment); 154 | --radio-group-dot-foreground: hsl(227, calc(var(--saturation-factor, 1) * 31%), 44%); 155 | --primary-transparent: hsla(214, calc(var(--saturation-factor, 1) * 10%), 50%, 0.102); 156 | 157 | --info-positive-foreground: var(--green); 158 | --text-positive: var(--green); 159 | --status-positive-background: var(--green); 160 | --button-danger-background-active: var(--red-active); 161 | --button-danger-background: var(--red); 162 | --text-danger: var(--red); 163 | --info-danger-foreground: var(--red); 164 | --status-danger-background: var(--red); 165 | --font-display: var(--font-primary); 166 | --control-brand-foreground: var(--brand-experiment); 167 | --notice-background-warning: #f26522; 168 | --notice-text-warning: #fff; 169 | --notice-background-critical: #f23f42; 170 | --notice-text-critical: #fff; 171 | --notice-background-info: var(--blurple); 172 | --notice-text-info: #fff; 173 | --background-surface-high: var(--background-secondary); 174 | --control-background-active-default: var(--green); 175 | --control-background-active-hover: var(--green-hover); 176 | --control-background-active-active: var(--green-active); 177 | --control-text-active-default: var(--white); 178 | } 179 | :root { 180 | --oldcord-tint: 210; /* light mode */ 181 | --oldcord-tint-intensity: 11.11; 182 | --font-primary: Whitney, "Helvetica Neue", "gg sans", Helvetica, Arial, sans-serif; 183 | --font-display: Whitney, "Helvetica Neue", "gg sans", Helvetica, Arial, sans-serif !important; 184 | --font-headline: Whitney, "Helvetica Neue", "gg sans", Helvetica, Arial, sans-serif; 185 | --blurple: var(--brand-experiment); 186 | --blurple-hover: hsl(227, calc(var(--saturation-factor, 1) * 44%), 59%); 187 | --blurple-active: hsl(226, calc(var(--saturation-factor, 1) * 34%), 52%); 188 | --blurple-inverted: #fff; 189 | --blurple-inverted-hover: hsl(228, calc(var(--saturation-factor, 1) * 56%), 98%); 190 | --blurple-inverted-active: hsl(229, calc(var(--saturation-factor, 1) * 60%), 93%); 191 | --text-brand: var(--blurple); 192 | --brand-260: var(--brand-experiment-260); 193 | --brand-360: var(--brand-experiment-360); 194 | --brand-460: var(--brand-experiment-460); 195 | --brand-500: var(--brand-experiment); 196 | --brand-new-500: var(--blurple); 197 | --brand-530: var(--brand-experiment-530); 198 | --brand-560: var(--brand-experiment-560); 199 | --brand-new-560: var(--brand-560); 200 | --brand-600: var(--brand-experiment-600); 201 | --brand-experiment-100: hsl(228, calc(var(--saturation-factor, 1) * 56%), 98%); 202 | --brand-experiment-130: hsl(228, calc(var(--saturation-factor, 1) * 63%), 97%); 203 | --brand-experiment-160: hsl(228, calc(var(--saturation-factor, 1) * 60%), 95%); 204 | --brand-experiment-200: hsl(229, calc(var(--saturation-factor, 1) * 60%), 93%); 205 | --brand-experiment-230: hsl(227, calc(var(--saturation-factor, 1) * 57%), 91%); 206 | --brand-experiment-260: hsl(226, calc(var(--saturation-factor, 1) * 59%), 89%); 207 | --brand-experiment-300: hsl(227, calc(var(--saturation-factor, 1) * 58%), 86%); 208 | --brand-experiment-330: hsl(227, calc(var(--saturation-factor, 1) * 59%), 82%); 209 | --brand-experiment-360: hsl(227, calc(var(--saturation-factor, 1) * 58%), 78%); 210 | --brand-experiment-400: hsl(226, calc(var(--saturation-factor, 1) * 58%), 72%); 211 | --brand-experiment-430: hsl(227, calc(var(--saturation-factor, 1) * 58%), 70%); 212 | --brand-experiment-460: hsl(227, calc(var(--saturation-factor, 1) * 59%), 68%); 213 | --brand-experiment: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%); 214 | --brand-experiment-500: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%); 215 | --brand-experiment-530: hsl(227, calc(var(--saturation-factor, 1) * 45%), 59%); 216 | --brand-experiment-560: hsl(227, calc(var(--saturation-factor, 1) * 35%), 53%); 217 | --brand-experiment-600: hsl(227, calc(var(--saturation-factor, 1) * 31%), 44%); 218 | --brand-experiment-630: hsl(226, calc(var(--saturation-factor, 1) * 31%), 38%); 219 | --brand-experiment-660: hsl(226, calc(var(--saturation-factor, 1) * 31%), 34%); 220 | --brand-experiment-700: hsl(227, calc(var(--saturation-factor, 1) * 31%), 26%); 221 | --brand-experiment-730: hsl(228, calc(var(--saturation-factor, 1) * 31%), 25%); 222 | --brand-experiment-760: hsl(227, calc(var(--saturation-factor, 1) * 32%), 22%); 223 | --brand-experiment-800: hsl(226, calc(var(--saturation-factor, 1) * 31%), 19%); 224 | --brand-experiment-830: hsl(225, calc(var(--saturation-factor, 1) * 32%), 15%); 225 | --brand-experiment-860: hsl(225, calc(var(--saturation-factor, 1) * 32%), 10%); 226 | --brand-experiment-900: hsl(228, calc(var(--saturation-factor, 1) * 29%), 3%); 227 | --brand-experiment-05a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 5%); 228 | --brand-experiment-10a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 10%); 229 | --brand-experiment-15a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 15%); 230 | --brand-experiment-20a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 20%); 231 | --brand-experiment-25a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 25%); 232 | --brand-experiment-30a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 30%); 233 | --brand-experiment-35a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 35%); 234 | --brand-experiment-40a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 40%); 235 | --brand-experiment-45a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 45%); 236 | --brand-experiment-50a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 50%); 237 | --brand-experiment-55a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 55%); 238 | --brand-experiment-60a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 60%); 239 | --brand-experiment-65a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 65%); 240 | --brand-experiment-70a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 70%); 241 | --brand-experiment-75a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 75%); 242 | --brand-experiment-80a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 80%); 243 | --brand-experiment-85a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 85%); 244 | --brand-experiment-90a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 90%); 245 | --brand-experiment-95a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 95%); 246 | 247 | --red-inverted: hsl(0, calc(var(--saturation-factor, 1) * 80%), 98%); 248 | --red-inverted-active: hsl(0, calc(var(--saturation-factor, 1) * 85%), 92%); 249 | 250 | --yellow: hsl(38, calc(var(--saturation-factor, 1) * 96%), 54%); 251 | --yellow-hover: hsl(37, 81%, 49%); 252 | --yellow-active: hsl(37, 81%, 44%); 253 | 254 | --yellow-inverted: #fffbf4; 255 | --yellow-inverted-active: #feedd1; 256 | --yellow-360: var(--yellow); 257 | --status-yellow-560: var(--yellow); 258 | 259 | --green-inverted: #f6fbf9; 260 | --green-inverted-active: #d9f0e6; 261 | --green: hsl(153, calc(var(--saturation-factor, 1) * 46%), 49%); 262 | --green-hover: hsl(153, calc(var(--saturation-factor, 1) * 46%), 44%); 263 | --green-active: hsl(152, calc(var(--saturation-factor, 1) * 46%), 39%); 264 | --green-transparent: hsl(153, calc(var(--saturation-factor, 1) * 46%), 49%, 20%); 265 | --control-background-active-default: var(--green); 266 | --control-background-active-hover: var(--green-hover); 267 | --control-background-active-active: var(--green-active); 268 | 269 | --button-positive-background: var(--green); 270 | --status-green-600: var(--green); 271 | --green-360: var(--green); 272 | --info-positive-foreground: var(--green); 273 | --text-positive: var(--green); 274 | --status-positive-background: var(--green); 275 | 276 | --blue-345: hsl(199.524 calc(1 * 100%) 49.412% /1); 277 | 278 | --red: hsl(0deg, calc(var(--saturation-factor, 1) * 85%), 61%); 279 | --red-hover: hsl(0deg, calc(var(--saturation-factor, 1) * 66%), 55%); 280 | --red-active: hsl(0deg, calc(var(--saturation-factor, 1) * 54%), 49%); 281 | --red-transparent: hsl(0, calc(var(--saturation-factor, 1) * 85%), 61%, 10%); 282 | --button-danger-background-active: var(--red-active); 283 | --button-danger-background: var(--red); 284 | --text-danger: var(--red); 285 | --info-danger-foreground: var(--red); 286 | --status-danger-background: var(--red); 287 | 288 | --font-display: var(--font-primary); 289 | --control-brand-foreground: var(--brand-experiment); 290 | --bdfdb-green: var(--green); 291 | --text-warning: hsl(40 calc(var(--saturation-factor, 1) * 86.4%) 56.9%/1); 292 | --notice-background-warning: #f26522; 293 | --notice-text-warning: #fff; 294 | --notice-background-critical: #f23f42; 295 | --notice-text-critical: #fff; 296 | --notice-background-info: var(--blurple); 297 | --notice-text-info: #fff; 298 | --background-surface-high: var(--background-secondary); 299 | --bg-base-secondary: var(--background-secondary); 300 | --control-text-active-default: var(--white); 301 | /* activity colors*/ 302 | --twitch-dark: hsl(262, calc(var(--saturation-factor, 1) * 47%), 36%); 303 | --twitch: hsl(262, calc(var(--saturation-factor, 1) * 47%), 40%); 304 | --youtube-dark: hsl(0, calc(var(--saturation-factor, 1) * 73%), 41%); 305 | --youtube: hsl(0deg, calc(var(--saturation-factor, 1) * 73%), 46%); 306 | --spotify: hsl(141, calc(var(--saturation-factor, 1) * 72%), 42%); 307 | --spotify-dark: hsl(141, calc(var(--saturation-factor, 1) * 72%), 40%); 308 | --xbox-dark: hsl(120, calc(var(--saturation-factor, 1) * 77%), 26%); 309 | --xbox2: hsl(120, calc(var(--saturation-factor, 1) * 77%), 27%); 310 | --playstation-dark: hsl(220, calc(var(--saturation-factor, 1) * 96%), 27%); 311 | --playstation2: hsl(220, calc(var(--saturation-factor, 1) * 96%), 31%); 312 | --crunchyroll-dark: hsl(29, calc(var(--saturation-factor, 1) * 93%), 55%); 313 | --crunchyroll: hsl(29, calc(var(--saturation-factor, 1) * 93%), 60%); 314 | --text-link: color-mix(in oklab, var(--blue-345) 100%, var(--theme-text-color, #000) var(--theme-text-color-amount, 0%)); 315 | } 316 | 317 | ._730694f5672c9601-cardPrimary { 318 | --__card-accent-color: var(--background-secondary) !important; 319 | } 320 | 321 | ._6e2b9359c6f84cfd-colorDefault, .colorSuccess__6e2b9 { 322 | --custom-notice-background: var(--status-positive-background); 323 | --custom-notice-text: var(--status-positive-text); 324 | --custom-notice-button-hover: var(--status-positive-background); 325 | } 326 | 327 | ._6e2b9359c6f84cfd-colorDanger { 328 | --custom-notice-background: var(--status-danger-background) !important; 329 | --custom-notice-text: var(--status-danger-text) !important; 330 | --custom-notice-button-hover: var(--text-danger) !important; 331 | } 332 | 333 | :root { 334 | --custom-channel-header-height: 48px; 335 | --custom-member-list-width: 240px; 336 | --custom-guild-list-width: 72px; 337 | --custom-guild-sidebar-width: 375px; 338 | --custom-app-panels-height: 52.984375px; 339 | --custom-add-permissions-modal-focus-ring-width: 4px; 340 | --custom-custom-role-icon-form-item-role-icon-preview-size: 32px; 341 | --custom-guild-settings-roles-edit-shared-sidebar-width: 232px; 342 | --custom-guild-settings-roles-intro-roles-transition: 250ms; 343 | --custom-guild-settings-roles-intro-pause-transition: 166ms; 344 | --custom-guild-settings-roles-intro-background-transition: 500ms; 345 | --custom-guild-settings-roles-intro-banner-transition-delay: calc( 346 | var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition) 347 | ); 348 | --custom-guild-settings-roles-intro-roles-transition-delay: calc( 349 | var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition) * 2 + 350 | var(--custom-guild-settings-roles-intro-background-transition) 351 | ); 352 | --custom-guild-settings-community-intro-content-spacing: 32px; 353 | --custom-guild-settings-community-intro-hover-distance: -12px; 354 | --custom-guild-settings-community-intro-text-spacing: 8px; 355 | --custom-guild-settings-discovery-landing-page-max-width-tab: 905px; 356 | --custom-guild-settings-discovery-landing-page-settings-max-width: 520px; 357 | --custom-guild-settings-partner-content-spacing: 32px; 358 | --custom-event-detail-info-tab-base-spacing: 8px; 359 | --custom-subscription-listing-previews-carousel-cards-get-cut-off-width: 724px; 360 | --custom-editable-benefits-list-emoji-size: 24px; 361 | --custom-edit-benefit-modal-emoji-size: 22px; 362 | --custom-edit-benefit-modal-emoji-margin: 10px; 363 | --custom-guild-settings-role-subscriptions-max-width: 905px; 364 | --custom-guild-settings-role-subscriptions-overview-settings-max-width: 520px; 365 | --custom-guild-settings-store-page-settings-max-width: 520px; 366 | --custom-importable-benefits-list-listing-image-size: 40px; 367 | --custom-import-benefits-modal-icon-size: 24px; 368 | --custom-import-benefits-modal-role-icon-size: 40px; 369 | --custom-role-icon-uploader-icon-size: 24px; 370 | --custom-guild-role-subscription-style-constants-cover-image-aspect-ratio: 4; 371 | --custom-historic-earnings-table-toggle-expand-column-width: 30px; 372 | --custom-guild-role-subscription-card-basic-info-tier-image-size: 80px; 373 | --custom-guild-role-subscription-card-basic-info-tier-image-size-mobile: 48px; 374 | --custom-guild-role-subscriptions-overview-page-page-max-width: 1180px; 375 | --custom-guild-dialog-popout-width: 250px; 376 | --custom-guild-dialog-splash-ratio: 1.77778; 377 | --custom-guild-dialog-icon-size: 84px; 378 | --custom-guild-dialog-icon-padding: 4px; 379 | --custom-guild-product-download-modal-header-image-width: 119px; 380 | --custom-guild-onboarding-home-page-max-page-width: 1128px; 381 | --custom-guild-onboarding-home-page-max-single-column-width: 704px; 382 | --custom-home-resource-channels-obscured-blur-radius: 20px; 383 | --custom-guild-member-application-review-sidebar-width: 29vw; 384 | --custom-featured-items-popout-featured-items-popout-footer-height: 120px; 385 | --custom-guild-boosting-sidebar-display-conditional-bottom-margin: 12px; 386 | --custom-guild-boosting-marketing-progress-bar-marker-dimensions: 32px; 387 | --custom-guild-boosting-marketing-progress-bar-end-markers-margin: 4px; 388 | --custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions: 32px; 389 | --custom-guild-boosting-marketing-tier-cards-tier-card-border-radius: 16px; 390 | --custom-go-live-modal-art-height: 112px; 391 | --custom-gif-picker-gutter-size: 0 16px 12px 16px; 392 | --custom-gif-picker-search-results-desired-item-width: 160px; 393 | --custom-forum-composer-attachments-attachment-size: 78px; 394 | --custom-forum-post-obscured-blur-radius: 20px; 395 | --custom-forum-post-grid-view-obscured-blur-radius: 20px; 396 | --custom-demo-forum-channel-padding-large: 20px; 397 | --custom-demo-forum-channel-post-padding: 12px; 398 | --custom-demo-forum-channel-gap-size: 8px; 399 | --custom-feedback-modal-emoji-size: 64px; 400 | --custom-feedback-modal-close-button-margin: 12px; 401 | --custom-expression-suggestions-container-padding: 8px; 402 | --custom-expression-suggestions-sticker-suggestion-size: 48px; 403 | --custom-expression-suggestions-sticker-suggestion-margin: 8px; 404 | --custom-expression-picker-constants-expression-picker-list-section-heading-height: 32px; 405 | --custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions: 28px; 406 | --custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions: 32px; 407 | --custom-expression-picker-constants-expression-picker-inspector-bar-height: 48px; 408 | --custom-emoji-picker-border-radius: 8px; 409 | --custom-emoji-picker-constants-min-emoji-picker-width: 498px; 410 | --custom-emoji-picker-constants-emoji-size-medium: 40px; 411 | --custom-emoji-picker-constants-emoji-size-large: 48px; 412 | --custom-emoji-picker-constants-emoji-container-padding-horizontal: 4px; 413 | --custom-emoji-picker-constants-emoji-container-padding-vertical: 4px; 414 | --custom-emoji-picker-constants-emoji-picker-height: 440px; 415 | --custom-emoji-picker-constants-emoji-section-margin-bottom: 12px; 416 | --custom-emoji-picker-constants-emoji-list-padding-top: 0; 417 | --custom-emoji-picker-constants-emoji-list-padding-right: 0; 418 | --custom-emoji-picker-constants-emoji-list-padding-bottom: 8px; 419 | --custom-emoji-picker-constants-emoji-list-padding-left: 8px; 420 | --custom-emoji-picker-constants-emoji-list-search-results-padding-top: 8px; 421 | --custom-emoji-picker-constants-unicode-category-icon-margin-vertical: 2px; 422 | --custom-emoji-picker-constants-unicode-category-icon-size: 24px; 423 | --custom-emoji-picker-constants-unicode-category-icon-padding: 4px; 424 | --custom-emoji-picker-constants-unicode-category-shortcut-height: 48px; 425 | --custom-emoji-picker-constants-guild-category-icon-size: 32px; 426 | --custom-emoji-picker-constants-guild-category-icon-margin-verical: 8px; 427 | --custom-emoji-picker-constants-category-separator-size: 1px; 428 | --custom-emoji-picker-constants-category-separator-margin-vertical: 12px; 429 | --custom-emoji-picker-constants-diversity-emoji-size: 24px; 430 | --custom-emoji-picker-constants-emoji-premium-upsell-height: 54px; 431 | --custom-emoji-picker-constants-emoji-premium-upsell-margin-top: 16px; 432 | --custom-emoji-picker-constants-newly-added-emoji-badge-height: 16px; 433 | --custom-discover-static-guild-card-card-height: 258px; 434 | --custom-discover-featured-guilds-section-card-height: 320px; 435 | --custom-discover-featured-guilds-section-min-card-width: 248px; 436 | --custom-discover-featured-guilds-section-gutter-size: 16px; 437 | --custom-discover-search-results-max-search-bar-width: 720px; 438 | --custom-guild-directory-min-card-width: 248px; 439 | --custom-guild-directory-gutter-size: 16px; 440 | --custom-guild-directory-min-content-width: 320px; 441 | --custom-guild-directory-max-page-width: 1608px; 442 | --custom-guild-directory-entry-card-card-height: 274px; 443 | --custom-guild-directory-landing-min-header-height: 200px; 444 | --custom-guild-shop-page-two-column-max-width: 1439px; 445 | --custom-aspect-stable-image-container-padding: 20px; 446 | --custom-monetization-info-table-expandable-rows-toggle-expand-column-width: 30px; 447 | --custom-guild-shop-content-width: 1044px; 448 | --custom-guild-shop-content-width-reduced: 788px; 449 | --custom-guild-shop-content-width-minimum: 688px; 450 | --custom-guild-shop-channel-row-gradient: linear-gradient(113deg, #2f3570 1.98%, #422c70 94.48%); 451 | --custom-guild-shop-channel-row-gradient-hover: linear-gradient(113deg, #383f86 1.98%, #4d3385 94.48%); 452 | --custom-guild-shop-channel-row-border-gradient: linear-gradient(113deg, #6591ff, #d150ff); 453 | --custom-guild-shop-channel-row-glow: 0 0 4px rgba(189, 149, 255, 0.5); 454 | --custom-guild-shop-preview-pill-shadow-dark: -4px 5px #1d1d1d; 455 | --custom-guild-shop-preview-pill-shadow-light: -4px 5px #d7dce8; 456 | --custom-guild-shop-gradient-start: #686bff; 457 | --custom-guild-shop-gradient-end: #c356fd; 458 | --custom-guild-role-connections-modal-close-button-margin: 12px; 459 | --custom-clips-enabled-indicator-medium-break-point: 920px; 460 | --custom-clips-enabled-indicator-badge-icon-dimension-override: 20px; 461 | --custom-client-themes-editor-content-width: calc( 462 | var(--custom-theme-selection-selection-size) * 3 + var(--custom-theme-selection-group-column-gap) * 2 463 | ); 464 | --custom-client-themes-editor-editor-padding: 16px; 465 | --custom-theme-selection-selection-size: 60px; 466 | --custom-theme-selection-group-column-gap: 24px; 467 | --custom-channel-attachment-upload-spoiler-blur-radius: 44px; 468 | --custom-channel-attachment-upload-mini-attachment-size: 78px; 469 | --custom-channel-textarea-text-area-height: 44px; 470 | --custom-channel-textarea-text-area-max-height: 50vh; 471 | --custom-channel-textarea-app-launcher-button-gap: 8px; 472 | --custom-channel-notice-icon-size: 16px; 473 | --custom-channel-notice-padding: 12px; 474 | --custom-channel-call-participants-popout-padding-value: 16px; 475 | --custom-stream-upsell-modal-art-height: 149px; 476 | --custom-voice-channel-status-modal-emoji-size: 22px; 477 | --custom-voice-channel-status-modal-emoji-margin: 10px; 478 | --custom-broadcasting-tooltip-image-offset: 40px; 479 | --custom-application-directory-content-min-width: 600px; 480 | --custom-application-directory-content-max-width: 1024px; 481 | --custom-guild-count-small-icon-size: 16px; 482 | --custom-guild-count-large-icon-size: 20px; 483 | --custom-collection-gallery-text-container-width: 400px; 484 | --custom-collection-gallery-media-breakpoint: 1024px; 485 | --custom-collection-gallery-column-card-height: 600px; 486 | --custom-collection-gallery-row-card-height: 283px; 487 | --custom-collection-list-card-gap: 16px; 488 | --custom-collection-list-with-image-grid-gap: 16px; 489 | --custom-collections-collection-gap: 32px; 490 | --custom-application-directory-profile-sidebar-width: 192px; 491 | --custom-application-directory-profile-sidebar-margin-right: 48px; 492 | --custom-application-directory-profile-icon-size: 122px; 493 | --custom-application-directory-search-sidebar-width: 200px; 494 | --custom-application-directory-search-sidebar-margin-right: 32px; 495 | --custom-activity-bookmark-embed-image-width: 356px; 496 | --custom-activity-bookmark-embed-image-height: 200px; 497 | --custom-activity-bookmark-embed-content-height: 400px; 498 | --custom-activity-shelf-item-activity-item-height: 230px; 499 | --custom-activity-shelf-item-large-activity-item-height: 143px; 500 | --custom-activity-shelf-modal-modal-padding: 80px; 501 | --custom-activity-shelf-modal-modal-width: 496px; 502 | --custom-activity-shelf-modal-modal-min-width: 496px; 503 | --custom-activity-shelf-modal-modal-max-width: 1024px; 504 | --custom-activity-shelf-modal-modal-header-height: 92px; 505 | --custom-activity-shelf-modal-modal-header-without-description-height: 74px; 506 | --custom-activity-shelf-modal-modal-footer-height: 50px; 507 | --custom-activity-shelf-modal-modal-art-height: 64px; 508 | --custom-activity-shelf-modal-modal-max-height: 720px; 509 | --custom-activity-shelf-modal-modal-header-developer-controls-height: 176px; 510 | --custom-activity-shelf-modal-dividers-height: 2px; 511 | --custom-activity-shelf-modal-divider-height: 1px; 512 | --custom-activity-shelf-slide-activity-directory-shelf-grid-gap: 16px; 513 | --custom-accept-invite-modal-invite-modal-height: 420px; 514 | --custom-accept-invite-modal-small-screen-width: 720px; 515 | --custom-avatar-avatar-decoration-border-position: calc((0.5 - var(--decoration-to-avatar-ratio) / 2) * 100%); 516 | --custom-button-button-xl-width: 148px; 517 | --custom-button-button-xl-height: 50px; 518 | --custom-button-button-lg-width: 130px; 519 | --custom-button-button-lg-height: 44px; 520 | --custom-button-button-md-width: 96px; 521 | --custom-button-button-md-height: 38px; 522 | --custom-button-button-sm-width: 60px; 523 | --custom-button-button-sm-height: 32px; 524 | --custom-button-button-tn-height: 24px; 525 | --custom-button-button-tn-width: 52px; 526 | --custom-button-link-underline-width: 1px; 527 | --custom-button-link-underline-offset: 1px; 528 | --custom-button-link-underline-stop: calc(var(--custom-button-link-underline-width) + var(--custom-button-link-underline-offset)); 529 | --custom-button-filled-hover: 0.1; 530 | --custom-button-filled-active: 0.2; 531 | --custom-button-transition-duration: 170ms; 532 | --custom-modal-min-width-large: 800px; 533 | --custom-special-markdown-small-break-point: 600px; 534 | --custom-special-markdown-medium-break-point: 768px; 535 | --custom-user-profile-hype-squad-badge-icon-size: 24px; 536 | --custom-user-profile-hype-squad-badge-shine-size-offset: 64px; 537 | --custom-guild-discovery-gutter-size: 16px; 538 | --custom-guild-discovery-max-page-width: 1608px; 539 | --custom-dropdown-button-small-dropdown-size: 16px; 540 | --custom-dropdown-button-medium-dropdown-size: 24px; 541 | --custom-dropdown-button-large-dropdown-size: 32px; 542 | --custom-dropdown-button-separator-padding: 4px; 543 | --custom-dropdown-button-hitbox-padding: 8px; 544 | --custom-responsive-embed-tile-loading-background-width: 271px; 545 | --custom-game-install-locations-item-padding: 20px; 546 | --custom-game-list-row-min-height: 62px; 547 | --custom-game-list-linked-to-glow-duration: 2000ms; 548 | --custom-application-store-home-store-home-width: 1245px; 549 | --custom-application-store-listing-body-max-width: 880px; 550 | --custom-store-colors-primary-750: #191b1d; 551 | --custom-store-colors-premium-gradient: linear-gradient(90deg, var(--premium-tier-2-purple), var(--premium-tier-2-pink)); 552 | --custom-member-list-item-avatar-decoration-padding: 2px; 553 | --custom-messages-popout-messages-popout-footer-height: 120px; 554 | --custom-radio-image-border-thickness: 2px; 555 | --custom-standard-sidebar-view-sidebar-content-width: 192px; 556 | --custom-standard-sidebar-view-standard-padding: 20px; 557 | --custom-standard-sidebar-view-sidebar-content-scrollbar-padding: 6px; 558 | --custom-standard-sidebar-view-sidebar-total-width: calc( 559 | var(--custom-standard-sidebar-view-sidebar-content-width) + var(--custom-standard-sidebar-view-standard-padding) + 560 | var(--custom-standard-sidebar-view-sidebar-content-scrollbar-padding) 561 | ); 562 | } -------------------------------------------------------------------------------- /src/components/profile.css: -------------------------------------------------------------------------------- 1 | ._5e434347c823b592-panels ._37e49614b9f110a9-avatarWrapper:hover { 2 | background: none !important; 3 | } 4 | ._5e434347c823b592-panels ._44b0c28be7879b7b-wrapper:hover { 5 | opacity: 0.5 !important; 6 | } 7 | ._5dec784a68542d60-panel { 8 | background-color: var(--background-gradient-lowest, var(--background-secondary-alt)) !important; 9 | ._8c6c22ea0d0f0ea2-gameName { 10 | color: var(--header-secondary); 11 | font-size: 14px; 12 | } 13 | } 14 | 15 | /** bottom-left popout */ 16 | 17 | .c1e9c47c23f12ca3-fixed:has(.d40c56f847687e8d-userMenuUsername, .status_af7fb7) { 18 | width: max-content; 19 | } 20 | .ab86098b36386ff7-italicPrompt { 21 | font-style: unset; 22 | } 23 | html:is([lang="en-GB"], [lang="en-us"]) .ab86098b36386ff7-addStatusPrompt { 24 | text-indent: -9999px; 25 | line-height: 0; 26 | display: inline-flex; 27 | 28 | &::after { 29 | content: "Set a custom status"; 30 | text-indent: 0; 31 | display: flex; 32 | line-height: initial; 33 | } 34 | } 35 | 36 | html[lang="de"] .ab86098b36386ff7-addStatusPrompt { 37 | text-indent: -9999px; 38 | line-height: 0; 39 | display: inline-flex; 40 | 41 | &::after { 42 | content: "Personalisierten Status setzen"; 43 | text-indent: 0; 44 | display: flex; 45 | line-height: initial; 46 | color: var(--interactive-normal); 47 | } 48 | } 49 | 50 | .ce832809562bf737-themeContainer .c97e55feac203869-popover { 51 | right: 56px; 52 | margin-top: 66px; 53 | opacity: 1 !important; 54 | background: none; 55 | pointer-events: unset; 56 | border: unset; 57 | border-radius: unset; 58 | box-shadow: none !important; 59 | animation: unset !important; 60 | animation-delay: unset !important; 61 | margin-right: 35px !important; 62 | & .button_bba79b:hover { 63 | background: none; 64 | } 65 | & .c97e55feac203869-button:hover { 66 | background: none; 67 | } 68 | & .f7ecaca5c80dbf3a-button.c97e55feac203869-left.c97e55feac203869-button { 69 | padding-left: 80px; 70 | margin-right: 10px; 71 | border-radius: 0px; 72 | width: 90px; 73 | height: 19px; 74 | z-index: 1; 75 | opacity: 0; 76 | } 77 | & .f7ecaca5c80dbf3a-button.c97e55feac203869-right.c97e55feac203869-button > svg > path { 78 | d: path( 79 | "M7.02799 0.333252C3.346 0.333252 0.361328 3.31792 0.361328 6.99992C0.361328 10.6819 3.346 13.6666 7.02799 13.6666C10.71 13.6666 13.6947 10.6819 13.6947 6.99992C13.6947 3.31792 10.7093 0.333252 7.02799 0.333252ZM10.166 9.19525L9.22333 10.1379L7.02799 7.94325L4.83266 10.1379L3.89 9.19525L6.08466 6.99992L3.88933 4.80459L4.832 3.86259L7.02733 6.05792L9.22266 3.86259L10.1653 4.80459L7.97066 6.99992L10.166 9.19525Z" 80 | ); 81 | transform: scale(1.7); 82 | } 83 | } 84 | 85 | .ce832809562bf737-themeContainer { 86 | left: 0px; 87 | bottom: 0px; 88 | top: 3px; 89 | 90 | & ._5be3ef42f92174b2-header { 91 | min-height: 0 !important; 92 | height: 38px !important; 93 | background: var(--background-floating); 94 | width: 220px !important; 95 | position: fixed; 96 | margin-top: -34px; 97 | } 98 | & .ce832809562bf737-menus { 99 | background: var(--background-floating) 100 | } 101 | & .c0bea05627c5dc35-inner>.ce832809562bf737-body { 102 | width: 230px; 103 | background: transparent; 104 | } 105 | & .custom-theme-background .c1e9c47c23f12ca3-menu { 106 | border: 0px; 107 | } 108 | & :is( 109 | ._68edb95846a37624-banner, 110 | ._75742e4cc9019aeb-avatar, 111 | .f5f93a5c4078d63c-descriptionClamp, 112 | ._68edb95846a37624-mask, 113 | ._39ec2e3dfb4fd2f2-card, 114 | ._63ed30c16c7151f2-container.ce832809562bf737-username, 115 | .activityContainer__84832 116 | ) { 117 | display: none; 118 | } 119 | & .ab86098b36386ff7-container { 120 | top: -45px !important; 121 | white-space: nowrap; 122 | text-align: left !important; 123 | &:has(.ab86098b36386ff7-addStatusPrompt) { 124 | top: 5px !important; 125 | width: 0; 126 | } 127 | } 128 | & .visibleContainer_af9888 { 129 | bottom: 0; 130 | left: 106px; 131 | } 132 | & .statusBubbleWithTextPadding_af9888 { 133 | margin-right: 73px; 134 | } 135 | & .ab86098b36386ff7-outer { 136 | top: 48px !important; 137 | right: 60px; 138 | min-width: 160px !important; 139 | margin-right: 20px; 140 | } 141 | & .ab86098b36386ff7-container:has(.ab86098b36386ff7-addStatusPrompt) .ab86098b36386ff7-outer { 142 | top: 4px !important; 143 | border: none; 144 | margin-top: -5px; 145 | & .ab86098b36386ff7-addStatusIcon { 146 | padding-right: 4px; 147 | } 148 | & ._4bd5201c86a2042b-defaultColor { 149 | color: var(--header-secondary); 150 | } 151 | background: none !important; 152 | } 153 | & .ab86098b36386ff7-container:has(.c97e55feac203869-popover:hover) .ab86098b36386ff7-outer { 154 | background: var(--brand-experiment-560) !important; 155 | width: 190px !important; 156 | border-radius: 2px; 157 | block-size: 32px; 158 | 159 | & ._4bd5201c86a2042b-defaultColor { 160 | color: var(--white); 161 | } 162 | & .c97e55feac203869-button.c97e55feac203869-right { 163 | background: var(--brand-experiment-560) !important; 164 | } 165 | } 166 | & .ab86098b36386ff7-editable.ab86098b36386ff7-container:has(.ab86098b36386ff7-addStatusPrompt):not(:has(.c97e55feac203869-popover:hover)):hover { 167 | background: var(--brand-experiment-560); 168 | & .ab86098b36386ff7-outer { 169 | right: 10px; 170 | } 171 | } 172 | & .ab86098b36386ff7-editable.ab86098b36386ff7-container:has(.ab86098b36386ff7-addStatusPrompt):hover { 173 | left: 5px !important; 174 | background: var(--brand-experiment-560); 175 | width: 209px; 176 | border-radius: 2px; 177 | block-size: 32px; 178 | & .ab86098b36386ff7-outer { 179 | right: 3px; 180 | } 181 | & ._4bd5201c86a2042b-defaultColor { 182 | color: var(--white); 183 | } 184 | } 185 | & .c0bea05627c5dc35-inner { 186 | background: transparent !important; 187 | padding: unset; 188 | } 189 | & .ce832809562bf737-menus, 190 | .ce832809562bf737-body { 191 | padding: unset !important; 192 | gap: 1px !important; 193 | } 194 | &.user-profile-popout, 195 | .userPopoutOverlayBackground_c69a7b { 196 | width: 220px !important; 197 | border-radius: 4px; 198 | box-shadow: unset !important; 199 | } 200 | & ._9d59731d47494e97-cardsList { 201 | display: none; 202 | } 203 | & .ce832809562bf737-menuOverlay:first-child ul>li:first-child { 204 | display: none; 205 | } 206 | } 207 | 208 | .ce832809562bf737-menuItemInner:hover { 209 | background-color: var(--brand-experiment-560); 210 | border-radius: 2px; 211 | & .menuItemLabel_af7fb7 { 212 | color: var(--white); 213 | } 214 | & .a423bdd721ddcc83-status { 215 | background-color: var(--white) !important; 216 | } 217 | } 218 | 219 | /* KILL upsells KILL upsells KILL */ 220 | ._5997d01a3565bdaa-upsellContainer { 221 | display: none; 222 | } 223 | 224 | /* Switch account icon (WIP) */ 225 | .ce832809562bf737-menuItemIcon 226 | > svg 227 | > path[d="M18.46 20.9a12.65 12.65 0 0 1-1.46.9 10.95 10.95 0 0 1-10 0 11 11 0 1 1 11.46-.9Zm-1.65-1.3a8.96 8.96 0 0 1-9.62 0l.23-2.26c.02-.25-.27-.36-.41-.15-.29.45-.6 1.01-.88 1.63A9.04 9.04 0 0 1 4.2 16.5a9 9 0 0 1 15.6 0 9.04 9.04 0 0 1-1.93 2.32c-.27-.62-.59-1.18-.88-1.63-.14-.21-.43-.1-.4.15l.22 2.27ZM12 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"] { 228 | d: path( 229 | "M9.5,0H2.72c-.1,0-.2.03-.28.08-.08.05-.15.13-.18.22-.04.09-.05.19-.03.29.02.1.07.19.14.26l1.27,1.27c.19.19.29.44.29.71s-.11.52-.29.71l-1.41,1.41c-.56.56-.88,1.33-.88,2.12s.32,1.56.88,2.12c.19.19.44.29.71.29s.52-.11.71-.29l2.12-2.12c.38-.38.88-.59,1.41-.59s1.04.21,1.41.59l.56.56c.07.07.16.12.26.14.1.02.2,0,.29-.03.09-.04.17-.1.22-.18.05-.08.08-.18.08-.28V.5c0-.13-.05-.26-.15-.35-.09-.09-.22-.15-.35-.15ZM.5,18h6.78c.1,0,.2-.03.28-.08.08-.06.15-.13.18-.22.04-.09.05-.19.03-.29-.02-.1-.07-.19-.14-.26l-1.27-1.27c-.19-.19-.29-.44-.29-.71s.11-.52.29-.71l1.41-1.41c.56-.56.88-1.33.88-2.12s-.32-1.56-.88-2.12c-.19-.19-.44-.29-.71-.29s-.52.11-.71.29l-2.12,2.12c-.38.38-.88.59-1.41.59s-1.04-.21-1.41-.59l-.56-.56c-.07-.07-.16-.12-.26-.14-.1-.02-.2,0-.29.03-.09.04-.17.1-.22.18-.05.08-.08.18-.08.28v6.78c0,.13.05.26.15.35.09.09.22.15.35.15Z" 230 | ) !important; 231 | transform: scale(1.3); 232 | } 233 | 234 | /*! Revert activity profile*/ 235 | ._2d0abf0638bcaa3f-activityPopover, 236 | ._2d0abf0638bcaa3f-avatarPopover { 237 | display: none; 238 | } 239 | .cardsList__84832 { 240 | gap: 0px; 241 | } 242 | /** Variables*/ 243 | 244 | .c0bea05627c5dc35-inner:has(._39ec2e3dfb4fd2f2-clickableContainer) { 245 | --text-muted: rgba(255, 255, 255, 0.6); 246 | --text-tertiary: rgba(255, 255, 255, 0.9); 247 | --text-secondary: rgba(255, 255, 255, 0.8); 248 | --interactive-normal: rgba(255, 255, 255, 0.8); 249 | --text-primary: #fff; 250 | --background-tertiary: var(--brand-experiment); 251 | --background-secondary-alt: var(--brand-experiment-530); 252 | 253 | /*Change color based on activity type*/ 254 | 255 | /* Listening to Spotify*/ 256 | &:has([src^="https://i.scdn.co/"]) 257 | { 258 | --background-tertiary: var(--spotify); 259 | --background-secondary-alt: var(--spotify-dark); 260 | } 261 | /* Live on Twitch 262 | &:has([mask="url(#svg-mask-status-streaming)"]) { 263 | --play: var(--twitch); 264 | --play-dark: var(--twitch-dark); 265 | } 266 | /*&:has(._39ec2e3dfb4fd2f2-platformIcon[style='mask-image: url("/assets/487de5256b2ae540.svg");']) { 267 | --play: var(--twitch); 268 | --play-dark: var(--twitch-dark); 269 | } 270 | */ 271 | 272 | /* Watching Crunchyroll 273 | &:has(.ef9ae7987ec7715e-crunchyroll) { 274 | --play: var(--crunchyroll); 275 | --play-dark: var(--crunchyroll-dark); 276 | } 277 | 278 | /* Watching Watch Together 279 | &:has([src="https://cdn.discordapp.com/app-icons/880218394199220334/ec48acbad4c32efab4275cb9f3ca3a58.webp?size=160&keep_aspect_ratio=false"]) 280 | { 281 | --play: var(--youtube); 282 | --play-dark: var(--youtube-dark); 283 | } 284 | 285 | /* Watching YouTube 286 | &:has([style=`mask-image: url("/assets/9133e8517dabfc4d.svg");']) 287 | { 288 | --play: var(--youtube); 289 | --play-dark: var(--youtube-dark); 290 | } 291 | */ 292 | 293 | /* Playing on XBOX 294 | &:has([style="mask-image: url(\"/assets/c4f09fda61827e19.svg\");"]) { 295 | --background-tertiary: var(--xbox); 296 | --background-secondary-alt: var(--xbox-dark); 297 | } 298 | 299 | /* Playing on PlayStation 300 | &:has([style='mask-image: url("/assets/eed203a7ec517e23.svg");']) { 301 | --background-tertiary: var(--playstation2); 302 | --background-secondary-alt: var(--playstation-dark); 303 | }*/ 304 | } 305 | 306 | ._39ec2e3dfb4fd2f2-platformIcon { 307 | background: white !important; 308 | height: 16px; 309 | width: 16px; 310 | } 311 | /* 312 | ._39ec2e3dfb4fd2f2-headerText:not(:has(._39ec2e3dfb4fd2f2-platformIcon)) { 313 | &:after { 314 | text-transform: uppercase; 315 | } 316 | html[lang="de"] &:after { 317 | content: "ein spiel"; 318 | } 319 | html:is([lang="en-GB"], [lang="en-us"]) &:after { 320 | content: "a game"; 321 | } 322 | } 323 | ._39ec2e3dfb4fd2f2-headerText:has(.a7acaedd978a9637-live) { 324 | html:is([lang="en-GB"], [lang="en-us"]) &:after { 325 | content: "to a server"; 326 | } 327 | } 328 | */ 329 | :is(._39ec2e3dfb4fd2f2-card):has(.e928f41923a9fe3e-container) { 330 | ._39ec2e3dfb4fd2f2-headerText { 331 | text-indent: -9999px; 332 | line-height: 0px; 333 | } 334 | ._39ec2e3dfb4fd2f2-headerText:before { 335 | content: "in a voice channel" !important; 336 | text-indent: 0px; 337 | line-height: initial; 338 | } 339 | } 340 | :is(._39ec2e3dfb4fd2f2-headerText) .a7acaedd978a9637-live { 341 | display: none; 342 | } 343 | .c0bea05627c5dc35-outer:has([mask="url(#svg-mask-status-streaming)"]) .c0bea05627c5dc35-overlay:nth-of-type(1) ._39ec2e3dfb4fd2f2-headerText { 344 | html:is([lang="en-GB"], [lang="en-us"]) & { 345 | text-indent: -9999px; 346 | line-height: 0px; 347 | } 348 | html:is([lang="en-GB"], [lang="en-us"]) &:before { 349 | content: "live on twitch"; 350 | text-indent: 0; 351 | line-height: initial; 352 | } 353 | } 354 | .e928f41923a9fe3e-container:before { 355 | background: rgb(255 255 255 / 0.15) !important; 356 | } 357 | .e928f41923a9fe3e-container { 358 | background: rgb(var(--bg-overlay-color-inverse) / 0.15) !important; 359 | } 360 | 361 | /* reverts "watch stream" button in vcs */ 362 | /*:is(._2ef4989efde1f4e4-activityStreamPreview) ._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary { 363 | background: none; 364 | border: solid 1px #72767d; 365 | transition: color 0.17s ease, background-color 0.17s ease, border-color 0.17s ease; 366 | &:hover { 367 | border: solid 1px #fff; 368 | } 369 | }*/ 370 | /*progress bar (like on spotify statuses)*/ 371 | ._39ec2e3dfb4fd2f2-card ._8e51c10f5a9d6304-bar { 372 | background: rgba(79, 84, 92, 0.16); 373 | height: 4px; 374 | } 375 | ._39ec2e3dfb4fd2f2-card ._8e51c10f5a9d6304-progress { 376 | background: #fff; 377 | height: 4px; 378 | } 379 | ._8e51c10f5a9d6304-text { 380 | font-size: 14px !important; 381 | font-weight: 500; 382 | font-family: var(--font-primary) !important; 383 | font-variant-numeric: normal; 384 | width: 38px; 385 | } 386 | 387 | .user-profile-popout .c0bea05627c5dc35-inner ._39ec2e3dfb4fd2f2-header { 388 | font-size: 12px; 389 | height: 12px; 390 | } 391 | 392 | .user-profile-popout .c0bea05627c5dc35-inner ._39ec2e3dfb4fd2f2-headerText { 393 | text-transform: uppercase; 394 | font-weight: 700; 395 | html.theme-light & { 396 | color: white !important; 397 | } 398 | } 399 | 400 | .user-profile-popout ._39ec2e3dfb4fd2f2-details { 401 | gap: unset; 402 | } 403 | .user-profile-popout ._39ec2e3dfb4fd2f2-content { 404 | align-items: center; 405 | } 406 | .user-profile-popout ._39ec2e3dfb4fd2f2-actions button { 407 | background-color: var(--control-background-secondary-default) !important; 408 | border: 1px solid var(--white) !important; 409 | } 410 | .user-profile-popout ._635edac6e9713347-badgesContainer ._635edac6e9713347-badgeContainer:nth-child(2) { 411 | order: -1; 412 | } 413 | 414 | .ef9ae7987ec7715e-contentImage[src^="https://cdn.discordapp.com/app-icons/"] { 415 | max-width: 40px !important; 416 | min-width: 40px; 417 | min-height: 40px !important; 418 | } 419 | /* make activity the first section*/ 420 | section:has(._39ec2e3dfb4fd2f2-clickableContainer) { 421 | order: -1; 422 | } 423 | .scroller_d2b491 { 424 | display: flex; 425 | flex-direction: column; 426 | padding: 0 !important; 427 | } 428 | .scroller_d2b491::-webkit-scrollbar { 429 | width: 0; 430 | } 431 | 432 | /*make status icon white*/ 433 | .user-profile-popout.c0bea05627c5dc35-outer:has(._39ec2e3dfb4fd2f2-clickableContainer) rect:not(path ~ rect) { 434 | fill: #fff !important; 435 | } 436 | 437 | /* change activity bg color and padding*/ 438 | .user-profile-popout ._39ec2e3dfb4fd2f2-card { 439 | background-color: var(--background-secondary-alt) !important; 440 | padding: 16px; 441 | border-radius: 0; 442 | } 443 | /*change some other colors for the activity section*/ 444 | 445 | ._39ec2e3dfb4fd2f2-card .cf48127484dbde85-heading-sm\/semibold /*game title*/ { 446 | color: var(--text-tertiary) !important; 447 | } 448 | ._39ec2e3dfb4fd2f2-card [data-text-variant="text-xs/normal"] /*details*/ { 449 | font-size: 14px; 450 | color: var(--text-secondary) !important; 451 | } 452 | ._39ec2e3dfb4fd2f2-card ._4bd5201c86a2042b-tabularNumbers, 453 | ._4bd5201c86a2042b-tabularNumbers._230d226505533582-fontCode:not(:only-child) { 454 | font-size: 14px; 455 | font-weight: 400; 456 | line-height: normal; 457 | font-family: var(--font-primary) !important; 458 | font-variant-numeric: normal; 459 | font-feature-settings: normal; 460 | width: 1000px; 461 | color: #f6fbf9 !important /*not accurate to original but tbh it looks better? maybe??*/; 462 | html:is([lang="en-GB"], [lang="en-us"]) &:after { 463 | content: " elapsed"; 464 | } 465 | html[lang="de"] &:after { 466 | content: " verstrichen"; 467 | } 468 | } 469 | /*icons*/ 470 | 471 | /*timestamp icon*/ 472 | ._39ec2e3dfb4fd2f2-card svg:has(+ .timestamp__230d2), 473 | ._635edac6e9713347-badgeContainer svg:has(+ ._230d226505533582-fontCode) { 474 | display: none; 475 | } 476 | html.theme-dark ._635edac6e9713347-badgeContainer path { 477 | fill: var(--interactive-normal); 478 | } 479 | .user-profile-modal .c0bea05627c5dc35-inner:has(._39ec2e3dfb4fd2f2-card) ._39ec2e3dfb4fd2f2-badges > ._635edac6e9713347-badgeContainer:nth-of-type(2) { 480 | order: -1; 481 | margin-top: -5px; 482 | } 483 | 484 | ._2ef4989efde1f4e4-nameNormal, 485 | .contentImagesUserPopoutV2_c1d9fd ._2ef4989efde1f4e4-textRow { 486 | color: #fff !important; 487 | } 488 | 489 | /*activity buttons*/ 490 | ._39ec2e3dfb4fd2f2-card :is(.fb7f9476ada049c8-button, .a22cb0c66246f5d3-button) { 491 | background: transparent !important; 492 | color: var(--text-primary); 493 | border: 1px solid var(--text-primary) !important; 494 | transition: 0.17s ease; 495 | opacity: 1 !important; 496 | padding: 14px 16px; 497 | } 498 | ._39ec2e3dfb4fd2f2-card :is(._201d5e8a3c09670a-colorBrand, .fb7f9476ada049c8-button, .a22cb0c66246f5d3-button):hover { 499 | background: transparent !important; 500 | } 501 | 502 | ._39ec2e3dfb4fd2f2-card :is(.fb7f9476ada049c8-button, .a22cb0c66246f5d3-button):not(:disabled):active { 503 | border-color: var(--text-primary); 504 | background: #ffffff1a !important; 505 | } 506 | 507 | ._39ec2e3dfb4fd2f2-card .:is(.fb7f9476ada049c8-button, .a22cb0c66246f5d3-button):disabled { 508 | border-color: #ffffff5d; 509 | background: transparent !important; 510 | color: #ffffff5d; 511 | } 512 | 513 | /* since the padding of the profile is gone, add padding to every section*/ 514 | .f5f93a5c4078d63c-descriptionClamp, 515 | .user-profile-popout .fccfdf3cfff21921-root, 516 | .bf424dc3dc4c8775-section:has(._20827cfa325893cd-list) { 517 | padding-left: 16px; 518 | padding-right: 16px; 519 | } 520 | .f5f93a5c4078d63c-descriptionClamp { 521 | padding: 16px 16px 0px 16px; 522 | } 523 | 524 | ._5be3ef42f92174b2-body { 525 | padding: 0; 526 | gap: 0; 527 | overflow: unset !important; 528 | } 529 | .user-profile-popout .c0bea05627c5dc35-inner { 530 | gap: 0; 531 | } 532 | 533 | /*customization screen ad-eliminator 3000*/ 534 | ._8279f38edc620354-container, 535 | ._9d295a6cf67970b4-tryItOutSection, 536 | ._0f7dce48ad846f17-upsellOverlayContainer { 537 | display: none; 538 | } 539 | /*note for feature-stripped customization screen*/ 540 | .preview__44061:before { 541 | content: "[ Disable OldCord for a functional preview! ]"; 542 | color: var(--blurple); 543 | font-size: 14px; 544 | font-weight: 500; 545 | } 546 | .ace4f5a2d9b7fc28-customizationSection ._63ed30c16c7151f2-container { 547 | padding-top: 105px; 548 | margin-top: -150px; 549 | } 550 | .ace4f5a2d9b7fc28-customizationSection ._5be3ef42f92174b2-header ._44b0c28be7879b7b-wrapper { 551 | bottom: 45px; 552 | left: 70px; 553 | } 554 | .ace4f5a2d9b7fc28-customizationSection .overlayIcon_f9d668 { 555 | bottom: 75px; 556 | } 557 | .ace4f5a2d9b7fc28-customizationSection .f5f93a5c4078d63c-descriptionClamp { 558 | max-height: unset; 559 | } 560 | .ace4f5a2d9b7fc28-customizationSection ._5be3ef42f92174b2-footer::before { 561 | content: ""; 562 | width: 100%; 563 | height: 1px; 564 | right: 0.5px; 565 | margin-top: -15px; 566 | position: absolute; 567 | background-color: var(--background-tertiary) !important; 568 | } 569 | 570 | /*! normal profile popout*/ 571 | /*Banners*/ 572 | ._68edb95846a37624-mask, 573 | .de800837163648e8-bannerButton, 574 | .fb7f9476ada049c8-bannerColor { 575 | display: none; 576 | } 577 | /*profile stuff*/ 578 | .user-profile-popout .c0bea05627c5dc35-inner, 579 | .custom-user-profile-theme { 580 | --profile-gradient-primary-color: var(--background-secondary-alt); 581 | --profile-gradient-secondary-color: var(--background-secondary-alt); 582 | --profile-gradient-overlay-color: transparent; 583 | --profile-gradient-button-color: var(--button-secondary); 584 | --profile-avatar-border-color: var(--background-secondary-alt); 585 | --profile-message-input-border-color: var(--background-modifier-accent); 586 | --profile-body-background-color: var(--background-floating); 587 | --profile-body-background-hover: var(--background-modifier-hover); 588 | --profile-body-divider-color: var(--background-modifier-accent); 589 | --profile-role-pill-background-color: var(--background-secondary-alt); 590 | --profile-role-pill-border-color: var(--interactive-normal); 591 | --theme-base-color-amount: unset !important; 592 | --theme-text-color-amount: unset !important; 593 | } 594 | ._0137000bc80ab6ea-profileEffects, 595 | ._44b0c28be7879b7b-avatarDecoration, 596 | .c19a557985eb7793-avatarDecoration, 597 | ._4bbc6dc06e75ad52-container { 598 | display: none; 599 | } 600 | ._91a9d7f7e5248a56-nameplated ._972a0d22c8afa7f0-closeButtonPlated { 601 | opacity: 0.7; 602 | } 603 | ._972a0d22c8afa7f0-innerCloseButtonPlated { 604 | background-color: unset !important; 605 | opacity: 0.7 !important; 606 | } 607 | ._972a0d22c8afa7f0-innerCloseButtonPlated:hover { 608 | opacity: 0.9 !important; 609 | } 610 | .c0bea05627c5dc35-outer.user-profile-popout, 611 | .userPopoutOverlayBackground_c69a7b { 612 | margin: 0; 613 | width: 250px; 614 | border-radius: 0px; 615 | overflow: hidden; 616 | max-height: calc(100vh - 20px); 617 | } 618 | .c0bea05627c5dc35-outer.user-profile-popout { 619 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--deprecated-card-bg) !important; 620 | border-radius: 5px; 621 | padding: 0 !important; 622 | } 623 | 624 | .user-profile-popout .c0bea05627c5dc35-inner { 625 | background: var(--background-secondary) !important; 626 | border-radius: unset; 627 | } 628 | ._5be3ef42f92174b2-header { 629 | background: var(--background-tertiary); 630 | box-shadow: none; 631 | padding: 0 !important; 632 | display: flex; 633 | min-height: 105px !important; 634 | } 635 | 636 | ._49fc18ba07c5025f-focusLock ._49fc18ba07c5025f-root:not(.modal_e59759) { 637 | border-radius: 8px !important; 638 | } 639 | 640 | /* i hate this reaction experiment so much */ 641 | .user-profile-popout .activityContainer__84832 { 642 | order: -1; 643 | } 644 | /*pfp (duh)*/ 645 | .user-profile-popout .c0bea05627c5dc35-inner ._75742e4cc9019aeb-avatar { 646 | left: 34% !important; 647 | top: 14px !important; 648 | width: 0; 649 | 650 | &.withReactReply__75742 { 651 | top: 7.5px !important; 652 | } 653 | } 654 | 655 | /* restores "View Profile" text when hovering over a pfp on profile popouts */ 656 | ._75742e4cc9019aeb-overlay::before { 657 | position: absolute; 658 | z-index: 1; 659 | } 660 | ._75742e4cc9019aeb-clickable:hover ._75742e4cc9019aeb-overlay::before, 661 | ._75742e4cc9019aeb-clickable:focus-within ._75742e4cc9019aeb-overlay::before { 662 | content: "VIEW PROFILE"; 663 | opacity: 1; 664 | font-size: 10px; 665 | text-align: center; 666 | color: white; 667 | top: 39px; 668 | left: 7px; 669 | font-weight: bold; 670 | } 671 | 672 | /*username*/ 673 | 674 | .user-profile-popout ._63ed30c16c7151f2-container { 675 | background: var(--background-tertiary) !important; 676 | order: -1; 677 | padding-bottom: 23px; 678 | gap: 0 !important; 679 | } 680 | 681 | :is(.user-profile-popout .c0bea05627c5dc35-inner, .userPanelOuter_c69a7b) ._63ed30c16c7151f2-usernameRow { 682 | text-align: center; 683 | justify-content: center; 684 | } 685 | ._63ed30c16c7151f2-nickname { 686 | font-size: 16px; 687 | line-height: 20px; 688 | font-weight: 600; 689 | color: var(--interactive-active); 690 | .theme-light:has(._39ec2e3dfb4fd2f2-card) & { 691 | color: var(--interactive-active); 692 | } 693 | } 694 | .user-profile-popout ._63ed30c16c7151f2-tags, 695 | .user-profile-popout .f4bc976213b83e68-info:not(._0a06ed6ea040aa1b-alignPomelo) { 696 | justify-content: center; 697 | text-align: center; 698 | flex-direction: column; 699 | row-gap: 0 !important; 700 | } 701 | 702 | ._63ed30c16c7151f2-dotSpacer { 703 | display: none; 704 | } 705 | ._63ed30c16c7151f2-userTagUsername, 706 | ._63ed30c16c7151f2-userTagDiscriminator { 707 | color: var(--text-secondary); 708 | ._63ed30c16c7151f2-container:not(._63ed30c16c7151f2-bot) &:before { 709 | content: "@"; 710 | } 711 | } 712 | 713 | ._63ed30c16c7151f2-pronounsText { 714 | color: var(--text-tertiary) !important; 715 | max-width: 255px; 716 | white-space: wrap; 717 | padding: 0px 16px; 718 | } 719 | /*bot tag*/ 720 | .c0bea05627c5dc35-outer.user-profile-popout:has(._39ec2e3dfb4fd2f2-card) ._82f0793afa59e5dc-botTagRegular { 721 | background-color: var(--white-500); 722 | color: var(--blurple); 723 | & svg path { 724 | fill: var(--blurple) !important; 725 | } 726 | } 727 | 728 | /** Custom status*/ 729 | ._19b6da809e654e70-statusText { 730 | color: var(--header-secondary); 731 | } 732 | .user-profile-popout .ab86098b36386ff7-statusText { 733 | color: var(--text-tertiary); 734 | } 735 | .user-profile-popout ._0a06ed6ea040aa1b-userInfo ._19b6da809e654e70-text { 736 | color: var(--text-muted); 737 | } 738 | .user-profile-popout .ab86098b36386ff7-outer { 739 | position: relative; 740 | right: 105px; 741 | top: 48px; 742 | min-width: 250px; 743 | box-shadow: none; 744 | background: none !important; 745 | transition: ease 0.4s background; 746 | 747 | &:hover { 748 | background: var(--background-tertiary) !important; 749 | transition: ease height background-color 0.2s; 750 | } 751 | text-align: center; 752 | border: none !important; 753 | } 754 | .ab86098b36386ff7-inner { 755 | padding: 8px 16px; 756 | background: unset !important; 757 | } 758 | .labelRow_ab8609 { 759 | display: none; 760 | } 761 | .user-profile-popout .visibleContainer_af9888 { 762 | left: -230px; 763 | } 764 | .user-profile-popout:has(._63ed30c16c7151f2-pronouns) .ab86098b36386ff7-outer { 765 | top: 64px; 766 | } 767 | .user-profile-popout:has(.visibleContainer_af9888):not(:has(.singleLineAlign_af9888)) ._63ed30c16c7151f2-container { 768 | padding-bottom: 50px; 769 | } 770 | .user-profile-popout:has(.ab86098b36386ff7-container) ._63ed30c16c7151f2-container { 771 | padding-bottom: 45px; 772 | } 773 | 774 | /*! modal profile*/ 775 | .user-profile-modal-v2 { 776 | outline: none; 777 | border-radius: 8px; 778 | } 779 | .user-profile-modal-v2 .c0bea05627c5dc35-inner { 780 | padding: 0px; 781 | } 782 | .custom-user-profile-theme.user-profile-modal-v2 .c0bea05627c5dc35-inner { 783 | background: var(--background-primary); 784 | } 785 | .user-profile-modal-v2 h2 { 786 | font-weight: 900; 787 | text-transform: uppercase; 788 | color: var(--header-secondary) !important; 789 | } 790 | ._9c3bea41fd465666-profile { 791 | background: var(--background-tertiary); 792 | box-shadow: none; 793 | outline: none; 794 | border-radius: 0; 795 | width: 350px; 796 | } 797 | ._9c3bea41fd465666-profileHeader { 798 | min-height: 250px !important; 799 | background: var(--background-tertiary); 800 | } 801 | 802 | .user-profile-modal-v2 ._9c3bea41fd465666-profileHeader ._75742e4cc9019aeb-avatar { 803 | transform: scale(0.666); 804 | position: absolute !important; 805 | top: 0px !important; 806 | left: 114px !important; 807 | background: var(--background-tertiary); 808 | outline: 10px solid var(--background-tertiary); 809 | } 810 | 811 | svg.a22cb0c66246f5d3-icon:has([d="M4 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"]) { 812 | stroke: var(--interactive-normal); 813 | stroke-width: 2px; 814 | transform: scale(0.98); 815 | height: 20px; 816 | > path { 817 | d: path( 818 | "M12 0c-1.1046 0-2 .8954-2 2s.8954 2 2 2 2-.8954 2-2-.8954-2-2-2Zm0 10c-1.1046 0-2 .8954-2 2s.8954 2 2 2 2-.8954 2-2-.8954-2-2-2m0 10c-1.1046 0-2 .8954-2 2s.8954 2 2 2 2-.8954 2-2-.8954-2-2-2Z" 819 | ); 820 | } 821 | } 822 | 823 | .user-profile-modal-v2 ._63ed30c16c7151f2-tags { 824 | background: var(--background-tertiary); 825 | flex-direction: column; 826 | position: fixed; 827 | top: 130px; 828 | min-width: 350px; 829 | } 830 | .user-profile-modal-v2 ._63ed30c16c7151f2-nickname { 831 | position: fixed; 832 | top: 110px; 833 | width: 350px; 834 | text-align: center; 835 | } 836 | .user-profile-modal-v2 ._63ed30c16c7151f2-nicknameWithDisplayNameStyles { 837 | position: fixed; 838 | top: 100px; 839 | width: 350px; 840 | text-align: center; 841 | } 842 | 843 | .dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-pop:before /*! Fix misallined shadow text effect on floating username nitro effect*/ { 844 | width: auto; 845 | } 846 | ._8061a5f9dbf6d829-container /*badges*/ { 847 | left: -10px; 848 | transform-origin: top left; 849 | transform: scale(1.255); 850 | position: relative; 851 | background: none; 852 | top: -6px; 853 | } 854 | ._9c3bea41fd465666-profileButtons { 855 | position: fixed; 856 | left: 0px; 857 | width: 350px; 858 | background: var(--background-tertiary); 859 | justify-content: center; 860 | padding-bottom: 6px; 861 | } 862 | .user-profile-modal-v2 .ab86098b36386ff7-inner { 863 | right: -115px; 864 | padding: 0; 865 | margin: 0 866 | } 867 | ._9c3bea41fd465666-profileBody { 868 | background: var(--background-secondary); 869 | padding: 0; 870 | } 871 | .user-profile-modal-v2 .bf424dc3dc4c8775-section, 872 | .user-profile-modal-v2 ._9c3bea41fd465666-profileBody ._752971923a1e6683-markup { 873 | margin-left: 12px; 874 | } 875 | .user-profile-modal-v2 ._9c3bea41fd465666-profileBody ._752971923a1e6683-markup { 876 | margin-top: 30px; 877 | } 878 | /*activity*/ 879 | #activity-tab { 880 | margin-right: 24px; 881 | } 882 | #activity-tab h3{ 883 | font-weight: 900; 884 | text-transform: uppercase; 885 | color: var(--header-secondary) !important; 886 | } 887 | #activity-tab .cf48127484dbde85-text-xs\/normal{ 888 | color: var(--text-secondary) !important 889 | } 890 | #activity-tab .cf48127484dbde85-heading-sm\/semibold { 891 | color: var(--text-secondary) !important 892 | 893 | } 894 | #activity-tab ._4bd5201c86a2042b-lineClamp1{ 895 | color: var(--text-tertiary) !important 896 | } 897 | .user-profile-modal-v2 ._764cdd81a2bebd88-cards { 898 | gap: 4px; 899 | } 900 | .user-profile-modal-v2 ._764cdd81a2bebd88-cards li { 901 | border-radius: 5px; 902 | background: var(--background-secondary-alt) !important; 903 | 904 | & ._39ec2e3dfb4fd2f2-headerText { 905 | font-weight: 800; 906 | text-transform: uppercase; 907 | } 908 | &:has(._4bd5201c86a2042b-tabularNumbers) { 909 | background: var(--brand-experiment-530) !important; 910 | --text-secondary: rgba(255, 255, 255, 0.9); 911 | } 912 | &:first-child { 913 | border-top-left-radius: 20px; 914 | border-top-right-radius: 20px; 915 | } 916 | &:last-child { 917 | border-bottom-left-radius: 20px; 918 | border-bottom-right-radius: 20px; 919 | } 920 | } 921 | .user-profile-modal-v2 ._39ec2e3dfb4fd2f2-card { 922 | background: none; 923 | } 924 | 925 | ._9c3bea41fd465666-backgroundImage { 926 | display: none; 927 | } 928 | 929 | /* CUSTOM STATUS */ 930 | 931 | .user-profile-modal-v2 .ab86098b36386ff7-container { 932 | .ab86098b36386ff7-outer { 933 | border: none; 934 | min-width: 450px !important; 935 | background: none !important 936 | } 937 | left: -110px !important; 938 | z-index: 1; 939 | top: 205px; 940 | } 941 | .user-profile-modal-v2 .ab86098b36386ff7-container .ab86098b36386ff7-content { 942 | white-space: pre-wrap; 943 | text-align: left !important; 944 | width: 350px; 945 | height: unset !important; 946 | max-height: 100px !important; 947 | & :has(.ab86098b36386ff7-statusEmoji) .ab86098b36386ff7-statusText, 948 | .ab86098b36386ff7-statusEmoji { 949 | margin-left: 5px; 950 | & .ab86098b36386ff7-statusText { 951 | display: unset; 952 | } 953 | } 954 | & :not(:has(.ab86098b36386ff7-statusText)) .ab86098b36386ff7-statusEmoji { 955 | margin-left: 0px; 956 | } 957 | } 958 | .user-profile-modal:has(.ab86098b36386ff7-container) ._63ed30c16c7151f2-container { 959 | padding-bottom: 75px; 960 | &:has(._63ed30c16c7151f2-pronouns) { 961 | padding-bottom: 90px; 962 | } 963 | &:has(._8061a5f9dbf6d829-container) { 964 | padding-bottom: 100px; 965 | } 966 | } 967 | 968 | .user-profile-modal-v2 ._39ec2e3dfb4fd2f2-details [data-text-variant="text-xs/normal"] { 969 | font-size: 14px; 970 | color: var(--white) !important; 971 | } 972 | 973 | .bf424dc3dc4c8775-section [data-text-variant="text-xs/semibold"] { 974 | text-transform: uppercase; 975 | color: var(--channels-default) !important; 976 | font-weight: 800; 977 | } 978 | 979 | .user-profile-modal-v2 .ab86098b36386ff7-statusEmoji { 980 | height: 20px !important; 981 | width: 20px !important; 982 | margin-left: 4px; 983 | } 984 | .user-profile-modal-v2 .ab86098b36386ff7-statusEmoji:not(:has(+ .ab86098b36386ff7-statusText)) { 985 | min-width: 48px !important; 986 | max-width: 48px !important; 987 | max-height: 48px !important; 988 | margin-left: 5px; 989 | } 990 | 991 | .user-profile-modal-v2 { 992 | & .ab86098b36386ff7-outer ._4bd5201c86a2042b-defaultColor { 993 | text-align: center; 994 | width:320px; } 995 | & .singleLineAlign_af9888 { 996 | text-align: left; 997 | } 998 | } 999 | 1000 | /*connections */ 1001 | .e6abe833ac70fcae-connectedAccount { 1002 | padding: 0px 14px 0px 8px; 1003 | } 1004 | ._9bfb9a25604068f0-platformIconContainer { 1005 | background: none; 1006 | border: none; 1007 | scale: 1.7; 1008 | } 1009 | ._9bfb9a25604068f0-connection { 1010 | border: 1px solid var(--border-subtle); 1011 | padding: 12px 14px 12px 8px; 1012 | } 1013 | ._9bfb9a25604068f0-accountNameText { 1014 | font-weight: 500; 1015 | } 1016 | 1017 | /* put note above connections for accuracy */ 1018 | .bf424dc3dc4c8775-section:has(._9c3bea41fd465666-profileAppConnections) { 1019 | order: 1; 1020 | padding: 0; 1021 | } 1022 | 1023 | /* hide "connections" text */ 1024 | .bf424dc3dc4c8775-section:has(._9c3bea41fd465666-profileAppConnections) [data-text-variant="text-xs/semibold"] { 1025 | text-indent: -9999px; 1026 | line-height: 0; 1027 | display: inline-flex; 1028 | margin-right: 10px; 1029 | } 1030 | ._9c3bea41fd465666-profileAppConnections { 1031 | border-top: 1px solid var(--background-modifier-accent); 1032 | } 1033 | 1034 | /* remove note box outline */ 1035 | .fcb62805acc5d0cc-note textarea { 1036 | border: unset !important; 1037 | } 1038 | 1039 | /*! end of modal*/ 1040 | /*note button*/ 1041 | ._63ed30c16c7151f2-nicknameIcons { 1042 | top: 100%; 1043 | position: absolute; 1044 | display: flex !important; 1045 | padding-top: 15px !important; 1046 | overflow-x: hidden; 1047 | overflow-y: scroll; 1048 | width: 100%; 1049 | margin-top: auto; 1050 | &::-webkit-scrollbar { 1051 | display: none; 1052 | } 1053 | & span:nth-of-type(1) { 1054 | width: 0; 1055 | margin-left: 15px; 1056 | } 1057 | & ._0f0745937100f096-button { 1058 | opacity: 1; 1059 | width: 10px; 1060 | } 1061 | & .b18fe29d6fe8dd82-hiddenVisually:before { 1062 | content: "NOTE"; 1063 | left: 7%; 1064 | position: absolute; 1065 | margin-top: -25px; 1066 | color: var(--header-secondary); 1067 | font-weight: 800; 1068 | font-family: var(--font-display); 1069 | font-size: 12px; 1070 | } 1071 | html[lang="de"] & .b18fe29d6fe8dd82-hiddenVisually4:before { 1072 | content: "NOTIZ"; 1073 | } 1074 | & ._0f0745937100f096-button svg { 1075 | display: none; 1076 | } 1077 | & .b18fe29d6fe8dd82-hiddenVisually { 1078 | display: inline-block; 1079 | align-content: start; 1080 | text-align: left; 1081 | max-height: 38px; 1082 | margin-top: 10px; 1083 | white-space: pre-wrap; 1084 | color: var(--interactive-normal); 1085 | font-weight: 500; 1086 | font-family: var(--font-display); 1087 | font-size: 12px; 1088 | user-select: text; 1089 | clip: unset; 1090 | clip-path: unset; 1091 | height: unset; 1092 | overflow: auto; 1093 | position: unset; 1094 | width: unset; 1095 | &::-webkit-scrollbar-thumb { 1096 | background: transparent; 1097 | border-radius: 99px; 1098 | } 1099 | &::-webkit-scrollbar { 1100 | width: 4px; 1101 | } 1102 | &:hover::-webkit-scrollbar-track { 1103 | background: 0 0; 1104 | border-radius: 10px; 1105 | } 1106 | &:hover::-webkit-scrollbar-thumb { 1107 | background: var(--background-gradient-highest, var(--background-tertiary)); 1108 | border-radius: 999px; 1109 | } 1110 | } 1111 | } 1112 | ._5be3ef42f92174b2-footer { 1113 | margin-top: 75px; 1114 | } 1115 | ._5be3ef42f92174b2-footer:is(:empty) { 1116 | display: none; 1117 | } 1118 | 1119 | /*remove badges*/ 1120 | .user-profile-popout ._8061a5f9dbf6d829-container { 1121 | display: none; 1122 | } 1123 | 1124 | /* friend res */ 1125 | .user-profile-popout .c0bea05627c5dc35-overlay > ._43a4bee62f79b268-container > .cf48127484dbde85-text-sm\/normal._4bd5201c86a2042b-defaultColor { 1126 | text-transform: uppercase; 1127 | font-size: 12px; 1128 | color: var(--header-secondary); 1129 | font-weight: 800; 1130 | font-family: var(--font-display); 1131 | } 1132 | .user-profile-popout .c0bea05627c5dc35-overlay { 1133 | background: none; 1134 | border: none; 1135 | } 1136 | .user-profile-popout .c2a7636633222ffa-breadcrumb .c0bea05627c5dc35-overlay { 1137 | flex-direction: column; 1138 | flex-wrap: unset; 1139 | align-items: start; 1140 | padding: 16px 16px 20px 16px; 1141 | .cf48127484dbde85-text-xs\/medium { 1142 | font-size: 12px; 1143 | color: var(--header-secondary); 1144 | font-weight: 800; 1145 | font-family: var(--font-display); 1146 | margin-bottom: 4px; 1147 | text-transform: uppercase; 1148 | } 1149 | .c2a7636633222ffa-icons:hover { 1150 | background: var(--user-profile-overlay-background); 1151 | border-radius: var(--radius-sm); 1152 | } 1153 | &:hover { 1154 | background: unset; 1155 | } 1156 | } 1157 | .theme-dark.custom-user-profile-theme .user-profile-popout .c0bea05627c5dc35-overlay { 1158 | background: none; 1159 | border: none; 1160 | } 1161 | 1162 | /* mutuals section*/ 1163 | ._530ce51b6bf15868-mutuals { 1164 | background: var(--background-tertiary); 1165 | justify-content: center; 1166 | & ._530ce51b6bf15868-text { 1167 | color: var(--interactive-normal) !important; 1168 | } 1169 | padding: 0 0 10px 0; 1170 | order: -1; 1171 | & ._530ce51b6bf15868-text.cf48127484dbde85-text-sm\/normal { 1172 | font-size: 12px !important; 1173 | } 1174 | .theme-light & ._530ce51b6bf15868-text.cf48127484dbde85-text-sm\/normal { 1175 | color: var(--interactive-active) !important; 1176 | } 1177 | } 1178 | 1179 | /*profile DM box*/ 1180 | ._5be3ef42f92174b2-footer:has(._740174f3d6a2c8fe-channelTextArea) { 1181 | padding-top: 10px; 1182 | border-top: 1px solid rgba(32, 34, 37, 0.3); 1183 | .theme-light & { 1184 | border-color: rgba(54, 57, 63, 0.1); 1185 | } 1186 | } 1187 | ._5be3ef42f92174b2-footer ._740174f3d6a2c8fe-inner { 1188 | margin-top: -3px; 1189 | } 1190 | 1191 | /** Bio*/ 1192 | 1193 | .f5f93a5c4078d63c-descriptionClamp [data-text-variant="text-sm/normal"] { 1194 | color: var(--text-default) !important; 1195 | } 1196 | /* add a scrollbar to user bio*/ 1197 | .f5f93a5c4078d63c-viewFullBio { 1198 | display: none; 1199 | } 1200 | .f5f93a5c4078d63c-descriptionClamp { 1201 | -webkit-line-clamp: 190 !important; 1202 | max-height: 112px; 1203 | overflow-x: hidden; 1204 | overflow-y: auto; 1205 | &::-webkit-scrollbar-thumb { 1206 | background: transparent; 1207 | border-radius: 99px; 1208 | } 1209 | &::-webkit-scrollbar { 1210 | width: 4px; 1211 | } 1212 | &:hover::-webkit-scrollbar-track { 1213 | background: 0 0; 1214 | border-radius: 10px; 1215 | } 1216 | &:hover::-webkit-scrollbar-thumb { 1217 | background: var(--background-gradient-highest, var(--background-tertiary)); 1218 | border-radius: 999px; 1219 | } 1220 | &:before { 1221 | content: "ABOUT ME"; 1222 | font-size: 12px; 1223 | color: var(--header-secondary); 1224 | font-weight: 800; 1225 | font-family: var(--font-display); 1226 | } 1227 | html[lang="de"] &:before { 1228 | content: "ÜBER MICH"; 1229 | } 1230 | } 1231 | 1232 | /** Roles */ 1233 | 1234 | .user-profile-popout .fccfdf3cfff21921-root:before { 1235 | content: attr(aria-label); 1236 | font-size: 12px; 1237 | color: var(--header-secondary); 1238 | font-weight: 800; 1239 | font-family: var(--font-display); 1240 | margin-right: 69.674161%; 1241 | margin-bottom: 4px; 1242 | text-transform: uppercase; 1243 | } 1244 | section .bf424dc3dc4c8775-headings:has(+.fccfdf3cfff21921-root) /*"roles" header on bots*/ { 1245 | display: none; 1246 | } 1247 | .user-profile-popout .fccfdf3cfff21921-root { 1248 | position: relative; 1249 | margin-bottom: 22px; 1250 | margin-top: 12px; 1251 | } 1252 | .dfa8b6b94cddb191-role { 1253 | background-color: transparent !important; 1254 | transform: translate(0); 1255 | border: 0 !important; 1256 | border-radius: 4200px; 1257 | max-width: 225px !important; 1258 | height: 22px; 1259 | } 1260 | 1261 | ._48c1c0768f2a2421-addButtonIcon { 1262 | width: 10px; 1263 | height: 10px; 1264 | } 1265 | 1266 | .theme-dark ._48c1c0768f2a2421-actionButton { 1267 | border-color: var(--background-accent); 1268 | color: #b9bbbe; 1269 | background: 0 0; 1270 | } 1271 | 1272 | .dfa8b6b94cddb191-roleRemoveIcon { 1273 | margin: 0; 1274 | left: 1px; 1275 | transform: translate(50%, -50%); 1276 | } 1277 | .dfa8b6b94cddb191-roleRemoveButton { 1278 | position: static; 1279 | cursor: unset; 1280 | } 1281 | ._4f569b8941af22d1-roleCircle { 1282 | margin: 0 4px 0px 1px !important; 1283 | } 1284 | .dfa8b6b94cddb191-role > :first-child { 1285 | margin: 0; 1286 | } 1287 | /* Add a colored border around the role */ 1288 | .dfa8b6b94cddb191-roleRemoveButton :is(._4f569b8941af22d1-roleCircle,.dfa8b6b94cddb191-roleFlowerStar/*linked roles*/):before { 1289 | position: absolute; 1290 | top: 0; 1291 | left: 0; 1292 | width: 100%; 1293 | height: 100%; 1294 | box-sizing: border-box; 1295 | background: inherit; 1296 | border-radius: 50px; 1297 | border: 0.65px solid transparent; 1298 | -webkit-mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000); 1299 | -webkit-mask-composite: xor; 1300 | opacity: 0.6; 1301 | content: ""; 1302 | z-index: -1; 1303 | } 1304 | 1305 | /* border around addrole button*/ 1306 | .fccfdf3cfff21921-root ._201d5e8a3c09670a-button, 1307 | ._7d7f78b99d0a7581-button, 1308 | .fccfdf3cfff21921-expandButton, 1309 | .fccfdf3cfff21921-collapseButton { 1310 | border: 1px solid var(--interactive-muted); 1311 | background: none !important; 1312 | border-radius: 999%; 1313 | .theme-light & { 1314 | border-color: #b9bbbe; 1315 | } 1316 | [data-text-variant="text-xs/medium"] { 1317 | width: 10px; 1318 | margin-left: -3px; 1319 | padding-right: 1px; 1320 | } 1321 | } 1322 | /* remove "add role" text */ 1323 | .fb7f9476ada049c8-buttonInner._201d5e8a3c09670a-contents > [data-text-variant="text-xs/normal"] { 1324 | display: none; 1325 | } 1326 | 1327 | .messageInputContainer_f2c0a8 { 1328 | border: none; 1329 | } 1330 | 1331 | /* restore "No Roles" text 1332 | :has(._2ea32c412048f708-linkTop) .c0bea05627c5dc35-outer.biteSize_c0bea0:has(._530ce51b6bf15868-mutuals):not(:has(.fccfdf3cfff21921-root)) { 1333 | & ._530ce51b6bf15868-mutuals:after { 1334 | content: "NO ROLES"; 1335 | position: absolute; 1336 | font-size: 12px; 1337 | color: var(--header-secondary); 1338 | font-weight: 800; 1339 | font-family: var(--font-display); 1340 | margin-top: 50px; 1341 | margin-left: 13px; 1342 | margin-bottom: 4px; 1343 | } 1344 | & ._39ec2e3dfb4fd2f2-card { 1345 | &:after { 1346 | content: "NO ROLES"; 1347 | position: absolute; 1348 | font-size: 12px; 1349 | color: var(--header-secondary); 1350 | font-weight: 800; 1351 | font-family: var(--font-display); 1352 | margin-bottom: 4px; 1353 | margin-top: 108px; 1354 | } 1355 | &:has(._201d5e8a3c09670a-disabledButtonOverlay):after { 1356 | margin-top: 150px; 1357 | } 1358 | &:has(._39ec2e3dfb4fd2f2-actions > .fb7f9476ada049c8-button):after { 1359 | margin-top: 160px; 1360 | } 1361 | &:has(._39ec2e3dfb4fd2f2-actions > .fb7f9476ada049c8-button:nth-of-type(2)):after { 1362 | margin-top: 220px; 1363 | } 1364 | } 1365 | &:not(:has(.f5f93a5c4078d63c-descriptionClamp)) .biteSize__63ed3._63ed30c16c7151f2-nicknameIcons { 1366 | padding-top: 60px !important; 1367 | } 1368 | & .f5f93a5c4078d63c-descriptionClamp { 1369 | padding-top: 40px !important; 1370 | } 1371 | } 1372 | */ 1373 | 1374 | /* Re-add "Right click user for more actions" footnote on popouts */ 1375 | html:is([lang="en-GB"], [lang="en-us"]) ._5be3ef42f92174b2-footer::after { 1376 | content: "Right click user for more actions"; 1377 | font-size: 12px; 1378 | text-align: center; 1379 | margin-top: 10px; 1380 | color: var(--interactive-normal); 1381 | } 1382 | 1383 | /** bot profile*/ 1384 | /*may or may not be inspired by dtm-16 :3*/ 1385 | .bc38cddea75da082-buttons { 1386 | order: -1; 1387 | gap: 0; 1388 | } 1389 | #app-mount .bc38cddea75da082-buttons button { 1390 | background: var(--background-tertiary); 1391 | border-radius: 0; 1392 | border-top: 1px solid rgb(255, 255, 255, 0.15) !important; 1393 | 1394 | &.a22cb0c66246f5d3-primary { 1395 | border-left: 1px solid rgb(255, 255, 255, 0.15) !important; 1396 | } 1397 | &:hover { 1398 | background: var(--background-primary) !important; 1399 | } 1400 | &:active { 1401 | background: var(--primary-transparent) !important; 1402 | } 1403 | .c0bea05627c5dc35-outer:has(.activityContainer__84832) &:hover { 1404 | background: var(--brand-experiment-460) !important; 1405 | } 1406 | .c0bea05627c5dc35-outer:has(.activityContainer__84832) &:active { 1407 | background: var(--brand-experiment-400) !important; 1408 | } 1409 | } 1410 | 1411 | /*! profile modal ends here */ 1412 | 1413 | /** profiles in settings page, its messy but it works lmao */ 1414 | ._1fed1dd06c7aabf7-accountProfileCard { 1415 | ._1fed1dd06c7aabf7-userInfo ._44b0c28be7879b7b-wrapper { 1416 | width: 92px !important; 1417 | height: 92px !important; 1418 | ._44b0c28be7879b7b-svg { 1419 | width: 100px; 1420 | height: 100px; 1421 | } 1422 | } 1423 | ._1fed1dd06c7aabf7-userInfo :is(._1fed1dd06c7aabf7-profileCardUsernameRow, ._1fed1dd06c7aabf7-badgeList) { 1424 | display: none; 1425 | } 1426 | ._1fed1dd06c7aabf7-background, 1427 | ._1fed1dd06c7aabf7-fieldList { 1428 | background: var(--background-secondary); 1429 | } 1430 | ._1fed1dd06c7aabf7-fieldList { 1431 | margin-left: 100px; 1432 | margin-top: -50px; 1433 | } 1434 | ._1fed1dd06c7aabf7-fieldButton:not(._1fed1dd06c7aabf7-removeButton) { 1435 | background-color: var(--blurple); 1436 | color: var(--white); 1437 | border-radius: 3px; 1438 | &:hover { 1439 | background-color: var(--blurple-hover); 1440 | } 1441 | &:active { 1442 | background-color: var(--blurple-active); 1443 | } 1444 | } 1445 | } 1446 | ._1fed1dd06c7aabf7-accountProfileCard > ._1fed1dd06c7aabf7-userInfo { 1447 | margin-top: 10px; 1448 | margin-bottom: 30px; 1449 | button:nth-of-type(1) { 1450 | display: none; 1451 | } 1452 | } 1453 | ._1fed1dd06c7aabf7-accountProfileCard ._1fed1dd06c7aabf7-avatar { 1454 | position: absolute; 1455 | top: 15px; 1456 | background-color: var(--background-secondary); 1457 | } 1458 | ._1fed1dd06c7aabf7-accountProfileCard { 1459 | background: var(--background-secondary); 1460 | } 1461 | ._1fed1dd06c7aabf7-background, 1462 | ._1fed1dd06c7aabf7-fieldList { 1463 | background: var(--background-primary); 1464 | } 1465 | 1466 | ._1fed1dd06c7aabf7-overflowMenuIcon { 1467 | margin-left: 340px; 1468 | } 1469 | 1470 | /** activities section in member list*/ 1471 | 1472 | /*add a shadow and border like on profiles*/ 1473 | .af3b89684c536957-popout { 1474 | border-radius: 3px; 1475 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--deprecated-card-bg) !important; 1476 | } 1477 | /* remove shadow on status bubbles */ 1478 | ._44b0c28be7879b7b-mask._44b0c28be7879b7b-svg > circle { 1479 | display: none; 1480 | } 1481 | .user-profile-modal .c0bea05627c5dc35-inner ._44b0c28be7879b7b-mask._44b0c28be7879b7b-svg > rect:nth-child(1) { 1482 | opacity: 0 !important; 1483 | } 1484 | .custom-user-profile-theme :is(._24502a4069848acb-headerInner) ._44b0c28be7879b7b-mask._44b0c28be7879b7b-svg > rect:nth-child(2) { 1485 | opacity: 0 !important; 1486 | } 1487 | /*thing in the member list*/ 1488 | ._0f2e83213c878a13-container { 1489 | background: var(--background-secondary-alt) !important; 1490 | border-radius: 5px 5px 3px 3px; 1491 | border: 1px solid var(--background-tertiary) !important; 1492 | margin-top: 4px; 1493 | &:has(._4bd5201c86a2042b-tabularNumbers) { 1494 | background: var(--brand-experiment-10a) !important; 1495 | transition: 0.1s ease; 1496 | --background-tertiary: var(--brand-experiment-10a); 1497 | &:hover { 1498 | background: var(--brand-experiment-20a) !important; 1499 | transition: 0.1s ease; 1500 | } 1501 | } 1502 | &:hover { 1503 | background: var(--background-tertiary) !important; 1504 | } 1505 | &:before { 1506 | content: ""; 1507 | position: absolute; 1508 | top: -1px; 1509 | left: -1px; 1510 | right: -1px; 1511 | height: 18px; 1512 | border-radius: 5px 5px 0 0; 1513 | background: var(--background-tertiary); 1514 | } 1515 | & ._42bf58529787eb7a-contentImage { 1516 | z-index: 1; 1517 | } 1518 | & ._0f2e83213c878a13-userSection { 1519 | bottom: 6px; 1520 | position: relative; 1521 | } 1522 | & ._42bf58529787eb7a-contentImage { 1523 | height: 38px !important; 1524 | width: 38px; 1525 | top: 8px; 1526 | position: relative; 1527 | } 1528 | } 1529 | 1530 | /*game info*/ 1531 | .af3b89684c536957-popoutContentWrapper { 1532 | background: var(--background-tertiary); 1533 | border-top-left-radius: 3px; 1534 | border-top-right-radius: 3px; 1535 | &:has(._4bd5201c86a2042b-tabularNumbers) { 1536 | background: var(--brand-experiment-530) !important; 1537 | } 1538 | } 1539 | .af3b89684c536957-hero { 1540 | background: none !important; 1541 | padding: 0; 1542 | } 1543 | .af3b89684c536957-interactionsContainer:before /*weird line*/ { 1544 | display: none !important; 1545 | } 1546 | ._635edac6e9713347-badgeContainer path { 1547 | fill: black; 1548 | } 1549 | .theme-light .af3b89684c536957-popoutContentWrapper :is(._4bd5201c86a2042b-defaultColor, ._4bd5201c86a2042b-lineClamp1) { 1550 | color: #000000 !important; 1551 | } 1552 | /*shitty dm box*/ 1553 | .af3b89684c536957-interactionsContainer { 1554 | background: var(--background-secondary); 1555 | border-bottom-left-radius: 3px; 1556 | border-bottom-right-radius: 3px; 1557 | } 1558 | 1559 | .af3b89684c536957-popout ._740174f3d6a2c8fe-channelTextArea { 1560 | background: var(--chat-background-default) !important; 1561 | border-radius: 3px; 1562 | border: solid 1px var(--background-tertiary) !important; 1563 | } 1564 | 1565 | /* dumbass nitro tooltip 1566 | .clickTrapContainer_da8173:has(.tooltipContainer_f240e3) { 1567 | .tooltipContent__382e7 { 1568 | padding: 8px 3px; 1569 | } 1570 | .tooltipWordmarkContainer_f240e3 { 1571 | position: absolute; 1572 | bottom: 20px; 1573 | right: 83px; 1574 | } 1575 | img { 1576 | transform: scale(0.50); 1577 | position: absolute; 1578 | left: -20px; 1579 | top: -8px; 1580 | } 1581 | .cf48127484dbde85-heading-xl\/extrabold { 1582 | display: none; 1583 | } 1584 | .cf48127484dbde85-text-xs\/normal { 1585 | margin-left: 35px; 1586 | } 1587 | } 1588 | */ 1589 | 1590 | /*user panel in dms*/ 1591 | .panel_c0bea0 { 1592 | background: var(--background-secondary); 1593 | & ._63ed30c16c7151f2-container { 1594 | background: var(--background-tertiary); 1595 | margin-left: -20px; 1596 | margin-right: -20px; 1597 | z-index: 1; 1598 | } 1599 | &.custom-user-profile-theme .c0bea05627c5dc35-inner { 1600 | background: unset; 1601 | } 1602 | & .header__537ec { 1603 | background: var(--background-tertiary); 1604 | } 1605 | & ._75742e4cc9019aeb-avatar { 1606 | left: 37% !important; 1607 | } 1608 | & ._8061a5f9dbf6d829-container { 1609 | right: 12px; 1610 | padding-bottom: 30px; 1611 | justify-self: left; 1612 | } 1613 | & ._63ed30c16c7151f2-usernameRow { 1614 | justify-content: center; 1615 | } 1616 | .body__747b1 { 1617 | margin-top: -60px; 1618 | } 1619 | 1620 | .ab86098b36386ff7-outer.panel_ab8609 { 1621 | margin-top: 20px; 1622 | right: 65px; 1623 | border-radius: unset; 1624 | } 1625 | 1626 | ._39ec2e3dfb4fd2f2-header .overflow__82b15 { 1627 | text-transform: uppercase; 1628 | font-size: 12px; 1629 | color: var(--header-secondary); 1630 | font-weight: 600; 1631 | font-family: var(--font-display); 1632 | z-index: 1; 1633 | } 1634 | 1635 | ._39ec2e3dfb4fd2f2-card { 1636 | background: unset !important; 1637 | } 1638 | 1639 | .button__7d567 { 1640 | background: var(--background-primary); 1641 | } 1642 | 1643 | ._201d5e8a3c09670a-contents { 1644 | color: var(--text-primary); 1645 | } 1646 | 1647 | .bf424dc3dc4c8775-headings { 1648 | color: var(--text-secondary) !important; 1649 | font-size: 12px; 1650 | color: var(--header-secondary); 1651 | font-weight: 600; 1652 | font-family: var(--font-display); 1653 | } 1654 | 1655 | .clickable_c7ac92 { 1656 | text-transform: uppercase; 1657 | justify-content: unset; 1658 | & ._5345c24c6249bc5b-defaultColor.cf48127484dbde85-text-sm\/medium { 1659 | color: var(--channels-default) !important; 1660 | font-size: 12px; 1661 | font-weight: 600; 1662 | font-family: var(--font-display); 1663 | } 1664 | & svg { 1665 | transform: scale(0.6); 1666 | } 1667 | } 1668 | 1669 | .section_c7ac92 .list_c7ac92 { 1670 | & .listAvatar__9d78f { 1671 | width: 36px; 1672 | height: 36px; 1673 | } 1674 | & ._44b0c28be7879b7b-mask { 1675 | width: 48px; 1676 | height: 48px; 1677 | } 1678 | } 1679 | 1680 | ._39ec2e3dfb4fd2f2-headerText:not(:has(._39ec2e3dfb4fd2f2-platformIcon, [src="https://cdn.discordapp.com/app-icons/880218394199220334/ec48acbad4c32efab4275cb9f3ca3a58.webp?size=160&keep_aspect_ratio=false"])) 1681 | { 1682 | color: var(--interactive-normal) !important; 1683 | } 1684 | } 1685 | 1686 | ._63ed30c16c7151f2-guildTagContainer, 1687 | .c19a557985eb7793-clanTagChiplet, 1688 | .chipletContainerInline__4a25c, 1689 | ._10651c5cfe637db6-chipletContainerInline, 1690 | ._10651c5cfe637db6-chipletContainerInner, 1691 | ._5d473ecff348c314-clanTag { 1692 | display: none; 1693 | } 1694 | 1695 | /*profile widgets/board/game collection*/ 1696 | #widgets-tab ._62dd31d5e86f2841-container { 1697 | background: var(--background-secondary-alt); 1698 | border: none; 1699 | border-radius: 12px; 1700 | & h3 { 1701 | font-weight: 800; 1702 | text-transform: uppercase; 1703 | color: var(--header-secondary) !important; 1704 | } 1705 | & h4 { 1706 | font-weight: 600; 1707 | } 1708 | } 1709 | #widgets-tab ._3b92361cacc65834-scroller { 1710 | gap: 8px; 1711 | } 1712 | #widgets-tab .b469685f85391ca2-button{ 1713 | background: var(--button-secondary); 1714 | padding: 8px 16px; 1715 | width: fit-content; 1716 | color: #fff; 1717 | border-radius: 3px; 1718 | transition: 0.17s; 1719 | &:hover{ 1720 | background: var(--button-secondary-hover); 1721 | text-decoration: none; 1722 | } 1723 | } 1724 | #widgets-tab .a22cb0c66246f5d3-secondary{ 1725 | background: var(--green); 1726 | &:hover{ 1727 | background: var(--green-hover); 1728 | } 1729 | &:active{ 1730 | background: var(--green-active); 1731 | } 1732 | } --------------------------------------------------------------------------------