├── .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 |
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 |
4 | New colour-able user profiles need fixing
5 | Users w/out profile banner have avatar cut off at top
6 | Inconsistant message form padding
7 |
8 |
9 | Padding for content behind user-area when multiple panels are present
10 |
11 |
12 |
13 |
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 |
--------------------------------------------------------------------------------