├── .gitignore ├── assets ├── icon.png ├── modal.png ├── banner.png ├── preview.png ├── vendetta.png └── status_picker.png ├── manifest.json ├── package.json ├── stuff ├── _channel-list.scss ├── overlay.css ├── overlay.scss ├── _server-list.scss ├── _friends.scss ├── _channel-bar.scss ├── _chat.scss ├── _other.scss ├── _member-list.scss └── _settings.scss ├── .github └── workflows │ └── release.yml ├── vendetta └── lilypichu.json ├── README.md ├── lilypichu.scss ├── _variables.scss ├── lilypichu.theme.css └── selectors.scss /.gitignore: -------------------------------------------------------------------------------- 1 | prepros.config 2 | sass.txt 3 | .prettierignore 4 | node_modules 5 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NYRI4/LilyPichu/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NYRI4/LilyPichu/HEAD/assets/modal.png -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NYRI4/LilyPichu/HEAD/assets/banner.png -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NYRI4/LilyPichu/HEAD/assets/preview.png -------------------------------------------------------------------------------- /assets/vendetta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NYRI4/LilyPichu/HEAD/assets/vendetta.png -------------------------------------------------------------------------------- /assets/status_picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NYRI4/LilyPichu/HEAD/assets/status_picker.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "nyria.lilypichu", 3 | "name": "LilyPichu", 4 | "description": "A theme based on @Melonturtle_ stream design", 5 | "author": { 6 | "name": "Nyria", 7 | "discordID": "265924886461939712", 8 | "github": "NYRI4" 9 | }, 10 | "version": "1.4.2", 11 | "updater": { 12 | "type": "store", 13 | "id": "nyria.lilypichu" 14 | }, 15 | "license": "WTFPL", 16 | "image": "https://i.imgur.com/H3hxiEq.png", 17 | "source": "https://github.com/NYRI4/LilyPichu", 18 | "type": "replugged-theme", 19 | "main": "lilypichu.theme.css" 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lilypichu", 3 | "version": "1.4.2", 4 | "description": "A theme based on @Melonturtle_ stream design", 5 | "engines": { 6 | "node": ">=18.0.0", 7 | "pnpm": ">=8.0.0" 8 | }, 9 | "scripts": { 10 | "build": "replugged build theme", 11 | "watch": "replugged build theme --watch", 12 | "bundle": "replugged bundle theme", 13 | "lint": "prettier ./src --check", 14 | "lint:fix": "prettier ./src --write" 15 | }, 16 | "author": "Nyria", 17 | "license": "WTFPL", 18 | "devDependencies": { 19 | "@parcel/config-default": "^2.8.3", 20 | "@parcel/core": "^2.8.3", 21 | "@types/node": "^18.15.11", 22 | "prettier": "^2.8.7", 23 | "replugged": "^4.2.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /stuff/_channel-list.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root #{selectors.$content}[aria-label*="Channels"] #{selectors.$sidebar} { 3 | border-radius: 0; 4 | // Channels 5 | #{selectors.$scroller} #{selectors.$wrapper}, 6 | .container-32HW5s { // TODO 7 | border-radius: var(--border-radius); 8 | overflow: hidden; 9 | } 10 | 11 | // Voice call 12 | .content_b60865 { // TODO: dont have friends, nobody can call me 13 | border-radius: var(--border-radius); 14 | } 15 | 16 | // SCTR connection 17 | .container__0810b .header-2C89wJ { // TODO 18 | background-color: var(--background-tertiary); 19 | } 20 | .container__0810b section { // TODO 21 | background-color: var(--background-secondary); 22 | } 23 | 24 | .container__590e2 > .scroller_f0f183 > .content__23cab > div:first-child[style="height: 16px;"] { // TODO 25 | display: none; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | tags: 6 | - "v*" 7 | 8 | jobs: 9 | release: 10 | name: Release 11 | runs-on: ubuntu-latest 12 | permissions: 13 | contents: write 14 | 15 | steps: 16 | - name: Check out Git repository 17 | uses: actions/checkout@v2 18 | 19 | - name: Set up Node.js 20 | uses: actions/setup-node@v3 21 | with: 22 | node-version: 18 23 | 24 | - uses: pnpm/action-setup@v2 25 | with: 26 | version: latest 27 | 28 | - name: Install Node.js dependencies 29 | run: pnpm install 30 | 31 | - name: Build TypeScript and bundle into asar 32 | run: pnpm run bundle 33 | 34 | - uses: ncipollo/release-action@v1 35 | with: 36 | artifacts: "bundle/*" 37 | makeLatest: true 38 | -------------------------------------------------------------------------------- /stuff/overlay.css: -------------------------------------------------------------------------------- 1 | :root .app_bd26cc::before{content:"";position:fixed;z-index:1;pointer-events:none;left:0;top:0;width:250px;height:250px;background:url("https://i.imgur.com/jTpFJuI.png") no-repeat;background-size:100%}:root .app_bd26cc::after{content:"";position:fixed;z-index:1;pointer-events:none;z-index:0;left:50px;bottom:0;width:490px;height:40px;background:url("https://i.imgur.com/KQQWcTY.png") no-repeat;background-size:100%}:root .app_a01fb1::before{content:"";position:fixed;z-index:1;pointer-events:none;top:80px;right:116px;width:200px;height:120px;background:url("https://i.imgur.com/0nsnP69.png") no-repeat;background-size:100%}:root .app_a01fb1::after{content:"";position:fixed;z-index:1;pointer-events:none;bottom:20px;right:45%;width:40px;height:40px;background:url("https://i.imgur.com/OBSWYht.png");background-size:100%}:root :is(.layers_d4b6c5,.layers_a01fb1)::before{content:"";position:fixed;z-index:1;pointer-events:none;z-index:0;bottom:75px;right:0;width:20px;height:50px;background:url("https://i.imgur.com/WveiFXb.png") no-repeat;background-size:100%}:root :is(.layers_d4b6c5,.layers_a01fb1)::after{content:"";position:fixed;z-index:1;pointer-events:none;bottom:15px;right:100px;width:25px;height:25px;background:url("https://i.imgur.com/WBUag7e.png") no-repeat;background-size:100%}:root :is(.bg_d4b6c5,.bgScale_f82cc7)::after{content:"";position:fixed;z-index:1;pointer-events:none;top:45px;right:385px;width:30px;height:30px;background:url("https://i.imgur.com/aOYvahh.png") no-repeat;background-size:100%}:root :is(.bg_d4b6c5,.bgScale_f82cc7)::before{content:"";position:fixed;z-index:1;pointer-events:none;z-index:2;bottom:30%;right:430px;width:30px;height:40px;background:url("https://i.imgur.com/JMoXBIs.png") no-repeat;background-size:100%}@media(max-width: 1350px){:root :is(.bg_d4b6c5,.bgScale_f82cc7)::before{display:none}} 2 | -------------------------------------------------------------------------------- /vendetta/lilypichu.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "LilyPichu", 3 | "description": "A theme based on @Melonturtle_ stream design", 4 | "authors": [ 5 | { 6 | "name": "Nyria", 7 | "id": "265924886461939712" 8 | } 9 | ], 10 | "semanticColors": { 11 | "HEADER_PRIMARY": ["#F8E1E5"], 12 | "HEADER_SECONDARY": ["#E2C1C7"], 13 | "TEXT_NORMAL": ["#F8E1E5"], 14 | "TEXT_MUTED": ["#E2C1C7"], 15 | "INTERACTIVE_NORMAL ": ["#FAB1BD"], 16 | "INTERACTIVE_HOVER": ["#E2C1C7"], 17 | "INTERACTIVE_ACTIVE": ["#E2C1C7"], 18 | "INTERACTIVE_MUTED": ["#AD8C91"], 19 | "CHANNELS_DEFAULT": ["#FAB1BD"], 20 | "CHANNEL_ICON": ["#FAB1BD"], 21 | 22 | "BACKGROUND_PRIMARY": ["#5E3640"], 23 | "BACKGROUND_SECONDARY": ["#49292F"], 24 | "BACKGROUND_SECONDARY_ALT": ["#3B1D24"], 25 | "BACKGROUND_TERTIARY": ["#220F14"], 26 | "BACKGROUND_ACCENT": ["#C5536C"], 27 | "BACKGROUND_FLOATING": ["#49292F"], 28 | "BACKGROUND_MOBILE_PRIMARY": ["#5E3640"], 29 | "BACKGROUND_MOBILE_SECONDARY": ["#49292F"], 30 | "BACKGROUND_MODIFIER_SELECTED": ["#1F151552"], 31 | "BACKGROUND_MODIFIER_ACTIVE": ["#130C0C52"], 32 | "BACKGROUND_MODIFIER_ACCENT": ["#49292F"], 33 | "CHANNEL_TEXT_AREA_PLACEHOLDER": ["#E2C1C7"], 34 | 35 | "SCROLLBAR_THIN_THUMB": ["#49292F"], 36 | "SCROLLBAR_THIN_TRACK": ["transparent"], 37 | "SCROLLBAR_AUTO_THUMB": ["#49292F"], 38 | "SCROLLBAR_AUTO_TRACK": ["#49292F"], 39 | "CHANNELTEXTAREA_BACKGROUND": ["#5E3640"], 40 | "CHAT_BACKGROUND": ["#5E3640"], 41 | "SPOILER_HIDDEN_BACKGROUND": ["#3B1D24"] 42 | }, 43 | "rawColors": { 44 | "PRIMARY_100": "#E2C1C7", 45 | "PRIMARY_200": "#E2C1C7", 46 | "PRIMARY_300": "#F8E1E5", 47 | "PRIMARY_400": "#E2C1C7", 48 | "PRIMARY_600": "#5E3640", 49 | "PRIMARY_630": "#49292F", 50 | "PRIMARY_660": "#220F14", 51 | "PRIMARY_700": "#5E3640", 52 | "PRIMARY_800": "#220F14", 53 | "BRAND_260": "#FDC7C7", 54 | "BRAND_360": "#C5536C", 55 | "BRAND_500": "#C5536C", 56 | "BRAND_560": "#C66376", 57 | 58 | "PLUM_18": "#5E3640", 59 | "PLUM_24": "#5E3640", 60 | "PLUM_4": "#5E3640", 61 | "PLUM_15": "#5E3640" 62 | }, 63 | "spec": 2 64 | } 65 | -------------------------------------------------------------------------------- /stuff/overlay.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors.scss'; 2 | 3 | @mixin base { 4 | content: ""; 5 | position: fixed; 6 | z-index: 1; 7 | pointer-events: none; 8 | } 9 | 10 | :root #{selectors.$app1}::before { 11 | @include base; 12 | left: 0; 13 | top: 0; 14 | width: 250px; 15 | height: 250px; 16 | background: url("https://i.imgur.com/jTpFJuI.png") no-repeat; 17 | background-size: 100%; 18 | } 19 | :root #{selectors.$app1}::after { 20 | @include base; 21 | z-index: 0; 22 | left: 50px; 23 | bottom: 0; 24 | width: 490px; 25 | height: 40px; 26 | background: url("https://i.imgur.com/KQQWcTY.png") no-repeat; 27 | background-size: 100%; 28 | } 29 | :root #{selectors.$app2}::before { 30 | @include base; 31 | top: 80px; 32 | right: 116px; 33 | width: 200px; 34 | height: 120px; 35 | background: url("https://i.imgur.com/0nsnP69.png") no-repeat; 36 | background-size: 100%; 37 | } 38 | :root #{selectors.$app2}::after { 39 | @include base; 40 | bottom: 20px; 41 | right: 45%; 42 | width: 40px; 43 | height: 40px; 44 | background: url("https://i.imgur.com/OBSWYht.png"); 45 | background-size: 100%; 46 | } 47 | :root #{selectors.$layers}::before { 48 | @include base; 49 | z-index: 0; 50 | bottom: 75px; 51 | right: 0; 52 | width: 20px; 53 | height: 50px; 54 | background: url("https://i.imgur.com/WveiFXb.png") no-repeat; 55 | background-size: 100%; 56 | } 57 | :root #{selectors.$layers}::after { 58 | @include base; 59 | bottom: 15px; 60 | right: 100px; 61 | width: 25px; 62 | height: 25px; 63 | background: url("https://i.imgur.com/WBUag7e.png") no-repeat; 64 | background-size: 100%; 65 | } 66 | :root #{selectors.$bg}::after { 67 | @include base; 68 | top: 45px; 69 | right: 385px; 70 | width: 30px; 71 | height: 30px; 72 | background: url("https://i.imgur.com/aOYvahh.png") no-repeat; 73 | background-size: 100%; 74 | } 75 | :root #{selectors.$bg}::before { 76 | @include base; 77 | z-index: 2; 78 | bottom: 30%; 79 | right: 430px; 80 | width: 30px; 81 | height: 40px; 82 | background: url("https://i.imgur.com/JMoXBIs.png") no-repeat; 83 | background-size: 100%; 84 | } 85 | @media (max-width: 1350px) { 86 | :root #{selectors.$bg}::before { 87 | display: none; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /stuff/_server-list.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root { 3 | #{selectors.$guilds} > ul > #{selectors.$scroller} { 4 | padding: 8px 0 130px 0; 5 | 6 | #{selectors.$wrapper} foreignObject { 7 | mask: none; 8 | border-radius: var(--border-radius); 9 | transition: border-radius 0.15s; 10 | 11 | &:hover { 12 | border-radius: calc(var(--border-radius) - 5px); 13 | } 14 | #{selectors.$folder} { 15 | background-color: transparent; 16 | } 17 | } 18 | 19 | 20 | // Discover + create a server buttons 21 | #{selectors.$circleIconButton} { 22 | color: var(--background-accent); 23 | background-color: var(--background-secondary-alt) !important; 24 | } 25 | } 26 | } 27 | // TODO: everything below here (70 lines) 28 | 29 | .theme-light { 30 | .wrapper_d281dd.selected_f5ec8e .childWrapper__01b9c, 31 | .wrapper_d281dd:hover .childWrapper__01b9c { 32 | background-color: var(--text-normal); 33 | } 34 | } 35 | 36 | .theme-dark { 37 | .wrapper_d281dd.selected_f5ec8e .childWrapper__01b9c, 38 | .wrapper_d281dd:hover .childWrapper__01b9c { 39 | background-color: var(--background-primary); 40 | } 41 | } 42 | 43 | // Server radius 44 | .wrapperSimple_a34580, 45 | .folderIconWrapper-226oVY, 46 | .folderIconWrapper-1_bOZe, 47 | .expandedFolderBackground-2sPsd-, 48 | .flexChild__6e093 .avatarUploaderInner-yEhTv5 { 49 | border-radius: var(--border-radius); 50 | } 51 | 52 | .panels__58331 { 53 | z-index: unset; 54 | } 55 | 56 | // Game panel 57 | .panel_bd8c76 { 58 | position: fixed; 59 | left: 0; 60 | bottom: 0; 61 | width: 56px; 62 | border-bottom: none; 63 | background-color: var(--background-tertiary); 64 | transition: width 0.35s; 65 | 66 | .gameWrapper__5b041 { 67 | margin-left: 12px; 68 | } 69 | 70 | .info_c28002, 71 | .actions__9256d { 72 | opacity: 0; 73 | } 74 | 75 | &:hover { 76 | width: 274px; 77 | margin: 8px; 78 | z-index: 1; 79 | border-radius: 5px var(--border-radius) var(--border-radius) 5px; 80 | border-left: 5px solid var(--background-accent); 81 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 82 | 0 0 0 1px rgba(56, 31, 31, 0.11); 83 | 84 | .gameWrapper__5b041 { 85 | margin-left: 0; 86 | } 87 | .info_c28002, 88 | .actions__9256d { 89 | opacity: 1; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Preview 2 | 3 |
4 | Logo 5 | 6 |

LilyPichu

7 |

A theme based on @Melonturtle_ stream design

8 | 9 |
10 | 11 | » Theme Preview 12 | ・ 13 | Report an issue 14 | ・ 15 | Join the support server 16 |
17 |
18 | 19 | ## 📥 Installation 20 | 21 |
22 |
23 | BetterDiscord 24 |

BetterDiscord 25 |
Open Settings > Themes > Themes folder and copy the file downloaded here

26 |
27 | 28 |
29 | Replugged 30 |

Replugged 31 |
Click here and confirm the install in the client

32 |
33 | 34 |
35 | Vencord 36 |

Vencord 37 |
Copy https://nyri4.github.io/LilyPichu/lilypichu.theme.css into the box in Settings > Themes > Themes tab

38 |

39 | 40 | ## 🖌️ Customization 41 | 42 |
43 |
44 | BetterDiscord 45 |

BetterDiscord 46 |
Open Settings > Themes > Themes folder and open lilypichu.theme.css

47 |
48 | 49 |
50 | Vencord 51 |

Vencord & Replugged 52 |
Watch this epic tutorial

53 |
54 | 55 | https://user-images.githubusercontent.com/65369563/231574735-89da88ef-2cf1-4aa5-a157-3a66ce8d274b.mp4 56 | -------------------------------------------------------------------------------- /lilypichu.scss: -------------------------------------------------------------------------------- 1 | @use 'selectors'; 2 | @forward "stuff/chat"; 3 | @forward "stuff/server-list"; 4 | @forward "stuff/channel-list"; 5 | @forward "stuff/channel-bar"; 6 | @forward "stuff/member-list"; 7 | @forward "stuff/settings"; 8 | @forward "stuff/friends"; 9 | @forward "stuff/other"; 10 | 11 | @import url("https://nyri4.github.io/donators/donators.css"); 12 | @import url("https://fonts.googleapis.com/css2?family=Nunito"); 13 | 14 | // Donators 15 | #{selectors.$profileBadges} > :last-child::before, 16 | #{selectors.$badgeList} > :last-child::before { 17 | z-index: 10; 18 | } 19 | 20 | // Right popout 21 | @media (min-width: 1350px) { 22 | #{selectors.$chatContent} + :last-child, // user profile in dms 23 | #{selectors.$memberListContainer} { // member list 24 | position: fixed; 25 | top: 280px; 26 | bottom: 120px; 27 | right: 60px; 28 | width: 320px; 29 | height: unset; 30 | } 31 | #{selectors.$tabBody} { // wrapper around friend list in starting screen 32 | transform: none; 33 | } 34 | 35 | // settings 36 | #{selectors.$layers} > #{selectors.$layer}:nth-child(2) { 37 | margin-right: 450px; 38 | } 39 | 40 | #{selectors.$layers} > #{selectors.$layer} > #{selectors.$container} { 41 | margin-right: 450px; 42 | // Basic right popout when there's nothing 43 | &::after { 44 | content: "Stay comfy"; 45 | position: fixed; 46 | top: 220px; 47 | bottom: 85px; 48 | right: 60px; 49 | z-index: -2; 50 | width: 320px; 51 | background-color: var(--background-primary); 52 | text-align: center; 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | font-size: 30px; 57 | color: var(--text-normal); 58 | border-radius: var(--border-radius); 59 | overflow: hidden; 60 | } 61 | 62 | &::before { 63 | content: ""; 64 | position: fixed; 65 | top: 220px; 66 | bottom: 85px; 67 | right: 70px; 68 | z-index: -1; 69 | width: 300px; 70 | border-radius: var(--border-radius); 71 | background: var(--jumping-gif) bottom/40% no-repeat; 72 | } 73 | } 74 | 75 | // Adding space for right popout 76 | #{selectors.$guilds} + :nth-child(2) { 77 | margin-right: 450px; 78 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 79 | } 80 | 81 | 82 | // User area 83 | #{selectors.$panels} > :last-child { 84 | position: fixed; 85 | display: flex; 86 | width: 305px; 87 | height: 50px; 88 | bottom: 28px; 89 | right: 60px; 90 | justify-content: space-between; 91 | background-color: var(--background-primary); 92 | border-radius: var(--border-radius); 93 | 94 | #{selectors.$avatarWrapper} { 95 | border-radius: var(--border-radius); 96 | } 97 | } 98 | 99 | // TODO: NOT UPDATED - what was this ??? 100 | .container__037ed { 101 | overflow: visible; 102 | } 103 | 104 | #{selectors.$membersWrap} > #{selectors.$members} { 105 | width: 100%; 106 | background-color: var(--background-primary); 107 | 108 | & > #{selectors.$content} { 109 | min-height: 1000px; 110 | background-color: transparent; 111 | } 112 | [role='list'] > div#{selectors.$member} { 113 | max-width: 300px; 114 | border-radius: var(--border-radius); 115 | background-color: var(--background-primary); 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /stuff/_friends.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root { 3 | // Right friend list 4 | #{selectors.$privateChannels} { 5 | #{selectors.$interactive} { 6 | border-radius: var(--border-radius); 7 | } 8 | } 9 | 10 | // Friends activity 11 | @media (min-width: 1350px) { 12 | #{selectors.$nowPlayingColumn} { 13 | position: fixed; 14 | top: 280px; 15 | bottom: 120px; 16 | right: 60px; 17 | width: 320px; 18 | min-width: unset; 19 | background-color: none; 20 | 21 | #{selectors.$scroller} { 22 | border-left: none; 23 | margin-left: 0; 24 | } 25 | 26 | // Header 27 | &::before { 28 | content: "Friends activity"; 29 | position: absolute; 30 | top: -60px; 31 | z-index: 1; 32 | width: 100%; 33 | height: 60px; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | font-size: 20px; 38 | font-weight: bolder; 39 | color: var(--header-primary); 40 | background-color: var(--background-secondary); 41 | border-radius: var(--border-radius) var(--border-radius) 0 0; 42 | } 43 | 44 | // Footer 45 | &::after { 46 | content: ""; 47 | position: absolute; 48 | bottom: -35px; 49 | z-index: 1; 50 | width: 100%; 51 | height: 35px; 52 | background-color: var(--background-secondary); 53 | border-radius: 0 0 var(--border-radius) var(--border-radius); 54 | background-image: linear-gradient( to right, var(--header-primary) 33%, rgba(255, 255, 255, 0) 0%); 55 | background-position: top; 56 | background-size: 21px 2px; 57 | background-repeat: repeat-x; 58 | } 59 | } 60 | 61 | #{selectors.$content} > #{selectors.$profilePanel} { 62 | position: fixed; 63 | top: 220px; 64 | right: 60px; 65 | bottom: 85px; 66 | width: 320px; 67 | border-radius: var(--border-radius); 68 | overflow: hidden; 69 | } 70 | 71 | } 72 | 73 | // Friend list 74 | main#{selectors.$container}[aria-label="Friends"] { 75 | background-color: var(--background-primary); 76 | 77 | #{selectors.$searchBar} { 78 | background-color: var(--background-secondary); 79 | } 80 | 81 | #{selectors.$upperContainer} > #{selectors.$children}:after { 82 | content: none; 83 | } 84 | #{selectors.$peopleColumn} { 85 | background: unset; 86 | } 87 | 88 | #{selectors.$peopleListItem} { 89 | border-radius: var(--border-radius); 90 | border-top: none; 91 | background: var(--background-modifier-hover); 92 | margin: 8px 10px 8px 20px; 93 | padding: 16px 10px; 94 | 95 | &:hover #{selectors.$actionButton} { 96 | background-color: var(--background-secondary-alt); 97 | } 98 | } 99 | } 100 | 101 | // Friend call 102 | .nowPlayingColumn_b025fe .scroller__00e7e { // TODO: update 103 | border: none; 104 | } 105 | .controlButton_ab2899 foreignObject { // TODO: update 106 | mask: none; 107 | } 108 | .colorable_c84c4c.primaryDark__6b700 { // TODO: update 109 | background-color: var(--background-primary); 110 | } 111 | .wrapper_bd2abe { // TODO: update 112 | background-color: var(--background-tertiary); 113 | } 114 | 115 | // Friend activity 116 | #{selectors.$nowPlayingColumn} { 117 | #{selectors.$inset} { 118 | background-color: var(--background-primary); 119 | } 120 | .separator_c2ecc6 { // TODO: what was this? cant find any separators? 121 | display: none; 122 | } 123 | .voiceSectionIconWrapper_c50254 { 124 | background-color: var(--background-tertiary); 125 | } 126 | #{selectors.$outer}#{selectors.$interactive}:hover { 127 | background-color: var(--activity-card-background); 128 | } 129 | #{selectors.$itemCard} { 130 | border: none; 131 | border-radius: var(--border-radius); 132 | 133 | #{selectors.$body} { 134 | border-radius: calc(var(--border-radius) - 10px); 135 | } 136 | } 137 | } 138 | // Regionnal selector friend call // TODO 139 | .quickSelectPopout_c0cf80.regionSelectPopout__0127b { 140 | background-color: var(--background-secondary-alt); 141 | } 142 | 143 | .profilePanelConnections__3c232 { 144 | background-color: transparent; 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /_variables.scss: -------------------------------------------------------------------------------- 1 | @use "lilypichu.scss"; 2 | 3 | // Remove decorations 4 | @import url("https://nyri4.github.io/LilyPichu/stuff/overlay.css"); 5 | 6 | :root { 7 | // --- User variables --- 8 | 9 | // Jumping GIF 10 | --jumping-gif: url("https://i.imgur.com/dCd49s0.gif"); 11 | 12 | // Background (if you want an image replace it by : 13 | 14 | // --background-tertiary-alt: url("image-link"); 15 | --background-tertiary-alt: #ffc7d4; 16 | 17 | // Border-radius for the whole theme 18 | --border-radius: 20px; 19 | 20 | .colorDefault__0b482.focused__27621, 21 | .colorDefault__0b482:active:not(.hideInteraction__2790e) { 22 | background-color: var(--background-modifier-hover) !important; 23 | } 24 | 25 | // Buttons 26 | .lookFilled__19298 { 27 | background-color: #c5536c !important; 28 | } 29 | .lookFilled__19298:active, 30 | .lookFilled__19298:hover { 31 | background-color: #b64a61 !important; 32 | } 33 | .lookOutlined-3yKVGo:not(.colorWhite-1H92hK) { 34 | color: #c5536c; 35 | border-color: #c5536c; 36 | } 37 | 38 | // Hover background 39 | .colorDefault__0b482.focused__27621, 40 | .colorDefault__0b482:active:not(.hideInteraction__2790e) { 41 | color: var(--interactive-normal); 42 | } 43 | } 44 | 45 | .theme-dark { 46 | // Text 47 | --text-normal: #f8e1e5; 48 | --header-primary: #f8e1e5; 49 | --interactive-normal: #fab1bd; 50 | --channels-default: #f8e1e5; 51 | 52 | --text-muted: #e2c1c7; 53 | --interactive-muted: #ad8c91; 54 | 55 | --header-secondary: #e2c1c7; 56 | --interactive-hover: #e2c1c7; 57 | --interactive-active: #e2c1c7; 58 | 59 | // Background color 60 | --background-primary: #5e3640 !important; 61 | --background-secondary: #49292f; 62 | --background-secondary-alt: #3b1d24; 63 | --background-tertiary: #220f14; 64 | --background-floating: #221115; 65 | --background-accent: #c5536c; 66 | --activity-card-background: var(--background-secondary-alt); 67 | --channeltextarea-background: var(--background-secondary); 68 | --modal-background: var(--background-primary); 69 | --background-modifier-hover: #5e36403b; 70 | --background-modifier-active: #5e364058; 71 | --background-modifier-selected: #5e364068; 72 | --toast-background: #5e3640 !important; 73 | --toast-header: #3b1d24 !important; 74 | --toast-contents: #49292f !important; 75 | --toast-border: #49292f !important; 76 | --input-background: var(--background-secondary); 77 | 78 | // Scrollbar 79 | --scrollbar-auto-thumb: var(--background-tertiary); 80 | --scrollbar-auto-track: var(--background-secondary-alt); 81 | --scrollbar-thin-thumb: var(--background-tertiary); 82 | --scrollbar-thin-track: transparent; 83 | 84 | // Other 85 | --channel-text-area-placeholder: var(--text-muted); 86 | --deprecated-quickswitcher-input-background: var(--background-primary); 87 | --brand-experiment: var(--background-accent); 88 | --channel-icon: var(--interactive-normal); 89 | } 90 | 91 | .theme-light { 92 | // Text 93 | --text-normal: #a86373; 94 | --header-primary: #a86373; 95 | --interactive-normal: #a86373; 96 | --channels-default: #a86373; 97 | 98 | --text-muted: #a86373; 99 | --interactive-muted: #cf92a0; 100 | 101 | --header-secondary: #cf92a0; 102 | --interactive-hover: #be7d8c; 103 | --interactive-active: #b36f7f; 104 | 105 | // Background color 106 | --background-primary: #ffffff; 107 | --background-secondary: #ffeeee; 108 | --background-secondary-alt: #fdc7c7; 109 | --background-tertiary: #ffbbbb; 110 | --background-floating: #ffbbbb; 111 | --background-accent: #c5536c; 112 | --channeltextarea-background: var(--background-secondary); 113 | --background-modifier-hover: rgba(56, 31, 31, 0.062); 114 | --background-modifier-active: rgba(19, 12, 12, 0.123); 115 | --background-modifier-selected: rgba(31, 21, 21, 0.11); 116 | 117 | // Scrollbar 118 | --scrollbar-auto-thumb: var(--background-tertiary); 119 | --scrollbar-auto-track: var(--background-secondary-alt); 120 | --scrollbar-thin-thumb: var(--background-tertiary); 121 | --scrollbar-thin-track: transparent; 122 | 123 | // Other 124 | --deprecated-quickswitcher-input-background: var(--background-primary); 125 | } 126 | 127 | #app-mount { 128 | // Fonts 129 | --font-primary: "Nunito"; 130 | --font-display: "Nunito"; 131 | } 132 | -------------------------------------------------------------------------------- /lilypichu.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name LilyPichu 3 | * @author Nyria#3863 4 | * @description A theme based on @Melonturtle_ stream design 5 | * @invite rtBQX5D3bD 6 | * @version 1.4 7 | * @donate https://ko-fi.com/nyria 8 | */ 9 | @import url("https://nyri4.github.io/LilyPichu/main.css"); 10 | 11 | /* Remove decorations */ 12 | @import url("https://nyri4.github.io/LilyPichu/stuff/overlay.css"); 13 | 14 | :root { 15 | /* --- User variables --- */ 16 | 17 | /* Jumping GIF */ 18 | --jumping-gif: url("https://i.imgur.com/dCd49s0.gif"); 19 | 20 | /* Background (if you want an image replace it by : 21 | 22 | --background-tertiary-alt: url("image-link"); without that => */ 23 | --background-tertiary-alt: #ffc7d4; 24 | 25 | /* Border-radius for the whole theme */ 26 | --border-radius: 20px; 27 | } 28 | 29 | .theme-dark { 30 | /* Text */ 31 | --text-normal: #f8e1e5; 32 | --header-primary: #f8e1e5; 33 | --interactive-normal: #fab1bd; 34 | --channels-default: #f8e1e5; 35 | 36 | --text-muted: #e2c1c7; 37 | --interactive-muted: #ad8c91; 38 | 39 | --header-secondary: #e2c1c7; 40 | --interactive-hover: #e2c1c7; 41 | --interactive-active: #e2c1c7; 42 | 43 | /* Background color */ 44 | --background-primary: #5e3640; 45 | --background-secondary: #49292f; 46 | --background-secondary-alt: #3b1d24; 47 | --background-tertiary: #220f14; 48 | --background-floating: #221115; 49 | --background-accent: #c5536c; 50 | --channeltextarea-background: var(--background-secondary); 51 | --modal-background: var(--background-primary); 52 | --background-modifier-hover: #5e36403b; 53 | --background-modifier-active: #5e364058; 54 | --background-modifier-selected: #5e364068; 55 | --toast-background: #5e3640 !important; 56 | --toast-header: #3b1d24 !important; 57 | --toast-contents: #49292f !important; 58 | --toast-border: #49292f !important; 59 | --input-background: var(--background-secondary); 60 | 61 | /* Scrollbar */ 62 | --scrollbar-auto-thumb: var(--background-tertiary); 63 | --scrollbar-auto-track: var(--background-secondary-alt); 64 | --scrollbar-thin-thumb: var(--background-tertiary); 65 | --scrollbar-thin-track: transparent; 66 | 67 | /* Other */ 68 | --channel-text-area-placeholder: var(--interactive-normal); 69 | --deprecated-quickswitcher-input-background: var(--background-primary); 70 | } 71 | .colorBrand-3cPPsm { 72 | color: #c5536c; 73 | } 74 | .colorDefault-CDqZdO.focused-3qFvc8, 75 | .colorDefault-CDqZdO:active:not(.hideInteraction-2jPGL_) { 76 | background-color: var(--background-modifier-hover) !important; 77 | } 78 | 79 | /* Buttons */ 80 | .lookFilled-1H2Jvj { 81 | background-color: #c5536c !important; 82 | } 83 | .lookFilled-1H2Jvj:active, 84 | .lookFilled-1H2Jvj:hover { 85 | background-color: #b64a61 !important; 86 | } 87 | .lookOutlined-3yKVGo:not(.colorWhite-1H92hK) { 88 | color: #c5536c; 89 | border-color: #c5536c; 90 | } 91 | 92 | /* Hover background */ 93 | .colorDefault-CDqZdO.focused-3qFvc8, 94 | .colorDefault-CDqZdO:active:not(.hideInteraction-2jPGL_) { 95 | color: var(--interactive-normal); 96 | } 97 | 98 | .theme-light { 99 | /* Text */ 100 | --text-normal: #a86373; 101 | --header-primary: #a86373; 102 | --interactive-normal: #a86373; 103 | --channels-default: #a86373; 104 | 105 | --text-muted: #a86373; 106 | --interactive-muted: #cf92a0; 107 | 108 | --header-secondary: #cf92a0; 109 | --interactive-hover: #be7d8c; 110 | --interactive-active: #b36f7f; 111 | 112 | /* Background color */ 113 | --background-primary: #ffffff; 114 | --background-secondary: #ffeeee; 115 | --background-secondary-alt: #fdc7c7; 116 | --background-tertiary: #ffbbbb; 117 | --background-floating: #ffbbbb; 118 | --background-accent: #c5536c; 119 | --channeltextarea-background: var(--background-secondary); 120 | --background-modifier-hover: rgba(56, 31, 31, 0.062); 121 | --background-modifier-active: rgba(19, 12, 12, 0.123); 122 | --background-modifier-selected: rgba(31, 21, 21, 0.11); 123 | 124 | /* Scrollbar */ 125 | --scrollbar-auto-thumb: var(--background-tertiary); 126 | --scrollbar-auto-track: var(--background-secondary-alt); 127 | --scrollbar-thin-thumb: var(--background-tertiary); 128 | --scrollbar-thin-track: transparent; 129 | 130 | /* Other */ 131 | --deprecated-quickswitcher-input-background: var(--background-primary); 132 | } 133 | 134 | .colorDefault-CDqZdO.focused-3qFvc8, 135 | .colorDefault-CDqZdO:active:not(.hideInteraction-2jPGL_) { 136 | background-color: var(--background-modifier-hover) !important; 137 | } 138 | 139 | /* Buttons */ 140 | .lookFilled-1H2Jvj { 141 | background-color: #c5536c !important; 142 | } 143 | .lookFilled-1H2Jvj:active, 144 | .lookFilled-1H2Jvj:hover { 145 | background-color: #b64a61 !important; 146 | } 147 | .lookOutlined-3yKVGo:not(.colorWhite-1H92hK) { 148 | color: #c5536c; 149 | border-color: #c5536c; 150 | } 151 | 152 | /* Hover background */ 153 | .colorDefault-CDqZdO.focused-3qFvc8, 154 | .colorDefault-CDqZdO:active:not(.hideInteraction-2jPGL_) { 155 | color: var(--interactive-normal); 156 | } 157 | -------------------------------------------------------------------------------- /stuff/_channel-bar.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root { 3 | #{selectors.$subtitleContainer} > #{selectors.$title}, 4 | #{selectors.$container}[aria-label*="Thread header"] { 5 | background-color: var(--background-primary); 6 | 7 | #{selectors.$children}:after { 8 | background: none; 9 | } 10 | } 11 | 12 | // Removing help buttons 13 | #{selectors.$toolbar} > [href="https://support.discord.com"]:last-child, #{selectors.$searchLearnMore} { 14 | display: none; 15 | } 16 | 17 | // -- Search bar part -- 18 | #{selectors.$chat} #{selectors.$search} { 19 | order: 1; 20 | margin-left: 0; 21 | #{selectors.$focused} #{selectors.$searchBar}, 22 | #{selectors.$open} #{selectors.$searchBar} { 23 | width: 320px; 24 | border-radius: var(--border-radius); 25 | } 26 | #{selectors.$search}:not(#{selectors.$open}){ 27 | #{selectors.$searchBar} { 28 | width: 27px; 29 | transition: 0.25s; 30 | background-color: transparent; 31 | } 32 | #{selectors.$iconContainer} { 33 | transform: scale(1.3); 34 | transition: 0.25s; 35 | #{selectors.$icon} { 36 | color: var(--interactive-normal) !important; 37 | } 38 | } 39 | &:hover { 40 | #{selectors.$searchBar} { 41 | width: 240px; 42 | background-color: var(--background-tertiary); 43 | border-radius: var(--border-radius); 44 | } 45 | #{selectors.$iconContainer} { 46 | transform: scale(1); 47 | } 48 | } 49 | } 50 | 51 | 52 | #{selectors.$searchFilter} { 53 | background-color: var(--background-primary); 54 | border-radius: var(--border-radius) 0 0 var(--border-radius); 55 | } 56 | #{selectors.$searchAnswer} { 57 | background-color: var(--background-primary); 58 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 59 | } 60 | } 61 | 62 | // Search popout 63 | [id*="popout"] #{selectors.$container}:has(#{selectors.$search}) { 64 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 65 | 0 0 0 1px rgba(56, 31, 31, 0.11); 66 | background-color: var(--background-secondary); 67 | border-radius: var(--border-radius); 68 | 69 | #{selectors.$queryContainer} { 70 | border-bottom: none; 71 | } 72 | #{selectors.$focused} { 73 | background-color: var(--background-secondary-alt); 74 | border-bottom: none; 75 | } 76 | 77 | #{selectors.$resultsGroup} { 78 | &::before { 79 | display: none; 80 | } 81 | 82 | #{selectors.$header} { 83 | text-align: center; 84 | } 85 | } 86 | 87 | // Options 88 | #{selectors.$option} { 89 | border-radius: var(--border-radius); 90 | 91 | &:after { 92 | background: linear-gradient( 90deg, rgba(54, 57, 63, 0), var(--background-secondary) 80%); 93 | } 94 | 95 | #{selectors.$answer} { 96 | color: var(--interactive-muted); 97 | } 98 | } 99 | } 100 | 101 | // Calendar TODO: looks weird? not sure how it was b4 102 | #{selectors.$calendarPicker} { 103 | .react-datepicker { 104 | background-color: var(--background-secondary-alt); 105 | } 106 | 107 | .react-datepicker__day, 108 | .react-datepicker__header { 109 | background: var(--background-secondary-alt) !important; 110 | border-color: var(--background-tertiary) !important; 111 | 112 | &::after { 113 | background-color: var(--background-accent) !important; 114 | } 115 | } 116 | } 117 | #{selectors.$datePicker} #{selectors.$datePickerHint} #{selectors.$hintValue}, 118 | #{selectors.$datePicker} #{selectors.$datePickerHint} #{selectors.$hintValue}:hover { 119 | background-color: var(--background-accent); 120 | } 121 | 122 | #{selectors.$searchLearnMore} { 123 | display: none; 124 | } 125 | 126 | // Search result popout 127 | #{selectors.$searchResultsWrap} { 128 | overflow: visible; 129 | 130 | // Added header 131 | &::before { 132 | content: "Search results"; 133 | position: absolute; 134 | top: -60px; 135 | z-index: 1; 136 | width: 100%; 137 | height: 60px; 138 | display: flex; 139 | align-items: center; 140 | justify-content: center; 141 | font-size: 20px; 142 | font-weight: bolder; 143 | color: var(--header-primary); 144 | background-color: var(--background-secondary); 145 | border-radius: var(--border-radius) var(--border-radius) 0 0; 146 | } 147 | 148 | // Footer 149 | &::after { 150 | content: ""; 151 | position: absolute; 152 | bottom: -35px; 153 | z-index: 1; 154 | width: 100%; 155 | height: 35px; 156 | background-color: var(--background-secondary); 157 | border-radius: 0 0 var(--border-radius) var(--border-radius); 158 | background-image: linear-gradient( to right, var(--header-primary) 33%, rgba(255, 255, 255, 0) 0%); 159 | background-position: top; 160 | background-size: 21px 2px; 161 | background-repeat: repeat-x; 162 | } 163 | 164 | // Header 165 | #{selectors.$searchHeader} { 166 | display: grid; 167 | grid-template-columns: auto auto auto; 168 | grid-gap: 10px; 169 | height: unset; 170 | 171 | & > * { 172 | justify-content: center; 173 | } 174 | 175 | // Total results 176 | #{selectors.$totalResults} { 177 | grid-column: 1/4; 178 | } 179 | 180 | // Parameters 181 | #{selectors.$tab} { 182 | padding: 0; 183 | margin: 0; 184 | } 185 | } 186 | 187 | // Scroller 188 | #{selectors.$scroller} { 189 | padding: 8px 0; 190 | 191 | #{selectors.$searchResultGroup} { 192 | padding: 0 2px 0 8px; 193 | } 194 | 195 | // Reply 196 | #{selectors.$repliedMessage} { 197 | margin-left: 8px; 198 | 199 | &::before { 200 | display: none; 201 | } 202 | } 203 | 204 | // Message 205 | #{selectors.$wrapper} { 206 | padding: 0; 207 | } 208 | 209 | #{selectors.$content} { 210 | display: grid; 211 | grid-template-columns: 40px auto; 212 | grid-gap: 8px; 213 | align-items: center; 214 | margin: 5px 5px 5px 8px; 215 | 216 | /* 217 | // Username + timestamp 218 | {selectors.$header} { 219 | display: flex; 220 | flex-direction: column; 221 | 222 | {selectors.$timestamp} { 223 | margin-left: 0; 224 | } 225 | }*/ 226 | 227 | // Avatar 228 | #{selectors.$avatar} { 229 | position: static; 230 | margin-top: 0; 231 | } 232 | 233 | // Content 234 | #{selectors.$messageContent} { 235 | grid-column: 1/3; 236 | padding-left: 10px; 237 | margin: 0; 238 | padding: 0; 239 | } 240 | } 241 | #{selectors.$embedWrapper} { 242 | margin-left: 5px; 243 | } 244 | 245 | // Page control 246 | #{selectors.$pageControl} { 247 | width: 100%; 248 | } 249 | } 250 | } 251 | 252 | #{selectors.$messagesPopoutWrap} { 253 | border-radius: var(--border-radius); 254 | } 255 | 256 | .header__104ca, 257 | .content__1a4fe::before { 258 | box-shadow: none; 259 | } 260 | } 261 | -------------------------------------------------------------------------------- /stuff/_chat.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root #{selectors.$chat} { 3 | // Forums 4 | #{selectors.$content} > #{selectors.$container}:has(#{selectors.$grid}, #{selectors.$list}) { 5 | background: var(--background-primary); 6 | 7 | #{selectors.$mainCard} { 8 | background-color: var(--background-secondary); 9 | } 10 | } 11 | 12 | // Threads 13 | #{selectors.$chatLayerWrapper} { 14 | & > * { 15 | width: 100%!important; 16 | min-width: unset; 17 | filter:unset; 18 | //max-width: inherit; 19 | } 20 | #{selectors.$scrollerContent} { 21 | min-height: unset; 22 | } 23 | position: fixed; 24 | top: 280px; 25 | bottom: 120px; 26 | right: 60px; 27 | height: unset; 28 | width: 320px; 29 | min-width: unset; 30 | border-radius: var(--border-radius); 31 | background-color: var(--background-primary); 32 | padding-bottom: 26px; 33 | overflow: visible; 34 | 35 | &::-webkit-scrollbar { 36 | margin-right: 50px; 37 | } 38 | 39 | // Header 40 | &::before { 41 | content: "Thread"; 42 | position: absolute; 43 | top: -60px; 44 | z-index: 1; 45 | width: 100%; 46 | height: 60px; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | font-size: 20px; 51 | font-weight: bolder; 52 | color: var(--header-primary); 53 | background-color: var(--background-secondary); 54 | border-radius: var(--border-radius) var(--border-radius) 0 0; 55 | } 56 | 57 | // Footer 58 | &::after { 59 | content: ""; 60 | position: fixed; 61 | bottom: 85px; 62 | z-index: 1; 63 | width: 320px; 64 | height: 35px; 65 | background-color: var(--background-secondary); 66 | border-radius: 0 0 var(--border-radius) var(--border-radius); 67 | background-image: linear-gradient( to right, var(--header-primary) 33%, rgba(255, 255, 255, 0) 0%); 68 | background-position: top; 69 | background-size: 21px 2px; 70 | background-repeat: repeat-x; 71 | } 72 | } 73 | 74 | // Embed 75 | #{selectors.$embedFull} { 76 | border: none; 77 | margin-left: 10px; 78 | border-radius: 5px var(--border-radius) var(--border-radius) 5px; 79 | 80 | &:after { 81 | content: ""; 82 | position: absolute; 83 | top: 1px; 84 | bottom: 1px; 85 | left: -10px; 86 | width: 0px; 87 | border: solid; 88 | border-width: 0 0 0 6px; 89 | border-color: inherit; 90 | border-radius: var(--border-radius); 91 | } 92 | } 93 | 94 | // Code blocks 95 | .hljs { 96 | border: none; 97 | border-radius: var(--border-radius); 98 | } 99 | 100 | // Audio player 101 | .wrapperAudio__555ce { // TODO 102 | padding: 10px 0 0 0; 103 | border-radius: var(--border-radius); 104 | } 105 | .audioMetadata_e546a8 { 106 | padding: 5px 10px; 107 | } 108 | .audioControls__9fbe9 { 109 | border-radius: 0 0 var(--border-radius) var(--border-radius); 110 | } 111 | 112 | // Spoiler 113 | #{selectors.$spoilerText}#{selectors.$hidden}, 114 | #{selectors.$spoilerText}#{selectors.$hidden}:hover { 115 | background-color: var(--background-secondary-alt); 116 | } 117 | 118 | // Discord invite 119 | [class*="message-accessories"] > #{selectors.$wrapper} { 120 | border-radius: var(--border-radius); 121 | } 122 | 123 | // Spotify session 124 | .invite__2a93b { // TODO 125 | background-color: var(--background-secondary); 126 | border: none; 127 | border-radius: var(--border-radius); 128 | } 129 | 130 | // Spotify embed 131 | .embedSpotify_d58077 { // TODO 132 | border-radius: var(--border-radius); 133 | } 134 | 135 | // Discord Gift 136 | .tile_ebc93b { // TODO 137 | background-color: var(--background-secondary); 138 | border-radius: var(--border-radius); 139 | } 140 | .tileHorizontal_f83028.tile_ebc93b:hover { // TODO 141 | background-color: var(--background-secondary-alt); 142 | } 143 | .invalidPoop__03aa3 { // TODO 144 | background-color: rgba(0, 0, 0, 0.103); 145 | } 146 | 147 | // # @ / autocomplete menu 148 | #{selectors.$channelTextArea} { 149 | & > #{selectors.$autocomplete}, 150 | & > #{selectors.$autocomplete} [role="option"] { 151 | background-color: var(--background-secondary-alt); 152 | } 153 | #{selectors.$categoryHeader}, 154 | #{selectors.$selected} { 155 | background-color: var(--background-tertiary); 156 | border-radius: var(--border-radius); 157 | } 158 | } 159 | // @everyone popout 160 | .everyonePopout-nEbJY3 { //TODO 161 | background-color: var(--background-primary); 162 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 163 | 0 0 0 1px rgba(56, 31, 31, 0.11); 164 | } 165 | 166 | // Emoji picker 167 | #emoji-picker-tab-panel { 168 | #{selectors.$emojiItem}#{selectors.$emojiItemSelected} { 169 | background-color: var(--background-modifier-selected); 170 | } 171 | #{selectors.$searchBar} { 172 | border-radius: var(--border-radius); 173 | } 174 | 175 | #{selectors.$imageLoading} { 176 | background-image: none !important; 177 | background-color: var(--background-primary); 178 | border-radius: 8px; 179 | } 180 | } 181 | 182 | // Reactions modal 183 | #{selectors.$focusLock}[aria-label="Reactions"] { 184 | & > #{selectors.$container} > #{selectors.$scroller} { 185 | background: var(--background-tertiary); 186 | border-radius: var(--border-radius) 0 0 var(--border-radius); 187 | } 188 | .container_dc03c3, // what was this?? TODO 189 | #{selectors.$reactors} { 190 | background: var(--background-secondary); 191 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 192 | } 193 | #{selectors.$reactionSelected} { 194 | background-color: #6e85d321; 195 | } 196 | #{selectors.$reactorDefault} { 197 | box-shadow: inset 0 -1px 0 var(--background-primary); 198 | } 199 | } 200 | // Deleting message modal // TODO: what did this do? 201 | #{selectors.$focusLock} #{selectors.$root}#{selectors.$small} #{selectors.$message_} { 202 | background: var(--background-primary); 203 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(56, 31, 31, 0.11); 204 | } 205 | 206 | // Attachements // TODO 207 | .textContainer__709ff, 208 | .footer__06f4b { 209 | border: none; 210 | } 211 | 212 | // Emoji popout 213 | #{selectors.$reactionTooltip} { 214 | border-radius: var(--border-radius); 215 | } 216 | 217 | // New message bar 218 | #{selectors.$newMessagesBar} { 219 | top: 5px; 220 | border-radius: var(--border-radius); 221 | background-color: var(--background-accent); 222 | padding-top: 0; 223 | } 224 | 225 | // Jump to present bar 226 | #{selectors.$jumpToPresentBar} { 227 | bottom: 12px; 228 | padding-bottom: 0; 229 | border-radius: var(--border-radius); 230 | } 231 | 232 | // News chat bar 233 | #{selectors.$form} #{selectors.$wrapper} { 234 | border-radius: var(--border-radius); 235 | } 236 | 237 | // Reactions 238 | #{selectors.$reactions} > div > #{selectors.$reaction} { 239 | border-radius: var(--border-radius); 240 | } 241 | 242 | // Buttons on messages 243 | [id*="message-accessories"] > #{selectors.$button} { 244 | border-radius: var(--border-radius); 245 | } 246 | 247 | // Bot tag 248 | #{selectors.$botTagRegular} { 249 | background-color: var(--background-accent); 250 | } 251 | 252 | // Slow mode 253 | #{selectors.$cooldownWrapper} { 254 | color: var(--text-muted) !important; 255 | } 256 | } 257 | -------------------------------------------------------------------------------- /stuff/_other.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root { 3 | // Adding a custom font 4 | ::-webkit-input-placeholder, 5 | body, 6 | button, 7 | input, 8 | select, 9 | textarea { 10 | font-family: "Nunito" !important; 11 | } 12 | 13 | // Background 14 | #{selectors.$app} > #{selectors.$app} > #{selectors.$bg} { 15 | background: var(--background-tertiary-alt); 16 | background-size: cover; 17 | background-repeat: no-repeat; 18 | } 19 | 20 | // Windows button 21 | .winButton__88672 { 22 | background-color: var(--background-primary); 23 | 24 | &:last-child { 25 | border-bottom-left-radius: 8px; 26 | } 27 | } 28 | 29 | // More border radius 30 | button, 31 | input, 32 | textarea, 33 | .menu_dc52c6 { // TODO: what was this? 34 | border-radius: var(--border-radius) !important; 35 | } 36 | 37 | // -- Better menus -- 38 | .menu_dc52c6 { // TODO: what was this? 39 | overflow: hidden; 40 | } 41 | 42 | .scroller__750f5 { // TODO: what was this? (+everything inside) 43 | padding: 0; 44 | 45 | &::-webkit-scrollbar, 46 | .separator__18122 { 47 | display: none; 48 | } 49 | .item__183e8 { 50 | flex-direction: row-reverse; 51 | padding: 10px 10px 10px 13px; 52 | margin: 0; 53 | transition: 0.15s; 54 | border-radius: 0; 55 | 56 | .hintContainer__79e5e { 57 | margin: 0 8px 0 0; 58 | } 59 | 60 | .iconContainer__829e7, 61 | .imageContainer_ea60f4 { 62 | margin: 0 8px 0 0; 63 | } 64 | } 65 | 66 | // Submenu 67 | .submenuPaddingContainer__12a9d { 68 | margin: 0 -8px; 69 | } 70 | } 71 | 72 | // Modals 73 | #{selectors.$layer} #{selectors.$focusLock} { 74 | .modal__060da, // TODO: what were these? 75 | & > #{selectors.$root}, 76 | .uploadModal_eae2a0 { // TODO: what were these? 77 | border-radius: var(--border-radius); 78 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(56, 31, 31, 0.11); 79 | // Custom status modal 80 | #{selectors.$select}, 81 | #{selectors.$popout} { 82 | border: none; 83 | } 84 | #{selectors.$select}, 85 | #{selectors.$popout}, 86 | #{selectors.$input_} { 87 | background-color: var(--background-secondary-alt); 88 | } 89 | } 90 | 91 | div#{selectors.$footer} { 92 | border-radius: 0 0 var(--border-radius) var(--border-radius); 93 | background-color: var(--background-tertiary); 94 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(56, 31, 31, 0.11); 95 | } 96 | } 97 | 98 | // User profile 99 | #{selectors.$accountProfilePopoutWrapper} { 100 | left: -15px; 101 | bottom: -5px; 102 | 103 | #{selectors.$userPopoutOverlayBackground} { 104 | backdrop-filter: unset; 105 | } 106 | 107 | #{selectors.$nameTag} { 108 | position: static !important; 109 | } 110 | } 111 | 112 | // TODO: everything below (200 lines) 113 | 114 | // Delete Discord wordmark 115 | .titleBar__01af6 .wordmark__0d178 { 116 | display: none; 117 | } 118 | 119 | // Colored emoji 120 | .sprite__294b3 { 121 | filter: none !important; 122 | } 123 | 124 | // Create a server popout 125 | .header-1c1AhF { 126 | overflow-x: visible; 127 | } 128 | 129 | .categoryItem-1QIroW .itemInner-gPkiWb { 130 | background-color: transparent; 131 | } 132 | .pageWrapper_fef757 { 133 | background-color: var(--background-primary); 134 | } 135 | .notice__99c03 { 136 | border-top-left-radius: 0; 137 | background-color: var(--background-tertiary); 138 | } 139 | .button__671cf:hover { 140 | background-color: transparent; 141 | } 142 | .headerImage-2D5D-v, 143 | .card__86773 { 144 | border-radius: var(--border-radius); 145 | } 146 | 147 | // Call tile 148 | .tile_a411a4 { 149 | background-color: var(--background-secondary-alt); 150 | border-radius: var(--border-radius); 151 | 152 | .button__13ec4 { 153 | background-color: var(--background-accent); 154 | } 155 | } 156 | 157 | // Joining message 158 | .contentWrapper__85d37 { 159 | background: var(--background-secondary); 160 | } 161 | 162 | // Keyboard shortcuts 163 | .keyboardShortcutsModal__74c71 { 164 | background: var(--background-secondary); 165 | } 166 | 167 | // Discord game 168 | .scroller__46bcc { 169 | background: var(--background-primary); 170 | } 171 | .whyYouMightLikeIt_ad60b9, 172 | .content__8af7f, 173 | .bodySection_ae0d90, 174 | .row__80d34 { 175 | background: var(--background-secondary); 176 | } 177 | 178 | // Tooltips 179 | .toolbar_c7b525 { 180 | display: flex !important; 181 | background-color: var(--background-secondary-alt); 182 | 183 | &::before { 184 | border-top: 8px solid var(--background-secondary-alt); 185 | } 186 | 187 | .button__07531 { 188 | background-color: transparent !important; 189 | } 190 | } 191 | 192 | // New community home 193 | .header__60bef, 194 | .container__10dc7, 195 | .emptyPage__3e15d, 196 | .pageBody_db54f5, 197 | .background_cb0a80, 198 | .scrollerContainer_bf5dbd { 199 | background-color: var(--background-primary); 200 | } 201 | .row__70f4c, 202 | .channelRow__96673 { 203 | background-color: var(--background-secondary); 204 | } 205 | .emptyContainer__0cde5 > .emptyIcon__3ebb5 { 206 | & > circle { 207 | fill: var(--interactive-normal); 208 | } 209 | & > path { 210 | fill: var(--background-accent); 211 | stroke: var(--background-accent); 212 | } 213 | } 214 | .brand_ce3ecf.item__48dda:active, 215 | .brand_ce3ecf.selected__5711d.item__48dda { 216 | border-bottom-color: var(--background-accent); 217 | } 218 | .checkbox_c7f690 { 219 | background-color: var(--background-secondary) !important; 220 | border-color: var(--background-accent) !important; 221 | 222 | &.checked__24ad6 { 223 | background-color: var(--background-accent) !important; 224 | 225 | & > svg > path { 226 | fill: #FFF; 227 | } 228 | } 229 | 230 | & > svg > path { 231 | fill: transparent; 232 | } 233 | } 234 | 235 | .container__871ba.checked__6bdb0 { 236 | background-color: var(--background-accent) !important; 237 | 238 | & path { 239 | fill: var(--background-accent) !important; 240 | } 241 | } 242 | 243 | // Loading screen 244 | .ready__61f2f { 245 | display: none; 246 | 247 | & + .text__32559 { 248 | top: 82px; 249 | 250 | &::before { 251 | content: ""; 252 | position: absolute; 253 | bottom: 100px; 254 | left: 50px; 255 | width: 200px; 256 | height: 200px; 257 | background: var(--jumping-gif) center/80% no-repeat; 258 | } 259 | } 260 | } 261 | 262 | .container__871ba[style*="background-color: var(--green-360)"] { 263 | background-color: var(--background-accent) !important; 264 | 265 | & path { 266 | fill: var(--background-accent) !important; 267 | } 268 | } 269 | 270 | // -- ✔️ Plugin support -- 271 | 272 | // PermisssionViewer support 273 | #permissions-modal-wrapper #permissions-modal { 274 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 275 | 0 0 0 1px rgba(56, 31, 31, 0.11) !important; 276 | border-color: var(--background-tertiary) !important; 277 | } 278 | #permissions-modal-wrapper .header { 279 | background: var(--background-tertiary) !important; 280 | text-align: center !important; 281 | } 282 | #permissions-modal-wrapper .role-side, 283 | #permissions-modal-wrapper .perm-side { 284 | background: var(--background-secondary) !important; 285 | } 286 | 287 | // Member Count support 288 | #MemberCount { 289 | width: 320px; 290 | } 291 | 292 | @media (max-width: 1350px) { 293 | #MemberCount { 294 | background-color: var(--background-primary); 295 | } 296 | } 297 | 298 | @media (min-width: 1350px) { 299 | #MemberCount .membersGroup__85843 { 300 | padding-top: 12px; 301 | } 302 | } 303 | 304 | // Vencord 305 | .vc-settings-tab-bar { 306 | border-color: var(--background-secondary); 307 | } 308 | 309 | .vc-settings-card, .vc-settings-quick-actions-card { 310 | border: none; 311 | } 312 | 313 | .vc-settings-tab-bar-item.item__48dda { 314 | border-radius: 0 !important; 315 | } 316 | 317 | .vc-settings-theme-links { 318 | background-color: var(--background-secondary); 319 | border: none; 320 | } 321 | 322 | .vc-addon-card { 323 | border-radius: var(--border-radius); 324 | } 325 | } 326 | -------------------------------------------------------------------------------- /stuff/_member-list.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | @use "sass:map"; 3 | 4 | :root { 5 | // -- Member list -- 6 | #{selectors.$chatContent} + #{selectors.$container} { 7 | background: none; 8 | } 9 | 10 | @media (max-width: 1350px) { 11 | #{selectors.$members} { 12 | border-radius: var(--border-radius) 0 0; 13 | } 14 | } 15 | 16 | #{selectors.$membersWrap} { 17 | // Header 18 | &::before { 19 | content: "Member list"; 20 | position: absolute; 21 | top: -60px; 22 | z-index: 1; 23 | width: 100%; 24 | height: 60px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | font-size: 20px; 29 | font-weight: bolder; 30 | color: var(--header-primary); 31 | background-color: var(--background-secondary); 32 | border-radius: var(--border-radius) var(--border-radius) 0 0; 33 | } 34 | 35 | // Footer 36 | &::after { 37 | content: ""; 38 | position: absolute; 39 | bottom: -35px; 40 | z-index: 1; 41 | width: 100%; 42 | height: 35px; 43 | background-color: var(--background-secondary); 44 | border-radius: 0 0 var(--border-radius) var(--border-radius); 45 | background-image: linear-gradient( to right, var(--header-primary) 33%, rgba(255, 255, 255, 0) 0%); 46 | background-position: top; 47 | background-size: 21px 2px; 48 | background-repeat: repeat-x; 49 | } 50 | } 51 | 52 | #{selectors.$layout}#{selectors.$memberInner} { 53 | border-radius: var(--border-radius); 54 | } 55 | 56 | // -- User popout -- 57 | #{selectors.$userPopoutOuter} { 58 | max-height: unset !important; 59 | } 60 | 61 | #{selectors.$profilePanel} #{selectors.$userPanelInner}, 62 | #{selectors.$userPopoutInner} { 63 | position: relative; 64 | max-height: unset !important; 65 | overflow: hidden; 66 | z-index: 2; 67 | 68 | &::before { 69 | z-index: -1; 70 | width: 100%; 71 | height: 100%; 72 | } 73 | 74 | // Banner 75 | #{selectors.$bannerSVGWrapper} { 76 | position: absolute; 77 | -webkit-mask-image: linear-gradient(to bottom, #000000, #00000000); 78 | mask-image: linear-gradient(to bottom, #000000, #00000000); 79 | background-color: #000000; 80 | height: 300px; 81 | 82 | mask { 83 | display: none; 84 | } 85 | foreignObject { 86 | mask: none; 87 | } 88 | 89 | #{selectors.$banner} { 90 | height: 100%; 91 | 92 | &::before { 93 | content: ""; 94 | position: absolute; 95 | width: 100%; 96 | height: 100%; 97 | background-color: #00000030; 98 | } 99 | } 100 | 101 | &[viewBox="0 0 340 120"] { 102 | transform: translateX(-200px); 103 | 104 | #{selectors.$banner} > * { 105 | display: none; 106 | } 107 | } 108 | 109 | .pencilContainer-11Kuga { // TODO: what was this?? 110 | display: none; 111 | } 112 | } 113 | 114 | // Badges 115 | #{selectors.$badgeList}, 116 | #{selectors.$profileBadges} { 117 | position: absolute; 118 | top: 65px; 119 | left: 110px; 120 | height: unset; 121 | background-color: transparent; 122 | } 123 | 124 | // Avatar 125 | #{selectors.$avatarWrapperNormal} { 126 | position: relative; 127 | width: 80px; 128 | top: 16px; 129 | z-index: 1; 130 | 131 | foreignObject { 132 | mask: none; 133 | border-radius: var(--border-radius); 134 | } 135 | 136 | #{selectors.$avatarHint} { 137 | border-radius: var(--border-radius); 138 | } 139 | 140 | circle { 141 | display: none; 142 | } 143 | } 144 | 145 | 146 | #{selectors.$userPanelOverlayBackground}, 147 | #{selectors.$userPopoutOverlayBackground} { 148 | overflow: visible; 149 | background-color: #00000011; 150 | backdrop-filter: blur(20px); 151 | #{selectors.$section} { 152 | & > #{selectors.$copiableNameTag} > #{selectors.$clickTarget}, 153 | & > div > #{selectors.$userText} { 154 | position: absolute; 155 | left: 100px; 156 | top: -87px; 157 | box-sizing: border-box; 158 | max-width: 200px; 159 | text-overflow: ellipsis; 160 | white-space: nowrap; 161 | overflow: hidden; 162 | display: block; 163 | color: var(--header-secondary); 164 | 165 | & > span { 166 | word-break: unset; 167 | white-space: unset; 168 | } 169 | 170 | #{selectors.$discrimBase} { 171 | color: white; 172 | } 173 | } 174 | 175 | #{selectors.$pronouns} { 176 | padding-top: 12px; 177 | } 178 | } 179 | 180 | #{selectors.$section} { 181 | padding-top: 0; 182 | padding-bottom: 12px; 183 | } 184 | 185 | #{selectors.$divider} { 186 | display: none; 187 | } 188 | } 189 | #{selectors.$profilePanelConnections} > :nth-child(2) { 190 | margin-top: 10px; 191 | } 192 | 193 | #{selectors.$mutualGuildsList}, #{selectors.$mutualFriendsList} { 194 | border-top: none; 195 | 196 | & > button { 197 | //background-color: rgba(0, 0, 0, 0.0666666667) !important; 198 | } 199 | } 200 | } 201 | #{selectors.$profilePanel} #{selectors.$userPanelInner} #{selectors.$userPanelOverlayBackground} #{selectors.$section} { 202 | & > #{selectors.$copiableNameTag} > #{selectors.$clickTarget}, 203 | & > div > #{selectors.$userText} { 204 | top: -110px; 205 | } 206 | } 207 | 208 | // -- User modal -- 209 | #{selectors.$root}#{selectors.$small} { 210 | border-radius: var(--border-radius); 211 | 212 | // Banner part 213 | #{selectors.$topSection} { 214 | position: relative; 215 | margin-bottom: 30px; 216 | 217 | // Banner 218 | #{selectors.$bannerSVGWrapper} { 219 | position: absolute; 220 | -webkit-mask-image: linear-gradient(to bottom, #000000, #00000000); 221 | mask-image: linear-gradient(to bottom, #000000, #00000000); 222 | background-color: #000000; 223 | width: 600px; 224 | 225 | mask { 226 | display: none; 227 | } 228 | foreignObject { 229 | mask: none; 230 | } 231 | 232 | #{selectors.$banner} { 233 | &::before { 234 | content: ""; 235 | position: absolute; 236 | width: 100%; 237 | height: 100%; 238 | background-color: #00000030; 239 | } 240 | } 241 | 242 | &[viewBox="0 0 340 120"] { 243 | transform: translateX(-200px); 244 | 245 | #{selectors.$banner} > * { 246 | display: none; 247 | } 248 | } 249 | 250 | .pencilContainer_d4ce8d { // TODO: what was this?? 251 | display: none; 252 | } 253 | } 254 | 255 | #{selectors.$header} { 256 | #{selectors.$avatar}#{selectors.$wrapper} { 257 | position: relative; 258 | top: 22px; 259 | 260 | foreignObject { 261 | mask: none; 262 | border-radius: var(--border-radius); 263 | } 264 | 265 | circle { 266 | display: none; 267 | } 268 | } 269 | 270 | // Badges 271 | #{selectors.$headerTop} { 272 | position: absolute; 273 | top: 70px; 274 | row-gap: 10px; 275 | flex-direction: column; 276 | 277 | .badgeList_c193e3 { 278 | background-color: transparent; 279 | } 280 | } 281 | } 282 | } 283 | 284 | // User info part 285 | #{selectors.$userProfileModalOverlayBackground} { 286 | z-index: 1; 287 | overflow: visible; 288 | background-color: #00000011; 289 | backdrop-filter: blur(20px); 290 | 291 | // Username 292 | #{selectors.$container} > div:first-child { 293 | position: absolute; 294 | top: -145px; 295 | left: 150px; 296 | padding: 0; 297 | } 298 | } 299 | 300 | // Mutual bar 301 | #{selectors.$tabBarContainer} { 302 | padding: 0; 303 | border-bottom: none; 304 | 305 | .tabBar__35f81 { 306 | justify-content: space-around; 307 | } 308 | } 309 | 310 | // Activities 311 | #{selectors.$activity} { 312 | position: relative; 313 | z-index: 1; 314 | } 315 | #{selectors.$activityProfileV2} { 316 | background-color: var(--background-primary); 317 | margin: 10px; 318 | border-radius: var(--border-radius); 319 | } 320 | 321 | // Body 322 | #{selectors.$body} { 323 | // Connections 324 | #{selectors.$userInfoSection}#{selectors.$connectedAccounts} { 325 | border-top: none; 326 | 327 | #{selectors.$connectedAccountContainer} { 328 | position: relative; 329 | border: none; 330 | 331 | & > #{selectors.$connectedAccount} { 332 | flex-direction: column; 333 | } 334 | 335 | // Icon 336 | #{selectors.$connectedAccountIcon} { 337 | position: relative; 338 | margin-bottom: 10px; 339 | width: 45px; 340 | height: 45px; 341 | z-index: 2; 342 | 343 | & + #{selectors.$connectedAccountNameContainer}::before { 344 | content: ""; 345 | position: absolute; 346 | top: 0; 347 | left: 0; 348 | z-index: -1; 349 | width: 100%; 350 | height: 100%; 351 | border-radius: var(--border-radius); 352 | } 353 | } 354 | 355 | // Username 356 | #{selectors.$connectedAccountNameContainer} { 357 | width: 100%; 358 | justify-content: center; 359 | overflow: visible; 360 | 361 | #{selectors.$connectedAccountNameTextContainer} { 362 | justify-content: center; 363 | margin: 0; 364 | } 365 | [class*="text-xs-normal"] { 366 | text-align: center; 367 | } 368 | } 369 | 370 | #{selectors.$connectedAccountChildren} { 371 | justify-content: center; 372 | margin: 0; 373 | } 374 | 375 | // Link 376 | #{selectors.$anchor} { 377 | position: absolute; 378 | top: 0; 379 | left: 0; 380 | width: 100%; 381 | height: 100%; 382 | z-index: 2; 383 | 384 | & > svg { 385 | display: none; 386 | } 387 | } 388 | $connectionColors: ( 389 | "Battle.net": #1da0f248, 390 | "Twitch": #601bd852, 391 | "YouTube": #d9252b49, 392 | "Twitter": #0098e43f, 393 | "Steam": #00000034, 394 | "Reddit": #fe44013d, 395 | "Facebook": #2e328485, 396 | "Spotify": #1ed75f34, 397 | "Xbox": #5dc21e36, 398 | "League of Legends": #cea14638, 399 | "GitHub": #24292e62, 400 | "Skype": #0076d74b, 401 | "Epic Games": #2f2f2f59, 402 | "Riot Games": #eb1c2d38, 403 | "PayPal": #009fe33b, 404 | "TikTok": #64bfc546, 405 | "eBay": #c500003b, 406 | "PlayStation Network": #0051ae53, 407 | ); 408 | @each $name, $color in $connectionColors { 409 | #{selectors.$connectedAccountIcon}[aria-label="#{$name}"] 410 | + #{selectors.$connectedAccountNameContainer}::before { 411 | background-color: $color; 412 | } 413 | } 414 | } 415 | } 416 | } 417 | } 418 | } 419 | -------------------------------------------------------------------------------- /stuff/_settings.scss: -------------------------------------------------------------------------------- 1 | @use '../selectors'; 2 | :root { 3 | // Support for macOS 4 | .typeMacOS__496b0 { 5 | margin-top: 20px; 6 | background-color: var(--background-tertiary); 7 | } 8 | 9 | #{selectors.$layers} { 10 | margin: 20px 0 40px 0; 11 | z-index: 1; 12 | & > #{selectors.$layer}:first-child { 13 | opacity: 1 !important; 14 | transform: scale(1) !important; 15 | } 16 | & > #{selectors.$layer}.stop-animations:first-child { 17 | z-index: 1; 18 | transform: scale(1) !important; 19 | } 20 | 21 | & > :nth-child(2) { 22 | height: 100%; 23 | left: 72px; 24 | z-index: 2; 25 | background-color: transparent; 26 | transform: scale(1) !important; 27 | 28 | // Close button 29 | #{selectors.$closeButton} { 30 | border: none; 31 | 32 | svg { 33 | width: 23px; 34 | height: 23px; 35 | } 36 | & + #{selectors.$keybind} { 37 | display: none; 38 | } 39 | } 40 | } 41 | 42 | 43 | } 44 | 45 | // Menu scroller 46 | @media (min-width: 1350px) { 47 | #{selectors.$standardSidebarView} { 48 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 49 | overflow: hidden; 50 | } 51 | } 52 | 53 | #{selectors.$standardSidebarView} { 54 | #{selectors.$sidebarRegion} { 55 | flex: unset; 56 | 57 | #{selectors.$sidebarRegionScroller} #{selectors.$sidebar} { 58 | width: 232px; 59 | padding: 60px 10px; 60 | } 61 | } 62 | & > #{selectors.$contentRegion} #{selectors.$tabBar} #{selectors.$tabBarItem} { 63 | padding: 8px; 64 | } 65 | } 66 | 67 | // Widder settings 68 | #{selectors.$contentColumn}, 69 | .customColumn_e22a6e, // TODO: are the other ones needed? 70 | .hero-1aNo0v, 71 | .notificationSettings-1U0JsJ, 72 | .noticeRegion__2779f, 73 | .customScroller_f72801 > div, 74 | .userSettingsVoice-1_dzjw { 75 | max-width: 95%; 76 | } 77 | .featuresHeader-2bjq5B { // TODO: a ton below here (600 lines) 78 | text-align: center; 79 | } 80 | .userSettingsVoice-1_dzjw 81 | .children_b15c64 82 | > :nth-child(9) 83 | .flexChild__6e093:last-child { 84 | flex: 1 !important; 85 | } 86 | .noticeRegion__2779f { 87 | right: 0; 88 | 89 | .container__467eb { 90 | background-color: var(--background-tertiary) !important; 91 | } 92 | } 93 | 94 | // Boost 95 | .perksModal-fSYqOq { 96 | background: var(--background-primary); 97 | } 98 | .tierMarkerBackground-G8FoN4, 99 | .tierHeaderLocked-1s2JJz, 100 | .barBackground-unEPDT, 101 | .icon_ae3492 { 102 | background: var(--background-secondary-alt); 103 | } 104 | .option-2KkUJO.selected-rZcOL-, 105 | .tierBody-16Chc9, 106 | .perk-2WeBWW, 107 | .tierMarkerInProgress-2Tdxjz { 108 | background: var(--background-secondary) !important; 109 | } 110 | 111 | // -- 👤 User settings -- 112 | 113 | // My account 114 | #{selectors.$accountProfileCard} { 115 | background-color: var(--background-secondary-alt); 116 | border-radius: var(--border-radius); 117 | 118 | // Banner 119 | #{selectors.$bannerSVGWrapper} { 120 | position: absolute; 121 | -webkit-mask-image: linear-gradient(to bottom, #000000, #00000000); 122 | min-width: 900px !important; 123 | height: 100px; 124 | 125 | mask { 126 | display: none; 127 | } 128 | foreignObject { 129 | mask: none; 130 | transform: translate(-130px); 131 | width: 900px; 132 | } 133 | 134 | #{selectors.$banner} { 135 | background-position: left; 136 | min-width: 900px; 137 | 138 | &::before { 139 | content: ""; 140 | position: absolute; 141 | width: 100%; 142 | height: 100%; 143 | background-color: #00000030; 144 | } 145 | } 146 | 147 | &[viewBox="0 0 340 120"] { 148 | transform: translateX(-200px); 149 | 150 | .banner__6d414 > * { 151 | display: none; 152 | } 153 | } 154 | } 155 | 156 | #{selectors.$userInfo} { 157 | height: 100px; 158 | align-items: center; 159 | 160 | #{selectors.$avatar} { 161 | top: 8px; 162 | border-color: transparent; 163 | background-color: transparent; 164 | } 165 | } 166 | 167 | #{selectors.$background} { 168 | border-radius: var(--border-radius); 169 | } 170 | } 171 | 172 | // User profile 173 | #{selectors.$profileCustomizationSection} #{selectors.$baseLayout} { 174 | flex-direction: column; 175 | 176 | & > :first-child { 177 | flex: 1 auto; 178 | } 179 | 180 | & > #{selectors.$preview} { 181 | margin: 0; 182 | } 183 | 184 | #{selectors.$profileCustomizationPreview} { 185 | background-color: transparent; 186 | overflow: hidden; 187 | border-radius: var(--border-radius); 188 | 189 | #{selectors.$bannerSVGWrapper}[viewBox="0 0 340 90"] + #{selectors.$avatarUploader}, 190 | #{selectors.$bannerSVGWrapper}[viewBox="0 0 340 120"] + #{selectors.$avatarUploader} { 191 | top: 16px; 192 | } 193 | 194 | #{selectors.$avatarUploader} { 195 | position: relative; 196 | width: 80px; 197 | z-index: 1; 198 | 199 | foreignObject { 200 | mask: none; 201 | border-radius: var(--border-radius); 202 | } 203 | 204 | #{selectors.$avatarHint} { 205 | border-radius: var(--border-radius); 206 | } 207 | 208 | #{selectors.$status} { 209 | background-color: transparent; 210 | } 211 | 212 | #{selectors.$imageUploaderIcon_} { 213 | display: none; 214 | } 215 | 216 | #{selectors.$imageUploaderInner} { 217 | border-radius: var(--border-radius); 218 | } 219 | } 220 | 221 | #{selectors.$userTagNoNickname} { 222 | position: absolute; 223 | top: -85px; 224 | left: 105px; 225 | box-sizing: border-box; 226 | max-width: 200px; 227 | text-overflow: ellipsis; 228 | white-space: nowrap; 229 | overflow: hidden; 230 | display: block; 231 | color: var(--header-secondary); 232 | 233 | & > span { 234 | word-break: unset; 235 | white-space: unset; 236 | } 237 | 238 | #{selectors.$discrimBase} { 239 | color: white; 240 | } 241 | } 242 | } 243 | } 244 | 245 | // Privacy & Safety 246 | .item-2idW98 { 247 | border-radius: var(--border-radius); 248 | 249 | .radioBar-3w9XY- { 250 | border: none; 251 | 252 | &:first-child .radioIconForeground-2BMavi { 253 | color: var(--radio-bar-accent-color); 254 | } 255 | } 256 | } 257 | .formNotice__8622e { 258 | border-radius: var(--border-radius); 259 | } 260 | 261 | // Authorized apps 262 | .formNotice__8622e, 263 | .card__4dc22.outline_cb0aed { 264 | border: none; 265 | } 266 | .card__4dc22.outline_cb0aed { 267 | background-color: var(--background-secondary-alt); 268 | border-radius: var(--border-radius); 269 | } 270 | 271 | // Connections 272 | .connectContainer__8050b, 273 | .connection_fff5f6 { 274 | border-radius: var(--border-radius); 275 | } 276 | .connectionHeader__3c82d { 277 | border-radius: var(--border-radius) var(--border-radius) 0 0; 278 | } 279 | 280 | // Nitro 281 | .premiumTab__57bdc .premiumLabel_f2cd55 { 282 | flex-direction: row-reverse; 283 | justify-content: flex-end; 284 | } 285 | .premiumTab__57bdc svg { 286 | fill: var(--background-accent) !important; 287 | margin-right: 5px; 288 | } 289 | .feature-2IUcBI { 290 | border-radius: var(--border-radius); 291 | } 292 | 293 | // Boost 294 | .gemIndicatorContainer_b03ca0 { 295 | background-color: var(--background-tertiary); 296 | } 297 | .cardWrapper_bc8d2a, 298 | .card__11580:hover { 299 | border-radius: var(--border-radius); 300 | } 301 | 302 | // Gift inventory 303 | .input-2g-os5 { 304 | border: none; 305 | } 306 | 307 | // Billing 308 | .paymentRow__1bb7a, 309 | .pageActions__11ae3, 310 | .codeRedemptionRedirect_bc7f36, 311 | .paginator_e620d3 { 312 | background: var(--background-secondary-alt); 313 | } 314 | .payment__7d702:hover { 315 | background-color: var(--background-secondary); 316 | } 317 | .expandedInfo__47bad { 318 | background: var(--background-secondary); 319 | } 320 | .checked-1pZh2h { 321 | background: transparent; 322 | border-color: transparent; 323 | } 324 | .bottomDivider_a59d97 { 325 | border-bottom-color: transparent; 326 | } 327 | .codeRedemptionRedirect_bc7f36 { 328 | border: none; 329 | } 330 | .paymentPane__9cf01, 331 | .expandedInfo__47bad { 332 | border-radius: var(--border-radius); 333 | } 334 | 335 | // Appearance 336 | .barFill-2Bh7CX { 337 | background: var(--background-accent); 338 | } 339 | .bar_e58961 { 340 | background-color: var(--background-secondary); 341 | } 342 | 343 | // Accessibility 344 | .markDash_dc3ae9 { 345 | background-color: var(--background-secondary); 346 | } 347 | 348 | // Voice & video 349 | .userSettingsVoice__33015 .cameraWrapper-3a7Ngv { 350 | background-color: var(--background-secondary-alt); 351 | border: none; 352 | } 353 | .bar-1Bhnl9 { 354 | background-color: var(--background-secondary-alt); 355 | } 356 | .progress__2cc1d { 357 | background-color: var(--background-primary); 358 | } 359 | .notches__065e9.gray__4fb3f { 360 | color: var(--background-secondary); 361 | } 362 | .userSettingsVoice-1_dzjw .cameraWrapper-3a7Ngv { 363 | border-radius: var(--border-radius); 364 | } 365 | .previewContainer-37c2Si .media-engine-video { 366 | background-color: transparent; 367 | } 368 | 369 | // Keybinds 370 | .container_e61cfb { 371 | border: none; 372 | } 373 | .container_de00a3, 374 | .container_e61cfb { 375 | border-radius: var(--border-radius); 376 | } 377 | 378 | // Streamer mode 379 | .cardPrimary_cb7a0e { 380 | background-color: var(--background-secondary-alt); 381 | border-radius: var(--border-radius); 382 | } 383 | 384 | // Game Activity 385 | .game__19f4b { 386 | box-shadow: none; 387 | } 388 | .notDetected__2a0c9, 389 | .addGamePopout_e4ca8f, 390 | .card_fd0d59:before { 391 | background: var(--background-secondary-alt); 392 | } 393 | .gameNameInput_e25dd8:hover, 394 | .gameNameInput_e25dd8:focus { 395 | background-color: var(--background-tertiary); 396 | } 397 | .card_fd0d59:before, 398 | .gameNameInput_e25dd8 { 399 | border: none; 400 | } 401 | .default__3e2f5, 402 | .default__3e2f5:hover { 403 | background-color: var(--background-tertiary); 404 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 405 | 0 0 0 1px rgba(56, 31, 31, 0.11); 406 | } 407 | .lastPlayed_accc56 { 408 | color: var(--text-muted); 409 | } 410 | .activeGame__99516 { 411 | border-radius: var(--border-radius); 412 | } 413 | .addGamePopout_e4ca8f { 414 | border: none; 415 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 416 | 0 0 0 1px rgba(56, 31, 31, 0.11); 417 | border-radius: var(--border-radius); 418 | } 419 | .game__19f4b, 420 | .game__19f4b::before { 421 | border-radius: var(--border-radius); 422 | } 423 | 424 | // Hypesquad 425 | .membershipDialog-2wAdpQ { 426 | border-radius: var(--border-radius); 427 | } 428 | 429 | // BetterDiscord 430 | .bd-sidebar-header h2 { 431 | color: var(--channels-default); 432 | } 433 | 434 | .bd-addon-list .bd-addon-card, 435 | .bd-search-wrapper, 436 | #floating-editor-window { 437 | border-radius: var(--border-radius); 438 | } 439 | 440 | .bd-select { 441 | border: none; 442 | transition: 0.15s; 443 | border-radius: var(--border-radius); 444 | 445 | .menu-open { 446 | border-radius: var(--border-radius) var(--border-radius) 0 0 !important; 447 | } 448 | 449 | .bd-select-options { 450 | border: none; 451 | border-radius: var(--border-radius); 452 | 453 | &:last-child { 454 | border-radius: 0 0 var(--border-radius) var(--border-radius) !important; 455 | } 456 | } 457 | } 458 | 459 | .bd-controls { 460 | border-radius: var(--border-radius); 461 | overflow: hidden; 462 | 463 | & > button { 464 | border-radius: unset !important; 465 | } 466 | } 467 | 468 | .notice__5fd4c { 469 | &[id] { 470 | margin: 0 450px -20px 0px; 471 | border-radius: 0 8px 0 0 !important; 472 | 473 | & + .layers_a40797 .guilds__2b93a + :nth-child(2) { 474 | border-radius: 0; 475 | } 476 | } 477 | 478 | &:not([id]) { 479 | border-top-left-radius: 0; 480 | } 481 | } 482 | 483 | // Experiments 484 | .container__7712a { 485 | border-radius: var(--border-radius); 486 | } 487 | 488 | // -- ⚙️ Server settings -- 489 | 490 | // Overview - Server 491 | .imageUploaderIcon__0c13b { 492 | display: none; 493 | } 494 | .select__0eb48 { 495 | border-radius: var(--border-radius); 496 | } 497 | .select__0eb48[aria-expanded="true"] { 498 | border-radius: var(--border-radius) var(--border-radius) 0 0; 499 | } 500 | .select__0eb48[aria-expanded="true"].selectPositionTop__139bc { 501 | border-radius: 0 0 var(--border-radius) var(--border-radius); 502 | } 503 | .popout_a6e77f { 504 | border-radius: 0 0 var(--border-radius) var(--border-radius); 505 | } 506 | .popout_a6e77f.popoutPositionTop-3OGkHL { 507 | border-radius: var(--border-radius) var(--border-radius) 0 0; 508 | } 509 | 510 | // Roles 511 | .container_d5f6d0, 512 | .previewContainer_d2b616 { 513 | border-radius: var(--border-radius); 514 | } 515 | .colorPickerCustom-1swUKF { 516 | background: var(--background-secondary); 517 | border: none; 518 | border-radius: var(--border-radius); 519 | } 520 | .addRoleButton-3Y-nzm ~ .draggable-1EOU8o { 521 | margin: 2px 0; 522 | } 523 | .roleDot-2a4Pv7 { 524 | border: none; 525 | } 526 | 527 | // Emoji 528 | .emojiAliasInput_dd55f7 .emojiInput__4fe54 { 529 | background: var(--background-secondary-alt); 530 | } 531 | .input-2g-os5:focus { 532 | border-color: var(--background-accent); 533 | } 534 | 535 | // Audit logs 536 | .headerClickable_c4d7a9, 537 | .headerDefault__3e003, 538 | .headerExpanded__03c29 { 539 | background: var(--background-secondary-alt); 540 | } 541 | .auditLog__6c805, 542 | .header_e08fd2 { 543 | border: none; 544 | border-radius: var(--border-radius); 545 | 546 | .headerExpanded__03c29 { 547 | border-radius: var(--border-radius) var(--border-radius) 0 0; 548 | } 549 | .changeDetails_ecd760 { 550 | border-radius: 0 0 var(--border-radius) var(--border-radius); 551 | } 552 | } 553 | .divider__1505d { 554 | display: none; 555 | } 556 | 557 | // Integrations 558 | .cardPrimaryEditable-2mz_3i { 559 | border: none; 560 | background-color: var(--background-secondary-alt); 561 | border-radius: var(--border-radius); 562 | } 563 | 564 | // Widget 565 | .copyInput_c1c679 { 566 | border: none; 567 | border-radius: var(--border-radius); 568 | } 569 | 570 | // App directory 571 | .directoryModal-YJsOMv { 572 | background-color: var(--background-primary); 573 | } 574 | 575 | // Server template 576 | .descriptionBox-1EKQKL { 577 | border-radius: var(--border-radius); 578 | } 579 | 580 | // Activate community modal 581 | .css-dwar6a-menu { 582 | background-color: var(--background-secondary-alt); 583 | } 584 | 585 | // Server Insights 586 | .error-3AuLwi { 587 | border-radius: var(--border-radius); 588 | } 589 | 590 | // Partner Programme 591 | .featureCard-1RR4Tl, 592 | .checklistContainer-mFJZEJ { 593 | border-radius: var(--border-radius); 594 | } 595 | .checklistHeader-1KWcEY { 596 | border-radius: var(--border-radius) var(--border-radius) 0 0; 597 | } 598 | 599 | // Discovery 600 | .checklist-3Y6Fqp { 601 | border-radius: var(--border-radius); 602 | 603 | .header-2Y0-A- { 604 | border-radius: var(--border-radius) var(--border-radius) 0 0; 605 | } 606 | } 607 | 608 | // Membership Screening 609 | .exampleContainer-2O-nVK { 610 | border-radius: var(--border-radius); 611 | } 612 | 613 | // Welcome Screen 614 | .enableContainer__0945b { 615 | border-radius: var(--border-radius) var(--border-radius) 0 0; 616 | } 617 | .previewContainer_b0f5b4 { 618 | border-radius: 0 0 var(--border-radius) var(--border-radius); 619 | 620 | .welcomeChannel__0122f { 621 | border-radius: var(--border-radius); 622 | } 623 | } 624 | 625 | // Boost status + Nitro tab from user setting 626 | [aria-controls="GUILD_PREMIUM-tab"], 627 | [aria-controls="Discord Nitro-tab"] { 628 | color: var(--background-accent) !important; 629 | background-color: var(--background-modifier-selected) !important; 630 | } 631 | .tierBody__615a1 { 632 | background-color: var(--background-secondary); 633 | } 634 | .tierHeaderContent__27033, 635 | .tierInProgress_f08e8b { 636 | background: var(--background-tertiary); 637 | } 638 | .background__3dd67 { 639 | color: var(--background-secondary-alt); 640 | } 641 | .tierHeader-rlkkJd, 642 | .tierHeaderContent__27033 { 643 | border-radius: var(--border-radius) var(--border-radius) 0 0; 644 | } 645 | .tierBody__615a1 { 646 | border-radius: 0 0 var(--border-radius) var(--border-radius); 647 | } 648 | 649 | // Members 650 | .overflowRolesPopout__88ab9, 651 | .overflowRolesPopoutArrow_f3db31 { 652 | background-color: var(--background-secondary); 653 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 654 | 0 0 0 1px rgba(56, 31, 31, 0.11); 655 | } 656 | } 657 | -------------------------------------------------------------------------------- /selectors.scss: -------------------------------------------------------------------------------- 1 | // the following variables are generated - DO NOT EDIT 2 | $accountProfileCard: '.accountProfileCard_b69b77'; 3 | $accountProfilePopoutWrapper: '[class*="accountProfilePopoutWrapper"]'; 4 | $actionButton: ":is(.actionButton_e4010c, .actionButton_e01b91)"; 5 | $activity: ":is(.activity_a31c43, .activityText_a31c43, .activityEmoji_a31c43, .activityUserPopoutV2_d5089b, .activity_e36233, .activityDetails_d5089b, .activity_c91bad, .activityText_c91bad, .activity_f7ebfd, .activitySection_cd82a7, .activitySectionAssets_cd82a7, .activityCharacterWumpus_dfbe6b, .activityCharacterPhibi_dfbe6b)"; 6 | $activityProfileV2: '[class*="activityProfileV2"]'; 7 | $anchor: ":is(.anchor_af404b, .anchorUnderlineOnHover_af404b)"; 8 | $answer: '.answer_b0286e'; 9 | $app: ":is(.appMount_ea7e65, .appAsidePanelWrapper_bd26cc, .app_bd26cc, .app_a01fb1, .wrapper_fea3ef, .wrapper_fd07a3, .listItemWrapper_dfb2f8, .wrapper_c5f96a, .wrapper_f90abb, .childWrapper_f90abb, .childWrapperNoHoverBg_f90abb, .wrapper_bc7085, .folderIconWrapper_bc7085, .expandedFolderIconWrapper_bc7085, .wrapper_b7c66a, .folderEndWrapper_b7c66a, .closedFolderIconWrapper_bc7085, .wrapperSimple_c5f96a, .wrapper_d8bfb3, .wrapper_a08117, .wrapperCommon_a08117, .wrapper_adcaac, .avatarWrapper_b2ca13, .wrapper_c51b4e, .iconWrapper_e44302, .titleWrapper_e44302, .messagesWrapper_e2e187, .wrapper_cdfd51, .wrapper_b211c6, .wrapper_ec86aa, .embedWrapper_b558d0, .imageWrapper_d4597d, .clickableWrapper_d4597d, .wrapper_bf1b19, .wrapper_ef319f, .attachWrapper_f298d4, .buttonWrapper_cecf00, .cooldownWrapper_d7ebeb, .wrapper_cd22e7, .swipeWrapper_cd22e7, .app-focused, .outerWrapper_fe2299, .wrapper_fe2299, .wrapper_efd8e6, .wrapper_ba23fe, .wrapper_c9d951, .wrapper_a69fe5, .wrapper_e06857, .itemWrapper_fe2299, .wrapper_e18e73, .infoWrapper_e18e73, .usageWrapper_e18e73, .bannerSVGWrapper_b32cc2, .avatarWrapperNormal_f89da9, .avatarWrapper_f89da9, .memberSinceWrapper_b06bc5, .inputWrapper_f8bc55, .wrapperPaused_f316dd, .wrapper_f316dd, .wrapperMediaMosaic_f316dd, .iconWrapper_b26897, .appLauncherOnboardingCommandName_ec86aa, .appsIcon_ec86aa, .richEmbedWrapper_b558d0, .applicationInstallButtonContent_cd1424, .applicationInstallButtonText_cd1424, .buttonsWrapper_bf8eca, .applicationInstallButton_ec3b75, .wrapper_c6ee36, .bodyWrapper_c6ee36, .emojiPickerListWrapper_c6ee36, .listWrapper_a3bc57, .textWrapper_c3120f, .wrapper_cd82a7, .copiableWrapper_e3203d, .childWrapper_e3203d, .hoverIconWrapper_ab876d, .wrapper_f6639d, .imageUploaderIconWrapper_de76e4, .inputWrapper_d7e343, .imageWrapperBackground_d4597d, .wrapper_c8da25, .iconWrapperActive_c8da25, .iconWrapper_c8da25, .spinnerWrapper_b7c924, .wrapperPlaying_f316dd, .mediaBarWrapper_f7877e, .volumeSliderWrapper_f316dd, .mediaBarWrapperVolume_f7877e, .wrapperControlsHidden_f316dd, .drawerSizingWrapper_af5dbb, .contentWrapper_af5dbb, .emojiPickerHasTabWrapper_c6ee36, .wrapper_d8cdac, .wrapper_da9f92, .listWrapper_d8cdac, .wrapper_de4721, .assetWrapper_cb3343, .assetWrapperMasked_cb3343)"; 10 | $autocomplete: ":is(.autocomplete_f23da8, .autocompleteInner_f23da8, .autocompleteRowVertical_f23da8, .autocompleteRow_f23da8, .autocompleteRowHeading_f23da8, .autocompleteRowSubheading_f23da8, .autocompleteRowContentSecondary_f23da8, .autocompleteQuerySymbol_f4e139)"; 11 | $avatar: ":is(.avatarWrapper_b2ca13, .avatar_b2ca13, .avatarStack_c51b4e, .avatar_c51b4e, .avatar_b211c6, .avatar_ec86aa, .avatarDecoration_ec86aa, .avatarContainer_c47562, .avatar_c47562, .avatar_e9f61e, .avatarDecoration_c51b4e, .avatarWrapperNormal_f89da9, .avatarWrapper_f89da9, .avatarPositionNormal_f89da9, .avatarHoverTarget_f89da9, .avatarHint_f89da9, .avatarHintInner_f89da9, .avatarAndTextContainer_f005b2, .avatars_ccc074, .avatar_ccc074, .avatar_ec3b75, .vc-typing-indicator-avatars, .avatarWithText_c91bad, .avatar_f9647d, .avatar_a7d72e, .avatar_f3939d, .avatar_b69b77, .avatarUploaderNormal_ab876d, .avatarUploader_ab876d, .avatarUploaderInner_ab876d, .avatarUploaderPremium_ab876d, .avatarContainer_dc0b54, .avatar_dc0b54)"; 12 | $avatarHint: ":is(.avatarHint_f89da9, .avatarHintInner_f89da9)"; 13 | $avatarUploader: ":is(.avatarUploaderNormal_ab876d, .avatarUploader_ab876d, .avatarUploaderInner_ab876d, .avatarUploaderPremium_ab876d)"; 14 | $avatarWrapper: ":is(.avatarWrapper_b2ca13, .avatarWrapperNormal_f89da9, .avatarWrapper_f89da9)"; 15 | $avatarWrapperNormal: '.avatarWrapperNormal_f89da9'; 16 | $background: ":is(.background_ae3c77, .background_b69b77, .background_c6d722, .custom-theme-background)"; 17 | $badgeList: ":is(.badgeList_ec3b75, .badgeList_b69b77)"; 18 | $banner: ":is(.bannerImage_fd6364, .bannerImg_fd6364, .bannerSVGWrapper_b32cc2, .banner_c3e427, .bannerPremium_c3e427, .bannerNormal_ab876d, .banner_ab876d, .bannerNitroUpsell_ab876d, .bannerNitroUpsellText_ab876d, .bannerUploader_ab876d, .bannerUploaderInnerSquare_ab876d)"; 19 | $bannerSVGWrapper: '.bannerSVGWrapper_b32cc2'; 20 | $baseLayout: '.baseLayout_bad983'; 21 | $bg: ":is(.bg_d4b6c5, .bgScale_f82cc7)"; 22 | $body: ":is(.body_c4a579, .body_b9fccc, .bodyNormal_d5089b, .body_d5089b, .bodyWrapper_c6ee36, .body_cd82a7, .body_ab876d)"; 23 | $botTagRegular: '.botTagRegular_a02df3'; 24 | $button: ":is(.vc-ranb-button, .button_dd4f85, .button_a79c58, .button_f67531, .buttonContainer_ec86aa, .buttons_d5deea, .buttonsInner_d5deea, .button_ef319f, .buttons_d0696b, .expression-picker-chat-input-button, .buttonContainer_d0696b, .vc-chatbar-button, .button_cecf00, .button_d0696b, .buttonWrapper_cecf00, .button_f1cdcc, .buttonInner_f1cdcc, .vc-pip-button, .buttonsContainer_b709ea, .button_b709ea, .buttonsWrapper_bf8eca, .buttons_de3e42, .button_de3e42, .buttonText_af971d, .buttonShine_a669f8, .buttonContainer_adabdf, .buttonsContainer_be2933, .buttonsContainer_b5c67e, .buttonsContainer_dbbd43, .button_dfbe6b, .buttonColor_dfbe6b, .buttonsContainer_a611c9, .vc-plugins-info-button, .buttonsContainer_ffd0c0, .buttonsContainer_ddc613, .button_ddc613)"; 25 | $calendarPicker: '.calendarPicker_be05cd'; 26 | $categoryHeader: '.categoryHeader_fe2299'; 27 | $channelTextArea: ":is(.channelTextAreaContainer_d0696b, .channelTextArea_a7d72e, .channelTextArea_d0696b, .channelTextArea_d5deea)"; 28 | $chat: ":is(.chat_a7d72e, .chatContent_a7d72e, .expression-picker-chat-input-button, .vc-chatbar-button)"; 29 | $chatContent: '.chatContent_a7d72e'; 30 | $chatLayerWrapper: '[class*="chatLayerWrapper"]'; 31 | $children: ":is(.children_a08117, .children_d8bfb3, .children_e44302, .children_a6ae9b)"; 32 | $circleIconButton: '.circleIconButton_db6521'; 33 | $clickTarget: '.clickTarget_e3203d'; 34 | $closeButton: ":is(.closeButton_c91bad, .closeButton_df5532)"; 35 | $connectedAccount: ":is(.connectedAccounts_f3eb60, .connectedAccountsColumn_f3eb60, .connectedAccountContainer_f3eb60, .connectedAccount_f3eb60, .connectedAccountIcon_f3eb60, .connectedAccountNameContainer_f3eb60, .connectedAccountName_f3eb60, .connectedAccountNameTextContainer_f3eb60, .connectedAccountNameText_f3eb60, .connectedAccountVerifiedIcon_f3eb60, .connectedAccountOpenIcon_f3eb60, .connectedAccountContainerWithMetadata_f3eb60, .connectedAccountChildren_f3eb60, .connectedAccountVanityMetadata_a1f026)"; 36 | $connectedAccountChildren: '.connectedAccountChildren_f3eb60'; 37 | $connectedAccountContainer: ":is(.connectedAccountContainer_f3eb60, .connectedAccountContainerWithMetadata_f3eb60)"; 38 | $connectedAccountIcon: '.connectedAccountIcon_f3eb60'; 39 | $connectedAccountNameContainer: '.connectedAccountNameContainer_f3eb60'; 40 | $connectedAccountNameTextContainer: '.connectedAccountNameTextContainer_f3eb60'; 41 | $connectedAccounts: ":is(.connectedAccounts_f3eb60, .connectedAccountsColumn_f3eb60)"; 42 | $container: ":is(.container_a4d4d9, .container_ee69e0, .container_fd6364, .container_fa295b, .container_eba0ba, .containerPadding_eba0ba, .containerDefault_f6f816, .containerDefault_a08117, .container_cc72c1, .container_e1e976, .container_b2ca13, .container_e44302, .container_b558d0, .container_a3b500, .container_c47562, .container_cbd271, .container_e9f61e, .erd_scroll_detection_container, .erd_scroll_detection_container_animation_active, .containerTop_b18d5c, .containerWithContent_b64375, .container_b64375, .container_c9ccf6, .container_afed89, .container_c10249, .container_f4e139, .container_effbe2, .container_eedf95, .react-datepicker__month-container, .container_b15955, .container_ad9cbd, .container_c2739c, .container_c18ec9, .container_bf550a, .container_e5a42d, .container_df5532, .container_da1432, .container_ed1d57, .container_cebd1c, .vc-addon-title-container, .container_f0fccd, .container_f8b740, .container_c2668b, .container_e62b38, .container_ddc613, .container_f13432, .container_dc0b54, .container_c30bea, .container_b56bbc, .container_e41913, .container_af1167)"; 43 | $content: ":is(.contents_dd4f85, .content_a4d4d9, .content_eed6a8, .content_cc29d1, .public-DraftEditor-content, .content_a7d72e, .content_c49869, .contents_b211c6, .content_b211c6, .content_fc5f50, .contents_ec86aa, .content_e9f61e, .contentNoImagesUserPopoutV2_d5089b, .content_d5089b, .contentDefault_f14193, .content_f14193, .contentUnread_f14193, .content_f9647d, .contentRegion_c25c6d, .contentTransitionWrap_c25c6d, .contentRegionScroller_c25c6d, .contentRegionShownSidebar_c25c6d, .contentColumn_c25c6d, .contentColumnDefault_c25c6d, .contentColumnWide_c25c6d, .content_e62b38, .contentWrapper_af5dbb, .content_b56bbc)"; 44 | $contentColumn: ":is(.contentColumn_c25c6d, .contentColumnDefault_c25c6d, .contentColumnWide_c25c6d)"; 45 | $contentRegion: ":is(.contentRegion_c25c6d, .contentRegionScroller_c25c6d, .contentRegionShownSidebar_c25c6d)"; 46 | $cooldownWrapper: '.cooldownWrapper_d7ebeb'; 47 | $copiableNameTag: '[class*="copiableNameTag"]'; 48 | $datePicker: ":is(.datePicker_b0286e, .datePickerHint_b0286e, .datePicker_b71016)"; 49 | $datePickerHint: '.datePickerHint_b0286e'; 50 | $discrimBase: '.discrimBase_c9ccf6'; 51 | $divider: ":is(.divider_e44302, .divider_d5deea, .divider_fc5f50, .divider_ae36e5, .divider_d2b491, .divider_b06bc5, .divider_d37396, .divider_b03b7f, .divider_de3e42, .dividerDefault_ed1d57, .divider_ffd0c0, .divider_d8d11a, .divider_dc0b54)"; 52 | $embedFull: '.embedFull_ad0b71'; 53 | $embedWrapper: '.embedWrapper_b558d0'; 54 | $emojiItem: ":is(.emojiItem_fbfedd, .emojiItemMedium_fbfedd, .emojiItemSelected_fbfedd)"; 55 | $emojiItemSelected: '.emojiItemSelected_fbfedd'; 56 | $focusLock: '.focusLock_f9a4c9'; 57 | $focused: ":is(.app-focused, .focused_a46bef, .focused_d90b3d)"; 58 | $folder: ":is(.folder_bc7085, .folderIconWrapper_bc7085, .folderEndWrapper_b7c66a, .folderTarget_b7c66a)"; 59 | $footer: ":is(.footer_ad9cbd, .footerGap_ad9cbd)"; 60 | $form: ":is(.platform-web, .vc-platform-indicator, .form_a7d72e, .formattedSize_ad9cbd, .formText_b89ec7)"; 61 | $grid: ":is(.gridContainer_ad0b71, .grid_ad0b71, .vc-plugins-grid)"; 62 | $guilds: '.guilds_a4d4d9'; 63 | $header: ":is(.header_fd6364, .headerContent_fd6364, .headerButton_fd6364, .headerChildren_fd6364, .header_b211c6, .header_ec86aa, .headerText_ec86aa, .header_e06857, .headerIcon_e06857, .headerLabel_e06857, .vc-expandableheader-center-flex, .vc-expandableheader-btn, .header_ec3b75, .headerTop_ec3b75, .headerBotTagWithNickname_c9ccf6, .headerContainer_d5089b, .headerTextNormal_d5089b, .headerText_d5089b, .header_f14193, .header_c6ee36, .header_a3bc57, .headerCollapseIcon_e06857, .header_b0286e, .react-datepicker__header, .react-datepicker__header__dropdown, .react-datepicker__header__dropdown--scroll, .headerText_c47fa9, .header_bf550a, .headerFull_cd82a7, .header_cd82a7, .headerAvatar_cd82a7, .headerIcon_cd82a7, .header_a0, .headerText_a0, .vc-addon-header, .header_c2668b, .header_d8cdac, .header_b56bbc)"; 64 | $headerTop: '.headerTop_ec3b75'; 65 | $hidden: ":is(.hiddenVisually_a98a7c, .hiddenMembers_cbd271, .hidden_a3d0f7)"; 66 | $hintValue: '.hintValue_b0286e'; 67 | $icon: ":is(.icon_f90abb, .icon_f11207, .iconSizeSmol_f11207, .iconInactive_f11207, .iconContainer_d8bfb3, .icon_d8bfb3, .iconVisibility_a08117, .icon_a08117, .iconVisibility_f6f816, .iconItem_f6f816, .iconBase_f6f816, .iconNoChannelInfo_f6f816, .iconWithChannelInfo_f6f816, .icons_f82cc7, .icon_f82cc7, .iconWrapper_e44302, .icon_e44302, .icon_f542fc, .iconBadge_e44302, .icon_a46bef, .iconLayout_effbe2, .iconContainer_effbe2, .icon_effbe2, .icon_ec6b19, .icon_a14cf7, .icon_a3b500, .icon_ad923e, .icon_a31c43, .icon_c9d951, .icon_a69fe5, .iconSizeMedium_f11207, .iconActiveMedium_f11207, .iconWrapper_b26897, .icon_b26897, .iconBackgroundTierNone_d4a69b, .iconTierNone_d4a69b, .iconContainer_f14193, .icon_f14193, .icon_de3e42, .icon_d1ac9b, .react-datepicker__navigation-icon, .react-datepicker__navigation-icon--previous, .icon_bf515c, .icon_edc433, .iconLayout_c18ec9, .iconContainer_c18ec9, .icon_c18ec9, .icon_e01b91, .iconActiveSmol_f11207, .icons_f6639d, .iconsContainer_f6639d, .vc-info-icon, .vc-icon, .iconContainer_e62b38, .icon_e62b38, .iconSize_e62b38, .iconWrapperActive_c8da25, .iconWrapper_c8da25, .iconPlay_c8da25, .icon_c8da25, .iconExternalMargins_c8da25, .iconCaret_b48941)"; 68 | $iconContainer: ":is(.iconContainer_d8bfb3, .iconContainer_effbe2, .iconContainer_f14193, .iconContainer_c18ec9, .iconContainer_e62b38)"; 69 | $imageLoading: '.imageLoading_b000dd'; 70 | $imageUploaderIcon_: '.imageUploaderIcon_de76e4'; 71 | $imageUploaderInner: '.imageUploaderInner_de76e4'; 72 | $input_: ":is(.input_f8bc55, .input_df4dd0, .input_f4e139, .input_effbe2, .input_c18ec9, .input_cebd1c, .input_f8b740)"; 73 | $inset: '.inset_c0f6a6'; 74 | $interactive: ":is(.interactive, .interactive_e06857, .interactive_f5eb4b, .interactive_c91bad, .interactiveSelected_c91bad, .interactive_c0f6a6)"; 75 | $itemCard: '.itemCard_f02fcf'; 76 | $jumpToPresentBar: '[class*="jumpToPresentBar"]'; 77 | $keybind: '.keybind_df5532'; 78 | $layer: ":is(.layers_d4b6c5, .layers_a01fb1, .layer_d4b6c5, .layerContainer_cd0de5, .layer_cd0de5, .layer_c9e2da)"; 79 | $layers: ":is(.layers_d4b6c5, .layers_a01fb1)"; 80 | $layout: ":is(.layout_e9f61e, .layout_f9647d)"; 81 | $list: ":is(.listItem_c96c45, .listItemWrapper_dfb2f8, .vc-membercount-member-list, .list_efd8e6, .listItems_dcade6, .listHeight_dcade6, .list_fe2299, .listScroller_e4be58, .listRow_e4be58, .listAvatar_e4be58, .listName_e4be58, .listRowContent_e4be58, .listItemTooltip_bba834, .listWrapper_a3bc57, .list_a3bc57, .listItemTooltip_dfb2f8, .listItemContents_e05dae, .listWrapper_d8cdac)"; 82 | $mainCard: '[class*="mainCard"]'; 83 | $member: ":is(.membersWrap_cbd271, .members_cbd271, .vc-membercount-widget, .vc-membercount-member-list, .vc-membercount-online-dot, .vc-membercount-online, .vc-membercount-total-dot, .vc-membercount-total, .membersGroup_cbd271, .member_a31c43, .member_cbd271, .memberInner_a31c43, .memberSinceWrapper_b06bc5, .memberSince_b06bc5, .vc-membercount-tooltip)"; 84 | $memberInner: '.memberInner_a31c43'; 85 | $memberListContainer: '[class*="chatContent"] + [class*="container"]'; 86 | $members: ":is(.membersWrap_cbd271, .members_cbd271, .membersGroup_cbd271)"; 87 | $membersWrap: '.membersWrap_cbd271'; 88 | $messageContent: '.messageContent_ec86aa'; 89 | $message_: ":is(.message_d5deea, .message_ddc613)"; 90 | $messagesPopoutWrap: '[class*="messagesPopoutWrap"]'; 91 | $mutualFriendsList: '[class*="mutualFriendsList"]'; 92 | $mutualGuildsList: '[class*="mutualGuildsList"]'; 93 | $nameTag: ":is(.nameTag_b2ca13, .nameTag_afed89, .nameTagSmall_afed89, .nameTag_be84f0)"; 94 | $newMessagesBar: '.newMessagesBar_cf58b5'; 95 | $nowPlayingColumn: '.nowPlayingColumn_c2739c'; 96 | $open: ":is(.open_a46bef, .openFullPreviewSection_ad9cbd)"; 97 | $option: ":is(.option_bea3ee, .option_e18e73, .optionals_e18e73, .optionalCount_e18e73, .option_b0286e)"; 98 | $outer: ":is(.outerWrapper_fe2299, .outer_c0f6a6, .outer_f8b740)"; 99 | $pageControl: ":is(.pageControlContainer_b48941, .pageControl_b48941)"; 100 | $panels: '.panels_a4d4d9'; 101 | $peopleColumn: '.peopleColumn_c2739c'; 102 | $peopleListItem: '.peopleListItem_d51464'; 103 | $popout: '.popoutBanner_c3e427'; 104 | $preview: ":is(.drag-previewer, .preview_bad983)"; 105 | $privateChannels: ":is(.privateChannels_f0963d, .privateChannelsHeaderContainer_c47fa9)"; 106 | $profileBadges: '.profileBadges_f89da9'; 107 | $profileCustomizationPreview: ":is(.profileCustomizationPreviewWithoutTheme_ab876d, .profileCustomizationPreview_ab876d, .profileCustomizationPreviewWithTheme_ab876d)"; 108 | $profileCustomizationSection: '.profileCustomizationSection_bad983'; 109 | $profilePanel: '[class*="profilePanel"]'; 110 | $profilePanelConnections: '[class*="profilePanelConnections"]'; 111 | $pronouns: ":is(.pronouns_c9ccf6, .pronouns_afed89)"; 112 | $queryContainer: '[class*="queryContainer"]'; 113 | $reaction: ":is(.reactions_ec6b19, .reaction_ec6b19, .reactionInner_ec6b19, .reactionCount_ec6b19, .reactionBtn_ec6b19)"; 114 | $reactionSelected: '[class*="reactionSelected"]'; 115 | $reactionTooltip: '[class*="reactionTooltip"]'; 116 | $reactions: '.reactions_ec6b19'; 117 | $reactorDefault: '[class*="reactorDefault"]'; 118 | $reactors: '[class*="reactors"]'; 119 | $repliedMessage: '.repliedMessage_ec86aa'; 120 | $resultsGroup: '.resultsGroup_b0286e'; 121 | $root: ":is(.DraftEditor-root, .public-DraftEditorPlaceholder-root, .root_e4010c, .root_b9fccc, .root_f9a4c9, .rootWithShadow_f9a4c9)"; 122 | $scroller: ":is(.scroller_fea3ef, .scrollerBase_c49869, .scroller_c43953, .scrollerBase_eed6a8, .scroller_e2e187, .scrollerContent_e2e187, .scrollerInner_e2e187, .scrollerSpacer_e2e187, .scroller_dcade6, .scroller_d2b491, .scroller_f4e139, .scroller_c47fa9, .scroller_bf550a, .scroller_c2b47d, .scroller_d90b3d)"; 123 | $scrollerContent: '.scrollerContent_e2e187'; 124 | $search: ":is(.search_ff5f90, .search_a46bef, .searchBar_a46bef, .searchBar_c6ee36, .searchLearnMore_b0286e, .searchOption_b0286e, .searchFilter_b0fa94, .searchBar_f0963d, .searchBarComponent_f0963d, .searchBar_e0840f, .searchable_f6639d, .searchInput_f6639d, .searchAnswer_b0fa94, .searchResultsWrap_c2b47d, .searchHeader_b7c924, .searchHeaderTabList_b7c924, .searchResultGroup_a9e225, .searchResult_ddc613, .searchBar_b56bbc)"; 125 | $searchAnswer: '.searchAnswer_b0fa94'; 126 | $searchBar: ":is(.searchBar_a46bef, .searchBar_c6ee36, .searchBar_f0963d, .searchBarComponent_f0963d, .searchBar_e0840f, .searchBar_b56bbc)"; 127 | $searchFilter: '.searchFilter_b0fa94'; 128 | $searchHeader: ":is(.searchHeader_b7c924, .searchHeaderTabList_b7c924)"; 129 | $searchLearnMore: '.searchLearnMore_b0286e'; 130 | $searchResultGroup: '.searchResultGroup_a9e225'; 131 | $searchResultsWrap: '.searchResultsWrap_c2b47d'; 132 | $section: ":is(.sectionDivider_c43953, .section_efd8e6, .section_d7a21f, .section_f2c0a8, .sectionTitle_e0840f, .section_cd82a7, .sectionTitle_a6ae9b, .sectionsContainer_b45d91, .sectionDescription_b3a5c2, .sectionContainer_cf715d, .section_c95253, .sectionsContainer_e466c8)"; 133 | $select: ":is(.selected_a5ad63, .selected_f90abb, .selected_f6f816, .selected_e44302, .selectable_c9d951, .selected_c9d951, .selectable_a69fe5, .selected_d5deea, .selected_a0, .selected_ef319f, .react-datepicker__day--selected, .selected_e9f61e, .selected_dfb2f8, .selected_f5eb4b, .hljs-selector-id, .hljs-selector-pseudo, .select_f6639d)"; 134 | $selected: ":is(.selected_a5ad63, .selected_f90abb, .selected_f6f816, .selected_e44302, .selected_c9d951, .selected_d5deea, .selected_a0, .selected_ef319f, .react-datepicker__day--selected, .selected_e9f61e, .selected_dfb2f8, .selected_f5eb4b)"; 135 | $sidebar: ":is(.sidebar_a4d4d9, .sidebarRegion_c25c6d, .sidebarRegionScroller_c25c6d, .sidebar_c25c6d)"; 136 | $sidebarRegion: ":is(.sidebarRegion_c25c6d, .sidebarRegionScroller_c25c6d)"; 137 | $sidebarRegionScroller: '.sidebarRegionScroller_c25c6d'; 138 | $small: ":is(.small_effbe2, .small_f9a4c9, .smallImage_cd82a7)"; 139 | $spoilerText: '[class*="spoilerText"]'; 140 | $standardSidebarView: '.standardSidebarView_c25c6d'; 141 | $status: ":is(.status_ab876d, .statusDot_ab876d)"; 142 | $subtitleContainer: '.subtitleContainer_a7d72e'; 143 | $tab: ":is(.selectable_c9d951, .selectable_a69fe5, .tabBarContainer_b9fccc, .tabBar_b9fccc, .tabBarItem_b9fccc, .tabBar_c2739c, .tabBody_c2739c, .tabBarItemContainer_e7c031, .tabBar_bff66b, .tabBarItem_bff66b)"; 144 | $tabBar: ":is(.tabBarContainer_b9fccc, .tabBar_b9fccc, .tabBarItem_b9fccc, .tabBar_c2739c, .tabBarItemContainer_e7c031, .tabBar_bff66b, .tabBarItem_bff66b)"; 145 | $tabBarContainer: '.tabBarContainer_b9fccc'; 146 | $tabBarItem: ":is(.tabBarItem_b9fccc, .tabBarItemContainer_e7c031, .tabBarItem_bff66b)"; 147 | $tabBody: '.tabBody_c2739c'; 148 | $title: ":is(.title_d1da5f, .title_f82cc7, .subtitleContainer_a7d72e, .title_a7d72e, .titleWrapper_e44302, .title_e44302, .title_e18e73, .title_c4a579, .subtitle_d8bfb3, .titlePrimary_c3120f, .hljs-title, .title_a1cafe, .title_c46f6a, .title_da1432, .title_b3a5c2, .title_ed1d57, .vc-addon-title-container, .vc-addon-title, .title_d8d11a, .titleSecondary_c3120f)"; 149 | $toolbar: ":is(.toolbar_e44302, .toolbar_de3e42)"; 150 | $topSection: '.topSection_b9fccc'; 151 | $totalResults: '.totalResults_b7c924'; 152 | $upperContainer: '.upperContainer_e44302'; 153 | $userInfo: ":is(.userInfoSection_a24910, .userInfoSectionHeader_a24910, .userInfoText_a24910, .userInfo_f3939d, .userInfo_b69b77)"; 154 | $userInfoSection: ":is(.userInfoSection_a24910, .userInfoSectionHeader_a24910)"; 155 | $userPanelInner: '[class*="userPanelInner"]'; 156 | $userPanelOverlayBackground: '[class*="userPanelOverlayBackground"]'; 157 | $userPopoutInner: '.userPopoutInner_c69a7b'; 158 | $userPopoutOuter: '.userPopoutOuter_c69a7b'; 159 | $userPopoutOverlayBackground: '.userPopoutOverlayBackground_c69a7b'; 160 | $userProfileModalOverlayBackground: '.userProfileModalOverlayBackground_c69a7b'; 161 | $userTagNoNickname: '[class*="userTagNoNickname"]'; 162 | $userText: '.userText_c9ccf6'; 163 | $wrapper: ":is(.wrapper_fea3ef, .wrapper_fd07a3, .wrapper_c5f96a, .wrapper_f90abb, .wrapper_bc7085, .wrapper_b7c66a, .wrapperSimple_c5f96a, .wrapper_d8bfb3, .wrapper_a08117, .wrapperCommon_a08117, .wrapper_adcaac, .wrapper_c51b4e, .wrapper_cdfd51, .wrapper_b211c6, .wrapper_ec86aa, .wrapper_bf1b19, .wrapper_ef319f, .wrapper_cd22e7, .wrapper_fe2299, .wrapper_efd8e6, .wrapper_ba23fe, .wrapper_c9d951, .wrapper_a69fe5, .wrapper_e06857, .wrapper_e18e73, .wrapperPaused_f316dd, .wrapper_f316dd, .wrapperMediaMosaic_f316dd, .wrapper_c6ee36, .wrapper_cd82a7, .wrapper_f6639d, .wrapper_c8da25, .wrapperPlaying_f316dd, .wrapperControlsHidden_f316dd, .wrapper_d8cdac, .wrapper_da9f92, .wrapper_de4721)"; 164 | $app1: '.app_bd26cc'; 165 | $app2: '.app_a01fb1'; 166 | $layers: ":is(.layers_d4b6c5, .layers_a01fb1)"; 167 | $bg: ":is(.bg_d4b6c5, .bgScale_f82cc7)"; 168 | 169 | --------------------------------------------------------------------------------