├── .editorconfig ├── .github ├── CONTRIBUTING.md └── ISSUE_TEMPLATE │ ├── bug-report.md │ ├── change-proposal.md │ └── feature_request.md ├── .gitignore ├── CHANGELOG.md ├── README.md ├── package-lock.json ├── package.json └── src ├── beautifuldiscord.scss ├── betterdiscord.scss └── components ├── betterdiscord ├── _ccss.scss ├── _emoji_picker.scss ├── _meta.scss ├── _plugin_support.scss ├── _public.scss ├── _settings.scss ├── _themes_plugins.scss ├── _tipsy.scss └── plugins │ ├── _Arashiryuu.MemberCount.scss │ ├── _Zerthox.OnlineFriendCount.scss │ ├── _mwittrien_ReadAllNotificationsButton.scss │ └── _rauenzi.BetterFormattingRedux.scss ├── core ├── _animation.scss ├── _info.scss ├── _options.scss ├── _reset.scss ├── _variables.scss └── _version_info.scss ├── discovery └── _discovery.scss ├── home └── friends │ ├── _add_friend.scss │ ├── _call.scss │ ├── _conversation_list.scss │ ├── _table.scss │ └── _toolbar.scss ├── icons └── _core.scss ├── loadscreens ├── _connecting.scss └── _no_text_channels.scss ├── misc ├── _bot_tag.scss ├── _keyboard_shortcut.scss ├── _loading.scss └── _status_circle.scss ├── mixins └── _font.scss ├── modal ├── _broadcast.scss ├── _changelog.scss ├── _custom_status.scss ├── _deauthorise_application.scss ├── _instant_invite.scss ├── _join_server.scss ├── _keyboard_shortcuts.scss ├── _lightbox.scss ├── _modal.scss ├── _new_server.scss ├── _phone.scss ├── _pin_delete_message.scss ├── _quickswitcher.scss ├── _region_select.scss ├── _upload.scss └── _user.scss ├── notices ├── _core.scss └── _language.scss ├── popouts ├── _add_game.scss ├── _autocomplete.scss ├── _color_picker.scss ├── _emoji_picker.scss ├── _filter.scss ├── _group_dm.scss ├── _pinned_recent.scss ├── _region_select.scss ├── _rtc.scss ├── _search.scss ├── _stream_preview.scss ├── _threads.scss └── _user.scss ├── primary ├── _acrylic.scss ├── _core.scss ├── channels │ ├── _account.scss │ ├── _activity.scss │ ├── _badge.scss │ ├── _channel_notices.scss │ ├── _channels.scss │ └── _rtc.scss ├── chat │ ├── _chat.scss │ ├── _chatbox.scss │ ├── _codeblock.scss │ ├── _embed.scss │ ├── _invite.scss │ ├── _nsfw.scss │ └── _welcome.scss ├── guilds │ └── _guilds.scss ├── members │ └── _members.scss ├── search │ └── _search.scss ├── thread │ └── _thread.scss └── toolbar │ ├── _search.scss │ └── _toolbar.scss ├── settings ├── _content.scss ├── _core.scss └── _sidebar.scss ├── thirdparty └── _hljs_monokai.scss └── ui ├── _button.scss ├── _context_menu.scss ├── _input.scss ├── _scrollbar.scss ├── _titlebar.scss └── _tooltip.scss /.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 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Reporting Issues 4 | * Disable BetterDiscord plugins and addon themes before opening an issue. 5 | * Use the provided *Bug report* template when opening a new Issue. 6 | * You may delete the placeholder help text under each header. 7 | * Please don't 'bulk report' unrelated issues in the same Issue. 8 | * Please don't report a new issue in the thread of an existing issue if it is unrelated. 9 | * Search through existing issues before adding a new *Feature request*. These issues are tagged with the `Feedback` label. 10 | 11 | ## Pull Requests 12 | * Open an issue using the *Change proposal* template to discuss your changes before starting. 13 | * Clone/rebase this repo. 14 | * Make sure your editor is obeying `.editorconfig`. [What's this?](https://editorconfig.org/) 15 | * To test: Try removing the blank new line at the end a file, then save. If a blank new line is added back after saving that means everything is working properly. 16 | * Make any changes in a new branch (not `master`). 17 | * Submit a PR, be sure to reference the initial discussion issue. 18 | 19 | ### Developing 20 | #### Ingredients 21 | * An editor (like [Visual Studio Code](https://code.visualstudio.com/)) 22 | * [Git](https://git-scm.com/) 23 | * [Node JS](https://nodejs.org/en/) 24 | * [Editorconfig Plugin](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) (if you're using VS Code) 25 | #### Method 26 | * Run `npm i sass -g` 27 | * Use `npm run watch` to automatically compile the theme as you work 28 | 29 | ### BetterDiscord Plugins 30 | Additions for BetterDiscord plugins are welcome, however I likely won't update them over time. Please submit a PR for plugin additions or updates. 31 | * The plugin **must** be approved and published on [betterdiscord.app](betterdiscord.app). 32 | * Support will be removed if the plugin is removed from the website. 33 | * File location and naming convention 34 | * Plugin support files are located within `/src/components/betterdiscord/plugins/` 35 | * Each plugin has a SCSS file using the following naming scheme: `_GithubUsername.PluginName.scss`. 36 | * Use the same capitalisation as the developer's GitHub username, and plugin name. Include dashes or underscores. 37 | * Example: If Metro for Discord was a plugin, the plugin support file would be called: `_TakosThings.metro-for-discord.scss` 38 | * Import the plugin in `/src/components/betterdiscord/_plugin_support.scss` 39 | 40 | ### Updating or Adding Documentation 41 | * Keep formatting consistent. 42 | * Always use British English (that means putting the 'u' in 'colour'). 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Report an issue 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Before opening an issue** 11 | * Make sure you have updated to the latest available version. 12 | * Try not to report multiple unrelated issues in the same submission, open new issues for them instead. 13 | 14 | **Describe the bug** 15 | A clear and concise description of what the bug is. 16 | 17 | **Steps to reproduce** 18 | Explain the steps to reproduce the issue (if required). 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. Screenshots should have context. A 10 pixel wide image and saying "this scrollbar" is not helpful. 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/change-proposal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Change proposal 3 | about: Propose a change before opening a PR 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **What are your changes?** 11 | 12 | **Why do you want to propose these changes?** 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .docs/ 2 | node_modules/ 3 | dist/ 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## End of development 2 | Development on Metro for Discord has ended and this repo is now archived. Head over to [Fluent Discord](https://github.com/TakosThings/Fluent-Discord) for a Windows 11 Discord theme. 3 | 4 | --- 5 | 6 | # Metro for Discord 7 | Metro for Discord is a theme to make Discord's Desktop client look like a native UWP application. 8 | 9 | ## Download 10 | * From [Releases](https://github.com/TakosThings/Metro-for-Discord/releases/latest) 11 | * From [Betterdiscord.app](https://betterdiscord.app/theme/Metro%20for%20Discord) (Updates may be delayed) 12 | * From the [`dist`](https://github.com/TakosThings/Metro-for-BetterDiscord/blob/master/dist/Metro_for_Discord.theme.css) directory. 13 | 14 | ## Requirements 15 | * Windows 10 or Windows 11 16 | * OR the following fonts installed: 17 | * Segoe UI MDL2 Assets font (v1.78) 18 | * HoloLens MDL2 Assets font (v2.02) 19 | 20 | ## Setup 21 | [Visit the wiki](https://github.com/TakosThings/Metro-for-Discord/wiki/Setup-Guide) for the setup guide 22 | 23 | ## Preview 24 | ![Preview](https://i.imgur.com/qfCvxrB.png) 25 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "sass src/beautifuldiscord.scss:dist/Metro_for_Discord.css src/betterdiscord.scss:dist/Metro_for_Discord.theme.css --no-charset --no-source-map", 5 | "watch": "sass --watch src/beautifuldiscord.scss:dist/Metro_for_Discord.css src/betterdiscord.scss:%APPDATA%/BetterDiscord/themes/Metro_for_Discord.theme.css --no-charset --no-source-map" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/beautifuldiscord.scss: -------------------------------------------------------------------------------- 1 | // Core 2 | @import 'components/core/info'; 3 | @import 'components/core/variables'; 4 | @import 'components/mixins/font'; 5 | @import 'components/core/options'; 6 | @import 'components/core/reset'; 7 | @import 'components/core/animation'; 8 | @import 'components/core/version_info'; 9 | 10 | // UI 11 | @import 'components/ui/button'; 12 | @import 'components/ui/context_menu'; 13 | @import 'components/ui/input'; 14 | @import 'components/ui/scrollbar'; 15 | @import 'components/ui/titlebar'; 16 | @import 'components/ui/tooltip'; 17 | 18 | // Discovery 19 | @import 'components/discovery/discovery'; 20 | 21 | // Friends 22 | @import 'components/home/friends/add_friend'; 23 | @import 'components/home/friends/call'; 24 | @import 'components/home/friends/conversation_list'; 25 | @import 'components/home/friends/table'; 26 | @import 'components/home/friends/toolbar'; 27 | 28 | // Icons 29 | @import 'components/icons/core'; 30 | 31 | // Loadscreens 32 | @import 'components/loadscreens/connecting'; 33 | @import 'components/loadscreens/no_text_channels'; 34 | 35 | // Misc 36 | @import 'components/misc/bot_tag'; 37 | @import 'components/misc/keyboard_shortcut'; 38 | @import 'components/misc/loading'; 39 | @import 'components/misc/status_circle'; 40 | 41 | // Modals 42 | @import 'components/modal/broadcast'; 43 | @import 'components/modal/changelog'; 44 | @import 'components/modal/custom_status'; 45 | @import 'components/modal/deauthorise_application'; 46 | @import 'components/modal/instant_invite'; 47 | @import 'components/modal/join_server'; 48 | @import 'components/modal/keyboard_shortcuts'; 49 | @import 'components/modal/lightbox'; 50 | @import 'components/modal/modal'; 51 | @import 'components/modal/new_server'; 52 | @import 'components/modal/phone'; 53 | @import 'components/modal/pin_delete_message'; 54 | @import 'components/modal/quickswitcher'; 55 | @import 'components/modal/region_select'; 56 | @import 'components/modal/upload'; 57 | @import 'components/modal/user'; 58 | 59 | // Notices 60 | @import 'components/notices/core'; 61 | @import 'components/notices/language'; 62 | 63 | // Popouts 64 | @import 'components/popouts/add_game'; 65 | @import 'components/popouts/autocomplete'; 66 | @import 'components/popouts/color_picker'; 67 | @import 'components/popouts/emoji_picker'; 68 | @import 'components/popouts/filter'; 69 | @import 'components/popouts/group_dm'; 70 | @import 'components/popouts/pinned_recent'; 71 | @import 'components/popouts/region_select'; 72 | @import 'components/popouts/rtc'; 73 | @import 'components/popouts/search'; 74 | @import 'components/popouts/stream_preview'; 75 | @import 'components/popouts/threads'; 76 | @import 'components/popouts/user'; 77 | 78 | // Primary core 79 | @import 'components/primary/core'; 80 | @import 'components/primary/acrylic'; 81 | 82 | // Chat 83 | @import 'components/primary/chat/chat'; 84 | @import 'components/primary/chat/chatbox'; 85 | @import 'components/primary/chat/codeblock'; 86 | @import 'components/primary/chat/embed'; 87 | @import 'components/primary/chat/invite'; 88 | @import 'components/primary/chat/nsfw'; 89 | @import 'components/primary/chat/welcome'; 90 | 91 | // Guilds 92 | @import 'components/primary/guilds/guilds'; 93 | 94 | // Channels 95 | @import 'components/primary/channels/account'; 96 | @import 'components/primary/channels/activity'; 97 | @import 'components/primary/channels/badge'; 98 | @import 'components/primary/channels/channel_notices'; 99 | @import 'components/primary/channels/channels'; 100 | @import 'components/primary/channels/rtc'; 101 | 102 | // Threads 103 | @import 'components/primary/thread/thread'; 104 | 105 | // Members 106 | @import 'components/primary/members/members'; 107 | 108 | // Search results pane 109 | @import 'components/primary/search/search'; 110 | 111 | // Toolbar 112 | @import 'components/primary/toolbar/toolbar'; 113 | @import 'components/primary/toolbar/search'; 114 | 115 | // Settings 116 | @import 'components/settings/content'; 117 | @import 'components/settings/core'; 118 | @import 'components/settings/sidebar'; 119 | 120 | // Third party 121 | @import 'components/thirdparty/hljs_monokai'; 122 | -------------------------------------------------------------------------------- /src/betterdiscord.scss: -------------------------------------------------------------------------------- 1 | // BetterDiscord Meta 2 | @import 'components/betterdiscord/meta'; 3 | 4 | // Core 5 | @import 'components/core/info'; 6 | @import 'components/core/variables'; 7 | @import 'components/mixins/font'; 8 | @import 'components/core/options'; 9 | @import 'components/core/reset'; 10 | @import 'components/core/animation'; 11 | @import 'components/core/version_info'; 12 | 13 | // UI 14 | @import 'components/ui/button'; 15 | @import 'components/ui/input'; 16 | @import 'components/ui/titlebar'; 17 | @import 'components/ui/scrollbar'; 18 | @import 'components/ui/tooltip'; 19 | @import 'components/ui/context_menu'; 20 | 21 | // BetterDiscord 22 | @import 'components/betterdiscord/emoji_picker'; 23 | @import 'components/betterdiscord/tipsy'; 24 | @import 'components/betterdiscord/settings'; 25 | @import 'components/betterdiscord/ccss'; 26 | @import 'components/betterdiscord/themes_plugins'; 27 | @import 'components/betterdiscord/public'; 28 | 29 | // Discovery 30 | @import 'components/discovery/discovery'; 31 | 32 | // Friends 33 | @import 'components/home/friends/toolbar'; 34 | @import 'components/home/friends/call'; 35 | @import 'components/home/friends/conversation_list'; 36 | @import 'components/home/friends/table'; 37 | @import 'components/home/friends/add_friend'; 38 | 39 | // Icons 40 | @import 'components/icons/core'; 41 | 42 | // Loadscreens 43 | @import 'components/loadscreens/connecting'; 44 | @import 'components/loadscreens/no_text_channels'; 45 | 46 | // Misc 47 | @import 'components/misc/bot_tag'; 48 | @import 'components/misc/keyboard_shortcut'; 49 | @import 'components/misc/loading'; 50 | @import 'components/misc/status_circle'; 51 | 52 | // Modals 53 | @import 'components/modal/broadcast'; 54 | @import 'components/modal/changelog'; 55 | @import 'components/modal/custom_status'; 56 | @import 'components/modal/deauthorise_application'; 57 | @import 'components/modal/instant_invite'; 58 | @import 'components/modal/join_server'; 59 | @import 'components/modal/keyboard_shortcuts'; 60 | @import 'components/modal/lightbox'; 61 | @import 'components/modal/modal'; 62 | @import 'components/modal/new_server'; 63 | @import 'components/modal/phone'; 64 | @import 'components/modal/pin_delete_message'; 65 | @import 'components/modal/quickswitcher'; 66 | @import 'components/modal/region_select'; 67 | @import 'components/modal/upload'; 68 | @import 'components/modal/user'; 69 | 70 | // Notices 71 | @import 'components/notices/core'; 72 | @import 'components/notices/language'; 73 | 74 | // Popouts 75 | @import 'components/popouts/add_game'; 76 | @import 'components/popouts/autocomplete'; 77 | @import 'components/popouts/color_picker'; 78 | @import 'components/popouts/emoji_picker'; 79 | @import 'components/popouts/filter'; 80 | @import 'components/popouts/group_dm'; 81 | @import 'components/popouts/pinned_recent'; 82 | @import 'components/popouts/region_select'; 83 | @import 'components/popouts/rtc'; 84 | @import 'components/popouts/search'; 85 | @import 'components/popouts/stream_preview'; 86 | @import 'components/popouts/threads'; 87 | @import 'components/popouts/user'; 88 | 89 | // Primary core 90 | @import 'components/primary/core'; 91 | @import 'components/primary/acrylic'; 92 | 93 | // Chat 94 | @import 'components/primary/chat/chat'; 95 | @import 'components/primary/chat/chatbox'; 96 | @import 'components/primary/chat/welcome'; 97 | @import 'components/primary/chat/codeblock'; 98 | @import 'components/primary/chat/embed'; 99 | @import 'components/primary/chat/invite'; 100 | @import 'components/primary/chat/nsfw'; 101 | 102 | // Guilds 103 | @import 'components/primary/guilds/guilds'; 104 | 105 | // Channels 106 | @import 'components/primary/channels/channels'; 107 | @import 'components/primary/channels/channel_notices'; 108 | @import 'components/primary/channels/rtc'; 109 | @import 'components/primary/channels/activity'; 110 | @import 'components/primary/channels/account'; 111 | @import 'components/primary/channels/badge'; 112 | 113 | // Threads 114 | @import 'components/primary/thread/thread'; 115 | 116 | // Members 117 | @import 'components/primary/members/members'; 118 | 119 | // Search results pane 120 | @import 'components/primary/search/search'; 121 | 122 | // Toolbar 123 | @import 'components/primary/toolbar/toolbar'; 124 | @import 'components/primary/toolbar/search'; 125 | 126 | // Settings 127 | @import 'components/settings/core'; 128 | @import 'components/settings/sidebar'; 129 | @import 'components/settings/content'; 130 | 131 | // Third party 132 | @import 'components/thirdparty/hljs_monokai'; 133 | 134 | // Plugin support 135 | @import 'components/betterdiscord/plugin_support'; 136 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_ccss.scss: -------------------------------------------------------------------------------- 1 | #bd-settingspane-container .content-column.default{ 2 | padding: 26px 15px 0 0 !important; 3 | } 4 | #bd-settingspane-container h2.ui-form-title{ 5 | color: $BaseHigh; 6 | @include FontSubtitle; 7 | } 8 | 9 | // Detatched 10 | #bd-customcss-detach-container{ 11 | padding-top: 32px; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_emoji_picker.scss: -------------------------------------------------------------------------------- 1 | // CSS cleared until BD updates the TTV emoji picker 2 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_meta.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Metro for Discord 3 | * @author Tako 4 | * @version 3.16.11 5 | * @description The Metro theme for Discord 6 | * @source https://github.com/TakosThings/Metro-for-Discord 7 | */ 8 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_plugin_support.scss: -------------------------------------------------------------------------------- 1 | // https://github.com/Arashiryuu/crap/tree/master/ToastIntegrated/MemberCount 2 | @import "plugins/Arashiryuu.MemberCount"; 3 | 4 | // https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ReadAllNotificationsButton/ 5 | @import "plugins/mwittrien_ReadAllNotificationsButton"; 6 | 7 | // https://github.com/Zerthox/BetterDiscord-Plugins/tree/master/v1 8 | @import "plugins/Zerthox.OnlineFriendCount"; 9 | 10 | @import "plugins/rauenzi.BetterFormattingRedux"; 11 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_public.scss: -------------------------------------------------------------------------------- 1 | #bd-pub-button{ 2 | background-color: transparent; 3 | border-radius: 0; 4 | color: $BaseHigh; 5 | font-size: 10px; 6 | text-transform: capitalize; 7 | &:hover{ 8 | background-color: $ListLow; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_settings.scss: -------------------------------------------------------------------------------- 1 | .bd-sidebar-header .bd-changelog-button{ 2 | margin-top: calc((64px / 2) - (16px / 2)); 3 | } 4 | 5 | div[class^="bd-"]{ 6 | &.item-PXvHYJ{ 7 | margin-bottom: 0; 8 | padding: 14px 48px; 9 | border-radius: 0; 10 | color: $BaseHigh; 11 | &:hover{ 12 | background-color: $ListLow; 13 | cursor: default; 14 | } 15 | } 16 | } 17 | .theme-dark .layer-3QrUeG[aria-label="USER_SETTINGS"]{ 18 | .sidebar-CFHs9e{ 19 | .item-PXvHYJ{ 20 | &::after{ 21 | position: absolute; 22 | left: 16px; 23 | color: #FFF; 24 | @include FontIcon; 25 | font-size: 16px; 26 | } 27 | } 28 | // User Settings 29 | .item-PXvHYJ[aria-controls="Settings-tab"]::after, // BD:Settings 30 | .bd-settings-tab.item-PXvHYJ::after{ // Lazy hack to catch non-english 31 | content: "\E713" !important; // Setting 32 | } 33 | .item-PXvHYJ[aria-controls="emotes-tab"]::after{ // BD:Emotes 34 | content: "\ED56" !important; // EmojiTabFoodPlants 35 | } 36 | .item-PXvHYJ[aria-controls="customcss-tab"]::after{ // BD:CustomCSS 37 | content: "\E943" !important; // Code 38 | } 39 | .item-PXvHYJ[aria-controls="plugins-tab"]::after{ // BD:Plugins 40 | content: "\E943" !important; // Code 41 | } 42 | .item-PXvHYJ[aria-controls="themes-tab"]::after{ // BD:Themes 43 | content: "\E771" !important; // Personalise 44 | } 45 | .item-PXvHYJ[aria-controls="aaa-tab"]::after{ // BD:Themes 46 | content: "\E771" !important; // Personalise 47 | } 48 | } 49 | } 50 | 51 | .bd-setting-header label[for="minimalMode"]::after{ 52 | content: " Metro for Discord: Do not turn this on"; 53 | color: $alert; 54 | } 55 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_themes_plugins.scss: -------------------------------------------------------------------------------- 1 | // Open folder button 2 | .bd-pfbtn{ 3 | height: 32px; 4 | padding: 0 10px; 5 | background-color: $BaseLow; 6 | border: 0; 7 | border-radius: 2px; 8 | @include FontBody; 9 | &:hover{ 10 | border-color: $ListLow; 11 | } 12 | &:focus{ 13 | border-color: $BaseMediumLow; 14 | } 15 | } 16 | 17 | .ui-standard-sidebar-view .bda-slist li, 18 | .ui-standard-sidebar-view .bda-slist li:nth-child(odd){ 19 | background-color: $ChromeMediumLow; 20 | border: 0; 21 | } 22 | .ui-standard-sidebar-view .bda-slist li{ 23 | margin-bottom: 4px; 24 | padding: 8px; 25 | } 26 | 27 | .bda-slist .bda-name{ 28 | max-height: initial; 29 | color: #FFF; 30 | @include FontBody; 31 | } 32 | 33 | .ui-standard-sidebar-view .bda-slist .bda-description{ 34 | border: 0; 35 | color: #FFF; 36 | } 37 | 38 | .ui-standard-sidebar-view .bda-slist .bda-right button{ 39 | height: 32px; 40 | padding: 0 10px; 41 | background-color: $BaseLow; 42 | border: 0; 43 | border-radius: 2px; 44 | @include FontBody; 45 | &:hover{ 46 | border-color: $ListLow; 47 | } 48 | &:focus{ 49 | border-color: $BaseMediumLow; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/betterdiscord/_tipsy.scss: -------------------------------------------------------------------------------- 1 | .tipsy{ 2 | margin-top: -42px; 3 | opacity: 1 !important; 4 | } 5 | .tipsy-inner{ 6 | background-color: #191919; 7 | border: 1px solid rgba(255,255,255,.3); 8 | padding: 7px 8px 8px; 9 | font-size: 13px; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/betterdiscord/plugins/_Arashiryuu.MemberCount.scss: -------------------------------------------------------------------------------- 1 | #MemberCount{ 2 | background: $ChromeLow !important; 3 | margin-top: 0 !important; 4 | h2{ 5 | margin-bottom: 0; 6 | border-bottom: 0; 7 | text-align: left; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/betterdiscord/plugins/_Zerthox.OnlineFriendCount.scss: -------------------------------------------------------------------------------- 1 | .friendsOnline-2JkivW{ 2 | padding: 5px 0; 3 | color: $BaseHigh; 4 | font-weight: normal; 5 | text-transform: none; 6 | &:hover{ 7 | background-color: $ListLow; 8 | color: $BaseHigh; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/components/betterdiscord/plugins/_mwittrien_ReadAllNotificationsButton.scss: -------------------------------------------------------------------------------- 1 | .frame-oXWS21 .button-Jt-tIg{ 2 | margin: 4px 0; 3 | background-color: transparent; 4 | color: $BaseHigh; 5 | font-size: 10px; 6 | text-transform: capitalize; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/betterdiscord/plugins/_rauenzi.BetterFormattingRedux.scss: -------------------------------------------------------------------------------- 1 | // https://betterdiscord.app/plugin/BetterFormattingRedux 2 | // https://github.com/rauenzi/BetterDiscordAddons/tree/master/Plugins/BetterFormattingRedux 3 | 4 | .theme-dark .bf-toolbar{ 5 | right: unset; 6 | left: 0; 7 | padding: 10px 20px 15px 30px; 8 | &::before{ 9 | background: $ChromeMedium; 10 | border-radius: 4px; 11 | } 12 | .bf-arrow{ 13 | left: 0; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/core/_animation.scss: -------------------------------------------------------------------------------- 1 | // Pinned messages, search and recent messages flyout animation 2 | @keyframes slideinright{ 3 | 0%{right: -420px;} 4 | 100%{right: 0;} 5 | } 6 | 7 | // Toast 8 | @keyframes toast{ 9 | 0%{ 10 | transform: translateX(380px); 11 | } 12 | 5%,95%{ 13 | transform: translateX(0); 14 | } 15 | 100%{ 16 | transform: translateX(380px); 17 | } 18 | } 19 | 20 | // Blink 21 | @keyframes blink{ 22 | 0%{ 23 | opacity: 1; 24 | } 25 | 50%{ 26 | opacity: 0; 27 | } 28 | 100%{ 29 | opacity: 1; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/core/_info.scss: -------------------------------------------------------------------------------- 1 | /*################## Metro for Discord #################### 2 | ## License: CC-BY-NC-SA ## 3 | ## Repo: https://github.com/TakosThings ## 4 | ####################### Third Party ####################### 5 | ## hljs: https://highlightjs.org ## 6 | ## icons8: https://icons8.com ## 7 | #########################################################*/ 8 | -------------------------------------------------------------------------------- /src/components/core/_options.scss: -------------------------------------------------------------------------------- 1 | /* Start of user options ## 2 | ########################################################### 3 | ## Check the repo wiki for help on this section ## 4 | ## https://github.com/TakosThings/Metro-for-Discord/wiki ## 5 | #########################################################*/ 6 | 7 | 8 | /* Accent Colour */ 9 | /* Description: Change the accent colour. Must be provided in RGB format */ 10 | /* Default: Accent is 'Default Blue'. Link is 'Default Blue'. Voice is 'Turf Green' */ 11 | :root{ 12 | --accent: 0, 120, 215; 13 | --link: 0, 120, 215; 14 | --voice: 0, 204, 106; 15 | } 16 | 17 | /* Hide Stage Discovery */ 18 | /* Description: Delete this to display the Stage Discovery option in the Home screen. */ 19 | /* Default: The Stage Discovery option is hidden in the Home screen. */ 20 | .channel-2QD9_O[href^="/discovery"]{ 21 | display: none; 22 | } 23 | 24 | /* Hide Activity Box */ 25 | /* Description: Uncomment to remove the Activity Box displayed above the Voice Connected (RTC) box. */ 26 | /* Default: The Activity panel is not hidden. */ 27 | .activityPanel-28dQGo{ 28 | /* display: none; */ 29 | } 30 | 31 | /* Acrylic background */ 32 | /* Description: Change the background image used to create 'acrylic' effects. */ 33 | /* Default: The default background is a blue/teal/aqua gradient. */ 34 | body, 35 | .container-16j22k{ 36 | background-image: url(https://i.imgur.com/PoQUA3n.jpg); 37 | } 38 | 39 | /* Blur filter */ 40 | /* Description: Uncomment to enable the blur filter. This may be useful for custom backgrounds. */ 41 | /* Warning: May degrade performance. */ 42 | /* Default: The blur filter is disabled.*/ 43 | body::before, 44 | .container-16j22k::before{ 45 | /* backdrop-filter: blur(45px) saturate(125%); */ 46 | } 47 | 48 | /*######################################################### 49 | ## End of user options ## 50 | #########################################################*/ 51 | -------------------------------------------------------------------------------- /src/components/core/_reset.scss: -------------------------------------------------------------------------------- 1 | // Override :root 2 | :root{ 3 | --font-primary: "Segoe UI", Arial, Helvetica, sans-serif; 4 | --font-display: "Segoe UI", Arial, Helvetica, sans-serif; 5 | } 6 | 7 | // Everything 8 | body, button{ 9 | @include FontNormal; 10 | } 11 | #app-mount{ 12 | background-color: $ChromeBlackHigh; 13 | } 14 | 15 | // Code block and inline code 16 | .markup-2BOw-j pre, 17 | .markup-2BOw-j code.inline{ 18 | @include FontMonospace 19 | } 20 | 21 | // Form elements 22 | ::-webkit-input-placeholder, 23 | input, 24 | select, 25 | textarea{ 26 | @include FontNormal; 27 | } 28 | 29 | // Remove orange border on some elements when focused 30 | :focus{ 31 | outline: unset; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/core/_variables.scss: -------------------------------------------------------------------------------- 1 | // Status State 2 | $alert: #D02E00; 3 | $safe: #43B581; 4 | 5 | // User Status 6 | $statusonline: #10893E; 7 | $statusidle: #FFB900; 8 | $statusdnd: #E81123; 9 | $statusoffline: #767676; 10 | $statusstreaming: #392e5c; 11 | 12 | // WinUI 13 | $AltHigh: rgba($color: #000000, $alpha: 1.0); 14 | $AltLow: rgba($color: #000000, $alpha: 0.2); 15 | $AltMedium: rgba($color: #000000, $alpha: 0.6); 16 | $AltMediumHigh: rgba($color: #000000, $alpha: 0.8); 17 | $AltMediumLow: rgba($color: #000000, $alpha: 0.4); 18 | 19 | $BaseHigh: rgba($color: #FFFFFF, $alpha: 1.0); 20 | $BaseLow: rgba($color: #FFFFFF, $alpha: 0.2); 21 | $BaseMedium: rgba($color: #FFFFFF, $alpha: 0.6); 22 | $BaseMediumHigh: rgba($color: #FFFFFF, $alpha: 0.8); 23 | $BaseMediumLow: rgba($color: #FFFFFF, $alpha: 0.4); 24 | 25 | $ChromeAltLow: rgba($color: #F2F2F2, $alpha: 1.0); 26 | $ChromeBlackHigh: rgba($color: #000000, $alpha: 1.0); 27 | $ChromeBlackLow: rgba($color: #000000, $alpha: 0.2); 28 | $ChromeBlackMediumLow: rgba($color: #000000, $alpha: 0.4); 29 | $ChromeBlackMedium: rgba($color: #000000, $alpha: 0.8); 30 | $ChromeDisabledHigh: rgba($color: #333333, $alpha: 1.0); 31 | $ChromeDisabledLow: rgba($color: #858585, $alpha: 1.0); 32 | $ChromeHigh: rgba($color: #767676, $alpha: 1.0); 33 | $ChromeLow: rgba($color: #171717, $alpha: 1.0); 34 | $ChromeMedium: rgba($color: #1F1F1F, $alpha: 1.0); 35 | $ChromeMediumLow: rgba($color: #2B2B2B, $alpha: 1.0); 36 | $ChromeWhite: rgba($color: #FFFFFF, $alpha: 1.0); 37 | 38 | $ListLow: rgba($color: #FFFFFF, $alpha: 0.1); 39 | $ListMedium: rgba($color: #FFFFFF, $alpha: 0.2); 40 | $ListAccentLow: rgba(var(--accent), 0.6); 41 | $ListAccentMedium: rgba(var(--accent), 0.8); 42 | $ListAccentHigh: rgba(var(--accent), 0.9); 43 | 44 | $BorderTransient: rgba($color: #000000, $alpha: 0.36); 45 | $BorderEdgeHighlight: rgba($color: #FFFFFF, $alpha: 0.5); 46 | 47 | // $AccentLight1: unset; 48 | // $AccentLight2: unset; 49 | // $AccentLight3: unset; 50 | $Accent: rgba(var(--accent), 1.0); 51 | // $AccentDark1: unset; 52 | // $AccentDark2: unset; 53 | // $AccentDark3: unset; 54 | -------------------------------------------------------------------------------- /src/components/core/_version_info.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-2lgZY8, 2 | .theme-dark .layer-3QrUeG[aria-label="USER_SETTINGS"] .info-1VyQPT{ 3 | &::before{ 4 | content: "Metro for Discord \A Version 3.16.11"; 5 | } 6 | } 7 | 8 | .theme-dark .container-2lgZY8{ 9 | &::before{ 10 | width: 360px; 11 | height: 64px; 12 | position: absolute; 13 | right: 20px; 14 | bottom: 20px; 15 | display: block; 16 | z-index: 9999; // We're above everything 17 | padding: 12px 12px 12px 56px; 18 | box-sizing: border-box; 19 | background-color: $ChromeMediumLow; 20 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAC9wAAAvcBLRSNOAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAATESURBVGiB7ZlZbFVFGMf/g5RCW7QYrEVqQh/EBSOSRkpiYggaxSXywINJQaJGiAousYlbYozhye1dExISAZ+UEF9ENKbRCsqDqdQIiLI0RKOUrjSFSvrz4cwN3517Tu85t6cusf/k5k5m/vMtM9/M+WZGmsY0/t9weQoDqiTdKul6SU2S6iVdkDQoqUfScUmHnHMX89Q7KQB1wGagAxihPAaAj4CHgDn/pOH1wBtAfwqjk9AHvAbUV2pH5hACnKSHJb0p6eoYyhFJByWdljTk62oVhdVS/x/ijKSXJG13zpHVptQA5gIfx4zkYeBJoDGFjEbgaaArRs4e4IqpMr4Z6A4UHgMe9LNSicxVwMFA5o9AU97GNwE9Rsk4sBWYHfAagMf8ryGl7BnAC8BFI/8EcG1extcHIz8CrI3hrfCLsoA+YEUGPauBIdO/O5dwojjmLwArE3jflEQ07M+oaxnRNlvA7skavy4Imw0TcIdjHBiagL8SeC4cEOBO4E8jY2Olxs8Heo2g98rwv4px4MsYngM+CHi7MBsB8Kpp+4NKQonoA1PAKeDyMvzllK6B22J4q2McBbjHcGZSvO5ez2r8HO95AW2mLXbqfVvZXQhoT3Dg+YB3n2k7A9RkceAR0/kXPyJlpz6l7LsSHFgV8FwwC21JMuOUfGg6tvu6slOfQf7OQMaOBN6zhrMnrfAqYNB0vMHXp5r6DE4khqLhNBk9g8BlaQS3mk4nTH2qqc8bRCFcwC1h+4yYPjeZcneh4Jz7XNKugLvTOfdFPqYm4jtTXhw2zozpsNCUe2yDc249sE3RqavLOdeRh4VlcMqUS/KjOAdqTfnXsNEb3TFZqzJgwJTrwsa4EBo25eokqURb6zwgbhBSA2gBOom+O51AS0AZN+WSRRznwFlTvjJQNgt4gihJG5PUJ2mMKJF7Ckh0OMH4BZI+k3S7pKv8/z6KD0Y2jbCDmyh0rVn1n5j6JcDPCTtRAcfjdooJdG1MkPO44eww9etDGXHTv18Sis7LdwNvec/bJdl8aEzSiKQaXQq1ZkmdwB3Oua4UPsRFQFjfaso/pZApAe9OMMr9ROffuZ5bAzwK/G44JwlOawl6FlCcAAKcxYcQsNDUD5N2vRHF+naiM4DFIaBkL/Z9mgMnnkmpqwU4AJz3/y2mbbORtzeV8YHwpcAW4EXgAWBWGf4Go/DrzAqLZTngByOvsoNNRqWzgVGv8DxBpkqK/MdwbfLYD9SW65MLgNNGcZ2vy5SKA9XAUcN95+8yvg4Y80pHCwaSMRUnurIpoBeYn6QzaRurFG2Sqnz5W3NNuCSBX1IPrJH0iql62TnXm5+JCQAWU3zRu8m0pT2FtVJ8u7EPyHuQY42vpnjHOEqwY1HmFAbcD5wLZMybcuO98jVG8Tng5gReyS5EtHNtpfgu6Dcg7hZ7yhyw9ziprkCI7kTXAEeCmTkMNKfVPalU2GDUlCfMSIFFku6VtEXFpz9J2itpnXOuL63iXN7IgGW6dPQbl/SppGPy6bakRkmLJN0o6boYEYVkcduUPnBMBEo/VGkwALxN3u8BFTpQA7yf0ujdwCZ8RjsZ5PrMKknANZKWK3o/a1B0xh6WdFLR+9n3/6pn1mlM4z+OvwDxXg7DxHcO6gAAAABJRU5ErkJggg==); 21 | background-position: 12px 16px; 22 | background-size: 32px; 23 | background-repeat: no-repeat; 24 | border: 1px solid $BorderTransient; 25 | border-radius: 4px; 26 | color: $BaseHigh; 27 | @include FontBody; 28 | white-space: pre; 29 | animation: 10s toast cubic-bezier(0.1, 0.9, 0.2, 1); 30 | transform: translateX(380px); 31 | pointer-events: none; 32 | } 33 | } 34 | 35 | .theme-dark .layer-3QrUeG[aria-label="USER_SETTINGS"]{ 36 | .info-1VyQPT{ 37 | &::before{ 38 | color: $BaseMedium; 39 | font-size: 12px; 40 | line-height: 16px; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/discovery/_discovery.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .content-98HsJk{ 2 | // Sidebar 3 | .sidebar-2K8pFh{ 4 | // Header 5 | .discoverHeader-Ijkm_M{ 6 | margin: 0; 7 | padding: 0 12px; 8 | background-color: $ChromeBlackMediumLow; 9 | @include FontBase; 10 | line-height: 40px; 11 | 12 | // Hack to stop selecting the 'header' in friends 13 | &~.container-2Pjhx-{ 14 | margin-left: 48px; 15 | } 16 | } 17 | 18 | 19 | .container-2Pjhx-{ 20 | margin: 0; 21 | padding: 0; 22 | border-radius: 0; 23 | color: $BaseHigh; 24 | &:hover{ 25 | background-color: $ListLow; 26 | } 27 | &.selectedCategoryItem-FHKU_o{ 28 | border-radius: 0; 29 | .itemInner-gPkiWb{ 30 | background-color: $ListAccentLow; 31 | } 32 | } 33 | 34 | .layout-2DM8Md{ 35 | padding: 4px; 36 | border-radius: 0; 37 | } 38 | 39 | // List item name 40 | .name-uJV0GL{ 41 | @include FontBody; 42 | } 43 | } 44 | } 45 | 46 | // Main 47 | .pageWrapper-1PgVDX{ 48 | background-color: $ChromeMediumLow; 49 | 50 | // Remove max-width 51 | .viewWrapper-8-8h4T{ 52 | max-width: none; 53 | } 54 | 55 | // Search 56 | .searchHeader-2I26nG{ 57 | margin: -40px -40px 32px -40px; 58 | .headerImage-3X1tyY{ 59 | border-radius: 0; 60 | clip-path: inset(8px); 61 | } 62 | .search-1iTphC{ 63 | margin: auto; 64 | } 65 | } 66 | 67 | 68 | .searchBox-3Y2Vi7{ 69 | background-color: transparent; 70 | border: 0; 71 | border-radius: 0; 72 | box-shadow: none; 73 | input{ 74 | padding-right: 32px; 75 | color: $BaseHigh; 76 | &::-webkit-input-placeholder{ 77 | color: $BaseMedium; 78 | } 79 | &:hover{ 80 | color: $BaseHigh; 81 | &::-webkit-input-placeholder{ 82 | color: $BaseMedium; 83 | } 84 | } 85 | &:focus{ 86 | color: $ChromeBlackHigh; 87 | &::-webkit-input-placeholder{ 88 | color: $AltMedium; 89 | } 90 | } 91 | } 92 | // Remove "press enter to search" text 93 | .cta-BiH9zX{ 94 | display: none; 95 | } 96 | 97 | // Move clear button into search box 98 | .clear-U3WkKp{ 99 | position: absolute; 100 | right: 12px; 101 | svg{ 102 | height: 16px; 103 | color: #FFF; 104 | } 105 | } 106 | .searchBoxInputWrapper-nKncfu:focus-within ~ .clear-U3WkKp{ 107 | svg{ 108 | color: #000; 109 | } 110 | } 111 | } 112 | 113 | // Servers 114 | .card-3DjzTQ{ 115 | background-color: $ChromeMedium; 116 | border-radius: 0; 117 | .guildInfo-2wGKIg{ 118 | background-color: $ChromeMedium; 119 | } 120 | } 121 | 122 | // Search results 123 | .categories-1ywIbh{ 124 | max-width: none; 125 | .categoryPill-34fszg{ 126 | margin-right: 24px; 127 | padding: 4px 0; 128 | border-radius: 0; 129 | &:hover{ 130 | background-color: transparent; 131 | .categoryLabel-2G3r2V{ 132 | color: $BaseMediumHigh; 133 | } 134 | } 135 | &.selected-1dONk0{ 136 | background-color: transparent; 137 | border-bottom: 2px solid $Accent; 138 | .categoryLabel-2G3r2V{ 139 | color: $BaseHigh; 140 | } 141 | } 142 | 143 | .categoryLabel-2G3r2V{ 144 | color: $BaseMedium; 145 | @include FontBody; 146 | } 147 | } 148 | } 149 | 150 | // Language select dropdown 151 | .languageSelector-LEtpHP{ 152 | height: 32px; 153 | .css-1pcexqc-container{ 154 | background-color: transparent; 155 | border: 1px solid $BaseMedium; 156 | border-radius: 2px; 157 | &:hover{ 158 | border-color: $BaseMediumHigh; 159 | } 160 | .css-1b86x2o-control, 161 | .css-1o55ng5-control{ 162 | min-height: 32px; 163 | height: 32px; 164 | @include FontBody; 165 | } 166 | .css-123uooi-menu{ 167 | background-color: $ChromeMedium; 168 | border-radius: 0; 169 | box-shadow: none; 170 | } 171 | } 172 | } 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /src/components/home/friends/_add_friend.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-1D34oG{ 2 | .peopleColumn-29fq28{ 3 | .sectionHeader-20RGqu{ 4 | background-color: transparent; 5 | background-image: none; 6 | border: 0; 7 | } 8 | .addInputWrapper-1BOZ3d{ 9 | h2{ 10 | @include FontSubtitle; 11 | } 12 | .description-1EvxpH{ 13 | @include FontBody; 14 | } 15 | 16 | .wrapper-1cBijl{ 17 | height: 64px; 18 | padding: 0; 19 | background-color: transparent; 20 | border: 0; 21 | border-radius: 0; 22 | input{ 23 | height: 32px; 24 | padding: 0 10px; 25 | box-sizing: border-box; 26 | background-color: $AltMediumLow; 27 | border: 2px solid $BaseMedium; 28 | border-radius: 2px; 29 | @include FontBody; 30 | letter-spacing: normal; 31 | &:hover{ 32 | background-color: $AltMedium; 33 | border-color: $BaseMediumHigh; 34 | } 35 | &:focus{ 36 | background-color: $ChromeWhite; 37 | border-color: $Accent; 38 | color: $AltMedium; 39 | &::-webkit-input-placeholder{ 40 | color: $AltMedium; 41 | } 42 | ~ .addFriendHint-3Y70FX{ 43 | color: $AltMedium; 44 | } 45 | } 46 | &::-webkit-input-placeholder{ 47 | color: $BaseMedium; 48 | } 49 | } 50 | .addFriendHint-3Y70FX{ 51 | left: 12px; 52 | color: $BaseMedium; 53 | @include FontBody; 54 | line-height: calc(32px * 2); // input height * 2 55 | letter-spacing: normal; 56 | z-index: 1; 57 | } 58 | } 59 | } 60 | .friendTableSuggestionsHeader-2zSnpD{ 61 | border: 0; 62 | h2{ 63 | @include FontBody; 64 | } 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/components/home/friends/_call.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .wrapper-KXM2i0{ 2 | background-color: $ChromeLow; 3 | } 4 | .theme-dark .videoControls-2EXLlI{ 5 | padding-top: 0; 6 | 7 | // Region select 8 | .quickSelect-3BxO0K{ 9 | padding-top: 8px; 10 | .quickSelectLabel-2r3iJ_{ 11 | color: $BaseHigh; 12 | @include FontBody; 13 | text-transform: capitalize; 14 | &::after{ 15 | content: ":"; 16 | } 17 | } 18 | .quickSelectClick-1HOWp1{ 19 | margin-left: 4px; 20 | color: $BaseHigh; 21 | @include FontBody; 22 | &:hover{ 23 | color: $BaseMedium; 24 | } 25 | } 26 | } 27 | 28 | // Change icons 29 | .bottomControls-2HI3wi{ 30 | button:not(.mainButton-1Qp9DO):not(.joinVoiceCallButton-nW7zgb){ 31 | &::before{ 32 | color: $BaseHigh; 33 | @include FontIcon; 34 | font-size: 20px; 35 | } 36 | &:hover::before{ 37 | color: $BaseMedium; 38 | } 39 | .contents-18-Yxp{ 40 | display: none; 41 | } 42 | } 43 | button.mainButton-1Qp9DO{ 44 | text-transform: none; 45 | } 46 | button[aria-label="Turn On Screen Share"]{ 47 | &::before{ 48 | content: "\EC15"; 49 | } 50 | } 51 | button[aria-label="Turn On Camera"]{ 52 | &::before{ 53 | content: "\E722"; 54 | color: $BaseMediumLow; 55 | } 56 | } 57 | button[aria-label="Turn Off Camera"]{ 58 | &::before{ 59 | content: "\E722"; 60 | color: $BaseMediumLow; 61 | } 62 | } 63 | button[aria-label="Camera Unavailable"]{ 64 | &::before{ 65 | content: "\E722"; 66 | color: $BaseMediumLow; 67 | cursor: not-allowed; 68 | } 69 | } 70 | button[aria-label="Mute"]{ 71 | &::before{ 72 | content: "\E720"; 73 | } 74 | } 75 | button[aria-label="Unmute"]{ 76 | &::before{ 77 | content: "\EC54"; 78 | color: $alert; 79 | } 80 | } 81 | button[aria-label="User Settings"]{ 82 | &::before{ 83 | content: "\E713"; 84 | } 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/components/home/friends/_conversation_list.scss: -------------------------------------------------------------------------------- 1 | .privateChannels-1nO12o{ 2 | background-color: transparent; 3 | 4 | // Remove search 5 | .searchBar-6Kv8R2{ 6 | height: 40px; 7 | background-color: $ChromeBlackMediumLow; 8 | &::before{ 9 | content: "Home"; 10 | color: $BaseHigh; 11 | @include FontBase; 12 | } 13 | button{ 14 | width: 40px; 15 | height: 40px; 16 | position: absolute; 17 | right: 0; 18 | background-color: transparent; 19 | border-radius: 0; 20 | font-size: 0; 21 | line-height: 40px; 22 | &:hover{ 23 | background-color: $ListLow; 24 | } 25 | &::before{ 26 | content: "\E721"; 27 | margin: 6px; 28 | color: $BaseHigh; 29 | font-size: 16px; 30 | @include FontIcon; 31 | } 32 | } 33 | } 34 | 35 | // List 36 | .scroller-1JbKMe{ 37 | background-color: transparent; 38 | overflow-y: auto !important; 39 | &#private-channels{ 40 | margin: -8px 0; 41 | } 42 | 43 | // Remove header 44 | .privateChannelsHeaderContainer-3NB1K1{ 45 | display: none; 46 | } 47 | 48 | // Channel 49 | .channel-2QD9_O{ 50 | max-width: unset; 51 | &[href="/store"]{ 52 | display: none; 53 | } 54 | &[href^="/channels/@me"]{ 55 | margin-left: 48px; 56 | } 57 | &[href^="/library"]{ 58 | margin-left: 48px; 59 | } 60 | &[href^="/discovery"]{ 61 | margin-left: 48px; 62 | } 63 | 64 | .layout-2DM8Md{ 65 | height: 48px; 66 | padding: 0 8px !important; 67 | &:hover{ 68 | background-color: $ListLow; 69 | } 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/home/friends/_table.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-1D34oG{ 2 | background-color: transparent; 3 | .tabBody-3YRQ8W{ 4 | background-color: $ChromeMediumLow; 5 | &::before{ 6 | content: unset; 7 | } 8 | .peopleColumn-29fq28{ 9 | .auto-Ge5KZx{ 10 | overflow-y: auto !important; 11 | } 12 | // Header 13 | .title-30qZAO{ 14 | margin: 0; 15 | padding: 16px 20px 8px 20px; 16 | color: $BaseHigh; 17 | } 18 | .container-2ax-kl{ 19 | @include FontSubtitle; 20 | } 21 | 22 | // Person list 23 | .peopleListItem-2nzedh{ 24 | margin: 0; 25 | padding-left: 20px; 26 | padding-right: 20px; 27 | &:hover{ 28 | background-color: $ListLow; 29 | border-radius: 0; 30 | } 31 | 32 | 33 | .actionButton-uPB8Fs{ 34 | background-color: transparent; 35 | border-radius: 0; 36 | &:hover{ 37 | background-color: $ListLow; 38 | } 39 | 40 | } 41 | 42 | } 43 | 44 | // Username 45 | .username-31C1TQ{ 46 | @include FontBody; 47 | } 48 | .discriminator-22Okc1{ 49 | @include FontBody; 50 | } 51 | 52 | // Empty state 53 | .friendsEmpty-1K9B4k{ 54 | .image-1GzsFd{ 55 | display: none; 56 | } 57 | .text-GwUZgS{ // ecksdee 58 | color: $BaseHigh; 59 | } 60 | } 61 | } 62 | 63 | // Activity 64 | .container-lRFx4q{ 65 | background-color: $ChromeLow; 66 | .scroller-2ZPeAD{ 67 | border: 0; 68 | } 69 | .header-13Cw0-{ 70 | color: $BaseHigh; 71 | @include FontSubtitle; 72 | text-transform: none; 73 | } 74 | .emptyCard-1RJw8n{ 75 | padding: 0; 76 | align-items: flex-start; 77 | background-color: transparent; 78 | h5{ 79 | @include FontBody; 80 | } 81 | .emptyText-2zjpZr{ 82 | display: none; 83 | } 84 | } 85 | .itemCard-v9viV7{ 86 | padding: 8px; 87 | padding-bottom: 12px; 88 | background-color: transparent; 89 | border: 1px solid #333; 90 | border-radius: 0; 91 | &:last-child{ 92 | border-bottom: 0; 93 | } 94 | 95 | // Inset 96 | .body-1ld4H7{ 97 | margin-left: 46px; 98 | background-color: $ChromeMedium; 99 | border-radius: 0; 100 | } 101 | 102 | // Live badge 103 | .live-vBWnV6{ 104 | background-color: $alert !important; 105 | border-radius: 50%; 106 | } 107 | 108 | // Game stream preview 109 | .applicationStreamingPreviewWrapper-8QqvVY{ 110 | border-radius: 0; 111 | } 112 | .emptyPreviewContainer-1KOcxV{ 113 | background-color: $ChromeMedium; 114 | border: 2px dashed $AltHigh; 115 | .emptyPreviewImage-IBznSI{ 116 | display: none; 117 | } 118 | .emptyPreviewText-2IOfAL{ 119 | color: $BaseHigh; 120 | @include FontBody; 121 | } 122 | } 123 | .applicationStreamingHoverText-IEVyfS{ 124 | width: 100%; 125 | background-color: $AltHigh; 126 | text-align: center; 127 | border-radius: 0; 128 | } 129 | } 130 | } 131 | } 132 | } 133 | 134 | // Replace icons 135 | html[lang^="en-"].theme-dark .container-1D34oG{ 136 | .actionButton-uPB8Fs{ 137 | svg{ 138 | display: none; 139 | } 140 | &::before{ 141 | color: $BaseHigh; 142 | @include FontIcon; 143 | font-size: 16px; 144 | } 145 | &[aria-label="Message"]::before{ 146 | content: "\E8BD"; 147 | } 148 | &[aria-label="More"]::before{ 149 | content: "\E712"; 150 | } 151 | &[aria-label="Accept"]::before{ 152 | content: "\E8FB"; 153 | } 154 | &[aria-label="Ignore"]::before{ 155 | content: "\E711"; 156 | } 157 | &[aria-label="Unblock"]::before{ 158 | content: "\E711"; 159 | } 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/components/home/friends/_toolbar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-1D34oG .container-1r6BKw{ 2 | // LTR 3 | height: 40px; 4 | padding: 0; 5 | background-color: $ChromeBlackMediumLow; 6 | box-shadow: none; 7 | 8 | // Left tabs 9 | .children-19S4PO{ 10 | // Remove current icon, and 'channel' name 11 | .iconWrapper-2OrFZ1{ 12 | display: none; 13 | } 14 | .title-29uC1r{ 15 | display: none; 16 | } 17 | .divider-3FBTu8{ 18 | display: none; 19 | } 20 | .tabBar-ZmDY9v{ 21 | .item-PXvHYJ{ 22 | height: 40px; 23 | background-color: transparent !important; 24 | border-radius: 0; 25 | color: $BaseMedium !important; 26 | @include FontBody; 27 | 28 | &:hover{ 29 | color: $BaseMediumHigh !important; 30 | } 31 | 32 | // Selected 33 | &.selected-3s45Ha, 34 | &[style*="rgba(67, 181, 129, 0.2)"]{ 35 | color: $BaseHigh !important; 36 | background-color: transparent !important; 37 | &::before{ 38 | content: ""; 39 | width: calc(100% - 16px); 40 | height: 2px; 41 | position: absolute; 42 | top: 34px; 43 | background-color: $Accent; 44 | border-radius: 1px; 45 | } 46 | } 47 | } 48 | } 49 | &::after{ 50 | display: none; 51 | } 52 | } 53 | 54 | // Buttons 55 | .toolbar-1t6TWx{ 56 | .iconWrapper-2OrFZ1{ 57 | width: 68px; 58 | height: 40px; 59 | margin: 0; 60 | > svg{ // Non-EN position fix 61 | position: absolute; 62 | top: 6px; 63 | left: 22px; 64 | } 65 | &:hover{ 66 | background-color: $ListLow; 67 | } 68 | &.selected-1GqIat{ 69 | background-color: $ListAccentLow; 70 | } 71 | &::before{ 72 | width: 68px; 73 | height: 40px; 74 | position: absolute; 75 | color: $BaseHigh; 76 | @include FontIcon; 77 | font-size: 16px; 78 | text-align: center; 79 | line-height: 40px; 80 | } 81 | // For Inbox notifications 82 | &.badge-2qGa_k::after{ 83 | width: 34px; 84 | height: 2px; 85 | bottom: 4px; 86 | right: 16px; 87 | background-color: $Accent; 88 | border: 0; 89 | } 90 | } 91 | .divider-3FBTu8{ 92 | display: none; 93 | } 94 | a[href="https://support.discord.com"]{ 95 | display: none; 96 | } 97 | } 98 | } 99 | 100 | 101 | html[lang^="en-"].theme-dark .container-1D34oG .container-1r6BKw{ 102 | .iconWrapper-2OrFZ1 > svg{ 103 | display: none; 104 | } 105 | div[aria-label="New group DM"]::before, 106 | div[aria-label="New Group DM"]::before{ 107 | content: "\E902"; 108 | } 109 | div[aria-label="Inbox"]::before{ 110 | content: "\E715"; 111 | } 112 | div[aria-label="Update Ready!"]{ 113 | &::before{ 114 | content: "\ECC5"; 115 | } 116 | &::after{ 117 | content: ""; 118 | width: 50%; 119 | height: 2px; 120 | position: absolute; 121 | bottom: 4px; 122 | left: calc(50% - 25%); 123 | background-color: $alert; 124 | border-radius: 1px; 125 | animation: blink 2s ease-out infinite; 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/components/icons/_core.scss: -------------------------------------------------------------------------------- 1 | // Most icons in this file by https://icons8.com 2 | .theme-dark{ 3 | // Server Toolbar 4 | .chat-3bRxxu .title-3qD0b-, 5 | .container-3gCOGc .container-1r6BKw{ 6 | .search-2oPWTC .searchBar-3dMhjb{ 7 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMAEDBPUGBvcI+Qn6DP0N/g7/DWADvhAAAAmElEQVR4Ab2R4Q6DIAwGkaFMgXa793/YxURiLMzEP9wvm5MP2rrxzFuGvL3+6CAcSOj5FTR653xUeHd9rN8R1iYf/Fl5sLdoPV8zxLwfNQdMRDoDakS61AXvLnjypQZngGc/aHtFefbIGblvsx2UPh319IHlZllT5guy7OtepOvLFJQDDT2/95IUSqraessw70LrDcH6sfwAxRkI55lYy9wAAAAASUVORK5CYII=); 8 | } 9 | } 10 | // Upload modal 11 | div[class^="uploadModal"] div[class^="inner"] div[class^="file-"] div[class^="icon"] { 12 | &[class*="acrobat"], 13 | &[class*="ae"], 14 | &[class*="ai"], 15 | &[class*="archive"], 16 | &[class*="code"], 17 | &[class*="document"], 18 | &[class*="photoshop"], 19 | &[class*="ps"], 20 | &[class*="sketch"], 21 | &[class*="spreadsheet"], 22 | &[class*="unknown"], 23 | &[class*="video"], 24 | &[class*="webcode"]{ 25 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAbFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8+T+BWAAAAI3RSTlMABQ4PECAkKC0wMjc9QGB1f4Cgv8DHyczN4OLm5+rt8PP192v0xVYAAADJSURBVHja7dPbDsFQEIXhoYqi2GznQ4v3f0cJ6XLRpGk3KyrWfz3Jl5lkTCnV2mJXt1k4kt5qt46ICNp2qQgUKgKFi0AJR3x12UvphSNWnS/twkKgUBEoVAQKBVk+hhb7Qol4yDw+YBfauZz1T1B4iA3OUHiIDTMoPMRGORQeYuMLFB5ikysUArLzz47FV26izyPlVh0iglIh30KmrlQI0jghQoQIESJEiBAhQoQIESJEiBAhQv4ccY1rhgQm5LeRxL9VYkqptnYHdgDuPCcIJAIAAAAASUVORK5CYII=); 26 | background-size: 64px; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/loadscreens/_connecting.scss: -------------------------------------------------------------------------------- 1 | .container-16j22k{ 2 | background-color: transparent; 3 | 4 | .content-1-zrf2{ 5 | width: 256px; 6 | height: 64px; 7 | background-image: url(https://i.imgur.com/MfeQkLJ.gif); 8 | background-position: center; 9 | background-repeat: no-repeat; 10 | background-size: 32px; 11 | filter: invert(100%); 12 | &::after{ 13 | content: "Loading..."; 14 | width: 256px; 15 | text-align: center; 16 | position: absolute; 17 | top: 72px; 18 | left: 0; 19 | color: $BaseHigh; 20 | font-size: 32px; 21 | font-style: normal; 22 | font-weight: 300; 23 | text-transform: none; 24 | filter: invert(100%); 25 | } 26 | } 27 | 28 | // Remove video, we use our own spinner 29 | video{ 30 | display: none; 31 | img{ 32 | display: none; 33 | } 34 | } 35 | // Remove tip 36 | .text-3c9Zq1{ 37 | display: none; 38 | 39 | } 40 | 41 | // Links to Twitter, Status page 42 | .problems-3mgf6w{ 43 | align-items: flex-end; 44 | padding-right: 20px; 45 | padding-bottom: 20px; 46 | .problemsText-1Yx-Kl{ 47 | display: none; 48 | } 49 | a.twitterLink-3NsWMp, 50 | a.statusLink-gFXhrL{ 51 | width: 48px; 52 | height: 48px; 53 | display: inline-block; 54 | margin-left: 8px; 55 | font-size: 0; 56 | transition: background .3s; 57 | text-align: center; 58 | line-height: 48px; 59 | vertical-align: middle; 60 | svg{ 61 | width: 24px; 62 | height: 24px; 63 | color: $BaseHigh; 64 | } 65 | &:hover{ 66 | background-color: $ListLow; 67 | transition: background .3s; 68 | } 69 | } 70 | a.statusLink-gFXhrL{ 71 | margin-left: 4px; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/components/loadscreens/_no_text_channels.scss: -------------------------------------------------------------------------------- 1 | .theme-dark div[class^="noChannel-"]{ 2 | background-color: $ChromeMediumLow; 3 | div[class^="image-"]{ 4 | display: none; 5 | } 6 | h4{ 7 | color: $BaseHigh; 8 | @include FontSubtitle; 9 | text-align: left; 10 | text-transform: none; 11 | } 12 | div[class^="text-"]{ 13 | margin-top: 24px; 14 | color: $BaseHigh; 15 | @include FontBody; 16 | text-align: left; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/misc/_bot_tag.scss: -------------------------------------------------------------------------------- 1 | .bot-tag{ 2 | background-color: #000; 3 | padding: .2em .6em .3em; 4 | border-radius: 0; 5 | font-size: 10px; 6 | font-weight: normal; 7 | text-transform: lowercase; 8 | vertical-align: middle; 9 | } 10 | 11 | span[class*="botTag-"]{ 12 | padding: .2em .6em .3em; 13 | background-color: #000; 14 | border-radius: 0; 15 | font-weight: normal; 16 | text-transform: lowercase; 17 | vertical-align: middle; 18 | } 19 | span[class*="botTagInvert-"]{ 20 | background-color: #000; 21 | color: #FFF; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/misc/_keyboard_shortcut.scss: -------------------------------------------------------------------------------- 1 | .theme-dark div[class^="keybindShortcut-"]{ 2 | color: #FFF; 3 | @include FontMonospace; 4 | font-weight: normal; 5 | span{ 6 | background-color: transparent; 7 | border: 1px solid #FFF; 8 | border-bottom: 4px solid #FFF; 9 | box-shadow: none; 10 | color: #FFF; 11 | g{ 12 | fill: #FFF !important; 13 | } 14 | 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/misc/_loading.scss: -------------------------------------------------------------------------------- 1 | // Loading embedded image 2 | span[class^="spinner-"]{ 3 | span[class^="inner-"]{ 4 | span[class^="wanderingCubesItem"]:first-of-type{ 5 | width: 32px; 6 | height: 32px; 7 | background-color: transparent; 8 | background-image: url(https://i.imgur.com/MfeQkLJ.gif); 9 | background-position: center center; 10 | background-size: 32px 32px; 11 | filter: invert(100%); 12 | animation: none; 13 | } 14 | span[class^="wanderingCubesItem"]:last-of-type{ 15 | display: none; 16 | } 17 | } 18 | } 19 | 20 | // Loading chat messages 21 | .wrapper-3vR61M{ 22 | background-color: transparent; 23 | // The placeholding items wrappers 24 | .wrapper-1F5TKx{ 25 | display: none; 26 | } 27 | &::before, 28 | &::after{ 29 | content: ""; 30 | height: 4px; 31 | position: absolute; 32 | // Hacks ahead 33 | // 100vh - titlebar - toolbar - scrollbar spacer - chatbox - height of ::before,::after 34 | bottom: calc(100vh - 32px - 40px - 30px - 48px - 4px); 35 | left: 0; 36 | border-radius: 2px; 37 | } 38 | &::before{ 39 | background-color: $Accent; 40 | animation: indeterminateLoadingInc 3s infinite; 41 | } 42 | &::after{ 43 | background-color: $Accent; 44 | animation: indeterminateLoadingDec 3s 1.5s infinite; 45 | } 46 | 47 | @keyframes indeterminateLoadingInc{ 48 | from{ 49 | left: -5%; 50 | width: 5%; 51 | } 52 | to{ 53 | left: 130%; 54 | width: 100%; 55 | } 56 | } 57 | @keyframes indeterminateLoadingDec{ 58 | from{ 59 | left: -80%; 60 | width: 80%; 61 | } 62 | to{ 63 | left: 110%; 64 | width: 10%; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/components/misc/_status_circle.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | rect[mask="url(#svg-mask-status-online)"]{ 3 | fill: $statusonline; 4 | } 5 | rect[mask="url(#svg-mask-status-idle)"]{ 6 | fill: $statusidle; 7 | } 8 | rect[mask="url(#svg-mask-status-dnd)"]{ 9 | fill: $statusdnd; 10 | } 11 | rect[mask="url(#svg-mask-status-online)"]{ 12 | fill: $statusonline; 13 | } 14 | rect[mask="url(#svg-mask-status-streaming)"]{ 15 | fill: $statusstreaming; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/mixins/_font.scss: -------------------------------------------------------------------------------- 1 | @mixin FontHeader{ 2 | font-size: 46px; 3 | font-weight: 300; // Light 4 | line-height: 56px; 5 | } 6 | @mixin FontSubheader{ 7 | font-size: 34px; 8 | font-weight: 300; // Light 9 | line-height: 40px; 10 | } 11 | @mixin FontTitle{ 12 | font-size: 24px; 13 | font-weight: 300; // Default is actually 400 (semilight) 14 | line-height: 28px; 15 | } 16 | @mixin FontSubtitle{ 17 | // Modal header 18 | font-size: 20px; 19 | font-weight: 400; // Normal 20 | letter-spacing: normal; 21 | line-height: 24px; 22 | text-transform: none; 23 | } 24 | @mixin FontSubtitleAlt{ 25 | font-size: 18px; 26 | font-weight: 400; // Normal 27 | line-height: 22px; 28 | } 29 | @mixin FontBody{ 30 | font-size: 14px; 31 | font-weight: 400; // Normal 32 | line-height: 20px; 33 | } 34 | @mixin FontBase{ 35 | font-size: 14px; 36 | font-weight: 600; // Semibold 37 | line-height: 20px; 38 | } 39 | @mixin FontBaseAlt{ 40 | font-size: 14px; 41 | font-weight: 700; // Bold 42 | line-height: 20px; 43 | } 44 | @mixin FontCaptionAlt{ 45 | font-size: 13px; 46 | font-weight: 400; // Normal 47 | line-height: 16px; 48 | } 49 | @mixin FontCaption{ 50 | // Command bar button label 51 | // App titlebar 52 | font-size: 12px; 53 | font-weight: 400; // Normal 54 | line-height: 15px; 55 | } 56 | @mixin FontIcon{ 57 | font-family: "Segoe MDL2 Assets"; 58 | } 59 | @mixin FontNormal{ 60 | font-family: "Segoe UI", Arial, Helvetica, sans-serif; 61 | } 62 | @mixin FontMonospace { 63 | font-family: Consolas, Menlo, Monaco, "Courier New", monospace; 64 | } 65 | -------------------------------------------------------------------------------- /src/components/modal/_broadcast.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .modalOverhang-3WFc1y{ 2 | // remove art 3 | .art-2gnmb7{ 4 | display: none; 5 | } 6 | 7 | .modal-yWgWj-{ 8 | .header-3po9qd{ 9 | align-items: unset; 10 | padding-top: 0; 11 | .headerText-2ghQL3{ 12 | @include FontSubtitle; 13 | } 14 | .headerDescription-2zd5Co{ 15 | padding: 0; 16 | @include FontBody; 17 | text-align: left; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/modal/_changelog.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .layer-2KE1M9 .root-1gCeng{ 2 | p, 3 | ul li{ 4 | color: $BaseHigh; 5 | @include FontBody; 6 | } 7 | 8 | // Footer text 9 | .footer-2gL1pp{ 10 | .primary-jw0I4K{ 11 | color: $BaseMedium; 12 | @include FontCaption; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/modal/_custom_status.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .layer-2KE1M9 .root-1gCeng{ 2 | .headerContainer-3N-yWX{ 3 | // Remove art work 4 | .art-347BZj{ 5 | display: none; 6 | } 7 | 8 | // Header 9 | .header-3C6qT5{ 10 | padding-top: 0; 11 | align-items: unset; 12 | .headerText-2uyvpY{ 13 | @include FontSubtitle; 14 | } 15 | } 16 | } 17 | // Fix emoji button over lapping input 18 | .inputContainer-1SpwlU{ 19 | &:focus-within{ 20 | .emojiButtonContainer-3d6DFV .contents-18-Yxp{ 21 | &:hover::before{ 22 | color: $ChromeBlackHigh; 23 | } 24 | &::before{ 25 | color: $ChromeBlackHigh; 26 | } 27 | } 28 | } 29 | // Change emoji button to MDL icon 30 | .emojiButtonContainer-3d6DFV{ 31 | padding-top: 2px; 32 | &:hover{ 33 | .contents-18-Yxp{ 34 | &::before{ 35 | color: $BaseHigh; 36 | } 37 | } 38 | } 39 | .contents-18-Yxp{ 40 | &::before{ 41 | content: "\E76E"; 42 | color: $BaseMedium; 43 | @include FontIcon; 44 | font-size: 18px; 45 | 46 | } 47 | .sprite-2iCowe{ 48 | display: none; 49 | } 50 | } 51 | } 52 | .inputWrapper-31_8H8{ 53 | input{ 54 | padding-left: 32px; 55 | padding-right: 32px; 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/components/modal/_deauthorise_application.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .modal-yWgWj-{ 2 | // Deauthorise application and foreign link warning 3 | &.container-14fypd{ 4 | max-height: unset; 5 | // Header 6 | .title-18-Ds0{ 7 | padding-top: 18px; 8 | @include FontSubtitle; 9 | text-align: left; 10 | } 11 | // Content 12 | .body-Mj9Oxz{ 13 | // The url 14 | strong{ 15 | padding: 4px; 16 | color: $alert; 17 | font-size: 15px; 18 | @include FontMonospace; 19 | } 20 | } 21 | 22 | // Footer 23 | .footer-2gL1pp{ 24 | justify-content: unset; 25 | button{ 26 | min-width: auto; 27 | flex: none; 28 | } 29 | .minorAction-OVxOke{ 30 | text-align: right; 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/modal/_instant_invite.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .modal-yWgWj-{ 2 | // Create Instant Invite 3 | &.modal-1k91nT{ 4 | // Search box 5 | .container-2XeR5Z{ 6 | background-color: transparent; 7 | border-radius: 0; 8 | } 9 | .input-1Rv96N{ 10 | height: 32px; 11 | padding: 0 10px; 12 | background-color: $AltMediumLow; 13 | border: 1px solid $BaseMedium; 14 | border-radius: 2px; 15 | color: $BaseHigh; 16 | @include FontBody; 17 | &::-webkit-input-placeholder{ 18 | color: $BaseMedium; 19 | } 20 | &:hover{ 21 | border-color: $BaseMediumHigh; 22 | } 23 | &:focus{ 24 | background-color: $ChromeWhite; 25 | border-width: 2px; 26 | border-color: $Accent; 27 | color: $ChromeBlackHigh; 28 | &::-webkit-input-placeholder{ 29 | color: $AltMedium; 30 | } 31 | } 32 | } 33 | .iconLayout-1WxHy4{ 34 | width: 32px; 35 | height: 32px; 36 | position: absolute; 37 | right: 0; 38 | } 39 | 40 | // Fix copy box having 2 borders 41 | div.input-cIJ7To{ 42 | border: 0; 43 | } 44 | .copyButton-1I8hd3{ 45 | margin-left: 8px; 46 | } 47 | 48 | // Footer 49 | .footerText-2a7NxZ{ 50 | color: $BaseMedium; 51 | @include FontCaption; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/modal/_join_server.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .container-2Yth53{ 2 | .contentWrapper-3WC1ID{ 3 | background-color: $ChromeBlackHigh; 4 | border: 1px solid $BorderTransient; 5 | border-radius: 4px; 6 | } 7 | .inviteContent-3R63XV{ 8 | margin: 18px 23px; 9 | text-align: left; 10 | } 11 | // Server icon 12 | .inviteLargeIcon-HrAH61{ 13 | background-color: $BaseMedium 14 | } 15 | // You've been invited 16 | .colorHeaderSecondary-3Sp3Ft{ 17 | color: $BaseHigh; 18 | @include FontBody; 19 | } 20 | // Server name 21 | .title-jXR8lp{ 22 | justify-content: unset; 23 | @include FontSubtitle; 24 | } 25 | 26 | // Activity 27 | .activityCount-2GgGMq{ 28 | margin-top: 24px; 29 | .pill-1dHPfk{ 30 | background-color: $BaseLow; 31 | .pillMessage-1btqlx{ 32 | color: $BaseHigh; 33 | } 34 | } 35 | } 36 | 37 | // Remove splash 38 | .inviteSplash-40aHus{ 39 | display: none; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/modal/_keyboard_shortcuts.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .keyboardShortcutsModal-3piNz7{ 2 | background-color: $ChromeBlackHigh; 3 | border: 1px solid rgba($color: #FFFFFF, $alpha: 0.2); // EdgeTransient doesn't work on this 4 | 5 | // Header 6 | .modalTitle-37O4n6{ 7 | padding: 19px 23px 0 23px; 8 | .content-2Add9f{ 9 | @include FontSubtitle; 10 | } 11 | } 12 | .modalSubtitle-1Pj5nv{ 13 | padding: 0 23px 19px 23px; 14 | color: $BaseHigh; 15 | @include FontBody; 16 | } 17 | 18 | // Remove DDR 19 | .ddrArrows-lSnH7P{ 20 | display: none; 21 | } 22 | 23 | // Shortcut list 24 | .keyboardShortcutList-13cQ-8{ 25 | height: 710px; 26 | padding: 19px 23px; 27 | // Group header 28 | .keybindDescription-2RDbC2{ 29 | color: $BaseHigh; 30 | @include FontBody; 31 | text-transform: none; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/modal/_lightbox.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .imageWrapper-2p5ogY{ 2 | .embedMedia-1guQoW{ 3 | border-radius: 0; 4 | } 5 | &~.downloadLink-1ywL9o{ 6 | opacity: 1; 7 | @include FontBody; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/modal/_modal.scss: -------------------------------------------------------------------------------- 1 | // Backdrop 2 | .backdrop-1wrmKB, 3 | .backdropWithLayer-3_uhz4{ 4 | opacity: 0.5 !important; 5 | } 6 | 7 | // Modal Type 1 8 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .modal-yWgWj-{ 9 | background-color: $ChromeBlackHigh; 10 | border: 1px solid $BorderTransient; 11 | border-radius: 4px; 12 | 13 | // Header 14 | .header-2tA9Os{ 15 | padding: 18px 23px; 16 | border-radius: 0; 17 | .title-3sZWYQ{ 18 | @include FontSubtitle; 19 | } 20 | } 21 | 22 | // Content 23 | .inner-ZyuQk0{ 24 | padding: 0 23px; 25 | .primary-jw0I4K{ 26 | color: $BaseHigh; 27 | @include FontBody; 28 | } 29 | } 30 | 31 | // Footer 32 | .footer-2gL1pp{ 33 | padding: 18px 23px; 34 | background-color: $ChromeBlackHigh; 35 | border-radius: 0; 36 | box-shadow: none; 37 | } 38 | } 39 | 40 | // Modal Type 2 41 | .theme-dark .layer-2KE1M9 .root-1gCeng{ 42 | background-color: $ChromeBlackHigh; 43 | border: 1px solid $BorderTransient; 44 | border-radius: 4px; 45 | // Header 46 | .header-1TKi98{ 47 | padding: 18px 23px; 48 | border-radius: 0; 49 | .title-3sZWYQ{ 50 | @include FontSubtitle; 51 | } 52 | } 53 | 54 | // Content 55 | .inner-ZyuQk0{ 56 | padding: 0 23px; 57 | .primary-jw0I4K{ 58 | color: $BaseHigh; 59 | @include FontBody; 60 | } 61 | } 62 | 63 | // Footer 64 | .footer-2gL1pp{ 65 | padding: 18px 23px; 66 | background-color: transparent; 67 | border-radius: 0; 68 | box-shadow: none; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/modal/_new_server.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .header-3msK0M{ 3 | align-items: flex-start; 4 | } 5 | 6 | .colorHeaderPrimary-26Jzh-, 7 | .colorHeaderSecondary-3Sp3Ft{ 8 | color: $BaseHigh; 9 | } 10 | 11 | .subtitle-Nw1LLR, .title-3w8xhj{ 12 | text-align: left; 13 | } 14 | 15 | .title-3w8xhj{ 16 | @include FontTitle; 17 | } 18 | .subtitle-Nw1LLR{ 19 | @include FontBody; 20 | } 21 | 22 | 23 | // Server Templates 24 | .templatesList-2E6rTe{ 25 | margin-top: 0; 26 | padding: 0 20px 20px 20px; 27 | } 28 | .container-UC8Ug1{ 29 | padding: 8px 20px; 30 | background-color: $BaseLow; 31 | border: 0; 32 | border-radius: 2px; 33 | .icon-QM5383{ 34 | display: none; 35 | } 36 | .text-1FOLJS{ 37 | color: $BaseHigh; 38 | @include FontBody; 39 | } 40 | .arrow-hynWUl{ 41 | margin-right: 0; 42 | } 43 | } 44 | 45 | // 'Have an invite?' 46 | .optionHeader-1-5lcp{ 47 | @include FontBody; 48 | text-transform: none; 49 | } 50 | 51 | // Footer 52 | .footer-1NnaNd{ 53 | align-items: flex-start; 54 | } 55 | .footerTitle-2CYZch{ 56 | color: $BaseHigh; 57 | @include FontBody; 58 | text-transform: none; 59 | } 60 | // Back button 61 | .lookBlank-3eh9lL{ 62 | color: $BaseHigh; 63 | } 64 | 65 | // Paste invite link 66 | // The text input has a different background for some reason? 67 | .input--jS-j2{ 68 | background: none; 69 | } 70 | 71 | // Sample links 72 | .sampleLink-2NLvZg{ 73 | color: $Accent; 74 | } 75 | 76 | // Create own server 77 | // T&Cs 78 | .guidelines-1NSoht{ 79 | color: $BaseMedium; 80 | } 81 | // Checkbox label 82 | .creationIntentText-3OlELP{ 83 | color: $BaseHigh; 84 | @include FontBody; 85 | } 86 | } -------------------------------------------------------------------------------- /src/components/modal/_phone.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .modal-yWgWj-{ 2 | // Phone verification 3 | &.phoneVerificationModal-OzcDc3{ 4 | min-height: unset; 5 | justify-content: unset; 6 | align-items: unset; 7 | padding-bottom: 19px; 8 | // Remove image from top of modal 9 | .animationContainer-WJHr_z{ 10 | display: none; 11 | } 12 | // Fix header 13 | .title-3qNdae{ 14 | margin: 18px 23px; 15 | color: $BaseHigh; 16 | @include FontSubtitle; 17 | text-align: left; 18 | } 19 | // Description 20 | .description-3JBgvQ{ 21 | padding: 0 23px; 22 | color: $BaseHigh; 23 | @include FontBody; 24 | text-align: left; 25 | } 26 | 27 | // Phone field 28 | .phoneField-38N1bJ{ 29 | background-color: transparent; 30 | .countryButton-3xq3Ts{ 31 | height: 32px; 32 | background-color: $AltMediumLow; 33 | border: 1px solid $BaseMedium; 34 | border-radius: 2px; 35 | &:hover{ 36 | background-color: $AltMedium; 37 | border-color: $BaseMediumHigh; 38 | } 39 | } 40 | .inputField-aNPXsv{ 41 | height: 32px; 42 | margin-right: 8px; 43 | background-color: $AltMediumLow; 44 | border: 1px solid $BaseMedium; 45 | border-radius: 2px; 46 | color: $BaseHigh; 47 | @include FontBody; 48 | &:hover{ 49 | background-color: $AltMedium; 50 | border-color: $BaseMediumHigh; 51 | } 52 | &:focus{ 53 | background-color: $ChromeWhite; 54 | border-width: 2px; 55 | border-color: $Accent; 56 | color: $ChromeBlackHigh; 57 | } 58 | } 59 | } 60 | // Fix height of popout list 61 | .phoneFieldPopout-h7c9mt{ 62 | height: auto; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/modal/_pin_delete_message.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .modal-3c3bKg .inner-1ilYF7 .modal-yWgWj-.container-1HKDLE{ 2 | // Message preview 3 | .message-2qRu38{ 4 | background-color: $ChromeMedium; 5 | border-radius: 2px; 6 | } 7 | 8 | // Protip in delete message modal 9 | .pro-1T8RK7{ 10 | @include FontBase; 11 | text-transform: none; 12 | } 13 | .tip-2ab612{ 14 | opacity: 1; 15 | @include FontBody; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/modal/_quickswitcher.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .quickswitcher-3JagVE{ 2 | background-color: $ChromeBlackHigh; 3 | border: 1px solid $BorderTransient; 4 | border-radius: 4px; 5 | color: $BaseHigh; 6 | 7 | .tutorial-3igfYb{ 8 | display: none; 9 | } 10 | 11 | // Input 12 | input{ 13 | height: 32px; 14 | background-color: transparent; 15 | border: 1px solid $BaseMedium; 16 | border-radius: 2px; 17 | color: $BaseHigh; 18 | @include FontBody; 19 | box-sizing: border-box; 20 | &.error-2O5WFJ{ 21 | border-color: $alert; 22 | &::-webkit-input-placeholder{ 23 | color: $alert; 24 | } 25 | } 26 | &:hover{ 27 | border-color: $BaseMediumHigh; 28 | } 29 | &:focus{ 30 | background-color: $ChromeWhite; 31 | border-width: 2px; 32 | border-color: $Accent; 33 | color: #000; 34 | &::-webkit-input-placeholder{ 35 | color: $AltMedium; 36 | } 37 | } 38 | &::-webkit-input-placeholder{ 39 | color: $BaseMedium; 40 | @include FontBody; 41 | } 42 | } 43 | 44 | .scroller-zPkAnE{ 45 | background-color: transparent; 46 | } 47 | 48 | // Empty 49 | .emptyState-2gL-9T{ 50 | padding-top: 90px; 51 | padding-bottom: 90px; 52 | background-image: none; 53 | .emptyStateNote-ZYTetQ{ 54 | color: $BaseHigh; 55 | @include FontBody; 56 | } 57 | .emptyStateCTA-veJ2Cu{ 58 | color: $Accent; 59 | opacity: 1; 60 | } 61 | } 62 | 63 | // Section header 64 | .header-13MUnb{ 65 | color: $BaseHigh; 66 | @include FontBase; 67 | text-transform: none; 68 | } 69 | 70 | // Result line 71 | .result-oB0z--{ 72 | border-radius: 0; 73 | @include FontBody; 74 | .badge-36LyGI{ 75 | background-color: #003b67; 76 | border: 2px solid #1a4e76; 77 | z-index: 2; 78 | text-shadow: none; 79 | border-radius: 11px; 80 | box-shadow: none; 81 | font-weight: normal; 82 | } 83 | .note-S--UP5{ 84 | color: $BaseMedium; 85 | @include FontCaption; 86 | text-transform: none; 87 | } 88 | } 89 | .resultFocused-3aIoYe{ 90 | background-color: $ListAccentLow; 91 | .contentDefault-16dKSY{ 92 | color: $BaseHigh; 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/components/modal/_region_select.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .regionSelectModal-12e-57{ 2 | height: auto !important; 3 | background-color: $ChromeBlackHigh !important; // why is that important? 4 | border: 1px solid $BorderTransient; 5 | border-radius: 4px; 6 | 7 | // Header 8 | .regionSelectModalHeader-21khC1{ 9 | color: $BaseHigh; 10 | @include FontSubtitle; 11 | text-align: left; 12 | } 13 | 14 | // Regions 15 | .regionSelectModalOption-2DSIZ3{ 16 | width: 100%; 17 | height: 32px; 18 | padding: 0 10px; 19 | margin: 0 0 8px 0; 20 | justify-content: flex-start; 21 | flex-direction: row; 22 | background-color: transparent; 23 | border: 1px solid $BaseMedium; 24 | border-radius: 2px; 25 | &:hover{ 26 | background-color: $ListLow; 27 | border-color: $BaseMediumHigh; 28 | } 29 | .regionSelectFlag-3uwFtG{ 30 | width: 36px; 31 | height: 24px; 32 | background-size: 36px 24px; 33 | } 34 | .regionSelectName-2-2FWh{ 35 | padding: 0 8px; 36 | margin: 0; 37 | color: #FFF; 38 | @include FontBody; 39 | text-align: left; 40 | display: inline; 41 | } 42 | } 43 | 44 | // Footer 45 | .regionSelectModalFooter-20C5iA{ 46 | color: $BaseMedium; 47 | @include FontCaption; 48 | text-align: left; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/modal/_upload.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .uploadModal-2ifh8j{ 2 | background-color: $ChromeBlackHigh; 3 | border: 1px solid $BorderTransient; 4 | border-radius: 4px; 5 | 6 | .inner-3nWsbo{ 7 | margin: 18px 23px; 8 | .file-34mY5K{ 9 | margin-bottom: 18px; 10 | .icon-kyxXVr.image-2yrs5j{ 11 | margin: 0 12px 0 0; 12 | border-radius: 2px; 13 | } 14 | .description-2ug5H_{ 15 | padding-top: 0; 16 | .filename-ovv3c5{ 17 | height: 30px; 18 | @include FontSubtitle; 19 | } 20 | } 21 | } 22 | 23 | // Comment 24 | .comment-4IWttf{ 25 | margin: 0; 26 | .label-3aiqT2{ 27 | @include FontBody; 28 | text-transform: none; 29 | } 30 | .channelTextAreaUpload-3t7EIx{ 31 | margin-top: 4px; 32 | border-radius: 2px; 33 | .scrollableContainer-2NUZem{ 34 | background-color: $BaseLow; 35 | border-radius: 2px; 36 | } 37 | } 38 | } 39 | } 40 | 41 | // Footer 42 | .footer-3mqk7D{ 43 | background-color: transparent; 44 | box-shadow: none; 45 | } 46 | } 47 | 48 | // Failed: Files too big 49 | .theme-dark .uploadDropModal-2kTwbc{ 50 | width: 320px; 51 | min-height: 160px; 52 | &.error-kKl9o2{ 53 | padding: 19px 23px; 54 | background-color: $ChromeBlackHigh; 55 | border: 1px solid $alert; 56 | border-radius: 4px; 57 | box-sizing: border-box; 58 | .inner-3nWsbo{ 59 | align-items: unset; 60 | border: 0; 61 | .icons-1w691d{ 62 | display: none; 63 | } 64 | .title-2Vtl4y{ 65 | @include FontSubtitle; 66 | } 67 | .instructions-2Du9gG{ 68 | padding-top: 12px; 69 | color: $BaseHigh; 70 | @include FontBody; 71 | text-align: left; 72 | } 73 | .premiumPromo-3oM7cT{ 74 | margin-top: 0; 75 | padding: 0; 76 | .content-P4SiGI{ 77 | opacity: 1; 78 | color: $BaseMedium; 79 | @include FontCaption; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | 86 | -------------------------------------------------------------------------------- /src/components/modal/_user.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .root-3QyAh1{ 2 | .body-r6_QPy, .topSection-y3p-_D{ 3 | background-color: #000; 4 | } 5 | 6 | // Avatar 7 | .avatar-AvHqJA{ 8 | background-color: #000; 9 | border-color: #000; 10 | } 11 | 12 | // Username 13 | .nameTag-ECvD8P{ 14 | @include FontSubtitle; 15 | } 16 | 17 | // Tabs 18 | .tabBarContainer-37hZsr{ 19 | border: 0; 20 | } 21 | .tabBar-3nvOPa{ 22 | height: 32px; 23 | } 24 | .tabBarItem-3dfX8P{ 25 | margin-right: 24px; 26 | border: 0; 27 | @include FontBase; 28 | &.selected-3s45Ha{ 29 | border: 0; 30 | &::before{ 31 | content: ""; 32 | width: 100%; 33 | height: 2px; 34 | position: absolute; 35 | bottom: 0; 36 | background-color: $Accent; 37 | border-radius: 4px; 38 | } 39 | } 40 | } 41 | 42 | // Body 43 | .body-r6_QPy{ 44 | height: 328px; 45 | } 46 | .userInfoSection-q_35fn+.userInfoSection-q_35fn{ 47 | border: 0; 48 | padding-top: 0; 49 | } 50 | .userInfoSectionHeader-3TYk6R{ 51 | color: $BaseHigh; 52 | @include FontBase; 53 | text-transform: none; 54 | } 55 | // Fix note textbox size 56 | .note-367eZJ{ 57 | margin: 0; 58 | } 59 | 60 | // Connected accounts 61 | .connectedAccount-2Jb-Z0{ 62 | background-color: $ListLow; 63 | border-radius: 2px; 64 | } 65 | .connectedAccountName-E1KzaT{ 66 | @include FontBase; 67 | } 68 | 69 | // No mutuals 70 | .emptyIcon-1yiM-z{ 71 | display: none; 72 | } 73 | .emptyText-2d2yNp{ 74 | color: $BaseHigh; 75 | text-transform: none; 76 | font-weight: normal; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/components/notices/_core.scss: -------------------------------------------------------------------------------- 1 | .notice-2FJMB4{ 2 | border-radius: 0; 3 | @include FontBody; 4 | line-height: 32px; // Override 5 | button{ 6 | padding: 0 12px; 7 | border: 1px solid $BaseMedium; 8 | border-radius: 2px; 9 | @include FontBody; 10 | } 11 | .dismiss-SCAH9H{ 12 | width: 32px; 13 | height: 32px; 14 | opacity: 1; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/notices/_language.scss: -------------------------------------------------------------------------------- 1 | // html[lang="da"], // Danish 2 | // html[lang="de"], // German 3 | // html[lang="es-ES"], // Spanish 4 | // html[lang="fr"], // French 5 | // html[lang="hr"], // Croatian 6 | // html[lang="it"], // Italian 7 | // html[lang="lt"], // Lithuanian 8 | // html[lang="hu"], // Hungary 9 | // html[lang="nl"], // Dutch 10 | // html[lang="no"], // Norwegian 11 | // html[lang="pl"], // Polish 12 | // html[lang="pt-BR"], // Portuguese, Brazilian 13 | // html[lang="ro"], // Romanian 14 | // html[lang="fi"], // Finnish 15 | // html[lang="sv-SE"], // Sweden 16 | // html[lang="vi"], // Vietnamese 17 | // html[lang="tr"], // Turkish 18 | // html[lang="cs"], // Czech 19 | // html[lang="el"], // Greek 20 | // html[lang="bg"], // Bulgarian 21 | // html[lang="ru"], // Russian 22 | // html[lang="uk"], // Ukrainian 23 | // html[lang="th"], // Thai 24 | // html[lang="zh-CN"], // Chinese 25 | // html[lang="ja"], // Japanese 26 | // html[lang="zh-TW"], // Chinese/Taiwan 27 | // html[lang="ko"]{ // Korea 28 | // .app-2rEoOp{ 29 | // padding-top: 32px; 30 | // &::after{ 31 | // content: "This theme requires English to be the selected Language. Press 'CTRL + comma' to open your settings."; 32 | // height: 32px; 33 | // width: 100%; 34 | // position: absolute; 35 | // top: 0; 36 | // display: block; 37 | // z-index: 999; 38 | // background-color: $alert; 39 | // color: #FFF; 40 | // @include FontBody; 41 | // text-align: center; 42 | // line-height: 32px; 43 | // } 44 | // } 45 | // } 46 | -------------------------------------------------------------------------------- /src/components/popouts/_add_game.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .addGamePopout-2RY8Ju{ 2 | background-color: $ChromeMediumLow; 3 | box-shadow: none; 4 | border: 1px solid $BorderTransient; 5 | border-radius: 4px; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-VSDcQc{ 2 | border: 1px inset $BorderTransient; // Using inset to fix weirdness with borders being on the outside of the element 3 | border-radius: 4px; 4 | .autocompleteShadow-iiGWFU{ 5 | display: none; 6 | } 7 | .autocompleteArrowWrapper-3Z7OuM{ 8 | display: none; 9 | } 10 | .header-2bNvm4{ 11 | height: auto; 12 | padding: 12px; 13 | background-color: $ChromeMediumLow; 14 | // ??? 15 | .autocompleteHeaderBackground-30T70q{ 16 | display: none; 17 | } 18 | // Remove label 19 | .headerText-3i6A8K{ 20 | display: none; 21 | } 22 | input[type="text"]{ 23 | height: 32px; 24 | padding: 0 10px; 25 | background-color: $AltMediumLow; 26 | border: 2px solid $BaseMedium; 27 | border-radius: 2px; 28 | box-sizing: border-box; 29 | @include FontBody; 30 | &::-webkit-input-placeholder{ 31 | color: $BaseMedium; 32 | } 33 | &:hover{ 34 | background-color: $AltMedium; 35 | border-color: $BaseMediumHigh; 36 | } 37 | &:focus{ 38 | background-color: $ChromeWhite; 39 | border-color: $Accent; 40 | color: $ChromeBlackHigh; 41 | &::-webkit-input-placeholder{ 42 | color: $AltMedium; 43 | } 44 | } 45 | } 46 | } 47 | // Tags list 48 | .sectionTag-pXyto9{ 49 | background-color: $ChromeMediumLow; 50 | color: $BaseHigh; 51 | .selected-1pIgLL{ 52 | background-image: none; 53 | background-color: $ListLow; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/popouts/_color_picker.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .colorPickerCustom-2CWBn2{ 2 | background-color: $ChromeMediumLow; 3 | border: 1px solid $BorderTransient; 4 | border-radius: 4px; 5 | .saturation-1FDvtn>div, 6 | .saturation-1FDvtn>div>div{ 7 | border-radius: 2px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/popouts/_emoji_picker.scss: -------------------------------------------------------------------------------- 1 | .contentWrapper-SvZHNd{ 2 | background-color: $ChromeMediumLow; 3 | border: 1px solid $BorderTransient; 4 | border-radius: 4px; 5 | } 6 | .theme-dark .emojiPicker-3PwZFl{ 7 | grid-template-rows: 46px auto 48px; // Allows to re-adjust inspector size 8 | background-color: $ChromeMediumLow; 9 | // Fix bug with top border of search box being cut off 10 | // Remove bottom border 11 | .header-8ilj5e{ 12 | padding-top: 1px; 13 | box-shadow: none; 14 | } 15 | // Search 16 | .container-2XeR5Z{ 17 | background-color: transparent; 18 | border-radius: 0; 19 | } 20 | .inner-3ErfOT{ 21 | padding: 0; 22 | } 23 | .input-1Rv96N, // Emoji 24 | .input-3Xdcic{ // GIF 25 | height: 32px; 26 | padding: 0 42px 2px 12px; 27 | background-color: $AltMediumLow; 28 | border: 1px solid $BaseMedium; 29 | border-radius: 2px; 30 | @include FontBody; 31 | color: $BaseHigh; 32 | &::-webkit-input-placeholder{ 33 | color: $BaseMedium; 34 | } 35 | &:hover{ 36 | background-color: $AltMedium; 37 | border-color: $BaseMediumHigh; 38 | } 39 | &:focus{ 40 | background-color: $ChromeWhite; 41 | color: $ChromeBlackHigh; 42 | border-width: 2px; 43 | border-color: $Accent; 44 | &::-webkit-input-placeholder{ 45 | color: $AltMedium; 46 | } 47 | } 48 | } 49 | // Search/clear icon 50 | .iconLayout-1WxHy4, // Emoji 51 | .iconLayout-3OgqU3{ // GIF 52 | position: absolute; 53 | right: 0; 54 | } 55 | 56 | // Diversity selector 57 | .diversitySelector-2kYFHA{ 58 | width: 32px; 59 | height: 32px; 60 | border: 1px solid $BaseMedium; 61 | border-radius: 2px; 62 | box-sizing: border-box; 63 | .diversityEmojiItemImage-2gPNoS{ 64 | width: 20px; 65 | height: 20px; 66 | margin: 4px; 67 | } 68 | } 69 | .diversitySelectorPopout-3FiGaM{ 70 | height: auto !important; 71 | margin-top: -1px; 72 | margin-left: -1px; 73 | background-color: $ChromeMediumLow; 74 | border: 1px solid $Accent; 75 | border-radius: 2px; 76 | box-sizing: border-box; 77 | 78 | .diversityEmojiItem-L6_IXw{ 79 | border-radius: 0; 80 | &:hover{ 81 | background-color: $ListLow; 82 | } 83 | .diversityEmojiItemImage-2gPNoS{ 84 | margin: 2px; 85 | } 86 | } 87 | } 88 | 89 | // Emoji 90 | .emojiPickerListWrapper-fz8KNK{ 91 | .wrapper-1-Fsb8{ 92 | margin-bottom: 4px; 93 | background-color: $ChromeMediumLow; 94 | border-bottom: 1px solid $BaseMedium; 95 | &:hover{ 96 | border-bottom-color: $BaseHigh; 97 | } 98 | .headerLabel-3dG4M-{ 99 | color: $BaseHigh; 100 | @include FontBody; 101 | text-transform: none; 102 | } 103 | } 104 | } 105 | 106 | // Description bar 107 | .inspector-S2gM3e{ 108 | height: 48px; 109 | background-color: $ChromeLow; 110 | } 111 | } 112 | 113 | .theme-dark #emoji-picker-tab-panel{ 114 | // Category list 115 | .categoryList-2Kzf65{ 116 | background-color: $ChromeMedium; 117 | 118 | } 119 | // Replace emoji icons 120 | .categoryItemDefaultCategory-aBZ6nJ{ 121 | &.categoryItem-1D0nxC{ 122 | svg{ 123 | display: none; 124 | } 125 | &::before{ 126 | padding: 2px; 127 | color: $BaseHigh; 128 | @include FontIcon; 129 | font-size: 20px; 130 | line-height: calc(32px - 8px); 131 | vertical-align: middle; 132 | } 133 | &[aria-label="recent"]::before{ 134 | content: "\E81C"; 135 | } 136 | &[aria-label="custom"]::before{ 137 | content: "\E74C"; 138 | } 139 | &[aria-label="people"]::before{ 140 | content: "\ED53"; 141 | } 142 | &[aria-label="nature"]::before{ 143 | content: "\E708"; 144 | } 145 | &[aria-label="food"]::before{ 146 | content: "\ED56"; 147 | } 148 | &[aria-label="activity"]::before{ 149 | content: "\EA86"; 150 | } 151 | &[aria-label="travel"]::before{ 152 | content: "\ED57"; 153 | } 154 | &[aria-label="objects"]::before{ 155 | content: "\ED55"; 156 | } 157 | &[aria-label="symbols"]::before{ 158 | content: "\EB51"; 159 | } 160 | &[aria-label="flags"]::before{ 161 | content: "🏳‍🌈"; 162 | @include FontBody; 163 | } 164 | } 165 | } 166 | } 167 | 168 | #gif-picker-tab-panel{ 169 | // Search 170 | .container-2XeR5Z{ 171 | background-color: transparent; 172 | border-radius: 0; 173 | } 174 | .inner-3ErfOT{ 175 | padding: 0; 176 | } 177 | .input-1Rv96N, // Emoji 178 | .input-3Xdcic{ // GIF 179 | height: 32px; 180 | padding: 0 42px 2px 12px; 181 | background-color: $AltMediumLow; 182 | border: 1px solid $BaseMedium; 183 | border-radius: 2px; 184 | @include FontBody; 185 | color: $BaseHigh; 186 | &::-webkit-input-placeholder{ 187 | color: $BaseMedium; 188 | } 189 | &:hover{ 190 | background-color: $AltMedium; 191 | border-color: $BaseMediumHigh; 192 | } 193 | &:focus{ 194 | background-color: $ChromeWhite; 195 | color: $ChromeBlackHigh; 196 | border-width: 2px; 197 | border-color: $Accent; 198 | &::-webkit-input-placeholder{ 199 | color: $AltMedium; 200 | } 201 | } 202 | } 203 | // Search/clear icon 204 | .iconLayout-1WxHy4, // Emoji 205 | .iconLayout-3OgqU3{ // GIF 206 | position: absolute; 207 | right: 0; 208 | } 209 | .result-3w1ZcL{ 210 | border-radius: 2px; 211 | .gif-1TcNIB{ 212 | border-radius: 2px; 213 | } 214 | .categoryFadeBlurple-1j72_A{ 215 | background-color: rgba(0,0,0,.4); 216 | } 217 | &:hover::after{ 218 | border: 2px solid $Accent; 219 | border-radius: 2px; 220 | box-shadow: none; 221 | } 222 | } 223 | 224 | // Empty 225 | .emptyHints-1EYR-5{ 226 | .emptyHintCard-2mUdMe{ 227 | background-color: $ListLow; 228 | border-radius: 2px; 229 | } 230 | .emptyHintText-1QDF9N{ 231 | color: $BaseHigh; 232 | } 233 | } 234 | 235 | // Whatever the hell this is 236 | .endContainer-1ZDW8j{ 237 | display: none; 238 | } 239 | } 240 | 241 | // Emoji picker opened from chatbox 242 | .theme-dark .contentWrapper-SvZHNd{ 243 | background-color: $ChromeMediumLow; 244 | border: 1px solid $BorderTransient; 245 | border-radius: 4px; 246 | 247 | // Pivot 248 | .nav-7UD0KD{ 249 | .navItem-3Wp_oJ+.navItem-3Wp_oJ{ 250 | margin-left: 0; 251 | } 252 | .navButton-2gQCx-{ 253 | padding: 0 0 8px 0; 254 | margin: 0 12px; 255 | color: $BaseMedium; 256 | &:hover{ 257 | color: $BaseMediumHigh; 258 | } 259 | } 260 | .navButtonActive-1MkytQ{ 261 | background-color: transparent; 262 | color: $BaseHigh; 263 | &::after{ 264 | content: ""; 265 | width: 100%; 266 | height: 2px; 267 | position: absolute; 268 | bottom: 0; 269 | left: 0; 270 | background-color: $Accent; 271 | border-radius: 2px; 272 | } 273 | } 274 | } 275 | 276 | // Fixes double border 277 | #emoji-picker-tab-panel .emojiPicker-3PwZFl{ 278 | border: 0; 279 | } 280 | } 281 | -------------------------------------------------------------------------------- /src/components/popouts/_filter.scss: -------------------------------------------------------------------------------- 1 | // Located in Server settings > Audit Log > Filter by Action 2 | .theme-dark .popoutList-T9CKZQ{ 3 | background-color: $ChromeMediumLow; 4 | border: 1px solid $BorderTransient; 5 | border-radius: 4px; 6 | box-shadow: none; 7 | .input-3Xdcic{ 8 | height: 32px; 9 | padding: 0 32px 0 10px; 10 | background-color: $AltMediumLow; 11 | border: 2px solid $BaseMedium; 12 | border-radius: 2px; 13 | box-sizing: border-box; 14 | @include FontBody; 15 | &::-webkit-input-placeholder{ 16 | color: $BaseMedium; 17 | } 18 | &:hover{ 19 | background-color: $AltMedium; 20 | border-color: $BaseMediumHigh; 21 | } 22 | &:focus{ 23 | background-color: $ChromeWhite; 24 | border-color: $Accent; 25 | color: $ChromeBlackHigh; 26 | &::-webkit-input-placeholder{ 27 | color: $AltMedium; 28 | } 29 | } 30 | } 31 | .iconLayout-3OgqU3{ 32 | width: 32px; 33 | height: 32px; 34 | position: absolute; 35 | right: 0; 36 | } 37 | 38 | // Divider 39 | .divider-3573oO{ 40 | margin: 8px 0; 41 | } 42 | 43 | // List items 44 | .selectableItem-1MP3MQ{ 45 | margin: 0 4px 0 0; 46 | padding: 4px 10px; 47 | border-radius: 2px; 48 | &:hover{ 49 | background-color: $ListLow; 50 | } 51 | &.selected-31soGA{ 52 | background-color: $ListAccentLow !important; 53 | } 54 | &.actionItem-11pIwh{ 55 | height: auto; 56 | } 57 | 58 | .avatar-gPqiLm{ 59 | width: 24px !important; 60 | height: 24px !important; 61 | } 62 | .selectableItemLabel-1RKQjD{ 63 | @include FontBody; 64 | } 65 | } 66 | 67 | .popoutListEmpty-voOEBJ{ 68 | margin-bottom: 1rem; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/popouts/_group_dm.scss: -------------------------------------------------------------------------------- 1 | .popout-103y-5{ 2 | max-height: calc(100vh - 72px) !important; 3 | min-height: calc(100vh - 72px); 4 | position: absolute; 5 | right: -68px !important; 6 | left: initial !important; 7 | margin-top: -8px; 8 | border-radius: 0; 9 | animation: 350ms cubic-bezier(0.19, 1, 0.22, 1) slideinright; 10 | } 11 | 12 | .theme-dark .popout-103y-5{ 13 | background-color: $ChromeLow; 14 | // Header 15 | .header-1TKi98{ 16 | h4{ 17 | @include FontBase; 18 | text-transform: none; 19 | } 20 | .subtitle-2P4u9v{ 21 | color: $BaseMedium; 22 | @include FontCaption; 23 | } 24 | } 25 | 26 | // Search bar 27 | .container-2XeR5Z{ 28 | background-color: transparent; 29 | .input-1Rv96N{ 30 | height: 32px; 31 | padding: 0 10px; 32 | background-color: $AltMediumLow; 33 | border: 1px solid $BaseMedium; 34 | border-radius: 2px; 35 | box-sizing: border-box; 36 | @include FontBody; 37 | &::-webkit-input-placeholder{ 38 | color: $BaseMedium; 39 | } 40 | &:hover{ 41 | background-color: $AltMedium; 42 | border-color: $BaseMediumHigh; 43 | } 44 | &:focus{ 45 | background-color: $ChromeWhite; 46 | border-color: $Accent; 47 | border-width: 2px; 48 | color: $ChromeBlackHigh; 49 | &::-webkit-input-placeholder{ 50 | color: $AltMedium; 51 | } 52 | } 53 | } 54 | // Selected friend 55 | .tag-2gHSR7{ 56 | height: 28px; 57 | margin-top: 3px; 58 | background-color: $ListLow; 59 | @include FontBody; 60 | &:hover{ 61 | background-color: $ListMedium; 62 | } 63 | } 64 | } 65 | 66 | // List 67 | .noResults-ZTbl5V, 68 | .scroller-hUf6zQ{ 69 | max-height: none; 70 | } 71 | .friend-3KALPe{ 72 | height: 32px; 73 | @include FontBody; 74 | &.friendSelected-1sa4bG{ 75 | background-color: $ListLow; 76 | } 77 | 78 | .avatar-vr5NCN{ 79 | height: 24px !important; 80 | width: 24px !important; 81 | } 82 | } 83 | 84 | // No results 85 | .errorState-KkUH_2{ 86 | .errorStateIcon-3fNXE5{ 87 | display: none; 88 | ~div{ 89 | color: $BaseHigh; 90 | @include FontBody; 91 | } 92 | } 93 | } 94 | 95 | // Footer 96 | .footerSeparator-M9dQY1{ 97 | display: none; 98 | } 99 | .footer-1eyGBa{ 100 | flex: unset !important; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/components/popouts/_pinned_recent.scss: -------------------------------------------------------------------------------- 1 | .recentMentionsPopout-3rCiI6, 2 | .messagesPopoutWrap-1MQ1bW{ 3 | max-height: calc(100vh - 72px) !important; 4 | min-height: calc(100vh - 72px); 5 | position: absolute; 6 | right: 0 !important; 7 | left: initial !important; 8 | margin-top: -8px; 9 | border-radius: 0; 10 | animation: 350ms cubic-bezier(0.19, 1, 0.22, 1) slideinright; 11 | } 12 | .messagesPopoutWrap-1MQ1bW:not(.recentMentionsPopout-3rCiI6){ 13 | right: -200px !important; 14 | } 15 | 16 | .theme-dark .container-enaOkj, 17 | .theme-dark .messagesPopoutWrap-1MQ1bW{ 18 | background-color: $ChromeLow; 19 | // Header 20 | .header-ykumBX{ 21 | background-color: $ChromeLow; 22 | box-shadow: none; 23 | // Pivot 24 | .topPill-30KHOu{ 25 | .item-PXvHYJ{ 26 | margin: 8px 12px 0; 27 | padding: 0 0 8px; 28 | background-color: transparent; 29 | border-bottom: 2px solid transparent; 30 | border-radius: 0; 31 | @include FontSubtitle; 32 | color: $BaseMedium; 33 | &:hover{ 34 | color: $BaseMediumHigh; 35 | } 36 | &.selected-3s45Ha{ 37 | border-color: $Accent; 38 | color: $BaseHigh; 39 | } 40 | } 41 | } 42 | // right buttons 43 | .button-1-5Aqk{ 44 | background-color: transparent; 45 | &:hover{ 46 | background-color: $ListLow; 47 | } 48 | &:active{ 49 | background-color: $BaseMediumLow; 50 | } 51 | } 52 | } 53 | 54 | // Tutorial 55 | .tutorial-3w5I9h{ 56 | background-color: $ChromeMediumLow; 57 | border: 1px solid $BorderTransient; 58 | border-radius: 4px; 59 | .tutorialIcon-3f1miQ{ 60 | background-color: transparent; 61 | &::before{ 62 | content: "\E946"; 63 | @include FontIcon; 64 | color: $BaseHigh; 65 | font-size: 24px; 66 | } 67 | svg{ 68 | display: none; 69 | } 70 | } 71 | > div ~ div{ // class? 72 | h3{ 73 | @include FontBase; 74 | } 75 | > div{ // class! 76 | @include FontBody; 77 | color: $BaseHigh; 78 | } 79 | } 80 | } 81 | 82 | // Message 83 | .channel-3pEHab, 84 | .container-3iAQ-0{ // Mentions 85 | .channelHeader-3Gd2xq{ 86 | padding: 0 12px 0 48px; 87 | background-color: $ChromeMediumLow; 88 | border-radius: 4px 4px 0 0; 89 | .guildIcon-3Co6k-{ 90 | border-radius: 50%; 91 | } 92 | // right buttons 93 | .button-1-5Aqk{ 94 | background-color: transparent; 95 | &:hover{ 96 | background-color: $ListLow; 97 | } 98 | &:active{ 99 | background-color: $BaseMediumLow; 100 | } 101 | } 102 | .collapseButton-2ZsEjz{ 103 | left: 12px; 104 | } 105 | } 106 | .messages-3G3erD, 107 | .messageContainer-gbhlwo{ // Mentions 108 | background-color: $ChromeMedium; 109 | border-radius: 0 0 4px 4px; 110 | // Divider 111 | .divider-JfaTT5{ 112 | border-color: $ChromeMediumLow; 113 | span{ 114 | padding: 2px 8px; 115 | background-color: $ChromeMediumLow; 116 | @include FontCaption; 117 | color: $BaseHigh; 118 | } 119 | } 120 | } 121 | } 122 | // Mentions can't be collapsed, so move the server image back to the left 123 | .container-3iAQ-0{ 124 | .channelHeader-3Gd2xq{ 125 | padding: 0 12px; 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/components/popouts/_region_select.scss: -------------------------------------------------------------------------------- 1 | // Region select popout menu. Found in voice call. 2 | .theme-dark .quickSelectPopout-X1hvgV{ 3 | background-color: $ChromeMediumLow; 4 | border: 1px solid $BorderTransient; 5 | border-radius: 4px; 6 | .quickSelectPopoutOption-opKBx9{ 7 | height: 32px; 8 | padding: 0 8px; 9 | &:hover{ 10 | background-color: $ListLow; 11 | border-radius: 0; 12 | } 13 | // Change direction of menu items to flag > region > tick 14 | > .directionRow-3v3tfG{ 15 | flex-direction: row-reverse; 16 | } 17 | 18 | .regionSelectName-c5qL8O{ 19 | height: auto; 20 | color: $BaseHigh; 21 | @include FontBody; 22 | text-align: left; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/popouts/_rtc.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-2x5lvQ{ 2 | background-color: $ChromeMediumLow; 3 | border: 1px solid $BorderTransient; 4 | border-radius: 4px; 5 | .header-2C89wJ{ 6 | justify-content: unset; 7 | background-color: transparent; 8 | border-radius: 0; 9 | text-transform: none; 10 | @include FontBase; 11 | } 12 | section{ 13 | background-color: transparent; 14 | P{ 15 | color: $BaseHigh; 16 | @include FontBody; 17 | strong{ 18 | color: $BaseHigh; 19 | } 20 | &+p{ 21 | margin-top: 8px; 22 | } 23 | } 24 | } 25 | .popoutBottom-31rU82{ 26 | .secured-1Yihly{ 27 | visibility: hidden; 28 | } 29 | a{ 30 | color: $Accent; 31 | @include FontBody; 32 | &:hover{ 33 | color: $BaseMedium; 34 | } 35 | &:active{ 36 | color: $BaseMediumLow; 37 | } 38 | &::after{ 39 | content: " Info"; 40 | } 41 | } 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /src/components/popouts/_search.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-3ayLPN[style="width: 320px;"]{ 2 | max-height: calc(100vh - 72px) !important; 3 | min-height: calc(100vh - 72px); 4 | margin: -3px 0 0 12px; 5 | background-color: $ChromeLow; 6 | border-radius: 0; 7 | 8 | .focused-2bY0OD{ 9 | background-color: transparent; 10 | } 11 | 12 | div[class^="option-"][class*="searchQuery"]{ 13 | display: none; 14 | } 15 | 16 | div[class^="resultsGroup-"]{ 17 | // Remove top border 18 | &::before{ 19 | content: unset; 20 | } 21 | // Header 22 | div[class^="header-"]{ 23 | color: $BaseHigh; 24 | @include FontBase; 25 | text-transform: none; 26 | } 27 | // Option 28 | div[class^="option-"]{ 29 | border-radius: 0; 30 | @include FontBody; 31 | &[class*="selected-"]{ 32 | background-color: $ListLow; 33 | } 34 | &::after{ 35 | display: none; 36 | } 37 | } 38 | div[class*="searchOption-"]{ 39 | span[class^="filter-"], 40 | span[class^="answer-"]{ 41 | color: $BaseHigh; 42 | @include FontBody; 43 | } 44 | } 45 | } 46 | 47 | // Calendar 48 | .react-datepicker{ 49 | background-color: transparent; 50 | // inc/dec month buttons 51 | &__navigation.react-datepicker__navigation--previous{ 52 | width: 10px; 53 | height: 10px; 54 | top: 23px; 55 | right: 60px; 56 | left: initial; 57 | background-image: none; 58 | border: 0; 59 | border-top: 2px solid $BaseHigh; 60 | border-right: 2px solid $BaseHigh; 61 | transform: rotate(-45deg); 62 | &:hover{ 63 | border-color: $BaseMedium; 64 | } 65 | } 66 | &__navigation.react-datepicker__navigation--next{ 67 | width: 10px; 68 | height: 10px; 69 | top: 16px; 70 | right: 30px; 71 | background-image: none; 72 | border: 0; 73 | border-right: 2px solid $BaseHigh; 74 | border-bottom: 2px solid $BaseHigh; 75 | transform: rotate(45deg); 76 | &:hover{ 77 | border-color: $BaseMedium; 78 | } 79 | } 80 | 81 | 82 | // Header 83 | &__header{ 84 | background-color: transparent; 85 | border: 0; 86 | } 87 | // Current month 88 | &__current-month{ 89 | color: $BaseHigh; 90 | @include FontBody; 91 | text-transform: none; 92 | border: 0; 93 | } 94 | // Calendar 95 | // weekdays 96 | &__day-name{ 97 | color: $BaseHigh; 98 | @include FontBody; 99 | text-transform: none; 100 | } 101 | // Week 102 | &__week .react-datepicker__day{ 103 | @include FontBody; 104 | line-height: 40px; // override 105 | border: 2px solid transparent; 106 | border-radius: 0 !important; 107 | &:hover{ 108 | background-color: transparent; 109 | border-color: $BaseMedium; 110 | } 111 | &--outside-month{ 112 | background-color: transparent; 113 | } 114 | &--today{ 115 | background-color: $Accent; 116 | } 117 | &--selected{ 118 | border-color: $BaseMedium; 119 | &::after{ 120 | content: unset; 121 | } 122 | } 123 | &--disabled{ 124 | background-color: transparent; 125 | color: $alert; 126 | &:hover{ 127 | background-color: transparent; 128 | color: $alert; 129 | border-color: $alert; 130 | } 131 | } 132 | } 133 | } 134 | div[class^="datePickerHint-"]{ 135 | border: 0; 136 | span[class^="hint-"]{ 137 | color: #FFF; 138 | @include FontBody; 139 | } 140 | span[class^="hintValue"]{ 141 | background-color: $Accent; 142 | border-radius: 0; 143 | @include FontBody; 144 | &:hover{ 145 | background-color: #FFF; 146 | color: #000; 147 | } 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/components/popouts/_stream_preview.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .streamPreview-2-WUWT{ 2 | background-color: $ChromeMediumLow; 3 | box-shadow: none; 4 | border: 1px solid $BorderTransient; 5 | border-radius: 4px; 6 | 7 | // Remove tip 8 | .protip-3-1FNm{ 9 | display: none; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/popouts/_threads.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-7uh5fX{ 2 | background-color: $ChromeLow; 3 | border: 1px solid $BorderTransient; 4 | 5 | .header-1VS4tm{ 6 | background-color: transparent; 7 | .threadIcon-3XJhLD{ 8 | display: none; 9 | } 10 | .base-1x0h_U{ 11 | @include FontBase; 12 | } 13 | .divider-mDc_D8{ 14 | display: none; 15 | } 16 | 17 | // Tabs 18 | .tab-PQvTH4{ 19 | margin-right: 8px; 20 | @include FontBody; 21 | } 22 | } 23 | 24 | // Items 25 | .sectionHeader-17Aate{ 26 | @include FontBase; 27 | text-transform: none; 28 | } 29 | .container-2I9Hud{ 30 | background-color: $ChromeMediumLow; 31 | border: 1px solid $BorderTransient; 32 | border-radius: 4px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/popouts/_user.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .userPopout-xaxa6l{ 3 | background-color: $AltHigh; 4 | border-radius: 4px; 5 | border: 1px solid $BorderTransient; 6 | 7 | // Avatar 8 | .avatar-37jOim{ 9 | background-color: $AltHigh; 10 | border-color: $AltHigh; 11 | } 12 | 13 | // User has NO nickname 14 | .headerTagNoNickname-3qrd77{ 15 | @include FontSubtitle; 16 | } 17 | // User has nickname 18 | // Nickname 19 | .nickname-3M3Jfa{ 20 | @include FontSubtitle; 21 | } 22 | 23 | // Set server nickname link 24 | .setIdentityLink-1t8Ahd a{ 25 | color: $Accent; 26 | } 27 | 28 | 29 | // Body 30 | .bodyInnerWrapper-26fQXj{ 31 | background: transparent; 32 | } 33 | // Section title 34 | .bodyTitle-1ySSKn{ 35 | @include FontBase; 36 | color: $BaseHigh; 37 | text-transform: none; 38 | } 39 | 40 | // Role 41 | .role-2irmRk{ 42 | height: 24px; 43 | border-radius: 12px; 44 | border-width: 2px; 45 | } 46 | // Add role 47 | .addButton-pcyyf6{ 48 | border-color: $BaseMedium; 49 | color: $BaseMedium; 50 | &:hover{ 51 | border-color: $BaseHigh; 52 | color: $BaseMedium; 53 | } 54 | } 55 | 56 | // Note 57 | .note-1oo11U{ 58 | margin: 0; 59 | } 60 | 61 | // Footer 62 | .footer-3UKYOU{ 63 | background-color: transparent; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/primary/_acrylic.scss: -------------------------------------------------------------------------------- 1 | body, 2 | .container-16j22k{ 3 | // Background is declared in /core/options 4 | background-size: cover; 5 | &::before{ 6 | content: ""; 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | background-color: rgba(#2d2d2d, 0.7); 11 | background-repeat: repeat; 12 | } 13 | // Titlebar hack 14 | &::after{ 15 | content: ""; 16 | width: 100%; 17 | height: 4px; 18 | background-color: $ChromeBlackMediumLow; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | } 23 | } 24 | #app-mount, 25 | .app-2rEoOp, 26 | .bg-h5JY_x{ 27 | background-color: transparent; 28 | } 29 | -------------------------------------------------------------------------------- /src/components/primary/_core.scss: -------------------------------------------------------------------------------- 1 | // This allows us to move the Settings button and user's Avatar to the guilds list instead of the traditional account box 2 | .theme-dark .base-3dtUhz{ 3 | height: calc(100vh - 32px); 4 | position: unset; 5 | margin-left: -48px; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/primary/channels/_account.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .panels-j1Uci_{ 2 | background-color: transparent; 3 | margin-left: 48px; 4 | } 5 | .theme-dark .container-3baos1{ 6 | height: 48px; 7 | margin-bottom: 0; 8 | padding: 0; 9 | 10 | // Hide name 11 | .nameTag-3uD-yy{ 12 | display: none; 13 | } 14 | 15 | .avatarWrapper-2yR4wp{ 16 | 17 | &:hover{ 18 | background-color: $ListLow; 19 | cursor: pointer; 20 | } 21 | .avatar-SmRMf2{ 22 | width: 24px !important; 23 | height: 24px !important; 24 | margin: 12px; 25 | &:hover{ 26 | opacity: 1; 27 | } 28 | } 29 | } 30 | 31 | // Place the setting button in the guilds list 32 | button:last-child{ 33 | position: absolute; 34 | width: 48px; 35 | height: 48px; 36 | bottom: 0; 37 | left: 0; 38 | } 39 | // Mute/Deafen buttons 40 | button:nth-child(1), 41 | button:nth-child(2){ 42 | width: 60px; 43 | height: 48px; 44 | } 45 | 46 | 47 | } 48 | 49 | // Replace icons 50 | html[lang^="en-"].theme-dark .container-3baos1{ 51 | .button-14-BFJ{ 52 | height: 48px; 53 | border-radius: 0; 54 | .contents-18-Yxp{ 55 | display: none; 56 | } 57 | &::before{ 58 | @include FontIcon; 59 | font-size: 16px; 60 | } 61 | &:hover{ 62 | background-color: $ListLow 63 | } 64 | } 65 | 66 | // Icon replacements 67 | button[aria-label="Mute"][aria-checked="false"]::before{ 68 | content: "\E720"; 69 | } 70 | button[aria-label="Mute"][aria-checked="true"]::before{ 71 | content: "\EC54"; 72 | color: $alert; 73 | } 74 | button[aria-label="Deafen"][aria-checked="false"]::before{ 75 | content: "\E767"; 76 | } 77 | button[aria-label="Deafen"][aria-checked="true"]::before{ 78 | content: "\E74F"; 79 | color: $alert; 80 | } 81 | button[aria-label="User settings"]::before, 82 | button[aria-label="User Settings"]::before{ 83 | content: "\E713"; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/components/primary/channels/_activity.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .activityPanel-28dQGo{ 2 | height: 48px; 3 | padding: 0 0 0 8px; 4 | border-bottom: 0; 5 | 6 | } 7 | 8 | html[lang^="en-"].theme-dark .activityPanel-28dQGo{ 9 | .actions-aUdUfC{ 10 | button{ 11 | width: 48px; 12 | height: 48px; 13 | .contents-18-Yxp{ 14 | display: none; 15 | } 16 | &::before{ 17 | @include FontIcon; 18 | font-size: 16px; 19 | } 20 | } 21 | 22 | // Icon replacements 23 | button[aria-label^="Stream"]::before, 24 | button:disabled::before{ 25 | content: "\F71C"; 26 | } 27 | button[aria-label^="Stop Streaming"]::before{ 28 | content: "\F71D"; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/primary/channels/_badge.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | // Mention indicator 3 | .base-PmTxvP.numberBadge-2s8kKX{ 4 | min-width: 20px; 5 | min-height: 20px; 6 | background-color: #003b67 !important; 7 | border: 2px solid #1a4e76 !important; 8 | z-index: 2; 9 | text-shadow: none; 10 | border-radius: 50%; 11 | box-shadow: none; 12 | font-weight: normal; 13 | } 14 | 15 | .base-PmTxvP.live-vBWnV6{ 16 | background-color: $alert !important; 17 | font-size: 0; 18 | animation: ease-in 1s infinite; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/primary/channels/_channel_notices.scss: -------------------------------------------------------------------------------- 1 | .channelNotice-1-XFjC{ 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/primary/channels/_channels.scss: -------------------------------------------------------------------------------- 1 | .platform-win .sidebar-2K8pFh{ 2 | background: transparent; 3 | border-radius: 0; 4 | } 5 | 6 | // NOTE: 2021-07-13 - The hidden class is used when a video call is full screen to hide the channels pane. 7 | .theme-dark .sidebar-2K8pFh:not(.hidden-3iamF5){ 8 | width: 288px; 9 | .container-3w7J-x{ 10 | background-color: transparent; 11 | } 12 | 13 | // Header container 14 | .container-1taM1r{ 15 | box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3); 16 | .header-2V-4Sw{ 17 | height: 40px; 18 | padding: 0 12px; 19 | box-shadow: none; 20 | background-color: $ChromeBlackMediumLow; 21 | @include FontBase; 22 | transition: none; 23 | &:hover{ 24 | background-color: $ListLow; 25 | } 26 | // Remove badge 27 | .guildIconContainer-2FW_iA{ 28 | display: none; 29 | } 30 | .name-1jkAdW{ 31 | @include FontBase; 32 | } 33 | } 34 | // Guild banner 35 | .animatedContainer-1NSq4T{ 36 | left: 48px; 37 | background-color: transparent; 38 | box-shadow: none; 39 | .bannerImage-3KhIJ6{ 40 | &::before{ 41 | display: none; 42 | } 43 | } 44 | } 45 | } 46 | 47 | .scroller-RmtA4e{ 48 | margin-left: 48px; 49 | } 50 | 51 | // Community stage notice 52 | .channelNotice-2bJINM{ 53 | margin-left: 48px; 54 | padding-left: 16px; 55 | } 56 | 57 | // Channel tree root 58 | .containerDefault-3tr_sE, 59 | .containerDragBefore-1YqewQ{ 60 | .wrapper-PY0fhH{ 61 | height: 32px; 62 | padding-left: 36px; 63 | padding-right: 6px; 64 | color: $BaseHigh; 65 | &::before{ 66 | content: "\E70D"; 67 | position: absolute; 68 | left: 12px; 69 | @include FontIcon; 70 | font-size: 12px; 71 | } 72 | &:hover{ 73 | background-color: $ListLow; 74 | } 75 | .icon-2yIBmh{ 76 | display: none; 77 | } 78 | .name-3l27Hl{ 79 | color: $BaseMedium; 80 | @include FontBody; 81 | letter-spacing: normal; 82 | text-transform: none; 83 | } 84 | 85 | &.collapsed-2-tg8y{ 86 | &::before{ 87 | content: "\E76C"; 88 | } 89 | .icon-WnO6o2{ 90 | display: none; 91 | } 92 | } 93 | &.muted-2JBAyG{ 94 | .name-3l27Hl{ 95 | color: $alert; 96 | } 97 | } 98 | } 99 | // Add channel to tree button 100 | .children-L002ao{ 101 | button[aria-label="Create Channel"]{ 102 | opacity: .5; 103 | &:hover{ 104 | opacity: 1; 105 | } 106 | } 107 | } 108 | } 109 | 110 | // Text Channel 111 | .containerDefault--pIXnN{ 112 | &:hover{ 113 | .wrapper-2jXpOf{ 114 | background-color: $ListLow; 115 | } 116 | .content-1x5b-n{ 117 | background-color: transparent; 118 | } 119 | } 120 | .wrapper-2jXpOf{ 121 | height: 32px; 122 | } 123 | .content-1x5b-n{ 124 | height: 32px; 125 | margin: 0 0 0 28px; 126 | padding: 0 8px 0 0; 127 | background-color: transparent; 128 | > svg{ 129 | width: 16px; 130 | height: 16px; 131 | margin-right: 8px; 132 | color: $BaseMedium; 133 | } 134 | &:hover{ 135 | background-color: transparent; 136 | } 137 | // Channel name 138 | .name-23GUGE{ 139 | color: $BaseMedium; 140 | @include FontBody; 141 | } 142 | } 143 | // Muted channel 144 | .modeMuted-onO3r-{ 145 | svg{ 146 | filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg); 147 | } 148 | .name-23GUGE{ 149 | color: $alert; 150 | } 151 | } 152 | // Selected channel 153 | .modeSelected-346R90{ 154 | &::before{ 155 | content: ""; 156 | position: absolute; 157 | width: 2px; 158 | height: 16px; 159 | top: 50%; 160 | left: 4px; 161 | margin-top: -8px; 162 | background-color: $Accent; 163 | border-radius: 1px; 164 | } 165 | svg.icon-1DeIlz, 166 | .name-23GUGE{ 167 | color: $Accent; 168 | } 169 | } 170 | // Unread channel 171 | .modeUnread-1qO3K1{ 172 | // Unread dot 173 | .unread-2lAfLh{ 174 | height: 16px; 175 | width: 2px; 176 | left: 4px; 177 | margin-top: -8px; 178 | background-color: $BaseHigh; 179 | border-radius: 0; 180 | } 181 | .content-1x5b-n > div > svg{ 182 | color: $BaseHigh; 183 | } 184 | .name-23GUGE{ 185 | color: $BaseHigh; 186 | } 187 | } 188 | 189 | // Connected to voice dot 190 | .modeConnected-3IsKId{ 191 | &::before{ 192 | content: ""; 193 | position: absolute; 194 | width: 2px; 195 | height: 15px; 196 | top: 50%; 197 | left: 4px; 198 | margin-top: -8px; 199 | background-color: rgba(var(--voice), 1); 200 | border-radius: 1px; 201 | } 202 | svg.icon-1DeIlz, 203 | .name-23GUGE{ 204 | color: rgba(var(--voice), 1); 205 | } 206 | } 207 | // Channel actions (instant invite, settings) 208 | .actionIcon-PgcMM2{ 209 | color: $BaseMedium; 210 | } 211 | // Voice user popout open 212 | .selected-3t3Csj{ 213 | .content-1Wq3SX{ 214 | background-color: transparent; 215 | .username-3KYl0N{ 216 | color: $BaseHigh; 217 | } 218 | } 219 | } 220 | } 221 | 222 | // Channel with threads 223 | .container-3JKcAb{ 224 | .spine--Wla_O{ 225 | left: 40px; 226 | } 227 | .content-1x5b-n{ 228 | margin-left: 56px; 229 | } 230 | } 231 | 232 | // Voice channel 233 | .list-2luk8a{ 234 | padding-left: 0; 235 | } 236 | // Voice user 237 | .voiceUser-1K6Xox{ 238 | padding-left: 44px; 239 | } 240 | .userSmall-YJ5L9_{ 241 | height: 30px; 242 | &:hover{ 243 | background-color: $ListLow; 244 | } 245 | .avatarSmall-1PJoGO{ 246 | width: 20px; 247 | height: 20px; 248 | } 249 | } 250 | .voiceUser-1K6Xox{ 251 | &:hover .content-1Wq3SX{ 252 | background-color: transparent; 253 | } 254 | } 255 | .content-1Wq3SX{ 256 | margin: 0; 257 | .username-3KYl0N{ 258 | color: $BaseHigh; 259 | @include FontBody; 260 | } 261 | } 262 | 263 | // Unread messages bar 264 | .container-35XQWE{ 265 | left: 48px; 266 | } 267 | 268 | // Hide invite/admin buttons on channels and categories unless hovered 269 | .children-L002ao, // Category 270 | .children-3rEycc .iconItem-F7GRxr{ // Channel 271 | visibility: hidden; 272 | } 273 | .containerDefault-3tr_sE:hover .children-L002ao, // Category 274 | .containerDefault--pIXnN:hover .children-3rEycc .iconItem-F7GRxr{ // Channel 275 | visibility: visible; 276 | } 277 | } 278 | -------------------------------------------------------------------------------- /src/components/primary/channels/_rtc.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-1giJp5{ 2 | padding: 0 0 0 8px; 3 | border-bottom: 0; 4 | 5 | // Change user avatar to monochrome when muted 6 | .avatarContainer-2LLZwy{ 7 | position: relative; 8 | } 9 | .avatarContainer-2LLZwy{ 10 | .avatarIconOverlay-2nbU5G{ 11 | backdrop-filter: saturate(0); 12 | path{ 13 | display: none; 14 | } 15 | } 16 | &::after{ 17 | @include FontIcon; 18 | position: absolute; 19 | top: 5px; 20 | left: 6px; 21 | color: white; 22 | } 23 | } 24 | .avatarContainer-2LLZwy[aria-label*="Muted"]{ 25 | &::after{ 26 | content: "\EC54"; 27 | } 28 | } 29 | .avatarContainer-2LLZwy[aria-label*="Deafened"]{ 30 | &::after{ 31 | content: "\E74F"; 32 | } 33 | } 34 | 35 | // Connection 36 | .button-14-BFJ{ 37 | width: 48px; 38 | height: 48px; 39 | 40 | } 41 | 42 | // Webcam/screen share options 43 | .actionButtons-14eAc_{ 44 | margin: 0 8px 8px 0; 45 | .button-14-BFJ, 46 | .button-38aScr{ 47 | width: auto; 48 | background-color: transparent; 49 | border: 1px solid $ListLow; 50 | &:hover{ 51 | background-color: $ListLow; 52 | } 53 | svg{ 54 | display: none; 55 | } 56 | } 57 | 58 | } 59 | } 60 | 61 | 62 | html[lang^="en-"].theme-dark .container-1giJp5{ 63 | .button-14-BFJ{ 64 | .contents-18-Yxp{ 65 | display: none; 66 | } 67 | &::before{ 68 | @include FontIcon; 69 | font-size: 16px; 70 | } 71 | // Icon replcements 72 | &[aria-label="Disconnect"]::before, 73 | &[aria-label="Exit Quietly"]::before{ 74 | content: "\E89B"; 75 | } 76 | &[aria-label^="Noise suppression powered by Krisp"]::before, 77 | &[aria-label^="Noise Suppression powered by Krisp"]::before{ // US 78 | content: "\F61F"; 79 | } 80 | } 81 | 82 | .actionButtons-14eAc_{ 83 | // Icon replcements 84 | button[aria-label="Disconnect"]::before, 85 | button[aria-label="Exit Quietly"]::before{ 86 | content: "\E89B"; 87 | } 88 | button[aria-label^="Noise suppression powered by Krisp"]::before, 89 | button[aria-label^="Noise Suppression powered by Krisp"]::before{ // US 90 | content: "\F61F"; 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/components/primary/chat/_chat.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .chat-3bRxxu, 2 | .theme-dark .chat-3bRxxu .messages-3amgkR{ 3 | background-color: transparent; 4 | } 5 | 6 | // Remove 'drop shadow' from under toolbar 7 | .theme-dark .content-yTz4x3{ 8 | background-color: $ChromeMediumLow; 9 | &:before{ 10 | display: none; 11 | } 12 | } 13 | 14 | .theme-dark .chat-3bRxxu{ 15 | .scrollerContent-WzeG7R.content-3YMskv{ 16 | padding: 0 20px; 17 | } 18 | 19 | // New Message bars 20 | .barBase-1c2Rfb{ 21 | right: 36px; 22 | left: 20px; 23 | } 24 | .newMessagesBar-265mhP, 25 | .jumpToPresentBar-G1R9s6{ 26 | background-color: $Accent; 27 | opacity: 1; 28 | &:hover{ 29 | background-color: $ListAccentHigh; 30 | } 31 | .barButtonBase-2uLO1z{ 32 | @include FontBody; 33 | } 34 | } 35 | .newMessagesBar-265mhP{ 36 | border-radius: 0 0 4px 4px; 37 | } 38 | .jumpToPresentBar-G1R9s6{ 39 | padding-bottom: 0; 40 | border-radius: 4px 4px 0 0; 41 | } 42 | 43 | // Welcome message 44 | .default-1VPH9n{ 45 | margin: 0; 46 | } 47 | .base-34jWEe{ 48 | background-color: transparent; 49 | background-image: none; 50 | border: 0; 51 | h1{ 52 | color: $BaseHigh; 53 | @include FontTitle; 54 | strong{ 55 | font-weight: 400; 56 | } 57 | } 58 | } 59 | 60 | // Dividers 61 | .divider-3_HH5L{ 62 | margin: 4px 0; 63 | } 64 | .divider-JfaTT5{ 65 | height: 0; 66 | border-color: $ChromeHigh; 67 | &.hasContent-1_DUdQ{ 68 | margin-top: 0.5rem; 69 | margin-bottom: -9px; 70 | } 71 | &.isUnread-3Ef-o9{ 72 | border-color: $alert; 73 | span{ 74 | color: $alert; 75 | } 76 | .unreadPill-2HyYtt{ 77 | text-transform: capitalize; 78 | } 79 | } 80 | &.beforeGroup-1rH1F0{ 81 | margin-bottom: calc(0.53125rem - 1rem - 2px); 82 | top: unset; 83 | } 84 | span{ 85 | padding: 2px 8px; 86 | background-color: $ChromeMediumLow; 87 | color: $BaseHigh; 88 | @include FontBody; 89 | } 90 | } 91 | 92 | // background flash fixes 93 | .backgroundFlash-24qWLN .groupStart-23k01U{ 94 | margin-top: calc(1.0625rem / 2) !important; 95 | } 96 | 97 | // Message 98 | .message-2qnXI6{ 99 | // Remove hover state 100 | &:hover{ 101 | background-color: transparent; 102 | } 103 | 104 | // Mentioned 105 | &.mentioned-xhSam7{ 106 | background-color: transparent; 107 | } 108 | 109 | // Timestamp 110 | .timestamp-3ZCmNB{ 111 | color: $BaseMedium; 112 | } 113 | 114 | // Username 115 | .username-1A8OIy{ 116 | font-weight: 400; 117 | } 118 | 119 | // Chat text 120 | .markup-2BOw-j{ 121 | color: $BaseHigh; 122 | } 123 | 124 | // Mention 125 | span.mention{ 126 | background-color: transparent; 127 | color: $Accent; 128 | } 129 | 130 | // System message 131 | &.systemMessage-1I9LCe{ 132 | .container-3-pyIM{ 133 | color: $BaseMedium; 134 | a{ 135 | color: $BaseMedium; 136 | font-weight: normal; 137 | } 138 | .timestamp-1E3uAL{ 139 | color: $BaseMedium; 140 | &::before{ 141 | content: "("; 142 | } 143 | &::after{ 144 | content: ")"; 145 | } 146 | } 147 | } 148 | } 149 | } 150 | 151 | // Compact 152 | .compact-T3H92H{ 153 | &.groupStart-23k01U{ 154 | margin-top: calc(1.0625rem / 2); 155 | padding-top: calc(1.0625rem / 2); 156 | border-top: 1px solid $ListLow; 157 | } 158 | .container-3FojY8{ 159 | padding-left: 60px; 160 | text-indent: calc(-80px - -1rem); 161 | } 162 | } 163 | 164 | // Cozy Message 165 | .cozyMessage-3V1Y8y{ 166 | &.groupStart-23k01U{ 167 | margin-top: calc(1.0625rem / 2); 168 | padding-top: calc(1.0625rem / 2); 169 | border-top: 1px solid $ListLow; 170 | } 171 | &.wrapper-2a6GCs{ 172 | padding-left: 64px; 173 | } 174 | .avatar-1BDn8e{ 175 | width: 44px; 176 | height: 44px; 177 | top: 8px; 178 | left: 0; 179 | } 180 | .container-3FojY8{ 181 | padding-left: 60px; 182 | } 183 | .header-23xsNx{ 184 | padding-left: 60px; 185 | margin-left: -60px; 186 | } 187 | .avatar-1BDn8e{ 188 | margin: 0; 189 | } 190 | } 191 | 192 | .scroller-3sQKXg:after{ 193 | content: unset; 194 | } 195 | 196 | // Mentioned 197 | .message-2qnXI6.groupStart-23k01U{ 198 | &.localBot-GrCgVt::before, 199 | &.mentioned-xhSam7::before{ 200 | width: 2px; 201 | left: -16px; 202 | top: calc(1.0625rem / 2); 203 | bottom: 2px; 204 | border-radius: 1px; 205 | } 206 | } 207 | .message-2qnXI6:not(.groupStart-23k01U){ 208 | &.localBot-GrCgVt::before, 209 | &.mentioned-xhSam7::before{ 210 | width: 2px; 211 | left: -16px; 212 | top: 2px; 213 | bottom: 2px; 214 | border-radius: 1px; 215 | } 216 | } 217 | 218 | // Message options 219 | .buttonContainer-DHceWr{ 220 | .container-3npvBV{ 221 | top: 0; 222 | padding-left: 0; 223 | } 224 | .wrapper-2aW0bm{ 225 | background-color: transparent; 226 | border-radius: 0; 227 | box-shadow: none; 228 | .emojiButton-jE9tXC{ 229 | display: none; 230 | } 231 | .emojiSeparator-10VgEJ{ 232 | display: none; 233 | } 234 | .button-1ZiXG9{ 235 | &:hover{ 236 | background-color: $ListLow; 237 | } 238 | } 239 | } 240 | } 241 | 242 | // Editing message 243 | .channelTextArea-3bF57p{ 244 | .scrollableContainer-2NUZem{ 245 | background-color: $ChromeBlackHigh; 246 | border-radius: 0; 247 | } 248 | // Buttons 249 | .buttons-3JBrkn{ 250 | .emojiButton-3uL3Aw{ 251 | &::before{ 252 | content: "\E76E"; 253 | color: $BaseMedium; 254 | @include FontIcon; 255 | font-size: 24px; 256 | } 257 | &:hover{ 258 | &::before{ 259 | color: $BaseHigh; 260 | } 261 | } 262 | .contents-18-Yxp{ 263 | display: none; 264 | } 265 | } 266 | } 267 | } 268 | .operations-36ENbA{ 269 | color: $BaseMedium; 270 | a{ 271 | color: $Accent; 272 | } 273 | } 274 | 275 | // Reactions 276 | .reactions-12N0jA{ 277 | .reaction-1hd86g{ 278 | background-color: $ListLow; 279 | border-radius: 2px; 280 | &:hover{ 281 | background-color: $ListMedium; 282 | } 283 | .reactionCount-2mvXRV{ 284 | color: $BaseHigh; 285 | font-weight: normal; 286 | } 287 | &.reactionMe-wv5HKu{ 288 | background-color: $Accent; 289 | border-color: transparent; 290 | &:hover{ 291 | border-color: $ListLow; 292 | } 293 | .reactionCount-2mvXRV{ 294 | color: $BaseHigh; 295 | } 296 | } 297 | } 298 | .reactionBtn-3N03Zj{ 299 | margin-top: -2px; 300 | margin-left: 0; 301 | padding: 5px 8px; 302 | background-color: $ListLow; 303 | border-radius: 2px; 304 | &:hover{ 305 | background-color: $ListMedium; 306 | } 307 | } 308 | } 309 | 310 | // Threads 311 | // Compact chat thread spine 312 | .spine-5jbOmI{ 313 | border-bottom-left-radius: 4px; 314 | border-color: $ChromeHigh; 315 | } 316 | // See bottom of file for cozy thread spine fixes 317 | 318 | // Chat thread box 319 | .container-3hZ-gs{ 320 | background-color: $ChromeLow; 321 | } 322 | 323 | // Auto complete 324 | // Hack to stop the autocomplete popout being selected 325 | // Changes to this code must be mirrored to _chat.scss 326 | div[class^="scrollableContainer-"] ~ div[class^="autocomplete-"]{ 327 | bottom: 100%; 328 | background-color: $ChromeLow; 329 | border-bottom: 1px solid $Accent; 330 | border-radius: 0; 331 | box-shadow: none; 332 | } 333 | 334 | // Titlebar 335 | .contentTitle-2tG_sM{ 336 | color: $BaseHigh; 337 | @include FontBody; 338 | text-transform: none; 339 | strong{ 340 | &::before, &::after{ 341 | content: '\''; 342 | } 343 | } 344 | } 345 | 346 | // Parameter type 347 | .bar-AokMp3{ 348 | background-color: $ChromeMedium; 349 | .option-2lkyZ_{ 350 | border-radius: 2px; 351 | padding-bottom: 2px; 352 | &.active-2awTSY{ 353 | background-color: $Accent; 354 | } 355 | } 356 | 357 | // Command help 358 | .description-QP9Ktn{ 359 | @include FontCaption; 360 | } 361 | } 362 | } 363 | 364 | // Thread spine for cozy mode 365 | .font-size-12 .cozy-3raOZG.hasThread-2k82W0:after, 366 | .font-size-14 .cozy-3raOZG.hasThread-2k82W0:after, 367 | .font-size-15 .cozy-3raOZG.hasThread-2k82W0:after, 368 | .font-size-16 .cozy-3raOZG.hasThread-2k82W0:after{ 369 | width: 2.5rem; 370 | left: 1.3rem; 371 | } 372 | .font-size-18 .cozy-3raOZG.hasThread-2k82W0:after{ 373 | width: 2.3rem; 374 | left: 1.1rem; 375 | } 376 | .font-size-20 .cozy-3raOZG.hasThread-2k82W0:after{ 377 | width: 2rem; 378 | left: 1.05rem; 379 | } 380 | .font-size-24 .cozy-3raOZG.hasThread-2k82W0:after{ 381 | width: 1.7rem; 382 | left: 0.85rem; 383 | } 384 | -------------------------------------------------------------------------------- /src/components/primary/chat/_chatbox.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .form-2fGMdU{ 2 | margin-top: 0; 3 | padding-right: 36px; 4 | padding-left: 20px; 5 | // Remove gradient 6 | &::before{ 7 | content: unset; 8 | } 9 | 10 | .channelTextArea-rNsIhG{ 11 | margin-bottom: 0; 12 | background-color: transparent; 13 | border-top: 2px solid $ListLow; 14 | border-radius: 0; 15 | transition: 150ms ease-in border-top-color; 16 | &:focus-within{ 17 | border-top-color: $Accent; 18 | transition: 150ms ease-in border-top-color; 19 | } 20 | &:hover:not(:focus-within){ 21 | border-top-color: $BaseLow; 22 | transition: 150ms ease-in border-top-color; 23 | } 24 | 25 | // Replying to user 26 | .container-2fRDfG{ 27 | background-color: $ChromeBlackLow; 28 | border-radius: 0; 29 | .actions-NlfMQc{ 30 | .mentionButton-3710-W{ 31 | &.colorBrand-2tjs5J{ 32 | color: $Accent; 33 | } 34 | &::before{ 35 | content: "\E168"; 36 | @include FontIcon; 37 | padding-right: 4px; 38 | } 39 | svg{ 40 | display: none; 41 | } 42 | } 43 | .closeButton-37O8QC{ 44 | &::before{ 45 | content: "\E8BB"; 46 | @include FontIcon; 47 | } 48 | svg{ 49 | display: none; 50 | } 51 | } 52 | } 53 | } 54 | 55 | 56 | .scrollableContainer-2NUZem{ 57 | background-color: transparent; 58 | border-radius: 0; 59 | overflow-y: auto; 60 | } 61 | 62 | // Upload button 63 | .attachWrapper-2TRKBi{ 64 | border: 0; 65 | button{ 66 | width: 48px; 67 | height: 46px; 68 | padding: 0; 69 | &::before{ 70 | content: "\E898"; 71 | color: #CCC; 72 | @include FontIcon; 73 | font-size: 16px; 74 | } 75 | &:hover{ 76 | background-color: $ListLow; 77 | } 78 | .contents-18-Yxp{ 79 | display: none; 80 | } 81 | } 82 | } 83 | 84 | .textArea-12jD-V{ 85 | min-height: 46px; 86 | } 87 | 88 | // Placeholder 89 | .placeholder-37qJjk{ 90 | color: #CCC; 91 | } 92 | 93 | // Adjust text to be inline with Cozy text 94 | .placeholder-37qJjk, 95 | .slateTextArea-1Mkdgw{ 96 | padding-left: 12px; 97 | padding-right: 12px; 98 | } 99 | 100 | // Textarea 101 | .markup-2BOw-j{ 102 | color: #FFF; 103 | } 104 | // Special content 105 | .wrapper-3WhCwL{ 106 | background-color: transparent; 107 | color: var(--link); 108 | &:hover{ 109 | text-decoration: underline; 110 | } 111 | } 112 | // Code 113 | .after_inlineCode-1KfVgj span, // End inline code marker 114 | .before_inlineCode-1G9rTK span, // Start inline code marker 115 | .inlineCode-2ngu6Y span, // Inline code 116 | .codeBlockSyntax-2i-tMA span, // Start/end code block marker 117 | .codeBlockLang-O_f4hr span, // Codeblock language 118 | .codeLine-14BKbG span{ // Codeblock code 119 | @include FontMonospace; 120 | } 121 | 122 | // Command 123 | .pill-2pQByF{ 124 | padding-bottom: 3px; 125 | background-color: $ListAccentMedium; 126 | @include FontBody; 127 | } 128 | .tabButton-1n4gNP{ 129 | opacity: 1; 130 | } 131 | 132 | // Right buttons 133 | .buttons-3JBrkn{ 134 | margin-right: 0; 135 | button[aria-label="Send a gift"]{ 136 | display: none; 137 | } 138 | .buttonContainer-28fw2U{ 139 | button[aria-label="Open GIF picker"]{ 140 | display: none; 141 | } 142 | button[aria-label="Open sticker picker"]{ 143 | display: none; 144 | } 145 | } 146 | .emojiButton-3uL3Aw{ 147 | width: 48px; 148 | height: 46px; 149 | margin: 0; 150 | padding: 0; 151 | &::before{ 152 | content: "\E76E"; 153 | color: #CCC; 154 | @include FontIcon; 155 | font-size: 16px; 156 | } 157 | &:hover{ 158 | background-color: $ListLow; 159 | &::before{ 160 | color: #FFF; 161 | } 162 | } 163 | .contents-18-Yxp{ 164 | display: none; 165 | } 166 | } 167 | } 168 | } 169 | 170 | // Is Typing 171 | .typing-2GQL18{ 172 | height: 32px; 173 | top: -32px; 174 | right: 37px; 175 | bottom: unset; 176 | background-color: transparent; 177 | font-size: 11px; 178 | line-height: 20px; 179 | align-items: flex-end; 180 | justify-content: flex-end; 181 | pointer-events: none; 182 | svg{ 183 | display: none; 184 | } 185 | span[class^="text-"]{ 186 | // Force text to right side when slowmode is enabled 187 | right: 0; 188 | position: absolute; 189 | strong{ 190 | font-weight: normal; 191 | } 192 | } 193 | // Slowmode font-weight 194 | .cooldownWrapper-3joyFc{ 195 | font-weight: normal; 196 | } 197 | // Fix position of countdown timer 198 | .text-1y-e8-:not(:empty) + .cooldownWrapper-3joyFc{ 199 | margin-bottom: 14px; 200 | } 201 | } 202 | 203 | // Auto complete 204 | // Hack to stop the autocomplete popout being selected 205 | // Changes to this code must be mirrored to _chat.scss 206 | div[class^="scrollableContainer-"] ~ div[class^="autocomplete-"]{ 207 | bottom: 100%; 208 | background-color: $ChromeLow; 209 | border-bottom: 1px solid $Accent; 210 | border-radius: 0; 211 | box-shadow: none; 212 | } 213 | 214 | // Titlebar 215 | .contentTitle-2tG_sM{ 216 | color: $BaseHigh; 217 | @include FontBody; 218 | text-transform: none; 219 | strong{ 220 | &::before, &::after{ 221 | content: '\''; 222 | } 223 | } 224 | } 225 | 226 | // Parameter type 227 | .bar-AokMp3{ 228 | background-color: $ChromeMedium; 229 | .option-2lkyZ_{ 230 | border-radius: 2px; 231 | padding-bottom: 2px; 232 | &.active-2awTSY{ 233 | background-color: $Accent; 234 | } 235 | } 236 | 237 | // Command help 238 | .description-QP9Ktn{ 239 | @include FontCaption; 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /src/components/primary/chat/_codeblock.scss: -------------------------------------------------------------------------------- 1 | // Codeblock 2 | .theme-dark .markup-2BOw-j pre{ 3 | background-color: #2F2F2F; 4 | border: 0; 5 | border-left: 4px solid #5e5e5e; 6 | border-radius: 0; 7 | .hljs{ 8 | border-radius: 0; 9 | } 10 | code{ 11 | background-color: #2F2F2F; 12 | border: 0; 13 | @include FontMonospace; 14 | overflow-x: hidden; 15 | &::before{ 16 | content: attr(class); 17 | width: calc(100% + 316px); 18 | display: block; 19 | margin: -7px 0 1em -316px; 20 | padding: 2px 6px 2px 0; 21 | background-color: #5E5E5E; 22 | color: #FFF; 23 | @include FontMonospace; 24 | font-size: 10px; 25 | line-height: 1.5625; 26 | text-transform: uppercase; 27 | word-spacing: 10px; 28 | } 29 | } 30 | // Hide language bar if no language is set 31 | code[class="scrollbarGhostHairline-1mSOM1 scrollbar-3dvm_9 hljs"]::before{ 32 | display: none; 33 | } 34 | } 35 | 36 | // Inline code 37 | .theme-dark .markup-2BOw-j code.inline{ 38 | padding: 2px 4px; 39 | background-color: #2F2F2F; 40 | border-radius: 0; 41 | @include FontMonospace; 42 | } 43 | -------------------------------------------------------------------------------- /src/components/primary/chat/_embed.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .embed-IeVjo6{ 2 | border-radius: 0; 3 | &.embedFull-2tM8--{ 4 | background-color: $ChromeMedium; 5 | border-left: 4px solid #000; 6 | } 7 | 8 | // Media 9 | .embedMedia-1guQoW{ 10 | border-radius: 0; 11 | // GIF 12 | .imageAccessory-3uSIjZ{ 13 | top: unset; 14 | right: unset; 15 | bottom: 4px; 16 | left: 4px; 17 | .gifTag-31zFY8{ 18 | width: auto; 19 | background-image: none; 20 | &::before{ 21 | content: "GIF"; 22 | color: #FFF; 23 | @include FontCaption; 24 | padding: 4px; 25 | background-color: #000; 26 | } 27 | } 28 | // Remove Gif favourite 29 | .gifFavoriteButton-1gYkEU{ 30 | display: none; 31 | } 32 | } 33 | 34 | } 35 | 36 | // Remove border radius on preview images 37 | .embedImage-2W1cML img, 38 | .embedImage-2W1cML video, 39 | .embedThumbnail-2Y84-K img, 40 | .embedThumbnail-2Y84-K video, 41 | .embedVideo-3nf0O9 img, 42 | .embedVideo-3nf0O9 video{ 43 | border-radius: 0; 44 | } 45 | } 46 | 47 | // Audio 48 | .theme-dark .wrapperAudio-1jDe0Q{ 49 | background-color: $ChromeMedium; 50 | border: 0; 51 | border-radius: 0; 52 | // File type icon 53 | .audioMetadata-3zOuGv{ 54 | &::before{ 55 | content: "\EC4F"; 56 | background-image: none; 57 | @include FontIcon; 58 | font-size: 24px; 59 | text-align: center; 60 | line-height: 36px; 61 | } 62 | } 63 | // Filename 64 | .metadataContent-3c_ZXw a{ 65 | @include FontBody; 66 | } 67 | // Download 68 | .metadataDownload-1fk90V{ 69 | padding-left: 8px; 70 | &::before{ 71 | content: "\E896"; 72 | @include FontIcon; 73 | font-size: 24px; 74 | text-align: center; 75 | line-height: 36px; 76 | } 77 | svg{ 78 | display: none; 79 | } 80 | } 81 | } 82 | 83 | // Video 84 | // Brought to you by the Department of Redundancy Department 85 | .theme-dark .wrapper-2TxpI8, 86 | .theme-dark .imageWrapper-2p5ogY, 87 | .theme-dark .video-8eMOth{ 88 | border-radius: 0; 89 | } 90 | 91 | // Media player controls 92 | .theme-dark .audioControls-2HsaU6, 93 | .theme-dark .videoControls-2kcYic{ 94 | background-color: #000; 95 | border-radius: 0; 96 | // Duration 97 | div[class^="buffer"]{ 98 | display: none; 99 | } 100 | div[class^="durationTimeWrapper"] span{ 101 | @include FontNormal; 102 | @include FontCaption; 103 | } 104 | // Scrubbing bar 105 | div[class^="mediaBarInteraction"]{ 106 | cursor: default; 107 | } 108 | div[class^="mediaBarWrapper"]{ 109 | height: 2px; 110 | background-color: #fff; 111 | &::before, 112 | &::after{ 113 | display: none; 114 | } 115 | div[class^="mediaBarPreview"]{ 116 | &::before, 117 | &::after{ 118 | display: none; 119 | } 120 | } 121 | div[class^="mediaBarProgress"]{ 122 | height: 4px; 123 | margin-top: -1px; 124 | background-color: $Accent; 125 | span{ 126 | width: 12px; 127 | height: 12px; 128 | margin-top: -8px; 129 | margin-right: -8px; 130 | background-color: $ChromeMedium; 131 | border: 2px solid $Accent; 132 | border-radius: 50%; 133 | transform: none; 134 | cursor: default; 135 | &:hover{ 136 | border-color: #FFF; 137 | } 138 | } 139 | &::before, 140 | &::after{ 141 | display: none; 142 | } 143 | } 144 | } 145 | // Parent element is rotated 90deg CCW 146 | div[class*="mediaBarInteractionVolume-"]{ 147 | padding: 12px; 148 | background-color: #000; 149 | border-radius: 0; 150 | } 151 | } 152 | 153 | // Spotify Invite 154 | .accessory, 155 | div[class^="modal-"]{ 156 | div[class^="invite-"]{ 157 | background-color: $ChromeMedium; 158 | border: 0; 159 | border-left: 3px solid #000; 160 | border-radius: 0; 161 | div[class^="header-"]{ 162 | color: #FFF; 163 | @include FontBody; 164 | text-transform: none; 165 | } 166 | // Song name, Artist, Album 167 | div[class^="partyStatus"]{ 168 | margin-top: 12px; 169 | @include FontCaption; 170 | div[class^="details-"]{ 171 | @include FontCaption; 172 | } 173 | div[class^="state"]{ 174 | @include FontCaption; 175 | } 176 | } 177 | 178 | // Poster avatar/People listening 179 | div[class^="partyMembers"]{ 180 | margin-left: 12px; 181 | div[class^="avatar"]{ 182 | width: 36px; 183 | height: 36px; 184 | } 185 | } 186 | 187 | // Album art 188 | img[class*="artwork-"]{ 189 | border-radius: 0; 190 | } 191 | // Session ended art (just show a spotify logo) 192 | div[class^="artworkSpotifySessionEnded"]{ 193 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAACeVBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8avHfUAAAA0nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQWGBkaGxweHyAhIiMkJSYoKiwtLi8wMTQ2Nzg5Ojs9QEJDRUZHSElKS0xNTlFSU1VWV1laXF1hYmNkZWZoaWprbG1ub3Fyc3R1dnd4ent9fn+AgYKDhIWGh4iLjI2Oj5CRkpSWmJmcnZ6foKKkpaanqaqrrK2ur7CxtLW2t7i5uru8vb6/wMHExcbHyMrLzM3Oz9DR0tTW19jZ2tze3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f6WqEk/AAADn0lEQVR4AZ3S618U9R8F8DMzP0BY+clFxBAq0/KiKRUWXQIJy0SjIERJQxERJUQiIkxLCqqtRLCLWpZplIEQJgkaEiAsErG6zPmLAmaB7zCzuzO8n50Hn/M639cMfIlNO/jppU6X2+3q/PmzQ+mLYYe07kirSh217e1ECdYsyGujqau7I62cFw/QJ9dbgSrkzB761ZutwI8HzzOgH5fBp5dctODOFpiTy1RaU6HARFAtLXOGmNyfpA0Nhga5lrY4Fegdpk0V0Nmk0q4tENw/SNvuPIRp8jnOwQ8KpmzlnGTBK7ybRneHBweGRsboR28ENIWcoXY2VOSkro0PD5IBSQmJXvpYel7VV9dNmw55B/RRo7aUp8bAXNST+04PcZZBbUIONV3r4F9wUvk16ryBCS3UJCMwOfGoizPaJQBrqBlVYMn/d17ntPUASqjxRECgOBbeFxcbHSLDKCS7m15HAFymVwkmLEjKfa+hpcdNzT83muort29YOGtFHTWtQPQYvdTjySnvNHtoqqMua6k4osN7E4vnaFl72SpMOUZNGgpoxy+ZoZhUT00xamjOPeRyjag06M6bB2C1m5pPcJ56nrbafS+uX+JQJEmSQxatfDbn3bN9FF3L3vBmP70uop2CrqqUSBjJy16p7aWpP3FLSN+Ewqf/JVWbdQxiUEiPwq95my9wtlFdwXJMU8KiYqIdQZjliTPU+1f3hEqMW7SxsPbijckPoI72/FZfvm1NMGY8dYWiAfxOweevV7apNBg+s3eFBK/gLynowPe0pr0oAZqHKfgJJ2iV5+TjmLCEgjrspQ1frwJQRkERnqHBcHN99YGdmRkZ23L3V59qvyeuOLHDSdFGRHooGDq1PyVegk5o4q7GEZpTY4AmIV+NgTnHpvp7NNECoFjIBfAt7vAADcoArBDycUyYv/qFHaVHP3I6P36/dPvzD8jwiio1vGQtxv3KaWNlKfnOPzzU6W/cvRyahAvUuSJh3GsMSG3eFa3/iTS5mBDWQwuGqxYDSNBvC8ekPbRk+EB45BcUFULj6KI17rsUdYfD62XOyVZMkU5zDs7KmBbXR9sGEiBIHaNNajp0CmlTCfSkY7SlRsYsSh1tcAbBQLGxoSYIJqTCMVqiHpRhLrWPFtxOg09xjQzo23j4IW3uol83MyT4F5Z/iz79XTAfgYW92kRTl7McsOiRokse6niailfClojk/A/Otd7sv/1X63cf7nk6Ej78B9PzXW2egHSAAAAAAElFTkSuQmCC); 194 | background-size: auto; 195 | } 196 | } 197 | } 198 | 199 | // File attachment 200 | .theme-dark .attachment-33OFj0{ 201 | max-width: 458px; 202 | height: 60px; 203 | position: relative; 204 | background-color: $ChromeMedium; 205 | border: 0; 206 | border-radius: 0; 207 | // Hide default image 208 | img{ 209 | display: none; 210 | // Replace with MDL icon 211 | &~div::before{ 212 | position: absolute; 213 | top: 10px; 214 | left: 10px; 215 | padding: 8px; 216 | background-color: $Accent; 217 | color: #FFF; 218 | @include FontIcon; 219 | font-size: 24px; 220 | } 221 | } 222 | 223 | // Move filename and size 224 | .filenameLinkWrapper-1-14c5, 225 | .metadata-3WGS0M, 226 | .filename-3eBB_v{ // Filename while uploading 227 | margin-left: 50px; 228 | } 229 | 230 | .filenameLinkWrapper-1-14c5, 231 | .filename-3eBB_v{ 232 | color: #FFF; 233 | @include FontBody; 234 | opacity: 1; 235 | a{ 236 | color: var(--link); 237 | } 238 | } 239 | .metadata-3WGS0M{ 240 | color: $BaseLow; 241 | } 242 | 243 | .progress-3Rbvu0{ 244 | border-radius: 0; 245 | .progressBar-3u8FBM{ 246 | background-color: $Accent !important; 247 | border-radius: 0; 248 | } 249 | } 250 | 251 | // Remove unneeded download icon 252 | .attachmentInner-3vEpKt ~ a{ 253 | display: none; 254 | } 255 | 256 | 257 | img[title="acrobat"]~div::before{ 258 | content: "\EA90"; //PDF 259 | } 260 | img[title="archive"]~div::before{ 261 | content: "\E8B7"; // Folder 262 | } 263 | img[title="unknown"]~div::before, 264 | img[title="webcode"]~div::before, 265 | img[title="document"]~div::before{ 266 | content: "\E8A5"; // Document 267 | } 268 | } 269 | -------------------------------------------------------------------------------- /src/components/primary/chat/_invite.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .wrapper-35wsBm{ 2 | background-color: $ChromeMedium; 3 | border: 0; 4 | border-radius: 2px; 5 | 6 | // YOU'VE BEEN INVITED header 7 | h5[class*="header-"]{ 8 | display: none; 9 | } 10 | 11 | // Server icon 12 | div[class^="icon-"]{ 13 | background-color: transparent; 14 | border: 0; 15 | border-radius: 50%; 16 | } 17 | div[class^="guildIconExpired"]{ 18 | position: relative; 19 | background-color: rgba($color: $alert, $alpha: 0.6); 20 | background-image: none; 21 | border-radius: 50%; 22 | } 23 | div[class^="guildIconExpired"]::before{ 24 | content: ""; 25 | width: 36px; 26 | height: 8px; 27 | top: 50%; 28 | left: 50%; 29 | margin: -4px 0 0 -18px; 30 | position: absolute; 31 | background-color: #FFF; 32 | } 33 | 34 | // Server name 35 | div[class^="guildName"]{ 36 | @include FontBody; 37 | } 38 | div[class^="inviteDestinationExpired-"]{ 39 | color: $alert; 40 | } 41 | 42 | // Details 43 | div[class^="guildDetail"]{ 44 | color: #FFF; 45 | font-weight: normal; 46 | } 47 | 48 | // Member counts 49 | div[class^="guildDetail"]{ 50 | span{ 51 | color: #FFF; 52 | font-size: 12px; 53 | font-weight: normal; 54 | } 55 | i[class^="statusOnline"]{ 56 | width: 12px; 57 | height: 12px; 58 | background-color: $statusonline; 59 | } 60 | i[class^="statusOffline"]{ 61 | width: 12px; 62 | height: 12px; 63 | background-color: $statusoffline; 64 | } 65 | } 66 | 67 | //Button 68 | button{ 69 | height: 32px; 70 | } 71 | button svg{ 72 | display: none; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/components/primary/chat/_nsfw.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .chat-3bRxxu .gatedContent-3-B7qB{ 2 | // Remove image 3 | div[class^="image-"]{ 4 | display: none; 5 | } 6 | 7 | // Title 8 | div[class^="title-"]{ 9 | @include FontSubtitle; 10 | text-align: left; 11 | } 12 | 13 | // Description 14 | div[class^="description-"]{ 15 | color: $BaseHigh; 16 | @include FontBody; 17 | text-align: left; 18 | } 19 | 20 | // Separator 21 | div[class^="separator-"]{ 22 | display: none; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/primary/chat/_welcome.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .welcomeMessage-ULm0mo{ 2 | background-color: transparent; 3 | align-items: baseline; 4 | margin: 0 -20px 0 -20px; 5 | padding-top: 48px; // Clear the unread message bar 6 | padding-left: 20px; 7 | 8 | // Header 9 | h1{ 10 | color: $BaseHigh; 11 | @include FontSubtitle; 12 | text-transform: none; 13 | } 14 | 15 | // Remove help items 16 | .itemContainer-1tq6cd{ 17 | display: none; 18 | } 19 | 20 | // Remove watermark image 21 | .emptyMessage-3-SPAD{ 22 | display: none; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/primary/guilds/_guilds.scss: -------------------------------------------------------------------------------- 1 | .platform-win .scroller-1Bvpku{ 2 | padding: 0; 3 | background-color: transparent; 4 | } 5 | 6 | .theme-dark .wrapper-3NnKdC{ 7 | width: 48px; 8 | margin-top: 40px; 9 | margin-bottom: 48px; 10 | background-color: transparent; 11 | z-index: 10; 12 | 13 | .listItem-2Ig28I{ 14 | margin: 0; 15 | width: 48px; 16 | &:hover{ 17 | background-color: $ListLow; 18 | } 19 | // Pill 20 | .pill-ZqtR4i, 21 | .pill-61ft1C, 22 | .pill-gcH-8B, 23 | .pill-1aYSec{ 24 | .item-2hkk8m{ 25 | width: 2px; 26 | height: 24px !important; 27 | margin-left: 4px; 28 | border-radius: 1px; 29 | // Guild is selected 30 | &[style*="height: 40px;"]{ 31 | height: 24px !important; 32 | background-color: $Accent; 33 | } 34 | } 35 | } 36 | // Guild icon 37 | .wrapper-25eVIn{ 38 | svg foreignObject{ 39 | mask: none; 40 | } 41 | .icon-27yU2q{ 42 | width: 24px; 43 | height: 24px; 44 | border-radius: 50%; 45 | } 46 | .acronym-2mOFsV{ 47 | width: 24px; 48 | height: 24px; 49 | background-color: transparent; 50 | color: $BaseHigh; 51 | @include FontBase; 52 | } 53 | } 54 | .wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9, 55 | .wrapper-1BJsBx:hover .childWrapper-anI2G9{ 56 | background-color: transparent; 57 | } 58 | 59 | // Home 60 | .wrapper-1BJsBx{ 61 | &[aria-label="Home"]{ 62 | .childWrapper-anI2G9{ 63 | background-color: transparent; 64 | &::before{ 65 | content: "\E80F"; 66 | color: $BaseHigh; 67 | @include FontIcon; 68 | font-size: 16px; 69 | } 70 | svg{ 71 | // NOTE: 2021-12-07 - '!important' is required to remove the 'festive' Discord icon 72 | display: none !important; 73 | } 74 | } 75 | } 76 | } 77 | // Remove Home :active transform 78 | .listItemWrapper-KhRmzM:active{ 79 | transform: none; 80 | } 81 | 82 | // Separator 83 | .guildSeparator-nWMCrR{ 84 | display: none; 85 | } 86 | // Add server/Server Discovery icons 87 | .circleIconButton-hZmpE8{ 88 | background-color: transparent; 89 | color: #FFF; 90 | &[aria-label]{ 91 | svg{ 92 | width: 18px; 93 | height: 18px; 94 | } 95 | } 96 | } 97 | // Offline 98 | .guildsError-11GiUv{ 99 | background-color: $alert; 100 | border: 0; 101 | border-radius: 0; 102 | transition: none; 103 | font-weight: 400; 104 | } 105 | //badge 106 | .lowerBadge-29hYVK, 107 | .upperBadge-2XnnGB{ 108 | right: 4px; 109 | transform: none !important; 110 | } 111 | .upperBadge-2XnnGB{ 112 | top: 4px; 113 | } 114 | .lowerBadge-29hYVK{ 115 | bottom: 4px; 116 | z-index: 1; 117 | } 118 | 119 | .participating-1P_Z3z{ 120 | width: 28px; 121 | height: 28px; 122 | transform: translateX(-6px) translateY(6px); 123 | background-color: transparent; 124 | border: 2px solid rgba(var(--voice), 1); 125 | border-radius: 50%; 126 | svg{ 127 | display: none; 128 | } 129 | } 130 | } 131 | // Folders 132 | .wrapper-shyHJt{ 133 | .listItem-2Ig28I{ 134 | .wrapper-25eVIn{ 135 | svg{ 136 | mask{ 137 | display: none; 138 | } 139 | } 140 | } 141 | } 142 | // Fix folder container being too tall 143 | ul[role="group"]{ 144 | height: auto !important; 145 | } 146 | } 147 | .folder-2w6LX1{ 148 | background-color: transparent; 149 | } 150 | .folderIconWrapper-1Ml_1q{ 151 | background-color: transparent !important; 152 | border-radius: 0; 153 | } 154 | .closedFolderIconWrapper-1I9YfS{ 155 | padding: 8px; 156 | } 157 | .expandedFolderBackground-3ZDF05{ 158 | left: 0; 159 | bottom: 0; 160 | background-color: $ListLow; 161 | border-radius: 0; 162 | &.collapsed-2ZrjoL{ 163 | background-color: transparent; 164 | } 165 | } 166 | .expandedFolderIconWrapper-3fmTfW{ 167 | svg path{ 168 | clip-path: inset(1px 1px 1px 1px); 169 | } 170 | } 171 | // Unread notification bars 172 | // These break due to our fixed buttons at the bottom, so we remove them 173 | .unreadMentionsIndicatorTop-2-tcdU, 174 | .unreadMentionsIndicatorBottom-2mDYbI{ 175 | display: none; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /src/components/primary/members/_members.scss: -------------------------------------------------------------------------------- 1 | .container-2wlB3z{ 2 | background-color: $ChromeLow; 3 | } 4 | 5 | .theme-dark aside[class^="membersWrap"]{ 6 | div[class*="members-"], 7 | div[class*="members-"]>div{ 8 | background-color: $ChromeLow; 9 | } 10 | 11 | // Rank headers 12 | h2[class^="membersGroup-"]{ 13 | margin: 0 12px 8px 12px; 14 | padding: 16px 0 8px; 15 | color: $BaseHigh; 16 | @include FontBase; 17 | text-transform: none; 18 | letter-spacing: normal; 19 | white-space: nowrap; 20 | text-overflow: ellipsis; 21 | overflow: hidden; 22 | border-bottom: 1px solid $BaseMediumLow; 23 | } 24 | 25 | // Member 26 | div[class*="member-"]{ 27 | max-width: unset; 28 | margin: 0; 29 | box-sizing: border-box; 30 | border-radius: 0; 31 | &:hover{ 32 | background-color: $ListLow; 33 | } 34 | // Selected, user popout open 35 | &.selected-aXhQR6{ 36 | background-color: $ListAccentLow; 37 | } 38 | // User is offline 39 | &.offline-3nJYBR{ 40 | .avatar-3uk_u9{ 41 | filter: grayscale(100%); 42 | } 43 | &:hover{ 44 | .avatar-3uk_u9{ 45 | filter: grayscale(0%); 46 | } 47 | } 48 | } 49 | div[class^="content-"]{ 50 | border-radius: 0; 51 | box-sizing: border-box; 52 | } 53 | .layout-2DM8Md{ 54 | padding-left: 12px; 55 | border-radius: 0; 56 | } 57 | 58 | // Avatar 59 | .avatar-3uk_u9{ 60 | margin-right: 8px; 61 | } 62 | 63 | div[class^="memberInner"]{ 64 | width: 160px; 65 | } 66 | // Username 67 | div[class^="name-"]{ 68 | @include FontBody; 69 | } 70 | 71 | // Status 72 | .activity-2Gy-9S{ 73 | color: $BaseMediumLow; 74 | @include FontCaption; 75 | strong{ 76 | font-weight: inherit; 77 | } 78 | } 79 | } 80 | 81 | // Member online default text colour 82 | div[class^="memberOnline-"]{ 83 | color: $BaseHigh; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/components/primary/search/_search.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .searchResultsWrap-3-pOjs{ 2 | background-color: $ChromeLow; 3 | // Header 4 | .searchHeader-2XoQg7{ 5 | background-color: $ChromeLow; 6 | box-shadow: none; 7 | // Total number of results found 8 | .totalResults--dyAxF{ 9 | opacity: 1; 10 | @include FontSubtitle; 11 | } 12 | // Recent/Relevant tabs 13 | .tab-2j5AEF{ 14 | opacity: 1; 15 | border-bottom: 2px solid transparent; 16 | @include FontBody; 17 | color: rgba(255,255,255,.7); 18 | &:hover{ 19 | border-bottom: 0; 20 | color: #FFF; 21 | } 22 | &.selected-2LAck8{ 23 | border-bottom: 2px solid $Accent; 24 | color: $Accent; 25 | } 26 | } 27 | } 28 | // Results 29 | // Channel Name 30 | .channelName-1JRO3C{ 31 | background-color: $ChromeLow; 32 | } 33 | // Remove gradient 34 | .searchResult-9tQ1uo{ 35 | &::before, 36 | &::after{ 37 | display: none; 38 | } 39 | // Remove border radius 40 | .searchResultMessage-1fxgXh{ 41 | border-radius: 0; 42 | &.hit-1fVM9e{ 43 | background-color: $ChromeMediumLow; 44 | border: 0; 45 | box-shadow: none; 46 | } 47 | } 48 | // Accent border on expanded result 49 | &.expanded-w_LCGl{ 50 | background-color: $ChromeMedium; 51 | border: 1px solid $Accent; 52 | border-radius: 2px; 53 | &.hit-1fVM9e{ 54 | background-color: $ChromeMediumLow; 55 | } 56 | } 57 | } 58 | 59 | // Jump to message button 60 | .jumpButton-JkYoYK{ 61 | background-color: $Accent; 62 | border: 1px solid transparent; 63 | border-radius: 2px; 64 | color: #FFF; 65 | font-weight: normal; 66 | &:hover{ 67 | background-color: $ListAccentLow; 68 | } 69 | &:active{ 70 | transform: none; 71 | } 72 | } 73 | 74 | // No results found 75 | .emptyResultsWrap-G931-Q{ 76 | // Remove error image 77 | .noResultsImage-3Y0eCI{ 78 | display: none; 79 | } 80 | .noResults-sW1yWR{ 81 | margin-top: 0; 82 | color: $BaseHigh; 83 | @include FontBody; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/components/primary/thread/_thread.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .threadSidebar-1o3BTy{ 2 | margin-left: 0; 3 | background-color: transparent; 4 | border-radius: 0; 5 | 6 | // Chat 7 | .form-3eU9kJ, // Creating thread 8 | .chat-15Vmww{ 9 | background-color: $ChromeLow; 10 | } 11 | } 12 | 13 | // Remove rounded corners on main chat when thread sidebar is open 14 | .chat-3bRxxu.threadSidebarOpen-vdkwIh{ 15 | border-radius: 0; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/primary/toolbar/_search.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .chat-3bRxxu .container-1r6BKw .search-36MZv-{ 2 | margin: 0; 3 | .searchBar-3dMhjb{ 4 | width: 64px; 5 | height: 40px; 6 | background-color: transparent; 7 | background-position: center; 8 | background-repeat: no-repeat; 9 | background-size: 20px; 10 | border-radius: 0; 11 | cursor: pointer; 12 | &:hover{ 13 | background-color: $ListLow; 14 | } 15 | .public-DraftEditorPlaceholder-root, 16 | .icon-38sknP{ 17 | display: none; 18 | } 19 | } 20 | 21 | .search-2oPWTC.focused-31_ccS .searchBar-3dMhjb, 22 | .search-2oPWTC.open-6_Y_aH .searchBar-3dMhjb, 23 | .search-2oPWTC.popout-open .searchBar-3dMhjb{ 24 | width: 232px; 25 | height: 32px; 26 | margin: 0 4px; 27 | background-color: $AltMediumLow; 28 | background-image: none; 29 | cursor: text; 30 | border: 1px solid $BaseMedium; 31 | border-radius: 2px; 32 | } 33 | .search-2oPWTC.focused-31_ccS .searchBar-3dMhjb{ 34 | border-width: 2px; 35 | border-color: $Accent; 36 | } 37 | 38 | .search-2oPWTC.open-6_Y_aH .icon-38sknP, 39 | .search-2oPWTC.focused-31_ccS .icon-38sknP, 40 | .search-2oPWTC.open-6_Y_aH .searchBar-3dMhjb .public-DraftEditorPlaceholder-root, 41 | .search-2oPWTC.focused-31_ccS .searchBar-3dMhjb .public-DraftEditorPlaceholder-root{ 42 | display: block; 43 | } 44 | .search-2oPWTC .DraftEditor-root .DraftEditor-editorContainer{ 45 | height: 26px; 46 | } 47 | .search-2oPWTC .searchBar-3dMhjb .DraftEditor-root{ 48 | color: $BaseHigh; 49 | @include FontBody; 50 | .public-DraftEditor-content{ 51 | overflow-x: hidden; 52 | } 53 | .public-DraftEditor-content, 54 | .public-DraftEditorPlaceholder-root{ 55 | padding: 3px 8px 0; 56 | box-sizing: border-box; 57 | } 58 | } 59 | .seasearch-2oPWTCrch .searchBar-3dMhjb .public-DraftEditorPlaceholder-root{ 60 | color: $BaseHigh; 61 | @include FontBody; 62 | } 63 | .search-2oPWTC .searchBar-3dMhjb .icon-3cZ1F_{ 64 | top: 7px; 65 | } 66 | 67 | span[class^="searchAnswer-"], 68 | span[class^="searchFilter-"]{ 69 | background-color: #FFF; 70 | color: #000; 71 | font-weight: normal; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/primary/toolbar/_toolbar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .chat-3bRxxu .container-1r6BKw, 2 | .theme-dark .threadSidebar-1o3BTy .container-1r6BKw{ // Thread sidebar 3 | // LTR 4 | height: 40px; 5 | padding: 0 0 0 20px; 6 | background-color: $ChromeBlackMediumLow; 7 | box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3); 8 | 9 | // Channel name, MOTD 10 | .children-19S4PO{ 11 | // Remove hash symbol 12 | .iconWrapper-2OrFZ1{ 13 | display: none; 14 | } 15 | // Title 16 | .title-29uC1r{ 17 | margin-right: 12px; 18 | @include FontBase; 19 | } 20 | // Caret (when a thread is open) 21 | .caret-3W7cBB{ 22 | margin-right: 12px; 23 | } 24 | // Remove divider 25 | .divider-3FBTu8{ 26 | display: none; 27 | } 28 | 29 | // AKA 30 | .akaBadge-1M-1Gw{ 31 | padding: 0; 32 | margin: 0; 33 | background-color: transparent; 34 | border-radius: 0; 35 | color: $BaseHigh; 36 | @include FontBody; 37 | font-style: italic; 38 | } 39 | // Other nicknames 40 | .nicknames-1XK4Zt{ 41 | color: $BaseHigh; 42 | @include FontBody; 43 | } 44 | // Topic 45 | .topic-TCb_qw{ 46 | margin: 0; 47 | color: $BaseHigh; 48 | @include FontBody; 49 | } 50 | // Remove end gradient 51 | &::after{ 52 | display: none; 53 | } 54 | } 55 | 56 | // Buttons 57 | .toolbar-1t6TWx{ 58 | .iconWrapper-2OrFZ1{ 59 | width: 68px; 60 | height: 40px; 61 | margin: 0; 62 | opacity: 1; 63 | > svg{ // Non-EN position fix 64 | position: absolute; 65 | top: 6px; 66 | left: 22px; 67 | } 68 | &:hover{ 69 | background-color: $ListLow; 70 | } 71 | &.selected-1GqIat{ 72 | &::after{ 73 | content: ""; 74 | width: 32px; 75 | height: 2px; 76 | position: absolute; 77 | bottom: 4px; 78 | left: calc(50% - 25%); 79 | background-color: $Accent; 80 | border-radius: 1px; 81 | } 82 | } 83 | &::before{ 84 | width: 68px; 85 | height: 40px; 86 | position: absolute; 87 | color: $BaseHigh; 88 | @include FontIcon; 89 | font-size: 16px; 90 | text-align: center; 91 | line-height: 40px; 92 | } 93 | // For Inbox notifications 94 | &.badge-2qGa_k::after{ 95 | width: 34px; 96 | height: 2px; 97 | bottom: 4px; 98 | right: 16px; 99 | background-color: $Accent; 100 | border: 0; 101 | } 102 | 103 | .iconBadge-qZ4Ksk{ 104 | width: 32px; 105 | height: 2px; 106 | bottom: 4px; 107 | left: calc(50% - 25%); 108 | background-color: $alert; 109 | border-radius: 1px; 110 | } 111 | } 112 | 113 | } 114 | 115 | // Remove help button 116 | a[href="https://support.discord.com"]{ 117 | display: none; 118 | } 119 | } 120 | 121 | 122 | html[lang^="en-"].theme-dark .chat-3bRxxu .container-1r6BKw, 123 | html[lang^="en-"].theme-dark .threadSidebar-1o3BTy .container-1r6BKw{ 124 | .toolbar-1t6TWx{ 125 | .iconWrapper-2OrFZ1{ 126 | > svg{ 127 | display: none; 128 | } 129 | } 130 | } 131 | // Replace icons 132 | div[aria-label="Threads"]::before{ 133 | content: "\E8C4"; // ShowBcc 134 | } 135 | div[aria-label="More"]::before{ 136 | content: "\E712"; // More 137 | } 138 | div[aria-label="Notification settings"]::before{ 139 | content: "\EA8F"; 140 | } 141 | div[aria-label="Close"]::before{ 142 | content: "\E89F"; // ClosePane 143 | } 144 | div[aria-label^="Mute channel"][aria-checked="false"]::before{ 145 | content: "\EA8F"; 146 | } 147 | div[aria-label^="Mute channel"][aria-checked="true"]::before{ 148 | content: "\E7ED"; 149 | color: $alert; 150 | } 151 | div[aria-label="Pinned messages"]::before, 152 | div[aria-label="Pinned Messages"]::before{ // US 153 | content: "\E840"; 154 | } 155 | div[aria-label="Hide Member List"]::before, 156 | div[aria-label="Show Member List"]::before{ // US 157 | content: "\E779"; 158 | } 159 | div[aria-label="Update Ready!"]{ 160 | &::before{ 161 | content: "\ECC5"; 162 | } 163 | &::after{ 164 | content: ""; 165 | width: 50%; 166 | height: 2px; 167 | position: absolute; 168 | bottom: 4px; 169 | left: calc(50% - 25%); 170 | background-color: $alert; 171 | border-radius: 1px; 172 | animation: blink 2s ease-out infinite; 173 | } 174 | } 175 | div[aria-label="Inbox"]::before{ 176 | content: "\E715"; 177 | } 178 | // DM specific 179 | div[aria-label="Start voice call"]::before{ 180 | content: "\E717"; 181 | } 182 | div[aria-label="Start video call"]::before{ 183 | content: "\E714"; 184 | } 185 | div[aria-label="Add friends to DM"]::before{ 186 | content: "\E902"; 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /src/components/settings/_content.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .standardSidebarView-3F1I7i{ 3 | .contentColumnDefault-1VQkGM{ 4 | padding: 24px; 5 | } 6 | .contentRegionScroller-26nc1e{ 7 | background-color: #000; 8 | } 9 | 10 | // Titles 11 | h2[class*="title-"]{ 12 | @include FontTitle; 13 | text-transform: none; 14 | } 15 | // Sub section header 16 | h5[class*="title-"]{ 17 | margin-bottom: 24px; 18 | color: #FFF; 19 | font-size: 20px; 20 | font-weight: 300; 21 | text-transform: none; 22 | } 23 | // Description 24 | div[class^="description"]{ 25 | color: #FFF; 26 | @include FontBody; 27 | } 28 | 29 | // My Account 30 | // User Info 31 | .background-1QDuV2{ 32 | padding: 0; 33 | background-color: transparent; 34 | border-radius: 0; 35 | } 36 | .fieldList-21DyL8{ 37 | padding: 12px; 38 | background-color: $ChromeLow; 39 | border-radius: 4px; 40 | } 41 | .field-1HUseB{ 42 | h5{ 43 | @include FontBody; 44 | } 45 | .size16-1P40sf{ 46 | @include FontBody; 47 | } 48 | } 49 | 50 | // Connections 51 | // Connection services 52 | .accountList-33MS45{ 53 | background-color: $ChromeLow; 54 | border-radius: 4px; 55 | h5{ 56 | @include FontSubtitle; 57 | } 58 | .connectedAccounts-2-XP1G{ 59 | justify-content: space-between; 60 | .accountBtn-2Nozo3{ 61 | margin: 0; 62 | border-radius: 2px; 63 | } 64 | } 65 | } 66 | .connectionList-3pzR-1{ 67 | .connection-1fbD7X{ 68 | background-color: $ChromeLow; 69 | border-radius: 4px; 70 | .connectionHeader-2MDqhu{ 71 | border-radius: 4px 4px 0 0; 72 | } 73 | } 74 | } 75 | 76 | // Nitro 77 | // Remove background 78 | .background-3NP2Rg{ 79 | display: none; 80 | } 81 | // Remove Hero 82 | .hero-EvfTTA{ 83 | display: none; 84 | } 85 | .featuresHeader-4YwLcc{ 86 | display: none; 87 | } 88 | // Features 89 | .featureGrid-3-fNl-{ 90 | grid-template-columns: repeat(auto-fill,220px); 91 | } 92 | .feature-2w65J5{ 93 | background-color: $ChromeLow; 94 | border-radius: 4px; 95 | } 96 | .promotionBanner-1fCSab{ 97 | margin-top: 16px; 98 | background-color: $ChromeLow; 99 | } 100 | .marketingRefreshTier2Cta-bw9Vyc{ 101 | text-align: left; 102 | .marketingRefreshTitle-3pOyQb{ 103 | @include FontSubtitle; 104 | } 105 | .marketingRefreshSubtitle-3jft-o{ 106 | color: $BaseHigh; 107 | @include FontBody; 108 | } 109 | .buttonsCenter-11FqDP{ 110 | justify-content: start; 111 | } 112 | } 113 | .marketingRefreshSectionTier1-dRwS-6{ 114 | margin-top: 24px; 115 | padding-top: 24px; 116 | img{ 117 | display: none; 118 | } 119 | p{ 120 | color: $BaseHigh; 121 | @include FontBody; 122 | } 123 | } 124 | 125 | // Shill squad 126 | .intro-325xRx{ 127 | text-align: left; 128 | .introHeader-4MPach{ 129 | @include FontTitle; 130 | } 131 | .introBlurb-3gFgTQ{ 132 | @include FontBody; 133 | } 134 | } 135 | .joinCTA-FN-DEn{ 136 | justify-content: start; 137 | margin-bottom: 12px; 138 | .colorStandard-2KCXvj{ 139 | display: none; 140 | } 141 | button{ 142 | margin-left: 0; 143 | } 144 | 145 | } 146 | .newsletterWarning-UKgyLB{ 147 | text-align: left; 148 | } 149 | 150 | // Voice and audio 151 | .wrapper-3Z-vWm{ 152 | // Blend to background 153 | .notches-1sAcEM.gray-3_LNYR{ 154 | filter: contrast(100); 155 | } 156 | } 157 | 158 | // Keybinds 159 | div[class*="keybindGroup"]{ 160 | padding: 20px; 161 | div[class*="removeKeybind"]{ 162 | top: 4px; 163 | right: 4px; 164 | background-color: transparent; 165 | box-shadow: none; 166 | filter: grayscale(100%) brightness(200%); 167 | } 168 | } 169 | 170 | // Games 171 | // Now playing card 172 | .activeGame-14JI7o{ 173 | // No game detected 174 | &.notDetected-33MY4s{ 175 | background-color: #101010; 176 | border-radius: 0; 177 | .gameName-1RiWHm{ 178 | color: #FFF; 179 | @include FontBody; 180 | } 181 | .lastPlayed-3bQ7Bo{ 182 | display: none; 183 | } 184 | } 185 | // Game Detected 186 | .nowPlaying-284llR{ 187 | padding: 20px; 188 | border-radius: 0; 189 | .lastPlayed-3bQ7Bo{ 190 | @include FontBody; 191 | } 192 | } 193 | } 194 | 195 | // Streamer mode enabled warning 196 | div[class^="streamerModeEnabled-"]{ 197 | align-items: baseline; 198 | &::before{ 199 | content: "Streamer Mode enabled"; 200 | color: #FFF; 201 | font-size: 27px; 202 | font-weight: 300; 203 | } 204 | div[class^="streamerModeEnabledImage-"]{ 205 | width: auto; 206 | height: auto; 207 | margin-top: 20px; 208 | background-image: none; 209 | &::before{ 210 | content: "Some settings are hidden because streamer mode is enabled."; 211 | color: #FFF; 212 | } 213 | } 214 | div[class^="streamerModeEnabledBtn"]{ 215 | height: 32px; 216 | margin-top: 12px; 217 | padding: 7px 12px 10px; 218 | border: 0; 219 | border-radius: 2px; 220 | font-size: 0; 221 | font-weight: 400; 222 | line-height: 1; 223 | text-transform: none; 224 | &:hover{ 225 | background-color: $ListLow; 226 | } 227 | &::before{ 228 | content: "Go to Streamer Mode settings"; 229 | @include FontBody; 230 | } 231 | } 232 | } 233 | 234 | // Server settings roles list 235 | .scroller-305q3I{ 236 | background-color: #000; 237 | } 238 | div[class^="side"]{ 239 | div[class^="header"]{ 240 | color: #FFF; 241 | @include FontBody; 242 | text-transform: none; 243 | } 244 | div[class*="item"]{ 245 | border-radius: 0; 246 | font-weight: normal; 247 | } 248 | div[class*="itemDefaultSelected"]{ 249 | background-color: $Accent; 250 | } 251 | } 252 | 253 | // Audit log 254 | .contentRegion-3nDuYy{ 255 | background-color: #000; 256 | } 257 | div[class*="auditLog-"]{ 258 | border: none; 259 | border-radius: 0; 260 | div[class^="divider-"]{ 261 | display: none; 262 | } 263 | div[class^="changeStr-"]{ 264 | line-height: 1.333; 265 | } 266 | } 267 | 268 | // Members 269 | .role-2irmRk{ 270 | border-width: 2px; 271 | @include FontCaption; 272 | } 273 | 274 | // UI COMMONS 275 | // Warnings 276 | div[class^="ghostPill"]{ 277 | background-color: transparent; 278 | padding: 0; 279 | color: #FF0; 280 | @include FontBody; 281 | line-height: 1; 282 | } 283 | 284 | // Cards 285 | div[class*="cardPrimary"]{ 286 | background-color: #101010; 287 | border: 0; 288 | border-radius: 0; 289 | h5{ 290 | @include FontBody; 291 | } 292 | div[class*="desc"]{ 293 | color: $BaseMedium; 294 | } 295 | } 296 | 297 | // Toggle/other help text 298 | .description-3_Ncsb{ 299 | color: $BaseMedium; 300 | @include FontBody; 301 | } 302 | 303 | // No content warning 304 | div[class^="image-"] ~ div{ 305 | h4{ 306 | color: #FFF; 307 | @include FontSubtitle; 308 | text-transform: none; 309 | ~ div[class^="text-"]{ 310 | color: #FFF; 311 | } 312 | } 313 | } 314 | 315 | // Save alert 316 | .noticeRegion-1YviSH{ 317 | div[class^="container-"]{ 318 | border-radius: 0; 319 | div[class^="message-"]{ 320 | @include FontBody; 321 | } 322 | } 323 | button{ 324 | padding: 8px 12px 10px; 325 | } 326 | } 327 | } 328 | } 329 | 330 | // Images removal 331 | // US = User settings, CS = Channel settings, SS = Server Settings 332 | img[src="/assets/cdea41ede63f61153e4a3c0531fa3873.svg"], // US: 2FA 333 | div[style*="/assets/b47564b3086d0d8d941aae95a4b7b78c.svg"], // US: Authorised Apps 334 | div[style*="/assets/e9aaf1824f17126a7992e5ad98752389.svg"], // US: Connections 335 | div[style*="/assets/f3bb89a27e9d102f748da035cd7e5df7.svg"], // US: Keybinds 336 | div[style*="/assets/d01c53acda73318e5b39676ef8242eb7.svg"], // US: Games 337 | img[src="/assets/616e078b351d0df460971441949c53a3.svg"], // US: Streamer Mode 338 | div[style*="/assets/99253cefda98913b1e9f7d155ad81ed3.svg"], // SS: Audit Log 339 | div[style*="/assets/59c726954bd8424f376ca3a7eedc4c54.svg"], // SS: Integration 340 | div[style*="/assets/a7371de3223292c6f31f8aeed62f17c1.svg"], // SS: Emoji 341 | div[style*="/assets/97b178f31f0ec28b41387b78891d5b7a.svg"], // SS/CS: Webhooks 342 | div[style*="/assets/712a0fd4d14a1caadd31cb0745e91238.svg"], // SS/CS: Invites 343 | div[style*="/assets/789de85a973b1d974a21aa03c1e14323.svg"], // SS: Bans 344 | img[src="/assets/bfffd518c76d3f6bc5e96eb52e4ae2cf.svg"]{ // CS: Overview 345 | display: none; 346 | } 347 | -------------------------------------------------------------------------------- /src/components/settings/_core.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .layer, 2 | .theme-dark .layers{ 3 | background-color: #000; 4 | } 5 | .layer-3QrUeG{ 6 | background-color: transparent; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/thirdparty/_hljs_monokai.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .hljs{ 3 | display: block; 4 | overflow-x: auto; 5 | padding: 0.5em; 6 | background: #23241f 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/components/ui/_button.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | // Common 3 | .button-38aScr{ 4 | border-radius: 2px; 5 | @include FontBody; 6 | 7 | // Size 8 | &.sizeMedium-1AC_Sl, 9 | &.sizeLarge-1vSeWK, 10 | &.sizeXlarge-2yFAlZ{ 11 | height: 32px; 12 | min-height: 32px; 13 | } 14 | 15 | // Outlined buttons 16 | &.lookOutlined-3sRXeN{ 17 | border: 2px solid transparent; 18 | &.colorPrimary-3b3xI6, // Server roles 'Clear Role Permissions' 19 | &.colorWhite-rEQuAQ{ // Webhook 'Edit' 20 | background-color: $BaseLow; 21 | border-color: transparent; 22 | color: $BaseHigh; 23 | &:hover{ 24 | background-color: $ListLow; 25 | } 26 | &:active{ 27 | background-color: $BaseMediumLow; 28 | } 29 | } 30 | &.colorRed-1TFJan{ // Remove 2FA 31 | color: $alert; 32 | border-color: $alert; 33 | &:hover{ 34 | background-color: $alert; 35 | color: $BaseHigh; 36 | } 37 | } 38 | } 39 | 40 | // Filled buttons 41 | &.lookFilled-1Gx00P{ 42 | &.colorPrimary-3b3xI6, 43 | &.colorGrey-2DXtkV{ 44 | background-color: $BaseLow; 45 | color: $BaseHigh; 46 | &:hover{ 47 | background-color: $ListLow; 48 | } 49 | } 50 | &.colorBrand-3pXr91{ 51 | background-color: $Accent; 52 | &:hover{ 53 | background-color: $ListAccentLow; 54 | } 55 | &:disabled{ // Add game, no option selected 56 | &:hover{ 57 | background-color: $Accent; 58 | } 59 | } 60 | } 61 | &.colorGreen-29iAKY{ 62 | background-color: $safe; 63 | &:hover{ 64 | background-color: rgba($color: $safe, $alpha: 0.6); 65 | } 66 | } 67 | &.colorRed-1TFJan, 68 | &.actionRed-gYn8D3{ 69 | background-color: $alert; 70 | &:hover{ 71 | background-color: rgba($color: $alert, $alpha: 0.6);; 72 | } 73 | } 74 | } 75 | 76 | // Link buttons 77 | &.lookLink-9FtZy-{ 78 | &.colorPrimary-3b3xI6, 79 | &.colorGrey-2DXtkV{ 80 | color: $BaseHigh; 81 | &:hover{ 82 | color: $BaseMedium; 83 | .contents-18-Yxp{ 84 | background-image: none; 85 | } 86 | } 87 | &:active{ 88 | color: $BaseMediumLow; 89 | } 90 | } 91 | } 92 | 93 | // Ghost 94 | // Edit keybind 95 | &.lookGhost-2Fn_0-{ 96 | border: 2px solid transparent; 97 | &.colorGrey-2DXtkV, 98 | &.colorBrand-3pXr91{ 99 | background-color: #333; 100 | color: $BaseHigh; 101 | &:hover{ 102 | border-color: $ListLow; 103 | } 104 | } 105 | } 106 | 107 | // Inverted 108 | &.lookInverted-2D7oAl{ 109 | border: 2px solid transparent; 110 | &.colorBrand-3pXr91{ 111 | background-color: $BaseLow; 112 | color: $BaseHigh; 113 | &:hover{ 114 | background-color: $ListLow; 115 | } 116 | } 117 | // Friend request button in user profile modal when spotify is playing 118 | &.colorGreen-29iAKY{ 119 | background-color: $BaseLow; 120 | color: $BaseHigh; 121 | &:hover{ 122 | background-color: $ListLow; 123 | color: $BaseHigh; 124 | } 125 | &:active{ 126 | background-color: $BaseMediumLow; 127 | } 128 | } 129 | } 130 | } 131 | 132 | // Pagination button 133 | // Location: Server discovery 134 | .pageButton-MknE-_{ 135 | @include FontBody; 136 | // Back/Next buttons 137 | &.endButton-3wGL3C{ 138 | background-color: $BaseLow; 139 | color: $BaseHigh; 140 | &:disabled{ 141 | opacity: 1; 142 | background-color: $BaseLow; 143 | color: $BaseMediumLow; 144 | } 145 | } 146 | // Page numbers 147 | &.roundButton-2CW1Hh{ 148 | width: 32px; 149 | height: 32px; 150 | margin: 0 2px; 151 | padding: 0; 152 | border-radius: 2px; 153 | &:hover{ 154 | background-color: $ListLow; 155 | } 156 | } 157 | &.activeButton-1BJAiN{ 158 | background-color: $Accent; 159 | &:hover{ 160 | background-color: $ListAccentHigh; 161 | } 162 | } 163 | } 164 | 165 | // Button group 166 | .group-2dAfBy{ 167 | background-color: $BaseLow; 168 | border-radius: 2px; 169 | .item-3T2z1R{ 170 | border: 0; 171 | 172 | &.deny-3nAuT6, 173 | &.passthrough-1c2ewQ, 174 | &.allow-1PzSY3{ 175 | img{ 176 | display: none; 177 | } 178 | &::before{ 179 | font-size: 16px; 180 | @include FontIcon; 181 | } 182 | } 183 | 184 | 185 | &.deny-3nAuT6{ 186 | &::before{ 187 | content: "\F78A"; // Cancel 188 | color: $alert; 189 | } 190 | &.denySelected-1mh2mZ{ 191 | background-color: $alert; 192 | &::before{ 193 | color: $BaseHigh; 194 | } 195 | } 196 | } 197 | &.passthrough-1c2ewQ{ 198 | &::before{ 199 | content: "\E9AE"; 200 | color: $BaseHigh; 201 | } 202 | &.passthroughSelected-1Eq0Kl{ 203 | background-color: $BaseLow; 204 | &::before{ 205 | color: $BaseHigh; 206 | } 207 | } 208 | } 209 | &.allow-1PzSY3{ 210 | &::before{ 211 | content: "\F78C"; 212 | color: $safe; 213 | } 214 | &.allowSelected-25S_i5{ 215 | background-color: $safe; 216 | &::before{ 217 | color: $BaseHigh; 218 | } 219 | } 220 | } 221 | } 222 | } 223 | } 224 | -------------------------------------------------------------------------------- /src/components/ui/_context_menu.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .menu-3sdvDG{ 2 | min-width: 240px; 3 | padding: 8px 0; 4 | background-color: rgba($color: #2d2d2d, $alpha: .93); 5 | border: 1px solid $BorderTransient; 6 | border-radius: 4px; 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(10px); 17 | border-radius: 4px; 18 | } 19 | 20 | .scroller-3BxosC{ 21 | padding: 0 8px; 22 | max-height: calc(100vh - 64px); 23 | } 24 | 25 | // Separators 26 | .separator-2I32lJ{ 27 | margin: 10px 4px; 28 | border-bottom-color: $BaseLow; 29 | } 30 | 31 | // Item 32 | .item-1tOPte{ 33 | margin: 0 -4px; 34 | padding: 0 12px; 35 | border-radius: 0; 36 | @include FontBody; 37 | color: $BaseHigh; 38 | &.focused-3afm-j{ 39 | background-color: $ListLow; 40 | } 41 | &.colorDanger-2qLCe1{ 42 | color: $alert; 43 | } 44 | &.disabled-1WRMNA{ 45 | color: $BaseLow; 46 | opacity: 1; 47 | } 48 | 49 | // Remove subtext on Spotify menu items 50 | &[id*="spotify"], 51 | &[id*="listen"]{ 52 | .subtext-13Lvrj{ 53 | display: none; 54 | } 55 | } 56 | } 57 | 58 | // Emoji items 59 | .button-F9qN4n{ 60 | width: 24px; 61 | height: 24px; 62 | background-color: $ListMedium; 63 | &.focused-3ZzkKr{ 64 | background-color: $ListAccentLow; 65 | box-shadow: none; 66 | } 67 | .icon-QGKz8T{ 68 | width: 18px; 69 | height: 18px; 70 | 71 | } 72 | } 73 | 74 | // Volume slider 75 | .grabber-3mFHz2{ 76 | margin-top: -2px !important; 77 | } 78 | 79 | .submenu-2-ysNh{ 80 | min-width: 240px; 81 | padding: 8px 0; 82 | background-color: rgba($color: #2d2d2d, $alpha: .95); 83 | border: 1px solid $BorderTransient; 84 | position: relative; 85 | &::before{ 86 | content: ""; 87 | width: 100%; 88 | height: 100%; 89 | position: absolute; 90 | top: 0; 91 | left: 0; 92 | backdrop-filter: blur(10px); 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/components/ui/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | .theme-dark{ 2 | .auto-Ge5KZx{ 3 | &::-webkit-scrollbar{ 4 | width: 16px; 5 | } 6 | &::-webkit-scrollbar-button{ 7 | height: 16px; 8 | background-color: $ChromeMedium; 9 | border: 0; 10 | &:vertical:increment{ 11 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEXS0tL////S0tLS0tIBy8dCAAAAA3RSTlMAACYoe0EjAAAALklEQVR4AWNgRAN0FGBmYgACJma4ABNIBEjABUAckCBcACQN5CMJAEVAxlDLYQCPTgENZhBK9AAAAABJRU5ErkJggg==); 12 | background-size: 16px; 13 | &:hover{ 14 | background-color: $ListLow; 15 | } 16 | &:active{ 17 | background-color: $BaseMediumLow; 18 | } 19 | } 20 | &:vertical:decrement{ 21 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEXS0tL////S0tLS0tIBy8dCAAAAA3RSTlMAACYoe0EjAAAALklEQVR4AWNgRAPUFGBiYkARYGJmhoowQPlMQMQAFwBxGIAEXADEB4lg2EIzAQCUvwEWzkMg9gAAAABJRU5ErkJggg==); 22 | background-size: 16px 16px; 23 | &:hover{ 24 | background-color: $ListLow; 25 | } 26 | &:active{ 27 | background-color: $BaseMediumLow; 28 | } 29 | } 30 | } 31 | &::-webkit-scrollbar-button:start:increment, 32 | &::-webkit-scrollbar-button:end:decrement { // Only show single buttons 33 | display: none; 34 | } 35 | &::-webkit-scrollbar-thumb{ 36 | background-color: $BaseLow; 37 | border: 0; 38 | border-radius: 0; 39 | &:hover{ 40 | background-color: $BaseMediumLow; 41 | } 42 | &:active{ 43 | background-color: $BaseMedium; 44 | } 45 | } 46 | &::-webkit-scrollbar-track-piece{ 47 | background-color: $ChromeMedium; 48 | border: 0; 49 | border-radius: 0; 50 | } 51 | &::-webkit-scrollbar-track{ 52 | margin-bottom: 0; 53 | } 54 | } 55 | } 56 | 57 | .scrollerThemed-2oenus{ 58 | &.themeGhostHairline-DBD-2d .scroller-2FKFPG{ 59 | &::-webkit-scrollbar{ 60 | width: 6px; 61 | } 62 | &::-webkit-scrollbar-thumb{ 63 | background-color: $BaseLow !important; 64 | border: 2px solid transparent; 65 | border-radius: 0; 66 | &:hover{ 67 | background-color: $BaseMediumLow !important; 68 | } 69 | &:active{ 70 | background-color: $BaseMedium !important; 71 | } 72 | } 73 | &::-webkit-scrollbar-track-piece{ 74 | background-color: transparent; 75 | border: 0; 76 | border-radius: 0; 77 | } 78 | } 79 | } 80 | 81 | // Context menu 82 | .contextMenu-HLZMGh{ 83 | &::-webkit-scrollbar{ 84 | width: 2px; 85 | } 86 | &::-webkit-scrollbar-thumb{ 87 | background-color: $BaseLow; 88 | &:active{ 89 | background-color: $BaseMedium; 90 | } 91 | } 92 | } 93 | 94 | // Autocomplete GIF scrollbar 95 | .horizontalAutocompletes-lotYRO{ 96 | &::-webkit-scrollbar-track{ 97 | margin: 0 8px; 98 | } 99 | &::-webkit-scrollbar-thumb{ 100 | background-color: $BaseLow; 101 | &:hover{ 102 | background-color: $ListLow; 103 | } 104 | &:active{ 105 | background-color: $BaseMediumLow; 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/components/ui/_titlebar.scss: -------------------------------------------------------------------------------- 1 | .titleBar-AC4pGV{ 2 | background-color: $ChromeBlackMediumLow; 3 | &.withFrame-haYltI{ 4 | height: calc(32px - 4px); 5 | } 6 | .wordmarkWindows-1v0lYD{ 7 | color: $BaseMedium; 8 | &::after{ 9 | content: "Discord"; 10 | top: 9px; 11 | left: 12px; 12 | display: block; 13 | position: absolute; 14 | @include FontCaption; 15 | } 16 | svg{ 17 | display: none; 18 | } 19 | } 20 | 21 | // Controls 22 | .winButton-iRh8-Z{ 23 | width: 45px; 24 | height: 32px; 25 | color: $BaseMedium; 26 | &.winButtonClose-1HsbF-:hover{ 27 | background-color: #E81123; 28 | } 29 | } 30 | } 31 | 32 | // Change titlebar name and controls colour when app is focused 33 | html.app-focused{ 34 | .wordmarkWindows-1v0lYD, 35 | .winButton-iRh8-Z{ 36 | color: $BaseHigh; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/ui/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .tooltip-2QfLtc{ 2 | padding: 6px 12px; 3 | background-color: $ChromeMediumLow; 4 | border: 1px solid $BorderTransient; 5 | border-radius: 2px; 6 | color: $BaseHigh; 7 | @include FontBody; 8 | .tooltipPointer-3ZfirK{ 9 | display: none; 10 | } 11 | .tooltipContent-bqVLWK{ 12 | padding: 0; 13 | } 14 | } 15 | 16 | // Hide settings button tooltip 17 | .theme-dark .layer-v9HyYc{ 18 | &[style*="left: -29px;"], // 100%, 110%, 125%, 150%, 175% 19 | &[style*="left: -30px;"]{ // 50%, 67%, 75%, 80%, 90%, 200% 20 | display: none; 21 | } 22 | } 23 | --------------------------------------------------------------------------------