├── .gitignore ├── LICENSE ├── README.md ├── docs └── _media │ ├── color schemes │ └── rosebox.png │ ├── v200default.png │ ├── v200themed.png │ ├── v208_config1.png │ ├── v208_config2.png │ ├── v210_config1.png │ └── v210default.png ├── extras ├── extra_colors.css ├── nitro_themes.css └── toolbarhide.css ├── modular.theme.css └── src ├── assets ├── new │ ├── chatbubbles_exp.css │ └── root_210.css └── old │ ├── onboarding.css │ ├── profilepaneldm_old.css │ ├── profiles_old.css │ └── root_200.css ├── comp └── parts │ └── README.md └── main.css /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/settings.json 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 SEELE1306 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 | # Modular 2 | 3 | ![GitHub Release](https://img.shields.io/github/v/release/SEELE1306/Modular?style=for-the-badge) 4 | ![GitHub License](https://img.shields.io/github/license/SEELE1306/Modular?style=for-the-badge) 5 | ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/SEELE1306/Modular/total?style=for-the-badge&color=violet) 6 | ![Static Badge](https://img.shields.io/badge/supports-vesktop-red?style=for-the-badge) 7 | ![Static Badge](https://img.shields.io/badge/supports-vencord-red?style=for-the-badge) 8 | 9 | > [!IMPORTANT] 10 | > Yes, Discord has ruined everything. It is unlikely that I will be able to fix the theme in its current condition. 11 | ## Introduction 12 | 13 | This is one of the first themes that is made exclusively for [Vencord/Vesktop](https://github.com/Vencord/Vesktop/releases). 14 | 15 | Since Discord's update to the new Chromium version, this theme now also supports the regular [Vencord](https://vencord.dev). 16 | 17 | ## Features 18 | 19 | - High customizability: 20 | - Customizable base, accent and Discord colors (red, yellow, green, etc.) 21 | - Modules (user panel, member list, guild list etc.) that can be flipped around 22 | - Adjustable primary and code font 23 | - Add a custom name on the titlebar to make the layout more personal 24 | - A revamped look for many elements, including profile panels and modals, Spotify controls and many more! 25 | - Compatibility and quality of life changes for many of Vesktop's existing plugins 26 | - Active support (to my ability) 27 | - Some of the elements of this theme are available separately as snippets. Check them out [here](https://github.com/SEELE1306/CSS-Snippets). 28 | 29 | ## Screenshots 30 | 31 | ### Default Configuration 32 | 33 | ![Config 1](./docs/_media/v210default.png) 34 | 35 | ### Example Configuration 36 | 37 | ![Config 2](./docs/_media/v210_config1.png) 38 | 39 | ## Apply and customize 40 | 41 | > [!IMPORTANT] 42 | > Starting from future releases, there will be additional color schemes (flavors) to choose from. The theme names will then be `modular_{flavor_name}.theme.css`. For example, the current Rosebox flavor will become `modular_rosebox.theme.css`. If you want to create your custom color scheme, start from the default `modular.theme.css` file. 43 | 44 | ### Apply 45 | 46 | There are several methods to apply this theme: 47 | 48 |
49 | 50 | Via Local Themes: 51 | 52 | - Download the file `modular.theme.css` from this repository. 53 | - Open Settings > Vencord > Themes > Local Themes > Open Themes Folder. 54 | - Paste the downloaded file into the themes folder. 55 | 56 |
57 | 58 |
59 | 60 | Via Online Themes 61 | 62 | - Open Settings > Vencord > Themes > Online Themes. 63 | - Paste the following link into Theme Links: `https://raw.githubusercontent.com/SEELE1306/Modular/release/modular.theme.css` 64 | - Enter or mouse-click outside the Online Themes box to apply 65 | 66 |
67 | 68 |
69 | 70 | Via QuickCSS 71 | 72 | - Open Settings > Vencord > Vencord > Open QuickCSS File 73 | - Paste the following line as your first line (ahead of any other custom CSS): `@import url(https://raw.githubusercontent.com/SEELE1306/Modular/release/modular.theme.css);`. 74 | 75 |
76 | 77 | ### Customization 78 | 79 | A large part of the following guide is also available inside the `modular.theme.css` file. 80 | 81 | To start customizing your layout, copy and paste the file `modular.theme.css` into your QuickCSS. 82 | 83 | The default color scheme (flavor) is Rosebox, and there are two preloaded fonts: Inter, Roboto Mono. 84 | 85 | Additional supported add-ons are available in `modular.theme.css`. For more snippets, you can visit [here](https://github.com/SEELE1306/CSS-Snippets). 86 | 87 | ## Special thanks to 88 | 89 | My theme, at the end of the day, is just a compilation of the many snippets that I have found. I will try my best to credit all the users whose snippets I have ultilized, but if your name does not show up here, feel free to contact me. 90 | 91 | ### Credits 92 | 93 | [coolesding](https://github.com/coolesding), [Saltssaumure](https://github.com/Saltssaumure), [DaBluLite](https://github.com/DaBluLite), [Vendicated](https://github.com/Vendicated), [CodeF53](https://github.com/CodeF53), AkiraSimplex (`akirasimplex` on Discord) 94 | 95 | ## Issues 96 | 97 | You tell me! 98 | -------------------------------------------------------------------------------- /docs/_media/color schemes/rosebox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/color schemes/rosebox.png -------------------------------------------------------------------------------- /docs/_media/v200default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/v200default.png -------------------------------------------------------------------------------- /docs/_media/v200themed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/v200themed.png -------------------------------------------------------------------------------- /docs/_media/v208_config1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/v208_config1.png -------------------------------------------------------------------------------- /docs/_media/v208_config2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/v208_config2.png -------------------------------------------------------------------------------- /docs/_media/v210_config1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/v210_config1.png -------------------------------------------------------------------------------- /docs/_media/v210default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SEELE1306/Modular/5e08e734483e31d6e0abc2bba1f47394e36c8bd7/docs/_media/v210default.png -------------------------------------------------------------------------------- /extras/extra_colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* RED */ 3 | --red-100: var(--brand-experiment-100); 4 | --red-130: var(--brand-experiment-130); 5 | --red-160: var(--brand-experiment-160); 6 | --red-200: var(--brand-experiment-200); 7 | --red-230: var(--brand-experiment-230); 8 | --red-260: var(--brand-experiment-260); 9 | --red-300: var(--brand-experiment-300); 10 | --red-330: var(--brand-experiment-330); 11 | --red-345: var(--brand-experiment-330); 12 | --red-360: var(--brand-experiment-360); 13 | --red-400: var(--brand-experiment-400); 14 | --red-430: var(--brand-experiment-430); 15 | --red-460: var(--brand-experiment-460); 16 | --red-500: var(--brand-experiment-500); 17 | --red-530: var(--brand-experiment-530); 18 | --red-560: var(--brand-experiment-560); 19 | --red-600: var(--brand-experiment-600); 20 | --red-630: var(--brand-experiment-630); 21 | --red-645: var(--brand-experiment-645); 22 | --red-660: var(--brand-experiment-660); 23 | --red-700: var(--brand-experiment-700); 24 | --red-730: var(--brand-experiment-730); 25 | --red-760: var(--brand-experiment-760); 26 | --red-800: var(--brand-experiment-800); 27 | --red-830: var(--brand-experiment-830); 28 | --red-860: var(--brand-experiment-860); 29 | --red-900: var(--brand-experiment-900); 30 | 31 | /* GREEN */ 32 | --green-100: var(--brand-experiment-100); 33 | --green-130: var(--brand-experiment-130); 34 | --green-160: var(--brand-experiment-160); 35 | --green-200: var(--brand-experiment-200); 36 | --green-230: var(--brand-experiment-230); 37 | --green-260: var(--brand-experiment-260); 38 | --green-300: var(--brand-experiment-300); 39 | --green-330: var(--brand-experiment-330); 40 | --green-345: var(--brand-experiment-330); 41 | --green-360: var(--brand-experiment-360); 42 | --green-400: var(--brand-experiment-400); 43 | --green-430: var(--brand-experiment-430); 44 | --green-460: var(--brand-experiment-460); 45 | --green-500: var(--brand-experiment-500); 46 | --green-530: var(--brand-experiment-530); 47 | --green-560: var(--brand-experiment-560); 48 | --green-600: var(--brand-experiment-600); 49 | --green-630: var(--brand-experiment-630); 50 | --green-645: var(--brand-experiment-645); 51 | --green-660: var(--brand-experiment-660); 52 | --green-700: var(--brand-experiment-700); 53 | --green-730: var(--brand-experiment-730); 54 | --green-760: var(--brand-experiment-760); 55 | --green-800: var(--brand-experiment-800); 56 | --green-830: var(--brand-experiment-830); 57 | --green-860: var(--brand-experiment-860); 58 | --green-900: var(--brand-experiment-900); 59 | 60 | /* YELLOW */ 61 | --yellow-100: var(--brand-experiment-100); 62 | --yellow-130: var(--brand-experiment-130); 63 | --yellow-160: var(--brand-experiment-160); 64 | --yellow-200: var(--brand-experiment-200); 65 | --yellow-230: var(--brand-experiment-230); 66 | --yellow-260: var(--brand-experiment-260); 67 | --yellow-300: var(--brand-experiment-300); 68 | --yellow-330: var(--brand-experiment-330); 69 | --yellow-345: var(--brand-experiment-330); 70 | --yellow-360: var(--brand-experiment-360); 71 | --yellow-400: var(--brand-experiment-400); 72 | --yellow-430: var(--brand-experiment-430); 73 | --yellow-460: var(--brand-experiment-460); 74 | --yellow-500: var(--brand-experiment-500); 75 | --yellow-530: var(--brand-experiment-530); 76 | --yellow-560: var(--brand-experiment-560); 77 | --yellow-600: var(--brand-experiment-600); 78 | --yellow-630: var(--brand-experiment-630); 79 | --yellow-645: var(--brand-experiment-645); 80 | --yellow-660: var(--brand-experiment-660); 81 | --yellow-700: var(--brand-experiment-700); 82 | --yellow-730: var(--brand-experiment-730); 83 | --yellow-760: var(--brand-experiment-760); 84 | --yellow-800: var(--brand-experiment-800); 85 | --yellow-830: var(--brand-experiment-830); 86 | --yellow-860: var(--brand-experiment-860); 87 | --yellow-900: var(--brand-experiment-900); 88 | 89 | /* ORANGE */ 90 | --orange-100: var(--brand-experiment-100); 91 | --orange-130: var(--brand-experiment-130); 92 | --orange-160: var(--brand-experiment-160); 93 | --orange-200: var(--brand-experiment-200); 94 | --orange-230: var(--brand-experiment-230); 95 | --orange-260: var(--brand-experiment-260); 96 | --orange-300: var(--brand-experiment-300); 97 | --orange-330: var(--brand-experiment-330); 98 | --orange-345: var(--brand-experiment-330); 99 | --orange-360: var(--brand-experiment-360); 100 | --orange-400: var(--brand-experiment-400); 101 | --orange-430: var(--brand-experiment-430); 102 | --orange-460: var(--brand-experiment-460); 103 | --orange-500: var(--brand-experiment-500); 104 | --orange-530: var(--brand-experiment-530); 105 | --orange-560: var(--brand-experiment-560); 106 | --orange-600: var(--brand-experiment-600); 107 | --orange-630: var(--brand-experiment-630); 108 | --orange-645: var(--brand-experiment-645); 109 | --orange-660: var(--brand-experiment-660); 110 | --orange-700: var(--brand-experiment-700); 111 | --orange-730: var(--brand-experiment-730); 112 | --orange-760: var(--brand-experiment-760); 113 | --orange-800: var(--brand-experiment-800); 114 | --orange-830: var(--brand-experiment-830); 115 | --orange-860: var(--brand-experiment-860); 116 | --orange-900: var(--brand-experiment-900); 117 | 118 | /* TEAL */ 119 | --teal-100: var(--brand-experiment-100); 120 | --teal-130: var(--brand-experiment-130); 121 | --teal-160: var(--brand-experiment-160); 122 | --teal-200: var(--brand-experiment-200); 123 | --teal-230: var(--brand-experiment-230); 124 | --teal-260: var(--brand-experiment-260); 125 | --teal-300: var(--brand-experiment-300); 126 | --teal-330: var(--brand-experiment-330); 127 | --teal-345: var(--brand-experiment-330); 128 | --teal-360: var(--brand-experiment-360); 129 | --teal-400: var(--brand-experiment-400); 130 | --teal-430: var(--brand-experiment-430); 131 | --teal-460: var(--brand-experiment-460); 132 | --teal-500: var(--brand-experiment-500); 133 | --teal-530: var(--brand-experiment-530); 134 | --teal-560: var(--brand-experiment-560); 135 | --teal-600: var(--brand-experiment-600); 136 | --teal-630: var(--brand-experiment-630); 137 | --teal-645: var(--brand-experiment-645); 138 | --teal-660: var(--brand-experiment-660); 139 | --teal-700: var(--brand-experiment-700); 140 | --teal-730: var(--brand-experiment-730); 141 | --teal-760: var(--brand-experiment-760); 142 | --teal-800: var(--brand-experiment-800); 143 | --teal-830: var(--brand-experiment-830); 144 | --teal-860: var(--brand-experiment-860); 145 | --teal-900: var(--brand-experiment-900); 146 | 147 | /* BLUE */ 148 | --blue-100: var(--brand-experiment-100); 149 | --blue-130: var(--brand-experiment-130); 150 | --blue-160: var(--brand-experiment-160); 151 | --blue-200: var(--brand-experiment-200); 152 | --blue-230: var(--brand-experiment-230); 153 | --blue-260: var(--brand-experiment-260); 154 | --blue-300: var(--brand-experiment-300); 155 | --blue-330: var(--brand-experiment-330); 156 | --blue-345: var(--brand-experiment-330); 157 | --blue-360: var(--brand-experiment-360); 158 | --blue-400: var(--brand-experiment-400); 159 | --blue-430: var(--brand-experiment-430); 160 | --blue-460: var(--brand-experiment-460); 161 | --blue-500: var(--brand-experiment-500); 162 | --blue-530: var(--brand-experiment-530); 163 | --blue-560: var(--brand-experiment-560); 164 | --blue-600: var(--brand-experiment-600); 165 | --blue-630: var(--brand-experiment-630); 166 | --blue-645: var(--brand-experiment-645); 167 | --blue-660: var(--brand-experiment-660); 168 | --blue-700: var(--brand-experiment-700); 169 | --blue-730: var(--brand-experiment-730); 170 | --blue-760: var(--brand-experiment-760); 171 | --blue-800: var(--brand-experiment-800); 172 | --blue-830: var(--brand-experiment-830); 173 | --blue-860: var(--brand-experiment-860); 174 | --blue-900: var(--brand-experiment-900); 175 | } 176 | -------------------------------------------------------------------------------- /extras/nitro_themes.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Reformatted, original credits to DaBluLite */ 3 | /* [[ NITRO THEMES ]] */ 4 | --aurora: linear-gradient( 5 | 239.16deg, 6 | hsl(220 calc(var(--saturation-factor, 1) * 86.5%) 17.5%/1) 10.39%, 7 | hsl(238 calc(var(--saturation-factor, 1) * 76.4%) 41.6%/1) 26.87%, 8 | hsl(184 calc(var(--saturation-factor, 1) * 78%) 33.9%/1) 48.31%, 9 | hsl(169 calc(var(--saturation-factor, 1) * 60.2%) 32.5%/1) 64.98%, 10 | hsl(230 calc(var(--saturation-factor, 1) * 92.5%) 26.3%/1) 92.5% 11 | ); 12 | --forest: linear-gradient( 13 | 162.27deg, 14 | hsl(124 calc(var(--saturation-factor, 1) * 25.9%) 10.6%/1) 11.2%, 15 | hsl(143 calc(var(--saturation-factor, 1) * 26.2%) 23.9%/1) 29.93%, 16 | hsl(76 calc(var(--saturation-factor, 1) * 20.6%) 24.7%/1) 48.64%, 17 | hsl(117 calc(var(--saturation-factor, 1) * 17%) 41.6%/1) 67.85%, 18 | hsl(43 calc(var(--saturation-factor, 1) * 38.5%) 47.8%/1) 83.54% 19 | ); 20 | --hanami: linear-gradient( 21 | 38.08deg, 22 | hsl(352 calc(var(--saturation-factor, 1) * 68.3%) 80.2%/1) 3.56%, 23 | hsl(43 calc(var(--saturation-factor, 1) * 73.6%) 76.3%) 35.49%, 24 | hsl(116 calc(var(--saturation-factor, 1) * 43.1%) 74.5%/1) 68.78% 25 | ); 26 | --lofi: linear-gradient( 27 | 179.52deg, 28 | hsl(220 calc(var(--saturation-factor, 1) * 83.8%) 80.6%/1) 7.08%, 29 | hsl(184 calc(var(--saturation-factor, 1) * 57.8%) 78.6%/1) 34.94%, 30 | hsl(130 calc(var(--saturation-factor, 1) * 46.3%) 78.8%/1) 65.12%, 31 | hsl(76 calc(var(--saturation-factor, 1) * 48.8%) 75.5%/1) 96.23% 32 | ); 33 | --mint-apple: linear-gradient( 34 | 180deg, 35 | hsl(166 calc(var(--saturation-factor, 1) * 39.7%) 52.5%/1) 6.15%, 36 | hsl(119 calc(var(--saturation-factor, 1) * 40.4%) 55.9%/1) 48.7%, 37 | hsl(87 calc(var(--saturation-factor, 1) * 48.3%) 59.8%/1) 93.07% 38 | ); 39 | --mars: linear-gradient( 40 | 170.82deg, 41 | hsl(15 calc(var(--saturation-factor, 1) * 36.3%) 39.4%/1) 14.61%, 42 | hsl(0 calc(var(--saturation-factor, 1) * 36.2%) 41.2%/1) 74.62% 43 | ); 44 | --neon-nights: linear-gradient( 45 | 180deg, 46 | hsl(176 calc(var(--saturation-factor, 1) * 98.8%) 33.1%/1) 0%, 47 | hsl(259 calc(var(--saturation-factor, 1) * 39.5%) 55.3%) 50%, 48 | hsl(314 calc(var(--saturation-factor, 1) * 52.5%) 46.3%/1) 100% 49 | ); 50 | --retro-raincloud: linear-gradient( 51 | 148.71deg, 52 | hsl(202 calc(var(--saturation-factor, 1) * 47%) 42.9%/1) 5.64%, 53 | hsl(241 calc(var(--saturation-factor, 1) * 29.6%) 61%/1) 26.38%, 54 | hsl(241 calc(var(--saturation-factor, 1) * 29.6%) 61%/1) 49.92%, 55 | hsl(202 calc(var(--saturation-factor, 1) * 47%) 42.9%/1) 73.12% 56 | ); 57 | --strawberry-lemonade: linear-gradient( 58 | 161.03deg, 59 | hsl(327 calc(var(--saturation-factor, 1) * 74.1%) 39.4%/1) 18.79%, 60 | hsl(28 calc(var(--saturation-factor, 1) * 71.7%) 44.3%/1) 49.76%, 61 | hsl(40 calc(var(--saturation-factor, 1) * 80.2%) 52.5%/1) 80.72% 62 | ); 63 | --sepia: linear-gradient( 64 | 69.98deg, 65 | hsl(33 calc(var(--saturation-factor, 1) * 14.2%) 45.7%/1) 14.14%, 66 | hsl(36 calc(var(--saturation-factor, 1) * 46.8%) 24.3%/1) 60.35% 67 | ); 68 | --midnight-blurple: linear-gradient( 69 | 48.17deg, 70 | hsl(245 calc(var(--saturation-factor, 1) * 55.1%) 53.7%/1) 11.21%, 71 | hsl(259 calc(var(--saturation-factor, 1) * 74.5%) 10.8%/1) 61.92% 72 | ); 73 | --chroma-glow: linear-gradient( 74 | 128.92deg, 75 | hsl(183 calc(var(--saturation-factor, 1) * 86.3%) 40.2%/1) 3.94%, 76 | hsl(258 calc(var(--saturation-factor, 1) * 89.8%) 46.3%/1) 26.1%, 77 | hsl(298 calc(var(--saturation-factor, 1) * 90.9%) 34.3%/1) 39.82%, 78 | hsl(265 var(--modular-saturation) 66.3%/1) 56.89%, 79 | hsl(207 calc(var(--saturation-factor, 1) * 75.5%) 50.4%/1) 76.45% 80 | ); 81 | --citrus-sherbert: linear-gradient( 82 | 180deg, 83 | hsl(40 calc(var(--saturation-factor, 1) * 88.7%) 58.2%/1) 31.1%, 84 | hsl(18 calc(var(--saturation-factor, 1) * 81.5%) 63.9%/1) 67.09% 85 | ); 86 | --cotton-candy: linear-gradient( 87 | 180.14deg, 88 | hsl(349 calc(var(--saturation-factor, 1) * 76.8%) 81.4%/1) 8.5%, 89 | hsl(226 calc(var(--saturation-factor, 1) * 92.6%) 84.1%/1) 94.28% 90 | ); 91 | --crimson-moon: linear-gradient( 92 | 64.92deg, 93 | hsl(0 calc(var(--saturation-factor, 1) * 88.6%) 31%/1) 16.17%, 94 | hsl(0 calc(var(--saturation-factor, 1) * 0%) 0%/1) 72% 95 | ); 96 | --desert-khaki: linear-gradient( 97 | 38.99deg, 98 | hsl(29 calc(var(--saturation-factor, 1) * 32.4%) 86.1%/1) 12.92%, 99 | hsl(40 calc(var(--saturation-factor, 1) * 41.3%) 78.6%/1) 32.92%, 100 | hsl(50 calc(var(--saturation-factor, 1) * 49.6%) 75.9%/1) 52.11% 101 | ); 102 | --dusk: linear-gradient( 103 | 180deg, 104 | hsl(293 calc(var(--saturation-factor, 1) * 13.5%) 36.3%/1) 12.84%, 105 | hsl(223 calc(var(--saturation-factor, 1) * 41%) 69.4%/1) 85.99% 106 | ); 107 | --retro-storm: linear-gradient( 108 | 148.71deg, 109 | hsl(202 calc(var(--saturation-factor, 1) * 47%) 42.9%/1) 5.64%, 110 | hsl(241 calc(var(--saturation-factor, 1) * 27.8%) 47.3%/1) 26.38%, 111 | hsl(241 calc(var(--saturation-factor, 1) * 27.8%) 47.3%/1) 49.92%, 112 | hsl(202 calc(var(--saturation-factor, 1) * 47%) 42.9%/1) 73.12% 113 | ); 114 | --sunrise: linear-gradient( 115 | 154.19deg, 116 | hsl(327 calc(var(--saturation-factor, 1) * 42%) 43.9%/1) 8.62%, 117 | hsl(27 calc(var(--saturation-factor, 1) * 44.9%) 58%/1) 48.07%, 118 | hsl(50 calc(var(--saturation-factor, 1) * 46.3%) 44.5%/1) 76.04% 119 | ); 120 | --sunset: linear-gradient( 121 | 141.68deg, 122 | hsl(259 calc(var(--saturation-factor, 1) * 55.6%) 35.3%/1) 27.57%, 123 | hsl(22 calc(var(--saturation-factor, 1) * 66.7%) 57.6%/1) 71.25% 124 | ); 125 | --under-the-sea: linear-gradient( 126 | 179.14deg, 127 | hsl(115 calc(var(--saturation-factor, 1) * 10.5%) 42.9%/1) 1.91%, 128 | hsl(159 calc(var(--saturation-factor, 1) * 20.4%) 43.3%/1) 48.99%, 129 | hsl(175 calc(var(--saturation-factor, 1) * 10.9%) 46.7%/1) 96.35% 130 | ); 131 | } 132 | -------------------------------------------------------------------------------- /extras/toolbarhide.css: -------------------------------------------------------------------------------- 1 | /* [[ TOOLBAR HIDE ]] */ 2 | 3 | .toolbar__fc4f04 { 4 | overflow: hidden; 5 | justify-content: flex-end; 6 | transition: all 350ms; 7 | } 8 | 9 | .toolbar__fc4f04:where(:not(:hover)) { 10 | max-width: 32px; 11 | } 12 | 13 | .toolbar__fc4f04::before { 14 | opacity: 0%; 15 | transition: opacity 150ms; 16 | position: absolute; 17 | bottom: 8px; 18 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect width='352' height='42' x='80' y='96' fill='rgb(181, 186, 193)' class='ci-primary'/%3E%3Crect width='352' height='42' x='80' y='240' fill='rgb(181, 186, 193)' class='ci-primary'/%3E%3Crect width='352' height='42' x='80' y='384' fill='rgb(181, 186, 193)' class='ci-primary'/%3E%3C/svg%3E"); 19 | display: block; 20 | width: 24px; 21 | } 22 | 23 | .toolbar__fc4f04:where(:not(:hover))::before { 24 | opacity: 100%; 25 | transition: opacity 1000ms; 26 | } 27 | 28 | .toolbar__fc4f04:hover { 29 | transition: all 150ms; 30 | } 31 | 32 | .toolbar__fc4f04 > div { 33 | transform: scaleX(0%) !important; 34 | opacity: 0%; 35 | display: flex; 36 | justify-content: center; 37 | } 38 | 39 | .toolbar__fc4f04:hover > div { 40 | transform: scaleX(100%) !important; 41 | transition: opacity 300ms; 42 | opacity: 100%; 43 | } 44 | 45 | .toolbar__fc4f04 > div:hover svg { 46 | color: var(--modular-accent-color); 47 | } 48 | 49 | .toolbar__fc4f04 > div svg { 50 | transition: all 0.3s; 51 | } 52 | -------------------------------------------------------------------------------- /modular.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Modular 3 | * @author SEELE1306 4 | * @authorLink https://github.com/SEELE1306 5 | * @description A highly customizable theme for Vesktop. 6 | * @license MIT 7 | * @version 2.1.2 8 | * @authorId 518795791318384647 9 | * @discord seele1306 10 | **/ 11 | 12 | /* --- IMPORT MAIN FILE --- */ 13 | 14 | @import url(https://raw.githubusercontent.com/SEELE1306/Modular/release/src/main.css); 15 | 16 | /* --- CUSTOMIZABLE --- */ 17 | 18 | :root { 19 | /* [[ DISCORD COLORS ]] */ 20 | --modular-red: #bf616a; 21 | --modular-yellow: #ebcb8b; 22 | --modular-green: #a3be8c; 23 | --modular-orange: #d08770; 24 | --modular-teal: #b48ead; 25 | --modular-blue: #88c0d0; 26 | 27 | /* [[ BASE COLORS ]] */ 28 | --modular-bg0: #262626; /* Primary background color */ 29 | --modular-bg1: #202020; /* Secondary background color */ 30 | --modular-bg2: #151515; /* Tertiary background color */ 31 | --modular-bg3: #323232; /* Quarterary background color */ 32 | --modular-bg4: #393939; /* Modifier/hover/select background color */ 33 | 34 | --modular-text0: #d8c8c4; /* Normal text color */ 35 | --modular-text1: #f6f1ef; /* Brighter text color */ 36 | --modular-text2: #cab5b1; /* Darker text color */ 37 | 38 | /* [[ BRAND COLORS ]] */ 39 | --modular-accent: #a57562; /* Accent color */ 40 | --modular-flavor: "Rosebox"; /* Flavor name */ 41 | 42 | /* [[ CHAT BUBBLES ]] */ 43 | --modular-cb-width: max-content; /* 100% for chat bubbles spanning the entire screen / max-content for dynamic width, Default is max-content */ 44 | 45 | /* [[ FONT CHANGE ]] */ 46 | --font-main: "Inter"; 47 | --font-code: "Roboto Mono"; 48 | 49 | /* [[ CLIENT LAYOUT ]] */ 50 | --client-border-color: var(--brand-500); 51 | --modular-sidebar-orientation: column; 52 | /* column-reverse for user panel on top */ 53 | --modular-guild-orientation: row; 54 | /* row-reverse for guild bar on the right */ 55 | --modular-memberlist-orientation: row; 56 | /* row-reverse for member list on the left */ 57 | --modular-friendlist-orientation: row; 58 | /* row-reverse for now playing tab on the left */ 59 | 60 | /* [[ SPOTIFY TRACK BACKGROUND ]] */ 61 | --modular-spotify-bg-blur: 2px; /* higher px = stronger blur, 0 = no blur */ 62 | --modular-spotify-darken: 0.5; /* 0 = album cover is not darkened, 1 = album cover is darkened fully (black) */ 63 | } 64 | 65 | /* --- THIRD PARTY IMPORTS --- */ 66 | /* Should you want to use snippets, place them here */ 67 | -------------------------------------------------------------------------------- /src/assets/new/chatbubbles_exp.css: -------------------------------------------------------------------------------- 1 | .message_d5deea > .contents_f9f2ca, 2 | .container_b558d0 > :not(.reactions_ec6b19, .searchResultsWrap_c2b47d *) { 3 | margin-top: -4px; 4 | padding: 8px; 5 | background: color-mix(in srgb, var(--chat-bubble-default) 25%, transparent); 6 | min-width: 100%; 7 | max-width: 100%; 8 | box-sizing: border-box; 9 | border: calc(1px * var(--modular-enable-border)) solid 10 | var(--chat-bubble-default); 11 | 12 | &:hover { 13 | background: color-mix(in srgb, var(--chat-bubble-default) 50%, transparent); 14 | } 15 | } 16 | 17 | /* First message in a group by a user */ 18 | .message_d5deea.groupStart_d5deea > .contents_f9f2ca { 19 | border-radius: 8px 8px 0 0; 20 | } 21 | 22 | /* Last message in a group by a user */ 23 | .messageListItem_d5deea:not(:has(> .groupStart_d5deea)):has( 24 | + .messageListItem_d5deea > .groupStart_d5deea 25 | ) 26 | .contents_f9f2ca { 27 | border-radius: 0 0 8px 8px; 28 | } 29 | 30 | /* Single message by a user */ 31 | .messageListItem_d5deea:has(> .groupStart_d5deea):has( 32 | + .messageListItem_d5deea > .groupStart_d5deea 33 | ) 34 | .contents_f9f2ca { 35 | border-radius: 8px; 36 | } 37 | 38 | /* Replying state */ 39 | .message_d5deea.replying_d5deea > .contents_f9f2ca { 40 | background: color-mix(in srgb, var(--chat-bubble-replying) 25%, transparent); 41 | border: calc(1px * var(--modular-enable-border)) solid 42 | var(--chat-bubble-replying); 43 | 44 | &:hover { 45 | background: color-mix( 46 | in srgb, 47 | var(--chat-bubble-replying) 50%, 48 | transparent 49 | ); 50 | } 51 | } 52 | 53 | /* Mentioned state */ 54 | .message_d5deea.mentioned_d5deea > .contents_f9f2ca { 55 | background: color-mix(in srgb, var(--chat-bubble-mentioned) 25%, transparent); 56 | border: calc(1px * var(--modular-enable-border)) solid 57 | var(--chat-bubble-mentioned); 58 | 59 | &:hover { 60 | background: color-mix( 61 | in srgb, 62 | var(--chat-bubble-mentioned) 50%, 63 | transparent 64 | ); 65 | } 66 | } 67 | 68 | /* Automod state */ 69 | .message_d5deea.automodMessage_d5deea > .contents_f9f2ca { 70 | background: color-mix(in srgb, var(--chat-bubble-automod) 25%, transparent); 71 | border: calc(1px * var(--modular-enable-border)) solid 72 | var(--chat-bubble-automod); 73 | 74 | &:hover { 75 | background: color-mix(in srgb, var(--chat-bubble-automod) 50%, transparent); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/assets/new/root_210.css: -------------------------------------------------------------------------------- 1 | /* Color variables */ 2 | :root, 3 | .theme-dark { 4 | /* RED */ 5 | --red-100: var(--modular-red); 6 | --red-130: var(--modular-red); 7 | --red-160: var(--modular-red); 8 | --red-200: var(--modular-red); 9 | --red-230: var(--modular-red); 10 | --red-260: var(--modular-red); 11 | --red-300: var(--modular-red); 12 | --red-330: var(--modular-red); 13 | --red-345: var(--modular-red); 14 | --red-360: var(--modular-red); 15 | --red-400: var(--modular-red); 16 | --red-430: var(--modular-red); 17 | --red-460: var(--modular-red); 18 | --red-500: var(--modular-red); 19 | --red-530: var(--modular-red); 20 | --red-560: var(--modular-red); 21 | --red-600: var(--modular-red); 22 | --red-630: var(--modular-red); 23 | --red-645: var(--modular-red); 24 | --red-660: var(--modular-red); 25 | --red-700: var(--modular-red); 26 | --red-730: var(--modular-red); 27 | --red-760: var(--modular-red); 28 | --red-800: var(--modular-red); 29 | --red-830: var(--modular-red); 30 | --red-860: var(--modular-red); 31 | --red-900: var(--modular-red); 32 | 33 | /* GREEN */ 34 | --green-100: var(--modular-green); 35 | --green-130: var(--modular-green); 36 | --green-160: var(--modular-green); 37 | --green-200: var(--modular-green); 38 | --green-230: var(--modular-green); 39 | --green-260: var(--modular-green); 40 | --green-300: var(--modular-green); 41 | --green-330: var(--modular-green); 42 | --green-345: var(--modular-green); 43 | --green-360: var(--modular-green); 44 | --green-400: var(--modular-green); 45 | --green-430: var(--modular-green); 46 | --green-460: var(--modular-green); 47 | --green-500: var(--modular-green); 48 | --green-530: var(--modular-green); 49 | --green-560: var(--modular-green); 50 | --green-600: var(--modular-green); 51 | --green-630: var(--modular-green); 52 | --green-645: var(--modular-green); 53 | --green-660: var(--modular-green); 54 | --green-700: var(--modular-green); 55 | --green-730: var(--modular-green); 56 | --green-760: var(--modular-green); 57 | --green-800: var(--modular-green); 58 | --green-830: var(--modular-green); 59 | --green-860: var(--modular-green); 60 | --green-900: var(--modular-green); 61 | 62 | /* YELLOW */ 63 | --yellow-100: var(--modular-yellow); 64 | --yellow-130: var(--modular-yellow); 65 | --yellow-160: var(--modular-yellow); 66 | --yellow-200: var(--modular-yellow); 67 | --yellow-230: var(--modular-yellow); 68 | --yellow-260: var(--modular-yellow); 69 | --yellow-300: var(--modular-yellow); 70 | --yellow-330: var(--modular-yellow); 71 | --yellow-345: var(--modular-yellow); 72 | --yellow-360: var(--modular-yellow); 73 | --yellow-400: var(--modular-yellow); 74 | --yellow-430: var(--modular-yellow); 75 | --yellow-460: var(--modular-yellow); 76 | --yellow-500: var(--modular-yellow); 77 | --yellow-530: var(--modular-yellow); 78 | --yellow-560: var(--modular-yellow); 79 | --yellow-600: var(--modular-yellow); 80 | --yellow-630: var(--modular-yellow); 81 | --yellow-645: var(--modular-yellow); 82 | --yellow-660: var(--modular-yellow); 83 | --yellow-700: var(--modular-yellow); 84 | --yellow-730: var(--modular-yellow); 85 | --yellow-760: var(--modular-yellow); 86 | --yellow-800: var(--modular-yellow); 87 | --yellow-830: var(--modular-yellow); 88 | --yellow-860: var(--modular-yellow); 89 | --yellow-900: var(--modular-yellow); 90 | 91 | /* ORANGE */ 92 | --orange-100: var(--modular-orange); 93 | --orange-130: var(--modular-orange); 94 | --orange-160: var(--modular-orange); 95 | --orange-200: var(--modular-orange); 96 | --orange-230: var(--modular-orange); 97 | --orange-260: var(--modular-orange); 98 | --orange-300: var(--modular-orange); 99 | --orange-330: var(--modular-orange); 100 | --orange-345: var(--modular-orange); 101 | --orange-360: var(--modular-orange); 102 | --orange-400: var(--modular-orange); 103 | --orange-430: var(--modular-orange); 104 | --orange-460: var(--modular-orange); 105 | --orange-500: var(--modular-orange); 106 | --orange-530: var(--modular-orange); 107 | --orange-560: var(--modular-orange); 108 | --orange-600: var(--modular-orange); 109 | --orange-630: var(--modular-orange); 110 | --orange-645: var(--modular-orange); 111 | --orange-660: var(--modular-orange); 112 | --orange-700: var(--modular-orange); 113 | --orange-730: var(--modular-orange); 114 | --orange-760: var(--modular-orange); 115 | --orange-800: var(--modular-orange); 116 | --orange-830: var(--modular-orange); 117 | --orange-860: var(--modular-orange); 118 | --orange-900: var(--modular-orange); 119 | 120 | /* TEAL */ 121 | --teal-100: var(--modular-teal); 122 | --teal-130: var(--modular-teal); 123 | --teal-160: var(--modular-teal); 124 | --teal-200: var(--modular-teal); 125 | --teal-230: var(--modular-teal); 126 | --teal-260: var(--modular-teal); 127 | --teal-300: var(--modular-teal); 128 | --teal-330: var(--modular-teal); 129 | --teal-345: var(--modular-teal); 130 | --teal-360: var(--modular-teal); 131 | --teal-400: var(--modular-teal); 132 | --teal-430: var(--modular-teal); 133 | --teal-460: var(--modular-teal); 134 | --teal-500: var(--modular-teal); 135 | --teal-530: var(--modular-teal); 136 | --teal-560: var(--modular-teal); 137 | --teal-600: var(--modular-teal); 138 | --teal-630: var(--modular-teal); 139 | --teal-645: var(--modular-teal); 140 | --teal-660: var(--modular-teal); 141 | --teal-700: var(--modular-teal); 142 | --teal-730: var(--modular-teal); 143 | --teal-760: var(--modular-teal); 144 | --teal-800: var(--modular-teal); 145 | --teal-830: var(--modular-teal); 146 | --teal-860: var(--modular-teal); 147 | --teal-900: var(--modular-teal); 148 | 149 | /* BLUE */ 150 | --blue-100: var(--modular-blue); 151 | --blue-130: var(--modular-blue); 152 | --blue-160: var(--modular-blue); 153 | --blue-200: var(--modular-blue); 154 | --blue-230: var(--modular-blue); 155 | --blue-260: var(--modular-blue); 156 | --blue-300: var(--modular-blue); 157 | --blue-330: var(--modular-blue); 158 | --blue-345: var(--modular-blue); 159 | --blue-360: var(--modular-blue); 160 | --blue-400: var(--modular-blue); 161 | --blue-430: var(--modular-blue); 162 | --blue-460: var(--modular-blue); 163 | --blue-500: var(--modular-blue); 164 | --blue-530: var(--modular-blue); 165 | --blue-560: var(--modular-blue); 166 | --blue-600: var(--modular-blue); 167 | --blue-630: var(--modular-blue); 168 | --blue-645: var(--modular-blue); 169 | --blue-660: var(--modular-blue); 170 | --blue-700: var(--modular-blue); 171 | --blue-730: var(--modular-blue); 172 | --blue-760: var(--modular-blue); 173 | --blue-800: var(--modular-blue); 174 | --blue-830: var(--modular-blue); 175 | --blue-860: var(--modular-blue); 176 | --blue-900: var(--modular-blue); 177 | 178 | /* New brand variables */ 179 | --brand-100: color-mix(in srgb, #fff calc(97.6% - 32.5%), var(--brand-500)); 180 | --brand-130: color-mix(in srgb, #fff calc(95.5% - 32.5%), var(--brand-500)); 181 | --brand-160: color-mix(in srgb, #fff calc(92.9% - 32.5%), var(--brand-500)); 182 | --brand-200: color-mix(in srgb, #fff calc(90% - 32.5%), var(--brand-500)); 183 | --brand-230: color-mix(in srgb, #fff calc(87.1% - 32.5%), var(--brand-500)); 184 | --brand-260: color-mix(in srgb, #fff calc(83.7% - 32.5%), var(--brand-500)); 185 | --brand-300: color-mix(in srgb, #fff calc(78.8% - 32.5%), var(--brand-500)); 186 | --brand-330: color-mix(in srgb, #fff calc(73.3% - 32.5%), var(--brand-500)); 187 | --brand-345: color-mix(in srgb, #fff calc(67.5% - 32.5%), var(--brand-500)); 188 | --brand-360: color-mix(in srgb, #fff calc(61.2% - 32.5%), var(--brand-500)); 189 | --brand-400: color-mix(in srgb, #fff calc(52.9% - 32.5%), var(--brand-500)); 190 | --brand-430: color-mix(in srgb, #fff calc(44.9% - 32.5%), var(--brand-500)); 191 | --brand-460: color-mix(in srgb, #fff calc(38% - 32.5%), var(--brand-500)); 192 | --brand-530: color-mix(in srgb, #000 calc(38% - 32.5%), var(--brand-500)); 193 | --brand-560: color-mix(in srgb, #000 calc(44.9% - 32.5%), var(--brand-500)); 194 | --brand-600: color-mix(in srgb, #000 calc(52.9% - 32.5%), var(--brand-500)); 195 | --brand-630: color-mix(in srgb, #000 calc(61.2% - 32.5%), var(--brand-500)); 196 | --brand-645: color-mix(in srgb, #000 calc(67.5% - 32.5%), var(--brand-500)); 197 | --brand-660: color-mix(in srgb, #000 calc(73.3% - 32.5%), var(--brand-500)); 198 | --brand-700: color-mix(in srgb, #000 calc(78.8% - 32.5%), var(--brand-500)); 199 | --brand-730: color-mix(in srgb, #000 calc(83.7% - 32.5%), var(--brand-500)); 200 | --brand-760: color-mix(in srgb, #000 calc(87.1% - 32.5%), var(--brand-500)); 201 | --brand-800: color-mix(in srgb, #000 calc(90% - 32.5%), var(--brand-500)); 202 | --brand-830: color-mix(in srgb, #000 calc(92.9% - 32.5%), var(--brand-500)); 203 | --brand-860: color-mix(in srgb, #000 calc(95.5% - 32.5%), var(--brand-500)); 204 | --brand-900: color-mix(in srgb, #000 calc(97.6% - 32.5%), var(--brand-500)); 205 | 206 | --brand-05a: color-mix(in srgb, var(--brand-500) 5%, transparent); 207 | --brand-10a: color-mix(in srgb, var(--brand-500) 10%, transparent); 208 | --brand-15a: color-mix(in srgb, var(--brand-500) 15%, transparent); 209 | --brand-20a: color-mix(in srgb, var(--brand-500) 20%, transparent); 210 | --brand-25a: color-mix(in srgb, var(--brand-500) 25%, transparent); 211 | --brand-30a: color-mix(in srgb, var(--brand-500) 30%, transparent); 212 | --brand-35a: color-mix(in srgb, var(--brand-500) 35%, transparent); 213 | --brand-40a: color-mix(in srgb, var(--brand-500) 40%, transparent); 214 | --brand-45a: color-mix(in srgb, var(--brand-500) 45%, transparent); 215 | --brand-50a: color-mix(in srgb, var(--brand-500) 50%, transparent); 216 | --brand-55a: color-mix(in srgb, var(--brand-500) 55%, transparent); 217 | --brand-60a: color-mix(in srgb, var(--brand-500) 60%, transparent); 218 | --brand-65a: color-mix(in srgb, var(--brand-500) 65%, transparent); 219 | --brand-70a: color-mix(in srgb, var(--brand-500) 70%, transparent); 220 | --brand-75a: color-mix(in srgb, var(--brand-500) 75%, transparent); 221 | --brand-80a: color-mix(in srgb, var(--brand-500) 80%, transparent); 222 | --brand-85a: color-mix(in srgb, var(--brand-500) 85%, transparent); 223 | --brand-90a: color-mix(in srgb, var(--brand-500) 90%, transparent); 224 | --brand-95a: color-mix(in srgb, var(--brand-500) 95%, transparent); 225 | 226 | /* THESE SHOULD BE HIDDEN */ 227 | /* General variables */ 228 | --background-primary: var(--modular-bg0); 229 | --bg-base-primary: var(--modular-bg0); 230 | 231 | --background-secondary: var(--modular-bg1); 232 | --bg-base-secondary: var(--modular-bg1); 233 | --background-secondary-alt: var(--modular-bg1); 234 | 235 | --background-tertiary: var(--modular-bg2); 236 | --bg-base-tertiary: var(--modular-bg2); 237 | 238 | --background-floating: var(--modular-bg3); 239 | --brand-500: var(--modular-accent); 240 | 241 | --text-normal: var(--modular-text0); 242 | --text-muted: var(--modular-text2); 243 | 244 | --interactive-active: var(--modular-text1); 245 | --interactive-hover: var(--modular-text1); 246 | --interactive-normal: var(--modular-text0); 247 | --interactive-muted: var(--modular-text2); 248 | 249 | --header-primary: var(--modular-text0); 250 | --header-secondary: var(--modular-text2); 251 | 252 | --channels-default: var(--modular-text2); 253 | 254 | --background-modifier-accent: color-mix(in srgb,var(--modular-bg4) 40%, transparent); 255 | --background-modifier-hover: color-mix(in srgb,var(--modular-bg4) 70%, transparent); 256 | --background-modifier-selected: color-mix(in srgb, var(--modular-bg4) 100%, transparent); 257 | 258 | --mention-background: color-mix(in srgb, var(--brand-700) 50%, transparent); 259 | 260 | /* Chat bubbles */ 261 | --chat-bubble-default: var(--modular-bg4); 262 | --chat-bubble-replying: var(--modular-blue); 263 | --chat-bubble-mentioned: var(--modular-yellow); 264 | --chat-bubble-automod: var(--modular-red); 265 | 266 | /* Chat bubbles requirements */ 267 | --background-message-hover: none; 268 | --background-mentioned: none; 269 | --background-mentioned-hover: none; 270 | --background-message-highlight: none; 271 | --background-message-automod: none; 272 | --background-message-automod-hover: none; 273 | --info-warning-foreground: none; 274 | 275 | /* Scrollbars */ 276 | --scrollbar-auto-thumb: var(--modular-accent); 277 | --scrollbar-auto-track: color-mix(in srgb, var(--modular-accent) 25%, transparent); 278 | --scrollbar-thin-thumb: var(--modular-accent); 279 | --scrollbar-thin-track: transparent; 280 | 281 | /* Role pill requirements */ 282 | --profile-role-pill-background: none; 283 | 284 | /* Custom fonts */ 285 | --font-primary: var(--font-main), gg sans; 286 | --font-display: var(--font-main), gg sans; 287 | --font-code: var(--font-code), monospace; 288 | 289 | /* Update versioning scheme */ 290 | --modular-version: "v2.1.2"; 291 | } 292 | -------------------------------------------------------------------------------- /src/assets/old/onboarding.css: -------------------------------------------------------------------------------- 1 | /* [[ ONBOARDING SECTION ]] */ 2 | .theme-dark .container_c2efea { 3 | background: unset; 4 | } 5 | 6 | .categoryText_f04d06 { 7 | font-size: 16px; 8 | } 9 | 10 | .pill_c993da.small_c993da { 11 | background: var(--background-tertiary-alt); 12 | } 13 | 14 | .container_c15230 { 15 | background: var(--background-tertiary); 16 | 17 | &:hover { 18 | background: var(--background-modifier-hover); 19 | } 20 | } 21 | 22 | .channelRow_f04d06 { 23 | background: var(--background-modifier-accent); 24 | margin: 8px 0; 25 | border-radius: var(--radius-sm); 26 | 27 | &:hover { 28 | background: var(--background-modifier-hover); 29 | } 30 | } 31 | 32 | .newMosaicStyle_d8e2d0 .textContainer_d8e2d0 { 33 | border-radius: var(--radius-sm) 8px 0 0; 34 | } 35 | 36 | /* Bring back buttons */ 37 | .tabBarItem_f1fd9c.item_a0 { 38 | border: none; 39 | background: var(--background-modifier-accent); 40 | border-radius: var(--radius-sm); 41 | padding: 4px 8px; 42 | 43 | &.selected_a0 { 44 | background: var(--background-modifier-selected); 45 | } 46 | 47 | &:hover { 48 | background: var(--background-modifier-hover); 49 | } 50 | } 51 | 52 | :is(.pageBody_c6b11b > :not(.prompt_c6b11b), .profile_c6b11b) 53 | .text-xs-normal_ccc5fb { 54 | margin-top: 8px; 55 | text-align: center; 56 | font-weight: 600; 57 | font-size: 14px; 58 | } 59 | 60 | .checkIcon_bd5e1f { 61 | top: 8px; 62 | right: 8px; 63 | } 64 | 65 | .bio_c6b11b, 66 | .username_c6b11b, 67 | .title_c6b11b, 68 | .profile_c6b11b > .text-xs-normal__46d75, 69 | .heading-md-semibold__76ba1 { 70 | text-align: center; 71 | } 72 | 73 | .profileCard_c6b11b .blockquoteContainer_f8f345 { 74 | justify-content: center; 75 | } 76 | 77 | /* Center help text */ 78 | .prompt_c6b11b > .helpText_c6b11b { 79 | justify-content: center; 80 | font-weight: bold; 81 | } 82 | 83 | /* Center the top tab bar */ 84 | .tabBar_f1fd9c { 85 | border: none; 86 | justify-content: center; 87 | } 88 | 89 | /* Styling for survey headers */ 90 | .pageBody_c6b11b > div:first-child { 91 | background: var(--background-primary); 92 | border-radius: var(--radius-sm); 93 | padding: 4px; 94 | } 95 | 96 | .profile_c6b11b { 97 | & > :not(.profileCard_c6b11b) { 98 | background: var(--background-primary); 99 | } 100 | 101 | & > .heading-md-semibold__76ba1 { 102 | border-radius: var(--radius-sm) 8px 0 0; 103 | padding: 4px 4px 0; 104 | } 105 | 106 | & > .text-xs-normal__46d75 { 107 | border-radius: 0 0 8px 8px; 108 | padding: 0 4px 4px; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/assets/old/profilepaneldm_old.css: -------------------------------------------------------------------------------- 1 | /* [[ PROFILE PANEL IN DMS ]] */ 2 | 3 | .profilePanel_b433b4 { 4 | margin: calc(4px * var(--enable-client-border)); 5 | padding: 4px; 6 | 7 | border: calc(2px * var(--enable-client-border)) solid 8 | var(--client-border-color); 9 | box-sizing: border-box; 10 | border-radius: calc(8px + 4px * var(--enable-client-border)); 11 | 12 | /* Inner gradient background */ 13 | & > .userPanelOuter_c69a7b { 14 | overflow: hidden; 15 | border-radius: calc(8px + 4px * var(--enable-client-border)); 16 | } 17 | } 18 | 19 | .panelBanner_c3e427 { 20 | width: calc(100% - 8px - 2px * var(--enable-client-border) * 2); 21 | border-radius: calc(4px * var(--enable-client-border)) !important; 22 | } 23 | 24 | [class*="profilePanelConnections_"] { 25 | padding: 0 12px; 26 | } 27 | 28 | [class^="userPanelOverlayBackground__"] > [class*="container__"] > div { 29 | width: 100%; 30 | } 31 | 32 | :is(.mutualGuildsList_b433b4, .mutualFriendsList_b433b4) { 33 | margin: 4px 0; 34 | 35 | & > ul { 36 | margin: 8px 0; 37 | } 38 | 39 | & > button { 40 | background: transparent; 41 | } 42 | } 43 | 44 | [class*="connectionList_"] > div { 45 | padding: auto 8px; 46 | margin: 8px; 47 | } 48 | 49 | /* Notes section */ 50 | .textarea_dde0a8 { 51 | text-align: center; 52 | } 53 | -------------------------------------------------------------------------------- /src/assets/old/profiles_old.css: -------------------------------------------------------------------------------- 1 | /* [[ PROFILES ]] */ 2 | /* Limit height of user popouts */ 3 | .userPopoutOuter_c69a7b { 4 | border-radius: 8px; 5 | } 6 | 7 | [class^="userPopoutInner_"] { 8 | max-height: calc(75vh - 28px); 9 | } 10 | 11 | /* General layout, center items */ 12 | .mainContainer_f005b2.profileMutuals_d2b491 { 13 | padding-bottom: 8px; 14 | } 15 | 16 | .section_d7a21f { 17 | margin: 8px 0; 18 | padding: 8px; 19 | } 20 | 21 | .section_d7a21f > div:not(.activity__20c1e, .roles_fa2f72), 22 | .memberSinceWrapper_b06bc5, 23 | .mainContainer_f005b2.profileMutuals_d2b491, 24 | .userInfoText_a24910, 25 | .container_afed89, 26 | .nameTag_afed89, 27 | .popularApplicationCommandsList_d2db23, 28 | .section_d7a21f:has(.vc-user-connection) > .eyebrow_dc00ef { 29 | justify-content: center; 30 | text-align: center; 31 | align-items: center; 32 | } 33 | 34 | .section_d7a21f:not(:has(.buttonsContainer_b709ea)), 35 | .mutualGuildsList_b433b4, 36 | .mutualFriendsList_b433b4, 37 | .userInfoText_a24910.aboutMeGuildIcon_b05b69, 38 | .mainContainer_f005b2.profileMutuals_d2b491, 39 | .userInfoSection_a24910 { 40 | background: var(--profile-body-background-color); 41 | border-radius: 8px; 42 | } 43 | 44 | /* Custom status */ 45 | .section_d7a21f.customStatusSection_d2b491 { 46 | margin: 8px 12px; 47 | } 48 | 49 | .customStatus_cb55fc, 50 | .customStatus_afed89 { 51 | &::before { 52 | content: "Current status"; 53 | text-transform: uppercase; 54 | font-weight: 800; 55 | font-size: 12px; 56 | color: var(--text-muted); 57 | display: block; 58 | } 59 | 60 | & .customStatusEmoji_cb55fc { 61 | margin: 4px -12px 8px; 62 | position: relative; 63 | left: 50%; 64 | float: none; 65 | border-radius: 4px; 66 | 67 | &.customStatusSoloEmoji_cb55fc { 68 | position: relative; 69 | left: 42.5%; 70 | } 71 | } 72 | } 73 | 74 | /* Activity user popout */ 75 | .activityUserPopoutV2_d5089b { 76 | padding: 0 8px; 77 | } 78 | 79 | /* Spotify song text and time left align */ 80 | .contentImagesUserPopoutV2_d5089b, 81 | .textLeft_aa267a { 82 | text-align: left; 83 | } 84 | 85 | /* Mutual servers/friends */ 86 | .profileMutuals_d2b491 { 87 | padding-top: 8px; 88 | } 89 | 90 | /* Pronouns */ 91 | .pronouns_c9ccf6, 92 | .pronouns_afed89 { 93 | color: var(--text-normal); 94 | font-size: 16px; 95 | font-weight: bold; 96 | padding: 4px 6px; 97 | margin: 4px 0 0 0; 98 | border-radius: 8px; 99 | max-width: 90%; 100 | overflow: hidden; 101 | background: linear-gradient( 102 | 45deg, 103 | var(--profile-gradient-primary-color), 104 | var(--profile-gradient-secondary-color) 105 | ); 106 | background-size: 200% 200%; 107 | } 108 | 109 | .scrollerSeparator_d2b491 { 110 | box-shadow: none; 111 | } 112 | 113 | /* profile section width fix */ 114 | .section_d7a21f.usernameSection_d2b491 { 115 | margin: 8px 12px; 116 | padding: 8px; 117 | 118 | & > div { 119 | width: 100%; 120 | } 121 | } 122 | 123 | /* remove border in modal connections */ 124 | .userInfoSection_a24910 + .userInfoSection_a24910 { 125 | border-top: none; 126 | } 127 | 128 | /* fix badge list height */ 129 | .profileBadges_f89da9.container_b64375 { 130 | min-height: fit-content; 131 | margin-right: 10px; 132 | } 133 | 134 | /* Profile fixes */ 135 | [style^="-webkit-line-clamp: 6"] { 136 | display: block; 137 | } 138 | 139 | [class^="userProfileModalOverlayBackground__"] > [class^="body_"] { 140 | flex: 0 1 50%; 141 | } 142 | 143 | :is(.userPopoutInner_c69a7b, .userInfoText_a24910) .blockquoteContainer_d6076c { 144 | justify-content: center; 145 | } 146 | 147 | /* User modal tab */ 148 | .tabBarContainer_b9fccc { 149 | margin: 16px 0 0; 150 | border: none; 151 | } 152 | 153 | .tabBar_b9fccc { 154 | flex-flow: row wrap; 155 | gap: 8px; 156 | justify-content: center; 157 | margin-bottom: 8px; 158 | } 159 | 160 | /* User modal tab buttons */ 161 | .tabBarItem_b9fccc { 162 | border: none; 163 | background: color-mix( 164 | in srgb, 165 | var(--profile-body-background-color) 40%, 166 | transparent 167 | ); 168 | padding: 2px 0; 169 | width: 31%; 170 | height: fit-content; 171 | border-radius: 8px; 172 | text-align: center; 173 | 174 | &:hover { 175 | background: color-mix( 176 | in srgb, 177 | var(--profile-body-background-color) 70%, 178 | transparent 179 | ) !important; 180 | } 181 | 182 | &.selected_a0 { 183 | background: color-mix( 184 | in srgb, 185 | var(--profile-body-background-color) 100%, 186 | transparent 187 | ); 188 | } 189 | } 190 | 191 | /* User modal name container */ 192 | .container_afed89 { 193 | background: var(--profile-body-background-color); 194 | padding: 12px; 195 | margin: 12px; 196 | border-radius: 8px; 197 | } 198 | 199 | /* User modal section header */ 200 | .userInfoSectionHeader_a24910 { 201 | text-align: center; 202 | } 203 | 204 | .userInfoSection_a24910 { 205 | padding-bottom: 8px; 206 | margin-top: 12px; 207 | } 208 | 209 | .item_a0:hover, 210 | .selected_a0.item_a0 { 211 | border: none; 212 | } 213 | 214 | .divider__979dc { 215 | background: var(--profile-body-divider-color); 216 | } 217 | 218 | .platformIcon_d5089b { 219 | margin: 2px 2px; 220 | } 221 | 222 | .scroller_ed5743 { 223 | left: 12.5%; 224 | } 225 | 226 | /* add ReviewDB */ 227 | div[style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;"], 228 | .vc-rdb-view { 229 | padding: 4px 8px; 230 | margin-top: 8px; 231 | border-radius: 8px; 232 | background: var(--profile-body-background-color); 233 | } 234 | 235 | .vc-rdb-input { 236 | border: none; 237 | background: var(--profile-body-background-color); 238 | } 239 | 240 | /* Fix connections in profile modal */ 241 | .connectedAccounts_f3eb60 { 242 | background: transparent; 243 | } 244 | 245 | /* [[ ROLE PILLS ]] */ 246 | [class*="roles_"] { 247 | justify-content: center; 248 | } 249 | 250 | .rolePill_fa2f72 { 251 | padding: 0; 252 | overflow: hidden; 253 | position: relative; 254 | border-radius: 8px; 255 | 256 | & .roleRemoveButton_f9575e { 257 | position: unset; 258 | height: 100%; 259 | 260 | & .roleCircle_a26d7b { 261 | border-radius: unset; 262 | margin: unset; 263 | position: absolute; 264 | width: 100%; 265 | height: 100%; 266 | mix-blend-mode: multiply; 267 | text-align: center; 268 | } 269 | 270 | & .roleRemoveIcon_e4010c { 271 | background: var(--profile-role-pill-background-color); 272 | padding: 2px; 273 | border-radius: 50%; 274 | margin: -6px 0 0 -6px; 275 | 276 | & path { 277 | fill: #fff; 278 | } 279 | } 280 | 281 | & + .roleName_e4010c { 282 | margin-left: 4px; 283 | } 284 | } 285 | 286 | & .roleIcon_e4010c { 287 | margin-left: 4px; 288 | min-width: 16px; 289 | z-index: 1; 290 | } 291 | 292 | & .roleName_e4010c { 293 | padding: 4px; 294 | text-rendering: optimizeLegibility; 295 | 296 | & div { 297 | font-weight: 600; 298 | } 299 | } 300 | } 301 | 302 | .overlayBackground_c69a7b { 303 | background: transparent; 304 | } 305 | -------------------------------------------------------------------------------- /src/assets/old/root_200.css: -------------------------------------------------------------------------------- 1 | /* [[ REMADE DISCORD VARIABLES ]] */ 2 | 3 | :root, 4 | .theme-dark, 5 | .theme-light { 6 | /* Primary variables */ 7 | --primary-100-hsl: var(--modular-hue) var(--modular-saturation) 97.6%; 8 | --primary-130-hsl: var(--modular-hue) var(--modular-saturation) 95.5%; 9 | --primary-160-hsl: var(--modular-hue) var(--modular-saturation) 92.9%; 10 | --primary-200-hsl: var(--modular-hue) var(--modular-saturation) 90%; 11 | --primary-230-hsl: var(--modular-hue) var(--modular-saturation) 87.1%; 12 | --primary-260-hsl: var(--modular-hue) var(--modular-saturation) 83.7%; 13 | --primary-300-hsl: var(--modular-hue) var(--modular-saturation) 78.8%; 14 | --primary-330-hsl: var(--modular-hue) var(--modular-saturation) 73.3%; 15 | --primary-345-hsl: var(--modular-hue) var(--modular-saturation) 67.5%; 16 | --primary-360-hsl: var(--modular-hue) var(--modular-saturation) 61.2%; 17 | --primary-400-hsl: var(--modular-hue) var(--modular-saturation) 52.9%; 18 | --primary-430-hsl: var(--modular-hue) var(--modular-saturation) 44.9%; 19 | --primary-460-hsl: var(--modular-hue) var(--modular-saturation) 38%; 20 | --primary-500-hsl: var(--modular-hue) var(--modular-saturation) 32.5%; 21 | --primary-530-hsl: var(--modular-hue) var(--modular-saturation) 27.3%; 22 | --primary-560-hsl: var(--modular-hue) var(--modular-saturation) 23.5%; 23 | --primary-600-hsl: var(--modular-hue) var(--modular-saturation) 20.6%; 24 | --primary-630-hsl: var(--modular-hue) var(--modular-saturation) 18%; 25 | --primary-645-hsl: var(--modular-hue) var(--modular-saturation) 16.9%; 26 | --primary-660-hsl: var(--modular-hue) var(--modular-saturation) 14.7%; 27 | --primary-700-hsl: var(--modular-hue) var(--modular-saturation) 12.5%; 28 | --primary-730-hsl: var(--modular-hue) var(--modular-saturation) 11%; 29 | --primary-760-hsl: var(--modular-hue) var(--modular-saturation) 9.2%; 30 | --primary-800-hsl: var(--modular-hue) var(--modular-saturation) 7.3%; 31 | --primary-830-hsl: var(--modular-hue) var(--modular-saturation) 4.9%; 32 | --primary-860-hsl: var(--modular-hue) var(--modular-saturation) 2.5%; 33 | --primary-900-hsl: var(--modular-hue) var(--modular-saturation) 0.8%; 34 | 35 | /* New brand variables */ 36 | --brand-100: color-mix(in srgb, #fff calc(97.6% - 32.5%), var(--brand-500)); 37 | --brand-130: color-mix(in srgb, #fff calc(95.5% - 32.5%), var(--brand-500)); 38 | --brand-160: color-mix(in srgb, #fff calc(92.9% - 32.5%), var(--brand-500)); 39 | --brand-200: color-mix(in srgb, #fff calc(90% - 32.5%), var(--brand-500)); 40 | --brand-230: color-mix(in srgb, #fff calc(87.1% - 32.5%), var(--brand-500)); 41 | --brand-260: color-mix(in srgb, #fff calc(83.7% - 32.5%), var(--brand-500)); 42 | --brand-300: color-mix(in srgb, #fff calc(78.8% - 32.5%), var(--brand-500)); 43 | --brand-330: color-mix(in srgb, #fff calc(73.3% - 32.5%), var(--brand-500)); 44 | --brand-345: color-mix(in srgb, #fff calc(67.5% - 32.5%), var(--brand-500)); 45 | --brand-360: color-mix(in srgb, #fff calc(61.2% - 32.5%), var(--brand-500)); 46 | --brand-400: color-mix(in srgb, #fff calc(52.9% - 32.5%), var(--brand-500)); 47 | --brand-430: color-mix(in srgb, #fff calc(44.9% - 32.5%), var(--brand-500)); 48 | --brand-460: color-mix(in srgb, #fff calc(38% - 32.5%), var(--brand-500)); 49 | --brand-530: color-mix(in srgb, #000 calc(38% - 32.5%), var(--brand-500)); 50 | --brand-560: color-mix(in srgb, #000 calc(44.9% - 32.5%), var(--brand-500)); 51 | --brand-600: color-mix(in srgb, #000 calc(52.9% - 32.5%), var(--brand-500)); 52 | --brand-630: color-mix(in srgb, #000 calc(61.2% - 32.5%), var(--brand-500)); 53 | --brand-645: color-mix(in srgb, #000 calc(67.5% - 32.5%), var(--brand-500)); 54 | --brand-660: color-mix(in srgb, #000 calc(73.3% - 32.5%), var(--brand-500)); 55 | --brand-700: color-mix(in srgb, #000 calc(78.8% - 32.5%), var(--brand-500)); 56 | --brand-730: color-mix(in srgb, #000 calc(83.7% - 32.5%), var(--brand-500)); 57 | --brand-760: color-mix(in srgb, #000 calc(87.1% - 32.5%), var(--brand-500)); 58 | --brand-800: color-mix(in srgb, #000 calc(90% - 32.5%), var(--brand-500)); 59 | --brand-830: color-mix(in srgb, #000 calc(92.9% - 32.5%), var(--brand-500)); 60 | --brand-860: color-mix(in srgb, #000 calc(95.5% - 32.5%), var(--brand-500)); 61 | --brand-900: color-mix(in srgb, #000 calc(97.6% - 32.5%), var(--brand-500)); 62 | } 63 | 64 | /* [[ CUSTOM THEME VARIABLES ]] */ 65 | 66 | :root, 67 | .theme-dark, 68 | .theme-light { 69 | --status-danger: var(--brand-500); 70 | --button-outline-danger-border: var(--brand-500); 71 | --text-brand: var(--brand-500); 72 | --background-primary-alt: color-mix( 73 | in srgb, 74 | var(--background-primary) var(--modular-transparency), 75 | transparent 76 | ) !important; 77 | --mention-background: color-mix(in srgb, var(--brand-500) 25%, transparent); 78 | } 79 | :root, 80 | .theme-dark, 81 | .theme-light { 82 | /* Chat bubbles requirements */ 83 | --background-message-hover: none; 84 | --background-mentioned: none; 85 | --background-mentioned-hover: none; 86 | --background-message-highlight: none; 87 | --background-message-automod: none; 88 | --background-message-automod-hover: none; 89 | --info-warning-foreground: none; 90 | /* Scrollbars */ 91 | --scrollbar-auto-thumb: var(--brand-500); 92 | --scrollbar-auto-track: color-mix(in srgb, var(--brand-500) 25%, transparent); 93 | --scrollbar-thin-thumb: var(--brand-500); 94 | --scrollbar-thin-track: transparent; 95 | 96 | --profile-role-pill-background: none; 97 | --font-primary: var(--font-main), var(--font-fallback); 98 | --font-display: var(--font-main), var(--font-fallback); 99 | --font-code: var(--font-code), var(--font-code-fallback); 100 | --font-fallback: "gg sans"; 101 | --font-code-fallback: "monospace"; 102 | --text-link: var(--text-normal); 103 | /* Update versioning scheme */ 104 | --modular-version: "v2.0.10"; 105 | } 106 | -------------------------------------------------------------------------------- /src/comp/parts/README.md: -------------------------------------------------------------------------------- 1 | # Parts 2 | 3 | Preparation for bundling theme in SCSS. 4 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | /* -------------------- [[ EXTRA IMPORTS GO HERE ]] -------------------- */ 2 | /* Colors */ 3 | @import url("https://raw.githubusercontent.com/SEELE1306/Modular/refs/heads/release/src/assets/new/root_210.css"); 4 | 5 | /* Fonts */ 6 | @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"); 7 | 8 | /* -------------------- [[ START OF MAIN CSS FILE ]] -------------------- */ 9 | 10 | :root { 11 | /* [[ START OF CUSTOMIZABLE PARAMETERS ]] */ 12 | --font-main: "Inter"; 13 | --font-code: "Roboto Mono"; 14 | --modular-background-blur-strength: 5px; 15 | 16 | --modular-sidebar-orientation: column; 17 | --modular-guild-orientation: row; 18 | --modular-memberlist-orientation: row; 19 | --modular-friendlist-orientation: row; 20 | --modular-flavor: "Rosebox"; 21 | --modular-version: "v2.1.2-20241231"; /* testing */ 22 | --modular-spotify-bg-blur: 5px; /* higher px = stronger blur, 0 = no blur */ 23 | --modular-spotify-darken: 0.25; /* 0 = album cover is not darkened, 1 = album cover is darkened fully (black) */ 24 | 25 | --modular-red: #bf616a; 26 | --modular-yellow: #ebcb8b; 27 | --modular-green: #a3be8c; 28 | --modular-orange: #d08770; 29 | --modular-teal: #b48ead; 30 | --modular-blue: #88c0d0; 31 | 32 | --modular-bg0: #262626; /* Primary background color */ 33 | --modular-bg1: #202020; /* Secondary background color */ 34 | --modular-bg2: #151515; /* Tertiary background color */ 35 | --modular-bg3: #323232; /* Quarterary background color */ 36 | --modular-bg4: #393939; /* Modifier/hover/select background color */ 37 | 38 | --modular-accent: #a57562; /* Accent color */ 39 | 40 | --modular-text0: #d8c8c4; /* Normal text color */ 41 | --modular-text1: #f6f1ef; /* Brighter text color */ 42 | --modular-text2: #cab5b1; /* Darker text color */ 43 | 44 | --modular-cb-width: fit-content; /* 100% for chat bubbles spanning the entire screen / fit-content for dynamic width, Default is fit-content */ 45 | } 46 | 47 | /* [[ END OF CUSTOMIZABLE PARAMETERS ]] */ 48 | 49 | /* [[ ALL DISPLAY: NONE ELEMENTS ]] */ 50 | /* Unread labels */ 51 | [class*=unread_], 52 | /* For Chat Bubbles */ 53 | .unreadMentionsBar_ef3116, 54 | .replying__5126c::before, 55 | .mentioned__5126c::before, 56 | .automodMessage__5126c::before, 57 | .content_f75fb0::before, 58 | /* For Chat Area */ 59 | .form_f75fb0::before, 60 | .form_f75fb0::after, 61 | .chat_a44415::before, 62 | /* Shorten right-click settings */ 63 | #user-settings-cog > .scroller_c1e9c4 > .item_c1e9c4, 64 | /* Notes in profile modal */ 65 | .aboutMeGuildIcon_b05b69, 66 | /* Call icon */ 67 | .icon__235ca, 68 | /* Unknown */ 69 | .children__9293f:after, 70 | .iconContainerLeft_c1e9c4, 71 | .bar__7aaec, 72 | .attachment_fc8177, 73 | .tabBody__133bf::before, 74 | .wrapper__14245:after, 75 | .option__56fec::before, 76 | .option__56fec::after, 77 | .wordmarkWindows__421ed path:not(:first-child), 78 | .separator_aa63ab:before, 79 | .emojiItemDisabled__843ea, 80 | .content__65844 .iconContainer__2ea32, 81 | .uploadInput__0923f, 82 | .divider_b9fccc, 83 | .divider_ae36e5, 84 | .section_d7a21f > .buttonsContainer_b709ea, 85 | .scroller__629e4 .sectionDivider__629e4, 86 | .container_eff079:after, 87 | .divider__8b90f, 88 | .tabBar_d6f9e9, 89 | .separator_c1e9c4, 90 | .gradientContainer_bfe55a { 91 | display: none !important; 92 | } 93 | 94 | /* [[ SPOTIFY CONTROLS ]] */ 95 | 96 | #vc-spotify-player { 97 | background: transparent !important; 98 | position: relative; 99 | overflow: hidden; 100 | padding: 14px 12px; 101 | margin-bottom: 8px; 102 | 103 | border-radius: 8px; 104 | 105 | &::before { 106 | content: ""; 107 | position: absolute; 108 | display: block; 109 | height: 100%; 110 | width: 100%; 111 | top: 0; 112 | left: 0; 113 | background: linear-gradient(rgba(0, 0, 0, var(--modular-spotify-darken)), rgba(0, 0, 0, var(--modular-spotify-darken))), var(--vc-spotify-track-image) center/cover no-repeat; 114 | clip-path: inset(0); 115 | } 116 | 117 | &::after { 118 | content: ""; 119 | position: absolute; 120 | display: block; 121 | height: 100%; 122 | width: 100%; 123 | top: 0; 124 | left: 0; 125 | background: linear-gradient(rgba(0, 0, 0, var(--modular-spotify-darken)), rgba(0, 0, 0, var(--modular-spotify-darken))), var(--vc-spotify-track-image) center/cover no-repeat; 126 | opacity: 0.5; 127 | filter: blur(var(--modular-spotify-bg-blur)); 128 | transform: scale(20); 129 | } 130 | 131 | & > * { 132 | position: relative; 133 | z-index: 1; 134 | } 135 | 136 | & [class*="bar_"] { 137 | background: color-mix(in srgb, var(--modular-accent) 30%, transparent); 138 | height: 4px; 139 | 140 | &::after { 141 | content: ""; 142 | position: absolute; 143 | display: block; 144 | height: 100%; 145 | width: 100%; 146 | top: 0; 147 | left: 0; 148 | background: var(--vc-spotify-track-image) center/cover no-repeat; 149 | opacity: 0.5; 150 | filter: blur(calc(5 * var(--modular-spotify-bg-blur))); 151 | transform: scale(20); 152 | } 153 | } 154 | 155 | & [class*="barFill"] { 156 | background: var(--brand-300); 157 | } 158 | 159 | & :is(.vc-spotify-shuffle-off, .vc-spotify-repeat-off) { 160 | color: var(--brand-300) !important; 161 | } 162 | 163 | & .vc-spotify-button.vc-spotify-button { 164 | color: var(--brand-300); 165 | background: var(--background-modifier-accent); 166 | margin: 0 4px; 167 | scale: 0.85; 168 | 169 | &:hover { 170 | background: color-mix(in srgb, var(--modular-accent) 50%, transparent); 171 | color: var(--brand-300); 172 | } 173 | } 174 | 175 | & 176 | :is( 177 | .vc-spotify-shuffle-on, 178 | .vc-spotify-repeat-track, 179 | .vc-spotify-repeat-context 180 | ) { 181 | background: color-mix( 182 | in srgb, 183 | var(--modular-accent) 70%, 184 | transparent 185 | ) !important; 186 | } 187 | 188 | & .vc-spotify-button-row { 189 | margin-top: 15px; 190 | } 191 | 192 | & :is(.vc-spotify-time-right, .vc-spotify-time-left) { 193 | margin-top: 1px; 194 | font-weight: 600; 195 | letter-spacing: 0.05em; 196 | } 197 | 198 | & 199 | :is( 200 | .vc-spotify-comma, 201 | .vc-spotify-ellipoverflow, 202 | .vc-spotify-artist, 203 | .vc-spotify-album 204 | ) { 205 | margin-top: -2px; 206 | font-weight: 600; 207 | } 208 | 209 | & #vc-spotify-album-image { 210 | margin-top: -4px; 211 | border-radius: 8px; 212 | } 213 | 214 | & #vc-spotify-titles { 215 | margin-left: 0; 216 | padding-left: 0; 217 | flex: 1 auto; 218 | } 219 | } 220 | 221 | #vc-spotify-song-title { 222 | font-weight: 800; 223 | } 224 | 225 | #vc-spotify-info-wrapper { 226 | flex-direction: row-reverse; 227 | } 228 | 229 | /* Add border styling to Listening Along widget */ 230 | .listeningAlong_e0cf27 { 231 | margin-bottom: 4px; 232 | background: var(--background-primary); 233 | border-radius: 8px; 234 | border-bottom: none; 235 | 236 | padding: 5px 8px; 237 | } 238 | 239 | /* [[ VC CONTAINER + CONTROLS ]] */ 240 | .connection_e131a9, 241 | .voiceUsers_e131a9 { 242 | padding: 8px 12px; 243 | } 244 | 245 | /* [[ QUOTES ]] */ 246 | [class*="markup_"] blockquote { 247 | padding: 4px 10px; 248 | background: color-mix(in srgb, var(--modular-accent) 25%, transparent); 249 | color: var(--modular-text0); 250 | border-radius: 0 4px 4px 0; 251 | max-width: fit-content; 252 | } 253 | 254 | [class*="blockquoteDivider_"] { 255 | background: var(--modular-accent); 256 | } 257 | 258 | /* [[ CHAT AREA ]] */ 259 | .themedBackground__74017 { 260 | background: var(--background-primary); 261 | } 262 | 263 | .messagesWrapper__36d07 > div { 264 | border-radius: 8px; 265 | background: var(--background-primary); 266 | } 267 | 268 | /* Align chat box to bottom */ 269 | .form_f75fb0 { 270 | margin-bottom: -24px; 271 | padding: 16px 0 0; 272 | 273 | /* Slowmode/typing indicators */ 274 | & > :last-child[class^="typing"] { 275 | top: -24px; 276 | right: 24px; 277 | padding: 0px 16px 0px 8px; 278 | margin-left: auto; 279 | width: fit-content; 280 | border-radius: 6px; 281 | background: var(--brand-700); 282 | } 283 | } 284 | 285 | .separator_aa63ab { 286 | grid-column: 4; 287 | margin-right: 8px; 288 | padding-bottom: 8px; 289 | padding-top: 8px; 290 | 291 | & .innerButton_aa63ab { 292 | padding: 0; 293 | margin: 0; 294 | } 295 | } 296 | 297 | .channelTextArea_f75fb0 .divider__908e2 { 298 | border-top: none; 299 | } 300 | 301 | .channelAttachmentArea_b77158 { 302 | background: var(--background-tertiary); 303 | margin: 8px; 304 | padding: 8px; 305 | gap: 8px; 306 | border-radius: 8px; 307 | width: fit-content; 308 | } 309 | 310 | .upload_aa605f { 311 | min-height: 150px; 312 | max-height: 150px; 313 | min-width: 150px; 314 | max-width: 150px; 315 | } 316 | 317 | .actionBar_aa605f { 318 | transform: translate(0, -16px); 319 | 320 | & .button_f7ecac { 321 | background: var(--background-tertiary); 322 | } 323 | } 324 | 325 | /* jump to present */ 326 | .jumpToPresentBar__0f481 { 327 | padding: 0; 328 | left: 0; 329 | border-radius: 4px; 330 | margin: 4px 8px; 331 | width: fit-content !important; 332 | background: var(--brand-700) !important; 333 | right: unset; 334 | 335 | &:active { 336 | margin-bottom: 8px; 337 | } 338 | 339 | & > .barButtonMain__0f481 { 340 | flex: 0 0 auto; 341 | } 342 | 343 | &:hover .barButtonMain__0f481 { 344 | animation: vertiscroll 0.5s linear forwards; 345 | display: block; 346 | height: auto; 347 | overflow: visible; 348 | white-space: normal; 349 | } 350 | } 351 | 352 | .stackedBars__74017 { 353 | min-height: unset !important; 354 | position: relative; 355 | margin: 0px 24px 8px 0px; 356 | padding: 4px 0; 357 | border-radius: 8px !important; 358 | } 359 | 360 | .replyBar__841c8 { 361 | background: var(--background-tertiary); 362 | } 363 | 364 | .base_b88801 .typingDots_b88801 svg { 365 | margin-right: 4px; 366 | } 367 | 368 | /* [[ STAFF TAGS ]] */ 369 | [class*="botTag_"] { 370 | background: var(--brand-100); 371 | color: var(--brand-900); 372 | font-size: 0.2rem; 373 | } 374 | 375 | [class^="userTagNoNickname-"] > [class*="botTag"] { 376 | margin-bottom: 4px; 377 | } 378 | 379 | /* Fix bot tags */ 380 | .botText__82f07 { 381 | font-weight: bold; 382 | } 383 | 384 | .botTagVerified__82f07 > path { 385 | fill: var(--brand-900) !important; 386 | } 387 | 388 | /* [[ CHANNEL LIST ]] */ 389 | .selected__91a9d .layout__91a9d, 390 | .channel__972a0.container-32HW5s > .interactiveSelected__972a0, 391 | .navButtonActive__08434 { 392 | background: var(--background-modifier-selected); 393 | } 394 | 395 | :is(.containerDefault_c69b6d.selected_c69b6d, .modeUnreadImportant__2ea32) 396 | .icon__2ea32 { 397 | background: var(--brand-700); 398 | } 399 | 400 | .icon__2ea32 { 401 | width: 15px; 402 | height: 15px; 403 | margin: 2px 2px 0 0; 404 | border-radius: 4px; 405 | padding: 3px; 406 | } 407 | 408 | :is(.containerDefault_c69b6d.selected_c69b6d, .modeUnreadImportant__2ea32) 409 | .icon__2ea32 { 410 | color: var(--interactive-active); 411 | } 412 | 413 | .containerDefault_c69b6d:hover .icon__2ea32 { 414 | color: var(--interactive-active); 415 | background: color-mix(in srgb, var(--modular-accent) 50%, transparent); 416 | } 417 | 418 | /* [[ SHIKI CODEBLOCKS ]] */ 419 | [class*="markup_"] code { 420 | margin: 8px 0 8px 0; 421 | } 422 | 423 | [class*="markup_"] code.inline { 424 | border: none !important; 425 | font-weight: 600; 426 | } 427 | 428 | code:not(code.inline) { 429 | background: transparent; 430 | } 431 | 432 | .shiki-container { 433 | margin: 8px; 434 | border: unset; 435 | width: max-content; 436 | } 437 | 438 | /* Same button class */ 439 | .button_fb7f94 { 440 | border: none; 441 | } 442 | 443 | /* Badge container */ 444 | .container__8061a { 445 | border: none; 446 | padding: 1px 3px; 447 | background: var(--background-floating); 448 | } 449 | 450 | /* [[ MAIN BACKGROUND COMPONENTS ]] */ 451 | 452 | /* fix background selector */ 453 | .bg__960e4 { 454 | background: var(--background-primary); 455 | } 456 | 457 | .sidebar_c48ade, 458 | .chat_f75fb0, 459 | .container_c8ffbb { 460 | background: transparent; 461 | } 462 | 463 | .container_c48ade { 464 | background: var(--background-modifier-accent); 465 | margin: 16px; 466 | padding: 4px; 467 | box-sizing: border-box; 468 | width: calc(100% - 32px); 469 | height: calc(100% - 32px); 470 | border-radius: 12px; 471 | flex-direction: var(--modular-guild-orientation); 472 | 473 | } 474 | 475 | .guilds_c48ade { 476 | border-radius: 8px; 477 | margin: 4px; 478 | } 479 | 480 | .wrapper_ef3116 { 481 | background: var(--background-primary); 482 | 483 | } 484 | 485 | /* [[ STATUS (ALTERNATIVE) ]] */ 486 | rect[fill="#23a55a"], 487 | .status_a423bd[style="background-color: rgb(35, 165, 90);"] { 488 | fill: var(--modular-green) !important; 489 | background-color: var(--modular-green) !important; 490 | } 491 | 492 | rect[fill="#f0b232"], 493 | .status_a423bd[style="background-color: rgb(240, 178, 50);"] { 494 | fill: var(--modular-yellow) !important; 495 | background-color: var(--modular-yellow) !important; 496 | } 497 | 498 | rect[fill="#f23f43"], 499 | .status_a423bd[style="background-color: rgb(242, 63, 67);"] { 500 | fill: var(--modular-red) !important; 501 | background-color: var(--modular-red) !important; 502 | } 503 | 504 | rect[fill="#593695"] { 505 | fill: var(--modular-teal) !important; 506 | } 507 | 508 | /* [[ CHAT BUBBLES ]] */ 509 | /* ShowMeYourName plugin */ 510 | .vc-smyn-suffix { 511 | color: currentColor !important; 512 | opacity: 0.5; 513 | 514 | &::before { 515 | content: "| @" !important; 516 | } 517 | 518 | &::after { 519 | content: "" !important; 520 | } 521 | } 522 | 523 | /* Username */ 524 | .cozy_c19a55 .header_c19a55 { 525 | margin-bottom: 4px; 526 | } 527 | 528 | /* Fix avatars being all over the place */ 529 | .message__5126c.hasReply_c19a55 .avatar_c19a55 { 530 | top: 24px; 531 | } 532 | 533 | .message__5126c:not(.hasReply_c19a55) .avatar_c19a55 { 534 | top: 0; 535 | } 536 | 537 | /* Username */ 538 | .username_c19a55, 539 | .base_b88801 .text_b88801 strong, 540 | .name__841c8, 541 | .mention.interactive, 542 | [class^="repliedMessage_"] > .username_c19a55, 543 | .member__5d473 .username_d272d6 { 544 | background: color-mix(in srgb, currentColor 20%, var(--background-floating)); 545 | font-weight: bold; 546 | margin-right: 4px; 547 | padding: 0 6px; 548 | border-radius: 6px; 549 | display: inline-flex; 550 | 551 | &:hover { 552 | text-decoration: none; 553 | background: color-mix(in srgb, currentColor 30%, var(--background-floating)); 554 | } 555 | } 556 | 557 | .username_c19a55::after { 558 | position: relative; 559 | margin: 0 0 0 8px; 560 | color: inherit; 561 | } 562 | 563 | /* Fix overflow on replied pings */ 564 | .repliedTextPreview_c19a55 { 565 | max-height: fit-content; 566 | } 567 | 568 | /* Timestamps */ 569 | @font-face { 570 | font-family: "Blank Dot"; 571 | src: url("https://raw.githubusercontent.com/adobe-fonts/adobe-blank/master/AdobeBlank.ttf.woff"); 572 | unicode-range: U+2022; 573 | } 574 | 575 | [class*="timestampInline_"], 576 | .vc-reply-timestamp { 577 | font-family: "Blank Dot", var(--font-primary); 578 | position: relative; 579 | color: var(--primary-100) !important; 580 | letter-spacing: 0.05em; 581 | font-size: 10px !important; 582 | margin: 0 4px; 583 | height: 16px; 584 | border-radius: 4px; 585 | top: -2px; 586 | max-width: fit-content; 587 | line-height: 1rem !important; 588 | 589 | &:not(:has(time)) { 590 | background: var(--brand-600); 591 | padding: 0 4px 0 2px; 592 | } 593 | 594 | &:has(time) { 595 | background: var(--brand-600); 596 | padding: 0 4px; 597 | } 598 | } 599 | 600 | /* Align timestamps in replies */ 601 | .vc-reply-timestamp { 602 | text-align: center; 603 | margin-right: 8px; 604 | margin-left: 0; 605 | top: 0; 606 | } 607 | 608 | .contents_c19a55 [class^="botTagCozy_"] { 609 | border-radius: 4px; 610 | height: 16px; 611 | top: 2px; 612 | } 613 | 614 | /* Start of Chat Bubbles */ 615 | .mediaAttachmentsContainer__242e2 { 616 | margin-bottom: 0 !important; 617 | } 618 | 619 | .altText__0f481 { 620 | margin: 8px 0 -4px; 621 | } 622 | 623 | /* revert back to class selectors + add borders */ 624 | .markup__75297.messageContent_c19a55 a { 625 | background: var(--background-modifier-accent); 626 | color: var(--text-link); 627 | font-weight: 600; 628 | padding: 0 4px; 629 | border-radius: 4px; 630 | } 631 | 632 | /* Message embeds (Vencord plugin) */ 633 | .grid__623de { 634 | padding: 4px 8px 8px 6px; 635 | 636 | & .embedAuthor__623de { 637 | & span { 638 | font-weight: bold; 639 | } 640 | } 641 | 642 | & .message__02a39 { 643 | padding: 8px 0; 644 | 645 | & .avatar_c19a55 { 646 | margin: 0; 647 | } 648 | } 649 | } 650 | 651 | .groupStart__5126c.cozyMessage__5126c 652 | > .contents_c19a55:hover 653 | .markup__75297.messageContent_c19a55 654 | a, 655 | .cozyMessage__5126c:not(.groupStart__5126c) 656 | > .contents_c19a55:hover 657 | > .markup__75297:not(:empty, .searchResultsWrap_a9e706 *) 658 | a { 659 | background: var(--background-modifier-hover); 660 | text-decoration: none; 661 | } 662 | 663 | .groupStart__5126c.cozyMessage__5126c > .contents_c19a55, 664 | .cozyMessage__5126c:not(.groupStart__5126c) 665 | > .contents_c19a55 666 | > .markup__75297:not(:empty, .searchResultsWrap_a9e706 *), 667 | .container_b7e1cb > :not(.reactions__23977, .searchResultsWrap_a9e706 *) { 668 | margin: 0; 669 | padding: 8px; 670 | border-radius: 8px; 671 | background: color-mix(in srgb, var(--chat-bubble-default) 25%, transparent); 672 | max-width: var(--modular-cb-width, max-content); 673 | min-width: var(--modular-cb-width, max-content); 674 | box-sizing: border-box; 675 | 676 | &:hover { 677 | background: color-mix(in srgb, var(--chat-bubble-default) 50%, transparent); 678 | } 679 | } 680 | 681 | /* Overwrite previous margin settings */ 682 | .groupStart__5126c.cozyMessage__5126c > .contents_c19a55, 683 | .cozyMessage__5126c:not(.groupStart__5126c) 684 | > .contents_c19a55 685 | > .markup__75297:not(:empty, .searchResultsWrap_a9e706 *) { 686 | margin: 2px 0; 687 | } 688 | 689 | .container_b7e1cb > .embedSpotify__623de { 690 | height: fit-content; 691 | padding: 0; 692 | box-sizing: content-box; 693 | } 694 | */ 695 | 696 | /* Fix overlapping of reactions */ 697 | .reactions__23977 { 698 | margin-top: 4px; 699 | margin-left: 0; 700 | } 701 | 702 | .altText__0f481 { 703 | margin: 8px 0 -4px; 704 | } 705 | 706 | .groupStart__5126c.cozyMessage__5126c.replying__5126c > .contents_c19a55, 707 | .cozyMessage__5126c.replying__5126c:not(.groupStart__5126c) 708 | > .contents_c19a55 709 | > .markup__75297:not(:empty, .searchResultsWrap_a9e706 *), 710 | .replying__5126c 711 | .container_b7e1cb 712 | > :not(.reactions__23977, .searchResultsWrap_a9e706 *) { 713 | background: color-mix(in srgb, var(--chat-bubble-replying) 25%, transparent); 714 | 715 | &:hover { 716 | background: color-mix(in srgb, var(--chat-bubble-replying) 50%, transparent); 717 | } 718 | } 719 | 720 | .groupStart__5126c.cozyMessage__5126c.mentioned__5126c > .contents_c19a55, 721 | .cozyMessage__5126c.mentioned__5126c:not(.groupStart__5126c) 722 | > .contents_c19a55 723 | > .markup__75297:not(:empty, .searchResultsWrap_a9e706 *), 724 | .mentioned__5126c 725 | .container_b7e1cb 726 | > :not(.reactions__23977, .searchResultsWrap_a9e706 *) { 727 | background: color-mix(in srgb, var(--chat-bubble-mentioned) 25%, transparent); 728 | 729 | &:hover { 730 | background: color-mix(in srgb, var(--chat-bubble-mentioned) 50%, transparent); 731 | } 732 | } 733 | 734 | .groupStart__5126c.cozyMessage__5126c.automodMessage__5126c > .contents_c19a55, 735 | .cozyMessage__5126c.automodMessage__5126c:not(.groupStart__5126c) 736 | > .contents_c19a55 737 | > .markup__75297:not(:empty, .searchResultsWrap_a9e706 *), 738 | .automodMessage__5126c 739 | .container_b7e1cb 740 | > :not(.reactions__23977, .searchResultsWrap_a9e706 *) { 741 | background: color-mix(in srgb, var(--chat-bubble-automod) 25%, transparent); 742 | border-radius: 8px; 743 | 744 | &:hover { 745 | background: color-mix(in srgb, var(--chat-bubble-automod) 50%, transparent); 746 | } 747 | } 748 | 749 | /* [[ EMBEDS ]] */ 750 | .embedFull__623de { 751 | overflow: hidden; 752 | border-left: none; 753 | z-index: 0; 754 | background: inherit; 755 | margin-top: 8px; 756 | 757 | &::before { 758 | content: ""; 759 | position: absolute; 760 | display: block; 761 | height: 100%; 762 | border-right: 100vw solid transparent; 763 | border-color: inherit; 764 | opacity: 0.5; 765 | z-index: -1; 766 | } 767 | 768 | &::after { 769 | content: ""; 770 | position: absolute; 771 | display: block; 772 | height: 100%; 773 | width: 100%; 774 | background: #00000099 !important; 775 | opacity: 0.5; 776 | z-index: -1; 777 | background: inherit; 778 | } 779 | } 780 | 781 | /* [[ PLATFORM INDICATORS ]] */ 782 | :is(.membersWrap_c8ffbb, .privateChannels__35e86) .vc-platform-indicator > svg { 783 | margin: 0 2px; 784 | } 785 | 786 | /* Fix rewrite of platform indicators */ 787 | .vc-platform-indicator { 788 | & > svg { 789 | width: 14px !important; 790 | height: 14px !important; 791 | margin-top: 2px; 792 | 793 | &[fill="#23a55a"] { 794 | fill: var(--modular-green); 795 | } 796 | 797 | &[fill="#f0b232"] { 798 | fill: var(--modular-yellow); 799 | } 800 | 801 | &[fill="#f23f43"] { 802 | fill: var(--modular-red); 803 | } 804 | 805 | &[data-tag="bot"] { 806 | fill: var(--modular-blue); 807 | } 808 | } 809 | } 810 | 811 | /* [[ TOOLTIPS ]] */ 812 | .reactionTooltip-3IOBwg { 813 | background: var(--background-floating) !important; 814 | } 815 | 816 | .theme-dark .tooltip__382e7, 817 | .toolbar_bba883 { 818 | background: var(--background-floating); 819 | } 820 | 821 | /* normal tooltips */ 822 | .theme-dark [class*="tooltipTop"] .tooltipPointer__382e7 { 823 | border-top-color: var(--modular-accent); 824 | scale: 1.5; 825 | margin-top: 4px; 826 | } 827 | 828 | .theme-dark [class*="tooltipBottom"] .tooltipPointer__382e7 { 829 | border-top-color: var(--modular-accent); 830 | scale: 1.5; 831 | margin-bottom: 4px; 832 | } 833 | 834 | /* guild tooltip */ 835 | .theme-dark [class*="tooltipRight"] .tooltipPointer__382e7 { 836 | border-top-color: var(--modular-accent); 837 | scale: 1.5; 838 | left: -14px; 839 | } 840 | 841 | .theme-dark [class*="tooltipLeft"] .tooltipPointer__382e7 { 842 | border-top-color: var(--modular-accent); 843 | scale: 1.5; 844 | margin-left: 5px; 845 | } 846 | 847 | .tooltipContent__382e7 { 848 | padding: 4px 12px; 849 | margin-bottom: 4px; 850 | } 851 | 852 | /* text options tooltip */ 853 | .toolbar_bba883:before { 854 | border-top-color: var(--modular-accent); 855 | } 856 | 857 | /* [[ MEMBERS LIST ]] */ 858 | .members_c8ffbb { 859 | background: var(--background-primary); 860 | 861 | margin: 4px; 862 | border-radius: 8px; 863 | } 864 | 865 | .memberInner__5d473 { 866 | border-radius: 8px; 867 | } 868 | 869 | .vc-membercount-member-list { 870 | margin: 8px 0 8px 8px !important; 871 | padding: 8px; 872 | align-items: center; 873 | border-radius: 8px; 874 | background: var(--background-floating); 875 | 876 | & span { 877 | font-weight: bold; 878 | } 879 | } 880 | 881 | .content_f75fb0.container__0b563 { 882 | padding: 8px; 883 | flex-direction: column; 884 | margin: 4px; 885 | border-radius: 8px; 886 | 887 | background: var(--background-primary) !important; 888 | } 889 | 890 | .scrollerContainer_c6b11b { 891 | background: transparent !important; 892 | } 893 | 894 | /* [[ INBOX TAB ]] */ 895 | [class*="messagesPopoutWrap_"], 896 | [class*="recentMentionsPopout_"] { 897 | height: 80vh; 898 | } 899 | 900 | [class*="recentMentionsPopout_"] .channelHeader__35a7e { 901 | margin: 0 0 4px 0; 902 | padding: 0 8px 0 20px; 903 | } 904 | 905 | .container__95796 .channelHeader__35a7e { 906 | margin-left: 16px; 907 | margin-bottom: 4px; 908 | border-radius: 8px; 909 | } 910 | 911 | /* [[ TITLEBAR ]] */ 912 | 913 | .wordmarkWindows__421ed { 914 | display: flex; 915 | align-items: center; 916 | order: 1; 917 | gap: 8px; 918 | margin-right: auto; 919 | margin-left: 4px; 920 | color: var(--header-primary); 921 | 922 | &::after { 923 | content: "Modular " var(--modular-version) " - " var(--modular-flavor); 924 | display: flex; 925 | width: fit-content; 926 | font-size: 14px; 927 | font-family: var(--font-display); 928 | font-weight: 600; 929 | background: var(--brand-700); 930 | border-radius: 4px; 931 | padding: 3px 6px; 932 | } 933 | 934 | & > svg { 935 | background: var(--modular-accent); 936 | padding: 4px; 937 | border-radius: 50%; 938 | width: 18px; 939 | height: 18px; 940 | 941 | & > g { 942 | transform: translateY(-75%); 943 | } 944 | } 945 | 946 | & path:first-child { 947 | d: path( 948 | "M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z" 949 | ) !important; 950 | scale: 2; 951 | } 952 | } 953 | 954 | .typeWindows__421ed { 955 | margin-top: 0; 956 | padding-right: 8px; 957 | height: fit-content; 958 | background: var(--background-floating); 959 | 960 | & > * { 961 | position: relative; 962 | } 963 | } 964 | 965 | .winButton__421ed { 966 | top: 0 !important; 967 | height: 24px; 968 | width: 24px; 969 | border-radius: 50%; 970 | margin: 8px; 971 | background: var(--brand-700); 972 | 973 | &:hover { 974 | background: var(--brand-500); 975 | } 976 | } 977 | 978 | /* [[ DAY AND UNREAD INDICATORS ]] */ 979 | .isUnread__908e2 .content__908e2 { 980 | background: var(--modular-red); 981 | border: none; 982 | padding: 2px 8px; 983 | text-align: center; 984 | color: var(--text-normal); 985 | } 986 | 987 | .content__908e2 { 988 | background: var(--modular-red); 989 | padding: 2px 8px; 990 | text-align: center; 991 | color: var(--text-normal); 992 | } 993 | 994 | /* [[ DMS SEARCH BAR ]] */ 995 | 996 | .searchBar__35e86 { 997 | background: var(--background-primary); 998 | 999 | 1000 | margin: 4px; 1001 | border-radius: 8px; 1002 | box-shadow: none; 1003 | 1004 | & .searchBarComponent__35e86 { 1005 | text-align: center; 1006 | background: transparent; 1007 | font-size: 16px; 1008 | font-weight: 700; 1009 | } 1010 | 1011 | &:hover { 1012 | background: var(--background-modifier-hover); 1013 | 1014 | & .searchBarComponent__35e86 { 1015 | color: var(--interactive-hover); 1016 | } 1017 | } 1018 | } 1019 | 1020 | /* [[ USER PANEL ]] */ 1021 | [class^="nameTag_"][class*="canCopy_"] { 1022 | margin-left: 6px; 1023 | } 1024 | 1025 | .container__37e49 { 1026 | display: flex; 1027 | flex-direction: column; 1028 | height: fit-content; 1029 | gap: 0px; 1030 | padding: 0; 1031 | margin: 0; 1032 | border-radius: 8px; 1033 | 1034 | overflow: hidden; 1035 | background: var(--background-primary) !important; 1036 | 1037 | & > .avatarWrapper__37e49 { 1038 | width: 100%; 1039 | height: 50px; 1040 | padding: 0 16px; 1041 | margin: 0; 1042 | box-sizing: border-box; 1043 | border-radius: 0; 1044 | } 1045 | 1046 | & > .flex__7c0ba { 1047 | width: 100%; 1048 | justify-content: center; 1049 | gap: 0px; 1050 | 1051 | & > button { 1052 | height: 40px; 1053 | width: 100%; 1054 | border-radius: 0; 1055 | z-index: 0; 1056 | } 1057 | } 1058 | } 1059 | 1060 | [class^="actionButtons_"] { 1061 | display: flexbox; 1062 | order: -1; 1063 | box-sizing: border-box; 1064 | gap: 0; 1065 | padding-top: 0; 1066 | 1067 | & [class^="button_"][class*="buttonColor_"] { 1068 | height: 40px; 1069 | background: transparent; 1070 | 1071 | &:hover { 1072 | background: var(--brand-700) !important; 1073 | } 1074 | } 1075 | } 1076 | 1077 | .panels_c48ade { 1078 | background: transparent !important; 1079 | margin: 4px; 1080 | position: relative; 1081 | transition: background 250ms ease-in-out; 1082 | } 1083 | 1084 | /* [[ GUILD BOOSTS ]] */ 1085 | .textArea_eff079 { 1086 | padding: 0 8px; 1087 | } 1088 | 1089 | .progressBar_eff079 { 1090 | height: 40px; 1091 | border-radius: 8px; 1092 | background: color-mix(in srgb, var(--modular-accent) 50%, transparent); 1093 | } 1094 | 1095 | .containerWithMargin_eff079 { 1096 | position: relative; 1097 | top: 25px; 1098 | margin: 0; 1099 | padding: 0; 1100 | width: 105%; 1101 | } 1102 | 1103 | .tadaIcon_eff079 { 1104 | right: 98%; 1105 | top: 6px; 1106 | translate: none; 1107 | font-size: 36px; 1108 | opacity: 0.5; 1109 | } 1110 | 1111 | .progressBarContainer_eff079 { 1112 | top: -40px; 1113 | z-index: -1; 1114 | height: 40px; 1115 | border-radius: 8px; 1116 | background: var(--background-tertiary) !important; 1117 | } 1118 | 1119 | .container_eff079 { 1120 | position: relative; 1121 | top: 25px; 1122 | margin: 0; 1123 | padding: 0; 1124 | width: 105%; 1125 | 1126 | &:hover { 1127 | /* Remove animation for performance */ 1128 | & .progressBar_eff079 { 1129 | background: color-mix(in srgb, var(--modular-accent) 75%, transparent); 1130 | } 1131 | } 1132 | } 1133 | 1134 | /* ------------------------------------------------ [[ UNSORTED ]] -------------------------------------- */ 1135 | 1136 | .chatContent_f75fb0 { 1137 | box-sizing: border-box; 1138 | overflow: hidden; 1139 | background: transparent; 1140 | 1141 | 1142 | margin: 4px; 1143 | border-radius: 8px; 1144 | } 1145 | 1146 | .sidebar_c48ade { 1147 | display: flex; 1148 | flex-direction: var(--modular-sidebar-orientation); 1149 | max-width: 240px; 1150 | } 1151 | 1152 | .pageBody__41ed7 { 1153 | padding: 8px; 1154 | margin: 4px; 1155 | } 1156 | 1157 | .container__2637a { 1158 | overflow: hidden; 1159 | padding: 8px; 1160 | margin: 4px; 1161 | border-radius: 8px; 1162 | background: var(--background-primary) !important; 1163 | } 1164 | 1165 | .resizeHandle__01ae2 { 1166 | height: 99%; 1167 | background: var(--background-tertiary-alt) !important; 1168 | margin-top: 0.4em; 1169 | } 1170 | 1171 | .container_c8ffbb { 1172 | background: transparent; 1173 | padding: 0; 1174 | } 1175 | 1176 | .container__34c2c { 1177 | background: var(--background-tertiary); 1178 | margin: 4px; 1179 | } 1180 | 1181 | .scroller__99e7c { 1182 | padding: 4px 0; 1183 | margin: 4px; 1184 | border-radius: 8px; 1185 | background: var(--background-primary) !important; 1186 | 1187 | 1188 | } 1189 | 1190 | .fieldList__1fed1 { 1191 | background: transparent; 1192 | } 1193 | 1194 | .userInfo__1fed1 .button__67645 { 1195 | background: var(--channel-icon); 1196 | margin-right: 12px; 1197 | } 1198 | 1199 | .actionButtons_e131a9 .lookFilled__201d5.colorBrand__201d5 { 1200 | border-radius: unset; 1201 | background: transparent; 1202 | } 1203 | 1204 | .constrainedRow__1fed1 .button.button__67645 { 1205 | background: var(--button-secondary-background); 1206 | padding: 4px 8px; 1207 | margin: 0 8px; 1208 | } 1209 | 1210 | [class*="container_"] > [class*="wrapper_"][class*="userSelectNone_"] { 1211 | padding: 16px; 1212 | margin: 8px 0 8px 0; 1213 | background: var(--background-tertiary) !important; 1214 | } 1215 | 1216 | div[class|="message"] div[class|="markup"] ol { 1217 | margin-left: unset; 1218 | list-style-position: inside !important; 1219 | } 1220 | 1221 | .peopleColumn__133bf { 1222 | border-radius: 8px; 1223 | padding: 4px; 1224 | margin: 4px; 1225 | background: var(--background-primary); 1226 | 1227 | 1228 | } 1229 | 1230 | .buttonsContainer__02a39 > div { 1231 | margin: 4px; 1232 | font-weight: 800; 1233 | } 1234 | 1235 | .privateChannels__35e86 { 1236 | background: transparent; 1237 | } 1238 | 1239 | .children__9293f:after, 1240 | .form_f75fb0:before { 1241 | content: none; 1242 | } 1243 | 1244 | .contentWrapper__08434 { 1245 | background: var(--background-tertiary); 1246 | } 1247 | 1248 | .wrapper__14245 { 1249 | background: var(--background-modifier-selected); 1250 | margin: 8px 0; 1251 | } 1252 | 1253 | .container_fea832 { 1254 | background: var(--background-modifier-selected); 1255 | } 1256 | 1257 | .actionButton_f8fa06 { 1258 | background: var(--background-modifier-selected); 1259 | } 1260 | 1261 | .searchBar__5ec2f { 1262 | background: var(--background-modifier-selected); 1263 | } 1264 | 1265 | .formTitle-2YQyhj { 1266 | color: var(--header-primary); 1267 | font-size: 16px; 1268 | } 1269 | 1270 | .rowContainer-3t7486 { 1271 | background: var(--channel-icon); 1272 | } 1273 | 1274 | .header_f37cb1 { 1275 | padding: 8px; 1276 | margin: 4px 4px 0; 1277 | background: var(--brand-700); 1278 | border-radius: 8px; 1279 | box-shadow: var(--elevation-high); 1280 | } 1281 | 1282 | .embedSpotify__623de { 1283 | padding: 4px 0; 1284 | } 1285 | 1286 | .nowPlayingColumn__133bf { 1287 | margin: 4px; 1288 | border-radius: 8px; 1289 | background: var(--background-primary); 1290 | 1291 | box-sizing: border-box; 1292 | overflow: hidden; 1293 | } 1294 | 1295 | /* [[ FORUM ]] */ 1296 | .container_faa96b, 1297 | .mainCard_f369db { 1298 | background: var(--background-tertiary); 1299 | } 1300 | 1301 | .theme-dark .outer_bf1984.interactive_bf1984:hover { 1302 | background: var(--background-modifier-selected); 1303 | } 1304 | 1305 | .wrapper__00943, 1306 | .scroller__7d20c { 1307 | border: unset; 1308 | } 1309 | 1310 | .wrapper__00943 { 1311 | background: var(--background-tertiary); 1312 | } 1313 | 1314 | .theme-dark .inset_bf1984 { 1315 | background: transparent; 1316 | } 1317 | 1318 | .section__00943 { 1319 | background: var(--background-modifier-accent); 1320 | } 1321 | 1322 | .scroller__7d20c { 1323 | margin-left: 0; 1324 | } 1325 | 1326 | .theme-dark .pageWrapper_a3a4ce { 1327 | margin: 4px 0 4px 12px; 1328 | background: var(--background-tertiary); 1329 | } 1330 | 1331 | .title__1472a, 1332 | .title_ace4f5, 1333 | .label_b717a1, 1334 | .legend_b717a1 { 1335 | font-size: 16px; 1336 | } 1337 | 1338 | .content_f75fb0 { 1339 | flex-direction: var(--modular-memberlist-orientation); 1340 | } 1341 | 1342 | .tabBody__133bf { 1343 | flex-direction: var(--modular-friendlist-orientation); 1344 | } 1345 | 1346 | .linkButtonIcon__972a0 { 1347 | color: var(--interactive-active); 1348 | } 1349 | 1350 | .placeholder__1b31f { 1351 | color: var(--text-muted); 1352 | } 1353 | 1354 | .theme-light .container_c2efea { 1355 | background: transparent; 1356 | } 1357 | 1358 | .defaultColor__77578.text-lg-semibold__84aef { 1359 | margin-right: 0 !important; 1360 | } 1361 | 1362 | [class^="accountProfilePopoutWrapper_"] { 1363 | left: 0; 1364 | 1365 | & [class*="userPopout"] { 1366 | margin: 0; 1367 | width: fit-content; 1368 | } 1369 | } 1370 | 1371 | .footer__49fc1 > button:last-child { 1372 | margin-right: 16px; 1373 | } 1374 | 1375 | .container_dc2e0e { 1376 | box-sizing: border-box; 1377 | overflow: hidden; 1378 | background: var(--background-tertiary); 1379 | margin: 4px; 1380 | } 1381 | 1382 | .container__5dbf8, 1383 | .container__8e680, 1384 | .container__5b321 { 1385 | background: var(--background-tertiary-alt); 1386 | } 1387 | 1388 | .welcomeCTA_f5d1e2 button { 1389 | margin-top: 8px; 1390 | background: var(--background-modifier-accent) !important; 1391 | 1392 | &:hover { 1393 | background: var(--background-modifier-hover) !important; 1394 | } 1395 | } 1396 | 1397 | .container__133bf { 1398 | background: transparent; 1399 | } 1400 | 1401 | .button_bba883:hover { 1402 | background: var(--background-modifier-hover); 1403 | } 1404 | 1405 | .navButton__08434 { 1406 | color: var(--interactive-muted); 1407 | } 1408 | 1409 | .navButton__08434:hover, 1410 | .navButtonActive__08434 { 1411 | color: var(--interactive-active); 1412 | } 1413 | 1414 | .iconWrapper__9293f { 1415 | margin: 0 5px; 1416 | } 1417 | 1418 | ul.resultsGroup__56fec { 1419 | background: var(--background-primary); 1420 | } 1421 | 1422 | [class*="option_"]:hover { 1423 | background: var(--background-modifier-hover); 1424 | } 1425 | 1426 | .message__02a39 { 1427 | padding: 16px 0; 1428 | } 1429 | 1430 | .channelNameContainer_c68065 { 1431 | display: flex; 1432 | justify-content: center; 1433 | background: var(--background-modifier-selected); 1434 | padding: 4px; 1435 | border-radius: 8px; 1436 | } 1437 | 1438 | .searchHeader_f3b986 { 1439 | background: var(--background-tertiary); 1440 | border-radius: unset; 1441 | } 1442 | 1443 | .searchHeaderTabList_f3b986.side_b3f026 { 1444 | & .item_b3f026 { 1445 | background: var(--background-modifier-accent); 1446 | 1447 | &:hover { 1448 | background: var(--background-modifier-hover) !important; 1449 | } 1450 | } 1451 | 1452 | & .selected_b3f026.item_b3f026 { 1453 | background: var(--background-modifier-selected); 1454 | font-weight: 800; 1455 | } 1456 | } 1457 | 1458 | [class*="searchResult_"] { 1459 | background: var(--background-modifier-accent); 1460 | border-bottom: none !important; 1461 | } 1462 | 1463 | .searchResult__02a39:hover { 1464 | background: var(--background-modifier-hover); 1465 | } 1466 | 1467 | button[class*="emojiButtonNormal"] > div > div { 1468 | filter: scale(1) opacity(25%) !important; 1469 | } 1470 | 1471 | h2.container_cc72c1 { 1472 | margin: 8px 0 8px 8px; 1473 | height: 24px; 1474 | top: -2px; 1475 | } 1476 | 1477 | .privateChannelRecipientsInviteButtonIcon__99e7c { 1478 | top: -2px; 1479 | } 1480 | 1481 | svg[class*="addButtonIcon_"] { 1482 | width: 16px; 1483 | height: 16px; 1484 | position: relative; 1485 | top: 2px; 1486 | } 1487 | 1488 | [class*="children_"] > button[class*="addButton_"] { 1489 | border-radius: 50%; 1490 | background: var(--background-modifier-accent); 1491 | top: -4px; 1492 | margin: 0 0 0 8px; 1493 | width: 20px; 1494 | height: 20px; 1495 | } 1496 | 1497 | .guildTitle_d5cd2d { 1498 | font-size: 14px; 1499 | } 1500 | 1501 | .collapseBtn_a4a127 { 1502 | background: var(--background-primary); 1503 | } 1504 | 1505 | .container__91a9d { 1506 | margin: 4px 0 0 auto; 1507 | padding: 0; 1508 | background: transparent; 1509 | } 1510 | 1511 | .popoutContainer__8641f { 1512 | background: var(--background-primary); 1513 | } 1514 | 1515 | .theme-dark .queryContainer__55c99 { 1516 | background: var(--background-primary) !important; 1517 | border-bottom: none !important; 1518 | } 1519 | 1520 | /* Fix color consistency issues */ 1521 | .iconWrapper__9293f > svg { 1522 | padding: 2px; 1523 | } 1524 | 1525 | .name__76f04 { 1526 | color: var(--text-muted); 1527 | } 1528 | 1529 | [class^="popout-"] [class^="row-"]:hover :is(.name__76f04, .timestamp__76f04) { 1530 | color: var(--interactive-hover); 1531 | } 1532 | 1533 | .button_bba883:hover .icon_bba883, 1534 | .icon_bba883:hover, 1535 | .iconWrapper__9293f[class*="clickable_"] [class*="icon_"]:hover { 1536 | color: var(--interactive-hover) !important; 1537 | } 1538 | 1539 | .section__38f83 { 1540 | background: var(--background-primary); 1541 | } 1542 | 1543 | .messagesPopout__45690 { 1544 | background: var(--background-tertiary); 1545 | } 1546 | 1547 | .connectedAccountContainer_e6abe8 { 1548 | border-width: 2px; 1549 | 1550 | &:has(.connectedAccountOpenIcon_e6abe8:hover) { 1551 | background: var(--profile-body-divider-color); 1552 | } 1553 | } 1554 | 1555 | .flowerStarContainer__3e3b0.connectedAccountVerifiedIcon_e6abe8 > svg > path { 1556 | fill: var(--profile-body-divider-color); 1557 | filter: brightness(1) contrast(2); 1558 | } 1559 | 1560 | .title_c4a579, 1561 | .title__76f04, 1562 | .activity__20c1e .overflow__82b15, 1563 | span[class*="headerLabel_"], 1564 | [class*="pageBody_"] > div > h2 { 1565 | font-size: 14px; 1566 | color: var(--header-primary) !important; 1567 | display: block; 1568 | text-align: center; 1569 | } 1570 | 1571 | .eyebrow_cf4812 { 1572 | font-size: 12px; 1573 | font-weight: 800; 1574 | color: var(--text-muted) !important; 1575 | } 1576 | 1577 | .item_b3f026.themed_b3f026 { 1578 | font-size: 14px; 1579 | } 1580 | 1581 | .content__99f8c .wrapper__2ea32 { 1582 | align-items: center; 1583 | } 1584 | 1585 | .content__99f8c .children__2ea32 { 1586 | padding-top: 0; 1587 | } 1588 | 1589 | .mention, 1590 | .wrapper_d4fa29 { 1591 | padding: 0 4px; 1592 | } 1593 | 1594 | .vc-rdb-view .wrapper_f7ecac { 1595 | scale: 0.825; 1596 | } 1597 | 1598 | .listItem__650eb:first-of-type { 1599 | margin: 8px 0; 1600 | } 1601 | 1602 | /* [[ ADDED IN v2.0.0 ]] */ 1603 | .container__55c99 { 1604 | position: relative; 1605 | top: 12px; 1606 | } 1607 | 1608 | .wrapper_d4fa29 { 1609 | color: var(--brand-260); 1610 | background: color-mix(in srgb, var(--modular-accent) 50%, transparent); 1611 | } 1612 | 1613 | .container__87bf1.checked__87bf1 { 1614 | background: var(--brand-400) !important; 1615 | } 1616 | 1617 | path[fill="rgba(35, 165, 90, 1)"] { 1618 | fill: var(--brand-400) !important; 1619 | } 1620 | 1621 | .premiumIconWrapper_c3e427 { 1622 | right: 16px; 1623 | top: 12px; 1624 | } 1625 | 1626 | .bar_a562c8[style="background: var(--green-360);"] { 1627 | background: var(--primary-500) !important; 1628 | } 1629 | 1630 | .resultsGroup__56fec .header__56fec { 1631 | font-size: 14px; 1632 | } 1633 | 1634 | .content_dc3a33 a { 1635 | color: var(--brand-400); 1636 | } 1637 | 1638 | .chatTarget__01ae2, 1639 | .root__49fc1:has(.userProfileModalOuter_c69a7b), 1640 | :is(.replying__5126c, .mentioned__5126c):hover { 1641 | background: unset !important; 1642 | } 1643 | 1644 | .wrapper__48b20 { 1645 | height: calc(100% - 16px); 1646 | width: calc(100% - 16px); 1647 | } 1648 | 1649 | .barBase__0f481 { 1650 | width: fit-content; 1651 | } 1652 | 1653 | .theme-dark .searchFilter_bd8186 { 1654 | background: var(--modular-accent); 1655 | } 1656 | 1657 | /* Fix auto complete sections overflow */ 1658 | .outerWrapper_d1405b, 1659 | .autocompleteAttached__6b0e0 { 1660 | margin: 8px 20px auto 8px; 1661 | padding: 4px; 1662 | border-radius: 8px !important; 1663 | } 1664 | 1665 | /* Match the unread pill with the brand color */ 1666 | :is(.pill_c9fddf, .pill_e5445c) > .item__58105 { 1667 | background: var(--brand-300); 1668 | } 1669 | 1670 | .imageWrapper__178ee { 1671 | border-radius: 4px; 1672 | } 1673 | 1674 | .userProfileModalInner_c69a7b { 1675 | max-height: 800px !important; 1676 | } 1677 | 1678 | button[class*="lookOutlined__"] { 1679 | border: none; 1680 | background: var(--background-modifier-accent); 1681 | border-radius: 4px; 1682 | 1683 | &:hover { 1684 | background: var(--background-modifier-hover); 1685 | } 1686 | } 1687 | 1688 | .badgeList_ab525a { 1689 | margin-right: 10px; 1690 | border-radius: 8px; 1691 | } 1692 | 1693 | /* VC container */ 1694 | .container_e131a9 { 1695 | margin-bottom: 8px; 1696 | padding: 0; 1697 | background: transparent; 1698 | border-radius: 8px; 1699 | border-bottom: none; 1700 | 1701 | 1702 | & span { 1703 | font-family: var(--font-primary) !important; 1704 | font-weight: bold; 1705 | } 1706 | } 1707 | 1708 | /* Read all notifications button */ 1709 | .vc-ranb-button { 1710 | margin: 12px 6px; 1711 | padding: 0; 1712 | width: calc(100% - 12px); 1713 | background: var(--background-modifier-accent); 1714 | 1715 | &:hover { 1716 | background: var(--background-modifier-hover); 1717 | } 1718 | } 1719 | 1720 | /* Server banner */ 1721 | .animatedContainer_f37cb1 { 1722 | border-radius: 8px; 1723 | } 1724 | 1725 | /* Show all voice channels */ 1726 | .voiceChannelsButton__29444 { 1727 | transition: all 150ms ease-in-out; 1728 | border: none; 1729 | background: var(--background-modifier-accent); 1730 | 1731 | &:hover { 1732 | background: var(--background-modifier-hover); 1733 | } 1734 | } 1735 | 1736 | /* Browse channels */ 1737 | .containerDefault_c69b6d.wrapper__2ea32 .link__2ea32 { 1738 | text-align: center; 1739 | background: var(--background-modifier-accent); 1740 | 1741 | & > .content__65844 { 1742 | text-transform: uppercase; 1743 | 1744 | & > .name__2ea32 { 1745 | font-weight: bold; 1746 | font-size: 12px; 1747 | } 1748 | } 1749 | } 1750 | 1751 | .link__2ea32.basicChannelRowLink__2ea32 { 1752 | padding: 2px; 1753 | min-height: 24px; 1754 | } 1755 | 1756 | /* Channel categories */ 1757 | h3.container_cc72c1, 1758 | h2.container_cc72c1 { 1759 | background: var(--background-modifier-accent); 1760 | border-radius: 4px; 1761 | padding: 4px; 1762 | box-sizing: border-box; 1763 | margin-bottom: 10px; 1764 | margin-left: 8px; 1765 | font-size: 12px; 1766 | font-weight: bold; 1767 | text-align: center; 1768 | } 1769 | 1770 | /* Member role categories */ 1771 | .membersGroup_c8ffbb.container_cc72c1 { 1772 | height: 24px; 1773 | margin: 8px 0 8px 8px; 1774 | border-radius: 4px; 1775 | font-size: 12px; 1776 | } 1777 | 1778 | /* Test divider color */ 1779 | .divider__5126c { 1780 | --divider-color: var(--modular-red); 1781 | } 1782 | 1783 | .main_c08b38 /* Server welcome screen */, 1784 | .container_f369db /* Forum page */, 1785 | .container__55c99 /* Search results wrap */, 1786 | .notice_c5cd6a /* Notice */, 1787 | .wrapper_cb9592.video_cb9592 /* Video call container */, 1788 | .list_f391e3 /* Message request screen */ { 1789 | border-radius: 8px !important; 1790 | margin: 4px; 1791 | padding: 8px; 1792 | max-height: calc(100% - 24px); 1793 | background: var(--background-primary); 1794 | } 1795 | 1796 | .notice_c5cd6a { 1797 | background: transparent; 1798 | border-bottom: none; 1799 | } 1800 | 1801 | /* DM Pin container (Plugin) */ 1802 | .vc-pindms-section-container { 1803 | font-weight: bold; 1804 | border-radius: 4px; 1805 | background: var(--background-modifier-accent); 1806 | margin: 8px 0 8px 8px; 1807 | padding: 4px 8px; 1808 | text-align: center; 1809 | height: fit-content; 1810 | } 1811 | 1812 | /* Fix server invite splash background */ 1813 | .inviteSplash_d5f3cd { 1814 | margin: -4px -4px 12px -4px; 1815 | border-radius: 8px; 1816 | } 1817 | 1818 | /* Activity panel */ 1819 | .theme-dark .activityPanel_c48ade { 1820 | background: var(--background-primary); 1821 | border-radius: 8px !important; 1822 | 1823 | margin-bottom: 4px; 1824 | padding: 5px; 1825 | } 1826 | 1827 | /* VC Container background */ 1828 | .wrapper_e131a9 { 1829 | background: var(--background-primary); 1830 | border-radius: 8px; 1831 | } 1832 | 1833 | /* Fix clamping issue on the new profile popout */ 1834 | .descriptionClamp_f5f93a { 1835 | display: contents; 1836 | } 1837 | 1838 | /* Chat area fix */ 1839 | 1840 | /* Move the attachment action bar */ 1841 | .wrapper_f7ecac { 1842 | border-radius: 8px; 1843 | right: 8px; 1844 | top: 16px; 1845 | } 1846 | 1847 | .uploadContainer_aa605f { 1848 | align-items: center; 1849 | } 1850 | 1851 | /* Reactions styling */ 1852 | .reaction__23977 { 1853 | background: var(--background-modifier-accent); 1854 | border: none; 1855 | 1856 | &:hover { 1857 | background: var(--background-modifier-hover); 1858 | } 1859 | } 1860 | 1861 | /* Buttons restyle */ 1862 | .button__7ba6e { 1863 | border: none; 1864 | border-radius: 8px; 1865 | background: var(--background-modifier-accent); 1866 | 1867 | &:hover { 1868 | background: var(--background-modifier-hover); 1869 | } 1870 | } 1871 | 1872 | /* Fix avatar decoration position */ 1873 | .avatarDecoration_c19a55 { 1874 | top: 0; 1875 | } 1876 | 1877 | .message__5126c.hasReply_c19a55 .avatarDecoration_c19a55 { 1878 | top: 24px; 1879 | } 1880 | 1881 | /* NEW PROFILE */ 1882 | /* Profile popouts */ 1883 | 1884 | /* Limit user popout height */ 1885 | .userPopoutInner_c69a7b { 1886 | max-height: 500px; 1887 | } 1888 | 1889 | /* Center name */ 1890 | .usernameRow__63ed3 { 1891 | margin-top: 9px; 1892 | margin-bottom: 6px; 1893 | } 1894 | 1895 | /* Badges */ 1896 | .container__8061a, 1897 | .pronounsTooltip__63ed3 > div, 1898 | .userTagUsername__63ed3 { 1899 | border: none; 1900 | background: var(--background-floating); 1901 | padding: 2px 4px; 1902 | border-radius: 4px; 1903 | font-weight: 600; 1904 | } 1905 | 1906 | .custom-profile-theme 1907 | :is( 1908 | .container__8061a, 1909 | .pronounsTooltip__63ed3 > div, 1910 | .userTagUsername__63ed3 1911 | ) { 1912 | background: color-mix(in srgb, var(--profile-gradient-primary-color) 50%, transparent); 1913 | } 1914 | 1915 | /* Remove the dot spacers in elements */ 1916 | .dotSpacer__63ed3, 1917 | .spacer__530ce { 1918 | display: none; 1919 | } 1920 | 1921 | /* Note icon appears permanently */ 1922 | :where(.button_fb7f94).hover_fb7f94 { 1923 | opacity: 1; 1924 | } 1925 | 1926 | /* Popout body */ 1927 | .userPopoutInner_c69a7b > .body__5be3e { 1928 | background: var(--background-modifier-accent); 1929 | margin: 12px; 1930 | padding-bottom: 12px; 1931 | border-radius: 6px; 1932 | } 1933 | 1934 | .custom-profile-theme .userPopoutInner_c69a7b > .body__5be3e { 1935 | background: var(--profile-body-background-color); 1936 | } 1937 | 1938 | /* Send message container */ 1939 | .footer__5be3e { 1940 | margin-top: -6px; 1941 | padding: 0 12px 6px; 1942 | } 1943 | 1944 | .custom-profile-theme .inner_a99829 { 1945 | background: var(--profile-body-background-color); 1946 | } 1947 | 1948 | /* Match Status Bubble color with Profile Primary Color */ 1949 | .custom-profile-theme [class^="statusBubble_"] { 1950 | background-color: var(--profile-gradient-primary-color); 1951 | } 1952 | 1953 | .custom-profile-theme [class^="statusBubbleOuter_"] { 1954 | --border-faint: var(--profile-gradient-secondary-color); 1955 | 1956 | &::before { 1957 | background-color: var(--profile-gradient-primary-color); 1958 | } 1959 | 1960 | &::after { 1961 | background-color: var(--profile-gradient-primary-color); 1962 | } 1963 | } 1964 | 1965 | /* Edit profile button */ 1966 | .custom-profile-theme .color_f9d37d { 1967 | background: var(--profile-body-background-color); 1968 | color: var(--header-primary); 1969 | border-radius: 6px; 1970 | 1971 | &:hover { 1972 | background: color-mix( 1973 | in srgb, 1974 | var(--profile-gradient-secondary-color) 50%, 1975 | transparent 1976 | ); 1977 | } 1978 | } 1979 | 1980 | .descriptionClamp_f5f93a > .markup__75297 { 1981 | background: color-mix(in srgb, var(--profile-gradient-primary-color) 50%, transparent); 1982 | padding: 6px; 1983 | border-radius: 6px; 1984 | } 1985 | 1986 | /* Divider for days and unread messages */ 1987 | .divider__908e2 { 1988 | border-top-color: var(--modular-red); 1989 | } 1990 | 1991 | /* Hide clipping of the text toolboxes */ 1992 | .buttonContainer_c19a55 .inner_a3b500 { 1993 | overflow: hidden; 1994 | } 1995 | 1996 | /* Streamline all menus */ 1997 | .menu_c1e9c4, 1998 | .item_c1e9c4 { 1999 | border-radius: 6px; 2000 | } 2001 | 2002 | /* Restyle search bar */ 2003 | .searchBar__97492 { 2004 | background: var(--background-floating); 2005 | border-radius: 6px; 2006 | } 2007 | 2008 | /* Fix channel categories */ 2009 | .wrapperCommon__29444 { 2010 | margin: 0 0 4px 8px; 2011 | padding: 0; 2012 | background: var(--background-modifier-accent); 2013 | border-radius: 4px; 2014 | text-align: center; 2015 | } 2016 | 2017 | /* Fix channel list arrow */ 2018 | .icon__29444 { 2019 | top: 4px; 2020 | width: 16px; 2021 | height: 16px; 2022 | } 2023 | 2024 | .childWrapperNoHoverBg__6e9f8 /* Favorites button */, 2025 | .circleIconButton__5bc7e /* Add server and discover button */ { 2026 | background: var(--background-modifier-accent); 2027 | } 2028 | 2029 | /* New channel app launcher button */ 2030 | .channelAppLauncher_e6e74f button { 2031 | background: var(--background-primary); 2032 | } 2033 | 2034 | /* Members list */ 2035 | .membersGroup_c8ffbb { 2036 | margin: 8px 0px 8px 8px; 2037 | height: 24px; 2038 | padding: 4px; 2039 | background: var(--background-modifier-accent); 2040 | border-radius: 4px; 2041 | text-align: center; 2042 | } 2043 | 2044 | /* Activity tab at the top of members list */ 2045 | .header__095fe { 2046 | position: relative; 2047 | left: 4px; 2048 | } 2049 | 2050 | /* Fix threads orientation */ 2051 | .chatLayerWrapper__01ae2 { 2052 | flex-direction: row-reverse; 2053 | } 2054 | 2055 | /* Nitro store */ 2056 | .applicationStore_f07d62 { 2057 | margin: 4px; 2058 | border-radius: 8px; 2059 | } 2060 | 2061 | /* v2.1.2 fixes */ 2062 | /* Server discovery footer */ 2063 | .footer__214dc { 2064 | background: none; 2065 | } 2066 | 2067 | /* Removing elements */ 2068 | /* Bottom gradient (server discovery) */ 2069 | .gradient_f8ec41 { 2070 | display: none; 2071 | } 2072 | 2073 | /* Fix new messages bar */ 2074 | .newMessagesBar__0f481 { 2075 | height: 32px; 2076 | margin-top: 8px; 2077 | border-radius: 4px; 2078 | background: var(--brand-700) !important; 2079 | justify-self: center; 2080 | align-self: center; 2081 | } 2082 | 2083 | /* Reactions */ 2084 | .container_cc2dff { 2085 | border-radius: 8px; 2086 | } 2087 | 2088 | .theme-dark .reactorDefault_cc2dff { 2089 | box-shadow: none; 2090 | } 2091 | 2092 | .reactor_cc2dff { 2093 | height: 40px; 2094 | background: var(--background-secondary); 2095 | margin: 8px; 2096 | border-radius: 8px; 2097 | padding-left: 8px; 2098 | } 2099 | 2100 | /* DM panel */ 2101 | .outer_c0bea0 { 2102 | border-radius: 8px; 2103 | margin: 4px; 2104 | max-height: calc(100% - 8px); 2105 | 2106 | & > .inner_c0bea0 { 2107 | border-radius: 8px; 2108 | } 2109 | } 2110 | 2111 | /* Place search bar separate from other elements in the toolbar */ 2112 | .search__49676 { 2113 | order: -1; 2114 | } 2115 | 2116 | /* Prevent channel name from overlapping with arrow */ 2117 | .mainContent__29444 { 2118 | margin-left: 20px; 2119 | } 2120 | 2121 | /* Fixing role pills */ 2122 | .role_dfa8b6.pill_dfa8b6 { 2123 | padding: 4px 0; 2124 | border: none; 2125 | border-radius: 6px; 2126 | 2127 | & .roleName_dfa8b6 { 2128 | padding: 6px; 2129 | margin-left: -6px; 2130 | } 2131 | } 2132 | 2133 | /* Fix embeds to only fit video box */ 2134 | .container_b7e1cb:has(.embedWrapper_b7e1cb) { 2135 | max-width: fit-content; 2136 | } 2137 | 2138 | /* Hide stuff on user popout selections */ 2139 | .accountProfilePopoutWrapper__37e49 { 2140 | & .outer_c0bea0 { 2141 | max-width: 80%; 2142 | } 2143 | 2144 | & .inner_c0bea0 { 2145 | background: var(--background-primary); 2146 | 2147 | & .header__5be3e { 2148 | display: none; 2149 | } 2150 | 2151 | & > .body_af7fb7 { 2152 | padding: 4px !important; 2153 | 2154 | & > *:not(.menus_af7fb7) { 2155 | display: none; 2156 | } 2157 | 2158 | & > .menus_af7fb7 { 2159 | margin: 4px -4px 4px 4px; 2160 | gap: 8px; 2161 | 2162 | & > .menuOverlay_af7fb7:nth-child(1) > div > *:not(:nth-child(1)) { 2163 | display: none; 2164 | } 2165 | } 2166 | } 2167 | } 2168 | } 2169 | 2170 | /* Fix the chat bar jumping up bug */ 2171 | .channelTextArea_f75fb0, 2172 | .channelAppLauncher_e6e74f { 2173 | margin-bottom: 0; 2174 | } 2175 | 2176 | /* Blocked messages */ 2177 | .blockedSystemMessage__7a70a { 2178 | background: color-mix(in srgb, var(--chat-bubble-automod) 25%, transparent); 2179 | margin: 0; 2180 | padding: 8px; 2181 | border-radius: 8px; 2182 | max-width: var(--modular-cb-width, max-content); 2183 | min-width: var(--modular-cb-width, max-content); 2184 | 2185 | & .blockedIcon__7a70a { 2186 | background: color-mix(in srgb, var(--chat-bubble-automod) 25%, transparent); 2187 | position: relative; 2188 | padding: 6px; 2189 | top: -8px; 2190 | border-radius: 50%; 2191 | } 2192 | } 2193 | 2194 | /* Stage container */ 2195 | .container__722ff { 2196 | margin: 4px; 2197 | padding: 8px; 2198 | border-radius: 8px; 2199 | max-height: calc(100% - 24px); 2200 | max-width: calc(100% - 24px); 2201 | } 2202 | 2203 | /* Call container */ 2204 | .callContainer_cb9592 { 2205 | border-radius: 8px !important; 2206 | background: var(--background-secondary); 2207 | } 2208 | 2209 | /* Call toolbar */ 2210 | .container__9293f { 2211 | display: flex; 2212 | background: var(--background-primary) !important; 2213 | max-width: calc(100% - 8px); 2214 | margin: 4px; 2215 | border-radius: 8px; 2216 | } 2217 | 2218 | /* Call chat container */ 2219 | .channelChatWrapper_cb9592 { 2220 | margin: 8px; 2221 | padding: 8px; 2222 | border-radius: 8px; 2223 | } 2224 | 2225 | .container__01ae2 { 2226 | background: var(--background-secondary); 2227 | border-radius: 8px; 2228 | margin: 12px; 2229 | padding: 12px; 2230 | } --------------------------------------------------------------------------------