├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── banner.png ├── icon.png └── preview.png ├── index.scss ├── manifest.json ├── powercord_manifest.json └── src ├── addons ├── _channel-indicators.scss ├── _hljs-styling.scss ├── _import.scss ├── _nicer-roles.scss └── _url-imports.scss ├── main ├── _assets │ ├── watermark-icon.svg │ └── win-buttons │ │ ├── windows-close-active.svg │ │ ├── windows-close.svg │ │ ├── windows-max-active.svg │ │ ├── windows-max.svg │ │ ├── windows-min-active.svg │ │ └── windows-min.svg ├── _base.scss ├── app │ ├── _buttons.scss │ ├── _generic.scss │ ├── _guilds.scss │ ├── _import.scss │ ├── _menus.scss │ ├── _os.scss │ ├── _scrollers.scss │ ├── _titlebar.scss │ └── _toolbar.scss ├── channels │ ├── _import.scss │ ├── _sidebar.scss │ └── _user-area.scss ├── chat │ ├── _chatbar.scss │ ├── _content.scss │ └── _import.scss ├── members │ └── _members.scss ├── modals │ ├── _generic.scss │ ├── _import.scss │ ├── _joincreate-server.scss │ ├── _keyboard-combos.scss │ ├── _message-delete.scss │ ├── _reactions.scss │ ├── _screenshare.scss │ ├── _upload.scss │ └── _user.scss ├── pages │ ├── _friends.scss │ ├── _generic.scss │ ├── _import.scss │ ├── _library.scss │ ├── _nitro.scss │ ├── _server-boost.scss │ ├── _server-discovery.scss │ └── _unavailable.scss ├── popouts │ ├── _autocomplete.scss │ ├── _color-picker.scss │ ├── _date-picker.scss │ ├── _dm-create.scss │ ├── _gif-picker.scss │ ├── _import.scss │ ├── _screenshare.scss │ ├── _search-results.scss │ ├── _search.scss │ ├── _status-picker.scss │ └── _user-info.scss └── settings │ ├── _channel.scss │ ├── _generic.scss │ ├── _guild.scss │ ├── _import.scss │ └── _user.scss └── support ├── MidnightMars.theme.css ├── MidnightMars.user.css └── compiled.css /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.6 2 | - **[usrbg](https://github.com/Discord-Custom-Covers/usrbg)** is now removed due to it violating Powercord's guidelines. 3 | - For those in the **[Powercord Discord Server](https://discord.gg/gs4ZMbBfCh)**, you can find more information about this change **[here](https://canary.discord.com/channels/538759280057122817/755012671837044797/847269429699411969)** 4 | 5 | # v1.0.5 6 | - Some optimizations (hopefully). 7 | - Moved variables into compiled source instead of having it in the specific file. This only applies to BetterDiscord and Web. You may need to reinstall the theme if you're on one of these platforms. 8 | 9 | # v1.0.4 10 | Some general changes. 11 | - Themed more things. 12 | - New addition: Friends list now appears as a grid. 13 | - Redid channel indicators. 14 | - Some other small fixes / tweaking. 15 | 16 | # v1.0.3 17 | Themed more missed areas. 18 | 19 | # v1.0.2 20 | A few additions: 21 | - Themed some missing things. 22 | - Added custom HLJS styling for codeblocks as an addon. 23 | 24 | # v1.0.1 25 | Some small general changes: 26 | - Themed multiple areas that I missed. 27 | - Some changes to fix USRBG from stretching to all of the user popout & user modal. I also removed the imports from BD and Web as BDFDB already imports it on BD, and Web will never have support for it period. This closes [issue #2](https://github.com/LuckFire/midnight-mars/issues/2). 28 | 29 | # v1.0.0 30 | Inital release, hope you enjoy! 31 | - Pleaes note that as this is the first release, there will most likely be issues with the theme. If you notice anything wrong with it, please make an issue describing what's wrong. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 LuckFire 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 | # Sunsetting Midnight Mars 2 | This theme has been broken for quite some time and I honestly don't see myself fixing it ever. As of April 10th, 2022, development on Midnight Mars will cease. If anyone is interested in maintaing this theme themselves, feel free to. 3 | 4 | I no longer enjoy what this theme once was, and quite honestly it was rushed and not that good. I don't plan on ever reworking this specific theme because there's so much I just do not enjoy with it. 5 | 6 | If you're interested in something similar to Midnight Mars with a deep purple color palette, I am making another theme so make sure you keep an eye on [Midnight Essence](https://github.com/discord-extensions/midnight-essence/). It'll be ready sometime in the future (you can also check out the dev branch for something that is insanely broken if you wanna check it out now and give feedback). 7 | 8 | Thank you to everyone who used this theme. I appreciate your support. I'm sorry if I let anyone down with this notice. 9 | 10 | # Midnight Mars 11 | A simple, nice looking and deep purple theme inspired by **midnight** on **Mars**! 12 | 13 | ![preview](./assets/preview.png) 14 | 15 | ## Installation 16 | For Powercord & Vizality installation, go to **Themes -> Open CMD / Powershell / Terminal / Gitbash**, and enter the following: 17 | ``` 18 | git clone https://github.com/LuckFire/midnight-mars 19 | ``` 20 | 21 | **For BetterDiscord:** 22 | - [Direct Download](https://betterdiscord.app/Download?id=141) 23 | - [View Source](https://luckfire.github.io/midnight-mars/src/support/compiled.css) 24 | 25 | **For Browser / Web:** 26 | 1. Install the Stylus extension for [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) / [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) / [Opera](https://github.com/openstyles/stylus/wiki/Opera,-Outdated-Stylus). 27 | 2. After installing, head over to [this link](https://luckfire.github.io/midnight-mars/src/support/MidnightMars.user.css). 28 | 3. Press the "Install Style" button. 29 | 30 | # Credits 31 | A big thank you to everyone for the inspiration and help with making this theme! 32 | - **[Pavui](https://github.com/Pavui/)** for being a huge inspiration and for helping me get this done. (and helping me stay sane) 33 | - **[kingultron99](https://github.com/kingultron99)** for the idea of a reactive chat input, coming from their [Material](https://github.com/Kings-Discord-Stuff/material/) theme. 34 | - **[Fahrenheit](https://github.com/Fahrenheit)** for the idea that separates the members list. 35 | 36 | Addon Credits: 37 | - **[Tropical](https://github.com/Tropix126)** for [usrbg](https://github.com/Discord-Custom-Covers/usrbg). 38 | - **[Gibbu](https://github.com/gibbu)** for [RadialStatus](https://github.com/DiscordStyles/RadialStatus). 39 | - **[NYRI4](https://github.com/NYRI4)** for [Discolored](https://github.com/NYRI4/Discolored) . 40 | -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/midnight-mars/cfb8a1116d53c44cba2b39438c5b050cd22c0200/assets/banner.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/midnight-mars/cfb8a1116d53c44cba2b39438c5b050cd22c0200/assets/icon.png -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/midnight-mars/cfb8a1116d53c44cba2b39438c5b050cd22c0200/assets/preview.png -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* ----------- MidnightMars Base ----------- */ 3 | /* ----- Default Theme --- */ 4 | --midnightmars-primary: #36263A; 5 | --midnightmars-primary-alt: #432e4d; 6 | --midnightmars-secondary: #281D30; 7 | --midnightmars-secondary-alt: #211828; 8 | --midnightmars-tertiary: #1a141f; 9 | --midnightmars-modifiers: 168, 113, 182; 10 | --midnightmars-accent: #9864a3; 11 | --midnightmars-accent-dark: #895a92; 12 | --midnightmars-green: #70ad85; 13 | --midnightmars-pill-buttons: rgba(132, 101, 138, 0.522); 14 | /* ----- Status Colors --- */ 15 | --status-online: #00ED8E; 16 | --status-idle: #ffd37a; 17 | --status-dnd: #F87E7C; 18 | --status-offline-invisible: #ADADB8; 19 | --status-streaming: #7e58be; 20 | /* ----- Modals & Popouts --- */ 21 | --midnightmars-layer-primary: var(--midnightmars-primary); 22 | --midnightmars-layer-secondary: var(--midnightmars-secondary); 23 | --midnightmars-layer-secondary-alt: var(--midnightmars-secondary-alt); 24 | --midnightmars-layer-outline: rgb(26, 20, 31, 0.5); 25 | /* ----- Separation --- */ 26 | --border-radius: 5px; 27 | --separation-padding: 7px; 28 | 29 | /* ---------- MidnightMars Addons ---------- */ 30 | /* ----- Chat Indicator --- */ 31 | --border-thickness: 3px; 32 | --border-color: var(--midnightmars-accent); 33 | --border-hover-color: #64416b; 34 | --border-roundness: 3px; 35 | --transition-time: 500ms; 36 | /* ----- Channel Indicators --- */ 37 | --indicator-hovered: rgba(152, 100, 163, 0.09); 38 | --indicator-rounding: 0; 39 | --indicator-border-info: 4px solid; 40 | --indicator-selected: 152, 100, 163; 41 | --indicator-selected-border: rgba(var(--indicator-selected)); 42 | --indicator-selected-background: rgba(var(--indicator-selected), 0.1); 43 | --indicator-selected-hover: rgba(var(--indicator-selected), 0.18); 44 | --indicator-unread: 168, 113, 182; 45 | --indicator-unread-border: rgba(var(--indicator-unread), 0.55); 46 | --indicator-unread-background: rgba(var(--indicator-unread), 0.045); 47 | --indicator-connected: 112, 173, 133; 48 | --indicator-connected-border: rgba(var(--indicator-connected), 0.55); 49 | --indicator-connected-background: rgba(var(--indicator-connected), 0.1); 50 | --indicator-connected-hover: rgba(var(--indicator-connected), 0.18); 51 | 52 | /* ---------- Base Discord Colors ---------- */ 53 | /* ----- Default Theme --- */ 54 | --background-primary: var(--midnightmars-primary); 55 | --background-secondary: var(--midnightmars-secondary); 56 | --background-secondary-alt: var(--midnightmars-secondary-alt); 57 | --background-tertiary: var(--midnightmars-tertiary); 58 | --background-accent: var(--midnightmars-accent); 59 | --background-floating: #19131f; 60 | --channeltextarea-background: var(--midnightmars-secondary-alt); 61 | --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05); 62 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); 63 | /* ----- Text --- */ 64 | --text-normal: #fbfbfb; 65 | --text-muted: #b2a6b6; 66 | --text-link: #b6ecc8; 67 | --channels-default: #b2a6b6; 68 | --interactive-normal: #c8c8c8; 69 | --interactive-hover: #dcddde; 70 | --interactive-active: var(--text-normal); 71 | --interactive-muted: #6f5e72; 72 | --header-primary: var(--text-normal); 73 | --header-secondary: #c9c9c9; 74 | /* ----- Modifiers --- */ 75 | --background-modifier-selected: rgb(var(--midnightmars-modifiers), 0.09); 76 | --background-modifier-hover: rgb(var(--midnightmars-modifiers), 0.12); 77 | --background-modifier-active: rgb(var(--midnightmars-modifiers), 0.18); 78 | --background-modifier-accent: rgba(170, 150, 176, 0.149); 79 | /* ----- Toasts --- */ 80 | --toast-background: var(--midnightmars-primary); 81 | --toast-header: var(--midnightmars-tertiary); 82 | --toast-contents: var(--midnightmars-secondary); 83 | --toast-box-shadow: rgba(0, 0, 0, .2); 84 | --toast-border: var(--midnightmars-tertiary); 85 | /* ----- Mentions --- */ 86 | --background-mentioned: rgba(68, 109, 83, 0.15); 87 | --background-mentioned-hover: rgba(68, 109, 83, 0.25); 88 | --background-mentioned-border: var(--midnightmars-green); 89 | /* ----- Deprecated --- */ 90 | --deprecated-card-bg: var(--midnightmars-secondary); 91 | --deprecated-card-editable-bg: var(--midnightmars-secondary); 92 | --deprecated-text-input-border-disabled: var(--midnightmars-tertiary); 93 | --deprecated-quickswitcher-input-background: var(--midnightmars-primary); 94 | --deprecated-quickswitcher-input-placeholder: var(--text-muted); 95 | } 96 | 97 | @import './src/main/base'; 98 | @import './src/addons/import'; 99 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Midnight Mars", 3 | "description": "A simple, nice looking and deep purple theme inspired by midnight on Mars!", 4 | "version": "1.0.6", 5 | "author": "LuckFire#4800", 6 | "theme": "index.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Midnight Mars", 3 | "description": "A simple, nice looking and deep purple theme inspired by midnight on Mars!", 4 | "version": "1.0.6", 5 | "author": "LuckFire#4800", 6 | "theme": "index.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /src/addons/_channel-indicators.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | /* -------- BASE ---- */ 3 | /* ---- Borders -- */ 4 | .containerDefault--pIXnN .wrapper-2jXpOf, 5 | .channel-2QD9_O { 6 | border-radius: var(--indicator-rounding); 7 | 8 | &::before { 9 | content: ""; 10 | position: absolute; 11 | border-radius: 25px; 12 | top: 1px; 13 | left: 2px; 14 | bottom: 1px; 15 | } 16 | } 17 | /* -------- CHANNEL INDICATORS ---- */ 18 | /* ---- Channel Hover -- */ 19 | .containerDefault--pIXnN .wrapper-2jXpOf:not(.modeSelected-346R90):not(.modeConnected-3IsKId), 20 | .channel-2QD9_O:not(.selected-aXhQR6) { 21 | .content-1x5b-n:hover { 22 | background: var(--indicator-hovered); 23 | } 24 | } 25 | 26 | /* ---- Channel Selected -- */ 27 | .modeSelected-346R90, 28 | .channel-2QD9_O.selected-aXhQR6 { 29 | .content-1x5b-n { 30 | background-color: var(--indicator-selected-background); 31 | &:hover { 32 | background-color: var(--indicator-selected-hover); 33 | } 34 | } 35 | 36 | &::before { 37 | border-left: var(--indicator-border-info) var(--indicator-selected-border); 38 | } 39 | } 40 | 41 | /* ---- Channel Unread -- */ 42 | .modeUnread-1qO3K1 { 43 | .content-1x5b-n { 44 | background-color: var(--indicator-unread-background); 45 | &:hover { 46 | background-color: var(--indicator-unread-hover); 47 | } 48 | } 49 | 50 | &::before { 51 | border-left: var(--indicator-border-info) var(--indicator-unread-border); 52 | } 53 | 54 | .unread-2lAfLh { 55 | display: none; 56 | } 57 | } 58 | 59 | /* ---- VC Connected -- */ 60 | .modeConnected-3IsKId { 61 | .content-1x5b-n { 62 | background-color: var(--indicator-connected-background); 63 | &:hover { 64 | background-color: var(--indicator-connected-hover); 65 | } 66 | } 67 | 68 | &::before { 69 | border-left: var(--indicator-border-info) var(--indicator-connected-border); 70 | } 71 | } 72 | 73 | /* ---- DM Channel Positioning -- */ 74 | .channel-2QD9_O { 75 | margin-left: 0; 76 | max-width: 100%; 77 | 78 | div .avatar-3uk_u9 { 79 | margin-left: 8px; 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /src/addons/_hljs-styling.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .hljs { 3 | background: var(--background-secondary); 4 | color: #a39e9b; 5 | padding: 15px 20px; 6 | border-radius: 0; 7 | border: none; 8 | } 9 | .codeLine-14BKbG { 10 | color: #a39e9b; 11 | } 12 | 13 | .hljs-comment, 14 | .hljs-quote { 15 | color: #8d8687; 16 | } 17 | 18 | .hljs-variable, 19 | .hljs-template-variable, 20 | .hljs-tag, 21 | .hljs-name, 22 | .hljs-selector-id, 23 | .hljs-selector-class, 24 | .hljs-selector-pseudo, 25 | .hljs-regexp, 26 | .hljs-link, 27 | .hljs-meta { 28 | color: #ef6155; 29 | } 30 | 31 | .hljs-number, 32 | .hljs-built_in, 33 | .hljs-literal, 34 | .hljs-type, 35 | .hljs-params, 36 | .hljs-deletion { 37 | color: #f99b15; 38 | } 39 | 40 | .hljs-title, 41 | .hljs-section, 42 | .hljs-attribute { 43 | color: #fec418; 44 | } 45 | 46 | .hljs-string, 47 | .hljs-symbol, 48 | .hljs-bullet, 49 | .hljs-addition { 50 | color: #48b685; 51 | } 52 | 53 | .hljs-keyword, 54 | .hljs-selector-tag { 55 | color: #815ba4; 56 | } 57 | 58 | .hljs-emphasis { 59 | font-style: italic; 60 | } 61 | 62 | .hljs-strong { 63 | font-weight: bold; 64 | } 65 | } -------------------------------------------------------------------------------- /src/addons/_import.scss: -------------------------------------------------------------------------------- 1 | @import './url-imports'; 2 | @import './channel-indicators'; 3 | @import './hljs-styling'; 4 | @import './nicer-roles'; -------------------------------------------------------------------------------- /src/addons/_nicer-roles.scss: -------------------------------------------------------------------------------- 1 | .role-2irmRk { 2 | background-color: var(--background-tertiary); 3 | border-radius: 4px; 4 | border: none; 5 | padding: 0 5px 0 8px; 6 | height: 25px; 7 | 8 | &.actionButton-VzECiy { 9 | background-color: var(--background-tertiary); 10 | padding-left: 7px; 11 | padding-right: 7px; 12 | } 13 | 14 | .roleCircle-3xAZ1j { 15 | margin-right: 6px; 16 | width: 9px; 17 | height: 9px; 18 | } 19 | } -------------------------------------------------------------------------------- /src/addons/_url-imports.scss: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/RadialStatus/base.css"); 2 | @import url("https://nyri4.github.io/Discolored/main.css"); 3 | 4 | :root { 5 | /* ----- RadialStatus by Gibbu --- */ 6 | --rs-small-spacing: 2px; 7 | --rs-large-spacing: 2px; 8 | --rs-width: 2px; 9 | --rs-avatar-shape: 50%; 10 | --rs-online-color: var(--status-online); 11 | --rs-idle-color: var(--status-idle); 12 | --rs-dnd-color: var(--status-dnd); 13 | --rs-offline-color: var(--status-offinle-invisible); 14 | --rs-streaming-color: var(--status-streaming); 15 | --rs-invisible-color: var(--status-offinle-invisible); 16 | } -------------------------------------------------------------------------------- /src/main/_assets/watermark-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/main/_assets/win-buttons/windows-close-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/main/_assets/win-buttons/windows-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/main/_assets/win-buttons/windows-max-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/main/_assets/win-buttons/windows-max.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/main/_assets/win-buttons/windows-min-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/main/_assets/win-buttons/windows-min.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/main/_base.scss: -------------------------------------------------------------------------------- 1 | @import './app/import'; 2 | @import './channels/import'; 3 | @import './chat/import'; 4 | @import './members/members'; 5 | @import './modals/import'; 6 | @import './pages/import'; 7 | @import './popouts/import'; 8 | @import './settings/import'; -------------------------------------------------------------------------------- /src/main/app/_buttons.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // generic buttons 3 | .lookFilled-1Gx00P { 4 | &.colorBrand-3pXr91 { 5 | background-color: var(--midnightmars-accent); 6 | 7 | &:not([disabled]):hover { 8 | background-color: var(--midnightmars-accent-dark); 9 | } 10 | } 11 | &.colorGrey-2DXtkV, 12 | &.colorPrimary-3b3xI6 { 13 | background-color: rgb(255, 255, 255, 0.1); 14 | 15 | &:not([disabled]):hover { 16 | background-color: rgb(255, 255, 255, 0.2); 17 | } 18 | } 19 | } 20 | 21 | // pill buttons 22 | .container-3auIfb { 23 | transition: 250ms; 24 | 25 | &[style="opacity: 1; background-color: rgb(114, 118, 125);"] { 26 | background-color: var(--midnightmars-pill-buttons) !important; 27 | } 28 | &:not([style="opacity: 1; background-color: rgb(114, 118, 125);"]) { 29 | background-color: var(--midnightmars-green) !important; 30 | } 31 | &[style="opacity: 1; background-color: rgb(81, 162, 128);"] { 32 | background-color: #649775 !important; 33 | } 34 | } 35 | 36 | // in-call buttons 37 | .colorable-1bkp8v.primaryDark-3mSFDl { 38 | --background-secondary: var(--midnightmars-secondary); 39 | background-color: var(--background-secondary); 40 | } 41 | } -------------------------------------------------------------------------------- /src/main/app/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // --- classes that are used pretty much everywhere. also stuff that is unsorted ig? 3 | .invite-18yqGF { // listen along 4 | background-color: var(--background-secondary); 5 | border-color: var(--background-secondary-alt); 6 | } 7 | .tile-2OwFgW { // gifts & games 8 | background-color: var(--background-secondary); 9 | 10 | &:hover { 11 | background-color: var(--background-secondary-alt); 12 | } 13 | } 14 | .spoilerText-3p6IlD.hidden-HHr2R { // spoilers 15 | background-color: var(--background-secondary); 16 | 17 | &:hover { 18 | background-color: var(--background-secondary); 19 | } 20 | } 21 | // mentions 22 | .mentioned-xhSam7 { 23 | &:hover { 24 | background-color: var(--background-mentioned-hover); 25 | } 26 | &::before { 27 | background-color: var(--background-mentioned-border); 28 | } 29 | } 30 | .mention { 31 | background-color: var(--background-mentioned); 32 | color: var(--midnightmars-green); 33 | 34 | &:hover { 35 | background-color: var(--midnightmars-green); 36 | color: var(--text-normal); 37 | } 38 | } 39 | // replying & clyde 40 | .replying-1x3H0T, 41 | .ephemeral-1PsL1r { 42 | background-color: rgb(152, 100, 163, 0.15); 43 | &::before { 44 | background-color: var(--midnightmars-accent); 45 | } 46 | } 47 | .ephemeral-1PsL1r .anchorUnderlineOnHover-2ESHQB { 48 | color: var(--midnightmars-green); 49 | } 50 | // reactions 51 | .reaction-1hd86g { 52 | border-radius: var(--border-radius); 53 | 54 | &.reactionMe-wv5HKu { 55 | background-color: rgba(116, 150, 128, 0.15); 56 | border-color: var(--midnightmars-green); 57 | 58 | .reactionCount-2mvXRV { 59 | color: var(--text-normal); 60 | } 61 | } 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /src/main/app/_guilds.scss: -------------------------------------------------------------------------------- 1 | #app-mount .guilds-1SWlCJ { 2 | border-radius: var(--border-radius); 3 | margin-top: var(--separation-padding); 4 | margin-bottom: var(--separation-padding); 5 | margin-left: var(--separation-padding); 6 | margin-right: -7px; 7 | 8 | .homeIcon-FuNwkv { 9 | --scaling: 45px; 10 | position: absolute; 11 | margin-left: 6px; 12 | width: var(--scaling); 13 | height: var(--scaling); 14 | 15 | path { 16 | d: path('M5.2076 2.5672C6.32883 2.9392 7.44289 3.33418 8.57281 3.67624C9.70229 4.01762 10.832 4.45898 11.9898 4.579C13.432 4.72875 14.7947 3.66791 15.253 2.26815C15.4902 1.5426 15.8551 1.76598 16.2647 2.02855C17.9041 3.07993 18.9371 4.63215 19.487 6.44558C19.8361 7.59784 19.885 8.85078 19.9945 10.0654C20.055 10.7352 19.6125 11.1562 19.039 11.4571C15.7807 13.1669 12.7986 12.5231 9.86645 10.5453C8.26883 9.4678 6.56378 8.50355 4.79731 7.74895C3.89698 7.36433 2.75478 7.50733 1.72156 7.5008C0.576228 7.49404 0.174424 7.0734 0.625366 6.04542C1.55271 3.93024 2.54729 2.76446 5.2076 2.5672Z M0.00127989 10.8501C-0.0113201 9.08818 0.0452709 9.14162 1.28804 8.84716C3.83927 8.2424 5.91122 9.23853 7.91003 10.6289C9.39045 11.6582 10.8204 12.7635 12.6092 13.2616C14.5881 13.8131 16.5118 13.7634 18.4321 13.033C18.7038 12.9299 19.0316 12.9767 19.3333 12.9542C19.2876 13.2578 19.2958 13.5832 19.1875 13.8619C18.0008 16.9159 14.4909 17.5207 11.5829 16.2361C10.7216 15.8557 9.85443 15.4592 8.95209 15.2079C7.17014 14.7116 5.43309 15.5173 4.69629 17.2028C4.36694 17.9557 4.07205 17.8815 3.53222 17.4804C1.15609 15.7131 0.269864 13.205 0.00127989 10.8501Z M15.1111 18.7597C13.8718 19.1513 12.8584 19.5393 11.8124 19.7863C10.04 20.2047 8.29907 20.0046 6.64536 19.2218C5.60727 18.7301 5.4894 17.6205 6.35311 16.8698C7.20002 16.1334 8.19823 16.0786 9.14643 16.4377C10.9023 17.1031 12.5468 18.0888 14.4796 18.2191C14.6111 18.2277 14.7308 18.426 15.1111 18.7597Z M5.33334 1.04188C6.25778 0.747008 7.16327 0.346311 8.11087 0.180513C9.68754 -0.0954561 11.2763 -0.102627 12.8166 0.498202C13.5141 0.770042 14.0356 1.19182 13.9981 1.94822C13.96 2.70856 13.3598 3.18791 12.672 3.27571C11.9074 3.37327 11.0689 3.3574 10.3351 3.14684C8.78954 2.70313 7.29134 2.10056 5.77462 1.56058C5.64545 1.51429 5.52334 1.44822 5.39769 1.39151C5.37654 1.27482 5.35471 1.15835 5.33334 1.04188Z') !important; 17 | } 18 | } 19 | 20 | .scroller-1Bvpku { 21 | background-color: var(--midnightmars-secondary); 22 | padding-top: calc(var(--separation-padding) + 2px); 23 | 24 | .expandedFolderBackground-1cujaW, 25 | .folder-1hbNCn[aria-expanded="true"] { 26 | background-color: var(--midnightmars-primary); 27 | } 28 | 29 | .circleIconButton-1QV--U { 30 | background-color: var(--midnightmars-primary-alt); 31 | 32 | svg path { 33 | color: var(--midnightmars-green); 34 | } 35 | 36 | &:hover { 37 | background-color: var(--midnightmars-green); 38 | 39 | svg path { 40 | color: #fff; 41 | } 42 | } 43 | } 44 | } 45 | 46 | .childWrapper-anI2G9 { 47 | background-color: var(--midnightmars-primary-alt); 48 | 49 | &:hover { 50 | background-color: var(--midnightmars-accent); 51 | } 52 | } 53 | .selected-bZ3Lue .childWrapper-anI2G9 { 54 | background-color: var(--background-accent); 55 | } 56 | } -------------------------------------------------------------------------------- /src/main/app/_import.scss: -------------------------------------------------------------------------------- 1 | @import './buttons'; 2 | @import './generic'; 3 | @import './guilds'; 4 | @import './menus'; 5 | @import './os'; 6 | @import './scrollers'; 7 | @import './titlebar'; 8 | @import './toolbar'; -------------------------------------------------------------------------------- /src/main/app/_menus.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .menu-3sdvDG .item-1tOPte:not(.colorDanger-2qLCe1) { 3 | &.focused-3afm-j, &:active { 4 | background-color: var(--midnightmars-accent); 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /src/main/app/_os.scss: -------------------------------------------------------------------------------- 1 | .platform-osx .guilds-1SWlCJ { 2 | .scroller-1Bvpku { 3 | margin-top: 26px; 4 | } 5 | .unreadMentionsIndicatorTop-2-tcdU { 6 | margin-top: 26px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/main/app/_scrollers.scss: -------------------------------------------------------------------------------- 1 | #app-mount .scrollerBase-289Jih { 2 | &.disableScrollAnchor-3V9UtP, 3 | &.auto-Ge5KZx { 4 | &::-webkit-scrollbar { 5 | &-thumb { 6 | background-color: var(--background-secondary-alt); 7 | border-radius: var(--border-radius); 8 | } 9 | 10 | &-track { 11 | background-color: var(--background-secondary); 12 | border-radius: var(--border-radius); 13 | } 14 | } 15 | } 16 | 17 | &.thin-1ybCId::-webkit-scrollbar-thumb { 18 | background-color: var(--background-secondary-alt); 19 | } 20 | } -------------------------------------------------------------------------------- /src/main/app/_titlebar.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"); 2 | 3 | #app-mount .titleBar-AC4pGV { 4 | z-index: 5; 5 | background-color: var(--background-secondary); 6 | border-radius: var(--border-radius); 7 | margin-top: var(--separation-padding); 8 | margin-right: var(--separation-padding); 9 | margin-left: var(--separation-padding); 10 | padding-top: 2px; 11 | 12 | &.typeWindows-1za-n7::after { 13 | content: ""; 14 | position: absolute; 15 | pointer-events: none; 16 | background: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/2785c361e2a24e8b62d02f4ba424fa3e2c96c419/src/main/_assets/watermark-icon.svg') 5px 0/15px 17px no-repeat; 17 | height: 20px; 18 | width: 20px; 19 | left: 5px; 20 | top: 9px; 21 | } 22 | 23 | .wordmark-2iDDfm { 24 | svg { 25 | width: 0; 26 | } 27 | 28 | &::after { 29 | content: "MIDNIGHT MARS"; 30 | position: absolute; 31 | font-family: "Fredoka One"; 32 | background: linear-gradient(270deg, #C779D0 60%, #FEAC5E); 33 | -webkit-background-clip: text; 34 | -webkit-text-fill-color: transparent; 35 | background-clip: text; 36 | background-size: 200% 200%; 37 | font-size: 13px; 38 | font-weight: 600; 39 | top: 11px; 40 | left: 29px; 41 | width: 135px; 42 | } 43 | } 44 | 45 | .winButton-iRh8-Z { 46 | background: var(--icon) 8px 0/13px 15px no-repeat; 47 | opacity: 0.75; 48 | margin-top: 4px; 49 | transition: all 0.2s ease; 50 | 51 | &.winButtonMinMax-PBQ2gm[aria-label="Minimize"] { 52 | --icon: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-min.svg'); 53 | &:hover { 54 | --icon: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-min-active.svg'); 55 | } 56 | } 57 | &.winButtonMinMax-PBQ2gm[aria-label="Maximize"] { 58 | --icon: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-max.svg'); 59 | &:hover { 60 | --icon: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-max-active.svg'); 61 | } 62 | } 63 | &.winButtonClose-1HsbF- { 64 | --icon: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-close.svg'); 65 | &:hover { 66 | --icon: url('https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-close-active.svg'); 67 | } 68 | } 69 | 70 | svg { 71 | color: transparent; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/main/app/_toolbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-1r6BKw.themed-ANHk51 { 2 | --background-secondary: var(--midnightmars-secondary); 3 | --background-secondary-alt: var(--midnightmars-secondary-alt); 4 | --background-tertiary: var(--midnightmars-tertiary); 5 | 6 | background-color: var(--background-secondary); 7 | border-bottom-right-radius: var(--border-radius); 8 | 9 | .children-19S4PO::after { 10 | display: none; 11 | } 12 | 13 | .toolbar-1t6TWx { 14 | background-color: var(--background-secondary-alt); 15 | border-radius: var(--border-radius); 16 | padding: 5px; 17 | } 18 | 19 | .public-DraftStyleDefault-block span[class] { 20 | background-color: var(--background-primary); 21 | } 22 | 23 | .updateIconForeground-3tnNZn { 24 | fill: var(--midnightmars-green); 25 | } 26 | } -------------------------------------------------------------------------------- /src/main/channels/_import.scss: -------------------------------------------------------------------------------- 1 | @import './sidebar'; 2 | @import './user-area'; -------------------------------------------------------------------------------- /src/main/channels/_sidebar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .sidebar-2K8pFh { 2 | background-color: var(--background-tertiary); 3 | border-radius: var(--border-radius); 4 | margin-left: calc(var(--separation-padding) * 2); 5 | display: flex; 6 | flex-direction: column-reverse; 7 | 8 | nav { 9 | border-radius: var(--border-radius); 10 | margin-bottom: var(--separation-padding); 11 | } 12 | 13 | > .thin-1ybCId { 14 | background-color: var(--background-secondary); 15 | border-radius: var(--border-radius); 16 | margin-bottom: var(--separation-padding); 17 | } 18 | 19 | .selectedCategoryItem-FHKU_o .itemInner-gPkiWb { 20 | background-color: var(--midnightmars-accent); 21 | } 22 | } -------------------------------------------------------------------------------- /src/main/channels/_user-area.scss: -------------------------------------------------------------------------------- 1 | #app-mount .panels-j1Uci_ { 2 | background-color: var(--background-secondary); 3 | margin-top: var(--separation-padding); 4 | margin-bottom: var(--separation-padding); 5 | border-radius: var(--border-radius); 6 | display: flex; 7 | flex-direction: column-reverse; 8 | 9 | .alignStretch-DpGPf3 { 10 | background-color: var(--background-secondary-alt); 11 | border-radius: var(--border-radius); 12 | } 13 | 14 | .activityPanel-28dQGo, 15 | .container-1giJp5 { 16 | border-top: 2px dotted var(--background-modifier-accent); 17 | border-bottom: none; 18 | } 19 | } -------------------------------------------------------------------------------- /src/main/chat/_chatbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // reactive chat bar 3 | .form-2fGMdU { 4 | .scrollableContainer-2NUZem { 5 | border-radius: var(--border-radius); 6 | border-bottom-right-radius: var(--border-roundness); 7 | border-bottom-left-radius: var(--border-roundness); 8 | border-bottom: solid var(--border-thickness) var(--background-tertiary); 9 | transition: all var(--transition-time); 10 | } 11 | 12 | &:focus-within .scrollableContainer-2NUZem { 13 | border-color: var(--border-color); 14 | } 15 | 16 | &:hover .scrollableContainer-2NUZem:not(:focus-within) { 17 | border-color: var(--border-hover-color); 18 | } 19 | } 20 | .contents-2mQqc9 { 21 | .scrollableContainer-2NUZem { 22 | border-radius: var(--border-radius); 23 | border-bottom-right-radius: var(--border-roundness); 24 | border-bottom-left-radius: var(--border-roundness); 25 | border-bottom: solid var(--border-thickness) var(--background-tertiary); 26 | transition: all var(--transition-time); 27 | } 28 | 29 | &:focus-within .scrollableContainer-2NUZem { 30 | border-color: var(--border-color); 31 | } 32 | 33 | &:hover .scrollableContainer-2NUZem:not(:focus-within) { 34 | border-color: var(--border-hover-color); 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/main/chat/_content.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .chat-3bRxxu { 3 | background-color: var(--background-tertiary); 4 | border-radius: var(--border-radius); 5 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 6 | left: var(--separation-padding); 7 | 8 | .chatContent-a9vAAp { 9 | background-color: var(--background-primary); 10 | border-bottom-right-radius: var(--border-radius); 11 | } 12 | } 13 | 14 | // New Messages 15 | .newMessagesBar-265mhP { 16 | background-color: var(--background-accent); 17 | border-bottom-right-radius: var(--border-radius); 18 | border-bottom-left-radius: var(--border-radius); 19 | } 20 | // New Messages Separator 21 | .isUnread-3Ef-o9 { 22 | background-color: var(--background-accent); 23 | border-color: var(--background-accent); 24 | 25 | .content-1o0f9g { 26 | color: var(--text-normal); 27 | } 28 | 29 | .unreadPill-2HyYtt { 30 | background-color: var(--background-accent); 31 | 32 | .unreadPillCapStroke-7rkHbg { 33 | fill: var(--background-accent); 34 | color: var(--background-accent); 35 | } 36 | } 37 | } 38 | 39 | // Message Separation 40 | .message-2qnXI6 { 41 | .wrapper-2aW0bm { 42 | background-color: var(--background-secondary-alt); 43 | filter: drop-shadow(0 0 8px var(--background-tertiary)); 44 | } 45 | &.groupStart-23k01U { 46 | &::after { 47 | content: ""; 48 | position: absolute; 49 | background-color: var(--background-modifier-accent); 50 | width: 97.8%; 51 | height: 1px; 52 | top: 0; 53 | left: 16px; 54 | } 55 | &:not(.compact-T3H92H):after { 56 | top: -9px; 57 | } 58 | } 59 | } 60 | .divider-3_HH5L { 61 | + .message-2qnXI6.groupStart-23k01U::after { 62 | content: none; 63 | } 64 | } 65 | .container-3RCQyg { 66 | border: none; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/main/chat/_import.scss: -------------------------------------------------------------------------------- 1 | @import './chatbar'; 2 | @import './content'; -------------------------------------------------------------------------------- /src/main/members/_members.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .chatContent-a9vAAp::before { 3 | content: ''; 4 | position: absolute; 5 | border-top-left-radius: var(--border-radius); 6 | box-shadow: 0 -25px 0 0 var(--background-primary); 7 | top: 0; 8 | right: -30px; 9 | height: 50px; 10 | width: 30px; 11 | } 12 | 13 | .members-1998pB { 14 | margin-top: calc(var(--separation-padding) - 2px); 15 | margin-left: calc(var(--separation-padding) - 2px); 16 | border-radius: var(--border-radius); 17 | } 18 | 19 | .botTag-2WPJ74 { 20 | background-color: var(--midnightmars-green); 21 | color: #fff; 22 | } 23 | } -------------------------------------------------------------------------------- /src/main/modals/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .root-1gCeng:not(.popout-103y-5) { 3 | background-color: var(--background-primary); 4 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 5 | 6 | .header-1TKi98.separator-2-RRj_ { 7 | box-shadow: 0 1px 0 0 var(--background-tertiary), 0 1px 2px 0 rgba(24, 25, 28, 0.3); 8 | } 9 | 10 | .footer-2gL1pp { 11 | background-color: var(--background-secondary); 12 | box-shadow: inset 0 1px 0 var(--midnightmars-layer-outline); 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /src/main/modals/_import.scss: -------------------------------------------------------------------------------- 1 | @import './generic'; 2 | @import './joincreate-server'; 3 | @import './keyboard-combos'; 4 | @import './message-delete'; 5 | @import './reactions'; 6 | @import './screenshare'; 7 | @import './upload'; 8 | @import './user'; -------------------------------------------------------------------------------- /src/main/modals/_joincreate-server.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --jcs-background-primary: var(--midnightmars-primary); 3 | --jcs-background-secondary: var(--midnightmars-secondary); 4 | --jcs-background-secondary-alt: var(--midnightmars-secondary-alt); 5 | --jcs-background-tertiary: var(--midnightmars-tertiary); 6 | --jcs-text-normal: var(--text-normal); 7 | --jcs-header-primary: var(--header-primary); 8 | --jcs-header-secondary: var(--header-secondary); 9 | --jcs-background-modifier-accent: var(--background-modifier-accent); 10 | --jcs-background-modifier-hover: var(--background-modifier-hover); 11 | --jcs-deprecated-text-input-bg: var(--deprecated-text-input-bg); 12 | --jcs-deprecated-text-input-border: var(--deprecated-text-input-border); 13 | } 14 | 15 | #app-mount .theme-light { 16 | .root-1gCeng { 17 | background-color: var(--jcs-background-primary); 18 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 19 | 20 | .colorStandard-2KCXvj { 21 | color: var(--jcs-text-normal) 22 | } 23 | .colorHeaderPrimary-26Jzh- { 24 | color: var(--jcs-header-primary); 25 | } 26 | .colorHeaderSecondary-3Sp3Ft { 27 | color: var(--jcs-header-secondary); 28 | } 29 | .lookBlank-3eh9lL div, 30 | .lookLink-9FtZy- div { 31 | color: var(--jcs-text-normal); 32 | } 33 | 34 | .scrollerBase-289Jih::-webkit-scrollbar-thumb { 35 | background-color: var(--jcs-background-secondary-alt); 36 | } 37 | 38 | .container-UC8Ug1 { 39 | background-color: var(--jcs-background-primary); 40 | border: 1px solid var(--jcs-background-modifier-accent); 41 | 42 | &:hover { 43 | background-color: var(--jcs-background-modifier-hover);; 44 | border: 1px solid var(--jcs-background-modifier-accent); 45 | } 46 | } 47 | 48 | .inputWrapper-31_8H8.input--jS-j2 { 49 | background-color: var(--jcs-background-tertiary); 50 | border-radius: 3px; 51 | } 52 | .sampleLink-2NLvZg { 53 | color: var(--jcs-header-primary); 54 | } 55 | 56 | .input-cIJ7To { 57 | background-color: var(--jcs-deprecated-text-input-bg); 58 | color: var(--jcs-text-normal); 59 | border: 1px solid var(--jcs-deprecated-text-input-border); 60 | } 61 | 62 | .footer-2gL1pp { 63 | background-color: var(--jcs-background-secondary); 64 | box-shadow: inset 0 1px 0 var(--jcs-background-tertiary); 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /src/main/modals/_keyboard-combos.scss: -------------------------------------------------------------------------------- 1 | #app-mount .keyboardShortcutsModal-3piNz7 { 2 | background-color: var(--background-primary); 3 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 4 | 5 | .modalTitle-37O4n6 { 6 | background-color: var(--midnightmars-layer-secondary-alt); 7 | color: var(--header-primary); 8 | } 9 | 10 | .modalSubtitle-1Pj5nv { 11 | background-color: var(--midnightmars-layer-secondary-alt); 12 | color: var(--text-normal); 13 | border-bottom: 1px solid var(--midnightmars-tertiary); 14 | padding-top: 5px; 15 | margin-top: -5px; 16 | } 17 | 18 | .keybindDescription-2RDbC2 { 19 | color: var(--header-secondary); 20 | } 21 | } -------------------------------------------------------------------------------- /src/main/modals/_message-delete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .message-2qRu38 { 2 | background-color: var(--background-secondary); 3 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0,0,0,.2); 4 | } -------------------------------------------------------------------------------- /src/main/modals/_reactions.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-1If-HZ.root-1gCeng { 2 | .scroller-1-nKid { 3 | background-color: var(--background-secondary); 4 | } 5 | .reactionSelected-1pqISm { 6 | background-color: var(--background-modifier-selected); 7 | } 8 | 9 | .reactionDefault-GBA58K:hover { 10 | background-color: var(--background-modifier-active); 11 | } 12 | 13 | .reactors-Blmlhw { 14 | background-color: var(--background-primary); 15 | } 16 | 17 | .reactor-3UBcOI { 18 | box-shadow: inset 0 -1px 0 var(--background-modifier-accent); 19 | } 20 | } -------------------------------------------------------------------------------- /src/main/modals/_screenshare.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modalSize-cqUaws { 2 | .tile-2w4k5N:hover .sourceThumbnail-27dolk { 3 | box-shadow: 0 0 0 2px var(--midnightmars-accent); 4 | } 5 | .sourceThumbnail-27dolk.selected-1nOkyc { 6 | box-shadow: 0 0 0 2px var(--midnightmars-accent); 7 | } 8 | 9 | .selectorButton-EEUWed:not(.selectorButtonPremiumRequired-mKMbIu):hover, 10 | .selectorButtonSelected-t5V9On { 11 | background-color: var(--midnightmars-accent); 12 | } 13 | } -------------------------------------------------------------------------------- /src/main/modals/_upload.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal-2ifh8j { 2 | background-color: var(--background-primary); 3 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 4 | 5 | .footer-3mqk7D { 6 | background-color: var(--background-secondary); 7 | box-shadow: inset 0 1px 0 var(--midnightmars-layer-outline); 8 | } 9 | 10 | .comment-4IWttf { 11 | .scrollableContainer-2NUZem { 12 | border-radius: var(--border-radius); 13 | border-bottom-right-radius: var(--border-roundness); 14 | border-bottom-left-radius: var(--border-roundness); 15 | border-bottom: solid var(--border-thickness) var(--background-tertiary); 16 | transition: all var(--transition-time); 17 | } 18 | 19 | &:focus-within .scrollableContainer-2NUZem { 20 | border-color: var(--border-color); 21 | } 22 | &:hover .scrollableContainer-2NUZem:not(:focus-within) { 23 | border-color: var(--border-hover-color); 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/main/modals/_user.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .root-SR8cQa { 3 | .topSectionPlaying-1J5E4n { 4 | background-color: var(--midnightmars-accent); 5 | } 6 | 7 | .topSectionSpotify-1lI0-P { 8 | background-color: var(--midnightmars-green); 9 | } 10 | 11 | .connectedAccount-36nQx7 { 12 | background-color: var(--background-secondary-alt); 13 | border-color: var(--backgrond-secondary-alt); 14 | } 15 | 16 | .flowerStar-1GeTsn path { 17 | fill: rgba(255, 255, 255, 0.25); 18 | } 19 | .childContainer-1wxZNh { 20 | margin-top: 2px; 21 | } 22 | 23 | .actionButton-3W1xZa { 24 | &.lookFilled-1Gx00P.colorGreen-29iAKY { 25 | background-color: var(--midnightmars-green); 26 | } 27 | 28 | &.lookInverted-2D7oAl.colorBrand-3pXr91 { 29 | color: var(--midnightmars-accent); 30 | } 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /src/main/pages/_friends.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .peopleList-3c4jOR, 3 | .friendsEmpty-1K9B4k { 4 | background-color: var(--background-primary); 5 | } 6 | 7 | .title-30qZAO { 8 | margin-left: 13px; 9 | } 10 | .peopleListItem-2nzedh { 11 | background-color: var(--background-secondary); 12 | border-radius: 5px; 13 | border: solid 1px var(--background-secondary-alt); 14 | padding: 10px; 15 | margin: 8px; 16 | margin-left: 12px; 17 | 18 | .actionButton-uPB8Fs { 19 | background-color: var(--background-modifier-accent); 20 | } 21 | 22 | &:hover { 23 | background-color: var(--background-secondary-alt); 24 | 25 | .actionButton-uPB8Fs { 26 | background-color: var(--background-tertiary); 27 | } 28 | } 29 | } 30 | 31 | // active now 32 | .nowPlayingColumn-2sl4cE { 33 | background-color: var(--background-tertiary); 34 | 35 | &::before { 36 | content: ""; 37 | position: absolute; 38 | border-top-left-radius: var(--border-radius); 39 | box-shadow: 0 -25px 0 0 var(--background-primary); 40 | height: 50px; 41 | width: 30px; 42 | } 43 | 44 | .scroller-2ZPeAD { 45 | background-color: var(--background-secondary); 46 | margin-top: calc(var(--separation-padding) - 2px); 47 | margin-left: calc(var(--separation-padding) - 2px); 48 | border-radius: var(--border-radius); 49 | } 50 | 51 | .itemCard-v9viV7 { 52 | background-color: var(--background-secondary-alt); 53 | 54 | &:hover { 55 | background-color: var(--background-tertiary); 56 | } 57 | 58 | .section-2gLsgF { 59 | background-color: var(--background-primary); 60 | } 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /src/main/pages/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-1D34oG { 3 | position: relative; 4 | background-color: var(--background-tertiary); 5 | border-radius: var(--border-radius); 6 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 7 | left: var(--separation-padding); 8 | } 9 | } -------------------------------------------------------------------------------- /src/main/pages/_import.scss: -------------------------------------------------------------------------------- 1 | @import './generic'; 2 | @import './friends'; 3 | @import './library'; 4 | @import './nitro'; 5 | @import './server-boost'; 6 | @import './server-discovery'; 7 | @import './unavailable'; -------------------------------------------------------------------------------- /src/main/pages/_library.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-3Mxszk { 3 | position: relative; 4 | background-color: var(--background-tertiary); 5 | border-radius: var(--border-radius); 6 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 7 | left: var(--separation-padding); 8 | 9 | .installationPath-3cStrB { 10 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 11 | 12 | circle.background-yZEZik { 13 | stroke: var(--background-modifier-accent); 14 | } 15 | .defaultIndicator-3WqGFB { 16 | background-color: var(--background-modifier-accent); 17 | } 18 | .rowBody-3dJTTZ { 19 | color: var(--text-muted); 20 | } 21 | } 22 | 23 | .hiddenLibraryApplication-T6N3U1 { 24 | border-bottom-color: var(--background-modifier-accent); 25 | 26 | &::before { 27 | background-color: var(--background-secondary); 28 | border-color: var(--background-tertiary); 29 | } 30 | 31 | .restoreButton-3jU0Z6 { 32 | background-color: var(--background-primary); 33 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 1px 5px 0 rgba(0,0,0,.3); 34 | } 35 | .applicationSubText-2V8LSK { 36 | color: var(--text-muted); 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /src/main/pages/_nitro.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .applicationStore-1pNvnv { 3 | position: relative; 4 | background-color: var(--background-tertiary); 5 | border-radius: var(--border-radius); 6 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 7 | left: var(--separation-padding); 8 | } 9 | .featureChildrenWrapper-smz30S > div { 10 | background-color: var(--background-secondary); 11 | } 12 | } -------------------------------------------------------------------------------- /src/main/pages/_server-boost.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .perksModal-fSYqOq { 3 | background-color: var(--background-primary); 4 | 5 | .barBackground-2EEiLw { 6 | background-color: var(--background-secondary); 7 | } 8 | .tierMarkerBackground-3q29am { 9 | background-color: var(--background-secondary); 10 | } 11 | .tierMarkerInProgress-24LMzJ { 12 | background-color: var(--background-secondary) !important; 13 | } 14 | .tierHeaderLocked-1s2JJz { 15 | background-color: var(--background-secondary-alt); 16 | } 17 | .tierBody-16Chc9 { 18 | background-color: var(--background-secondary); 19 | } 20 | 21 | .perk-2WeBWW { 22 | background-color: var(--background-secondary); 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/main/pages/_server-discovery.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .pageWrapper-1PgVDX { 3 | background-color: var(--background-primary); 4 | border-radius: var(--border-radius); 5 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 6 | left: var(--separation-padding); 7 | } 8 | } -------------------------------------------------------------------------------- /src/main/pages/_unavailable.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-2Bfwy4 { 2 | margin: var(--separation-padding); 3 | 4 | .container-1r6BKw.themed-ANHk51 { 5 | border-top-left-radius: var(--border-radius); 6 | border-top-right-radius: var(--border-radius); 7 | } 8 | .content-MLh4nU { 9 | border-bottom-left-radius: var(--border-radius); 10 | border-bottom-right-radius: var(--border-radius); 11 | } 12 | } -------------------------------------------------------------------------------- /src/main/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .autocomplete-1vrmpx { 3 | background-color: var(--background-secondary); 4 | 5 | .selected-1Tbx07 { 6 | background-color: var(--background-primary); 7 | } 8 | .categoryHeader-O1zU94 { 9 | background-color: var(--background-secondary); 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /src/main/popouts/_color-picker.scss: -------------------------------------------------------------------------------- 1 | #app-mount .colorPickerCustom-2CWBn2 { 2 | background-color: var(--background-primary); 3 | border-color: var(--background-tertiary); 4 | } -------------------------------------------------------------------------------- /src/main/popouts/_date-picker.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .calendarPicker-2yf6Ci .react-datepicker { 3 | background-color: var(--midnightmars-secondary); 4 | } 5 | 6 | .react-datepicker__navigation { 7 | border-color: var(--background-floating); 8 | } 9 | 10 | .react-datepicker__header { 11 | background-color: var(--midnightmars-secondary); 12 | border-color: var(--background-modifier-accent); 13 | } 14 | .react-datepicker__current-month { 15 | border-bottom-color: var(--background-modifier-accent); 16 | } 17 | 18 | .react-datepicker__day--today::after { 19 | background-color: var(--midnightmars-accent); 20 | } 21 | 22 | .react-datepicker__day { 23 | border-top-color: var(--background-tertiary); 24 | border-left-color: var(--background-tertiary); 25 | 26 | &:hover:not(.react-datepicker__day--disabled) { 27 | background-color: var(--midnightmars-accent); 28 | } 29 | } 30 | 31 | .react-datepicker__day--outside-month, 32 | .react-datepicker__day--disabled { 33 | background-color: var(--midnightmars-secondary-alt); 34 | } 35 | 36 | .datePickerHint-3Q1Udw { 37 | border-top-color: var(--background-modifier-accent); 38 | 39 | .hintValue-29ny8Z { 40 | background-color: var(--midnightmars-accent); 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /src/main/popouts/_dm-create.scss: -------------------------------------------------------------------------------- 1 | #app-mount .popout-103y-5 { 2 | background-color: var(--midnightmars-layer-primary); 3 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 4 | 5 | .friendSelected-1sa4bG { 6 | background-color: var(--background-modifier-selected); 7 | } 8 | } -------------------------------------------------------------------------------- /src/main/popouts/_gif-picker.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/midnight-mars/cfb8a1116d53c44cba2b39438c5b050cd22c0200/src/main/popouts/_gif-picker.scss -------------------------------------------------------------------------------- /src/main/popouts/_import.scss: -------------------------------------------------------------------------------- 1 | @import './autocomplete'; 2 | @import './color-picker'; 3 | @import './date-picker'; 4 | @import './dm-create'; 5 | @import './gif-picker'; 6 | @import './screenshare'; 7 | @import './search-results'; 8 | @import './search'; 9 | @import './status-picker'; 10 | @import './user-info'; -------------------------------------------------------------------------------- /src/main/popouts/_screenshare.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .streamPreview-2-WUWT { 3 | background-color: var(--background-secondary-alt); 4 | 5 | .previewContainer-12UlHl { 6 | background-color: var(--background-secondary-alt); 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /src/main/popouts/_search-results.scss: -------------------------------------------------------------------------------- 1 | #app-mount .searchResultsWrap-3-pOjs { 2 | margin-top: calc(var(--separation-padding) - 2px); 3 | margin-left: calc(var(--separation-padding) - 2px); 4 | border-radius: var(--border-radius); 5 | 6 | .searchHeader-2XoQg7 { 7 | background-color: var(--background-secondary-alt); 8 | } 9 | } -------------------------------------------------------------------------------- /src/main/popouts/_search.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-3ayLPN#search-results { 2 | background-color: var(--midnightmars-layer-secondary); 3 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 4 | 5 | .queryContainer-RKFJW- { 6 | border-bottom-color: var(--midnightmars-layer-secondary-alt); 7 | } 8 | .focused-2bY0OD { 9 | background-color: var(--midnightmars-layer-secondary-alt); 10 | } 11 | 12 | .option-96V44q { 13 | &::after { 14 | background: transparent; 15 | } 16 | 17 | &.selected-rZcOL- { 18 | background-color: var(--background-tertiary); 19 | 20 | &::before { 21 | background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-tertiary) 80%); 22 | padding-left: 10px; 23 | } 24 | 25 | &::after { 26 | background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-tertiary) 50%); 27 | } 28 | } 29 | } 30 | 31 | .option-96V44q:not(.searchOption-zQ-1l6) { 32 | .filter-3Y_im- { 33 | color: var(--text-muted); 34 | } 35 | .answer-1n6g43 { 36 | color: var(--text-normal); 37 | } 38 | } 39 | .searchOption-zQ-1l6 { 40 | .filter-3Y_im- { 41 | color: var(--text-normal); 42 | } 43 | .answer-1n6g43 { 44 | color: var(--text-muted); 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /src/main/popouts/_status-picker.scss: -------------------------------------------------------------------------------- 1 | #app-mount #status-picker { 2 | #status-picker-online { 3 | &.focused-3afm-j { 4 | background-color: #00ED8E; 5 | } 6 | &:not(.focused-3afm-j) .status-1AY8sU { 7 | background-color: #00ED8E !important; 8 | } 9 | } 10 | #status-picker-idle { 11 | &.focused-3afm-j { 12 | background-color: #ffd37a; 13 | } 14 | &:not(.focused-3afm-j) .status-1AY8sU { 15 | background-color: #ffd37a !important; 16 | } 17 | } 18 | #status-picker-dnd { 19 | &.focused-3afm-j { 20 | background-color: #F87E7C; 21 | } 22 | &:not(.focused-3afm-j) .status-1AY8sU { 23 | background-color: #F87E7C !important; 24 | } 25 | } 26 | #status-picker-invisible { 27 | &.focused-3afm-j { 28 | background-color: #747F8D; 29 | } 30 | &:not(.focused-3afm-j) .status-1AY8sU { 31 | background-color: #747F8D !important; 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/main/popouts/_user-info.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .userPopout-3XzG_A { 3 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--midnightmars-layer-outline); 4 | 5 | .body-3iLsc4, 6 | .footer-1fjuF6 { 7 | background-color: var(--background-secondary); 8 | } 9 | .input-cIJ7To:focus { 10 | border-color: var(--midnightmars-accent); 11 | } 12 | } 13 | 14 | .headerNormal-T_seeN { 15 | background-color: var(--background-tertiary); 16 | } 17 | .headerPlaying-j0WQBV { 18 | background-color: var(--midnightmars-accent); 19 | } 20 | .headerSpotify-zpWxgT { 21 | background-color: var(--midnightmars-green); 22 | } 23 | } -------------------------------------------------------------------------------- /src/main/settings/_channel.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label="CHANNEL_SETTINGS"] { 2 | .allow-1PzSY3 { 3 | &.selected-2YhbGh { 4 | background-color: var(--midnightmars-green); 5 | 6 | svg path { 7 | fill: #fff; 8 | } 9 | } 10 | 11 | svg path { 12 | fill: var(--midnightmars-green); 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /src/main/settings/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="_SETTINGS"] { 2 | background-color: transparent; 3 | margin: var(--separation-padding); 4 | 5 | .standardSidebarView-3F1I7i { 6 | background-color: transparent; 7 | } 8 | .contentRegion-3nDuYy { 9 | border-radius: var(--border-radius); 10 | } 11 | .contentRegionScroller-26nc1e { 12 | border-radius: var(--border-radius); 13 | } 14 | .sidebarRegionScroller-3MXcoP { 15 | border-radius: var(--border-radius); 16 | margin-right: var(--separation-padding); 17 | } 18 | 19 | // esc 20 | .closeButton-1tv5uR { 21 | border-color: var(--background-secondary-alt); 22 | 23 | &:hover { 24 | background-color: var(--background-secondary-alt); 25 | } 26 | } 27 | .keybind-KpFkfr { 28 | color: var(--text-normal); 29 | } 30 | 31 | // all cards 32 | .card-FDVird { 33 | &::before { 34 | background-color: var(--background-secondary); 35 | border-color: var(--background-tertiary); 36 | } 37 | .button-2CgfFz { 38 | background-color: var(--background-primary); 39 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 1px 5px 0 rgba(0,0,0,.3); 40 | } 41 | .hoverRoll-YK53gQ { 42 | color: var(--text-muted); 43 | } 44 | } 45 | 46 | // sliders 47 | .marginTop20-3TxNs6, 48 | .flexChild-faoVW3 { 49 | .bar-2Qqk5Z { 50 | background-color: #5E5161; 51 | 52 | .barFill-23-gu- { 53 | background-color: var(--midnightmars-accent); 54 | } 55 | } 56 | } 57 | .markDash-3hAolZ { 58 | background-color: #5E5161; 59 | } 60 | .markValue-2DwdXI { 61 | color: #89798d; 62 | } 63 | 64 | // raido boxes 65 | .checkbox-1ix_J3 { 66 | background-color: var(--midnightmars-accent) !important; 67 | border-color: var(--midnightmars-accent) !important; 68 | } 69 | .radioIconForeground-XwlXQN { 70 | color: var(--midnightmars-accent) 71 | } 72 | 73 | // icon / avatar 74 | .avatarUploaderInner-3UNxY3 { 75 | background-color: var(--midnightmars-accent); 76 | } 77 | 78 | // unsaved 79 | .noticeRegion-1YviSH > div[style="background-color: rgba(32, 34, 37, 0.9);"] { 80 | background-color: var(--background-tertiary) !important; 81 | transition: 200ms; 82 | } 83 | } -------------------------------------------------------------------------------- /src/main/settings/_guild.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="GUILD_SETTINGS"] { 2 | // emoji 3 | .inputMini-2xQV9P { 4 | background-color: var(--background-secondary-alt); 5 | } 6 | 7 | // aduit log 8 | .auditLog-3jNbM6 { 9 | background-color: var(--background-secondary); 10 | border-color: var(--background-tertiary); 11 | 12 | .headerExpanded-CUEwZ5 { 13 | background-color: var(--background-secondary-alt); 14 | } 15 | .changeDetails-bk98pu { 16 | background-color: var(--background-secondary); 17 | } 18 | .typeCreate-1kfBMl { 19 | color: var(--midnightmars-green); 20 | } 21 | } 22 | 23 | // server boost status 24 | .background-3xPPFc { 25 | color: var(--background-secondary); 26 | } 27 | .tierInProgress-3mBoXq { 28 | background-color: var(--background-secondary); 29 | } 30 | .tierHeaderLocked-1a2opw { 31 | background-color: var(--background-secondary-alt); 32 | } 33 | .tierBody-x9kBBp { 34 | background-color: var(--background-secondary); 35 | } 36 | } -------------------------------------------------------------------------------- /src/main/settings/_import.scss: -------------------------------------------------------------------------------- 1 | @import './generic'; 2 | @import './channel'; 3 | @import './guild'; 4 | @import './user'; -------------------------------------------------------------------------------- /src/main/settings/_user.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="USER_SETTINGS"] { 2 | // my account 3 | .background-1QDuV2 { 4 | --padding: 20px; 5 | background-color: transparent !important; 6 | padding: 0; 7 | 8 | .profile-1eT9hT { 9 | background-color: var(--background-secondary); 10 | border: 1px solid var(--background-tertiary); 11 | border-radius: var(--border-radius); 12 | padding: var(--padding); 13 | } 14 | .fieldList-21DyL8 { 15 | background-color: var(--background-secondary); 16 | border: 1px solid var(--background-tertiary); 17 | border-radius: var(--border-radius); 18 | margin-top: 5px; 19 | padding: var(--padding); 20 | } 21 | } 22 | 23 | // authorized apps 24 | .authedApp-mj2Hmd { 25 | background-color: var(--background-secondary); 26 | } 27 | 28 | // connections 29 | .connection-1fbD7X { 30 | background-color: var(--background-secondary-alt); 31 | } 32 | .connectionHeader-2MDqhu { 33 | background-color: var(--background-secondary); 34 | } 35 | 36 | // subscriptions 37 | .subscriptionDetails-1dUmjl, 38 | .sectionAccountCredit-1uNhnJ { 39 | border-color: var(--background-modifier-accent); 40 | } 41 | .accountCreditRow-SHgyi0 { 42 | border-bottom: none; 43 | } 44 | 45 | // billing 46 | .paymentPane-3bwJ6A { 47 | background-color: var(--background-secondary); 48 | 49 | .paginator-166-09, 50 | .bottomDivider-1K9Gao { 51 | background-color: var(--background-secondary); 52 | } 53 | 54 | .bottomDivider-1K9Gao { 55 | border-bottom-color: var(--background-primary); 56 | } 57 | } 58 | .codeRedemptionRedirect-1wVR4b { 59 | background-color: var(--background-secondary); 60 | border-color: var(--background-tertiary); 61 | } 62 | 63 | // voice & video 64 | .progress-1IcQ3A { 65 | background-color: rgb(255, 255, 255, 0.3); 66 | } 67 | .notches-1sAcEM { 68 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='20' fill='%2336263A'%3E%3Cpath fill-rule='evenodd' d='M0 0h8v20H0V0zm4 2a2 2 0 00-2 2v12a2 2 0 104 0V4a2 2 0 00-2-2z'/%3E%3C/svg%3E"); 69 | } 70 | .previewOverlay-2O7_KC { 71 | background-color: var(--background-secondary); 72 | border-color: var(--background-tertiary); 73 | } 74 | 75 | // game activity 76 | .notDetected-33MY4s { 77 | background-color: rgb(255, 255, 255, 0.15); 78 | } 79 | .nowPlaying-284llR { 80 | background-color: var(--midnightmars-green); 81 | } 82 | .game-1ipmAa { 83 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 84 | } 85 | .flowerStar-1GeTsn path { 86 | fill: var(--midnightmars-accent); 87 | } 88 | 89 | // overlay 90 | .wrapper-3jrx9n { 91 | border-color: var(--midnightmars-accent); 92 | } 93 | .option-n0icdO { 94 | background-color: rgb(255, 255, 255, 0.2); 95 | &:hover { 96 | background-color: var(--midnightmars-accent) 97 | } 98 | 99 | &.selected-mKYnfr { 100 | background-color: var(--midnightmars-accent) 101 | } 102 | } 103 | } -------------------------------------------------------------------------------- /src/support/MidnightMars.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Midnight Mars 3 | * @version 1.0.6 4 | * @description A simple, nice looking and deep purple theme inspired by midnight on Mars! 5 | * @author LuckFire#4800 6 | * 7 | * @website https://github.com/LuckFire 8 | * @source https://github.com/LuckFire/midnight-mars/tree/main/src 9 | **/ 10 | 11 | @import url("https://luckfire.github.io/midnight-mars/src/support/compiled.css"); 12 | -------------------------------------------------------------------------------- /src/support/MidnightMars.user.css: -------------------------------------------------------------------------------- 1 | @-moz-document domain("discord.com") { 2 | /* ==UserStyle== 3 | @name Midnight Mars 4 | @description A simple, nice looking and deep purple theme inspired by midnight on Mars! 5 | @author LuckFire#4800 6 | @namespace github.com/LuckFire/midnight-mars 7 | @version 1.0.6 8 | ==/UserStyle== */ 9 | 10 | @import url("https://luckfire.github.io/midnight-mars/src/support/compiled.css"); 11 | } -------------------------------------------------------------------------------- /src/support/compiled.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"); 2 | @import url("https://discordstyles.github.io/RadialStatus/base.css"); 3 | @import url("https://nyri4.github.io/Discolored/main.css"); 4 | 5 | :root { 6 | /* ----------- MidnightMars Base ----------- */ 7 | /* ----- Default Theme --- */ 8 | --midnightmars-primary: #36263A; 9 | --midnightmars-primary-alt: #432e4d; 10 | --midnightmars-secondary: #281D30; 11 | --midnightmars-secondary-alt: #211828; 12 | --midnightmars-tertiary: #1a141f; 13 | --midnightmars-modifiers: 168, 113, 182; 14 | --midnightmars-accent: #9864a3; 15 | --midnightmars-accent-dark: #895a92; 16 | --midnightmars-green: #70ad85; 17 | --midnightmars-pill-buttons: rgba(132, 101, 138, 0.522); 18 | 19 | /* ----- Status Colors --- */ 20 | --status-online: #00ED8E; 21 | --status-idle: #ffd37a; 22 | --status-dnd: #F87E7C; 23 | --status-offline-invisible: #ADADB8; 24 | --status-streaming: #7e58be; 25 | 26 | /* ----- Modals & Popouts --- */ 27 | --midnightmars-layer-primary: var(--midnightmars-primary); 28 | --midnightmars-layer-secondary: var(--midnightmars-secondary); 29 | --midnightmars-layer-secondary-alt: var(--midnightmars-secondary-alt); 30 | --midnightmars-layer-outline: rgb(26, 20, 31, 0.5); 31 | 32 | /* ----- Separation --- */ 33 | --border-radius: 5px; 34 | --separation-padding: 7px; 35 | 36 | /* ---------- MidnightMars Addons ---------- */ 37 | /* ----- Chat Indicator --- */ 38 | --border-thickness: 3px; 39 | --border-color: var(--midnightmars-accent); 40 | --border-hover-color: #64416b; 41 | --border-roundness: 3px; 42 | --transition-time: 500ms; 43 | 44 | /* ----- Channel Indicators --- */ 45 | --indicator-hovered: rgba(152, 100, 163, 0.09); 46 | --indicator-rounding: 0; 47 | --indicator-border-info: 4px solid; 48 | --indicator-selected: 152, 100, 163; 49 | --indicator-selected-border: rgba(var(--indicator-selected)); 50 | --indicator-selected-background: rgba(var(--indicator-selected), 0.1); 51 | --indicator-selected-hover: rgba(var(--indicator-selected), 0.18); 52 | --indicator-unread: 168, 113, 182; 53 | --indicator-unread-border: rgba(var(--indicator-unread), 0.55); 54 | --indicator-unread-background: rgba(var(--indicator-unread), 0.045); 55 | --indicator-connected: 112, 173, 133; 56 | --indicator-connected-border: rgba(var(--indicator-connected), 0.55); 57 | --indicator-connected-background: rgba(var(--indicator-connected), 0.1); 58 | --indicator-connected-hover: rgba(var(--indicator-connected), 0.18); 59 | 60 | /* ---------- Base Discord Colors ---------- */ 61 | /* ----- Default Theme --- */ 62 | --background-primary: var(--midnightmars-primary); 63 | --background-secondary: var(--midnightmars-secondary); 64 | --background-secondary-alt: var(--midnightmars-secondary-alt); 65 | --background-tertiary: var(--midnightmars-tertiary); 66 | --background-accent: var(--midnightmars-accent); 67 | --background-floating: #19131f; 68 | --channeltextarea-background: var(--midnightmars-secondary-alt); 69 | --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05); 70 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); 71 | 72 | /* ----- Text --- */ 73 | --text-normal: #fbfbfb; 74 | --text-muted: #b2a6b6; 75 | --text-link: #b6ecc8; 76 | --channels-default: #b2a6b6; 77 | --interactive-normal: #c8c8c8; 78 | --interactive-hover: #dcddde; 79 | --interactive-active: var(--text-normal); 80 | --interactive-muted: #6f5e72; 81 | --header-primary: var(--text-normal); 82 | --header-secondary: #c9c9c9; 83 | 84 | /* ----- Modifiers --- */ 85 | --background-modifier-selected: rgb(var(--midnightmars-modifiers), 0.09); 86 | --background-modifier-hover: rgb(var(--midnightmars-modifiers), 0.12); 87 | --background-modifier-active: rgb(var(--midnightmars-modifiers), 0.18); 88 | --background-modifier-accent: rgba(170, 150, 176, 0.149); 89 | 90 | /* ----- Toasts --- */ 91 | --toast-background: var(--midnightmars-primary); 92 | --toast-header: var(--midnightmars-tertiary); 93 | --toast-contents: var(--midnightmars-secondary); 94 | --toast-box-shadow: rgba(0, 0, 0, .2); 95 | --toast-border: var(--midnightmars-tertiary); 96 | 97 | /* ----- Mentions --- */ 98 | --background-mentioned: rgba(68, 109, 83, 0.15); 99 | --background-mentioned-hover: rgba(68, 109, 83, 0.25); 100 | --background-mentioned-border: var(--midnightmars-green); 101 | 102 | /* ----- Deprecated --- */ 103 | --deprecated-card-bg: var(--midnightmars-secondary); 104 | --deprecated-card-editable-bg: var(--midnightmars-secondary); 105 | --deprecated-text-input-border-disabled: var(--midnightmars-tertiary); 106 | --deprecated-quickswitcher-input-background: var(--midnightmars-primary); 107 | --deprecated-quickswitcher-input-placeholder: var(--text-muted); 108 | } 109 | 110 | #app-mount .lookFilled-1Gx00P.colorBrand-3pXr91 { 111 | background-color: var(--midnightmars-accent); 112 | } 113 | #app-mount .lookFilled-1Gx00P.colorBrand-3pXr91:not([disabled]):hover { 114 | background-color: var(--midnightmars-accent-dark); 115 | } 116 | #app-mount .lookFilled-1Gx00P.colorGrey-2DXtkV, 117 | #app-mount .lookFilled-1Gx00P.colorPrimary-3b3xI6 { 118 | background-color: rgba(255, 255, 255, 0.1); 119 | } 120 | #app-mount .lookFilled-1Gx00P.colorGrey-2DXtkV:not([disabled]):hover, 121 | #app-mount .lookFilled-1Gx00P.colorPrimary-3b3xI6:not([disabled]):hover { 122 | background-color: rgba(255, 255, 255, 0.2); 123 | } 124 | #app-mount .container-3auIfb { 125 | -webkit-transition: 250ms; 126 | transition: 250ms; 127 | } 128 | #app-mount .container-3auIfb[style="opacity: 1; background-color: rgb(114, 118, 125);"] { 129 | background-color: var(--midnightmars-pill-buttons) !important; 130 | } 131 | #app-mount .container-3auIfb:not([style="opacity: 1; background-color: rgb(114, 118, 125);"]) { 132 | background-color: var(--midnightmars-green) !important; 133 | } 134 | #app-mount .container-3auIfb[style="opacity: 1; background-color: rgb(81, 162, 128);"] { 135 | background-color: #649775 !important; 136 | } 137 | #app-mount .colorable-1bkp8v.primaryDark-3mSFDl { 138 | --background-secondary: var(--midnightmars-secondary); 139 | background-color: var(--background-secondary); 140 | } 141 | 142 | #app-mount .invite-18yqGF { 143 | background-color: var(--background-secondary); 144 | border-color: var(--background-secondary-alt); 145 | } 146 | #app-mount .tile-2OwFgW { 147 | background-color: var(--background-secondary); 148 | } 149 | #app-mount .tile-2OwFgW:hover { 150 | background-color: var(--background-secondary-alt); 151 | } 152 | #app-mount .spoilerText-3p6IlD.hidden-HHr2R { 153 | background-color: var(--background-secondary); 154 | } 155 | #app-mount .spoilerText-3p6IlD.hidden-HHr2R:hover { 156 | background-color: var(--background-secondary); 157 | } 158 | #app-mount .mentioned-xhSam7:hover { 159 | background-color: var(--background-mentioned-hover); 160 | } 161 | #app-mount .mentioned-xhSam7::before { 162 | background-color: var(--background-mentioned-border); 163 | } 164 | #app-mount .mention { 165 | background-color: var(--background-mentioned); 166 | color: var(--midnightmars-green); 167 | } 168 | #app-mount .mention:hover { 169 | background-color: var(--midnightmars-green); 170 | color: var(--text-normal); 171 | } 172 | #app-mount .replying-1x3H0T, 173 | #app-mount .ephemeral-1PsL1r { 174 | background-color: rgba(152, 100, 163, 0.15); 175 | } 176 | #app-mount .replying-1x3H0T::before, 177 | #app-mount .ephemeral-1PsL1r::before { 178 | background-color: var(--midnightmars-accent); 179 | } 180 | #app-mount .ephemeral-1PsL1r .anchorUnderlineOnHover-2ESHQB { 181 | color: var(--midnightmars-green); 182 | } 183 | #app-mount .reaction-1hd86g { 184 | border-radius: var(--border-radius); 185 | } 186 | #app-mount .reaction-1hd86g.reactionMe-wv5HKu { 187 | background-color: rgba(116, 150, 128, 0.15); 188 | border-color: var(--midnightmars-green); 189 | } 190 | #app-mount .reaction-1hd86g.reactionMe-wv5HKu .reactionCount-2mvXRV { 191 | color: var(--text-normal); 192 | } 193 | 194 | #app-mount .guilds-1SWlCJ { 195 | border-radius: var(--border-radius); 196 | margin-top: var(--separation-padding); 197 | margin-bottom: var(--separation-padding); 198 | margin-left: var(--separation-padding); 199 | margin-right: -7px; 200 | } 201 | #app-mount .guilds-1SWlCJ .homeIcon-FuNwkv { 202 | --scaling: 45px; 203 | position: absolute; 204 | margin-left: 6px; 205 | width: var(--scaling); 206 | height: var(--scaling); 207 | } 208 | #app-mount .guilds-1SWlCJ .homeIcon-FuNwkv path { 209 | d: path("M5.2076 2.5672C6.32883 2.9392 7.44289 3.33418 8.57281 3.67624C9.70229 4.01762 10.832 4.45898 11.9898 4.579C13.432 4.72875 14.7947 3.66791 15.253 2.26815C15.4902 1.5426 15.8551 1.76598 16.2647 2.02855C17.9041 3.07993 18.9371 4.63215 19.487 6.44558C19.8361 7.59784 19.885 8.85078 19.9945 10.0654C20.055 10.7352 19.6125 11.1562 19.039 11.4571C15.7807 13.1669 12.7986 12.5231 9.86645 10.5453C8.26883 9.4678 6.56378 8.50355 4.79731 7.74895C3.89698 7.36433 2.75478 7.50733 1.72156 7.5008C0.576228 7.49404 0.174424 7.0734 0.625366 6.04542C1.55271 3.93024 2.54729 2.76446 5.2076 2.5672Z M0.00127989 10.8501C-0.0113201 9.08818 0.0452709 9.14162 1.28804 8.84716C3.83927 8.2424 5.91122 9.23853 7.91003 10.6289C9.39045 11.6582 10.8204 12.7635 12.6092 13.2616C14.5881 13.8131 16.5118 13.7634 18.4321 13.033C18.7038 12.9299 19.0316 12.9767 19.3333 12.9542C19.2876 13.2578 19.2958 13.5832 19.1875 13.8619C18.0008 16.9159 14.4909 17.5207 11.5829 16.2361C10.7216 15.8557 9.85443 15.4592 8.95209 15.2079C7.17014 14.7116 5.43309 15.5173 4.69629 17.2028C4.36694 17.9557 4.07205 17.8815 3.53222 17.4804C1.15609 15.7131 0.269864 13.205 0.00127989 10.8501Z M15.1111 18.7597C13.8718 19.1513 12.8584 19.5393 11.8124 19.7863C10.04 20.2047 8.29907 20.0046 6.64536 19.2218C5.60727 18.7301 5.4894 17.6205 6.35311 16.8698C7.20002 16.1334 8.19823 16.0786 9.14643 16.4377C10.9023 17.1031 12.5468 18.0888 14.4796 18.2191C14.6111 18.2277 14.7308 18.426 15.1111 18.7597Z M5.33334 1.04188C6.25778 0.747008 7.16327 0.346311 8.11087 0.180513C9.68754 -0.0954561 11.2763 -0.102627 12.8166 0.498202C13.5141 0.770042 14.0356 1.19182 13.9981 1.94822C13.96 2.70856 13.3598 3.18791 12.672 3.27571C11.9074 3.37327 11.0689 3.3574 10.3351 3.14684C8.78954 2.70313 7.29134 2.10056 5.77462 1.56058C5.64545 1.51429 5.52334 1.44822 5.39769 1.39151C5.37654 1.27482 5.35471 1.15835 5.33334 1.04188Z") !important; 210 | } 211 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku { 212 | background-color: var(--midnightmars-secondary); 213 | padding-top: calc(var(--separation-padding) + 2px); 214 | } 215 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku .expandedFolderBackground-1cujaW, 216 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku .folder-1hbNCn[aria-expanded=true] { 217 | background-color: var(--midnightmars-primary); 218 | } 219 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku .circleIconButton-1QV--U { 220 | background-color: var(--midnightmars-primary-alt); 221 | } 222 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku .circleIconButton-1QV--U svg path { 223 | color: var(--midnightmars-green); 224 | } 225 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku .circleIconButton-1QV--U:hover { 226 | background-color: var(--midnightmars-green); 227 | } 228 | #app-mount .guilds-1SWlCJ .scroller-1Bvpku .circleIconButton-1QV--U:hover svg path { 229 | color: #fff; 230 | } 231 | #app-mount .guilds-1SWlCJ .childWrapper-anI2G9 { 232 | background-color: var(--midnightmars-primary-alt); 233 | } 234 | #app-mount .guilds-1SWlCJ .childWrapper-anI2G9:hover { 235 | background-color: var(--midnightmars-accent); 236 | } 237 | #app-mount .guilds-1SWlCJ .selected-bZ3Lue .childWrapper-anI2G9 { 238 | background-color: var(--background-accent); 239 | } 240 | 241 | #app-mount .menu-3sdvDG .item-1tOPte:not(.colorDanger-2qLCe1).focused-3afm-j, 242 | #app-mount .menu-3sdvDG .item-1tOPte:not(.colorDanger-2qLCe1):active { 243 | background-color: var(--midnightmars-accent); 244 | } 245 | 246 | .platform-osx .guilds-1SWlCJ .scroller-1Bvpku { 247 | margin-top: 26px; 248 | } 249 | .platform-osx .guilds-1SWlCJ .unreadMentionsIndicatorTop-2-tcdU { 250 | margin-top: 26px; 251 | } 252 | 253 | #app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-thumb, 254 | #app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-thumb { 255 | background-color: var(--background-secondary-alt); 256 | border-radius: var(--border-radius); 257 | } 258 | #app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-track, 259 | #app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-track { 260 | background-color: var(--background-secondary); 261 | border-radius: var(--border-radius); 262 | } 263 | #app-mount .scrollerBase-289Jih.thin-1ybCId::-webkit-scrollbar-thumb { 264 | background-color: var(--background-secondary-alt); 265 | } 266 | 267 | #app-mount .titleBar-AC4pGV { 268 | z-index: 5; 269 | background-color: var(--background-secondary); 270 | border-radius: var(--border-radius); 271 | margin-top: var(--separation-padding); 272 | margin-right: var(--separation-padding); 273 | margin-left: var(--separation-padding); 274 | padding-top: 2px; 275 | } 276 | #app-mount .titleBar-AC4pGV.typeWindows-1za-n7::after { 277 | content: ""; 278 | position: absolute; 279 | pointer-events: none; 280 | background: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/2785c361e2a24e8b62d02f4ba424fa3e2c96c419/src/main/_assets/watermark-icon.svg") 5px 0/15px 17px no-repeat; 281 | height: 20px; 282 | width: 20px; 283 | left: 5px; 284 | top: 9px; 285 | } 286 | #app-mount .titleBar-AC4pGV .wordmark-2iDDfm svg { 287 | width: 0; 288 | } 289 | #app-mount .titleBar-AC4pGV .wordmark-2iDDfm::after { 290 | content: "MIDNIGHT MARS"; 291 | position: absolute; 292 | font-family: "Fredoka One"; 293 | background: -webkit-gradient(linear, right top, left top, color-stop(60%, 294 | #C779D0), to(#FEAC5E)); 295 | background: linear-gradient(270deg, 296 | #C779D0 60%, 297 | #FEAC5E); 298 | -webkit-background-clip: text; 299 | -webkit-text-fill-color: transparent; 300 | background-clip: text; 301 | background-size: 200% 200%; 302 | font-size: 13px; 303 | font-weight: 600; 304 | top: 11px; 305 | left: 29px; 306 | width: 135px; 307 | } 308 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z { 309 | background: var(--icon) 8px 0/13px 15px no-repeat; 310 | opacity: 0.75; 311 | margin-top: 4px; 312 | -webkit-transition: all 0.2s ease; 313 | transition: all 0.2s ease; 314 | } 315 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z.winButtonMinMax-PBQ2gm[aria-label=Minimize] { 316 | --icon: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-min.svg"); 317 | } 318 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z.winButtonMinMax-PBQ2gm[aria-label=Minimize]:hover { 319 | --icon: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-min-active.svg"); 320 | } 321 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z.winButtonMinMax-PBQ2gm[aria-label=Maximize] { 322 | --icon: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-max.svg"); 323 | } 324 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z.winButtonMinMax-PBQ2gm[aria-label=Maximize]:hover { 325 | --icon: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-max-active.svg"); 326 | } 327 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z.winButtonClose-1HsbF- { 328 | --icon: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-close.svg"); 329 | } 330 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z.winButtonClose-1HsbF-:hover { 331 | --icon: url("https://raw.githubusercontent.com/LuckFire/midnight-mars/main/src/main/_assets/win-buttons/windows-close-active.svg"); 332 | } 333 | #app-mount .titleBar-AC4pGV .winButton-iRh8-Z svg { 334 | color: transparent; 335 | } 336 | 337 | #app-mount .container-1r6BKw.themed-ANHk51 { 338 | --background-secondary: var(--midnightmars-secondary); 339 | --background-secondary-alt: var(--midnightmars-secondary-alt); 340 | --background-tertiary: var(--midnightmars-tertiary); 341 | background-color: var(--background-secondary); 342 | border-bottom-right-radius: var(--border-radius); 343 | } 344 | #app-mount .container-1r6BKw.themed-ANHk51 .children-19S4PO::after { 345 | display: none; 346 | } 347 | #app-mount .container-1r6BKw.themed-ANHk51 .toolbar-1t6TWx { 348 | background-color: var(--background-secondary-alt); 349 | border-radius: var(--border-radius); 350 | padding: 5px; 351 | } 352 | #app-mount .container-1r6BKw.themed-ANHk51 .public-DraftStyleDefault-block span[class] { 353 | background-color: var(--background-primary); 354 | } 355 | #app-mount .container-1r6BKw.themed-ANHk51 .updateIconForeground-3tnNZn { 356 | fill: var(--midnightmars-green); 357 | } 358 | 359 | #app-mount .sidebar-2K8pFh { 360 | background-color: var(--background-tertiary); 361 | border-radius: var(--border-radius); 362 | margin-left: calc(var(--separation-padding) * 2); 363 | display: -webkit-box; 364 | display: -ms-flexbox; 365 | display: flex; 366 | -webkit-box-orient: vertical; 367 | -webkit-box-direction: reverse; 368 | -ms-flex-direction: column-reverse; 369 | flex-direction: column-reverse; 370 | } 371 | #app-mount .sidebar-2K8pFh nav { 372 | border-radius: var(--border-radius); 373 | margin-bottom: var(--separation-padding); 374 | } 375 | #app-mount .sidebar-2K8pFh > .thin-1ybCId { 376 | background-color: var(--background-secondary); 377 | border-radius: var(--border-radius); 378 | margin-bottom: var(--separation-padding); 379 | } 380 | #app-mount .sidebar-2K8pFh .selectedCategoryItem-FHKU_o .itemInner-gPkiWb { 381 | background-color: var(--midnightmars-accent); 382 | } 383 | 384 | #app-mount .panels-j1Uci_ { 385 | background-color: var(--background-secondary); 386 | margin-top: var(--separation-padding); 387 | margin-bottom: var(--separation-padding); 388 | border-radius: var(--border-radius); 389 | display: -webkit-box; 390 | display: -ms-flexbox; 391 | display: flex; 392 | -webkit-box-orient: vertical; 393 | -webkit-box-direction: reverse; 394 | -ms-flex-direction: column-reverse; 395 | flex-direction: column-reverse; 396 | } 397 | #app-mount .panels-j1Uci_ .alignStretch-DpGPf3 { 398 | background-color: var(--background-secondary-alt); 399 | border-radius: var(--border-radius); 400 | } 401 | #app-mount .panels-j1Uci_ .activityPanel-28dQGo, 402 | #app-mount .panels-j1Uci_ .container-1giJp5 { 403 | border-top: 2px dotted var(--background-modifier-accent); 404 | border-bottom: none; 405 | } 406 | 407 | #app-mount .form-2fGMdU .scrollableContainer-2NUZem { 408 | border-radius: var(--border-radius); 409 | border-bottom-right-radius: var(--border-roundness); 410 | border-bottom-left-radius: var(--border-roundness); 411 | border-bottom: solid var(--border-thickness) var(--background-tertiary); 412 | -webkit-transition: all var(--transition-time); 413 | transition: all var(--transition-time); 414 | } 415 | #app-mount .form-2fGMdU:focus-within .scrollableContainer-2NUZem { 416 | border-color: var(--border-color); 417 | } 418 | #app-mount .form-2fGMdU:hover .scrollableContainer-2NUZem:not(:focus-within) { 419 | border-color: var(--border-hover-color); 420 | } 421 | #app-mount .contents-2mQqc9 .scrollableContainer-2NUZem { 422 | border-radius: var(--border-radius); 423 | border-bottom-right-radius: var(--border-roundness); 424 | border-bottom-left-radius: var(--border-roundness); 425 | border-bottom: solid var(--border-thickness) var(--background-tertiary); 426 | -webkit-transition: all var(--transition-time); 427 | transition: all var(--transition-time); 428 | } 429 | #app-mount .contents-2mQqc9:focus-within .scrollableContainer-2NUZem { 430 | border-color: var(--border-color); 431 | } 432 | #app-mount .contents-2mQqc9:hover .scrollableContainer-2NUZem:not(:focus-within) { 433 | border-color: var(--border-hover-color); 434 | } 435 | 436 | #app-mount .chat-3bRxxu { 437 | background-color: var(--background-tertiary); 438 | border-radius: var(--border-radius); 439 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 440 | left: var(--separation-padding); 441 | } 442 | #app-mount .chat-3bRxxu .chatContent-a9vAAp { 443 | background-color: var(--background-primary); 444 | border-bottom-right-radius: var(--border-radius); 445 | } 446 | #app-mount .newMessagesBar-265mhP { 447 | background-color: var(--background-accent); 448 | border-bottom-right-radius: var(--border-radius); 449 | border-bottom-left-radius: var(--border-radius); 450 | } 451 | #app-mount .isUnread-3Ef-o9 { 452 | background-color: var(--background-accent); 453 | border-color: var(--background-accent); 454 | } 455 | #app-mount .isUnread-3Ef-o9 .content-1o0f9g { 456 | color: var(--text-normal); 457 | } 458 | #app-mount .isUnread-3Ef-o9 .unreadPill-2HyYtt { 459 | background-color: var(--background-accent); 460 | } 461 | #app-mount .isUnread-3Ef-o9 .unreadPill-2HyYtt .unreadPillCapStroke-7rkHbg { 462 | fill: var(--background-accent); 463 | color: var(--background-accent); 464 | } 465 | #app-mount .message-2qnXI6 .wrapper-2aW0bm { 466 | background-color: var(--background-secondary-alt); 467 | -webkit-filter: drop-shadow(0 0 8px var(--background-tertiary)); 468 | filter: drop-shadow(0 0 8px var(--background-tertiary)); 469 | } 470 | #app-mount .message-2qnXI6.groupStart-23k01U::after { 471 | content: ""; 472 | position: absolute; 473 | background-color: var(--background-modifier-accent); 474 | width: 97.8%; 475 | height: 1px; 476 | top: 0; 477 | left: 16px; 478 | } 479 | #app-mount .message-2qnXI6.groupStart-23k01U:not(.compact-T3H92H):after { 480 | top: -9px; 481 | } 482 | #app-mount .divider-3_HH5L + .message-2qnXI6.groupStart-23k01U::after { 483 | content: none; 484 | } 485 | #app-mount .container-3RCQyg { 486 | border: none; 487 | } 488 | 489 | #app-mount .chatContent-a9vAAp::before { 490 | content: ""; 491 | position: absolute; 492 | border-top-left-radius: var(--border-radius); 493 | -webkit-box-shadow: 0 -25px 0 0 var(--background-primary); 494 | box-shadow: 0 -25px 0 0 var(--background-primary); 495 | top: 0; 496 | right: -30px; 497 | height: 50px; 498 | width: 30px; 499 | } 500 | #app-mount .members-1998pB { 501 | margin-top: calc(var(--separation-padding) - 2px); 502 | margin-left: calc(var(--separation-padding) - 2px); 503 | border-radius: var(--border-radius); 504 | } 505 | #app-mount .botTag-2WPJ74 { 506 | background-color: var(--midnightmars-green); 507 | color: #fff; 508 | } 509 | 510 | #app-mount .root-1gCeng:not(.popout-103y-5) { 511 | background-color: var(--background-primary); 512 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 513 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 514 | } 515 | #app-mount .root-1gCeng:not(.popout-103y-5) .header-1TKi98.separator-2-RRj_ { 516 | -webkit-box-shadow: 0 1px 0 0 var(--background-tertiary), 0 1px 2px 0 rgba(24, 25, 28, 0.3); 517 | box-shadow: 0 1px 0 0 var(--background-tertiary), 0 1px 2px 0 rgba(24, 25, 28, 0.3); 518 | } 519 | #app-mount .root-1gCeng:not(.popout-103y-5) .footer-2gL1pp { 520 | background-color: var(--background-secondary); 521 | -webkit-box-shadow: inset 0 1px 0 var(--midnightmars-layer-outline); 522 | box-shadow: inset 0 1px 0 var(--midnightmars-layer-outline); 523 | } 524 | 525 | :root { 526 | --jcs-background-primary: var(--midnightmars-primary); 527 | --jcs-background-secondary: var(--midnightmars-secondary); 528 | --jcs-background-secondary-alt: var(--midnightmars-secondary-alt); 529 | --jcs-background-tertiary: var(--midnightmars-tertiary); 530 | --jcs-text-normal: var(--text-normal); 531 | --jcs-header-primary: var(--header-primary); 532 | --jcs-header-secondary: var(--header-secondary); 533 | --jcs-background-modifier-accent: var(--background-modifier-accent); 534 | --jcs-background-modifier-hover: var(--background-modifier-hover); 535 | --jcs-deprecated-text-input-bg: var(--deprecated-text-input-bg); 536 | --jcs-deprecated-text-input-border: var(--deprecated-text-input-border); 537 | } 538 | 539 | #app-mount .theme-light .root-1gCeng { 540 | background-color: var(--jcs-background-primary); 541 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 542 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 543 | } 544 | #app-mount .theme-light .root-1gCeng .colorStandard-2KCXvj { 545 | color: var(--jcs-text-normal); 546 | } 547 | #app-mount .theme-light .root-1gCeng .colorHeaderPrimary-26Jzh- { 548 | color: var(--jcs-header-primary); 549 | } 550 | #app-mount .theme-light .root-1gCeng .colorHeaderSecondary-3Sp3Ft { 551 | color: var(--jcs-header-secondary); 552 | } 553 | #app-mount .theme-light .root-1gCeng .lookBlank-3eh9lL div, 554 | #app-mount .theme-light .root-1gCeng .lookLink-9FtZy- div { 555 | color: var(--jcs-text-normal); 556 | } 557 | #app-mount .theme-light .root-1gCeng .scrollerBase-289Jih::-webkit-scrollbar-thumb { 558 | background-color: var(--jcs-background-secondary-alt); 559 | } 560 | #app-mount .theme-light .root-1gCeng .container-UC8Ug1 { 561 | background-color: var(--jcs-background-primary); 562 | border: 1px solid var(--jcs-background-modifier-accent); 563 | } 564 | #app-mount .theme-light .root-1gCeng .container-UC8Ug1:hover { 565 | background-color: var(--jcs-background-modifier-hover); 566 | border: 1px solid var(--jcs-background-modifier-accent); 567 | } 568 | #app-mount .theme-light .root-1gCeng .inputWrapper-31_8H8.input--jS-j2 { 569 | background-color: var(--jcs-background-tertiary); 570 | border-radius: 3px; 571 | } 572 | #app-mount .theme-light .root-1gCeng .sampleLink-2NLvZg { 573 | color: var(--jcs-header-primary); 574 | } 575 | #app-mount .theme-light .root-1gCeng .input-cIJ7To { 576 | background-color: var(--jcs-deprecated-text-input-bg); 577 | color: var(--jcs-text-normal); 578 | border: 1px solid var(--jcs-deprecated-text-input-border); 579 | } 580 | #app-mount .theme-light .root-1gCeng .footer-2gL1pp { 581 | background-color: var(--jcs-background-secondary); 582 | -webkit-box-shadow: inset 0 1px 0 var(--jcs-background-tertiary); 583 | box-shadow: inset 0 1px 0 var(--jcs-background-tertiary); 584 | } 585 | 586 | #app-mount .keyboardShortcutsModal-3piNz7 { 587 | background-color: var(--background-primary); 588 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 589 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 590 | } 591 | #app-mount .keyboardShortcutsModal-3piNz7 .modalTitle-37O4n6 { 592 | background-color: var(--midnightmars-layer-secondary-alt); 593 | color: var(--header-primary); 594 | } 595 | #app-mount .keyboardShortcutsModal-3piNz7 .modalSubtitle-1Pj5nv { 596 | background-color: var(--midnightmars-layer-secondary-alt); 597 | color: var(--text-normal); 598 | border-bottom: 1px solid var(--midnightmars-tertiary); 599 | padding-top: 5px; 600 | margin-top: -5px; 601 | } 602 | #app-mount .keyboardShortcutsModal-3piNz7 .keybindDescription-2RDbC2 { 603 | color: var(--header-secondary); 604 | } 605 | 606 | #app-mount .message-2qRu38 { 607 | background-color: var(--background-secondary); 608 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 609 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 610 | } 611 | 612 | #app-mount .container-1If-HZ.root-1gCeng .scroller-1-nKid { 613 | background-color: var(--background-secondary); 614 | } 615 | #app-mount .container-1If-HZ.root-1gCeng .reactionSelected-1pqISm { 616 | background-color: var(--background-modifier-selected); 617 | } 618 | #app-mount .container-1If-HZ.root-1gCeng .reactionDefault-GBA58K:hover { 619 | background-color: var(--background-modifier-active); 620 | } 621 | #app-mount .container-1If-HZ.root-1gCeng .reactors-Blmlhw { 622 | background-color: var(--background-primary); 623 | } 624 | #app-mount .container-1If-HZ.root-1gCeng .reactor-3UBcOI { 625 | -webkit-box-shadow: inset 0 -1px 0 var(--background-modifier-accent); 626 | box-shadow: inset 0 -1px 0 var(--background-modifier-accent); 627 | } 628 | 629 | #app-mount .modalSize-cqUaws .tile-2w4k5N:hover .sourceThumbnail-27dolk { 630 | -webkit-box-shadow: 0 0 0 2px var(--midnightmars-accent); 631 | box-shadow: 0 0 0 2px var(--midnightmars-accent); 632 | } 633 | #app-mount .modalSize-cqUaws .sourceThumbnail-27dolk.selected-1nOkyc { 634 | -webkit-box-shadow: 0 0 0 2px var(--midnightmars-accent); 635 | box-shadow: 0 0 0 2px var(--midnightmars-accent); 636 | } 637 | #app-mount .modalSize-cqUaws .selectorButton-EEUWed:not(.selectorButtonPremiumRequired-mKMbIu):hover, 638 | #app-mount .modalSize-cqUaws .selectorButtonSelected-t5V9On { 639 | background-color: var(--midnightmars-accent); 640 | } 641 | 642 | #app-mount .uploadModal-2ifh8j { 643 | background-color: var(--background-primary); 644 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 645 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 646 | } 647 | #app-mount .uploadModal-2ifh8j .footer-3mqk7D { 648 | background-color: var(--background-secondary); 649 | -webkit-box-shadow: inset 0 1px 0 var(--midnightmars-layer-outline); 650 | box-shadow: inset 0 1px 0 var(--midnightmars-layer-outline); 651 | } 652 | #app-mount .uploadModal-2ifh8j .comment-4IWttf .scrollableContainer-2NUZem { 653 | border-radius: var(--border-radius); 654 | border-bottom-right-radius: var(--border-roundness); 655 | border-bottom-left-radius: var(--border-roundness); 656 | border-bottom: solid var(--border-thickness) var(--background-tertiary); 657 | -webkit-transition: all var(--transition-time); 658 | transition: all var(--transition-time); 659 | } 660 | #app-mount .uploadModal-2ifh8j .comment-4IWttf:focus-within .scrollableContainer-2NUZem { 661 | border-color: var(--border-color); 662 | } 663 | #app-mount .uploadModal-2ifh8j .comment-4IWttf:hover .scrollableContainer-2NUZem:not(:focus-within) { 664 | border-color: var(--border-hover-color); 665 | } 666 | 667 | #app-mount .root-SR8cQa .topSectionPlaying-1J5E4n { 668 | background-color: var(--midnightmars-accent); 669 | } 670 | #app-mount .root-SR8cQa .topSectionSpotify-1lI0-P { 671 | background-color: var(--midnightmars-green); 672 | } 673 | #app-mount .root-SR8cQa .connectedAccount-36nQx7 { 674 | background-color: var(--background-secondary-alt); 675 | border-color: var(--backgrond-secondary-alt); 676 | } 677 | #app-mount .root-SR8cQa .flowerStar-1GeTsn path { 678 | fill: rgba(255, 255, 255, 0.25); 679 | } 680 | #app-mount .root-SR8cQa .childContainer-1wxZNh { 681 | margin-top: 2px; 682 | } 683 | #app-mount .root-SR8cQa .actionButton-3W1xZa.lookFilled-1Gx00P.colorGreen-29iAKY { 684 | background-color: var(--midnightmars-green); 685 | } 686 | #app-mount .root-SR8cQa .actionButton-3W1xZa.lookInverted-2D7oAl.colorBrand-3pXr91 { 687 | color: var(--midnightmars-accent); 688 | } 689 | 690 | #app-mount .container-1D34oG { 691 | position: relative; 692 | background-color: var(--background-tertiary); 693 | border-radius: var(--border-radius); 694 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 695 | left: var(--separation-padding); 696 | } 697 | 698 | #app-mount .peopleList-3c4jOR, 699 | #app-mount .friendsEmpty-1K9B4k { 700 | background-color: var(--background-primary); 701 | } 702 | #app-mount .title-30qZAO { 703 | margin-left: 13px; 704 | } 705 | #app-mount .peopleListItem-2nzedh { 706 | background-color: var(--background-secondary); 707 | border-radius: 5px; 708 | border: solid 1px var(--background-secondary-alt); 709 | padding: 10px; 710 | margin: 8px; 711 | margin-left: 12px; 712 | } 713 | #app-mount .peopleListItem-2nzedh .actionButton-uPB8Fs { 714 | background-color: var(--background-modifier-accent); 715 | } 716 | #app-mount .peopleListItem-2nzedh:hover { 717 | background-color: var(--background-secondary-alt); 718 | } 719 | #app-mount .peopleListItem-2nzedh:hover .actionButton-uPB8Fs { 720 | background-color: var(--background-tertiary); 721 | } 722 | #app-mount .nowPlayingColumn-2sl4cE { 723 | background-color: var(--background-tertiary); 724 | } 725 | #app-mount .nowPlayingColumn-2sl4cE::before { 726 | content: ""; 727 | position: absolute; 728 | border-top-left-radius: var(--border-radius); 729 | -webkit-box-shadow: 0 -25px 0 0 var(--background-primary); 730 | box-shadow: 0 -25px 0 0 var(--background-primary); 731 | height: 50px; 732 | width: 30px; 733 | } 734 | #app-mount .nowPlayingColumn-2sl4cE .scroller-2ZPeAD { 735 | background-color: var(--background-secondary); 736 | margin-top: calc(var(--separation-padding) - 2px); 737 | margin-left: calc(var(--separation-padding) - 2px); 738 | border-radius: var(--border-radius); 739 | } 740 | #app-mount .nowPlayingColumn-2sl4cE .itemCard-v9viV7 { 741 | background-color: var(--background-secondary-alt); 742 | } 743 | #app-mount .nowPlayingColumn-2sl4cE .itemCard-v9viV7:hover { 744 | background-color: var(--background-tertiary); 745 | } 746 | #app-mount .nowPlayingColumn-2sl4cE .itemCard-v9viV7 .section-2gLsgF { 747 | background-color: var(--background-primary); 748 | } 749 | 750 | #app-mount .container-3Mxszk { 751 | position: relative; 752 | background-color: var(--background-tertiary); 753 | border-radius: var(--border-radius); 754 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 755 | left: var(--separation-padding); 756 | } 757 | #app-mount .container-3Mxszk .installationPath-3cStrB { 758 | -webkit-box-shadow: 0 1px 0 0 var(--background-modifier-accent); 759 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 760 | } 761 | #app-mount .container-3Mxszk .installationPath-3cStrB circle.background-yZEZik { 762 | stroke: var(--background-modifier-accent); 763 | } 764 | #app-mount .container-3Mxszk .installationPath-3cStrB .defaultIndicator-3WqGFB { 765 | background-color: var(--background-modifier-accent); 766 | } 767 | #app-mount .container-3Mxszk .installationPath-3cStrB .rowBody-3dJTTZ { 768 | color: var(--text-muted); 769 | } 770 | #app-mount .container-3Mxszk .hiddenLibraryApplication-T6N3U1 { 771 | border-bottom-color: var(--background-modifier-accent); 772 | } 773 | #app-mount .container-3Mxszk .hiddenLibraryApplication-T6N3U1::before { 774 | background-color: var(--background-secondary); 775 | border-color: var(--background-tertiary); 776 | } 777 | #app-mount .container-3Mxszk .hiddenLibraryApplication-T6N3U1 .restoreButton-3jU0Z6 { 778 | background-color: var(--background-primary); 779 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 1px 5px 0 rgba(0, 0, 0, 0.3); 780 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 1px 5px 0 rgba(0, 0, 0, 0.3); 781 | } 782 | #app-mount .container-3Mxszk .hiddenLibraryApplication-T6N3U1 .applicationSubText-2V8LSK { 783 | color: var(--text-muted); 784 | } 785 | 786 | #app-mount .applicationStore-1pNvnv { 787 | position: relative; 788 | background-color: var(--background-tertiary); 789 | border-radius: var(--border-radius); 790 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 791 | left: var(--separation-padding); 792 | } 793 | #app-mount .featureChildrenWrapper-smz30S > div { 794 | background-color: var(--background-secondary); 795 | } 796 | 797 | #app-mount .perksModal-fSYqOq { 798 | background-color: var(--background-primary); 799 | } 800 | #app-mount .perksModal-fSYqOq .barBackground-2EEiLw { 801 | background-color: var(--background-secondary); 802 | } 803 | #app-mount .perksModal-fSYqOq .tierMarkerBackground-3q29am { 804 | background-color: var(--background-secondary); 805 | } 806 | #app-mount .perksModal-fSYqOq .tierMarkerInProgress-24LMzJ { 807 | background-color: var(--background-secondary) !important; 808 | } 809 | #app-mount .perksModal-fSYqOq .tierHeaderLocked-1s2JJz { 810 | background-color: var(--background-secondary-alt); 811 | } 812 | #app-mount .perksModal-fSYqOq .tierBody-16Chc9 { 813 | background-color: var(--background-secondary); 814 | } 815 | #app-mount .perksModal-fSYqOq .perk-2WeBWW { 816 | background-color: var(--background-secondary); 817 | } 818 | 819 | #app-mount .pageWrapper-1PgVDX { 820 | background-color: var(--background-primary); 821 | border-radius: var(--border-radius); 822 | margin: var(--separation-padding) calc(var(--separation-padding) * 2) var(--separation-padding) 0; 823 | left: var(--separation-padding); 824 | } 825 | 826 | #app-mount .container-2Bfwy4 { 827 | margin: var(--separation-padding); 828 | } 829 | #app-mount .container-2Bfwy4 .container-1r6BKw.themed-ANHk51 { 830 | border-top-left-radius: var(--border-radius); 831 | border-top-right-radius: var(--border-radius); 832 | } 833 | #app-mount .container-2Bfwy4 .content-MLh4nU { 834 | border-bottom-left-radius: var(--border-radius); 835 | border-bottom-right-radius: var(--border-radius); 836 | } 837 | 838 | #app-mount .autocomplete-1vrmpx { 839 | background-color: var(--background-secondary); 840 | } 841 | #app-mount .autocomplete-1vrmpx .selected-1Tbx07 { 842 | background-color: var(--background-primary); 843 | } 844 | #app-mount .autocomplete-1vrmpx .categoryHeader-O1zU94 { 845 | background-color: var(--background-secondary); 846 | } 847 | 848 | #app-mount .colorPickerCustom-2CWBn2 { 849 | background-color: var(--background-primary); 850 | border-color: var(--background-tertiary); 851 | } 852 | 853 | #app-mount .calendarPicker-2yf6Ci .react-datepicker { 854 | background-color: var(--midnightmars-secondary); 855 | } 856 | #app-mount .react-datepicker__navigation { 857 | border-color: var(--background-floating); 858 | } 859 | #app-mount .react-datepicker__header { 860 | background-color: var(--midnightmars-secondary); 861 | border-color: var(--background-modifier-accent); 862 | } 863 | #app-mount .react-datepicker__current-month { 864 | border-bottom-color: var(--background-modifier-accent); 865 | } 866 | #app-mount .react-datepicker__day--today::after { 867 | background-color: var(--midnightmars-accent); 868 | } 869 | #app-mount .react-datepicker__day { 870 | border-top-color: var(--background-tertiary); 871 | border-left-color: var(--background-tertiary); 872 | } 873 | #app-mount .react-datepicker__day:hover:not(.react-datepicker__day--disabled) { 874 | background-color: var(--midnightmars-accent); 875 | } 876 | #app-mount .react-datepicker__day--outside-month, 877 | #app-mount .react-datepicker__day--disabled { 878 | background-color: var(--midnightmars-secondary-alt); 879 | } 880 | #app-mount .datePickerHint-3Q1Udw { 881 | border-top-color: var(--background-modifier-accent); 882 | } 883 | #app-mount .datePickerHint-3Q1Udw .hintValue-29ny8Z { 884 | background-color: var(--midnightmars-accent); 885 | } 886 | 887 | #app-mount .popout-103y-5 { 888 | background-color: var(--midnightmars-layer-primary); 889 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 890 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 891 | } 892 | #app-mount .popout-103y-5 .friendSelected-1sa4bG { 893 | background-color: var(--background-modifier-selected); 894 | } 895 | 896 | #app-mount .streamPreview-2-WUWT { 897 | background-color: var(--background-secondary-alt); 898 | } 899 | #app-mount .streamPreview-2-WUWT .previewContainer-12UlHl { 900 | background-color: var(--background-secondary-alt); 901 | } 902 | 903 | #app-mount .searchResultsWrap-3-pOjs { 904 | margin-top: calc(var(--separation-padding) - 2px); 905 | margin-left: calc(var(--separation-padding) - 2px); 906 | border-radius: var(--border-radius); 907 | } 908 | #app-mount .searchResultsWrap-3-pOjs .searchHeader-2XoQg7 { 909 | background-color: var(--background-secondary-alt); 910 | } 911 | 912 | #app-mount .container-3ayLPN#search-results { 913 | background-color: var(--midnightmars-layer-secondary); 914 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 915 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 916 | } 917 | #app-mount .container-3ayLPN#search-results .queryContainer-RKFJW- { 918 | border-bottom-color: var(--midnightmars-layer-secondary-alt); 919 | } 920 | #app-mount .container-3ayLPN#search-results .focused-2bY0OD { 921 | background-color: var(--midnightmars-layer-secondary-alt); 922 | } 923 | #app-mount .container-3ayLPN#search-results .option-96V44q::after { 924 | background: transparent; 925 | } 926 | #app-mount .container-3ayLPN#search-results .option-96V44q.selected-rZcOL- { 927 | background-color: var(--background-tertiary); 928 | } 929 | #app-mount .container-3ayLPN#search-results .option-96V44q.selected-rZcOL-::before { 930 | background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(80%, var(--background-tertiary))); 931 | background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--background-tertiary) 80%); 932 | padding-left: 10px; 933 | } 934 | #app-mount .container-3ayLPN#search-results .option-96V44q.selected-rZcOL-::after { 935 | background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, var(--background-tertiary))); 936 | background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--background-tertiary) 50%); 937 | } 938 | #app-mount .container-3ayLPN#search-results .option-96V44q:not(.searchOption-zQ-1l6) .filter-3Y_im- { 939 | color: var(--text-muted); 940 | } 941 | #app-mount .container-3ayLPN#search-results .option-96V44q:not(.searchOption-zQ-1l6) .answer-1n6g43 { 942 | color: var(--text-normal); 943 | } 944 | #app-mount .container-3ayLPN#search-results .searchOption-zQ-1l6 .filter-3Y_im- { 945 | color: var(--text-normal); 946 | } 947 | #app-mount .container-3ayLPN#search-results .searchOption-zQ-1l6 .answer-1n6g43 { 948 | color: var(--text-muted); 949 | } 950 | 951 | #app-mount #status-picker #status-picker-online.focused-3afm-j { 952 | background-color: #00ED8E; 953 | } 954 | #app-mount #status-picker #status-picker-online:not(.focused-3afm-j) .status-1AY8sU { 955 | background-color: #00ED8E !important; 956 | } 957 | #app-mount #status-picker #status-picker-idle.focused-3afm-j { 958 | background-color: #ffd37a; 959 | } 960 | #app-mount #status-picker #status-picker-idle:not(.focused-3afm-j) .status-1AY8sU { 961 | background-color: #ffd37a !important; 962 | } 963 | #app-mount #status-picker #status-picker-dnd.focused-3afm-j { 964 | background-color: #F87E7C; 965 | } 966 | #app-mount #status-picker #status-picker-dnd:not(.focused-3afm-j) .status-1AY8sU { 967 | background-color: #F87E7C !important; 968 | } 969 | #app-mount #status-picker #status-picker-invisible.focused-3afm-j { 970 | background-color: #747F8D; 971 | } 972 | #app-mount #status-picker #status-picker-invisible:not(.focused-3afm-j) .status-1AY8sU { 973 | background-color: #747F8D !important; 974 | } 975 | 976 | #app-mount .userPopout-3XzG_A { 977 | -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--midnightmars-layer-outline); 978 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--midnightmars-layer-outline); 979 | } 980 | #app-mount .userPopout-3XzG_A .body-3iLsc4, 981 | #app-mount .userPopout-3XzG_A .footer-1fjuF6 { 982 | background-color: var(--background-secondary); 983 | } 984 | #app-mount .userPopout-3XzG_A .input-cIJ7To:focus { 985 | border-color: var(--midnightmars-accent); 986 | } 987 | #app-mount .headerNormal-T_seeN { 988 | background-color: var(--background-tertiary); 989 | } 990 | #app-mount .headerPlaying-j0WQBV { 991 | background-color: var(--midnightmars-accent); 992 | } 993 | #app-mount .headerSpotify-zpWxgT { 994 | background-color: var(--midnightmars-green); 995 | } 996 | 997 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] { 998 | background-color: transparent; 999 | margin: var(--separation-padding); 1000 | } 1001 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .standardSidebarView-3F1I7i { 1002 | background-color: transparent; 1003 | } 1004 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .contentRegion-3nDuYy { 1005 | border-radius: var(--border-radius); 1006 | } 1007 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .contentRegionScroller-26nc1e { 1008 | border-radius: var(--border-radius); 1009 | } 1010 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .sidebarRegionScroller-3MXcoP { 1011 | border-radius: var(--border-radius); 1012 | margin-right: var(--separation-padding); 1013 | } 1014 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .closeButton-1tv5uR { 1015 | border-color: var(--background-secondary-alt); 1016 | } 1017 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .closeButton-1tv5uR:hover { 1018 | background-color: var(--background-secondary-alt); 1019 | } 1020 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .keybind-KpFkfr { 1021 | color: var(--text-normal); 1022 | } 1023 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .card-FDVird::before { 1024 | background-color: var(--background-secondary); 1025 | border-color: var(--background-tertiary); 1026 | } 1027 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .card-FDVird .button-2CgfFz { 1028 | background-color: var(--background-primary); 1029 | -webkit-box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 1px 5px 0 rgba(0, 0, 0, 0.3); 1030 | box-shadow: 0 0 0 1px var(--midnightmars-layer-outline), 0 1px 5px 0 rgba(0, 0, 0, 0.3); 1031 | } 1032 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .card-FDVird .hoverRoll-YK53gQ { 1033 | color: var(--text-muted); 1034 | } 1035 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .marginTop20-3TxNs6 .bar-2Qqk5Z, 1036 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .flexChild-faoVW3 .bar-2Qqk5Z { 1037 | background-color: #5E5161; 1038 | } 1039 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .marginTop20-3TxNs6 .bar-2Qqk5Z .barFill-23-gu-, 1040 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .flexChild-faoVW3 .bar-2Qqk5Z .barFill-23-gu- { 1041 | background-color: var(--midnightmars-accent); 1042 | } 1043 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .markDash-3hAolZ { 1044 | background-color: #5E5161; 1045 | } 1046 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .markValue-2DwdXI { 1047 | color: #89798d; 1048 | } 1049 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .checkbox-1ix_J3 { 1050 | background-color: var(--midnightmars-accent) !important; 1051 | border-color: var(--midnightmars-accent) !important; 1052 | } 1053 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .radioIconForeground-XwlXQN { 1054 | color: var(--midnightmars-accent); 1055 | } 1056 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .avatarUploaderInner-3UNxY3 { 1057 | background-color: var(--midnightmars-accent); 1058 | } 1059 | #app-mount .layer-3QrUeG[aria-label*=_SETTINGS] .noticeRegion-1YviSH > div[style="background-color: rgba(32, 34, 37, 0.9);"] { 1060 | background-color: var(--background-tertiary) !important; 1061 | -webkit-transition: 200ms; 1062 | transition: 200ms; 1063 | } 1064 | 1065 | #app-mount [aria-label=CHANNEL_SETTINGS] .allow-1PzSY3.selected-2YhbGh { 1066 | background-color: var(--midnightmars-green); 1067 | } 1068 | #app-mount [aria-label=CHANNEL_SETTINGS] .allow-1PzSY3.selected-2YhbGh svg path { 1069 | fill: #fff; 1070 | } 1071 | #app-mount [aria-label=CHANNEL_SETTINGS] .allow-1PzSY3 svg path { 1072 | fill: var(--midnightmars-green); 1073 | } 1074 | 1075 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .inputMini-2xQV9P { 1076 | background-color: var(--background-secondary-alt); 1077 | } 1078 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .auditLog-3jNbM6 { 1079 | background-color: var(--background-secondary); 1080 | border-color: var(--background-tertiary); 1081 | } 1082 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .auditLog-3jNbM6 .headerExpanded-CUEwZ5 { 1083 | background-color: var(--background-secondary-alt); 1084 | } 1085 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .auditLog-3jNbM6 .changeDetails-bk98pu { 1086 | background-color: var(--background-secondary); 1087 | } 1088 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .auditLog-3jNbM6 .typeCreate-1kfBMl { 1089 | color: var(--midnightmars-green); 1090 | } 1091 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .background-3xPPFc { 1092 | color: var(--background-secondary); 1093 | } 1094 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .tierInProgress-3mBoXq { 1095 | background-color: var(--background-secondary); 1096 | } 1097 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .tierHeaderLocked-1a2opw { 1098 | background-color: var(--background-secondary-alt); 1099 | } 1100 | #app-mount .layer-3QrUeG[aria-label*=GUILD_SETTINGS] .tierBody-x9kBBp { 1101 | background-color: var(--background-secondary); 1102 | } 1103 | 1104 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .background-1QDuV2 { 1105 | --padding: 20px; 1106 | background-color: transparent !important; 1107 | padding: 0; 1108 | } 1109 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .background-1QDuV2 .profile-1eT9hT { 1110 | background-color: var(--background-secondary); 1111 | border: 1px solid var(--background-tertiary); 1112 | border-radius: var(--border-radius); 1113 | padding: var(--padding); 1114 | } 1115 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .background-1QDuV2 .fieldList-21DyL8 { 1116 | background-color: var(--background-secondary); 1117 | border: 1px solid var(--background-tertiary); 1118 | border-radius: var(--border-radius); 1119 | margin-top: 5px; 1120 | padding: var(--padding); 1121 | } 1122 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .authedApp-mj2Hmd { 1123 | background-color: var(--background-secondary); 1124 | } 1125 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .connection-1fbD7X { 1126 | background-color: var(--background-secondary-alt); 1127 | } 1128 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .connectionHeader-2MDqhu { 1129 | background-color: var(--background-secondary); 1130 | } 1131 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .subscriptionDetails-1dUmjl, 1132 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .sectionAccountCredit-1uNhnJ { 1133 | border-color: var(--background-modifier-accent); 1134 | } 1135 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .accountCreditRow-SHgyi0 { 1136 | border-bottom: none; 1137 | } 1138 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .paymentPane-3bwJ6A { 1139 | background-color: var(--background-secondary); 1140 | } 1141 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .paymentPane-3bwJ6A .paginator-166-09, 1142 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .paymentPane-3bwJ6A .bottomDivider-1K9Gao { 1143 | background-color: var(--background-secondary); 1144 | } 1145 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .paymentPane-3bwJ6A .bottomDivider-1K9Gao { 1146 | border-bottom-color: var(--background-primary); 1147 | } 1148 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .codeRedemptionRedirect-1wVR4b { 1149 | background-color: var(--background-secondary); 1150 | border-color: var(--background-tertiary); 1151 | } 1152 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .progress-1IcQ3A { 1153 | background-color: rgba(255, 255, 255, 0.3); 1154 | } 1155 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .notches-1sAcEM { 1156 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='20' fill='%2336263A'%3E%3Cpath fill-rule='evenodd' d='M0 0h8v20H0V0zm4 2a2 2 0 00-2 2v12a2 2 0 104 0V4a2 2 0 00-2-2z'/%3E%3C/svg%3E"); 1157 | } 1158 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .previewOverlay-2O7_KC { 1159 | background-color: var(--background-secondary); 1160 | border-color: var(--background-tertiary); 1161 | } 1162 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .notDetected-33MY4s { 1163 | background-color: rgba(255, 255, 255, 0.15); 1164 | } 1165 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .nowPlaying-284llR { 1166 | background-color: var(--midnightmars-green); 1167 | } 1168 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .game-1ipmAa { 1169 | -webkit-box-shadow: 0 1px 0 0 var(--background-modifier-accent); 1170 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 1171 | } 1172 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .flowerStar-1GeTsn path { 1173 | fill: var(--midnightmars-accent); 1174 | } 1175 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .wrapper-3jrx9n { 1176 | border-color: var(--midnightmars-accent); 1177 | } 1178 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .option-n0icdO { 1179 | background-color: rgba(255, 255, 255, 0.2); 1180 | } 1181 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .option-n0icdO:hover { 1182 | background-color: var(--midnightmars-accent); 1183 | } 1184 | #app-mount .layer-3QrUeG[aria-label*=USER_SETTINGS] .option-n0icdO.selected-mKYnfr { 1185 | background-color: var(--midnightmars-accent); 1186 | } 1187 | 1188 | :root { 1189 | /* ----- RadialStatus by Gibbu --- */ 1190 | --rs-small-spacing: 2px; 1191 | --rs-large-spacing: 2px; 1192 | --rs-width: 2px; 1193 | --rs-avatar-shape: 50%; 1194 | --rs-online-color: var(--status-online); 1195 | --rs-idle-color: var(--status-idle); 1196 | --rs-dnd-color: var(--status-dnd); 1197 | --rs-offline-color: var(--status-offinle-invisible); 1198 | --rs-streaming-color: var(--status-streaming); 1199 | --rs-invisible-color: var(--status-offinle-invisible); 1200 | } 1201 | 1202 | #app-mount .containerDefault--pIXnN .wrapper-2jXpOf, 1203 | #app-mount .channel-2QD9_O { 1204 | border-radius: var(--indicator-rounding); 1205 | } 1206 | #app-mount .containerDefault--pIXnN .wrapper-2jXpOf::before, 1207 | #app-mount .channel-2QD9_O::before { 1208 | content: ""; 1209 | position: absolute; 1210 | border-radius: 25px; 1211 | top: 1px; 1212 | left: 2px; 1213 | bottom: 1px; 1214 | } 1215 | #app-mount .containerDefault--pIXnN .wrapper-2jXpOf:not(.modeSelected-346R90):not(.modeConnected-3IsKId) .content-1x5b-n:hover, 1216 | #app-mount .channel-2QD9_O:not(.selected-aXhQR6) .content-1x5b-n:hover { 1217 | background: var(--indicator-hovered); 1218 | } 1219 | #app-mount .modeSelected-346R90 .content-1x5b-n, 1220 | #app-mount .channel-2QD9_O.selected-aXhQR6 .content-1x5b-n { 1221 | background-color: var(--indicator-selected-background); 1222 | } 1223 | #app-mount .modeSelected-346R90 .content-1x5b-n:hover, 1224 | #app-mount .channel-2QD9_O.selected-aXhQR6 .content-1x5b-n:hover { 1225 | background-color: var(--indicator-selected-hover); 1226 | } 1227 | #app-mount .modeSelected-346R90::before, 1228 | #app-mount .channel-2QD9_O.selected-aXhQR6::before { 1229 | border-left: var(--indicator-border-info) var(--indicator-selected-border); 1230 | } 1231 | #app-mount .modeUnread-1qO3K1 .content-1x5b-n { 1232 | background-color: var(--indicator-unread-background); 1233 | } 1234 | #app-mount .modeUnread-1qO3K1 .content-1x5b-n:hover { 1235 | background-color: var(--indicator-unread-hover); 1236 | } 1237 | #app-mount .modeUnread-1qO3K1::before { 1238 | border-left: var(--indicator-border-info) var(--indicator-unread-border); 1239 | } 1240 | #app-mount .modeUnread-1qO3K1 .unread-2lAfLh { 1241 | display: none; 1242 | } 1243 | #app-mount .modeConnected-3IsKId .content-1x5b-n { 1244 | background-color: var(--indicator-connected-background); 1245 | } 1246 | #app-mount .modeConnected-3IsKId .content-1x5b-n:hover { 1247 | background-color: var(--indicator-connected-hover); 1248 | } 1249 | #app-mount .modeConnected-3IsKId::before { 1250 | border-left: var(--indicator-border-info) var(--indicator-connected-border); 1251 | } 1252 | #app-mount .channel-2QD9_O { 1253 | margin-left: 0; 1254 | max-width: 100%; 1255 | } 1256 | #app-mount .channel-2QD9_O div .avatar-3uk_u9 { 1257 | margin-left: 8px; 1258 | } 1259 | 1260 | #app-mount .hljs { 1261 | background: var(--background-secondary); 1262 | color: #a39e9b; 1263 | padding: 15px 20px; 1264 | border-radius: 0; 1265 | border: none; 1266 | } 1267 | #app-mount .codeLine-14BKbG { 1268 | color: #a39e9b; 1269 | } 1270 | #app-mount .hljs-comment, 1271 | #app-mount .hljs-quote { 1272 | color: #8d8687; 1273 | } 1274 | #app-mount .hljs-variable, 1275 | #app-mount .hljs-template-variable, 1276 | #app-mount .hljs-tag, 1277 | #app-mount .hljs-name, 1278 | #app-mount .hljs-selector-id, 1279 | #app-mount .hljs-selector-class, 1280 | #app-mount .hljs-selector-pseudo, 1281 | #app-mount .hljs-regexp, 1282 | #app-mount .hljs-link, 1283 | #app-mount .hljs-meta { 1284 | color: #ef6155; 1285 | } 1286 | #app-mount .hljs-number, 1287 | #app-mount .hljs-built_in, 1288 | #app-mount .hljs-literal, 1289 | #app-mount .hljs-type, 1290 | #app-mount .hljs-params, 1291 | #app-mount .hljs-deletion { 1292 | color: #f99b15; 1293 | } 1294 | #app-mount .hljs-title, 1295 | #app-mount .hljs-section, 1296 | #app-mount .hljs-attribute { 1297 | color: #fec418; 1298 | } 1299 | #app-mount .hljs-string, 1300 | #app-mount .hljs-symbol, 1301 | #app-mount .hljs-bullet, 1302 | #app-mount .hljs-addition { 1303 | color: #48b685; 1304 | } 1305 | #app-mount .hljs-keyword, 1306 | #app-mount .hljs-selector-tag { 1307 | color: #815ba4; 1308 | } 1309 | #app-mount .hljs-emphasis { 1310 | font-style: italic; 1311 | } 1312 | #app-mount .hljs-strong { 1313 | font-weight: bold; 1314 | } 1315 | 1316 | .role-2irmRk { 1317 | background-color: var(--background-tertiary); 1318 | border-radius: 4px; 1319 | border: none; 1320 | padding: 0 5px 0 8px; 1321 | height: 25px; 1322 | } 1323 | .role-2irmRk.actionButton-VzECiy { 1324 | background-color: var(--background-tertiary); 1325 | padding-left: 7px; 1326 | padding-right: 7px; 1327 | } 1328 | .role-2irmRk .roleCircle-3xAZ1j { 1329 | margin-right: 6px; 1330 | width: 9px; 1331 | height: 9px; 1332 | } --------------------------------------------------------------------------------