├── .docs └── build_checklist.md ├── .editorconfig ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── feature_request.md ├── pull_request_template.md └── workflows │ └── make-release.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── images ├── ui-0.0.13.png ├── ui-0.0.3.png ├── ui-1.12.1.png └── ui-1.5.5.png ├── package-lock.json ├── package.json ├── scripts ├── .gitignore └── update_classes.py └── src ├── fluent-auto.scss ├── fluent-build.scss ├── fluent.scss └── modules ├── betterdiscord ├── _custom_css.scss ├── _meta.scss ├── _plugin_compat.scss ├── _public.scss ├── _settings.scss └── plugins │ ├── _Arashiryuu.MemberCount.scss │ ├── _Dastan21.FavoriteMedia.scss │ ├── _DevilBro.CharCounter.scss │ ├── _DevilBro.GameActivityToggle.scss │ ├── _DevilBro.PersonalPins.scss │ ├── _DevilBro.ReadAllNotificationsButton.scss │ ├── _DevilBro.SettingsModal.scss │ ├── _DevilBro.SpotifyControls.scss │ ├── _DevilBro.StaffTag.scss │ ├── _DevilBro.Translator.scss │ ├── _QWERT.CallTimeCounter.scss │ ├── _Strencher.InvisibleTyping.scss │ ├── _programmer2514.CollapsibleUI.scss │ └── _sawahkitty.KeywordTracker.scss ├── common ├── _bot_tag.scss ├── _common.scss ├── _mention.scss ├── _search.scss ├── _tab_bar.scss └── _typography.scss ├── core ├── _import.scss ├── _metadata.scss ├── _options.scss ├── _reset.scss └── _variables.scss ├── discover └── _discovery.scss ├── home ├── _activity.scss ├── _conversations.scss ├── _dm_profile.scss ├── _home.scss ├── _main.scss └── _toolbar.scss ├── icons ├── _context_menu.scss ├── home │ └── _main.scss └── main │ ├── _account.scss │ ├── _call.scss │ ├── _chat_menu.scss │ └── _toolbar.scss ├── loadscreen └── _loadscreen.scss ├── main ├── _acrylic.scss ├── channels │ ├── _account.scss │ ├── _channels.scss │ └── _rtc.scss ├── chat │ ├── _autocomplete.scss │ ├── _browse.scss │ ├── _chat.scss │ ├── _chat_menu.scss │ ├── _chatbox.scss │ ├── _forum.scss │ ├── _home.scss │ ├── _search_results.scss │ ├── _thread.scss │ └── embeds │ │ ├── _file.scss │ │ ├── _invite.scss │ │ ├── _mediaplayer.scss │ │ ├── _site_preview.scss │ │ ├── _spotify.scss │ │ └── _text.scss ├── guilds │ └── _guilds.scss ├── members │ └── _members.scss ├── toolbar │ ├── _search.scss │ └── _toolbar.scss └── voice │ └── _voice.scss ├── misc └── _loading.scss ├── mixins ├── _elevation.scss ├── _font.scss └── _type.scss ├── modals ├── _activities.scss ├── _add_server.scss ├── _incoming_call.scss ├── _leave_server_feedback.scss ├── _lightbox.scss ├── _link_gate.scss ├── _modal.scss ├── _quality_rating.scss ├── _quickswitcher.scss ├── _reactors.scss ├── _screen_share.scss ├── _server_terms.scss ├── _threads.scss └── _user.scss ├── popouts ├── _account.scss ├── _app_launcher.scss ├── _channel.scss ├── _emoji_picker.scss ├── _inbox.scss ├── _noise_cancellation.scss ├── _pinned_messages.scss ├── _quick_select.scss ├── _roles.scss ├── _rtc.scss ├── _search.scss ├── _soundboard.scss ├── _threads.scss └── _user.scss ├── settings ├── _channel_settings.scss ├── _navigation.scss ├── _server_settings.scss ├── _settings.scss └── _user_settings.scss ├── third_party └── _hljs.scss ├── ui ├── _buttons.scss ├── _context_menu.scss ├── _form.scss ├── _input.scss ├── _scrollbar.scss ├── _titlebar.scss └── _tooltip.scss └── vencord └── _settings.scss /.docs/build_checklist.md: -------------------------------------------------------------------------------- 1 | # Build checklist 2 | **Pre commit** 3 | - [ ] Update version in `/src/modules/core/metadata` 4 | - [ ] Execute `npm run build-static` 5 | - [ ] Run `npm run build-auto` if changes to user vars have been made. 6 | 7 | **Commit** 8 | - [ ] Commit `/src/modules/core/metadata` only 9 | - [ ] Commit message is `Bump version > 1.10.*` 10 | 11 | **Actions** 12 | - [ ] Run make-release 13 | 14 | **Release** 15 | - [ ] Correct tag version 16 | - [ ] Correct version in title 17 | - [ ] Example release body: 18 | ``` 19 | **Full Changelog**: https://github.com/TakosThings/Fluent-Discord/compare/v1.10.8...v1.10.9 20 | 21 | ## Highlights 22 | * 23 | ``` 24 | - [ ] Ensure version numbers to compare are correct 25 | - [ ] Contributors to merged PRs are credited 26 | - [ ] CSS files are uploaded 27 | 28 | **Issues** 29 | - [ ] Close issues resolved in this release 30 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | tab_width = 4 7 | charset = utf-8 8 | end_of_line = crlf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | indent_size = 2 15 | 16 | [*.yml] 17 | indent_size = 2 18 | tab_width = 2 19 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Issues & Feature Requests 4 | * Disable plugins and addon themes before opening an issue 5 | * Use the relevant template 6 | * Don't 'bulk report' unrelated issues in the same issue 7 | * Don't report a new issue in the comments of an existing issue 8 | * Check previous feature requests using the *Feature request* tag before making a new one 9 | ### Scope 10 | The following is out of scope of this project 11 | * Issues affecting the canary and PTB clients 12 | * Discord in the web browser 13 | * Features gated behind a Discord Nitro subscription (or HypeSquad membership) 14 | 15 | ## Pull Requests 16 | * Major changes: Open an issue using the *Change proposal* template to discuss your changes 17 | * Small changes and tweaks can get away without an issue 18 | * Clone/rebase the repo 19 | * Make sure your editor is obeying `.editorconfig` (VS Code needs the plugin!) 20 | * Make changes in a new branch (not develop or gh-pages) 21 | * Submit your PR 22 | 23 | ## Development 24 | ### Environment 25 | * Visual Studio Code 26 | * [EditorConfig Plugin](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) for VS Code 27 | * Git 28 | * Node.js 29 | 30 | ### Setup 31 | * `npm i` to install required packages 32 | 33 | #### NPM Commands 34 | * `npm run dev` watches files for changes and automatically builds and emits the theme to your Vencord themes folder. Your changes will live update each time you save. Use `CTRL+C` to stop the script. 35 | * `npm run build-static` builds and emits a 'static' theme file to the dist directory 36 | * `npm run build-auto` builds and emits the auto-updating theme file. This file only contains user vars and imports the theme from GitHub. 37 | 38 | ### Comments & Debugging 39 | * Add a comment with `TODO, NOTE, DEV, DEBUG or HACK` and the date when something needs to be explained or revisited later: 40 | ```SCSS 41 | // TODO: 2021-07-01 - Find better icon 42 | ``` 43 | * Add the icon description when including a Fluent Icon: 44 | ```SCSS 45 | content: "\F159"; // DialShape4 46 | ``` 47 | * Explain why an `!important` is being used: 48 | ```SCSS 49 | width: 32px !important; // Override in-line style 50 | ``` 51 | * Use `red`, `$red` or `#F00` for debugging 52 | 53 | ### Icon usage 54 | * Avoid using the same icon for multiple purposes. 55 | * In context menus, when an appropriate icon isn't available set the icon to `\E9CE` (Unknown) and add `visibility: hidden;` This will provide the correct spacing to indent the item label and hides the icon. 56 | 57 | ### Plugin Compatibility 58 | If you are interested in creating a PR for a plugin use the following formatting: 59 | 60 | #### BetterDiscord 61 | * Create a new file in `src/modules/betterdiscord/plugins` with the following formatting: `_GitHubUsername.PluginName.scss`. Note the underscore at the start of the filename. Capitalisation should also match the username and plugin name. Example: `_TakosThings.FluentDiscord.scss` 62 | * Add an import to `src/modules/betterdiscord/_plugin_compat.scss` with the following formatting: 63 | ```SCSS 64 | // https://betterdiscord.app/plugin/PluginName 65 | @import "_GitHubUsername.PluginName.scss"; 66 | ``` 67 | 68 | #### Vencord 69 | * Create a new file in `src/modules/vencord/plugins` with the following formatting: `_PluginName.scss`. Note the underscore at the start of the filename. Capitalisation should also match the username and plugin name. Example: `AnonymiseFileNames.scss` 70 | * Add an import to `src/modules/vencord/_plugin_compat.scss` with the following formatting: 71 | ```SCSS 72 | // PluginName 73 | @import "PluginName.scss"; 74 | ``` 75 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Report an issue 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | 15 | 16 | **Describe the bug** 17 | A clear and concise description of what the bug is. 18 | 19 | **Screenshots** 20 | If applicable, add screenshots to help explain your problem. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Documentation 4 | url: https://github.com/TakosThings/Fluent-Discord/wiki 5 | about: Visit the wiki for information on getting started with the theme. 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Additional context** 17 | Add any other context, screenshots or diagrams about the feature request here. 18 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /.github/workflows/make-release.yml: -------------------------------------------------------------------------------- 1 | name: make-release 2 | on: 3 | workflow_dispatch: 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | # Checkout 11 | - uses: actions/checkout@v2 12 | 13 | # Create dist directory 14 | - name: Create /dist 15 | run: mkdir dist 16 | 17 | # Build CSS 18 | - name: Sass Build 19 | uses: gha-utilities/sass-build@v0.4.8 20 | with: 21 | source: src/fluent-build.scss 22 | destination: dist/Fluent-Discord.css 23 | outputStyle: expanded 24 | 25 | # Delete @charset 26 | - name: Delete charset 27 | run: sed -i '1d' dist/Fluent-Discord.css 28 | 29 | # Deploy to gh-pages 30 | - name: GitHub Pages action 31 | uses: peaceiris/actions-gh-pages@v3.7.3 32 | with: 33 | github_token: ${{ secrets.GITHUB_TOKEN }} 34 | publish_branch: gh-pages 35 | publish_dir: ./dist 36 | keep_files: true 37 | commit_message: Deployment from Action 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /.docs/translation_files 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | Tako#6238 (on Discord). 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 TakosThings 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 | # Fluent Discord 2 | A Windows 11 theme for Discord 3 | 4 | ## Download 5 | * From [Releases](https://github.com/TakosThings/Fluent-Discord/releases/latest) 6 | * `Fluent-Discord.theme.css` will automatically update with new releases 7 | * `Fluent-Discord-static.theme.css` if you prefer to manually update to each release 8 | * [Github.io link](https://takosthings.github.io/Fluent-Discord/Fluent-Discord.theme.css) (Right-click > Copy Link) 9 | 10 | ### Optional Extras 11 | * [EmojiReplace](https://betterdiscord.app/theme/EmojiReplace) theme by DevilBro to get Windows 11 emoji on Discord 12 | 13 | ## Getting Help 14 | * Check the [FAQ](https://github.com/TakosThings/Fluent-Discord/wiki/FAQ) first 15 | * All options are documented on the [wiki](https://github.com/TakosThings/Fluent-Discord/wiki) 16 | * Report bugs by opening an [issue](https://github.com/TakosThings/Fluent-Discord/issues) 17 | 18 | ## Preview 19 | ![Preview](https://raw.githubusercontent.com/TakosThings/Fluent-Discord/develop/images/ui-1.12.1.png) 20 | -------------------------------------------------------------------------------- /images/ui-0.0.13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TakosThings/Fluent-Discord/c8035908b4d005ca9ec67bfbe054bc57af75c9a6/images/ui-0.0.13.png -------------------------------------------------------------------------------- /images/ui-0.0.3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TakosThings/Fluent-Discord/c8035908b4d005ca9ec67bfbe054bc57af75c9a6/images/ui-0.0.3.png -------------------------------------------------------------------------------- /images/ui-1.12.1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TakosThings/Fluent-Discord/c8035908b4d005ca9ec67bfbe054bc57af75c9a6/images/ui-1.12.1.png -------------------------------------------------------------------------------- /images/ui-1.5.5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TakosThings/Fluent-Discord/c8035908b4d005ca9ec67bfbe054bc57af75c9a6/images/ui-1.5.5.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fluent-discord", 4 | "license": "MIT", 5 | "author": { 6 | "name": "TakosThings", 7 | "url": "https://github.com/TakosThings/Fluent-Discord" 8 | }, 9 | "repository": "git:TakosThings/Fluent-Discord", 10 | "scripts": { 11 | "build-static": "sass src/fluent.scss:dist/Fluent-Discord-static.theme.css --no-charset --no-source-map", 12 | "build-auto": "sass src/fluent-auto.scss:dist/Fluent-Discord.theme.css --no-charset --no-source-map", 13 | "dev": "sass src/fluent.scss:%APPDATA%/Vencord/themes/Fluent-Discord.theme.css --no-charset --no-source-map --watch" 14 | }, 15 | "devDependencies": { 16 | "sass": "^1.49.7" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /scripts/.gitignore: -------------------------------------------------------------------------------- 1 | Changes.txt 2 | -------------------------------------------------------------------------------- /scripts/update_classes.py: -------------------------------------------------------------------------------- 1 | import os 2 | import csv 3 | 4 | MODULES_PATH = "../src/modules" 5 | CHANGES = "Changes.txt" # https://github.com/SyndiShanX/Update-Classes/blob/main/Changes.txt 6 | 7 | # Get all SCSS files and put them in a list 8 | filelist = [] 9 | for (dirpath, subdirs, files) in os.walk(MODULES_PATH): 10 | for f in files: 11 | if ".scss" in f: 12 | filelist.append(os.path.join(dirpath,f)) 13 | 14 | # Find and replace operation 15 | # For each SCSS file in the file list... 16 | for file in filelist: 17 | # Open the file 18 | print("opening: ", file) 19 | with open(file, "r", encoding="utf-8") as file_obj: 20 | filedata = file_obj.read() 21 | 22 | # Open the changes file 23 | with open(CHANGES, 'r') as rawFile: 24 | rawText = "\n".join(line.rstrip() for line in rawFile).split('\n') 25 | 26 | # Start a counter 27 | i = 0 28 | classNum = len(rawText) - 1 29 | 30 | # Make changes 31 | while i < classNum: 32 | class1 = rawText[i] 33 | class2 = rawText[i + 1] 34 | 35 | filedata = filedata.replace(class1, class2) 36 | 37 | # Increment counter 38 | i = i + 2 39 | 40 | # Write the file out 41 | with open(file, "w", encoding="utf-8") as file_obj: 42 | file_obj.write(filedata) 43 | -------------------------------------------------------------------------------- /src/fluent-auto.scss: -------------------------------------------------------------------------------- 1 | $isAutoFile: true; 2 | @import 'modules/core/metadata'; 3 | @import 'modules/betterdiscord/meta'; 4 | @import 'modules/core/import'; 5 | 6 | @import 'modules/core/options'; 7 | -------------------------------------------------------------------------------- /src/fluent-build.scss: -------------------------------------------------------------------------------- 1 | // Order: Metadata, BD meta, User options, variables, reset 2 | @import 'modules/core/metadata'; 3 | @import 'modules/core/variables'; 4 | @import 'modules/core/reset'; 5 | 6 | // Mixins 7 | // Order: None, alpabetic 8 | @import 'modules/mixins/elevation'; 9 | @import 'modules/mixins/font'; 10 | @import 'modules/mixins/type'; 11 | 12 | // Common 13 | // Order: None, single only 14 | @import 'modules/common/common'; 15 | 16 | // Acrylic 17 | // Order: None, alphabetic 18 | @import 'modules/main/acrylic'; 19 | 20 | // UI 21 | // Order: None, alphabetic 22 | @import 'modules/ui/buttons'; 23 | @import 'modules/ui/context_menu'; 24 | @import 'modules/ui/form'; 25 | @import 'modules/ui/input'; 26 | @import 'modules/ui/scrollbar'; 27 | @import 'modules/ui/titlebar'; 28 | @import 'modules/ui/tooltip'; 29 | 30 | // Main UI 31 | // Order: main, then home, then discover, alphabetic 32 | @import 'modules/main/channels/account'; 33 | @import 'modules/main/channels/channels'; 34 | @import 'modules/main/channels/rtc'; 35 | @import 'modules/main/chat/autocomplete'; 36 | @import 'modules/main/chat/browse'; 37 | @import 'modules/main/chat/chat_menu'; 38 | @import 'modules/main/chat/chat'; 39 | @import 'modules/main/chat/chatbox'; 40 | @import 'modules/main/chat/forum'; 41 | @import 'modules/main/chat/home'; 42 | @import 'modules/main/chat/search_results'; 43 | @import 'modules/main/chat/thread'; 44 | @import 'modules/main/chat/embeds/file'; 45 | @import 'modules/main/chat/embeds/invite'; 46 | @import 'modules/main/chat/embeds/mediaplayer'; 47 | @import 'modules/main/chat/embeds/site_preview'; 48 | @import 'modules/main/chat/embeds/spotify'; 49 | @import 'modules/main/chat/embeds/text'; 50 | @import 'modules/main/guilds/guilds'; 51 | @import 'modules/main/members/members'; 52 | @import 'modules/main/toolbar/search'; 53 | @import 'modules/main/toolbar/toolbar'; 54 | @import 'modules/main/voice/voice'; 55 | @import 'modules/home/activity'; 56 | @import 'modules/home/conversations'; 57 | @import 'modules/home/dm_profile'; 58 | @import 'modules/home/home'; 59 | @import 'modules/home/main'; 60 | @import 'modules/home/toolbar'; 61 | @import 'modules/discover/discovery'; 62 | 63 | // Loadscreen 64 | // Order: None, alphabetic 65 | @import 'modules/loadscreen/loadscreen'; 66 | 67 | // Modals 68 | // Order: None, alphabetic 69 | @import 'modules/modals/activities'; 70 | @import 'modules/modals/add_server'; 71 | @import 'modules/modals/incoming_call'; 72 | @import 'modules/modals/leave_server_feedback'; 73 | @import 'modules/modals/lightbox'; 74 | @import 'modules/modals/link_gate'; 75 | @import 'modules/modals/modal'; 76 | @import 'modules/modals/quality_rating'; 77 | @import 'modules/modals/quickswitcher'; 78 | @import 'modules/modals/reactors'; 79 | @import 'modules/modals/screen_share'; 80 | @import 'modules/modals/server_terms'; 81 | @import 'modules/modals/threads'; 82 | @import 'modules/modals/user'; 83 | 84 | // Popouts 85 | // Order: None, alphabetic 86 | @import 'modules/popouts/app_launcher'; 87 | @import 'modules/popouts/account'; 88 | @import 'modules/popouts/channel'; 89 | @import 'modules/popouts/emoji_picker'; 90 | @import 'modules/popouts/inbox'; 91 | @import 'modules/popouts/noise_cancellation'; 92 | @import 'modules/popouts/pinned_messages'; 93 | @import 'modules/popouts/quick_select'; 94 | @import 'modules/popouts/roles'; 95 | @import 'modules/popouts/rtc'; 96 | @import 'modules/popouts/search'; 97 | @import 'modules/popouts/soundboard'; 98 | @import 'modules/popouts/threads'; 99 | @import 'modules/popouts/user'; 100 | 101 | // Settings 102 | // Order: Settings, then navigation, then others, alphabetic 103 | @import 'modules/settings/settings'; 104 | @import 'modules/settings/navigation'; 105 | @import 'modules/settings/channel_settings'; 106 | @import 'modules/settings/server_settings'; 107 | @import 'modules/settings/user_settings'; 108 | 109 | // Icons 110 | // Order: Language, then alphabetic 111 | @import 'modules/icons/home/main'; 112 | @import 'modules/icons/main/account'; 113 | @import 'modules/icons/main/call'; 114 | @import 'modules/icons/main/chat_menu'; 115 | @import 'modules/icons/main/toolbar'; 116 | @import 'modules/icons/context_menu'; 117 | 118 | // Misc 119 | // Order: None, alphabetic 120 | @import 'modules/misc/loading'; 121 | @import 'modules/third_party/hljs'; 122 | 123 | // BetterDiscord 124 | @import "modules/betterdiscord/custom_css"; 125 | @import 'modules/betterdiscord/public'; 126 | @import 'modules/betterdiscord/plugin_compat'; 127 | @import 'modules/betterdiscord/settings'; 128 | 129 | // Vencord 130 | @import "modules/vencord/settings"; 131 | -------------------------------------------------------------------------------- /src/fluent.scss: -------------------------------------------------------------------------------- 1 | $isAutoFile: false; 2 | // Order: Metadata, BD meta, User options, variables, reset 3 | @import 'modules/core/metadata'; 4 | @import 'modules/betterdiscord/meta'; 5 | @import 'modules/core/options'; 6 | @import 'modules/core/variables'; 7 | @import 'modules/core/reset'; 8 | 9 | // Mixins 10 | // Order: None, alpabetic 11 | @import 'modules/mixins/elevation'; 12 | @import 'modules/mixins/font'; 13 | @import 'modules/mixins/type'; 14 | 15 | // Common 16 | // Order: None, single only 17 | @import 'modules/common/common'; 18 | 19 | // Acrylic 20 | // Order: None, alphabetic 21 | @import 'modules/main/acrylic'; 22 | 23 | // UI 24 | // Order: None, alphabetic 25 | @import 'modules/ui/buttons'; 26 | @import 'modules/ui/context_menu'; 27 | @import 'modules/ui/form'; 28 | @import 'modules/ui/input'; 29 | @import 'modules/ui/scrollbar'; 30 | @import 'modules/ui/titlebar'; 31 | @import 'modules/ui/tooltip'; 32 | 33 | // Main UI 34 | // Order: main, then home, then discover, alphabetic 35 | @import 'modules/main/channels/account'; 36 | @import 'modules/main/channels/channels'; 37 | @import 'modules/main/channels/rtc'; 38 | @import 'modules/main/chat/autocomplete'; 39 | @import 'modules/main/chat/browse'; 40 | @import 'modules/main/chat/chat_menu'; 41 | @import 'modules/main/chat/chat'; 42 | @import 'modules/main/chat/chatbox'; 43 | @import 'modules/main/chat/forum'; 44 | @import 'modules/main/chat/home'; 45 | @import 'modules/main/chat/search_results'; 46 | @import 'modules/main/chat/thread'; 47 | @import 'modules/main/chat/embeds/file'; 48 | @import 'modules/main/chat/embeds/invite'; 49 | @import 'modules/main/chat/embeds/mediaplayer'; 50 | @import 'modules/main/chat/embeds/site_preview'; 51 | @import 'modules/main/chat/embeds/spotify'; 52 | @import 'modules/main/chat/embeds/text'; 53 | @import 'modules/main/guilds/guilds'; 54 | @import 'modules/main/members/members'; 55 | @import 'modules/main/toolbar/search'; 56 | @import 'modules/main/toolbar/toolbar'; 57 | @import 'modules/main/voice/voice'; 58 | @import 'modules/home/activity'; 59 | @import 'modules/home/conversations'; 60 | @import 'modules/home/dm_profile'; 61 | @import 'modules/home/home'; 62 | @import 'modules/home/main'; 63 | @import 'modules/home/toolbar'; 64 | @import 'modules/discover/discovery'; 65 | 66 | // Loadscreen 67 | // Order: None, alphabetic 68 | @import 'modules/loadscreen/loadscreen'; 69 | 70 | // Modals 71 | // Order: None, alphabetic 72 | @import 'modules/modals/activities'; 73 | @import 'modules/modals/add_server'; 74 | @import 'modules/modals/incoming_call'; 75 | @import 'modules/modals/leave_server_feedback'; 76 | @import 'modules/modals/lightbox'; 77 | @import 'modules/modals/link_gate'; 78 | @import 'modules/modals/modal'; 79 | @import 'modules/modals/quality_rating'; 80 | @import 'modules/modals/quickswitcher'; 81 | @import 'modules/modals/reactors'; 82 | @import 'modules/modals/screen_share'; 83 | @import 'modules/modals/server_terms'; 84 | @import 'modules/modals/threads'; 85 | @import 'modules/modals/user'; 86 | 87 | // Popouts 88 | // Order: None, alphabetic 89 | @import 'modules/popouts/app_launcher'; 90 | @import 'modules/popouts/account'; 91 | @import 'modules/popouts/channel'; 92 | @import 'modules/popouts/emoji_picker'; 93 | @import 'modules/popouts/inbox'; 94 | @import 'modules/popouts/noise_cancellation'; 95 | @import 'modules/popouts/pinned_messages'; 96 | @import 'modules/popouts/quick_select'; 97 | @import 'modules/popouts/roles'; 98 | @import 'modules/popouts/rtc'; 99 | @import 'modules/popouts/search'; 100 | @import 'modules/popouts/soundboard'; 101 | @import 'modules/popouts/threads'; 102 | @import 'modules/popouts/user'; 103 | 104 | // Settings 105 | // Order: Settings, then navigation, then others, alphabetic 106 | @import 'modules/settings/settings'; 107 | @import 'modules/settings/navigation'; 108 | @import 'modules/settings/channel_settings'; 109 | @import 'modules/settings/server_settings'; 110 | @import 'modules/settings/user_settings'; 111 | 112 | // Icons 113 | // Order: Language, then alphabetic 114 | @import 'modules/icons/home/main'; 115 | @import 'modules/icons/main/account'; 116 | @import 'modules/icons/main/call'; 117 | @import 'modules/icons/main/chat_menu'; 118 | @import 'modules/icons/main/toolbar'; 119 | @import 'modules/icons/context_menu'; 120 | 121 | // Misc 122 | // Order: None, alphabetic 123 | @import 'modules/misc/loading'; 124 | @import 'modules/third_party/hljs'; 125 | 126 | // BetterDiscord 127 | @import "modules/betterdiscord/custom_css"; 128 | @import 'modules/betterdiscord/public'; 129 | @import 'modules/betterdiscord/plugin_compat'; 130 | @import 'modules/betterdiscord/settings'; 131 | 132 | // Vencord 133 | @import "modules/vencord/settings"; 134 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/_custom_css.scss: -------------------------------------------------------------------------------- 1 | #bd-editor-controls{ 2 | height: 40px; 3 | border-radius: 8px 8px 0 0; 4 | .controls-section{ 5 | .btn{ 6 | width: 34px; 7 | height: 34px; 8 | border-radius: 4px; 9 | padding: 2px 8px; 10 | } 11 | &.controls-right{ 12 | .checkbox-wrapper{ 13 | margin-right: 12px; 14 | } 15 | } 16 | } 17 | } 18 | 19 | // Line numbering 20 | .monaco-editor{ 21 | // 22 | border-radius: 0 0 8px 8px; 23 | .margin{ 24 | border-radius: 0 0 0 8px; 25 | } 26 | .editor-scrollable{ 27 | border-radius: 0 0 8px 0; 28 | } 29 | } 30 | 31 | 32 | // Detached 33 | div[id^="bd-floating-window-"], 34 | #floating-editor-window{ 35 | padding-bottom: 0; 36 | z-index: 3002; // This is +1 above the titlebar 37 | background-color: transparent; 38 | @include ElevationShellActive; 39 | border: 1px solid $SurfaceStrokeColorDefault; 40 | border-radius: 8px; 41 | 42 | .floating-window-titlebar{ 43 | height: 32px; 44 | background-color: $SolidBackgroundFillColorBase; 45 | .title{ 46 | @include TypeCaption; 47 | color: $TextFillColorPrimary; 48 | } 49 | .floating-window-buttons{ 50 | .button{ 51 | width: 46px; 52 | height: 32px; 53 | 54 | // Maximise doesn't work correctly, so remove it 55 | &.maximize-button{ 56 | display: none; 57 | } 58 | &.close-button{ 59 | &:hover{ 60 | background-color: #C42B1C; 61 | } 62 | } 63 | } 64 | } 65 | } 66 | 67 | .floating-window-content{ 68 | background-color: $SolidBackgroundFillColorBase; 69 | } 70 | #bd-editor-controls{ 71 | background-color: transparent; 72 | border-radius: 0; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/_meta.scss: -------------------------------------------------------------------------------- 1 | @if $isAutoFile { 2 | /** 3 | * @name Fluent Discord 4 | * @author TakosThings 5 | * @version #{$version} 6 | * @description Fluent theme for Discord (🔄 Auto-updating) 7 | * @source https://github.com/TakosThings/Fluent-Discord 8 | */ 9 | } @else{ 10 | /** 11 | * @name Fluent Discord 12 | * @author TakosThings 13 | * @version #{$version} 14 | * @description Fluent theme for Discord (⏹ Static) 15 | * @source https://github.com/TakosThings/Fluent-Discord 16 | */ 17 | } 18 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/_plugin_compat.scss: -------------------------------------------------------------------------------- 1 | // Append new compatibility patches to the end of this file 2 | 3 | // https://betterdiscord.app/plugin/MemberCount 4 | @import "plugins/Arashiryuu.MemberCount"; 5 | 6 | // https://betterdiscord.app/plugin/GameActivityToggle 7 | @import "plugins/DevilBro.GameActivityToggle"; 8 | 9 | // https://betterdiscord.app/plugin/SpotifyControls 10 | @import "plugins/DevilBro.SpotifyControls"; 11 | 12 | // https://betterdiscord.app/plugin/ReadAllNotificationsButton 13 | @import "plugins/DevilBro.ReadAllNotificationsButton"; 14 | 15 | // https://betterdiscord.app/plugin/FavoriteMedia 16 | @import "plugins/Dastan21.FavoriteMedia"; 17 | 18 | // https://betterdiscord.app/plugin/PersonalPins 19 | @import "plugins/DevilBro.PersonalPins"; 20 | 21 | // https://betterdiscord.app/plugin/InvisibleTyping 22 | @import "plugins/_Strencher.InvisibleTyping"; 23 | 24 | // https://betterdiscord.app/plugin/Translator 25 | @import "plugins/DevilBro.Translator"; 26 | 27 | // https://betterdiscord.app/plugin/CollapsibleUI 28 | // Dev is aka. TenorTheHusky 29 | @import "plugins/programmer2514.CollapsibleUI"; 30 | 31 | // https://betterdiscord.app/theme/SettingsModal 32 | @import "plugins/_DevilBro.SettingsModal"; 33 | 34 | // https://betterdiscord.app/plugin/StaffTag 35 | @import "plugins/_DevilBro.StaffTag"; 36 | 37 | // https://betterdiscord.app/plugin/CallTimeCounter 38 | @import "plugins/QWERT.CallTimeCounter"; 39 | 40 | // https://betterdiscord.app/plugin/CharCounter 41 | @import "plugins/DevilBro.CharCounter"; 42 | 43 | // https://betterdiscord.app/plugin/KeywordTracker 44 | @import "plugins/sawahkitty.KeywordTracker"; 45 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/_public.scss: -------------------------------------------------------------------------------- 1 | .theme-dark #bd-pub-button{ 2 | background-color: transparent; 3 | border-radius: 4px; 4 | color: $TextFillColorPrimary; 5 | font-size: 10px; 6 | text-transform: capitalize; 7 | &:hover{ 8 | background-color: $ControlFillColorSecondary; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_Arashiryuu.MemberCount.scss: -------------------------------------------------------------------------------- 1 | .theme-dark #MemberCount{ 2 | margin-top: 0 !important; 3 | background: transparent !important; 4 | border: 0 !important; 5 | color: $TextFillColorPrimary; 6 | h2{ 7 | margin-bottom: 0; 8 | border-bottom: 0; 9 | text-align: left; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_Dastan21.FavoriteMedia.scss: -------------------------------------------------------------------------------- 1 | // Chat box icons 2 | .theme-dark .buttonContainer__74017.fm-buttonContainer{ 3 | align-items: flex-start; 4 | .button__201d5{ 5 | width: 32px; 6 | height: 32px; 7 | margin-top: 6px; 8 | margin-right: 2px; 9 | &.active__24af7, 10 | &:hover{ 11 | background-color: $ControlFillColorDefault; 12 | border: 1px solid $ControlStrokeColorDefault; 13 | } 14 | } 15 | .fm-buttonWrapper::before{ 16 | @include FontIconFluent; 17 | font-size: 16px; 18 | } 19 | svg{ 20 | display: none; 21 | } 22 | &:nth-of-type(4){ 23 | margin-left: -6px; // adjust pos between emoji button and plugin buttons 24 | .fm-buttonWrapper::before{ 25 | content: "\EB9F"; // Image2 26 | } 27 | } 28 | &:nth-of-type(5){ 29 | .fm-buttonWrapper::before{ 30 | content: "\E116"; // Video 31 | } 32 | } 33 | &:nth-of-type(6){ 34 | margin-right: 6px; // Add padding to right - 6px + 2px from between buttons 35 | .fm-buttonWrapper::before{ 36 | content: "\E189"; // Audio 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.CharCounter.scss: -------------------------------------------------------------------------------- 1 | .chatCounter_XOMPsh{ 2 | top: -20px; 3 | font-size: 11px; 4 | line-height: 20px; 5 | color: rgb(181, 186, 193); 6 | } 7 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.GameActivityToggle.scss: -------------------------------------------------------------------------------- 1 | html[lang^="en-"].theme-dark .panels_c48ade .button__67645{ 2 | &[aria-label="Disable Game Activity"]::before{ 3 | content: "\E7FC"; // Game 4 | } 5 | &[aria-label="Enable Game Activity"]{ 6 | color: $SystemFillColorCritical; 7 | border-color: $SystemFillColorCritical; 8 | &::before{ 9 | content: "\E7FC"; // Game 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.PersonalPins.scss: -------------------------------------------------------------------------------- 1 | html[lang^="en-"].theme-dark .toolbar__9293f .iconWrapper__9293f.cursorPointer_B3uwDA{ 2 | &::before{ // Annoyingly has no aria-label 3 | content: "\E70B"; // Note 4 | } 5 | } 6 | 7 | .theme-dark .popout_xwjvsX.messagesPopoutWrap__45690.themedPopout_1TrfdI{ 8 | // Tabs 9 | .tabBar_ab6641{ 10 | .tab_ab6641{ 11 | padding-left: 0; 12 | padding-right: 0; 13 | margin-right: 16px; 14 | color: $TextFillColorPrimary; 15 | border-radius: 0; 16 | &:hover{ 17 | background-color: transparent; 18 | color: $TextFillColorSecondary; 19 | } 20 | 21 | &.selected_b3f026{ 22 | background-color: transparent; 23 | color: $AccentTextFillColorPrimary; 24 | &::before{ 25 | content: ""; 26 | position: absolute; 27 | bottom: 0px; 28 | width: 100%; 29 | height: 2px; 30 | background-color: $AccentLight3; 31 | border-radius: 2px; 32 | } 33 | &:hover{ 34 | color: $TextFillColorSecondary; 35 | } 36 | } 37 | } 38 | } 39 | 40 | // Sorting 41 | .quickSelectLabel__79774{ 42 | @include TypeBody; 43 | color: $TextFillColorPrimary; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.ReadAllNotificationsButton.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .listItem__650eb.frame_oXWS21{ 2 | &:active{ 3 | transform: none; 4 | } 5 | .childWrapper_a6ce15{ 6 | background-color: transparent; 7 | color: $TextFillColorSecondary; 8 | font-size: 10px; 9 | text-transform: capitalize; 10 | 11 | &:hover{ 12 | background-color: $ControlFillColorDefault; 13 | } 14 | } 15 | .innerFrame_8Hg64E::before { 16 | display: none !important; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.SettingsModal.scss: -------------------------------------------------------------------------------- 1 | :root{ 2 | --settingsbackground_v: #{$SolidBackgroundFillColorTertiary} !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.SpotifyControls.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container_6sXIoE.withTimeline_824fT_{ 2 | border-bottom: 0; 3 | .song_tIdBpF{ 4 | @include TypeBody; 5 | color: $TextFillColorPrimary; 6 | } 7 | .interpret_F93iqP{ 8 | @include TypeCaption; 9 | color: $TextFillColorSecondary; 10 | } 11 | // Can't detect if Spotify is playing or not, so just use default icons by plugin 12 | .contents__201d5{ 13 | display: block !important; // Override plugin CSS 14 | } 15 | } 16 | 17 | .theme-dark .container_6sXIoE.maximized_vv2Wr0.withTimeline_824fT_{ 18 | .button__67645{ 19 | margin-left: 2px; 20 | &[style="margin-right: 4px;"]{ 21 | margin-right: 0 !important; // Override plugin CSS 22 | } 23 | &[style="margin-left: 4px;"]{ 24 | margin-left: 2px !important; // Override plugin CSS 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.StaffTag.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .botTag__5d473[style], 2 | .theme-dark .botTag_c19a55[style]{ 3 | padding: 0 4px !important; 4 | border-radius: 4px; 5 | text-transform: none; 6 | 7 | &::before{ 8 | content: unset !important; 9 | } 10 | span{ 11 | display: block !important; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_DevilBro.Translator.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .translateButton_DhP9x8{ 2 | width: 32px; 3 | height: 32px; 4 | padding: 0; 5 | border: 1px solid transparent; 6 | border-radius: 4px; 7 | &:hover{ 8 | background-color: $ControlFillColorDisabled; 9 | border-color: $ControlStrokeColorDefault; 10 | } 11 | } 12 | 13 | .theme-dark .menu_c1e9c4 .item_c1e9c4{ 14 | &[id="message-translator-translate-message"]::before{ 15 | content: "\F2B7"; // LocaleLanguage 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_QWERT.CallTimeCounter.scss: -------------------------------------------------------------------------------- 1 | .voiceTimer{ 2 | margin-top: 0 !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_Strencher.InvisibleTyping.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .invisible-typing-button{ 2 | width: 32px; 3 | height: 32px; 4 | margin: 6px 4px 0 0; 5 | position: relative; 6 | border: 1px solid transparent; 7 | &:hover{ 8 | background-color: $ControlFillColorSecondary; 9 | border: 1px solid $ControlStrokeColorDefault; 10 | border-radius: 4px; 11 | } 12 | &::before{ 13 | content: "\E087"; 14 | top: 7px; 15 | left: 6px; 16 | position: absolute; 17 | @include FontIconFluent; 18 | color: $TextFillColorSecondary; 19 | font-size: 18px; 20 | } 21 | 22 | // Fixes a bug where .disabled is always present regardless of state 23 | &.enabled{ 24 | &::before{ 25 | color: $TextFillColorSecondary !important; 26 | } 27 | &::after{ 28 | background-color: transparent !important; 29 | } 30 | } 31 | 32 | &.disabled{ 33 | &::before{ 34 | color: $SystemFillColorCritical; 35 | } 36 | &::after{ 37 | content: ""; 38 | width: 24px; 39 | height: 2px; 40 | top: 14px; 41 | left: 3px; 42 | position: absolute; 43 | background-color: $SystemFillColorCritical; 44 | transform: rotate(-45deg); 45 | } 46 | } 47 | 48 | svg{ 49 | display: none; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_programmer2514.CollapsibleUI.scss: -------------------------------------------------------------------------------- 1 | .theme-dark #cui-toolbar-container{ 2 | .iconWrapper__9293f{ 3 | &.selected__9293f{ 4 | svg{ 5 | color: $TextOnAccentFillColorPrimary; 6 | } 7 | } 8 | 9 | svg{ 10 | width: 18px; 11 | display: block; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/modules/betterdiscord/plugins/_sawahkitty.KeywordTracker.scss: -------------------------------------------------------------------------------- 1 | // Show the default icon 2 | html[lang^="en-"].theme-dark .toolbar__9293f{ 3 | .iconWrapper__9293f{ 4 | &[aria-label="Keyword Matches"]{ 5 | .icon__9293f{ 6 | display: block; 7 | } 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/modules/common/_bot_tag.scss: -------------------------------------------------------------------------------- 1 | .botTagRegular__82f07{ 2 | background-color: $SystemFillColorSolidAttentionBackground; 3 | text-transform: none; 4 | .botText__82f07{ 5 | font-weight: normal; 6 | text-transform: lowercase; 7 | &::first-letter{ 8 | text-transform: uppercase; 9 | } 10 | } 11 | } 12 | 13 | // Thread OP (who is not a bot btw...) 14 | .botTagOP_e48ddb{ 15 | color: $TextFillColorSecondary; 16 | } 17 | -------------------------------------------------------------------------------- /src/modules/common/_common.scss: -------------------------------------------------------------------------------- 1 | // Order: Alphabetic 2 | // Add an explaination of where a common component is found 3 | 4 | // Found in: Chat, threads, channel MOTD 5 | @import "mention"; 6 | 7 | // Found in: DevilBro.PersonalPins, main (home), threads modal, emoji picker, roles popout, thread popout 8 | @import "search"; 9 | 10 | // Found in: everywhere 11 | @import "typography"; 12 | 13 | // Found in: many - see file for further info 14 | @import "tab_bar"; 15 | 16 | // Found in: chat, members list, user profile popout/modal 17 | @import "bot_tag"; 18 | -------------------------------------------------------------------------------- /src/modules/common/_mention.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | // Mention 3 | .wrapper_a7c28c{ 4 | background-color: transparent; 5 | color: $AccentTextFillColorPrimary; 6 | font-weight: normal; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/modules/common/_search.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .input__48d49{ 3 | height: 32px; 4 | padding: 0 8px; 5 | border: 1px solid; 6 | border-bottom-width: 2px; 7 | border-color: $ControlStrokeColorDefault; 8 | border-radius: 4px; 9 | @include TypeBody; 10 | background-color: $ControlFillColorDefault; 11 | color: $TextFillColorSecondary; 12 | &:hover{ 13 | border-color: $ControlStrokeColorSecondary; 14 | } 15 | &:focus{ 16 | background-color: $ControlFillColorInputActiveBrush; 17 | color: $TextFillColorPrimary; 18 | border-color: $ControlStrokeColorDefault; 19 | border-bottom-color: $AccentBase; 20 | } 21 | &::placeholder{ 22 | color: $TextFillColorSecondary; 23 | } 24 | } 25 | 26 | .iconLayout__67261{ 27 | position: absolute; 28 | top: 6px; 29 | right: 8px; 30 | 31 | // Home friends table seach bar 32 | &.medium__5b9a9{ 33 | width: 22px; 34 | height: 22px; 35 | .iconContainer__4d295{ 36 | width: 16px; 37 | height: 16px; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/modules/common/_tab_bar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .tabBar__0b563, // A: Guild > Channels & Roles 3 | .tabBar_b9fccc, // B: User profile modal 4 | .tabBar_d6f9e9, // C: User Settings > Profiles 5 | .settingsTabBar_dc2e0e, // D: User Settings > Family Centre 6 | .tabBar__4efb4, // E: Event information modal 7 | .top_b3f026{ // F: User Settings > Privacy & Safety 8 | border-bottom: 0; 9 | 10 | // Items 11 | .item_b3f026{ 12 | @include TypeBody; 13 | color: $TextFillColorPrimary; 14 | border: 0; 15 | &:hover{ 16 | color: $TextFillColorSecondary; 17 | } 18 | &.selected_b3f026{ 19 | border: 0; 20 | &::before{ 21 | content: ""; 22 | width: 16px; 23 | height: 3px; 24 | position: absolute; 25 | bottom: 0; 26 | left: calc(50% - 8px); 27 | background-color: $AccentTextFillColorPrimary; 28 | border-radius: 999px; 29 | } 30 | &::after{ 31 | display: none; 32 | } 33 | } 34 | 35 | // Special cases 36 | // A: Badge for total channels 37 | .textBadge_f05120{ 38 | background-color: $SystemFillColorSolidNeutralBackground !important; // Override inline 39 | @include TypeCaption; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/modules/common/_typography.scss: -------------------------------------------------------------------------------- 1 | // User settings section sub header 2 | .theme-dark .eyebrow_b717a1{ 3 | @include TypeBodyStrong; 4 | color: $TextFillColorPrimary; 5 | text-transform: none; 6 | } 7 | -------------------------------------------------------------------------------- /src/modules/core/_import.scss: -------------------------------------------------------------------------------- 1 | @import url(https://takosthings.github.io/Fluent-Discord/Fluent-Discord.css); 2 | -------------------------------------------------------------------------------- /src/modules/core/_metadata.scss: -------------------------------------------------------------------------------- 1 | $version: "1.12.2"; 2 | -------------------------------------------------------------------------------- /src/modules/core/_options.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Start user options 3 | * Visit the wiki for information on this section 4 | * https://github.com/TakosThings/Fluent-Discord/wiki 5 | */ 6 | 7 | /** 8 | * Note on chat font size 9 | * You may want to change your chat font scaling to '14px' to match the font size in Windows. 10 | * This option is found in User settings > Appearance. 11 | */ 12 | 13 | /** 14 | * Visit the wiki for in-depth help on changing the below variables: https://github.com/TakosThings/Fluent-Discord/wiki/Options 15 | * You can change the accent colour by using the Colour Selector tool: https://takosthings.github.io/Fluent-Discord/color.html 16 | **/ 17 | 18 | :root{ 19 | /* DefaultBlue */ 20 | --fluent-accent-hue-sat: 207, 100%; 21 | --fluent-accent-lightness: 42%; 22 | --fluent-text-on-accent-color: 0, 0, 0; 23 | --fluent-acrylic-background: url(https://takosthings.github.io/Fluent-Discord/img/Captured_Motion_27.jpg); 24 | --fluent-acrylic-background-blur: 24px; 25 | --fluent-acrylic-background-dimness: 75%; 26 | --fluent-acrylic-background-saturate: 140%; 27 | --fluent-show-nitro-decorations: none; 28 | } 29 | 30 | /** 31 | * End user options 32 | */ 33 | -------------------------------------------------------------------------------- /src/modules/core/_reset.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Segoe UI"; 3 | src: local("Segoe UI") format("truetype"), 4 | url("https://takosthings.github.io/Fluent-Discord-Fonts/segoeui.ttf") format("truetype"); 5 | } 6 | @font-face { 7 | font-family: "Segoe Fluent Icons"; 8 | src: local("Segoe Fluent Icons"), 9 | url("https://takosthings.github.io/Fluent-Discord-Fonts/Segoe-Fluent-Icons.ttf") format("truetype"); 10 | } 11 | 12 | // Override Discord brand fronts 13 | :root{ 14 | --font-primary: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Geneva, Arial, sans-serif; 15 | --font-display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Geneva, Arial, sans-serif; 16 | --font-code: Consolas, Menlo, Monaco, "Courier New", monospace; 17 | } 18 | 19 | *, 20 | ::before, 21 | ::after{ 22 | letter-spacing: normal; 23 | } 24 | -------------------------------------------------------------------------------- /src/modules/discover/_discovery.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .discoverHeader_b992d4{ 3 | @include TypeBodyStrong; 4 | } 5 | 6 | .pageWrapper_a3a4ce{ 7 | background-color: $LayerFillColorDefault; 8 | border-top: 1px solid $CardStrokeColorDefault; 9 | border-left: 1px solid $CardStrokeColorDefault; 10 | border-radius: 8px 0 0 0; 11 | } 12 | 13 | .sidebar_c48ade{ 14 | .container__91a9d{ 15 | height: 32px; 16 | margin-bottom: 2px; 17 | position: relative; 18 | 19 | .itemInner_c72b37{ 20 | height: 32px; 21 | padding: 0 8px; 22 | } 23 | 24 | .avatar__91a9d{ 25 | width: 16px; 26 | height: 16px; 27 | } 28 | .name__91a9d{ 29 | @include TypeBody; 30 | color: $TextFillColorPrimary; 31 | } 32 | 33 | &.selected__91a9d{ 34 | .itemInner_c72b37{ 35 | background-color: $SubtleFillColorSecondary; 36 | } 37 | 38 | &::before{ 39 | content: ""; 40 | width: 3px; 41 | height: 16px; 42 | position: absolute; 43 | top: 10px; 44 | left: 0; 45 | background-color: $AccentBase; 46 | border-radius: 2px; 47 | } 48 | } 49 | } 50 | } 51 | 52 | // Main 53 | // Search 54 | .container_f69601{ 55 | .searchBox__56feb{ 56 | background-color: transparent; 57 | box-shadow: none; 58 | 59 | &:focus, 60 | &:focus-within{ 61 | box-shadow: none; 62 | } 63 | .searchBoxInput__56498{ 64 | @include TypeBody; 65 | color: $TextFillColorPrimary; 66 | &::placeholder{ 67 | @include TypeBody; 68 | color: $TextFillColorSecondary; 69 | } 70 | } 71 | .clearIcon__21453, 72 | .searchIcon_f69601{ 73 | width: 16px; 74 | height: 16px; 75 | position: absolute; 76 | top: 8px; 77 | right: 16px; 78 | path{ 79 | fill: #FFF; 80 | } 81 | } 82 | .cta_f18d68{ 83 | display: none; 84 | } 85 | } 86 | } 87 | 88 | // Search results 89 | // Header 90 | .header_e37a20{ 91 | @include TypeSubtitle; 92 | color: $TextFillColorPrimary; 93 | } 94 | 95 | // Search box 96 | .searchBox__56feb{ 97 | padding-right: 0; 98 | background-color: transparent; 99 | border: 0; 100 | box-shadow: none; 101 | 102 | &:focus, 103 | &:focus-within{ 104 | box-shadow: none; 105 | } 106 | .searchBoxInput__56498{ 107 | @include TypeBody; 108 | color: $TextFillColorPrimary; 109 | &::placeholder{ 110 | @include TypeBody; 111 | color: $TextFillColorSecondary; 112 | } 113 | } 114 | .clearIcon__21453, 115 | .searchIcon_d1a3c1{ 116 | width: 16px; 117 | height: 16px; 118 | position: absolute; 119 | top: 8px; 120 | right: 16px; 121 | path{ 122 | fill: #FFF; 123 | } 124 | } 125 | } 126 | 127 | // Results 128 | .categories_f69601{ 129 | .categoryPill_f69601{ 130 | .categoryLabel-2m4AT-{ 131 | @include TypeBody; 132 | color: $TextFillColorSecondary; 133 | } 134 | &.selected_f69601{ 135 | background-color: $AccentBase; 136 | .categoryLabel_f69601{ 137 | color: $TextFillColorPrimary; 138 | } 139 | } 140 | } 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/modules/home/_activity.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .nowPlayingColumn__133bf{ 2 | background: transparent; 3 | .container__7d20c{ 4 | background-color: $LayerFillColorDefault; 5 | border-left: 1px solid $CardStrokeColorDefault; 6 | } 7 | .scroller__7d20c{ 8 | border: 0; 9 | } 10 | 11 | // Header 12 | .header__7d20c{ 13 | @include TypeSubtitle; 14 | } 15 | 16 | // User data consent card 17 | .card__2eab1.outer_bf1984{ 18 | background-color: $LayerFillColorDefault; 19 | .header__2eab1, 20 | .defaultColor__77578 { 21 | text-align: left; 22 | } 23 | } 24 | 25 | // Card 26 | .wrapper__00943{ 27 | background-color: $LayerFillColorDefault; 28 | border: 1px solid $CardStrokeColorDefault; 29 | &:hover{ 30 | background-color: $LayerFillColorAlt; 31 | } 32 | } 33 | .inset_bf1984{ 34 | background-color: $LayerFillColorDefault; 35 | border: 1px solid $CardStrokeColorDefault; 36 | border-radius: 4px; 37 | .section__00943{ 38 | background-color: transparent; 39 | } 40 | } 41 | 42 | // Empty 43 | .emptyCard__7e549{ 44 | background-color: $LayerFillColorDefault; 45 | border: 1px solid $CardStrokeColorDefault; 46 | align-items: baseline; 47 | text-align: left; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/modules/home/_conversations.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .privateChannels__35e86{ 2 | .link__972a0[href="/channels/@me"]{ 3 | .avatar__20a53{ 4 | &::before{ 5 | content: "\E13D"; // Contact 6 | @include FontIconFluent; 7 | color: $TextFillColorSecondary; 8 | } 9 | svg{ 10 | display: none; 11 | } 12 | } 13 | } 14 | // Remove the nitro button 15 | .link__972a0[href="/store"]{ 16 | display: none; 17 | } 18 | 19 | // Remove badges from the shop button 20 | .channel__972a0{ 21 | .link__972a0[data-list-item-id*="___shop"]{ 22 | .newBadge__4ed1a{ 23 | display: none; 24 | } 25 | } 26 | } 27 | 28 | .interactive__972a0{ 29 | &:hover, 30 | &:focus-within{ 31 | background-color: $SubtleFillColorSecondary; 32 | box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; 33 | .name__20a53{ 34 | color: $TextFillColorPrimary; 35 | } 36 | } 37 | &.selected_bf202d{ 38 | background-color: $SubtleFillColorSecondary; 39 | } 40 | 41 | .layout__20a53{ 42 | padding: 0 8px; 43 | } 44 | 45 | // Name 46 | .name__20a53{ 47 | @include TypeBody; 48 | color: $TextFillColorSecondary; 49 | } 50 | // Activity 51 | .activityText__972a0{ 52 | @include TypeCaption; 53 | color: $TextFillColorSecondary; 54 | } 55 | } 56 | 57 | // DMs header 58 | .privateChannelsHeaderContainer__99e7c { 59 | height: auto; 60 | padding: 12px; 61 | color: $TextFillColorPrimary; 62 | @include TypeBody; 63 | text-transform: none; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/modules/home/_dm_profile.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .profilePanel_b433b4{ 2 | .userProfileOuterUnthemed_c69a7b{ 3 | background-color: transparent; 4 | border-left: 1px solid $CardStrokeColorDefault; 5 | } 6 | .userPanelInnerThemed_c69a7b{ 7 | background: $LayerFillColorDefault; 8 | } 9 | 10 | // Section title 11 | .title_c4a579, 12 | .headerText__2ef49{ // 'Deprecated' spotify title 13 | @include TypeBodyStrong; 14 | text-transform: none; 15 | } 16 | 17 | .overlayBackground_c69a7b{ 18 | background-color: $LayerOnAcrylicFillColorDefult; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/modules/home/_home.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .sidebar_c48ade{ 2 | .privateChannels__35e86{ 3 | background-color: transparent; 4 | } 5 | 6 | .searchBar__35e86{ 7 | box-shadow: none; 8 | button{ 9 | background-color: transparent; 10 | @include TypeBody; 11 | color: $TextFillColorSecondary; 12 | text-align: center; 13 | &::after{ 14 | content: "..."; 15 | } 16 | &:hover{ 17 | text-decoration: underline; 18 | } 19 | } 20 | } 21 | 22 | .scroller__99e7c{ 23 | background-color: transparent; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/modules/home/_main.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container__133bf{ 2 | // Body 3 | .tabBody__133bf{ 4 | background-color: $LayerFillColorDefault; 5 | border-top: 1px solid $CardStrokeColorDefault; 6 | border-left: 1px solid $CardStrokeColorDefault; 7 | border-radius: 8px 0 0 0; 8 | &::before{ 9 | display: none; 10 | } 11 | 12 | // Search bar 13 | .searchBar__5ec2f{ 14 | margin: 18px 20px 8px 20px; 15 | background-color: transparent; 16 | } 17 | 18 | // Header 19 | .title__1472a{ 20 | @include TypeSubtitle; 21 | color: $TextFillColorPrimary; 22 | letter-spacing: normal; 23 | text-transform: none; 24 | } 25 | 26 | // Item 27 | .peopleListItem_cc6179.active_cc6179, 28 | .peopleListItem_cc6179:hover{ 29 | border-radius: 4px; 30 | } 31 | 32 | // Username 33 | .username__0a06e{ 34 | @include TypeBodyStrong; 35 | } 36 | // User Status 37 | .text__19b6d{ 38 | @include TypeCaption; 39 | } 40 | 41 | // Buttons 42 | .actionButton_f8fa06{ 43 | background-color: transparent; 44 | visibility: hidden; 45 | } 46 | 47 | // Show buttons when hovered 48 | .peopleListItem_cc6179.active_cc6179 .actionButton_f8fa06, 49 | .peopleListItem_cc6179:hover .actionButton_f8fa06{ 50 | visibility: visible; 51 | } 52 | } 53 | 54 | // Empty 55 | .friendsEmpty_c7ea19{ 56 | .image__08515{ 57 | filter: brightness(200%) 58 | } 59 | .text__0e310{ 60 | @include TypeBody; 61 | color: $TextFillColorPrimary; 62 | } 63 | } 64 | 65 | // Add friend 66 | .header__94b08{ 67 | padding: 20px; 68 | } 69 | .addFriendInputWrapper__72ba7{ 70 | padding: 0; 71 | background-color: transparent; 72 | border: 0; 73 | .input__0f084{ 74 | padding: 0 12px; 75 | letter-spacing: normal; 76 | } 77 | } 78 | // Remove hint text 79 | .addFriendHint__72ba7{ 80 | display: none; 81 | } 82 | } 83 | 84 | // Icon replacements 85 | html[lang^="en-"].theme-dark .container__133bf{ 86 | .actionButton_f8fa06{ 87 | &::before{ 88 | @include FontIconFluent; 89 | color: $TextFillColorSecondary; 90 | } 91 | svg{ 92 | display: none; 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/modules/home/_toolbar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container__133bf{ 2 | background-color: transparent; 3 | // Toolbar 4 | .container__9293f{ 5 | background-color: transparent; 6 | 7 | // Remove icon 8 | .children__9293f > .iconWrapper__9293f{ 9 | display: none; 10 | } 11 | 12 | // Remove additional padding from group DMs button 13 | .inviteToolbar__133bf{ 14 | padding-right: 0; 15 | } 16 | 17 | // Tab bar 18 | .item__133bf{ 19 | height: 36px; 20 | margin: 0 0 0 8px; 21 | border-radius: 0; 22 | color: $TextFillColorPrimary; 23 | @include TypeBody; 24 | &:hover{ 25 | background-color: transparent; 26 | color: $TextFillColorSecondary; 27 | } 28 | &.selected_b3f026{ 29 | background-color: transparent; 30 | &::before{ 31 | content: ""; 32 | position: absolute; 33 | width: 100%; 34 | height: 3px; 35 | background-color: $AccentLight1; 36 | border-radius: 2px; 37 | bottom: 2px; 38 | } 39 | } 40 | // Add friend button 41 | &.addFriend__133bf{ 42 | background-color: transparent; 43 | &.selected_b3f026{ 44 | color: $TextFillColorPrimary; 45 | } 46 | } 47 | 48 | // Badge 49 | .badge__133bf{ 50 | background-color: $SystemFillColorCritical !important; // For some reason this is in line 51 | @include TypeCaption; 52 | color: $TextOnAccentFillColorPrimary; 53 | } 54 | } 55 | 56 | // Remove gradient on right-side of tab bar 57 | .children__9293f::after{ 58 | display: none; 59 | } 60 | // Remove divider between Group DM and Inbox 61 | .divider__9293f{ 62 | display: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/modules/icons/home/_main.scss: -------------------------------------------------------------------------------- 1 | html[lang^="en-"].theme-dark .peopleList__5ec2f { 2 | [aria-label="Message"]::before{ 3 | content: "\e8bd"; // Message 4 | } 5 | [aria-label="More"]::before{ 6 | content: "\e712"; // More 7 | } 8 | 9 | [aria-label="Unblock"]::before{ 10 | content: "\e8f8"; // BlockContact 11 | } 12 | 13 | [aria-label="Accept"]::before{ 14 | content: "\e8fb"; // Accept 15 | } 16 | [aria-label="Ignore"]::before{ 17 | content: "\e711"; // Cancel 18 | } 19 | // Pending friend requests Cancel button 20 | [aria-label="Cancel"]::before{ 21 | content: "\E711"; // Cancel 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/modules/icons/main/_account.scss: -------------------------------------------------------------------------------- 1 | @keyframes fluent-setting-rot { 2 | from{ 3 | transform: rotate(0); 4 | } 5 | to{ 6 | transform: rotate(360deg); 7 | } 8 | } 9 | 10 | // Also includes the RTC controls icons to save having another file 11 | html[lang^="en-"].theme-dark .panels_c48ade .button__201d5{ 12 | &[aria-label="Deafen"][aria-checked=true]::before{ 13 | content: "\E74F"; // Mute 14 | } 15 | &[aria-label="Deafen"][aria-checked=false]::before{ 16 | content: "\E767"; // Volume 17 | } 18 | &[aria-label="Mute"][aria-checked=true]::before{ 19 | content: "\EC54"; // MicOff 20 | } 21 | &[aria-label="Mute"][aria-checked=false]::before{ 22 | content: "\E720"; // Microphone 23 | } 24 | &[aria-label^="User settings" i]::before{ 25 | content: "\E713"; // Settings 26 | } 27 | &[aria-label^="User settings" i]{ 28 | &:hover{ 29 | &::before{ 30 | animation: fluent-setting-rot 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; 31 | } 32 | } 33 | } 34 | 35 | // RTC 36 | &[aria-label="Noise Suppression powered by Krisp" i]::before{ 37 | content: "\F61F"; // NoiseCancellation 38 | } 39 | &[aria-label="Disconnect"]::before{ 40 | content: "\E137"; // HangUp 41 | } 42 | &[aria-label="Leave Activity"]::before, 43 | &[aria-label="Disconnect Quietly"]::before{ 44 | content: "\E11F"; // LeaveChat 45 | } 46 | 47 | // Streaming 48 | &[aria-label*="Stream"]::before, 49 | &[aria-label*="Go Live"]::before, 50 | &[aria-label*="Navigate to a server to start streaming."]::before{ 51 | content: "\EBC6"; // Project 52 | } 53 | &[aria-label="Stop Streaming"]::before{ 54 | content: "\EA14"; // DisconnectDisplay 55 | } 56 | 57 | // Spotify 58 | &[aria-label="Stop"]::before{ 59 | content: "\E15B"; // Stop 60 | } 61 | } 62 | 63 | html[lang^="en-"].theme-dark .panels_c48ade .actionButtons_e131a9 button.button__201d5{ 64 | &[aria-label*="camera" i]::before{ 65 | content: "\E156"; // WebCam 66 | } 67 | &[aria-label*="screen" i]::before{ 68 | content: "\EC15"; // MiracastLogoSmall 69 | } 70 | &[aria-label*="activity" i]::before{ 71 | content: "\EA86" // Puzzle 72 | } 73 | &[aria-label*="soundboard" i]::before{ 74 | content: "\F0ED" // SpatialVolume2 75 | } 76 | } 77 | 78 | html[lang^="en-"].theme-dark .popover_c97e55 .button_c97e55{ 79 | &[aria-label^="Edit"]::before{ 80 | content: "\E70F" // Edit 81 | } 82 | &[aria-label^="Clear"]::before{ 83 | content: "\E894" // Clear 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/modules/icons/main/_call.scss: -------------------------------------------------------------------------------- 1 | html[lang^="en-"].theme-dark .wrapper__1405b .button__201d5{ 2 | &[aria-label*="Camera"]::before, 3 | &[aria-label*="Join Video Call"]::before{ 4 | content: "\E156"; // WebCam 5 | } 6 | &[aria-label="Share Your Screen"]::before{ 7 | content: "\EC15"; // MiracastLogoSmall 8 | } 9 | &[aria-label="Stop Streaming"]::before{ 10 | content: "\EA14"; // DisconnectDisplay 11 | } 12 | &[aria-label="Turn On Microphone"]::before{ 13 | content: "\EC54"; // MicOff 14 | } 15 | &[aria-label="Turn Off Microphone"]::before{ 16 | content: "\E720"; // Microphone 17 | } 18 | &[aria-label="Disconnect"]::before{ 19 | content: "\E137"; // HangUp 20 | } 21 | &[aria-label="Stop Watching"]::before{ 22 | content: "\E191"; // StopSlideShow 23 | } 24 | &[aria-label="Join Call"]::before{ 25 | content: "\E13A"; // Phone 26 | } 27 | &[aria-label="Dismiss"]::before{ 28 | // There's no Call Reject icon, so have to reuse 29 | content: "\E137"; // HangUp 30 | } 31 | &[aria-label="Start An Activity"i]::before{ 32 | content: "\EA86"; // Puzzle 33 | } 34 | &[aria-label="Leave Activity"]::before{ 35 | content: "\E137"; // HangUp 36 | } 37 | 38 | &[aria-label="Hide chat"]::before{ 39 | content: "\E70D"; // ChevronDown 40 | } 41 | &[aria-label="Show chat"]::before{ 42 | content: "\E70D"; // ChevronDown 43 | } 44 | 45 | &[aria-label="Pop Out"]::before{ 46 | content: "\E17C"; // NewWindow 47 | } 48 | &[aria-label="Full Screen"]::before{ 49 | content: "\E1D9"; // FullScreen 50 | } 51 | &[aria-label="Exit Full Screen"]::before{ 52 | content: "\E1D8"; // BackToWindow 53 | } 54 | &[aria-label^="Return"]::before{ 55 | content: "\F71A"; // ReturnToCall 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/modules/icons/main/_chat_menu.scss: -------------------------------------------------------------------------------- 1 | html[lang^="en-"].theme-dark .wrapper_f7ecac{ 2 | .button_f7ecac{ 3 | &[aria-label="Reply"]::before{ 4 | content: "\E97A"; // Reply 5 | } 6 | &[aria-label="Edit"]::before{ 7 | content: "\E104"; // Edit 8 | } 9 | &[aria-label="Create Thread"]::before{ 10 | content: "\E15C"; // ShowResults 11 | } 12 | &[aria-label="View Thread"]::before{ 13 | content: "\E15C"; // ShowResults 14 | } 15 | &[aria-label="Mark Unread"]::before{ 16 | content: "\E119"; // Mail 17 | } 18 | &[aria-label="Pin Message"]::before{ 19 | content: "\E141"; // Pin 20 | } 21 | &[aria-label="Unpin Message"]::before{ 22 | content: "\E196"; // UnPin 23 | } 24 | &[aria-label="Copy Link"]::before{ 25 | content: "\E167"; // Link 26 | } 27 | &[aria-label="Copy Message ID"]::before{ 28 | content: "ID"; 29 | @include FontNormal; 30 | } 31 | &[aria-label="Reactions"]::before{ 32 | content: "\E11D"; // Emoji 33 | } 34 | &[aria-label="Add Super Reaction"]::before{ 35 | content: "\EA38"; // Asterisk 36 | } 37 | &[aria-label="Delete"]::before{ 38 | content: "\E107"; // Delete 39 | } 40 | &[aria-label="Add Reaction"]::before{ 41 | content: "\E11D"; // Emoji 42 | } 43 | &[aria-label="Publish"]::before{ 44 | content: "\E789"; // Megaphone 45 | } 46 | &[aria-label="Published"]::before{ 47 | content: "\E081"; // Checkmark 48 | } 49 | &[aria-label="More"]::before{ 50 | content: "\E10C"; // More 51 | } 52 | 53 | // Upload attachment 54 | &[aria-label="Spoiler Attachment"]::before{ 55 | content: "\ED1A"; // Hide 56 | } 57 | &[aria-label="Modify Attachment"]::before{ 58 | content: "\E104"; // Edit 59 | } 60 | &[aria-label="Remove Attachment"]::before{ 61 | content: "\E107"; // Delete 62 | } 63 | &[aria-label="Forward"]::before { 64 | content: "\E72A"; // Forward 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/modules/icons/main/_toolbar.scss: -------------------------------------------------------------------------------- 1 | html[lang^="en-"].theme-dark .toolbar__9293f{ 2 | .iconWrapper__9293f{ 3 | // Threads 4 | &[aria-label="Threads"]::before{ 5 | content: "\E8C4"; // ShowBcc 6 | } 7 | 8 | // Mute channel 9 | &[aria-label*="Mute channel"][aria-checked="false"]::before{ 10 | content: "\EA8F"; // Ringer 11 | } 12 | &[aria-label*="Mute channel"][aria-checked="true"]::before{ 13 | content: "\E7ED"; // RingerSilent 14 | } 15 | 16 | // Pinned Messages 17 | &[aria-label="Pinned messages" i]::before{ 18 | content: "\E840"; // Pinned 19 | } 20 | 21 | // Member list 22 | &[aria-label="Hide Member List" i]::before, 23 | &[aria-label="Show Member List" i]::before{ 24 | content: "\E716"; // People 25 | } 26 | 27 | // User profile (DM) 28 | &[aria-label="Hide User Profile"]::before, 29 | &[aria-label="Show User Profile"]::before{ 30 | content: "\E136"; // Contact Info 31 | } 32 | 33 | // Mail 34 | &[aria-label="Inbox"]::before{ 35 | content: "\E715"; // Mail 36 | } 37 | 38 | // Threads: Notification Settings 39 | &[aria-label="Notification settings" i]::before{ 40 | content: "\EA8F"; // Ringer 41 | } 42 | 43 | // Threads: More 44 | &[aria-label="More"]::before{ 45 | content: "\E712"; // More 46 | } 47 | 48 | // Threads: Close 49 | &[aria-label="Close"]::before{ 50 | content: "\E89F"; // More 51 | } 52 | 53 | // Update 54 | &[aria-label="Update Ready!"]::before{ 55 | content: "\F83E"; // UpdateRestore 56 | } 57 | &[aria-label="Update Ready!"]::after{ 58 | content: ""; 59 | width: 8px; 60 | height: 8px; 61 | position: absolute; 62 | top: 19px; 63 | left: 32px; 64 | background-color: $Gold; 65 | 66 | border-radius: 4px; 67 | } 68 | 69 | // Help 70 | &[aria-label="Help"]{ 71 | display: none; 72 | } 73 | 74 | // Home 75 | // New group DM 76 | &[aria-label="New group DM" i]::before{ 77 | content: "\E902"; // Group 78 | } 79 | 80 | // DM 81 | // Start voice call 82 | &[aria-label="Start voice call" i]::before{ 83 | content: "\E717"; // Phone 84 | } 85 | &[aria-label="Start video call" i]::before{ 86 | content: "\E8AA"; // VideoChat 87 | } 88 | &[aria-label="Add friends to DM" i]::before{ 89 | content: "\E902"; // Group 90 | } 91 | // Join call 92 | &[aria-label="Join Voice Call" i]::before{ 93 | content: "\E77E"; // IncomingCall 94 | } 95 | 96 | // Stage channel 97 | &[aria-label="tage Settings" i]::before{ 98 | content: "\E115"; // Setting 99 | } 100 | } 101 | .eventsButton__32f49{ 102 | // Stage channel 103 | &[aria-label="Create & View Events" i]::before{ 104 | content: "\E163"; // Calendar 105 | } 106 | } 107 | .button__201d5{ 108 | // Call tiles 109 | // Invite 110 | &[aria-label="Invite"]::before{ 111 | content: "\E1E2"; // AddFriend 112 | } 113 | // Focus 114 | &[aria-label="Focus"]::before, 115 | &[aria-label="Grid"]::before{ 116 | content: "\ECA5"; // Tiles 117 | } 118 | // More 119 | &[aria-label="More"]::before{ 120 | content: "\E712"; // More 121 | } 122 | } 123 | 124 | // Stage channel 125 | .button__201d5{ 126 | // Show chat 127 | &[aria-label^="Show Chat"]::before{ 128 | content: "\E8A0"; // OpenPane 129 | } 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/modules/loadscreen/_loadscreen.scss: -------------------------------------------------------------------------------- 1 | // Hide titlebar 2 | .theme-dark .container_a2f514{ 3 | padding-top: 32px; 4 | top: -32px; 5 | } 6 | 7 | // Source: C:\Windows\System32\oobe\FirstLogonAnim.html 8 | @keyframes fluent-loading-blob1-path{ 9 | 0%{ 10 | top:50vh; 11 | left:50vw; 12 | width:5vw; 13 | height:5vw; 14 | opacity:0.5; 15 | } 16 | 50%{ 17 | top:0vh; 18 | left:45vw; 19 | width:60vw; 20 | height:60vw; 21 | opacity: 1; 22 | } 23 | 100%{ 24 | top:50vh; 25 | left:50vw; 26 | width:5vw; 27 | height:5vw; 28 | opacity:0.5; 29 | } 30 | } 31 | @keyframes fluent-loading-blob2-path { 32 | 0%{ 33 | top:40vh; 34 | left:45vw; 35 | width:15vw; 36 | height:15vw; 37 | } 38 | 50%{ 39 | top:37vh; 40 | left:-10vw; 41 | width:80vw; 42 | height:80vw; 43 | } 44 | 100%{ 45 | top:40vh; 46 | left:45vw; 47 | width:15vw; 48 | height:15vw; 49 | } 50 | } 51 | @keyframes fluent-loading-blob3-path { 52 | 0%{ 53 | top:30vh; 54 | left:30vw; 55 | width:25vw; 56 | height:25vw; 57 | } 58 | 50%{ 59 | top:-50vh; 60 | left:-20vw; 61 | width:120vw; 62 | height:120vw; 63 | } 64 | 100%{ 65 | top:30vh; 66 | left:30vw; 67 | width:25vw; 68 | height:25vw; 69 | } 70 | } 71 | @keyframes fluent-loading-blob-fade{ 72 | 0%{ 73 | opacity: 0; 74 | } 75 | 100%{ 76 | opacity: 1; 77 | } 78 | } 79 | 80 | 81 | .theme-dark .container_a2f514{ 82 | background-color: #000; 83 | 84 | // Loading blob animations 85 | &::before, 86 | &::after{ 87 | content: ""; 88 | position: absolute; 89 | } 90 | &::before{ 91 | background: radial-gradient(50% 50% at 50% 50%, rgba(12, 119, 255, 0.3) 15.62%, rgba(12, 119, 255, 0) 100%); 92 | animation: fluent-loading-blob1-path 15s infinite, fluent-loading-blob-fade 1332ms ease-out; 93 | } 94 | &::after{ 95 | background: radial-gradient(50% 50% at 50% 50%, rgba(0, 56, 255, 0.3) 15.62%, rgba(12, 119, 255, 0) 100%); 96 | animation: fluent-loading-blob2-path 20s infinite, fluent-loading-blob-fade 1332ms ease-out; 97 | } 98 | } 99 | .content_a2f514{ 100 | width: 64px; 101 | height: 64px; 102 | &::before{ 103 | content: ""; 104 | position: absolute; 105 | display: block; 106 | background: radial-gradient(50% 50% at 50% 50%, rgba(65, 56, 210, 0.5) 15.62%, rgba(65, 56, 210, 0) 100%); 107 | animation: fluent-loading-blob3-path 30s infinite, fluent-loading-blob-fade 1332ms ease-out; 108 | } 109 | } 110 | 111 | .content_a2f514{ 112 | video{ 113 | display: none; 114 | } 115 | &::after{ 116 | content: "Connecting"; 117 | width: 100%; 118 | position: absolute; 119 | left: 0; 120 | color: $TextFillColorPrimary; 121 | @include TypeSubtitle; 122 | text-align: center; 123 | } 124 | 125 | // Loading circle 126 | .text_a2f514{ 127 | width: 64px; 128 | height: 64px; 129 | display: block; 130 | animation: fluent-loading-circle 1.5s linear infinite; 131 | .body_a2f514{ 132 | line-height: unset; 133 | font-size: 0; 134 | 135 | width: 64px; 136 | height: 64px; 137 | position: absolute; 138 | 139 | background-color: transparent; 140 | clip: rect(0, 64px, 64px, 32px); 141 | animation: fluent-loading-circle-progress-1 5s linear infinite; 142 | &::after{ 143 | content: ""; 144 | position: absolute; 145 | height: 64px; 146 | width: 64px; 147 | top: 0; 148 | left: 0; 149 | clip: rect(0, 64px, 64px, 32px); 150 | border: 3px solid #FFF; 151 | border-radius: 50%; 152 | animation: fluent-loading-circle-progress-2 5s linear infinite; 153 | box-sizing: border-box; 154 | } 155 | } 156 | 157 | .tipTitle_a2f514, 158 | .tip_a2f514{ 159 | display: none; 160 | } 161 | } 162 | } 163 | 164 | // Links 165 | .problemsText_a2f514{ 166 | color: $TextFillColorPrimary; 167 | } 168 | .anchor_edefb8{ 169 | color: $AccentTextFillColorPrimary; 170 | } 171 | -------------------------------------------------------------------------------- /src/modules/main/_acrylic.scss: -------------------------------------------------------------------------------- 1 | // Main UI transparency 2 | .theme-dark{ 3 | .sidebar_c48ade, // channels 4 | .container__2637a{ // channels 5 | background-color: transparent; 6 | } 7 | 8 | // Settings transparency 9 | .layer__960e4, 10 | .standardSidebarView__23e6b, 11 | .sidebarRegionScroller__23e6b, 12 | .contentRegion__23e6b, 13 | .contentRegionScroller__23e6b{ 14 | background: transparent; 15 | } 16 | 17 | // Background layers 18 | // NOTE: 2021-07-09 - The 'acrylic' effect is made of two layers 19 | // Background image - To be declared by the user in the options section 20 | // Filter overlay - Saturate helps bring out some colours from the background layer 21 | // 22 | // NOTE: 2022-10-16 - Have to use the #{} trick because SASS and CSS saturate() functions collide and throw an error on compile when using a CSS var 23 | // See: https://github.com/sass/libsass/issues/151#issuecomment-54477631 24 | .bg__960e4{ 25 | margin-top: -10px; // Hides the black bar at top of titlebar (ie. grabber) 26 | background: var(--fluent-acrylic-background); 27 | background-size: cover; 28 | filter: #{"saturate(var(--fluent-acrylic-background-saturate))"} blur(var(--fluent-acrylic-background-blur)); 29 | &::before{ 30 | content: ""; 31 | width: 100%; 32 | height: 100%; 33 | position: absolute; 34 | background: linear-gradient(0deg, rgba(32, 32, 32, var(--fluent-acrylic-background-dimness)), rgba(32, 32, 32,var(--fluent-acrylic-background-dimness))), 35 | rgba(32, 32, 32, var(--fluent-acrylic-background-dimness)); 36 | background-blend-mode: color, luminosity; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/modules/main/channels/_account.scss: -------------------------------------------------------------------------------- 1 | // Remove background from RTC/account 2 | .theme-dark .panels_c48ade{ 3 | background-color: $LayerFillColorAlt; 4 | border-radius: 4px; 5 | 6 | // Remove 1px margin from bottom of panel 7 | .container__37e49{ 8 | background-color: transparent; 9 | height: 48px; 10 | margin-bottom: 0; 11 | } 12 | 13 | // Remove margin on avatar/username wrapper 14 | .avatarWrapper__37e49{ 15 | margin-right: 0; 16 | &:hover{ 17 | background-color: transparent; 18 | } 19 | } 20 | 21 | .buttons__37e49{ 22 | margin-left: 8px; 23 | } 24 | .buttonSpace__37e49{ 25 | margin-right: 0; 26 | } 27 | .button__67645{ 28 | margin-left: 4px; 29 | background-color: $ControlFillColorDefault; 30 | border: 1px solid $ControlStrokeColorDefault; 31 | border-radius: 4px; 32 | color: $TextFillColorPrimary; 33 | &:hover{ 34 | background-color: $ControlFillColorSecondary; 35 | } 36 | &:active{ 37 | background-color: $ControlFillColorTertiary; 38 | } 39 | .contents__201d5{ // Non-EN sizing fix 40 | .lottieIcon__5eb9b{ 41 | position: absolute; 42 | top: 5px; 43 | left: 5px; 44 | } 45 | } 46 | &:first-child{ 47 | margin-left: 0; 48 | } 49 | 50 | // Make muted buttons red 51 | &[aria-checked=true]{ 52 | border-color: $SystemFillColorCritical; 53 | color: $SystemFillColorCritical; 54 | } 55 | } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /src/modules/main/channels/_rtc.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container_e131a9{ 2 | background-color: transparent; 3 | border-top: 0; 4 | border-bottom: 0; 5 | padding-bottom: 0; 6 | 7 | // Connection status/disconnect 8 | .connection_e131a9{ 9 | height: 32px; 10 | } 11 | .rtcConnectionStatus__06d62 { 12 | padding-bottom: 0; 13 | .button__201d5{ 14 | line-height: 16px; 15 | } 16 | .text-md\/medium_cf4812{ 17 | @include TypeBody; 18 | } 19 | } 20 | .subtext__339d0 .text-sm\/medium_cf4812{ 21 | @include TypeBody; 22 | color: $TextFillColorPrimary !important; // Override inline 23 | } 24 | .voiceUsers__68617{ 25 | padding-top: 4px; 26 | } 27 | 28 | // Connection status colours 29 | .rtcConnectionQualityFine__06d62{ 30 | .ping__06d62 path{ 31 | fill: $SystemFillColorSuccess; 32 | } 33 | .rtcConnectionStatusConnected__06d62{ 34 | color: $SystemFillColorSuccess; 35 | } 36 | } 37 | .rtcConnectionQualityAverage__06d62{ 38 | .ping__06d62 path{ 39 | fill: $SystemFillColorCaution; 40 | } 41 | .rtcConnectionStatusConnected__06d62{ 42 | color: $SystemFillColorCaution; 43 | } 44 | } 45 | .rtcConnectionQualityBad__06d62{ 46 | .ping__06d62 path{ 47 | fill: $SystemFillColorCritical; 48 | } 49 | .rtcConnectionStatusConnected__06d62{ 50 | color: $SystemFillColorCritical; 51 | } 52 | } 53 | 54 | @keyframes fluent-streaming-pulse { 55 | 0%, 100%{ 56 | background-color: $SystemFillColorCriticalBackground; 57 | } 58 | 50%{ 59 | background-color: $ControlFillColorDefault; 60 | } 61 | } 62 | 63 | // Video/screen share buttons 64 | .actionButtons_e131a9{ 65 | grid-gap: 4px; 66 | .button__201d5 { 67 | min-width: unset; 68 | background-color: $ControlFillColorDefault; 69 | border: 1px solid $ControlStrokeColorDefault; 70 | border-radius: 4px; 71 | color: $TextFillColorPrimary; 72 | &:hover{ 73 | background-color: $ControlFillColorSecondary; 74 | } 75 | &:active{ 76 | background-color: $ControlFillColorTertiary; 77 | } 78 | &.buttonActive_e131a9{ 79 | background-color: transparent; 80 | // background-color: $SystemFillColorCriticalBackground !important; 81 | animation: fluent-streaming-pulse 3s ease-in-out infinite; 82 | } 83 | 84 | .contents__201d5{ 85 | // Display: flex required to fix alignment of soundboard icon when using non-English - see #249 86 | display: flex; 87 | font-size: 0; 88 | svg{ 89 | margin-right: 0; 90 | } 91 | } 92 | } 93 | // Hide buttons when you don't have permission. This also hides the soundboard when you are muted 94 | .disabledButtonWrapper__201d5{ 95 | display: none; 96 | } 97 | } 98 | } 99 | 100 | // Streaming game/app 101 | .theme-dark .activityPanel_c48ade{ 102 | background-color: transparent; 103 | padding-bottom: 0; 104 | border-top: 0; 105 | border-bottom: 0; 106 | .title_d1da5f{ 107 | @include TypeBody; 108 | } 109 | } 110 | 111 | // Icons 112 | html[lang^="en-"].theme-dark .panels_c48ade .button__201d5{ 113 | &::before{ 114 | @include FontIconFluent; 115 | font-size: 16px; 116 | } 117 | .contents__201d5{ 118 | display: none; 119 | } 120 | } 121 | 122 | // Fix connection status text not appearing 123 | .rtcConnectionStatus__06d62 .contents__201d5{ 124 | display: block !important; 125 | .rtcConnectionStatusLabel__06d62{ 126 | font-weight: 500; 127 | } 128 | } 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /src/modules/main/chat/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .channelTextArea_f75fb0{ 2 | &:focus-within{ 3 | .autocomplete__13533{ 4 | border-color: $ControlStrokeColorDefault; 5 | } 6 | } 7 | } 8 | 9 | .theme-dark .autocomplete__13533{ 10 | right: 0; 11 | bottom: calc(100% + 4px); 12 | left: 0; 13 | box-shadow: none; 14 | background-color: $CardStrokeColorDefaultSolid; 15 | border: 1px solid $ControlStrokeColorDefault; 16 | border-radius: 4px; 17 | 18 | .rail_d1405b{ 19 | background-color: $CardStrokeColorDefault; 20 | } 21 | 22 | .section_b1e4f3{ 23 | > div[role=button]{ 24 | width: 32px; 25 | height: 32px; 26 | background-color: $ControlFillColorDefault; 27 | border: 1px solid $ControlStrokeColorDefault; 28 | border-radius: 4px; 29 | &:hover{ 30 | background-color: $ControlFillColorSecondary; 31 | } 32 | &:active{ 33 | background-color: $ControlFillColorTertiary; 34 | } 35 | svg{ 36 | width: 24px; 37 | height: 24px; 38 | margin: 4px; 39 | } 40 | .wrapper_ca5f52{ 41 | padding: 0 !important; // Override inline 42 | } 43 | } 44 | } 45 | 46 | // Commands header 47 | .categoryHeader_d1405b{ 48 | background-color: $CardStrokeColorDefaultSolid; 49 | .headerLabel__14245{ 50 | @include TypeBody; 51 | color: $TextFillColorPrimary; 52 | text-transform: none; 53 | } 54 | } 55 | 56 | // Commands matching: header 57 | .contentTitle__13533{ 58 | @include TypeBody; 59 | color: $TextFillColorPrimary; 60 | text-transform: none; 61 | strong{ 62 | @include FontMonospace; 63 | @include TypeBody; 64 | &::before, 65 | &::after{ 66 | content: "\""; 67 | } 68 | } 69 | } 70 | 71 | // Command 72 | .base__13533{ 73 | &.selected-3H3-RC{ 74 | background-color: $SubtleFillColorSecondary; 75 | box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; // Using box-shadow because borders cause the div to grow; 76 | } 77 | .title__920ab{ 78 | @include FontMonospace; 79 | @include TypeBody; 80 | } 81 | .usageWrapper__920ab{ 82 | .optionalCount__920ab{ 83 | @include TypeBody; 84 | color: $TextFillColorTertiary; 85 | } 86 | .option__920ab{ 87 | padding: 0; 88 | margin-left: 1ch; 89 | background-color: transparent; 90 | @include FontMonospace; 91 | @include TypeBody; 92 | &::before{ 93 | content: "{"; 94 | } 95 | &::after{ 96 | content: "}"; 97 | } 98 | } 99 | } 100 | 101 | // Command description 102 | .description__920ab{ 103 | @include TypeCaption; 104 | color: $TextFillColorTertiary; 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/modules/main/chat/_browse.scss: -------------------------------------------------------------------------------- 1 | // Channels & Roles 2 | .theme-dark .header__0b563{ 3 | background: transparent !important; // Override inline 4 | .iconWrapper__9293f{ 5 | display: none; 6 | } 7 | } 8 | .theme-dark .content_f75fb0 { 9 | height: calc(100% - 1px); 10 | padding: 0; 11 | background: $LayerFillColorDefault !important; // Override inline 12 | border-top: 1px solid $CardStrokeColorDefault; 13 | border-left: 1px solid $CardStrokeColorDefault; 14 | border-radius: 8px 0 0 0; 15 | &::before{ 16 | content: unset; 17 | } 18 | 19 | // Customise tab 20 | // Customisation questions 21 | .prompt__5d7c9{ 22 | background-color: $LayerFillColorDefault; 23 | border-top: 1px solid $CardStrokeColorDefault; 24 | border-left: 1px solid $CardStrokeColorDefault; 25 | border-radius: 8px 0 0 0; 26 | } 27 | // My profile 28 | .profileCard__5d7c9{ 29 | background-color: $LayerFillColorDefault; 30 | border-top: 1px solid $CardStrokeColorDefault; 31 | border-left: 1px solid $CardStrokeColorDefault; 32 | border-radius: 8px 0 0 0; 33 | } 34 | 35 | // Browse channels 36 | .pageBody__41ed7{ 37 | background-color: transparent; 38 | } 39 | .channelRow_e4503a { 40 | background-color: $CardBackgroundFillColorDefault; 41 | border-width: 1px 1px 0 1px; 42 | border-style: solid; 43 | border-color: $CardStrokeColorDefault; 44 | &.firstChannel_e4503a{ 45 | border-radius: 4px 4px 0 0; 46 | } 47 | &.lastChannel_e4503a{ 48 | border-radius: 0 0 4px 4px; 49 | } 50 | } 51 | .separator_e4503a{ 52 | display: none; 53 | } 54 | 55 | // Fix for channel checkboxes not displaying 56 | .channelActions_e4503a .checkbox_f525d3{ 57 | display: block; 58 | } 59 | 60 | // Category row has some issues 61 | .categoryRow_e4503a{ 62 | .checkbox_f525d3{ 63 | display: block; 64 | } 65 | } 66 | } 67 | 68 | // Members 69 | .theme-dark .page_c791b2{ 70 | background-color: transparent !important; 71 | .header_c791b2{ 72 | box-shadow: none; 73 | } 74 | .scroller_d20375{ 75 | background-color: $LayerFillColorDefault; 76 | border-top: 1px solid $CardStrokeColorDefault; 77 | border-left: 1px solid $CardStrokeColorDefault; 78 | border-radius: 8px 0 0 0; 79 | } 80 | 81 | .content_f75fb0{ 82 | background-color: transparent !important; 83 | // border: 0; 84 | } 85 | .mainTableContainer__09a38{ 86 | background-color: transparent; 87 | box-shadow: none; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/modules/main/chat/_chat_menu.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .wrapper_f7ecac{ 2 | background-color: $ControlOnImageFillColorDefault; 3 | border: 1px solid $ControlStrokeColorDefault; 4 | } 5 | 6 | html[lang^="en-"].theme-dark .wrapper_f7ecac{ 7 | .button_f7ecac[aria-label]{ 8 | &::before{ 9 | @include FontIconFluent; 10 | } 11 | svg{ 12 | display: none; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/modules/main/chat/_forum.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .chat_f75fb0{ 2 | background-color: transparent; 3 | } 4 | 5 | .theme-dark .container_f369db{ 6 | background-color: $LayerFillColorDefault; 7 | border-top: 1px solid $CardStrokeColorDefault; 8 | border-left: 1px solid $CardStrokeColorDefault; 9 | border-radius: 8px 0 0 0; 10 | 11 | // Threads 12 | .mainCard_f369db{ 13 | background-color: $LayerFillColorAlt; 14 | border: 1px solid $CardStrokeColorDefault; 15 | border-radius: 8px; 16 | 17 | &.container_faa96b:active, 18 | &.container_faa96b:hover{ 19 | transform: none; 20 | box-shadow: none; 21 | border-color: $CardStrokeColorDefaultSolid; 22 | } 23 | 24 | .postTitleText_faa96b{ 25 | color: $TextFillColorPrimary !important; // Override inline 26 | @include TypeBodyStrong; 27 | } 28 | .messageContent_faa96b{ 29 | @include TypeBody; 30 | } 31 | } 32 | 33 | // No threads 34 | .container-2nXUah{ 35 | background-color: $LayerFillColorAlt; 36 | border: 1px solid $CardStrokeColorDefault; 37 | border-radius: 4px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/modules/main/chat/_home.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .homeContainer__73533{ 2 | // Main 3 | // Card 4 | .card_d4f6c7{ 5 | background-color: $CardBackgroundFillColorDefault; 6 | border: 1px solid $CardStrokeColorDefault; 7 | border-radius: 4px; 8 | } 9 | 10 | // Side bar 11 | // Widget container 12 | .container_c68a2c, 13 | .container__29699{ 14 | background-color: $CardBackgroundFillColorDefault; 15 | border: 1px solid $CardStrokeColorDefault; 16 | border-radius: 4px; 17 | // Server description 18 | .description__6b38f{ 19 | @include TypeBody; 20 | } 21 | // Active Now 22 | .container__55cc1{ 23 | border: 1px solid transparent; 24 | border-radius: 4px; 25 | &:hover{ 26 | background-color: $CardBackgroundFillColorDefault; 27 | border: 1px solid $CardStrokeColorDefault; 28 | } 29 | } 30 | } 31 | // Server icon 32 | .icon_ac2d0d{ 33 | margin-top: 0; 34 | background-color: transparent; 35 | border: 0; 36 | } 37 | } -------------------------------------------------------------------------------- /src/modules/main/chat/_search_results.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .searchResultsWrap_a9e706{ 2 | background-color: $LayerFillColorDefault; 3 | border-left: 1px solid $CardStrokeColorDefault; 4 | 5 | .searchHeader_f3b986{ 6 | background-color: transparent; 7 | .totalResults_f3b986 > div{ 8 | @include TypeBodyStrong; 9 | } 10 | } 11 | // Tabs (new/old/relevant) 12 | .searchHeaderTabList_f3b986 { 13 | .item_b3f026 { 14 | padding-left: 0; 15 | padding-right: 0; 16 | margin-right: 16px; 17 | color: $TextFillColorPrimary; 18 | border-radius: 0; 19 | &:hover{ 20 | background-color: transparent; 21 | color: $TextFillColorSecondary; 22 | } 23 | 24 | &.selected_b3f026 { 25 | background-color: transparent; 26 | color: $AccentTextFillColorPrimary; 27 | &::before{ 28 | content: ""; 29 | position: absolute; 30 | bottom: 0px; 31 | width: 100%; 32 | height: 2px; 33 | background-color: $AccentLight3; 34 | border-radius: 2px; 35 | } 36 | &:hover{ 37 | color: $TextFillColorSecondary; 38 | } 39 | } 40 | } 41 | } 42 | 43 | // Result 44 | .searchResult__02a39{ 45 | background-color: $CardBackgroundFillColorDefault; 46 | border: 1px solid $CardStrokeColorDefault; 47 | border-radius: 4px; 48 | &:hover{ 49 | background-color: $CardBackgroundFillColorSecondary; 50 | } 51 | } 52 | // Jump button 53 | .button__02a39{ 54 | padding: 4px 8px; 55 | background-color: $ControlFillColorDefault; 56 | border: 1px solid $ControlStrokeColorOnAccentDefault; 57 | border-radius: 4px; 58 | &:hover{ 59 | background-color: $ControlFillColorSecondary; 60 | } 61 | &:active{ 62 | background-color: $ControlFillColorTertiary; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/modules/main/chat/_thread.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container__01ae2{ 2 | background-color: transparent; 3 | border-radius: 0; 4 | 5 | // Toolbar 6 | .container__9293f{ 7 | background-color: transparent; 8 | .children__9293f{ 9 | // Removes small gradient 10 | &::after{ 11 | display: none; 12 | } 13 | > .iconWrapper__9293f{ 14 | display: none; 15 | } 16 | .title__9293f{ 17 | @include TypeBodyStrong; 18 | } 19 | } 20 | } 21 | 22 | // Archived header 23 | .chatHeaderBar_a5700d{ 24 | margin: 8px; 25 | background-color: $SystemFillColorSolidNeutralBackground; 26 | border: 1px solid $CardStrokeColorDefault; 27 | border-radius: 8px; 28 | .chatHeaderBarText_a5700d{ 29 | color: $TextFillColorPrimary; 30 | } 31 | } 32 | 33 | // Forum thread 34 | .container__34c2c{ 35 | margin: 16px; 36 | padding: 4px 8px; 37 | background: $MicaBackgroundFillColorBase; 38 | border: 1px solid $SurfaceStrokeColorFlyout; 39 | border-radius: 8px; 40 | 41 | // Only apply filter when stickied 42 | &.header__34c2c{ 43 | backdrop-filter: blur(8px); 44 | @include Elevation32; 45 | } 46 | 47 | // Fix follow/link button sizes 48 | .button__34c2c { 49 | min-width: unset; 50 | } 51 | .buttonInner__34c2c, 52 | .reactionInner_f8896c, 53 | .addReactButton__34c2c{ 54 | background-color: $ControlFillColorDefault; 55 | border-width: 1px; 56 | border-style: outset; 57 | border-color: $ControlElevationBorder; 58 | border-radius: 4px; 59 | } 60 | } 61 | .divider_ee23ac{ 62 | display: none; 63 | } 64 | } 65 | 66 | .theme-dark .chat_ee72fa{ 67 | border-top: 1px solid $CardStrokeColorDefault; 68 | border-left: 1px solid $CardStrokeColorDefault; 69 | border-radius: 8px 0 0 0; 70 | &::before{ 71 | display: none; 72 | } 73 | } 74 | .theme-dark .chat_f75fb0.threadSidebarOpen_f75fb0{ 75 | border-radius: 0; 76 | .content_f75fb0{ 77 | border-right: 1px solid $CardStrokeColorDefault; 78 | border-radius: 8px 8px 0 0; 79 | } 80 | .chatContent_f75fb0{ 81 | border-radius: 8px 8px 0 0; 82 | } 83 | } 84 | 85 | .theme-dark .resizeHandle__01ae2{ 86 | position: relative; 87 | background-color: transparent; 88 | &::before{ 89 | content: ""; 90 | width: 3px; 91 | height: 128px; 92 | position: absolute; 93 | top: 50%; 94 | left: 3px; 95 | margin-top: -64px; 96 | background-color: $ControlStrokeColorSecondary; 97 | border-radius: 9999px; 98 | opacity: 0; 99 | transition: opacity 167ms Cubic-bezier(0,0,0,1) 100 | } 101 | &:hover::before{ 102 | opacity: 1; 103 | transition: opacity 250ms Cubic-bezier(0.55,0.55,0,1); 104 | } 105 | } 106 | 107 | // Narrow window 108 | .theme-dark .chatLayerWrapper__01ae2{ 109 | .container__01ae2 { 110 | background-color: $SolidBackgroundFillColorBase; 111 | &.floating__01ae2{ 112 | border-left: 0; 113 | } 114 | .chat_f02135{ 115 | border-radius: 0; 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/modules/main/chat/embeds/_file.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .fileWrapper__0ccae{ 2 | width: 400px; 3 | position: relative; 4 | background-color: $CardBackgroundFillColorDefault; 5 | border: 1px solid $SurfaceStrokeColorFlyout; 6 | border-color: $SurfaceStrokeColorFlyout; // Override Discord CSS 7 | border-radius: 8px; 8 | 9 | img{ 10 | display: none; 11 | & ~ .fileInner__0ccae{ 12 | position: relative; 13 | padding-left: 40px; 14 | &::before{ 15 | position: absolute; 16 | left: 0px; 17 | top: 8px; 18 | color: $TextFillColorPrimary; 19 | @include FontIconFluent; 20 | font-size: 24px; 21 | } 22 | .filenameLinkWrapper__0ccae a{ 23 | line-height: 20px; 24 | } 25 | } 26 | 27 | } 28 | 29 | img[title="acrobat"] ~ .fileInner__0ccae::before{ 30 | content: "\ea90"; // PDF 31 | } 32 | img[title="archive"] ~ .fileInner__0ccae::before{ 33 | content: "\f012"; // ZipFolder 34 | } 35 | img[title="document"] ~ .fileInner__0ccae::before{ 36 | content: "\f000"; // KnowledgeArticle 37 | } 38 | img[title="spreadsheet"] ~ .fileInner__0ccae::before{ 39 | content: "\E9F9"; // ReportDocument 40 | } 41 | img[title="unknown"] ~ .fileInner__0ccae::before{ 42 | content: "\e9ce"; // Unknown 43 | } 44 | 45 | img[title="ae"] ~ .fileInner__0ccae::before, 46 | img[title="ai"] ~ .fileInner__0ccae::before, 47 | img[title="sketch"] ~ .fileInner__0ccae::before{ 48 | content: "\e8a5"; // Document 49 | } 50 | 51 | .metadata__0ccae{ 52 | color: $TextFillColorSecondary; 53 | @include TypeCaption; 54 | font-weight: normal; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/modules/main/chat/embeds/_invite.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .wrapper_d5f3cd{ 2 | width: 400px; 3 | background-color: $CardBackgroundFillColorDefault; 4 | border: 1px solid $SurfaceStrokeColorFlyout; 5 | border-radius: 8px; 6 | 7 | // Header 8 | .header_d5f3cd{ 9 | color: $TextFillColorPrimary; 10 | @include FontNormal; 11 | @include TypeBodyStrong; 12 | text-transform: none; 13 | } 14 | 15 | // Icon 16 | .guildIcon_d5f3cd{ 17 | border-radius: 50%; 18 | align-self: center; 19 | } 20 | // Expired icon 21 | .guildIconExpired_d5f3cd{ 22 | background-color: transparent; 23 | background-image: none; 24 | &::before{ 25 | content: "\EA39"; // ErrorBadge 26 | position: absolute; 27 | width: 48px; 28 | @include FontIconFluent; 29 | color: $TextFillColorDisabled; 30 | font-size: 48px; 31 | line-height: 48px; 32 | text-align: center; 33 | } 34 | } 35 | 36 | .statusCounts_d5f3cd{ 37 | flex-direction: column; 38 | align-items: flex-start; 39 | } 40 | 41 | // Online users 42 | i.status_d5f3cd{ 43 | display: none; 44 | } 45 | .count_d5f3cd{ 46 | padding-left: 12px; 47 | position: relative; 48 | @include TypeBody; 49 | flex-direction: row; 50 | } 51 | i.statusOnline_d5f3cd ~ span{ 52 | &::before{ 53 | content: ""; 54 | width: 8px; 55 | height: 8px; 56 | position: absolute; 57 | top: 6px; 58 | left: 0; 59 | background-color: #6bb700; 60 | border-radius: 4px; 61 | } 62 | } 63 | i.statusOffline_d5f3cd ~ span{ 64 | &::before{ 65 | background-color: #8a8886; 66 | } 67 | } 68 | 69 | // Button 70 | .button_d5f3cd.buttonSize_d5f3cd{ 71 | height: 32px; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/modules/main/chat/embeds/_mediaplayer.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .audioControls_f316dd, 2 | .theme-dark .videoControls_f316dd{ 3 | height: 48px; 4 | padding: 0 8px; 5 | background-color: $SolidbackgroundFillColorQuarternary; 6 | border: 1px solid $SurfaceStrokeColorFlyout; 7 | border-radius: 8px; 8 | box-sizing: border-box; 9 | .mediaBarWrapper_f7877e{ 10 | height: 4px; 11 | background-color: $ControlStrongFillColorDefault; 12 | border-radius: 2px; 13 | } 14 | .durationTimeDisplay_f316dd, 15 | .durationTimeSeparator_f316dd{ 16 | @include FontNormal; 17 | font-weight: normal; 18 | font-size: 14px; 19 | } 20 | .mediaBarProgress_f7877e{ 21 | background-color: $AccentLight1; 22 | border-radius: 2px; 23 | } 24 | .mediaBarGrabber_f7877e{ 25 | background-color: $AccentLight1; 26 | border: 4px solid #454545; 27 | border-radius: 50%; 28 | top: -2px; 29 | } 30 | .fakeEdges_f7877e{ 31 | &::before, 32 | &::after{ 33 | display: none; 34 | } 35 | } 36 | 37 | .mediaBarInteractionVolume_f7877e{ 38 | height: 32px; 39 | padding: 0 16px; 40 | background-color: $SolidbackgroundFillColorQuarternary; 41 | border: 1px solid $SurfaceStrokeColorFlyout; 42 | border-radius: 8px; 43 | } 44 | } 45 | 46 | .theme-dark .videoControls_f316dd{ 47 | width: calc(100% - 16px); 48 | bottom: 8px; 49 | left: 8px; 50 | } 51 | 52 | @keyframes fluent-hide-video-controls{ 53 | from{ 54 | opacity: 1; 55 | } 56 | to{ 57 | opacity: 0; 58 | } 59 | } 60 | // Remove default video player animations 61 | .theme-dark .videoControls_f316dd{ 62 | transform: unset !important; // Override inline 63 | } 64 | .theme-dark .wrapperControlsHidden_f316dd { 65 | .videoControls_f316dd{ 66 | animation: $AnimationSoftDismiss fluent-hide-video-controls; 67 | opacity: 0; 68 | } 69 | } 70 | 71 | .theme-dark .messageAttachment__5dae1{ 72 | .wrapperAudio_f316dd{ 73 | background-color: $CardBackgroundFillColorDefault; 74 | border: 1px solid $CardStrokeColorDefault; 75 | border-radius: 8px; 76 | } 77 | 78 | .metadataContent_f316dd{ 79 | .metadataDownload_f316dd{ 80 | @include TypeBody; 81 | } 82 | .metadataSize_f316dd{ 83 | color: $TextFillColorTertiary; 84 | font-weight: normal; 85 | opacity: 1; 86 | } 87 | } 88 | // Remove icon 89 | .audioMetadata_f316dd::before{ 90 | display: none; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/modules/main/chat/embeds/_site_preview.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .embedFull__623de{ 2 | background-color: $CardBackgroundFillColorDefault; 3 | .embedProvider__623de{ 4 | @include TypeCaption; 5 | } 6 | .embedAuthor__623de{ 7 | @include TypeBody; 8 | } 9 | .embedTitle__623de{ 10 | @include TypeBody; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/modules/main/chat/embeds/_spotify.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .invite__4d3fa{ 2 | background-color: $CardBackgroundFillColorDefault; 3 | border: 1px solid $SurfaceStrokeColorFlyout; 4 | border-radius: 8px; 5 | 6 | // Header 7 | .header__4d3fa{ 8 | color: $TextFillColorPrimary; 9 | @include FontNormal; 10 | @include TypeBodyStrong; 11 | text-transform: none; 12 | } 13 | 14 | .partyStatus__4d3fa { 15 | @include TypeBody; 16 | } 17 | .details__4d3fa, 18 | .state__4d3fa{ 19 | font-size: inherit; 20 | } 21 | 22 | // Artwork 23 | .artwork__4d3fa{ 24 | border-radius: 4px; 25 | } 26 | 27 | // Ended 28 | .artworkSpotifySessionEnded__4d3fa{ 29 | background-image: none; 30 | &::before{ 31 | content: "\E15B"; // Stop 32 | position: absolute; 33 | width: 100px; 34 | @include FontIconFluent; 35 | color: $TextFillColorDisabled; 36 | font-size: 64px; 37 | line-height: 100px; 38 | text-align: center; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/modules/main/chat/embeds/_text.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .textContainer__4d95d{ 2 | background-color: $CardBackgroundFillColorDefault; 3 | border: 1px solid $SurfaceStrokeColorFlyout; 4 | border-radius: 8px 8px 0 0; 5 | .codeView-1JPDeA{ 6 | white-space: break-spaces; 7 | } 8 | } 9 | 10 | // Footer 11 | .theme-dark .footer__4d95d{ 12 | background-color: $CardBackgroundFillColorDefault; 13 | border: 1px solid $SurfaceStrokeColorFlyout; 14 | border-top: 0; 15 | border-radius: 0 0 8px 8px; 16 | 17 | @include TypeCaption; 18 | color: $TextFillColorPrimary; 19 | } 20 | 21 | // Codeblock 22 | .theme-dark .markup__75297 code{ 23 | background-color: $CardBackgroundFillColorDefault; 24 | border: 1px solid $SurfaceStrokeColorFlyout; 25 | border-radius: 8px; 26 | } 27 | -------------------------------------------------------------------------------- /src/modules/main/members/_members.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container_c8ffbb{ 2 | background: $LayerOnMicaBaseAltFillColor; 3 | border-left: 1px solid $CardStrokeColorDefault; 4 | 5 | .members_c8ffbb{ 6 | background-color: transparent; 7 | } 8 | 9 | // Group header 10 | .membersGroup_c8ffbb{ 11 | padding: 20px 8px 0 15px; 12 | color: $TextFillColorPrimary; 13 | @include TypeBodyStrong; 14 | text-transform: none; 15 | } 16 | 17 | // Member 18 | .container__91a9d{ 19 | margin-left: 7px; 20 | background: transparent; 21 | border: 1px solid transparent; 22 | color: $TextFillColorPrimary; 23 | &:hover{ 24 | background-color: $SubtleFillColorSecondary; 25 | border-color: $SubtleFillColorSecondary; 26 | .childContainer__91a9d{ 27 | background-color: transparent; 28 | } 29 | } 30 | // Selected (user popout open) 31 | &.selected__91a9d{ 32 | background-color: $SubtleFillColorSecondary; 33 | border-color: $SubtleFillColorSecondary; 34 | &::before{ 35 | transform: scaleY(100%); 36 | opacity: 1; 37 | transition: transform 250ms Cubic-bezier(0.55,0.55,0,1), 38 | opacity 250ms Cubic-bezier(0.55,0.55,0,1); 39 | } 40 | .childContainer__91a9d{ 41 | background-color: transparent; 42 | } 43 | } 44 | // Greyscale offline avatars 45 | &.offline__5d473{ 46 | .avatar__91a9d{ 47 | filter: grayscale(100%); 48 | } 49 | &:hover{ 50 | .avatar__91a9d{ 51 | filter: grayscale(0%); 52 | } 53 | } 54 | } 55 | } 56 | 57 | // Username 58 | .name__91a9d{ 59 | @include TypeBody; 60 | } 61 | // Activity 62 | .activity__5d473{ 63 | @include TypeCaption; 64 | color: $TextFillColorSecondary; 65 | strong{ 66 | @include TypeCaption; 67 | } 68 | } 69 | 70 | // Activity 71 | .activityText__5d473{ 72 | color: $TextFillColorSecondary; 73 | strong{ 74 | font-weight: normal; 75 | } 76 | } 77 | } 78 | 79 | // Remove Nitro decorations 80 | // Avatar decorations 81 | // This also removes them from user profile popouts and modals, but not cozy chat. 82 | .avatarDecoration__44b0c{ 83 | display: var(--fluent-show-nitro-decorations); 84 | } 85 | // Member list background 86 | .nameplated__91a9d{ 87 | .container__4bbc6{ 88 | display: var(--fluent-show-nitro-decorations); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/modules/main/toolbar/_search.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .chat_f75fb0 .search__49676{ 2 | margin: 0 4px 0 0; 3 | .searchBar__97492{ 4 | width: 60px; 5 | height: 32px; 6 | background-color: transparent; 7 | background-position: center; 8 | background-repeat: no-repeat; 9 | background-size: 20px; 10 | border-radius: 4px; 11 | cursor: pointer; 12 | transition: background-color $AnimationFadeInOut; 13 | &:hover{ 14 | background-color: $ControlFillColorSecondary; 15 | transition: background-color $AnimationFadeInOut; 16 | } 17 | .public-DraftEditorPlaceholder-root, 18 | .icon__97492{ 19 | display: none; 20 | } 21 | .icon__97492{ 22 | margin-top: 2px; 23 | } 24 | } 25 | 26 | // Icon when not active 27 | .search__97492:not(.focused__97492):not(.open__97492)::before{ 28 | content: "\e721"; // Search 29 | width: 60px; 30 | font-size: 16px; 31 | @include FontIconFluent; 32 | text-align: center; 33 | line-height: 32px; 34 | vertical-align: middle; 35 | position: absolute; 36 | } 37 | 38 | .search__97492.focused__97492 .searchBar__97492, 39 | .search__97492.open__97492 .searchBar__97492, 40 | .search__97492.popout-open .searchBar__97492{ 41 | width: 232px; 42 | height: 32px; 43 | margin: 0; 44 | background-color: $ControlFillColorDefault; 45 | background-image: none; 46 | cursor: text; 47 | border: 1px solid $ControlStrokeColorDefault; 48 | border-bottom-width: 2px; 49 | border-radius: 4px; 50 | } 51 | .search__97492.focused__97492 .searchBar__97492{ 52 | background-color: $ControlFillColorInputActiveBrush; 53 | border-color: $ControlStrokeColorDefault; 54 | border-bottom-color: $AccentBase; 55 | } 56 | 57 | .search__97492.open__97492 .icon__97492, 58 | .search__97492.focused__97492 .icon__97492, 59 | .search__97492.open__97492 .searchBar__97492 .public-DraftEditorPlaceholder-root, 60 | .search__97492.focused__97492 .searchBar__97492 .public-DraftEditorPlaceholder-root{ 61 | display: block; 62 | } 63 | .search__97492 .DraftEditor-root .DraftEditor-editorContainer{ 64 | height: 26px; 65 | } 66 | .search__97492 .searchBar__97492 .DraftEditor-root{ 67 | width: 100%; 68 | color: $TextFillColorPrimary; 69 | @include TypeBody; 70 | .public-DraftEditor-content{ 71 | overflow-x: hidden; 72 | } 73 | .public-DraftEditor-content, 74 | .public-DraftEditorPlaceholder-root{ 75 | padding: 3px 8px 0; 76 | box-sizing: border-box; 77 | } 78 | } 79 | // Add margin to textarea when open/focused so text doesn't appear over the search/clear icon 80 | .search__97492.open__97492 .searchBar__97492 .DraftEditor-root, 81 | .search__97492.focused__97492 .searchBar__97492 .DraftEditor-root{ 82 | margin-right: 32px; 83 | } 84 | .seasearch__97492rch .searchBar__97492 .public-DraftEditorPlaceholder-root{ 85 | color: $TextFillColorSecondary; 86 | @include TypeBody; 87 | } 88 | 89 | span[class^="searchAnswer-"], 90 | span[class^="searchFilter-"]{ 91 | background-color: $TextFillColorPrimary; 92 | color: #000; 93 | font-weight: normal; 94 | } 95 | 96 | // Search/clear icon in textarea 97 | .iconContainer_fea832{ 98 | // Flip eyeglass icon so the handle is the same side as the Fluent icon 99 | &:first-child{ 100 | transform: rotateZ(90deg); 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/modules/main/toolbar/_toolbar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .title_f75fb0, // Normal toolbar 2 | .theme-dark .container__9293f{ // Browse channels toolbar 3 | padding: 0 0 0 8px; 4 | &.themed__9293f{ 5 | background-color: transparent; 6 | border: 0; 7 | } 8 | // Channel & MOTD 9 | // Re-colour channel symbol 10 | .children__9293f{ 11 | // Gradient at end of MOTD field 12 | &::after{ 13 | display: none; 14 | } 15 | .iconWrapper__9293f svg{ 16 | color: $TextFillColorPrimary; 17 | } 18 | } 19 | // Channel name 20 | .title__9293f{ 21 | @include TypeBodyStrong 22 | } 23 | 24 | // MOTD 25 | .dot__9293f{ 26 | color: $TextFillColorDisabled; 27 | } 28 | .topic__6ec1a{ 29 | color: $TextFillColorPrimary; 30 | @include TypeBody; 31 | } 32 | 33 | // Add some margin to the caret when in fullscreen thread view 34 | .caret__9293f{ 35 | margin-right: 8px; 36 | } 37 | } 38 | 39 | // Toolbar 40 | .theme-dark .toolbar__9293f{ 41 | gap: 4px; 42 | margin-right: 4px; 43 | // Using these selectors so there are fewer conflicts in the voice screen 44 | div[role=button]:not(.iconLayout_fea832), // :not excludes the search/clear button in the search bar 45 | button[type=button]{ 46 | width: 60px; 47 | height: 32px; 48 | border-radius: 4px; 49 | transition: background-color $AnimationFadeInOut; 50 | &:hover{ 51 | background-color: $ControlFillColorSecondary; 52 | transition: background-color $AnimationFadeInOut; 53 | } 54 | > svg{ // Non-EN position fix 55 | position: absolute; 56 | top: 4px; 57 | left: 20px; 58 | width: 20px; 59 | } 60 | 61 | // Selected 62 | &.selected__9293f{ 63 | background-color: $AccentFillColorSecondary; 64 | &::before{ 65 | color: $TextOnAccentFillColorPrimary; 66 | } 67 | .count__03d4d{ 68 | color: $TextOnAccentFillColorPrimary !important; // Override inline 69 | } 70 | } 71 | // Toggled (mute channel) 72 | &[aria-checked="true"]{ 73 | color: $SystemFillColorCritical; 74 | } 75 | } 76 | .count__03d4d{ 77 | position: absolute; 78 | top: 2px; 79 | left: 38px; 80 | @include TypeCaption; 81 | } 82 | .iconBadge__9293f{ 83 | width: 16px; 84 | height: 3px; 85 | right: 22px; 86 | bottom: 0; 87 | border-radius: 2px; 88 | background-color: $SystemFillColorCritical; 89 | z-index: -1; 90 | } 91 | } 92 | 93 | // Icon replacements 94 | html[lang^="en-"].theme-dark .toolbar__9293f{ 95 | .iconWrapper__9293f{ 96 | &::before{ 97 | @include FontIconFluent; 98 | width: 60px; 99 | position: absolute; 100 | font-size: 16px; 101 | line-height: 32px; 102 | text-align: center; 103 | display: block; 104 | } 105 | // Remove default icon 106 | .icon__9293f, 107 | .controlIcon-35oS15{ 108 | display: none; 109 | } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/modules/main/voice/_voice.scss: -------------------------------------------------------------------------------- 1 | // DEBUG: 2022-06-04 - Useful debug snippets to help with theming 2 | // Force display voice screen elements (toolbars) 3 | // .root_bfe55a.idle_bfe55a *{ 4 | // opacity: 1 !important; 5 | // transform: unset !important; 6 | // } 7 | // Draw debug borders on top toolbar buttons 8 | // .toolbar__9293f{ 9 | // border: 1px solid red; 10 | // div[role=button], 11 | // button[type=button]{ 12 | // border: 1px solid green; 13 | // } 14 | // } 15 | 16 | .theme-dark .wrapper_cb9592{ 17 | background-color: #000; 18 | border-radius: 8px 0 0 0; 19 | 20 | // Attach borders in call 21 | ~ .content_f75fb0{ 22 | border-radius: 0; 23 | } 24 | 25 | // Round top-left corner 26 | .callContainer_cb9592{ 27 | border-radius: 8px 0 0 0; 28 | } 29 | 30 | // Quality indicator 31 | .liveQualityIndicator__30845{ 32 | .liveLarge_a7acae{ 33 | width: auto !important; // Override conflict 34 | height: 16px !important; // Override conflict 35 | font-weight: normal; 36 | } 37 | } 38 | 39 | // Buttons bar 40 | .buttonSection__1405b{ 41 | border-radius: 4px; 42 | } 43 | .attachedCaretButtonContainer_f1ceac{ 44 | .button__201d5[aria-label="More Options"]{ 45 | svg{ 46 | display: block !important; 47 | } 48 | } 49 | } 50 | 51 | // User tiles 52 | .tile__2f4f7{ 53 | background-color: $SubtleFillColorTertiary; 54 | border: 1px solid transparent; 55 | border-radius: 4px; 56 | // Only apply border colour to users 57 | &.tile__2f4f7:hover{ 58 | border-color: $ControlStrokeColorDefault; 59 | } 60 | .overlayTitle__2f4f7{ 61 | background-color: $ControlOnImageFillColorDefault; 62 | border-radius: 4px; 63 | } 64 | // Status button 65 | .status__2f4f7{ 66 | background-color: $ControlOnImageFillColorDefault; 67 | border-radius: 4px; 68 | &:hover{ 69 | background-color: $ControlOnImageFillColorSecondary; 70 | } 71 | &:active{ 72 | background-color: $ControlOnImageFillColorTertiary; 73 | } 74 | } 75 | } 76 | .participantsButton__211d1{ 77 | background-color: $ControlOnImageFillColorDefault; 78 | border: 1px solid $ControlStrokeColorDefault; 79 | &:hover{ 80 | background-color: $ControlOnImageFillColorSecondary; 81 | } 82 | &:active{ 83 | background-color: $ControlOnImageFillColorTertiary; 84 | } 85 | } 86 | } 87 | 88 | // Icon replacements 89 | // Top toolbar (excludes Inbox button) 90 | html[lang^="en-"].theme-dark .toolbar__9293f{ 91 | .button__201d5{ 92 | &::before{ 93 | @include FontIconFluent; 94 | width: 62px; 95 | position: absolute; 96 | font-size: 16px; 97 | line-height: 36px; 98 | text-align: center; 99 | display: block; 100 | } 101 | // Remove default icon 102 | svg{ 103 | display: none; 104 | } 105 | } 106 | } 107 | // Bottom toolbar (mic/speaker mute, leave, activity buttons) 108 | // NOTE - 2023-03-07: Discord removed aria-label from activity and react buttons, so only remove default icons from buttons WITH an aria-label set 109 | html[lang^="en-"].theme-dark .wrapper__1405b .button__201d5[aria-label]{ 110 | &::before{ 111 | @include FontIconFluent; 112 | width: 62px; 113 | position: absolute; 114 | font-size: 16px; 115 | line-height: 36px; 116 | text-align: center; 117 | display: block; 118 | } 119 | svg{ 120 | display: none; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/modules/misc/_loading.scss: -------------------------------------------------------------------------------- 1 | // Adopted from https://codepen.io/rbv912/pen/dYbqLQ 2 | 3 | @keyframes fluent-loading-circle{ 4 | 0% { transform: rotate(0deg); } 5 | 100% { transform: rotate(360deg); } 6 | } 7 | @keyframes fluent-loading-circle-progress-1 { 8 | 0% { transform: rotate(0deg); } 9 | 100% { transform: rotate(220deg); } 10 | } 11 | @keyframes fluent-loading-circle-progress-2 { 12 | 0% { transform: rotate(-140deg); } 13 | 50% { transform: rotate(-160deg); } 14 | 100% { transform: rotate(140deg); } 15 | } 16 | 17 | .spinner__0b5bb{ 18 | .inner__0b5bb:not(.pulsingEllipsis__0b5bb){ 19 | display: block; 20 | animation: fluent-loading-circle 1s linear infinite; 21 | .item__0b5bb:first-child{ 22 | width: 32px; 23 | height: 32px; 24 | position: absolute; 25 | 26 | background-color: transparent; 27 | clip: rect(0, 32px, 32px, 16px); 28 | animation: fluent-loading-circle-progress-1 2s linear infinite; 29 | &::after{ 30 | content: ""; 31 | position: absolute; 32 | height: 32px; 33 | width: 32px; 34 | top: 0; 35 | left: 0; 36 | clip: rect(0, 32px, 32px, 16px); 37 | border: 3px solid #FFF; 38 | border-radius: 50%; 39 | animation: fluent-loading-circle-progress-2 2s linear infinite; 40 | box-sizing: border-box; 41 | } 42 | } 43 | .item__0b5bb:last-child{ 44 | display: none; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/modules/mixins/_elevation.scss: -------------------------------------------------------------------------------- 1 | @mixin Elevation0{ 2 | // Layers, Card pressed 3 | // Flat stroke 4 | } 5 | 6 | @mixin Elevation2{ 7 | // Standard control 8 | // Gradient stroke 9 | } 10 | 11 | @mixin Elevation8{ 12 | // Card rest 13 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.13); 14 | } 15 | 16 | @mixin Elevation16{ 17 | // Tooltip 18 | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.26); 19 | } 20 | 21 | @mixin Elevation32{ 22 | // Flyout 23 | box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.14); 24 | } 25 | 26 | @mixin Elevation128{ 27 | // Dialog 28 | box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.37), 0px 2px 21px rgba(0, 0, 0, 0.37); 29 | } 30 | 31 | 32 | @mixin ElevationShellInactive{ 33 | box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.37), 0px 2px 10.67px rgba(0, 0, 0, 0.37); 34 | } 35 | @mixin ElevationShellActive{ 36 | box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.56), 0px 2px 21px rgba(0, 0, 0, 0.55); 37 | } 38 | -------------------------------------------------------------------------------- /src/modules/mixins/_font.scss: -------------------------------------------------------------------------------- 1 | @mixin FontNormal{ 2 | font-family: var(--font-primary); 3 | } 4 | 5 | @mixin FontMonospace{ 6 | font-family: var(--font-code); 7 | } 8 | 9 | @mixin FontIconFluent{ 10 | font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"; 11 | } 12 | 13 | @mixin FontIconHoloLens{ 14 | font-family: "HoloLens MDL2 Assets"; 15 | } 16 | -------------------------------------------------------------------------------- /src/modules/mixins/_type.scss: -------------------------------------------------------------------------------- 1 | // Type ramp ordered smalled to largest 2 | @mixin TypeCaption{ 3 | // Variant: Small 4 | font-size: 12px; 5 | font-weight: 400; 6 | line-height: 16px; 7 | } 8 | 9 | @mixin TypeBody{ 10 | // Varient: Text 11 | font-feature-settings: 'rclt' 0; 12 | font-size: 14px; 13 | font-style: normal; 14 | font-weight: 400; 15 | line-height: 20px; 16 | 17 | } 18 | 19 | @mixin TypeBodyStrong{ 20 | // Varient: Text, Semibold 21 | font-feature-settings: 'fina' 1, 'init' 1; 22 | font-size: 14px; 23 | font-weight: 600; 24 | line-height: 20px; 25 | } 26 | 27 | @mixin TypeBodyLarge{ 28 | // Varient: Text 29 | font-feature-settings: 'fina' 1, 'init' 1; 30 | font-size: 18px; 31 | font-weight: 400; 32 | line-height: 24px; 33 | } 34 | 35 | @mixin TypeSubtitle{ 36 | // Varient: Display, Semibold 37 | font-size: 20px; 38 | font-weight: 600; 39 | line-height: 28px; 40 | } 41 | 42 | @mixin TypeTitle{ 43 | // Varient: Display, Semibold 44 | font-size: 28px; 45 | font-weight: 600; 46 | line-height: 36px; 47 | } 48 | 49 | @mixin TypeTitleLarge{ 50 | // Varient: Display, Semibold 51 | font-size: 40px; 52 | font-weight: 600; 53 | line-height: 52px; 54 | } 55 | 56 | @mixin TypeDisplay{ 57 | // Varient: Display, Semibold 58 | font-size: 68px; 59 | font-weight: 600; 60 | line-height: 92px; 61 | } 62 | -------------------------------------------------------------------------------- /src/modules/modals/_activities.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .root__52f07{ 2 | margin-top: 0; 3 | background-color: transparent; 4 | 5 | .shelfTopBackground__52f07{ 6 | display: none; 7 | } 8 | 9 | // Header 10 | .headerTextContainer__52f07{ 11 | align-items: unset; 12 | } 13 | .activityShelfTitle__52f07{ 14 | justify-content: unset; 15 | .heading-xl-extrabold__8ed5c{ 16 | @include TypeSubtitle; 17 | } 18 | } 19 | .text-sm-normal__95a78{ 20 | margin-top: 4px; 21 | } 22 | 23 | // Content 24 | .scrollTierBackground__35455{ 25 | background-color: $LayerFillColorAlt; 26 | } 27 | 28 | .activityItem__18da2{ 29 | background-color: $CardBackgroundFillColorDefault; 30 | } 31 | .activityTitleText__18da2{ 32 | @include TypeBodyStrong; 33 | } 34 | .activitySubtitleText__18da2{ 35 | @include TypeCaption; 36 | } 37 | .activityTag__18da2{ 38 | padding: 2px 8px; 39 | background-color: $SystemFillColorSolidNeutralBackground; 40 | @include TypeCaption; 41 | color: $TextFillColorSecondary !important; // Override inline 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/modules/modals/_incoming_call.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .root__2dbe1 { 2 | min-height: auto !important; // Modal is longer than necessary 3 | background-color: $SolidBackgroundFillColorBase; 4 | border: 1px solid $SurfaceStrokeColorDefault; 5 | border-radius: 8px; 6 | justify-content: space-between; 7 | 8 | .icon__2dbe1{ 9 | margin: 0 0 16px 0; 10 | } 11 | 12 | .titleGroup__2dbe1{ 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: space-between; 16 | .title__2dbe1{ 17 | @include TypeSubtitle; 18 | } 19 | .subtitle__2dbe1{ 20 | margin-bottom: 16px; 21 | @include TypeBody; 22 | color: $TextFillColorPrimary; 23 | } 24 | } 25 | .actionButton__2dbe1{ 26 | .red_f1ceac{ 27 | padding: 16px 14px 14px 16px; // Hack to fix whatever the hell Discord has done here 28 | background-color: transparent; 29 | border: 1px solid $SystemFillColorCritical; 30 | &:hover{ 31 | background-color: lighten($SystemFillColorCriticalBackground, 20%); 32 | color: $TextFillColorPrimary; 33 | &::before{ 34 | color: $TextFillColorPrimary; 35 | } 36 | } 37 | } 38 | .green_f1ceac{ 39 | background-color: $AccentFillColorDefault; 40 | &:hover{ 41 | background-color: $AccentFillColorSecondary; 42 | } 43 | &:active{ 44 | background-color: $AccentFillColorTertiary; 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/modules/modals/_leave_server_feedback.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .header__6c12c{ 3 | @include TypeSubtitle; 4 | text-align: left; 5 | } 6 | 7 | .problemInfo__6c12c{ 8 | .root__66e7e{ 9 | background-color: $CardBackgroundFillColorDefault; 10 | border: 1px solid $CardStrokeColorDefault; 11 | border-radius: 4px; 12 | } 13 | .option__66e7e{ 14 | &:hover{ 15 | background-color: $CardBackgroundFillColorSecondary; 16 | } 17 | } 18 | .text__66e7e{ 19 | @include TypeBody; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/modules/modals/_lightbox.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal_b0827a{ 2 | border: 0 !important; // Removes border that is set for all modals 3 | 4 | .downloadLink_aa8ea9{ 5 | color: $TextFillColorSecondary; 6 | @include TypeBody; 7 | opacity: 1; 8 | } 9 | } 10 | 11 | .theme-dark .zoomedCarouselModalRoot_f74404.root__49fc1{ 12 | background-color: transparent; 13 | border: 0; 14 | 15 | .downloadLink_aa8ea9{ 16 | color: $TextFillColorSecondary; 17 | @include TypeBody; 18 | opacity: 1; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/modules/modals/_link_gate.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modalContent__468a6{ 2 | h2{ 3 | @include TypeSubtitle; 4 | text-align: left; 5 | text-transform: none; 6 | } 7 | .body__468a6{ 8 | @include TypeBody; 9 | text-align: left; 10 | strong{ 11 | color: $AccentTextFillColorPrimary; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/modules/modals/_modal.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | // Backdrop 3 | .backdrop__1a911{ 4 | background: $SmokeFillColorDefault !important; // Override inline 5 | opacity: 1 !important; // Override inline 6 | } 7 | 8 | // Body 9 | .root__49fc1{ 10 | background-color: $SolidBackgroundFillColorBase; 11 | border: 1px solid $SurfaceStrokeColorDefault; 12 | border-radius: 8px; 13 | } 14 | 15 | // Headers 16 | .header__49fc1, // eg. notification settings 17 | // .header__6dc27, // eg. change password 18 | // .header-1kWa4s, // eg. change username 19 | .header-1R3myj{ // eg. edit email 20 | padding: 24px; 21 | background-color: $LayerFillColorAlt; 22 | border-radius: 8px 8px 0 0; 23 | align-items: unset; 24 | .heading-lg-semibold__58a54, // eg. notification settings 25 | .title__6dc27, // eg. change password 26 | .title_b404ff, // eg. change username 27 | .title_ad198f{ // eg. edit email 28 | @include TypeSubtitle; 29 | text-align: left; 30 | } 31 | .text-md-normal__6e567, // eg. notification settings 32 | .subtitle__6dc27, // eg. change password 33 | .subtitle_b404ff, // eg. change username 34 | .subtitle_ad198f{ // eg. edit email 35 | @include TypeBody; 36 | color: $TextFillColorPrimary; 37 | text-align: left; 38 | } 39 | 40 | // Remove divider line in notification settings 41 | &.separator__49fc1{ 42 | box-shadow: none; 43 | } 44 | } 45 | 46 | // Content 47 | .content__49fc1{ 48 | padding-right: 24px !important; 49 | padding-left: 24px; 50 | background-color: $LayerFillColorAlt; 51 | border-bottom: 1px solid $CardStrokeColorDefault; 52 | border-radius: 0; 53 | 54 | video{ 55 | display: none; 56 | } 57 | } 58 | 59 | // Footer 60 | .footer__49fc1{ 61 | padding: 24px; 62 | background-color: transparent; 63 | 64 | // Remove divider line in notification settings 65 | &.footerSeparator__49fc1{ 66 | box-shadow: none; 67 | } 68 | 69 | // Add gap between buttons 70 | .button__201d5{ 71 | margin-left: 8px; 72 | } 73 | } 74 | } 75 | 76 | .theme-dark{ 77 | // Special cases 78 | // Remove images from headers 79 | // screenshare 80 | .art_e1cc86{ 81 | display: none; 82 | } 83 | // Verify email 84 | .headerImage_a62824{ 85 | display: none; 86 | } 87 | // NOTE: 2023-06-13 - Style fix for the verify email modal which uses the wrong class for the actions div 88 | .headerImage_a62824 ~ div .content__49fc1{ 89 | background-color: transparent; 90 | } 91 | .buttons_ce7406{ 92 | margin-top: 16px; 93 | flex-direction: row; 94 | button{ 95 | flex-grow: 1; 96 | width: 50%; 97 | } 98 | button:first-child{ 99 | margin-right: 8px; 100 | } 101 | } 102 | // Enter phone number 103 | .phoneField_a0c54f{ 104 | .countryButton_a0c54f{ 105 | min-width: 64px; 106 | } 107 | } 108 | 109 | // Upload sound 110 | .headerContainer_a52f04{ 111 | margin-bottom: 0; 112 | .header_a52f04{ 113 | @include TypeSubtitle; 114 | text-align: left; 115 | } 116 | } 117 | 118 | // Event info modal 119 | .card__88264{ 120 | background-color: $LayerFillColorDefault; 121 | border: 1px solid $CardStrokeColorDefault; 122 | border-radius: 8px; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /src/modules/modals/_quality_rating.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .header__49fc1 .heading-xl-extrabold__8ed5c{ 3 | @include TypeSubtitle; 4 | text-align: left; 5 | } 6 | .ratingBody__6c12c{ 7 | @include TypeBody; 8 | color: $TextFillColorPrimary; 9 | text-align: left; 10 | } 11 | 12 | .emojis__6c12c{ 13 | width: auto; 14 | margin: 32px 0 0 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/modules/modals/_quickswitcher.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .quickswitcher_ac6cb0{ 2 | height: 100%; 3 | background-color: $SolidBackgroundFillColorBase; 4 | 5 | &::before{ 6 | content: "Quickswitcher"; 7 | margin-bottom: 16px; 8 | @include TypeSubtitle; 9 | color: $TextFillColorPrimary; 10 | } 11 | 12 | .input_ac6cb0{ 13 | height: 32px; 14 | background-color: transparent; 15 | border: 1px solid; 16 | border-bottom-width: 2px; 17 | border-radius: 4px; 18 | @include TypeBody; 19 | background-color: $ControlFillColorDefault; 20 | color: $TextFillColorSecondary; 21 | border-color: $ControlStrokeColorDefault; 22 | &:hover{ 23 | border-color: $ControlStrokeColorSecondary; 24 | } 25 | &:focus{ 26 | background-color: $ControlFillColorInputActiveBrush; 27 | color: $TextFillColorPrimary; 28 | border-color: $ControlStrokeColorDefault; 29 | border-bottom-color: $AccentBase; 30 | } 31 | &::placeholder{ 32 | color: $TextFillColorSecondary; 33 | } 34 | } 35 | 36 | // Scroll content 37 | .scroller_ac6cb0 { 38 | max-height: unset; 39 | margin-top: 12px; 40 | margin-right: -4px; 41 | background-color: transparent; 42 | overflow-y: auto !important; // Override inline 43 | } 44 | 45 | .header__71961{ 46 | @include TypeBodyStrong; 47 | color: $TextFillColorPrimary; 48 | text-transform: none; 49 | } 50 | 51 | .result__71961{ 52 | &[aria-selected=true]{ 53 | background-color: $SubtleFillColorSecondary; 54 | &::before{ 55 | content: ""; 56 | width: 3px; 57 | height: 16px; 58 | position: absolute; 59 | left: 0; 60 | top: 8px; 61 | background-color: $AccentFillColorDefault; 62 | border-radius: 2px; 63 | } 64 | } 65 | 66 | .name__71961{ 67 | @include TypeBody; 68 | color: $TextFillColorPrimary; 69 | line-height: 32px; 70 | .username__71961, 71 | .note__71961{ 72 | margin: 0; 73 | opacity: 1; 74 | @include TypeCaption; 75 | color: $TextFillColorSecondary; 76 | text-transform: none; 77 | } 78 | } 79 | .miscContainer_ac6cb0{ 80 | opacity: 1; 81 | @include TypeBody; 82 | color: $TextFillColorTertiary; 83 | } 84 | } 85 | 86 | // Footer 87 | .protip_ac6cb0{ 88 | .pro__30cbe{ 89 | display: none; 90 | } 91 | .tip__30cbe{ 92 | @include TypeCaption; 93 | color: $TextFillColorSecondary; 94 | opacity: 1; 95 | } 96 | .autocompleteQuerySymbol_ac6cb0{ 97 | background-color: transparent; 98 | @include FontMonospace; 99 | } 100 | } 101 | 102 | // Remove 'tutorial' 103 | .tutorial__73f2a{ 104 | display: none; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/modules/modals/_reactors.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container_cc2dff{ 2 | .scroller_cc2dff{ 3 | background-color: $CardBackgroundFillColorDefault; 4 | } 5 | 6 | .reactionDefault_cc2dff{ 7 | &:hover{ 8 | background-color: $SubtleFillColorSecondary; 9 | } 10 | } 11 | .reactionSelected_cc2dff{ 12 | position: relative; 13 | background-color: $SubtleFillColorSecondary; 14 | &::before{ 15 | content: ""; 16 | width: 3px; 17 | height: 12px; 18 | position: absolute; 19 | left: 0; 20 | top: 7px; 21 | background-color: $AccentFillColorDefault; 22 | border-radius: 2px; 23 | } 24 | } 25 | 26 | .reactors_cc2dff{ 27 | background-color: transparent; 28 | } 29 | 30 | .name_cc2dff{ 31 | @include TypeBody; 32 | color: $TextFillColorPrimary; 33 | } 34 | .username_cc2dff{ 35 | opacity: 1; 36 | @include TypeBody; 37 | color: $TextFillColorSecondary; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/modules/modals/_screen_share.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .art_e1cc86{ 3 | display: none; 4 | &~form{ 5 | .headerText_e1cc86{ 6 | align-self: baseline; 7 | @include TypeSubtitle; 8 | } 9 | .headerDescription_e1cc86{ 10 | padding: 0; 11 | @include TypeBody; 12 | color: $TextFillColorPrimary; 13 | text-align: left; 14 | } 15 | 16 | div[style*="position: relative;"]{ 17 | background-color: $CardBackgroundFillColorDefault; 18 | } 19 | 20 | // App/screen selection 21 | .selected-1i-g6T{ 22 | .sourceThumbnail-ERDcZE{ 23 | box-shadow: inset 0 0 0 2px $AccentBase; 24 | } 25 | } 26 | .sourceName_a2de16{ 27 | @include TypeBody; 28 | } 29 | 30 | // Stream settings 31 | .card__4bb93{ 32 | height: 32px; 33 | padding: 0 8px; 34 | background-color: $ControlFillColorDefault; 35 | border: 0; 36 | border-radius: 4px; 37 | color: $TextFillColorSecondary; 38 | .channelInfo__248f3, 39 | .ellipsisText__885c5{ 40 | @include TypeBody; 41 | color: $TextFillColorPrimary; 42 | } 43 | .changeButton__885c5{ 44 | margin-right: -8px; 45 | } 46 | } 47 | 48 | .qualitySettingsContainer_c6d3dc{ 49 | padding: 0; 50 | border: 0; 51 | } 52 | 53 | .group_d76384{ 54 | .selectorButton_c6d3dc{ 55 | background-color: transparent; 56 | border: 1px solid $ControlStrokeColorOnAccentDefault; 57 | 58 | &:hover{ 59 | background-color: $ControlFillColorSecondary; 60 | } 61 | &.selectorButtonSelected_c6d3dc{ 62 | background-color: $AccentFillColorDefault; 63 | color: $TextOnAccentFillColorPrimary; 64 | &:hover{ 65 | background-color: $AccentFillColorSecondary; 66 | } 67 | } 68 | &.selectorButtonPremiumRequired__9df5b{ 69 | cursor: not-allowed; 70 | &:hover{ 71 | background-color: transparent; 72 | } 73 | } 74 | } 75 | } 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/modules/modals/_server_terms.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .guildSidebar_b962dc{ 3 | background: $SolidBackgroundFillColorBase; 4 | .guildDescription_b962dc{ 5 | color: $TextFillColorPrimary; 6 | } 7 | } 8 | .modal_b962dc{ 9 | background-color: $CardBackgroundFillColorDefault; 10 | border-radius: 0; 11 | // Remove waving hand GIF 12 | .animationAndSparklesContainer_b962dc{ 13 | display: none; 14 | } 15 | // Headers 16 | .header_b962dc{ 17 | @include TypeSubtitle; 18 | text-align: left; 19 | } 20 | .subheader_b962dc{ 21 | @include TypeBody; 22 | color: $TextFillColorPrimary; 23 | text-align: left; 24 | } 25 | hr.divider_b962dc{ 26 | display: none; 27 | } 28 | 29 | .termsFieldBody_d48a51{ 30 | background-color: $CardBackgroundFillColorDefault; 31 | border: 1px solid $CardStrokeColorDefault; 32 | border-radius: 4px; 33 | } 34 | .termsRowContent_d48a51{ 35 | @include TypeBody; 36 | color: $TextFillColorPrimary; 37 | } 38 | 39 | // Accept checkbox 40 | .checkboxWrapper_f525d3{ 41 | .input_f525d3{ 42 | // Yes Discord, it was completely necessary to in-line the dimensions... 43 | width: 18px !important; // Override inline 44 | height: 18px !important; // Override inline 45 | &::before{ 46 | top: 0; 47 | left: 0; 48 | } 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/modules/modals/_threads.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | // To find: Hover on channel with active threads and click 'See All' on the popout 3 | .modal__9a792{ 4 | background-color: $SolidBackgroundFillColorBase !important; // Override inline 5 | } 6 | 7 | .container_d9c882{ 8 | background-color: transparent; 9 | } 10 | 11 | // Header 12 | .header_d9c882{ 13 | height: unset; 14 | min-height: unset; 15 | padding: 24px 24px 0 24px; 16 | background-color: transparent; 17 | // Remove icon 18 | .threadIcon_d9c882{ 19 | display: none; 20 | } 21 | // Remove divider 22 | .divider_d9c882{ 23 | display: none; 24 | } 25 | // Remove spacer 26 | .spacer_d9c882{ 27 | display: none; 28 | } 29 | } 30 | 31 | // Thread list 32 | .list_c441f0{ 33 | padding: 0 24px; 34 | padding-right: 24px !important; 35 | } 36 | // Sub headers 37 | .sectionHeader_c441f0{ 38 | @include TypeBodyStrong; 39 | text-transform: none; 40 | margin-top: 24px; 41 | } 42 | // List item 43 | .container__6764b{ 44 | height: auto; 45 | padding: 12px; 46 | background-color: $SubtleFillColorSecondary; 47 | border: 1px solid $SubtleFillColorSecondary; 48 | border-radius: 4px; 49 | &:hover{ 50 | background-color: $SubtleFillColorTertiary; 51 | } 52 | &:active{ 53 | .threadNameLine__6764b span{ 54 | color: $TextFillColorSecondary; 55 | } 56 | 57 | } 58 | 59 | // Thread title 60 | .threadNameLine__6764b{ 61 | @include TypeBodyStrong; 62 | span{ 63 | color: $TextFillColorPrimary; 64 | } 65 | } 66 | // Subtext 67 | .subtext__6764b{ 68 | margin-top: 8px; 69 | @include TypeCaption; 70 | color: $TextFillColorSecondary !important; 71 | } 72 | } 73 | } 74 | 75 | // Redundancy in the moderator's Active Threads modal 🙃 76 | .theme-dark{ 77 | // To find: Be a moderator in a server with active threads. Open 'Active Threads' from the server dropdown 78 | .container_a8217b{ 79 | background-color: transparent; 80 | } 81 | .header_a8217b{ 82 | height: unset; 83 | min-height: unset; 84 | padding: 24px; 85 | background-color: transparent; 86 | .threadIcon_a8217b{ 87 | display: none; 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/modules/modals/_user.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | // Avatar 3 | .avatar_ec3b75{ 4 | svg circle{ 5 | display: none; 6 | } 7 | } 8 | 9 | // Body 10 | .overlayBackground_c69a7b{ 11 | border-radius: 4px; 12 | } 13 | 14 | // Tabs 15 | .tabBarContainer_b9fccc{ 16 | margin-bottom: 20px; 17 | border: 0; 18 | } 19 | 20 | // Section headers 21 | .userInfoSectionHeader_a24910{ 22 | @include TypeBodyStrong; 23 | text-transform: none; 24 | } 25 | 26 | // Connected accounts 27 | .connectedAccountContainer_e6abe8{ 28 | padding: 8px; 29 | .connectedAccountNameText_e6abe8{ 30 | @include TypeBody; 31 | } 32 | .anchor_edefb8{ 33 | text-decoration: none; 34 | &::before{ 35 | content: "\E8A7"; 36 | color: $TextFillColorPrimary; 37 | @include FontIconFluent; 38 | } 39 | svg{ 40 | display: none; 41 | } 42 | } 43 | } 44 | 45 | // Mutual servers/friends 46 | .listRow__9d78f{ 47 | border: 1px solid transparent; 48 | &:hover{ 49 | background-color: $ControlFillColorDefault; 50 | border-color: $ControlStrokeColorDefault; 51 | border-radius: 4px; 52 | } 53 | .listAvatar__9d78f{ 54 | border-radius: 50%; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/modules/popouts/_account.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .userPopoutOuter_c69a7b{ 2 | // Remove style from context menu in user popout 3 | .menu_c1e9c4.menu_ad5fac{ 4 | background-color: transparent; 5 | border: 0; 6 | box-shadow: none; 7 | &::before{ 8 | content: unset; 9 | } 10 | 11 | .separator_c1e9c4{ 12 | display: none; 13 | } 14 | 15 | .item_c1e9c4{ 16 | // Remove icon 17 | .iconContainerLeft_c1e9c4{ 18 | display: none; 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/modules/popouts/_app_launcher.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .contentWrapper__9c62c{ 2 | background: $MicaBackgroundFillColorBase; 3 | backdrop-filter: blur(16px); 4 | // Search 5 | .container_a45028.medium_a45028{ 6 | background-color: transparent; 7 | input.input_a45028{ 8 | height: 32px; 9 | padding: 0 8px; 10 | border: 1px solid; 11 | border-bottom-width: 2px; 12 | border-color: $ControlStrokeColorDefault; 13 | border-radius: 4px; 14 | @include TypeBody; 15 | background-color: $ControlFillColorDefault; 16 | color: $TextFillColorSecondary; 17 | &:hover{ 18 | border-color: $ControlStrokeColorSecondary; 19 | } 20 | &:focus{ 21 | background-color: $ControlFillColorInputActiveBrush; 22 | color: $TextFillColorPrimary; 23 | border-color: $ControlStrokeColorDefault; 24 | border-bottom-color: $AccentBase; 25 | } 26 | &::placeholder{ 27 | color: $TextFillColorSecondary; 28 | } 29 | } 30 | .iconLayout_a45028 { 31 | position: absolute; 32 | top: 6px; 33 | right: 8px; 34 | 35 | // Home friends table seach bar 36 | &.medium_a45028{ 37 | width: 22px; 38 | height: 22px; 39 | .iconContainer_a45028{ 40 | width: 16px; 41 | height: 16px; 42 | } 43 | } 44 | } 45 | } 46 | 47 | // Cards 48 | .container_cb32c7{ 49 | background-color: $ControlFillColorDefault; 50 | border-width: 1px; 51 | border-style: outset; 52 | border-color: $ControlElevationBorder; 53 | border-radius: 4px; 54 | &:hover{ 55 | background-color: $ControlFillColorSecondary; 56 | } 57 | } 58 | 59 | // App "profile" 60 | .container__7bdb0{ 61 | 62 | background-color: transparent; 63 | .profileAndVideoContainer_e80fe9{ 64 | padding: 0 8px; 65 | border: 0; 66 | } 67 | .overviewContainerNoVideo__95856{ 68 | background-color: transparent; 69 | padding: 0; 70 | } 71 | 72 | // List of commands 73 | .contentContainer_c94584{ 74 | padding: 0 24px; 75 | } 76 | .commandContainer_c94584{ 77 | background-color: $ControlFillColorDefault; 78 | border-width: 1px; 79 | border-style: outset; 80 | border-color: $ControlElevationBorder; 81 | border-radius: 4px; 82 | } 83 | .command_c94584{ 84 | background-color: transparent; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/modules/popouts/_channel.scss: -------------------------------------------------------------------------------- 1 | // Voice activity 2 | .theme-dark .container__56cd1 { 3 | background: $SolidBackgroundFillColorSecondary; 4 | backdrop-filter: blur(16px); 5 | border: 1px solid $SurfaceStrokeColorFlyout; 6 | border-radius: 8px; 7 | @include Elevation32; 8 | 9 | // Remove channel icon 10 | .channelIcon__45e38{ 11 | display: none; 12 | } 13 | .channelName__41380{ 14 | @include TypeBodyStrong; 15 | color: $TextFillColorPrimary !important; // Override inline 16 | } 17 | // Channel user count 18 | .container_b1bfd4{ 19 | background-color: transparent; 20 | svg{ 21 | display: none; 22 | } 23 | .userCountText_b1bfd4{ 24 | color: $TextFillColorSecondary; 25 | } 26 | } 27 | 28 | // Timebar 29 | .bar_c8b06d { 30 | height: 3px; 31 | background-color: $ControlStrokeColorDefault; 32 | margin: 0 8px; 33 | } 34 | .barInner_c8b06d{ 35 | height: 3px; 36 | background-color: $AccentBase; 37 | } 38 | // Timecode 39 | .text_c8b06d{ 40 | @include TypeCaption; 41 | } 42 | } 43 | 44 | // Active thread 45 | .popout__76f04{ 46 | background: $SolidBackgroundFillColorSecondary; 47 | backdrop-filter: blur(16px); 48 | border: 1px solid $SurfaceStrokeColorFlyout; 49 | border-radius: 8px; 50 | @include Elevation32; 51 | .title__76f04{ 52 | @include TypeBodyStrong; 53 | color: $TextFillColorPrimary !important; // Override inline 54 | text-transform: none; 55 | } 56 | 57 | .row__76f04:hover{ 58 | background-color: $AccentBase; 59 | color: $TextOnAccentFillColorPrimary; 60 | .timestamp__76f04{ 61 | color: $TextOnAccentFillColorPrimary; 62 | } 63 | } 64 | } 65 | 66 | // Stream preview 67 | .theme-dark .streamPreview__6da2d{ 68 | background: $SolidBackgroundFillColorSecondary; 69 | backdrop-filter: blur(16px); 70 | border: 1px solid $SurfaceStrokeColorFlyout; 71 | border-radius: 8px; 72 | @include Elevation32; 73 | 74 | .previewContainer__6da2d{ 75 | background-color: transparent; 76 | } 77 | 78 | // Remove tip 79 | .protip__6da2d{ 80 | display: none; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/modules/popouts/_inbox.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .recentMentionsPopout__95796{ 2 | // NOTE - 2022-06-08: Calculation is based on: 100vh - titlebar - toolbar - (margin-top + margin-bottom) 3 | max-height: calc(100vh - 32px - 48px - 16px) !important; // Override inline 4 | margin: 8px; 5 | background: $MicaBackgroundFillColorBase; 6 | backdrop-filter: blur(16px); 7 | border: 1px solid $SurfaceStrokeColorDefault; 8 | border-radius: 8px; 9 | 10 | .header_ab6641 { 11 | background-color: transparent; 12 | // Tabs 13 | .topPill_b3f026{ 14 | .tab_ab6641 { 15 | padding-left: 0; 16 | padding-right: 0; 17 | margin-right: 16px; 18 | color: $TextFillColorPrimary; 19 | border-radius: 0; 20 | &:hover{ 21 | background-color: transparent; 22 | color: $TextFillColorSecondary; 23 | } 24 | 25 | &.active_f0cd33 { 26 | background-color: transparent; 27 | color: $AccentTextFillColorPrimary; 28 | &::before{ 29 | content: ""; 30 | position: absolute; 31 | bottom: 0px; 32 | width: 100%; 33 | height: 2px; 34 | background-color: $AccentLight3; 35 | border-radius: 2px; 36 | } 37 | &:hover{ 38 | color: $TextFillColorSecondary; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | 45 | // No messages 46 | .iconContainer_d404a3{ 47 | display: none; 48 | } 49 | .header_d404a3{ 50 | margin-bottom: 24px; 51 | @include TypeBodyLarge; 52 | } 53 | 54 | // Results 55 | // Mentions 56 | // NOTE: 2023-01-04 - Mentions tab scroller uses a different class which doesn't have L/R padding 57 | .scroller__95796 { 58 | padding: 0 0 0 16px; 59 | } 60 | 61 | .container__95796, // Mentions 62 | .channel__427f0{ // Unreads 63 | padding-bottom: 16px; 64 | .channelHeader__35a7e{ 65 | top: -1px; 66 | padding-right: 16px; // Fixes dismiss buttons butting up on right side 67 | background-color: $SolidBackgroundFillColorSecondary; 68 | border-radius: 4px 4px 0 0; 69 | .guildIcon__35a7e { 70 | background-color: transparent; 71 | border-radius: 50%; 72 | } 73 | } 74 | .messageContainer__95796, // Mentions 75 | .messages__1ccd1{ // Unreads 76 | margin-left: 0; 77 | background-color: $CardBackgroundFillColorDefault; 78 | border: 1px solid $CardStrokeColorDefault; 79 | border-radius: 0 0 4px 4px; 80 | } 81 | } 82 | 83 | // Unread headers have a collapse button 84 | .channel__427f0{ 85 | .channelHeader__35a7e{ 86 | padding-left: 48px; 87 | } 88 | .collapseButton__427f0{ 89 | left: 16px; 90 | &::before{ 91 | content: "\E70D"; 92 | @include FontIconFluent; 93 | font-size: 16px; 94 | } 95 | svg{ 96 | display: none; 97 | } 98 | } 99 | } 100 | 101 | // Buttons 102 | .button__292b6 { 103 | background-color: $ControlFillColorDefault; 104 | border-width: 1px; 105 | border-style: outset; 106 | border-color: $ControlElevationBorder; 107 | border-radius: 4px; 108 | &:hover{ 109 | background-color: $ControlFillColorSecondary; 110 | } 111 | &:active{ 112 | background-color: $ControlFillColorTertiary; 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/modules/popouts/_noise_cancellation.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .noiseCancellationPopout_e131a9{ 2 | background-color: $SolidBackgroundFillColorBase; 3 | border: 1px solid $SurfaceStrokeColorDefault; 4 | border-radius: 8px; 5 | 6 | .title__0d850{ 7 | @include TypeBodyLarge; 8 | } 9 | .note__0d850{ 10 | padding-top: 12px; 11 | color: $TextFillColorPrimary; 12 | @include TypeBody; 13 | } 14 | 15 | // Mic test 16 | .title__8f8f8{ 17 | text-transform: none; 18 | color: $TextFillColorSecondary; 19 | @include TypeBody; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/modules/popouts/_pinned_messages.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .messagesPopoutWrap__45690{ 2 | max-height: calc(100vh - 32px - 48px - 12px) !important; // Fixes window jumping when alt-tabbed 3 | background: $MicaBackgroundFillColorBase; 4 | backdrop-filter: blur(16px); 5 | border: 1px solid $SurfaceStrokeColorDefault; 6 | border-radius: 8px; 7 | 8 | .header__45690{ 9 | background-color: transparent; 10 | box-shadow: none; 11 | h1{ 12 | @include TypeBodyStrong; 13 | } 14 | } 15 | 16 | .messagesPopout__45690 { 17 | padding-top: 0; 18 | } 19 | 20 | // Empty 21 | .emptyPlaceholder__45690{ 22 | .image__45690{ 23 | display: none; 24 | } 25 | .body__45690{ 26 | white-space: unset; 27 | @include TypeBody; 28 | } 29 | } 30 | 31 | // Message 32 | .messageGroupWrapper__45690{ 33 | background-color: $CardBackgroundFillColorDefault; 34 | border: 1px solid $CardStrokeColorDefault; 35 | border-radius: 4px; 36 | } 37 | 38 | // Footer 39 | .footer__45690{ 40 | display: none; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/modules/popouts/_quick_select.scss: -------------------------------------------------------------------------------- 1 | // Voice call > Region select 2 | .theme-dark .quickSelectPopout_ebaca5 { 3 | background: $MicaBackgroundFillColorBase; 4 | backdrop-filter: blur(16px); 5 | border: 1px solid $SurfaceStrokeColorDefault; 6 | border-radius: 8px; 7 | padding: 8px; 8 | .quickSelectPopoutOption_b852b1{ 9 | max-height: 34px; 10 | border-radius: 4px; 11 | position: relative; 12 | &:hover{ 13 | background-color: $SubtleFillColorSecondary; 14 | } 15 | &:focus{ 16 | background-color: $SubtleFillColorTertiary; 17 | } 18 | &.selected{ 19 | background-color: $SubtleFillColorSecondary; 20 | .check__5621e{ 21 | display: none; 22 | } 23 | &::before{ 24 | content: ""; 25 | width: 3px; 26 | height: 16px; 27 | position: absolute; 28 | left: 0; 29 | top: 9px; 30 | background-color: $AccentBase; 31 | border-radius: 2px; 32 | } 33 | } 34 | } 35 | .regionSelectName__5621e{ 36 | height: auto; 37 | @include TypeBody; 38 | color: $TextFillColorPrimary; 39 | text-align: left; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/modules/popouts/_roles.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container__3dde2{ 2 | background-color: $SolidBackgroundFillColorBase; 3 | border: 1px solid $SurfaceStrokeColorDefault; 4 | border-radius: 8px; 5 | 6 | // Search 7 | .container__33507 { 8 | background-color: transparent; 9 | border-radius: 0; 10 | } 11 | 12 | // Items 13 | .item__97e86{ 14 | &:hover{ 15 | background-color: $SubtleFillColorSecondary; 16 | box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; 17 | } 18 | } 19 | 20 | // No results 21 | .empty__97e86{ 22 | &::before{ 23 | content: "\E25B"; 24 | @include FontIconFluent; 25 | font-size: 32px; 26 | color: $TextFillColorDisabled; 27 | } 28 | h4,div{ 29 | display: none; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/modules/popouts/_rtc.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container__13b2a{ 2 | background-color: $SolidBackgroundFillColorBase; 3 | border: 1px solid $SurfaceStrokeColorDefault; 4 | border-radius: 8px; 5 | } 6 | -------------------------------------------------------------------------------- /src/modules/popouts/_search.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container__55c99{ 2 | background: $MicaBackgroundFillColorBase; 3 | backdrop-filter: blur(16px); 4 | border: 1px solid $SurfaceStrokeColorDefault; 5 | border-radius: 8px; 6 | 7 | .header__56fec{ 8 | @include TypeBodyStrong; 9 | color: $TextFillColorPrimary; 10 | text-transform: none; 11 | } 12 | 13 | .option__56fec{ 14 | margin: 1px 10px; 15 | height: 32px; 16 | border: 1px solid transparent; 17 | border-radius: 4px; 18 | &:hover{ 19 | background-color: $SubtleFillColorSecondary; 20 | border-color: $SubtleFillColorSecondary; 21 | } 22 | &::after{ 23 | display: none; 24 | } 25 | 26 | .filter__56fec, 27 | .answer__56fec, 28 | .displayedNick__56fec, 29 | .displayUsername__56fec, 30 | .nonText__56fec, 31 | strong{ 32 | @include TypeBody; 33 | } 34 | 35 | .filter__56fec, 36 | .displayedNick__56fec, 37 | strong{ 38 | color: $TextFillColorPrimary; 39 | @include TypeBody; 40 | } 41 | .answer__56fec, 42 | .displayUsername__56fec{ 43 | color: $TextFillColorSecondary; 44 | @include TypeBody; 45 | } 46 | } 47 | .resultsGroup__56fec .resultsGroup__56fec, 48 | .resultsGroup__56fec .searchLearnMore__56fec{ 49 | top: 16px; 50 | } 51 | 52 | // "Search for..." header 53 | .queryContainer__55c99{ 54 | background-color: $CardStrokeColorDefault; 55 | queryText__55c99{ 56 | @include TypeBody; 57 | color: $TextFillColorPrimary; 58 | text-transform: none; 59 | strong::before, 60 | strong::after{ 61 | content: "\""; 62 | } 63 | } 64 | } 65 | 66 | 67 | // Calendar 68 | .react-datepicker{ 69 | background-color: transparent; 70 | .react-datepicker__navigation{ 71 | 72 | } 73 | // inc/dec month buttons 74 | &__navigation.react-datepicker__navigation--previous{ 75 | width: 32px; 76 | height: 32px; 77 | top: 12px; 78 | right: 64px; 79 | left: unset; 80 | background-image: none; 81 | transform: none; 82 | text-indent: unset; 83 | border: 0; 84 | border-radius: 4px; 85 | &::before{ 86 | content: "\EDDB"; // CaretUpSolid8 87 | @include FontIconFluent; 88 | color: $TextFillColorSecondary; 89 | } 90 | &:hover{ 91 | background-color: $SubtleFillColorSecondary; 92 | } 93 | span{ 94 | display: none; 95 | } 96 | } 97 | &__navigation.react-datepicker__navigation--next{ 98 | width: 32px; 99 | height: 32px; 100 | top: 12px; 101 | right: 32px; 102 | left: unset; 103 | background-image: none; 104 | transform: none; 105 | text-indent: unset; 106 | border: 0; 107 | border-radius: 4px; 108 | &::before{ 109 | content: "\EDDC"; // CaretDownSolid8 110 | @include FontIconFluent; 111 | color: $TextFillColorSecondary; 112 | } 113 | &:hover{ 114 | background-color: $SubtleFillColorSecondary; 115 | } 116 | span{ 117 | display: none; 118 | } 119 | } 120 | 121 | 122 | // Header 123 | &__header{ 124 | background-color: transparent; 125 | border: 0; 126 | text-align: left; 127 | } 128 | // Current month 129 | &__current-month{ 130 | color: $TextFillColorPrimary; 131 | @include TypeBodyStrong; 132 | text-transform: none; 133 | border: 0; 134 | } 135 | // Calendar 136 | // weekdays 137 | &__day-name{ 138 | color: $TextFillColorPrimary; 139 | @include TypeBodyStrong; 140 | text-transform: none; 141 | } 142 | // Week 143 | &__week .react-datepicker__day{ 144 | @include TypeBody; 145 | line-height: 40px; // override 146 | border: 0; 147 | border-radius: 50%; 148 | &:hover{ 149 | background-color: $SubtleFillColorSecondary; 150 | } 151 | &--outside-month{ 152 | background-color: transparent; 153 | } 154 | &--today{ 155 | // background-color: $AccentTextFillColorPrimary; 156 | box-shadow: inset 0 0 0 1px $AccentTextFillColorPrimary; 157 | color: $AccentTextFillColorPrimary; 158 | } 159 | &--selected{ 160 | 161 | border-color: $AccentTextFillColorPrimary; 162 | &::after{ 163 | content: unset; 164 | } 165 | } 166 | &--keyboard-selected:not(--selected){ 167 | background-color: $AccentTextFillColorPrimary; 168 | } 169 | &--disabled{ 170 | background-color: transparent; 171 | color: $TextFillColorDisabled; 172 | &:hover{ 173 | background-color: transparent; 174 | color: $TextFillColorDisabled; 175 | } 176 | &::before{ 177 | content: ""; 178 | width: 1px; 179 | height: 28px; 180 | top: 8px; 181 | left: 20px; 182 | position: absolute; 183 | background-color: $TextFillColorDisabled; 184 | transform: rotate(45deg); 185 | } 186 | } 187 | } 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /src/modules/popouts/_soundboard.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .picker__09f65{ 2 | background: $MicaBackgroundFillColorBase; 3 | backdrop-filter: blur(16px); 4 | border: 1px solid $SurfaceStrokeColorDefault; 5 | border-radius: 8px; 6 | 7 | // Search box 8 | .header__0856d{ 9 | box-shadow: none; 10 | } 11 | // Volume control 12 | .settingsClickArea__61424{ 13 | width: 32px; 14 | height: 32px; 15 | border-width: 1px; 16 | border-style: outset; 17 | border-color: $ControlElevationBorder; 18 | border-radius: 4px; 19 | &:hover{ 20 | background-color: $ControlFillColorSecondary; 21 | } 22 | &:active{ 23 | background-color: $ControlFillColorTertiary; 24 | } 25 | svg{ 26 | padding: 6px; 27 | } 28 | } 29 | 30 | // Servers 31 | .categoryList_a1e0e0{ 32 | background-color: $SolidBackgroundFillColorBase; 33 | } 34 | 35 | // Sounds 36 | // Section header 37 | .sectionHeader__61424{ 38 | .sectionTitle__61424{ 39 | @include TypeBodyStrong; 40 | text-transform: none; 41 | color: $TextFillColorPrimary; 42 | } 43 | } 44 | 45 | // Sound 46 | .soundButton__9be63{ 47 | background-color: $ControlFillColorDefault; 48 | border-width: 1px; 49 | border-style: outset; 50 | border-color: $ControlElevationBorder; 51 | border-radius: 4px; 52 | color: $TextFillColorPrimary; 53 | &:hover{ 54 | background-color: $ControlFillColorSecondary; 55 | } 56 | &:active{ 57 | background-color: $ControlFillColorTertiary; 58 | } 59 | .ssoundName__9be63{ 60 | @include TypeBody; 61 | } 62 | .buttonOverlayBackground__9be63{ 63 | background-color: $ControlFillColorInputActiveBrush; 64 | opacity: 1; 65 | } 66 | } 67 | 68 | // keybind reminder 69 | .keybindHint__46002{ 70 | margin: 8px; 71 | padding: 8px 16px; 72 | background-color: $SystemFillColorAttentionBackground; 73 | border: 1px solid $CardStrokeColorDefault; 74 | border-radius: 4px; 75 | .warningIcon__46002{ 76 | color: $SystemFillColorAttention; 77 | // Wrong icon used for this type of info bar, so rotate it 180deg to change it into an 'i' 78 | transform: rotate(180deg); 79 | } 80 | .keybindHintText__46002{ 81 | @include TypeBody; 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/modules/popouts/_threads.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .browser_d98031{ 2 | background: $MicaBackgroundFillColorBase; 3 | backdrop-filter: blur(16px); 4 | border: 1px solid $SurfaceStrokeColorDefault; 5 | border-radius: 8px; 6 | 7 | // header 8 | .header_d9c882{ 9 | height: unset; 10 | min-height: unset; 11 | padding: 12px 24px; 12 | 13 | background-color: transparent; 14 | .threadIcon_d9c882{ 15 | display: none; 16 | } 17 | .title_d9c882{ 18 | @include TypeSubtitle; 19 | } 20 | } 21 | 22 | // Thread list 23 | .list_c441f0{ 24 | padding: 0 24px !important; // Override inline 25 | 26 | .sectionHeader_c441f0{ 27 | @include TypeBodyStrong; 28 | color: $TextFillColorPrimary !important; // Override inline 29 | text-transform: capitalize; 30 | } 31 | } 32 | 33 | // Thread 34 | .container__6764b{ 35 | background-color: $CardBackgroundFillColorDefault; 36 | border-radius: 4px; 37 | .threadNameLine__6764b{ 38 | margin-bottom: 4px; 39 | @include TypeBody; 40 | .threadName__6764b{ 41 | color: $TextFillColorPrimary; 42 | } 43 | } 44 | .subtext__6764b{ 45 | @include TypeCaption; 46 | color: $TextFillColorSecondary; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/modules/popouts/_user.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .userPopoutOuter_c69a7b{ 2 | @include Elevation32; 3 | 4 | // 'plebium' mode 5 | .userProfileInnerThemedNonPremium_c69a7b{ 6 | background: $AcrylicBackgroundFillColorBase; 7 | border: 1px solid $SurfaceStrokeColorDefault; 8 | border-radius: 8px; 9 | .overlayBackground_c69a7b{ 10 | background: $LayerOnAcrylicFillColorDefult; 11 | border-radius: 4px; 12 | } 13 | } 14 | 15 | .overlayBackground_c69a7b{ 16 | border-radius: 4px; 17 | } 18 | 19 | // Only display scroll bar when we need it 20 | .scroller_d2b491{ 21 | padding: 0 12px !important; 22 | overflow-y: auto !important; 23 | } 24 | 25 | // Remove nitro promotion 26 | .upsell-27kXsw{ 27 | display: none; 28 | } 29 | 30 | // Section title 31 | .title_c4a579, 32 | .headerText__2ef49{ // 'Deprecated' spotify title 33 | @include TypeBodyStrong; 34 | text-transform: none; 35 | } 36 | 37 | // Roles 38 | .role__48c1c{ 39 | padding: 4px 4px 4px 0px; 40 | background-color: transparent; 41 | border: 1px solid $ControlStrokeColorDefault; 42 | border-radius: 12px; 43 | @include TypeCaption; 44 | &.addButton__48c1c{ 45 | padding: 4px; 46 | } 47 | } 48 | 49 | // Remove double border on message box 50 | .messageInputContainer_f2c0a8{ 51 | border: 0; 52 | } 53 | 54 | // Spotify/games 55 | .assetsLargeImage__2ef49{ 56 | border-radius: 4px; 57 | } 58 | .timeBarUserPopoutV2_c1d9fd{ 59 | .bar_c8b06d{ 60 | height: 3px; 61 | background-color: $ControlStrokeColorDefault; 62 | } 63 | .barInner_c8b06d{ 64 | height: 3px; 65 | background-color: $AccentBase; 66 | } 67 | 68 | // Timecode 69 | .text_c8b06d{ 70 | @include TypeCaption; 71 | color: $TextFillColorTertiary; 72 | } 73 | } 74 | // Remove buttons we can't interact with 75 | .disabledButtonWrapper__201d5{ 76 | display: none; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/modules/settings/_channel_settings.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .contentColumn__23e6b{ 2 | // Permissions 3 | // Fix header 4 | &#permissions-tab{ 5 | .title_b717a1{ 6 | @include TypeTitle; 7 | } 8 | 9 | // Advanced permissions 10 | // Header 11 | .advancedModeDivider__4914c ~ .button__201d5{ 12 | margin-top: 32px; 13 | .contents__201d5{ 14 | h2{ 15 | @include TypeBodyStrong; 16 | } 17 | } 18 | } 19 | // Sidebar 20 | .sidebarScrollable_ff90b2{ 21 | .scroller_ff90b2{ 22 | background-color: transparent; 23 | } 24 | } 25 | 26 | // Permissions list 27 | // Fix width 28 | .sidebarScrollable_ff90b2+.content_ff90b2{ 29 | max-width: calc(1000px - 232px); 30 | } 31 | 32 | // The permissions 33 | .permissionsForm__0ab2c{ 34 | .flex__7c0ba.vertical_abf706{ 35 | margin-bottom: 8px; 36 | padding: 8px 16px; 37 | background-color: $CardBackgroundFillColorDefault; 38 | border: 1px solid $CardStrokeColorDefault; 39 | border-radius: 4px; 40 | h4{ 41 | @include TypeBody; 42 | line-height: 32px; 43 | } 44 | .description_ddd181{ 45 | margin-right: 100px; 46 | @include TypeCaption; 47 | } 48 | } 49 | } 50 | } 51 | 52 | // Invites 53 | // NOTE: 2023-06-17 - Cannot target Invites page 54 | } 55 | -------------------------------------------------------------------------------- /src/modules/settings/_navigation.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .sidebarRegion__23e6b{ 2 | flex: 0; 3 | } 4 | // Hide scrollbar when not required 5 | .theme-dark .sidebarRegionScroller__23e6b { 6 | background-color: transparent; 7 | } 8 | 9 | .theme-dark .sidebar__23e6b{ 10 | // NOTE: 2023-06-13 - 6px to account for the scrollbar 11 | width: calc(320px - 6px); 12 | padding: 40px 4px; 13 | 14 | .searchBar_c7e907 { 15 | margin-left: 8px; 16 | } 17 | 18 | // Section header 19 | .side_b3f026 .eyebrow_cf4812{ 20 | padding: 0 0 0 8px; 21 | @include TypeBodyStrong; 22 | color: $TextFillColorPrimary; 23 | line-height: 34px; 24 | text-transform: none; 25 | svg{ 26 | display: none; 27 | } 28 | .category__3ddc0{ 29 | @include TypeCaption; 30 | } 31 | } 32 | 33 | .side_b3f026 .item_b3f026{ 34 | padding: 0 12px 0 16px; 35 | margin-bottom: 4px; 36 | border: 1px solid transparent; 37 | border-radius: 4px; 38 | color: $TextFillColorPrimary; 39 | @include TypeBody; 40 | line-height: 34px; 41 | &:hover{ 42 | color: $TextFillColorPrimary; 43 | background-color: $SubtleFillColorSecondary; 44 | border-color: $SubtleFillColorSecondary; 45 | } 46 | // Pill 47 | &::before{ 48 | content: ""; 49 | width: 3px; 50 | height: 16px; 51 | position: absolute; 52 | top: 8px; 53 | left: 0; 54 | background-color: $AccentFillColorDefault; 55 | border-radius: 2px; 56 | transform: scaleY(0%); 57 | opacity: .3; 58 | transition: transform 167ms Cubic-bezier(0,0,0,1), 59 | opacity 167ms Cubic-bezier(0,0,0,1); 60 | } 61 | &.selected_b3f026{ 62 | background-color: $SubtleFillColorSecondary; 63 | &::before{ 64 | transform: scaleY(100%); 65 | opacity: 1; 66 | transition: transform 250ms Cubic-bezier(0.55,0.55,0,1), 67 | opacity 250ms Cubic-bezier(0.55,0.55,0,1); 68 | } 69 | } 70 | // Special cases 71 | // Remove right side Nitro icon (may differ in some regions) 72 | .premiumLabel_e681d1 svg{ 73 | display: none; 74 | } 75 | // Remove background div from nitro option 76 | .selectedBackground_e681d1{ 77 | display: none; 78 | } 79 | // Delete channel trash icon 80 | .tabBarItemContainer_c7e907{ 81 | svg{ 82 | display: none; 83 | } 84 | } 85 | } 86 | // Divider 87 | .side_b3f026 .separator_b3f026{ 88 | margin: 0 -8px; 89 | } 90 | 91 | .info__2debe{ 92 | // Make all version info match colours 93 | span{ 94 | color: $TextFillColorSecondary !important; // Override inline 95 | } 96 | &::before{ 97 | content: "Fluent Discord #{$version}"; 98 | color: $TextFillColorSecondary; 99 | font-size: 12px; 100 | line-height: 16px; 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/modules/settings/_server_settings.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .contentColumn__23e6b{ 2 | // Roles 3 | // Fix header 4 | &#roles-tab{ 5 | .title_b717a1{ 6 | @include TypeTitle; 7 | } 8 | 9 | 10 | // Advanced permissions 11 | .contentContainer__91dc3{ 12 | left: 256px; 13 | } 14 | .contentWidth_c6bf1b{ 15 | max-width: calc(1000px - 232px); 16 | } 17 | 18 | // Left 19 | .container_e29cd7{ 20 | .titleContainer_e29cd7{ 21 | padding-top: 40px; 22 | background-color: transparent; 23 | .titleText_e29cd7{ 24 | @include TypeSubtitle; 25 | text-transform: none; 26 | } 27 | } 28 | .list_e29cd7{ 29 | padding: 0 16px 96px 16px; 30 | } 31 | } 32 | // Right 33 | .header_c6bf1b{ 34 | padding-top: 40px; 35 | background-color: $CardStrokeColorDefaultSolid; 36 | .titleText__81b3e{ 37 | @include TypeSubtitle; 38 | text-transform: none; 39 | } 40 | } 41 | } 42 | 43 | 44 | // Server template 45 | // Fix header 46 | &#guild_templates-tab{ 47 | .title_b717a1{ 48 | @include TypeTitle; 49 | } 50 | } 51 | 52 | // Custom invite link 53 | // Fix header 54 | &#vanity_url-tab{ 55 | .title_b717a1{ 56 | @include TypeTitle; 57 | } 58 | } 59 | 60 | // Integrations 61 | &#integrations-tab{ 62 | .title_b717a1{ 63 | @include TypeTitle; 64 | } 65 | } 66 | 67 | // Automod 68 | // Fix card background 69 | .editCard_a25a68{ 70 | background-color: $CardBackgroundFillColorDefault; 71 | border: 1px solid $CardStrokeColorDefault; 72 | 73 | .ruleIconContainer_c5e6a1{ 74 | background-color: transparent; 75 | } 76 | // Pills 77 | .actionContainer_bc4513{ 78 | padding: 4px 8px; 79 | background-color: $SystemFillColorSolidNeutral; 80 | .actionIcon_bc4513{ 81 | color: $TextFillColorPrimary; 82 | } 83 | .actionTextHeader_bc4513{ 84 | color: $TextFillColorPrimary !important; 85 | font-weight: normal; 86 | } 87 | } 88 | 89 | 90 | .mentionLimitContainer_ed9c90, 91 | .actionContainer__6446f{ 92 | background-color: $CardBackgroundFillColorDefault; 93 | } 94 | .keywordListContainer__09e76{ 95 | margin-bottom: 0; 96 | background-color: transparent; 97 | } 98 | .collapseable__217b7{ 99 | background-color: $CardBackgroundFillColorDefault; 100 | border: 1px solid $CardStrokeColorDefault; 101 | } 102 | 103 | // Select/drop down 104 | .container_fea832{ 105 | background-color: $ControlFillColorDefault; 106 | } 107 | .resultsList__6ae25{ 108 | background: $SolidbackgroundFillColorQuarternary; 109 | border: 1px solid $SurfaceStrokeColorFlyout; 110 | border-radius: 4px; 111 | } 112 | 113 | // Textarea 114 | .keywordTextArea__4546e{ 115 | background-color: $ControlFillColorDefault; 116 | border: 1px solid; 117 | border-bottom-width: 2px; 118 | border-color: $ControlStrokeColorDefault; 119 | border-radius: 4px; 120 | &:hover{ 121 | border-color: $ControlStrokeColorSecondary; 122 | } 123 | &:focus{ 124 | background-color: $ControlFillColorInputActiveBrush; 125 | color: $TextFillColorPrimary; 126 | border-color: $ControlStrokeColorDefault; 127 | border-bottom-color: $AccentBase; 128 | } 129 | } 130 | } 131 | 132 | // Audit Log 133 | // NOTE: 2023-06-17 - Cannot target Audit log page 134 | 135 | // Server boot status 136 | // Fix title 137 | &#guild_premium-tab{ 138 | .title_b717a1 { 139 | @include TypeTitle; 140 | } 141 | } 142 | 143 | // Members 144 | // NOTE: 2023-06-17 - Cannot target Members page 145 | 146 | // Invites 147 | // NOTE: 2023-06-17 - Cannot target Invites page 148 | 149 | // Edge case fixes 150 | // Channel Settings - Overview 151 | // Fixes no spacing between channel name text box and Bitrate sections 152 | .channel-settings-overview{ 153 | .marginBottom40_fd297e{ 154 | margin-bottom: 24px; 155 | } 156 | } 157 | 158 | // Always display the emoji name textbox 159 | .emojiInput_e7d73e{ 160 | opacity: 1; 161 | } 162 | .emojiAliasPlaceholder_e7d73e{ 163 | display: none; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/modules/settings/_settings.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .layer__960e4{ 2 | .contentRegion__23e6b{ 3 | background-color: $LayerFillColorDefault; 4 | border-top: 1px solid $CardStrokeColorDefault; 5 | border-left: 1px solid $CardStrokeColorDefault; 6 | border-radius: 7px 0 0 0; 7 | } 8 | .contentColumnDefault__23e6b{ 9 | padding: 32px; 10 | } 11 | .contentRegionShownSidebar__23e6b{ 12 | // justify-content: center; 13 | } 14 | .contentColumn__23e6b, 15 | .customColumn__23e6b{ 16 | max-width: 1000px; 17 | padding: 44px 32px; 18 | } 19 | 20 | // Close button 21 | .closeButton_c2b141{ 22 | width: 32px; 23 | height: 32px; 24 | flex: 0 0 32px; 25 | background-color: $ControlFillColorDefault; 26 | border: 1px solid $ControlStrokeColorDefault; 27 | border-radius: 4px; 28 | svg path{ 29 | fill: $TextFillColorPrimary; 30 | } 31 | } 32 | .keybind_c2b141{ 33 | @include TypeBody; 34 | color: $TextFillColorPrimary; 35 | } 36 | 37 | // Title 38 | .sectionTitle__7bffb{ 39 | .title_b717a1{ 40 | margin-bottom: 32px; 41 | @include TypeTitle; 42 | } 43 | } 44 | 45 | // Setting container 46 | .container__0d850{ 47 | margin-bottom: 8px; 48 | padding: 18px 24px; 49 | background-color: $CardBackgroundFillColorDefault; 50 | border: 1px solid $CardStrokeColorDefault; 51 | border-radius: 4px; 52 | 53 | .title__0d850{ 54 | @include TypeBody; 55 | } 56 | .note__0d850{ 57 | margin-right: 64px; 58 | } 59 | .description_ddd181, .labelDescriptor_ddd181{ 60 | @include TypeCaption; 61 | color: $TextFillColorSecondary; 62 | } 63 | 64 | .divider__46c3b{ 65 | display: none; 66 | } 67 | } 68 | } 69 | // Pages transition 70 | @keyframes fluent-settings-pages-transition{ 71 | from{ 72 | transform: translateY(120px); 73 | opacity: 0; 74 | } 75 | to{ 76 | transform: translateY(0); 77 | opacity: 1; 78 | } 79 | } 80 | .contentColumn__23e6b > *{ 81 | animation: fluent-settings-pages-transition 250ms cubic-bezier(0, 0, 0, 1); 82 | } 83 | 84 | // Layer transition 85 | // Also applies to Edit server profile 86 | @keyframes fluent-layer-transition{ 87 | from{ 88 | transform: translateY(120px); 89 | } 90 | to{ 91 | transform: translateY(0); 92 | } 93 | } 94 | .animating__960e4{ 95 | animation: fluent-layer-transition 250ms cubic-bezier(0,0,0,1); 96 | } 97 | -------------------------------------------------------------------------------- /src/modules/third_party/_hljs.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .hljs{ 3 | display: block; 4 | overflow-x: auto; 5 | padding: 0.5em; 6 | background-color: $LayerFillColorDefault; 7 | } 8 | .hljs, 9 | .hljs-tag, 10 | .hljs-subst { 11 | color: #f8f8f2 12 | } 13 | .hljs-strong, 14 | .hljs-emphasis { 15 | color: #a8a8a2 16 | } 17 | .hljs-bullet, 18 | .hljs-quote, 19 | .hljs-number, 20 | .hljs-regexp, 21 | .hljs-literal, 22 | .hljs-link { 23 | color: #ae81ff 24 | } 25 | .hljs-code, 26 | .hljs-title, 27 | .hljs-section, 28 | .hljs-selector-class { 29 | color: #a6e22e 30 | } 31 | .hljs-strong { 32 | font-weight: bold 33 | } 34 | .hljs-emphasis { 35 | font-style: italic 36 | } 37 | .hljs-keyword, 38 | .hljs-selector-tag, 39 | .hljs-name, 40 | .hljs-attr { 41 | color: #f92672 42 | } 43 | .hljs-symbol, 44 | .hljs-attribute { 45 | color: #66d9ef 46 | } 47 | .hljs-params, 48 | .hljs-class .hljs-title { 49 | color: #f8f8f2 50 | } 51 | .hljs-string, 52 | .hljs-type, 53 | .hljs-built_in, 54 | .hljs-builtin-name, 55 | .hljs-selector-id, 56 | .hljs-selector-attr, 57 | .hljs-selector-pseudo, 58 | .hljs-addition, 59 | .hljs-variable, 60 | .hljs-template-variable { 61 | color: #e6db74 62 | } 63 | .hljs-comment, 64 | .hljs-deletion, 65 | .hljs-meta { 66 | color: #75715e 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/modules/ui/_buttons.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .button__201d5{ 2 | border-radius: 4px; 3 | @include TypeBody; 4 | 5 | // Sizes 6 | &.sizeMin__201d5, // eg. Add server 'back' buttons 7 | &.sizeSmall__201d5, 8 | &.sizeMedium__201d5, // eg. Create new server 9 | &.sizeLarge__201d5, // eg. Add a keybind 10 | &.sizeXlarge__6885c{ // eg. Untrusted link modal 11 | min-width: 120px; 12 | min-height: 32px; 13 | height: 32px; 14 | } 15 | 16 | // Filled buttons 17 | &.lookFilled__201d5{ 18 | // Brand buttons 19 | &.colorBrand__201d5, 20 | &.colorGreen__201d5, // Join server terms modal 21 | &.colorBrandNew__8872c{ // eg. User Settings > Accessibility > TTS Rate 22 | background-color: $AccentFillColorDefault; 23 | border-width: 1px; 24 | border-style: inset; 25 | border-color: $AccentControlElevationBorder; 26 | color: $TextOnAccentFillColorPrimary; 27 | &:hover{ 28 | background-color: $AccentFillColorSecondary; 29 | } 30 | &:active{ 31 | background-color: $AccentFillColorTertiary; 32 | } 33 | } 34 | // Grey 35 | &.colorPrimary__201d5, 36 | &.buttonColor_dfbe6b, // "Example Button" in User Settings>Profile 37 | &.buttonColor__7b3e8{ // Voice screen invite button 38 | background-color: $ControlFillColorDefault; 39 | border-width: 1px; 40 | border-style: outset; 41 | border-color: $ControlElevationBorder; 42 | color: $TextFillColorPrimary; 43 | &:hover{ 44 | background-color: $ControlFillColorSecondary; 45 | } 46 | &:active{ 47 | background-color: $ControlFillColorTertiary; 48 | } 49 | } 50 | 51 | // Red 52 | &.colorRed__201d5{ 53 | background-color: $SystemFillColorCriticalBackground; 54 | color: $SystemFillColorCritical; 55 | &:hover{ 56 | background-color: lighten($SystemFillColorCriticalBackground, 20%); 57 | color: $TextFillColorPrimary; 58 | } 59 | &:active{ 60 | background-color: lighten($SystemFillColorCriticalBackground, 40%); 61 | color: $TextOnAccentFillColorPrimary; 62 | } 63 | } 64 | 65 | // Disabled 66 | // eg. Add game popout 67 | &:disabled{ 68 | background-color: $ControlFillColorDisabled; 69 | color: $TextFillColorDisabled; 70 | pointer-events: none; 71 | } 72 | } 73 | 74 | // Outlined 75 | &.lookOutlined__201d5{ 76 | &.colorBrand__201d5{ // eg. Request Data 77 | border-color: $ControlStrokeColorDefault; 78 | color: $TextFillColorPrimary; 79 | &:hover{ 80 | background-color: $ControlFillColorSecondary; 81 | } 82 | &:active{ 83 | background-color: $ControlFillColorTertiary; 84 | } 85 | } 86 | &.colorRed__201d5{ 87 | border-color: $SystemFillColorCritical; 88 | color: $SystemFillColorCritical; 89 | &:hover{ 90 | background-color: lighten($SystemFillColorCriticalBackground, 20%); 91 | color: $TextFillColorPrimary; 92 | } 93 | &:active{ 94 | background-color: lighten($SystemFillColorCriticalBackground, 40%); 95 | color: $TextFillColorPrimary; 96 | } 97 | } 98 | } 99 | 100 | // Blank 101 | &.lookBlank__201d5{ // eg. Add server 'back' buttons 102 | color: $TextFillColorPrimary; 103 | &.backButton__78f69{ 104 | background-color: $ControlFillColorDefault; 105 | border-width: 1px; 106 | border-style: outset; 107 | border-color: $ControlElevationBorder; 108 | color: $TextFillColorPrimary; 109 | &:hover{ 110 | background-color: $ControlFillColorSecondary; 111 | } 112 | &:active{ 113 | background-color: $ControlFillColorTertiary; 114 | } 115 | } 116 | } 117 | 118 | // Link button 119 | &.lookLink__201d5{ // eg. Reveal email button 120 | background-color: $ControlFillColorDefault; 121 | border-width: 1px; 122 | border-style: outset; 123 | border-color: $ControlElevationBorder; 124 | color: $TextFillColorPrimary; 125 | &:hover{ 126 | background-color: $ControlFillColorSecondary; 127 | .contents__201d5{ 128 | background-image: none; 129 | } 130 | } 131 | &:active{ 132 | background-color: $ControlFillColorTertiary; 133 | } 134 | } 135 | 136 | // Button with loading ellipses (Server Settings > Save changes) 137 | &.submitting_e90879{ 138 | .spinner_e90879{ 139 | display: flex; 140 | } 141 | } 142 | 143 | // Animations 144 | .buttonShine_fb742e{ 145 | display: none; 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /src/modules/ui/_context_menu.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .menu_c1e9c4{ 2 | min-width: 280px; 3 | background: $AcrylicBackgroundFillColorDefault; 4 | border: 1px solid $SurfaceStrokeColorDefault; 5 | border-radius: 8px; 6 | @include Elevation32; 7 | position: relative; 8 | 9 | &::before{ 10 | content: ""; 11 | width: 100%; 12 | height: 100%; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | backdrop-filter: blur(8px); 17 | border-radius: 8px; 18 | } 19 | 20 | .scroller_c1e9c4{ 21 | padding: 4px 8px; 22 | max-height: calc(100vh - 64px); 23 | } 24 | 25 | // Separators 26 | .separator_c1e9c4{ 27 | margin: 10px 4px; 28 | border-bottom-color: $DividerStrokeColorDefault; 29 | } 30 | 31 | // Item 32 | .item_c1e9c4{ 33 | min-height: 34px; 34 | margin: 2px 0 2px -4px; 35 | padding: 4px 12px; 36 | border-radius: 4px; 37 | @include TypeBody; 38 | color: $TextFillColorPrimary; 39 | transition: background-color $AnimationFadeInOut; 40 | &.focused_c1e9c4{ 41 | background-color: $SubtleFillColorSecondary; 42 | transition: background-color $AnimationFadeInOut; 43 | } 44 | &.colorDanger_c1e9c4{ 45 | color: $SystemFillColorCritical; 46 | } 47 | &.disabled_c1e9c4{ 48 | color: $TextFillColorDisabled; 49 | opacity: 1; 50 | } 51 | 52 | // Icons 53 | &::before{ 54 | padding-right: 12px; 55 | @include FontIconFluent; 56 | font-size: 16px; 57 | } 58 | 59 | // Remove subtext on Spotify menu items 60 | &[id*="spotify"], 61 | &[id*="listen"]{ 62 | .subtext_c1e9c4{ 63 | display: none; 64 | } 65 | } 66 | 67 | // Remove left margin from 'Upload file' option 68 | .optionName__77820{ 69 | margin: 0; 70 | } 71 | 72 | // Fix font size in upload menu 73 | .optionLabel__77820{ 74 | @include TypeBody; 75 | } 76 | 77 | // Items with subtext 78 | .subtext_c1e9c4{ 79 | margin-top: 0; 80 | @include TypeCaption; 81 | color: $TextFillColorSecondary; 82 | strong{ 83 | font-weight: normal; 84 | } 85 | } 86 | 87 | // Remove Discord icons, unless it's a checkbox 88 | &:not([role="menuitemcheckbox"]):not([role="menuitemradio"]):not([id^="message-add-reaction"]){ 89 | .icon_c1e9c4{ 90 | display: none; 91 | } 92 | } 93 | // Remove icons from upload/attach menu 94 | .optionIcon__77820{ 95 | display: none; 96 | } 97 | } 98 | 99 | // Emoji items 100 | .button_f563df{ 101 | width: 24px; 102 | height: 24px; 103 | background-color: transparent; 104 | &.focused_f563df{ 105 | background-color: $SubtleFillColorSecondary; 106 | box-shadow: none; 107 | } 108 | .icon_f563df{ 109 | width: 18px; 110 | height: 18px; 111 | 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/modules/ui/_form.scss: -------------------------------------------------------------------------------- 1 | // Radio groups 2 | .theme-dark div[role=radiogroup]{ 3 | background-color: $SystemFillColorAttentionBackground; 4 | border: 1px solid $CardStrokeColorDefault; 5 | border-radius: 4px; 6 | .item__001a7{ 7 | margin-bottom: 0; 8 | border: 1px solid transparent; 9 | border-radius: 4px; 10 | &.itemFilled__001a7{ 11 | background-color: transparent; 12 | } 13 | &[aria-checked=true]{ 14 | background-color: transparent; 15 | &:hover{ 16 | background-color: transparent; 17 | } 18 | } 19 | 20 | // Privacy & Safety 21 | // Remove coloured bars on left side 22 | .radioBar__001a7{ 23 | border: 0; 24 | } 25 | 26 | .info__001a7{ 27 | grid-gap: 0; 28 | .text-md-medium_a84e09{ 29 | @include TypeBody; 30 | } 31 | 32 | // Fixes for create channel modal 33 | .radioText-3Mv1MY{ 34 | color: $TextFillColorPrimary; 35 | &.size16-rrJ6ag{ 36 | @include TypeBodyStrong; 37 | } 38 | &.size12-oc4dx4{ 39 | @include TypeBody; 40 | } 41 | } 42 | // Fixes for Privacy settings 43 | .text-md-medium_a84e09{ 44 | @include TypeBodyStrong; 45 | color: $TextFillColorPrimary; 46 | } 47 | .text-sm-normal__95a78{ 48 | @include TypeCaption; 49 | color: $TextFillColorSecondary; 50 | } 51 | } 52 | } 53 | } 54 | 55 | // Toggle switch 56 | .theme-dark .container__87bf1{ 57 | background-color: transparent !important; // Override inline 58 | svg{ 59 | display: none; 60 | } 61 | } 62 | .input__87bf1{ 63 | width: 40px; 64 | height: 20px; 65 | margin: 0; 66 | background-color: $ControlAltFillColorSecondary; 67 | border: 1px solid $ControlStrongFillColorDefault; 68 | border-radius: 10px; 69 | appearance: none; 70 | opacity: 1; 71 | &::before{ 72 | content: ""; 73 | width: 12px; 74 | height: 12px; 75 | position: absolute; 76 | top: 3px; 77 | left: 3px; 78 | background-color: $TextFillColorSecondary; 79 | border-radius: 6px; 80 | } 81 | &:hover{ 82 | background-color: $ControlAltFillColorTertiary; 83 | &::before{ 84 | transform: scale(1.167); 85 | transition: left 187ms cubic-bezier(0.55, 0.55, 0, 1); 86 | } 87 | } 88 | &:checked{ 89 | background-color: $AccentTextFillColorPrimary; 90 | border-color: $AccentTextFillColorPrimary; 91 | &::before{ 92 | left: 24px; 93 | background-color: $TextOnAccentFillColorPrimary; 94 | transition: left 187ms cubic-bezier(0.55, 0.55, 0, 1); 95 | } 96 | } 97 | } 98 | 99 | 100 | // Checkbox (in settings UI) 101 | .theme-dark .checkboxWrapper_f525d3{ 102 | .input_f525d3, 103 | .box_f525d3{ 104 | width: 18px; 105 | height: 18px; 106 | position: relative; 107 | background-color: $ControlAltFillColorSecondary; 108 | border: 1px solid $ControlStrongFillColorDefault; 109 | border-radius: 4px; 110 | appearance: none; 111 | opacity: 1; 112 | &:hover{ 113 | background-color: $ControlAltFillColorTertiary; 114 | } 115 | svg{ 116 | display: none; 117 | } 118 | } 119 | &.checked_f525d3{ 120 | .input_f525d3, 121 | .box_f525d3{ 122 | background-color: $AccentTextFillColorPrimary !important; 123 | border-color: $AccentTextFillColorPrimary !important; 124 | &:hover{ 125 | background-color: $AccentTextFillColorSecondary !important; 126 | } 127 | &::before{ 128 | content: "\E001"; // CheckMark(Private) 129 | position: absolute; 130 | top: 3px; 131 | left: 3px; 132 | @include FontIconFluent; 133 | font-size: 16px; 134 | } 135 | } 136 | } 137 | .checkbox_f525d3{ 138 | display: none; 139 | } 140 | } 141 | // Checkbox (in context menu) 142 | .theme-dark .menu_c1e9c4 .item_c1e9c4[role="menuitemcheckbox"]{ 143 | .iconContainer_c1e9c4{ 144 | width: 18px; 145 | height: 18px; 146 | position: relative; 147 | background-color: $ControlAltFillColorSecondary; 148 | border: 1px solid $ControlStrongFillColorDefault; 149 | border-radius: 4px; 150 | 151 | svg{ 152 | display: none; 153 | } 154 | } 155 | &[aria-checked=true] .iconContainer_c1e9c4{ 156 | background-color: $AccentTextFillColorPrimary; 157 | border-color: $AccentTextFillColorPrimary; 158 | color: $TextOnAccentFillColorPrimary; 159 | &::before{ 160 | content: "\E001"; // CheckMark(Private) 161 | position: absolute; 162 | top: -1px; 163 | left: 1px; 164 | @include FontIconFluent; 165 | font-size: 16px; 166 | } 167 | } 168 | &:hover .iconContainer_c1e9c4{ 169 | background-color: $ControlAltFillColorTertiary; 170 | } 171 | &[aria-checked=true]:hover .iconContainer_c1e9c4{ 172 | background-color: $AccentTextFillColorSecondary; 173 | } 174 | } 175 | 176 | // Textbox with emoji button (set custom status modal) 177 | .theme-dark .inputContainer__9b8f6{ 178 | .emojiButtonContainer__9b8f6{ 179 | right: 0; 180 | left: unset; 181 | ~ .inputWrapper__0f084{ 182 | .input__0f084{ 183 | padding-right: 40px; 184 | } 185 | } 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /src/modules/ui/_input.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .title_ace4f5{ 2 | color: $TextFillColorPrimary; 3 | @include TypeBody; 4 | text-transform: none; 5 | } 6 | 7 | // NOTE: 2022-03-26 - hiddenDiv-2qTqSF is used in the credit card field. See #99 8 | .theme-dark .input__0f084:not(.hiddenDiv__8b579){ 9 | height: 32px; 10 | background-color: $ControlFillColorDefault; 11 | border: 1px solid; 12 | border-bottom-width: 2px; 13 | border-color: $ControlStrokeColorDefault; 14 | border-radius: 4px; 15 | @include TypeBody; 16 | color: $TextFillColorSecondary; 17 | 18 | // Sizing 19 | &.inputDefault__0f084{ 20 | padding: 0 12px; 21 | // height: 32px; 22 | } 23 | 24 | &:hover{ 25 | border-color: $ControlStrokeColorSecondary; 26 | } 27 | &:focus{ 28 | background-color: $ControlFillColorInputActiveBrush; 29 | color: $TextFillColorPrimary; 30 | border-color: $ControlStrokeColorDefault; 31 | border-bottom-color: $AccentBase; 32 | } 33 | &::placeholder{ 34 | color: $TextFillColorSecondary; 35 | } 36 | 37 | &.textarea_dde0a8, // eg. user popout note textarea 38 | &.textArea__7aff3{ // eg. channel MOTD textare 39 | padding: 4px 12px; 40 | } 41 | } 42 | // Create channel prefix 43 | .theme-dark .inputPrefix_b545d5{ 44 | top: 8px; 45 | ~ .input__0f084{ 46 | // TODO - 2022-06-08: Resolve this conflict 47 | padding-left: 32px !important; // Conflicts with .theme-dark .input__0f084:not(.hiddenDiv-2qTqSF) 48 | } 49 | } 50 | 51 | // Select 52 | .theme-dark{ 53 | .select__3f413{ 54 | padding: 3px 8px 3px 12px; 55 | background-color: $ControlFillColorDefault; 56 | border: 1px solid $ControlStrokeColorDefault; 57 | @include TypeBody; 58 | &:hover{ 59 | border-color: $ControlStrokeColorSecondary; 60 | } 61 | } 62 | 63 | // Options popout 64 | .popout__3f413{ 65 | background: $SolidbackgroundFillColorQuarternary; 66 | border: 1px solid $SurfaceStrokeColorFlyout; 67 | .option__3f413{ 68 | min-height: 32px; 69 | margin: 4px; 70 | padding: 8px; 71 | @include TypeBody; 72 | color: $TextFillColorPrimary; 73 | position: relative; 74 | &:hover{ 75 | background-color: $SubtleFillColorSecondary; 76 | border-radius: 4px; 77 | } 78 | &[aria-selected=true]{ 79 | background-color: transparent; 80 | 81 | &::before{ 82 | content: ""; 83 | width: 3px; 84 | height: 16px; 85 | position: absolute; 86 | top: 50%; 87 | margin-top: -8px; 88 | left: 0; 89 | background-color: $AccentBase; 90 | border-radius: 2px; 91 | } 92 | &:hover{ 93 | background-color: $SubtleFillColorSecondary; 94 | border-radius: 4px; 95 | } 96 | .selectedIcon__3f413{ 97 | display: none; 98 | } 99 | } 100 | } 101 | } 102 | } 103 | 104 | // Keybind 105 | .theme-dark .container_f89b2c{ 106 | height: 32px; 107 | background-color: $ControlFillColorDefault; 108 | border: 1px solid $ControlStrokeColorDefault; 109 | border-radius: 4px; 110 | .button__201d5{ 111 | min-height: calc(32px - 6px); 112 | height: calc(32px - 6px); 113 | margin: 2px; 114 | } 115 | } 116 | 117 | // Slider 118 | .slider_a562c8{ 119 | .bar_a562c8{ 120 | height: 3px; 121 | background-color: $ControlStrongStrokeColorDefault; 122 | border-radius: 2px; 123 | } 124 | .barFill_a562c8{ 125 | height: 3px; 126 | position: absolute; 127 | background-color: $AccentBase; 128 | border-radius: 2px; 129 | } 130 | .grabber_a562c8{ 131 | width: 18px; 132 | height: 18px; 133 | margin-top: -11px; 134 | margin-left: -9px; 135 | background-color: $AccentBase; 136 | border: 4px solid #454545; 137 | border-radius: 50%; 138 | box-sizing: border-box; 139 | &:hover{ 140 | width: 18px; 141 | height: 18px; 142 | border: 3px solid #454545; 143 | } 144 | &:active{ 145 | width: 18px; 146 | height: 18px; 147 | border: 5px solid #454545; 148 | } 149 | } 150 | } 151 | 152 | // Text formatting toolbar 153 | // Highlight text in the chat box to open the formatting bar 154 | .theme-dark .toolbar_bba883{ 155 | padding: 4px; 156 | background: $AcrylicBackgroundFillColorDefault; 157 | backdrop-filter: blur(10px); 158 | border: 1px solid $SurfaceStrokeColorFlyout; 159 | border-radius: 8px; 160 | // Remove arrow 161 | &::before{ 162 | display: none; 163 | } 164 | 165 | button{ 166 | margin-right: 4px; 167 | &:hover{ 168 | background-color: $SubtleFillColorSecondary; 169 | &.active__05fbc{ 170 | background-color: $AccentTextFillColorSecondary; 171 | } 172 | } 173 | &:last-child{ 174 | margin-right: 0; 175 | } 176 | &.active__05fbcF{ 177 | background-color: $AccentFillColorDefault; 178 | .icon_bba883{ 179 | color: $TextOnAccentFillColorPrimary; 180 | } 181 | } 182 | 183 | .buttonInner__878f4, 184 | .icon_bba883{ 185 | width: 16px; 186 | height: 16px; 187 | } 188 | 189 | } 190 | } 191 | 192 | // Copy box 193 | .copyInput_fffc15{ 194 | height: 42px; 195 | margin-bottom: 8px; 196 | background-color: $ControlFillColorDefault; 197 | border: 1px solid $ControlStrokeColorDefault; 198 | border-radius: 4px; 199 | .input__9fba8{ 200 | @include TypeBody; 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /src/modules/ui/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | // Channels, members, settings nav 2 | .theme-dark .thin_d125d2, // Settings nav 3 | .theme-dark .thin__99f8c{ // Channels 4 | &::-webkit-scrollbar{ 5 | width: 6px; 6 | } 7 | &::-webkit-scrollbar-thumb{ 8 | background-color: $ControlStrongFillColorDefault; 9 | } 10 | } 11 | 12 | // Chat 13 | .theme-dark .auto_d125d2{ 14 | &::-webkit-scrollbar{ 15 | width: 12px; 16 | } 17 | &::-webkit-scrollbar-track{ 18 | background-color: transparent; 19 | } 20 | &::-webkit-scrollbar-thumb{ 21 | background-color: $ControlStrongFillColorDefault; 22 | } 23 | } 24 | 25 | // Giphy/Tenor search popout 26 | .theme-dark .scrollbarGhostHairline__506b3{ 27 | &::-webkit-scrollbar-thumb{ 28 | background-color: $ControlStrongFillColorDefault; 29 | } 30 | } 31 | 32 | // Chatbox 33 | .theme-dark .scrollableContainer__74017{ 34 | &::-webkit-scrollbar{ 35 | width: 6px; 36 | } 37 | &::-webkit-scrollbar-track, 38 | &::-webkit-scrollbar-thumb{ 39 | border-width: 2px; 40 | } 41 | &::-webkit-scrollbar-thumb{ 42 | background-color: $ControlStrongFillColorDefault; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/modules/ui/_titlebar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .bar_c38106{ 2 | .title_c38106{ 3 | justify-content: flex-start; 4 | left: 8px; 5 | &::before{ 6 | content: "Discord"; 7 | color: $TextFillColorSecondary; 8 | } 9 | .title__85643{ 10 | display: none; 11 | } 12 | } 13 | 14 | 15 | 16 | // Remove help button 17 | .trailing_c38106{ 18 | gap: 0; 19 | a.anchor_edefb8{ 20 | display: none; 21 | } 22 | } 23 | // Inbox 24 | .recentsIcon_c99c29{ 25 | .button__85643{ 26 | width: 46px; 27 | &::before{ 28 | content: "\E715"; // Mail 29 | @include FontIconFluent; 30 | } 31 | &:hover{ 32 | background-color: $ControlFillColorSecondary; 33 | } 34 | svg{ 35 | display: none; 36 | } 37 | } 38 | } 39 | 40 | // window controls 41 | .winButtons_c38106{ 42 | gap: 0; 43 | } 44 | .winButton_c38106{ 45 | width: 46px; 46 | &:hover{ 47 | background-color: $ControlFillColorSecondary; 48 | } 49 | 50 | // Close button 51 | &.winButtonClose_c38106{ 52 | &:hover{ 53 | background-color: #C42B1C; 54 | } 55 | &:active{ 56 | background-color: rgba(#C42B1C, 90%); 57 | } 58 | 59 | } 60 | } 61 | } 62 | 63 | 64 | // Change titlebar name and controls colour when app is focused 65 | html.theme-dark.app-focused{ 66 | .title_c38106::before{ 67 | color: $TextFillColorPrimary; 68 | } 69 | .winButton_c38106{ 70 | color: $TextFillColorPrimary; 71 | } 72 | 73 | // .defaultColor__4bd52, 74 | // .winButton__421ed{ 75 | // color: $TextFillColorPrimary; 76 | // } 77 | } 78 | 79 | // Make titlebar height 32px 80 | .visual-refresh{ 81 | --custom-app-top-bar-height: calc(20px + var(--space-sm)); 82 | } 83 | -------------------------------------------------------------------------------- /src/modules/ui/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .tooltip__382e7{ 2 | padding: 8px 12px; 3 | background: $AcrylicBackgroundFillColorBase; 4 | border: 1px solid $SurfaceStrokeColorFlyout; 5 | border-radius: 4px; 6 | color: $TextFillColorPrimary; 7 | @include Elevation16; 8 | // box-sizing: unset; 9 | @include TypeBody; 10 | .tooltipPointer__382e7{ 11 | display: none; 12 | } 13 | .tooltipContent__382e7{ 14 | padding: 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/modules/vencord/_settings.scss: -------------------------------------------------------------------------------- 1 | .vc-settings-quickActions-card{ 2 | padding: 0; 3 | border: 0; 4 | } 5 | .vc-settings-quickActions-pill{ 6 | background-color: $ControlFillColorDefault; 7 | border-width: 1px; 8 | border-style: outset; 9 | border-color: $ControlElevationBorder; 10 | color: $TextFillColorPrimary; 11 | &:hover{ 12 | background-color: $ControlFillColorSecondary; 13 | box-shadow: none; 14 | transform: none; 15 | } 16 | &:active{ 17 | background-color: $ControlFillColorTertiary; 18 | } 19 | } 20 | 21 | // Theme and plugin card 22 | .vc-addon-card{ 23 | background-color: $SystemFillColorNeutralBackground; 24 | border: 1px solid $ControlStrokeColorDefault; 25 | // Highlight enabled cards 26 | &:has(.input__87bf1[checked]){ 27 | background-color: $SystemFillColorSuccesBackground; 28 | } 29 | &:hover{ 30 | background-color: $SystemFillColorNeutralBackground; 31 | box-shadow: none; 32 | transform: none; 33 | } 34 | .vc-addon-name{ 35 | font-size: 14px; 36 | } 37 | } 38 | 39 | // Unique tab styles 40 | #vencordsettings-tab .vc-settings-quickActions-card{ 41 | grid-template-columns: repeat(5,1fr); 42 | } 43 | #vencordthemes-tab .vc-settings-quickActions-card{ 44 | grid-template-columns: repeat(3,1fr); 45 | } 46 | --------------------------------------------------------------------------------