├── .gitignore ├── .husky └── pre-commit ├── .lintstagedrc.json ├── .stylelintrc.json ├── LICENSE.md ├── README.md ├── TODO.md ├── _config.yml ├── amethyst.theme.css ├── css └── base.css ├── img ├── icons │ ├── accessibility.svg │ ├── account.svg │ ├── activityprivacy.svg │ ├── advanced.svg │ ├── analytics.svg │ ├── appearance.svg │ ├── apps.svg │ ├── audit.svg │ ├── automod.svg │ ├── automodmessage.svg │ ├── bans.svg │ ├── betterdiscord.svg │ ├── billing.svg │ ├── boosts.svg │ ├── changelog.svg │ ├── community.svg │ ├── connections.svg │ ├── custom.svg │ ├── delete.svg │ ├── developer.svg │ ├── discovery.svg │ ├── dismissable.svg │ ├── emotes.svg │ ├── experiments.svg │ ├── games.svg │ ├── gift.svg │ ├── hotspots.svg │ ├── hypesquad.svg │ ├── integrations.svg │ ├── invites.svg │ ├── keybinds.svg │ ├── language.svg │ ├── library.svg │ ├── logout.svg │ ├── members.svg │ ├── nitro.svg │ ├── notifications.svg │ ├── overlay.svg │ ├── overview.svg │ ├── partner.svg │ ├── party.svg │ ├── paymentmodals.svg │ ├── pluginrepo.svg │ ├── plugins.svg │ ├── premium.svg │ ├── privacy.svg │ ├── profile.svg │ ├── questionmark.svg │ ├── roles.svg │ ├── rules.svg │ ├── sessions.svg │ ├── settings.svg │ ├── stickers.svg │ ├── streamermode.svg │ ├── subscriptions.svg │ ├── template.svg │ ├── text.svg │ ├── themerepo.svg │ ├── themes.svg │ ├── threads.svg │ ├── updatecheck.svg │ ├── vanityurl.svg │ ├── voice.svg │ ├── welcome.svg │ ├── widgets.svg │ └── windows.svg └── preview.png ├── package-lock.json ├── package.json ├── scss ├── base.scss ├── utils │ ├── _maps.scss │ ├── _mixins.scss │ └── _vars.scss └── views │ ├── _app.scss │ ├── _call.scss │ ├── _channel.scss │ ├── _forum.scss │ ├── _guild.scss │ ├── _home.scss │ ├── _profiles.scss │ ├── _settings.scss │ ├── app │ ├── _backgrounds.scss │ ├── _badges-tags.scss │ ├── _header.scss │ ├── _modals-menus.scss │ ├── _server-discovery.scss │ ├── _sidebar.scss │ ├── _student-hub.scss │ ├── _toolbars-tooltips.scss │ ├── modals-menus │ │ ├── _emoji-picker.scss │ │ ├── _inbox-popout.scss │ │ └── _scrollers.scss │ └── toolbars-tooltips │ │ ├── _top-toolbar.scss │ │ └── top-toolbar │ │ └── _search.scss │ ├── channel │ ├── _attached-bars.scss │ ├── _message-form.scss │ ├── _messages.scss │ └── _threads.scss │ ├── forum │ ├── _post.scss │ ├── _search.scss │ └── _sidebar.scss │ ├── guild │ └── _sidebar.scss │ ├── home │ ├── _direct-messages.scss │ ├── _dm-call.scss │ ├── _home-pages.scss │ └── home-pages │ │ └── _message-requests.scss │ ├── profiles │ ├── _connected-accounts.scss │ ├── _popout-profile.scss │ └── _profile-modal.scss │ └── settings │ └── _settings-icons.scss └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # MacOS System Files 2 | .DS_Store 3 | 4 | **/node_modules 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.scss": ["yarn stylelint --fix", "yarn compile", "git add *.css"] 3 | } 4 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-scss" 4 | ], 5 | "extends": [ 6 | "stylelint-config-standard-scss" 7 | ], 8 | "ignoreFiles": [ 9 | "css/*.css" 10 | ], 11 | "rules": { 12 | "at-rule-no-unknown": null, 13 | "scss/at-rule-no-unknown": true, 14 | "scss/selector-no-redundant-nesting-selector": true, 15 | "scss/selector-nest-combinators": null, 16 | "scss/at-if-closing-brace-newline-after": "always-last-in-chain", 17 | "at-rule-empty-line-before": "never", 18 | "custom-property-empty-line-before": "never", 19 | "scss/double-slash-comment-empty-line-before": "always", 20 | "scss/double-slash-comment-whitespace-inside": "always", 21 | "scss/dollar-variable-pattern": null, 22 | "scss/operator-no-unspaced": true, 23 | "scss/no-global-function-names": null, 24 | "max-line-length": null, 25 | "value-keyword-case": null, 26 | "selector-class-pattern": null, 27 | "no-descending-specificity": null, 28 | "selector-pseudo-class-no-unknown": null, 29 | "string-quotes": "single", 30 | "selector-pseudo-element-colon-notation": "single", 31 | "shorthand-property-no-redundant-values": true, 32 | "color-hex-length": "long", 33 | "color-hex-case": "lower", 34 | "color-no-invalid-hex": true, 35 | "block-no-empty": true, 36 | "comment-no-empty": true, 37 | "alpha-value-notation": "number", 38 | "color-function-notation": "legacy", 39 | "selector-type-case": "lower", 40 | "selector-list-comma-newline-after": "always", 41 | "rule-empty-line-before": "never", 42 | "comment-empty-line-before": "always", 43 | "comment-whitespace-inside": "always", 44 | "number-no-trailing-zeros": true, 45 | "unit-case": "lower", 46 | "declaration-empty-line-before": "never", 47 | "declaration-block-semicolon-newline-before": "never-multi-line", 48 | "declaration-block-semicolon-space-after": "always-single-line", 49 | "declaration-block-semicolon-space-before": "never", 50 | "value-no-vendor-prefix": null, 51 | "property-no-vendor-prefix": null, 52 | "indentation": [2, { 53 | "indentInsideParens": "twice", 54 | "except": ["param"] 55 | }] 56 | }, 57 | "fix": true 58 | } 59 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 kiosion 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

Amethyst

3 |
4 | 5 | Amethyst is a dark, minimal, modern rework of Discord's UI that touches (almost) everything. It includes a darker, purple-y-er colour scheme, many UI tweaks, and lots of quality-of-life changes (e.g., hidden nitro gift buttons, upsells, reordered UI elements, increased contrast) 6 | 7 | ## Previews 🔎 8 | Amethyst theme preview screenshot 9 | 10 | ## Install 🎨 11 | [Download](https://github.com/kiosion/Amethyst/releases/latest/download/amethyst.theme.css) the theme and move `amethyst.theme.css` into your clients' themes folder. Amethyst should be recognised & supported by most clients, although it's only been tested with Astra, BetterDiscord, and Powercord. 12 | 13 | ## Issues 🙋 14 | This is just a side project; it's not visually perfect by any means and certainly isn't optimized well. Check out [TODO.md](https://github.com/kiosion/Amethyst/tree/master/TODO.md) for a complete list of issues I'm working on. 15 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | # To-do: 2 | 3 | 14 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /amethyst.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Amethyst 3 | * @version 0.2.0 4 | * @description A dark, minimal, modern rework of Discord's UI, with a purple colour scheme & miscillaneous UI tweaks. 5 | * @author kiosion 6 | * @authorId 346430063006187531 7 | * @source https://github.com/kiosion/Amethyst 8 | * @invite kiosion 9 | */ 10 | 11 | @import url('https://kiosion.github.io/Amethyst/css/base.css'); 12 | 13 | /* change variables to 'unset' from 'none' to show elements */ 14 | :root { 15 | 16 | /* scrollbars */ 17 | --scrollbars: none; 18 | 19 | /* profile card notes */ 20 | --notes: none; 21 | 22 | /* profile card dm box */ 23 | --message: none; 24 | 25 | /* default fonts */ 26 | --font-primary: Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif; 27 | --font-display: Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 28 | 29 | /* gif/sticker buttons in msg bar */ 30 | --gif-sticker-buttons: none; 31 | } 32 | -------------------------------------------------------------------------------- /img/icons/accessibility.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/account.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/activityprivacy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/advanced.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/analytics.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/appearance.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/apps.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/audit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/automod.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/automodmessage.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/bans.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/betterdiscord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/billing.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/boosts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/changelog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/community.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/connections.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/custom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/developer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/discovery.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/dismissable.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/emotes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/experiments.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/games.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/gift.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/hotspots.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/hypesquad.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/integrations.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/invites.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/keybinds.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/language.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/library.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/logout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/members.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/nitro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/overlay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/overview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/partner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/party.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/paymentmodals.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/pluginrepo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/plugins.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/premium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/privacy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/profile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/questionmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/roles.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/rules.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/sessions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/stickers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/streamermode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/subscriptions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/template.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 51 | 56 | 57 | -------------------------------------------------------------------------------- /img/icons/themerepo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/themes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/threads.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/updatecheck.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/vanityurl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/voice.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/welcome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/widgets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/icons/windows.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiosion/Amethyst/9952bfe548ac38104d77c915778ef59d6dd505dd/img/preview.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amethyst", 3 | "version": "1.0.0", 4 | "description": "A dark, minimal, modern rework of Discord's UI, with a purple colour scheme & miscillaneous UI tweaks.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/kiosion/Amethyst" 8 | }, 9 | "devDependencies": { 10 | "husky": "^8.0.0", 11 | "lint-staged": "^12.4.1", 12 | "node-sass": "^7.0.1", 13 | "rimraf": "^3.0.2", 14 | "stylelint": "^14.9.1", 15 | "stylelint-config-standard": "^25.0.0", 16 | "stylelint-config-standard-scss": "^4.0.0", 17 | "stylelint-scss": "^4.2.0" 18 | }, 19 | "scripts": { 20 | "prepare": "rimraf ./.husky/ && husky install && chmod ug+x .husky/* && husky add .husky/pre-commit 'yarn lint-staged'", 21 | "compile": "node-sass ./scss/base.scss -o ./css/ --output-style compressed && git add *.css", 22 | "lint": "stylelint ./scss/*.scss --fix" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scss/utils/_maps.scss: -------------------------------------------------------------------------------- 1 | // Maps 2 | $shadow-size-map: ( 3 | 'default': 0 0 14px 0, 4 | 'xsmall': 0 0 6px -4px, 5 | 'small': 0 0 12px -2px, 6 | 'medium': 0 0 14px 0, 7 | 'large': 0 0 18px 0, 8 | 'xlarge': 0 0 22px 0, 9 | ); 10 | $border-size-map: ( 11 | 'default': 8px, 12 | 'small': 4px, 13 | 'medium': 8px, 14 | 'large': 14px, 15 | 'round': 50%, 16 | 'none': 0, 17 | ); 18 | $edge-map: ( 19 | 'top': ('top-left', 'top-right'), 20 | 'right': ('top-right', 'bottom-right'), 21 | 'bottom': ('bottom-left', 'bottom-right'), 22 | 'left': ('top-left', 'bottom-left'), 23 | 'top-left': 'top-left', 24 | 'top-right': 'top-right', 25 | 'bottom-left': 'bottom-left', 26 | 'bottom-right': 'bottom-right', 27 | ); 28 | $icons-map: ( 29 | 'account': ('My Account-tab', 'MyAccount'), 30 | 'profile': ('Profile & Customization-tab', 'Profile Customization-tab', 'ProfileCustomization'), 31 | 'privacy': ('Privacy & Safety-tab', 'MODERATION-tab', 'Activity Privacy-tab', 'PrivacynSafety', 'ActivityPrivacy'), 32 | 'apps': ('Authorized Apps-tab', 'AuthorizedApps'), 33 | 'connections': ('Connections-tab', 'Connections', 'Passport', 'Sessions'), 34 | 'subscriptions': ('Subscriptions-tab', 'Subscriptions'), 35 | 'premium': ('Premium-tab'), 36 | 'nitro': ('Discord Nitro-tab', 'DiscordNitro'), 37 | 'boosts': ('Nitro Server Boost-tab', 'GUILD_PREMIUM-tab', 'NitroServerBoost'), 38 | 'gift': ('Library Inventory-tab', 'LibraryInventory'), 39 | 'billing': ('Billing-tab', 'Payment Flow Modals-tab', 'Billing', 'PaymentFlowModals'), 40 | 'appearance': ('Appearance-tab', 'Appearance'), 41 | 'accessibility': ('Accessibility-tab', 'Accessibility'), 42 | 'voice': ('Voice & Video-tab', 'VoicenVideo'), 43 | 'party': ('Powermode Settings-tab'), 44 | 'text': ('Text & Images-tab', 'TextnImages'), 45 | 'notifications': ('Notifications-tab', 'Notifications'), 46 | 'keybinds': ('Keybinds-tab', 'Keybinds'), 47 | 'language': ('Language-tab', 'Language'), 48 | 'windows': ('Windows-tab', 'Windows', 'Linux'), 49 | 'streamermode': ('Streamer Mode-tab', 'StreamerMode'), 50 | 'advanced': ('Advanced-tab', 'Advanced'), 51 | 'games': ('Game Activity-tab', 'GameActivity'), 52 | 'overlay': ('Overlay-tab'), 53 | 'changelog': ('ChangeLog-tab', 'Change Log-tab', 'changelog'), 54 | 'hypesquad': ('Hypesquad Online-tab', 'HypesquadOnline'), 55 | 'experiments': ('Experiments-tab', 'Experiments'), 56 | 'developer': ('Developer Options-tab', 'DeveloperOptions'), 57 | 'hotspots': ('Hotspot Options-tab', 'HotspotOptions'), 58 | 'dismissable': ('Dismissible Content Options-tab', 'DismissibleContentOptions'), 59 | 'pluginrepo': ('PluginRepo-tab'), 60 | 'themerepo': ('ThemeRepo-tab'), 61 | 'updatecheck': ('pc-updater-tab', 'updater-tab'), 62 | 'betterdiscord': ('bdCompat-tab'), 63 | 'logout': ('Logout-tab', 'logout'), 64 | 'overview': ('OVERVIEW-tab', 'accountinfo-tab'), 65 | 'roles': ('ROLES-tab', 'PERMISSIONS-tab'), 66 | 'stickers': ('STICKERS-tab'), 67 | 'automoderation': ('GUILD_AUTOMOD_MESSAGE_FILTER-tab'), 68 | 'audit': ('AUDIT_LOG-tab', 'AUDIT_LOG_V2-tab'), 69 | 'integrations': ('INTEGRATIONS-tab', 'status-tab'), 70 | 'widgets': ('WIDGET-tab'), 71 | 'template': ('GUILD_TEMPLATES-tab'), 72 | 'vanityurl': ('VANITY_URL-tab'), 73 | 'community': ('COMMUNITY-tab'), 74 | 'voicetext': ('text_in_voice-tab'), 75 | 'analytics': ('ANALYTICS-tab'), 76 | 'partner': ('PARTNER-tab'), 77 | 'rules': ('MEMBER_VERIFICATION-tab'), 78 | 'discovery': ('DISCOVERY-tab'), 79 | 'welcome': ('COMMUNITY_WELCOME-tab'), 80 | 'threads': ('THREADS-tab'), 81 | 'members': ('MEMBERS-tab'), 82 | 'invites': ('INSTANT_INVITES-tab'), 83 | 'bans': ('BANS-tab'), 84 | 'delete': ('DELETE-tab'), 85 | 'settings': ('bd-settings-tab', 'astra-settings-tab', 'pc-general-tab', 'lightcord-tab', 'core-tab', 'Settings-tab', 'nth-child(3)', 'AstraSettings', 'BdSettings', 'PcGeneral', 'Lightcord', 'Core', 'Settings'), 86 | 'emotes': ('bd-emotes-tab', 'Emotes-tab', 'EMOJI-tab', 'nth-child(4)', 'Emotes', 'Emoji'), 87 | 'custom': ('bd-customcss-tab', 'CustomCSS-tab', 'nth-child(7)', 'CustomCSS'), 88 | 'plugins': ('bd-plugins-tab', 'Plugins-tab', 'pc-moduleManager-plugins-tab', 'nth-child(5)', 'Plugins'), 89 | 'themes': ('bd-themes-tab', 'Themes-tab', 'pc-moduleManager-themes-tab', 'nth-child(6)', 'Themes'), 90 | ); 91 | -------------------------------------------------------------------------------- /scss/utils/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins / functions 2 | @mixin background-opacity($color, $opacity: 0.3) { 3 | background: rgba($color, $opacity) !important; 4 | } 5 | @mixin box-shadow($color, $size: 'medium', $intensity: 1) { 6 | @if map-has-key($shadow-size-map, $size) { 7 | box-shadow: map-get($shadow-size-map, $size) rgba($color, $intensity); 8 | } @else { 9 | @error '#{$size} is not defined in $shadow-size-map'; 10 | } 11 | } 12 | @mixin border-radius($edge: 'all', $size: 'default') { 13 | @if map-has-key($border-size-map, $size) { 14 | @if $edge == 'all' { 15 | border-radius: map-get($border-size-map, $size); 16 | } @else { 17 | @if map-has-key($edge-map, $edge) { 18 | @each $value in map-get($edge-map, $edge) { 19 | 20 | // @debug 'values: #{$value}'; 21 | border-#{$value}-radius: map-get($border-size-map, $size); 22 | } 23 | } @else { 24 | @error '#{$edge} is not defined in $border-edge-map'; 25 | } 26 | } 27 | } @else { 28 | @error '#{$size} is not defined in $border-size-map'; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/utils/_vars.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $color-background-primary: #373949; 3 | $color-background-secondary: #373949; 4 | $color-background-tertiary: #282a36; 5 | $color-background-quaternary: #1e2029; 6 | $color-border: #373949; 7 | $color-hover: #22242e81; 8 | $color-hover--lighter: #5d607781; 9 | $color-hover--darker: #15151b81; 10 | $color-accent: #caa3ff; 11 | $color-white: #f8f8f2; 12 | $color-white--darker: #aab3ce; 13 | $color-muted: #6d7dab; 14 | $color-purple: #bd93f9; 15 | $color-orange--lighter: #f7c38c; 16 | $color-orange: #ffb86c; 17 | $color-green--lighter: #94ffaf; 18 | $color-green: #51fd7c; 19 | $color-blue--lighter: #cdf5fe; 20 | $color-blue: #68e1fd; 21 | $color-blue--darker: #30c6e8; 22 | $color-red--lighter: #ff9999; 23 | $color-red: #ff5555; 24 | 25 | // Text colors 26 | $color-text: $color-white; 27 | $color-text--soft: $color-white--darker; 28 | $color-text--muted: $color-muted; 29 | $color-text--dark: $color-background-tertiary; 30 | 31 | // Units 32 | $unit-1: 2px; 33 | $unit-2: 4px; 34 | $unit-3: 8px; 35 | $unit-4: 12px; 36 | $unit-5: 16px; 37 | $unit-6: 24px; 38 | 39 | // Spaces 40 | $space-full: $unit-3 + $unit-1; 41 | $space-half: $space-full / 2; 42 | $space-small: $unit-1; 43 | $space-1: $space-full; 44 | $space-2: $space-full * 2; 45 | $space-0: 0; 46 | 47 | // Set default Discord color variables 48 | .theme-dark { 49 | 50 | // Background 51 | --background-primary: #{$color-background-primary}; 52 | --background-primary-alt: #{$color-background-primary}; 53 | --background-secondary: #{$color-background-secondary}; 54 | --background-secondary-alt: #{$color-background-secondary}; 55 | --background-tertiary: #{$color-background-tertiary}; 56 | --background-quaternary: #{$color-background-quaternary}; 57 | --background-1-gradient: linear-gradient(to right, #{$color-background-primary}, #{$color-background-secondary}); 58 | --background-floating: #{$color-background-primary}; 59 | --background-mentioned: #cca7ff15; 60 | --background-mentioned-hover: #cca7ff2a; 61 | --channeltextarea-background: #{$color-background-tertiary}; 62 | 63 | // Modifiers 64 | --background-modifier-hover: #{$color-background-primary}; 65 | --background-modifier-active: #{$color-background-primary}; 66 | --background-modifier-selected: #{$color-accent}; 67 | --background-modifier-accent: #{$color-background-primary}; 68 | --background-message-hover: #{$color-hover}; 69 | 70 | // Text 71 | --text-normal: #{$color-white}; 72 | --text-secondary: #{$color-white--darker}; 73 | --text-positive: #{$color-white}; 74 | --text-muted: #{$color-muted}; 75 | --text-link: #{$color-blue}; 76 | --text-dark: #{$color-background-tertiary}; 77 | --interactive-selected: #{$color-white}; 78 | --interactive-active: #{$color-white}; 79 | --interactive-normal: #{$color-white}; 80 | --interactive-muted: #{$color-muted}; 81 | --channels-default: #{$color-white--darker}; 82 | --header-primary: #{$color-white}; 83 | --header-secondary: #{$color-muted}; 84 | 85 | // More 86 | --settings-icon-color: #{$color-white}; 87 | --control-brand-foreground: #{$color-accent}; 88 | --info-warning-foreground: #{$color-orange}; 89 | --tab-selected: #{$color-background-primary}; 90 | --switch: #{$color-background-tertiary}; 91 | --activity-card-background: #{$color-background-tertiary}; 92 | --brand-experiment: #{$color-accent} !important; 93 | --deprecated-text-input-bg: #{$color-background-secondary}; 94 | --deprecated-text-input-border-disabled: #{$color-background-secondary}; 95 | --radio-bar-accent-color: transparent; 96 | --text-brand: #{$color-accent} !important; 97 | --focus-primary: #{$color-accent}; 98 | --text-danger: #{$color-red}; 99 | --settings-logout: #{$color-red}; 100 | --settings-guild-delete: #{$color-red}; 101 | --info-warning-background: #{$color-background-secondary}; 102 | 103 | // Buttons 104 | --button-background: #{$color-background-tertiary}; 105 | --button-background-hover: #{$color-accent}; 106 | --button-background-active: #{$color-background-primary}; 107 | --button-accent: #{$color-accent}; 108 | --button-accent-hover: #{$color-hover}; 109 | --button-accent-active: #{$color-background-primary}; 110 | --button-destructive: #{$color-red}; 111 | --button-destructive-hover: #{$color-red--lighter}; 112 | --button-destructive-active: #{$color-red}; 113 | } 114 | 115 | // Monkey patch 116 | :root { 117 | --border-radius-1: 14px; 118 | --border-radius-2: 8px; 119 | } 120 | -------------------------------------------------------------------------------- /scss/views/_app.scss: -------------------------------------------------------------------------------- 1 | @import './app/backgrounds'; 2 | @import './app/badges-tags'; 3 | @import './app/header'; 4 | @import './app/modals-menus'; 5 | @import './app/server-discovery'; 6 | @import './app/sidebar'; 7 | @import './app/student-hub'; 8 | @import './app/toolbars-tooltips'; 9 | -------------------------------------------------------------------------------- /scss/views/_call.scss: -------------------------------------------------------------------------------- 1 | // Container styling 2 | .content-1SgpWY { 3 | .wrapper-1gVUIN { 4 | &.chatSidebarOpen--YCxhs { 5 | .callContainer-HtHELf { 6 | width: 50%; 7 | margin-right: 8px; 8 | } 9 | } 10 | .callContainer-HtHELf { 11 | overflow: visible; 12 | max-width: calc(100% - 10px); 13 | .topControls-23RE3h { 14 | overflow: visible; 15 | .headerWrapper-1ULEPv { 16 | justify-content: flex-end; 17 | .children-3xh0VB { 18 | transform: translateX(-248px); 19 | } 20 | } 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scss/views/_channel.scss: -------------------------------------------------------------------------------- 1 | @import './channel/attached-bars'; 2 | @import './channel/message-form'; 3 | @import './channel/messages'; 4 | @import './channel/threads'; 5 | 6 | // Channel main view 7 | .content-1jQy2l { 8 | margin-top: 6px; 9 | &:before { 10 | display: none; 11 | } 12 | 13 | // Student hub view 14 | > .pageContainer-36uo3F { 15 | @include border-radius('all', 'large'); 16 | margin: 0 10px 10px; 17 | max-width: none !important; 18 | } 19 | } 20 | 21 | // Misc 22 | .wrapper-39oAo3, 23 | .scrollableContainer-2NUZem, 24 | .embedFull-1HGV2S, 25 | .wrapper-35wsBm { 26 | @include border-radius('all', 'large'); 27 | } 28 | .wrapper-2aW0bm { 29 | @include border-radius('all', 'medium'); 30 | border: 1px solid #{$color-border}; 31 | } 32 | .button-1ZiXG9 { 33 | &:active { 34 | padding: 4px; 35 | } 36 | } 37 | .channelTextArea-rNsIhG .container-JHR0NT { 38 | display: none; 39 | } 40 | .stickerIcon-3TP7EM { 41 | > :first-child { 42 | visibility: visible; 43 | } 44 | > :last-child { 45 | visibility: hidden; 46 | } 47 | } 48 | .stickerButtonTilted-2R4_UZ { 49 | transform: none; 50 | } 51 | -------------------------------------------------------------------------------- /scss/views/_forum.scss: -------------------------------------------------------------------------------- 1 | @import './forum/search'; 2 | @import './forum/post'; 3 | @import './forum/sidebar'; 4 | .container-3wLKDe { 5 | background-color: $color-background-tertiary !important; 6 | .list-3FIpnh { 7 | background-color: $color-background-tertiary !important; 8 | 9 | // transform: translateY(-24px); 10 | > .content-2a4AW9 { 11 | transform: translateY(-24px); 12 | } 13 | } 14 | .newPostsButton-UaBhcU { 15 | .newPostsButtonText-2WJdH8 { 16 | color: $color-text; 17 | } 18 | } 19 | .tags-3s41VI, 20 | .tags-2CaEuN { 21 | .pill-3pRQlO { 22 | background-color: $color-background-quaternary; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/views/_guild.scss: -------------------------------------------------------------------------------- 1 | @import './guild/sidebar'; 2 | -------------------------------------------------------------------------------- /scss/views/_home.scss: -------------------------------------------------------------------------------- 1 | @import './home/direct-messages'; 2 | @import './home/dm-call'; 3 | @import './home/home-pages'; 4 | -------------------------------------------------------------------------------- /scss/views/_profiles.scss: -------------------------------------------------------------------------------- 1 | @import './profiles/profile-modal'; 2 | @import './profiles/popout-profile'; 3 | -------------------------------------------------------------------------------- /scss/views/_settings.scss: -------------------------------------------------------------------------------- 1 | @import './settings/settings-icons'; 2 | 3 | // CLIENT SETTINGS 4 | .standardSidebarView-E9Pc3j, 5 | .sidebar-nqHbhN, 6 | .sidebarRegionScroller-FXiQOh { 7 | background-color: var(--background-tertiary); 8 | } 9 | .standardSidebarView-E9Pc3j { 10 | > .contentRegion-3HkfJJ { 11 | margin: 10px; 12 | @include border-radius('all', 'large'); 13 | } 14 | } 15 | .contentRegionScroller-2_GT_N { 16 | &.contentRegionShownSidebar-fHXkEg { 17 | @include border-radius('all', 'large'); 18 | } 19 | } 20 | #app-mount { 21 | .app-1q1i1E { 22 | .app-2rEoOp { 23 | .layers-3iHuyZ { 24 | .sidebarRegion-VFTUkN { 25 | .sidebar-CFHs9e { 26 | width: 290px !important; 27 | padding-right: 40px; 28 | padding-left: 40px; 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | .side-8zPYf6 .item-PXvHYJ, 36 | .container-CpszHS, 37 | .accountBtnInner-sj5jLs, 38 | .group-1WdBVp { 39 | @include border-radius('all', 'medium'); 40 | } 41 | .sidebarRegion-VFTUkN { 42 | flex: 0 0 auto; 43 | } 44 | .contentColumn-2hrIYH, 45 | .customColumn-Rb6toI, 46 | .customScroller-26gWhv > div { 47 | max-width: unset !important; 48 | } 49 | .radioIconForeground-XwlXQN { 50 | color: var(--interactive-selected); 51 | r: 9px; 52 | } 53 | .radioBar-bMNUI- { 54 | border-left: transparent; 55 | > svg { 56 | color: #{$color-border}; 57 | } 58 | } 59 | .item-26Dhrx[aria-checked='true'] { 60 | background-color: var(--background-modifier-selected); 61 | color: var(--interactive-selected); 62 | .radioBar-bMNUI- { 63 | > svg { 64 | > :first-child { 65 | color: transparent !important; 66 | } 67 | } 68 | } 69 | } 70 | .userSettingsSecurity-3IYeMF .lockIcon-2Hj8Tq, 71 | .avatarUploaderIndicator-2G-aIZ { 72 | display: none; 73 | } 74 | .container-CpszHS { 75 | background-color: var(--deprecated-text-input-bg) !important; 76 | } 77 | .background-1QDuV2 .lookFilled-yCfaCM.colorGrey-2DXtkV { 78 | color: var(--text-normal); 79 | } 80 | .card-FDVird:before { 81 | background-color: var(--background-modifier-hover) !important; 82 | } 83 | .contentColumnDefault-1VQkGM { 84 | padding: 60px 0 80px 57px; 85 | } 86 | .side-8zPYf6 .item-PXvHYJ:not([aria-controls='Logout-tabi']):not([aria-controls='delete-tab']):before { 87 | color: var(--settings-icon-color); 88 | } 89 | .bd-social-logo path, 90 | .foreground-26ym5y { 91 | fill: var(--settings-icon-color) !important; 92 | } 93 | .closeButton-PCZcma { 94 | @include border-radius('all', 'medium'); 95 | border: none; 96 | transition: 200ms ease; 97 | &:active { 98 | background-color: #{$color-hover--darker}; 99 | } 100 | &, 101 | &:hover:not(:active) { 102 | background-color: #{$color-hover}; 103 | } 104 | > svg > path { 105 | fill: var(--text-secondary) !important; 106 | } 107 | &, 108 | > div { 109 | color: var(--text-secondary) !important; 110 | } 111 | } 112 | .contentRegionScroller-26nc1e .tools-3-3s-N { 113 | position: relative; 114 | right: 40px; 115 | top: -5px; 116 | } 117 | .sectionTitle-2vauyC, 118 | .contentColumnDefault-1VQkGM .title-3sZWYQ { 119 | padding-bottom: 10px; 120 | } 121 | .notches-1sAcEM { 122 | background-image: none !important; 123 | mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='20'%3E%3Cpath d='M0 0h8v20H0V0zm4 2a2 2 0 00-2 2v12a2 2 0 104 0V4a2 2 0 00-2-2z'/%3E%3C/svg%3E"); 124 | background-color: var(--background-tertiary); 125 | } 126 | .progress-1IcQ3A { 127 | background-color: var(--switch) !important; 128 | } 129 | .container-3PXSwK { 130 | background: #{$color-accent} !important; 131 | } 132 | .profileBannerPreview-3FLQKD .avatar-2PN2-j, 133 | .card-3IImnr, 134 | .card-11DMwv, 135 | .auditLog-2ph_aK, 136 | .warning-3C2pOH, 137 | .info-1Vr1AV { 138 | border: none; 139 | } 140 | .h2-2gWE-o { 141 | text-transform: none; 142 | font-size: 20px; 143 | } 144 | .info-1VyQPT { 145 | &:after { 146 | content: 'Zelk 1.2'; 147 | color: var(--text-muted); 148 | font-size: 12px; 149 | line-height: 16px; 150 | } 151 | } 152 | div { 153 | &[role='radiogroup'] { 154 | + div:not(.disabled-2HSEFa) { 155 | label:after { 156 | content: '\A Changing these settings *will* cause issues when using this theme!'; 157 | white-space: pre; 158 | color: var(--text-danger); 159 | font-size: 14px; 160 | } 161 | } 162 | + .disabled-2HSEFa { 163 | opacity: 0.5; 164 | } 165 | } 166 | } 167 | .disabled-2HSEFa { 168 | .title-31JmR4, 169 | .container-3auIfb { 170 | cursor: not-allowed; 171 | } 172 | } 173 | .swatch-2XEFyZ { 174 | @include border-radius('all', 'medium'); 175 | } 176 | .breadcrumbArrow-1bJVKv { 177 | top: -4px; 178 | position: relative; 179 | } 180 | .profileBannerPreview-3_l0Wd { 181 | border: 1px solid #{$color-border}; 182 | } 183 | .item-PXvHYJ { 184 | .selectedBackground-2KQZ6B { 185 | background: none; 186 | } 187 | } 188 | .header-2mZ9Ov { 189 | margin-right: 0; 190 | } 191 | 192 | // Profile customization tab 193 | .bioTextArea-dDGOeC { 194 | background-color: var(--background-tertiary) !important; 195 | @include border-radius('all', 'medium'); 196 | } 197 | 198 | // Settings menu list items 199 | .sidebarRegion-1VBisG, 200 | .sidebarRegionScroller-FXiQOh, 201 | .sidebar-nqHbhN { 202 | overflow-x: visible !important; 203 | } 204 | .side-2ur1Qk { 205 | overflow: visible; 206 | > .item-3XjbnG { 207 | transition: 208 | background-color 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955), 209 | box-shadow 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955), 210 | color 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 211 | @include border-radius('all', 'medium'); 212 | &:hover { 213 | background-color: #{$color-hover--lighter} !important; 214 | } 215 | &.selected-g-kMVV, 216 | &.selected-g-kMVV:hover { 217 | background-color: #{$color-accent} !important; 218 | color: var(--text-dark) !important; 219 | @include box-shadow($color-accent, 'small', 0.9); 220 | } 221 | } 222 | } 223 | 224 | // Guild settings 225 | 226 | // Roles page 227 | .customScroller-m1-jZn { 228 | @include border-radius('all', 'large'); 229 | } 230 | .searchContainer-16qhPt { 231 | > div { 232 | &, 233 | > .inner-2pOSmK { 234 | overflow: visible; 235 | } 236 | } 237 | } 238 | .searchContainer-16qhPt > div > .inner-2pOSmK, 239 | .content-2a4AW9 > div > .container-3EtAkD { 240 | @include border-radius('all', 'medium'); 241 | box-shadow: 0 0 12px -2px #{$color-hover}; 242 | } 243 | 244 | // View as role 245 | .notice-2HEN-u { 246 | &.notice-2olXi7 { 247 | &.colorBrand-2hgZSE { 248 | background-color: transparent; 249 | left: 1%; 250 | max-width: 96%; 251 | } 252 | } 253 | } 254 | .notice-1Qe0b_ { 255 | background-color: var(--background-tertiary); 256 | @include border-radius('all', 'large'); 257 | } 258 | .tooltip-2QfLtc { 259 | @include border-radius('all', 'large'); 260 | background-color: var(--background-tertiary); 261 | border: 1px solid #{$color-border}; 262 | } 263 | .button-2TV-eO { 264 | border-color: var(--button-background) !important; 265 | background-color: var(--button-background); 266 | &:hover { 267 | background-color: var(--button-background-hover); 268 | } 269 | &:active { 270 | background-color: var(--button-background-active); 271 | } 272 | } 273 | .container-1eFT6O { 274 | @include border-radius('all', 'large'); 275 | border: 1px solid #{$color-border}; 276 | .selected-2114Fj { 277 | background-color: var(--background-modifier-active); 278 | } 279 | } 280 | 281 | // Channel permissions page 282 | .sidebarScrollable-2mW9Ls { 283 | > .scroller-3_YDR2 { 284 | &.thin-31rlnD { 285 | &.scrollerBase-_bVAAt { 286 | overflow: visible; 287 | } 288 | } 289 | } 290 | } 291 | .role-3pGE29 { 292 | border-radius: var(--border-radius-2) !important; 293 | &.selected-g-kMVV, 294 | &.selected-g-kMVV:hover, 295 | &[aria-selected='true'], 296 | &[aria-selected='true']:hover { 297 | @include box-shadow($color-accent, 'small', 0.8); 298 | background-color: #{$color-accent} !important; 299 | color: var(--text-dark) !important; 300 | border-radius: var(--border-radius-2) !important; 301 | } 302 | &:hover { 303 | background-color: #{$color-hover--lighter} !important; 304 | } 305 | } 306 | -------------------------------------------------------------------------------- /scss/views/app/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | // App backgrounds 2 | .root-g14mjS, 3 | .footer-31IekZ, 4 | .tabBody-2dgbAs, 5 | .chat-2ZfjoI, 6 | .container-1eFtFS, 7 | .container-2cd8Mz, 8 | .container-3w7J-x, 9 | .container-1oAagU, 10 | .container-lRFx4q, 11 | .privateChannels-oVe7HL, 12 | .homeWrapperNormal-2KSUEa, 13 | .members-1998pB, 14 | .members-1998pB > div, 15 | .tabs-3L9Rgq, 16 | .container-1CU5bi, 17 | .contentWrapper-3wXY8L, 18 | .contentWrapperInner-17OxmC, 19 | .container-2wlB3z, 20 | .body-2wLx-E, 21 | .body-1Ukv50, 22 | .activity-1gTu-L, 23 | .avatar-37jOim, 24 | .headerTop-3GPUSF, 25 | .headerTop-2cWpdB, 26 | .body-3HBlXn, 27 | .topSection-13QKHs, 28 | .avatar-3QF_VA, 29 | .aboutMeSection---MkQa, 30 | .footer-3UKYOU, 31 | .footer-1N3bR3, 32 | .bodyInnerWrapper-26fQXj, 33 | .profileBannerPreview-3_l0Wd, 34 | .popoutInfo-16MuYF, 35 | .rolesList-3uZoaa, 36 | .scroller-2MALzE.videoGrid-1tZm-F.thin-31rlnD.scrollerBase-_bVAAt, 37 | .root-24JyNP.flexCenter-1Vz5gs, 38 | .root-1gCeng:not(.popout-103y-5), 39 | .footer-2gL1pp, 40 | .root-1gCeng .avatarUploaderInner-KkYu-S, 41 | .uploadModal-2ifh8j, 42 | .footer-3mqk7D, 43 | .container-7uh5fX, 44 | .container-7uh5fX .icon-3pEw1v, 45 | .messagesPopoutWrap-1MQ1bW, 46 | .header-ykumBX, 47 | .popout-103y-5, 48 | .header-2-Imhb .button-1-5Aqk, 49 | .container-3u944p, 50 | .container-3u944p .icon-1Itzco, 51 | .modal-f02hVt, 52 | .guildSidebar-2OCzWB, 53 | .contentWrapper-3WC1IDm, 54 | .recentMentionsPopout-3rCiI6 .scroller-tlc3kG, 55 | .authBox-hW6HRx, 56 | .popout-6p6fkZ, 57 | .guildPopout-3CgKqR, 58 | .footer-3OAEzG, 59 | .iconMask-AFPO7u, 60 | .container-2QXVMm, 61 | .content-18CuWF, 62 | .bodyInnerWrapper-2bQs1k, 63 | .bodyTitle-2Az3VQ.base-21yXnu.size12-oc4dx4.muted-eZM05q.uppercase-2unHJn:nth-of-type(2n+1), 64 | .root-jbEB5E.flex-3BkGQD.wrap-7NZuTn.rolesList-3uZoaa { 65 | background-color: var(--background-tertiary) !important; 66 | } 67 | .message-2qRu38, 68 | .messageGroupCozy-2iY6cT, 69 | .container-3iAQ-0 .button-1-5Aqk, 70 | .tooltipBrand-g03Nz8, 71 | .channel-3pEHab, 72 | .fileUpload-3UbVpG, 73 | .popout-APcvZm { 74 | background-color: var(--background-secondary) !important; 75 | } 76 | -------------------------------------------------------------------------------- /scss/views/app/_badges-tags.scss: -------------------------------------------------------------------------------- 1 | // Beta badge 2 | .children-3xh0VB .textBadge-1fdDP { 3 | background-color: $color-accent !important; 4 | color: $color-text--dark; 5 | } 6 | -------------------------------------------------------------------------------- /scss/views/app/_header.scss: -------------------------------------------------------------------------------- 1 | // Top header bar 2 | .content-1SgpWY { 3 | > .container-2YMsb4, 4 | > .container-2cd8Mz, 5 | > .chat-2ZfjoI { 6 | > .container-ZMc96U { 7 | &.themed-Hp1KC_, 8 | &.transparent-1lUmft { 9 | justify-content: flex-end; 10 | .children-3xh0VB { 11 | transform: translateX(-250px); 12 | > .textBadge-1fdDPJ.base-3IDx3L.baseShapeRound-3epLEv { 13 | background-color: $color-accent !important; 14 | color: $color-text--dark; 15 | } 16 | } 17 | } 18 | } 19 | } 20 | 21 | // Nitro page 22 | > .applicationStore-2nk7Lo { 23 | > .homeWrapperNormal-bu1BS6, 24 | > .homeWrapper-L4ors0 { 25 | > .container-ZMc96U { 26 | &.themed-Hp1KC_ { 27 | justify-content: flex-end; 28 | .children-3xh0VB { 29 | transform: translateX(-250px); 30 | } 31 | } 32 | } 33 | } 34 | } 35 | 36 | // Call UI 37 | .root-22AK9z { 38 | .topControls-23RE3h { 39 | .container-ZMc96U { 40 | &.themed-Hp1KC_, 41 | &.transparent-1lUmft { 42 | justify-content: flex-end; 43 | .children-3xh0VB { 44 | transform: translateX(-250px); 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /scss/views/app/_modals-menus.scss: -------------------------------------------------------------------------------- 1 | @import './modals-menus/emoji-picker'; 2 | @import './modals-menus/inbox-popout'; 3 | @import './modals-menus/scrollers'; 4 | -------------------------------------------------------------------------------- /scss/views/app/_server-discovery.scss: -------------------------------------------------------------------------------- 1 | // Server discovery page 2 | .channel-1Shao0.selected-1-Z6gm { 3 | color: var(--interactive-selected); 4 | } 5 | .emptyCard-1RJw8n { 6 | @include border-radius('all', 'large'); 7 | } 8 | .wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9, 9 | .wrapper-1BJsBx:hover .childWrapper-anI2G9 { 10 | background-color: #{$color-accent}; 11 | color: var(--background-primary); 12 | } 13 | .childWrapper-anI2G9 { 14 | color: var(--text-normal); 15 | } 16 | .section-2gLsgF, 17 | .inset-3sAvek, 18 | .container-S9SaVf { 19 | background-color: var(--background-tertiary) !important; 20 | } 21 | .pageWrapper-2PwDoS { 22 | @include border-radius('all', 'large'); 23 | margin: 10px; 24 | background-color: var(--background-primary) !important; 25 | } 26 | .guildList-3GXKvP > div > .card-2TuZPZ { 27 | @include box-shadow($color-hover, 'medium', 1); 28 | background-color: var(--background-tertiary); 29 | } 30 | .guildList-3GXKvP > div > .card-2TuZPZ:hover { 31 | @include box-shadow($color-hover, 'large', 1); 32 | } 33 | .sidebar-1tnWFu > div > .categoryItem-Kc_HK_ { 34 | margin-right: 10px; 35 | } 36 | .sidebar-1tnWFu > div > .categoryItem-Kc_HK_.selected-1-Z6gm { 37 | background-color: #{$color-accent}; 38 | color: var(--text-dark); 39 | } 40 | .inputWrapper-1YNMmM.searchBoxInputWrapper-3XLwVB > input { 41 | background-color: transparent; 42 | } 43 | .cardsContainer-39dCVY > .card-3N2v9t { 44 | @include box-shadow($color-hover, 'medium', 1); 45 | background-color: #{$color-background-tertiary}; 46 | } 47 | .joinButton-1B9qQr { 48 | &.lookFilled-yCfaCM { 49 | &.colorGreen-3y-Z79 { 50 | background-color: #{$color-green}; 51 | color: var(--text-dark); 52 | &:hover { 53 | @include box-shadow($color-green--lighter, 'small', 1); 54 | background-color: #{$color-green--lighter}; 55 | } 56 | } 57 | } 58 | } 59 | .itemInner-3k3Sn6 { 60 | &.layout-1qmrhw { 61 | @include border-radius('all', 'medium'); 62 | margin: 0 8px !important; 63 | } 64 | } 65 | .optionItem-2tdutc { 66 | &.selected-1-Z6gm { 67 | > .itemInner-3k3Sn6 { 68 | &.layout-1qmrhw { 69 | @include box-shadow($color-accent, 'small', 1); 70 | color: var(--text-dark); 71 | } 72 | } 73 | } 74 | } 75 | .tabBarItem-15vAXA { 76 | &.selected-g-kMVV { 77 | border-bottom: 2px solid var(--text-light) !important; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /scss/views/app/_sidebar.scss: -------------------------------------------------------------------------------- 1 | // Home icon & inbox experiment styling 2 | .guilds-2JjMmN { 3 | .scroller-3X7KbA { 4 | .listItemWrapper-3d87LP { 5 | .iconButton-2z1iK7, 6 | .wrapper-3kah-n { 7 | &[data-list-item-id='guildsnav___inbox-button'], 8 | &[data-list-item-id='guildsnav___home'] { 9 | svg, 10 | .homeIcon-r0w4ny { 11 | color: var(--text-normal) !important; 12 | } 13 | &.selected-1WnveH, 14 | &.selected-1Drb7Z { 15 | background-color: #{$color-accent}; 16 | svg, 17 | .homeIcon-r0w4ny { 18 | color: var(--text-dark) !important; 19 | path { 20 | fill: var(--text-dark) !important; 21 | } 22 | } 23 | } 24 | } 25 | } 26 | } 27 | } 28 | } 29 | 30 | // Add/join server / Server discovery icons styling 31 | .circleIconButton-1VxDrg { 32 | color: #{$color-accent}; 33 | background-color: var(--background-primary); 34 | > svg > path { 35 | fill: var(--text-normal); 36 | } 37 | .selected-2r1Hvo { 38 | background-color: #{$color-accent}; 39 | > svg > path { 40 | fill: var(--text-dark); 41 | } 42 | } 43 | } 44 | .verified-1eC5dy { 45 | color: #{$color-accent}; 46 | } 47 | .iconBackgroundTier { 48 | &None-3ZkOsa, 49 | &TierOne-2OQMBY, 50 | &TierTwo-Eab9L6, 51 | &TierThree-FWlUL9 { 52 | color: #{$color-accent}; 53 | } 54 | } 55 | .iconTierOne-s_oiRb, 56 | .iconTierTwo-1JOWNK, 57 | .iconTierThree-3EAOB7, 58 | .icon-1ihkOt { 59 | color: var(--background-tertiary) !important; 60 | } 61 | .listItem-GuPuDH, 62 | .guilds-1SWlCJ, 63 | .wrapper-3Njo_c { 64 | width: 68px; 65 | } 66 | .expandedFolderBackground-1cujaW { 67 | left: 10px; 68 | } 69 | 70 | // Server list Unread indicators 71 | .lowerBadge-3WTshO > div { 72 | background-color: #{$color-red} !important; 73 | } 74 | .unreadMentionsBar-ZXXoOH { 75 | .unreadMentionsIndicatorBottom-3RJMnQ &, 76 | .unreadMentionsIndicatorTop-2bTgUU & { 77 | background-color: #{$color-red} !important; 78 | box-shadow: var(--low-shadow) #{$color-red}; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /scss/views/app/_student-hub.scss: -------------------------------------------------------------------------------- 1 | // Scroller for student hub view 2 | .scroller-1ghLQ2 { 3 | &.auto-2K3UW5 { 4 | &.scrollerBase-_bVAAt { 5 | padding: 32px !important; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /scss/views/app/_toolbars-tooltips.scss: -------------------------------------------------------------------------------- 1 | @import './toolbars-tooltips/top-toolbar'; 2 | -------------------------------------------------------------------------------- /scss/views/app/modals-menus/_emoji-picker.scss: -------------------------------------------------------------------------------- 1 | // Emoji picker popout 2 | .positionLayer-1cndvf { 3 | .layer-2aCOJ3 { 4 | transform: translateY(-10px); 5 | } 6 | } 7 | .contentWrapper-3vHNP2 { 8 | background-color: var(--background-tertiary); 9 | } 10 | 11 | // Headers 12 | .categorySection-3j71bm { 13 | > .wrapper-1NNaWG.header-1ULbqO { 14 | padding-top: 4px; 15 | background-color: var(--background-tertiary); 16 | } 17 | } 18 | .listItems-6eZzQ1 { 19 | > div { 20 | > .wrapper-1NNaWG.packHeader-w9jpYl { 21 | padding-top: 4px; 22 | background-color: var(--background-tertiary); 23 | } 24 | } 25 | } 26 | .inspector-DFKXwB { 27 | &, 28 | &.inspector-2A2Chb { 29 | background-color: var(--background-tertiary); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/views/app/modals-menus/_inbox-popout.scss: -------------------------------------------------------------------------------- 1 | // Inbox popup, mentions tab 2 | .header-145e10 { 3 | &.header-1w9Q93 { 4 | > .tabBar-1qdMr5 > div { 5 | background-color: var(--background-primary); 6 | &:hover, 7 | &.active-1grPyy { 8 | @include box-shadow($color-hover--lighter, 'small', 1); 9 | background-color: #{$color-hover--lighter} !important; 10 | } 11 | } 12 | > div > .secondary-2bzKEX { 13 | > svg { 14 | color: var(--text-normal); 15 | } 16 | &:hover { 17 | background-color: #{$color-accent}; 18 | > svg { 19 | color: var(--text-dark); 20 | } 21 | } 22 | } 23 | } 24 | } 25 | .messagesPopout-eVzQcI { 26 | &.scroller-MIi2ab { 27 | &.thin-31rlnD { 28 | &.scrollerBase-_bVAAt { 29 | > div > .container-iA3Qrz { 30 | padding-left: 16px !important; 31 | padding-right: 16px !important; 32 | > .channelHeader-DFRX8q { 33 | border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; 34 | > .closeButton-3CiW2j { 35 | transform: translateX(-12px); 36 | } 37 | } 38 | > .messageContainer-3VTXBC { 39 | border-radius: 0 0 var(--border-radius-1) var(--border-radius-1); 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } 46 | 47 | // Inbox popup, unreads tab 48 | .recentMentionsPopout-2bI1ZN { 49 | > .scroller-145h9c.thin-31rlnD.scrollerBase-_bVAAt { 50 | background-color: var(--background-tertiary); 51 | > div > .channel-3NJZ1V { 52 | > .channelHeader-DFRX8q { 53 | @include border-radius('all', 'large'); 54 | margin-bottom: 8px; 55 | } 56 | > .messages-23can0 { 57 | @include border-radius('all', 'large'); 58 | } 59 | } 60 | } 61 | } 62 | .channel-3NJZ1V { 63 | > .channelHeader-DFRX8q { 64 | > .button-1_oXub { 65 | transform: translateX(-12px) !important; 66 | } 67 | > .collapseButton-39-IRc, 68 | > div[role='button'], 69 | > .channelNameSection-3OgeRa { 70 | transform: translateX(12px); 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /scss/views/app/modals-menus/_scrollers.scss: -------------------------------------------------------------------------------- 1 | // Scrollers 2 | .scroller-2MALzE { 3 | 4 | // Emoji server list 5 | &.list-obNEuP { 6 | > div[role='list'] > div { 7 | padding-top: 2px; 8 | &[data-list-item-id='NO_LIST___expression-guild-0'] { 9 | padding-bottom: 8px; 10 | } 11 | } 12 | } 13 | 14 | // Slash commands popup / autocomplete 15 | &.list-2u03C- { 16 | &.thin-31rlnD { 17 | &.scrollerBase-_bVAAt { 18 | &, 19 | .wrapper-1NNaWG.categoryHeader-OpJ1Ly, 20 | .selectable-1MM9tu { 21 | background-color: #{$color-background-tertiary}; 22 | } 23 | .selectable-1MM9tu.selected-3H3-RC { 24 | background-color: #{$color-hover--lighter} !important; 25 | } 26 | } 27 | } 28 | } 29 | 30 | // Call UI spacing 31 | &.videoGrid-1tZm-F { 32 | &.thin-31rlnD { 33 | &.scrollerBase-_bVAAt { 34 | &.fade-1R6FHN { 35 | > .listItems-6eZzQ1 { 36 | padding-right: 8px !important; 37 | } 38 | } 39 | } 40 | } 41 | } 42 | 43 | // Menus / popup lists 44 | &.list-13gwFt { 45 | &.thin-31rlnD { 46 | &.scrollerBase-_bVAAt { 47 | > .listItems-6eZzQ1 { 48 | inset: 6px 8px 6px 8px !important; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | .scroller-1bVxF5 { 55 | &.thin-31rlnD { 56 | &.scrollerBase-_bVAAt { 57 | padding: 6px 8px !important; 58 | } 59 | } 60 | } 61 | 62 | // Menu / popup scrollers 63 | .submenuContainer-3EVTeH { 64 | > .layer-2aCOJ3 { 65 | padding: 0 12px !important; 66 | > .submenuPaddingContainer-_k62dJ { 67 | padding: 0 !important; 68 | } 69 | } 70 | } 71 | .layerContainer-2v_Sit { 72 | .layer-2aCOJ3 { 73 | > .menu-1QACrS.styleFlexible-x0_sIC { 74 | &, 75 | .submenu-1apzyU.menu-1QACrS { 76 | @include border-radius('all', 'medium'); 77 | background-color: $color-background-tertiary; 78 | } 79 | } 80 | > .animatorRight-xAUgTY { 81 | &.translate-PeW1wK { 82 | &.didRender-2SiRlm { 83 | margin-left: 8px; 84 | } 85 | } 86 | } 87 | } 88 | } 89 | .scroller-1bVxF5.thin-31rlnD.scrollerBase-_bVAAt > div > div.focused-3qFvc8, 90 | .submenuContainer-3EVTeH > div.focused-3qFvc8, 91 | .submenuContainer-3EVTeH > div > div > div > div > div.focused-3qFvc8, 92 | .scroller-1bVxF5.thin-31rlnD.scrollerBase-_bVAAt > div.focused-3qFvc8 { 93 | background-color: #{$color-hover--lighter} !important; 94 | } 95 | .modalRoot-vB2FPC, 96 | .modal-3Hrb0S.root-g14mjS, 97 | .root-g14mjS, 98 | .root-g14mjS > .footer-31IekZ { 99 | @include border-radius('all', 'large'); 100 | } 101 | .option-3KoAJB { 102 | @include border-radius('all', 'large'); 103 | margin: 8px; 104 | color: var(--text-normal) !important; 105 | > div { 106 | color: var(--text-normal); 107 | } 108 | &:hover { 109 | background-color: var(--background-tertiary); 110 | color: var(--text-normal); 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /scss/views/app/toolbars-tooltips/_top-toolbar.scss: -------------------------------------------------------------------------------- 1 | @import './top-toolbar/search'; 2 | 3 | // General Toolbar 4 | .topPill-30KHOu { 5 | &:not(.container-7uh5fX>div) { 6 | @include border-radius('all', 'medium'); 7 | height: 38px; 8 | } 9 | } 10 | .focusLock-Ns3yie .top-28JiJ- .item-PXvHYJ, 11 | .repoHeader-2KfNvH .top-28JiJ- .item-PXvHYJ, 12 | .header-2-Imhb .item-PXvHYJ, 13 | .contentWrapper-SvZHNd .navButton-2gQCx-, 14 | .searchResultsWrap-3-pOjs .tab-2j5AEF, 15 | .container-7uh5fX .tab-PQvTH4, 16 | .container-2PDP7D .tab-XC_yrg { 17 | @include border-radius('all', 'medium'); 18 | padding: 0 25px; 19 | height: 30px; 20 | border: 0; 21 | } 22 | .container-7uh5fX .tab-17bjMB { 23 | @include border-radius('all', 'medium'); 24 | padding: 0 10px; 25 | border: 0; 26 | } 27 | .contentWrapper-SvZHNd { 28 | .container-3ISnnM, 29 | .wrapper-2iFQJ9, 30 | .wrapper-1rqM3x { 31 | margin-top: 16px; 32 | } 33 | } 34 | .container-ZMc96U .topPill-30KHOu .item-PXvHYJ { 35 | @include border-radius('all', 'medium'); 36 | margin-top: 4px; 37 | height: 30px; 38 | } 39 | .contentWidth-xLB44s .top-28JiJ- .item-PXvHYJ { 40 | @include border-radius('all', 'medium'); 41 | padding: 5px 25px 0; 42 | height: 30px; 43 | border: 0; 44 | } 45 | .tabBarItem-2QyJ0U { 46 | @include border-radius('all', 'medium'); 47 | padding: 5px 8px; 48 | } 49 | .top-28JiJ- { 50 | .brand-1Zl8en.selected-3s45Ha.item-PXvHYJ { 51 | background-color: #{$color-accent}; 52 | color: var(--interactive-selected); 53 | } 54 | .item-PXvHYJ { 55 | border: none; 56 | } 57 | } 58 | .tabBarItem-30Te4- { 59 | margin-right: 0; 60 | } 61 | .focusLock-Ns3yie .tabBarContainer-37hZsr { 62 | padding-right: 20px; 63 | } 64 | .container-2PDP7D .tab-XC_yrg { 65 | text-align: center; 66 | line-height: 30px; 67 | } 68 | 69 | // Top Toolbar 70 | .toolbar-3_r2xA { 71 | > .inviteToolbar-2k2nqz { 72 | &:first-child { 73 | > div { 74 | border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); 75 | } 76 | } 77 | } 78 | > .iconWrapper-2awDjA, 79 | > div > .iconWrapper-2awDjA, 80 | > .inviteToolbar-2k2nqz > .iconWrapper-2awDjA, 81 | > .anchor-1MIwyf, 82 | > :last-child { 83 | background-color: #{$color-background-primary}; 84 | } 85 | .anchor-1MIwyf { 86 | margin: 1px; 87 | height: 36px !important; 88 | align-self: baseline; 89 | svg path { 90 | transform: translate(-1px, -2px); 91 | } 92 | &:hover { 93 | background-color: #{$color-background-primary} !important; 94 | div { 95 | background-color: #{$color-accent}; 96 | } 97 | } 98 | } 99 | .clickable-ZD7xvu { 100 | padding: 7px 7px 29px; 101 | margin: 1px; 102 | &:hover { 103 | background-color: var(--button-background-hover); 104 | } 105 | } 106 | .chatButtonSpacer-16BvMu { 107 | width: 40px; 108 | margin-right: 10px; 109 | pointer-events: none; 110 | transform: translateY(8px); 111 | } 112 | .streamQualityIndicator-n62BFt + div { 113 | border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); 114 | margin-left: 12px; 115 | } 116 | > div { 117 | &.streamQualityIndicator-n62BFt + div { 118 | .lookBlank-21BCro.colorBrand-I6CyqQ.grow-2sR_-F { 119 | > div { 120 | border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); 121 | } 122 | } 123 | } 124 | &:first-child:not(.streamQualityIndicator-n62BFt) { 125 | .lookBlank-21BCro.colorBrand-I6CyqQ.grow-2sR_-F { 126 | > div { 127 | border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); 128 | } 129 | } 130 | } 131 | > .lookBlank-21BCro.colorBrand-I6CyqQ.grow-2sR_-F { 132 | padding: 0 !important; 133 | margin: 0 !important; 134 | > div { 135 | background-color: var(--background-primary); 136 | padding: 6px 8px !important; 137 | margin: 1px; 138 | > svg { 139 | color: var(--text-normal) !important; 140 | } 141 | } 142 | &:hover > div { 143 | background-color: var(--button-background-hover); 144 | > svg { 145 | color: var(--text-dark) !important; 146 | } 147 | } 148 | } 149 | } 150 | .lastButton-3QdII0 { 151 | width: 100%; 152 | } 153 | > :last-child { 154 | margin-left: 1px; 155 | height: 36px; 156 | width: 40px; 157 | border-radius: 0 var(--border-radius-1) var(--border-radius-1) 0; 158 | > div, 159 | > button > div { 160 | border-radius: 0 var(--border-radius-1) var(--border-radius-1) 0; 161 | } 162 | &:hover { 163 | background-color: var(--button-background-hover); 164 | } 165 | } 166 | > :only-child, 167 | > :only-child > button { 168 | border-radius: var(--border-radius-1) !important; 169 | } 170 | } 171 | 172 | // This fucking chat button. it is so bad. oh my god. please discord, put it actually INSIDE the top toolbar 173 | .chatButton-10jXXp { 174 | @include border-radius('right', 'large'); 175 | @include border-radius('left', 'none'); 176 | top: 12px; 177 | right: 8px; 178 | width: 40px; 179 | height: 36px; 180 | background-color: var(--background-primary); 181 | svg { 182 | color: var(--text-normal) !important; 183 | } 184 | &:hover { 185 | background-color: #{$color-accent}; 186 | svg { 187 | color: var(--text-dark) !important; 188 | } 189 | } 190 | } 191 | .inviteToolbar-2k2nqz > div { 192 | @include border-radius('left', 'large'); 193 | padding: 7px 7px 29px 10px !important; 194 | background-color: var(--button-background); 195 | margin: 1px; 196 | } 197 | .disabledButtonOverlay-1_LsqE { 198 | pointer-events: none; 199 | } 200 | .icon-iDUzSK { 201 | align-items: normal; 202 | display: flex; 203 | } 204 | 205 | // toolbar icon hover fx 206 | .topControls-KKImPZ.controlSection-2h3cS0 > div > div > section > .toolbar-3_r2xA > .button-1xaXFt.iconWrapper-2awDjA.clickable-ZD7xvu > svg { 207 | color: var(--settings-icon-color) !important; 208 | } 209 | .title-31SJ6t { 210 | &.container-ZMc96U { 211 | &.themed-Hp1KC_ { 212 | margin-top: 4px; 213 | > .toolbar-3_r2xA { 214 | > div[role='button'] { 215 | > svg, 216 | > svg > path { 217 | cursor: pointer !important; 218 | } 219 | } 220 | } 221 | } 222 | } 223 | } 224 | .toolbar-3_r2xA > :first-child:not(.inviteToolbar-3F-l2g):not(.streamQualityIndicator-2Te7mW), 225 | .streamQualityIndicator-2Te7mW + .clickable-ZD7xvu, 226 | .toolbar-3_r2xA > :first-child > button { 227 | border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); 228 | } 229 | .icon-1ELUnB.iconWrapper-2awDjA.clickable-ZD7xvu[aria-label='Threads'] > svg { 230 | transform: translateY(10px) !important; 231 | } 232 | 233 | // Top pill bar container 234 | .tabBar-ra-EuL.topPill-3DJJNV, 235 | .children-3xh0VB { 236 | overflow: visible; 237 | } 238 | .container-ZMc96U.themed-Hp1KC_ { 239 | padding-top: 4px; 240 | margin-top: 4px; 241 | } 242 | 243 | // Top pill friends list tabs 244 | .tabBar-ra-EuL { 245 | .item-3mHhwr { 246 | &.item-3XjbnG { 247 | @include border-radius('all', 'medium'); 248 | background-color: var(--background-tertiary); 249 | &.selected-g-kMVV, 250 | &[aria-selected='true'] { 251 | @include box-shadow($color-hover--lighter, 'small', 0.6); 252 | background-color: #{$color-hover--lighter}; 253 | } 254 | &:not(.disabled-1nofHP) { 255 | &[aria-selected='true'], 256 | &[aria-selected='true']:hover, 257 | &:hover { 258 | cursor: normal !important; 259 | background-color: #{$color-hover--lighter}; 260 | } 261 | } 262 | &[aria-controls='add_friend-tab'] { 263 | color: var(--text-dark) !important; 264 | background-color: #{$color-green} !important; 265 | cursor: pointer !important; 266 | @include box-shadow($color-green, 'small', 1); 267 | overflow: visible; 268 | &:hover, 269 | &[aria-selected='true'] { 270 | color: var(--text-dark) !important; 271 | background-color: #{$color-green--lighter} !important; 272 | cursor: pointer !important; 273 | } 274 | } 275 | } 276 | } 277 | } 278 | 279 | // Top pill add friend tab 280 | .addFriendInputWrapper-kkoSV9 { 281 | background-color: var(--background-tertiary); 282 | > .inputWrapper-1YNMmM.addFriendInput-1Ta-rO > input { 283 | background-color: transparent; 284 | } 285 | } 286 | 287 | // Friends pending page 288 | .emptyStateContainer-1NHrfT, 289 | .emptyState-30PyIN { 290 | .image-20MDYu { 291 | mix-blend-mode: luminosity; 292 | } 293 | } 294 | 295 | // Toolbar icons 296 | .iconWrapper-2awDjA { 297 | &.clickable-ZD7xvu { 298 | &:hover { 299 | background-color: #{$color-accent}; 300 | color: var(--background-primary); 301 | > svg, 302 | > svg > foreignObject > svg { 303 | color: var(--background-primary); 304 | } 305 | 306 | // Green icons 307 | &[aria-label='Start Voice Call'], 308 | &[aria-label='Start Video Call'], 309 | &[aria-label='New Group DM'] { 310 | background-color: #{$color-green}; 311 | color: var(--background-primary); 312 | } 313 | } 314 | } 315 | } 316 | -------------------------------------------------------------------------------- /scss/views/app/toolbars-tooltips/top-toolbar/_search.scss: -------------------------------------------------------------------------------- 1 | // Search bar 2 | .search-39IXmY { 3 | @include border-radius('all', 'large'); 4 | margin: { 5 | top: 1px; 6 | right: 8px; 7 | bottom: -1px; 8 | left: 8px; 9 | } 10 | order: -1; 11 | padding: 5px 3px; 12 | background-color: $color-background-primary; 13 | } 14 | .search-2Mwzzq, 15 | .searchBar-jGtisZ { 16 | background-color: transparent !important; 17 | } 18 | .DraftEditor-root { 19 | transform: translateY(-4px); 20 | .searchBar-jGtisZ[aria-expanded='true'] & { 21 | border-color: var(--background-modifier-selected); 22 | } 23 | } 24 | .searchBar-jGtisZ { 25 | background-color: transparent; 26 | height: 26px; 27 | width: 221px; 28 | &[aria-expanded='true'] { 29 | .icon-3cZ1F_, 30 | .icon-1nNws_:hover .icon-3cZ1F { 31 | color: var(--interactive-selected) !important; 32 | } 33 | } 34 | > .icon-1nNws_ { 35 | background-color: $color-background-primary; 36 | height: 36px; 37 | width: 36px; 38 | @include border-radius('all', 'large'); 39 | > div > svg { 40 | color: $color-text--muted; 41 | } 42 | } 43 | &:hover > .icon-1nNws_ { 44 | background-color: $color-accent !important; 45 | > div > svg { 46 | color: $color-text--dark; 47 | } 48 | } 49 | .focused-1xh-wG &, 50 | .open-1F8u2c & { 51 | width: 221px !important; 52 | } 53 | } 54 | .public-DraftEditorPlaceholder-root { 55 | color: $color-white--darker !important; 56 | padding: { 57 | top: 6px !important; 58 | right: 4px !important; 59 | bottom: 4px !important; 60 | left: 6px !important; 61 | } 62 | } 63 | .DraftEditor-editorContainer { 64 | margin: 4px; 65 | } 66 | .searchFilter-2ESiM3 { 67 | background-color: var(--background-modifier-hover) !important; 68 | } 69 | .layer-2aCOJ3 { 70 | @include border-radius('all', 'large'); 71 | 72 | // Search bar popup 73 | .container-2McqkF.elevationBorderHigh-3drnJX { 74 | @include border-radius('all', 'large'); 75 | background-color: $color-background-tertiary; 76 | ul[role='group'] { 77 | background-color: $color-background-tertiary; 78 | .option-ayUoaq { 79 | @include border-radius('all', 'medium'); 80 | &:after { 81 | background: linear-gradient(90deg, transparent, $color-background-tertiary 100%) !important; 82 | } 83 | } 84 | } 85 | .queryContainer-ZunrLZ { 86 | background-color: $color-background-quaternary; 87 | } 88 | .resultsGroup-cfY57t { 89 | @include border-radius('all', 'large'); 90 | } 91 | } 92 | 93 | // Pinned messages popup 94 | > div[aria-modal='true'] { 95 | &, 96 | > .messagesPopoutWrap-3zryHW { 97 | @include border-radius('all', 'large'); 98 | } 99 | } 100 | } 101 | 102 | // Search bar results panel 103 | .searchResultsWrap-5RVOkx { 104 | margin-right: 10px; 105 | margin-bottom: 10px; 106 | background-color: transparent !important; 107 | > .scroller-3iiyhZ.thin-31rlnD.scrollerBase-_bVAAt { 108 | @include border-radius('all', 'large'); 109 | background-color: $color-background-primary !important; 110 | } 111 | } 112 | 113 | // Pinned messages popup 114 | .messagesPopoutWrap-3zryHW { 115 | > .messagesPopout-eVzQcI { 116 | &.thin-31rlnD { 117 | &.scrollerBase-_bVAAt { 118 | background-color: $color-background-tertiary !important; 119 | } 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /scss/views/channel/_attached-bars.scss: -------------------------------------------------------------------------------- 1 | // Attached Bars 2 | .popout_5155 > .channelTextArea-1FufC0.channelTextArea-1VQBuV, 3 | .attachedBars-2BCP3l > div > .clipContainer-31nYlH, 4 | .clipContainer-31nYlH.container-A2jo65 { 5 | background-color: transparent; 6 | } 7 | .clipContainer-31nYlH { 8 | > div, 9 | > div > div { 10 | overflow: visible; 11 | } 12 | > .container-A2jo65 { 13 | @include box-shadow($color-accent, 'small', 1); 14 | } 15 | } 16 | .replyBar-1oi75v { 17 | background-color: #{$color-accent}; 18 | > div > div, 19 | > div > div > span, 20 | > .actions-1mkm4H > div[aria-checked='false'] > .mentionButton-3C5YMI { 21 | color: var(--text-dark) !important; 22 | } 23 | > .actions-1mkm4H { 24 | > div { 25 | > svg > path { 26 | fill: var(--text-dark) !important; 27 | } 28 | &[aria-checked='true'] > .mentionButton-3C5YMI { 29 | color: #{$color-blue} !important; 30 | } 31 | } 32 | } 33 | } 34 | .sansAttachButton-td2irx { 35 | padding-right: 16px; 36 | } 37 | .form-2fGMdU { 38 | padding: 0 24px; 39 | } 40 | .sprite-2iCowe { 41 | filter: none !important; 42 | transform: none !important; 43 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' id='twemoji-1f600-mono'%3E%3Cdefs/%3E%3Cpath id='circle2' style='fill:%23bde6fb;fill-opacity:1' d='M 17.910156 0 A 18 18 0 0 0 0 18 A 18 18 0 0 0 18 36 A 18 18 0 0 0 36 18 A 18 18 0 0 0 18 0 A 18 18 0 0 0 17.910156 0 z M 12 10 A 2.5 3.5 0 0 1 14.5 13.5 A 2.5 3.5 0 0 1 12 17 A 2.5 3.5 0 0 1 9.5 13.5 A 2.5 3.5 0 0 1 12 10 z M 24 10 A 2.5 3.5 0 0 1 26.5 13.5 A 2.5 3.5 0 0 1 24 17 A 2.5 3.5 0 0 1 21.5 13.5 A 2.5 3.5 0 0 1 24 10 z M 8.71875 19.966797 C 8.8198535 19.971846 8.915125 19.983625 9 20 C 11.973 20.578 14.377 21 18 21 C 21.623 21 24.027 20.578 27 20 C 27.679 19.868 29 20 29 22 C 29 26 24.404 31 18 31 C 11.595 31 7 26 7 22 C 7 20.25 8.0110254 19.931455 8.71875 19.966797 z M 9 22 C 9 22 11 26 18 26 C 25 26 27 22 27 22 C 27 22 24 23 18 23 C 12 23 9 22 9 22 z ' /%3E%3C/svg%3E"); 44 | background: var(--interactive-normal); 45 | background-image: none !important; 46 | } 47 | 48 | // Jump to present bar 49 | .jumpToPresentBar-1cEnH0.barBase-3xxDXu { 50 | background-color: #{$color-accent}; 51 | border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; 52 | transform: translateY(-60px); 53 | @include box-shadow($color-accent, 'small', 1); 54 | padding-bottom: 4px; 55 | padding-top: 4px; 56 | > button, 57 | > button > svg > path { 58 | color: var(--text-dark); 59 | fill: var(--text-dark); 60 | } 61 | } 62 | .input-2A_zIr { 63 | padding: 0 8px; 64 | } 65 | .messagesErrorBar-nyJGU7 { 66 | background-color: var(--button-destructive); 67 | } 68 | 69 | // New messages indicator 70 | div[id='---new-messages-bar'] { 71 | &, 72 | > span > svg > path { 73 | color: #{$color-accent} !important; 74 | fill: #{$color-accent} !important; 75 | border-color: #{$color-accent} !important; 76 | } 77 | > span { 78 | color: var(--text-dark); 79 | background-color: #{$color-accent}; 80 | } 81 | > .content-3spvdd { 82 | color: var(--text-dark); 83 | } 84 | } 85 | .messagesWrapper-RpOMA3 { 86 | overflow: hidden; 87 | @include border-radius('all', 'large'); 88 | } 89 | .newMessagesBar-1hF-9G { 90 | background-color: #{$color-accent} !important; 91 | @include box-shadow($color-accent, 'small', 1); 92 | > button { 93 | color: var(--text-dark); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /scss/views/channel/_message-form.scss: -------------------------------------------------------------------------------- 1 | // Message Form 2 | .form-3gdLxP { 3 | position: absolute; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | pointer-events: none; 8 | transform: translateY(8px); 9 | &:before { 10 | display: none; 11 | } 12 | > div { 13 | @include box-shadow($color-hover, 'large', 0.6); 14 | pointer-events: all; 15 | } 16 | > div, 17 | > div > div, 18 | > div > div > div, 19 | > div > div > div > div { 20 | border-radius: var(--border-radius-1) !important; 21 | } 22 | } 23 | .scrollerInner-2PPAp2 > .scrollerSpacer-3AqkT9 { 24 | padding-bottom: 56px; 25 | } 26 | 27 | // Emoji/sticker buttons 28 | .buttonContainer-28fw2U { 29 | > button > div > div { 30 | color: var(--text-normal); 31 | } 32 | &:hover { 33 | > button { 34 | > div > div { 35 | color: #{$color-accent}; 36 | } 37 | &[aria-label='Select emoji'] > div > div { 38 | color: #{$color-accent}; 39 | background: #{$color-accent}; 40 | } 41 | } 42 | } 43 | } 44 | 45 | // Send button / bar buttons 46 | .buttons-uaqb-5 { 47 | padding-right: 10px; 48 | margin-right: 0 !important; 49 | > .separator-3ng7S5 > .buttonContainer-6W2Ep3 > button[disabled] > div > div > svg > path, 50 | .buttonWrapper-3YFQGJ.buttonChild-33lB5F.disabled-3wvGkX { 51 | fill: var(--text-secondary) !important; 52 | } 53 | 54 | // Hide gif/sticker buttons in message bar 55 | > .buttonContainer-2lnNiN { 56 | &:nth-of-type(3n+1), 57 | &:nth-of-type(3n+2) { 58 | display: var(--gif-sticker-buttons); 59 | } 60 | } 61 | } 62 | div > .activeButtonChild-2hgLAO > svg > path, 63 | .buttons-uaqb-5 > .separator-3ng7S5 > .buttonContainer-6W2Ep3 > button > div > div > svg > path { 64 | fill: #{$color-accent} !important; 65 | } 66 | .navButton-2gQCx-.navItem-3Wp_oJ.button-f2h6uQ.lookBlank-3eh9lL.colorBrand-3cPPsm { 67 | background-color: var(--background-primary) !important; 68 | &:hover { 69 | background-color: #{$color-hover--lighter} !important; 70 | > div > div > div { 71 | color: #{$color-accent} !important; 72 | } 73 | } 74 | &[aria-selected='true'] { 75 | background-color: #{$color-hover--darker} !important; 76 | } 77 | } 78 | 79 | // Upload modal 80 | .menu-1QACrS.styleFlexible-x0_sIC.menu-1dOGCq { 81 | @include box-shadow($color-hover, 'medium', 1); 82 | transform: translateY(-6px); 83 | } 84 | 85 | // Typing indicator 86 | .typing-2J1mQU { 87 | transform: translateY(-2px); 88 | box-shadow: none !important; 89 | padding: 0 0.4rem; 90 | } 91 | 92 | // Upload button 93 | .attachButton-2WznTc:hover > div > svg > path { 94 | fill: #{$color-accent} !important; 95 | } 96 | 97 | // EMOJI POPUP AUTOCOMPLETE 98 | .autocomplete-3NRXG8 { 99 | &.autocomplete-3jLKbj { 100 | &.autocompleteAttached-bt_md- { 101 | transform: translateY(-10px); 102 | } 103 | } 104 | } 105 | .scroller-18M1mG { 106 | &.thin-31rlnD { 107 | &.scrollerBase-_bVAAt { 108 | background-color: var(--background-tertiary); 109 | > div > .base-2v-uc0.selectable-1MM9tu.selected-3H3-RC { 110 | background-color: #{$color-hover--lighter} !important; 111 | } 112 | } 113 | } 114 | } 115 | 116 | // STICKER POPUP AUTOCOMPLETE 117 | .channelTextArea-1FufC0 { 118 | &.channelTextArea-1VQBuV { 119 | > .container-1ZA19X { 120 | background-color: var(--background-tertiary); 121 | transform: translateX(38px); 122 | @include box-shadow($color-hover, 'medium', 1); 123 | @include border-radius('all', 'large'); 124 | > .containerBackground-Ang24O { 125 | display: none; 126 | } 127 | } 128 | 129 | // Attached bars 130 | > .attachedBars-2BCP3l { 131 | background-color: #{$color-accent}; 132 | &, 133 | > div > .clipContainer-31nYlH { 134 | overflow: visible; 135 | } 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /scss/views/channel/_messages.scss: -------------------------------------------------------------------------------- 1 | // Chat message 2 | .message-2CShn3 { 3 | transition: background-color 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 4 | &:hover, 5 | &.selected-2LX7Jy { 6 | background-color: $color-hover--darker !important; 7 | } 8 | 9 | // Action buttons 10 | .buttonContainer-1502pf { 11 | border: none; 12 | .buttons-3dF5Kd { 13 | border: none; 14 | overflow: visible; 15 | .wrapper-2vIMkT { 16 | @include border-radius('all', 'medium'); 17 | @include box-shadow($color-hover, 'medium', 0.6); 18 | overflow: visible; 19 | border: none; 20 | .button-3bklZh { 21 | background-color: $color-background-tertiary; 22 | border: none; 23 | &:hover, 24 | &.selected-69H4ua { 25 | @include box-shadow($color-accent, 'small', 0.7); 26 | background-color: $color-accent; 27 | > svg { 28 | color: $color-text--dark !important; 29 | } 30 | } 31 | &:first-of-type { 32 | @include border-radius('left', 'medium'); 33 | } 34 | &:last-of-type { 35 | @include border-radius('right', 'medium'); 36 | } 37 | } 38 | .separator-PzTEkx { 39 | display: none; 40 | } 41 | &:hover { 42 | @include box-shadow($color-hover, 'large', 0.8); 43 | } 44 | } 45 | } 46 | } 47 | } 48 | .chatContent-3KubbW { 49 | @include border-radius('all', 'medium'); 50 | margin-right: 10px; 51 | margin-left: 0; 52 | background-color: $color-background-primary; 53 | overflow: hidden; 54 | } 55 | .embedFull-1HGV2S { 56 | border: none; 57 | } 58 | .embedMedia-1mdWSP, 59 | .input-2A_zIr { 60 | @include border-radius('all', 'medium'); 61 | } 62 | .grid-1nZz7S { 63 | padding: 0.5rem 1rem 1rem; 64 | } 65 | 66 | // Message reactions 67 | .reactions-3ryImn { 68 | margin-top: 4px; 69 | .reaction-3vwAF2 { 70 | background-color: $color-hover--lighter; 71 | border-color: transparent; 72 | @include border-radius('all', 'medium'); 73 | &.reactionMe-1PwQAc { 74 | @include background-opacity($color-accent, 0.4); 75 | border-color: transparent; 76 | &:hover { 77 | @include background-opacity($color-accent, 0.3); 78 | } 79 | } 80 | &:hover { 81 | @include background-opacity($color-accent, 0.2); 82 | } 83 | } 84 | } 85 | 86 | // Inline blocks / code / sys messages 87 | [id^='message-accessories'] { 88 | padding-top: 6px; 89 | } 90 | .container-3i3IzO { 91 | &.systemMessageContainer-3F3V9U { 92 | background-color: $color-background-tertiary; 93 | @include border-radius('all', 'medium'); 94 | } 95 | } 96 | 97 | // Inline code blocks 98 | .markup-2BOw-j code { 99 | background-color: $color-background-tertiary; 100 | @include border-radius('all', 'medium'); 101 | } 102 | code.inline { 103 | background-color: $color-background-tertiary; 104 | } 105 | .attachmentContentItem-UKeiCx { 106 | .footer-GXWBBp { 107 | @include border-radius('bottom', 'medium'); 108 | background-color: $color-background-tertiary; 109 | color: $color-text--soft; 110 | .downloadSection-20OayS { 111 | color: $color-text--soft; 112 | } 113 | } 114 | .textContainer-36wgKK { 115 | @include border-radius('top', 'medium'); 116 | background-color: $color-background-tertiary; 117 | } 118 | } 119 | 120 | // Inline datestamps 121 | .timestamp-6-ptG3 { 122 | background-color: #{$color-hover}; 123 | } 124 | .autocomplete-3l_oCd, 125 | .autocomplete-1vrmpx { 126 | background-color: var(--background-tertiary); 127 | border: 1px solid #{$color-border}; 128 | @include border-radius('all', 'large'); 129 | } 130 | .autocomplete-1vrmpx .selected-3xBBKs, 131 | .embedFull-1HGV2S { 132 | background-color: var(--background-tertiary); 133 | } 134 | .selected-1Tbx07 { 135 | background-color: var(--background-modifier-hover); 136 | @include border-radius('all', 'medium'); 137 | } 138 | .categoryHeader-O1zU94 { 139 | background-color: var(--background-secondary); 140 | } 141 | 142 | // Mentions 143 | .wrapper-3WhCwL { 144 | background: #bde6fb30 !important; 145 | color: #{$color-accent}; 146 | } 147 | .mentioned-Tre-dv:before { 148 | background-color: #{$color-accent} !important; 149 | } 150 | .scroller-1-nKid, 151 | .reactors-Blmlhw { 152 | padding-right: 8px !important; 153 | background-color: var(--background-tertiary) !important; 154 | } 155 | .remove-3V-yj8 { 156 | color: var(--settings-icon-color) !important; 157 | &:hover { 158 | background-color: transparent !important; 159 | color: var(--text-normal) !important; 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /scss/views/channel/_threads.scss: -------------------------------------------------------------------------------- 1 | // Archived thread, fullscreen view 2 | .chatHeaderBar-2fUORh { 3 | @include border-radius('top', 'large'); 4 | } 5 | .spine--Wla_O { 6 | color: var(--text-muted); 7 | } 8 | .threadSidebar-1o3BTy { 9 | margin: 0 10px; 10 | background-color: var(--background-tertiary); 11 | &, 12 | .chatContent-3KubbW { 13 | margin-left: 0; 14 | } 15 | .chat-1WUuAG { 16 | @include border-radius('all', 'large'); 17 | background-color: var(--background-primary); 18 | } 19 | } 20 | .chatHeaderBar-4vZS1x { 21 | border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; 22 | border-bottom: 1px solid #{$color-border}; 23 | } 24 | .channelTextAreaInner-1WnnRS { 25 | @include border-radius('all', 'large'); 26 | background-color: var(--background-primary); 27 | } 28 | .resizeHandle-PBRzPC { 29 | transform: translateX(-2px); 30 | margin-left: -6px; 31 | position: relative; 32 | z-index: 20; 33 | } 34 | .container-3XgAHv { 35 | background-color: transparent; 36 | .toolbar-3_r2xA .iconWrapper-2awDjA.clickable-ZD7xvu { 37 | svg { 38 | margin-right: -2px; 39 | } 40 | } 41 | } 42 | .chat-1-OBC7 { 43 | margin-top: 6px; 44 | background-color: transparent; 45 | &:before { 46 | display: none; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/views/forum/_post.scss: -------------------------------------------------------------------------------- 1 | .row-uezxzk { 2 | padding: { 3 | bottom: 14px; 4 | } 5 | .container-2qVG6q { 6 | border: none; 7 | &:active, 8 | &:hover { 9 | @include box-shadow($color-hover, 'large', 0.6); 10 | transform: none !important; 11 | } 12 | &.isOpen-2OXbFs { 13 | @include box-shadow($color-hover--darker, 'large', 0.2); 14 | background-color: $color-hover--darker !important; 15 | } 16 | } 17 | .body-hCVwsC { 18 | &.hasUnreads-3kKLnS { 19 | > .header-2W779F { 20 | .channelNameSpan-2CGJt7 { 21 | color: $color-text; 22 | } 23 | .pinIcon-zVODC5 { 24 | background-color: $color-accent; 25 | svg { 26 | path { 27 | fill: $color-text--dark !important; 28 | } 29 | } 30 | } 31 | } 32 | > .message-1zs6Od { 33 | .messageContent-1SOr75 { 34 | margin: { 35 | top: 2px; 36 | } 37 | color: $color-text; 38 | } 39 | } 40 | } 41 | > .header-2W779F { 42 | .channelNameSpan-2CGJt7 { 43 | color: $color-white--darker; 44 | } 45 | } 46 | > .message-1zs6Od { 47 | .messageContent-1SOr75 { 48 | margin: { 49 | top: 2px; 50 | } 51 | color: $color-white--darker; 52 | } 53 | } 54 | } 55 | .footer-3dzxcR { 56 | .reaction-102jx9 { 57 | @include border-radius('all', 'medium'); 58 | background-color: $color-hover--lighter; 59 | border-color: transparent; 60 | &.reactionMe-2zhiyZ { 61 | @include background-opacity($color-accent, 0.6); 62 | background-color: $color-background-tertiary; 63 | border-color: transparent; 64 | &:hover { 65 | @include background-opacity($color-accent, 0.4); 66 | } 67 | } 68 | &:hover { 69 | @include background-opacity($color-accent, 0.2); 70 | } 71 | } 72 | .messageCountBox-XEP63e { 73 | .messageCountIcon-2CvKyY { 74 | svg { 75 | color: $color-white--darker; 76 | } 77 | } 78 | .messageCountText-J-9pag { 79 | color: $color-white--darker; 80 | } 81 | } 82 | .bullet-3kDmK0 { 83 | color: $color-white--darker; 84 | +.text-sm-normal-3Zj3Iv { 85 | color: $color-white--darker !important; 86 | } 87 | } 88 | } 89 | } 90 | 91 | // Popout sidebar 92 | .content-1SgpWY { 93 | > .container-3XgAHv, 94 | .container-3XgAHv.floating-3M3WeH { 95 | .container-ZMc96U { 96 | &.themed-Hp1KC_ { 97 | .children-3xh0VB { 98 | overflow: hidden; 99 | .forumPostTitle-16pN7d { 100 | display: inline-block; 101 | text-overflow: ellipsis; 102 | width: calc(100% - 20px); 103 | } 104 | } 105 | } 106 | } 107 | } 108 | > .container-3XgAHv { 109 | > .chat-25x62K { 110 | &:before { 111 | display: none; 112 | } 113 | .chatContent-3KubbW { 114 | margin: { 115 | top: 6px; 116 | } 117 | .scrollerInner-2PPAp2 { 118 | background-color: $color-background-tertiary; 119 | > li { 120 | background-color: $color-background-primary; 121 | > div { 122 | background-color: $color-background-primary; 123 | 124 | // TODO: Actually integrate w/ group spacing values. For now, just hard-code the value 125 | padding: { 126 | top: 7px; 127 | bottom: 7px; 128 | } 129 | margin: { 130 | top: 0; 131 | } 132 | } 133 | &:hover, 134 | &:active { 135 | background-color: $color-background-primary; 136 | > div { 137 | background-color: $color-hover--darker; 138 | } 139 | } 140 | } 141 | .scrollerSpacer-3AqkT9 { 142 | background-color: $color-background-primary; 143 | width: 100%; 144 | } 145 | .container-27JV1h.container-1yy5xN { 146 | background-color: $color-background-primary; 147 | padding: { 148 | bottom: 24px; 149 | left: 24px; 150 | } 151 | margin: { 152 | bottom: 0; 153 | left: 0; 154 | top: 0; 155 | right: 0; 156 | } 157 | .tags-2Siay7 { 158 | .pill-3pRQlO { 159 | background-color: $color-background-quaternary; 160 | } 161 | } 162 | +li { 163 | @include border-radius('bottom', 'medium'); 164 | background-color: $color-background-tertiary; 165 | padding: { 166 | bottom: 0; 167 | } 168 | > div { 169 | @include border-radius('bottom', 'medium'); 170 | background-color: $color-background-primary; 171 | margin: { 172 | top: 0; 173 | bottom: 0; 174 | } 175 | padding: { 176 | top: 8px; 177 | bottom: 14px; 178 | } 179 | } 180 | &:hover, 181 | &:active { 182 | background-color: $color-background-primary; 183 | > div { 184 | background-color: $color-hover--darker; 185 | } 186 | } 187 | +.container-3YcgdM { 188 | z-index: 0; 189 | border: none; 190 | background-color: $color-background-tertiary; 191 | margin: { 192 | top: 0; 193 | bottom: 0; 194 | } 195 | padding: { 196 | top: 14px; 197 | bottom: 14px; 198 | } 199 | +.divider-AZrXIA { 200 | display: none; 201 | +li { 202 | @include border-radius('top', 'medium'); 203 | background-color: $color-background-tertiary; 204 | margin: { 205 | top: 0; 206 | } 207 | padding: { 208 | top: 0; 209 | } 210 | > div { 211 | @include border-radius('top', 'medium'); 212 | background-color: $color-background-primary; 213 | margin: { 214 | top: 0; 215 | } 216 | padding: { 217 | top: 7px; 218 | bottom: 7px; 219 | } 220 | } 221 | &:hover, 222 | &:active { 223 | background-color: $color-background-primary; 224 | > div { 225 | background-color: $color-hover--darker; 226 | } 227 | } 228 | } 229 | } 230 | +.box-2iMsQm { 231 | @include border-radius('top', 'medium'); 232 | @include border-radius('bottom', 'none'); 233 | margin: { 234 | top: 14px; 235 | right: 0; 236 | bottom: 0; 237 | left: 0; 238 | } 239 | padding: { 240 | top: 14px; 241 | right: 14px; 242 | bottom: 14px; 243 | left: 14px; 244 | } 245 | &:before, 246 | &:after { 247 | display: none; 248 | } 249 | +.scrollerSpacer-3AqkT9 { 250 | background-color: $color-background-primary; 251 | width: 100%; 252 | } 253 | } 254 | } 255 | } 256 | } 257 | } 258 | } 259 | } 260 | } 261 | } 262 | -------------------------------------------------------------------------------- /scss/views/forum/_search.scss: -------------------------------------------------------------------------------- 1 | .mainCard-3KBsBI.header-1Uy0p6 { 2 | &.headerBorder-jrk0Ic { 3 | transition: 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 4 | @include box-shadow($color-hover, 'large', 0.6); 5 | } 6 | .formContainer-1zrOWf { 7 | .titleContainer-2YK93J { 8 | column-gap: 10px; 9 | .inputDefault-3FGxgL.searchInput-3NGPfp { 10 | background-color: transparent !important; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scss/views/forum/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebarContainer-1kWKqZ { 2 | transform: translateY(-24px); 3 | 4 | // Top card 5 | > .sidebarCard-1Gn1ch { 6 | > .markup-eYLPri, 7 | > .text-sm-normal-3Zj3Iv { 8 | &, 9 | > div { 10 | color: $color-white--darker !important; 11 | } 12 | } 13 | } 14 | 15 | // Tags 16 | > .container-2IhveL { 17 | .tags-3s41VI { 18 | .pill-3pRQlO { 19 | &:hover, 20 | &:active { 21 | background-color: $color-background-tertiary; 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/views/guild/_sidebar.scss: -------------------------------------------------------------------------------- 1 | // Sidebar styling 2 | .scroller-3X7KbA { 3 | &.none-2-_0dP { 4 | &.scrollerBase-_bVAAt { 5 | padding-right: 0; 6 | padding-left: 0; 7 | margin-left: 0; 8 | background-color: transparent !important; 9 | } 10 | } 11 | } 12 | 13 | // Container for channel list 14 | .content-1SgpWY { 15 | > .sidebar-1tnWFu { 16 | margin-top: 58px; 17 | } 18 | 19 | // Chat pages 20 | > .chat-2ZfjoI { 21 | overflow: visible; 22 | max-width: calc(100% - 250px); 23 | } 24 | } 25 | .sidebar-1tnWFu { 26 | @include border-radius('left', 'large'); 27 | @include border-radius('right', 'medium'); 28 | } 29 | .content-1x5b-n { 30 | @include border-radius('all', 'large'); 31 | } 32 | .wrapper-2jXpOf { 33 | margin-right: 10px; 34 | 35 | // Stages icon 36 | &.modeSelected-346R90 { 37 | .iconLive-AtZKgD { 38 | color: var(--interactive-selected) !important; 39 | } 40 | } 41 | } 42 | .containerDefault-YUSmu3 > div { 43 | padding-right: 8px !important; 44 | } 45 | 46 | // Padding for channel list scroller 47 | .scroller-1ox3I2 { 48 | &.thin-31rlnD { 49 | &.scrollerBase-_bVAAt { 50 | &.fade-1R6FHN { 51 | padding-bottom: 300px; 52 | } 53 | } 54 | } 55 | } 56 | 57 | // Channel / voice channel styling 58 | .containerDefault-YUSmu3 { 59 | .content-1gYQeQ { 60 | transition: 61 | background-color 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955), 62 | box-shadow 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 63 | @include border-radius('all', 'medium'); 64 | path { 65 | transition: fill 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 66 | } 67 | > a > div > div { 68 | transition: color 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 69 | } 70 | } 71 | &:hover { 72 | &, 73 | > div, 74 | .content-1gYQeQ { 75 | background-color: transparent; 76 | } 77 | } 78 | &.selected-2TbFuo, 79 | .modeSelected-3DmyhH { 80 | .content-1gYQeQ { 81 | background-color: #{$color-accent} !important; 82 | @include box-shadow($color-accent, 'small', 0.9); 83 | path { 84 | fill: $color-text--dark !important; 85 | } 86 | > a > div > div { 87 | color: $color-text--dark !important; 88 | } 89 | } 90 | } 91 | 92 | // Voice channel activities styling 93 | > .list-3X2NEr { 94 | &.listDefault-1QEzz4 { 95 | padding-top: 6px !important; 96 | } 97 | } 98 | } 99 | 100 | // Channel thread list items 101 | .container-1Bj0eq { 102 | > svg > path { 103 | fill: var(--text-muted); 104 | } 105 | .containerDefault-YUSmu3 { 106 | &.selected-2TbFuo { 107 | .mainContent-20q_Hp { 108 | > div { 109 | color: $color-text--dark !important; 110 | } 111 | } 112 | } 113 | .mainContent-20q_Hp { 114 | padding: { 115 | left: 4px; 116 | } 117 | } 118 | } 119 | } 120 | .header-35u4WP { 121 | border-radius: 0 0 var(--border-radius-1) var(--border-radius-1); 122 | } 123 | .modeSelected-346R90 { 124 | .name-23GUGE, 125 | .content-1x5b-n:hover .name-23GUGE, 126 | .actionIcon-PgcMM2 { 127 | color: var(--interactive-selected); 128 | } 129 | } 130 | .animatedContainer-1NSq4T { 131 | z-index: 2; 132 | top: 48px; 133 | border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; 134 | pointer-events: none; 135 | } 136 | .hasBanner-2SrLR3 { 137 | ~ .scroller-RmtA4e { 138 | top: 48px; 139 | } 140 | } 141 | 142 | // Voice channel styling 143 | .list-2x9Cl9 { 144 | padding-top: 4px !important; 145 | } 146 | .voiceUser-3nRK-K, 147 | .draggable-S2aEx4 > .voiceUser-3nRK-K { 148 | &:hover { 149 | background-color: transparent; 150 | } 151 | } 152 | .voiceUser-3nRK-K { 153 | &.selected-1oxcpH { 154 | @include border-radius('all', 'medium'); 155 | > div { 156 | background-color: #{$color-hover--lighter} !important; 157 | @include border-radius('all', 'medium'); 158 | } 159 | } 160 | } 161 | .list-3X2NEr.listDefault-1QEzz4, 162 | .activityRow-2wnr1d, 163 | .activityRow-2wnr1d > .content-2Lhv86 { 164 | &:hover { 165 | background-color: transparent; 166 | } 167 | } 168 | .activityRow-2wnr1d { 169 | &.selected-p1EV6Z { 170 | > .content-2Lhv86 { 171 | &, 172 | &:hover { 173 | background-color: #{$color-hover--lighter} !important; 174 | @include border-radius('all', 'medium'); 175 | } 176 | } 177 | } 178 | } 179 | .list-3X2NEr { 180 | &.listDefault-1QEzz4 { 181 | > .separator-2jb_gA { 182 | background-color: #{$color-hover--lighter} !important; 183 | margin-top: 6px; 184 | margin-bottom: 2px; 185 | } 186 | } 187 | } 188 | 189 | // Default icon colour 190 | .containerDefault--pIXnN { 191 | > div > div > a > div > svg { 192 | color: var(--text-secondary); 193 | } 194 | &:hover { 195 | > div > div > a > div > svg { 196 | color: var(--interactive-selected); 197 | } 198 | } 199 | 200 | // Muted icon colour 201 | > .modeMuted-onO3r- > div > a > div > svg { 202 | color: var(--text-muted); 203 | } 204 | } 205 | 206 | // Unread icons 207 | .modeUnread-1qO3K1 { 208 | > div > a > div > svg { 209 | color: var(--text-normal) !important; 210 | } 211 | .icon-1DeIlz { 212 | > path[d^='M5.88657'], 213 | > path[d^='M14 8C14'] { 214 | d: path('M 8.8886719 3 C 8.646242 3 8.4388544 3.1733993 8.3964844 3.4121094 L 7.7597656 7 L 4.1796875 7 C 3.9367973 7 3.72937 7.1748124 3.6875 7.4140625 L 3.5117188 8.4140625 C 3.4581788 8.7200232 3.6952393 9 4.0058594 9 L 7.4101562 9 L 6.3496094 15 L 2.7695312 15 C 2.5266413 15 2.3192138 15.174862 2.2773438 15.414062 L 2.1035156 16.414062 C 2.0499756 16.720064 2.285083 17 2.5957031 17 L 6 17 L 5.3945312 20.412109 C 5.3401612 20.718411 5.5756183 21 5.8867188 21 L 6.8710938 21 C 7.1135236 21 7.3209112 20.826591 7.3632812 20.587891 L 8 17 L 14 17 L 13.394531 20.412109 C 13.340131 20.718411 13.575618 21 13.886719 21 L 14.871094 21 C 15.113594 21 15.320981 20.826591 15.363281 20.587891 L 16 17 L 19.580078 17 C 19.822978 17 20.030464 16.825136 20.072266 16.585938 L 20.248047 15.585938 C 20.301647 15.279937 20.066461 15 19.755859 15 L 16.349609 15 L 16.742188 12.783203 C 16.752692 12.783269 16.762917 12.785156 16.773438 12.785156 C 19.475565 12.785156 21.664062 10.594684 21.664062 7.8925781 C 21.664062 7.8022126 21.657182 7.7141581 21.652344 7.625 L 21.658203 7.5859375 C 21.673532 7.4984369 21.659768 7.4152294 21.632812 7.3378906 C 21.416 5.4199139 20.08073 3.8590212 18.302734 3.2695312 C 18.218934 3.1146896 18.065718 3 17.873047 3 L 16.888672 3 C 16.87976 3 16.872092 3.0034419 16.863281 3.0039062 C 16.833083 3.0033565 16.803767 3 16.773438 3 C 14.376566 3 12.384806 4.724681 11.964844 7 L 9.7597656 7 L 10.365234 3.5878906 C 10.419634 3.2815788 10.184106 3 9.8730469 3 L 8.8886719 3 z M 9.4101562 9 L 12.015625 9 C 12.367634 10.51562 13.417365 11.759473 14.814453 12.371094 L 14.349609 15 L 8.3496094 15 L 9.4101562 9 z'); 215 | } 216 | > path[d^='M21.025'] { 217 | display: none; 218 | } 219 | > path[d^='M19.1'], 220 | > path[d^='M3.9'] { 221 | transform: rotate(-45deg) translate(-12px, 5px); 222 | } 223 | } 224 | .iconContainer-1BBaeJ { 225 | background-color: var(--button-background); 226 | border-radius: 100px; 227 | padding: 4px; 228 | margin: 0 2px 0 -4px; 229 | } 230 | .mainContent-u_9PKf { 231 | padding: 2px 0; 232 | } 233 | } 234 | .icon-1DeIlz > path { 235 | transition: 0.3s transform; 236 | } 237 | .unread-2lAfLh { 238 | display: none; 239 | } 240 | 241 | // Unread channel indicator 242 | .unreadTop-1DJtGv { 243 | transform: translateY(10px); 244 | } 245 | .unreadBottom-3Ojk6R { 246 | transform: translateY(-70px); 247 | } 248 | .unread { 249 | &Bottom-3Ojk6R, 250 | &Top-1DJtGv { 251 | > div { 252 | @include box-shadow($color-accent, 'small', 0.8); 253 | background-color: #{$color-accent}; 254 | color: var(--text-dark); 255 | } 256 | } 257 | } 258 | -------------------------------------------------------------------------------- /scss/views/home/_direct-messages.scss: -------------------------------------------------------------------------------- 1 | // DM search bar 2 | .searchBar-3TnChZ { 3 | display: none; 4 | } 5 | 6 | // DM list 7 | .scroller-WSmht3.thin-31rlnD.scrollerBase-_bVAAt.fade-1R6FHN { 8 | @include border-radius('left', 'large'); 9 | @include border-radius('right', 'medium'); 10 | } 11 | .channel-1Shao0.container-1oeRFJ.selected-1-Z6gm { 12 | &[data-list-item-id='private-channels-uid_10800___friends'], 13 | &[data-list-item-id='private-channels-uid_10800___nitro'] { 14 | div { 15 | background-color: #{$color-accent}; 16 | } 17 | } 18 | > div { 19 | background-color: #{$color-hover--lighter}; 20 | > div > svg, 21 | > div > div > div, 22 | > div > div > div > div { 23 | color: var(--text-dark); 24 | } 25 | } 26 | } 27 | 28 | // DM Action buttons 29 | .size16-rrJ6ag.description-22d6ux { 30 | .container-12Vzf8 { 31 | button.button-f2h6uQ { 32 | background-color: #{$color-hover--lighter} !important; 33 | color: var(--text-normal) !important; 34 | &:nth-of-type(3n+1) { 35 | &:hover { 36 | @include box-shadow($color-green, 'small', 0.8); 37 | background-color: #{$color-green} !important; 38 | color: var(--text-dark) !important; 39 | } 40 | } 41 | &:nth-of-type(3n+2):hover, 42 | &:nth-of-type(3n+3) { 43 | @include box-shadow($color-red, 'small', 0.8); 44 | background-color: #{$color-red} !important; 45 | color: var(--text-dark) !important; 46 | &:hover { 47 | @include box-shadow($color-red--lighter, 'small', 0.8); 48 | background-color: #{$color-red--lighter} !important; 49 | color: var(--text-dark) !important; 50 | } 51 | } 52 | } 53 | } 54 | } 55 | 56 | // New DM Gating action buttons 57 | .description-22d6ux { 58 | > .container-12Vzf8 { 59 | .button-f2h6uQ.sizeTiny-3y2SSK, 60 | .action-1R6ERA.sizeTiny-3y2SSK { 61 | @include box-shadow($color-hover, 'small', 0.8); 62 | background-color: $color-hover--lighter !important; 63 | color: $color-text !important; 64 | &.colorBrand-I6CyqQ { 65 | &:hover { 66 | @include box-shadow($color-accent, 'small', 0.8); 67 | background-color: $color-accent !important; 68 | color: $color-text--dark !important; 69 | } 70 | } 71 | &.colorPrimary-2AuQVo, 72 | &.colorRed-rQXKgM { 73 | &:hover { 74 | @include box-shadow($color-red, 'small', 0.8); 75 | background-color: $color-red !important; 76 | color: $color-text--dark !important; 77 | } 78 | } 79 | } 80 | } 81 | } 82 | .spamBanner-1auiob { 83 | @include border-radius('all', 'large'); 84 | .actionButtons-2SAg-Q { 85 | button.button-f2h6uQ { 86 | &:nth-of-type(3n+1) { 87 | background-color: $color-red !important; 88 | min-width: fit-content; 89 | &:hover { 90 | background-color: $color-red--lighter !important; 91 | color: $color-text--dark !important; 92 | } 93 | } 94 | &:nth-of-type(3n+2) { 95 | background-color: $color-background-primary !important; 96 | &:hover { 97 | background-color: $color-hover--lighter !important; 98 | } 99 | } 100 | &:nth-of-type(3n+3) { 101 | background-color: $color-background-primary !important; 102 | color: $color-text !important; 103 | &:hover { 104 | @include box-shadow($color-green, 'small', 0.8); 105 | background-color: $color-green !important; 106 | color: $color-text--dark !important; 107 | } 108 | } 109 | } 110 | } 111 | } 112 | 113 | // Wave button 114 | .containerCompact-1Jto1O { 115 | .compactButton-3hG-bs { 116 | &:hover { 117 | background-color: $color-hover--darker; 118 | } 119 | } 120 | } 121 | 122 | // Selected DM list items 123 | .channel-1Shao0 { 124 | margin-right: 8px; 125 | &[aria-posinset='1'], 126 | &[aria-posinset='2'], 127 | &[aria-posinset='3'] { 128 | > .linkButton-2NshQj { 129 | &.selected-3veCBZ { 130 | @include border-radius('all', 'large'); 131 | @include box-shadow($color-accent, 'small', 0.8); 132 | background-color: #{$color-accent} !important; 133 | > a { 134 | color: var(--text-dark) !important; 135 | } 136 | } 137 | .numberBadge-37OJ3S { 138 | background-color: #{$color-red} !important; 139 | color: #{$color-text}; 140 | padding: { 141 | right: 0; 142 | } 143 | } 144 | } 145 | &:hover { 146 | > .linkButton-2NshQj { 147 | background-color: transparent; 148 | } 149 | > .linkButton-2NshQj.selected-3veCBZ { 150 | .channel-1Shao0 { 151 | &[aria-posinset='2'] { 152 | &:hover { 153 | > .linkButton-2NshQj.selected-3veCBZ { 154 | background-color: #{$color-accent} !important; 155 | color: var(--text-normal) !important; 156 | } 157 | } 158 | } 159 | } 160 | } 161 | } 162 | } 163 | > .interactiveSelected-29CP8y { 164 | &.selected-3veCBZ { 165 | @include border-radius('all', 'medium'); 166 | background-color: #{$color-hover--lighter} !important; 167 | } 168 | } 169 | } 170 | .categoryItem-ONe8JV { 171 | &.container-1oeRFJ { 172 | &.selected-1-Z6gm { 173 | > .itemInner-1XfZdz > div { 174 | > svg { 175 | > path, 176 | > g > path { 177 | fill: var(--background-tertiary) !important; 178 | } 179 | } 180 | > div > div { 181 | color: var(--text-dark) !important; 182 | } 183 | } 184 | } 185 | } 186 | } 187 | -------------------------------------------------------------------------------- /scss/views/home/_dm-call.scss: -------------------------------------------------------------------------------- 1 | // DM call ui 2 | .content-1SgpWY { 3 | .chat-2ZfjoI { 4 | .callContainer-HtHELf { 5 | overflow: visible; 6 | .videoFrame-11rde6 { 7 | margin-right: 12px; 8 | .videoWrapper-qKddsp { 9 | display: contents; 10 | .videoSizer-ZRgT6y { 11 | @include border-radius('all', 'medium'); 12 | overflow: hidden; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /scss/views/home/_home-pages.scss: -------------------------------------------------------------------------------- 1 | @import './home-pages/message-requests'; 2 | 3 | // Container styling 4 | .content-1SgpWY { 5 | > .container-2cd8Mz { 6 | overflow: visible; 7 | max-width: calc(100% - 250px); 8 | .nowPlayingColumn-1eCBCN { 9 | @include border-radius('left', 'medium'); 10 | @include border-radius('right', 'large'); 11 | overflow: hidden; 12 | margin-left: $space-full; 13 | .scroller-hE2gWq { 14 | padding-left: 0 !important; 15 | } 16 | } 17 | } 18 | > .applicationStore-2nk7Lo { 19 | overflow: visible; 20 | max-width: calc(100% - 250px); 21 | } 22 | } 23 | 24 | // Friends page panel 25 | .peopleColumn-1wMU14 { 26 | @include border-radius('all', 'medium'); 27 | background-color: transparent; 28 | .title-x4dI75 { 29 | color: $color-white--darker; 30 | margin: { 31 | top: $unit-6; 32 | right: $unit-5 * 2; 33 | bottom: $unit-6 / 2; 34 | left: $unit-5 * 2; 35 | } 36 | } 37 | > div:nth-of-type(2) { 38 | background-color: var(--background-primary); 39 | @include border-radius('top', 'medium'); 40 | } 41 | .peopleList-2VBrVI { 42 | border-top: 0; 43 | margin-top: 0; 44 | background-color: var(--background-primary); 45 | .peopleListItem-u6dGxF { 46 | @include border-radius('all', 'large'); 47 | &:hover, 48 | &:focus { 49 | background-color: #{$color-hover}; 50 | } 51 | .actionButton-3-B2x- { 52 | &.highlight-3DSi7b { 53 | background-color: #{$color-hover--lighter}; 54 | } 55 | > svg, 56 | > svg > path { 57 | transition: none !important; 58 | } 59 | &:hover, 60 | &:active { 61 | &:nth-of-type(1) { 62 | @include box-shadow($color-green, 'small', 0.8); 63 | background-color: #{$color-green}; 64 | } 65 | &:nth-of-type(2) { 66 | @include box-shadow($color-accent, 'small', 0.8); 67 | background-color: #{$color-accent}; 68 | } 69 | color: var(--text-dark); 70 | } 71 | } 72 | } 73 | } 74 | } 75 | .chatContent-3KubbW, 76 | .pageWrapper-1PgVDX, 77 | .scroller-3X7KbA, 78 | .stageSection-3mAD8V { 79 | @include border-radius('all', 'medium'); 80 | background-color: $color-background-primary; 81 | } 82 | .scroller-1JbKMe { 83 | @include border-radius('top', 'large'); 84 | } 85 | .scroller-RmtA4e { 86 | @include border-radius('top', 'large'); 87 | background-color: $color-background-secondary; 88 | } 89 | .sidebar-1tnWFu { 90 | margin: { 91 | top: $space-full; 92 | right: $space-full; 93 | } 94 | } 95 | .chatContent-3KubbW, 96 | .sidebar-1tnWFu, 97 | .tabBody-2dgbAs, 98 | .pageWrapper-1PgVDX, 99 | .stageSection-3mAD8V, 100 | .applicationStore-1pNvnv { 101 | margin-bottom: $space-full; 102 | } 103 | .scroller-1SuHJo { 104 | margin-right: $unit-5; 105 | margin-bottom: $unit-6; 106 | 107 | // Stages content 108 | .content-3YMskv { 109 | @include border-radius('all', 'large'); 110 | background-color: $color-background-primary; 111 | padding: { 112 | top: 0; 113 | right: $unit-5; 114 | bottom: $unit-5; 115 | left: $unit-5; 116 | } 117 | } 118 | } 119 | .pageWrapper-1PgVDX, 120 | .content-yTz4x3, 121 | .applicationStore-1pNvnv { 122 | margin-right: $space-full; 123 | } 124 | 125 | // Friends search bar 126 | .searchBar-2aylmZ { 127 | @include border-radius('all', 'medium'); 128 | margin: { 129 | top: $space-0; 130 | right: $space-0; 131 | bottom: $space-full; 132 | left: $space-0; 133 | } 134 | background-color: $color-background-primary; 135 | overflow: visible; 136 | } 137 | .searchBar-2aylmZ > .inner-2pOSmK { 138 | padding: $unit-3; 139 | overflow: visible; 140 | } 141 | .searchBar-2aylmZ:hover > .inner-2pOSmk, 142 | .searchBar-2aylmZ:focus > .inner-2pOSmk, 143 | .searchBar-2aylmZ:focus-within > .inner-2pOSmk { 144 | @include box-shadow($color-accent, 'medium', 1); 145 | } 146 | .tabBody-2dgbAs { 147 | margin-right: $space-full; 148 | margin-top: $space-half; 149 | } 150 | 151 | // Friend activity scroller 152 | .scroller-hE2gWq { 153 | border: none; 154 | margin: { 155 | left: $space-0; 156 | } 157 | padding: { 158 | left: $space-full; 159 | right: $space-0; 160 | top: $space-0; 161 | } 162 | > .header-Imy05m { 163 | display: none; 164 | } 165 | > .itemCard-3Etziu { 166 | .header-3jUeHi { 167 | .text-sm-normal-3Zj3Iv { 168 | color: $color-white--darker !important; 169 | } 170 | } 171 | .section-3G9aLW { 172 | @include box-shadow($color-hover, 'medium', 0.6); 173 | background-color: $color-background-tertiary; 174 | } 175 | &:hover, 176 | &:active, 177 | &.active-1W_Gl9, 178 | &.outer-2JOHae:hover, 179 | &.outer-2JOHae.active-1W_Gl9:hover { 180 | background-color: $color-hover--darker !important; 181 | } 182 | } 183 | } 184 | .wrapper-2RrXDg { 185 | border: none; 186 | } 187 | 188 | // Nitro / DM request pages 189 | .homeWrapperNormal-bu1BS6.homeWrapper-L4ors0 { 190 | background-color: $color-background-tertiary; 191 | } 192 | .headerBar-1dSpQr.container-ZMc96U:before { 193 | display: none; 194 | } 195 | .applicationStore-2nk7Lo, 196 | .container-2YMsb4 { 197 | overflow: visible; 198 | .scroller-3x0qvT, 199 | .scroller-29cQFV { 200 | &.auto-2K3UW5.scrollerBase-_bVAAt { 201 | @include border-radius('all', 'large'); 202 | margin: { 203 | top: $space-half; 204 | right: $space-full; 205 | bottom: $space-full; 206 | left: $space-0; 207 | } 208 | } 209 | } 210 | > .tabBody-2YGSMJ { 211 | &:before { 212 | display: none; 213 | } 214 | } 215 | } 216 | 217 | // Grid items 218 | .featureGrid-SSlfD0 > .feature-2IUcBI { 219 | background-color: var(--background-tertiary) !important; 220 | } 221 | -------------------------------------------------------------------------------- /scss/views/home/home-pages/_message-requests.scss: -------------------------------------------------------------------------------- 1 | .sidebar-1tnWFu { 2 | +.chat-2ZfjoI { 3 | > .content-1jQy2l { 4 | > .list-2hhlBX.thin-31rlnD.scrollerBase-_bVAAt.fade-1R6FHN { 5 | @include border-radius('all', 'large'); 6 | background-color: $color-background-primary; 7 | padding: { 8 | left: 0; 9 | right: 0; 10 | } 11 | margin: { 12 | right: 10px; 13 | bottom: 10px; 14 | } 15 | > .content-2a4AW9 { 16 | > .sectionTitle-1P1u0N { 17 | margin: { 18 | top: 2px; 19 | right: 26px; 20 | bottom: 10px; 21 | left: 26px; 22 | } 23 | } 24 | .messageRequestItem-1_NNAR { 25 | @include border-radius('all', 'medium'); 26 | border: none !important; 27 | margin: { 28 | left: 30px; 29 | right: 20px; 30 | } 31 | padding: { 32 | top: 10px; 33 | right: 10px; 34 | bottom: 10px; 35 | left: 0; 36 | }; 37 | .actions-1VsuBP { 38 | .actionButton-3GQIiT { 39 | > svg, 40 | > svg > path { 41 | transition: none !important; 42 | } 43 | &:hover, 44 | &:active { 45 | &:nth-of-type(1) { 46 | @include box-shadow($color-accent, 'small', 0.8); 47 | background-color: $color-accent; 48 | } 49 | &:nth-of-type(2) { 50 | @include box-shadow($color-green, 'small', 0.8); 51 | background-color: $color-green; 52 | } 53 | &:nth-of-type(3) { 54 | @include box-shadow($color-red, 'small', 0.8); 55 | background-color: $color-red; 56 | } 57 | &, 58 | > svg { 59 | color: $color-text--dark !important; 60 | } 61 | } 62 | } 63 | } 64 | &:hover { 65 | background-color: $color-hover; 66 | margin: { 67 | left: 20px; 68 | right: 20px; 69 | } 70 | padding: { 71 | top: 10px; 72 | right: 10px; 73 | bottom: 10px; 74 | left: 10px; 75 | } 76 | .actionButton-3GQIiT { 77 | background-color: #{$color-hover--lighter}; 78 | } 79 | } 80 | &.selected-11Gl-y { 81 | background-color: $color-hover--darker; 82 | margin: { 83 | left: 20px; 84 | right: 20px; 85 | } 86 | padding: { 87 | top: 10px; 88 | right: 10px; 89 | bottom: 10px; 90 | left: 10px; 91 | } 92 | .actionButton-3GQIiT { 93 | background-color: #{$color-hover--lighter}; 94 | } 95 | } 96 | } 97 | } 98 | } 99 | } 100 | } 101 | } 102 | .container-3XgAHv { 103 | .chat-3t9F_n { 104 | margin-top: 6px; 105 | &:before { 106 | display: none !important; 107 | } 108 | } 109 | } 110 | .resizeHandle-PBRzPC { 111 | +.container-3XgAHv { 112 | .spamBanner-1auiob { 113 | .actionButtons-2SAg-Q { 114 | .largeButton-x1o_n3 { 115 | &:nth-of-type(1) { 116 | background-color: transparent !important; 117 | &:hover { 118 | color: $color-text !important; 119 | } 120 | } 121 | &:nth-of-type(2) { 122 | background-color: $color-red !important; 123 | color: $color-text--dark; 124 | &:hover { 125 | background-color: $color-red--lighter !important; 126 | } 127 | } 128 | } 129 | } 130 | } 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /scss/views/profiles/_connected-accounts.scss: -------------------------------------------------------------------------------- 1 | .connectedAccounts-2R5M4w { 2 | width: 100%; 3 | gap: 20px; 4 | } 5 | .connectedAccountsColumn-1zdyyx { 6 | margin-top: 20px; 7 | gap: 20px; 8 | flex: 1 0 40%; 9 | &:nth-of-type(2) { 10 | margin: { 11 | top: 19px; 12 | left: 0; 13 | } 14 | } 15 | } 16 | .discordMemberCreatedAt-31OkT7 { 17 | background-color: transparent; 18 | margin: { 19 | top: 0; 20 | } 21 | } 22 | .connectedAccountContainer-3aLMHJ { 23 | &:not(.discordMemberCreatedAt-31OkT7) { 24 | @include border-radius('all', 'medium'); 25 | padding: 12px; 26 | background-color: $color-background-secondary; 27 | margin: { 28 | top: 0; 29 | } 30 | } 31 | } 32 | .connectedAccountOpenIconContainer-2cYFIC { 33 | transform: translateY(-1px); 34 | } 35 | -------------------------------------------------------------------------------- /scss/views/profiles/_popout-profile.scss: -------------------------------------------------------------------------------- 1 | .userPopoutInner-PA9zkU { 2 | .section-3FmfOT { 3 | padding: { 4 | left: 12px; 5 | right: 12px; 6 | } 7 | } 8 | .scroller-1jBQYo { 9 | min-height: fit-content; 10 | .section-3FmfOT { 11 | padding: { 12 | top: 8px; 13 | bottom: 8px; 14 | } 15 | } 16 | } 17 | } 18 | .userPopoutInnerWithoutTheme-23vLID { 19 | background: $color-background-tertiary !important; 20 | .overlayBackground-arbZMT { 21 | background-color: $color-background-primary; 22 | } 23 | textarea { 24 | background-color: $color-hover; 25 | } 26 | } 27 | .customStatus-3Bvsdb { 28 | display: flex; 29 | flex-direction: row; 30 | gap: 6px; 31 | } 32 | .footer-3naVBw { 33 | display: var(--message); 34 | } 35 | .bodyInnerWrapper-2bQs1k > .bodyTitle-2Az3VQ.base-21yXnu.size12-oc4dx4.muted-eZM05q.uppercase-2unHJn, 36 | .bodyTitle-2Az3VQ.base-21yXnu.size12-oc4dx4.muted-eZM05q.uppercase-2unHJn:nth-of-type(2n+2), 37 | .note-6O4w9y textarea, 38 | .note-6O4w9y, 39 | .note-3M15gE, 40 | .userInfoSectionHeader-2mYYun:nth-of-type(2), 41 | .userPopoutInner-1v4xcM .section-3FmfOT.lastSection-3_1yKt { 42 | display: var(--notes); 43 | } 44 | .userPopoutInner-1v4xcM { 45 | .scroller-1jBQYo.thin-31rlnD.scrollerBase-_bVAAt { 46 | margin-bottom: $unit-3; 47 | } 48 | .section-3FmfOT.lastSection-3_1yKt { 49 | margin-bottom: -$unit-3; 50 | padding-bottom: 0; 51 | } 52 | } 53 | .userPopout-xaxa6l { 54 | @include border-radius('all', 'large'); 55 | border: 1px solid #{$color-border}; 56 | } 57 | .tabBar-2hXqzU { 58 | &.top-K_jibn { 59 | justify-content: space-around; 60 | } 61 | } 62 | .profileBanner-33-uE1 { 63 | height: 176px; 64 | } 65 | .popoutBanner-19WKGg, 66 | .bannerNormal-3u-o59, 67 | .bannerUploaderInnerSquare-1ddxpx { 68 | height: 122px; 69 | } 70 | .settingsBanner-15-pZk { 71 | height: 140px; 72 | } 73 | .aboutMeSection---MkQa, 74 | .headerTop-1PNKck { 75 | padding-top: 16px; 76 | } 77 | .body-3HBlXn { 78 | padding: 8px 8px 0 16px; 79 | } 80 | .header-4zuFdR, 81 | .customStatusActivity-nmH3DF { 82 | margin-left: 8px; 83 | } 84 | .userPopout-xaxa6l .customStatus-oN4ZZY, 85 | .userPopout-xaxa6l .aboutMeSection-1Fw5Ia { 86 | padding: 0 12px 12px 0; 87 | } 88 | .userInfoSection-q_35fn { 89 | padding: 0; 90 | &:nth-child(2) { 91 | padding-bottom: 16px; 92 | } 93 | } 94 | .banner-1YaD3N { 95 | &.profileBannerPremium-KD60EB.bannerPremium-kkSkPv, 96 | &.profileBanner-1owKI5 { 97 | height: 220px; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /scss/views/profiles/_profile-modal.scss: -------------------------------------------------------------------------------- 1 | @import './connected-accounts'; 2 | .focusLock-2tveLW { 3 | &[aria-label='User Profile Modal'] { 4 | .body-1Ukv50 { 5 | overflow: scroll !important; 6 | flex: 1; 7 | } 8 | > .root-8LYsGj.root-g14mjS { 9 | height: fill-available; 10 | height: -webkit-fill-available; 11 | } 12 | } 13 | } 14 | .bodyTitle-3FWCs2, 15 | .bodyTitle-1ySSKn, 16 | .footer-1N3bR3, 17 | .protip-2urNh2 { 18 | display: none; 19 | } 20 | .body-2wLx-E { 21 | height: calc(100% - 167px); 22 | } 23 | .listRow-2nO1T6 { 24 | margin: 2px 8px; 25 | @include border-radius('all', 'large'); 26 | } 27 | .root-jbEB5E { 28 | &.rolesList-3uZoaa { 29 | margin-top: 0 !important; 30 | } 31 | } 32 | .bodyInnerWrapper-26fQXj { 33 | padding: 0 8px 0 0; 34 | } 35 | .lookInverted-2D7oAl { 36 | .contents-1UYEBX { 37 | color: var(--interactive-selected); 38 | } 39 | } 40 | .tabBarContainer-sCZC4w { 41 | padding: 0 20px !important; 42 | } 43 | .avatar-37jOim, 44 | .avatar-3QF_VA, 45 | .avatarUploaderInner-Oiob_P, 46 | .avatar-1uQSZT { 47 | border-color: $color-background-tertiary; 48 | } 49 | .avatar-37jOim { 50 | &:before { 51 | z-index: -1; 52 | } 53 | } 54 | .avatar-1uQSZT, 55 | .avatar-37jOim, 56 | .avatar-3QF_VA { 57 | &:before { 58 | content: ''; 59 | position: absolute; 60 | background-color: $color-background-tertiary; 61 | border-radius: 50%; 62 | } 63 | } 64 | .avatar-1uQSZT, 65 | .avatar-37jOim { 66 | &:before { 67 | width: 28px; 68 | height: 28px; 69 | top: 54px; 70 | left: 54px; 71 | } 72 | } 73 | .avatar-3QF_VA { 74 | top: -156px; 75 | &:before { 76 | width: 40px; 77 | height: 40px; 78 | top: 80px; 79 | left: 79px; 80 | } 81 | } 82 | .avatarPositionPremium-3We5Ho, 83 | .avatarUploader-2UF9NL, 84 | .avatar-1uQSZT { 85 | top: 16px; 86 | } 87 | .headerText-1vVs-U { 88 | flex-grow: 1; 89 | } 90 | header { 91 | > .bannerSVGWrapper-qc0szY { 92 | > mask { 93 | circle { 94 | transform: translate(0, -87px); 95 | } 96 | } 97 | } 98 | } 99 | .profileBadges-ohc0Vu { 100 | position: relative; 101 | right: 0; 102 | max-width: unset; 103 | top: 0; 104 | padding-left: 8px; 105 | flex-wrap: nowrap; 106 | } 107 | .avatar-1uQSZT { 108 | margin: 7px; 109 | + div { 110 | margin-top: 4px; 111 | display: flex; 112 | flex-direction: row; 113 | height: 32px; 114 | flex-grow: 1; 115 | justify-content: space-between; 116 | } 117 | } 118 | .headerTagWithNickname-1U8zZH { 119 | margin-top: 0.2rem !important; 120 | } 121 | .customStatus-3XAoF9 { 122 | margin-top: 0.1rem !important; 123 | } 124 | .userInfo-iCloHO { 125 | padding-left: 32px; 126 | .container-q03LZO { 127 | margin-right: 8px; 128 | } 129 | } 130 | .background-1QDuV2 { 131 | margin-top: 0; 132 | padding-top: 0; 133 | } 134 | .headerTop-1PNKck { 135 | display: flex; 136 | justify-content: flex-end; 137 | top: 4px; 138 | } 139 | .nameTag-2Nlmsy { 140 | margin: 24px 290px 24px 24px; 141 | } 142 | .top-K_jibn { 143 | .item-3XjbnG { 144 | border-bottom: unset; 145 | &.selected-g-kMVV { 146 | border-bottom: 2px solid var(--interactive-active); 147 | } 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /scss/views/settings/_settings-icons.scss: -------------------------------------------------------------------------------- 1 | // Settings icons 2 | $settingsIconSize: 18px; 3 | $settingsIconGap: 14px; 4 | $settingsIconBaseUrl: 'https://kiosion.github.io/Amethyst/img/icons/'; 5 | .sidebarRegion-1VBisG { 6 | flex-basis: calc(218px + (#{$settingsIconSize} + #{$settingsIconGap})) !important; 7 | } 8 | .sidebar-nqHbhN, 9 | .layer-86YKbF ~ .layer-86YKbF .sidebar-nqHbhN { 10 | width: calc(218px + (#{$settingsIconSize} + #{$settingsIconGap})) !important; 11 | } 12 | #bd-settings-sidebar .ui-tab-bar-item, 13 | .sidebar-nqHbhN .side-2ur1Qk .item-3XjbnG { 14 | display: flex; 15 | align-items: center; 16 | > div { 17 | flex: 1 0 auto; 18 | } 19 | &:before { 20 | content: ''; 21 | position: relative; 22 | flex: 0 0 auto; 23 | width: #{$settingsIconSize}; 24 | height: #{$settingsIconSize}; 25 | margin-right: #{$settingsIconGap}; 26 | background: currentColor; 27 | z-index: 2; 28 | -webkit-mask: url('#{$settingsIconBaseUrl}questionmark.svg') center/contain no-repeat; 29 | mask: url('#{$settingsIconBaseUrl}questionmark.svg') center/contain no-repeat; 30 | } 31 | } 32 | @function str-replace($string, $search: ' ', $replace: '-') { 33 | @while str-index($string, $search) { 34 | $index: str-index($string, $search); 35 | @if $index { 36 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 37 | } 38 | } 39 | @return $string; 40 | } 41 | @each $value, $keys in $icons-map { 42 | @each $key in $keys { 43 | @if str-index($key, 'nth-child') { 44 | #bd-settings-sidebar .ui-tab-bar-item { 45 | &:#{$key}:before { 46 | -webkit-mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 47 | mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 48 | } 49 | } 50 | } @else { 51 | .sidebar-nqHbhN .side-2ur1Qk .item-3XjbnG { 52 | @if str-index($key, 'bd-') { 53 | &.#{$key}:before { 54 | -webkit-mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 55 | mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 56 | } 57 | } @else { 58 | &[aria-controls='#{$key}' i]:before { 59 | -webkit-mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 60 | mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 61 | } 62 | &[data-item-id='#{$key}' i]:before { 63 | -webkit-mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 64 | mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 65 | } 66 | } 67 | @if str-index($key, ' ') { 68 | $dashed: str-replace($key); 69 | &[aria-controls='#{$dashed}' i]:before { 70 | -webkit-mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 71 | mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 72 | } 73 | &[data-item-id='#{$dashed}' i]:before { 74 | -webkit-mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 75 | mask: url('#{$settingsIconBaseUrl}#{$value}.svg') center/contain no-repeat; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | } 82 | .sidebar-nqHbhN .side-2ur1Qk { 83 | .item-3XjbnG .icon-3FU6Ir, 84 | .tabBarItemContainer-2HdIlr { 85 | &, 86 | svg, 87 | img { 88 | transform: scaleX(0); 89 | } 90 | } 91 | .tabBarItemContainer-2HdIlr { 92 | transform: scaleX(1); 93 | } 94 | .premiumLabel-3HPvdB { 95 | > svg { 96 | display: none; 97 | } 98 | } 99 | } 100 | .bd-server-search ~ .item-3XjbnG:before { 101 | display: none; 102 | } 103 | 104 | /* stylelint-disable selector-id-pattern */ 105 | #BDFDB-card svg path[d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'], 106 | #ZeresPluginLibrary-card svg path[d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'] { 107 | d: path('m 6.375,0.75 c -0.3886406,0 -0.703125,0.3144844 -0.703125,0.703125 v 14.0625 c 0,0.388641 0.3144844,0.703125 0.703125,0.703125 3.252375,0 4.608656,1.798453 4.921875,2.296875 V 2.3886719 C 10.323656,1.5753438 8.760938,0.75 6.375,0.75 Z M 3.5625,2.15625 c -0.3886406,0 -0.703125,0.3144844 -0.703125,0.703125 v 15.46875 c 0,0.388641 0.3144844,0.703125 0.703125,0.703125 H 9.929688 C 9.535891,18.553922 8.503875,17.625 6.375,17.625 5.2118437,17.625 4.265625,16.678781 4.265625,15.515625 V 2.15625 Z m 11.25,0 c -0.794437,0 -1.519969,0.2745469 -2.109375,0.7207031 V 19.734375 c 0,-0.387938 0.315188,-0.703125 0.703125,-0.703125 h 7.03125 c 0.388641,0 0.703125,-0.314484 0.703125,-0.703125 V 2.859375 c 0,-0.3886406 -0.314484,-0.703125 -0.703125,-0.703125 z M 0.703125,3.5625 C 0.3144844,3.5625 0,3.8769844 0,4.265625 v 16.875 c 0,0.388641 0.3144844,0.703125 0.703125,0.703125 H 8.605469 C 8.895906,22.662234 9.677063,23.25 10.59375,23.25 h 2.8125 c 0.916687,0 1.697797,-0.587766 1.988281,-1.40625 h 7.902344 C 23.685516,21.84375 24,21.529266 24,21.140625 v -16.875 C 24,3.8769844 23.685516,3.5625 23.296875,3.5625 H 22.59375 v 14.765625 c 0,1.163156 -0.993094,2.109375 -2.15625,2.109375 H 13.988281 C 13.697844,21.255984 12.916688,21.84375 12,21.84375 c -0.916687,0 -1.697797,-0.587766 -1.988281,-1.40625 H 3.5625 c -1.1631562,0 -2.15625,-0.946219 -2.15625,-2.109375 V 3.5625 Z'); 108 | } 109 | 110 | /* stylelint-enable selector-id-pattern */ 111 | svg path[d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'] { 112 | d: path('m 14.695239,1.9999995 c -0.172564,0 -0.345192,0.065287 -0.476856,0.1969323 L 8.8655558,7.5499113 16.449678,15.134249 21.802505,9.7812686 c 0.263327,-0.26329 0.263327,-0.690404 0,-0.953738 L 20.790203,7.8168279 C 20.561354,7.5879722 20.201783,7.553571 19.934142,7.7354508 l -2.127134,1.4452558 1.437076,-2.1418429 c 0.179492,-0.2675152 0.144859,-0.6250542 -0.083,-0.852831 L 16.965593,3.9921086 C 16.762949,3.7894605 16.453901,3.7358929 16.195788,3.8602778 l -0.379206,0.183912 0.18228,-0.4036299 C 16.114073,3.3850021 16.058716,3.0852515 15.860524,2.8870088 L 15.172095,2.1969318 C 15.040454,2.065287 14.867803,1.9999995 14.695239,1.9999995 Z M 7.8695296,8.5459656 6.3201554,10.095384 c -0.1264491,0.126453 -0.1969268,0.298047 -0.1969268,0.47687 0,0.178823 0.070432,0.350462 0.1969268,0.476869 l 1.4696269,1.46967 c 0.2831508,0.283158 0.4212717,0.6744 0.3775785,1.072548 -0.043647,0.397879 -0.264001,0.749537 -0.6021726,0.965131 -4.3184211,2.752831 -4.7209389,3.155335 -4.8531868,3.287631 -0.9493352,0.949318 -0.9493352,2.494468 0,3.443875 0.9502792,0.950307 2.4954758,0.948419 3.443777,0 0.1323379,-0.132296 0.5349645,-0.535005 3.2875377,-4.853324 0.215049,-0.337372 0.5670569,-0.556823 0.9651039,-0.600563 0.399307,-0.04356 0.790042,0.09352 1.072518,0.375962 l 1.469627,1.469669 c 0.263283,0.26329 0.690429,0.26329 0.953712,0 l 1.549374,-1.549419 z M 4.4762048,18.571614 c 0.2439024,0 0.4877049,0.0922 0.6737825,0.278309 0.3722002,0.372165 0.3722002,0.975393 0,1.347604 -0.3722002,0.372211 -0.9754096,0.372211 -1.347565,0 -0.3722,-0.372211 -0.3722,-0.975439 0,-1.347604 0.1861001,-0.186105 0.4298801,-0.278309 0.6737825,-0.278309 z'); 113 | } 114 | --------------------------------------------------------------------------------