├── .gitignore ├── _index.scss ├── source ├── images │ ├── lily.png │ └── login_background.png ├── _index.scss ├── theme │ ├── powercord │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _github-in-discord.scss │ │ │ ├── _product-license.scss │ │ │ └── _toasts.scss │ ├── chat │ │ ├── inner │ │ │ ├── _mentions.scss │ │ │ ├── _video-controls.scss │ │ │ ├── _spoilers.scss │ │ │ ├── _embedded-cards.scss │ │ │ ├── _bars.scss │ │ │ ├── _textarea.scss │ │ │ ├── _toolbar.scss │ │ │ ├── _messages.scss │ │ │ └── _voice-streaming.scss │ │ └── _index.scss │ ├── settings │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _headers.scss │ │ │ ├── _switch-item.scss │ │ │ ├── _tabs.scss │ │ │ ├── _cards.scss │ │ │ └── _radio-bars.scss │ ├── pages │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _login.scss │ │ │ ├── _nitro.scss │ │ │ ├── _server-discovery.scss │ │ │ ├── _friends.scss │ │ │ └── _server-boosting.scss │ ├── buttons │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _selected-item.scss │ │ │ ├── _draggable-slider.scss │ │ │ ├── _checkbox.scss │ │ │ ├── _popout.scss │ │ │ └── _regular.scss │ ├── user │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _game-activity.scss │ │ │ ├── _settings.scss │ │ │ ├── _voice-video.scss │ │ │ ├── _billing.scss │ │ │ ├── _profile.scss │ │ │ └── _popout.scss │ ├── guilds │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _community.scss │ │ │ ├── _unreads.scss │ │ │ ├── _audit-log.scss │ │ │ ├── _general-settings.scss │ │ │ ├── _channel-permissions.scss │ │ │ └── _channels-sidebar.scss │ ├── _index.scss │ ├── app │ │ ├── inner │ │ │ ├── _inputs.scss │ │ │ ├── _animations.scss │ │ │ ├── _windows-title-bar.scss │ │ │ ├── _private-channels.scss │ │ │ ├── _dropdown-menus.scss │ │ │ ├── _badges.scss │ │ │ ├── _home-icon.scss │ │ │ ├── _server-list.scss │ │ │ ├── _light-mode-warning.scss │ │ │ └── _layout.scss │ │ └── _index.scss │ ├── modals │ │ ├── _index.scss │ │ └── inner │ │ │ ├── _vc-feedback.scss │ │ │ ├── _generic.scss │ │ │ ├── _accept-invite.scss │ │ │ ├── _screen-share.scss │ │ │ ├── _reactions.scss │ │ │ ├── _keyboard-combos.scss │ │ │ ├── _quickswitcher.scss │ │ │ ├── _add-join-server.scss │ │ │ └── _uploads.scss │ └── popouts │ │ ├── inner │ │ ├── _public-guild.scss │ │ ├── _rtc-connection-box.scss │ │ ├── _mention-everyone.scss │ │ ├── _autocomplete.scss │ │ ├── _roles.scss │ │ ├── _pins-results-inbox.scss │ │ ├── _search-results.scss │ │ ├── _gifpicker.scss │ │ ├── _search-box.scss │ │ └── _datepicker.scss │ │ └── _index.scss ├── extras │ ├── _reaction-emoji-hover.scss │ ├── _bigger-click-emoji.scss │ ├── _status-picker.scss │ ├── _custom-status-scrollbar.scss │ ├── _user-notes.scss │ ├── __extras-import.scss │ ├── _status-indicators.scss │ ├── _revert.scss │ └── _hljs-styling.scss ├── helpers │ ├── _keyframes.scss │ ├── _variables.scss │ └── _mixins.scss ├── support │ ├── kaleidoscope.theme.css │ └── kaleidoscope.compiled.css └── _root.scss ├── powercord_manifest.json ├── LICENSE.md ├── CONTRIBUTING.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | prepros.config -------------------------------------------------------------------------------- /_index.scss: -------------------------------------------------------------------------------- 1 | @use 'source'; -------------------------------------------------------------------------------- /source/images/lily.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spinfish/kaleidoscope/HEAD/source/images/lily.png -------------------------------------------------------------------------------- /source/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'root'; // Variables first 2 | @forward 'theme'; 3 | @forward 'extras/_extras-import'; -------------------------------------------------------------------------------- /source/images/login_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spinfish/kaleidoscope/HEAD/source/images/login_background.png -------------------------------------------------------------------------------- /source/theme/powercord/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/github-in-discord'; 2 | @forward 'inner/product-license'; 3 | @forward 'inner/toasts'; -------------------------------------------------------------------------------- /source/theme/chat/inner/_mentions.scss: -------------------------------------------------------------------------------- 1 | .mention { 2 | &.wrapper-3WhCwL { 3 | color: var(--kds-number); 4 | background-color: rgba(var(--kds-number-rgb), 0.1); 5 | } 6 | } -------------------------------------------------------------------------------- /source/theme/settings/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/cards'; 2 | @forward 'inner/headers'; 3 | @forward 'inner/radio-bars'; 4 | @forward 'inner/switch-item'; 5 | @forward 'inner/tabs'; -------------------------------------------------------------------------------- /source/theme/pages/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/friends'; 2 | @forward 'inner/login'; 3 | @forward 'inner/nitro'; 4 | @forward 'inner/server-boosting'; 5 | @forward 'inner/server-discovery'; -------------------------------------------------------------------------------- /source/theme/buttons/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/checkbox'; 2 | @forward 'inner/draggable-slider'; 3 | @forward 'inner/popout'; 4 | @forward 'inner/regular'; 5 | @forward 'inner/selected-item'; -------------------------------------------------------------------------------- /source/theme/user/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/billing'; 2 | @forward 'inner/game-activity'; 3 | @forward 'inner/popout'; 4 | @forward 'inner/profile'; 5 | @forward 'inner/settings'; 6 | @forward 'inner/voice-video'; -------------------------------------------------------------------------------- /source/theme/settings/inner/_headers.scss: -------------------------------------------------------------------------------- 1 | .header-2RyJ0Y { 2 | color: var(--kds-settings-smaller-header); 3 | } 4 | 5 | .h2-2gWE-o { 6 | &.defaultColor-1_ajX0 { 7 | color: var(--kds-settings-larger-header); 8 | } 9 | } -------------------------------------------------------------------------------- /source/theme/buttons/inner/_selected-item.scss: -------------------------------------------------------------------------------- 1 | .selectedBrand-1UKrSX { 2 | background-color: var(--kds-darker-reply-content); 3 | 4 | &:hover { 5 | background-color: rgba(var(--kds-darker-reply-content-rgb), 0.9); 6 | } 7 | } -------------------------------------------------------------------------------- /source/theme/guilds/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/audit-log'; 2 | @forward 'inner/channel-permissions'; 3 | @forward 'inner/channels-sidebar'; 4 | @forward 'inner/community'; 5 | @forward 'inner/general-settings'; 6 | @forward 'inner/unreads'; -------------------------------------------------------------------------------- /source/theme/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'app'; 2 | @forward 'buttons'; 3 | @forward 'chat'; 4 | @forward 'guilds'; 5 | @forward 'modals'; 6 | @forward 'pages'; 7 | @forward 'popouts'; 8 | @forward 'powercord'; 9 | @forward 'settings'; 10 | @forward 'user'; -------------------------------------------------------------------------------- /source/extras/_reaction-emoji-hover.scss: -------------------------------------------------------------------------------- 1 | .reactionTooltipContent-2TwEIL { 2 | display: block; 3 | text-align: center; 4 | 5 | > .reactionTooltipEmoji-3LG0v8 { 6 | width: 100%; 7 | height: 110px; 8 | margin-bottom: 9px; 9 | } 10 | } -------------------------------------------------------------------------------- /source/theme/settings/inner/_switch-item.scss: -------------------------------------------------------------------------------- 1 | .container-3auIfb { 2 | background-color: var(--kds-light-pink-tick-slider) !important; 3 | 4 | path { 5 | fill: black; 6 | } 7 | 8 | rect { 9 | fill: var(--kds-light-grey); 10 | } 11 | } -------------------------------------------------------------------------------- /source/extras/_bigger-click-emoji.scss: -------------------------------------------------------------------------------- 1 | .popoutContainer-1MXdqN { 2 | width: 320px; 3 | } 4 | 5 | .emojiSection-3Fb9ix { 6 | .jumboable { 7 | width: 100%; 8 | height: 120px; 9 | } 10 | 11 | .colorStandard-2KCXvj { 12 | text-align: center; 13 | } 14 | } -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kaleidoscope", 3 | "description": "A vibrant, colourful dark theme for Discord based on the 2077 VSCode theme.", 4 | "version": "2.4.2", 5 | "author": "mackenzie#0173", 6 | "consent": "true", 7 | "theme": "_index.scss", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_inputs.scss: -------------------------------------------------------------------------------- 1 | .inputDefault-_djjkz { 2 | border-color: var(--background-tertiary); 3 | 4 | &:hover { 5 | border-color: rgba(var(--kds-almost-cyan-rgb), 0.5); 6 | } 7 | 8 | &:focus { 9 | border-color: rgba(255, 27, 240, 0.5); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /source/theme/chat/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/bars'; 2 | @forward 'inner/embedded-cards'; 3 | @forward 'inner/mentions'; 4 | @forward 'inner/messages'; 5 | @forward 'inner/spoilers'; 6 | @forward 'inner/textarea'; 7 | @forward 'inner/toolbar'; 8 | @forward 'inner/video-controls'; 9 | @forward 'inner/voice-streaming'; -------------------------------------------------------------------------------- /source/theme/modals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/accept-invite'; 2 | @forward 'inner/add-join-server'; 3 | @forward 'inner/generic'; 4 | @forward 'inner/keyboard-combos'; 5 | @forward 'inner/quickswitcher'; 6 | @forward 'inner/reactions'; 7 | @forward 'inner/screen-share'; 8 | @forward 'inner/uploads'; 9 | @forward 'inner/vc-feedback'; -------------------------------------------------------------------------------- /source/helpers/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes rotation { 2 | from { 3 | transform: rotate(0deg); 4 | } to { 5 | transform: rotate(360deg); 6 | } 7 | } 8 | 9 | @keyframes imagine-using-light-mode { 10 | 0% { 11 | border-color: red; 12 | } 50% { 13 | border-color: yellow; 14 | } 100% { 15 | border-color: red; 16 | } 17 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_public-guild.scss: -------------------------------------------------------------------------------- 1 | // I'm fully aware that this code is basically the same as 2 | // the contentwarningpopout but I'm not making a mixin just 3 | // for this 4 | #app-mount { 5 | .guildPopout-3CgKqR { 6 | background-color: var(--background-secondary-alt); 7 | box-shadow: 0 2px 5px 0 var(--background-tertiary); 8 | } 9 | } -------------------------------------------------------------------------------- /source/theme/app/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/animations'; 2 | @forward 'inner/badges'; 3 | @forward 'inner/dropdown-menus'; 4 | @forward 'inner/home-icon'; 5 | @forward 'inner/inputs'; 6 | @forward 'inner/layout'; 7 | @forward 'inner/light-mode-warning'; 8 | @forward 'inner/private-channels'; 9 | @forward 'inner/server-list'; 10 | @forward 'inner/windows-title-bar'; -------------------------------------------------------------------------------- /source/theme/guilds/inner/_community.scss: -------------------------------------------------------------------------------- 1 | // Discovery -> Partner Programme 2 | .checklist-3Y6Fqp, 3 | .checklistContainer-mFJZEJ { 4 | border: 1px solid black; 5 | 6 | .checklistIcon-6Kez2J { 7 | margin-top: 2.5px; 8 | } 9 | 10 | > .separator-1COOpU, 11 | > .separator-Hx_3SF { 12 | opacity: 0.9; 13 | background-color: black; 14 | } 15 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_rtc-connection-box.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-2x5lvQ { 3 | box-shadow: 0 0 10px 2px var(--background-secondary-alt); 4 | 5 | > .header-2C89wJ { 6 | background-color: var(--background-tertiary); 7 | } 8 | 9 | > section { 10 | background-color: var(--background-secondary-alt); 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /source/support/kaleidoscope.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name kaleidoscope 3 | * @author mackenzie#0173 4 | * @description A vibrant, colourful dark theme inspired by the 2077 theme for VSCode. 5 | * @version 2.4.2 6 | * @source https://github.com/spinfish/kaleidoscope 7 | */ 8 | 9 | @import url('https://spinfish.github.io/kaleidoscope/source/support/kaleidoscope.compiled.css'); -------------------------------------------------------------------------------- /source/extras/_status-picker.scss: -------------------------------------------------------------------------------- 1 | #status-picker-dnd { 2 | --status-colour: var(--kds-dnd-colour); 3 | } 4 | 5 | #status-picker-idle { 6 | --status-colour: var(--kds-idle-colour); 7 | } 8 | 9 | #status-picker-online { 10 | --status-colour: var(--kds-online-colour); 11 | } 12 | 13 | #status-picker-invisible { 14 | --status-colour: var(--kds-invisible-colour); 15 | } -------------------------------------------------------------------------------- /source/theme/powercord/inner/_github-in-discord.scss: -------------------------------------------------------------------------------- 1 | // This is for themeing the modals for the amazing plugin Github in Discord 2 | // created by ugly-patootie, that you should most definitely take a look at c:: 3 | 4 | .powercord { 5 | .githubModel { 6 | .back-outfile { 7 | border: none !important; 8 | box-shadow: 0 0 0 1px black; 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /source/theme/buttons/inner/_draggable-slider.scss: -------------------------------------------------------------------------------- 1 | .slider-1PF9SW { 2 | .grabber-3mFHz2 { 3 | border-color: var(--kds-mango-yellow); 4 | background-color: var(--kds-mango-yellow); 5 | } 6 | 7 | .bar-2Qqk5Z { 8 | background-color: var(--kds-reply-content); 9 | 10 | .barFill-23-gu- { 11 | background-color: var(--kds-category-name); 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /source/theme/buttons/inner/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .checkbox-1ix_J3 { 2 | @at-root #app-mount & { 3 | border-color: var(--kds-reply-content); 4 | } 5 | 6 | &.checked-3_4uQ9 { 7 | --control-brand-foreground: var(--kds-reply-content); 8 | background-color: rgba(var(--kds-reply-content-rgb), 0.075) !important; 9 | 10 | path { 11 | fill: deeppink; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /source/theme/guilds/inner/_unreads.scss: -------------------------------------------------------------------------------- 1 | .unreadBar-3t3sYc { 2 | box-shadow: 0 0 0 1px var(--background-tertiary); 3 | background-color: var(--background-tertiary); 4 | transition: 0.3s background-color linear; 5 | 6 | &:hover { 7 | background-color: var(--background-modifier-selected); 8 | } 9 | 10 | > .text-2e2ZyG { 11 | color: var(--kds-almost-cyan); 12 | } 13 | } -------------------------------------------------------------------------------- /source/theme/pages/inner/_login.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/variables' as *; 2 | 3 | .splashBackground-1FRCko { 4 | .image-2jyRAK { 5 | &.loaded-3PtF_J { 6 | content: $login-background; 7 | } 8 | } 9 | 10 | .canvas-3XuBXe, 11 | .fallbackImage-31Sk4m.visible-JD5pR1 { 12 | // Removes practically impossible to theme splash on side 13 | display: none; 14 | } 15 | } -------------------------------------------------------------------------------- /source/theme/popouts/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'inner/autocomplete'; 2 | @forward 'inner/datepicker'; 3 | @forward 'inner/gifpicker'; 4 | @forward 'inner/mention-everyone'; 5 | @forward 'inner/pins-results-inbox'; 6 | @forward 'inner/public-guild'; 7 | @forward 'inner/roles'; 8 | @forward 'inner/rtc-connection-box'; 9 | @forward 'inner/search-box'; // Discord is lying 10 | @forward 'inner/search-results'; -------------------------------------------------------------------------------- /source/theme/settings/inner/_tabs.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | // Subscriptions + Server Boost Status 4 | .premiumTabItem-1QTfBr, 5 | .serverBoostTabItem-2hFTIN { 6 | @include special-themed-item-button(cyan, 0.6, $path: true); 7 | } 8 | 9 | // Logout 10 | .item-PXvHYJ { 11 | &.themed-OHr7kt { 12 | &[style*='359'] { 13 | @include special-themed-item-button(red, 0.9); 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_vc-feedback.scss: -------------------------------------------------------------------------------- 1 | .emojis-3mSQwp { 2 | .emojiSad-1iG7c0 { 3 | background-image: url('https://discord.com/assets/08b9e24092ee146b9e071e89049c1055.svg'); 4 | } 5 | 6 | .emojiNeutral-1AAukj { 7 | background-image: url('https://discord.com/assets/fc5c8aa09047ef94d2c380891feff0f4.svg'); 8 | } 9 | 10 | .emojiHappy-1umapU { 11 | background-image: url('https://discord.com/assets/626aaed496ac12bbdb68a86b46871a1f.svg'); 12 | } 13 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .root-1gCeng, 3 | .modal-yWgWj- { 4 | box-shadow: 0 0 0 1px black; 5 | background-color: var(--background-secondary); 6 | 7 | .footer-2gL1pp, 8 | .message-2qRu38 { 9 | box-shadow: inherit; 10 | background-color: var(--background-secondary-alt); 11 | } 12 | } 13 | 14 | .separator-2-RRj_ { 15 | box-shadow: 0 1px 0 0 var(--background-tertiary), 0 1px 2px 0 black; 16 | } 17 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_accept-invite.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/variables' as *; 2 | 3 | .scroller-3__pG8 { 4 | box-shadow: $modal-box-shadow; 5 | background-color: var(--background-secondary); 6 | 7 | .title-2_aCTw { 8 | color: var(--kds-category-name); 9 | } 10 | 11 | .button-3k0cO7 { 12 | background-color: var(--background-modifier-selected); 13 | 14 | &:hover { 15 | color: var(--kds-mango-yellow); 16 | background-color: rgba(0, 0, 0, 0.4); 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_mention-everyone.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .contentWarningPopout-n5JsIs { 3 | box-shadow: 0 2px 5px 0 var(--background-tertiary); 4 | background-color: var(--background-secondary-alt); 5 | 6 | .icon-2RSfUw { 7 | path { 8 | fill: var(--kds-almost-cyan); 9 | } 10 | } 11 | 12 | > .footer-3N9rgh { 13 | background-color: var(--background-secondary); 14 | 15 | > .colorStandard-2KCXvj { 16 | color: deeppink; 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /source/extras/_custom-status-scrollbar.scss: -------------------------------------------------------------------------------- 1 | .customStatus-1COQYu { 2 | overflow: auto; 3 | 4 | &::-webkit-scrollbar { 5 | height: 4px; 6 | 7 | &-track { 8 | border-radius: 4px; 9 | margin-right: 15px; 10 | background-color: rgba(0, 0, 0, 0.15); 11 | } 12 | 13 | &-thumb { 14 | border-radius: 4px; 15 | background-color: var(--header-secondary); 16 | } 17 | } 18 | 19 | > span { 20 | // Tested this, it indeed only works for too-long statuses 21 | padding-right: 15px; 22 | } 23 | } -------------------------------------------------------------------------------- /source/theme/guilds/inner/_audit-log.scss: -------------------------------------------------------------------------------- 1 | .auditLog-3jNbM6 { 2 | @at-root #app-mount & { 3 | border: 1px solid black; 4 | } 5 | 6 | .headerExpanded-CUEwZ5 { 7 | box-shadow: none; 8 | background-color: var(--background-secondary); 9 | } 10 | 11 | .headerDefault-1wrJcN, 12 | .headerClickable-2IVFo9 { 13 | background-color: var(--background-modifier-hover); 14 | } 15 | 16 | .divider-1pnAR2 { 17 | background-color: black; 18 | } 19 | 20 | > .changeDetails-bk98pu { 21 | background-color: transparent; 22 | } 23 | } -------------------------------------------------------------------------------- /source/theme/pages/inner/_nitro.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/variables' as *; 2 | 3 | .wrapper-3nSjSv { 4 | background-image: $nitro-header-gradient; 5 | } 6 | 7 | .tier1-1ttHRY { 8 | &.banner-3Kac2g { 9 | border-radius: 8px; 10 | background-image: linear-gradient(to right, rgb(167, 100, 237), rgb(226, 146, 170)); 11 | 12 | .colorBrand-3pXr91 { 13 | color: var(--kds-dark-blue-popout-normal); 14 | } 15 | } 16 | } 17 | 18 | .hero-EvfTTA { 19 | .lookInverted-2D7oAl { 20 | color: var(--kds-settings-larger-header); 21 | } 22 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_video-controls.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | #app-mount { 4 | .mediaBarGrabber-1FqnbN { 5 | background-color: var(--interactive-hover); 6 | } 7 | } 8 | 9 | .buffer-26XPkd { 10 | background-color: transparent; 11 | } 12 | 13 | .mediaBarProgress-1xaPtl { 14 | @include parent-and('&::before', '&::after') { 15 | background-color: var(--kds-almost-cyan); 16 | } 17 | } 18 | 19 | .mediaBarWrapper-3D7r67 { 20 | @include parent-and('&::before, &::after') { 21 | background-color: deeppink; 22 | } 23 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_animations.scss: -------------------------------------------------------------------------------- 1 | // Small blurple circle loading 2 | .path-92Hmty { 3 | stroke: var(--interactive-normal) !important; 4 | } 5 | 6 | // Two blurple dot loading 7 | .spinner-2enMB9 { 8 | .wanderingCubesItem-WPXqao { 9 | background-color: var(--interactive-normal); 10 | } 11 | } 12 | 13 | // E.g. when clicking on an emoji, the grey loading thing 14 | .popoutLoadingForeground-2mZT61 { 15 | background-image: linear-gradient( 16 | 90deg, 17 | var(--background-primary), 18 | var(--background-secondary), 19 | var(--background-primary) 20 | ); 21 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | .autocomplete-1vrmpx { 2 | @at-root #app-mount & { 3 | background-color: var(--background-secondary-alt); 4 | } 5 | 6 | .selected-1Tbx07 { 7 | background-color: var(--background-primary); 8 | } 9 | 10 | .categoryHeader-O1zU94 { 11 | border-radius: 0 0 4px 4px; 12 | background-color: var(--background-tertiary); 13 | } 14 | 15 | .option-1B5ZV8 { 16 | background-color: var(--background-tertiary); 17 | } 18 | 19 | .active-2awTSY { 20 | background-color: var(--kds-darker-reply-content) !important; 21 | } 22 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_screen-share.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .item-3T2z1R { 3 | border-color: black; 4 | } 5 | 6 | .selectorButton-EEUWed { 7 | &:hover { 8 | background-color: transparent; 9 | } 10 | 11 | &.selectorButtonSelected-t5V9On { 12 | background-color: var(--kds-darker-reply-content); 13 | } 14 | } 15 | } 16 | 17 | .sourceThumbnail-27dolk { 18 | @at-root .tile-2w4k5N:hover & { 19 | box-shadow: 0 0 0 2px var(--kds-number) inset; 20 | } 21 | 22 | &.selected-1nOkyc { 23 | box-shadow: 0 0 0 2px var(--kds-settings-smaller-header) inset; 24 | } 25 | } -------------------------------------------------------------------------------- /source/extras/_user-notes.scss: -------------------------------------------------------------------------------- 1 | // Modal -> popout 2 | .note-1oo11U, 3 | .note-367eZJ { 4 | .textarea-2r0oV8 { 5 | filter: blur(5px); 6 | color: var(--text-normal); 7 | transition: filter 0.35s cubic-bezier(0.2, 0.11, 0, 1); 8 | 9 | &::placeholder { 10 | color: var(--kds-almost-cyan); 11 | } 12 | 13 | &:hover { 14 | filter: none; 15 | 16 | &::placeholder { 17 | color: var(--interactive-hover); 18 | } 19 | } 20 | 21 | &:focus { 22 | filter: none; 23 | 24 | &::placeholder { 25 | color: var(--interactive-active); 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_roles.scss: -------------------------------------------------------------------------------- 1 | // Add role 2 | .container-3XJ8ns { 3 | border-color: var(--background-tertiary); 4 | } 5 | 6 | // Role tooltip on member list 7 | .overflowRolesPopout-140n9i { 8 | &.popoutTop-1WcJ06, 9 | &.popoutBottom-2BJWty, 10 | .overflowRolesPopoutArrow-2O66oH { 11 | box-shadow: 0 0 0 1px black; 12 | background-color: var(--background-secondary-alt); 13 | } 14 | 15 | .overflowRolesPopoutHeaderText-1SW-y3 { 16 | color: var(--kds-almost-cyan); 17 | } 18 | 19 | .overflowRolesPopoutHeaderIcon-6PNEZA { 20 | path { 21 | fill: var(--kds-almost-cyan); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_reactions.scss: -------------------------------------------------------------------------------- 1 | .root-1gCeng { 2 | > .scroller-1-nKid { 3 | width: auto; 4 | background-color: var(--background-secondary-alt); 5 | 6 | .size14-e6ZScH { 7 | padding-right: 4px; 8 | } 9 | } 10 | 11 | > .reactors-Blmlhw { 12 | width: 85%; 13 | background-color: inherit; 14 | } 15 | 16 | .reactionDefault-GBA58K { 17 | &:hover { 18 | background-color: var(--background-modifier-hover); 19 | } 20 | } 21 | 22 | .reactionSelected-1pqISm { 23 | background-color: var(--background-primary); 24 | } 25 | 26 | .reactor-3UBcOI { 27 | box-shadow: none; 28 | } 29 | } -------------------------------------------------------------------------------- /source/theme/guilds/inner/_general-settings.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .emojiInput-1aLNse { 3 | background-color: var(--background-secondary); 4 | 5 | &:hover { 6 | border-color: rgba(var(--kds-almost-cyan-rgb), 0.25); 7 | } 8 | 9 | &:focus { 10 | border-color: rgba(255, 27, 240, 0.5); 11 | } 12 | } 13 | 14 | .colorPickerCustom-2CWBn2 { 15 | border: none; 16 | box-shadow: 0 0 1px 1px black; 17 | background-color: var(--background-secondary); 18 | } 19 | } 20 | 21 | // !important bad and so are random inline styles >:c 22 | .elevationHigh-1PneE4 { 23 | background-color: var(--background-secondary-alt) !important; 24 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_windows-title-bar.scss: -------------------------------------------------------------------------------- 1 | .winButton-iRh8-Z { 2 | > svg { 3 | color: var(--windows-button-colour); 4 | } 5 | 6 | &:hover { 7 | background-color: var(--windows-button-colour); 8 | 9 | > svg { 10 | color: white; 11 | } 12 | } 13 | } 14 | 15 | // Close 16 | .winButtonClose-1HsbF- { 17 | --windows-button-colour: var(--kds-bright-orange-red); 18 | } 19 | 20 | .winButtonMinMax-PBQ2gm { 21 | // Maximize 22 | &:nth-child(3) { 23 | --windows-button-colour: orange; 24 | } 25 | 26 | // Minimize 27 | &:nth-child(4) { // :last-child works here too 28 | --windows-button-colour: var(--kds-radio-bar-green); 29 | } 30 | } -------------------------------------------------------------------------------- /source/theme/settings/inner/_cards.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Delete emoji/remove game button, etc 3 | .button-2CgfFz { 4 | box-shadow: 0 0 0 1px black; 5 | background-color: var(--background-tertiary); 6 | } 7 | 8 | // Connections, integrations, etc 9 | .card-3Qj_Yx { 10 | border-color: var(--background-tertiary); 11 | background-color: var(--background-secondary-alt); 12 | } 13 | 14 | // Member card and games 15 | .card-FDVird { 16 | box-shadow: none; 17 | 18 | &::before { 19 | border-color: black; 20 | background-color: var(--background-secondary-alt); 21 | } 22 | } 23 | } 24 | 25 | .divider-3wNib3 { 26 | border-color: black !important; 27 | } -------------------------------------------------------------------------------- /source/theme/pages/inner/_server-discovery.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .pageWrapper-1PgVDX { 3 | background-color: var(--background-primary); 4 | } 5 | 6 | .categoryItem-1QIroW { 7 | color: var(--kds-almost-cyan); 8 | } 9 | 10 | .selectedCategoryItem-FHKU_o { 11 | color: var(--interactive-active); 12 | 13 | > .itemInner-gPkiWb { 14 | background-color: rgb(4, 20, 69, 0.65); // Really 15 | } 16 | } 17 | 18 | .discoverHeader-Ijkm_M { 19 | color: var(--kds-settings-smaller-header); 20 | } 21 | 22 | .guildListSection-2CS8vH { 23 | .card-3DjzTQ { 24 | box-shadow: 0 0 0 1px black; 25 | } 26 | 27 | > .wrapper-1sSZUt { 28 | color: var(--kds-category-name); 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /source/theme/powercord/inner/_product-license.scss: -------------------------------------------------------------------------------- 1 | .powercord { 2 | .powercord-product-license-modal { 3 | color: var(--header-secondary); 4 | 5 | h4 { 6 | color: var(--kds-settings-smaller-header); 7 | } 8 | 9 | span { 10 | color: var(--text-normal); 11 | 12 | &::before { 13 | width: 7px; 14 | background-color: var(--powercord-license-dot-colour) !important; // Pain 15 | } 16 | } 17 | } 18 | 19 | .permissions { 20 | --powercord-license-dot-colour: var(--kds-radio-bar-green); 21 | } 22 | 23 | .limitations { 24 | --powercord-license-dot-colour: var(--kds-bright-orange-red); 25 | } 26 | 27 | .conditions { 28 | --powercord-license-dot-colour: var(--kds-almost-cyan); 29 | } 30 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_spoilers.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Attachments 3 | .spoilerWarning-2aAZq1 { 4 | background-color: var(--kds-spoiler-box); 5 | } 6 | 7 | // Messages 8 | .spoilerText-3p6IlD { 9 | border-radius: 6px; 10 | 11 | &.hidden-HHr2R9 { 12 | transition: background-color 0.25s; 13 | background-color: var(--kds-spoiler-box); 14 | 15 | &:hover { 16 | background-color: var(--background-secondary-alt); 17 | 18 | > .inlineContent-3ZjPuv { 19 | opacity: 1; 20 | } 21 | } 22 | } 23 | 24 | &[aria-expanded='true'] { 25 | background-color: var(--background-secondary); 26 | } 27 | 28 | > .inlineContent-3ZjPuv { 29 | padding: 2px; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /source/theme/settings/inner/_radio-bars.scss: -------------------------------------------------------------------------------- 1 | .radioBar-bMNUI- { 2 | border-width: 4px; 3 | 4 | &[style*='139'] { 5 | --radio-bar-accent-color: var(--kds-radio-bar-green) !important; 6 | } 7 | 8 | &[style*='37'] { 9 | --radio-bar-accent-color: var(--kds-mango-yellow) !important; 10 | } 11 | 12 | &[style*='21'] { 13 | --radio-bar-accent-color: var(--kds-radio-bar-orange) !important; 14 | } 15 | 16 | &[style*='359'] { 17 | --radio-bar-accent-color: var(--kds-bright-orange-red) !important; 18 | } 19 | 20 | // Totally not the most expensive fucking selector ever 21 | @at-root .children-rWhLdy > div:first-child &:not([style*='--radio']) { 22 | border-left-style: solid; 23 | border-color: rgba(165, 179, 231, 0.35); 24 | } 25 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_pins-results-inbox.scss: -------------------------------------------------------------------------------- 1 | // These are mainly to make it line up with 2 | // the toolbar and to make messages less squished 3 | 4 | %-base-message-popout-wrap { 5 | width: 550px; 6 | margin-top: 5px; 7 | max-height: 775px !important; 8 | } 9 | 10 | .messagesPopoutWrap-1MQ1bW { 11 | @extend %-base-message-popout-wrap; 12 | left: 87px; 13 | } 14 | 15 | .recentMentionsPopout-3rCiI6 { 16 | @extend %-base-message-popout-wrap; 17 | left: 8px; 18 | } 19 | 20 | .searchResultsWrap-3-pOjs { 21 | width: 550px; 22 | 23 | .pageButton-2ruNwd { 24 | &.activeButton-rvKcqq { 25 | background-color: var(--kds-settings-smaller-header); 26 | 27 | &:hover { 28 | background-color: var(--kds-offline-colour); 29 | } 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_search-results.scss: -------------------------------------------------------------------------------- 1 | .searchResultsWrap-3-pOjs { 2 | width: fit-content; 3 | } 4 | 5 | // I'm so sorry but this had to be done 6 | #search-results[data-jump-section='global'] { 7 | box-shadow: none; 8 | 9 | .searchResult-9tQ1uo { 10 | overflow: auto; 11 | background-color: var(--background-modifier-selected); 12 | 13 | &::-webkit-scrollbar { 14 | height: 5px; 15 | 16 | &-thumb { 17 | border-radius: inherit; 18 | background-color: var(--background-tertiary); 19 | } 20 | } 21 | } 22 | 23 | .channelName-1JRO3C { 24 | padding: 3px; 25 | border-radius: 8px; 26 | background-color: var(--background-modifier-selected); 27 | 28 | &:hover { 29 | background-color: var(--background-primary); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_embedded-cards.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Spotify invite 3 | .invite-18yqGF { 4 | border: none; 5 | background-color: var(--background-secondary); 6 | box-shadow: 0 0 1px 1px var(--background-secondary-alt); 7 | 8 | .header-Hg_qNF { 9 | filter: brightness(175%); 10 | } 11 | 12 | .colorGrey-2DXtkV { 13 | &:disabled { 14 | background-color: var(--background-tertiary); 15 | } 16 | } 17 | } 18 | 19 | // Nitro gift cards 20 | .tile-2OwFgW { 21 | box-shadow: 0 0 1px 1px var(--background-secondary-alt); 22 | background-color: var(--background-secondary-alt); 23 | } 24 | } 25 | 26 | // Nitro gift cards continued 27 | .giftCodeContainer-1fbmAS { 28 | .invalidPoop-pnUbq7 { 29 | background-color: var(--background-secondary); 30 | } 31 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_private-channels.scss: -------------------------------------------------------------------------------- 1 | #private-channels { 2 | &::-webkit-scrollbar { 3 | width: 6px; 4 | 5 | &-thumb { 6 | background-color: cornflowerblue; 7 | } 8 | } 9 | 10 | .headerText-2F0828 { 11 | color: var(--kds-almost-cyan); 12 | } 13 | 14 | .clickable-1JJAn8 { 15 | border-radius: 10px; 16 | 17 | // Special 3 channels at top 18 | &:hover { 19 | background-color: transparent; 20 | } 21 | 22 | .overflow-WK9Ogt { 23 | color: var(--kds-category-name); 24 | } 25 | } 26 | 27 | .layout-2DM8Md { 28 | border-radius: 10px; 29 | } 30 | 31 | a { 32 | &[href='/discovery'], 33 | &[href='/channels/@me'], 34 | &[href='/store'] { 35 | margin-bottom: 5px; 36 | background-color: var(--background-primary); 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /source/theme/user/inner/_game-activity.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .nowPlaying-284llR { 3 | background-color: rgb(2, 142, 78); // Sorry 4 | } 5 | 6 | .notDetected-33MY4s { 7 | background-color: var(--kds-greyish-blue); 8 | } 9 | 10 | .addGamePopout-2RY8Ju { 11 | &.elevationBorderHigh-2WYJ09 { 12 | box-shadow: 0 0 0 2px var(--background-tertiary); 13 | background-color: var(--background-secondary-alt); 14 | } 15 | } 16 | 17 | .game-1ipmAa { 18 | .gameNameInput-385LoS { 19 | &:hover { 20 | border-color: rgba(var(--kds-almost-cyan-rgb), 0.25); 21 | background-color: var(--background-secondary); 22 | } 23 | 24 | &:focus { 25 | border-color: rgba(255, 27, 240, 0.5); 26 | background-color: var(--background-secondary); 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /source/theme/powercord/inner/_toasts.scss: -------------------------------------------------------------------------------- 1 | .powercord { 2 | .powercord-toast { 3 | filter: brightness(120%); 4 | 5 | --toast-background: var(--background-secondary); 6 | --toast-header: var(--background-tertiary); 7 | --toast-contents: var(--background-primary); 8 | --toast-box-shadow: rgba(0, 0, 0, 0.2); 9 | --toast-border: var(--background-secondary-alt); 10 | 11 | .header { 12 | color: var(--kds-category-name); 13 | 14 | .icon { 15 | color: var(--kds-settings-larger-header); 16 | } 17 | } 18 | 19 | .colorBrand-3pXr91 { 20 | border: 1px solid var(--kds-almost-cyan); 21 | background-color: transparent; 22 | color: var(--kds-almost-cyan); 23 | 24 | &:hover { 25 | background-color: rgba(var(--kds-almost-cyan-rgb), 0.075) !important; 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_dropdown-menus.scss: -------------------------------------------------------------------------------- 1 | .css-gvi9bl-control { 2 | border-color: black; 3 | } 4 | 5 | .css-3vaxre-menu { 6 | border-color: var(--background-tertiary); 7 | background-color: var(--background-secondary); 8 | box-shadow: var(--background-secondary) 0px 1px 5px 0px; 9 | } 10 | 11 | .quickSelect-3BxO0K { 12 | > .quickSelectLabel-2r3iJ_ { 13 | color: deeppink; 14 | } 15 | } 16 | 17 | #app-mount { 18 | .quickSelectPopoutOption-opKBx9 { 19 | &:hover { 20 | background-color: var(--background-primary); 21 | } 22 | } 23 | 24 | .quickSelectPopout-X1hvgV { 25 | background-color: var(--background-secondary-alt); 26 | 27 | > .selected { 28 | background-color: var(--background-modifier-selected); 29 | 30 | .check-2by_h9 { 31 | height: 14px; 32 | background: url('/assets/7b3ff12d16d96ca77345da9450986dc7.svg') no-repeat; 33 | } 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /source/extras/__extras-import.scss: -------------------------------------------------------------------------------- 1 | // Using the really cool Better Badges theme by mr_miner 2 | // provided under the MIT license 3 | // Copyright (C) 2021 mr-miner1 4 | 5 | @forward 'bigger-click-emoji'; 6 | @forward 'custom-status-scrollbar'; 7 | @forward 'hljs-styling' hide $targets; 8 | @forward 'reaction-emoji-hover'; 9 | @forward 'revert' hide $default-avatar-map; 10 | @forward 'status-indicators' hide $status-mapping; 11 | @forward 'status-picker'; 12 | @forward 'user-notes'; 13 | 14 | @import url('https://nyri4.github.io/Discolored/main.css'); 15 | @import url('https://mr-miner1.github.io/Better-Badges/src/compiled.css'); 16 | @import url('https://Goose-Nest.github.io/GT-RevertRebrand/src/components/wordmark.css'); 17 | @import url('https://spinfish.github.io/css-snippets/snippets/filled-roles.css'); 18 | @import url('https://spinfish.github.io/css-snippets/snippets/bsi-radialstatus-typing.css'); 19 | @import url('https://spinfish.github.io/css-snippets/snippets/compact-status-picker.css'); -------------------------------------------------------------------------------- /source/theme/app/inner/_badges.scss: -------------------------------------------------------------------------------- 1 | // Red mention marker 2 | .unreadMentionsBar-1Bu1dC { 3 | &.mention-1f5kbO { 4 | background-color: var(--kds-bright-orange-red); 5 | } 6 | } 7 | 8 | // Mentions 9 | .numberBadge-2s8kKX { 10 | background-color: var(--kds-bright-orange-red) !important; 11 | } 12 | 13 | .textBadge-1iylP6 { 14 | // Red badges e.g. LIVE 15 | &[style*='359'] { 16 | background-color: var(--kds-bright-orange-red) !important; 17 | } 18 | 19 | // Blurple badges e.g. BETA and NEW 20 | &[style*='235'], 21 | &.newBadge-1Is7Nf { 22 | background-color: var(--kds-settings-smaller-header) !important; 23 | } 24 | } 25 | 26 | // Profile badges 27 | .profileBadge-2niAfJ { 28 | &:hover { 29 | cursor: pointer; 30 | } 31 | } 32 | 33 | // No support from Better Badges (yet?) 34 | .powercord-badge, 35 | .profileBadgeEarlySupporter-2ng_jL { 36 | transition: 0.2s transform ease-in-out; 37 | 38 | &:hover { 39 | transform: translateY(-1.5px); 40 | } 41 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_home-icon.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/keyframes' as *; 2 | @use '../../../helpers/variables' as *; 3 | 4 | // Warning: the following code is a bit hacky! 5 | // References: https://jsfiddle.net/tvsgoaj9/2/ 6 | 7 | .tutorialContainer-2sGCg9 { 8 | .homeIcon-FuNwkv { 9 | width: 30px; 10 | height: 30px; 11 | position: absolute; 12 | color: var(--kds-light-grey); 13 | } 14 | 15 | .lowerBadge-29hYVK { 16 | border-radius: 50%; 17 | box-shadow: 0 0 0 4.5px var(--background-secondary); 18 | } 19 | 20 | .wrapper-1BJsBx { 21 | clip-path: circle(50% at center); 22 | 23 | &::before { 24 | content: ''; 25 | width: 100%; 26 | height: 100%; 27 | position: absolute; 28 | background: $home-icon-background center/100% no-repeat; 29 | animation: rotation 10s linear infinite paused; 30 | } 31 | } 32 | 33 | .selected-bZ3Lue { 34 | &::before { 35 | animation-play-state: running; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_server-list.scss: -------------------------------------------------------------------------------- 1 | // Servers with no icon 2 | #app-mount { 3 | .selected-bZ3Lue { 4 | .acronym-2mOFsV { 5 | background-color: var(--kds-settings-smaller-header); 6 | } 7 | } 8 | } 9 | 10 | .circleIconButton-1QV--U { 11 | color: var(--kds-radio-bar-green); 12 | background-color: var(--background-secondary-alt); 13 | } 14 | 15 | .folderIconWrapper-1_bOZe { 16 | &[style*='rgba(88, 101, 242, 0.4)'] { 17 | background-color: rgba(var(--kds-settings-smaller-header-rgb), 0.4) !important; 18 | } 19 | } 20 | 21 | .expandedFolderIconWrapper-Huv7rA { 22 | background-color: var(--background-primary); 23 | 24 | > svg { 25 | &[style*='rgb(88, 101, 242)'] { 26 | color: var(--kds-settings-smaller-header) !important; 27 | } 28 | } 29 | } 30 | 31 | .expandedFolderBackground-1cujaW { 32 | &:not(.collapsed-2ZrjoL) { 33 | background-color: var(--background-primary); 34 | box-shadow: 0 0 15px 5px var(--background-secondary-alt); 35 | } 36 | } -------------------------------------------------------------------------------- /source/theme/guilds/inner/_channel-permissions.scss: -------------------------------------------------------------------------------- 1 | .container-VSDcQc { 2 | @at-root #app-mount & > .sectionTag-pXyto9 { 3 | background-color: var(--background-secondary-alt); 4 | } 5 | 6 | .autocompleteShadow-iiGWFU { 7 | box-shadow: 0 0 0 1px var(--background-tertiary); 8 | } 9 | 10 | > .header-2bNvm4, 11 | .autocompleteArrow-Zxoy9H { 12 | box-shadow: inherit; 13 | background-color: var(--background-tertiary); 14 | } 15 | } 16 | 17 | .group-1WdBVp { 18 | border-color: black; 19 | } 20 | 21 | .item-1yAxl1 { 22 | color: var(--permission-colour); 23 | 24 | &:not(.selected-2YhbGh) { 25 | cursor: pointer; 26 | } 27 | 28 | &.selected-2YhbGh { 29 | background-color: var(--permission-colour); 30 | } 31 | } 32 | 33 | .deny-3nAuT6 { 34 | --permission-colour: var(--kds-bright-orange-red); 35 | } 36 | 37 | .passthrough-1c2ewQ { 38 | --permission-colour: orange; 39 | } 40 | 41 | .allow-1PzSY3 { 42 | --permission-colour: var(--kds-radio-bar-green); 43 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_gifpicker.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .categoryFadeBlurple-1j72_A { 3 | background-color: rgba(var(--kds-almost-cyan-rgb), 0.5); 4 | } 5 | 6 | .emptyHintCard-2mUdMe { 7 | background-color: rgba(var(--kds-greyish-blue-rgb), 0.35); 8 | } 9 | 10 | .result-3w1ZcL { 11 | &:hover { 12 | &::after { 13 | box-shadow: 0 0 0 2px var(--kds-almost-cyan) inset, 14 | 0 0 0 3px var(--background-primary) inset; 15 | } 16 | } 17 | 18 | &[style*='background-color'] { 19 | background-color: rgb(0, 10, 45) !important; 20 | } 21 | 22 | &[style*='rgb(24, 25, 28)'] { 23 | background-color: var(--background-tertiary) !important; 24 | } 25 | } 26 | } 27 | 28 | .gifFavoriteButton-3Zycl7 { 29 | color: var(--interactive-normal); 30 | 31 | &:hover, 32 | &.selected-1mBDsA { 33 | color: var(--interactive-hover); 34 | } 35 | 36 | &::after { 37 | border-color: var(--kds-mango-yellow); 38 | } 39 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_bars.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | #---new-messages-bar { 4 | top: 8px; 5 | padding: 7px; 6 | border-width: 3px; 7 | border-color: rebeccapurple; 8 | border-top-left-radius: 3px; 9 | 10 | > .unreadPill-2HyYtt { 11 | top: -8px; 12 | background-color: rebeccapurple; 13 | } 14 | 15 | .unreadPillCapStroke-7rkHbg { 16 | fill: rebeccapurple; 17 | color: rebeccapurple; 18 | } 19 | 20 | > .content-1o0f9g { 21 | color: var(--text-normal); 22 | transform: translateY(-9px); 23 | } 24 | } 25 | 26 | .barButtonBase-2uLO1z { 27 | color: var(--kds-almost-cyan); 28 | } 29 | 30 | .newMessagesBar-265mhP { 31 | @include growing-dark-message-bar($target: top); 32 | } 33 | 34 | .jumpToPresentBar-G1R9s6 { 35 | @include growing-dark-message-bar($target: bottom); 36 | } 37 | 38 | .messagesErrorBar-nyJGU7 { 39 | background-color: var(--kds-bright-orange-red); 40 | 41 | > .barButtonBase-2uLO1z { 42 | color: white; 43 | } 44 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_keyboard-combos.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .keyboardShortcutsModal-3piNz7 { 3 | background-color: var(--background-primary); 4 | 5 | .divider-3573oO { 6 | display: none; 7 | } 8 | 9 | .content-2Add9f { 10 | font-style: italic; 11 | font-weight: bold; 12 | text-transform: uppercase; 13 | color: var(--kds-number); 14 | 15 | &::after { 16 | content: '!!!'; 17 | } 18 | } 19 | 20 | > .modalSubtitle-1Pj5nv { 21 | color: deeppink; 22 | border-bottom: 1px solid black; 23 | 24 | &::after { 25 | content: ' :D'; 26 | } 27 | } 28 | } 29 | 30 | .wrapper-1sSZUt { 31 | color: var(--kds-settings-smaller-header); 32 | } 33 | 34 | .keybindDescription-2RDbC2 { 35 | color: var(--kds-category-name); 36 | } 37 | 38 | .keybindShortcut-1BD6Z1 { 39 | > span { 40 | margin: 3px; 41 | padding: 5px; 42 | box-shadow: 0 0 0 1px black; 43 | background-color: var(--background-modifier-selected); 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /source/theme/buttons/inner/_popout.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | .item-1tOPte { 4 | color: var(--popout-button-text); 5 | 6 | &:active { 7 | &:not(.hideInteraction-1iHO1O) { 8 | color: white; 9 | background-color: var(--popout-button-active); 10 | 11 | .icon-LYJorE { 12 | color: white; 13 | } 14 | } 15 | } 16 | 17 | &.focused-3afm-j { 18 | color: white; 19 | background-color: var(--popout-button-focused); 20 | 21 | .icon-LYJorE { 22 | color: white; 23 | } 24 | } 25 | } 26 | 27 | #guild-header-popout-invite-people { 28 | @include popout-button('number'); 29 | } 30 | 31 | #guild-header-popout-premium-subscribe { 32 | @include popout-button('discord-nitro-magenta'); 33 | } 34 | 35 | .colorDefault-2K3EoJ { 36 | &:not(.colorDanger-2qLCe1) { 37 | @include popout-button('almost-cyan'); 38 | } 39 | } 40 | 41 | .colorDanger-2qLCe1 { 42 | color: var(--kds-bright-orange-red); 43 | 44 | &.focused-3afm-j, 45 | &:active:not(.hideInteraction-1iHO1O) { 46 | background-color: var(--kds-bright-orange-red); 47 | } 48 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 spinfish 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /source/theme/modals/inner/_quickswitcher.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/variables' as *; 2 | 3 | .quickswitcher-3JagVE { 4 | box-shadow: $modal-box-shadow; 5 | background-color: var(--background-secondary-alt); 6 | 7 | > .scrollerBase-289Jih { 8 | background-color: inherit; 9 | 10 | &::-webkit-scrollbar { 11 | width: 10px; 12 | } 13 | } 14 | 15 | > .input-2VB9rf { 16 | border: 1px solid black; 17 | background-color: var(--kds-dark-blue-popout-normal); 18 | } 19 | 20 | .header-13MUnb { 21 | color: rgba(var(--kds-number-rgb), 0.95); 22 | } 23 | 24 | .resultFocused-3aIoYe { 25 | background-color: rgba(var(--kds-darker-interactive-active-rgb), 0.05); 26 | 27 | &::before { 28 | content: ''; 29 | position: absolute; 30 | height: 100%; 31 | border: 1px solid var(--interactive-active); 32 | } 33 | } 34 | 35 | // Mimic discord's mention badge 36 | .badge-36LyGI { 37 | background-color: red; 38 | width: 16px !important; 39 | padding: inherit; 40 | margin-left: 1px; 41 | border-radius: 8px; 42 | line-height: 16px; 43 | font-weight: 600; 44 | text-align: center; 45 | } 46 | } -------------------------------------------------------------------------------- /source/theme/pages/inner/_friends.scss: -------------------------------------------------------------------------------- 1 | .scroller-2ZPeAD { 2 | border-left: none; 3 | } 4 | 5 | .peopleColumn-29fq28 { 6 | background-color: var(--background-accent); 7 | 8 | .peopleListItem-2nzedh { 9 | border-radius: 10px; 10 | padding: 0 15px; 11 | margin-bottom: 4px; 12 | background-color: var(--background-secondary-alt); 13 | border: 1px solid var(--background-secondary-alt); 14 | transition-duration: 0.2s; 15 | transition-timing-function: linear; 16 | } 17 | } 18 | 19 | // Activity card 20 | #app-mount { 21 | .itemCard-v9viV7 { 22 | border: none; 23 | box-shadow: 0 0 0 1px black; 24 | 25 | .body-1ld4H7 { 26 | background-color: inherit; 27 | } 28 | 29 | .section-2gLsgF { 30 | margin-top: 7.5px; 31 | background-color: var(--background-secondary); 32 | } 33 | 34 | .separator-XqIyoz { 35 | display: none; 36 | } 37 | 38 | &.interactive-3B9GmY { 39 | &:not(.active-1xchHY) { 40 | &:hover { 41 | background-color: rgba(0, 0, 0, 0.75); 42 | } 43 | } 44 | } 45 | 46 | &.active-1xchHY { 47 | background-color: var(--background-tertiary); 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /source/theme/user/inner/_settings.scss: -------------------------------------------------------------------------------- 1 | // My Account 2 | .accountProfileCard-1XCH88 { 3 | --background-tertiary: var(--background-secondary-alt); 4 | 5 | // I have made a severe and continous lapse in my judgement 6 | > .settingsBanner-15-pZk { 7 | &:not([style*='background-image']) { 8 | width: 0; 9 | height: 30px; 10 | 11 | + .userInfo-iCloHO { 12 | > .avatar-1uQSZT { 13 | top: 9px; 14 | 15 | ~ div { 16 | transform: translateY(-15px); 17 | } 18 | } 19 | } 20 | } 21 | } 22 | } 23 | 24 | // User Profile 25 | .profileBannerPreview-3_l0Wd { 26 | > .popoutInfo-pKbpvG { 27 | --text-normal: var(--header-secondary); 28 | } 29 | 30 | > .bannerNormal-22rPhb { 31 | background: inherit !important; 32 | } 33 | } 34 | 35 | // Overlay notifications 36 | .notificationSettings-1NQKPR { 37 | .wrapper-3jrx9n { 38 | border-color: var(--kds-number); 39 | } 40 | 41 | .option-n0icdO { 42 | &:not(.selected-mKYnfr) { 43 | &:hover { 44 | background-color: rgba(var(--kds-almost-cyan-rgb), 0.6); 45 | } 46 | } 47 | } 48 | 49 | .selected-mKYnfr { 50 | background-color: var(--kds-number); 51 | } 52 | } -------------------------------------------------------------------------------- /source/theme/user/inner/_voice-video.scss: -------------------------------------------------------------------------------- 1 | $-mic-test-gradient: linear-gradient( 2 | to right, 3 | var(--kds-darker-reply-content), 4 | var(--kds-almost-cyan) 5 | ); 6 | 7 | .previewOverlayInner-1WXURq { 8 | background-color: var(--background-secondary); 9 | } 10 | 11 | .manual-36Evg9 { 12 | // Gotta do it this way otherwise specificity issues happen 13 | 14 | @at-root #app-mount & .fill-3eUagR { 15 | background-color: rgba(0, 0, 0, 0.45); 16 | } 17 | 18 | [style*='38'] { // Yellow 19 | background-color: var(--kds-almost-cyan) !important; 20 | } 21 | 22 | [style*='139'] { // Green 23 | background-color: var(--kds-radio-bar-green) !important; 24 | } 25 | } 26 | 27 | #app-mount { 28 | .previewOverlay-2O7_KC { 29 | border: 1px solid black; 30 | } 31 | 32 | .userSettingsVoice-iwdUCU { 33 | .notches-1sAcEM { 34 | background-image: none; 35 | } 36 | 37 | .progress-1IcQ3A { 38 | background-color: var(--background-secondary); 39 | } 40 | 41 | .container-3PXSwK { 42 | height: 10px; 43 | border-top-left-radius: 10px; 44 | border-bottom-left-radius: 4px; 45 | background: $-mic-test-gradient !important; 46 | } 47 | } 48 | 49 | .speaking-2bFhO4 { 50 | background-color: var(--kds-radio-bar-green); 51 | } 52 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_add-join-server.scss: -------------------------------------------------------------------------------- 1 | .theme-light { 2 | // Template buttons 3 | .container-UC8Ug1 { 4 | border-color: black; 5 | background-color: var(--kds-message-hover); 6 | 7 | &:hover { 8 | background-color: var(--background-modifier-selected); 9 | } 10 | } 11 | 12 | .sampleLink-2NLvZg { 13 | color: deeppink; 14 | } 15 | 16 | .footer-2gL1pp { 17 | border-top: 1px solid black; 18 | 19 | // Back button 20 | .sizeMin-1mJd1x { 21 | color: var(--kds-number); 22 | } 23 | } 24 | 25 | // "Have an invite already?" 26 | .footerTitle-2CYZch { 27 | color: var(--kds-almost-cyan); 28 | margin-bottom: 16px; // Eases blurriness, dunno why 29 | } 30 | 31 | .footerButton-ayFTfX { 32 | &.lookFilled-1Gx00P { 33 | box-shadow: 0 0 0 1px black; 34 | background-color: var(--kds-message-hover); 35 | 36 | &:hover { 37 | @at-root #app-mount & { 38 | color: var(--kds-mango-yellow); 39 | background-color: var(--toast-box-shadow); 40 | } 41 | 42 | &::after, 43 | &::before { 44 | content: 'bruh'; 45 | } 46 | } 47 | } 48 | } 49 | 50 | // Customise your server 51 | .uploadIcon-2IFzZU { 52 | circle { 53 | fill: var(--kds-settings-smaller-header); 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_textarea.scss: -------------------------------------------------------------------------------- 1 | .channelTextArea-rNsIhG { 2 | .scrollableContainer-2NUZem { 3 | border-radius: 10px; 4 | } 5 | 6 | > .attachedBars-tZDmyV { 7 | --background-secondary: var(--background-primary); // Transparent effect 8 | } 9 | 10 | // Reply container above chat bar 11 | .replyBar-1YLQ2F { 12 | border-radius: 10px; 13 | margin-bottom: 5px; 14 | background-color: var(--channeltextarea-background); 15 | 16 | .colorLink-2vG20E { 17 | color: var(--interactive-active); // @ON 18 | } 19 | 20 | .colorMuted-HdFt4q { 21 | color: var(--kds-reply-content); // @OFF 22 | } 23 | 24 | .mentionButton-3710-W { 25 | &:hover { 26 | color: var(--interactive-hover); 27 | } 28 | } 29 | } 30 | 31 | // Thread prompt 32 | .threadSuggestionBar-2ufK2Z { 33 | border-top: none; 34 | background-color: var(--channeltextarea-background); 35 | margin-top: 0px; 36 | margin-bottom: 5px; 37 | border-radius: 10px; 38 | } 39 | 40 | // Slash command prompt 41 | .pill-2pQByF { 42 | background-color: var(--background-primary); 43 | } 44 | 45 | .tabButton-1n4gNP { 46 | > rect { 47 | fill: var(--kds-dark-blue-popout-playing); 48 | } 49 | 50 | > path { 51 | &[d^='M0'] { 52 | display: none; 53 | } 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_light-mode-warning.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/keyframes' as *; 2 | 3 | $-light-mode-warning-icon: url( 4 | 'https://discord.com/assets/289673858e06dfa2e0e3a7ee610c3a30.svg' 5 | ); 6 | 7 | $-light-mode-warning-content: 'You need to have dark theme enabled for this ' 8 | 'theme to work properly! To enable it, go to ' 9 | 'Settings -> Appearance.'; 10 | 11 | // The following code is heavily based on code from LuckFire's 12 | // amoled-cord theme, provided under the MIT license 13 | 14 | // https://github.com/LuckFire/amoled-cord/blob/main/src/addons/_warning.scss 15 | // Copyright (C) LuckFire 16 | 17 | .theme-light { 18 | #app-mount { 19 | &::after { 20 | right: 0; 21 | bottom: 0; 22 | position: fixed; 23 | content: $-light-mode-warning-content; 24 | background-color: var(--background-tertiary); 25 | border: 2px solid; 26 | animation: imagine-using-light-mode 0.8s infinite; 27 | max-width: 315px; 28 | line-height: normal; 29 | padding: 15px 0 15px 60px; 30 | margin-right: 15px; 31 | margin-bottom: 15px; 32 | color: white; 33 | background-image: $-light-mode-warning-icon; 34 | background-repeat: no-repeat; 35 | background-size: 35px; 36 | background-position: 10px center; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_toolbar.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | // Yeah 4 | .iconBadge-qZ4Ksk { 5 | background-color: var(--kds-bright-orange-red); 6 | } 7 | 8 | .toolbar-1t6TWx { 9 | height: 34px; 10 | border-radius: 8px 4px 4px 8px; 11 | background: var(--background-secondary-alt); 12 | 13 | .anchor-3Z-8Bb { 14 | order: -1; 15 | } 16 | 17 | // Fix NSFW icons being white 18 | .iconWrapper-2OrFZ1 { 19 | --text-muted: var(--interactive-normal); 20 | } 21 | } 22 | 23 | // Ew lol 24 | .search-36MZv- { 25 | @include parent-and("+ .iconWrapper-2OrFZ1[aria-label$='!']") { 26 | order: -1; 27 | } 28 | } 29 | 30 | .updateIconForeground-3tnNZn { 31 | fill: var(--kds-radio-bar-green); 32 | } 33 | 34 | // Everything below is heavily based on code from a 35 | // snippet made by DoggyBootsy#1333. Thanks so much! 36 | 37 | .icon-3cZ1F_ { 38 | height: 24px; 39 | width: 24px; 40 | color: var(--interactive-normal); 41 | cursor: pointer; 42 | } 43 | 44 | .iconContainer-O4O2CN { 45 | bottom: 3px; 46 | } 47 | 48 | .search-36MZv- { 49 | margin-left: 0px; 50 | } 51 | 52 | .searchBar-3dMhjb { 53 | width: 28px; 54 | background: none; 55 | transition: width 0.6s ease-in-out; 56 | 57 | @at-root { 58 | &:hover, 59 | .open-6_Y_aH &, 60 | .focused-31_ccS & { 61 | width: 240px; 62 | margin-left: 5px; 63 | background: var(--background-tertiary); 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /source/theme/buttons/inner/_regular.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | .lookFilled-1Gx00P { 4 | @include exclude-yellow-white { 5 | color: white; 6 | background-color: var(--fill-button-normal); 7 | 8 | &:not(:disabled) { 9 | &:hover { 10 | background-color: var(--fill-button-hover); 11 | } 12 | 13 | &:active { 14 | background-color: var(--fill-button-active); 15 | } 16 | } 17 | 18 | &:disabled { 19 | opacity: 0.2; 20 | } 21 | } 22 | } 23 | 24 | .lookOutlined-3sRXeN { 25 | @include exclude-yellow-white { 26 | color: var(--line-button-colour); 27 | background-color: transparent; 28 | border-color: var(--line-button-colour); 29 | 30 | &:hover { 31 | background-color: var(--line-button-hover); 32 | } 33 | } 34 | } 35 | 36 | .colorBrand-3pXr91 { 37 | @include filled-button('darker-reply-content'); 38 | @include lined-button('darker-reply-content'); 39 | } 40 | 41 | .colorGrey-2DXtkV, 42 | .colorPrimary-3b3xI6 { 43 | @include filled-button('greyish-blue'); 44 | // ... Yeah 45 | --line-button-colour: rgba(255, 255, 255, 0.8); 46 | --line-button-hover: rgba(255, 255, 255, 0.075); 47 | } 48 | 49 | .colorGreen-29iAKY { 50 | @include filled-button('spotify-dark-green'); 51 | @include lined-button('radio-bar-green'); 52 | } 53 | 54 | .colorRed-1TFJan, 55 | .actionRed-gYn8D3 { 56 | @include filled-button('bright-orange-red'); 57 | @include lined-button('darker-orange-red'); 58 | } -------------------------------------------------------------------------------- /source/theme/user/inner/_billing.scss: -------------------------------------------------------------------------------- 1 | $-nitro-icon: url( 2 | 'https://discord.com/assets/386884eecd36164487505ddfbac35a9d.svg' 3 | ); 4 | 5 | #app-mount { 6 | .premiumIndicator-1XvbfM { 7 | background-color: var(--kds-settings-larger-header); 8 | } 9 | } 10 | 11 | .paymentHistory-2FXzro { 12 | .paymentPane-3bwJ6A { 13 | border: 1px solid black; 14 | } 15 | 16 | .paginator-166-09, 17 | .paymentRow-2e7VM6 { 18 | border: none; 19 | background-color: var(--background-secondary); 20 | } 21 | 22 | .scrollerBase-289Jih { 23 | width: 665px; 24 | border: 1px black; 25 | border-style: solid none solid; 26 | } 27 | 28 | .gameIcon-gg34Dz { 29 | background-image: $-nitro-icon !important; 30 | } 31 | 32 | // Needs to be nested else column names are coloured 33 | .summaryInfo-2QFKUg { 34 | > .date-2Qr15l { 35 | color: var(--kds-mango-yellow); 36 | } 37 | 38 | > .description-RQzS-K { 39 | color: var(--kds-settings-smaller-header); 40 | font-weight: bold; 41 | } 42 | 43 | > .amount-ukM6w- { 44 | color: deeppink; 45 | font-weight: bold; 46 | } 47 | } 48 | 49 | .hoverablePayment-Yc6mK7 { 50 | &:hover { 51 | background-color: var(--background-tertiary); 52 | } 53 | } 54 | 55 | .expandedInfo-3kfShd { 56 | background-color: var(--background-secondary-alt); 57 | 58 | .paymentText-2vaF7U { 59 | color: var(--text-normal); 60 | } 61 | } 62 | 63 | .paymentHeader-3QlZQi, 64 | .refundSubHeader-3hp-GM { 65 | color: var(--kds-category-name); 66 | } 67 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_search-box.scss: -------------------------------------------------------------------------------- 1 | #search-results { 2 | // First two properties are for keeping it as stuck 3 | // to the right as possible like pinned messages and inbox 4 | margin-top: 5px; 5 | width: 450px !important; 6 | background-color: var(--background-secondary); 7 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 8 | 9 | > .queryContainer-RKFJW- { 10 | border-bottom-color: var(--background-tertiary); 11 | } 12 | 13 | > .focused-2bY0OD { 14 | background-color: var(--background-secondary-alt); 15 | 16 | // Keybind 17 | span { 18 | color: var(--kds-mango-yellow); 19 | background-color: var(--background-modifier-selected); 20 | } 21 | } 22 | 23 | strong, 24 | .searchResultChannelIcon-1DnTme { 25 | color: var(--kds-category-name); 26 | } 27 | 28 | .header-2N-gMV { 29 | font-weight: 625; 30 | color: var(--kds-settings-smaller-header); 31 | } 32 | 33 | .resultsGroup-r_nuzN { 34 | &::before { 35 | display: none; 36 | } 37 | } 38 | 39 | .queryText-3xoOY7 { 40 | font-weight: bold; 41 | color: var(--interactive-active); 42 | 43 | strong { 44 | color: rgb(185, 187, 190); 45 | } 46 | } 47 | 48 | .option-96V44q { 49 | &::after { 50 | background: transparent; 51 | } 52 | } 53 | 54 | .selected-rZcOL- { 55 | background-color: var(--background-secondary-alt); 56 | 57 | &::before { 58 | padding-left: 10px; 59 | background-color: inherit; 60 | filter: brightness(40%); 61 | } 62 | } 63 | 64 | .displayedNick-3xxvzU { 65 | color: var(--text-normal); 66 | } 67 | } -------------------------------------------------------------------------------- /source/theme/modals/inner/_uploads.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/variables' as *; 2 | 3 | .filename-ovv3c5 { 4 | color: var(--kds-number); 5 | margin-bottom: 6px; 6 | } 7 | 8 | #app-mount { 9 | .footer-3mqk7D { 10 | box-shadow: none; 11 | background-color: var(--background-secondary-alt); 12 | } 13 | 14 | // Have this under app-mount so it works for drag drop modal 15 | .icon-kyxXVr { 16 | &:not(.image-2yrs5j) { 17 | filter: invert(0.95); // Thanks D Mack#4481! 18 | } 19 | } 20 | 21 | // Regular upload modal 22 | .uploadModal-2ifh8j { 23 | box-shadow: $modal-box-shadow; 24 | background-color: var(--background-primary); 25 | 26 | // Add a comment 27 | .scrollableContainer-2NUZem { 28 | background-color: rgba(0, 0, 0, 0.1); 29 | border: 1px solid rgba(0, 0, 0, 0.3); 30 | transition: 0.2s ease-in-out; 31 | transition-property: border-color, background-color; 32 | 33 | // Mimic Discord's behaviour 34 | &:hover { 35 | border-color: rgb(4, 4, 5); 36 | background-color: rgb(3, 12, 31); 37 | } 38 | } 39 | } 40 | 41 | // Section below: drag and drop upload modal 42 | .bgScale-1otPtc { 43 | background-color: var(--background-primary); 44 | } 45 | 46 | .inner-3nWsbo { 47 | border-color: var(--kds-almost-cyan); 48 | } 49 | 50 | .uploadDropModal-2kTwbc { 51 | // "Upload to" 52 | .title-2Vtl4y { 53 | color: var(--kds-category-name); 54 | } 55 | 56 | // Channel name 57 | strong { 58 | color: var(--interactive-active); 59 | } 60 | 61 | .instructions-2Du9gG { 62 | color: var(--header-primary); 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /source/helpers/_variables.scss: -------------------------------------------------------------------------------- 1 | $base-colours: ( 2 | 'settings-larger-header': '193, 0, 242', 3 | 'discord-nitro-magenta': '255, 115, 250', 4 | 'reply-content': '214, 46, 151', 5 | 'bright-orange-red': '255, 42, 0', 6 | 'radio-bar-orange': '255, 119, 11', 7 | 'mango-yellow': '255, 196, 22', 8 | 'mentioned-replying-bg': '128, 201, 114', 9 | 'radio-bar-green': '0, 162, 63', 10 | 'spotify-dark-green': '1, 112, 44', 11 | 'number': '1, 206, 206', 12 | 'almost-cyan': '5, 207, 255', 13 | 'category-name': '157, 217, 255', 14 | 'settings-smaller-header': '0, 118, 187', 15 | 'dark-blue-popout-normal': '1, 15, 40', 16 | 'dark-blue-popout-playing': '13, 10, 58', 17 | 'streaming-violet': '51, 12, 72', 18 | 'message-hover': '0, 10, 28', 19 | 'spoiler-box': '0, 0, 13', 20 | 'light-grey': '220, 221, 222' 21 | ); 22 | 23 | $colour-shades: ( 24 | 'greyish-blue': '70, 86, 107', 25 | 'darker-orange-red': '192, 34, 9', 26 | 'darker-reply-content': '160, 37, 121', 27 | 'light-pink-tick-slider': '255, 27, 240, 0.25', 28 | 'darker-interactive-active': '209, 41, 255' 29 | ); 30 | 31 | $login-background: url( 32 | 'https://raw.githubusercontent.com/spinfish/kaleidoscope/master/source/images/login_background.png' 33 | ); 34 | 35 | $home-icon-background: url( 36 | 'https://raw.githubusercontent.com/spinfish/kaleidoscope/master/source/images/home_icon_background.svg' 37 | ); 38 | 39 | $lily-datepicker-bg-image: url( 40 | 'https://media.discordapp.net/attachments/678012423067926539/842665461127970816/lily.png' 41 | ); 42 | 43 | $modal-box-shadow: 0 0 2px 2px var(--background-tertiary); 44 | 45 | $nitro-header-gradient: linear-gradient( 46 | to right, 47 | var(--interactive-normal), 48 | var(--interactive-active), 49 | deeppink 50 | ); -------------------------------------------------------------------------------- /source/helpers/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin exclude-yellow-white { 2 | &:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ) { 3 | @content; 4 | } 5 | } 6 | 7 | // Because it's prettier imo 8 | @mixin parent-and($other-selectors...) { 9 | &, #{$other-selectors} { 10 | @content; 11 | } 12 | } 13 | 14 | @mixin popout-button($colour-name) { 15 | --popout-button-text: var(--kds-#{$colour-name}); 16 | --popout-button-focused: rgba(var(--kds-#{$colour-name}-rgb), 0.15); 17 | --popout-button-active: rgba(var(--kds-#{$colour-name}-rgb), 0.65); 18 | } 19 | 20 | @mixin filled-button($colour-name) { 21 | --fill-button-normal: var(--kds-#{$colour-name}); 22 | --fill-button-hover: rgba(var(--kds-#{$colour-name}-rgb), 0.85); 23 | --fill-button-active: rgba(var(--kds-#{$colour-name}-rgb), 0.7); 24 | } 25 | 26 | @mixin lined-button($colour-name) { 27 | --line-button-colour: var(--kds-#{$colour-name}); 28 | --line-button-hover: rgba(var(--kds-#{$colour-name}-rgb), 0.075); 29 | } 30 | 31 | @mixin growing-dark-message-bar($target) { 32 | #{$target}: -4px; 33 | 34 | height: 33px; 35 | background-color: var(--background-secondary); 36 | transition: #{$target} 0.3s linear; 37 | 38 | &:hover { 39 | #{$target}: 0px; 40 | background-color: var(--background-secondary-alt); 41 | } 42 | } 43 | 44 | @mixin special-themed-item-button($colour, $opacity, $path: false) { 45 | // People writing Discord's CSS must be psychopaths because they 46 | // have !importants IN STYLESHEET CSS WITH NO INLINE STYLES ANYWHERE 47 | // So I gotta use !important here. Sorry. 48 | 49 | color: $colour !important; 50 | 51 | &:hover { 52 | background-color: rgba($colour, 0.075) !important; 53 | } 54 | 55 | &:active, 56 | &.selected-3s45Ha { 57 | color: white !important; 58 | background-color: rgba($colour, $opacity) !important; 59 | 60 | @if $path { 61 | path { 62 | fill: white; 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /source/theme/guilds/inner/_channels-sidebar.scss: -------------------------------------------------------------------------------- 1 | // Badges next to server name 2 | .iconBackgroundTierNone-3ZkOsa { 3 | --background-accent: var(--kds-dark-blue-popout-normal); 4 | } 5 | 6 | .guildIconContainer-2FW_iA { 7 | .flowerStarContainer-3zDVtj { 8 | &:not(.iconBackgroundTierNone-3ZkOsa) { 9 | --brand-experiment: var(--kds-settings-smaller-header); // Partnered 10 | --background-accent: rgba(var(--kds-reply-content-rgb), 0.5); // Boosted 11 | } 12 | } 13 | } 14 | 15 | // Fix banner not being border-radius'd 16 | .animatedContainer-1NSq4T { 17 | border-top-right-radius: 10px; 18 | } 19 | 20 | // Topic when looked at from channel 21 | .topic-TCb_qw { 22 | color: var(--kds-reply-content); 23 | } 24 | 25 | // Categories 26 | .name-3l27Hl, 27 | .wrapper-PY0fhH { 28 | color: var(--kds-category-name); 29 | } 30 | 31 | // Unread channel pill 32 | .unread-2lAfLh { 33 | background-color: var(--kds-number); 34 | } 35 | 36 | // Text channels 37 | .icon-1DeIlz, 38 | .channelName-2YrOjO { 39 | color: deeppink; 40 | 41 | @at-root { 42 | // Channel hovering 43 | .containerDefault--pIXnN:hover & { 44 | color: var(--interactive-hover); 45 | } 46 | 47 | .modeMuted-onO3r- & { 48 | color: var(--interactive-muted); 49 | } 50 | 51 | .modeSelected-346R90 & { 52 | color: var(--interactive-active); 53 | } 54 | 55 | .modeUnread-1qO3K1 & { 56 | color: var(--kds-number); 57 | } 58 | } 59 | } 60 | 61 | .content-1x5b-n { 62 | border-radius: 10px; 63 | } 64 | 65 | // Voice channels 66 | .userLimit-3aerPX { 67 | > .wrapper-2tAnRe { 68 | color: var(--kds-number); 69 | } 70 | 71 | .users-3kndPl { 72 | width: 27px; 73 | padding: 0 4px 0 8px; 74 | background-color: var(--background-secondary-alt); 75 | } 76 | 77 | .total-i6us2n { 78 | width: 26px; 79 | padding: 0 6px 0 4px; 80 | background-color: black; 81 | 82 | &::after { 83 | border: none; 84 | } 85 | } 86 | } -------------------------------------------------------------------------------- /source/theme/user/inner/_profile.scss: -------------------------------------------------------------------------------- 1 | .body-r6_QPy { 2 | > .scrollerBase-289Jih { 3 | &[style*='padding-right: 0px'] { 4 | background-color: var(--background-primary); 5 | } 6 | } 7 | } 8 | 9 | .topSection-y3p-_D { 10 | --text-normal: var(--header-secondary); 11 | background-color: var(--kds-dark-blue-popout-playing); 12 | 13 | // Fix custom status being too close to tag 14 | .nameTagWithCustomStatus-2kkfrQ { 15 | margin-bottom: 6px; 16 | } 17 | 18 | // User info, mutual servers, mutual friends 19 | .tabBarContainer-37hZsr { 20 | border-bottom: none; 21 | } 22 | 23 | // Get rid of ugly borders around avatars 24 | .avatar-AvHqJA { 25 | border-color: transparent; 26 | background-color: transparent; 27 | } 28 | 29 | .banner-2QYc2d { 30 | background-color: inherit !important; 31 | 32 | &:not(.bannerPremium-2hSAwz) { 33 | // Remove huge empty space above avatar in non-custom banner profiles 34 | height: 80px; 35 | } 36 | } 37 | 38 | + .noTabBar-3ZjPNR { 39 | border-top: none; 40 | } 41 | } 42 | 43 | // Activity tab 44 | .newProfileActivityStyles { 45 | --text-normal: var(--header-secondary); 46 | 47 | // Spotify stuff 48 | .horizontal-1ae9ci { 49 | .fullWidth-1orjjo { 50 | width: 33px; 51 | margin-left: 5px; 52 | } 53 | 54 | > :not(:first-child) { 55 | &:not(.disabledButtonWrapper-3wH6-b) { 56 | margin-left: 4px; 57 | } 58 | } 59 | } 60 | 61 | .spotifyButtonLogo-3uT57D { 62 | left: 7.7px; 63 | position: absolute; 64 | } 65 | } 66 | 67 | .connectedAccount-2Jb-Z0 { 68 | cursor: pointer; 69 | border-color: black; 70 | background-color: var(--kds-message-hover); 71 | 72 | &:hover { 73 | background-color: var(--background-modifier-active); 74 | } 75 | 76 | .flowerStar-1GeTsn { 77 | > path { 78 | fill: var(--kds-reply-content); 79 | } 80 | } 81 | 82 | .childContainer-1wxZNh { 83 | path { 84 | fill: black; 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing to kaleidoscope 2 | First off, thanks for taking the time to contribute to kaleidoscope! 3 | The following is a set of guidelines for contributing to this project.
4 | These are mostly guidelines, not hard rules, and you may propose changes to them in a pull request if you wish. 5 | 6 | ### I don't want to read all this, I only want to ask a question!! 7 | 8 | > **Please avoid filing an issue to ask a question.** 9 | It most likely doesn't belong here unless it provides value to a larger audience. 10 | 11 | If you have questions about the theme, feel free to contact me on Discord `mackenzie#0173`. 12 | I am pretty active on there most of the time and *should* be able to get back to you fairly quickly. 13 | 14 | ### Good Bug Reports 15 | 16 | Please try to stick to the following guidelines when submitting bug reports: 17 | 18 | 1. **Do not open duplicate issues.** *Please* search your issue to make sure it has not already been asked. Duplicate issues will be closed. 19 | 2. **Use a clear and descriptive title** for the issue to help identify the problem faster. 20 | 3. **Describe the exact steps that reproduce the problem**. For instance, if something isn't themed properly, provide a screenshot and make sure to list all themes you have enabled to make sure the cause is not from a simple clash. 21 | 22 | Insufficient information on an issue or lack of response within a reasonable amount of time upon asking for it will lead to it being closed. 23 | 24 | ### Submitting a pull request 25 | 26 | There aren't many things to worry about here, just make sure it 27 | 28 | 1. only focuses on a single aspect (one huge PR is harder to deal with than several smaller, more managable ones) and 29 | 2. matches the code formatting found in the rest of the project (indentation of two spaces, avoid repetition, make use of SCSS variables rather than CSS custom properties, prefer colours in RGB format rather than HEX, etc) 30 | 31 | #### Commit guidelines 32 | 33 | - Use present tense (e.g. "Fix x not being themed" not "Fixed x not being themed") 34 | - Limit the message to 72 characters (preferably less) 35 | - When referencing issues, use the shorthand `#123` and place it at the end of the commit message 36 | - Use proper grammar and spelling -------------------------------------------------------------------------------- /source/theme/user/inner/_popout.scss: -------------------------------------------------------------------------------- 1 | // If you don't want to see horrific code just don't look at it 2 | 3 | .userPopout-xaxa6l { 4 | --text-normal: var(--header-secondary); 5 | --background-floating: var(--background-secondary); 6 | 7 | box-shadow: 0 0 3px 1px var(--background-tertiary); 8 | 9 | // Remove default accent colour (wtf were they thinking) 10 | .popoutBanner-19WKGg { 11 | background-color: inherit !important; 12 | } 13 | 14 | > .headerNormal-3KXFBt, // Bannery bit 15 | > .headerTop-3vNv-a { // Where badges & username are 16 | background-color: var(--kds-dark-blue-popout-playing); 17 | } 18 | 19 | .avatar-37jOim { 20 | --background-floating: var(--kds-dark-blue-popout-playing); // Laziness 21 | border-width: 4px; // Hackily shifts it around lmao 22 | } 23 | 24 | // Fix avatar hints not being positioned properly 25 | .avatarHint-2A3RNb { 26 | top: 4px; 27 | left: 4px; 28 | } 29 | 30 | .customStatus-oN4ZZY { 31 | display: flex; 32 | padding: 2px 0 16px 12px; 33 | background-color: var(--kds-dark-blue-popout-playing); 34 | 35 | > .emoji { 36 | width: 100px; 37 | height: 100px; 38 | margin-top: 8px; 39 | 40 | + .customStatusText-1vtUsN { 41 | margin: auto; 42 | max-width: 150px; 43 | text-align: center; 44 | } 45 | } 46 | } 47 | 48 | .aboutMeSection-1Fw5Ia { 49 | margin-top: 16px; 50 | } 51 | 52 | // Because I remove the divider it makes the scroller cramped 53 | .bodyInnerWrapper-26fQXj { 54 | margin-top: 12px; 55 | } 56 | 57 | > .scrollerBase-289Jih { 58 | // Give the illusion of custom status being part of header 59 | padding-left: 0; 60 | padding-right: 0 !important; 61 | 62 | &::-webkit-scrollbar { 63 | display: none; 64 | } 65 | 66 | &.scrollerSeparator-3K3Qdv { 67 | box-shadow: none; 68 | } 69 | 70 | > .divider-ewBQKj { 71 | display: none; 72 | 73 | // Make everything else go back to normal 74 | ~ div { 75 | padding-left: 16px; 76 | padding-right: 16px; 77 | } 78 | } 79 | } 80 | } 81 | 82 | .roleName-32vpEy { 83 | color: var(--header-secondary); 84 | } 85 | 86 | .botTag-2WPJ74 { 87 | color: white; 88 | background-color: deeppink; 89 | } -------------------------------------------------------------------------------- /source/theme/popouts/inner/_datepicker.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | @use '../../../helpers/variables' as *; 3 | 4 | #app-mount { 5 | .searchFilter-2ESiM3, 6 | .searchAnswer-3Dz2-q { 7 | color: var(--text-normal); 8 | background-color: var(--background-secondary); 9 | } 10 | 11 | .datePicker--XZbmJ { 12 | background-color: rgba(var(--kds-almost-cyan-rgb), 0.015); 13 | box-shadow: 0 0 0 5px rgba(var(--kds-almost-cyan-rgb), 0.2) inset; 14 | background: $lily-datepicker-bg-image center/cover no-repeat; 15 | 16 | &::before { 17 | content: ''; 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | opacity: 0.5; 22 | background-color: var(--background-primary); 23 | } 24 | } 25 | 26 | .datePickerHint-3Q1Udw { 27 | z-index: 0; 28 | margin: auto; 29 | border-top-color: rgb(128, 128, 128, 0.25); 30 | } 31 | 32 | .hintValue-29ny8Z { 33 | background-color: var(--kds-darker-reply-content); 34 | } 35 | 36 | .react-datepicker { 37 | background-color: inherit; 38 | left: 65px; // margin: auto + position didnt work lol 39 | 40 | &__header { 41 | background-color: inherit; 42 | } 43 | 44 | &__current-month { 45 | color: deeppink; 46 | border: none; 47 | font-weight: bold; 48 | font-size: 150%; 49 | } 50 | 51 | &__navigation { 52 | &--next, 53 | &--previous { 54 | border-color: black; 55 | } 56 | } 57 | 58 | // All the filter stuff is to compensate for the background image 59 | &__day { 60 | border-color: black; 61 | filter: brightness(150%); 62 | color: var(--kds-category-name); 63 | background-color: var(--background-secondary); 64 | 65 | &:hover { 66 | &:not(.react-datepicker__day--disabled) { 67 | font-weight: 800; 68 | color: var(--kds-mango-yellow); 69 | background-color: var(--background-secondary-alt); 70 | } 71 | } 72 | 73 | &-name { 74 | font-weight: 700; 75 | color: rgb(47, 2, 46); 76 | } 77 | 78 | &--outside-month { 79 | filter: brightness(105%); 80 | } 81 | 82 | &--selected { 83 | &::after { 84 | background-color: var(--kds-darker-reply-content); 85 | } 86 | } 87 | 88 | &--disabled { 89 | @include parent-and('&:hover') { 90 | background-color: rgb(1, 16, 27); 91 | filter: brightness(85%); 92 | cursor: not-allowed; 93 | } 94 | } 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /source/theme/chat/inner/_messages.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | #app-mount { 4 | .edited-3sfAzf, 5 | .timestamp-3ZCmNB { 6 | color: var(--kds-mango-yellow); 7 | } 8 | 9 | // Reply messages 10 | .repliedMessage-VokQwo { 11 | &::before { 12 | border-color: var(--background-tertiary); 13 | } 14 | } 15 | 16 | .replyBadge-r1su3o { 17 | background: transparent; 18 | } 19 | 20 | .replyIcon-1b4Xjp { 21 | width: 20px; 22 | height: 10px; 23 | 24 | > path { 25 | fill: white; 26 | } 27 | } 28 | 29 | .repliedTextPreview-2NBljf { 30 | color: var(--kds-reply-content); 31 | 32 | &:hover { 33 | color: var(--interactive-active); 34 | } 35 | } 36 | } 37 | 38 | .message-2qnXI6 { 39 | // Jesus God and all that is holy 40 | &:hover { 41 | &:not(.mentioned-xhSam7) { 42 | &:not(.replying-1x3H0T) { 43 | &:not(.ephemeral-1PsL1r) { 44 | // --background-message-hover doesnt work 45 | // and yet --background-mentioned does 46 | background-color: var(--kds-message-hover); 47 | } 48 | } 49 | } 50 | } 51 | 52 | // Spotify cards 53 | // The actual content of the cards is impossible to customize :sadge: 54 | .embedSpotify-tvxDCr { 55 | border-radius: 6px; 56 | } 57 | } 58 | 59 | .mentioned-xhSam7 { 60 | &::before { 61 | background-color: var(--kds-mango-yellow); 62 | } 63 | 64 | // Mentioned + replying 65 | &.replying-1x3H0T { 66 | background-color: rgba(var(--kds-mentioned-replying-bg-rgb), 0.075); 67 | 68 | &::before { 69 | background: linear-gradient( 70 | to top, 71 | var(--kds-mango-yellow), 72 | var(--kds-reply-content), 73 | var(--interactive-active), 74 | var(--kds-number) 75 | ); 76 | } 77 | } 78 | } 79 | 80 | // Clyde + replying 81 | .ephemeral-1PsL1r, 82 | .replying-1x3H0T { 83 | background-color: rgba(var(--kds-number-rgb), 0.075); 84 | 85 | &::before { 86 | background-color: var(--kds-number); 87 | } 88 | } 89 | 90 | // Message hover toolbar 91 | .wrapper-2aW0bm { 92 | background-color: transparent; 93 | box-shadow: none; 94 | } 95 | 96 | // Message hover buttons 97 | .button-1ZiXG9 { 98 | margin: 0 2px; 99 | border-radius: 5px; 100 | background-color: var(--background-tertiary); 101 | 102 | &:hover { 103 | background-color: var(--background-modifier-selected); 104 | } 105 | 106 | &.dangerous-2r8KxV { 107 | @include parent-and('&:hover') { 108 | color: var(--kds-bright-orange-red); 109 | } 110 | } 111 | } 112 | 113 | // I wasn't sure where else to put this 114 | // It's just the little icon that appears next to filename 115 | // When uploading in chat e.g. [icon] unknown.png ... 116 | .icon-1kp3fr { 117 | filter: invert(0.95); 118 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # kaleidoscope 2 | A vibrant, colourful dark theme for Discord inspired by [the 2077 theme for VSCode](https://marketplace.visualstudio.com/items?itemName=Endormi.2077-theme 'Thanks, Endormi!'). 3 | 4 | ![Main Preview](https://github.com/spinfish/images/blob/master/kaleidoscope/preview_1.png) 5 | 6 | ## Features 7 | - Customizable status colours 8 | - Custom codeblock styling (using HLJS) 9 | - Reverts the Discord visual update (to the best of its capacity) 10 | 11 | **IMPORTANT NOTE**: If you use the [Better Status Indicators plugin by Harley](https://github.com/griefMoDz/better-status-indicators 'really cool plogin btw') **please make sure the theme variables setting is enabled** (under `Customise`). 12 | 13 | ## Installation 14 | #### Powercord 15 | - Navigate to your `powercord` folder 16 | - Go to `src > Powercord` and right click `themes` 17 | - Select `Git Bash here` (as shown below) and then type 18 | 19 | ```shell 20 | git clone https://github.com/spinfish/kaleidoscope 21 | ``` 22 | 23 | ![Git Bash](https://media.discordapp.net/attachments/678012423067926539/835658793253470308/git_bash_here.png) 24 | 25 | #### BetterDiscord 26 | For a direct download, click [here](https://betterdiscord.app/Download?id=257). If you don't want that, do the following: 27 | 28 | - Click [here](https://betterdiscord.app/theme/kaleidoscope) 29 | - Press the big blue `Download` button 30 | - Drag and drop the file into your `Themes` folder 31 | 32 | ## Acknowledgements 33 | Huge thanks to **[endormi](https://github.com/endormi)** of course for inspiring me to make this, and to everyone who helped me out with CSS stuff in the Powercord server, most notably the following people: 34 | 35 | - **[LuckFire](https://github.com/LuckFire/)** for their incredible [Midnight Mars theme](https://github.com/LuckFire/midnight-mars) and for all the time and help they've given me :] 36 | - **[Doggybootsy](https://github.com/doggybootsy)** and **[void](https://github.com/voidfill)** for their useful tidbits of advice, extensive CSS knowledge and help with fixing various things :) 37 | - **[emma 🌺](https://github.com/ghostlydilemma)** for explaining how inline CSS has a higher specificity than external CSS and for always being so kind ^-^ 38 | - **[katlyn](https://github.com/katlyn)** for showing me just how bad `!important` is and general helpful advice :> 39 | 40 | Thank you to my mum for helping me choose the right colours and styles (she has a keen eye for that).
41 | And of course a huge thank you to the following people for the extras: 42 | 43 | - **[NYRI4](https://github.com/NYRI4)** for [Discolored](https://github.com/NYRI4/Discolored) 44 | - **[mr-miner1](https://github.com/mr-miner1)** for [Better Badges](https://github.com/mr-miner1/Better-Badges) 45 | - **[Goose-Nest](https://github.com/Goose-Nest/)** for [RevertRebrand](https://github.com/Goose-Nest/GT-RevertRebrand) 46 | 47 | Couldn't have done it without yall <3 48 | 49 | ## Extra previews 50 | ![Preview Two](https://github.com/spinfish/images/blob/master/kaleidoscope/preview_2.png) 51 | ![Preview Three](https://github.com/spinfish/images/blob/master/kaleidoscope/preview_3.png) -------------------------------------------------------------------------------- /source/theme/chat/inner/_voice-streaming.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/mixins' as *; 2 | 3 | // Little round avatars under VC name 4 | .avatarSpeaking-2IGMRN { 5 | box-shadow: 0 0 0 2px var(--kds-radio-bar-green) inset, 6 | 0 0 0 3px var(--background-secondary) inset; 7 | } 8 | 9 | .qualitySettingsContainer-1gOtRJ { 10 | border-color: var(--background-tertiary); 11 | } 12 | 13 | .bottomControls-lIJyYL { 14 | @at-root #app-mount & .centerIcon-2G6o-T { 15 | color: white; 16 | } 17 | 18 | .colorable-1bkp8v { 19 | background-color: var(--call-button-normal); 20 | 21 | &:hover { 22 | background-color: var(--call-button-hover); 23 | } 24 | } 25 | 26 | .primaryDark-3mSFDl { 27 | --call-button-normal: var(--background-primary); 28 | --call-button-hover: var(--kds-dark-blue-popout-normal); 29 | } 30 | 31 | .white-3GPOIp { 32 | --call-button-normal: var(--kds-darker-reply-content); 33 | --call-button-hover: var(--kds-reply-content); 34 | } 35 | 36 | .red-33-Lnk { 37 | --call-button-normal: var(--kds-darker-orange-red); 38 | --call-button-hover: var(--kds-bright-orange-red); 39 | } 40 | 41 | .slash-33-IMF, 42 | .directionDown-26e7eE { 43 | color: white; 44 | } 45 | } 46 | 47 | .callContainer-36WRfH { 48 | @at-root #app-mount & { 49 | background-color: var(--background-secondary-alt); 50 | 51 | .status-1WEaea { 52 | background-color: var(--kds-bright-orange-red); 53 | } 54 | } 55 | 56 | .background-ujHpbY { 57 | background-color: var(--background-tertiary) !important; 58 | } 59 | 60 | .speaking-WDn8Wm { 61 | box-shadow: 0 0 0 2px var(--kds-radio-bar-green) inset, 62 | 0 0 0 3px var(--background-floating) inset; 63 | } 64 | } 65 | 66 | // Streaming 67 | .background-ujHpbY { // Floating stream card 68 | background-color: var(--background-secondary-alt) !important; 69 | } 70 | 71 | .liveQualityIndicator-3XCjEU { // E.g. 1080p/60FPS; left of LIVE badge 72 | background-color: var(--background-primary) !important; 73 | } 74 | 75 | #app-mount { 76 | // Show/hide participants 77 | .participantsButton-KYW-IW { 78 | @include parent-and('&:hover') { 79 | background-color: var(--background-primary); 80 | } 81 | } 82 | 83 | // Popout from hovering VC name 84 | .activity-3jdl2U { 85 | // Bruh 86 | .lookOutlined-3sRXeN { 87 | --line-button-colour: white; 88 | --line-button-hover: rgba(white, 0.5); 89 | } 90 | } 91 | 92 | // Popout from hovering streamer's VC username 93 | .streamPreview-2-WUWT { 94 | background-color: var(--background-tertiary); 95 | } 96 | 97 | // Top part of popout where preview is embedded 98 | .previewContainer-12UlHl { 99 | background-color: inherit; 100 | } 101 | } 102 | 103 | // You've been disconnected/stream still running/loading 104 | .root-2sELX6, 105 | .spinner-2UBgbJ { 106 | background: var(--background-tertiary); 107 | } 108 | 109 | // No one else is here yet... 110 | .tile-2naSqK { 111 | background-color: var(--background-secondary); 112 | } -------------------------------------------------------------------------------- /source/extras/_status-indicators.scss: -------------------------------------------------------------------------------- 1 | // There goes my sanity, thanks Discord :slight_smile: 2 | 3 | @use 'sass:map' as *; 4 | 5 | $status-mapping: ( 6 | 'dnd': ( 7 | 'fill-includes': '359', 8 | 'aria-label': 'Do not disturb' 9 | ), 10 | 'idle': ( 11 | 'fill-includes': '38', 12 | 'aria-label': 'Idle' 13 | ), 14 | 'online': ( 15 | 'fill-includes': '139', 16 | 'aria-label': 'Online' 17 | ), 18 | 'streaming': ( 19 | 'fill-includes': '262', 20 | 'aria-label': 'Streaming' 21 | ), 22 | 'offline': ( 23 | 'fill-includes': '214', 24 | 'aria-label': 'Offline' 25 | ) 26 | ); 27 | 28 | :root { 29 | --kds-online-colour: var(--bsi-online-color, rgb(29, 185, 84)); 30 | --kds-dnd-colour: var(--bsi-dnd-color, rgb(255, 42, 0)); 31 | --kds-idle-colour: var(--bsi-idle-color, rgb(250, 166, 26)); 32 | --kds-streaming-colour: var(--bsi-streaming-color, rgb(109, 20, 158)); 33 | --kds-offline-colour: var(--bsi-offline-color, rgb(7, 134, 130)); 34 | --kds-invisible-colour: var(--bsi-invisible-color, rgb(66, 65, 65)); 35 | } 36 | 37 | // Regular and typing 38 | @each $name, $inner-map in $status-mapping { 39 | rect { 40 | &[fill*='#{get($inner-map, 'fill-includes')}'] { 41 | // You ask: why the fuck are they doing this? 42 | // Well if I used normal interpolation it would add 43 | // spaces in between the --kds- prefix and $name 44 | fill: var(--kds- + $name + -colour); 45 | } 46 | } 47 | } 48 | 49 | // Status picker and DMs 50 | @each $mask in keys($status-mapping) { 51 | foreignObject { 52 | &[mask*='#{$mask}'] { 53 | .status-1AY8sU { 54 | // This is to prevent this from happening when using Better Status Indicators 55 | // https://cdn.discordapp.com/attachments/666510091658330123/863683246632861716/unknown.png 56 | &:not([style*='rgb']) { 57 | // See above as to why I perform this monstrosity 58 | background-color: var(--kds- + $mask + -colour) !important; 59 | } 60 | } 61 | } 62 | } 63 | } 64 | 65 | // Speaking indicators 66 | .avatar-SmRMf2 { 67 | @each $name, $inner-map in remove($status-mapping, 'offline') { 68 | &[aria-label$='#{get($inner-map, 'aria-label')}'] { 69 | --speaking-box-shadow-colour: #{var(--kds- + $name + -colour)}; 70 | } 71 | } 72 | 73 | &[aria-label$='Invisible'] { 74 | // So it matches the icon 75 | --speaking-box-shadow-colour: var(--kds-invisible-colour); 76 | } 77 | 78 | .avatarSpeaking-2c8-9i { 79 | box-shadow: 0 0 0 2px var(--speaking-box-shadow-colour) inset, 80 | 0 0 0 3px var(--background-secondary) inset; 81 | } 82 | } 83 | 84 | // Thanks to LuckFire for their original snippet + idea 85 | // for DM status indicators! 86 | .status-1XNdyw { 87 | &::after { 88 | font-weight: bold; 89 | text-transform: uppercase; 90 | padding-left: 8px; 91 | content: attr(aria-label); 92 | } 93 | 94 | @each $name, $inner-map in $status-mapping { 95 | &[aria-label='#{get($inner-map, 'aria-label')}'] { 96 | &::after { 97 | // :blobpain: 98 | color: var(--kds- + $name + -colour); 99 | } 100 | } 101 | } 102 | } -------------------------------------------------------------------------------- /source/theme/pages/inner/_server-boosting.scss: -------------------------------------------------------------------------------- 1 | @use '../../../helpers/variables' as *; 2 | 3 | %-base-tier-body { 4 | font-weight: 550; 5 | border: 1px solid black; 6 | color: var(--text-normal); 7 | } 8 | 9 | %-subscriber-element { 10 | border: 1px solid var(--background-tertiary); 11 | background-color: var(--background-secondary-alt); 12 | } 13 | 14 | // All selectors are in order of boosting page -> settings 15 | // including union (e.g. tierUnlocked1, tierUnlocked2) 16 | 17 | #app-mount { 18 | .perksModalContentWrapper-2HU6uL { 19 | background-color: var(--background-primary); 20 | 21 | h3 { 22 | &:not(.headingTier1-K4ha7e) { 23 | color: var(--kds-category-name); 24 | } 25 | } 26 | } 27 | 28 | // Settings 29 | .moreSubscribers-XxaiVS { 30 | @extend %-subscriber-element; 31 | } 32 | 33 | .subscribersPopout-3tW0Y9 { 34 | @extend %-subscriber-element; 35 | grid-gap: 12px; 36 | // I'm sorry but try as I might :last-child doesn't work so 37 | // I can't get it to not cut off the usernames at the bottom :( 38 | } 39 | 40 | // Boost page 41 | .barBackground-2EEiLw { 42 | background-color: var(--background-tertiary); 43 | } 44 | 45 | // Settings 46 | .background-3xPPFc { 47 | color: var(--background-tertiary); 48 | } 49 | 50 | .tierHeaderUnlocked-1n-OTI, 51 | .tierHeaderUnlocked-3lTDnP { 52 | background-image: $nitro-header-gradient; 53 | } 54 | 55 | .tierUnlocked-25K6Kv, 56 | .tierUnlocked-2H6ULo { 57 | color: rebeccapurple; 58 | background: white; 59 | } 60 | 61 | .tierHeaderLocked-1s2JJz, 62 | .tierHeaderLocked-3S508x { 63 | border: 1px black; 64 | border-style: solid solid none solid; 65 | border-top-left-radius: 6px; 66 | border-top-right-radius: 6px; 67 | background-color: var(--background-tertiary); 68 | } 69 | 70 | .tierMarkerBackground-3q29am { 71 | background-color: var(--background-secondary-alt); 72 | } 73 | 74 | // Ugh I hate this but I tried messing around with at-root to no avail 75 | .selectedTier-1JkO7i { 76 | .tierMarkerBackground-3q29am { 77 | filter: brightness(125%); 78 | background-color: var(--kds-dark-blue-popout-normal); 79 | } 80 | } 81 | 82 | .tierMarkerInProgress-24LMzJ { 83 | border: 1px solid var(--background-tertiary); 84 | background-color: var(--kds-message-hover) !important; 85 | } 86 | 87 | .tierInProgress-3mBoXq { 88 | background-color: var(--background-tertiary); 89 | } 90 | 91 | .tierLock-3CSxSX { 92 | color: var(--kds-greyish-blue); 93 | } 94 | 95 | .tierBody-16Chc9 { 96 | @extend %-base-tier-body; 97 | background-color: var(--background-secondary-alt); 98 | } 99 | 100 | .tierBody-3aUxuc { 101 | @extend %-base-tier-body; 102 | background-color: var(--background-secondary); 103 | 104 | > .perks-32J1d0 { 105 | color: var(--kds-reply-content); 106 | } 107 | } 108 | 109 | .unlocked-251xRB { 110 | color: var(--kds-radio-bar-green); 111 | } 112 | 113 | .perk-2WeBWW { 114 | background-color: var(--background-secondary-alt); 115 | } 116 | 117 | .divider-25_-sM, 118 | .divider-Uf0Wob { 119 | margin: 20px 0; 120 | background: none; 121 | } 122 | } -------------------------------------------------------------------------------- /source/_root.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MIT License 3 | * 4 | * Copyright (c) 2021 spinfish 5 | * 6 | * Permission is hereby granted, free of charge, to any person obtaining a copy 7 | * of this software and associated documentation files (the "Software"), to deal 8 | * in the Software without restriction, including without limitation the rights 9 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | * copies of the Software, and to permit persons to whom the Software is 11 | * furnished to do so, subject to the following conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be included in all 14 | * copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | * SOFTWARE. 23 | */ 24 | 25 | @use 'sass:map'; 26 | @use './helpers/variables' as *; 27 | 28 | .theme-dark, 29 | .theme-light, 30 | :root { 31 | @each $colour, $value in map.merge($base-colours, $colour-shades) { 32 | --kds-#{$colour}: rgb(#{$value}); 33 | --kds-#{$colour}-rgb: #{$value}; 34 | } 35 | 36 | --header-primary: var(--kds-light-grey); 37 | 38 | --background-accent: rgba(3, 13, 34, 1); 39 | --background-primary: var(--background-accent); 40 | 41 | --background-secondary: rgba(1, 11, 30, 1); 42 | --background-secondary-alt: rgba(0, 9, 21, 1); 43 | 44 | --background-tertiary: rgba(0, 5, 15, 1); 45 | --background-floating: var(--background-tertiary); 46 | 47 | --background-modifier-hover: rgba(3, 9, 27, 1); 48 | --background-modifier-active: rgba(3, 16, 40, 1); 49 | --background-modifier-selected: var(--background-modifier-active); 50 | 51 | --background-mobile-primary: var(--background-primary); 52 | --background-mobile-secondary: var(--background-secondary); 53 | --background-mentioned: rgba(var(--kds-mango-yellow-rgb), 0.075); 54 | 55 | --text-link: rgba(62, 200, 255, 1); 56 | --text-normal: rgba(255, 27, 240, 1); 57 | --text-muted: rgba(182, 182, 182, 1); 58 | 59 | --header-secondary: rgba(205, 207, 211, 1); 60 | --channels-default: rgba(201, 201, 201, 1); 61 | --channeltextarea-background: var(--background-secondary-alt); 62 | 63 | --interactive-normal: var(--kds-almost-cyan); 64 | --interactive-hover: var(--kds-mango-yellow); 65 | --interactive-active: rgba(209, 41, 255, 1); 66 | --interactive-muted: rgba(48, 52, 61, 1); 67 | 68 | --activity-card-background: var(--background-tertiary); 69 | --radio-group-dot-foreground: var(--interactive-normal); 70 | --brand-experiment: var(--kds-settings-smaller-header); 71 | 72 | // Huge thanks to Nyria#3863 for helping me find these 73 | --scrollbar-auto-track: transparent; 74 | --scrollbar-thin-thumb: var(--background-tertiary); 75 | --scrollbar-auto-thumb: var(--kds-category-name); 76 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-thin-thumb); 77 | --scrollbar-auto-scrollbar-color-track: var(--background-secondary); 78 | 79 | // i'm unsure of what exactly this does 80 | // if someone could tell me that'd be cool 81 | --offline-color: rgba(60, 60, 60, 1); 82 | } -------------------------------------------------------------------------------- /source/extras/_revert.scss: -------------------------------------------------------------------------------- 1 | // Discord is stupid. 2 | :root { 3 | --font-display: var(--font-family) !important; // Sorry katlyn 4 | } 5 | 6 | // Thank God for this person 7 | // https://www.reddit.com/r/discordapp/comments/bfhmrt/i_want_a_default_grey_colored_default_discord/eldqnxg/ 8 | $default-avatar-map: ( 9 | '3c6ccb83716d1e4fb91d3082f6b21d77': 'https://discordapp.com/assets/1cbd08c76f8af6dddce02c5138971129.png', // Red 10 | '6f26ddd1bf59740c536d2274bb834a05': 'https://discordapp.com/assets/0e291f67c9274a1abdddeb3fd919cbaa.png', // Orange 11 | '7c8f476123d28d103efe381543274c25': 'https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png', // Green 12 | '1f0bfc0865d324c2587920a7d80c609b': 'https://discordapp.com/assets/6debd47ed13483642cf09e832ed0bc1b.png', // Blurple 13 | 'c09a43a372ba81e3018c3151d4ed4773': 'https://discordapp.com/assets/322c936a8c8be1b803cd94861bdfa868.png', // Grey 14 | 'c6a249645d46209f337279cd2ca998c7': 'https://discordapp.com/assets/6debd47ed13483642cf09e832ed0bc1b.png' // System 15 | ); 16 | 17 | // Thanks to Doggybootsy for this! 18 | .homeIcon-FuNwkv { 19 | > path { 20 | d: path( 21 | 'M20.6644 20C20.6644 20 19.8014 18.9762 19.0822 18.0714C22.2226 17.1905 23.4212 15.2381 23.4212 15.2381C22.4384 15.881 21.5034 16.3334 20.6644 16.6429C19.4658 17.1429 18.3151 17.4762 17.1884 17.6667C14.887 18.0953 12.7774 17.9762 10.9795 17.6429C9.61301 17.381 8.43836 17 7.45548 16.6191C6.90411 16.4048 6.30479 16.1429 5.70548 15.8096C5.63356 15.7619 5.56164 15.7381 5.48973 15.6905C5.44178 15.6667 5.41781 15.6429 5.39384 15.6191C4.96233 15.381 4.7226 15.2143 4.7226 15.2143C4.7226 15.2143 5.87329 17.1191 8.91781 18.0238C8.19863 18.9286 7.31164 20 7.31164 20C2.0137 19.8333 0 16.381 0 16.381C0 8.7144 3.45205 2.50017 3.45205 2.50017C6.90411 -0.07123 10.1884 0.000197861 10.1884 0.000197861L10.4281 0.285909C6.11301 1.52399 4.12329 3.40493 4.12329 3.40493C4.12329 3.40493 4.65068 3.11921 5.53767 2.71446C8.10274 1.59542 10.1404 1.2859 10.9795 1.21447C11.1233 1.19066 11.2432 1.16685 11.387 1.16685C12.8493 0.976379 14.5034 0.92876 16.2295 1.11923C18.5068 1.38114 20.9521 2.0478 23.4452 3.40493C23.4452 3.40493 21.5514 1.61923 17.476 0.381146L17.8116 0.000197861C17.8116 0.000197861 21.0959 -0.07123 24.5479 2.50017C24.5479 2.50017 28 8.7144 28 16.381C28 16.381 25.9623 19.8333 20.6644 20ZM9.51712 8.88106C8.15068 8.88106 7.07192 10.0715 7.07192 11.5239C7.07192 12.9763 8.17466 14.1667 9.51712 14.1667C10.8836 14.1667 11.9623 12.9763 11.9623 11.5239C11.9863 10.0715 10.8836 8.88106 9.51712 8.88106ZM18.2671 8.88106C16.9007 8.88106 15.8219 10.0715 15.8219 11.5239C15.8219 12.9763 16.9247 14.1667 18.2671 14.1667C19.6336 14.1667 20.7123 12.9763 20.7123 11.5239C20.7123 10.0715 19.6336 8.88106 18.2671 8.88106Z' 22 | ); 23 | } 24 | } 25 | 26 | // Login page QR code logo 27 | .qrCodeOverlay-qgtlTP { 28 | > img { 29 | content: url('https://discord.com/assets/36d4b341723daffd4a372e1b19591da1.png'); 30 | } 31 | } 32 | 33 | // Revert default avatars 34 | @each $original-src, $new-src in $default-avatar-map { 35 | [src*='#{$original-src}'] { 36 | content: url($new-src); 37 | } 38 | 39 | [style*='#{$original-src}'] { 40 | background-image: url($new-src) !important; 41 | } 42 | } 43 | 44 | #app-mount { 45 | // Revert stupidly ugly new reactions 46 | .reaction-1hd86g { 47 | background-color: var(--background-secondary); 48 | 49 | &:not(.reactionMe-wv5HKu) { 50 | &:hover { 51 | border-color: rgba(var(--kds-mango-yellow-rgb), 0.2); 52 | } 53 | 54 | &:active { 55 | // Less opaque interactive-active 56 | border-color: rgba(209, 41, 255, 0.2); 57 | } 58 | } 59 | } 60 | 61 | .reactionMe-wv5HKu { 62 | border-color: transparent; 63 | background-color: rgba(var(--kds-almost-cyan-rgb), 0.2); 64 | } 65 | 66 | // Revert nitro page banner 67 | .hero-EvfTTA { 68 | background-image: url('https://discord.com/assets/a821f6c69ee5729cec9e82246c2cd63a.svg'); 69 | } 70 | } -------------------------------------------------------------------------------- /source/extras/_hljs-styling.scss: -------------------------------------------------------------------------------- 1 | // ======================================================== \\ 2 | // \\ 3 | // PLEASE DON'T READ THIS CODE OR YOU WILL SUFFER \\ 4 | // \\ 5 | // ======================================================== \\ 6 | // ======================================================== \\ 7 | // \\ 8 | // PLEASE I'M BEGGING YOU FOR THE LOVE OF GOD \\ 9 | // \\ 10 | // ======================================================== \\ 11 | 12 | $targets: ( 13 | 'number', 14 | 'class', 15 | 'function', 16 | 'type', 17 | 'built_in', 18 | 'doctag', 19 | 'variable', 20 | 'params', 21 | 'title', 22 | 'regexp', 23 | 'keyword', 24 | 'subst', 25 | 'literal', 26 | 'string', 27 | 'comment', 28 | 'attr', 29 | 'attribute', 30 | 'meta', 31 | 'meta-keyword', 32 | 'link', 33 | 'strong', 34 | 'quote', 35 | 'section', 36 | 'code', 37 | 'emphasis', 38 | 'bullet', 39 | 'selector-class', 40 | 'selector-id', 41 | 'selector-attr', 42 | 'selector-pseudo', 43 | 'selector-tag', 44 | 'name', 45 | 'tag', 46 | 'addition', 47 | 'deletion' 48 | ); 49 | 50 | .powercord-codeblock-lang { 51 | color: var(--header-secondary); 52 | } 53 | 54 | .hljs, 55 | .codeLine-14BKbG { 56 | // General 57 | --number: rgb(255, 148, 111); 58 | --class: rgb(202, 175, 237); 59 | --function: var(--class); // () in class/func definition 60 | --type: var(--class-params); // {Number} in JSdoc 61 | --built_in: var(--class-params); // this, var (CSS), Math, filter 62 | --doctag: rgb(195, 142, 253); // @param, @return in JSDoc 63 | --variable: rgb(187, 187, 187); // $variable 64 | --params: var(--variable); // (<...args>) 65 | --title: rgb(125, 187, 209); // get () 66 | --regexp: var(--title); 67 | --keyword: rgb(255, 117, 188); // @import, print, console 68 | --subst: var(--keyword); // Template/f-string thingy 69 | --literal: rgb(245, 192, 86); // Booleans 70 | --string: rgb(126, 242, 174); 71 | --comment: rgb(113, 113, 113); 72 | --attr: rgb(207, 175, 250); // JSON keys, JS object destruct 73 | --attribute: rgb(143, 188, 143); // CSS properties 74 | 75 | // Meta 76 | --meta: rgb(245, 97, 116); // !important 77 | --meta-keyword: rgb(245, 66, 128); // <#define> CONST '5' 78 | 79 | // Markdown 80 | --link: rgb(140, 166, 189); 81 | --strong: var(--class-title); // Bold 82 | --quote: var(--literal); 83 | --section: rgb(68, 222, 207); 84 | --code: rgb(47, 185, 104); // Inline code 85 | --emphasis: var(--subst); // Italic 86 | --bullet: var(--kds-darker-reply-content); 87 | 88 | // CSS 89 | --selector-class: var(--class-title); 90 | --selector-id: rgb(74, 160, 110); 91 | --selector-attr: rgb(171, 224, 219); 92 | --selector-pseudo: rgb(168, 123, 219); // :not, :hover (not ::) 93 | --selector-tag: var(--kds-darker-reply-content); 94 | 95 | // HTML 96 | --name: rgb(255, 148, 111); // HTML tag name 97 | --tag: rgb(245, 97, 116, 0.8); // Punctuation in HTML tag 98 | 99 | // Diff 100 | --addition: var(--kds-radio-bar-green); 101 | --deletion: var(--kds-bright-orange-red); 102 | 103 | // Stupid two part cases 104 | --class-keyword: var(--number); // Foo 105 | --class-title: rgb(232, 110, 72); // class 106 | --class-params: rgb(255, 167, 211); 107 | --tag-attr: var(--selector-attr); // div ="className" 108 | --meta-string: rgb(126, 226, 136); // #define CONST <'5'> 109 | } 110 | 111 | .hljs { 112 | @each $target in $targets { 113 | &-#{$target} { 114 | color: var(--#{$target}); 115 | } 116 | } 117 | 118 | &-class { 119 | // .hljs-class .hljs-keyword 120 | .hljs-keyword { 121 | color: var(--class-keyword); 122 | } 123 | 124 | // .hljs-class .hljs-title 125 | .hljs-title { 126 | color: var(--class-title); 127 | } 128 | 129 | // .hljs-class .hljs-params 130 | .hljs-params { 131 | color: var(--class-params); 132 | } 133 | } 134 | 135 | // .hljs-tag .hljs-attr 136 | &-tag { 137 | .hljs-attr { 138 | color: var(--tag-attr); 139 | } 140 | } 141 | 142 | // .hljs .hljs-meta-string 143 | @at-root & &-meta-string { 144 | color: var(--meta-string); 145 | } 146 | } -------------------------------------------------------------------------------- /source/theme/app/inner/_layout.scss: -------------------------------------------------------------------------------- 1 | $-container-margin: 4px; 2 | $-container-radius: 10px; 3 | 4 | // ---------------------------- Notices ---------------------------- \\ 5 | .notice-3bPHh- { 6 | margin: 0 $-container-margin $-container-margin $-container-margin; // Yes 7 | border-radius: $-container-radius; 8 | 9 | &.notice-2X5hT5 { 10 | background-color: var(--kds-settings-smaller-header); 11 | } 12 | } 13 | 14 | // ---------------------------- Scrollers ---------------------------- \\ 15 | .auto-Ge5KZx { 16 | &::-webkit-scrollbar { 17 | width: 14px; 18 | 19 | &-track { 20 | background-color: transparent; 21 | } 22 | 23 | &-thumb { 24 | min-height: 47.5px; 25 | } 26 | } 27 | } 28 | 29 | // ---------------------------- Settings ---------------------------- \\ 30 | .sidebarRegionScroller-3MXcoP { // Left panel 31 | border-top-right-radius: $-container-radius; 32 | } 33 | 34 | .contentRegionScroller-26nc1e { // Right panel 35 | margin-left: $-container-margin; 36 | border-top-left-radius: $-container-radius; 37 | } 38 | 39 | .sidebarRegion-VFTUkN, // Left 40 | .contentRegion-3nDuYy { // Right 41 | background-color: var(--background-tertiary); 42 | } 43 | 44 | .customScroller-26gWhv { // Fix for audit logs 45 | margin-left: $-container-margin; 46 | border-top-left-radius: $-container-radius; 47 | background-color: var(--background-accent); 48 | } 49 | 50 | // ---------------------------- User area ---------------------------- \\ 51 | .panels-j1Uci_ { 52 | background-color: var(--background-tertiary); 53 | 54 | > div { 55 | margin-bottom: $-container-margin; 56 | border-radius: $-container-radius; 57 | background-color: var(--background-secondary-alt); 58 | 59 | &:first-child { 60 | margin-top: $-container-margin; 61 | } 62 | } 63 | 64 | .container-1giJp5, 65 | > .activityPanel-28dQGo { // VC box -> currently playing game 66 | border-bottom: none; 67 | } 68 | } 69 | 70 | // ---------------------------- Powercord Spotify ---------------------------- \\ 71 | #app-mount { 72 | .powercord-spotify { 73 | background-color: var(--background-tertiary); 74 | 75 | // This is really fucking gross 76 | &:not(.hover) { 77 | .spotify-extra-controls { 78 | + .spotify-seek { 79 | margin-top: $-container-margin + 10px; 80 | } 81 | } 82 | } 83 | 84 | &.hover { 85 | .spotify-seek { 86 | &, &-bar { 87 | padding-top: $-container-margin + 1px; 88 | } 89 | } 90 | } 91 | 92 | > .container-3baos1 { 93 | border-radius: inherit; 94 | background-color: var(--background-secondary-alt); 95 | } 96 | 97 | .spotify-extra-controls { 98 | border-bottom-right-radius: $-container-radius; 99 | border-bottom-left-radius: $-container-radius; 100 | background-color: var(--background-secondary-alt); 101 | } 102 | 103 | .spotify-seek { 104 | border-radius: $-container-radius; 105 | margin-top: $-container-margin + 1px; 106 | background-color: var(--background-secondary-alt); 107 | 108 | &-bar { 109 | transform: translateY(-5.2px); 110 | margin-top: $-container-margin / 2; 111 | margin-left: $-container-margin + 1.5px; 112 | margin-right: $-container-margin + 1.5px; 113 | 114 | &-cursor { 115 | width: 6px; 116 | height: 6px; 117 | top: 70%; 118 | } 119 | } 120 | } 121 | } 122 | } 123 | 124 | // ---------------------------- Sidebars ---------------------------- \\ 125 | .sidebar-2K8pFh { 126 | margin-left: $-container-margin; 127 | background-color: var(--background-tertiary); 128 | 129 | > .scrollerBase-289Jih, // Server discovery 130 | > .container-3w7J-x, // Guild channels 131 | > .privateChannels-1nO12o { // Private channels 132 | border-radius: $-container-radius; 133 | background-color: var(--background-secondary); 134 | } 135 | 136 | .header-2V-4Sw { // Guild header 137 | border-top-right-radius: $-container-radius; 138 | 139 | + .animatedContainer-1NSq4T { // Fix banner having squared corner 140 | border-top-right-radius: $-container-radius; 141 | } 142 | } 143 | } 144 | 145 | // ---------------------------- Right side containers ---------------------------- \\ 146 | .container-1D34oG, // Home page 147 | .container-1a3EgQ, // Stage discovery 148 | .applicationStore-1pNvnv, // Nitro page 149 | .pageWrapper-1PgVDX, // Server discovery 150 | .noChannel-3LgMRp { // No channels 151 | margin-left: $-container-margin; 152 | margin-bottom: $-container-margin; 153 | border-radius: $-container-radius 0 0 $-container-radius; 154 | background-color: var(--background-accent); // Check this 155 | } 156 | 157 | // ---------------------------- Server list ---------------------------- \\ 158 | .guilds-1SWlCJ { 159 | margin-left: $-container-margin; 160 | 161 | > .tree-2wKJdG { 162 | outline: none; // Fix yellow line appearing 163 | } 164 | 165 | .scroller-1Bvpku { 166 | margin-bottom: $-container-margin; 167 | border-radius: $-container-radius; 168 | padding-top: $-container-margin + 3px; 169 | background-color: var(--background-accent); 170 | } 171 | } 172 | 173 | // ---------------------------- Chat ---------------------------- \\ 174 | .chat-3bRxxu { 175 | @at-root #app-mount & { // Make up for thread container on right 176 | background-color: var(--background-tertiary); 177 | margin-bottom: $-container-margin; 178 | margin-left: $-container-margin + 1px; 179 | margin-right: $-container-margin + 1px; 180 | border-radius: $-container-radius 0 0 $-container-radius; 181 | } 182 | 183 | > .title-3qD0b- { 184 | border-top-right-radius: $-container-radius; 185 | } 186 | 187 | > .content-yTz4x3 { 188 | > .scrollerBase-289Jih { // NSFW warning page 189 | border-bottom-right-radius: $-container-radius; 190 | background-color: var(--background-accent); 191 | } 192 | } 193 | 194 | .chatContent-a9vAAp { // Normal 195 | border-bottom-right-radius: $-container-radius; 196 | background-color: var(--background-accent); 197 | 198 | > .messagesWrapper-1sRNjr { 199 | border-top-left-radius: $-container-radius; 200 | } 201 | } 202 | 203 | + .threadSidebar-1o3BTy { // Thread in split view 204 | margin-left: -1px; // Otherwise gap is too big 205 | margin-bottom: $-container-margin; 206 | } 207 | } 208 | 209 | // ---------------------------- Member list ---------------------------- \\ 210 | .members-1998pB { 211 | border-radius: $-container-radius - 2px; 212 | margin: $-container-margin 0 0 $-container-margin; 213 | } -------------------------------------------------------------------------------- /source/support/kaleidoscope.compiled.css: -------------------------------------------------------------------------------- 1 | @import url("https://nyri4.github.io/Discolored/main.css");@import url("https://mr-miner1.github.io/Better-Badges/src/compiled.css");@import url("https://Goose-Nest.github.io/GT-RevertRebrand/src/components/wordmark.css");@import url("https://spinfish.github.io/css-snippets/snippets/filled-roles.css");@import url("https://spinfish.github.io/css-snippets/snippets/bsi-radialstatus-typing.css");@import url("https://spinfish.github.io/css-snippets/snippets/compact-status-picker.css");.theme-dark,.theme-light,:root{--kds-settings-larger-header:rgb(193,0,242);--kds-settings-larger-header-rgb:193,0,242;--kds-discord-nitro-magenta:rgb(255,115,250);--kds-discord-nitro-magenta-rgb:255,115,250;--kds-reply-content:rgb(214,46,151);--kds-reply-content-rgb:214,46,151;--kds-bright-orange-red:rgb(255,42,0);--kds-bright-orange-red-rgb:255,42,0;--kds-radio-bar-orange:rgb(255,119,11);--kds-radio-bar-orange-rgb:255,119,11;--kds-mango-yellow:rgb(255,196,22);--kds-mango-yellow-rgb:255,196,22;--kds-mentioned-replying-bg:rgb(128,201,114);--kds-mentioned-replying-bg-rgb:128,201,114;--kds-radio-bar-green:rgb(0,162,63);--kds-radio-bar-green-rgb:0,162,63;--kds-spotify-dark-green:rgb(1,112,44);--kds-spotify-dark-green-rgb:1,112,44;--kds-number:rgb(1,206,206);--kds-number-rgb:1,206,206;--kds-almost-cyan:rgb(5,207,255);--kds-almost-cyan-rgb:5,207,255;--kds-category-name:rgb(157,217,255);--kds-category-name-rgb:157,217,255;--kds-settings-smaller-header:rgb(0,118,187);--kds-settings-smaller-header-rgb:0,118,187;--kds-dark-blue-popout-normal:rgb(1,15,40);--kds-dark-blue-popout-normal-rgb:1,15,40;--kds-dark-blue-popout-playing:rgb(13,10,58);--kds-dark-blue-popout-playing-rgb:13,10,58;--kds-streaming-violet:rgb(51,12,72);--kds-streaming-violet-rgb:51,12,72;--kds-message-hover:rgb(0,10,28);--kds-message-hover-rgb:0,10,28;--kds-spoiler-box:rgb(0,0,13);--kds-spoiler-box-rgb:0,0,13;--kds-light-grey:rgb(220,221,222);--kds-light-grey-rgb:220,221,222;--kds-greyish-blue:rgb(70,86,107);--kds-greyish-blue-rgb:70,86,107;--kds-darker-orange-red:rgb(192,34,9);--kds-darker-orange-red-rgb:192,34,9;--kds-darker-reply-content:rgb(160,37,121);--kds-darker-reply-content-rgb:160,37,121;--kds-light-pink-tick-slider:rgb(255,27,240,0.25);--kds-light-pink-tick-slider-rgb:255,27,240,0.25;--kds-darker-interactive-active:rgb(209,41,255);--kds-darker-interactive-active-rgb:209,41,255;--header-primary:var(--kds-light-grey);--background-accent:rgba(3,13,34,1);--background-primary:var(--background-accent);--background-secondary:rgba(1,11,30,1);--background-secondary-alt:rgba(0,9,21,1);--background-tertiary:rgba(0,5,15,1);--background-floating:var(--background-tertiary);--background-modifier-hover:rgba(3,9,27,1);--background-modifier-active:rgba(3,16,40,1);--background-modifier-selected:var(--background-modifier-active);--background-mobile-primary:var(--background-primary);--background-mobile-secondary:var(--background-secondary);--background-mentioned:rgba(var(--kds-mango-yellow-rgb),0.075);--text-link:rgba(62,200,255,1);--text-normal:rgba(255,27,240,1);--text-muted:rgba(182,182,182,1);--header-secondary:rgba(205,207,211,1);--channels-default:rgba(201,201,201,1);--channeltextarea-background:var(--background-secondary-alt);--interactive-normal:var(--kds-almost-cyan);--interactive-hover:var(--kds-mango-yellow);--interactive-active:rgba(209,41,255,1);--interactive-muted:rgba(48,52,61,1);--activity-card-background:var(--background-tertiary);--radio-group-dot-foreground:var(--interactive-normal);--brand-experiment:var(--kds-settings-smaller-header);--scrollbar-auto-track:transparent;--scrollbar-thin-thumb:var(--background-tertiary);--scrollbar-auto-thumb:var(--kds-category-name);--scrollbar-auto-scrollbar-color-thumb:var(--scrollbar-thin-thumb);--scrollbar-auto-scrollbar-color-track:var(--background-secondary);--offline-color:rgba(60,60,60,1)}.path-92Hmty{stroke:var(--interactive-normal)!important}.spinner-2enMB9 .wanderingCubesItem-WPXqao{background-color:var(--interactive-normal)}.popoutLoadingForeground-2mZT61{background-image:linear-gradient(90deg,var(--background-primary),var(--background-secondary),var(--background-primary))}.unreadMentionsBar-1Bu1dC.mention-1f5kbO{background-color:var(--kds-bright-orange-red)}.numberBadge-2s8kKX{background-color:var(--kds-bright-orange-red)!important}.textBadge-1iylP6[style*="359"]{background-color:var(--kds-bright-orange-red)!important}.textBadge-1iylP6.newBadge-1Is7Nf,.textBadge-1iylP6[style*="235"]{background-color:var(--kds-settings-smaller-header)!important}.profileBadge-2niAfJ:hover{cursor:pointer}.powercord-badge,.profileBadgeEarlySupporter-2ng_jL{transition:0.2s transform ease-in-out}.powercord-badge:hover,.profileBadgeEarlySupporter-2ng_jL:hover{transform:translateY(-1.5px)}.css-gvi9bl-control{border-color:black}.css-3vaxre-menu{border-color:var(--background-tertiary);background-color:var(--background-secondary);box-shadow:var(--background-secondary) 0px 1px 5px 0px}.quickSelect-3BxO0K>.quickSelectLabel-2r3iJ_{color:deeppink}#app-mount .quickSelectPopoutOption-opKBx9:hover{background-color:var(--background-primary)}#app-mount .quickSelectPopout-X1hvgV{background-color:var(--background-secondary-alt)}#app-mount .quickSelectPopout-X1hvgV>.selected{background-color:var(--background-modifier-selected)}#app-mount .quickSelectPopout-X1hvgV>.selected .check-2by_h9{height:14px;background:url("/assets/7b3ff12d16d96ca77345da9450986dc7.svg") no-repeat}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes imagine-using-light-mode{0%{border-color:red}50%{border-color:yellow}to{border-color:red}}.tutorialContainer-2sGCg9 .homeIcon-FuNwkv{width:30px;height:30px;position:absolute;color:var(--kds-light-grey)}.tutorialContainer-2sGCg9 .lowerBadge-29hYVK{border-radius:50%;box-shadow:0 0 0 4.5px var(--background-secondary)}.tutorialContainer-2sGCg9 .wrapper-1BJsBx{-webkit-clip-path:circle(50% at center);clip-path:circle(50% at center)}.tutorialContainer-2sGCg9 .wrapper-1BJsBx:before{content:"";width:100%;height:100%;position:absolute;background:url("https://raw.githubusercontent.com/spinfish/kaleidoscope/master/source/images/home_icon_background.svg") center/100% no-repeat;animation:rotation 10s linear infinite paused}.tutorialContainer-2sGCg9 .selected-bZ3Lue:before{animation-play-state:running}.inputDefault-_djjkz{border-color:var(--background-tertiary)}.inputDefault-_djjkz:hover{border-color:rgba(var(--kds-almost-cyan-rgb),0.5)}.inputDefault-_djjkz:focus{border-color:rgba(255,27,240,0.5)}.notice-3bPHh-{margin:0 4px 4px 4px;border-radius:10px}.notice-3bPHh-.notice-2X5hT5{background-color:var(--kds-settings-smaller-header)}.auto-Ge5KZx::-webkit-scrollbar{width:14px}.auto-Ge5KZx::-webkit-scrollbar-track{background-color:transparent}.auto-Ge5KZx::-webkit-scrollbar-thumb{min-height:47.5px}.sidebarRegionScroller-3MXcoP{border-top-right-radius:10px}.contentRegionScroller-26nc1e{margin-left:4px;border-top-left-radius:10px}.contentRegion-3nDuYy,.sidebarRegion-VFTUkN{background-color:var(--background-tertiary)}.customScroller-26gWhv{margin-left:4px;border-top-left-radius:10px;background-color:var(--background-accent)}.panels-j1Uci_{background-color:var(--background-tertiary)}.panels-j1Uci_>div{margin-bottom:4px;border-radius:10px;background-color:var(--background-secondary-alt)}.panels-j1Uci_>div:first-child{margin-top:4px}.panels-j1Uci_ .container-1giJp5,.panels-j1Uci_>.activityPanel-28dQGo{border-bottom:none}#app-mount .powercord-spotify{background-color:var(--background-tertiary)}#app-mount .powercord-spotify:not(.hover) .spotify-extra-controls+.spotify-seek{margin-top:14px}#app-mount .powercord-spotify.hover .spotify-seek,#app-mount .powercord-spotify.hover .spotify-seek-bar{padding-top:5px}#app-mount .powercord-spotify>.container-3baos1{border-radius:inherit;background-color:var(--background-secondary-alt)}#app-mount .powercord-spotify .spotify-extra-controls{border-bottom-right-radius:10px;border-bottom-left-radius:10px;background-color:var(--background-secondary-alt)}#app-mount .powercord-spotify .spotify-seek{border-radius:10px;margin-top:5px;background-color:var(--background-secondary-alt)}#app-mount .powercord-spotify .spotify-seek-bar{transform:translateY(-5.2px);margin-top:2px;margin-left:5.5px;margin-right:5.5px}#app-mount .powercord-spotify .spotify-seek-bar-cursor{width:6px;height:6px;top:70%}.sidebar-2K8pFh{margin-left:4px;background-color:var(--background-tertiary)}.sidebar-2K8pFh>.container-3w7J-x,.sidebar-2K8pFh>.privateChannels-1nO12o,.sidebar-2K8pFh>.scrollerBase-289Jih{border-radius:10px;background-color:var(--background-secondary)}.sidebar-2K8pFh .header-2V-4Sw{border-top-right-radius:10px}.sidebar-2K8pFh .header-2V-4Sw+.animatedContainer-1NSq4T{border-top-right-radius:10px}.applicationStore-1pNvnv,.container-1a3EgQ,.container-1D34oG,.noChannel-3LgMRp,.pageWrapper-1PgVDX{margin-left:4px;margin-bottom:4px;border-radius:10px 0 0 10px;background-color:var(--background-accent)}.guilds-1SWlCJ{margin-left:4px}.guilds-1SWlCJ>.tree-2wKJdG{outline:none}.guilds-1SWlCJ .scroller-1Bvpku{margin-bottom:4px;border-radius:10px;padding-top:7px;background-color:var(--background-accent)}#app-mount .chat-3bRxxu{background-color:var(--background-tertiary);margin-bottom:4px;margin-left:5px;margin-right:5px;border-radius:10px 0 0 10px}.chat-3bRxxu>.title-3qD0b-{border-top-right-radius:10px}.chat-3bRxxu>.content-yTz4x3>.scrollerBase-289Jih{border-bottom-right-radius:10px;background-color:var(--background-accent)}.chat-3bRxxu .chatContent-a9vAAp{border-bottom-right-radius:10px;background-color:var(--background-accent)}.chat-3bRxxu .chatContent-a9vAAp>.messagesWrapper-1sRNjr{border-top-left-radius:10px}.chat-3bRxxu+.threadSidebar-1o3BTy{margin-left:-1px;margin-bottom:4px}.members-1998pB{border-radius:8px;margin:4px 0 0 4px}.theme-light #app-mount:after{right:0;bottom:0;position:fixed;content:"You need to have dark theme enabled for this " "theme to work properly! To enable it, go to " "Settings -> Appearance.";background-color:var(--background-tertiary);border:2px solid;animation:imagine-using-light-mode 0.8s infinite;max-width:315px;line-height:normal;padding:15px 0 15px 60px;margin-right:15px;margin-bottom:15px;color:white;background-image:url("https://discord.com/assets/289673858e06dfa2e0e3a7ee610c3a30.svg");background-repeat:no-repeat;background-size:35px;background-position:10px center}#private-channels::-webkit-scrollbar{width:6px}#private-channels::-webkit-scrollbar-thumb{background-color:cornflowerblue}#private-channels .headerText-2F0828{color:var(--kds-almost-cyan)}#private-channels .clickable-1JJAn8{border-radius:10px}#private-channels .clickable-1JJAn8:hover{background-color:transparent}#private-channels .clickable-1JJAn8 .overflow-WK9Ogt{color:var(--kds-category-name)}#private-channels .layout-2DM8Md{border-radius:10px}#private-channels a[href="/channels/@me"],#private-channels a[href="/discovery"],#private-channels a[href="/store"]{margin-bottom:5px;background-color:var(--background-primary)}#app-mount .selected-bZ3Lue .acronym-2mOFsV{background-color:var(--kds-settings-smaller-header)}.circleIconButton-1QV--U{color:var(--kds-radio-bar-green);background-color:var(--background-secondary-alt)}.folderIconWrapper-1_bOZe[style*="rgba(88, 101, 242, 0.4)"]{background-color:rgba(var(--kds-settings-smaller-header-rgb),0.4)!important}.expandedFolderIconWrapper-Huv7rA{background-color:var(--background-primary)}.expandedFolderIconWrapper-Huv7rA>svg[style*="rgb(88, 101, 242)"]{color:var(--kds-settings-smaller-header)!important}.expandedFolderBackground-1cujaW:not(.collapsed-2ZrjoL){background-color:var(--background-primary);box-shadow:0 0 15px 5px var(--background-secondary-alt)}.winButton-iRh8-Z>svg{color:var(--windows-button-colour)}.winButton-iRh8-Z:hover{background-color:var(--windows-button-colour)}.winButton-iRh8-Z:hover>svg{color:white}.winButtonClose-1HsbF-{--windows-button-colour:var(--kds-bright-orange-red)}.winButtonMinMax-PBQ2gm:nth-child(3){--windows-button-colour:orange}.winButtonMinMax-PBQ2gm:nth-child(4){--windows-button-colour:var(--kds-radio-bar-green)}#app-mount .checkbox-1ix_J3{border-color:var(--kds-reply-content)}.checkbox-1ix_J3.checked-3_4uQ9{--control-brand-foreground:var(--kds-reply-content);background-color:rgba(var(--kds-reply-content-rgb),0.075)!important}.checkbox-1ix_J3.checked-3_4uQ9 path{fill:deeppink}.slider-1PF9SW .grabber-3mFHz2{border-color:var(--kds-mango-yellow);background-color:var(--kds-mango-yellow)}.slider-1PF9SW .bar-2Qqk5Z{background-color:var(--kds-reply-content)}.slider-1PF9SW .bar-2Qqk5Z .barFill-23-gu-{background-color:var(--kds-category-name)}.item-1tOPte{color:var(--popout-button-text)}.item-1tOPte:active:not(.hideInteraction-1iHO1O){color:white;background-color:var(--popout-button-active)}.item-1tOPte:active:not(.hideInteraction-1iHO1O) .icon-LYJorE{color:white}.item-1tOPte.focused-3afm-j{color:white;background-color:var(--popout-button-focused)}.item-1tOPte.focused-3afm-j .icon-LYJorE{color:white}#guild-header-popout-invite-people{--popout-button-text:var(--kds-number);--popout-button-focused:rgba(var(--kds-number-rgb),0.15);--popout-button-active:rgba(var(--kds-number-rgb),0.65)}#guild-header-popout-premium-subscribe{--popout-button-text:var(--kds-discord-nitro-magenta);--popout-button-focused:rgba(var(--kds-discord-nitro-magenta-rgb),0.15);--popout-button-active:rgba(var(--kds-discord-nitro-magenta-rgb),0.65)}.colorDefault-2K3EoJ:not(.colorDanger-2qLCe1){--popout-button-text:var(--kds-almost-cyan);--popout-button-focused:rgba(var(--kds-almost-cyan-rgb),0.15);--popout-button-active:rgba(var(--kds-almost-cyan-rgb),0.65)}.colorDanger-2qLCe1{color:var(--kds-bright-orange-red)}.colorDanger-2qLCe1.focused-3afm-j,.colorDanger-2qLCe1:active:not(.hideInteraction-1iHO1O){background-color:var(--kds-bright-orange-red)}.lookFilled-1Gx00P:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ){color:white;background-color:var(--fill-button-normal)}.lookFilled-1Gx00P:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ):not(:disabled):hover{background-color:var(--fill-button-hover)}.lookFilled-1Gx00P:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ):not(:disabled):active{background-color:var(--fill-button-active)}.lookFilled-1Gx00P:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ):disabled{opacity:0.2}.lookOutlined-3sRXeN:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ){color:var(--line-button-colour);background-color:transparent;border-color:var(--line-button-colour)}.lookOutlined-3sRXeN:not(.colorYellow-2JqYwt):not(.colorWhite-rEQuAQ):hover{background-color:var(--line-button-hover)}.colorBrand-3pXr91{--fill-button-normal:var(--kds-darker-reply-content);--fill-button-hover:rgba(var(--kds-darker-reply-content-rgb),0.85);--fill-button-active:rgba(var(--kds-darker-reply-content-rgb),0.7);--line-button-colour:var(--kds-darker-reply-content);--line-button-hover:rgba(var(--kds-darker-reply-content-rgb),0.075)}.colorGrey-2DXtkV,.colorPrimary-3b3xI6{--fill-button-normal:var(--kds-greyish-blue);--fill-button-hover:rgba(var(--kds-greyish-blue-rgb),0.85);--fill-button-active:rgba(var(--kds-greyish-blue-rgb),0.7);--line-button-colour:rgba(255,255,255,0.8);--line-button-hover:rgba(255,255,255,0.075)}.colorGreen-29iAKY{--fill-button-normal:var(--kds-spotify-dark-green);--fill-button-hover:rgba(var(--kds-spotify-dark-green-rgb),0.85);--fill-button-active:rgba(var(--kds-spotify-dark-green-rgb),0.7);--line-button-colour:var(--kds-radio-bar-green);--line-button-hover:rgba(var(--kds-radio-bar-green-rgb),0.075)}.actionRed-gYn8D3,.colorRed-1TFJan{--fill-button-normal:var(--kds-bright-orange-red);--fill-button-hover:rgba(var(--kds-bright-orange-red-rgb),0.85);--fill-button-active:rgba(var(--kds-bright-orange-red-rgb),0.7);--line-button-colour:var(--kds-darker-orange-red);--line-button-hover:rgba(var(--kds-darker-orange-red-rgb),0.075)}.selectedBrand-1UKrSX{background-color:var(--kds-darker-reply-content)}.selectedBrand-1UKrSX:hover{background-color:rgba(var(--kds-darker-reply-content-rgb),0.9)}#---new-messages-bar{top:8px;padding:7px;border-width:3px;border-color:rebeccapurple;border-top-left-radius:3px}#---new-messages-bar>.unreadPill-2HyYtt{top:-8px;background-color:rebeccapurple}#---new-messages-bar .unreadPillCapStroke-7rkHbg{fill:rebeccapurple;color:rebeccapurple}#---new-messages-bar>.content-1o0f9g{color:var(--text-normal);transform:translateY(-9px)}.barButtonBase-2uLO1z{color:var(--kds-almost-cyan)}.newMessagesBar-265mhP{top:-4px;height:33px;background-color:var(--background-secondary);transition:top 0.3s linear}.newMessagesBar-265mhP:hover{top:0px;background-color:var(--background-secondary-alt)}.jumpToPresentBar-G1R9s6{bottom:-4px;height:33px;background-color:var(--background-secondary);transition:bottom 0.3s linear}.jumpToPresentBar-G1R9s6:hover{bottom:0px;background-color:var(--background-secondary-alt)}.messagesErrorBar-nyJGU7{background-color:var(--kds-bright-orange-red)}.messagesErrorBar-nyJGU7>.barButtonBase-2uLO1z{color:white}#app-mount .invite-18yqGF{border:none;background-color:var(--background-secondary);box-shadow:0 0 1px 1px var(--background-secondary-alt)}#app-mount .invite-18yqGF .header-Hg_qNF{filter:brightness(175%)}#app-mount .invite-18yqGF .colorGrey-2DXtkV:disabled{background-color:var(--background-tertiary)}#app-mount .tile-2OwFgW{box-shadow:0 0 1px 1px var(--background-secondary-alt);background-color:var(--background-secondary-alt)}.giftCodeContainer-1fbmAS .invalidPoop-pnUbq7{background-color:var(--background-secondary)}.mention.wrapper-3WhCwL{color:var(--kds-number);background-color:rgba(var(--kds-number-rgb),0.1)}#app-mount .edited-3sfAzf,#app-mount .timestamp-3ZCmNB{color:var(--kds-mango-yellow)}#app-mount .repliedMessage-VokQwo:before{border-color:var(--background-tertiary)}#app-mount .replyBadge-r1su3o{background:transparent}#app-mount .replyIcon-1b4Xjp{width:20px;height:10px}#app-mount .replyIcon-1b4Xjp>path{fill:white}#app-mount .repliedTextPreview-2NBljf{color:var(--kds-reply-content)}#app-mount .repliedTextPreview-2NBljf:hover{color:var(--interactive-active)}.message-2qnXI6:hover:not(.mentioned-xhSam7):not(.replying-1x3H0T):not(.ephemeral-1PsL1r){background-color:var(--kds-message-hover)}.message-2qnXI6 .embedSpotify-tvxDCr{border-radius:6px}.mentioned-xhSam7:before{background-color:var(--kds-mango-yellow)}.mentioned-xhSam7.replying-1x3H0T{background-color:rgba(var(--kds-mentioned-replying-bg-rgb),0.075)}.mentioned-xhSam7.replying-1x3H0T:before{background:linear-gradient(to top,var(--kds-mango-yellow),var(--kds-reply-content),var(--interactive-active),var(--kds-number))}.ephemeral-1PsL1r,.replying-1x3H0T{background-color:rgba(var(--kds-number-rgb),0.075)}.ephemeral-1PsL1r:before,.replying-1x3H0T:before{background-color:var(--kds-number)}.wrapper-2aW0bm{background-color:transparent;box-shadow:none}.button-1ZiXG9{margin:0 2px;border-radius:5px;background-color:var(--background-tertiary)}.button-1ZiXG9:hover{background-color:var(--background-modifier-selected)}.button-1ZiXG9.dangerous-2r8KxV,.button-1ZiXG9.dangerous-2r8KxV:hover{color:var(--kds-bright-orange-red)}.icon-1kp3fr{filter:invert(0.95)}#app-mount .spoilerWarning-2aAZq1{background-color:var(--kds-spoiler-box)}#app-mount .spoilerText-3p6IlD{border-radius:6px}#app-mount .spoilerText-3p6IlD.hidden-HHr2R9{transition:background-color 0.25s;background-color:var(--kds-spoiler-box)}#app-mount .spoilerText-3p6IlD.hidden-HHr2R9:hover{background-color:var(--background-secondary-alt)}#app-mount .spoilerText-3p6IlD.hidden-HHr2R9:hover>.inlineContent-3ZjPuv{opacity:1}#app-mount .spoilerText-3p6IlD[aria-expanded=true]{background-color:var(--background-secondary)}#app-mount .spoilerText-3p6IlD>.inlineContent-3ZjPuv{padding:2px}.channelTextArea-rNsIhG .scrollableContainer-2NUZem{border-radius:10px}.channelTextArea-rNsIhG>.attachedBars-tZDmyV{--background-secondary:var(--background-primary)}.channelTextArea-rNsIhG .replyBar-1YLQ2F{border-radius:10px;margin-bottom:5px;background-color:var(--channeltextarea-background)}.channelTextArea-rNsIhG .replyBar-1YLQ2F .colorLink-2vG20E{color:var(--interactive-active)}.channelTextArea-rNsIhG .replyBar-1YLQ2F .colorMuted-HdFt4q{color:var(--kds-reply-content)}.channelTextArea-rNsIhG .replyBar-1YLQ2F .mentionButton-3710-W:hover{color:var(--interactive-hover)}.channelTextArea-rNsIhG .threadSuggestionBar-2ufK2Z{border-top:none;background-color:var(--channeltextarea-background);margin-top:0px;margin-bottom:5px;border-radius:10px}.channelTextArea-rNsIhG .pill-2pQByF{background-color:var(--background-primary)}.channelTextArea-rNsIhG .tabButton-1n4gNP>rect{fill:var(--kds-dark-blue-popout-playing)}.channelTextArea-rNsIhG .tabButton-1n4gNP>path[d^=M0]{display:none}.iconBadge-qZ4Ksk{background-color:var(--kds-bright-orange-red)}.toolbar-1t6TWx{height:34px;border-radius:8px 4px 4px 8px;background:var(--background-secondary-alt)}.toolbar-1t6TWx .anchor-3Z-8Bb{order:-1}.toolbar-1t6TWx .iconWrapper-2OrFZ1{--text-muted:var(--interactive-normal)}.search-36MZv-,.search-36MZv-+.iconWrapper-2OrFZ1[aria-label$="!"]{order:-1}.updateIconForeground-3tnNZn{fill:var(--kds-radio-bar-green)}.icon-3cZ1F_{height:24px;width:24px;color:var(--interactive-normal);cursor:pointer}.iconContainer-O4O2CN{bottom:3px}.search-36MZv-{margin-left:0px}.searchBar-3dMhjb{width:28px;background:none;transition:width 0.6s ease-in-out}.focused-31_ccS .searchBar-3dMhjb,.open-6_Y_aH .searchBar-3dMhjb,.searchBar-3dMhjb:hover{width:240px;margin-left:5px;background:var(--background-tertiary)}#app-mount .mediaBarGrabber-1FqnbN{background-color:var(--interactive-hover)}.buffer-26XPkd{background-color:transparent}.mediaBarProgress-1xaPtl,.mediaBarProgress-1xaPtl:after,.mediaBarProgress-1xaPtl:before{background-color:var(--kds-almost-cyan)}.mediaBarWrapper-3D7r67,.mediaBarWrapper-3D7r67:after,.mediaBarWrapper-3D7r67:before{background-color:deeppink}.avatarSpeaking-2IGMRN{box-shadow:0 0 0 2px var(--kds-radio-bar-green) inset,0 0 0 3px var(--background-secondary) inset}.qualitySettingsContainer-1gOtRJ{border-color:var(--background-tertiary)}#app-mount .bottomControls-lIJyYL .centerIcon-2G6o-T{color:white}.bottomControls-lIJyYL .colorable-1bkp8v{background-color:var(--call-button-normal)}.bottomControls-lIJyYL .colorable-1bkp8v:hover{background-color:var(--call-button-hover)}.bottomControls-lIJyYL .primaryDark-3mSFDl{--call-button-normal:var(--background-primary);--call-button-hover:var(--kds-dark-blue-popout-normal)}.bottomControls-lIJyYL .white-3GPOIp{--call-button-normal:var(--kds-darker-reply-content);--call-button-hover:var(--kds-reply-content)}.bottomControls-lIJyYL .red-33-Lnk{--call-button-normal:var(--kds-darker-orange-red);--call-button-hover:var(--kds-bright-orange-red)}.bottomControls-lIJyYL .directionDown-26e7eE,.bottomControls-lIJyYL .slash-33-IMF{color:white}#app-mount .callContainer-36WRfH{background-color:var(--background-secondary-alt)}#app-mount .callContainer-36WRfH .status-1WEaea{background-color:var(--kds-bright-orange-red)}.callContainer-36WRfH .background-ujHpbY{background-color:var(--background-tertiary)!important}.callContainer-36WRfH .speaking-WDn8Wm{box-shadow:0 0 0 2px var(--kds-radio-bar-green) inset,0 0 0 3px var(--background-floating) inset}.background-ujHpbY{background-color:var(--background-secondary-alt)!important}.liveQualityIndicator-3XCjEU{background-color:var(--background-primary)!important}#app-mount .participantsButton-KYW-IW,#app-mount .participantsButton-KYW-IW:hover{background-color:var(--background-primary)}#app-mount .activity-3jdl2U .lookOutlined-3sRXeN{--line-button-colour:white;--line-button-hover:rgba(white,0.5)}#app-mount .streamPreview-2-WUWT{background-color:var(--background-tertiary)}#app-mount .previewContainer-12UlHl{background-color:inherit}.root-2sELX6,.spinner-2UBgbJ{background:var(--background-tertiary)}.tile-2naSqK{background-color:var(--background-secondary)}#app-mount .auditLog-3jNbM6{border:1px solid black}.auditLog-3jNbM6 .headerExpanded-CUEwZ5{box-shadow:none;background-color:var(--background-secondary)}.auditLog-3jNbM6 .headerClickable-2IVFo9,.auditLog-3jNbM6 .headerDefault-1wrJcN{background-color:var(--background-modifier-hover)}.auditLog-3jNbM6 .divider-1pnAR2{background-color:black}.auditLog-3jNbM6>.changeDetails-bk98pu{background-color:transparent}#app-mount .container-VSDcQc>.sectionTag-pXyto9{background-color:var(--background-secondary-alt)}.container-VSDcQc .autocompleteShadow-iiGWFU{box-shadow:0 0 0 1px var(--background-tertiary)}.container-VSDcQc .autocompleteArrow-Zxoy9H,.container-VSDcQc>.header-2bNvm4{box-shadow:inherit;background-color:var(--background-tertiary)}.group-1WdBVp{border-color:black}.item-1yAxl1{color:var(--permission-colour)}.item-1yAxl1:not(.selected-2YhbGh){cursor:pointer}.item-1yAxl1.selected-2YhbGh{background-color:var(--permission-colour)}.deny-3nAuT6{--permission-colour:var(--kds-bright-orange-red)}.passthrough-1c2ewQ{--permission-colour:orange}.allow-1PzSY3{--permission-colour:var(--kds-radio-bar-green)}.iconBackgroundTierNone-3ZkOsa{--background-accent:var(--kds-dark-blue-popout-normal)}.guildIconContainer-2FW_iA .flowerStarContainer-3zDVtj:not(.iconBackgroundTierNone-3ZkOsa){--brand-experiment:var(--kds-settings-smaller-header);--background-accent:rgba(var(--kds-reply-content-rgb),0.5)}.animatedContainer-1NSq4T{border-top-right-radius:10px}.topic-TCb_qw{color:var(--kds-reply-content)}.name-3l27Hl,.wrapper-PY0fhH{color:var(--kds-category-name)}.unread-2lAfLh{background-color:var(--kds-number)}.channelName-2YrOjO,.icon-1DeIlz{color:deeppink}.containerDefault--pIXnN:hover .channelName-2YrOjO,.containerDefault--pIXnN:hover .icon-1DeIlz{color:var(--interactive-hover)}.modeMuted-onO3r- .channelName-2YrOjO,.modeMuted-onO3r- .icon-1DeIlz{color:var(--interactive-muted)}.modeSelected-346R90 .channelName-2YrOjO,.modeSelected-346R90 .icon-1DeIlz{color:var(--interactive-active)}.modeUnread-1qO3K1 .channelName-2YrOjO,.modeUnread-1qO3K1 .icon-1DeIlz{color:var(--kds-number)}.content-1x5b-n{border-radius:10px}.userLimit-3aerPX>.wrapper-2tAnRe{color:var(--kds-number)}.userLimit-3aerPX .users-3kndPl{width:27px;padding:0 4px 0 8px;background-color:var(--background-secondary-alt)}.userLimit-3aerPX .total-i6us2n{width:26px;padding:0 6px 0 4px;background-color:black}.userLimit-3aerPX .total-i6us2n:after{border:none}.checklist-3Y6Fqp,.checklistContainer-mFJZEJ{border:1px solid black}.checklist-3Y6Fqp .checklistIcon-6Kez2J,.checklistContainer-mFJZEJ .checklistIcon-6Kez2J{margin-top:2.5px}.checklist-3Y6Fqp>.separator-1COOpU,.checklist-3Y6Fqp>.separator-Hx_3SF,.checklistContainer-mFJZEJ>.separator-1COOpU,.checklistContainer-mFJZEJ>.separator-Hx_3SF{opacity:0.9;background-color:black}#app-mount .emojiInput-1aLNse{background-color:var(--background-secondary)}#app-mount .emojiInput-1aLNse:hover{border-color:rgba(var(--kds-almost-cyan-rgb),0.25)}#app-mount .emojiInput-1aLNse:focus{border-color:rgba(255,27,240,0.5)}#app-mount .colorPickerCustom-2CWBn2{border:none;box-shadow:0 0 1px 1px black;background-color:var(--background-secondary)}.elevationHigh-1PneE4{background-color:var(--background-secondary-alt)!important}.unreadBar-3t3sYc{box-shadow:0 0 0 1px var(--background-tertiary);background-color:var(--background-tertiary);transition:0.3s background-color linear}.unreadBar-3t3sYc:hover{background-color:var(--background-modifier-selected)}.unreadBar-3t3sYc>.text-2e2ZyG{color:var(--kds-almost-cyan)}.scroller-3__pG8{box-shadow:0 0 2px 2px var(--background-tertiary);background-color:var(--background-secondary)}.scroller-3__pG8 .title-2_aCTw{color:var(--kds-category-name)}.scroller-3__pG8 .button-3k0cO7{background-color:var(--background-modifier-selected)}.scroller-3__pG8 .button-3k0cO7:hover{color:var(--kds-mango-yellow);background-color:rgba(0,0,0,0.4)}.theme-light .container-UC8Ug1{border-color:black;background-color:var(--kds-message-hover)}.theme-light .container-UC8Ug1:hover{background-color:var(--background-modifier-selected)}.theme-light .sampleLink-2NLvZg{color:deeppink}.theme-light .footer-2gL1pp{border-top:1px solid black}.theme-light .footer-2gL1pp .sizeMin-1mJd1x{color:var(--kds-number)}.theme-light .footerTitle-2CYZch{color:var(--kds-almost-cyan);margin-bottom:16px}.theme-light .footerButton-ayFTfX.lookFilled-1Gx00P{box-shadow:0 0 0 1px black;background-color:var(--kds-message-hover)}#app-mount .theme-light .footerButton-ayFTfX.lookFilled-1Gx00P:hover{color:var(--kds-mango-yellow);background-color:var(--toast-box-shadow)}.theme-light .footerButton-ayFTfX.lookFilled-1Gx00P:hover:after,.theme-light .footerButton-ayFTfX.lookFilled-1Gx00P:hover:before{content:"bruh"}.theme-light .uploadIcon-2IFzZU circle{fill:var(--kds-settings-smaller-header)}#app-mount .modal-yWgWj-,#app-mount .root-1gCeng{box-shadow:0 0 0 1px black;background-color:var(--background-secondary)}#app-mount .modal-yWgWj- .footer-2gL1pp,#app-mount .modal-yWgWj- .message-2qRu38,#app-mount .root-1gCeng .footer-2gL1pp,#app-mount .root-1gCeng .message-2qRu38{box-shadow:inherit;background-color:var(--background-secondary-alt)}#app-mount .separator-2-RRj_{box-shadow:0 1px 0 0 var(--background-tertiary),0 1px 2px 0 black}#app-mount .keyboardShortcutsModal-3piNz7{background-color:var(--background-primary)}#app-mount .keyboardShortcutsModal-3piNz7 .divider-3573oO{display:none}#app-mount .keyboardShortcutsModal-3piNz7 .content-2Add9f{font-style:italic;font-weight:bold;text-transform:uppercase;color:var(--kds-number)}#app-mount .keyboardShortcutsModal-3piNz7 .content-2Add9f:after{content:"!!!"}#app-mount .keyboardShortcutsModal-3piNz7>.modalSubtitle-1Pj5nv{color:deeppink;border-bottom:1px solid black}#app-mount .keyboardShortcutsModal-3piNz7>.modalSubtitle-1Pj5nv:after{content:" :D"}#app-mount .wrapper-1sSZUt{color:var(--kds-settings-smaller-header)}#app-mount .keybindDescription-2RDbC2{color:var(--kds-category-name)}#app-mount .keybindShortcut-1BD6Z1>span{margin:3px;padding:5px;box-shadow:0 0 0 1px black;background-color:var(--background-modifier-selected)}.quickswitcher-3JagVE{box-shadow:0 0 2px 2px var(--background-tertiary);background-color:var(--background-secondary-alt)}.quickswitcher-3JagVE>.scrollerBase-289Jih{background-color:inherit}.quickswitcher-3JagVE>.scrollerBase-289Jih::-webkit-scrollbar{width:10px}.quickswitcher-3JagVE>.input-2VB9rf{border:1px solid black;background-color:var(--kds-dark-blue-popout-normal)}.quickswitcher-3JagVE .header-13MUnb{color:rgba(var(--kds-number-rgb),0.95)}.quickswitcher-3JagVE .resultFocused-3aIoYe{background-color:rgba(var(--kds-darker-interactive-active-rgb),0.05)}.quickswitcher-3JagVE .resultFocused-3aIoYe:before{content:"";position:absolute;height:100%;border:1px solid var(--interactive-active)}.quickswitcher-3JagVE .badge-36LyGI{background-color:red;width:16px!important;padding:inherit;margin-left:1px;border-radius:8px;line-height:16px;font-weight:600;text-align:center}.root-1gCeng>.scroller-1-nKid{width:auto;background-color:var(--background-secondary-alt)}.root-1gCeng>.scroller-1-nKid .size14-e6ZScH{padding-right:4px}.root-1gCeng>.reactors-Blmlhw{width:85%;background-color:inherit}.root-1gCeng .reactionDefault-GBA58K:hover{background-color:var(--background-modifier-hover)}.root-1gCeng .reactionSelected-1pqISm{background-color:var(--background-primary)}.root-1gCeng .reactor-3UBcOI{box-shadow:none}#app-mount .item-3T2z1R{border-color:black}#app-mount .selectorButton-EEUWed:hover{background-color:transparent}#app-mount .selectorButton-EEUWed.selectorButtonSelected-t5V9On{background-color:var(--kds-darker-reply-content)}.tile-2w4k5N:hover .sourceThumbnail-27dolk{box-shadow:0 0 0 2px var(--kds-number) inset}.sourceThumbnail-27dolk.selected-1nOkyc{box-shadow:0 0 0 2px var(--kds-settings-smaller-header) inset}.filename-ovv3c5{color:var(--kds-number);margin-bottom:6px}#app-mount .footer-3mqk7D{box-shadow:none;background-color:var(--background-secondary-alt)}#app-mount .icon-kyxXVr:not(.image-2yrs5j){filter:invert(0.95)}#app-mount .uploadModal-2ifh8j{box-shadow:0 0 2px 2px var(--background-tertiary);background-color:var(--background-primary)}#app-mount .uploadModal-2ifh8j .scrollableContainer-2NUZem{background-color:rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.3);transition:0.2s ease-in-out;transition-property:border-color,background-color}#app-mount .uploadModal-2ifh8j .scrollableContainer-2NUZem:hover{border-color:#040405;background-color:#030c1f}#app-mount .bgScale-1otPtc{background-color:var(--background-primary)}#app-mount .inner-3nWsbo{border-color:var(--kds-almost-cyan)}#app-mount .uploadDropModal-2kTwbc .title-2Vtl4y{color:var(--kds-category-name)}#app-mount .uploadDropModal-2kTwbc strong{color:var(--interactive-active)}#app-mount .uploadDropModal-2kTwbc .instructions-2Du9gG{color:var(--header-primary)}.emojis-3mSQwp .emojiSad-1iG7c0{background-image:url("https://discord.com/assets/08b9e24092ee146b9e071e89049c1055.svg")}.emojis-3mSQwp .emojiNeutral-1AAukj{background-image:url("https://discord.com/assets/fc5c8aa09047ef94d2c380891feff0f4.svg")}.emojis-3mSQwp .emojiHappy-1umapU{background-image:url("https://discord.com/assets/626aaed496ac12bbdb68a86b46871a1f.svg")}.scroller-2ZPeAD{border-left:none}.peopleColumn-29fq28{background-color:var(--background-accent)}.peopleColumn-29fq28 .peopleListItem-2nzedh{border-radius:10px;padding:0 15px;margin-bottom:4px;background-color:var(--background-secondary-alt);border:1px solid var(--background-secondary-alt);transition-duration:0.2s;transition-timing-function:linear}#app-mount .itemCard-v9viV7{border:none;box-shadow:0 0 0 1px black}#app-mount .itemCard-v9viV7 .body-1ld4H7{background-color:inherit}#app-mount .itemCard-v9viV7 .section-2gLsgF{margin-top:7.5px;background-color:var(--background-secondary)}#app-mount .itemCard-v9viV7 .separator-XqIyoz{display:none}#app-mount .itemCard-v9viV7.interactive-3B9GmY:not(.active-1xchHY):hover{background-color:rgba(0,0,0,0.75)}#app-mount .itemCard-v9viV7.active-1xchHY{background-color:var(--background-tertiary)}.splashBackground-1FRCko .image-2jyRAK.loaded-3PtF_J{content:url("https://raw.githubusercontent.com/spinfish/kaleidoscope/master/source/images/login_background.png")}.splashBackground-1FRCko .canvas-3XuBXe,.splashBackground-1FRCko .fallbackImage-31Sk4m.visible-JD5pR1{display:none}.wrapper-3nSjSv{background-image:linear-gradient(to right,var(--interactive-normal),var(--interactive-active),deeppink)}.tier1-1ttHRY.banner-3Kac2g{border-radius:8px;background-image:linear-gradient(to right,#a764ed,#e292aa)}.tier1-1ttHRY.banner-3Kac2g .colorBrand-3pXr91{color:var(--kds-dark-blue-popout-normal)}.hero-EvfTTA .lookInverted-2D7oAl{color:var(--kds-settings-larger-header)}#app-mount .tierBody-3aUxuc,#app-mount .tierBody-16Chc9{font-weight:550;border:1px solid black;color:var(--text-normal)}#app-mount .moreSubscribers-XxaiVS,#app-mount .subscribersPopout-3tW0Y9{border:1px solid var(--background-tertiary);background-color:var(--background-secondary-alt)}#app-mount .perksModalContentWrapper-2HU6uL{background-color:var(--background-primary)}#app-mount .perksModalContentWrapper-2HU6uL h3:not(.headingTier1-K4ha7e){color:var(--kds-category-name)}#app-mount .subscribersPopout-3tW0Y9{grid-gap:12px}#app-mount .barBackground-2EEiLw{background-color:var(--background-tertiary)}#app-mount .background-3xPPFc{color:var(--background-tertiary)}#app-mount .tierHeaderUnlocked-1n-OTI,#app-mount .tierHeaderUnlocked-3lTDnP{background-image:linear-gradient(to right,var(--interactive-normal),var(--interactive-active),deeppink)}#app-mount .tierUnlocked-2H6ULo,#app-mount .tierUnlocked-25K6Kv{color:rebeccapurple;background:white}#app-mount .tierHeaderLocked-1s2JJz,#app-mount .tierHeaderLocked-3S508x{border:1px black;border-style:solid solid none solid;border-top-left-radius:6px;border-top-right-radius:6px;background-color:var(--background-tertiary)}#app-mount .tierMarkerBackground-3q29am{background-color:var(--background-secondary-alt)}#app-mount .selectedTier-1JkO7i .tierMarkerBackground-3q29am{filter:brightness(125%);background-color:var(--kds-dark-blue-popout-normal)}#app-mount .tierMarkerInProgress-24LMzJ{border:1px solid var(--background-tertiary);background-color:var(--kds-message-hover)!important}#app-mount .tierInProgress-3mBoXq{background-color:var(--background-tertiary)}#app-mount .tierLock-3CSxSX{color:var(--kds-greyish-blue)}#app-mount .tierBody-16Chc9{background-color:var(--background-secondary-alt)}#app-mount .tierBody-3aUxuc{background-color:var(--background-secondary)}#app-mount .tierBody-3aUxuc>.perks-32J1d0{color:var(--kds-reply-content)}#app-mount .unlocked-251xRB{color:var(--kds-radio-bar-green)}#app-mount .perk-2WeBWW{background-color:var(--background-secondary-alt)}#app-mount .divider-25_-sM,#app-mount .divider-Uf0Wob{margin:20px 0;background:none}#app-mount .pageWrapper-1PgVDX{background-color:var(--background-primary)}#app-mount .categoryItem-1QIroW{color:var(--kds-almost-cyan)}#app-mount .selectedCategoryItem-FHKU_o{color:var(--interactive-active)}#app-mount .selectedCategoryItem-FHKU_o>.itemInner-gPkiWb{background-color:rgba(4,20,69,0.65)}#app-mount .discoverHeader-Ijkm_M{color:var(--kds-settings-smaller-header)}#app-mount .guildListSection-2CS8vH .card-3DjzTQ{box-shadow:0 0 0 1px black}#app-mount .guildListSection-2CS8vH>.wrapper-1sSZUt{color:var(--kds-category-name)}#app-mount .autocomplete-1vrmpx{background-color:var(--background-secondary-alt)}.autocomplete-1vrmpx .selected-1Tbx07{background-color:var(--background-primary)}.autocomplete-1vrmpx .categoryHeader-O1zU94{border-radius:0 0 4px 4px;background-color:var(--background-tertiary)}.autocomplete-1vrmpx .option-1B5ZV8{background-color:var(--background-tertiary)}.autocomplete-1vrmpx .active-2awTSY{background-color:var(--kds-darker-reply-content)!important}#app-mount .searchAnswer-3Dz2-q,#app-mount .searchFilter-2ESiM3{color:var(--text-normal);background-color:var(--background-secondary)}#app-mount .datePicker--XZbmJ{background-color:rgba(var(--kds-almost-cyan-rgb),0.015);box-shadow:0 0 0 5px rgba(var(--kds-almost-cyan-rgb),0.2) inset;background:url("https://media.discordapp.net/attachments/678012423067926539/842665461127970816/lily.png") center/cover no-repeat}#app-mount .datePicker--XZbmJ:before{content:"";position:absolute;width:100%;height:100%;opacity:0.5;background-color:var(--background-primary)}#app-mount .datePickerHint-3Q1Udw{z-index:0;margin:auto;border-top-color:rgba(128,128,128,0.25)}#app-mount .hintValue-29ny8Z{background-color:var(--kds-darker-reply-content)}#app-mount .react-datepicker{background-color:inherit;left:65px}#app-mount .react-datepicker__header{background-color:inherit}#app-mount .react-datepicker__current-month{color:deeppink;border:none;font-weight:bold;font-size:150%}#app-mount .react-datepicker__navigation--next,#app-mount .react-datepicker__navigation--previous{border-color:black}#app-mount .react-datepicker__day{border-color:black;filter:brightness(150%);color:var(--kds-category-name);background-color:var(--background-secondary)}#app-mount .react-datepicker__day:hover:not(.react-datepicker__day--disabled){font-weight:800;color:var(--kds-mango-yellow);background-color:var(--background-secondary-alt)}#app-mount .react-datepicker__day-name{font-weight:700;color:#2f022e}#app-mount .react-datepicker__day--outside-month{filter:brightness(105%)}#app-mount .react-datepicker__day--selected:after{background-color:var(--kds-darker-reply-content)}#app-mount .react-datepicker__day--disabled,#app-mount .react-datepicker__day--disabled:hover{background-color:#01101b;filter:brightness(85%);cursor:not-allowed}#app-mount .categoryFadeBlurple-1j72_A{background-color:rgba(var(--kds-almost-cyan-rgb),0.5)}#app-mount .emptyHintCard-2mUdMe{background-color:rgba(var(--kds-greyish-blue-rgb),0.35)}#app-mount .result-3w1ZcL:hover:after{box-shadow:0 0 0 2px var(--kds-almost-cyan) inset,0 0 0 3px var(--background-primary) inset}#app-mount .result-3w1ZcL[style*=background-color]{background-color:#000a2d!important}#app-mount .result-3w1ZcL[style*="rgb(24, 25, 28)"]{background-color:var(--background-tertiary)!important}.gifFavoriteButton-3Zycl7{color:var(--interactive-normal)}.gifFavoriteButton-3Zycl7.selected-1mBDsA,.gifFavoriteButton-3Zycl7:hover{color:var(--interactive-hover)}.gifFavoriteButton-3Zycl7:after{border-color:var(--kds-mango-yellow)}#app-mount .contentWarningPopout-n5JsIs{box-shadow:0 2px 5px 0 var(--background-tertiary);background-color:var(--background-secondary-alt)}#app-mount .contentWarningPopout-n5JsIs .icon-2RSfUw path{fill:var(--kds-almost-cyan)}#app-mount .contentWarningPopout-n5JsIs>.footer-3N9rgh{background-color:var(--background-secondary)}#app-mount .contentWarningPopout-n5JsIs>.footer-3N9rgh>.colorStandard-2KCXvj{color:deeppink}.messagesPopoutWrap-1MQ1bW,.recentMentionsPopout-3rCiI6{width:550px;margin-top:5px;max-height:775px!important}.messagesPopoutWrap-1MQ1bW{left:87px}.recentMentionsPopout-3rCiI6{left:8px}.searchResultsWrap-3-pOjs{width:550px}.searchResultsWrap-3-pOjs .pageButton-2ruNwd.activeButton-rvKcqq{background-color:var(--kds-settings-smaller-header)}.searchResultsWrap-3-pOjs .pageButton-2ruNwd.activeButton-rvKcqq:hover{background-color:var(--kds-offline-colour)}#app-mount .guildPopout-3CgKqR{background-color:var(--background-secondary-alt);box-shadow:0 2px 5px 0 var(--background-tertiary)}.container-3XJ8ns{border-color:var(--background-tertiary)}.overflowRolesPopout-140n9i .overflowRolesPopoutArrow-2O66oH,.overflowRolesPopout-140n9i.popoutBottom-2BJWty,.overflowRolesPopout-140n9i.popoutTop-1WcJ06{box-shadow:0 0 0 1px black;background-color:var(--background-secondary-alt)}.overflowRolesPopout-140n9i .overflowRolesPopoutHeaderText-1SW-y3{color:var(--kds-almost-cyan)}.overflowRolesPopout-140n9i .overflowRolesPopoutHeaderIcon-6PNEZA path{fill:var(--kds-almost-cyan)}#app-mount .container-2x5lvQ{box-shadow:0 0 10px 2px var(--background-secondary-alt)}#app-mount .container-2x5lvQ>.header-2C89wJ{background-color:var(--background-tertiary)}#app-mount .container-2x5lvQ>section{background-color:var(--background-secondary-alt)}#search-results{margin-top:5px;width:450px!important;background-color:var(--background-secondary);box-shadow:0 0 0 1px var(--background-tertiary),0 2px 10px 0 rgba(0,0,0,0.2)}#search-results>.queryContainer-RKFJW-{border-bottom-color:var(--background-tertiary)}#search-results>.focused-2bY0OD{background-color:var(--background-secondary-alt)}#search-results>.focused-2bY0OD span{color:var(--kds-mango-yellow);background-color:var(--background-modifier-selected)}#search-results .searchResultChannelIcon-1DnTme,#search-results strong{color:var(--kds-category-name)}#search-results .header-2N-gMV{font-weight:625;color:var(--kds-settings-smaller-header)}#search-results .resultsGroup-r_nuzN:before{display:none}#search-results .queryText-3xoOY7{font-weight:bold;color:var(--interactive-active)}#search-results .queryText-3xoOY7 strong{color:#b9bbbe}#search-results .option-96V44q:after{background:transparent}#search-results .selected-rZcOL-{background-color:var(--background-secondary-alt)}#search-results .selected-rZcOL-:before{padding-left:10px;background-color:inherit;filter:brightness(40%)}#search-results .displayedNick-3xxvzU{color:var(--text-normal)}.searchResultsWrap-3-pOjs{width:fit-content}#search-results[data-jump-section=global]{box-shadow:none}#search-results[data-jump-section=global] .searchResult-9tQ1uo{overflow:auto;background-color:var(--background-modifier-selected)}#search-results[data-jump-section=global] .searchResult-9tQ1uo::-webkit-scrollbar{height:5px}#search-results[data-jump-section=global] .searchResult-9tQ1uo::-webkit-scrollbar-thumb{border-radius:inherit;background-color:var(--background-tertiary)}#search-results[data-jump-section=global] .channelName-1JRO3C{padding:3px;border-radius:8px;background-color:var(--background-modifier-selected)}#search-results[data-jump-section=global] .channelName-1JRO3C:hover{background-color:var(--background-primary)}.powercord .githubModel .back-outfile{border:none!important;box-shadow:0 0 0 1px black}.powercord .powercord-product-license-modal{color:var(--header-secondary)}.powercord .powercord-product-license-modal h4{color:var(--kds-settings-smaller-header)}.powercord .powercord-product-license-modal span{color:var(--text-normal)}.powercord .powercord-product-license-modal span:before{width:7px;background-color:var(--powercord-license-dot-colour)!important}.powercord .permissions{--powercord-license-dot-colour:var(--kds-radio-bar-green)}.powercord .limitations{--powercord-license-dot-colour:var(--kds-bright-orange-red)}.powercord .conditions{--powercord-license-dot-colour:var(--kds-almost-cyan)}.powercord .powercord-toast{filter:brightness(120%);--toast-background:var(--background-secondary);--toast-header:var(--background-tertiary);--toast-contents:var(--background-primary);--toast-box-shadow:rgba(0,0,0,0.2);--toast-border:var(--background-secondary-alt)}.powercord .powercord-toast .header{color:var(--kds-category-name)}.powercord .powercord-toast .header .icon{color:var(--kds-settings-larger-header)}.powercord .powercord-toast .colorBrand-3pXr91{border:1px solid var(--kds-almost-cyan);background-color:transparent;color:var(--kds-almost-cyan)}.powercord .powercord-toast .colorBrand-3pXr91:hover{background-color:rgba(var(--kds-almost-cyan-rgb),0.075)!important}#app-mount .button-2CgfFz{box-shadow:0 0 0 1px black;background-color:var(--background-tertiary)}#app-mount .card-3Qj_Yx{border-color:var(--background-tertiary);background-color:var(--background-secondary-alt)}#app-mount .card-FDVird{box-shadow:none}#app-mount .card-FDVird:before{border-color:black;background-color:var(--background-secondary-alt)}.divider-3wNib3{border-color:black!important}.header-2RyJ0Y{color:var(--kds-settings-smaller-header)}.h2-2gWE-o.defaultColor-1_ajX0{color:var(--kds-settings-larger-header)}.radioBar-bMNUI-{border-width:4px}.radioBar-bMNUI-[style*="139"]{--radio-bar-accent-color:var(--kds-radio-bar-green)!important}.radioBar-bMNUI-[style*="37"]{--radio-bar-accent-color:var(--kds-mango-yellow)!important}.radioBar-bMNUI-[style*="21"]{--radio-bar-accent-color:var(--kds-radio-bar-orange)!important}.radioBar-bMNUI-[style*="359"]{--radio-bar-accent-color:var(--kds-bright-orange-red)!important}.children-rWhLdy>div:first-child .radioBar-bMNUI-:not([style*="--radio"]){border-left-style:solid;border-color:rgba(165,179,231,0.35)}.container-3auIfb{background-color:var(--kds-light-pink-tick-slider)!important}.container-3auIfb path{fill:black}.container-3auIfb rect{fill:var(--kds-light-grey)}.premiumTabItem-1QTfBr,.serverBoostTabItem-2hFTIN{color:cyan!important}.premiumTabItem-1QTfBr:hover,.serverBoostTabItem-2hFTIN:hover{background-color:rgba(0,255,255,0.075)!important}.premiumTabItem-1QTfBr.selected-3s45Ha,.premiumTabItem-1QTfBr:active,.serverBoostTabItem-2hFTIN.selected-3s45Ha,.serverBoostTabItem-2hFTIN:active{color:white!important;background-color:rgba(0,255,255,0.6)!important}.premiumTabItem-1QTfBr.selected-3s45Ha path,.premiumTabItem-1QTfBr:active path,.serverBoostTabItem-2hFTIN.selected-3s45Ha path,.serverBoostTabItem-2hFTIN:active path{fill:white}.item-PXvHYJ.themed-OHr7kt[style*="359"]{color:red!important}.item-PXvHYJ.themed-OHr7kt[style*="359"]:hover{background-color:rgba(255,0,0,0.075)!important}.item-PXvHYJ.themed-OHr7kt[style*="359"].selected-3s45Ha,.item-PXvHYJ.themed-OHr7kt[style*="359"]:active{color:white!important;background-color:rgba(255,0,0,0.9)!important}#app-mount .premiumIndicator-1XvbfM{background-color:var(--kds-settings-larger-header)}.paymentHistory-2FXzro .paymentPane-3bwJ6A{border:1px solid black}.paymentHistory-2FXzro .paginator-166-09,.paymentHistory-2FXzro .paymentRow-2e7VM6{border:none;background-color:var(--background-secondary)}.paymentHistory-2FXzro .scrollerBase-289Jih{width:665px;border:1px black;border-style:solid none solid}.paymentHistory-2FXzro .gameIcon-gg34Dz{background-image:url("https://discord.com/assets/386884eecd36164487505ddfbac35a9d.svg")!important}.paymentHistory-2FXzro .summaryInfo-2QFKUg>.date-2Qr15l{color:var(--kds-mango-yellow)}.paymentHistory-2FXzro .summaryInfo-2QFKUg>.description-RQzS-K{color:var(--kds-settings-smaller-header);font-weight:bold}.paymentHistory-2FXzro .summaryInfo-2QFKUg>.amount-ukM6w-{color:deeppink;font-weight:bold}.paymentHistory-2FXzro .hoverablePayment-Yc6mK7:hover{background-color:var(--background-tertiary)}.paymentHistory-2FXzro .expandedInfo-3kfShd{background-color:var(--background-secondary-alt)}.paymentHistory-2FXzro .expandedInfo-3kfShd .paymentText-2vaF7U{color:var(--text-normal)}.paymentHistory-2FXzro .paymentHeader-3QlZQi,.paymentHistory-2FXzro .refundSubHeader-3hp-GM{color:var(--kds-category-name)}#app-mount .nowPlaying-284llR{background-color:#028e4e}#app-mount .notDetected-33MY4s{background-color:var(--kds-greyish-blue)}#app-mount .addGamePopout-2RY8Ju.elevationBorderHigh-2WYJ09{box-shadow:0 0 0 2px var(--background-tertiary);background-color:var(--background-secondary-alt)}#app-mount .game-1ipmAa .gameNameInput-385LoS:hover{border-color:rgba(var(--kds-almost-cyan-rgb),0.25);background-color:var(--background-secondary)}#app-mount .game-1ipmAa .gameNameInput-385LoS:focus{border-color:rgba(255,27,240,0.5);background-color:var(--background-secondary)}.userPopout-xaxa6l{--text-normal:var(--header-secondary);--background-floating:var(--background-secondary);box-shadow:0 0 3px 1px var(--background-tertiary)}.userPopout-xaxa6l .popoutBanner-19WKGg{background-color:inherit!important}.userPopout-xaxa6l>.headerNormal-3KXFBt,.userPopout-xaxa6l>.headerTop-3vNv-a{background-color:var(--kds-dark-blue-popout-playing)}.userPopout-xaxa6l .avatar-37jOim{--background-floating:var(--kds-dark-blue-popout-playing);border-width:4px}.userPopout-xaxa6l .avatarHint-2A3RNb{top:4px;left:4px}.userPopout-xaxa6l .customStatus-oN4ZZY{display:flex;padding:2px 0 16px 12px;background-color:var(--kds-dark-blue-popout-playing)}.userPopout-xaxa6l .customStatus-oN4ZZY>.emoji{width:100px;height:100px;margin-top:8px}.userPopout-xaxa6l .customStatus-oN4ZZY>.emoji+.customStatusText-1vtUsN{margin:auto;max-width:150px;text-align:center}.userPopout-xaxa6l .aboutMeSection-1Fw5Ia{margin-top:16px}.userPopout-xaxa6l .bodyInnerWrapper-26fQXj{margin-top:12px}.userPopout-xaxa6l>.scrollerBase-289Jih{padding-left:0;padding-right:0!important}.userPopout-xaxa6l>.scrollerBase-289Jih::-webkit-scrollbar{display:none}.userPopout-xaxa6l>.scrollerBase-289Jih.scrollerSeparator-3K3Qdv{box-shadow:none}.userPopout-xaxa6l>.scrollerBase-289Jih>.divider-ewBQKj{display:none}.userPopout-xaxa6l>.scrollerBase-289Jih>.divider-ewBQKj~div{padding-left:16px;padding-right:16px}.roleName-32vpEy{color:var(--header-secondary)}.botTag-2WPJ74{color:white;background-color:deeppink}.body-r6_QPy>.scrollerBase-289Jih[style*="padding-right: 0px"]{background-color:var(--background-primary)}.topSection-y3p-_D{--text-normal:var(--header-secondary);background-color:var(--kds-dark-blue-popout-playing)}.topSection-y3p-_D .nameTagWithCustomStatus-2kkfrQ{margin-bottom:6px}.topSection-y3p-_D .tabBarContainer-37hZsr{border-bottom:none}.topSection-y3p-_D .avatar-AvHqJA{border-color:transparent;background-color:transparent}.topSection-y3p-_D .banner-2QYc2d{background-color:inherit!important}.topSection-y3p-_D .banner-2QYc2d:not(.bannerPremium-2hSAwz){height:80px}.topSection-y3p-_D+.noTabBar-3ZjPNR{border-top:none}.newProfileActivityStyles{--text-normal:var(--header-secondary)}.newProfileActivityStyles .horizontal-1ae9ci .fullWidth-1orjjo{width:33px;margin-left:5px}.newProfileActivityStyles .horizontal-1ae9ci>:not(:first-child):not(.disabledButtonWrapper-3wH6-b){margin-left:4px}.newProfileActivityStyles .spotifyButtonLogo-3uT57D{left:7.7px;position:absolute}.connectedAccount-2Jb-Z0{cursor:pointer;border-color:black;background-color:var(--kds-message-hover)}.connectedAccount-2Jb-Z0:hover{background-color:var(--background-modifier-active)}.connectedAccount-2Jb-Z0 .flowerStar-1GeTsn>path{fill:var(--kds-reply-content)}.connectedAccount-2Jb-Z0 .childContainer-1wxZNh path{fill:black}.accountProfileCard-1XCH88{--background-tertiary:var(--background-secondary-alt)}.accountProfileCard-1XCH88>.settingsBanner-15-pZk:not([style*=background-image]){width:0;height:30px}.accountProfileCard-1XCH88>.settingsBanner-15-pZk:not([style*=background-image])+.userInfo-iCloHO>.avatar-1uQSZT{top:9px}.accountProfileCard-1XCH88>.settingsBanner-15-pZk:not([style*=background-image])+.userInfo-iCloHO>.avatar-1uQSZT~div{transform:translateY(-15px)}.profileBannerPreview-3_l0Wd>.popoutInfo-pKbpvG{--text-normal:var(--header-secondary)}.profileBannerPreview-3_l0Wd>.bannerNormal-22rPhb{background:inherit!important}.notificationSettings-1NQKPR .wrapper-3jrx9n{border-color:var(--kds-number)}.notificationSettings-1NQKPR .option-n0icdO:not(.selected-mKYnfr):hover{background-color:rgba(var(--kds-almost-cyan-rgb),0.6)}.notificationSettings-1NQKPR .selected-mKYnfr{background-color:var(--kds-number)}.previewOverlayInner-1WXURq{background-color:var(--background-secondary)}#app-mount .manual-36Evg9 .fill-3eUagR{background-color:rgba(0,0,0,0.45)}.manual-36Evg9 [style*="38"]{background-color:var(--kds-almost-cyan)!important}.manual-36Evg9 [style*="139"]{background-color:var(--kds-radio-bar-green)!important}#app-mount .previewOverlay-2O7_KC{border:1px solid black}#app-mount .userSettingsVoice-iwdUCU .notches-1sAcEM{background-image:none}#app-mount .userSettingsVoice-iwdUCU .progress-1IcQ3A{background-color:var(--background-secondary)}#app-mount .userSettingsVoice-iwdUCU .container-3PXSwK{height:10px;border-top-left-radius:10px;border-bottom-left-radius:4px;background:linear-gradient(to right,var(--kds-darker-reply-content),var(--kds-almost-cyan))!important}#app-mount .speaking-2bFhO4{background-color:var(--kds-radio-bar-green)}.popoutContainer-1MXdqN{width:320px}.emojiSection-3Fb9ix .jumboable{width:100%;height:120px}.emojiSection-3Fb9ix .colorStandard-2KCXvj{text-align:center}.customStatus-1COQYu{overflow:auto}.customStatus-1COQYu::-webkit-scrollbar{height:4px}.customStatus-1COQYu::-webkit-scrollbar-track{border-radius:4px;margin-right:15px;background-color:rgba(0,0,0,0.15)}.customStatus-1COQYu::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--header-secondary)}.customStatus-1COQYu>span{padding-right:15px}.powercord-codeblock-lang{color:var(--header-secondary)}.codeLine-14BKbG,.hljs{--number:rgb(255,148,111);--class:rgb(202,175,237);--function:var(--class);--type:var(--class-params);--built_in:var(--class-params);--doctag:rgb(195,142,253);--variable:rgb(187,187,187);--params:var(--variable);--title:rgb(125,187,209);--regexp:var(--title);--keyword:rgb(255,117,188);--subst:var(--keyword);--literal:rgb(245,192,86);--string:rgb(126,242,174);--comment:rgb(113,113,113);--attr:rgb(207,175,250);--attribute:rgb(143,188,143);--meta:rgb(245,97,116);--meta-keyword:rgb(245,66,128);--link:rgb(140,166,189);--strong:var(--class-title);--quote:var(--literal);--section:rgb(68,222,207);--code:rgb(47,185,104);--emphasis:var(--subst);--bullet:var(--kds-darker-reply-content);--selector-class:var(--class-title);--selector-id:rgb(74,160,110);--selector-attr:rgb(171,224,219);--selector-pseudo:rgb(168,123,219);--selector-tag:var(--kds-darker-reply-content);--name:rgb(255,148,111);--tag:rgb(245,97,116,0.8);--addition:var(--kds-radio-bar-green);--deletion:var(--kds-bright-orange-red);--class-keyword:var(--number);--class-title:rgb(232,110,72);--class-params:rgb(255,167,211);--tag-attr:var(--selector-attr);--meta-string:rgb(126,226,136)}.hljs-number{color:var(--number)}.hljs-class{color:var(--class)}.hljs-function{color:var(--function)}.hljs-type{color:var(--type)}.hljs-built_in{color:var(--built_in)}.hljs-doctag{color:var(--doctag)}.hljs-variable{color:var(--variable)}.hljs-params{color:var(--params)}.hljs-title{color:var(--title)}.hljs-regexp{color:var(--regexp)}.hljs-keyword{color:var(--keyword)}.hljs-subst{color:var(--subst)}.hljs-literal{color:var(--literal)}.hljs-string{color:var(--string)}.hljs-comment{color:var(--comment)}.hljs-attr{color:var(--attr)}.hljs-attribute{color:var(--attribute)}.hljs-meta{color:var(--meta)}.hljs-meta-keyword{color:var(--meta-keyword)}.hljs-link{color:var(--link)}.hljs-strong{color:var(--strong)}.hljs-quote{color:var(--quote)}.hljs-section{color:var(--section)}.hljs-code{color:var(--code)}.hljs-emphasis{color:var(--emphasis)}.hljs-bullet{color:var(--bullet)}.hljs-selector-class{color:var(--selector-class)}.hljs-selector-id{color:var(--selector-id)}.hljs-selector-attr{color:var(--selector-attr)}.hljs-selector-pseudo{color:var(--selector-pseudo)}.hljs-selector-tag{color:var(--selector-tag)}.hljs-name{color:var(--name)}.hljs-tag{color:var(--tag)}.hljs-addition{color:var(--addition)}.hljs-deletion{color:var(--deletion)}.hljs-class .hljs-keyword{color:var(--class-keyword)}.hljs-class .hljs-title{color:var(--class-title)}.hljs-class .hljs-params{color:var(--class-params)}.hljs-tag .hljs-attr{color:var(--tag-attr)}.hljs .hljs-meta-string{color:var(--meta-string)}.reactionTooltipContent-2TwEIL{display:block;text-align:center}.reactionTooltipContent-2TwEIL>.reactionTooltipEmoji-3LG0v8{width:100%;height:110px;margin-bottom:9px}:root{--font-display:var(--font-family)!important}.homeIcon-FuNwkv>path{d:path("M20.6644 20C20.6644 20 19.8014 18.9762 19.0822 18.0714C22.2226 17.1905 23.4212 15.2381 23.4212 15.2381C22.4384 15.881 21.5034 16.3334 20.6644 16.6429C19.4658 17.1429 18.3151 17.4762 17.1884 17.6667C14.887 18.0953 12.7774 17.9762 10.9795 17.6429C9.61301 17.381 8.43836 17 7.45548 16.6191C6.90411 16.4048 6.30479 16.1429 5.70548 15.8096C5.63356 15.7619 5.56164 15.7381 5.48973 15.6905C5.44178 15.6667 5.41781 15.6429 5.39384 15.6191C4.96233 15.381 4.7226 15.2143 4.7226 15.2143C4.7226 15.2143 5.87329 17.1191 8.91781 18.0238C8.19863 18.9286 7.31164 20 7.31164 20C2.0137 19.8333 0 16.381 0 16.381C0 8.7144 3.45205 2.50017 3.45205 2.50017C6.90411 -0.07123 10.1884 0.000197861 10.1884 0.000197861L10.4281 0.285909C6.11301 1.52399 4.12329 3.40493 4.12329 3.40493C4.12329 3.40493 4.65068 3.11921 5.53767 2.71446C8.10274 1.59542 10.1404 1.2859 10.9795 1.21447C11.1233 1.19066 11.2432 1.16685 11.387 1.16685C12.8493 0.976379 14.5034 0.92876 16.2295 1.11923C18.5068 1.38114 20.9521 2.0478 23.4452 3.40493C23.4452 3.40493 21.5514 1.61923 17.476 0.381146L17.8116 0.000197861C17.8116 0.000197861 21.0959 -0.07123 24.5479 2.50017C24.5479 2.50017 28 8.7144 28 16.381C28 16.381 25.9623 19.8333 20.6644 20ZM9.51712 8.88106C8.15068 8.88106 7.07192 10.0715 7.07192 11.5239C7.07192 12.9763 8.17466 14.1667 9.51712 14.1667C10.8836 14.1667 11.9623 12.9763 11.9623 11.5239C11.9863 10.0715 10.8836 8.88106 9.51712 8.88106ZM18.2671 8.88106C16.9007 8.88106 15.8219 10.0715 15.8219 11.5239C15.8219 12.9763 16.9247 14.1667 18.2671 14.1667C19.6336 14.1667 20.7123 12.9763 20.7123 11.5239C20.7123 10.0715 19.6336 8.88106 18.2671 8.88106Z")}.qrCodeOverlay-qgtlTP>img{content:url("https://discord.com/assets/36d4b341723daffd4a372e1b19591da1.png")}[src*="3c6ccb83716d1e4fb91d3082f6b21d77"]{content:url("https://discordapp.com/assets/1cbd08c76f8af6dddce02c5138971129.png")}[style*="3c6ccb83716d1e4fb91d3082f6b21d77"]{background-image:url("https://discordapp.com/assets/1cbd08c76f8af6dddce02c5138971129.png")!important}[src*="6f26ddd1bf59740c536d2274bb834a05"]{content:url("https://discordapp.com/assets/0e291f67c9274a1abdddeb3fd919cbaa.png")}[style*="6f26ddd1bf59740c536d2274bb834a05"]{background-image:url("https://discordapp.com/assets/0e291f67c9274a1abdddeb3fd919cbaa.png")!important}[src*="7c8f476123d28d103efe381543274c25"]{content:url("https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png")}[style*="7c8f476123d28d103efe381543274c25"]{background-image:url("https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png")!important}[src*="1f0bfc0865d324c2587920a7d80c609b"]{content:url("https://discordapp.com/assets/6debd47ed13483642cf09e832ed0bc1b.png")}[style*="1f0bfc0865d324c2587920a7d80c609b"]{background-image:url("https://discordapp.com/assets/6debd47ed13483642cf09e832ed0bc1b.png")!important}[src*=c09a43a372ba81e3018c3151d4ed4773]{content:url("https://discordapp.com/assets/322c936a8c8be1b803cd94861bdfa868.png")}[style*=c09a43a372ba81e3018c3151d4ed4773]{background-image:url("https://discordapp.com/assets/322c936a8c8be1b803cd94861bdfa868.png")!important}[src*=c6a249645d46209f337279cd2ca998c7]{content:url("https://discordapp.com/assets/6debd47ed13483642cf09e832ed0bc1b.png")}[style*=c6a249645d46209f337279cd2ca998c7]{background-image:url("https://discordapp.com/assets/6debd47ed13483642cf09e832ed0bc1b.png")!important}#app-mount .reaction-1hd86g{background-color:var(--background-secondary)}#app-mount .reaction-1hd86g:not(.reactionMe-wv5HKu):hover{border-color:rgba(var(--kds-mango-yellow-rgb),0.2)}#app-mount .reaction-1hd86g:not(.reactionMe-wv5HKu):active{border-color:rgba(209,41,255,0.2)}#app-mount .reactionMe-wv5HKu{border-color:transparent;background-color:rgba(var(--kds-almost-cyan-rgb),0.2)}#app-mount .hero-EvfTTA{background-image:url("https://discord.com/assets/a821f6c69ee5729cec9e82246c2cd63a.svg")}:root{--kds-online-colour:var(--bsi-online-color,rgb(29,185,84));--kds-dnd-colour:var(--bsi-dnd-color,rgb(255,42,0));--kds-idle-colour:var(--bsi-idle-color,rgb(250,166,26));--kds-streaming-colour:var(--bsi-streaming-color,rgb(109,20,158));--kds-offline-colour:var(--bsi-offline-color,rgb(7,134,130));--kds-invisible-colour:var(--bsi-invisible-color,rgb(66,65,65))}rect[fill*="359"]{fill:var(--kds-dnd-colour)}rect[fill*="38"]{fill:var(--kds-idle-colour)}rect[fill*="139"]{fill:var(--kds-online-colour)}rect[fill*="262"]{fill:var(--kds-streaming-colour)}rect[fill*="214"]{fill:var(--kds-offline-colour)}foreignObject[mask*=dnd] .status-1AY8sU:not([style*=rgb]){background-color:var(--kds-dnd-colour)!important}foreignObject[mask*=idle] .status-1AY8sU:not([style*=rgb]){background-color:var(--kds-idle-colour)!important}foreignObject[mask*=online] .status-1AY8sU:not([style*=rgb]){background-color:var(--kds-online-colour)!important}foreignObject[mask*=streaming] .status-1AY8sU:not([style*=rgb]){background-color:var(--kds-streaming-colour)!important}foreignObject[mask*=offline] .status-1AY8sU:not([style*=rgb]){background-color:var(--kds-offline-colour)!important}.avatar-SmRMf2[aria-label$="Do not disturb"]{--speaking-box-shadow-colour:var(--kds-dnd-colour)}.avatar-SmRMf2[aria-label$=Idle]{--speaking-box-shadow-colour:var(--kds-idle-colour)}.avatar-SmRMf2[aria-label$=Online]{--speaking-box-shadow-colour:var(--kds-online-colour)}.avatar-SmRMf2[aria-label$=Streaming]{--speaking-box-shadow-colour:var(--kds-streaming-colour)}.avatar-SmRMf2[aria-label$=Invisible]{--speaking-box-shadow-colour:var(--kds-invisible-colour)}.avatar-SmRMf2 .avatarSpeaking-2c8-9i{box-shadow:0 0 0 2px var(--speaking-box-shadow-colour) inset,0 0 0 3px var(--background-secondary) inset}.status-1XNdyw:after{font-weight:bold;text-transform:uppercase;padding-left:8px;content:attr(aria-label)}.status-1XNdyw[aria-label="Do not disturb"]:after{color:var(--kds-dnd-colour)}.status-1XNdyw[aria-label=Idle]:after{color:var(--kds-idle-colour)}.status-1XNdyw[aria-label=Online]:after{color:var(--kds-online-colour)}.status-1XNdyw[aria-label=Streaming]:after{color:var(--kds-streaming-colour)}.status-1XNdyw[aria-label=Offline]:after{color:var(--kds-offline-colour)}#status-picker-dnd{--status-colour:var(--kds-dnd-colour)}#status-picker-idle{--status-colour:var(--kds-idle-colour)}#status-picker-online{--status-colour:var(--kds-online-colour)}#status-picker-invisible{--status-colour:var(--kds-invisible-colour)}.note-1oo11U .textarea-2r0oV8,.note-367eZJ .textarea-2r0oV8{filter:blur(5px);color:var(--text-normal);transition:filter 0.35s cubic-bezier(0.2,0.11,0,1)}.note-1oo11U .textarea-2r0oV8::placeholder,.note-367eZJ .textarea-2r0oV8::placeholder{color:var(--kds-almost-cyan)}.note-1oo11U .textarea-2r0oV8:hover,.note-367eZJ .textarea-2r0oV8:hover{filter:none}.note-1oo11U .textarea-2r0oV8:hover::placeholder,.note-367eZJ .textarea-2r0oV8:hover::placeholder{color:var(--interactive-hover)}.note-1oo11U .textarea-2r0oV8:focus,.note-367eZJ .textarea-2r0oV8:focus{filter:none}.note-1oo11U .textarea-2r0oV8:focus::placeholder,.note-367eZJ .textarea-2r0oV8:focus::placeholder{color:var(--interactive-active)} --------------------------------------------------------------------------------