Notes

/* Copyright (c) 2016-2017 DinosParkour
* Please do not redistribute without permission.
* Thank you, and enjoy!
*
* VERSION: 1.4.20
*
*/

/* Background */
.app {
background-image: url(https://i.imgur.com/h0YyOD7.png);
background-size: cover;
}

/*Transparency*/
#voice-connection,
#friends,
.friends-header,
.friends-table,
.guilds-wrapper,
.guild-header header,
.channels-wrap,
.private-channels .search-bar,
.private-channels,
.guild-channels,
.account,
.friend-table-add-header,
.chat,
.content,
.layers,
.title-wrap:not(.search-bar),
.messages-wrapper,
.messages .divider span,
.messages .divider:before,
.content,
.message-group-blocked,
.is-local-bot-message,
.channel-members-loading,
.channel-members-loading .heading,
.channel-members-loading .member,
.typing {
background: transparent !important;
}

/*Guild area*/
.guild-inner:hover,
li.active .guild-inner {
background-color: rgba(115,139,215,0.5) !important;
}

.guilds-wrapper {
width: 85px;
}

.guilds {
background: rgba(20,23,27,0.15);
}

/*Selected guild & unread messages*/
.guilds-wrapper .guilds .guild.unread:before {
background-color: rgba(255,0,0,0.25);
}

.guilds-wrapper .guilds .guild.selected:before {
background-color: rgba(0,0,0,0.25);
}

.guilds-wrapper .guilds .guild.selected:before,
.guilds-wrapper .guilds .guild.unread:before {
width: 77.5px;
height: 55px;
margin-top: -28px;
margin-left: 7.5px;
transition: background-color .25s cubic-bezier(0.4,0,1,1);
}

/*Create new guild button*/
.guilds-add {
opacity: .420;
}

/*Channel area*/
.channel-notice {
opacity: .95;
}

.channel:not(.selected) {
transition: background .3s ease-out;
}

.channel:not(.selected):hover {
transition: background .2s ease-in;
background: rgba(235,232,218,0.05);
}

.guild-channels .channel-text.selected:before,
.guild-channels .channel-text.selected:hover:before,
.guild-channels .channel-text:hover.channel-muted:before,
.guild-channels .channel-text:hover:not(.unread):before,
.private-channels .channel.selected:before,
.private-channels .channel:hover:before {
border-left: 5px solid purple;
}

.private-channels .channel:hover:before {
opacity: .25;
}

.search-result,
.tab-bar-item:hover {
background: rgba(235,232,218,0.05) !important;
}

.friends-row:hover,
.search-result:hover,
.btn-friends.selected,
.search-result.selected,
.channel.selected.private,
div.channel.channel-text.selected {
background: rgba(235,232,218,0.1) !important;
}

/*Voice panel*/
#voice-connection {
border-top: none;
}

/*Buttons*/
#voice-connection .btn,
.account .btn {
border: none;
border-bottom: solid 1px rgba(235,232,218,0.05);
background-color: rgb(42, 42, 42) !important;
opacity: .65;
}

#voice-connection .btn-group,
.account .btn-group {
box-shadow: .75px 1.5px 1px #14171b;
border: none;
}

/*User settings*/
.account .username {
font-size: 15px;
font-weight: bold;
font-family: sans-serif;
text-shadow: 1.35px .75px 1px black;
}

.account {
border-top: none;
}

.status {
border-color: rgba(0,0,0,0.33) !important;
}

/*Popout menu*/
.popout header,
.slider-bar-fill {
background-color: #06c;
}

.user-popout .user-popout-options .btn {
background-color: #06c;
}

.user-popout .user-popout-options .btn:hover {
background-color: #0080ff;
}

.user-popout .username {
font-size: 16px;
}

/*Tooltips*/
.tooltip {
background:#06c;
color: #fff;
}

.tooltip.tooltip-right:after {
border-right-color:#06c;
}

.tooltip.tooltip-top:after {
border-top-color:#06c;
}

/*Friends*/
.icon-friends {
background-color: rgba(0,0,0,0.35) !important;
}


#friends .tab-bar-item {
transition: background .2s ease-out;
}

#friends .tab-bar-item:hover {
transition: background .2s ease-in;
background-color: rgba(0,0,0,0.25) !important;
}

.friends-header {
border-bottom-color: rgba(0,0,0,0.25) !important;
}

/*Channel bar*/
.flex-spacer .title-wrap {
border-color: transparent !important;
}

/*Chat area*/
.chat .flex-spacer {
background: rgba(255,255,255,0.05);
border-top-left-radius: 23px;
border-bottom-left-radius: 23px;
}

.markup {
backface-visibility: hidden;
}

/*Unread messages*/
.chat .new-messages-bar {
background-color: rgba(204,97,61,0.9);
}

.chat .new-messages-bar:hover {
background-color: rgba(204,97,61,1);
}

.chat .new-messages-bar button:last-child {
color: rgba(255,255,255,0.5);
}

/*Mention*/
.markup .mention {
background-color: rgba(255,255,255,.1) !important;
color: #ddd;
border-radius: 10%;
}

.markup .mention:hover {
background-color: rgba(255,255,255,.2) !important;
color: #ddd;
border-radius: 10%;
}

/*URLs*/
.message-group a span {
color: #5af;
text-shadow: 1px 1px 0 #001a33;
}

/*Code blocks*/
.chat .markup code {
background: rgba(0,0,0,0.3) !important;
}

.chat .markup pre {
background: none !important;
border: 1px solid rgba(0,0,0,0.5) !important;
max-width: 75% !important;
}

/*Embeds*/
.message-group .embed {
background-color: rgba(42,42,42,.3);
}

.theme-dark .message-group .embed-wrapper .embed-color-pill {
background-color: rgba(42,42,42,.66)
}

/*Spoiler tags*/
.chat .has-more button,
.message-group-blocked-btn,
.message-group-blocked.revealed {
background-color: rgba(0,0,0,0.3) !important;
}

.message-group-blocked,
.message-group-blocked.revealed {
border: none !important;
}

/*Scrolling bar*/
.scroller-wrap .scroller::-webkit-scrollbar-thumb,
.scroller-wrap .scroller::-webkit-scrollbar-track-piece {
border: 3px solid rgba(255,255,255,0) !important;
background-color: rgba(0,0,0,0.3) !important;
}

/*Message area*/
.channel-textarea .channel-textarea-inner {
background: rgba(10,13,16,0.1);
}

.is-local-bot-message {
box-shadow: none !important;
}

/*Settings panel*/
.settings .settings-header {
background: #1A1D20;
}

.form .btn-primary {
background-color: #1D6586;
}

.form .btn-primary:hover {
background-color: #25ACE8;
}

.user-settings-modal a {
color: #1D6586;
}

.user-settings-modal a:hover {
color: #25ACE8;
}

/*Channel members*/
.channel-members {
background: rgba(20,23,27,0.25) !important;
}

.channel-members .invite-btn {
background: #06c;
transition: background .3s ease-out;
}

.channel-members .invite-btn:hover {
background: #39f;
transition: background .2s ease-in;
}

.channel-members .member:hover,
.channel-members .popout-open {
background: rgba(255,255,255,0.07) !important;
}