├── .gitignore ├── README.md ├── clients ├── compact-userarea.theme.css ├── compact-userarea.user.css └── metas │ ├── betterdiscord.json │ └── userstyle.json ├── package.json ├── pnpm-lock.yaml ├── src ├── base │ └── animations.scss ├── components │ ├── container │ │ ├── avatar.scss │ │ ├── buttons.scss │ │ ├── index.scss │ │ └── name-tag.scss │ ├── os-position.scss │ ├── panel.scss │ └── profile-popout.scss ├── source.css └── source.scss └── theme-config.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![banner](https://discord-extensions.github.io/assets/banners/compact-userarea.png) 2 | 3 | --- 4 | ### ![betterdiscord](https://discord-extensions.github.io/assets/icons/betterdiscord.png) **[BetterDiscord](https://betterdiscord.app)** 5 | Download information coming soon:tm:. Attempting to get it published on the site before I provide anything. 6 | 7 | ### ![vencord](https://discord-extensions.github.io/assets/icons/vencord.gif) **[Vencord](https://github.com/Vendicated/Vencord)** 8 | #### From URL 9 | 1. Go to user settings (CTRL + ,) 10 | 2. Go to the "Vencord" category in user settings (CTRL + ,), select the "Themes" tab, then select "Online Themes". 11 | 3. In the input field under "ONLINE THEMES" paste the following URL (if you have some here already, add a comma before the url). 12 | ``` 13 | https://discord-extensions.github.io/compact-userarea/src/source.css 14 | ``` 15 | 16 | ### ![stylus](https://discord-extensions.github.io/assets/icons/stylus.png) **Stylus** 17 | 1. Install the browser extensions for your respective browser. 18 | - [Chrome Webstore](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) 19 | - [Firefox Addons](https://addons.mozilla.org/en-US/firefox/addon/styl-us) 20 | 2. Once installed, open [this link](https://discord-extensions.github.io/compact-userea/clients/compact-userea.user.css) in a new browser tab. This opens the page where you will install this userstyle. 21 | 3. Press the `Install Style` button. 22 | 23 | --- 24 | 25 | ### Why is the avatar low quality? 26 | Discord uses a 32x32 image for the userarea avatar. Since it's being resized to 48x48, it looks low quality because it's not the correct size for the image. If this is something that constantly bothers you, there is an override variable that you can provide a url to. Note that you will have to update it everytime you update your avatar, but this is the best possible fix I have for it. 27 | ```css 28 | :root { 29 | --avatar-source-override: url('YOUR_AVATAR_URL'); 30 | } 31 | ``` 32 | 33 | ### Where is my avatar decoration? 34 | Avatar decorations will not display for the time being. I do have a way to upscale all of them to look correct, however I need a URL to every single avatar decoration. Expect this in a future update. 35 | 36 | --- 37 | 38 | ### License 39 | This theme is licensed under the MIT license. Please refer to the [LICENSE](./LICENSE) file for more details regarding rights and limitations. 40 | 41 | ### Support 42 | If you've ran into an issue with an area being unthemed, **PLEASE REPORT IT IN AN ISSUE**. If you have some other issue you need help with, feel free to join my [support server](https://discord.gg/vYdXbEzqDs). -------------------------------------------------------------------------------- /clients/compact-userarea.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Compact Userarea 3 | * @author LuckFire 4 | * @description A compact, better looking, top-left user area. 5 | * @version 2.0.1 6 | * @invite vYdXbEzqDs 7 | * @authorId 399416615742996480 8 | * @source https://github.com/discord-extensions/compact-userarea 9 | * @updateUrl https://github.com/discord-extensions/compact-userarea/blob/main/clients/compact-userarea.theme.css 10 | */ 11 | 12 | @import url("https://discord-extensions.github.io/compact-userarea/src/source.css"); 13 | 14 | @keyframes top-bottom { 15 | 0% { 16 | opacity: 0; 17 | transform: translateY(-5px); 18 | } 19 | 100% { 20 | opacity: 1; 21 | transform: none; 22 | } 23 | } 24 | @keyframes left-right { 25 | 0% { 26 | opacity: 0; 27 | transform: translateX(-4px); 28 | } 29 | 100% { 30 | opacity: 1; 31 | transform: none; 32 | } 33 | } 34 | @keyframes right-left { 35 | 0% { 36 | opacity: 1; 37 | transform: none; 38 | } 39 | 100% { 40 | opacity: 0; 41 | transform: translateX(-4px); 42 | } 43 | } 44 | .platform-win .container_b2ca13 { 45 | top: 30px !important; 46 | } 47 | .platform-win .guilds_a4d4d9 { 48 | margin-top: 72px; 49 | } 50 | 51 | .platform-osx .container_b2ca13 { 52 | top: 30px !important; 53 | } 54 | .platform-osx .guilds_a4d4d9 { 55 | margin-top: 66px; 56 | } 57 | 58 | .platform-linux .container_b2ca13 { 59 | top: 8px !important; 60 | } 61 | .platform-linux .guilds_a4d4d9 { 62 | margin-top: 64px; 63 | } 64 | 65 | .platform-web .container_b2ca13 { 66 | top: 8px !important; 67 | } 68 | .platform-web .guilds_a4d4d9 { 69 | margin-top: 64px; 70 | } 71 | 72 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 { 73 | --avatar-size: 48px; 74 | position: relative; 75 | min-width: unset; 76 | padding: unset; 77 | margin: unset; 78 | } 79 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13:hover { 80 | background-color: transparent; 81 | } 82 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 { 83 | width: var(--avatar-size) !important; 84 | height: var(--avatar-size) !important; 85 | } 86 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13::after { 87 | content: ""; 88 | display: block; 89 | position: relative; 90 | pointer-events: none; 91 | top: calc(100% + 8px); 92 | width: calc(100% - 16px); 93 | height: 2px; 94 | margin: auto; 95 | border-radius: 1px; 96 | background-color: var(--background-modifier-accent); 97 | } 98 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e { 99 | width: var(--avatar-size) !important; 100 | height: var(--avatar-size) !important; 101 | } 102 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e > foreignObject { 103 | mask-image: url("#svg-mask-avatar-status-round-48"); 104 | width: 100%; 105 | height: 100%; 106 | } 107 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e .avatarStack_c51b4e { 108 | content: var(--avatar-source-override, ""); 109 | } 110 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .pointerEvents_c51b4e { 111 | x: 30px; 112 | y: 30px; 113 | } 114 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) { 115 | overflow: unset; 116 | } 117 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) > rect { 118 | height: 25px !important; 119 | } 120 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) > mask > rect { 121 | x: 15px; 122 | y: 13px; 123 | } 124 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatarDecoration_c51b4e { 125 | display: none; 126 | } 127 | 128 | #app-mount .container_b2ca13 .flex_bba380 { 129 | opacity: 0; 130 | position: relative; 131 | align-items: center; 132 | pointer-events: none; 133 | height: 40px; 134 | padding: 4px; 135 | padding-right: 6px; 136 | border-top-right-radius: 5px; 137 | border-bottom-right-radius: 5px; 138 | background-color: var(--background-floating); 139 | } 140 | 141 | #app-mount .container_b2ca13 .nameTag_b2ca13 { 142 | display: flex; 143 | flex-direction: column; 144 | justify-content: center; 145 | width: 75px; 146 | max-width: 75px; 147 | height: 40px; 148 | padding: 4px; 149 | padding-left: 10px; 150 | margin: 0; 151 | margin-left: 20px; 152 | opacity: 0; 153 | pointer-events: none; 154 | border-top-left-radius: 5px; 155 | border-bottom-left-radius: 5px; 156 | background-color: var(--background-floating); 157 | } 158 | #app-mount .container_b2ca13 .nameTag_b2ca13::before { 159 | content: ""; 160 | position: absolute; 161 | top: calc(50% - 4px); 162 | width: 0; 163 | height: 0; 164 | margin-left: -20px; 165 | border: 5px solid transparent; 166 | border-top-color: var(--background-floating); 167 | border-left-width: 5px; 168 | transform: rotate(90deg); 169 | } 170 | #app-mount .container_b2ca13 .nameTag_b2ca13 .forceHover_c0d6c6 .default_c0d6c6 { 171 | transform: none; 172 | opacity: 1; 173 | } 174 | #app-mount .container_b2ca13 .nameTag_b2ca13 .forceHover_c0d6c6 .hovered_c0d6c6 { 175 | transform: none !important; 176 | opacity: 0; 177 | } 178 | 179 | #app-mount .panels_a4d4d9 { 180 | z-index: 0; 181 | } 182 | #app-mount .panels_a4d4d9 .container_b2ca13 { 183 | position: fixed; 184 | display: flex; 185 | flex-direction: row; 186 | left: 12px; 187 | padding: 0; 188 | background: transparent !important; 189 | } 190 | #app-mount .panels_a4d4d9 .container_b2ca13::before { 191 | opacity: 0; 192 | content: ""; 193 | position: absolute; 194 | left: 68px; 195 | width: calc(100% - 68px); 196 | height: calc(100% - 12px); 197 | border-radius: 5px; 198 | box-shadow: var(--elevation-high); 199 | } 200 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover), #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover), #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) { 201 | z-index: 1004; 202 | } 203 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .flex_bba380, 204 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .nameTag_b2ca13, 205 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .container_b2ca13::before, #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .flex_bba380, 206 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .nameTag_b2ca13, 207 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .container_b2ca13::before, #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .flex_bba380, 208 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .nameTag_b2ca13, 209 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .container_b2ca13::before { 210 | opacity: 1; 211 | pointer-events: all; 212 | } -------------------------------------------------------------------------------- /clients/compact-userarea.user.css: -------------------------------------------------------------------------------- 1 | @-moz-document domain("discord.com") { 2 | /* ==UserStyle== 3 | @name Compact Userarea 4 | @author LuckFire 5 | @description A compact, better looking, top-left user area. 6 | @version 2.0.1 7 | @namespace https://github.com/discord-extensions/compact-userarea 8 | @license MIT 9 | ==/UserStyle== */ 10 | 11 | @import url("https://discord-extensions.github.io/compact-userarea/src/source.css"); 12 | 13 | @keyframes top-bottom { 14 | 0% { 15 | opacity: 0; 16 | transform: translateY(-5px); 17 | } 18 | 100% { 19 | opacity: 1; 20 | transform: none; 21 | } 22 | } 23 | @keyframes left-right { 24 | 0% { 25 | opacity: 0; 26 | transform: translateX(-4px); 27 | } 28 | 100% { 29 | opacity: 1; 30 | transform: none; 31 | } 32 | } 33 | @keyframes right-left { 34 | 0% { 35 | opacity: 1; 36 | transform: none; 37 | } 38 | 100% { 39 | opacity: 0; 40 | transform: translateX(-4px); 41 | } 42 | } 43 | .platform-win .container_b2ca13 { 44 | top: 30px !important; 45 | } 46 | .platform-win .guilds_a4d4d9 { 47 | margin-top: 72px; 48 | } 49 | 50 | .platform-osx .container_b2ca13 { 51 | top: 30px !important; 52 | } 53 | .platform-osx .guilds_a4d4d9 { 54 | margin-top: 66px; 55 | } 56 | 57 | .platform-linux .container_b2ca13 { 58 | top: 8px !important; 59 | } 60 | .platform-linux .guilds_a4d4d9 { 61 | margin-top: 64px; 62 | } 63 | 64 | .platform-web .container_b2ca13 { 65 | top: 8px !important; 66 | } 67 | .platform-web .guilds_a4d4d9 { 68 | margin-top: 64px; 69 | } 70 | 71 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 { 72 | --avatar-size: 48px; 73 | position: relative; 74 | min-width: unset; 75 | padding: unset; 76 | margin: unset; 77 | } 78 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13:hover { 79 | background-color: transparent; 80 | } 81 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 { 82 | width: var(--avatar-size) !important; 83 | height: var(--avatar-size) !important; 84 | } 85 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13::after { 86 | content: ""; 87 | display: block; 88 | position: relative; 89 | pointer-events: none; 90 | top: calc(100% + 8px); 91 | width: calc(100% - 16px); 92 | height: 2px; 93 | margin: auto; 94 | border-radius: 1px; 95 | background-color: var(--background-modifier-accent); 96 | } 97 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e { 98 | width: var(--avatar-size) !important; 99 | height: var(--avatar-size) !important; 100 | } 101 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e > foreignObject { 102 | mask-image: url("#svg-mask-avatar-status-round-48"); 103 | width: 100%; 104 | height: 100%; 105 | } 106 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e .avatarStack_c51b4e { 107 | content: var(--avatar-source-override, ""); 108 | } 109 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .pointerEvents_c51b4e { 110 | x: 30px; 111 | y: 30px; 112 | } 113 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) { 114 | overflow: unset; 115 | } 116 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) > rect { 117 | height: 25px !important; 118 | } 119 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) > mask > rect { 120 | x: 15px; 121 | y: 13px; 122 | } 123 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatarDecoration_c51b4e { 124 | display: none; 125 | } 126 | 127 | #app-mount .container_b2ca13 .flex_bba380 { 128 | opacity: 0; 129 | position: relative; 130 | align-items: center; 131 | pointer-events: none; 132 | height: 40px; 133 | padding: 4px; 134 | padding-right: 6px; 135 | border-top-right-radius: 5px; 136 | border-bottom-right-radius: 5px; 137 | background-color: var(--background-floating); 138 | } 139 | 140 | #app-mount .container_b2ca13 .nameTag_b2ca13 { 141 | display: flex; 142 | flex-direction: column; 143 | justify-content: center; 144 | width: 75px; 145 | max-width: 75px; 146 | height: 40px; 147 | padding: 4px; 148 | padding-left: 10px; 149 | margin: 0; 150 | margin-left: 20px; 151 | opacity: 0; 152 | pointer-events: none; 153 | border-top-left-radius: 5px; 154 | border-bottom-left-radius: 5px; 155 | background-color: var(--background-floating); 156 | } 157 | #app-mount .container_b2ca13 .nameTag_b2ca13::before { 158 | content: ""; 159 | position: absolute; 160 | top: calc(50% - 4px); 161 | width: 0; 162 | height: 0; 163 | margin-left: -20px; 164 | border: 5px solid transparent; 165 | border-top-color: var(--background-floating); 166 | border-left-width: 5px; 167 | transform: rotate(90deg); 168 | } 169 | #app-mount .container_b2ca13 .nameTag_b2ca13 .forceHover_c0d6c6 .default_c0d6c6 { 170 | transform: none; 171 | opacity: 1; 172 | } 173 | #app-mount .container_b2ca13 .nameTag_b2ca13 .forceHover_c0d6c6 .hovered_c0d6c6 { 174 | transform: none !important; 175 | opacity: 0; 176 | } 177 | 178 | #app-mount .panels_a4d4d9 { 179 | z-index: 0; 180 | } 181 | #app-mount .panels_a4d4d9 .container_b2ca13 { 182 | position: fixed; 183 | display: flex; 184 | flex-direction: row; 185 | left: 12px; 186 | padding: 0; 187 | background: transparent !important; 188 | } 189 | #app-mount .panels_a4d4d9 .container_b2ca13::before { 190 | opacity: 0; 191 | content: ""; 192 | position: absolute; 193 | left: 68px; 194 | width: calc(100% - 68px); 195 | height: calc(100% - 12px); 196 | border-radius: 5px; 197 | box-shadow: var(--elevation-high); 198 | } 199 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover), #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover), #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) { 200 | z-index: 1004; 201 | } 202 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .flex_bba380, 203 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .nameTag_b2ca13, 204 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .container_b2ca13::before, #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .flex_bba380, 205 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .nameTag_b2ca13, 206 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .container_b2ca13::before, #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .flex_bba380, 207 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .nameTag_b2ca13, 208 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .container_b2ca13::before { 209 | opacity: 1; 210 | pointer-events: all; 211 | } 212 | } -------------------------------------------------------------------------------- /clients/metas/betterdiscord.json: -------------------------------------------------------------------------------- 1 | { 2 | "invite": "vYdXbEzqDs", 3 | "authorId": "399416615742996480", 4 | "source": "https://github.com/discord-extensions/compact-userarea", 5 | "updateUrl": "https://github.com/discord-extensions/compact-userarea/blob/main/clients/compact-userarea.theme.css" 6 | } -------------------------------------------------------------------------------- /clients/metas/userstyle.json: -------------------------------------------------------------------------------- 1 | { 2 | "namespace": "https://github.com/discord-extensions/compact-userarea", 3 | "license": "MIT" 4 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compact-userarea", 3 | "version": "2.0.1", 4 | "description": "A compact, better looking, top-left user area.", 5 | "scripts": { 6 | "dev": "theme-scss dev", 7 | "build": "theme-scss build", 8 | "bump:patch": "pnpm version --commit-hooks false --git-tag-version false patch", 9 | "bump:minor": "pnpm version --commit-hooks false --git-tag-version false minor", 10 | "bump:major": "pnpm version --commit-hooks false --git-tag-version false major" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/discord-extensions/compact-userarea.git" 15 | }, 16 | "author": "LuckFire", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/discord-extensions/compact-userarea/issues" 20 | }, 21 | "homepage": "https://github.com/discord-extensions/compact-userarea#readme", 22 | "devDependencies": { 23 | "theme-scss": "^1.1.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '9.0' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | importers: 8 | 9 | .: 10 | devDependencies: 11 | theme-scss: 12 | specifier: ^1.1.4 13 | version: 1.1.4 14 | 15 | packages: 16 | 17 | anymatch@3.1.3: 18 | resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} 19 | engines: {node: '>= 8'} 20 | 21 | binary-extensions@2.2.0: 22 | resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} 23 | engines: {node: '>=8'} 24 | 25 | braces@3.0.2: 26 | resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} 27 | engines: {node: '>=8'} 28 | 29 | chalk@5.3.0: 30 | resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==} 31 | engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} 32 | 33 | chokidar@3.6.0: 34 | resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} 35 | engines: {node: '>= 8.10.0'} 36 | 37 | fill-range@7.0.1: 38 | resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} 39 | engines: {node: '>=8'} 40 | 41 | fsevents@2.3.3: 42 | resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} 43 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 44 | os: [darwin] 45 | 46 | glob-parent@5.1.2: 47 | resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} 48 | engines: {node: '>= 6'} 49 | 50 | immutable@4.3.5: 51 | resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==} 52 | 53 | is-binary-path@2.1.0: 54 | resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} 55 | engines: {node: '>=8'} 56 | 57 | is-extglob@2.1.1: 58 | resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} 59 | engines: {node: '>=0.10.0'} 60 | 61 | is-glob@4.0.3: 62 | resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} 63 | engines: {node: '>=0.10.0'} 64 | 65 | is-number@7.0.0: 66 | resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} 67 | engines: {node: '>=0.12.0'} 68 | 69 | mri@1.2.0: 70 | resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} 71 | engines: {node: '>=4'} 72 | 73 | normalize-path@3.0.0: 74 | resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} 75 | engines: {node: '>=0.10.0'} 76 | 77 | picomatch@2.3.1: 78 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} 79 | engines: {node: '>=8.6'} 80 | 81 | readdirp@3.6.0: 82 | resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} 83 | engines: {node: '>=8.10.0'} 84 | 85 | sade@1.8.1: 86 | resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} 87 | engines: {node: '>=6'} 88 | 89 | sass@1.70.0: 90 | resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==} 91 | engines: {node: '>=14.0.0'} 92 | hasBin: true 93 | 94 | source-map-js@1.0.2: 95 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} 96 | engines: {node: '>=0.10.0'} 97 | 98 | theme-scss@1.1.4: 99 | resolution: {integrity: sha512-L80u+g6p3RJDdbfpP9p+MqNqkvFvognqEzCbhlZNNCMYrIqKb5L8me3RswX3U1+/g1CAgBhBImBui/d6J9B1eg==} 100 | hasBin: true 101 | 102 | to-regex-range@5.0.1: 103 | resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} 104 | engines: {node: '>=8.0'} 105 | 106 | snapshots: 107 | 108 | anymatch@3.1.3: 109 | dependencies: 110 | normalize-path: 3.0.0 111 | picomatch: 2.3.1 112 | 113 | binary-extensions@2.2.0: {} 114 | 115 | braces@3.0.2: 116 | dependencies: 117 | fill-range: 7.0.1 118 | 119 | chalk@5.3.0: {} 120 | 121 | chokidar@3.6.0: 122 | dependencies: 123 | anymatch: 3.1.3 124 | braces: 3.0.2 125 | glob-parent: 5.1.2 126 | is-binary-path: 2.1.0 127 | is-glob: 4.0.3 128 | normalize-path: 3.0.0 129 | readdirp: 3.6.0 130 | optionalDependencies: 131 | fsevents: 2.3.3 132 | 133 | fill-range@7.0.1: 134 | dependencies: 135 | to-regex-range: 5.0.1 136 | 137 | fsevents@2.3.3: 138 | optional: true 139 | 140 | glob-parent@5.1.2: 141 | dependencies: 142 | is-glob: 4.0.3 143 | 144 | immutable@4.3.5: {} 145 | 146 | is-binary-path@2.1.0: 147 | dependencies: 148 | binary-extensions: 2.2.0 149 | 150 | is-extglob@2.1.1: {} 151 | 152 | is-glob@4.0.3: 153 | dependencies: 154 | is-extglob: 2.1.1 155 | 156 | is-number@7.0.0: {} 157 | 158 | mri@1.2.0: {} 159 | 160 | normalize-path@3.0.0: {} 161 | 162 | picomatch@2.3.1: {} 163 | 164 | readdirp@3.6.0: 165 | dependencies: 166 | picomatch: 2.3.1 167 | 168 | sade@1.8.1: 169 | dependencies: 170 | mri: 1.2.0 171 | 172 | sass@1.70.0: 173 | dependencies: 174 | chokidar: 3.6.0 175 | immutable: 4.3.5 176 | source-map-js: 1.0.2 177 | 178 | source-map-js@1.0.2: {} 179 | 180 | theme-scss@1.1.4: 181 | dependencies: 182 | chalk: 5.3.0 183 | chokidar: 3.6.0 184 | sade: 1.8.1 185 | sass: 1.70.0 186 | 187 | to-regex-range@5.0.1: 188 | dependencies: 189 | is-number: 7.0.0 190 | -------------------------------------------------------------------------------- /src/base/animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes top-bottom { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(-5px); 5 | } 6 | 100% { 7 | opacity: 1; 8 | transform: none; 9 | } 10 | } 11 | @keyframes left-right { 12 | 0% { 13 | opacity: 0; 14 | transform: translateX(-4px); 15 | } 16 | 100% { 17 | opacity: 1; 18 | transform: none; 19 | } 20 | } 21 | @keyframes right-left { 22 | 0% { 23 | opacity: 1; 24 | transform: none; 25 | } 26 | 100% { 27 | opacity: 0; 28 | transform: translateX(-4px); 29 | } 30 | } -------------------------------------------------------------------------------- /src/components/container/avatar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 { 2 | --avatar-size: 48px; 3 | 4 | position: relative; 5 | min-width: unset; 6 | padding: unset; 7 | margin: unset; 8 | 9 | &:hover { 10 | background-color: transparent; 11 | } 12 | 13 | .avatar_b2ca13 { 14 | width: var(--avatar-size) !important; 15 | height: var(--avatar-size) !important; 16 | 17 | // divider 18 | &::after { 19 | content: ''; 20 | display: block; 21 | position: relative; 22 | pointer-events: none; 23 | top: calc(100% + 8px); 24 | width: calc(100% - 16px); 25 | height: 2px; 26 | margin: auto; 27 | border-radius: 1px; 28 | background-color: var(--background-modifier-accent); 29 | } 30 | 31 | .mask_c51b4e { 32 | width: var(--avatar-size) !important; 33 | height: var(--avatar-size) !important; 34 | 35 | > foreignObject { 36 | mask-image: url("#svg-mask-avatar-status-round-48"); 37 | width: 100%; 38 | height: 100%; 39 | } 40 | 41 | .avatarStack_c51b4e { 42 | content: var(--avatar-source-override, ''); 43 | } 44 | } 45 | 46 | .pointerEvents_c51b4e { 47 | x: 30px; 48 | y: 30px; 49 | } 50 | 51 | // i dont even know *why* an element gets changed, but a scuffed fix for it. 52 | // there is likely a better way to do this. :has isn't necessary but meh, lets you know when it's going to be changed. 53 | svg:has(~ .pointerEvents_c51b4e:empty) { 54 | overflow: unset; 55 | 56 | > rect { 57 | height: 25px !important; 58 | } 59 | 60 | > mask > rect { 61 | x: 15px; 62 | y: 13px; 63 | } 64 | } 65 | } 66 | 67 | // These look so low quality. 68 | // TODO: Make a list of higher quality URLs and apply them depending on the decoration. 69 | .avatarDecoration_c51b4e { 70 | display: none; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/components/container/buttons.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container_b2ca13 .flex_bba380 { 2 | opacity: 0; 3 | position: relative; 4 | align-items: center; 5 | pointer-events: none; 6 | height: 40px; 7 | padding: 4px; 8 | padding-right: 6px; 9 | border-top-right-radius: 5px; 10 | border-bottom-right-radius: 5px; 11 | background-color: var(--background-floating); 12 | } -------------------------------------------------------------------------------- /src/components/container/index.scss: -------------------------------------------------------------------------------- 1 | @forward 'avatar'; 2 | @forward 'buttons'; 3 | @forward 'name-tag'; -------------------------------------------------------------------------------- /src/components/container/name-tag.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container_b2ca13 .nameTag_b2ca13 { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | width: 75px; 6 | max-width: 75px; 7 | height: 40px; 8 | padding: 4px; 9 | padding-left: 10px; 10 | margin: 0; 11 | margin-left: 20px; 12 | opacity: 0; 13 | pointer-events: none; 14 | border-top-left-radius: 5px; 15 | border-bottom-left-radius: 5px; 16 | background-color: var(--background-floating); 17 | 18 | // tooltip arrow 19 | &::before { 20 | content: ""; 21 | position: absolute; 22 | top: calc(50% - 4px); 23 | width: 0; 24 | height: 0; 25 | margin-left: -20px; 26 | border: 5px solid transparent; 27 | border-top-color: var(--background-floating); 28 | border-left-width: 5px; 29 | transform: rotate(90deg); 30 | } 31 | 32 | .forceHover_c0d6c6 { 33 | .default_c0d6c6 { 34 | transform: none; 35 | opacity: 1; 36 | } 37 | .hovered_c0d6c6 { 38 | transform: none !important; 39 | opacity: 0; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /src/components/os-position.scss: -------------------------------------------------------------------------------- 1 | $osTypeInfo: 2 | "win" 72px 30px, // windows 3 | "osx" 66px 30px, // macOS 4 | "linux" 64px 8px, //linux 5 | "web" 64px 8px; // web 6 | 7 | @each $os, $guildTop, $containerTop in $osTypeInfo { 8 | .platform-#{$os} { 9 | .container_b2ca13 { 10 | top: $containerTop !important; 11 | } 12 | 13 | .guilds_a4d4d9 { 14 | margin-top: $guildTop; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/panel.scss: -------------------------------------------------------------------------------- 1 | @use 'container'; 2 | 3 | #app-mount .panels_a4d4d9 { 4 | z-index: 0; 5 | 6 | .container_b2ca13 { 7 | position: fixed; 8 | display: flex; 9 | flex-direction: row; 10 | left: 12px; 11 | padding: 0; 12 | background: transparent !important; 13 | 14 | // tooltip drop shadow 15 | &::before { 16 | opacity: 0; 17 | content: ""; 18 | position: absolute; 19 | left: 68px; 20 | width: calc(100% - 68px); 21 | height: calc(100% - 12px); 22 | border-radius: 5px; 23 | box-shadow: var(--elevation-high); 24 | } 25 | } 26 | 27 | &:has(.container_b2ca13 .avatar_b2ca13:hover), 28 | &:has(.container_b2ca13 .avatarWrapper_b2ca13:hover), 29 | &:has(.container_b2ca13 .flex_bba380:hover) { 30 | z-index: 1004; 31 | 32 | .flex_bba380, 33 | .nameTag_b2ca13, 34 | .container_b2ca13::before { 35 | opacity: 1; 36 | pointer-events: all; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/profile-popout.scss: -------------------------------------------------------------------------------- 1 | #app-mount .accountProfilePopoutWrapper_b2ca13 { 2 | left: 0; 3 | 4 | // row align name contents 5 | .userText_c9ccf6 { 6 | display: flex; 7 | flex-direction: row; 8 | align-items: flex-end; 9 | gap: 5px; 10 | 11 | .userTagUsernameBase_c9ccf6 { 12 | line-height: 1.2; 13 | color: var(--text-muted); 14 | &:before { 15 | content: '@' 16 | } 17 | } 18 | } 19 | 20 | // force it as the small height 21 | .customStatusSoloEmoji_cb55fc { 22 | width: 20px; 23 | height: 20px; 24 | } 25 | 26 | #account > .scroller_d90b3d { 27 | display: flex; 28 | 29 | [role="group"] { 30 | display: flex; 31 | flex-direction: row; 32 | 33 | .iconContainerLeft_d90b3d { 34 | margin-right: 0; 35 | } 36 | 37 | .iconContainer_d90b3d { 38 | margin-left: 0; 39 | } 40 | } 41 | 42 | .separator_d90b3d { 43 | display: none; 44 | } 45 | 46 | .label_d90b3d { 47 | display: none; 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /src/source.css: -------------------------------------------------------------------------------- 1 | @keyframes top-bottom { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(-5px); 5 | } 6 | 100% { 7 | opacity: 1; 8 | transform: none; 9 | } 10 | } 11 | @keyframes left-right { 12 | 0% { 13 | opacity: 0; 14 | transform: translateX(-4px); 15 | } 16 | 100% { 17 | opacity: 1; 18 | transform: none; 19 | } 20 | } 21 | @keyframes right-left { 22 | 0% { 23 | opacity: 1; 24 | transform: none; 25 | } 26 | 100% { 27 | opacity: 0; 28 | transform: translateX(-4px); 29 | } 30 | } 31 | .platform-win .container_b2ca13 { 32 | top: 30px !important; 33 | } 34 | .platform-win .guilds_a4d4d9 { 35 | margin-top: 72px; 36 | } 37 | 38 | .platform-osx .container_b2ca13 { 39 | top: 30px !important; 40 | } 41 | .platform-osx .guilds_a4d4d9 { 42 | margin-top: 66px; 43 | } 44 | 45 | .platform-linux .container_b2ca13 { 46 | top: 8px !important; 47 | } 48 | .platform-linux .guilds_a4d4d9 { 49 | margin-top: 64px; 50 | } 51 | 52 | .platform-web .container_b2ca13 { 53 | top: 8px !important; 54 | } 55 | .platform-web .guilds_a4d4d9 { 56 | margin-top: 64px; 57 | } 58 | 59 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 { 60 | --avatar-size: 48px; 61 | position: relative; 62 | min-width: unset; 63 | padding: unset; 64 | margin: unset; 65 | } 66 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13:hover { 67 | background-color: transparent; 68 | } 69 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 { 70 | width: var(--avatar-size) !important; 71 | height: var(--avatar-size) !important; 72 | } 73 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13::after { 74 | content: ""; 75 | display: block; 76 | position: relative; 77 | pointer-events: none; 78 | top: calc(100% + 8px); 79 | width: calc(100% - 16px); 80 | height: 2px; 81 | margin: auto; 82 | border-radius: 1px; 83 | background-color: var(--background-modifier-accent); 84 | } 85 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e { 86 | width: var(--avatar-size) !important; 87 | height: var(--avatar-size) !important; 88 | } 89 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e > foreignObject { 90 | mask-image: url("#svg-mask-avatar-status-round-48"); 91 | width: 100%; 92 | height: 100%; 93 | } 94 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .mask_c51b4e .avatarStack_c51b4e { 95 | content: var(--avatar-source-override, ""); 96 | } 97 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 .pointerEvents_c51b4e { 98 | x: 30px; 99 | y: 30px; 100 | } 101 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) { 102 | overflow: unset; 103 | } 104 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) > rect { 105 | height: 25px !important; 106 | } 107 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatar_b2ca13 svg:has(~ .pointerEvents_c51b4e:empty) > mask > rect { 108 | x: 15px; 109 | y: 13px; 110 | } 111 | #app-mount .container_b2ca13 .avatarWrapper_b2ca13 .avatarDecoration_c51b4e { 112 | display: none; 113 | } 114 | 115 | #app-mount .container_b2ca13 .flex_bba380 { 116 | opacity: 0; 117 | position: relative; 118 | align-items: center; 119 | pointer-events: none; 120 | height: 40px; 121 | padding: 4px; 122 | padding-right: 6px; 123 | border-top-right-radius: 5px; 124 | border-bottom-right-radius: 5px; 125 | background-color: var(--background-floating); 126 | } 127 | 128 | #app-mount .container_b2ca13 .nameTag_b2ca13 { 129 | display: flex; 130 | flex-direction: column; 131 | justify-content: center; 132 | width: 75px; 133 | max-width: 75px; 134 | height: 40px; 135 | padding: 4px; 136 | padding-left: 10px; 137 | margin: 0; 138 | margin-left: 20px; 139 | opacity: 0; 140 | pointer-events: none; 141 | border-top-left-radius: 5px; 142 | border-bottom-left-radius: 5px; 143 | background-color: var(--background-floating); 144 | } 145 | #app-mount .container_b2ca13 .nameTag_b2ca13::before { 146 | content: ""; 147 | position: absolute; 148 | top: calc(50% - 4px); 149 | width: 0; 150 | height: 0; 151 | margin-left: -20px; 152 | border: 5px solid transparent; 153 | border-top-color: var(--background-floating); 154 | border-left-width: 5px; 155 | transform: rotate(90deg); 156 | } 157 | #app-mount .container_b2ca13 .nameTag_b2ca13 .forceHover_c0d6c6 .default_c0d6c6 { 158 | transform: none; 159 | opacity: 1; 160 | } 161 | #app-mount .container_b2ca13 .nameTag_b2ca13 .forceHover_c0d6c6 .hovered_c0d6c6 { 162 | transform: none !important; 163 | opacity: 0; 164 | } 165 | 166 | #app-mount .panels_a4d4d9 { 167 | z-index: 0; 168 | } 169 | #app-mount .panels_a4d4d9 .container_b2ca13 { 170 | position: fixed; 171 | display: flex; 172 | flex-direction: row; 173 | left: 12px; 174 | padding: 0; 175 | background: transparent !important; 176 | } 177 | #app-mount .panels_a4d4d9 .container_b2ca13::before { 178 | opacity: 0; 179 | content: ""; 180 | position: absolute; 181 | left: 68px; 182 | width: calc(100% - 68px); 183 | height: calc(100% - 12px); 184 | border-radius: 5px; 185 | box-shadow: var(--elevation-high); 186 | } 187 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover), #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover), #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) { 188 | z-index: 1004; 189 | } 190 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .flex_bba380, 191 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .nameTag_b2ca13, 192 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatar_b2ca13:hover) .container_b2ca13::before, #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .flex_bba380, 193 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .nameTag_b2ca13, 194 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .avatarWrapper_b2ca13:hover) .container_b2ca13::before, #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .flex_bba380, 195 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .nameTag_b2ca13, 196 | #app-mount .panels_a4d4d9:has(.container_b2ca13 .flex_bba380:hover) .container_b2ca13::before { 197 | opacity: 1; 198 | pointer-events: all; 199 | } -------------------------------------------------------------------------------- /src/source.scss: -------------------------------------------------------------------------------- 1 | @use 'base/animations'; 2 | 3 | @use 'components/os-position'; 4 | @use 'components/panel'; 5 | // @use 'components/profile-popout'; 6 | -------------------------------------------------------------------------------- /theme-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Compact Userarea", 3 | "import": "https://discord-extensions.github.io/compact-userarea/src/source.css", 4 | "metas": { 5 | "betterdiscord": "clients/metas/betterdiscord.json", 6 | "userstyle": "clients/metas/userstyle.json" 7 | }, 8 | "dist": { 9 | "clients": { 10 | "compileFor": ["betterdiscord", "userstyle"] 11 | } 12 | }, 13 | "dev": { 14 | "mod": "vencord" 15 | } 16 | } --------------------------------------------------------------------------------