├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ └── bug-report.md └── workflows │ └── compile.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bd-scss.config.js ├── bun.lock ├── package.json ├── powercord_manifest.json └── src ├── addons ├── _radialglow.scss └── _serverrings.scss ├── main.scss ├── root.scss └── theme ├── _vars.scss ├── app ├── _app.scss ├── _titlebar.scss ├── _toolbar.scss ├── _version.scss └── index.scss ├── assets ├── _icons.scss ├── _index.scss └── _paths.scss ├── chat ├── _bars.scss ├── _container.scss ├── _dividers.scss ├── _message.scss ├── _textbox.scss └── index.scss ├── members ├── _container.scss ├── _member.scss └── index.scss ├── popups ├── _moreActivePosts.scss └── index.scss ├── serverlist ├── _container.scss ├── _folder.scss ├── _header.scss ├── _server.scss └── index.scss ├── sidebar ├── _channel.scss ├── _container.scss ├── _directmessage.scss ├── _panels.scss └── index.scss └── system ├── _windows.scss └── index.scss /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.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 | _((A clear and concise description of what the bug is))_ 11 | 12 | **To Reproduce** 13 | _((Steps to reproduce the behavior))_ 14 | 15 | **Screenshots** 16 | _((If applicable, add screenshots to help explain your problem))_ 17 | 18 | **Infomation (please complete the following information):** 19 | Discord channel: _((Stable/PTB/Canary))_ 20 | OS: _((Windows/Linux/OSX))_ 21 | Mod: _((BetterDiscord/Powercord))_ 22 | Discord language: _((Your language))_ 23 | 24 | **Additional context** 25 | _((Add any other context about the problem here. Remove if not applicable.))_ 26 | -------------------------------------------------------------------------------- /.github/workflows/compile.yml: -------------------------------------------------------------------------------- 1 | name: 'Compile SCSS' 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 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 2 | /dist -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | dist/** 3 | pnpm-lock.yaml -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "trailingComma": "none", 6 | "printWidth": 120 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 | - Have [PNPM](https://pnpm.io/) installed. 9 | - Basic knowledge of SCSS/CSS. 10 | - Basic knowledge of Git/GitHub. 11 | - Basic knowledge of the terminal/command prompt. 12 | 13 | Install Dependencies: 14 | Open a terminal/command prompt and use the following command: `pnpm install` in the SoftX folder. 15 | 16 | ## Development 17 | 18 | Run the `dev` script with: `pnpm run dev`. 19 | This will watch for changes inside the `/src` folder and then auto compile them into your BetterDiscord themes folder. 20 | 21 | ## Deploying 22 | 23 | Simply push your changes to the `main` branch and make a pull request. 24 | If all is well you PR will be accepted and merged with the `main` branch. 25 | 26 | This will then trigger an action to compile the `/src/_base.css` to the `deploy` branch. 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 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 | # SoftX 2 | 3 | A soft and comfy feel for Discord. 4 | 5 | ![Server Chat](https://i.imgur.com/E57gF3L.png) 6 | ![Server Search](https://i.imgur.com/nqgmfT0.png) 7 | ![Settings](https://i.imgur.com/KEC161G.png) 8 | 9 | ## Download 10 | 11 | BetterDiscord Download: [https://betterdiscord.app/theme/SoftX](https://betterdiscord.app/Download?id=515) 12 | Powercord Install: `git clone https://github.com/DiscordStyles/SoftX --branch deploy` 13 | Vencord link: `https://raw.githubusercontent.com/DiscordStyles/SoftX/deploy/SoftX.theme.css` 14 | 15 | ## Contributing 16 | 17 | Looking to contribute to SoftX theme? Read the the [contributing.md](https://github.com/DiscordStyles/SoftX/blob/main/CONTRIBUTING.md) file. 18 | 19 | ## License 20 | 21 | See the [LICENSE](https://github.com/DiscordStyles/SoftX/blob/main/LICENSE.md) file for license rights and limitations (MIT). 22 | -------------------------------------------------------------------------------- /bd-scss.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('bd-scss/lib/config').Config} */ 2 | export default { 3 | meta: { 4 | name: 'SoftX', 5 | author: 'Gibbu', 6 | version: '2.0.0', 7 | description: 'A soft and comfy feel for Discord.', 8 | source: 'https://github.com/DiscordStyles/SoftX', 9 | invite: 'ZHthyCw' 10 | }, 11 | github: 'DiscordStyles', 12 | addons: [{ target: 'src/addons/_radialglow.scss', name: 'RadialGlow' }] 13 | }; 14 | -------------------------------------------------------------------------------- /bun.lock: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1, 3 | "workspaces": { 4 | "": { 5 | "name": "softx", 6 | "dependencies": { 7 | "bd-scss": "^3.0.5", 8 | }, 9 | "devDependencies": { 10 | "prettier": "^3.5.3", 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.127", "", {}, "sha512-Ke5OggqOtEqzCzcUyV+9jgO6L6sv1gQVKGtSExXHjD/FK0p4qzPZbrDsrCdy0DptcQprD0V80RCBYSWLMhTTgQ=="], 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 | -------------------------------------------------------------------------------- /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": "SoftX", 3 | "description": "A soft and comfy feel for Discord.", 4 | "version": "1.0.0", 5 | "author": "Gibbu#1211", 6 | "theme": "SoftX.theme.css", 7 | "consent": ["ext_listing"], 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /src/addons/_radialglow.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:selector'; 2 | @use 'sass:map'; 3 | 4 | @import url('https://discordstyles.github.io/RadialStatus/RadialStatus.css'); 5 | 6 | :root { 7 | --rs-small-spacing: 2px; /* Spacing between profile image and outer ring on small icons (e.g. member list) | Default: 2px */ 8 | --rs-medium-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout) | Default: 4px */ 9 | --rs-large-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout fullscreen) | Default: 4px */ 10 | 11 | --rs-small-width: 1.5px; /* Ring width (follows same sizing as above) | Default: 1.5px */ 12 | --rs-medium-width: 2px; /* Default: 2px */ 13 | --rs-large-width: 2px; /* Default: 2px */ 14 | 15 | --rs-avatar-shape: var(--avatar-roundness, 50%); /* Border-radius for profile image | Default: 50% */ 16 | 17 | /* Customizable colors */ 18 | --rs-online-color: #43b581; /* Default: #43b581 */ 19 | --rs-idle-color: #faa61a; /* Default: #faa61a */ 20 | --rs-dnd-color: #f04747; /* Default: #f04747 */ 21 | --rs-offline-color: #636b75; /* Default: #636b75 */ 22 | --rs-streaming-color: #643da7; /* Default: #643da7 */ 23 | --rs-invisible-color: #747f8d; /* Default: #747f8d */ 24 | --rs-phone-color: var(--rs-online-color); /* Color of the phone for mobile users | Default: var(--rs-online-color) */ 25 | 26 | --rs-phone-visible: block; /* Visibility of the phone for mobile users | Default: block */ 27 | } 28 | 29 | // Currently supported by the following languages: 30 | // Danish 31 | // German 32 | // English (US, UK) 33 | // Spanish 34 | // French 35 | // Croatian 36 | 37 | $statusMap: ( 38 | 'online': ( 39 | 'Online', 40 | 'online', 41 | // German 42 | 'Conectado', 43 | // Spanish 44 | 'En línea con móvil', 45 | // Spanish 46 | 'En ligne', 47 | // French 48 | 'Na mreži', 49 | // Croatian 50 | ), 51 | 'idle': ( 52 | 'Idle', 53 | 'Inaktiv', 54 | // Danish 55 | 'Abwesend', 56 | // German 57 | 'Ausente', 58 | // Spanish 59 | 'Inactif', 60 | // French 61 | 'U mirovanju', 62 | // Croatian 63 | ), 64 | 'dnd': ( 65 | 'Do Not disturb', 66 | 'Vil ikke forstyrres', 67 | // Danish 68 | 'Bitte nicht stören', 69 | // German 70 | 'No molestar', 71 | // Spanish 72 | 'Ne pas déranger', 73 | // French 74 | 'Ne uznemiravaj', 75 | // Croatian 76 | ), 77 | 'streaming': ( 78 | 'Streaming', 79 | 'Streamer', 80 | // Danish 81 | 'Streamt', 82 | // German 83 | 'Transmitiendo', 84 | // Spanish 85 | 'En direct', 86 | // French 87 | ), 88 | 'invisible': ( 89 | 'Invisible', 90 | 'Usynlig', 91 | // Danish 92 | 'Unsichtbar', 93 | // German 94 | 'Nevidljiv/a', 95 | // Croatian 96 | ), 97 | 'offline': ( 98 | 'Offline', 99 | 'Desconectado', 100 | // Spanish 101 | 'Hors ligne', 102 | // French 103 | 'Izvan mreže', 104 | // Croatian 105 | ) 106 | ); 107 | 108 | @each $statusType, $statusList in $statusMap { 109 | $parsedItem: null; 110 | @each $status in $statusList { 111 | $parsedItem: $parsedItem + '[aria-label*="' + $status + '" i]'; 112 | } 113 | #{selector.append('.wrapper__44b0c', selector.simple-selectors($parsedItem))}, 114 | #{selector.append('.avatarWrapper', '[data-status="#{$statusType}"]')} .wrapper__44b0c { 115 | box-shadow: 0 0 calc(var(--glow-intensity) * 10px) var(--rs-#{$statusType}-color); 116 | } 117 | } 118 | 119 | // StatusEverywhere by Strencher 120 | #app-mount { 121 | .wrapper__44b0c.StatusEverywhere-avatar-chatAvatar { 122 | margin: 0; 123 | } 124 | .avatarWrapper { 125 | border-radius: var(--rs-avatar-shape); 126 | .pointerEvents-9SZWKj { 127 | stroke: var(--status-color) !important; 128 | &[width='30'] { 129 | width: calc(100% - 9px) !important; 130 | } 131 | } 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/addons/_serverrings.scss: -------------------------------------------------------------------------------- 1 | // Seperated to use individually, but is still included. 2 | 3 | :root { 4 | --server-unread-colour: rgb(255, 255, 255); 5 | --server-hover-colour: rgb(255, 255, 255); 6 | --server-selected-colour: var(--accent, rgb(0, 231, 169)); 7 | --server-spacing: 16px; 8 | --server-glow-intensity: var(--glow-intensity, 1); 9 | --server-ring-offset: 6px; 10 | } 11 | 12 | #app-mount { 13 | .folderGroup__48112 { 14 | --server-folder-offset: 6px; 15 | 16 | ul.stack_dbd263[role='group'] { 17 | height: auto !important; 18 | overflow: visible !important; 19 | .listItem__650eb { 20 | --server-folder-offset: 0px; 21 | } 22 | } 23 | } 24 | 25 | .scroller_ef3116 > div[style]:not([class]) { 26 | margin-bottom: var(--server-spacing); 27 | } 28 | 29 | // Container 30 | .listItem__650eb { 31 | width: 100%; 32 | margin-bottom: var(--server-spacing); 33 | [class*='pill'] { 34 | --__ring-size: calc( 35 | ((var(--server-icon-size, 45) * 1px) - 5px) + var(--server-folder-offset, 0px) + var(--server-ring-offset) 36 | ); 37 | left: 50%; 38 | top: 50%; 39 | transform: translate(-50%, -50%); 40 | width: var(--__ring-size); 41 | height: var(--__ring-size); 42 | overflow: visible; 43 | margin-left: -2px; 44 | .item__58105 { 45 | height: 100% !important; 46 | width: 100%; 47 | margin: 0; 48 | border-radius: 50%; 49 | background: transparent; 50 | border: 2px solid transparent; 51 | box-shadow: none; 52 | transform: none !important; 53 | transition: var(--transition); 54 | transition-property: box-shadow; 55 | } 56 | @for $i from 0 through 8 { 57 | span[style*='height: #{$i}'] { 58 | box-shadow: 0 59 | 0 60 | calc(var(--server-glow-intensity) * 15px) 61 | calc(var(--server-glow-intensity) * 5px) 62 | hsl(from var(--server-unread-colour) h s l / 0.25); 63 | border-color: hsl(from var(--server-unread-colour) h s l); 64 | } 65 | } 66 | // Hovered 67 | @for $i from 9 through 20 { 68 | span[style*='height: #{$i}'] { 69 | border-color: hsl(from var(--server-hover-colour) h s l); 70 | box-shadow: 0 71 | 0 72 | calc(var(--server-glow-intensity) * 15px) 73 | calc(var(--server-glow-intensity) * 5px) 74 | hsl(from var(--server-hover-colour) h s l / 0.25); 75 | } 76 | } 77 | // Selected 78 | @for $i from 21 through 40 { 79 | span[style*='height: #{$i}'] { 80 | transform: scale(1) !important; 81 | border-color: hsl(from var(--server-selected-colour) h s l); 82 | box-shadow: 0 83 | 0 84 | calc(var(--server-glow-intensity) * 15px) 85 | calc(var(--server-glow-intensity) * 5px) 86 | hsl(from var(--server-selected-colour) h s l / 0.25); 87 | } 88 | } 89 | } 90 | } 91 | 92 | // Active state 93 | .blobContainer_e5445c, 94 | .listItemWrapper_dfb2f8 { 95 | transition: var(--transition, 0.15s ease); 96 | transition-property: transform; 97 | &:active { 98 | transform: scale(0.9); 99 | } 100 | } 101 | 102 | .svg_cc5dd2 foreignObject { 103 | border-radius: 50%; 104 | mask: none !important; 105 | } 106 | } 107 | 108 | // Hide Broken Discoverable Servers Ring 109 | .pill__5bc7e { 110 | display: none; 111 | } 112 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | @use './addons/radialglow'; 2 | @use './addons/serverrings'; 3 | 4 | @use './theme/vars'; 5 | 6 | @use './theme/app'; 7 | @use './theme/serverlist'; 8 | @use './theme/sidebar'; 9 | @use './theme/chat'; 10 | @use './theme/members'; 11 | @use './theme/popups'; 12 | @use './theme/system'; 13 | -------------------------------------------------------------------------------- /src/root.scss: -------------------------------------------------------------------------------- 1 | /* Google Fonts */ 2 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap'); 3 | 4 | :root { 5 | /* 6 | * SoftX variables 7 | */ 8 | --background-image: url('https://i.imgur.com/Nglfni6.png'); /* Background image | URL MUST BE A DIRECT LINK (ending in .jpg, .jpeg, .png, .gif) */ 9 | --background-blur: 0px; /* Blur intensity of --background-image | Must end in px | Default: 0px */ 10 | 11 | --accent: hsl(164 100% 45%); /* Colour used around the app. | Any valid CSS unit. | Default: hsl(164 100% 45%) */ 12 | --accent-text: hsl(0 0 0%); /* Colour used on solid or high contrast accent backgrounds. | hsl(0 0 10%) */ 13 | 14 | --glow-intensity: 1; /* Intensity of the glow used around the app. | Set to 0 to disable the glow. | Decimals allowed | Default: 1 */ 15 | 16 | --members-width: 280px; /* Width of the members list. | Default: 280px */ 17 | --guilds-width: 95px; /* Width of the server list. | Default: 105px */ 18 | 19 | --server-icon-size: 46; /* Size of the servers inside the server list. | Default: 46px */ 20 | --chat-avatar-size: 40px; /* Size of the chat avatars. | Default: 32px */ 21 | 22 | --opacity: 0.85; /* Opacity of overall app. | Default: .85 */ 23 | 24 | --font: 'Inter'; /* Custom font | Default: 'Inter' */ 25 | 26 | /* 27 | * RadialStatus veriables 28 | */ 29 | --rs-small-spacing: 2px; /* Spacing between profile image and outer ring on small icons (e.g. member list) | Default: 2px */ 30 | --rs-medium-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout) | Default: 4px */ 31 | --rs-large-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout fullscreen) | Default: 4px */ 32 | 33 | --rs-small-width: 1.5px; /* Ring width (follows same sizing as above) | Default: 1.5px */ 34 | --rs-medium-width: 2px; /* Default: 2px */ 35 | --rs-large-width: 2px; /* Default: 2px */ 36 | 37 | /* Customizable colors */ 38 | --rs-online-color: #43b581; /* Default: #43b581 */ 39 | --rs-idle-color: #faa61a; /* Default: #faa61a */ 40 | --rs-dnd-color: #f04747; /* Default: #f04747 */ 41 | --rs-offline-color: #636b75; /* Default: #636b75 */ 42 | --rs-streaming-color: #643da7; /* Default: #643da7 */ 43 | --rs-invisible-color: #747f8d; /* Default: #747f8d */ 44 | --rs-phone-color: var(--rs-online-color); /* Color of the phone for mobile users | Default: var(--rs-online-color) */ 45 | 46 | --rs-phone-visible: block; /* Visibility of the phone for mobile users | Default: block */ 47 | } 48 | -------------------------------------------------------------------------------- /src/theme/_vars.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --softx-version: '2.0.0-alpha'; 3 | 4 | --transition: 0.15s ease; 5 | 6 | --chat-glow-intensity: var(--glow-intensity); 7 | --channel-glow-intensity: var(--glow-intensity); 8 | --members-glow-intensity: var(--glow-intensity); 9 | --input-glow-intensity: var(--glow-intensity); 10 | --server-glow-intensity: var(--glow-intensity); 11 | --talking-bar: rgb(var(--accent)); 12 | --talking-glow: rgb(var(--accent)); 13 | --foreground-blur: 20px; 14 | --foreground-brightness: 1; 15 | 16 | --shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.06); 17 | --shadow-lg: 0 20px 30px hsl(0 0% 0% / 0.1), 0 10px 20px hsl(0 0% 0% / 0.1); 18 | 19 | --bg-border: hsl(0 0% 5% / 0.75); 20 | --bg-primary: hsl(0 0% 10% / calc(var(--opacity) + 0.05)); 21 | --bg-secondary: hsl(0 0% 10% / calc(var(--opacity) + 0.075)); 22 | --bg-tertiary: hsl(0 0% 10% / calc(var(--opacity) + 0.125)); 23 | 24 | --fg-border: hsl(0 0% 100% / 0.15); 25 | --fg-primary: hsl(0 0% 100% / 0.075); 26 | --fg-secondary: hsl(0 0% 100% / 0.045); 27 | 28 | --toolbar-height: 64px; 29 | 30 | --chat-bubble-bg: hsl(0 0% 100% / 0.04); 31 | --chat-bubble-padding: 10px 14px; 32 | --chat-bubble-display: inline-block; 33 | 34 | --channel-unread-colour: hsl(0 0% 100%); 35 | --channel-pill-width: 3px; 36 | --channel-pill-height: 35%; 37 | 38 | --textbox-background: hsl(0 0% 7% / 0.7); 39 | --textbox-border: hsl(0 0% 100% / 0.05); 40 | --textbox-hover-border: hsl(0 0% 100% / 0.1); 41 | 42 | --chat-bottom-spacing: 16px; 43 | 44 | --server-size: calc(var(--server-icon-size) * 1px); 45 | 46 | // Discord variables 47 | --custom-guild-list-width: var(--guilds-width); 48 | --custom-member-list-width: var(--members-width); 49 | --custom-message-avatar-size: var(--chat-avatar-size); 50 | --custom-message-margin-horizontal: var(--space-xxl); 51 | --text-link: var(--accent) !important; 52 | --font-primary: var(--font, 'Whitney'); 53 | --font-display: var(--font, 'Whitney'); 54 | --background-mentioned: var(--accent); 55 | --background-message-hover: hsl(0 0% 100% / 0.02) !important; 56 | --guildbar-folder-size: var(--server-size); 57 | } 58 | -------------------------------------------------------------------------------- /src/theme/app/_app.scss: -------------------------------------------------------------------------------- 1 | // Wack ass text flickering 2 | html, 3 | span:not([class*='spinner_']):not([class*='spinnerItem']) { 4 | backface-visibility: hidden; 5 | } 6 | 7 | // Background 8 | body, 9 | #app-mount, 10 | .app__160d8 { 11 | background: transparent; 12 | } 13 | #app-mount .bg__960e4 { 14 | background-image: var(--background-image); 15 | background-color: transparent; 16 | background-attachment: var(--background-attachment, fixed); 17 | background-size: var(--background-size, cover); 18 | background-position: var(--background-position, center); 19 | filter: blur(var(--background-blur, 0px)) hue-rotate(var(--background-hue, 0deg)); 20 | } 21 | 22 | // Global app top border 23 | .content_c48ade::before { 24 | content: ''; 25 | position: absolute; 26 | z-index: 101; 27 | width: 100%; 28 | height: 1px; 29 | background: var(--bg-border); 30 | } 31 | 32 | ::selection { 33 | background: var(--accent); 34 | color: var(--accent-text); 35 | } 36 | -------------------------------------------------------------------------------- /src/theme/app/_titlebar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .bar_c38106 { 2 | background: var(--bg-primary); 3 | } 4 | -------------------------------------------------------------------------------- /src/theme/app/_toolbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .title_f75fb0 { 3 | background: var(--bg-primary); 4 | height: var(--toolbar-height); 5 | border-left: 1px solid var(--bg-border); 6 | border-bottom: 1px solid var(--bg-border); 7 | padding: 0 var(--space-lg); 8 | } 9 | .children__9293f::after { 10 | content: none; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/theme/app/_version.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .info__2debe .line__2debe:last-of-type:after { 3 | content: 'SoftX ' var(--softx-version); 4 | display: block; 5 | text-transform: none; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/theme/app/index.scss: -------------------------------------------------------------------------------- 1 | @forward './titlebar'; 2 | @forward './app'; 3 | @forward './toolbar'; 4 | @forward './version'; 5 | -------------------------------------------------------------------------------- /src/theme/assets/_icons.scss: -------------------------------------------------------------------------------- 1 | // Icons from: 2 | // https://heroicons.com/ 3 | // https://primer.style/octicons 4 | 5 | $svg: 'data:image/svg+xml; utf-8,'; 6 | 7 | $icon_cog: $svg + 8 | ''; 9 | 10 | $icon_paper-clip: $svg + 11 | ''; 12 | 13 | $icon_emoji-happy: $svg + 14 | ''; 15 | 16 | $icon_sparkles: $svg + 17 | ''; 18 | 19 | $icon_photograph: $svg + 20 | ''; 21 | 22 | $icon_gift: $svg + 23 | ''; 24 | 25 | $icon_bell: $svg + 26 | ''; 27 | 28 | $icon_pin: $svg + 29 | ''; 30 | 31 | $icon_users: $svg + 32 | ''; 33 | 34 | $icon_inbox: $svg + 35 | ''; 36 | 37 | $icon_chat-alt-2: $svg + 38 | ''; 39 | 40 | $icon_information-circle: $svg + 41 | ''; 42 | 43 | $icon_rss: $svg + 44 | ''; 45 | 46 | $icon_server: $svg + 47 | ''; 48 | 49 | $icon_check-circle: $svg + 50 | ''; 51 | 52 | $icon_exclamation-circle: $svg + 53 | ''; 54 | 55 | $icon_information-circle: $svg + 56 | ''; 57 | 58 | $icon_x-circle: $svg + 59 | ''; 60 | 61 | $icon_search: $svg + 62 | ''; 63 | 64 | $icon_tag: $svg + 65 | ''; 66 | 67 | $icon_user-remove: $svg + 68 | ''; 69 | 70 | $icon_triangle-right: $svg + 71 | ''; 72 | -------------------------------------------------------------------------------- /src/theme/assets/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './icons'; 2 | @forward './paths'; 3 | -------------------------------------------------------------------------------- /src/theme/assets/_paths.scss: -------------------------------------------------------------------------------- 1 | $path_cog: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'; 2 | 3 | $path_paper-clip: 'M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13'; 4 | 5 | $path_emoji-happy: 'M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'; 6 | 7 | $path_sparkles: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z'; 8 | 9 | $path_photograph: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'; 10 | 11 | $path_gift: 'M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7'; 12 | 13 | $path_bell: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'; 14 | 15 | $path_pin: 'M4.456.734a1.75 1.75 0 012.826.504l.613 1.327a3.081 3.081 0 002.084 1.707l2.454.584c1.332.317 1.8 1.972.832 2.94L11.06 10l3.72 3.72a.75.75 0 11-1.061 1.06L10 11.06l-2.204 2.205c-.968.968-2.623.5-2.94-.832l-.584-2.454a3.081 3.081 0 00-1.707-2.084l-1.327-.613a1.75 1.75 0 01-.504-2.826L4.456.734zM5.92 1.866a.25.25 0 00-.404-.072L1.794 5.516a.25.25 0 00.072.404l1.328.613A4.582 4.582 0 015.73 9.63l.584 2.454a.25.25 0 00.42.12l5.47-5.47a.25.25 0 00-.12-.42L9.63 5.73a4.581 4.581 0 01-3.098-2.537L5.92 1.866z'; 16 | 17 | $path_users: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'; 18 | 19 | $path_inbox: 'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'; 20 | 21 | $path_chat-alt-2: 'M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z'; 22 | 23 | $path_search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'; 24 | -------------------------------------------------------------------------------- /src/theme/chat/_bars.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .newMessagesBar__0f481 { 3 | background: hsl(from var(--accent) h s l / 0.1); 4 | backdrop-filter: blur(var(--foreground-blur)); 5 | color: var(--accent); 6 | left: 0; 7 | right: 0; 8 | border-radius: 0; 9 | border: none; 10 | border-bottom: 1px solid var(--bg-primary); 11 | height: auto; 12 | padding: 0; 13 | box-shadow: none; 14 | } 15 | .barButtonBase__0f481 { 16 | filter: drop-shadow(0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--accent) h s l / 0.3)) 17 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--accent) h s l / 0.2)); 18 | } 19 | .barButtonMain__0f481 { 20 | padding: var(--space-xs) var(--space-md); 21 | height: auto; 22 | } 23 | .barButtonAlt__0f481 { 24 | padding: var(--space-xs) var(--space-md); 25 | height: auto; 26 | background: transparent; 27 | border-radius: 0; 28 | font-weight: 400; 29 | &:hover { 30 | background: hsl(0 0% 100% / 0.05); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/theme/chat/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .chat_f75fb0 { 3 | background: transparent; 4 | border: none; 5 | ol.scrollerInner__36d07 { 6 | padding-bottom: var(--chat-bottom-spacing); 7 | } 8 | } 9 | .chatContent_f75fb0 { 10 | background: var(--bg-secondary); 11 | border-left: 1px solid var(--bg-border); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/chat/_dividers.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .divider__5126c { 3 | border: none; 4 | margin: 0; 5 | height: auto; 6 | justify-content: flex-start; 7 | padding: 0 16px 0 var(--custom-message-margin-horizontal); 8 | margin: 16px 0 8px; 9 | position: static; 10 | flex-direction: row-reverse; 11 | align-items: center; 12 | &::before { 13 | content: ''; 14 | height: 1px; 15 | display: block; 16 | width: 100%; 17 | } 18 | .content__908e2 { 19 | border-radius: 6px; 20 | margin: 0; 21 | padding: 8px 12px; 22 | } 23 | &:not(.isUnread__908e2) { 24 | &::before, 25 | .content__908e2 { 26 | background: var(--bg-border); 27 | } 28 | } 29 | &.isUnread__908e2 { 30 | &::before { 31 | order: 1; 32 | background: var(--red-500); 33 | } 34 | .content__908e2 { 35 | order: 2; 36 | margin-right: 12px; 37 | background: hsl(from var(--red-500) h s l / 0.1); 38 | text-shadow: 0 0 calc(var(--chat-glow-intensity) * 5px) hsl(from var(--red-500) h s l / 0.5); 39 | } 40 | } 41 | } 42 | .unreadPill__908e2 { 43 | position: relative; 44 | top: 0; 45 | left: 0; 46 | order: 0; 47 | padding: var(--space-xxs) var(--space-xs); 48 | border-radius: var(--radius-xs); 49 | height: auto; 50 | 51 | .unreadPillCap__908e2 { 52 | display: none; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/theme/chat/_message.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .message__5126c.mentioned__5126c { 3 | background: hsl(from var(--accent) h s l / 0.05); 4 | &::before { 5 | background: hsl(from var(--accent) h s l); 6 | } 7 | 8 | &:hover { 9 | background: hsl(from var(--accent) h s l / 0.075); 10 | } 11 | } 12 | 13 | .cozyMessage__5126c { 14 | .messageContent_c19a55:not(.repliedTextContent_c19a55):not(:empty) { 15 | background: var(--chat-bubble-bg); 16 | margin-left: var(----custom-message-margin-left-content-cozy); 17 | padding: var(--chat-bubble-padding); 18 | border-radius: var(--radius-xs); 19 | display: var(--chat-bubble-display); 20 | } 21 | } 22 | 23 | .wrapper_f61d60 { 24 | background: hsl(from var(--accent) h s l / 0.15); 25 | color: var(--accent); 26 | 27 | &.interactive:hover { 28 | background: hsl(from var(--accent) h s l); 29 | color: var(--accent-text); 30 | } 31 | } 32 | 33 | .embedWrapper_b7e1cb { 34 | background: var(--fg-primary); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/theme/chat/_textbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .form_f75fb0 { 3 | padding: 0 var(--space-md); 4 | } 5 | .channelTextArea_f75fb0, 6 | .channelTextArea__5126c { 7 | background: var(--textbox-background); 8 | border: 2px solid var(--textbox-border); 9 | border-radius: 6px; 10 | transition: var(--transition); 11 | transition-property: border-color, box-shadow; 12 | 13 | &:hover { 14 | border-color: var(--textbox-hover-border); 15 | } 16 | &:focus-within { 17 | border-color: hsl(from var(--accent) h s l); 18 | box-shadow: 0 0 calc(var(--input-glow-intensity) * 20px) calc(var(--input-glow-intensity) * 5px) 19 | hsl(from var(--accent) h s l / 0.25); 20 | } 21 | } 22 | .scrollableContainer__74017 { 23 | background: transparent; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/theme/chat/index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './textbox'; 3 | @forward './dividers'; 4 | @forward './bars'; 5 | @forward './message'; 6 | -------------------------------------------------------------------------------- /src/theme/members/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container_c8ffbb { 3 | background: var(--bg-primary); 4 | border-left: 1px solid var(--bg-border); 5 | } 6 | .members_c8ffbb { 7 | background: transparent; 8 | padding: 0; 9 | &::-webkit-scrollbar { 10 | display: none; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/members/_member.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .member_c8ffbb { 3 | background: transparent; 4 | max-width: 100%; 5 | margin-left: 0; 6 | border-radius: 0; 7 | &.selected__91a9d { 8 | .childContainer__91a9d { 9 | background: transparent; 10 | } 11 | .name__5d473 { 12 | text-shadow: 0 0 calc(var(--members-glow-intensity) * 10px) currentColor; 13 | overflow: visible; 14 | filter: none; 15 | &::before, 16 | &::after { 17 | content: ''; 18 | position: absolute; 19 | background: currentColor; 20 | pointer-events: none; 21 | z-index: 0; 22 | } 23 | &::before { 24 | top: 0; 25 | right: 0; 26 | bottom: 0; 27 | left: 0; 28 | opacity: 0.2; 29 | } 30 | &::after { 31 | top: 0; 32 | left: 0; 33 | width: 2px; 34 | height: 100%; 35 | box-shadow: 0 0 calc(var(--members-glow-intensity) * 15px) currentColor; 36 | } 37 | } 38 | .activityText__5d473 { 39 | color: #fff; 40 | z-index: 1; 41 | } 42 | } 43 | } 44 | .childContainer__91a9d { 45 | padding: var(--space-xs) var(--space-md); 46 | } 47 | .layout__91a9d { 48 | overflow: visible; 49 | position: initial; 50 | .name__91a9d, 51 | .content__91a9d, 52 | .username__5d473 { 53 | overflow: visible; 54 | } 55 | .avatar__91a9d { 56 | z-index: 1; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/theme/members/index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './member'; 3 | -------------------------------------------------------------------------------- /src/theme/popups/_moreActivePosts.scss: -------------------------------------------------------------------------------- 1 | #app-mount .popout__76f04 { 2 | background: var(--fg-primary); 3 | padding: 0; 4 | backdrop-filter: blur(var(--foreground-blur)); 5 | box-shadow: var(--shadow-lg); 6 | 7 | .title__76f04 { 8 | padding: var(--space-md); 9 | margin: 0; 10 | } 11 | 12 | .row__76f04 { 13 | margin: 0; 14 | border-radius: 0; 15 | padding: var(--space-sm); 16 | } 17 | 18 | .more__76f04 { 19 | margin-top: 0; 20 | border-color: var(--fg-border); 21 | padding: var(--space-sm); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/theme/popups/index.scss: -------------------------------------------------------------------------------- 1 | @forward './moreActivePosts'; 2 | -------------------------------------------------------------------------------- /src/theme/serverlist/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .guilds_c48ade { 3 | background: var(--bg-primary); 4 | border-right: 1px solid var(--bg-border); 5 | margin-bottom: var(--custom-app-panels-height); 6 | } 7 | 8 | div.stack_dbd263:not([role='group']) { 9 | gap: 0 !important; 10 | } 11 | 12 | .guildSeparator__252b6 { 13 | background: var(--bg-border); 14 | } 15 | 16 | .itemsContainer_ef3116 > div.stack_dbd263 { 17 | padding-top: var(--server-spacing, 16px); 18 | } 19 | 20 | .unreadMentionsIndicatorBottom_ef3116, 21 | .unreadMentionsIndicatorTop_ef3116 { 22 | width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2); 23 | padding: calc(var(--custom-guild-list-padding) / 2); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/theme/serverlist/_folder.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .folderGroupBackground__48112 { 3 | left: 50%; 4 | translate: -50%; 5 | width: var(--server-size); 6 | } 7 | // .folderIconWrapper__48112 { 8 | // height: var(--server-size); 9 | // width: var(--server-size); 10 | // } 11 | // .folderPreview__48112 { 12 | // height: calc(var(--server-size) / 1.5); 13 | // width: calc(var(--server-size) / 1.5); 14 | // display: grid; 15 | // grid-template-columns: 1fr 1fr; 16 | // grid-template-rows: 1fr 1fr; 17 | // margin: auto; 18 | // } 19 | // .folderPreviewGuildIcon__48112 { 20 | // width: 100%; 21 | // height: auto; 22 | // } 23 | // .folderPreviewWrapper__48112 { 24 | // padding: 0; 25 | // display: flex; 26 | // height: var(--server-size); 27 | // width: var(--server-size); 28 | // } 29 | } 30 | -------------------------------------------------------------------------------- /src/theme/serverlist/_header.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .header_f37cb1 { 3 | height: var(--toolbar-height); 4 | border-bottom: 1px solid var(--bg-border); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/theme/serverlist/_server.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // .blobContainer_e5445c { 3 | // height: var(--server-size); 4 | // width: var(--server-size); 5 | // } 6 | // .wrapper_cc5dd2 { 7 | // width: var(--server-size) !important; 8 | // height: var(--server-size) !important; 9 | // } 10 | // .svg_cc5dd2 { 11 | // top: 0; 12 | // left: 0; 13 | // height: var(--server-size); 14 | // width: var(--server-size); 15 | // } 16 | } 17 | -------------------------------------------------------------------------------- /src/theme/serverlist/index.scss: -------------------------------------------------------------------------------- 1 | @forward './folder'; 2 | @forward './container'; 3 | @forward './server'; 4 | @forward './header'; 5 | -------------------------------------------------------------------------------- /src/theme/sidebar/_channel.scss: -------------------------------------------------------------------------------- 1 | @use '../assets/icons'; 2 | 3 | #app-mount { 4 | .wrapper__2ea32 { 5 | margin: 0; 6 | padding: 0; 7 | &.modeUnreadImportant__2ea32 { 8 | .icon__2ea32, 9 | .name__2ea32 { 10 | color: var(--channel-unread-colour); 11 | filter: drop-shadow( 12 | 0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--channel-unread-colour) h s l / 0.3) 13 | ) 14 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--channel-unread-colour) h s l / 0.2)); 15 | } 16 | } 17 | &.modeSelected__2ea32 { 18 | .link__2ea32 { 19 | background: hsl(from var(--accent) h s l / 0.1); 20 | &::before { 21 | content: ''; 22 | position: absolute; 23 | left: 0; 24 | height: 100%; 25 | width: var(--channel-pill-width); 26 | top: 0; 27 | background: var(--accent); 28 | box-shadow: 0 0 calc(var(--channel-glow-intensity) * 15px) calc(var(--channel-glow-intensity) * 5px) 29 | hsl(from var(--accent) h s l / 0.2); 30 | } 31 | } 32 | .icon__2ea32, 33 | .name__2ea32 { 34 | color: var(--accent); 35 | filter: drop-shadow(0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--accent) h s l / 0.3)) 36 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--accent) h s l / 0.2)); 37 | } 38 | } 39 | } 40 | .link__2ea32 { 41 | padding: var(--space-xs) var(--space-md); 42 | border-radius: 0; 43 | } 44 | 45 | .typeThread__2ea32 .link__2ea32 { 46 | padding-left: calc(var(--space-md) * 4); 47 | &::before { 48 | content: ''; 49 | width: 24px; 50 | height: 24px; 51 | mask: url(icons.$icon_triangle-right); 52 | background: var(--channels-default); 53 | top: 50%; 54 | left: calc(var(--space-md) * 2); 55 | translate: 0 -50%; 56 | } 57 | } 58 | .spine__5b40b, 59 | .spineBorder__5b40b { 60 | display: none; 61 | } 62 | 63 | .unread__2ea32 { 64 | left: 0; 65 | height: 100%; 66 | top: 50%; 67 | translate: 0 -50%; 68 | margin-top: 0; 69 | border-radius: 0; 70 | width: var(--channel-pill-width); 71 | background: var(--channel-unread-colour); 72 | height: var(--channel-pill-height); 73 | box-shadow: 0 0 calc(var(--channel-glow-intensity) * 10px) calc(var(--channel-glow-intensity) * 2px) 74 | hsl(from var(--channel-unread-colour) h s l / 0.5); 75 | } 76 | 77 | // Forms ([number] new) 78 | .channelInfo_c69b6d { 79 | display: block; 80 | .text-xs\/semibold_cf4812 { 81 | color: var(--accent) !important; 82 | font-weight: normal; 83 | filter: drop-shadow(0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--accent) h s l / 0.3)) 84 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--accent) h s l / 0.2)); 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/theme/sidebar/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .sidebar_c48ade { 3 | border-radius: 0; 4 | &::after { 5 | content: none; 6 | } 7 | 8 | .scroller__629e4::-webkit-scrollbar { 9 | display: none; 10 | } 11 | } 12 | .sidebarList_c48ade { 13 | border-radius: 0; 14 | border: none; 15 | padding-bottom: 0; 16 | margin-bottom: var(--custom-app-panels-height); 17 | } 18 | .container__2637a { 19 | background: var(--bg-primary); 20 | padding-bottom: 0; 21 | } 22 | 23 | // DMs 24 | .privateChannels__35e86 { 25 | background: var(--bg-primary); 26 | 27 | .scroller__99e7c { 28 | background: transparent; 29 | margin-bottom: 0; 30 | 31 | &::-webkit-scrollbar { 32 | display: none; 33 | } 34 | } 35 | } 36 | .sectionDivider__35e86 { 37 | background: var(--bg-border); 38 | margin: 0; 39 | } 40 | .content__99f8c > div[aria-hidden='true']:first-child { 41 | display: none; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/theme/sidebar/_directmessage.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .searchBar__35e86 { 3 | height: var(--toolbar-height); 4 | border-bottom: 1px solid var(--bg-border); 5 | padding: 0; 6 | .button__201d5 { 7 | height: var(--toolbar-height); 8 | border-radius: 0; 9 | background: transparent; 10 | } 11 | } 12 | 13 | // Friends, Nitro, Shop 14 | .channel__972a0:not(.dm__972a0) { 15 | max-width: unset; 16 | margin: 0; 17 | padding: 0; 18 | border-radius: 0; 19 | .link__972a0 { 20 | padding: var(--space-md); 21 | } 22 | } 23 | 24 | .privateChannelsHeaderContainer__99e7c { 25 | padding: var(--space-md); 26 | height: auto; 27 | } 28 | 29 | .interactive_bf202d { 30 | // Unread 31 | &:not(.selected_bf202d) .layout__20a53.highlighted__20a53 { 32 | &::before { 33 | content: ''; 34 | width: var(--channel-pill-width); 35 | height: var(--channel-pill-height); 36 | background: var(--channel-unread-colour); 37 | left: 0; 38 | position: absolute; 39 | filter: drop-shadow( 40 | 0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--channel-unread-colour) h s l / 0.3) 41 | ) 42 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--channel-unread-colour) h s l / 0.2)); 43 | } 44 | .nameAndDecorators__20a53 { 45 | filter: drop-shadow( 46 | 0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--channel-unread-colour) h s l / 0.3) 47 | ) 48 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--channel-unread-colour) h s l / 0.2)); 49 | } 50 | } 51 | // Selected 52 | &.selected_bf202d { 53 | background: hsl(from var(--accent) h s l / 0.1); 54 | &::before { 55 | content: ''; 56 | position: absolute; 57 | left: 0; 58 | height: 100%; 59 | width: var(--channel-pill-width); 60 | background: var(--accent); 61 | box-shadow: 0 0 calc(var(--channel-glow-intensity) * 15px) calc(var(--channel-glow-intensity) * 5px) 62 | hsl(from var(--accent) h s l / 0.2); 63 | } 64 | 65 | .nameAndDecorators__20a53, 66 | .linkButtonIcon__972a0 { 67 | color: hsl(from var(--accent) h s l); 68 | filter: drop-shadow(0 0 calc(var(--channel-glow-intensity) * 5px) hsl(from var(--accent) h s l / 0.3)) 69 | drop-shadow(0 0 calc(var(--channel-glow-intensity) * 2px) hsl(from var(--accent) h s l / 0.2)); 70 | } 71 | .text_c9d15c { 72 | color: hsl(from var(--accent) h s l); 73 | opacity: 0.85; 74 | } 75 | } 76 | } 77 | .dm__972a0 { 78 | margin: 0; 79 | border-radius: 0; 80 | padding: 0; 81 | } 82 | 83 | .link__972a0 { 84 | padding: var(--space-xs) var(--space-md); 85 | 86 | .subText__20a53, 87 | .text_c9d15c { 88 | overflow: visible; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/theme/sidebar/_panels.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .panels_c48ade { 3 | bottom: 0; 4 | left: 0; 5 | border-radius: 0; 6 | width: 100%; 7 | border: none; 8 | border-top: 1px solid var(--bg-border); 9 | background: var(--bg-primary); 10 | } 11 | 12 | .activityPanel_c48ade { 13 | background: transparent; 14 | border-bottom: 1px solid var(--bg-border); 15 | } 16 | 17 | // Connected voice 18 | .container_e131a9 { 19 | padding: var(--space-md); 20 | margin: 0; 21 | border-color: var(--bg-border); 22 | } 23 | 24 | // User area 25 | .container__37e49 { 26 | padding: var(--space-md); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/theme/sidebar/index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './panels'; 3 | @forward './channel'; 4 | @forward './directmessage'; 5 | -------------------------------------------------------------------------------- /src/theme/system/_windows.scss: -------------------------------------------------------------------------------- 1 | #app-mount .winButtonsWithDivider_c38106 { 2 | gap: 0; 3 | &::before { 4 | height: var(--custom-app-top-bar-height); 5 | border-left-color: var(--bg-border); 6 | margin: 0; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/system/index.scss: -------------------------------------------------------------------------------- 1 | @forward './windows'; 2 | --------------------------------------------------------------------------------