├── .github ├── ISSUE_TEMPLATE │ └── bug-report.md └── workflows │ └── compile.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── bd-scss.config.js ├── bun.lock ├── manifest.json ├── package.json ├── powercord_manifest.json └── src ├── main.scss └── root.scss /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Something needs fixing 4 | title: Brief description of the bug 5 | labels: bug 6 | assignees: '' 7 | --- 8 | 9 | ### Describe the bug 10 | 11 | _A clear and concise description of what the bug is_ 12 | 13 | ### To Reproduce 14 | 15 | _Steps to reproduce the behavior_ 16 | 17 | ### Screenshots 18 | 19 | _If applicable, add screenshots to help explain your problem_ 20 | 21 | ### Infomation (please complete the following information) 22 | 23 | **Discord channel**: _Stable/PTB/Canary_ 24 | **OS**: _Windows/Linux/OSX_ 25 | **Mod**: _BetterDiscord/Powercord/GooseMod_ 26 | **Discord language**: _Your language_ 27 | 28 | ### Additional context 29 | 30 | _Add any other context about the problem here. Remove if not applicable._ 31 | -------------------------------------------------------------------------------- /.github/workflows/compile.yml: -------------------------------------------------------------------------------- 1 | name: 'Compile SCSS' 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build: 10 | name: 'Build CSS' 11 | runs-on: 'ubuntu-latest' 12 | steps: 13 | - name: 'Checkout Repo' 14 | uses: 'actions/checkout@v2' 15 | - name: 'Install BUN' 16 | uses: 'oven-sh/setup-bun@v2' 17 | - name: 'Install of dependencies' 18 | run: 'bun i' 19 | - name: 'Run build script' 20 | run: 'bun run build' 21 | - name: 'Deploy' 22 | uses: 'peaceiris/actions-gh-pages@v3' 23 | with: 24 | github_token: ${{ secrets.GITHUB_TOKEN }} 25 | publish_branch: 'deploy' 26 | publish_dir: './dist' 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | dist/** -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "trailingComma": "none", 6 | "printWidth": 100 7 | } 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | So, you're looking to contribute? Nice! 2 | 3 | This will help you get started. 4 | 5 | ## Prerequisites 6 | 7 | - Basic knowledge of NodeJS. 8 | - Basic knowledge of SCSS/CSS. 9 | - Basic knowledge of Git/GitHub. 10 | - Basic knowledge of the terminal/command prompt. 11 | 12 | Install Dependencies: 13 | Open a terminal/command prompt and use the following command: `npm install` in the RadialStatus folder. 14 | 15 | ## Development 16 | 17 | Run the `dev` script with: `npm run dev`. 18 | This will watch for changes inside the `/src` folder and then auto compile them into your BetterDiscord themes folder. 19 | 20 | ## Deploying 21 | 22 | Simply push your changes to the `master` branch and make a pull request. 23 | If all is well you PR will be accepted and merged with the `master` branch. 24 | 25 | This will then trigger an action to compile the `/src/_base.css` to the `deploy` branch. 26 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 DiscordStyles 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RadialStatus 2 | 3 | Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file. 4 | 5 | ![members](https://i.imgur.com/4zZU4iw.jpg) 6 | 7 | ## Download 8 | 9 | BetterDiscord Download: [https://betterdiscord.app/theme/RadialStatus](https://betterdiscord.app/Download?id=32) 10 | Powercord Install: `git clone https://github.com/DiscordStyles/RadialStatus --branch deploy` 11 | Vencord link: `https://raw.githubusercontent.com/DiscordStyles/RadialStatus/deploy/RadialStatus.theme.css` 12 | 13 | ## Contributing 14 | 15 | Looking to contribute to RadialStatus theme? Read the the [contributing.md](https://github.com/DiscordStyles/RadialStatus/blob/master/CONTRIBUTING.md) file. 16 | 17 | ## License 18 | 19 | See the [LICENSE](https://github.com/DiscordStyles/RadialStatus/blob/master/LICENSE.md) file for license rights and limitations (MIT). 20 | -------------------------------------------------------------------------------- /bd-scss.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('bd-scss/lib/config').Config} */ 2 | export default { 3 | meta: { 4 | name: 'RadialStatus', 5 | author: 'Gibbu#1211', 6 | version: '2.0.0', 7 | description: 8 | 'Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file.', 9 | source: 'https://github.com/DiscordStyles/RadialStatus', 10 | invite: 'ZHthyCw' 11 | }, 12 | github: 'DiscordStyles' 13 | }; 14 | -------------------------------------------------------------------------------- /bun.lock: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1, 3 | "workspaces": { 4 | "": { 5 | "name": "radialstatus", 6 | "dependencies": { 7 | "bd-scss": "latest", 8 | }, 9 | "devDependencies": { 10 | "prettier": "latest", 11 | }, 12 | }, 13 | }, 14 | "packages": { 15 | "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="], 16 | 17 | "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="], 18 | 19 | "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw=="], 20 | 21 | "@parcel/watcher-darwin-x64": ["@parcel/watcher-darwin-x64@2.5.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg=="], 22 | 23 | "@parcel/watcher-freebsd-x64": ["@parcel/watcher-freebsd-x64@2.5.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ=="], 24 | 25 | "@parcel/watcher-linux-arm-glibc": ["@parcel/watcher-linux-arm-glibc@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA=="], 26 | 27 | "@parcel/watcher-linux-arm-musl": ["@parcel/watcher-linux-arm-musl@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q=="], 28 | 29 | "@parcel/watcher-linux-arm64-glibc": ["@parcel/watcher-linux-arm64-glibc@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w=="], 30 | 31 | "@parcel/watcher-linux-arm64-musl": ["@parcel/watcher-linux-arm64-musl@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg=="], 32 | 33 | "@parcel/watcher-linux-x64-glibc": ["@parcel/watcher-linux-x64-glibc@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A=="], 34 | 35 | "@parcel/watcher-linux-x64-musl": ["@parcel/watcher-linux-x64-musl@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg=="], 36 | 37 | "@parcel/watcher-win32-arm64": ["@parcel/watcher-win32-arm64@2.5.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw=="], 38 | 39 | "@parcel/watcher-win32-ia32": ["@parcel/watcher-win32-ia32@2.5.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ=="], 40 | 41 | "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="], 42 | 43 | "autoprefixer": ["autoprefixer@10.4.21", "", { "dependencies": { "browserslist": "^4.24.4", "caniuse-lite": "^1.0.30001702", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ=="], 44 | 45 | "bd-scss": ["bd-scss@3.0.5", "", { "dependencies": { "autoprefixer": "^10.4.20", "chokidar": "^4.0.3", "kleur": "^4.1.5", "postcss": "^8.5.3", "sade": "^1.8.1", "sass": "^1.85.1" }, "bin": { "bd-scss": "lib/index.js" } }, "sha512-34qBQk8IEhMAhvcesAeztmbAokKWJ7uU6pe/BrDsNp9Zx57I1UK4XKPcdiJJ8eBfXDlxNyihGQezZKr5nbM0qw=="], 46 | 47 | "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="], 48 | 49 | "browserslist": ["browserslist@4.24.4", "", { "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" } }, "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A=="], 50 | 51 | "caniuse-lite": ["caniuse-lite@1.0.30001707", "", {}, "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw=="], 52 | 53 | "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="], 54 | 55 | "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="], 56 | 57 | "electron-to-chromium": ["electron-to-chromium@1.5.125", "", {}, "sha512-A2+qEsSUc95QvyFDl7PNwkDDNphIKBVfBBtWWkPGRbiWEgzLo0SvLygYF6HgzVduHd+4WGPB/WD64POFgwzY3g=="], 58 | 59 | "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="], 60 | 61 | "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], 62 | 63 | "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="], 64 | 65 | "immutable": ["immutable@5.1.1", "", {}, "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="], 66 | 67 | "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="], 68 | 69 | "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="], 70 | 71 | "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="], 72 | 73 | "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="], 74 | 75 | "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="], 76 | 77 | "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="], 78 | 79 | "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="], 80 | 81 | "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="], 82 | 83 | "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="], 84 | 85 | "normalize-range": ["normalize-range@0.1.2", "", {}, "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="], 86 | 87 | "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="], 88 | 89 | "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="], 90 | 91 | "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="], 92 | 93 | "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="], 94 | 95 | "prettier": ["prettier@3.5.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="], 96 | 97 | "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="], 98 | 99 | "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="], 100 | 101 | "sass": ["sass@1.86.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-zV8vGUld/+mP4KbMLJMX7TyGCuUp7hnkOScgCMsWuHtns8CWBoz+vmEhoGMXsaJrbUP8gj+F1dLvVe79sK8UdA=="], 102 | 103 | "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], 104 | 105 | "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="], 106 | 107 | "update-browserslist-db": ["update-browserslist-db@1.1.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw=="], 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RadialStatus", 3 | "description": "Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file", 4 | "version": "1.0.0", 5 | "author": "Gibbu#1211", 6 | "theme": "dist/RadialStatus.theme.css", 7 | "consent": ["ext_listing"], 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": false, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "bd-scss dev", 6 | "build": "bd-scss build" 7 | }, 8 | "dependencies": { 9 | "bd-scss": "^3.0.5" 10 | }, 11 | "devDependencies": { 12 | "prettier": "^3.5.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RadialStatus", 3 | "description": "Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file", 4 | "version": "1.0.0", 5 | "author": "Gibbu#1211", 6 | "theme": "RadialStatus.theme.css", 7 | "consent": ["ext_listing"], 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --rs-version: '2.0.11'; 3 | } 4 | 5 | #app-mount { 6 | .wrapper__44b0c { 7 | border-radius: var(--rs-avatar-shape); 8 | 9 | // Remove masks 10 | svg:not(:root) { 11 | overflow: visible; 12 | contain: none; 13 | } 14 | foreignObject { 15 | mask: none; 16 | } 17 | 18 | // Typing indicator 19 | .dots__5ad89 circle { 20 | cy: -8 !important; 21 | &:nth-child(1) { 22 | cx: -8.5 !important; 23 | } 24 | &:nth-child(2) { 25 | cx: -2.25 !important; 26 | } 27 | &:nth-child(3) { 28 | cx: 4 !important; 29 | } 30 | } 31 | .mask__44b0c { 32 | & > rect[x='22'] { 33 | x: 0; 34 | y: 0; 35 | } 36 | & > circle { 37 | opacity: 0 !important; 38 | width: 100%; 39 | height: 100%; 40 | cx: 43%; 41 | cy: 20; 42 | } 43 | } 44 | .pointerEvents__44b0c[x='14.5'] { 45 | fill: rgba(0, 0, 0, 0.5) !important; 46 | width: var(--rs-members-width, 30px); 47 | height: var(--rs-members-width, 30px); 48 | x: calc((var(--rs-members-width, 30px) / 2) / -1 + 2px); 49 | y: calc((var(--rs-members-width, 30px) / 2) / -1); 50 | } 51 | 52 | // Avatar shape 53 | img, 54 | &.avatar__91a9d { 55 | border-radius: var(--rs-avatar-shape); 56 | } 57 | 58 | // Updated status, user typing and bottom left avatar 59 | svg[width='25'][height='15'] > rect { 60 | rx: calc(var(--rs-avatar-shape) * 2) !important; 61 | ry: calc(var(--rs-avatar-shape) * 2) !important; 62 | } 63 | &[style*='80px'], 64 | &[style*='120px'] { 65 | svg.cursorDefault__44b0c rect { 66 | ry: calc(var(--rs-avatar-shape) * 3.3); 67 | rx: calc(var(--rs-avatar-shape) * 3.3); 68 | } 69 | } 70 | 71 | // Status ring 72 | rect { 73 | x: 0; 74 | y: 0; 75 | width: 100%; 76 | height: 100%; 77 | mask: none; 78 | display: block; 79 | rx: var(--rs-avatar-shape); 80 | ry: var(--rs-avatar-shape); 81 | fill: transparent !important; 82 | stroke-width: var(--rs-small-width); 83 | &[fill='#23a55a'], 84 | &[fill='#40a258'], 85 | &[fill='#43a25a'] { 86 | stroke: var(--rs-online-color); 87 | } 88 | &[fill='#f0b232'], 89 | &[fill='#cc954c'], 90 | &[fill='#ca9654'] { 91 | stroke: var(--rs-idle-color); 92 | } 93 | &[fill='#f23f43'], 94 | &[fill='#d83a41'], 95 | &[fill='#d83a42'] { 96 | stroke: var(--rs-dnd-color); 97 | } 98 | &[fill='#593695'], 99 | &[mask*='streaming'], 100 | &[fill*='var(--status-purple'] { 101 | stroke: var(--rs-streaming-color); 102 | } 103 | &[fill='#80848e'] { 104 | stroke: var(--rs-offline-color); 105 | } 106 | &[fill='#82858f'], 107 | &[fill='#82838b'] { 108 | stroke: var(--rs-invisible-color); 109 | } 110 | &[x='16'] { 111 | width: 24px; 112 | height: 24px; 113 | } 114 | &[x='28'] { 115 | width: 40px; 116 | height: 40px; 117 | overflow: visible; 118 | } 119 | } 120 | 121 | // Members list 122 | &[style*='32px'] rect { 123 | width: 32px; 124 | height: 32px; 125 | x: -14.5; 126 | y: -17; 127 | position: relative; 128 | z-index: 0; 129 | } 130 | 131 | // Chat avatars (StatusEverywhere) 132 | &[style*='40px'] { 133 | & > svg > svg rect { 134 | width: 40px; 135 | height: 40px; 136 | x: -19; 137 | y: -20; 138 | ry: calc(var(--rs-avatar-shape) * 3.3); 139 | rx: calc(var(--rs-avatar-shape) * 3.3); 140 | } 141 | foreignObject[mask*='mobile'] img { 142 | width: calc(100% - 18px); 143 | } 144 | } 145 | 146 | // Medium ring (user popout) 147 | &[style*='80px'] { 148 | // Updated status 149 | svg.cursorDefault__44b0c rect { 150 | x: -48; 151 | y: -52; 152 | } 153 | rect { 154 | width: 80px; 155 | height: 80px; 156 | stroke-width: var(--rs-medium-width); 157 | } 158 | img { 159 | clip-path: inset( 160 | calc(var(--rs-medium-spacing) + 1px) calc(var(--rs-medium-spacing) + 1px) round 161 | var(--rs-avatar-shape) 162 | ); 163 | } 164 | } 165 | 166 | // Large ring (user profile) 167 | &[style*='120px'] { 168 | // Updated status 169 | svg.cursorDefault__44b0c rect { 170 | x: -70; 171 | y: -76; 172 | } 173 | rect { 174 | width: 120px; 175 | height: 120px; 176 | stroke-width: var(--rs-large-width); 177 | pointer-events: none; 178 | } 179 | img { 180 | clip-path: inset( 181 | calc(var(--rs-large-spacing) + 1px) calc(var(--rs-large-spacing) + 1px) round 182 | var(--rs-avatar-shape) 183 | ); 184 | } 185 | } 186 | 187 | // Fixes DBFBD chat avatars 188 | &:not([style*='80px;'], [style*='120px;'], [style*='16px']) 189 | > svg 190 | > foreignObject:not(:only-child) 191 | img { 192 | clip-path: inset( 193 | calc(var(--rs-small-spacing) + 1px) calc(var(--rs-small-spacing) + 1px) round 194 | var(--rs-avatar-shape) 195 | ); 196 | } 197 | 198 | // UserTypingAvatars 199 | &[style='width: 16px; height: 16px;'] { 200 | rect { 201 | display: none; 202 | } 203 | img { 204 | clip-path: none; 205 | } 206 | } 207 | 208 | // Mobile indicator 209 | foreignObject[mask*='mobile'] { 210 | property: inherit; 211 | // Chat message top 212 | &[width='24'] { 213 | &:after { 214 | width: 10px; 215 | height: 12px; 216 | top: 30%; 217 | } 218 | } 219 | // Private chats and users sidebar 220 | &[width='32'] { 221 | &:after { 222 | width: 10px; 223 | height: 14px; 224 | top: 30%; 225 | } 226 | } 227 | // Banner wrapper private chat 228 | &[width='80'] { 229 | &:after { 230 | width: 14px; 231 | height: 18px; 232 | } 233 | } 234 | // User profile banner 235 | &[width='120'] { 236 | &:after { 237 | width: 24px; 238 | height: 20px; 239 | } 240 | } 241 | 242 | &:after { 243 | content: ''; 244 | display: var(--rs-phone-visible, block); 245 | mask: url('data:image/svg+xml; utf-8,') 246 | center no-repeat; 247 | position: absolute; 248 | right: 0%; 249 | bottom: 0%; 250 | background: var(--rs-phone-color, var(--rs-online-color)); 251 | z-index: 1; 252 | } 253 | 254 | & + rect { 255 | stroke: var(--rs-phone-color, var(--rs-online-color)); 256 | } 257 | } 258 | } 259 | 260 | // User area 261 | .avatarWrapper__37e49 .mask__44b0c > g { 262 | transform: none !important; 263 | rect { 264 | width: var(--rs-user-area-size, 40px); 265 | height: var(--rs-user-area-size, 40px); 266 | rx: calc(var(--rs-avatar-shape) * 2) !important; 267 | ry: calc(var(--rs-avatar-shape) * 2) !important; 268 | } 269 | } 270 | 271 | //Bottom left avatar, speaking in VC 272 | .avatarSpeaking__44b0c { 273 | position: absolute; 274 | top: 2px; 275 | left: 2px; 276 | width: calc(100% - 4px); 277 | height: calc(100% - 4px); 278 | border-radius: var(--rs-avatar-shape); 279 | box-shadow: 280 | inset 0 0 0 2px var(--rs-self-speaking-colour, #57d39b), 281 | inset 0 0 0 3px var(--background-secondary); 282 | } 283 | 284 | // Mobile and typing fix for status everywhere plugins 285 | .message__5126c .wrapper__44b0c { 286 | foreignObject[mask*='mobile'] { 287 | width: calc(100% + 3px); 288 | } 289 | rect[mask*='typing'] { 290 | width: calc(100% - 9px); 291 | } 292 | } 293 | 294 | // Avatar hint 295 | .avatarHint_f89da9 foreignObject { 296 | mask: none; 297 | } 298 | .avatarHintInner_f89da9 { 299 | border-radius: var(--rs-avatar-shape) !important; 300 | padding-top: 0; 301 | width: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 1px * 2); 302 | height: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 1px * 2); 303 | top: 50%; 304 | left: 50%; 305 | transform: translate(-50%, -50%); 306 | position: relative; 307 | } 308 | 309 | // Offline 310 | .memberOffline-2lN7gt img { 311 | clip-path: none !important; 312 | } 313 | .offline__5d473 img { 314 | clip-path: none !important; 315 | } 316 | 317 | // Webhook popout 318 | .avatarWrapperNonUserBot_f89da9 .wrapper__44b0c img { 319 | clip-path: none !important; 320 | } 321 | 322 | // Fix clipping on user friends tab 323 | .userInfo__0a06e .wrapper__44b0c { 324 | margin-top: 1px; 325 | margin-left: 1px; 326 | } 327 | 328 | // Version info 329 | .info__2debe .line__2debe:last-child:after { 330 | content: 'RadialStatus ' var(--rs-version); 331 | display: block; 332 | } 333 | } 334 | -------------------------------------------------------------------------------- /src/root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* 3 | * Spacing 4 | */ 5 | --rs-small-spacing: 2px; /* Gap between avatar and status for members list/dms | MUST end in px */ 6 | --rs-medium-spacing: 3px; /* Gap between avatar and status for User popout | MUST end in px */ 7 | --rs-large-spacing: 4px; /* Gap between avatar and status for User profiles | MUST end in px */ 8 | 9 | /* 10 | * Widths 11 | */ 12 | --rs-small-width: 2px; /* Thickness of status border for members list/dms | MUST end in px */ 13 | --rs-medium-width: 3px; /* Thickness of status border for User popout | MUST end in px */ 14 | --rs-large-width: 4px; /* Thickness of status border for User profile | MUST end in px */ 15 | 16 | /* 17 | * Shape 18 | */ 19 | --rs-avatar-shape: 50%; /* 50% for round - 0% for square */ 20 | 21 | /* 22 | * Colours 23 | */ 24 | --rs-online-color: #43b581; /* Colour for online status */ 25 | --rs-idle-color: #faa61a; /* Colour for idle status */ 26 | --rs-dnd-color: #f04747; /* Colour for dnd status */ 27 | --rs-offline-color: #636b75; /* Colour for offline status */ 28 | --rs-streaming-color: #643da7; /* Colour for streaming status */ 29 | --rs-invisible-color: #747f8d; /* Colour for invisible status - Note: this will only show for your own invisibility */ 30 | --rs-self-speaking-color: #57d39b; /* Colour for speaking ring in the bottom left while in a voice chat/call */ 31 | --rs-phone-color: var(--rs-online-color); /* Colour of the ring & phone icon */ 32 | 33 | /* 34 | * Others 35 | */ 36 | --rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */ 37 | } 38 | --------------------------------------------------------------------------------