/* ==UserStyle==
@name Custom Discord
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Custom discord the ability to edit discord to your preferences(basically)
@author Rejuiin
@license CC-BY-SA 4.0
https://media.discordapp.net/attachments/880439497211408384/986471746515378196/901811.png?width=631&height=406
@advanced dropdown tool "Tools sliding animation" {
tool_off "off" <<<EOT /* EOT;
tool_on "on*" <<<EOT EOT;
}
@advanced dropdown chan "Channels sliding animation" {
chan_off "off" <<<EOT /* EOT;
chan_on "on*" <<<EOT EOT;
}
@advanced dropdown mem "Members sliding animation" {
mem_off "off" <<<EOT /* EOT;
mem_on "on*" <<<EOT EOT;
}
@advanced select _hover_distance "Hover distance" {
"5px": "5px",
"10px": "10px",
"15px": "15px",
"20px": "20px",
"25px": "25px",
"30px": "30px",
"35px": "35px",
"40px": "40px",
}
@advanced dropdown chat "Chat bar animation" {
chat_off "off" <<<EOT /* EOT;
chat_on "on*" <<<EOT EOT;
}
@advanced dropdown bor "Borders" {
bor_off "off" <<<EOT /* EOT;
bor_on "on*" <<<EOT EOT;
}
@advanced dropdown sep "Separate discord tabs" {
sep_off "off" <<<EOT /* EOT;
sep_on "on*" <<<EOT EOT;
}
@advanced dropdown but "Buttons color" {
mem_off "off" <<<EOT /* EOT;
mem_on "on*" <<<EOT EOT;
}
@advanced select _margin "Margin" {
"default": "5px",
"10px": "10px",
"15px": "15px"
}
@advanced select _radius "Border radius" {
"0px": "0px",
"5px": "5px",
"10px": "10px",
"15px": "15px",
"20px": "20px"
}
@advanced text backgroundImage "Background Image/GIF Link" https://i.imgur.com/iIWiT7D.gif
@advanced color bg-primary "Backgorund Primary" rgba(0, 0, 0, .1);
@advanced color bg-secondary "Backgorund Secondary" rgba(0, 0, 0, .1);
@advanced color bg-tertiary "Backgorund Tertiary -------------- ( .2 for images with white bg)" rgba(0, 0, 0, .1);
@advanced color bg-accent "Backgorund Accent" rgba(40, 40, 40, 1);
@advanced color bg-floating "Backgorund Floating" rgba(0, 0, 0, .3);
@advanced color pop-up "Pop-ups bg (Similar to floating)" rgba(0, 0, 0, .3);
@advanced color bg-secondary-alt "Backgorund Secondary-ALT(user)" rgba(0, 0, 0, .3);
@advanced color bg-message-bar "Backgorund Message bar" rgba(45, 45, 45, .7);
@advanced color shadow "Shadows" rgba(4, 232, 255, 1);
@advanced color bg-buttons "Buttons Background" rgba(45, 45, 45, .7);
@advanced color scroll-bar "Scroll Bar" rgba(28, 28, 28, 1);
@advanced color scroll-track "Scroll Track" rgba(117, 116, 116, .4);
@advanced color border-color "Border Color" rgba(117, 116, 116, .4);
@advanced text border-size "Border Size" 1px
@advanced text border-radius "Border Radius" 5px
@advanced color hd-primary "Headers Primary" rgb(255, 255, 255);
@advanced color hd-secondary "Headers Secondary" rgb(185, 187, 190);
@advanced color text-normal "Text Normal" rgb(220, 221, 222);
@advanced color text-muted "Text Muted" rgb(157, 157, 157);
@advanced color members-category "Members Category" rgb(142, 146, 151);
@advanced color members-activity "Members Activity" rgb(142, 146, 151);
@advanced color channels-category "Channel Category" rgb(142, 146, 151);
@advanced color channels-default "Channel Name" rgb(142, 146, 151);
@advanced color channels-icon "Channel Name Icon" rgb(142, 146, 151);
@advanced color interactive-normal "Icons Color" rgb(142, 146, 151);
@advanced color interactive-hover "Hover text Color" rgb(255, 255, 255);
@advanced color unread-channel "Unread Channel" rgb(255, 255, 255);
@advanced color muted-channel "Muted Channel" rgb(79, 84, 92);
@advanced color link-color "Link Color" rgb(56, 123, 211);
@advanced color bg-message-hover "Background message hover" rgba(0, 0, 0, .3);
@advanced color bg-hover "Background hover color" rgba(79, 85, 94, .6);
@advanced color bg-selected-hover "Background Selected color" rgba(79, 85, 94, .6);
@advanced color reaction-emoji-bg "Chat reaction emoji bg" rgba(0, 0, 0, .2);
@advanced color reaction-emoji-border "Chat reaction emoji border color" rgb(0, 66, 255);
@advanced color new-msg-bar "New message bar" rgb(234, 0, 16);
==/UserStyle== */
@-moz-document domain("discord.com"), url-prefix("https://discord.com/") {
/*---------------------------------------- BACKGROUND & LAYOUT----------------------------------------*/
body {
background: url("/*[[backgroundImage]]*/");
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.appMount-3lHmkl {
background: rgba(0, 0, 0, .1);
}
/*[[sep]]*/div[class*="sidebar-"], /* sidebar */
/*[[sep]]*/div[class*="container-2cd8Mz"], /* right container */
/*[[sep]]*/div[class*="chat-"] /* chat */
{
border-radius: /*[[_radius]]*/!important;
margin: /*[[_margin]]*/;
transition: .25s ease-in-out;
}
/*[[sep]]*/div[class*="none"] /* servers */ {
background-color: /*[[bg-secondary]]*/; /* bg color replace */
border-radius: /*[[_radius]]*/;
margin: /*[[_margin]]*/ 0 /*[[_margin]]*/ 0;
transition: .25s ease-in-out;
}
/*[[sep]]*/div[class*="container-1eFt"] /* main */ {
padding: /*[[_margin]]*/;
box-sizing: border-box;
}
section[class*="panels-"]:after {
color: #fff;
position: fixed;
bottom: 10px;
text-align: center;
width: 240px;
}
.appMount-3lHmkl {
background: rgba(0, 0, 0, .6);
}
/*---------------------------------------- DARK & WHITE THEME BACKGROUNDS ----------------------------------------*/
.theme-dark,
.theme-light {
--background-primary: /*[[bg-primary]]*/;
--background-secondary: /*[[bg-secondary]]*/;
--background-tertiary: /*[[bg-tertiary]]*/;
--background-accent: /*[[bg-accent]]*/;
--background-floating: /*[[bg-floating]]*/;
--background-secondary-alt: /*[[bg-secondary-alt]]*/;
--channeltextarea-background: /*[[bg-message-bar]]*/;
--header-primary: /*[[hd-primary]]*/;
--header-secondary: /*[[hd-secondary]]*/;
--text-normal: /*[[text-normal]]*/;
--text-muted: /*[[text-muted]]*/;
--channels-default: /*[[channels-default]]*/;
--interactive-normal: /*[[interactive-normal]]*/;
--interactive-hover: /*[[interactive-hover]]*/;
--interactive-active: /*[[unread-channel]]*/;
--interactive-muted: /*[[muted-channel]]*/;
--text-link: /*[[link-color]]*/;
--background-message-hover: /*[[bg-message-hover]]*/;
--background-modifier-hover: /*[[bg-hover]]*/;
--background-modifier-active: /*[[bg-selected-hover]]*/;
--background-modifier-selected: /*[[bg-selected-hover]]*/;
--background-modifier-accent: /*[[bg-hover]]*/;
--scrollbar-auto-thumb: /*[[scroll-bar]]*/;
--scrollbar-auto-track: /*[[scroll-track]]*/;
--scrollbar-thin-thumb: /*[[scroll-bar]]*/;
--scrollbar-thin-track: /*[[scroll-track]]*/;
--elevation-low: transparent;
--elevation-high: 0 1px 10px /*[[shadow]]*/;
}
/*------------------------------Web Fixes--------------------------------- */
/* New Message bar*/
.isUnread-3Lojb- {
border-color: /*[[new-msg-bar]]*/;
}
.unreadPill-3nEWYM {
background-color: /*[[new-msg-bar]]*/;
}
.unreadPillCapStroke-1nE1Q8 {
fill: /*[[new-msg-bar]]*/;
stroke: /*[[new-msg-bar]]*...