css

:root {
  /*--<var>: <value>*/
  --notif: #7A78BD;
  --accent: #7A78BD;
  --dark-primary: #212121;
  --dark-secondary: #303030;
  --dark-highlight: #181818;
  --light-primary: #ddd;
  --light-secondary: #ecf0f1;
  --light-highlight: #9E9E9E;
  --light-dark-text: #2e3136;
  --nsfw-image: url("https://i.alexflipnote.xyz/c2472b.png");
}



/* User Popout */
/* BOTH */
@-webkit-keyframes user-popout-anim {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes user-popout-anim {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.user-popout { width: 450px; animation: user-popout-anim 350ms ease-in-out; }
.user-popout .body { display: flex; padding-top: 14px; }
.user-popout .avatar-wrapper { position: fixed; margin: 4px 0px 14px -150px; }
.section.roles { max-width: 250px; width: 250px; }
.section.notes, .section.roles { margin-left: 15px; }
.user-popout .username-wrapper .nickname { margin-bottom: 2px; }
.creation-date-wrapper { margin-left: -33px; }
.user-popout .header { padding-top: 3em; background: var(--dark-highlight); }
.user-popout .header.streaming { padding-top: 2.15em; }
.user-popout .avatar-wrapper .avatar-popout { border: 0; background-color: rgba(0, 0, 0, 1); }
.user-popout .username-wrapper .activity, .user-popout .username-wrapper .discord-tag, .user-popout .username-wrapper .nickname{
  text-align: left;
  margin-left: 138px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.bot-tag.bot-tag-invert { background-color: #7289da!important; color: #fff!important; }
.user-popout .header.streaming .live-on-twitch {
  border-top: 0px solid transparent;
  text-decoration: none;
  width: 150px;
  margin-left: 129px;
  border-radius: 3px;
  padding: 4px 0;
}
.user-popout .header.streaming .activity { padding: 0; }
.user-popout .avatar-wrapper .avatar-hint {
  margin: 0;
  background: rgba(0, 0, 0, 1);
  box-shadow: none;
}
.note textarea:focus { background: var(--dark-highlight); }
.user-popout .body { background: var(--dark-primary); }
.user-popout .footer { background: var(--dark-secondary); border-top: none; }
.quick-message, .quick-message.isBlocked {
  background: transparent;
  border: none;
  color: #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0;
}
/* END: User Popout */

/* User Profile Modal */
/* BOTH | This one can't be used on light and dark, must define both */
.avatar-profile {
  background-size: 128px 128px;
  margin-top: -29px;
}
.avatar-profile .status {
  border-color: var(--dark-secondary);
}
#user-profile-modal { border-radius: 0; }
#user-profile-modal .header {
  background-color: var(--dark-highlight);
  border-radius: 0;
  background-image: none;
}
#user-profile-modal .header .header-info {
  margin-top: -30px;
}
#user-profile-modal .scroller {
  background: var(--dark-secondary);
  border-bottom: 0;
}
#user-profile-modal .tab-bar {
  margin-left: -185px;
  margin-top: 0px;
}
#user-profile-modal .tab-bar-container {
  background-color: var(--dark-primary);
  border-bottom: 0;
}
#user-profile-modal .empty {
  background: var(--dark-secondary);
}
#user-profile-modal .tab-bar .tab-bar-item, #user-profile-modal .tab-bar .tab-bar-item.selected {
  color: white;
}
#user-profile-modal .tab-bar .tab-bar-item.selected {
  font-weight: bold;
  border-bottom-color: #fff;
}
#user-profile-modal .guilds .section .section-header { color: #fff; }
#user-profile-modal .guilds .section .connected-accounts .connected-account {
  border: 0;
  background: var(--dark-primary);
  box-shadow: none;
}
#user-profile-modal .guilds .section .connected-accounts {
  margin-left: -10px;
  margin-right: -10px;
  padding: 0 10px;
}
#user-profile-modal .guilds .section .connected-accounts .connected-account a:hover .connected-account-open-icon {
  opacity: 0.8;
}
#user-profile-modal .guilds .section .connected-accounts .connected-account .connected-account-name-inner .connected-account-name {
  color: #fff;
  font-weight: 600
}
#user-profile-modal .guilds .section .note textarea {
  padding: 5px;
  border-radius: 0px;
  -webkit-transition: all 100ms ease;
  transition: all 100ms ease;
}
#user-profile-modal .guilds .section .note textarea:hover:focus,
#user-profile-modal .guilds .section .note textarea:focus {
  color: #fff;
  background: transparent;
}
#user-profile-modal .guilds .guild:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
#user-profile-modal .header::after {
  display: none!important;
}
#user-profile-modal .avatar-wrapper {
  background-color: transparent;
}

/* Username, Discriminator and Playing Status */
#user-profile-modal .header .header-info .header-info-inner .discord-tag .username { color: #fff; }
#user-profile-modal .header .header-info .header-info-inner .discord-tag .discriminator { color: rgba(255, 255, 255, .7); }
#user-profile-modal .header .header-info .header-info-inner .activity { color: rgba(255, 255, 255, .5); }

/* Badge on name */
@-webkit-keyframes profile-badge {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes profile-badge {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes profile-badge-info {
  from { transform: translateX(-60px); }
  100% { transform: translateX(0px); }
}

@keyframes profile-badge-info {
  from { transform: translateX(-60px); }
  100% { transform: translateX(0px); }
}

#user-profile-modal .header .discord-tag, #user-profile-modal .header .activity {
  -webkit-animation: profile-badge-info 500ms ease-in-out;
  animation: profile-badge-info 500ms ease-in-out;
}

#user-profile-modal .header .header-info .badge-premium,
#user-profile-modal .header .header-info .badge-hypesquad,
#user-profile-modal .header .header-info .badge-partner,
#user-profile-modal .header .header-info .badge-staff {
  -webkit-animation: profile-badge 500ms ease-in-out;
  animation: profile-badge 500ms ease-in-out;
}
/* END: User Profile Modal */







/*Background*/

.app {
    background-image: url("https://i.imgur.com/RG03PyX.png");
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: cover;
}

.connecting {
    background-image: url("https://i.stole-a-me.me/be304d.jpg");
    background-blend-mode: soft-light;
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: cover;
}

.connecting video.ready {
    display: none;
}


/*Transparency*/
.theme-dark .layer, .theme-dark .layers
 {
  background: transparent!important;
  box-shadow: none;
  border-bottom: 0px solid #fff;
  border-top: none;
  opacity: 1;
}

#voice-connection,
#friends,
#friends .btn,
.friends-header,
.friends-table,
.channels-wrap,
.guild-channels,
.links,
.chat,
.messages-wrapper,
.container-RYiLUQ,
.content,
.chat-empty,
.layers,
.message-group-blocked,
.private-channels,
.guild-header header,
.chat,
.chat form,
.theme-dark .channel-members {
    background: rgba(0, 0, 0, 0.5) !important;
}

.contentDefaultText-2elG3R {
    background: rgba(0, 0, 0, 0) !important;

}

.contentHoveredText-2HYGIY {
    background: rgba(0, 0, 0, 0.2) !important;
}

.contentSelectedText-3j5CXt {
    background: rgba(0, 0, 0, 0.3) !important;
}

.theme-dark #friends .friends-table .friends-row .friends-column-actions .friends-action {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .channel-members .member.popout-open,
.theme-dark .channel-members .member:hover {
    background: linear-gradient(to right, rgba(256, 256, 256, 0.05) 45%, transparent);
}

.connecting video.ready {
    display: none;
}

.guilds-wrapper,
.theme-dark .chat .has-more button {
    background: rgba(0, 0, 0, 0.8) !important;
}

.guild-header header {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, .1)
}

.search-bar {
    background: rgba(0, 0, 0, 0.1) !important;
}

#friends .friends-table {
    margin-top: 0px !important;
    background: rgba(0, 0, 0, 0.745) !important;
}

.theme-dark #friends .friends-table .friends-row:hover {
    background: rgba(100, 100, 100, 0.3) !important;
}

#voice-connection {
    background: rgba(0, 0, 0, 0.7) !important;
    border-top: 0px;
}

.account {
    background: rgba(0, 0, 0, 0.7) !important;
    border-top: 0px;
}

#rtc-connection {
    background: rgba(0, 0, 0, 0.7) !important;
    border-top: 0px;
}

.guild-channels .channel.selected {
    background-color: transparent !important;
}

.private-channels .channel.selected,
.private-channels .channel:hover,
.private-channels .search-result.selected,
.private-channels .search-result:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
}

.guild-channels .channel:hover {
    background-color: transparent !important;
}

.guild-channels .channel-text:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
}

.guild-channels .channel-text.selected,
.private-channels .channel-text.selected {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
}

.account .btn,
#voice-connection .btn {
    background-color: rgba(0, 0, 0, 0.8);
}
#rtc-connection .btn {
    background-color: rgba(0, 0, 0, 0.8);
}
#rtc-connection .btn-group {
    border: none !important;

}
#rtc-connection .btn-info,
#rtc-connection .btn-disconnect {

    box-shadow: none;
    transition: background-color 0.2s;
}

.account .btn-group,
#voice-connection .btn-group {
    border: none !important;
}

.account .btn-mute,
.account .btn-deafen,
.account .btn-settings,
#voice-connection .btn-info,
#voice-connection .btn-disconnect {
    border: none;
    box-shadow: none;
    transition: background-color 0.2s;
}

.container-iksrDt,
.container-3lnMWU {
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: none;
    border: none;
}

.title-wrap,
.theme-dark .invite-button,
.theme-dark #friends .friends-header {
    background: rgba(0, 0, 0, 0.745) !important;
    border-color: transparent;
}

.guilds-wrapper .guilds-add {
  background: rgba(0, 0, 0, 0.745) !important;
}

.theme-dark .message-group .embed {
    border-color: transparent;
}


/*Redefault the emoji search*/

.emoji-picker .header .search-bar {
    background: inherit !important;
}


/*Scrollbar*/

.theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-thumb,
.theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb {
    background-color: #000!important;
    border-color: #111!important;
}

.theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-track-piece,
.theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}


/* Codeblocks*/

.code,
.theme-dark .message-group .comment .markup pre,
.theme-dark .message-group .comment .markup code.inline,
.theme-dark .message-group .comment .markup pre code {
    background: rgba(0, 0, 0, 0.5) !important;
}

.guilds-wrapper .guilds .guild .guild-inner,
.guilds-wrapper .guild-separator:after {
    background: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .chat .title-wrap {
    border-bottom: 0px;
}

.theme-dark .friends-table .messages .divider.divider-red>span,
.theme-dark .messages-wrapper .messages .divider.divider-red>span,
.chat .divider>span {
    background: #000!important;
}

.chat form {
    margin: 0px;
}

.channel-textarea {
    margin: 20px 20px 30px;
}

.theme-dark .chat .content form .channel-textarea-inner {
  border-color: transparent;
}

.theme-dark .message-group.is-local-bot-message {
  background-image: none !important;
  box-shadow: -20px 0 rgba(0,0,0,0.8), 20px 0 rgba(0,0,0,0.8),-20px -1px 0 0 rgba(0,0,0,0.8),-20px 1px 0 rgba(0,0,0,0.8),20px 1px 0 rgba(0,0,0,0.8),20px -1px 0 rgba(0,0,0,0.8);
  background-color: rgba(0,0,0,0.8) !important;
}

.theme-dark .chat form {
    border-top: 0px;
}

.typing {
    background-color: transparent !important;
    margin: 0 20px;
}