├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── bug-report.md │ └── bug_report.md └── workflows │ └── compile.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist └── iPadOS.theme.css ├── package-lock.json ├── package.json ├── powercord_manifest.json ├── scripts ├── build.js ├── compile.js ├── config.json └── dev.js └── src ├── _base.scss ├── _dark.scss ├── _keyframes.scss ├── _light.scss ├── _root.scss ├── _theme.scss ├── app ├── _app.scss ├── _font.scss ├── _index.scss ├── _status.scss ├── _toolbar.scss └── _tooltips.scss ├── assets ├── _icons.scss ├── _illustrations.scss └── _index.scss ├── bd ├── _index.scss └── _list.scss ├── channels ├── _channel.scss ├── _container.scss ├── _dms.scss ├── _group.scss ├── _header.scss ├── _index.scss ├── _panels.scss └── _voice.scss ├── chat ├── _bars.scss ├── _container.scss ├── _divider.scss ├── _index.scss ├── _message.scss ├── _placeholder.scss ├── _textarea.scss └── _threads.scss ├── guilds ├── _container.scss ├── _folder.scss ├── _index.scss └── _server.scss ├── inputs ├── _button.scss ├── _checkbox.scss ├── _index.scss ├── _input.scss ├── _radiogroup.scss ├── _select.scss └── _slider.scss ├── main.scss ├── members ├── _container.scss ├── _header.scss ├── _index.scss └── _member.scss ├── modals ├── _addjoinserver.scss ├── _index.scss ├── _modal.scss ├── _upload.scss └── _userprofile.scss ├── pages ├── _friends.scss ├── _index.scss └── _nitro.scss ├── platform ├── _index.scss ├── _osx.scss └── _windows.scss ├── popouts ├── _autocomplete.scss ├── _inboxpinned.scss ├── _index.scss ├── _menu.scss ├── _searchbox.scss ├── _searchresults.scss ├── _servermenu.scss ├── _threadlist.scss └── _userpopout.scss ├── responsive ├── _index.scss └── _small.scss └── settings ├── _container.scss ├── _content.scss ├── _index.scss ├── _serversettings.scss ├── _sidebar.scss └── _usersettings.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 | 10 | **Describe the bug** 11 | *((A clear and concise description of what the bug is))* 12 | 13 | **To Reproduce** 14 | *((Steps to reproduce the behavior))* 15 | 16 | **Screenshots** 17 | *((If applicable, add screenshots to help explain your problem))* 18 | 19 | **Infomation (please complete the following information):** 20 | Discord channel: *((Stable/PTB/Canary))* 21 | OS: *((Windows/Linux/OSX))* 22 | Mod: *((BetterDiscord/Powercord))* 23 | Discord language: *((Your language))* 24 | 25 | **Additional context** 26 | *((Add any other context about the problem here. Remove if not applicable.))* 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Something needs fixing 4 | title: "[BUG] Bug title" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug:** 11 | *((A clear and concise description of what the bug is))* 12 | 13 | **To Reproduce:** 14 | *((Steps to reproduce the behavior))* 15 | 16 | **Screenshots:** 17 | *((If applicable, add screenshots to help explain your problem))* 18 | 19 | **Infomation (please complete the following information):** 20 | Discord channel: *((Stable/PTB/Canary))* 21 | OS: *((Windows/Linux/OSX))* 22 | Mod: *((BetterDiscord/Powercord/Vizality))* 23 | Discord language: *((Your language))* 24 | 25 | **Additional context:** 26 | *((Add any other context about the problem here.))* 27 | -------------------------------------------------------------------------------- /.github/workflows/compile.yml: -------------------------------------------------------------------------------- 1 | name: 'Compile SCSS' 2 | 3 | on: 'push' 4 | 5 | jobs: 6 | build: 7 | name: 'Build CSS' 8 | runs-on: 'ubuntu-latest' 9 | steps: 10 | - name: 'Checkout Repo' 11 | uses: 'actions/checkout@v2' 12 | - name: 'Setup NodeJS' 13 | uses: 'actions/setup-node@v1' 14 | with: 15 | node-version: 12 16 | - name: 'Clean install of dependencies' 17 | run: 'npm ci' 18 | - name: 'Run build script' 19 | run: 'npm run build' 20 | - name: 'Deploy' 21 | uses: 'peaceiris/actions-gh-pages@v3' 22 | with: 23 | github_token: ${{ secrets.GITHUB_TOKEN }} 24 | publish_branch: 'deploy' 25 | publish_dir: './dist' -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | So, you're looking to contribute? Nice! 2 | 3 | This will help you get started. 4 | 5 | ## Prerequisites 6 | - Basic knowledge of NodeJS. 7 | - Basic knowledge of SCSS/CSS. 8 | - Basic knowledge of Git/GitHub. 9 | - Basic knowledge of the terminal/command prompt. 10 | 11 | Install Dependencies: 12 | Open a terminal/command prompt and use the following command: `npm install` in the iPadOS folder. 13 | 14 | ## Development 15 | Run the `dev` script with: `npm run dev`. 16 | This will watch for changes inside the `/src` folder and then auto compile them into your BetterDiscord themes folder. 17 | 18 | ## Deploying 19 | Simply push your changes to the `main` branch and make a pull request. 20 | If all is well you PR will be accepted and merged with the `main` branch. 21 | 22 | This will then trigger an action to compile the `/src/_base.css` to the `deploy` branch. -------------------------------------------------------------------------------- /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 | ## iPadOS 2 | Discord redesigned to be simplified. Design by [jacktompsett](https://www.behance.net/jacktompsett) on Behance. 3 | 4 | - - - 5 | BetterDiscord Download: Soon:tm: 6 | Powercord Install: `git clone https://github.com/DiscordStyles/iPadOS` 7 | - - - 8 | 9 | Server Chat 10 | ![Server Chat](https://i.imgur.com/SVo1SN4.png) 11 | 12 | ## Contributing 13 | 14 | Looking to contribute to iPadOS theme? Read the the [contributing.md](https://github.com/DiscordStyles/iPadOS/blob/master/CONTRIBUTING.md) file. 15 | 16 | ## License 17 | 18 | See the [LICENSE](https://github.com/DiscordStyles/iPadOS/blob/master/LICENSE.md) file for license rights and limitations (MIT). -------------------------------------------------------------------------------- /dist/iPadOS.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name iPadOS 3 | * @author Gibbu#1211 4 | * @authorId 174868361040232448 5 | * @version 0.1.0 6 | * @invite TeRQEPb 7 | * @description Discord redesigned to be simplified. Design by jacktompsett on Behance. 8 | * @source https://github.com/DiscordStyles/iPadOS 9 | */ 10 | 11 | /* Poppins Google Font */ 12 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 13 | 14 | /* iPadOS base css */ 15 | @import url('https://discordstyles.github.io/iPadOS/dist/iPadOS.css'); 16 | 17 | /** 18 | * You can view more variables to customize here: https://github.com/DiscordStyles/iPadOS/blob/main/src/base/_root.scss 19 | * Simply copy the variable and value below inside the :root {} below 20 | */ 21 | :root { 22 | --accent: 84, 116, 230; 23 | --font: 'Poppins'; 24 | } -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ipados", 3 | "version": "1.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "ipados", 9 | "version": "1.0.0", 10 | "license": "MIT", 11 | "dependencies": { 12 | "autoprefixer": "^10.3.7", 13 | "postcss": "^8.3.9", 14 | "sass": "^1.42.1" 15 | }, 16 | "devDependencies": { 17 | "chokidar": "^3.5.2" 18 | } 19 | }, 20 | "node_modules/anymatch": { 21 | "version": "3.1.2", 22 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", 23 | "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", 24 | "dependencies": { 25 | "normalize-path": "^3.0.0", 26 | "picomatch": "^2.0.4" 27 | }, 28 | "engines": { 29 | "node": ">= 8" 30 | } 31 | }, 32 | "node_modules/autoprefixer": { 33 | "version": "10.3.7", 34 | "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz", 35 | "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==", 36 | "dependencies": { 37 | "browserslist": "^4.17.3", 38 | "caniuse-lite": "^1.0.30001264", 39 | "fraction.js": "^4.1.1", 40 | "normalize-range": "^0.1.2", 41 | "picocolors": "^0.2.1", 42 | "postcss-value-parser": "^4.1.0" 43 | }, 44 | "bin": { 45 | "autoprefixer": "bin/autoprefixer" 46 | }, 47 | "engines": { 48 | "node": "^10 || ^12 || >=14" 49 | }, 50 | "funding": { 51 | "type": "opencollective", 52 | "url": "https://opencollective.com/postcss/" 53 | }, 54 | "peerDependencies": { 55 | "postcss": "^8.1.0" 56 | } 57 | }, 58 | "node_modules/binary-extensions": { 59 | "version": "2.2.0", 60 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 61 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", 62 | "engines": { 63 | "node": ">=8" 64 | } 65 | }, 66 | "node_modules/braces": { 67 | "version": "3.0.2", 68 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 69 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 70 | "dependencies": { 71 | "fill-range": "^7.0.1" 72 | }, 73 | "engines": { 74 | "node": ">=8" 75 | } 76 | }, 77 | "node_modules/browserslist": { 78 | "version": "4.17.4", 79 | "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.4.tgz", 80 | "integrity": "sha512-Zg7RpbZpIJRW3am9Lyckue7PLytvVxxhJj1CaJVlCWENsGEAOlnlt8X0ZxGRPp7Bt9o8tIRM5SEXy4BCPMJjLQ==", 81 | "dependencies": { 82 | "caniuse-lite": "^1.0.30001265", 83 | "electron-to-chromium": "^1.3.867", 84 | "escalade": "^3.1.1", 85 | "node-releases": "^2.0.0", 86 | "picocolors": "^1.0.0" 87 | }, 88 | "bin": { 89 | "browserslist": "cli.js" 90 | }, 91 | "engines": { 92 | "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" 93 | }, 94 | "funding": { 95 | "type": "opencollective", 96 | "url": "https://opencollective.com/browserslist" 97 | } 98 | }, 99 | "node_modules/browserslist/node_modules/picocolors": { 100 | "version": "1.0.0", 101 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 102 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 103 | }, 104 | "node_modules/caniuse-lite": { 105 | "version": "1.0.30001269", 106 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001269.tgz", 107 | "integrity": "sha512-UOy8okEVs48MyHYgV+RdW1Oiudl1H6KolybD6ZquD0VcrPSgj25omXO1S7rDydjpqaISCwA8Pyx+jUQKZwWO5w==", 108 | "funding": { 109 | "type": "opencollective", 110 | "url": "https://opencollective.com/browserslist" 111 | } 112 | }, 113 | "node_modules/chokidar": { 114 | "version": "3.5.2", 115 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", 116 | "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", 117 | "dependencies": { 118 | "anymatch": "~3.1.2", 119 | "braces": "~3.0.2", 120 | "glob-parent": "~5.1.2", 121 | "is-binary-path": "~2.1.0", 122 | "is-glob": "~4.0.1", 123 | "normalize-path": "~3.0.0", 124 | "readdirp": "~3.6.0" 125 | }, 126 | "engines": { 127 | "node": ">= 8.10.0" 128 | }, 129 | "optionalDependencies": { 130 | "fsevents": "~2.3.2" 131 | } 132 | }, 133 | "node_modules/electron-to-chromium": { 134 | "version": "1.3.871", 135 | "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.871.tgz", 136 | "integrity": "sha512-qcLvDUPf8DSIMWarHT2ptgcqrYg62n3vPA7vhrOF24d8UNzbUBaHu2CySiENR3nEDzYgaN60071t0F6KLYMQ7Q==" 137 | }, 138 | "node_modules/escalade": { 139 | "version": "3.1.1", 140 | "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", 141 | "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", 142 | "engines": { 143 | "node": ">=6" 144 | } 145 | }, 146 | "node_modules/fill-range": { 147 | "version": "7.0.1", 148 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 149 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 150 | "dependencies": { 151 | "to-regex-range": "^5.0.1" 152 | }, 153 | "engines": { 154 | "node": ">=8" 155 | } 156 | }, 157 | "node_modules/fraction.js": { 158 | "version": "4.1.1", 159 | "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz", 160 | "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==", 161 | "engines": { 162 | "node": "*" 163 | }, 164 | "funding": { 165 | "type": "patreon", 166 | "url": "https://www.patreon.com/infusion" 167 | } 168 | }, 169 | "node_modules/fsevents": { 170 | "version": "2.3.2", 171 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 172 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 173 | "hasInstallScript": true, 174 | "optional": true, 175 | "os": [ 176 | "darwin" 177 | ], 178 | "engines": { 179 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 180 | } 181 | }, 182 | "node_modules/glob-parent": { 183 | "version": "5.1.2", 184 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 185 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 186 | "dependencies": { 187 | "is-glob": "^4.0.1" 188 | }, 189 | "engines": { 190 | "node": ">= 6" 191 | } 192 | }, 193 | "node_modules/is-binary-path": { 194 | "version": "2.1.0", 195 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 196 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 197 | "dependencies": { 198 | "binary-extensions": "^2.0.0" 199 | }, 200 | "engines": { 201 | "node": ">=8" 202 | } 203 | }, 204 | "node_modules/is-extglob": { 205 | "version": "2.1.1", 206 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 207 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 208 | "engines": { 209 | "node": ">=0.10.0" 210 | } 211 | }, 212 | "node_modules/is-glob": { 213 | "version": "4.0.3", 214 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 215 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 216 | "dependencies": { 217 | "is-extglob": "^2.1.1" 218 | }, 219 | "engines": { 220 | "node": ">=0.10.0" 221 | } 222 | }, 223 | "node_modules/is-number": { 224 | "version": "7.0.0", 225 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 226 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 227 | "engines": { 228 | "node": ">=0.12.0" 229 | } 230 | }, 231 | "node_modules/nanoid": { 232 | "version": "3.1.30", 233 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", 234 | "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", 235 | "bin": { 236 | "nanoid": "bin/nanoid.cjs" 237 | }, 238 | "engines": { 239 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 240 | } 241 | }, 242 | "node_modules/node-releases": { 243 | "version": "2.0.0", 244 | "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.0.tgz", 245 | "integrity": "sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==" 246 | }, 247 | "node_modules/normalize-path": { 248 | "version": "3.0.0", 249 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 250 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 251 | "engines": { 252 | "node": ">=0.10.0" 253 | } 254 | }, 255 | "node_modules/normalize-range": { 256 | "version": "0.1.2", 257 | "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", 258 | "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", 259 | "engines": { 260 | "node": ">=0.10.0" 261 | } 262 | }, 263 | "node_modules/picocolors": { 264 | "version": "0.2.1", 265 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", 266 | "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==" 267 | }, 268 | "node_modules/picomatch": { 269 | "version": "2.3.0", 270 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", 271 | "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", 272 | "engines": { 273 | "node": ">=8.6" 274 | }, 275 | "funding": { 276 | "url": "https://github.com/sponsors/jonschlinkert" 277 | } 278 | }, 279 | "node_modules/postcss": { 280 | "version": "8.3.9", 281 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz", 282 | "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==", 283 | "dependencies": { 284 | "nanoid": "^3.1.28", 285 | "picocolors": "^0.2.1", 286 | "source-map-js": "^0.6.2" 287 | }, 288 | "engines": { 289 | "node": "^10 || ^12 || >=14" 290 | }, 291 | "funding": { 292 | "type": "opencollective", 293 | "url": "https://opencollective.com/postcss/" 294 | } 295 | }, 296 | "node_modules/postcss-value-parser": { 297 | "version": "4.1.0", 298 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", 299 | "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" 300 | }, 301 | "node_modules/readdirp": { 302 | "version": "3.6.0", 303 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 304 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 305 | "dependencies": { 306 | "picomatch": "^2.2.1" 307 | }, 308 | "engines": { 309 | "node": ">=8.10.0" 310 | } 311 | }, 312 | "node_modules/sass": { 313 | "version": "1.43.2", 314 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.2.tgz", 315 | "integrity": "sha512-DncYhjl3wBaPMMJR0kIUaH3sF536rVrOcqqVGmTZHQRRzj7LQlyGV7Mb8aCKFyILMr5VsPHwRYtyKpnKYlmQSQ==", 316 | "dependencies": { 317 | "chokidar": ">=3.0.0 <4.0.0" 318 | }, 319 | "bin": { 320 | "sass": "sass.js" 321 | }, 322 | "engines": { 323 | "node": ">=8.9.0" 324 | } 325 | }, 326 | "node_modules/source-map-js": { 327 | "version": "0.6.2", 328 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", 329 | "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==", 330 | "engines": { 331 | "node": ">=0.10.0" 332 | } 333 | }, 334 | "node_modules/to-regex-range": { 335 | "version": "5.0.1", 336 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 337 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 338 | "dependencies": { 339 | "is-number": "^7.0.0" 340 | }, 341 | "engines": { 342 | "node": ">=8.0" 343 | } 344 | } 345 | }, 346 | "dependencies": { 347 | "anymatch": { 348 | "version": "3.1.2", 349 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", 350 | "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", 351 | "requires": { 352 | "normalize-path": "^3.0.0", 353 | "picomatch": "^2.0.4" 354 | } 355 | }, 356 | "autoprefixer": { 357 | "version": "10.3.7", 358 | "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz", 359 | "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==", 360 | "requires": { 361 | "browserslist": "^4.17.3", 362 | "caniuse-lite": "^1.0.30001264", 363 | "fraction.js": "^4.1.1", 364 | "normalize-range": "^0.1.2", 365 | "picocolors": "^0.2.1", 366 | "postcss-value-parser": "^4.1.0" 367 | } 368 | }, 369 | "binary-extensions": { 370 | "version": "2.2.0", 371 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 372 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" 373 | }, 374 | "braces": { 375 | "version": "3.0.2", 376 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 377 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 378 | "requires": { 379 | "fill-range": "^7.0.1" 380 | } 381 | }, 382 | "browserslist": { 383 | "version": "4.17.4", 384 | "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.4.tgz", 385 | "integrity": "sha512-Zg7RpbZpIJRW3am9Lyckue7PLytvVxxhJj1CaJVlCWENsGEAOlnlt8X0ZxGRPp7Bt9o8tIRM5SEXy4BCPMJjLQ==", 386 | "requires": { 387 | "caniuse-lite": "^1.0.30001265", 388 | "electron-to-chromium": "^1.3.867", 389 | "escalade": "^3.1.1", 390 | "node-releases": "^2.0.0", 391 | "picocolors": "^1.0.0" 392 | }, 393 | "dependencies": { 394 | "picocolors": { 395 | "version": "1.0.0", 396 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 397 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 398 | } 399 | } 400 | }, 401 | "caniuse-lite": { 402 | "version": "1.0.30001269", 403 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001269.tgz", 404 | "integrity": "sha512-UOy8okEVs48MyHYgV+RdW1Oiudl1H6KolybD6ZquD0VcrPSgj25omXO1S7rDydjpqaISCwA8Pyx+jUQKZwWO5w==" 405 | }, 406 | "chokidar": { 407 | "version": "3.5.2", 408 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", 409 | "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", 410 | "requires": { 411 | "anymatch": "~3.1.2", 412 | "braces": "~3.0.2", 413 | "fsevents": "~2.3.2", 414 | "glob-parent": "~5.1.2", 415 | "is-binary-path": "~2.1.0", 416 | "is-glob": "~4.0.1", 417 | "normalize-path": "~3.0.0", 418 | "readdirp": "~3.6.0" 419 | } 420 | }, 421 | "electron-to-chromium": { 422 | "version": "1.3.871", 423 | "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.871.tgz", 424 | "integrity": "sha512-qcLvDUPf8DSIMWarHT2ptgcqrYg62n3vPA7vhrOF24d8UNzbUBaHu2CySiENR3nEDzYgaN60071t0F6KLYMQ7Q==" 425 | }, 426 | "escalade": { 427 | "version": "3.1.1", 428 | "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", 429 | "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==" 430 | }, 431 | "fill-range": { 432 | "version": "7.0.1", 433 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 434 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 435 | "requires": { 436 | "to-regex-range": "^5.0.1" 437 | } 438 | }, 439 | "fraction.js": { 440 | "version": "4.1.1", 441 | "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz", 442 | "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==" 443 | }, 444 | "fsevents": { 445 | "version": "2.3.2", 446 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 447 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 448 | "optional": true 449 | }, 450 | "glob-parent": { 451 | "version": "5.1.2", 452 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 453 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 454 | "requires": { 455 | "is-glob": "^4.0.1" 456 | } 457 | }, 458 | "is-binary-path": { 459 | "version": "2.1.0", 460 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 461 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 462 | "requires": { 463 | "binary-extensions": "^2.0.0" 464 | } 465 | }, 466 | "is-extglob": { 467 | "version": "2.1.1", 468 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 469 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" 470 | }, 471 | "is-glob": { 472 | "version": "4.0.3", 473 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 474 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 475 | "requires": { 476 | "is-extglob": "^2.1.1" 477 | } 478 | }, 479 | "is-number": { 480 | "version": "7.0.0", 481 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 482 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" 483 | }, 484 | "nanoid": { 485 | "version": "3.1.30", 486 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", 487 | "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==" 488 | }, 489 | "node-releases": { 490 | "version": "2.0.0", 491 | "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.0.tgz", 492 | "integrity": "sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==" 493 | }, 494 | "normalize-path": { 495 | "version": "3.0.0", 496 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 497 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" 498 | }, 499 | "normalize-range": { 500 | "version": "0.1.2", 501 | "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", 502 | "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=" 503 | }, 504 | "picocolors": { 505 | "version": "0.2.1", 506 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", 507 | "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==" 508 | }, 509 | "picomatch": { 510 | "version": "2.3.0", 511 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", 512 | "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==" 513 | }, 514 | "postcss": { 515 | "version": "8.3.9", 516 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz", 517 | "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==", 518 | "requires": { 519 | "nanoid": "^3.1.28", 520 | "picocolors": "^0.2.1", 521 | "source-map-js": "^0.6.2" 522 | } 523 | }, 524 | "postcss-value-parser": { 525 | "version": "4.1.0", 526 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", 527 | "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" 528 | }, 529 | "readdirp": { 530 | "version": "3.6.0", 531 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 532 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 533 | "requires": { 534 | "picomatch": "^2.2.1" 535 | } 536 | }, 537 | "sass": { 538 | "version": "1.43.2", 539 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.2.tgz", 540 | "integrity": "sha512-DncYhjl3wBaPMMJR0kIUaH3sF536rVrOcqqVGmTZHQRRzj7LQlyGV7Mb8aCKFyILMr5VsPHwRYtyKpnKYlmQSQ==", 541 | "requires": { 542 | "chokidar": ">=3.0.0 <4.0.0" 543 | } 544 | }, 545 | "source-map-js": { 546 | "version": "0.6.2", 547 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", 548 | "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==" 549 | }, 550 | "to-regex-range": { 551 | "version": "5.0.1", 552 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 553 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 554 | "requires": { 555 | "is-number": "^7.0.0" 556 | } 557 | } 558 | } 559 | } 560 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ipados", 3 | "version": "1.0.0", 4 | "description": "Discord redesigned to be simplified. Design by jacktompsett on Behance.", 5 | "repository": "https://github.com/DiscordStyles/iPadOS.git", 6 | "author": "Gibbu ", 7 | "license": "MIT", 8 | "private": false, 9 | "scripts": { 10 | "dev": "node ./scripts/dev", 11 | "build": "node ./scripts/build" 12 | }, 13 | "dependencies": { 14 | "autoprefixer": "^10.3.7", 15 | "postcss": "^8.3.9", 16 | "sass": "^1.42.1" 17 | }, 18 | "devDependencies": { 19 | "chokidar": "^3.5.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iPadOS", 3 | "description": "Discord redesigned to be simplified. Design by jacktompsett on Behance.", 4 | "version": "0.1.0", 5 | "author": "Gibbu#1211", 6 | "theme": "dist/iPadOS.theme.css", 7 | "consent": ["ext_listing"], 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | // GitHub action used to build scss files to the dist folder. 2 | // You are not meant to run this locally. 3 | 4 | const compile = require('./compile'); 5 | const {name, build} = require('./config.json'); 6 | 7 | compile({ 8 | target: build.target, 9 | output: [...build.outputPath, `${name}.css`] 10 | }); -------------------------------------------------------------------------------- /scripts/compile.js: -------------------------------------------------------------------------------- 1 | const sass = require('sass'); 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | const postcss = require('postcss'); 5 | const autoprefixer = require('autoprefixer'); 6 | const {name, compiler} = require('./config.json'); 7 | 8 | /** 9 | * Compile, autoprefix and save SCSS. 10 | * @param {Object} options 11 | * @param {string[]} options.target The path of the file to be compiled. Uses `path.join()`. 12 | * @param {string[]} options.output The destination and name of the file. Uses `path.join()`. 13 | */ 14 | module.exports = (options) => { 15 | console.clear(); 16 | console.log(`[${name}] Building ${options.target.join('/')} file...`); 17 | 18 | // Check if path exists, if not make it. 19 | const dirPath = options.output.filter(el => !el.includes('.')).join('/'); 20 | if (!fs.existsSync(!dirPath)) { 21 | fs.mkdirSync(dirPath, {recursive: true}); 22 | } 23 | 24 | sass.render({ 25 | file: path.join(...options.target), 26 | outputStyle: 'expanded', 27 | }, async(error, result) => { 28 | if (error) { 29 | console.error(error); 30 | return false; 31 | } 32 | 33 | let output = Buffer.from(result.css).toString(); 34 | 35 | if (compiler.postcss) { 36 | await postcss([autoprefixer]).process(output, { 37 | from: undefined, 38 | to: undefined 39 | }).then(res => { 40 | output = res.css; 41 | }); 42 | } 43 | 44 | fs.writeFile(path.join(...options.output), output.replace('@charset "UTF-8";\n', ""), (err) => { 45 | if (err) console.error(err); 46 | else console.log(`[${name}] Successfully built ${options.target.join('/')} file. (${(result.stats.duration/60000 * 60).toFixed(2)}s)`); 47 | }) 48 | }) 49 | } -------------------------------------------------------------------------------- /scripts/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iPadOS", 3 | "compiler": { 4 | "postcss": true 5 | }, 6 | "dev": { 7 | "target": ["src", "main.scss"] 8 | }, 9 | "build": { 10 | "target": ["src", "_base.scss"], 11 | "outputPath": ["dist", "dist"] 12 | } 13 | } -------------------------------------------------------------------------------- /scripts/dev.js: -------------------------------------------------------------------------------- 1 | // Used to build scss files to the BetterDiscord themes folder. 2 | 3 | const chokidar = require('chokidar'); 4 | const path = require('path'); 5 | const compile = require('./compile'); 6 | const {name, dev} = require('./config.json'); 7 | 8 | const dataFolder = process.env.APPDATA || (process.platform == 'darwin' ? process.env.HOME + '/Library/Application Support' : process.env.HOME + "/.local/share"); 9 | const themesFolder = path.join(dataFolder, 'BetterDiscord', 'themes'); 10 | 11 | chokidar.watch('src', {persistent: true}) 12 | .on('ready', () => console.log(`[${name}] Watching for changes...`)) 13 | .on('change', () => { 14 | console.clear(); 15 | 16 | compile({ 17 | target: dev.target, 18 | output: [themesFolder, `${name}.theme.css`] 19 | }); 20 | }); -------------------------------------------------------------------------------- /src/_base.scss: -------------------------------------------------------------------------------- 1 | @use 'root'; 2 | @use 'light'; 3 | @use 'dark'; 4 | @use 'keyframes'; 5 | 6 | @use 'app'; 7 | @use 'channels'; 8 | @use 'chat'; 9 | @use 'guilds'; 10 | @use 'inputs'; 11 | @use 'members'; 12 | @use 'modals'; 13 | @use 'popouts'; 14 | @use 'settings'; 15 | @use 'pages'; 16 | @use 'bd'; 17 | @use 'platform'; 18 | @use 'responsive'; -------------------------------------------------------------------------------- /src/_dark.scss: -------------------------------------------------------------------------------- 1 | .theme-dark, 2 | html.theme-dark #app-mount .theme-light .root-1gCeng, 3 | html.theme-dark .force-theme.theme-light { 4 | --bg-lvl-0: hsl(225, 9%, 9%); 5 | --bg-lvl-1: hsl(225, 10%, 15%); 6 | --bg-lvl-2: hsl(225, 11%, 21%); 7 | --bg-lvl-3: hsl(225, 12%, 27%); 8 | 9 | --status-online: hsl(89, 100%, 42%); 10 | --status-idle: hsl(44, 100%, 48%); 11 | --status-dnd: hsl(0, 76%, 50%); 12 | --status-offline: hsl(228, 5%, 19%); 13 | 14 | --text-muted: hsl(0, 0%, 53%); 15 | --text-normal: hsl(0, 0%, 85%); 16 | --text-focus: hsl(0, 0%, 100%); 17 | 18 | // Button colours 19 | --button: hsl(216, 5%, 18%); 20 | --button-hover: hsl(0, 0%, 100%); 21 | --button-hover-text: hsl(215, 28%, 17%); 22 | 23 | // Box shadows 24 | --elevation-close: 0 1px 3px 0 hsl(0, 0%, 0%, 0.1), 0 1px 2px 0 hsl(0, 0%, 0%, 0.06); 25 | --elevation-far: 0 10px 15px -3px hsl(0, 0%, 0%, 0.3), 0 4px 6px -2px hsl(0, 0%, 0%, 0.2); 26 | 27 | // Inputs 28 | --input-focus: inset 0 0 0 100vmax hsl(0, 0%, 0%, 0.2); 29 | 30 | // Others 31 | --backdrop: hsl(0, 0%, 0%, 0.8); 32 | 33 | // Discord variables 34 | --interactive-muted: var(--text-muted); 35 | --interactive-normal: var(--text-normal); 36 | --interactive-active: hsl(0, 0%, 100%); 37 | 38 | --background-modifier-hover: hsl(0, 0%, 0%, 0.2); 39 | 40 | --channels-default: var(--text-normal); 41 | } 42 | 43 | // 2b2d30 -------------------------------------------------------------------------------- /src/_keyframes.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiscordStyles/iPadOS/a4443b83a10bb5621186f7d16054fc4a2973db42/src/_keyframes.scss -------------------------------------------------------------------------------- /src/_light.scss: -------------------------------------------------------------------------------- 1 | .theme-light, 2 | html.theme-light #app-mount .theme-light .root-1gCeng, 3 | html.theme-light .force-theme.theme-light { 4 | --bg-lvl-0: hsl(216, 12%, 82%); 5 | --bg-lvl-1: hsl(220, 13%, 90%); 6 | --bg-lvl-2: hsl(220, 14%, 96%); 7 | --bg-lvl-3: hsl(0, 0%, 100%); 8 | 9 | --status-online: hsl(89, 100%, 42%); 10 | --status-idle: hsl(44, 100%, 48%); 11 | --status-dnd: hsl(0, 76%, 50%); 12 | --status-offline: hsl(228, 5%, 19%); 13 | 14 | --text-muted: hsl(216, 11%, 65%); 15 | --text-normal: hsl(216, 20%, 27%); 16 | --text-focus: hsl(0, 0%, 0%); 17 | 18 | // Button colours 19 | --button: var(--bg-lvl-3); 20 | --button-hover: hsl(216, 5%, 18%); 21 | --button-hover-text: hsl(0, 0%, 100%); 22 | 23 | // Box shadows 24 | --elevation-close: 0 1px 12px 0 hsl(0, 0%, 0%, 0.1), 0 1px 6px 0 hsl(0, 0%, 0%, 0.06); 25 | --elevation-far: 0 10px 15px -3px hsl(0, 0%, 0%, 0.25), 0 4px 6px -2px hsl(0, 0%, 0%, 0.2); 26 | 27 | // Inputs 28 | --input-focus: inset 0 0 0 100vmax hsl(0, 0%, 0%, 0.2); 29 | 30 | // Others 31 | --backdrop: hsl(0, 0%, 0%, 0.6); 32 | 33 | // Discord variables 34 | --interactive-muted: var(--text-muted); 35 | --interactive-normal: var(--text-normal); 36 | --interactive-active: var(--text-focus); 37 | 38 | --background-modifier-hover: hsl(0, 0%, 0%, 0.2); 39 | 40 | --channels-default: var(--text-normal); 41 | } -------------------------------------------------------------------------------- /src/_root.scss: -------------------------------------------------------------------------------- 1 | @use './assets'; 2 | 3 | :root { 4 | --ipados-file-version: '1.0.0'; 5 | --ipados-base-version: '1.0.1'; 6 | 7 | // Roundness 8 | --rounded-small: 4px; 9 | --rounded-large: 8px; 10 | --button-radius: 12px; 11 | --avatar-radius: var(--rounded-large); 12 | --server-radius: var(--rounded-large); 13 | 14 | // Spacing 15 | --spacing-xs: 4px; 16 | --spacing-sm: 6px; 17 | --spacing: 8px; 18 | --spacing-md: 10px; 19 | --spacing-lg: 14px; 20 | --spacing-xl: 16px; 21 | --spacing-2xl: 18px; 22 | --spacing-3xl: 24px; 23 | --app-spacing: 16px; 24 | 25 | // Windows buttons 26 | --win-btns-top: var(--app-spacing); 27 | --win-btns-right: calc(156px + var(--app-spacing)); 28 | 29 | // Header background 30 | --header-background: url("#{assets.$pattern_1}"); 31 | --header-background-repeat: repeat; 32 | --header-background-position: initial; 33 | --header-background-size: auto; 34 | 35 | // Font sizes 36 | --font-size-xsm: 11px; 37 | --font-size-sm: 14px; 38 | --font-size: 16px; 39 | --font-size-lg: 20px; 40 | --font-size-xl: 24px; 41 | --font-size-2xl: 30px; 42 | --font-size-3xl: 36px; 43 | 44 | // Sizebar 45 | --sidebar-width: 300px; 46 | 47 | // Chat 48 | --message-padding: 1rem; 49 | --chat-avatar-size: var(--avatar-size-md); 50 | 51 | // Avatars 52 | --avatar-size-sm: 24px; 53 | --avatar-size: 32px; 54 | --avatar-size-md: 48px; 55 | --avatar-size-lg: 64px; 56 | --avatar-size-xlg: 84px; 57 | 58 | // Font weights 59 | --font-weight-normal: 500; 60 | --font-weight-semibold: 600; 61 | --font-weight-bold: 700; 62 | 63 | // Settings 64 | --settings-height: 800px; 65 | --settings-width: 1280px; 66 | 67 | // Discord colours 68 | --text-link: rgba(var(--accent), 1); 69 | --discord-green: 59 165 92; 70 | --discord-yellow: 219 171 9; 71 | --discord-red: 215 58 73; 72 | --discord-purple: 89 54 149; 73 | --discord-grey: 117 128 142; 74 | --discord-invisible: 117 128 142; 75 | --discord-nitro: 255 115 250; 76 | --discord-blurple: 114 137 218; 77 | --discord-spotify: 29 185 84; 78 | --discord-twitch: 89 54 149; 79 | --discord-xbox: 16 124 16; 80 | 81 | // Discord variables 82 | --font-display: var(--font); 83 | } -------------------------------------------------------------------------------- /src/_theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name iPadOS 3 | * @author Gibbu#1211 4 | * @authorId 174868361040232448 5 | * @version -dev 6 | * @invite TeRQEPb 7 | * @description Discord redesigned to be simplified. Design by jacktompsett on Behance. 8 | * @source https://github.com/DiscordStyles/iPadOS 9 | * @website https://github.com/DiscordStyles/iPadOS 10 | */ 11 | 12 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 13 | 14 | :root { 15 | --accent: 84, 116, 230; 16 | --font: 'Poppins'; 17 | } -------------------------------------------------------------------------------- /src/app/_app.scss: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background: rgba(var(--accent), 1); 3 | color: #fff; 4 | } 5 | 6 | #app-mount { 7 | font-weight: var(--font-weight-normal); 8 | 9 | .base-3dtUhz { 10 | margin: var(--app-spacing) var(--app-spacing) var(--app-spacing) 0; 11 | overflow: visible; 12 | } 13 | 14 | .bg-h5JY_x { 15 | background: var(--bg-lvl-0); 16 | } 17 | 18 | // Remove settings overlay transitions 19 | .layer-3QrUeG.baseLayer-35bLyl { 20 | transform: scale(1) !important; 21 | opacity: 1 !important; 22 | } 23 | } -------------------------------------------------------------------------------- /src/app/_font.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-input-placeholder, body, button, input, select, textarea { 2 | font-family: var(--font, 'Poppins'), 'Whitney'; 3 | } -------------------------------------------------------------------------------- /src/app/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'app'; 2 | @forward 'font'; 3 | @forward 'status'; 4 | @forward 'toolbar'; 5 | @forward 'tooltips'; -------------------------------------------------------------------------------- /src/app/_status.scss: -------------------------------------------------------------------------------- 1 | #app-mount .wrapper-3t9DeA { 2 | .mask-1l8v16, svg:not(:root) { 3 | overflow: visible; 4 | mask: none; 5 | } 6 | foreignObject{ 7 | mask: none; 8 | } 9 | rect { 10 | mask: none; 11 | ry: var(--avatar-radius); 12 | rx: var(--avatar-radius); 13 | &[fill="#43b581"], 14 | &[fill="rgba(67, 181, 129, 1)"], 15 | &[fill="#ffffff"], 16 | &[mask*="online"] { 17 | fill: rgb(var(--discord-green)); 18 | } 19 | &[fill="#faa61a"], 20 | &[fill="rgba(250, 166, 26, 1)"], 21 | &[mask*="idle"] { 22 | fill: rgb(var(--discord-yellow)); 23 | } 24 | &[fill="#f04747"], 25 | &[fill="rgba(240, 71, 71, 1)"], 26 | &[mask*="dnd"] { 27 | fill: rgb(var(--discord-red)); 28 | } 29 | &[fill="#593695"], 30 | &[mask*="streaming"] { 31 | fill: rgb(var(--discord-purple)); 32 | } 33 | &[fill="#747f8d"], 34 | &[mask*="offline"], 35 | &[fill="NaN"], 36 | &[mask*="invisible"], 37 | &[fill="rgba(116, 127, 141, 1)"] { 38 | fill: rgb(var(--discord-grey)); 39 | } 40 | } 41 | img { 42 | border-radius: var(--avatar-radius); 43 | } 44 | 45 | // Small avatars (members, dms) 46 | &[style*="32"] rect { 47 | stroke: var(--bg-lvl-1); 48 | stroke-width: 2px; 49 | width: 12px; 50 | height: 12px; 51 | x: 21px; 52 | y: 21px; 53 | // Normal status 54 | &[width="25"][height="15"] { 55 | x: 6.5px; 56 | y: 4px; 57 | } 58 | &[x="22"][y="22"][fill="transparent"] { 59 | display: none; 60 | } 61 | } 62 | 63 | // StatusEverywhere 64 | &[style*="40"] { 65 | width: var(--chat-avatar-size) !important; 66 | height: var(--chat-avatar-size) !important; 67 | .svg-2V3M55 rect { 68 | stroke: var(--bg-lvl-0); 69 | stroke-width: 2px; 70 | width: 12px; 71 | height: 12px; 72 | y: 29px; 73 | x: 29px; 74 | } 75 | } 76 | 77 | // Larger avatars (user popout/profile) 78 | &[style*="80"] .svg-2V3M55 { 79 | rect { 80 | stroke: var(--bg-lvl-2); 81 | stroke-width: 4px; 82 | width: 18px; 83 | height: 18px; 84 | } 85 | & > svg > rect { 86 | x: 14px; 87 | y: 10px; 88 | } 89 | & > rect { 90 | x: 63px; 91 | y: 63px; 92 | } 93 | } 94 | } -------------------------------------------------------------------------------- /src/app/_toolbar.scss: -------------------------------------------------------------------------------- 1 | @use '../assets'; 2 | 3 | #app-mount { 4 | // Chat & Pages 5 | .container-1r6BKw { 6 | max-height: 52px; 7 | height: 100%; 8 | width: 100%; 9 | background: var(--bg-lvl-1); 10 | border-radius: var(--rounded-large); 11 | padding: 0; 12 | height: auto; 13 | box-shadow: var(--elevation-close); 14 | overflow: hidden; 15 | 16 | .children-19S4PO { 17 | padding: var(--spacing-xl); 18 | flex: none; 19 | background: var(--bg-lvl-1); 20 | .iconWrapper-2OrFZ1 { 21 | height: 20px; 22 | margin-left: 0; 23 | } 24 | .icon-22AiRD { 25 | width: auto; 26 | height: 100%; 27 | } 28 | &::after { 29 | content: none; 30 | } 31 | } 32 | } 33 | .toolbar-1t6TWx { 34 | flex: 1; 35 | justify-content: flex-end; 36 | .iconWrapper-2OrFZ1 { 37 | order: 1; 38 | margin: 0 var(--spacing-xl); 39 | & ~ .iconWrapper-2OrFZ1 { 40 | margin-left: 0; 41 | } 42 | } 43 | .anchor-3Z-8Bb.anchorUnderlineOnHover-2ESHQB { 44 | display: none; 45 | } 46 | } 47 | 48 | // Chat 49 | .title-3qD0b- { 50 | .divider-3FBTu8 { 51 | display: none; 52 | } 53 | .topic-TCb_qw { 54 | font-size: 0; 55 | margin: 0; 56 | &.expandable-9fI_e3 { 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | height: 100%; 62 | opacity: 0; 63 | } 64 | } 65 | } 66 | } 67 | 68 | // Windows 69 | .platform-win #app-mount .container-1r6BKw { 70 | width: calc(100% - var(--win-btns-right)); 71 | } -------------------------------------------------------------------------------- /src/app/_tooltips.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .tooltip-2QfLtc { 3 | box-shadow: var(--elevation-far); 4 | } 5 | .tooltipPrimary-1d1ph4 { 6 | background: var(--bg-lvl-3); 7 | color: var(--text-focus); 8 | font-weight: var(--font-weight-semibold); 9 | .tooltipPointer-3ZfirK { 10 | border-top-color: var(--bg-lvl-3); 11 | } 12 | } 13 | .guildNameText-3Zwx4p { 14 | color: var(--text-focus); 15 | } 16 | .colorMuted-HdFt4q { 17 | font-size: var(--font-size-sm); 18 | font-weight: var(--font-weight-semibold); 19 | } 20 | } -------------------------------------------------------------------------------- /src/assets/_icons.scss: -------------------------------------------------------------------------------- 1 | // Icons used from HeroIcons 2 | // https://heroicons.dev/ 3 | 4 | $ico: 'data:image/svg+xml; utf-8,'; 5 | 6 | $icon_cog: $ico+''; 7 | $icon_search: $ico+''; 8 | $icon_x: $ico+''; 9 | $icon_user: $ico+''; 10 | $icon_user-add: $ico+''; 11 | $icon_users: $ico+''; 12 | $icon_shield-check: $ico+''; 13 | $icon_shield-exclamation: $ico+''; 14 | $icon_clipboard-check: $ico+''; 15 | $icon_link: $ico+''; 16 | $icon_gift: $ico+''; 17 | $icon_card: $ico+''; 18 | $icon_eye: $ico+''; 19 | $icon_person-circle: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAABVUlEQVQ4ja3Uz05TURAG8F8xJrKiVTCscGlrl+qWjW9gTEhfgz4DxA3sCKbPAGpqXKrPAHZdWtcsdNmmSVmcufXmcmhN5EsmmcxMvvvNn3u4J9SW5Bp4gx3M8Qvf8PtfyZ+ihykucBZ2GbEP2FpF0sYYn9HM5FvoY4QXy5SMceBvyw/wCR/DF7lDXGEzR9QLJeW51TEJ2yjFa/iC0ypJQ+q/iUc4wh4e4xVehr+HY6xHa9UPeCcNEx5Ge5eYYRg2i9hB1MAAb8tEXWkzVbyWVj8Pv4oz7MNaJlnG9R1+gcU8C6IRnmcKdyX5g/CraErbW6DYTqtS+ENquxt+GW2ZYZMutl+S+0za5HbYNGJFS19xklFpS2rxMArr6JTynYjV8F7a5JMcEek2rqRjy/0C7VAydHsMt7ApXewEP3EeNojYSU7JsmdkQ3pGirmM8B1/Vin5L9wADCdJ6xrc5JUAAAAASUVORK5CYII='; 20 | $icon_microphone: $ico+''; 21 | $icon_chat: $ico+''; 22 | $icon_bell: $ico+''; 23 | $icon_keyboard: $ico+''; 24 | $icon_globe: $ico+''; 25 | $icon_video: $ico+''; 26 | $icon_chip: $ico+''; 27 | $icon_rss: $ico+''; 28 | $icon_desktop-computer: $ico+''; 29 | $icon_code: $ico+''; 30 | $icon_color-swatch: $ico+''; 31 | $icon_puzzle: $ico+''; 32 | $icon_emoji-happy: $ico+''; 33 | $icon_click: $ico+''; 34 | $icon_logout: $ico+''; 35 | $icon_server: $ico+''; 36 | $icon_exclamation: $ico+''; 37 | $icon_view-list: $ico+''; 38 | $icon_clock: $ico+''; 39 | $icon_template: $ico+''; 40 | $icon_lightning-bolt: $ico+''; 41 | $icon_trash: $ico+''; 42 | 43 | 44 | 45 | $icon_discord: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPUAAADwCAMAAADvotLkAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAQIAQv++fz2Aw3yBwUK+PD/W3OwAABYNJREFUeAHt3deWqzAPhuHPljtN93+zf8kasktWHLPHgBj0nk956NVA0zRN0zRN0zRN0zRN07Q+kTFWSKMxOKIpFJZVXDJ2jcbCEosJ+zUVllo02CeaWXIL9ihHlp2jHdCepRe7s4cVfSc2Rb5CM7q28DUa0THDF8kP6FfkqxTQrYmv04BeOb5OCzo18IUq6NTIVyqjTzNfKYs+Fb5SM/rElyqiS5mvFbpkVK1qVata1apWtapVrWpVq1rVqlY1VK1qVata1apWtapVrWpVR2et9VytWLu4+EPUJaQMAMhz0+32PIZycXUcBzyagucP+TABqzxeVl1Wcl48N+VDxlfDUq6odgaPKMUXnPstz38UE+Gr5K6mDsM6y35TOWetMXjJGLv80vsw4CvjrqR2+cscVomz04B6w2RXZDB1t0R1MX+a5zGjNbPEP6YbkPwl1JYAABTWDfPGhnH+fR0BLfLVMePR6OvkajRGZm9p/Q+KcPVCz5dEXCL8ezn456oCmkWrHR7ZdUP8nSiVdSICRbLaAMAQiyX0KLmS8SgJVjsAMDGhW8YlPCpy1QZATuhaMgCAJFYdsWNFqjphx6xQdcGekZeptti1IFNN2LUsUh2wc06i2mDnkkB1we55eeoRuxfkqQfsXhannnFARZo64YBGaWrCAQ3C1DMOKcpSJxzSKEtNOKRBlHrGQUVJ6oSDWiSpBxxUFqSOOCwvR21xWEGO2uCwkhi1x4eGZK01hGrGWpsGfIjEqGdUM8/b0u9NZH3jYHxRinpEJQr8zL8jGd88OtsiRZ3bxwhLDStrrLInKeqmbW6FnbfsCEmI2m2ZM57wUtm0Jywy1HbTvxgadkae8L4gQz1tWgl9y8wb8b5RhprwttAwkfLGlcaIUPuNO1fbcrSFSiLUDu9rOaaxW0/iogS13ah2LWqD980S1GkPdcb7rAS12Xg2vLQgUMlIUG8dBi81/P6CSlmAuqDS2LKh8ltHmhSgdhsPml3LTj2jVjlfHTaeF5qGi9wO1dz5aotaVBomkt04WvByvjptGm09UsOB64R69ny1wQa2I+AT239CI8lXg54kbxs+L+EGfMqcr8bnhtE57+ZEqJSC89HZDFxfvUt0SzVOV7tbq1VtB/RrMnipSFTnMqJTg5vxmpOoRuIyoUNkOdJl1EjMznzf7Fe0ePXKbnZXzCtakLp+m2LyzFwSfeOFxbeH7YM/W81z9XtePhhsjlKsnsRGPl3Ny4cTwrJkbGkdeKKY+g2Vc9Wc8KbseIUbNEUrmb0l2Xf3ODWcQPp5/CQ31vFaGPCmkYWoK2xMjn/lltEQXiMzhsjP/DJc4ckrDnjt7cgn0c32fyWT7P8KLvIfzal6hUKQmh3hfVQ6fTsvRxalrl7tCp2+wzN6eW+xzUOfbz5NlT2CJPWapR4jj/gMvDYEse/aezt0+BJnpIpZlnptnr7/JU6HP6Lk5I+N40MiPAvf/HjekObLjHlVgjW5enOm4bAnGzuXC45lVxz/Y67oGJWqVrWqVa1qVata1apWdbdUrWpVq1rVqla1qlWtalWrWtWqzrdUg0/OxzPUhU/OxBPUM5/cSPF4deKTc0A4XE18drSFjZ+yiE8AwtFqwycXAGA8WA3H51b2Hyte4oFK3sBGtyyf24hHkz9UjXj6vutR9oeq6WQ2tbPRsVz4zKb2/wP4MXM7tP8f6BotfF4FzWx0zhQ+rdzMRvdS5JMam995wQ5l6/iMYvObJNipwZwQWtn4wdlbqpFuqUa6pRrJ31GN7O+oRo53VIPiHdWgcEc1EG6pxnhLNdIt1cj+jmrkckc1KN5RDZrvqAbCLdUYb6lGuqUa2d9RjVzuqAbFO6pBM+OOLdA0TdM0TdM0TdM0TdO0b/ZfegfWFMciUSwAAAAASUVORK5CYII='; 46 | $icon_nitro-gem: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcqRVCAAAAGnRSTlMACwwNGBkeICJTWVqAv8DExdvd3+H29/r7/K5nB5wAAAEWSURBVHgB7di9boQwEEVhhx9ICJAACSF+/wfdxh0H5D1UK3Ebd5+msO5IE3LSjO9BBKk5/gAmqQiYpSzGFGOSYkxSjAnqOtYuCflN79JenuqrGmAyR5XhTWJABYsBZTGgLAaUxoDyGFAeA6qWGFAf66fDgPqL/wpDKjLmKMYkxZikGBOUwPpTirD+2GIKsTxrKnbUHiumLGvYU4AN+VaiCBPWFjmbsOJRbuu2buulLN8Tvr86YQGWKLBU33fP9X38LhlLVP4eYoypM6uZGUMq7W2HMaUwpgRmKMYkxZikEFslRVhtKcAMBZinAPMUYJ4CzFOAeQowTQFWCUreTfw9x2OeAsxTgHkKME8B5inALAVpx6x/9QAAgaz7LUiTnQAAAABJRU5ErkJggg=='; 47 | $icon_hypesquad: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABtlBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8cWrVBAAAAkXRSTlMAAgQGBwgJCgsMDxASFBYYGRobHiAhIiUmKy0vMDEyMzQ1Njo7PT4/QEFCQ0RFRkdISUpLTFJUVVZXWFlaW15fY2VmaG1ub3FzdnqAgYSFh4iMj5CcpKWmp6msrq+ys7W2uLm9vr/AwcPHycrR1dfY2tzd4OLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+W+BOyQAAAptJREFUeAHd0+dXE00UBvD7viKiFHtBIQRUFBcTgghKEbEoFsUiFrEXsKCiEBCMwKZQWAI8/7GkzJ3Mnh3ILl88/j4m55k7985d+vdV9jfRRlSEEW/YSH4EQML7Cb4RpMRDXuuPIsPjHSpFHt7m4AsDnk/gPIs1ur1/GKpoyF39MdhF3XTh5/re5lA1Cht3++Cz5VksvxMqf0Inlk8X/jHoJYLr96/J81a76N/LJH22/t2+ZvU41pcI6fN8f29d+PV5VbTRuX6q/6SFta1Yui/LP4FV4WNvsZYvdS81O1mdef/lzv+6Tegs3isuizjPoUbsz/dCOvQGzgYNogfOk6yR73eNiC5FwNjCna1E5bOOb1E9ATZcQkT7n8PuUy2temzfaq4v3aCUi8pvmL29hVZVzUOaCVLGYXV/x3dQyr4nkD4cobQ+daNOUdpnqHooo3NElL9eQGlHLSiGKS0wDcXv3ZSxpxcpA1WU9QKKpXOUUWdCcZeEZwC+FlOWsYxcyQ4SjqsnzBwkMZ4loIuyCt6pW9VB0gl5wmxkeuYyCU8xtI0fe2ryV0TWb6NcBs+hr6x0VxEJtegmYVNZaeGFFVt9Zpjin4cllOPqdsrB38lCO9nV8R1+NJGzva+QNSfzkjHF3/ytzeSgOQy1vv4EDFSQXdF9CFYHOas3IZhdpKr5KN+vnXSMGFivMr0rCQgLraRnRMG+BUjY+QjMaiNn/JosefN/SgsNgS1yfY36KKT35akN7knmk2dGHNLkeTrQD8lqIR3NHfB6DNDMT+ukCWeWPq8KRMFc1WeBGBibP0P5C5iwmztLbgRNe31NXisY9Xh/FoxBsjjvQiAu5895D3fgvAcN8Uz+NHkVTKTyzcS8dDHfQhvRONhKf7k/wAkpHhg8G8cAAAAASUVORK5CYII='; -------------------------------------------------------------------------------- /src/assets/_illustrations.scss: -------------------------------------------------------------------------------- 1 | $ill: 'data:image/svg+xml; utf-8,'; 2 | 3 | $pattern_1: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"; -------------------------------------------------------------------------------- /src/assets/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'icons'; 2 | @forward 'illustrations'; -------------------------------------------------------------------------------- /src/bd/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'list'; -------------------------------------------------------------------------------- /src/bd/_list.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .bd-settings-title { 3 | margin-bottom: 0; 4 | } 5 | .bd-addon-controls { 6 | position: sticky; 7 | top: 0px; 8 | background: var(--bg-lvl-0); 9 | padding: var(--spacing-3xl) 0; 10 | z-index: 1; 11 | } 12 | .bd-view-button { 13 | border-radius: var(--rounded-small); 14 | &:focus { 15 | box-shadow: none; 16 | } 17 | &.selected { 18 | background: rgb(var(--accent)); 19 | } 20 | } 21 | 22 | .bd-search-wrapper { 23 | background: var(--bg-lvl-1); 24 | border-radius: var(--rounded-small); 25 | position: relative; 26 | padding: 0; 27 | svg { 28 | position: absolute; 29 | pointer-events: none; 30 | right: var(--spacing); 31 | width: 18px !important; 32 | height: 18px !important; 33 | } 34 | &:focus-within { 35 | background: var(--bg-lvl-2); 36 | } 37 | } 38 | .bd-search { 39 | font-size: 14px; 40 | padding: var(--spacing) calc(var(--spacing-2xl) * 2) var(--spacing) var(--spacing-lg); 41 | width: 350px; 42 | } 43 | 44 | .bd-addon-list { 45 | margin-top: 0; 46 | } 47 | .bd-addon-card { 48 | background: var(--bg-lvl-1); 49 | } 50 | .bd-addon-header { 51 | background: var(--bg-lvl-2); 52 | } 53 | 54 | #iPadOS-card .bd-description:after { 55 | display: block; 56 | margin-top: var(--spacing-xs); 57 | white-space: pre-wrap; 58 | content: "File version: " var(--ipados-file-version)"\A Base version: " var(--ipados-base-version); 59 | } 60 | } -------------------------------------------------------------------------------- /src/channels/_channel.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .containerDefault--pIXnN { 3 | margin-bottom: var(--spacing-xs); 4 | } 5 | .wrapper-2jXpOf { 6 | padding: 0; 7 | 8 | &:hover .content-1x5b-n { 9 | background: var(--bg-lvl-2); 10 | } 11 | 12 | &.modeUnread-1qO3K1 .content-1x5b-n { 13 | .icon-1DeIlz { 14 | color: var(--text-focus); 15 | } 16 | } 17 | &.modeSelected-346R90 .content-1x5b-n { 18 | background: rgba(var(--accent), 1); 19 | .icon-1DeIlz, 20 | .actionIcon-PgcMM2, 21 | .name-23GUGE { 22 | color: #fff; 23 | } 24 | } 25 | 26 | &.typeThread-3ESTm- .content-1x5b-n { 27 | margin-left: calc(var(--spacing-3xl) + var(--spacing-2xl)); 28 | } 29 | } 30 | .spine--Wla_O { 31 | z-index: 1; 32 | } 33 | 34 | .content-1x5b-n { 35 | border-radius: var(--rounded-small); 36 | padding: var(--spacing-sm) var(--spacing-md); 37 | margin: 0 0 0 var(--spacing); 38 | .icon-1DeIlz { 39 | width: var(--font-size-sm); 40 | height: var(--font-size-sm); 41 | } 42 | } 43 | .mainContent-u_9PKf { 44 | padding: 0; 45 | } 46 | .name-23GUGE { 47 | font-size: var(--font-size-sm); 48 | font-weight: var(--font-weight-normal); 49 | } 50 | 51 | .voiceUser-1K6Xox { 52 | &:hover .content-1Wq3SX { 53 | background: var(--bg-lvl-2); 54 | } 55 | &.selected-3t3Csj .content-1Wq3SX { 56 | background: rgb(var(--accent)); 57 | .username-3KYl0N { 58 | color: #fff !important; 59 | } 60 | } 61 | } 62 | 63 | } -------------------------------------------------------------------------------- /src/channels/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .sidebar-2K8pFh { 3 | background: transparent; 4 | margin-right: var(--app-spacing); 5 | width: var(--sidebar-width); 6 | overflow: visible; 7 | 8 | div[style="height: 84px;"] { 9 | display: none; 10 | } 11 | } 12 | .container-3w7J-x { 13 | border-radius: 0 var(--rounded-large) var(--rounded-large) 0; 14 | background: var(--bg-lvl-1); 15 | border-top-right-radius: var(--rounded-large); 16 | overflow: hidden; 17 | margin-bottom: var(--app-spacing); 18 | } 19 | } -------------------------------------------------------------------------------- /src/channels/_dms.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .privateChannels-1nO12o { 3 | background: var(--bg-lvl-1); 4 | margin-bottom: var(--app-spacing); 5 | border-radius: 0 var(--rounded-large) var(--rounded-large) 0; 6 | } 7 | .scroller-1JbKMe { 8 | background: transparent; 9 | &::-webkit-scrollbar { 10 | display: none; 11 | } 12 | } 13 | 14 | .searchBar-6Kv8R2 { 15 | box-shadow: none; 16 | background: transparent; 17 | height: auto; 18 | padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl); 19 | } 20 | .searchBarComponent-32dTOx { 21 | background: var(--bg-lvl-0); 22 | padding: var(--spacing) var(--spacing-xl); 23 | height: auto; 24 | color: var(--text-normal); 25 | } 26 | 27 | .channel-2QD9_O { 28 | max-width: unset; 29 | margin: 0 var(--spacing-xl); 30 | 31 | .layout-2DM8Md { 32 | height: auto; 33 | padding: var(--spacing) var(--spacing-md); 34 | border-radius: var(--rounded-small); 35 | } 36 | 37 | &:hover { 38 | .layout-2DM8Md { 39 | background: var(--bg-lvl-2); 40 | } 41 | .wrapper-3t9DeA rect { 42 | stroke: var(--bg-lvl-2); 43 | } 44 | } 45 | 46 | &.selected-aXhQR6 { 47 | color: #fff; 48 | .layout-2DM8Md { 49 | background: rgba(var(--accent), 1); 50 | } 51 | .wrapper-3t9DeA rect { 52 | stroke: rgba(var(--accent), 1); 53 | } 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /src/channels/_group.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .wrapper-PY0fhH { 3 | justify-content: space-between; 4 | height: auto; 5 | position: unset; 6 | padding: 0; 7 | margin: 0 var(--spacing) var(--spacing-xs); 8 | cursor: default; 9 | &.muted-2JBAyG { 10 | .container-2ax-kl, 11 | .mainContent-2h-GEV { 12 | color: var(--text-muted); 13 | } 14 | } 15 | } 16 | .arrow-gKvcEx { 17 | position: unset; 18 | margin-right: var(--spacing-sm); 19 | } 20 | .mainContent-2h-GEV { 21 | background: var(--bg-lvl-2); 22 | border-radius: var(--rounded-small); 23 | color: var(--text-focus); 24 | padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-sm); 25 | display: flex; 26 | align-items: center; 27 | flex: none; 28 | cursor: pointer; 29 | .container-2ax-kl { 30 | color: var(--text-normal); 31 | font-size: var(--font-size-xsm); 32 | line-height: normal; 33 | } 34 | 35 | &::before { 36 | content: none; 37 | } 38 | } 39 | .children-L002ao { 40 | right: 0; 41 | svg { 42 | width: var(--channel-font-size); 43 | height: var(--channel-font-size); 44 | } 45 | &:not(:empty) { 46 | margin-left: var(--spacing-xl); 47 | } 48 | } 49 | 50 | 51 | .containerDefault--pIXnN + .containerDefault-3tr_sE { 52 | padding-top: var(--spacing-2xl); 53 | } 54 | } -------------------------------------------------------------------------------- /src/channels/_header.scss: -------------------------------------------------------------------------------- 1 | @use '../assets'; 2 | 3 | #app-mount { 4 | .container-1taM1r { 5 | min-height: 102px; 6 | pointer-events: none; 7 | .button-1w5pas { 8 | pointer-events: all; 9 | mask: url(assets.$icon_cog) center/cover; 10 | background: var(--text-focus); 11 | width: 24px; 12 | height: 24px; 13 | top: 5px; 14 | margin-left: var(--spacing); 15 | transition: transform .2s ease, opacity .2s ease; 16 | g { 17 | display: none; 18 | } 19 | &:hover { 20 | opacity: 1; 21 | } 22 | &.open-1Te94t { 23 | opacity: 1; 24 | transform: rotate(-45deg); 25 | } 26 | } 27 | 28 | svg[class*="iconTier"] { 29 | color: rgb(var(--discord-nitro)); 30 | } 31 | 32 | &:not(.hasBanner-2SrLR3):before { 33 | content: ""; 34 | mask: var(--header-background); 35 | mask-repeat: var(--header-background-repeat); 36 | mask-position: var(--header-background-position); 37 | mask-size: var(--header-background-size); 38 | background: var(--text-muted); 39 | width: 100%; 40 | height: 100%; 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | } 45 | 46 | &::after { 47 | content: ""; 48 | position: absolute; 49 | bottom: 0; 50 | height: 100%; 51 | background: linear-gradient(transparent, var(--bg-lvl-1)); 52 | width: 100%; 53 | } 54 | } 55 | 56 | 57 | .selected-31Nl7x .header-2V-4Sw { 58 | background: transparent; 59 | } 60 | .header-2V-4Sw { 61 | height: 100%; 62 | align-items: flex-start; 63 | justify-content: center; 64 | padding: var(--spacing-2xl); 65 | box-shadow: none; 66 | filter: none !important; 67 | &:hover { 68 | background: transparent; 69 | } 70 | } 71 | .guildIconContainer-2FW_iA { 72 | background: #fff; 73 | height: 32px; 74 | width: 32px; 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | border-radius: var(--rounded-large); 79 | margin-right: var(--spacing-2xl); 80 | box-shadow: var(--elevation-close); 81 | } 82 | .guildBadge-3IDi4U { 83 | width: 24px !important; 84 | height: 24px !important; 85 | } 86 | .flowerStar-1GeTsn { 87 | display: none; 88 | } 89 | .childContainer-1wxZNh { 90 | position: unset; 91 | } 92 | .premiumGuildIconGem-DAxGL7 { 93 | width: 16px; 94 | height: 16px; 95 | } 96 | .icon-1ihkOt { 97 | color: rgba(var(--accent), 1); 98 | width: 24px !important; 99 | height: 24px !important; 100 | } 101 | .name-1jkAdW { 102 | font-size: 18px; 103 | line-height: 32px; 104 | text-shadow: var(--elevation-close); 105 | } 106 | 107 | 108 | .animatedContainer-1NSq4T { 109 | height: 100%; 110 | opacity: 1 !important; 111 | transform: none !important; 112 | box-shadow: none; 113 | } 114 | .bannerImage-3KhIJ6 { 115 | width: 100%; 116 | height: 100%; 117 | transform: none !important; 118 | } 119 | } -------------------------------------------------------------------------------- /src/channels/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'channel'; 2 | @forward 'container'; 3 | @forward 'dms'; 4 | @forward 'group'; 5 | @forward 'header'; 6 | @forward 'panels'; 7 | @forward 'voice'; -------------------------------------------------------------------------------- /src/channels/_panels.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .panels-j1Uci_ { 3 | background: transparent; 4 | } 5 | 6 | // User panel 7 | .container-3baos1 { 8 | background: var(--bg-lvl-2); 9 | border-radius: var(--rounded-large); 10 | box-shadow: var(--elevation-close); 11 | margin-left: -72px; 12 | padding: var(--spacing-xl); 13 | height: auto; 14 | margin-bottom: 0; 15 | .avatarWrapper-2yR4wp { 16 | margin-right: var(--spacing-xl); 17 | } 18 | } 19 | .nameTag-3uD-yy { 20 | display: flex; 21 | align-items: center; 22 | } 23 | .title-eS5yk3 { 24 | font-size: var(--font-size); 25 | } 26 | .subtext-3CDbHg { 27 | font-size: var(--font-size); 28 | font-weight: var(--font-weight-normal); 29 | } 30 | 31 | // Connected 32 | .container-1giJp5 { 33 | border: none; 34 | margin-bottom: var(--app-spacing); 35 | background: var(--bg-lvl-1); 36 | margin-top: calc(var(--app-spacing) / -1 - 4px); 37 | border-bottom-right-radius: var(--rounded-large); 38 | padding: var(--spacing-xl); 39 | } 40 | .connection-3KRENF { 41 | padding: 0; 42 | margin-bottom: var(--spacing-xl); 43 | } 44 | .actionButtons-14eAc_ { 45 | padding: 0; 46 | } 47 | .rtcConnectionStatus-2-jIsi { 48 | padding-bottom: 0; 49 | margin-bottom: var(--spacing); 50 | } 51 | 52 | // Live 53 | .activityPanel-28dQGo { 54 | margin-top: calc(var(--app-spacing) / -1 - 4px); 55 | margin-bottom: var(--app-spacing); 56 | background: var(--bg-lvl-1); 57 | border: none; 58 | border-bottom-right-radius: var(--rounded-large); 59 | } 60 | } -------------------------------------------------------------------------------- /src/channels/_voice.scss: -------------------------------------------------------------------------------- 1 | #app-mount .avatar-3tNQiO { 2 | border-radius: var(--rounded-small); 3 | &.avatarSpeaking-2IGMRN { 4 | box-shadow: inset 0 0 0 2px hsl(139,calc(var(--saturation-factor, 1)*47.3%),43.9%),inset 0 0 0 4px var(--bg-lvl-2); 5 | } 6 | } -------------------------------------------------------------------------------- /src/chat/_bars.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // New Messages 3 | .newMessagesBar-265mhP { 4 | border-radius: var(--rounded-small); 5 | left: calc(var(--chat-avatar-size) + var(--message-padding)); 6 | right: calc(var(--app-spacing) + var(--message-padding)); 7 | top: var(--app-spacing); 8 | box-shadow: var(--elevation-far); 9 | background: rgb(var(--accent)); 10 | opacity: 1; 11 | &:hover { 12 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .1), var(--elevation-far); 13 | } 14 | 15 | button { 16 | height: auto; 17 | padding: var(--spacing-sm) var(--spacing-xl); 18 | } 19 | } 20 | 21 | // Reply 22 | .attachedBars-tZDmyV { 23 | background: transparent; 24 | } 25 | .container-2fRDfG { 26 | margin-bottom: var(--spacing-xl); 27 | border-radius: var(--rounded-large); 28 | box-shadow: var(--elevation-close); 29 | background: var(--bg-lvl-3); 30 | } 31 | .replyBar-1YLQ2F, 32 | .threadSuggestionBar-2ufK2Z { 33 | background: transparent; 34 | border-radius: var(--rounded-large); 35 | } 36 | 37 | // Old messages 38 | .jumpToPresentBar-G1R9s6 { 39 | background: var(--bg-lvl-3); 40 | padding: 0; 41 | opacity: 1; 42 | border-radius: var(--rounded-small); 43 | left: 0; 44 | right: calc(var(--app-spacing) + var(--message-padding)); 45 | bottom: var(--spacing-xl); 46 | box-shadow: var(--elevation-close); 47 | min-height: 36px; 48 | button { 49 | color: var(--text-normal); 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /src/chat/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .content-yTz4x3:before { 3 | content: none; 4 | } 5 | .chat-3bRxxu { 6 | background: transparent; 7 | overflow: visible; 8 | &.threadSidebarOpen-vdkwIh .container-1r6BKw { 9 | width: 100%; 10 | } 11 | } 12 | .scrollerSpacer-avRLaA { 13 | height: 48px; 14 | } 15 | .scroller-2LSbBU { 16 | &::-webkit-scrollbar-track { 17 | background: var(--bg-lvl-1); 18 | border-color: var(--bg-lvl-0); 19 | } 20 | &::-webkit-scrollbar-thumb { 21 | background: var(--bg-lvl-2); 22 | border-color: var(--bg-lvl-0); 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/chat/_divider.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .divider-3_HH5L { 3 | border: none; 4 | top: 0; 5 | margin: 1rem 1rem 1rem calc(1rem + var(--chat-avatar-size)); 6 | height: auto; 7 | justify-content: flex-end; 8 | flex-direction: row-reverse; 9 | .content-1o0f9g { 10 | padding: var(--spacing-sm) var(--spacing); 11 | border-radius: var(--rounded-small); 12 | color: var(--text-normal); 13 | background: var(--bg-lvl-3); 14 | font-size: var(--font-size-xsm); 15 | line-height: var(--font-size-xsm); 16 | } 17 | } 18 | .unreadPill-2HyYtt { 19 | position: relative; 20 | top: 0; 21 | font-size: var(--font-size-xsm); 22 | padding: var(--spacing-sm) var(--spacing); 23 | border-radius: var(--rounded-small); 24 | height: auto; 25 | line-height: var(--font-size-xsm); 26 | svg { 27 | display: none; 28 | } 29 | 30 | &:not(:only-child) { 31 | margin-right: var(--spacing); 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/chat/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'bars'; 2 | @forward 'container'; 3 | @forward 'divider'; 4 | @forward 'message'; 5 | @forward 'textarea'; 6 | @forward 'placeholder'; 7 | @forward 'threads'; -------------------------------------------------------------------------------- /src/chat/_message.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Messages 3 | .timestamp-1E3uAL { 4 | font-weight: var(--font-weight-semibold); 5 | margin-left: var(--spacing); 6 | } 7 | 8 | .cozy-3raOZG { 9 | position: relative; 10 | padding: var(--message-padding) !important; 11 | margin-left: calc(var(--chat-avatar-size) + var(--message-padding)); 12 | margin-right: var(--message-padding); 13 | 14 | .avatar-1BDn8e { 15 | left: calc((var(--chat-avatar-size) / -1) - var(--message-padding)); 16 | top: 0; 17 | margin-top: 0; 18 | border-radius: var(--avatar-radius); 19 | width: var(--chat-avatar-size); 20 | height: var(--chat-avatar-size); 21 | } 22 | .wrapper-3t9DeA { 23 | foreignObject, svg { 24 | mask: none; 25 | overflow: visible; 26 | } 27 | img { 28 | border-radius: var(--avatar-radius); 29 | } 30 | } 31 | 32 | .header-23xsNx { 33 | margin-bottom: calc(var(--message-padding) / 2); 34 | display: flex; 35 | .timestampInline-yHQ6fX { 36 | flex: 1; 37 | display: flex; 38 | justify-content: flex-end; 39 | } 40 | } 41 | 42 | .spoilerText-3p6IlD.hidden-HHr2R9 { 43 | background: var(--bg-lvl-0); 44 | } 45 | 46 | .timestamp-3ZCmNB.alt-1uNpEt { 47 | margin: 0; 48 | left: calc((var(--message-padding) / -1) - var(--chat-avatar-size)); 49 | width: var(--chat-avatar-size); 50 | } 51 | 52 | .repliedMessage-VokQwo { 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | margin-bottom: 0; 58 | padding: var(--spacing) var(--message-padding); 59 | background: var(--bg-lvl-1); 60 | border-radius: var(--rounded-large) var(--rounded-large) 0 0; 61 | box-sizing: border-box; 62 | & + .contents-2mQqc9 { 63 | padding-top: calc(var(--spacing-2xl) + var(--spacing-md)); 64 | } 65 | &::before { 66 | content: none; 67 | } 68 | } 69 | .repliedTextContent-1R3vnK { 70 | display: flex; 71 | align-items: center; 72 | } 73 | 74 | // Editing messages 75 | .textArea-12jD-V { 76 | background: var(--bg-lvl-1); 77 | } 78 | .operations-36ENbA > a { 79 | color: rgba(var(--accent), 1); 80 | } 81 | .scrollableContainer-2NUZem { 82 | box-shadow: none; 83 | } 84 | 85 | &::before { 86 | content: ""; 87 | position: absolute; 88 | top: 0; 89 | left: 0; 90 | width: 100%; 91 | height: 100%; 92 | background: var(--bg-lvl-2); 93 | pointer-events: none; 94 | z-index: -1; 95 | border-radius: var(--rounded-large); 96 | } 97 | 98 | &:hover, &.selected-2P5D_Z { 99 | background: transparent !important; 100 | } 101 | 102 | &.cozy-3raOZG:not(.groupStart-23k01U) { 103 | padding-top: calc(var(--message-padding) / 4) !important; 104 | margin-top: calc(var(--message-padding) / -1) !important; 105 | } 106 | 107 | // Jump to message flash 108 | & + .backgroundFlash-24qWLN { 109 | transition: 150ms ease; 110 | background: rgba(var(--accent), 0.2) !important; 111 | &[style*="rgba(88, 101, 242, 0)"] { 112 | background: transparent !important; 113 | } 114 | } 115 | 116 | &.mentioned-xhSam7 { 117 | background: transparent; 118 | .contents-2mQqc9 .markup-2BOw-j:not(.embedWrapper-lXpS3L), .container-1ov-mD { 119 | margin-left: 0; 120 | padding-left: 0; 121 | border-left: 4px solid rgba(var(--accent), 1); 122 | background: rgba(var(--accent), .1); 123 | padding: var(--spacing); 124 | } 125 | } 126 | 127 | &.hasThread-2k82W0::after { 128 | content: none; 129 | } 130 | } 131 | 132 | // Button 133 | .wrapper-2aW0bm { 134 | box-shadow: var(--elevation-close); 135 | background: var(--bg-lvl-3); 136 | } 137 | 138 | // Mentions 139 | .wrapper-3WhCwL { 140 | background: rgba(var(--accent), .1); 141 | color: rgba(var(--accent), 1); 142 | border-radius: var(--rounded-large); 143 | padding: 1px var(--spacing-sm); 144 | &:hover { 145 | background: rgba(var(--accent), 1); 146 | color: #fff; 147 | } 148 | } 149 | .executedCommand-2GE3w2, 150 | .threadMessageAccessory-1pYyA- { 151 | height: auto; 152 | } 153 | 154 | // Codeblocks 155 | .markup-2BOw-j code { 156 | background: var(--bg-lvl-1); 157 | border-radius: var(--rounded-large); 158 | border: none; 159 | } 160 | .markup-2BOw-j > code { 161 | padding: var(--spacing-xs) var(--spacing); 162 | } 163 | .markup-2BOw-j pre code { 164 | padding: 1rem; 165 | } 166 | 167 | // Attachments, embeds 168 | .textContainer-C0szpm { 169 | border: none; 170 | background: var(--bg-lvl-1); 171 | border-radius: var(--rounded-large); 172 | } 173 | .footer-2yA7Ep { 174 | border: none; 175 | background: var(--bg-lvl-1); 176 | margin-top: var(--spacing); 177 | border-radius: var(--rounded-large); 178 | } 179 | .embedFull-2tM8-- { 180 | background: var(--bg-lvl-1); 181 | border-radius: var(--rounded-small) var(--rounded-large) var(--rounded-large) var(--rounded-small); 182 | } 183 | .wrapperAudio-1jDe0Q { 184 | background: var(--bg-lvl-1); 185 | border: none; 186 | padding: 1rem; 187 | border-radius: var(--rounded-large); 188 | .audioControls-2HsaU6 { 189 | background: var(--bg-lvl-0); 190 | border-radius: var(--rounded-large); 191 | } 192 | } 193 | .container-1ov-mD { 194 | padding: 0; 195 | } 196 | .container-3hZ-gs { 197 | background: transparent; 198 | margin: 0; 199 | padding: 0; 200 | display: flex; 201 | flex-direction: column-reverse; 202 | .topLine-1hV9bl { 203 | padding: var(--spacing); 204 | background: var(--bg-lvl-1); 205 | border-radius: 0 0 var(--rounded-large) var(--rounded-large); 206 | } 207 | .bottomLine-2qB7L6 { 208 | padding: var(--spacing); 209 | background: var(--bg-lvl-0); 210 | border-radius: var(--rounded-large) var(--rounded-large) 0 0; 211 | } 212 | } 213 | 214 | // Server invite 215 | .wrapper-35wsBm { 216 | background: var(--bg-lvl-1); 217 | } 218 | 219 | // Reactions 220 | .reaction-1hd86g { 221 | background: var(--bg-lvl-3); 222 | &.reactionMe-wv5HKu { 223 | background: rgb(var(--accent), 0.2); 224 | .reactionCount-2mvXRV { 225 | color: rgb(var(--accent), 1); 226 | } 227 | } 228 | } 229 | 230 | // Discord spacing 231 | .group-spacing-16 .cozy-3raOZG + .cozy-3raOZG:not(.groupStart-23k01U) { 232 | margin-top: calc(1.0625rem / -1); 233 | } 234 | .group-spacing-24 .cozy-3raOZG + .cozy-3raOZG:not(.groupStart-23k01U) { 235 | margin-top: calc(1.5625rem / -1); 236 | } 237 | .group-spacing-8 .cozy-3raOZG + .cozy-3raOZG:not(.groupStart-23k01U) { 238 | margin-top: calc(.5625rem / -1); 239 | } 240 | .group-spacing-4 .cozy-3raOZG + .cozy-3raOZG:not(.groupStart-23k01U) { 241 | margin-top: calc(1.5625rem / -1); 242 | } 243 | .group-spacing-0 .cozy-3raOZG { 244 | &.groupStart-23k01U { 245 | margin-top: 1px; 246 | } 247 | & + .cozy-3raOZG:not(.groupStart-23k01U) { 248 | margin-top: calc(1rem / -1); 249 | } 250 | } 251 | } -------------------------------------------------------------------------------- /src/chat/_placeholder.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .wrapper-3vR61M { 3 | background: transparent; 4 | } 5 | .cozy-12kSNU { 6 | background: transparent; 7 | position: relative; 8 | padding: var(--message-padding) !important; 9 | margin-left: calc(var(--chat-avatar-size) + var(--message-padding)); 10 | margin-right: var(--message-padding); 11 | overflow: visible; 12 | contain: none; 13 | &::before { 14 | content: ""; 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | background: var(--bg-lvl-2); 21 | pointer-events: none; 22 | z-index: -1; 23 | border-radius: var(--rounded-large); 24 | } 25 | 26 | .header-1oLBbW { 27 | overflow: visible; 28 | margin-bottom: 6px; 29 | } 30 | .avatar-2daVqv { 31 | left: calc((var(--chat-avatar-size) / -1) - var(--message-padding)); 32 | top: 0; 33 | margin-top: 0; 34 | border-radius: var(--rounded-large); 35 | width: var(--chat-avatar-size); 36 | height: var(--chat-avatar-size); 37 | max-width: var(--chat-avatar-size); 38 | max-height: var(--chat-avatar-size); 39 | background: var(--bg-lvl-2); 40 | opacity: 1 !important; 41 | } 42 | 43 | & + .cozy-12kSNU:not([style*="margin-top"]) { 44 | padding-top: calc(var(--message-padding) / 4) !important; 45 | margin-top: calc(1.0625rem / -1); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/chat/_textarea.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .form-2fGMdU { 3 | margin-top: 0; 4 | padding: 0; 5 | border-radius: var(--rounded-large); 6 | &::before { 7 | content: none; 8 | } 9 | } 10 | 11 | // Attach button 12 | .sansAttachButton-td2irx { 13 | padding: 0; 14 | } 15 | .attachButton-2dnuIu { 16 | margin-left: 0; 17 | padding: 0; 18 | height: auto; 19 | color: var(--text-muted); 20 | transition: color .15s ease; 21 | width: calc(var(--chat-avatar-size) + var(--message-padding)); 22 | &:hover { 23 | color: var(--text-normal); 24 | } 25 | } 26 | .attachButtonInner-PQjIyk { 27 | display: flex; 28 | height: 64px; 29 | &::before { 30 | margin: auto; 31 | content: "+"; 32 | color: inherit; 33 | display: block; 34 | font-weight: bold; 35 | font-size: var(--font-size-2xl); 36 | } 37 | svg { 38 | display: none; 39 | } 40 | } 41 | 42 | // Textbox 43 | .channelTextArea-rNsIhG { 44 | margin-bottom: 0; 45 | background: transparent; 46 | } 47 | .scrollableContainer-2NUZem { 48 | background: var(--bg-lvl-1); 49 | border-radius: var(--rounded-large); 50 | box-shadow: var(--elevation-close); 51 | } 52 | .textArea-12jD-V { 53 | background: var(--bg-lvl-2); 54 | min-height: 64px; 55 | } 56 | .placeholder-37qJjk { 57 | height: 64px; 58 | padding: 0 var(--spacing-xl); 59 | display: flex; 60 | align-items: center; 61 | font-weight: var(--font-weight-normal); 62 | } 63 | .slateTextArea-1Mkdgw { 64 | min-height: 64px; 65 | font-weight: var(--font-weight-normal); 66 | box-sizing: border-box; 67 | padding: var(--spacing-xl); 68 | display: flex; 69 | flex-direction: column; 70 | justify-content: center; 71 | 72 | } 73 | 74 | // Right side buttons 75 | .buttons-3JBrkn { 76 | margin-right: 0; 77 | height: unset; 78 | padding: var(--spacing-xl) 0 0 var(--spacing-xl); 79 | align-items: flex-start; 80 | position: relative; 81 | } 82 | .button-318s1X { 83 | padding: 0 5px; 84 | height: 32px; 85 | } 86 | .emojiButton-3uL3Aw { 87 | max-height: 64px; 88 | .sprite-2iCowe { 89 | filter: grayscale(0) !important; 90 | } 91 | } 92 | 93 | // Typing, slow mode, jump to present 94 | .typing-2GQL18 { 95 | top: -42px; 96 | height: 34px; 97 | pointer-events: none; 98 | left: 0; 99 | right: 2rem; 100 | overflow: visible; 101 | .dots-3Bkt3k { 102 | display: none; 103 | } 104 | } 105 | .text-1y-e8- { 106 | margin-left: 0; 107 | font-size: 80%; 108 | font-style: italic; 109 | &:not(:empty) { 110 | background: var(--bg-lvl-2); 111 | padding: var(--spacing-sm) var(--spacing-xl); 112 | border-radius: var(--rounded-large); 113 | box-shadow: var(--elevation-close); 114 | } 115 | } 116 | .cooldownWrapper-3joyFc { 117 | background: var(--bg-lvl-2); 118 | padding: var(--spacing-sm) var(--spacing-md); 119 | border-radius: var(--rounded-large); 120 | box-shadow: var(--elevation-far); 121 | overflow: visible; 122 | } 123 | } 124 | 125 | -------------------------------------------------------------------------------- /src/chat/_threads.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .threadSidebar-1o3BTy { 3 | background: transparent; 4 | margin-left: var(--app-spacing); 5 | } 6 | .chat-15Vmww::before { 7 | content: none; 8 | } 9 | } -------------------------------------------------------------------------------- /src/guilds/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .guilds-1SWlCJ { 3 | margin: var(--app-spacing) 0 calc(var(--app-spacing) * 2 + 64px) var(--app-spacing); 4 | background: var(--bg-lvl-2); 5 | border-radius: var(--rounded-large) 0 0 var(--rounded-large); 6 | overflow: visible; 7 | .scrollerBase-289Jih { 8 | background: transparent; 9 | padding-top: 12px; 10 | & > .listItem-2P_4kh { 11 | margin-bottom: 12px; 12 | } 13 | } 14 | 15 | &::after { 16 | content: ""; 17 | position: absolute; 18 | top: 0; 19 | width: 372px; 20 | height: 100%; 21 | background: transparent; 22 | box-shadow: var(--elevation-close); 23 | border-radius: var(--rounded-large); 24 | pointer-events: none; 25 | z-index: 1; 26 | } 27 | } 28 | [data-list-id="guildsnav"]:focus { 29 | outline: none; 30 | } 31 | } -------------------------------------------------------------------------------- /src/guilds/_folder.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .expandedFolderBackground-1cujaW { 3 | background: var(--bg-lvl-3); 4 | border-radius: var(--rounded-large); 5 | } 6 | .folder-1hbNCn { 7 | background: var(--bg-lvl-3); 8 | } 9 | .folderIconWrapper-1_bOZe { 10 | border-radius: var(--rounded-small); 11 | } 12 | .iconInactive-98JN5i { 13 | border-radius: var(--rounded-small); 14 | } 15 | } -------------------------------------------------------------------------------- /src/guilds/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'container'; 2 | @forward 'folder'; 3 | @forward 'server'; -------------------------------------------------------------------------------- /src/guilds/_server.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .wrapper-25eVIn { 3 | border-radius: var(--server-radius); 4 | overflow: hidden; 5 | foreignObject { 6 | mask: none; 7 | } 8 | } 9 | .childWrapper-anI2G9 { 10 | background: var(--bg-lvl-3); 11 | } 12 | .wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9 { 13 | background: rgba(var(--accent), 1); 14 | } 15 | 16 | // Pill 17 | .item-2hkk8m { 18 | border-radius: 0 2px 2px 0; 19 | } 20 | 21 | // Badges 22 | .iconBadge-2NuvG9 { 23 | border: 4px solid var(--bg-lvl-2); 24 | width: 24px; 25 | height: 24px; 26 | border-radius: 50%; 27 | margin-top: calc(var(--spacing-xs) / -1); 28 | margin-right: calc(var(--spacing-xs) / -1); 29 | } 30 | 31 | // Add/Join & Discovery 32 | .circleIconButton-1QV--U { 33 | background: var(--bg-lvl-3); 34 | &.selected-1JjBPm { 35 | background: rgb(var(--discord-green)); 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/inputs/_button.scss: -------------------------------------------------------------------------------- 1 | .button-38aScr:not(.lookBlank-3eh9lL) { 2 | border-radius: var(--rounded-small); 3 | line-height: var(--font-size-lg); 4 | font-size: var(--font-size-sm); 5 | padding: var(--spacing-sm) var(--spacing-lg); 6 | min-height: auto; 7 | transition: box-shadow .15s ease; 8 | &.colorBrand-3pXr91 { 9 | background: rgb(var(--accent)); 10 | border: none; 11 | color: #fff; 12 | &:hover { 13 | background: rgb(var(--accent)); 14 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .1); 15 | } 16 | &:focus { 17 | background: rgb(var(--accent)); 18 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .2); 19 | } 20 | } 21 | } 22 | 23 | .button-1YfofB.buttonColor-7qQbGO { 24 | background: var(--bg-lvl-3); 25 | border-radius: var(--rounded-small); 26 | &:hover { 27 | background: var(--bg-lvl-2); 28 | } 29 | 30 | } 31 | 32 | .bd-button { 33 | background: rgb(var(--accent)); 34 | border-radius: var(--rounded-small); 35 | &:hover { 36 | background: rgb(var(--accent)); 37 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .1); 38 | } 39 | &:focus { 40 | background: rgb(var(--accent)); 41 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .2); 42 | } 43 | } -------------------------------------------------------------------------------- /src/inputs/_checkbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .checkboxWrapper-SkhIWG { 3 | .checkbox-1ix_J3 { 4 | background: var(--bg-lvl-3); 5 | border-color: var(--bg-lvl-3); 6 | } 7 | 8 | &.checked-3_4uQ9 .checkbox-1ix_J3 { 9 | background: rgb(var(--accent)) !important; 10 | border-color: rgb(var(--accent)) !important; 11 | path { 12 | fill: #fff; 13 | } 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /src/inputs/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'button'; 2 | @forward 'input'; 3 | @forward 'radiogroup'; 4 | @forward 'slider'; 5 | @forward 'select'; 6 | @forward 'checkbox'; -------------------------------------------------------------------------------- /src/inputs/_input.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .textarea-2r0oV8 { 3 | border: none; 4 | border-radius: var(--rounded-small); 5 | transition: box-shadow .15s ease; 6 | &::placeholder { 7 | font-weight: inherit; 8 | color: var(--text-muted); 9 | } 10 | &:focus { 11 | box-shadow: var(--input-focus); 12 | color: var(--text-focus); 13 | } 14 | } 15 | .input-cIJ7To { 16 | border: none; 17 | border-radius: var(--rounded-small); 18 | background: var(--bg-lvl-2); 19 | &:focus { 20 | box-shadow: var(--input-focus); 21 | color: var(--text-focus); 22 | } 23 | } 24 | .multiInput-2AiDV2:focus-within { 25 | box-shadow: var(--input-focus); 26 | .input-cIJ7To { 27 | box-shadow: var(--input-focus); 28 | color: var(--text-focus); 29 | } 30 | } 31 | 32 | // Keybind 33 | .container-1nZlH6 { 34 | border-color: var(--bg-lvl-1); 35 | background: var(--bg-lvl-1); 36 | border-radius: var(--rounded-small); 37 | &:hover { 38 | border-color: rgb(var(--accent)); 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /src/inputs/_radiogroup.scss: -------------------------------------------------------------------------------- 1 | #app-mount [role="radiogroup"] { 2 | .item-26Dhrx { 3 | background: var(--bg-lvl-1); 4 | 5 | .radioBar-bMNUI- { 6 | padding: var(--spacing-md) var(--spacing-xl) !important; 7 | grid-gap: 16px; 8 | border-left-width: 6px; 9 | } 10 | 11 | &:hover { 12 | background: var(--bg-lvl-2); 13 | } 14 | 15 | &[aria-checked="true"] { 16 | color: #fff; 17 | .radioBar-bMNUI- { 18 | background: var(--radio-bar-accent-color, rgb(var(--accent))); 19 | circle, 20 | path { 21 | color: #fff; 22 | } 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/inputs/_select.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .css-gvi9bl-control, 3 | .css-17e1tep-control, 4 | .css-x3hllb-control, 5 | .css-z86t1q-control, 6 | .lookFilled-22uAsw.select-2fjwPw { 7 | background: var(--bg-lvl-1); 8 | border: none; 9 | border-radius: var(--rounded-small); 10 | cursor: pointer; 11 | &:hover { 12 | background: var(--bg-lvl-2); 13 | } 14 | } 15 | 16 | .css-4h5swf-singleValue, 17 | .css-1yg49vj-singleValue { 18 | line-height: normal; 19 | } 20 | 21 | // Selected 22 | .css-6fzn47-control, 23 | .css-1ou54ee-control { 24 | background: var(--bg-lvl-3); 25 | border: none; 26 | border-radius: var(--rounded-small); 27 | cursor: pointer; 28 | } 29 | 30 | // Dropdown 31 | .css-3vaxre-menu, 32 | .css-1x99fvh-menu, 33 | .popout-VcNcHB { 34 | background: var(--bg-lvl-2); 35 | border: none; 36 | box-shadow: var(--elevation-far); 37 | border-radius: var(--rounded-small); 38 | margin-top: var(--spacing); 39 | overflow: hidden; 40 | } 41 | 42 | // Hovered menu item 43 | .css-rzbxvl-option, 44 | .css-pkcurw-option, 45 | .option-3KoAJB:hover { 46 | background: var(--bg-lvl-3); 47 | } 48 | 49 | // Selected menu item 50 | .css-1ba14n5-option, 51 | .css-1gxgi19-option, 52 | .option-3KoAJB[aria-selected="true"] { 53 | background: rgb(var(--accent)); 54 | color: #fff; 55 | .selectedIcon-3uS11H { 56 | color: #fff; 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /src/inputs/_slider.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .bar-2Qqk5Z { 3 | background: var(--bg-lvl-3); 4 | } 5 | .barFill-23-gu- { 6 | background: rgb(var(--accent)); 7 | } 8 | .markDash-3hAolZ { 9 | background: var(--bg-lvl-3); 10 | } 11 | .markValue-2DwdXI { 12 | color: var(--text-muted); 13 | } 14 | .grabber-3mFHz2 { 15 | box-shadow: var(--elevation-close); 16 | border: none; 17 | } 18 | } -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | @use 'theme'; 2 | 3 | @use 'base'; -------------------------------------------------------------------------------- /src/members/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .members-1998pB { 2 | margin-top: var(--app-spacing); 3 | margin-left: var(--app-spacing); 4 | border-radius: var(--rounded-large); 5 | background: var(--bg-lvl-1); 6 | width: var(--sidebar-width); 7 | box-shadow: var(--elevation-close); 8 | 9 | &::-webkit-scrollbar { 10 | display: none; 11 | } 12 | 13 | & > div { 14 | background: var(--bg-lvl-1); 15 | } 16 | } -------------------------------------------------------------------------------- /src/members/_header.scss: -------------------------------------------------------------------------------- 1 | #app-mount .membersGroup-v9BXpm { 2 | padding: var(--spacing-xl) calc(var(--spacing-md) + var(--spacing-xl)) var(--spacing-xs); 3 | height: auto; 4 | font-weight: var(--font-weight-bold); 5 | color: var(--text-focus); 6 | } -------------------------------------------------------------------------------- /src/members/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'container'; 2 | @forward 'header'; 3 | @forward 'member'; -------------------------------------------------------------------------------- /src/members/_member.scss: -------------------------------------------------------------------------------- 1 | #app-mount .member-3-YXUe { 2 | max-width: unset; 3 | margin: 0 var(--spacing-xl) var(--spacing-xs) var(--spacing-xl); 4 | 5 | .layout-2DM8Md { 6 | height: auto; 7 | padding: var(--spacing) var(--spacing-md); 8 | border-radius: var(--rounded-large); 9 | } 10 | .name-uJV0GL { 11 | line-height: 22px; 12 | } 13 | 14 | .botTagRegular-2HEhHi { 15 | background: rgba(var(--accent), 1); 16 | } 17 | .botText-1526X_ { 18 | font-weight: var(--font-weight-bold); 19 | } 20 | 21 | & + .membersGroup-v9BXpm { 22 | margin-top: var(--spacing-xl); 23 | } 24 | 25 | &:hover { 26 | rect { 27 | stroke: var(--bg-lvl-2); 28 | } 29 | .layout-2DM8Md { 30 | background: var(--bg-lvl-2); 31 | } 32 | } 33 | &.selected-aXhQR6 { 34 | rect { 35 | stroke: rgba(var(--accent), 1); 36 | } 37 | .layout-2DM8Md { 38 | background: rgba(var(--accent), 1); 39 | } 40 | .roleColor-rz2vM0 { 41 | color: #fff !important; 42 | } 43 | .activityText-yGKsKm, 44 | .icon-15YQ1T { 45 | color: #fff; 46 | } 47 | .botTagRegular-2HEhHi { 48 | background: #fff; 49 | color: rgba(var(--accent), 1); 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /src/modals/_addjoinserver.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .templatesList-2E6rTe { 3 | padding: 0 var(--spacing) 0 var(--spacing-xl); 4 | .colorHeaderSecondary-3Sp3Ft { 5 | color: var(--text-normal); 6 | } 7 | & + div > h3 { 8 | display: none; 9 | } 10 | } 11 | .optionsList-3UMAjx .colorHeaderSecondary-3Sp3Ft { 12 | color: var(--text-normal); 13 | } 14 | 15 | .container-UC8Ug1 { 16 | background: var(--bg-lvl-1); 17 | transition: background .15s ease; 18 | margin-bottom: var(--spacing-xl); 19 | .colorStandard-2KCXvj { 20 | color: var(--text-focus); 21 | } 22 | &:hover { 23 | background: var(--bg-lvl-2); 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/modals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'modal'; 2 | @forward 'userprofile'; 3 | @forward 'addjoinserver'; 4 | @forward 'upload'; -------------------------------------------------------------------------------- /src/modals/_modal.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .root-1gCeng { 3 | background: var(--bg-lvl-0); 4 | box-shadow: var(--elevation-far); 5 | border-radius: var(--rounded-large); 6 | } 7 | .backdrop-1wrmKB { 8 | background: var(--backdrop) !important; 9 | } 10 | .header-1TKi98 { 11 | overflow: visible; 12 | padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl); 13 | .base-1x0h_U { 14 | color: var(--text-focus); 15 | } 16 | .colorHeaderSecondary-3Sp3Ft { 17 | color: var(--text-normal); 18 | } 19 | } 20 | .footer-2gL1pp { 21 | background: var(--bg-lvl-1); 22 | box-shadow: none; 23 | .button-38aScr.lookBlank-3eh9lL { 24 | color: var(--text-normal); 25 | } 26 | } 27 | .backButton-iA7KIs { 28 | color: var(--text-normal); 29 | } 30 | } -------------------------------------------------------------------------------- /src/modals/_upload.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal-2ifh8j { 2 | background: var(--bg-lvl-0); 3 | border: none; 4 | box-shadow: var(--elevation-far); 5 | 6 | .inner-3nWsbo { 7 | margin: 0; 8 | } 9 | .icon-kyxXVr:not(.image-2yrs5j) { 10 | display: none; 11 | } 12 | .comment-4IWttf { 13 | margin: 0 var(--spacing-3xl); 14 | } 15 | .channelTextAreaUpload-3t7EIx { 16 | margin: var(--spacing) 0 var(--spacing-3xl); 17 | } 18 | .description-2ug5H_ { 19 | padding: var(--spacing-3xl) 0 var(--spacing-3xl) var(--spacing-3xl); 20 | } 21 | 22 | .slateTextArea-1Mkdgw, 23 | .textArea-12jD-V { 24 | min-height: 54px; 25 | } 26 | .buttons-3JBrkn { 27 | padding: var(--spacing-md) 0 0 var(--spacing-md); 28 | } 29 | 30 | .footer-3mqk7D { 31 | background: var(--bg-lvl-1); 32 | box-shadow: none; 33 | padding: var(--spacing-xl); 34 | } 35 | } -------------------------------------------------------------------------------- /src/modals/_userprofile.scss: -------------------------------------------------------------------------------- 1 | @use '../assets'; 2 | 3 | $leftSide: 260px; 4 | $rightSide: 704px; 5 | $bannerHeight: 200px; 6 | 7 | #app-mount .root-3QyAh1 { 8 | background: transparent; 9 | width: 980px; 10 | display: grid; 11 | grid-template-columns: $leftSide 1fr; 12 | grid-gap: var(--spacing-xl); 13 | overflow: visible; 14 | height: 495px; 15 | max-height: 495px; 16 | 17 | &::before { 18 | content: ""; 19 | position: absolute; 20 | top: calc(-60px - var(--spacing-xl)); 21 | background: var(--bg-lvl-1); 22 | box-shadow: var(--elevation-far); 23 | border-radius: var(--rounded-large); 24 | width: 100%; 25 | height: 60px; 26 | } 27 | 28 | .topSection-y3p-_D { 29 | width: 100%; 30 | border-radius: var(--rounded-large); 31 | box-shadow: var(--elevation-far); 32 | padding: var(--spacing-xl); 33 | box-sizing: border-box; 34 | background: var(--bg-lvl-0); 35 | } 36 | .banner-2QYc2d { 37 | position: absolute; 38 | height: $bannerHeight; 39 | top: 0; 40 | width: $rightSide; 41 | left: calc(#{$leftSide} + var(--spacing-xl)); 42 | border-radius: var(--rounded-large); 43 | box-shadow: var(--elevation-far); 44 | } 45 | .profileBanner-33-uE1:before { 46 | content: ""; 47 | background: rgb(0 0 0 / .2); 48 | mask: url("#{assets.$pattern_1}"); 49 | width: 100%; 50 | height: 100%; 51 | position: absolute; 52 | } 53 | .header-4zuFdR { 54 | position: unset; 55 | } 56 | .headerTop-547GTz { 57 | padding: 0; 58 | margin-top: var(--spacing-xl); 59 | display: block; 60 | } 61 | 62 | // Badges 63 | .badgeList-1R1WgZ { 64 | margin: 0 0 calc(var(--spacing-xl) - 6px); 65 | padding: 0; 66 | &:empty { 67 | margin: 0; 68 | } 69 | } 70 | .profileBadge22-LJmn9o { 71 | width: 32px; 72 | height: 32px; 73 | } 74 | 75 | // Avatar 76 | .avatar-AvHqJA { 77 | position: relative; 78 | top: 0; 79 | left: 0; 80 | border: none; 81 | width: 228px !important; 82 | height: 228px !important; 83 | background: transparent; 84 | rect { 85 | width: 18px; 86 | height: 18px; 87 | x: 104px; 88 | y: 104px; 89 | stroke: var(--bg-lvl-0); 90 | stroke-width: 4px; 91 | } 92 | } 93 | 94 | // Name 95 | .nameTag-ECvD8P { 96 | position: absolute; 97 | top: calc(var(--spacing-xl) / -1 - 42px); 98 | margin: 0; 99 | z-index: 1; 100 | } 101 | 102 | // Custom status 103 | .customStatusActivity-nmH3DF { 104 | padding: 0; 105 | margin-bottom: var(--spacing-xl); 106 | } 107 | 108 | // Actions 109 | .relationshipButtons-pUQVkf { 110 | position: absolute; 111 | top: calc(-78px - var(--spacing-xl)); 112 | right: var(--spacing-md); 113 | } 114 | 115 | // Tabs 116 | .tabBarContainer-37hZsr { 117 | width: 100%; 118 | padding: 0; 119 | display: block; 120 | box-sizing: border-box; 121 | border: none; 122 | margin-top: var(--spacing-xl); 123 | } 124 | .tabBar-3nvOPa { 125 | height: auto; 126 | display: block; 127 | } 128 | .item-PXvHYJ { 129 | height: auto; 130 | border: none !important; 131 | margin: 0; 132 | padding: var(--spacing) var(--spacing-lg); 133 | border-radius: var(--rounded-small); 134 | &::before { 135 | content: ""; 136 | width: 18px; 137 | height: 18px; 138 | background: var(--text-normal); 139 | display: block; 140 | margin-right: var(--spacing); 141 | mask-size: 18px; 142 | mask-position: center; 143 | mask-repeat: no-repeat; 144 | margin-right: var(--spacing); 145 | } 146 | &[aria-controls="USER_INFO-tab"]:before { 147 | mask-image: url(assets.$icon_user); 148 | } 149 | &[aria-controls="ACTIVITY-tab"]:before { 150 | mask-image: url(assets.$icon_rss); 151 | } 152 | &[aria-controls="MUTUAL_GUILDS-tab"]:before { 153 | mask-image: url(assets.$icon_server); 154 | } 155 | &[aria-controls="MUTUAL_FRIENDS-tab"]:before { 156 | mask-image: url(assets.$icon_users); 157 | } 158 | &:not(:last-child) { 159 | margin-bottom: var(--spacing); 160 | } 161 | &:hover { 162 | color: var(--text-focus); 163 | background: var(--bg-lvl-1); 164 | } 165 | &.selected-3s45Ha { 166 | color: #fff; 167 | background: rgba(var(--accent), 1); 168 | } 169 | } 170 | 171 | // Body 172 | .body-r6_QPy { 173 | width: 100%; 174 | height: 100%; 175 | max-height: 280px; 176 | margin-top: calc(#{$bannerHeight} + var(--spacing-xl)); 177 | background: var(--bg-lvl-1); 178 | border-radius: var(--rounded-large); 179 | overflow: hidden; 180 | box-shadow: var(--elevation-far); 181 | border: none; 182 | } 183 | .infoScroller-1Qu30O { 184 | padding: var(--spacing-xl); 185 | } 186 | 187 | .userInfoSectionHeader-3TYk6R { 188 | color: var(--text-normal); 189 | font-size: var(--font-size-xsm); 190 | margin-bottom: var(--spacing); 191 | font-weight: var(--font-weight-bold); 192 | } 193 | .userInfoSection-q_35fn { 194 | padding: 0 0 var(--spacing-xl); 195 | border: none; 196 | & + .userInfoSection-q_35fn { 197 | padding-bottom: 0; 198 | &::before { 199 | content: "Connections"; 200 | color: var(--text-normal); 201 | font-size: var(--font-size-xsm); 202 | font-weight: var(--font-weight-bold); 203 | text-transform: uppercase; 204 | margin-bottom: var(--spacing); 205 | display: block; 206 | } 207 | } 208 | } 209 | .note-367eZJ { 210 | margin: 0; 211 | } 212 | 213 | // Connections 214 | .connectedAccounts-QlRa4m { 215 | display: grid; 216 | grid-template-columns: 1fr 1fr; 217 | grid-gap: var(--spacing-xl); 218 | margin-top: 0; 219 | } 220 | .connectedAccount-2Jb-Z0 { 221 | margin: 0; 222 | width: 100%; 223 | box-sizing: border-box; 224 | border: none; 225 | background: var(--bg-lvl-2); 226 | border-radius: var(--rounded-large); 227 | } 228 | 229 | } -------------------------------------------------------------------------------- /src/pages/_friends.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-1D34oG { 3 | background: transparent; 4 | width: calc(100vw - var(--sidebar-width) - 72px - var(--app-spacing) * 3); 5 | } 6 | .tabBody-3YRQ8W { 7 | &::before { 8 | content: none; 9 | } 10 | } 11 | 12 | .peopleList-3c4jOR { 13 | margin-top: var(--app-spacing); 14 | padding-bottom: 0; 15 | 16 | & > div { 17 | margin-right: var(--spacing-xl); 18 | margin-top: calc(var(--app-spacing) / -1 * 2); 19 | } 20 | } 21 | .peopleListItem-2nzedh { 22 | border: none; 23 | border-radius: var(--rounded-large); 24 | background: var(--bg-lvl-1); 25 | margin: 0 0 var(--spacing); 26 | padding: 0 var(--spacing-lg); 27 | } 28 | 29 | .nowPlayingColumn-2sl4cE { 30 | margin: var(--app-spacing) 0 0 var(--app-spacing); 31 | border-radius: var(--rounded-large); 32 | box-shadow: var(--elevation-close); 33 | overflow: hidden; 34 | min-width: unset; 35 | } 36 | .container-lRFx4q { 37 | background: var(--bg-lvl-1); 38 | } 39 | .header-2SF4Nh { 40 | margin-top: 0; 41 | } 42 | .scroller-2ZPeAD { 43 | border: none; 44 | margin-left: 0; 45 | padding: var(--spacing-xl); 46 | } 47 | .section-2gLsgF { 48 | background: var(--bg-lvl-1); 49 | padding: var(--spacing); 50 | } 51 | .wrapper-3D2qGf { 52 | padding: var(--spacing-xl); 53 | border: none; 54 | background: var(--bg-lvl-2); 55 | border-radius: var(--rounded-small); 56 | &:hover { 57 | background: var(--bg-lvl-3); 58 | .section-2gLsgF { 59 | background: var(--bg-lvl-2); 60 | } 61 | } 62 | } 63 | } 64 | 65 | @media only screen and (max-width: 1740px) { 66 | .nowPlayingColumn-2sl4cE { 67 | display: none; 68 | } 69 | } -------------------------------------------------------------------------------- /src/pages/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'friends'; 2 | @forward 'nitro'; -------------------------------------------------------------------------------- /src/pages/_nitro.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .applicationStore-1pNvnv { 3 | background: transparent; 4 | } 5 | .scroller-9moviB { 6 | background: transparent; 7 | } 8 | } -------------------------------------------------------------------------------- /src/platform/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'osx'; 2 | @forward 'windows'; -------------------------------------------------------------------------------- /src/platform/_osx.scss: -------------------------------------------------------------------------------- 1 | html.platform-osx { 2 | // Buttons 3 | .macButtons-2MuSAC { 4 | margin: var(--app-spacing) 0 0 var(--app-spacing); 5 | } 6 | 7 | // Server list 8 | #app-mount .guilds-1SWlCJ { 9 | .tree-2wKJdG { 10 | margin-top: 32px; 11 | } 12 | .scroller-1Bvpku { 13 | padding-top: 0; 14 | } 15 | .unreadMentionsIndicatorTop-2-tcdU { 16 | top: 32px; 17 | } 18 | } 19 | 20 | // Search results 21 | #app-mount #search-results.container-3ayLPN { 22 | top: calc(20% + 64px + var(--spacing-xl)); 23 | } 24 | } -------------------------------------------------------------------------------- /src/platform/_windows.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .typeWindows-1za-n7 { 3 | position: absolute; 4 | width: 100vw; 5 | z-index: 1; 6 | &::after { 7 | content: ""; 8 | position: absolute; 9 | top: calc(var(--win-btns-top) - 4px); 10 | right: var(--app-spacing); 11 | width: 156px; 12 | height: 52px; 13 | border-radius: var(--rounded-large); 14 | z-index: 0; 15 | box-shadow: var(--elevation-close); 16 | } 17 | } 18 | .wordmarkWindows-1v0lYD { 19 | display: none; 20 | } 21 | .winButton-iRh8-Z { 22 | top: calc(var(--win-btns-top) - 4px); 23 | right: var(--app-spacing); 24 | background: var(--bg-lvl-1); 25 | height: 52px; 26 | width: 52px; 27 | z-index: 1; 28 | &:hover { 29 | background: var(--bg-lvl-2) 30 | } 31 | } 32 | .winButtonMinMax-PBQ2gm:nth-child(4) { 33 | border-radius: var(--rounded-large) 0 0 var(--rounded-large); 34 | } 35 | .winButtonClose-1HsbF- { 36 | border-radius: 0 var(--rounded-large) var(--rounded-large) 0; 37 | &:hover { 38 | background: rgb(var(--discord-red)); 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /src/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .autocomplete-1vrmpx { 3 | background: var(--bg-lvl-3); 4 | border-radius: var(--rounded-large); 5 | box-shadow: var(--elevation-close); 6 | bottom: calc(100% + var(--spacing-xl)); 7 | 8 | .wrapper-uf3cnO { 9 | width: 64px; 10 | } 11 | .wrapper-2Gsate { 12 | background: var(--bg-lvl-2); 13 | .mask-2xtthE, 14 | .wrapper-2siovq { 15 | width: 40px !important; 16 | height: 40px !important; 17 | border-radius: var(--rounded-small); 18 | box-sizing: border-box; 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | background: var(--bg-lvl-1); 23 | } 24 | } 25 | 26 | .categoryHeader-O1zU94 { 27 | background: var(--bg-lvl-3); 28 | } 29 | .selectable-3dP3y- { 30 | padding: var(--spacing) var(--spacing-xl) var(--spacing) var(--spacing); 31 | border-radius: var(--rounded-small); 32 | &.selected-1Tbx07 { 33 | background: var(--bg-lvl-2); 34 | } 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/popouts/_inboxpinned.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | 3 | // Global 4 | .messagesPopoutWrap-1MQ1bW, 5 | .recentMentionsPopout-3rCiI6 { 6 | position: fixed; 7 | top: 50%; 8 | left: 50%; 9 | height: 60vh; 10 | min-width: 60vh; 11 | max-width: 60vh; 12 | width: 70vw; 13 | transform: translate(-50%, -50%); 14 | overflow: visible; 15 | box-shadow: var(--elevation-far); 16 | border-radius: var(--rounded-large); 17 | background: var(--bg-lvl-0); 18 | 19 | &::before { 20 | content: ""; 21 | position: absolute; 22 | top: -100vmax; 23 | right: -100vmax; 24 | bottom: -100vmax; 25 | left: -100vmax; 26 | background: var(--backdrop); 27 | pointer-events: none; 28 | z-index: -1; 29 | } 30 | 31 | .messagesPopout-24nkyi { 32 | padding: var(--spacing-xl) !important; 33 | background: var(--bg-lvl-0); 34 | border-radius: 0 0 var(--rounded-large) var(--rounded-large); 35 | &::-webkit-scrollbar { 36 | display: none; 37 | } 38 | } 39 | } 40 | .jumpButton-3DTcS_ { 41 | background: rgb(var(--accent)); 42 | color: #fff; 43 | font-weight: 600; 44 | z-index: 1; 45 | height: auto; 46 | border-radius: var(--rounded-small); 47 | padding: var(--spacing) var(--spacing-md); 48 | margin: -2px 12px 0 0; 49 | transition: box-shadow .15s ease; 50 | &:hover { 51 | background: rgb(var(--accent)); 52 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .1); 53 | } 54 | &:focus { 55 | background: rgb(var(--accent)); 56 | box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .2); 57 | } 58 | } 59 | 60 | // Pinned messages 61 | .header-ykumBX { 62 | border-radius: var(--rounded-large) var(--rounded-large) 0 0; 63 | padding: var(--spacing-3xl); 64 | h3 { 65 | color: var(--text-focus); 66 | font-size: var(--font-size-xl); 67 | } 68 | } 69 | .messagesPopoutWrap-1MQ1bW { 70 | .messageGroupWrapper-o-Zw7G { 71 | background: transparent; 72 | border: none; 73 | margin-bottom: var(--spacing-xl); 74 | } 75 | .cozy-3raOZG { 76 | background: var(--bg-lvl-2); 77 | border-radius: var(--rounded-large); 78 | &:hover { 79 | background: var(--bg-lvl-2) !important; 80 | } 81 | } 82 | } 83 | 84 | 85 | .recentMentionsPopout-3rCiI6 { 86 | .scroller-2UmRce, 87 | .scroller-tlc3kG { 88 | padding: 0 !important; 89 | background: var(--bg-lvl-0); 90 | border-radius: 0 0 var(--rounded-large) var(--rounded-large); 91 | &::-webkit-scrollbar { 92 | display: none; 93 | } 94 | } 95 | .container-3u944p { 96 | background: var(--bg-lvl-0); 97 | } 98 | 99 | .header-2-Imhb { 100 | border-radius: var(--rounded-large) var(--rounded-large) 0 0; 101 | display: grid; 102 | grid-template-columns: 1fr 1fr; 103 | grid-template-areas: "title title" "actions filter"; 104 | height: auto; 105 | min-height: auto; 106 | flex-direction: column; 107 | align-items: center; 108 | width: 100%; 109 | padding: var(--spacing-3xl); 110 | &::before { 111 | content: "Inbox"; 112 | color: var(--text-focus); 113 | font-size: var(--font-size-xl); 114 | margin-bottom: var(--spacing-xl); 115 | } 116 | } 117 | .tabBar-1kuXvJ { 118 | display: flex; 119 | align-items: center; 120 | grid-area: actions; 121 | height: 32px; 122 | & + div { 123 | grid-area: filter; 124 | display: flex; 125 | justify-content: flex-end; 126 | } 127 | } 128 | .tab-ck0077 { 129 | margin: 0 var(--spacing) 0 0; 130 | &.selected-3s45Ha { 131 | background: rgb(var(--accent)); 132 | color: #fff; 133 | } 134 | } 135 | } 136 | .container-3iAQ-0 { 137 | padding: 0; 138 | } 139 | .channelHeader-3Gd2xq { 140 | background: var(--bg-lvl-0); 141 | padding: var(--spacing-xl); 142 | } 143 | .messageContainer-gbhlwo { 144 | background: transparent; 145 | border-radius: 0; 146 | padding-top: 0; 147 | .cozy-3raOZG { 148 | background: var(--bg-lvl-2); 149 | border-radius: var(--rounded-large); 150 | overflow: visible; 151 | margin-left: 82px; 152 | &:hover { 153 | background: var(--bg-lvl-2) !important; 154 | } 155 | } 156 | .avatar-1BDn8e { 157 | left: calc(var(--chat-avatar-size) / -1 - 10px); 158 | } 159 | } 160 | } -------------------------------------------------------------------------------- /src/popouts/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'menu'; 2 | @forward 'userpopout'; 3 | @forward 'inboxpinned'; 4 | @forward 'searchresults'; 5 | @forward 'searchbox'; 6 | @forward 'autocomplete'; 7 | @forward 'servermenu'; 8 | @forward 'threadlist'; -------------------------------------------------------------------------------- /src/popouts/_menu.scss: -------------------------------------------------------------------------------- 1 | #app-mount .menu-3sdvDG { 2 | background: var(--bg-lvl-3); 3 | border-radius: var(--rounded-small); 4 | box-shadow: var(--elevation-far); 5 | 6 | .scroller-3BxosC { 7 | padding: var(--spacing-sm); 8 | } 9 | 10 | 11 | .item-1tOPte { 12 | border-radius: var(--rounded-small); 13 | &.colorPremium-p4p7qO { 14 | color: rgb(var(--discord-nitro)); 15 | } 16 | &.colorBrand-ROmMP1 { 17 | color: rgba(var(--accent), 1); 18 | } 19 | 20 | &.focused-3afm-j, &:active { 21 | background: rgba(var(--accent), 1); 22 | color: #fff; 23 | .radioSelection-1HmrQS, 24 | .checkbox-3s5GYZ { 25 | color: #fff; 26 | } 27 | .check-1JyqgN { 28 | color: rgb(var(--accent)); 29 | } 30 | &.colorPremium-p4p7qO { 31 | background: rgb(var(--discord-nitro)); 32 | color: #222; 33 | .icon-LYJorE { 34 | color: #222; 35 | } 36 | } 37 | &.colorDanger-2qLCe1 { 38 | background: rgb(var(--discord-red)); 39 | } 40 | } 41 | } 42 | 43 | // Checkbox/radio 44 | .radioSelection-1HmrQS, 45 | .checkbox-3s5GYZ { 46 | color: rgb(var(--accent)); 47 | } 48 | } -------------------------------------------------------------------------------- /src/popouts/_searchbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Search box 3 | .search-36MZv- { 4 | order: 0; 5 | margin: 0; 6 | .icon-38sknP { 7 | height: 100%; 8 | } 9 | } 10 | .search-2oPWTC.focused-31_ccS { 11 | position: fixed; 12 | left: 50%; 13 | top: 20%; 14 | transform: translateX(-50%); 15 | z-index: 1000; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: var(--rounded-large); 20 | .searchBar-3dMhjb { 21 | background: var(--bg-lvl-2); 22 | height: 64px; 23 | width: 500px; 24 | padding: 0 var(--spacing-xl); 25 | box-sizing: border-box; 26 | box-shadow: var(--elevation-far); 27 | border-radius: var(--rounded-large); 28 | } 29 | .public-DraftEditor-content { 30 | cursor: text; 31 | font-size: var(--font-size-lg); 32 | } 33 | .public-DraftEditorPlaceholder-root { 34 | font-size: var(--font-size-lg); 35 | } 36 | .icon-38sknP { 37 | width: 42px; 38 | } 39 | .iconContainer-O4O2CN, 40 | .icon-3cZ1F_ { 41 | width: 24px; 42 | height: 24px; 43 | } 44 | &::before { 45 | content: ""; 46 | position: fixed; 47 | top: -100vmax; 48 | right: -100vmax; 49 | bottom: -100vmax; 50 | left: -100vmax; 51 | background: var(--backdrop); 52 | z-index: -1; 53 | } 54 | } 55 | .searchBar-3dMhjb { 56 | background: var(--bg-lvl-0); 57 | padding: 0; 58 | height: 32px; 59 | width: 250px; 60 | } 61 | .DraftEditor-root { 62 | padding: 0; 63 | } 64 | .DraftEditor-editorContainer { 65 | height: 100%; 66 | } 67 | .public-DraftEditor-content { 68 | display: flex; 69 | align-items: center; 70 | padding-left: var(--spacing-md); 71 | cursor: pointer; 72 | } 73 | .public-DraftEditorPlaceholder-root { 74 | height: 100%; 75 | display: flex; 76 | align-items: center; 77 | padding-left: var(--spacing-md); 78 | } 79 | 80 | #search-results.container-3ayLPN { 81 | position: fixed; 82 | left: 50%; 83 | top: calc(20% + 46px + var(--spacing-xl)); 84 | transform: translateX(-50%); 85 | width: 500px !important; 86 | box-sizing: border-box; 87 | border-radius: var(--rounded-large); 88 | background: var(--bg-lvl-1); 89 | box-shadow: var(--elevation-far); 90 | } 91 | .resultsGroup-r_nuzN { 92 | padding: var(--spacing-xl) 0; 93 | margin: 0; 94 | &::before { 95 | content: none; 96 | } 97 | } 98 | .queryContainer-RKFJW- { 99 | background: var(--bg-lvl-2); 100 | border: none; 101 | } 102 | .option-96V44q { 103 | line-height: 20px; 104 | &.selected-rZcOL- { 105 | background: var(--bg-lvl-3); 106 | } 107 | &::after { 108 | background: linear-gradient(90deg, transparent, var(--bg-lvl-1) 80%); 109 | } 110 | } 111 | .answer-1n6g43, 112 | .header-2N-gMV, 113 | .plusIcon-v0BTrL { 114 | color: var(--text-focus); 115 | } 116 | .filter-3Y_im-, 117 | .searchClearHistory-2cSSMO, 118 | .searchLearnMore-3SQUAj a, 119 | .displayUsername-Qekxml, 120 | .searchResultChannelIcon-1DnTme { 121 | color: var(--text-normal); 122 | } 123 | .searchResultChannelCategory-1l0lSn { 124 | color: var(--text-muted); 125 | } 126 | } -------------------------------------------------------------------------------- /src/popouts/_searchresults.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .searchResultsWrap-3-pOjs { 3 | margin: var(--app-spacing) 0 0 var(--app-spacing); 4 | border-radius: var(--rounded-large); 5 | background: var(--bg-lvl-1); 6 | box-shadow: var(--elevation-close); 7 | width: 500px; 8 | } 9 | .searchHeader-2XoQg7 { 10 | background: var(--bg-lvl-2); 11 | } 12 | .channelName-1JRO3C { 13 | background: var(--bg-lvl-1); 14 | } 15 | .searchResult-9tQ1uo { 16 | background: transparent; 17 | .repliedMessage-VokQwo { 18 | background: var(--bg-lvl-2); 19 | } 20 | .cozy-3raOZG { 21 | background: var(--bg-lvl-3); 22 | border-radius: var(--rounded-large); 23 | &:hover { 24 | background: var(--bg-lvl-3) !important; 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /src/popouts/_servermenu.scss: -------------------------------------------------------------------------------- 1 | #app-mount #guild-header-popout { 2 | transform: translate(25px,-50px); 3 | } -------------------------------------------------------------------------------- /src/popouts/_threadlist.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-7uh5fX { 3 | position: fixed; 4 | top: 50%; 5 | left: 50%; 6 | height: 60vh; 7 | min-width: 60vh; 8 | max-width: 60vh; 9 | width: 70vw; 10 | transform: translate(-50%, -50%); 11 | overflow: visible; 12 | box-shadow: var(--elevation-far); 13 | border-radius: var(--rounded-large); 14 | background: var(--bg-lvl-0); 15 | 16 | &::before { 17 | content: ""; 18 | position: absolute; 19 | top: -100vmax; 20 | right: -100vmax; 21 | bottom: -100vmax; 22 | left: -100vmax; 23 | background: var(--backdrop); 24 | pointer-events: none; 25 | z-index: -1; 26 | } 27 | } 28 | 29 | .header-1VS4tm { 30 | height: auto; 31 | border-radius: var(--rounded-large) var(--rounded-large) 0 0; 32 | padding: var(--spacing-3xl); 33 | .createButton-nlV8qH { 34 | height: auto; 35 | } 36 | } 37 | 38 | .activeThreadsList-3f7l7U { 39 | background: var(--bg-lvl-0); 40 | } 41 | .list-wek7hJ { 42 | height: 100%; 43 | background: var(--bg-lvl-0); 44 | border-radius: 0 0 var(--rounded-large) var(--rounded-large); 45 | } 46 | .container-2I9Hud { 47 | border-radius: var(--rounded-large); 48 | background: var(--bg-lvl-1); 49 | border: none; 50 | &:hover { 51 | background: var(--bg-lvl-2); 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /src/popouts/_userpopout.scss: -------------------------------------------------------------------------------- 1 | #app-mount .userPopout-xaxa6l { 2 | border-radius: var(--rounded-large); 3 | box-shadow: var(--elevation-far); 4 | 5 | .headerText-1HLrL7 { 6 | color: var(--text-focus); 7 | } 8 | .setIdentityLink-1t8Ahd { 9 | display: none; 10 | } 11 | 12 | // Avatar 13 | .avatarWrapper-3r9PdD { 14 | left: calc(var(--spacing-xl) - 6px); 15 | } 16 | .wrapper-3t9DeA { 17 | border-radius: var(--avatar-radius); 18 | border-color: var(--bg-lvl-1); 19 | background: var(--bg-lvl-1); 20 | rect { 21 | stroke: var(--bg-lvl-1) !important; 22 | } 23 | } 24 | .avatarHint-2A3RNb { 25 | border-radius: var(--avatar-radius); 26 | width: var(--avatar-size-xl); 27 | height: var(--avatar-size-xl); 28 | foreignObject { 29 | mask: none; 30 | } 31 | } 32 | 33 | // Header 34 | .headerNormal-3KXFBt { 35 | background: var(--bg-lvl-1); 36 | } 37 | .headerTop-3vNv-a { 38 | background: var(--bg-lvl-1); 39 | border: none; 40 | padding: calc(var(--spacing-3xl) + 34px) var(--spacing-xl) var(--spacing-xl); 41 | } 42 | .aboutMeSection-1Fw5Ia { 43 | background: transparent; 44 | } 45 | 46 | // Body 47 | .body-3HBlXn { 48 | background: var(--bg-lvl-1); 49 | padding: var(--spacing-xl); 50 | } 51 | .bodyInnerWrapper-26fQXj { 52 | background: transparent; 53 | } 54 | .bodyTitle-3FWCs2 { 55 | color: var(--text-focus); 56 | } 57 | .divider-ewBQKj { 58 | display: none; 59 | } 60 | 61 | // Activity 62 | .activity-3v9l4T { 63 | padding: 0 var(--spacing-xl); 64 | } 65 | 66 | // Roles 67 | .rolesList-1geHY1 { 68 | position: unset; 69 | margin: 0 0 var(--spacing-lg); 70 | } 71 | .role-2irmRk { 72 | padding: var(--spacing-xs) var(--spacing); 73 | border: none; 74 | height: auto; 75 | border-radius: var(--rounded-small); 76 | position: relative; 77 | overflow: hidden; 78 | z-index: 1; 79 | line-height: normal; 80 | } 81 | .roleCircle-3xAZ1j:before { 82 | content: ""; 83 | background: inherit; 84 | opacity: .3; 85 | position: absolute; 86 | width: 100%; 87 | height: 100%; 88 | top: 0; 89 | left: 0; 90 | z-index: -1; 91 | } 92 | .roleName-32vpEy { 93 | z-index: 2; 94 | margin-right: 0; 95 | } 96 | .roleCircle-3xAZ1j { 97 | border-radius: var(--rounded-small); 98 | margin-right: var(--spacing); 99 | } 100 | .addButton-pcyyf6.role-2irmRk { 101 | position: absolute; 102 | top: 16px; 103 | right: var(--spacing); 104 | border: none; 105 | padding: 0; 106 | width: 12px; 107 | height: 12px; 108 | color: var(--text-normal); 109 | margin: 0; 110 | svg { 111 | width: 100%; 112 | height: 100%; 113 | } 114 | } 115 | 116 | // Footer 117 | .footer-3UKYOU { 118 | background: var(--bg-lvl-1); 119 | padding: 0; 120 | .inputWrapper-31_8H8 { 121 | margin: 0 var(--spacing-xl) var(--spacing-xl); 122 | } 123 | } 124 | .protip-2urNh2 { 125 | display: none; 126 | } 127 | 128 | // Message 129 | .note-1oo11U { 130 | margin: 0; 131 | } 132 | .input-cIJ7To { 133 | background: var(--bg-lvl-2); 134 | border: none; 135 | font-weight: var(--font-weight-normal); 136 | height: auto; 137 | padding: var(--spacing); 138 | border-radius: var(--rounded-large); 139 | &::placeholder { 140 | font-weight: inherit; 141 | color: var(--text-muted); 142 | } 143 | &:focus { 144 | box-shadow: var(--input-focus); 145 | } 146 | } 147 | 148 | 149 | 150 | 151 | // Usrbg support 152 | &[style*="--user-background"] { 153 | .banner-2QYc2d { 154 | height: 120px; 155 | background: var(--user-background) center/cover no-repeat; 156 | } 157 | .avatarPositionNormal-aZjAsn { 158 | top: 74px; 159 | } 160 | } 161 | } -------------------------------------------------------------------------------- /src/responsive/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'small'; -------------------------------------------------------------------------------- /src/responsive/_small.scss: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 1000px) { 2 | #app-mount { 3 | .base-3dtUhz { 4 | margin: var(--app-spacing); 5 | } 6 | 7 | .sidebar-2K8pFh { 8 | width: 0; 9 | transition: .15s ease width; 10 | position: absolute; 11 | z-index: 900; 12 | margin-left: calc(var(--app-spacing) / -1); 13 | height: 100%; 14 | &:hover { 15 | width: var(--sidebar-width); 16 | &::before { 17 | content: ""; 18 | position: absolute; 19 | top: 0; 20 | left: -10px; 21 | height: 100%; 22 | width: 10px; 23 | background: var(--bg-lvl-2); 24 | height: calc(100% - var(--app-spacing) - 64px); 25 | z-index: 1; 26 | pointer-events: none; 27 | user-select: none; 28 | } 29 | &::after { 30 | content: ""; 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | right: 0; 35 | height: calc(100% - var(--app-spacing) - 64px); 36 | border-radius: 0 var(--rounded-large) var(--rounded-large) 0; 37 | box-shadow: var(--elevation-far); 38 | } 39 | } 40 | } 41 | .container-3baos1 { 42 | overflow: hidden; 43 | } 44 | 45 | 46 | .guilds-1SWlCJ { 47 | border-radius: var(--rounded-large); 48 | transition: .15s ease border-radius; 49 | transition-delay: .2s; 50 | 51 | &::after { 52 | width: 72px; 53 | transition: .15s ease width; 54 | } 55 | 56 | &:hover { 57 | border-radius: var(--rounded-large) 0 0 var(--rounded-large); 58 | transition: none; 59 | & + .base-3dtUhz .sidebar-2K8pFh { 60 | width: var(--sidebar-width); 61 | } 62 | &::after { 63 | width: calc(var(--sidebar-width) + 72px); 64 | box-shadow: var(--elevation-far); 65 | z-index: 900; 66 | } 67 | } 68 | } 69 | } 70 | .platform-osx { 71 | .guilds-1SWlCJ:hover + .base-3dtUhz .container-1r6BKw, 72 | .sidebar-2K8pFh:hover + .chat-3bRxxu .container-1r6BKw { 73 | background: red; 74 | -webkit-app-region: none; 75 | } 76 | } 77 | } -------------------------------------------------------------------------------- /src/settings/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="SETTINGS"] { 2 | background: transparent; 3 | top: 0; 4 | left: 0; 5 | padding: 0; 6 | width: 100%; 7 | height: 100%; 8 | overflow: visible; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | z-index: 1; 13 | 14 | .standardSidebarView-3F1I7i { 15 | max-width: var(--settings-width); 16 | max-height: var(--settings-height); 17 | position: unset; 18 | } 19 | .contentRegion-3nDuYy { 20 | flex: 1 1 auto; 21 | width: var(--settings-width); 22 | position: unset; 23 | min-height: 800px; 24 | max-height: 800px; 25 | } 26 | 27 | .toolsContainer-1edPuj { 28 | padding-top: 0; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | position: fixed; 34 | z-index: -1; 35 | } 36 | .tools-3-3s-N, 37 | .container-1sFeqf { 38 | width: 100%; 39 | height: 100%; 40 | } 41 | .keybind-KpFkfr { 42 | display: none; 43 | } 44 | .closeButton-1tv5uR { 45 | background: rgb(0 0 0 / .7); 46 | border: none; 47 | border-radius: 0; 48 | flex: 0; 49 | width: 100%; 50 | height: 100vh; 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | z-index: 1; 55 | } 56 | 57 | .standardSidebarView-3F1I7i { 58 | background: transparent; 59 | top: 0; 60 | } 61 | 62 | // Custom scroller bullshit thing 63 | .customContainer-1RHXqt { 64 | position: relative; 65 | &::-webkit-scrollbar { 66 | display: none; 67 | } 68 | } 69 | .contentColumnMinimal-2iX-kP { 70 | padding: 0; 71 | } 72 | .customScroller-26gWhv { 73 | overflow: hidden !important; 74 | & > div { 75 | min-width: unset; 76 | max-width: unset; 77 | margin: 0; 78 | & > div[style="height: 60px;"] { 79 | display: none; 80 | } 81 | } 82 | } 83 | .sidebar-dLM-kh, 84 | .scroller-Utb7tO { 85 | max-height: 800px; 86 | } 87 | .contentContainer-14yMzC { 88 | position: relative; 89 | left: 0; 90 | width: 100%; 91 | .scroller-3ZpLaI { 92 | max-height: 800px; 93 | } 94 | } 95 | .sidebar-3Wgas9 { 96 | position: relative; 97 | } 98 | .page-3njELR { 99 | min-width: unset; 100 | max-width: unset; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/settings/_content.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .contentRegion-3nDuYy { 3 | border-radius: var(--rounded-large); 4 | box-shadow: var(--elevation-far); 5 | overflow: hidden; 6 | } 7 | .contentRegionScroller-26nc1e { 8 | background: var(--bg-lvl-0); 9 | &::-webkit-scrollbar-track { 10 | background: var(--bg-lvl-1); 11 | border-color: var(--bg-lvl-0); 12 | } 13 | &::-webkit-scrollbar-thumb { 14 | background: var(--bg-lvl-2); 15 | border-color: var(--bg-lvl-0); 16 | } 17 | } 18 | .contentColumn-2hrIYH, 19 | .customColumn-Rb6toI { 20 | max-width: 990px; 21 | padding: var(--spacing-3xl); 22 | } 23 | 24 | // Form notices 25 | .formNotice-2_hHWR { 26 | background: var(--bg-lvl-1); 27 | border: none; 28 | } 29 | 30 | // Group hover thingy 31 | .card-FDVird:before { 32 | content: none; 33 | } 34 | 35 | .title-31JmR4 { 36 | color: var(--text-focus); 37 | } 38 | .h5-18_1nd { 39 | color: var(--text-focus); 40 | font-weight: bold; 41 | } 42 | .description-3_Ncsb, .labelDescriptor-1PqHgD { 43 | color: var(--text-normal); 44 | } 45 | } -------------------------------------------------------------------------------- /src/settings/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'container'; 2 | @forward 'content'; 3 | @forward 'sidebar'; 4 | @forward 'usersettings'; 5 | @forward 'serversettings'; -------------------------------------------------------------------------------- /src/settings/_serversettings.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="GUILD_SETTINGS"] { 2 | // Roles 3 | .contentWidth-xLB44s { 4 | width: 100%; 5 | min-width: unset; 6 | max-width: unset; 7 | padding: 0 calc(var(--spacing-xl) * 2); 8 | } 9 | .header-2mZ9Ov, 10 | .titleContainer-2CXtJo { 11 | background: var(--bg-lvl-0); 12 | padding-top: var(--spacing-xl); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/settings/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @use '../assets'; 2 | 3 | #app-mount { 4 | .sidebarRegion-VFTUkN { 5 | margin-right: var(--app-spacing); 6 | } 7 | .sidebarRegionScroller-3MXcoP { 8 | background: var(--bg-lvl-1); 9 | border-radius: var(--rounded-large); 10 | box-shadow: var(--elevation-far); 11 | } 12 | .info-1VyQPT .colorMuted-HdFt4q:first-child:before { 13 | content: "iPadOS " var(--ipados-base-version); 14 | display: block; 15 | } 16 | 17 | .sidebar-CFHs9e { 18 | padding: calc(var(--spacing-xl) * 2) var(--spacing-xl); 19 | width: 250px; 20 | 21 | // Icons 22 | .item-PXvHYJ { 23 | display: flex; 24 | align-items: center; 25 | &::before { 26 | content: ""; 27 | width: 18px; 28 | height: 18px; 29 | background: var(--text-normal); 30 | display: block; 31 | margin-right: var(--spacing); 32 | mask-image: url(assets.$icon_cog); 33 | mask-size: 18px; 34 | mask-position: center; 35 | mask-repeat: no-repeat; 36 | margin-right: var(--spacing); 37 | } 38 | 39 | &:hover { 40 | background: var(--bg-lvl-2) !important; 41 | } 42 | &:active { 43 | background: var(--bg-lvl-3) !important; 44 | } 45 | &.selected-3s45Ha { 46 | background: rgb(var(--accent)) !important; 47 | color: #fff; 48 | &::before { 49 | background: #fff; 50 | } 51 | } 52 | 53 | // User settings 54 | &[aria-controls="My Account-tab"]:before { 55 | mask-image: url(assets.$icon_user); 56 | } 57 | &[aria-controls="Privacy & Safety-tab"]:before { 58 | mask-image: url(assets.$icon_shield-check); 59 | } 60 | &[aria-controls="Authorized Apps-tab"]:before { 61 | mask-image: url(assets.$icon_clipboard-check); 62 | } 63 | &[aria-controls="Connections-tab"]:before { 64 | mask-image: url(assets.$icon_link); 65 | } 66 | &[aria-controls="Discord Nitro-tab"] { 67 | background: transparent !important; 68 | color: rgb(var(--discord-blurple)); 69 | svg { 70 | display: none; 71 | } 72 | &::before { 73 | background: currentColor; 74 | mask-image: url(assets.$icon_discord); 75 | } 76 | &:hover { 77 | background: var(--bg-lvl-2) !important; 78 | } 79 | &.selected-3s45Ha { 80 | background: rgb(114, 137, 218) !important; 81 | } 82 | } 83 | &[aria-controls="Nitro Server Boost-tab"] { 84 | color: rgb(var(--discord-nitro)) !important; 85 | &::before { 86 | background: currentColor; 87 | mask-image: url(assets.$icon_nitro-gem); 88 | } 89 | &.selected-3s45Ha { 90 | color: #222 !important; 91 | background: rgb(var(--discord-nitro)) !important; 92 | } 93 | } 94 | &[aria-controls="Library Inventory-tab"]:before { 95 | mask-image: url(assets.$icon_gift); 96 | } 97 | &[aria-controls="Billing-tab"]:before { 98 | mask-image: url(assets.$icon_card); 99 | } 100 | &[aria-controls="Appearance-tab"]:before { 101 | mask-image: url(assets.$icon_eye); 102 | } 103 | &[aria-controls="Accessibility-tab"]:before { 104 | mask-image: url(assets.$icon_person-circle); 105 | } 106 | &[aria-controls="Voice & Video-tab"]:before { 107 | mask-image: url(assets.$icon_microphone); 108 | } 109 | &[aria-controls="Text & Images-tab"]:before { 110 | mask-image: url(assets.$icon_chat); 111 | } 112 | &[aria-controls="Notifications-tab"]:before { 113 | mask-image: url(assets.$icon_bell); 114 | } 115 | &[aria-controls="Keybinds-tab"]:before { 116 | mask-image: url(assets.$icon_keyboard); 117 | } 118 | &[aria-controls="Language-tab"]:before { 119 | mask-image: url(assets.$icon_globe); 120 | } 121 | // &[aria-controls="Windows-tab"]:before { 122 | // mask-image: url(assets.$icon_windows); 123 | // } 124 | &[aria-controls="Streamer Mode-tab"]:before { 125 | mask-image: url(assets.$icon_video); 126 | } 127 | &[aria-controls="Advanced-tab"]:before { 128 | mask-image: url(assets.$icon_chip); 129 | } 130 | &[aria-controls="Game Activity-tab"]:before { 131 | mask-image: url(assets.$icon_rss); 132 | } 133 | &[aria-controls="Overlay-tab"]:before { 134 | mask-image: url(assets.$icon_desktop-computer); 135 | } 136 | &[aria-controls="changelog-tab"]:before { 137 | mask-image: url(assets.$icon_click); 138 | } 139 | &[aria-controls="Hypesquad Online-tab"] { 140 | color: rgb(var(--discord-yellow)); 141 | &::before { 142 | background: currentColor; 143 | mask: url(assets.$icon_hypesquad) center/cover no-repeat; 144 | } 145 | &.selected-3s45Ha { 146 | color: var(--white); 147 | background: rgb(var(--discord-yellow)); 148 | } 149 | } 150 | &[aria-controls="logout-tab"] { 151 | &::before { 152 | mask-image: url(assets.$icon_logout); 153 | background: rgb(var(--discord-red)); 154 | } 155 | &[style*="background-color: rgba(240, 71, 71, 0.1)"] { 156 | background: transparent !important; 157 | } 158 | &[style*="background-color: rgb(240, 71, 71)"]:before { 159 | background: #fff !important; 160 | } 161 | } 162 | 163 | // BetterDiscord 164 | &[aria-controls="Emotes-tab"]:before { 165 | mask-image: url(assets.$icon_emoji-happy); 166 | mask-size: 14px; 167 | } 168 | &[aria-controls="plugins-tab"]:before { 169 | mask-image: url(assets.$icon_puzzle); 170 | } 171 | &[aria-controls="themes-tab"]:before { 172 | mask-image: url(assets.$icon_color-swatch); 173 | } 174 | &[aria-controls="customcss-tab"]:before { 175 | mask-image: url(assets.$icon_code); 176 | } 177 | 178 | // Server settings 179 | &[aria-controls="OVERVIEW-tab"]:before { 180 | mask-image: url(assets.$icon_eye); 181 | } 182 | &[aria-controls="ROLES-tab"]:before { 183 | mask-image: url(assets.$icon_view-list); 184 | } 185 | &[aria-controls="EMOJI-tab"]:before { 186 | mask-image: url(assets.$icon_emoji-happy); 187 | } 188 | &[aria-controls="AUDIT_LOG-tab"]:before { 189 | mask-image: url(assets.$icon_clock); 190 | } 191 | &[aria-controls="INTEGRATIONS-tab"]:before { 192 | mask-image: url(assets.$icon_link); 193 | } 194 | &[aria-controls="GUILD_TEMPLATES-tab"]:before { 195 | mask-image: url(assets.$icon_template); 196 | } 197 | &[aria-controls="GUILD_PREMIUM-tab"] { 198 | color: rgb(114, 137, 218); 199 | svg { 200 | display: none; 201 | } 202 | &::before { 203 | mask-image: url(assets.$icon_lightning-bolt); 204 | background: rgb(114, 137, 218); 205 | } 206 | &.selected-3s45Ha:before { 207 | background: #fff; 208 | } 209 | } 210 | &[aria-controls="MEMBERS-tab"]:before { 211 | mask-image: url(assets.$icon_users); 212 | } 213 | &[aria-controls="INSTANT_INVITES-tab"]:before { 214 | mask-image: url(assets.$icon_user-add); 215 | } 216 | &[aria-controls="BANS-tab"]:before { 217 | mask-image: url(assets.$icon_shield-exclamation); 218 | } 219 | // &[aria-controls="DELETE-tab"] { 220 | // &::before { 221 | // mask-image: url(assets.$icon_trashcan); 222 | // mask-size: 12px; 223 | // background: rgb(var(--discord-red)); 224 | // } 225 | // &[style*="background-color: rgba(240, 71, 71, 0.1)"] { 226 | // background: transparent !important; 227 | // } 228 | // &[style*="background-color: rgb(240, 71, 71)"]:before { 229 | // background: #fff !important; 230 | // } 231 | // } 232 | } 233 | } 234 | } -------------------------------------------------------------------------------- /src/settings/_usersettings.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="SETTINGS"] { 2 | // My account 3 | .accountProfileCard-1XCH88 { 4 | background: var(--bg-lvl-1); 5 | } 6 | .background-1QDuV2 { 7 | background: var(--bg-lvl-2); 8 | border-radius: var(--rounded-large); 9 | } 10 | .avatarUploaderInner-3UNxY3 { 11 | border-radius: var(--rounded-large); 12 | background-color: rgb(var(--accent)); 13 | } 14 | .avatarUploaderIndicator-2G-aIZ { 15 | border-radius: var(--rounded-small); 16 | box-shadow: none; 17 | } 18 | .fieldList-21DyL8 { 19 | background: var(--bg-lvl-2); 20 | } 21 | 22 | // Connections 23 | .accountList-33MS45 { 24 | border-radius: var(--rounded-large); 25 | background: var(--bg-lvl-1); 26 | } 27 | .accountBtnInner-sj5jLs { 28 | background-color: var(--bg-lvl-2); 29 | transition: background .15s ease; 30 | &:hover { 31 | background-color: var(--bg-lvl-3); 32 | } 33 | } 34 | .connection-1fbD7X { 35 | background: var(--bg-lvl-1); 36 | border-radius: var(--rounded-large); 37 | } 38 | .connectionHeader-2MDqhu { 39 | background: var(--bg-lvl-2); 40 | } 41 | .integration-3kMeY4 { 42 | background: var(--bg-lvl-0); 43 | } 44 | 45 | // Appearance 46 | .preview-2nSL_2 { 47 | display: none; 48 | } 49 | } --------------------------------------------------------------------------------