├── Glasscord-Files ├── glasscord(asar).md ├── glasscord-installation.md └── index.js ├── LICENSE ├── README.md ├── powercord_manifest.json ├── quarrel-config.css ├── splash.css └── support └── betterdiscord └── quarrel.theme.css /Glasscord-Files/glasscord(asar).md: -------------------------------------------------------------------------------- 1 | https://github.com/AryToNeX/Glasscord/releases/download/v1.0.1/glasscord.asar 2 | -------------------------------------------------------------------------------- /Glasscord-Files/glasscord-installation.md: -------------------------------------------------------------------------------- 1 | [PCNAME] Being your PC NAME. 2 | 3 | [app-1.0.32] May change in the future, if so use the highest numbered folder. 4 | 5 | ## How To Install (Windows) 6 | **Step 1:** 7 | 8 | > Move glasscord.asar to C:\Users\[PCNAME]\AppData\Local\DiscordCanary\app-1.0.32\resources\app. 9 | 10 | **Step 2:** 11 | 12 | > Open The index.js in C:\Users\[PCNAME]\AppData\Local\DiscordCanary\app-1.0.32\resources\app. 13 | 14 | > "require('C:/Users/[PCNAME]/AppData/Local/DiscordCanary/app-1.0.32/resources/app/glasscord.asar')" - Change [PCNAME] To your name in this line. 15 | 16 | > CTRL+S Or Save The File 17 | 18 | **Step 3:** 19 | 20 | > Restart DiscordCanary Trough Task Manager/Tray. 21 | 22 | > Configure in slook.theme.css 23 | *If it doesn't turn Transparent restart your Discord Client again.* 24 | 25 | -- Any Issues Send a DM To Leeprky#2063 26 | -------------------------------------------------------------------------------- /Glasscord-Files/index.js: -------------------------------------------------------------------------------- 1 | /* EXAMPLE */ 2 | 3 | require(`C:/Users/[PCNAME]/powercord/injectors/../src/patcher.js`) 4 | require('C:/Users/[PCNAME]/AppData/Local/DiscordCanary/app-1.0.32/resources/app/glasscord.asar') 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 leeprky 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 | # Quarrel (v1.6) 2 | A Themed Based Of The Quarrel Client In The Windows Store 3 | 4 | ![preview](https://i.imgur.com/Qhh2RnU.jpg) 5 | 6 | ## How To Install Quarrel? 7 | 8 | Its Simple! 9 | 10 | For **Powercord** Users: 11 | 12 | 1. Open CMD & Type: 13 | 14 | ``` 15 | cd powercord/src/Powercord/themes && git clone https://github.com/leeprky/Quarrel 16 | ``` 17 | 18 | For **Betterdiscord** Users: 19 | 20 | THIS IS ALWAYS THE LATEST VERSION: 21 | https://raw.githubusercontent.com/leeprky/Quarrel/main/support/betterdiscord/quarrel.theme.css 22 | > right click > save as > place in themes folder 23 | 24 | NO LONGER AVAILBLE ON BETTER DISCORDS SITE 25 | 26 | 2. Download Raw 27 | 28 | # Extras 29 | 30 | Thank you for checking out/downloading my Theme :) 31 | Direct Message Me On @Discord Or Join By **[github.com/leeprky](https://discord.gg/Ff3rqAYB89)** For More Help/Information For Installing/Support. Enjoy :) 32 | 33 | 34 | Compared To Original 35 | ![preview](https://i.imgur.com/A8h0SjQ.png) 36 | -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Quarrel", 3 | "description": "Based Off The Quarral Client In The Windows Store/XBOX App", 4 | "version": "1.6", 5 | "author": "Leeprky#2063", 6 | "license": "MIT", 7 | "theme": "quarrel-config.css", 8 | "splashTheme": "splash.css", 9 | "consent": "true", 10 | "preview": ["https://camo.githubusercontent.com/f65b3dfef1529b172f324d59223aace8bd5b24fbbc3120c265db848224ab53c8/68747470733a2f2f692e696d6775722e636f6d2f51686832526e552e6a7067"], 11 | "discord": "Ff3rqAYB89" 12 | } 13 | -------------------------------------------------------------------------------- /quarrel-config.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------ 2 | Quarrel Theme (Powercord) 3 | v1.6 4 | - leeprky#2063 - 5 | ------------------------------------------ */ 6 | 7 | /* Rebrand */ 8 | @import url(https://leeprky.github.io/themes/quarrel/rebrand-quarrel.css); 9 | 10 | /* Source */ 11 | @import url(https://leeprky.github.io/themes/quarrel/quarrel.css); 12 | @import url(https://leeprky.github.io/snippits/coolsniipitsforthemes.css); 13 | 14 | /* Extras */ 15 | @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css); 16 | @import url(https://ghostmander.github.io/discordfont/DiscordFont.css); 17 | @import url(https://raw.githack.com/mr-miner1/Better-Badges/main/theme.css); 18 | :root {--version: "v1.6PC" !important; --build: "176" !important; --outdated_quarrel-176: none !important} 19 | 20 | :root {--im-aware: none !important} /* Turn To "block to enable */ 21 | 22 | /* ---------------------------- 23 | GLASSCORD SUPPORT 24 | ---------------------------- */ 25 | /* 26 | :root{ 27 | --glasscord-win-blur: blurbehind; 28 | --glasscord-macos-vibrancy: fullscreen-ui; 29 | --glasscord-linux-blur: true; 30 | --glasscord-titlebar: default; 31 | } 32 | body{ 33 | background-color: transparent; 34 | } 35 | #app-mount{ 36 | background-color: rgba(2, 2, 2, 0.596); 37 | border-radius: 10px 10px 10px 10px; 38 | border-color: transparent; 39 | } 40 | #app-mount .guilds-1SWlCJ .scrollerBase-289Jih { 41 | background: #1b1c22c7; 42 | } 43 | .theme-dark { 44 | --background-primary: #191a22e8 !important; 45 | --background-primary-alt: #191a22e8!important; 46 | --background-secondary: #1d1f2b6c !important; 47 | --background-secondary-alt: #1d1f2b6c !important; 48 | --background-tertiary: #1d1f2b00 !important; 49 | --background-accent: #2f6cce !important; 50 | --background-floating: #191c27e5 !important; 51 | --bar-background-primary: #24263181 !important; 52 | --serverlist-background: var(--background-tertiary) !important; 53 | --memberlist-background: #1e202700 !important; 54 | }; 55 | 56 | .platform-osx .container-1r6BKw { 57 | -webkit-app-region: none; 58 | } 59 | 60 | /* ---------------------------- 61 | GLASSCORD SUPPORT END 62 | ---------------------------- */ 63 | 64 | /* Background Image */ 65 | 66 | :root { 67 | --background: url('https://i.imgur.com/6NUSR9H.png'); 68 | --background-blur: 8px; 69 | --background-opacity: 100%; 70 | --background-brightness: 92%; 71 | --background-colour: #191a1f80; 72 | --bar-background-primary: #191a1fa2 !important; 73 | --background-primary: transparent !important; 74 | --background-primary-alt: #2d355783 !important; 75 | --background-secondary: transparent !important; 76 | --background-secondary-alt: #232942fa !important; 77 | --background-tertiary: var(--background-colour) !important; 78 | } 79 | 80 | /* ------------------------------------------ 81 | Quarral Configuration 82 | v1.5 83 | - leeprky#2063 - 84 | ------------------------------------------ */ 85 | 86 | /* BLAH BLAH BLAH | SOMETIMES MORE INFO - DEFAULT VALUE */ 87 | 88 | /* HOW TO EDIT THIS THEME 89 | I RECOMMEND USING A PROGRAM LIKE VISUAL STUDIO CODE INSTEAD OF NOTEPAD 90 | */ 91 | 92 | /* Win Bar Colours On Hover */ 93 | .titleBar-AC4pGV > *:nth-child(2):hover {background-color: #c05648;} /* Windows Titlebar Close Colour - #c05648 */ 94 | .titleBar-AC4pGV > *:nth-child(3):hover {background-color: #cca32a;} /* Windows Titlebar Maximise Colour - #cca32a */ 95 | .titleBar-AC4pGV > *:nth-child(4):hover {background-color: #24bb24;} /* Windows Titlebar Minimise Colour - #24bb24 */ 96 | .titleBar-AC4pGV > *:nth-child(2) {transition: 0.5s;} /* Windows Titlebar Close Colour Transition- 0.5s */ 97 | .titleBar-AC4pGV > *:nth-child(3) {transition: 0.5s;} /* Windows Titlebar Maximise Colour Transition- 0.5s */ 98 | .titleBar-AC4pGV > *:nth-child(4) {transition: 0.5s;} /* Windows Titlebar Minimise Colour Transition- 0.5s */ 99 | 100 | /* Status */ 101 | :root { 102 | --rs-small-spacing: 0px; /* Spacing between avatar and status | MUST end in px */ 103 | --rs-large-spacing: 0px; /* Spacing between avatar and status for user popouts & modals/profiles | MUST end in px */ 104 | --rs-width: 2px; /* Width/thickness of status border */ 105 | --rs-avatar-shape: 50%; /* 50% for round - 0% for square */ 106 | --rs-online-color: #1df594; /* Colour for online status */ 107 | --rs-idle-color: #faa61a; /* Colour for idle status */ 108 | --rs-dnd-color: #f04747; /* Colour for dnd status */ 109 | --rs-offline-color: #636b75; /* Colour for offline status */ 110 | --rs-streaming-color: #643da7; /* Colour for streaming status */ 111 | --rs-invisible-color: #747f8d; /* Colour for invisible status - Note: this will only show for your own invisibility */ 112 | --rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */ 113 | --rs-phone-color: var(--rs-online-color); /* Colour of the ring and phone icon when a user is on their phone | */ 114 | 115 | --glow-online: "Online"; 116 | --glow-idle: "Idle"; 117 | --glow-streaming: "Streaming"; 118 | 119 | /* None Or Flex */ 120 | --status-glow: flex !important; 121 | 122 | /* Gradients */ 123 | --default-gradient: 315deg, #1b5eb6 0%, #205aa5 74%; 124 | --special-gradient: 315deg, #8980F0 0%, #D577F0 74%; 125 | --red-gradient: 315deg, #AA3738 0%, #F04747 74%; 126 | --yellow-gradient: 315deg, #c29b1b 0%, #ffa640 74%; 127 | --green-gradient: 315deg, #1b5eb6 0%, #205aa5 74%; 128 | --grey-gradient: 315deg, #40414627 0%, #484c4e59 74%; 129 | --white-gradient: 315deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 74%; 130 | /* Transitions */ 131 | --font-normal: 500; 132 | --font-hover: bold; 133 | --font-size-hover: 15px; 134 | --hover-transition: 0.1s linear; 135 | --transform-normal: scale(1); 136 | --hover-transform: scale(1.15); 137 | --setting-hover-transform: scale(1.025); 138 | --button-hover-transform: scale(1.03); 139 | 140 | /* Greenple */ 141 | --green-color: var(--alt-color2); 142 | --green-bar-on: var(--green-color); 143 | --green-bar-bg: #151925; 144 | --green-slider-on: var(--green-color); 145 | --green-slider-off: #5c646480; 146 | --green-slider-dot: #fff; 147 | } 148 | 149 | /* Quarrel Dark */ 150 | .theme-dark { 151 | 152 | /* Quarrel */ 153 | 154 | --titlebar-top: 5px; /* WinBar Height - 5px */ 155 | --icon-top: 0.8px; /* Logo Top Left Height - 0.8px */ 156 | --watermark-top: 5.5px; /* Text Top Left Height - 5.5px */ 157 | --watermark-text: "Quarrel"; /* Watermark Text - Quarrel */ 158 | --icon-img: url("https://i.imgur.com/BlVTpku.png"); /* ICON URL - https://i.imgur.com/BlVTpku.png */ 159 | 160 | --alt-color: 27, 94, 182; /* Discords Blurple Global | RGB - 27, 94, 182 */ 161 | --alt-color2: #1b5eb6; /* Discords Blurple Global | HEX - #1b5eb6 */ 162 | --alt-color3: 214; /* HSL */ 163 | /* Change Both Alts To Same Alternate Version As They Do Different Things Just Different Ways */ 164 | 165 | --scrollbars: none; /* Remove None For Scrollbars - none */ 166 | --bar-background-primary: #1b1c22 !important; /* Bottom Bar Colour - #1b1c22 */ 167 | --home-icon: url(https://i.imgur.com/Bda0DuK.png); /* Friends Home Icon - https://i.imgur.com/Bda0DuK.png */ 168 | 169 | --playing-color: var(--alt-color2); /* Dont Work In New Discord Modal Update */ 170 | --spotify-color: rgb(40, 182, 51); /* Dont Work In New Discord Modal Update */ 171 | --streaming-color: rgb(127, 50, 179); /* Dont Work In New Discord Modal Update */ 172 | 173 | /* Keeping Consistancy With Discord */ 174 | --serverlist-background: var(--background-tertiary) !important; /* Server List BG - var(--background-tertiary) */ 175 | --memberlist-background: #1e202700 !important; /* Member List BG - #1e202700 */ 176 | --popout-width: 480px; /* Popout Modal Width, None For Dynamic Width - 480 */ 177 | --modal-bg: rgb(19, 20, 24); /* Popout Modal Colour - rgb(19, 20, 24) */ 178 | 179 | /* Header Colors */ 180 | --header-primary: #fff; /* Main Header Colour - #fff */ 181 | --header-secondary: #b9bbbe; /* Secondary Header Colour - #b9bbbe */ 182 | --channels-headings: var(--alt-color2); /* Headers For Channels/Role Names Colour - var(--alt-color2) */ 183 | 184 | /* Text Colours */ 185 | --text-normal: #dcddde; /* Chat Text - #dcddde */ 186 | --text-muted: #72767d; /* Channel Icon Colour - #72767d */ 187 | --text-link: var(--alt-color2); /* Text Link Globally - var(--alt-color2); */ 188 | --channels-default: #8e9297; /* Default Channel Names Colour - #8e9297 */ 189 | --interactive-normal: #b9bbbe; /* Interactive Buttons Normal Colour - #b9bbbe */ 190 | --interactive-hover: #dcddde; /* Interactive Buttons Hover Colour - #dcddde */ 191 | --interactive-hover-icons: var(--alt-color2); /* Interactive Buttons Hover Colour - var(--alt-color2);*/ 192 | --interactive-active: #fff; /* Interactive Buttons Active Colour - #fff */ 193 | --interactive-active-icons: var(--alt-color2); /* Interactive Buttons Icon Colour - var(--alt-color2); */ 194 | --interactive-muted: #4f545c; /* Interactive Buttons Muted Colour - #4f545c */ 195 | 196 | /* Chat */ 197 | --channeltextarea-background: var(--bar-background-primary); /* TextBox Background */ 198 | --channeltextarea-background-hover: var(--bar-background-primary); /* TextBox Background Hover */ 199 | 200 | /* Background Colours */ 201 | --background-primary: #191a1f; /* Main Background Colour, Chat Etc - #191a1fc2 */ 202 | --background-primary-alt: #18181b; /* Main Alternative Background Colour - #18181b */ 203 | --background-secondary: #191a1f; /* Secondary Background Colour, Channelist, TopBar Etc - #1b1c224f */ 204 | --background-secondary-alt: #191a1f; /* Secondary Alternative Background Colour - #1b1c228a */ 205 | --background-tertiary: #191b2286; /* Tertiary Background Colour | #App Mount Colour Etc - #191b2277 */ 206 | --background-accent: var(--alt-color2); /* Accent Background Colour, Pills Etc - var(--alt-color2) */ 207 | --background-floating: #18191c; /* Floating Modals Background Colour, Clickable Stuff Etc -#18191c */ 208 | 209 | /* Mentioned Colours */ 210 | --background-mentioned: rgba(26, 60, 250, 0.123); /* Chat Mentioned BG - rgba(26, 60, 250, 0.123) */ 211 | --background-mentioned-hover: rgba(41, 26, 250, 0.08); /* Chat Mentioned Hover BG - rgba(41, 26, 250, 0.08) */ 212 | --background-mentioned-bar: var(--background-accent); /* Chat Mentioned Bar BG - var(--background-accent) */ 213 | 214 | --background-help-warning: rgba(250,166,26,0.1); /* IDK | Rebrand Stuff - rgba(250,166,26,0.1) */ 215 | --background-help-info: rgba(0,176,244,0.1); /* IDK | Rebrand Stuff - rgba(0,176,244,0.1) */ 216 | 217 | /* Scrollbar Colours */ 218 | --background-modifier-hover: rgba(53, 89, 148, 0.16); /* Hovering Over Buttons Hover Colour - rgba(79,84,92,0.16) */ 219 | --background-modifier-active: rgba(50, 89, 151, 0.24); /* Hovering Over Buttons Active Colour - rgba(79,84,92,0.16) */ 220 | --background-modifier-selected: rgba(46, 93, 170, 0.32); /* Hovering Over Buttons Selected Colour - rgba(79,84,92,0.16) */ 221 | --background-modifier-accent: rgba(46, 94, 133, 0.06); /* Hovering Over Buttons Accent Colour - rgba(79,84,92,0.16) */ 222 | 223 | /* Box Shadow On Floating Elements Colours */ 224 | --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15); /* Box Shadow On Floating Elements Stroke - 0 0 0 1px rgba(4,4,5,0.15) */ 225 | --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05); /* Box Shadow On Floating Elements Low - 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05) */ 226 | --elevation-medium: 0 4px 4px rgba(0,0,0,0.16); /* Box Shadow On Floating Elements Medium - 0 4px 4px rgba(0,0,0,0.16) */ 227 | --elevation-high: 0 8px 16px rgba(0,0,0,0.24); /* Box Shadow On Floating Elements High - 0 8px 16px rgba(0,0,0,0.24) */ 228 | 229 | --scrollbar-thin-thumb: #eaedf100; /* Scrollbar Thin Blob - eaedf100 */ 230 | --scrollbar-thin-track: transparent; /* Scrollbar Thin Blob Track - transparent */ 231 | --scrollbar-auto-thumb: #e5e9ee; /* Scrollbar Large Blob - #e5e9ee */ 232 | --scrollbar-auto-track: #ebeef100; /* Scrollbar Large Blob Track - #ebeef100 */ 233 | --scrollbar-auto-scrollbar-color-thumb: #f0f3f8; /* Scrollbar Large Blob - #f0f3f8 */ 234 | --scrollbar-auto-scrollbar-color-track: #2f313600; /* Scrollbar Large Blob Track - #2f313600 */ 235 | 236 | /* Other */ 237 | --radio-group-dot-foreground: var(--alt-color); /* Ignore */ 238 | } 239 | 240 | /* Quarrel Light */ 241 | .theme-light { 242 | 243 | /* Quarrel */ 244 | 245 | --titlebar-top: 4px; 246 | --icon-top: 0.5px; 247 | --watermark-top: 5.5px; 248 | --watermark-text: "Quarrel"; 249 | --icon-img: url("https://i.imgur.com/BlVTpku.png"); 250 | 251 | --alt-color: 43, 120, 199; /* RGB */ 252 | --alt-color2: #2e5a94; /* HEX */ 253 | 254 | --scrollbars: none; /* none or unset */ 255 | --bar-background-primary: #c3c6d3 !important; 256 | --home-icon: url(https://i.imgur.com/Bda0DuK.png); 257 | 258 | --playing-color: var(--alt-color2); 259 | --spotify-color: var(--alt-color2); 260 | --streaming-color: rgb(127, 50, 179); 261 | 262 | /* Keeping Consistancy With Discord */ 263 | --serverlist-background: var(--background-tertiary) !important; 264 | --memberlist-background: #1e202700 !important; 265 | --win-titlebar: var(--background-tertiary); 266 | --popout-width: 480px; /* Change To 480px For Static Modal Popout */ 267 | 268 | /* Header Colors */ 269 | --header-primary: rgb(7, 7, 7); 270 | --header-secondary: #232324; 271 | --channels-headings: var(--alt-color2); 272 | --modal-bg: rgb(184, 188, 204); 273 | 274 | /* Text Colours */ 275 | --text-normal: #0f0f0f; 276 | --text-muted: #3362b4; 277 | --text-link: var(--alt-color2); 278 | --channels-default: #282829; 279 | --interactive-normal: #272829; 280 | --interactive-hover: #050505; 281 | --interactive-hover-icons: var(--alt-color2); 282 | --interactive-active: rgb(7, 7, 7); 283 | --interactive-active-icons: var(--alt-color2); 284 | --interactive-muted: #4f545c; 285 | 286 | /* Chat */ 287 | --channeltextarea-background: var(--bar-background-primary); 288 | --channeltextarea-background-hover: var(--bar-background-primary); 289 | 290 | /* Background Colours */ 291 | --background-primary: #c3c6d3c2 !important; 292 | --background-primary-alt: #c3c6d3c2 !important; 293 | --background-secondary: #aaaec94f !important; 294 | --background-secondary-alt: #aaaec94f !important; 295 | --background-tertiary: #a5abc077 !important; 296 | --background-accent: #2f6cce !important; 297 | --background-floating: #c5ccdf !important; 298 | 299 | /* Mentioned Colours */ 300 | --background-mentioned: rgba(16, 41, 179, 0.342); 301 | --background-mentioned-hover: rgba(41, 26, 250, 0.253); 302 | --background-mentioned-bar: rgba(41, 26, 250, 0.856); 303 | 304 | --background-help-warning: rgba(250,166,26,0.1); 305 | --background-help-info: rgba(0,176,244,0.1); 306 | 307 | /* Scrollbar Colours */ 308 | --background-modifier-hover: rgba(57, 118, 214, 0.16); 309 | --background-modifier-active: rgba(28, 77, 155, 0.24); 310 | --background-modifier-selected: rgba(15, 101, 238, 0.32); 311 | --background-modifier-accent: rgba(45, 62, 219, 0.06); 312 | --scrollbar-auto-scrollbar-color-thumb: rgba(79,84,92,0.16); 313 | 314 | /* Box Shadow On Floating Elements Colours */ 315 | --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15); 316 | --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05); 317 | --elevation-medium: 0 4px 4px rgba(0,0,0,0.16); 318 | --elevation-high: 0 8px 16px rgba(0,0,0,0.24); 319 | 320 | --scrollbar-thin-thumb: #eaedf100; 321 | --scrollbar-thin-track: transparent; 322 | --scrollbar-auto-thumb: #e5e9ee; 323 | --scrollbar-auto-track: #ebeef100; 324 | --scrollbar-auto-scrollbar-color-thumb: #f0f3f8; 325 | --scrollbar-auto-scrollbar-color-track: #2f313600; 326 | 327 | /* Other */ 328 | --radio-group-dot-foreground: var(--alt-color); 329 | } 330 | 331 | /* ---------------------------------------------------- 332 | Optional Features 333 | Add A "/*" On The Lines Below The Comments 334 | To Disable Them 335 | ---------------------------------------------------- */ 336 | 337 | /* Status Bar */ 338 | /* - remove 339 | .full-motion .scale-3iLZhb.didRender-33z1u8{-webkit-transition:opacity .12s ease-out,-webkit-transform .12s ease-out;transition:opacity .12s ease-out,-webkit-transform .12s ease-out;transition:transform .12s ease-in-out,opacity .12s ease-out;transition:transform .12s ease-out,opacity .12s ease-out,-webkit-transform .12s ease-out;-webkit-transform:scale(1);transform:scale(1);opacity:1} 340 | .status-1fhblQ,.description-2L932D{display:none} 341 | .separator-2I32lJ{display:none} 342 | .mask-1qbNWk.icon-1IxfJ2{--status-icon-size:105%;height:var(--status-icon-size);width:var(--status-icon-size);stroke-width:59!important;transform:scale(1.1,1.1)} 343 | .animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8 > .menu-3sdvDG.styleFixed-sX-yHV > .scroller-3BxosC.thin-1ybCId.scrollerBase-289Jih{display:grid;align-items:center;grid-template-columns:auto auto auto auto;visibility:visible} 344 | .item-1tOPte.colorDefault-2K3EoJ:nth-of-type(7){grid-column:1/5} 345 | .animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8{transition:opacity .15s linear 0} 346 | .customText-tY5LJn{font-size:15px} 347 | .statusItem-33LqPf[aria-label="Set a custom status"]{display:none;} 348 | .statusItem-33LqPf[aria-label="Show Game Activity"]{display:none;} 349 | .menu-3sdvDG{background-color:#03000567;border-radius:12px} 350 | div[class*=colorDefault-].focused-3afm-j,div[class*=colorDefault-].focused-3afm-j:active,div[class*=colorDefault-]:active:not(.hideInteraction-1iHO1O){background-color:transparent!important;color:#fff!important} 351 | .colorDefault-2K3EoJ{margin-left:5px} 352 | @keyframes smooth-up1 {0%{top:10px} 25%{top:0} 50%{top:0} 75%{top:0} 100%{top:0}} 353 | .statusItem-33LqPf,#app-mount #status-picker{position:relative;margin-left:-3px;margin-bottom:-4px;animation-name:smooth-up1;animation-duration:4s} 354 | .mask-1qbNWk.icon-1IxfJ2 {border-radius: 50% !important;} 355 | .statusItem-33LqPf foreignObject { mask: none} 356 | 357 | /* Background Image */ 358 | 359 | :root { 360 | --background:url('https://i.gifer.com/3ZTz.gif'); 361 | --chat-blur: 10px; 362 | --chat-transp:0.80; 363 | --sides-transp: 0.80; 364 | --sides-blur: 10px; 365 | } 366 | 367 | #app-mount .container-1D34oG,.app-2rEoOp,.bg-h5JY_x,.chat-3bRxxu,.content-1o0f9g, .contentRegionScroller-26nc1e,.layer-3QrUeG,.members-1998pB>div,.scroller-1JbKMe,.applicationStore-1pNvnv,.scroller-305q3I,.sidebar-2K8pFh,.standardSidebarView-3F1I7i,.wrapper-1F5TKx,.wrapper-3NnKdC,.wrapper-3vR61M,body{background:0 0}.container-3w7J-x,.members-1998pB,.nowPlayingColumn-2sl4cE,.privateChannels-1nO12o,.sidebar-2K8pFh>.scrollerBase-289Jih,#app-mount .sidebar-2K8pFh::before, .sidebarRegionScroller-3MXcoP{background:rgba(47,49,54,var(--sides-transp))}.panels-j1Uci_ {background:rgba(41,43,47,var(--sides-transp))}.scroller-1Bvpku,.withFrame-haYltI, .nowPlayingColumn-2sl4cE{background:rgba(32,34,37,var(--sides-transp))}.scroller-9moviB,#app-mount .pageWrapper-1PgVDX,.chatContent-a9vAAp,.contentRegion-3nDuYy,.header-2mZ9Ov::after,.peopleColumn-29fq28,.stickyHeader-hH_ZLl::after,.titleContainer-2CXtJo::after{background:rgba(54,57,63,var(--chat-transp))}.container-1r6BKw.themed-ANHk51, .container-lRFx4q{background:rgba(54,57,63,var(--sides-transp))}.container-1r6BKw.themed-ANHk51,.members-1998pB,.nowPlayingColumn-2sl4cE,.scroller-1Bvpku,.sidebar-2K8pFh,.sidebarRegionScroller-3MXcoP,.withFrame-haYltI,#app-mount .sidebar-2K8pFh::before, .container-lRFx4q{backdrop-filter:blur(var(--sides-blur))}#app-mount .children-19S4PO:after,#app-mount .form-2fGMdU:before{display:none}.appMount-3lHmkl, .tabBody-3YRQ8W, .nowPlayingColumn-2sl4cE {background:var(--background) center/cover no-repeat}.withFrame-haYltI{padding-top:4px;margin-top:0}#app-mount .sidebar-2K8pFh{border-radius:0}.content-1o0f9g{backdrop-filter:blur(5px)}.header-2mZ9Ov::before,.stickyHeader-hH_ZLl::before,.titleContainer-2CXtJo::before{background:var(--background) center/cover fixed}.header-2mZ9Ov::after,.header-2mZ9Ov::before,.stickyHeader-hH_ZLl::after,.stickyHeader-hH_ZLl::before,.titleContainer-2CXtJo::after,.titleContainer-2CXtJo::before{content:"";position:absolute;top:0;bottom:0;right:0;left:0;pointer-events:none;z-index:-1}.scroller-9moviB, #app-mount .pageWrapper-1PgVDX, .chatContent-a9vAAp, .contentRegion-3nDuYy, .header-2mZ9Ov::after, .peopleColumn-29fq28, .stickyHeader-hH_ZLl::after, .titleContainer-2CXtJo::after {background: rgba(54,57,63,var(--chat-transp));backdrop-filter: blur(var(--chat-blur))} 368 | #app-mount .sidebar-2K8pFh::before {background-color: #262629c9;} 369 | 370 | 371 | /* ------------------------------------------ 372 | Quarral Configuration End 373 | v1.6 374 | IGNORE THE SECTION BELOW 375 | ------------------------------------------ */ 376 | 377 | .horizontal-1ae9ci{margin-left:0!important} 378 | .theme-light .contentRegionScroller-26nc1e,.theme-light .contentRegion-3nDuYy,.theme-light .standardSidebarView-3F1I7i,.theme-light .sidebarRegionScroller-3MXcoP{background:rgba(255,255,255,0.315)} 379 | .guilds-1SWlCJ{background-color:var(--serverlist-background)} 380 | .members-1998pB,.members-1998pB>div{background-color:var(--memberlist-background)} 381 | .guilds-1SWlCJ{background-color:var(--serverlist-background-light)} 382 | .powercord-toast .contents{background-color:var(--toast-content)} 383 | .withFrame-haYltI,.titleBar-AC4pGV{margin-top:var(--titlebar-top)} 384 | .channel-2QD9_O .downloadProgressCircle-3_wgim{width:100%;margin:0} 385 | .unread-2lAfLh{background-color:var(--background-accent);width:1.5px;height:25px;margin-top:-12px;border-radius:2px 2px 2px 2px} 386 | .toolbar-1t6TWx a{display:none} 387 | .activity-11LB_k{background-color:rgba(0,0,0,0)} 388 | .scroller-305q3I{border-radius:12px} 389 | .theme-dark .perksModal-fSYqOq{background-color:var(--background-primary)} 390 | .userPopout-3XzG_A[style*="--user-background"] .profileBanner-33-uE1{height:180px;background:var(--user-background) center / cover;margin:12px;border-radius:6px} 391 | .userPopout-3XzG_A[style*="--user-background"] .avatarPositionNormal-1CZUPk{top:110px} 392 | .userPopout-3XzG_A[style*="--user-background"] .headerText-2WJ44e.userSelectText-1o1dQ7{margin-top:-65px} 393 | .userPopout-3XzG_A[style*="--user-background"] .profileBadges-1dm1_q{margin-top:-15px} 394 | .theme-dark .body-3iLsc4,.theme-dark .footer-1fjuF6{background-color:var(--modal-bg)} 395 | 396 | /* ---------------------------------------------------- 397 | ANYTHING ELSE YOU WANT TO ADD GOES BELOW 398 | THIS IS FOR DEBUGGING ETC 399 | v1.6 (Quarrel) 400 | ---------------------------------------------------- */ -------------------------------------------------------------------------------- /splash.css: -------------------------------------------------------------------------------- 1 | #splash{background:#191A1F} 2 | .progress .progress-bar{background-color: #fcfcfc} 3 | .progress .progress-bar .complete{background-color: #1e48be} 4 | #splash .splash-inner-dl .dl-select-frame .Select-control{background:#191A1F;border-color:#191A1F} 5 | #splash .splash-inner-dl .dl-select-frame .Select-menu-outer{background:#191A1F;border-color:#191A1F} 6 | -------------------------------------------------------------------------------- /support/betterdiscord/quarrel.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Quarrel 3 | * @author Leeprky#2063 4 | * @version 1.6 5 | * @description Based Off The Quarral Client In The Windows Store/XBOX. 6 | * @source https://github.com/leeprky/Quarrel 7 | * @updateUrl https://github.com/leeprky/Quarrel/blob/main/support/betterdiscord/quarrel.theme.css 8 | * @authorId 224524143482241035 9 | * @invite Ff3rqAYB89 10 | * @donate https://www.paypal.com/paypalme/leeparkinson22 11 | * @website https://leeprky.github.io/ 12 | */ 13 | 14 | /* ------------------------------------------ 15 | Quarrel Theme (BetterDiscord) 16 | v1.6 17 | - leeprky#2063 - 18 | ------------------------------------------ */ 19 | 20 | /* Rebrand */ 21 | @import url(https://leeprky.github.io/themes/quarrel/rebrand-quarrel.css); 22 | 23 | /* Source */ 24 | @import url(https://leeprky.github.io/themes/quarrel/quarrel.css); 25 | @import url(https://leeprky.github.io/snippits/coolsniipitsforthemes.css); 26 | 27 | /* Extras */ 28 | @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css); 29 | @import url(https://ghostmander.github.io/discordfont/DiscordFont.css); 30 | @import url(https://raw.githack.com/mr-miner1/Better-Badges/main/theme.css); 31 | 32 | /* =========================================== 33 | USRBG Popouts by Tropix126. 34 | =========================================== */ 35 | 36 | @import url(https://discord-custom-covers.github.io/usrbg/dist/usrbg.css); 37 | .root-SR8cQa{transform:translateZ(0)} 38 | .header-QKLPzZ .wrapper-3t9DeA::before{content:'';position:fixed;top:0;left:0;width:100%;height:65%;opacity:.75;pointer-events:none;background:var(--user-background) center/cover no-repeat;-webkit-mask:linear-gradient(black,transparent 80%)} 39 | .headerInfo-30uryT,.tabBarItem-1b8RUP,.activity-1ythUs{z-index:1;position:relative} 40 | 41 | /* =========================================== 42 | USRBG Popouts by Tropix126. 43 | =========================================== */ 44 | 45 | :root {--version: "v1.0.6BD" !important; --build: "176" !important; --outdated_quarrel-176: none !important} 46 | :root {--im-aware: none !important} /* Turn To "block to enable */ 47 | 48 | /* ------------------------------------------ 49 | Quarral Configuration 50 | v1.6 51 | - leeprky#2063 - 52 | ------------------------------------------ */ 53 | 54 | /* Background Image */ 55 | /* 56 | :root { 57 | --background: url('https://i.imgur.com/6NUSR9H.png'); 58 | --background-blur: 8px; 59 | --background-opacity: 100%; 60 | --background-brightness: 92%; 61 | --background-colour: #191a1fa2; 62 | --bar-background-primary: #191a1fa2 !important; 63 | --background-primary: transparent !important; 64 | --background-primary-alt: #2d355783 !important; 65 | --background-secondary: transparent !important; 66 | --background-secondary-alt: #232942fa !important; 67 | --background-tertiary: var(--background-colour) !important; 68 | } 69 | 70 | 71 | /* BLAH BLAH BLAH | SOMETIMES MORE INFO - DEFAULT VALUE */ 72 | 73 | /* HOW TO EDIT THIS THEME 74 | I RECOMMEND USING A PROGRAM LIKE VISUAL STUDIO CODE INSTEAD OF NOTEPAD 75 | */ 76 | 77 | /* Win Bar Colours On Hover */ 78 | .titleBar-AC4pGV > *:nth-child(2):hover {background-color: #c05648;} /* Windows Titlebar Close Colour - #c05648 */ 79 | .titleBar-AC4pGV > *:nth-child(3):hover {background-color: #cca32a;} /* Windows Titlebar Maximise Colour - #cca32a */ 80 | .titleBar-AC4pGV > *:nth-child(4):hover {background-color: #24bb24;} /* Windows Titlebar Minimise Colour - #24bb24 */ 81 | .titleBar-AC4pGV > *:nth-child(2) {transition: 0.5s;} /* Windows Titlebar Close Colour Transition- 0.5s */ 82 | .titleBar-AC4pGV > *:nth-child(3) {transition: 0.5s;} /* Windows Titlebar Maximise Colour Transition- 0.5s */ 83 | .titleBar-AC4pGV > *:nth-child(4) {transition: 0.5s;} /* Windows Titlebar Minimise Colour Transition- 0.5s */ 84 | 85 | /* Status */ 86 | :root { 87 | --rs-small-spacing: 0px; /* Spacing between avatar and status | MUST end in px */ 88 | --rs-large-spacing: 0px; /* Spacing between avatar and status for user popouts & modals/profiles | MUST end in px */ 89 | --rs-width: 2px; /* Width/thickness of status border */ 90 | --rs-avatar-shape: 50%; /* 50% for round - 0% for square */ 91 | --rs-online-color: #1df594; /* Colour for online status */ 92 | --rs-idle-color: #faa61a; /* Colour for idle status */ 93 | --rs-dnd-color: #f04747; /* Colour for dnd status */ 94 | --rs-offline-color: #636b75; /* Colour for offline status */ 95 | --rs-streaming-color: #643da7; /* Colour for streaming status */ 96 | --rs-invisible-color: #747f8d; /* Colour for invisible status - Note: this will only show for your own invisibility */ 97 | --rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */ 98 | --rs-phone-color: var(--rs-online-color); /* Colour of the ring and phone icon when a user is on their phone | */ 99 | 100 | --glow-online: "Online"; 101 | --glow-idle: "Idle"; 102 | --glow-streaming: "Streaming"; 103 | 104 | /* None Or Flex */ 105 | --status-glow: flex !important; 106 | 107 | /* Gradients */ 108 | --default-gradient: 315deg, #1b5eb6 0%, #205aa5 74%; 109 | --special-gradient: 315deg, #8980F0 0%, #D577F0 74%; 110 | --red-gradient: 315deg, #AA3738 0%, #F04747 74%; 111 | --yellow-gradient: 315deg, #c29b1b 0%, #ffa640 74%; 112 | --green-gradient: 315deg, #1b5eb6 0%, #205aa5 74%; 113 | --grey-gradient: 315deg, #40414627 0%, #484c4e59 74%; 114 | --white-gradient: 315deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 74%; 115 | 116 | /* Transitions */ 117 | --font-normal: 500; 118 | --font-hover: bold; 119 | --font-size-hover: 15px; 120 | --hover-transition: 0.1s linear; 121 | --transform-normal: scale(1); 122 | --hover-transform: scale(1.15); 123 | --setting-hover-transform: scale(1.025); 124 | --button-hover-transform: scale(1.03); 125 | 126 | /* Greenple */ 127 | --green-color: var(--alt-color2); 128 | --green-bar-on: var(--green-color); 129 | --green-bar-bg: #151925; 130 | --green-slider-on: var(--green-color); 131 | --green-slider-off: #5c646480; 132 | --green-slider-dot: #fff; 133 | } 134 | 135 | /* Quarrel Dark */ 136 | .theme-dark { 137 | 138 | /* Quarrel */ 139 | 140 | --titlebar-top: 5px; /* WinBar Height - 5px */ 141 | --icon-top: 0.8px; /* Logo Top Left Height - 0.8px */ 142 | --watermark-top: 5.5px; /* Text Top Left Height - 5.5px */ 143 | --watermark-text: "Quarrel"; /* Watermark Text - Quarrel */ 144 | --icon-img: url("https://i.imgur.com/BlVTpku.png"); /* ICON URL - https://i.imgur.com/BlVTpku.png */ 145 | 146 | --bd-color: #1B5EB6; /* Betterdiscord Global Colour - #1B5EB6 */ 147 | --bd-color-hover: #164a8f; /* Betterdiscord Global Colour Hover - #164a8f */ 148 | --alt-color: 27, 94, 182; /* Discords Blurple Global | RGB - 27, 94, 182 */ 149 | --alt-color2: #1b6bb6; /* Discords Blurple Global | HEX - #1b5eb6 */ 150 | /* Change Both Alts To Same Alternate Version As They Do Different Things Just Different Ways */ 151 | 152 | --scrollbars: none; /* Remove None For Scrollbars - none */ 153 | --public-servers: none; /* Remove None For Public Server Button - none */ 154 | --bar-background-primary: #1b1c2200 !important; /* Bottom Bar Colour - #1b1c22 */ 155 | --home-icon: url(https://i.imgur.com/Bda0DuK.png); /* Friends Home Icon - https://i.imgur.com/Bda0DuK.png */ 156 | 157 | --playing-color: var(--alt-color2); /* Dont Work In New Discord Modal Update */ 158 | --spotify-color: rgba(35, 197, 35, 0.747); /* Dont Work In New Discord Modal Update */ 159 | --streaming-color: rgb(127, 50, 179); /* Dont Work In New Discord Modal Update */ 160 | 161 | /* Keeping Consistancy With Discord */ 162 | --serverlist-background: var(--background-tertiary) !important; /* Server List BG - var(--background-tertiary) */ 163 | --memberlist-background: #1e202700 !important; /* Member List BG - #1e202700 */ 164 | --popout-width: 480px; /* Popout Modal Width, None For Dynamic Width - 480 */ 165 | --modal-bg: rgb(19, 20, 24); /* Popout Modal Colour - rgb(19, 20, 24) */ 166 | 167 | /* Header Colors */ 168 | --header-primary: #fff; /* Main Header Colour - #fff */ 169 | --header-secondary: #b9bbbe; /* Secondary Header Colour - #b9bbbe */ 170 | --channels-headings: var(--alt-color2); /* Headers For Channels/Role Names Colour - var(--alt-color2) */ 171 | 172 | /* Text Colours */ 173 | --text-normal: #dcddde; /* Chat Text - #dcddde */ 174 | --text-muted: #72767d; /* Channel Icon Colour - #72767d */ 175 | --text-link: var(--alt-color2); /* Text Link Globally - var(--alt-color2); */ 176 | --channels-default: #8e9297; /* Default Channel Names Colour - #8e9297 */ 177 | --interactive-normal: #b9bbbe; /* Interactive Buttons Normal Colour - #b9bbbe */ 178 | --interactive-hover: #dcddde; /* Interactive Buttons Hover Colour - #dcddde */ 179 | --interactive-hover-icons: var(--alt-color2); /* Interactive Buttons Hover Colour - var(--alt-color2);*/ 180 | --interactive-active: #fff; /* Interactive Buttons Active Colour - #fff */ 181 | --interactive-active-icons: var(--alt-color2); /* Interactive Buttons Icon Colour - var(--alt-color2); */ 182 | --interactive-muted: #4f545c; /* Interactive Buttons Muted Colour - #4f545c */ 183 | 184 | /* Chat */ 185 | --channeltextarea-background: var(--bar-background-primary); /* TextBox Background */ 186 | --channeltextarea-background-hover: var(--bar-background-primary); /* TextBox Background Hover */ 187 | 188 | /* Background Colours */ 189 | --background-primary: #191a1f46 !important; /* Main Background Colour, Chat Etc - #191a1fc2 */ 190 | --background-primary-alt: #191a1fd0 !important; /* Main Alternative Background Colour - #191a1fd0 */ 191 | --background-secondary: #1b1c222a !important; /* Secondary Background Colour, Channelist, TopBar Etc - #1b1c224f */ 192 | --background-secondary-alt: #1b1c228a !important; /* Secondary Alternative Background Colour - #1b1c228a */ 193 | --background-tertiary: #191b2267 !important; /* Tertiary Background Colour | #App Mount Colour Etc - #191b2277 */ 194 | --background-accent: var(--alt-color2) !important; /* Accent Background Colour, Pills Etc - var(--alt-color2) */ 195 | --background-floating: #1f2024 !important; /* Floating Modals Background Colour, Clickable Stuff Etc -#18191c */ 196 | 197 | /* Mentioned Colours */ 198 | --background-mentioned: rgba(26, 60, 250, 0.123); /* Chat Mentioned BG - rgba(26, 60, 250, 0.123) */ 199 | --background-mentioned-hover: rgba(41, 26, 250, 0.08); /* Chat Mentioned Hover BG - rgba(41, 26, 250, 0.08) */ 200 | --background-mentioned-bar: var(--background-accent); /* Chat Mentioned Bar BG - var(--background-accent) */ 201 | 202 | --background-help-warning: rgba(250,166,26,0.1); /* IDK | Rebrand Stuff - rgba(250,166,26,0.1) */ 203 | --background-help-info: rgba(0,176,244,0.1); /* IDK | Rebrand Stuff - rgba(0,176,244,0.1) */ 204 | 205 | /* Scrollbar Colours */ 206 | --background-modifier-hover: rgba(53, 89, 148, 0.16); /* Hovering Over Buttons Hover Colour - rgba(79,84,92,0.16) */ 207 | --background-modifier-active: rgba(50, 89, 151, 0.24); /* Hovering Over Buttons Active Colour - rgba(79,84,92,0.16) */ 208 | --background-modifier-selected: rgba(46, 93, 170, 0.32); /* Hovering Over Buttons Selected Colour - rgba(79,84,92,0.16) */ 209 | --background-modifier-accent: rgba(46, 94, 133, 0.06); /* Hovering Over Buttons Accent Colour - rgba(79,84,92,0.16) */ 210 | 211 | /* Box Shadow On Floating Elements Colours */ 212 | --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15); /* Box Shadow On Floating Elements Stroke - 0 0 0 1px rgba(4,4,5,0.15) */ 213 | --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05); /* Box Shadow On Floating Elements Low - 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05) */ 214 | --elevation-medium: 0 4px 4px rgba(0,0,0,0.16); /* Box Shadow On Floating Elements Medium - 0 4px 4px rgba(0,0,0,0.16) */ 215 | --elevation-high: 0 8px 16px rgba(0,0,0,0.24); /* Box Shadow On Floating Elements High - 0 8px 16px rgba(0,0,0,0.24) */ 216 | 217 | --scrollbar-thin-thumb: #eaedf100; /* Scrollbar Thin Blob - eaedf100 */ 218 | --scrollbar-thin-track: transparent; /* Scrollbar Thin Blob Track - transparent */ 219 | --scrollbar-auto-thumb: #e5e9ee; /* Scrollbar Large Blob - #e5e9ee */ 220 | --scrollbar-auto-track: #ebeef100; /* Scrollbar Large Blob Track - #ebeef100 */ 221 | --scrollbar-auto-scrollbar-color-thumb: #f0f3f8; /* Scrollbar Large Blob - #f0f3f8 */ 222 | --scrollbar-auto-scrollbar-color-track: #2f313600; /* Scrollbar Large Blob Track - #2f313600 */ 223 | 224 | /* Other */ 225 | --radio-group-dot-foreground: var(--alt-color); /* Ignore */ 226 | } 227 | 228 | /* Quarrel Light */ 229 | .theme-light { 230 | 231 | /* Quarrel */ 232 | 233 | --titlebar-top: 4px; 234 | --icon-top: 0.5px; 235 | --watermark-top: 5.5px; 236 | --watermark-text: "Quarrel"; 237 | --icon-img: url("https://i.imgur.com/BlVTpku.png"); 238 | 239 | --bd-color: #226dcf; 240 | --bd-color-hover: #226ac9; 241 | --alt-color: 43, 120, 199; /* RGB */ 242 | --alt-color2: #2e5a94; /* HEX */ 243 | --alt-color3: 214; /* HSL */ 244 | 245 | --scrollbars: none; /* none or unset */ 246 | --public-servers: none; 247 | --bar-background-primary: #c3c6d3 !important; 248 | --home-icon: url(https://i.imgur.com/Bda0DuK.png); 249 | 250 | --playing-color: var(--alt-color2); 251 | --spotify-color: rgba(35, 197, 35, 0.747); 252 | --streaming-color: rgb(127, 50, 179); 253 | 254 | /* Keeping Consistancy With Discord */ 255 | --serverlist-background: var(--background-tertiary) !important; 256 | --memberlist-background: #1e202700 !important; 257 | --win-titlebar: var(--background-tertiary); 258 | --popout-width: 480px; /* Change To 480px For Static Modal Popout */ 259 | 260 | /* Header Colors */ 261 | --header-primary: rgb(7, 7, 7); 262 | --header-secondary: #232324; 263 | --channels-headings: var(--alt-color2); 264 | --modal-bg: rgb(184, 188, 204); 265 | 266 | /* Text Colours */ 267 | --text-normal: #0f0f0f; 268 | --text-muted: #3362b4; 269 | --text-link: var(--alt-color2); 270 | --channels-default: #282829; 271 | --interactive-normal: #272829; 272 | --interactive-hover: #050505; 273 | --interactive-hover-icons: var(--alt-color2); 274 | --interactive-active: rgb(7, 7, 7); 275 | --interactive-active-icons: var(--alt-color2); 276 | --interactive-muted: #4f545c; 277 | 278 | /* Chat */ 279 | --channeltextarea-background: var(--bar-background-primary); 280 | --channeltextarea-background-hover: var(--bar-background-primary); 281 | 282 | /* Background Colours */ 283 | --background-primary: #c3c6d3c2 !important; 284 | --background-primary-alt: #c3c6d3c2 !important; 285 | --background-secondary: #aaaec94f !important; 286 | --background-secondary-alt: #aaaec94f !important; 287 | --background-tertiary: #a5abc077 !important; 288 | --background-accent: #2f6cce !important; 289 | --background-floating: #c5ccdf !important; 290 | 291 | /* Mentioned Colours */ 292 | --background-mentioned: rgba(16, 41, 179, 0.342); 293 | --background-mentioned-hover: rgba(41, 26, 250, 0.253); 294 | --background-mentioned-bar: rgba(41, 26, 250, 0.856); 295 | 296 | --background-help-warning: rgba(250,166,26,0.1); 297 | --background-help-info: rgba(0,176,244,0.1); 298 | 299 | /* Scrollbar Colours */ 300 | --background-modifier-hover: rgba(57, 118, 214, 0.16); 301 | --background-modifier-active: rgba(28, 77, 155, 0.24); 302 | --background-modifier-selected: rgba(15, 101, 238, 0.32); 303 | --background-modifier-accent: rgba(45, 62, 219, 0.06); 304 | --scrollbar-auto-scrollbar-color-thumb: rgba(79,84,92,0.16); 305 | 306 | /* Box Shadow On Floating Elements Colours */ 307 | --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15); 308 | --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05); 309 | --elevation-medium: 0 4px 4px rgba(0,0,0,0.16); 310 | --elevation-high: 0 8px 16px rgba(0,0,0,0.24); 311 | 312 | --scrollbar-thin-thumb: #eaedf100; 313 | --scrollbar-thin-track: transparent; 314 | --scrollbar-auto-thumb: #e5e9ee; 315 | --scrollbar-auto-track: #ebeef100; 316 | --scrollbar-auto-scrollbar-color-thumb: #f0f3f8; 317 | --scrollbar-auto-scrollbar-color-track: #2f313600; 318 | 319 | /* Other */ 320 | --radio-group-dot-foreground: var(--alt-color); 321 | } 322 | 323 | /* ---------------------------------------------------- 324 | Optional Features 325 | Add A "/*" On The Lines Below The Comments 326 | To Disable Them 327 | ---------------------------------------------------- */ 328 | 329 | /* Status Bar */ 330 | /* - remove 331 | .full-motion .scale-3iLZhb.didRender-33z1u8{-webkit-transition:opacity .12s ease-out,-webkit-transform .12s ease-out;transition:opacity .12s ease-out,-webkit-transform .12s ease-out;transition:transform .12s ease-in-out,opacity .12s ease-out;transition:transform .12s ease-out,opacity .12s ease-out,-webkit-transform .12s ease-out;-webkit-transform:scale(1);transform:scale(1);opacity:1} 332 | .status-1fhblQ,.description-2L932D{display:none} 333 | .separator-2I32lJ{display:none} 334 | .mask-1qbNWk.icon-1IxfJ2{--status-icon-size:105%;height:var(--status-icon-size);width:var(--status-icon-size);stroke-width:59!important;transform:scale(1.1,1.1)} 335 | .animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8 > .menu-3sdvDG.styleFixed-sX-yHV > .scroller-3BxosC.thin-1ybCId.scrollerBase-289Jih{display:grid;align-items:center;grid-template-columns:auto auto auto auto;visibility:visible} 336 | .item-1tOPte.colorDefault-2K3EoJ:nth-of-type(7){grid-column:1/5} 337 | .animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8{transition:opacity .15s linear 0} 338 | .customText-tY5LJn{font-size:15px} 339 | .statusItem-33LqPf[aria-label="Set a custom status"]{display:none;} 340 | .statusItem-33LqPf[aria-label="Show Game Activity"]{display:none;} 341 | .menu-3sdvDG{background-color:#03000567;border-radius:12px} 342 | div[class*=colorDefault-].focused-3afm-j,div[class*=colorDefault-].focused-3afm-j:active,div[class*=colorDefault-]:active:not(.hideInteraction-1iHO1O){background-color:transparent!important;color:#fff!important} 343 | .colorDefault-2K3EoJ{margin-left:5px} 344 | @keyframes smooth-up1 {0%{top:10px} 25%{top:0} 50%{top:0} 75%{top:0} 100%{top:0}} 345 | .statusItem-33LqPf,#app-mount #status-picker{position:relative;margin-left:-3px;margin-bottom:-4px;animation-name:smooth-up1;animation-duration:4s} 346 | .mask-1qbNWk.icon-1IxfJ2 {border-radius: 50% !important;} 347 | .statusItem-33LqPf foreignObject { mask: none} 348 | /* Background Image */ 349 | /* remove 350 | :root { 351 | --background:url('https://i.gifer.com/3ZTz.gif'); 352 | --chat-blur: 10px; 353 | --chat-transp:0.80; 354 | --sides-transp: 0.80; 355 | --sides-blur: 10px; 356 | } 357 | 358 | #app-mount .container-1D34oG,.app-2rEoOp,.bg-h5JY_x,.chat-3bRxxu,.content-1o0f9g, .contentRegionScroller-26nc1e,.layer-3QrUeG,.members-1998pB>div,.scroller-1JbKMe,.applicationStore-1pNvnv,.scroller-305q3I,.sidebar-2K8pFh,.standardSidebarView-3F1I7i,.wrapper-1F5TKx,.wrapper-3NnKdC,.wrapper-3vR61M,body{background:0 0}.container-3w7J-x,.members-1998pB,.nowPlayingColumn-2sl4cE,.privateChannels-1nO12o,.sidebar-2K8pFh>.scrollerBase-289Jih,#app-mount .sidebar-2K8pFh::before, .sidebarRegionScroller-3MXcoP{background:rgba(47,49,54,var(--sides-transp))}.panels-j1Uci_ {background:rgba(41,43,47,var(--sides-transp))}.scroller-1Bvpku,.withFrame-haYltI, .nowPlayingColumn-2sl4cE{background:rgba(32,34,37,var(--sides-transp))}.scroller-9moviB,#app-mount .pageWrapper-1PgVDX,.chatContent-a9vAAp,.contentRegion-3nDuYy,.header-2mZ9Ov::after,.peopleColumn-29fq28,.stickyHeader-hH_ZLl::after,.titleContainer-2CXtJo::after{background:rgba(54,57,63,var(--chat-transp))}.container-1r6BKw.themed-ANHk51, .container-lRFx4q{background:rgba(54,57,63,var(--sides-transp))}.container-1r6BKw.themed-ANHk51,.members-1998pB,.nowPlayingColumn-2sl4cE,.scroller-1Bvpku,.sidebar-2K8pFh,.sidebarRegionScroller-3MXcoP,.withFrame-haYltI,#app-mount .sidebar-2K8pFh::before, .container-lRFx4q{backdrop-filter:blur(var(--sides-blur))}#app-mount .children-19S4PO:after,#app-mount .form-2fGMdU:before{display:none}.appMount-3lHmkl, .tabBody-3YRQ8W, .nowPlayingColumn-2sl4cE {background:var(--background) center/cover no-repeat}.withFrame-haYltI{padding-top:4px;margin-top:0}#app-mount .sidebar-2K8pFh{border-radius:0}.content-1o0f9g{backdrop-filter:blur(5px)}.header-2mZ9Ov::before,.stickyHeader-hH_ZLl::before,.titleContainer-2CXtJo::before{background:var(--background) center/cover fixed}.header-2mZ9Ov::after,.header-2mZ9Ov::before,.stickyHeader-hH_ZLl::after,.stickyHeader-hH_ZLl::before,.titleContainer-2CXtJo::after,.titleContainer-2CXtJo::before{content:"";position:absolute;top:0;bottom:0;right:0;left:0;pointer-events:none;z-index:-1}.scroller-9moviB, #app-mount .pageWrapper-1PgVDX, .chatContent-a9vAAp, .contentRegion-3nDuYy, .header-2mZ9Ov::after, .peopleColumn-29fq28, .stickyHeader-hH_ZLl::after, .titleContainer-2CXtJo::after {background: rgba(54,57,63,var(--chat-transp));backdrop-filter: blur(var(--chat-blur))} 359 | #app-mount .sidebar-2K8pFh::before {background-color: #262629c9;} 360 | */ 361 | 362 | /* ------------------------------------------ 363 | Quarral Configuration End 364 | v1.6 365 | IGNORE THE SECTION BELOW 366 | ------------------------------------------ */ 367 | 368 | .horizontal-1ae9ci{margin-left:0!important} 369 | .theme-light .contentRegionScroller-26nc1e,.theme-light .contentRegion-3nDuYy,.theme-light .standardSidebarView-3F1I7i,.theme-light .sidebarRegionScroller-3MXcoP{background:rgba(255,255,255,0.315)} 370 | .guilds-1SWlCJ{background-color:var(--serverlist-background)} 371 | .members-1998pB,.members-1998pB>div{background-color:var(--memberlist-background)} 372 | .guilds-1SWlCJ{background-color:var(--serverlist-background-light)} 373 | .powercord-toast .contents{background-color:var(--toast-content)} 374 | .withFrame-haYltI,.titleBar-AC4pGV{margin-top:var(--titlebar-top)} 375 | .channel-2QD9_O .downloadProgressCircle-3_wgim{width:100%;margin:0} 376 | .unread-2lAfLh{background-color:var(--background-accent);width:1.5px;height:25px;margin-top:-12px;border-radius:2px 2px 2px 2px} 377 | .toolbar-1t6TWx a{display:none} 378 | .activity-11LB_k{background-color:rgba(0,0,0,0)} 379 | .scroller-305q3I{border-radius:12px} 380 | .theme-dark .perksModal-fSYqOq{background-color:var(--background-primary)} 381 | .bd-button,.bd-server-tag,.bd-addon-views .bd-view-button.selected{background-color:var(--bd-color)} 382 | .bd-button:hover{background-color:var(--bd-color-hover)} 383 | #bd-pub-button:hover{background-color:var(--bd-color-hover)} 384 | .horizontal-1ae9ci{margin-left:35px} 385 | #bd-pub-li{display:var(--public-servers)}; 386 | 387 | /* ---------------------------------------------------- 388 | ANYTHING ELSE YOU WANT TO ADD GOES BELOW 389 | THIS IS FOR DEBUGGING ETC 390 | v1.6 (Quarrel) 391 | ---------------------------------------------------- */ 392 | --------------------------------------------------------------------------------