Skip to content

Instantly share code, notes, and snippets.

@Emzi0767
Last active September 18, 2018 15:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Emzi0767/9c27a876dfef046ec432eddb02c5b49c to your computer and use it in GitHub Desktop.
Save Emzi0767/9c27a876dfef046ec432eddb02c5b49c to your computer and use it in GitHub Desktop.
Discord CSS (for kicks and giggles). This mostly just removes lines and makes colour less blue.
/*
* Preview:
* v2017.1 https://awau.moe/2d0ccf.png
* v2017.2 https://awau.moe/d8302e.png
* v2018.1 I am too lazy to take screenshots
*/
/* Uncomment the following code if you want two-column guild selector.
.guilds-wrapper
{
width: 140px;
}
.guilds-wrapper > .scroller-wrap
{
width: 176px;
}
.guilds-wrapper > .scroller-wrap > .guilds.scroller > .guild-separator
{
width: 120px;
}
.guilds-wrapper > .scroller-wrap > .guilds.scroller > .guild
{
display: inline-block;
margin-right: 20px;
}
.guilds-wrapper .guilds .friends-online
{
width: 120px;
}
.guilds-wrapper .guilds .guild:first-of-type
{
width: 120px;
}
.guilds-wrapper .guilds .guild:first-of-type > .guild-inner,
.guilds-wrapper .guilds .guild:first-of-type > .guild-inner > a
{
width: 120px;
margin: auto;
}
.guilds-wrapper .guilds .guild:first-of-type > .guild-inner .friends-icon
{
margin: auto;
}
.guilds-wrapper .guilds .guild.selected:nth-child(even)::before,
.guilds-wrapper .guilds .guild.unread:nth-child(even)::before
{
margin-left: 74px;
margin-right: -74px;
}
.guilds-wrapper .guilds .guild.selected:nth-child(odd)::before,
.guilds-wrapper .guilds .guild.unread:nth-child(odd)::before
{
margin-left: 2px;
margin-right: -2px;
}
.guilds-wrapper .guilds .guild::before
{
display: none;
}
.guilds-wrapper > .scroller-wrap > .guilds.scroller > .guild
{
width: 54px;
height: 54px;
margin-right: 16px;
margin-top: 4px;
margin-left: -2px;
}
.guilds-wrapper .guilds .guild > div > div
{
border: 2px solid #1f1f1f;
box-sizing: border-box;
width: 54px;
height: 54px;
border-radius: 27px !important;
transition: border-radius 0.15s;
}
.guilds-wrapper .guilds .guild:hover > div > div,
.guilds-wrapper .guilds .guild.selected > div > div
{
border-radius: 17px !important;
}
.guilds-wrapper .guilds .guild > div > div > a
{
margin: -2px;
box-sizing: border-box;
width: 50px;
height: 50px;
}
.guilds-wrapper .guilds .guild.selected > div > div
{
border-color: #ddd;
}
.guilds-wrapper .guilds .guild.unread > div > div
{
border-color: #aaa;
}
.guilds-wrapper > .scroller-wrap > .guilds.scroller > .guild.guilds-add
{
width: 120px;
border-radius: 25px;
margin-top: 8px;
}*/
#app-mount
{
background: #222;
}
code.hljs,
code.inline
{
font-family: 'Source Code Pro' !important;
font-weight: 400;
background-color: #2f2f2f !important;
}
div[class^='embed-']
{
padding-left: 16px;
margin-left: -3px;
}
div[class^='embed-'] > div[class^='embedPill-']
{
margin: 4px 6px 4px -10px;
width: 3px;
border-radius: 1px;
z-index: 1;
filter: blur(0px);
}
div[class^='embed-'] > div[class^='embedInner-']
{
background-color: rgba(40, 40, 40, 0.3) !important;
border-color: rgba(40, 40, 40, 0) !important;
margin-left: -12px;
padding-left: 12px;
border-radius: 3px !important;
}
div[class^='channelTextArea-'] > div[class^='inner-']
{
border: none;
border-radius: 4px;
}
.channel-textarea-upload,
.channel-textarea-upload:hover
{
border-right: none;
}
div[class^='channelTextArea-'] > div[class^='inner-']
{
background: #444;
}
div[class^='channels-'] > div[class^='container']
{
border-bottom: none;
}
div[class^='channels-'] header[class^='header-'],
div[class^='channels-'] > div[class^='privateChannels-'] > div[class^='searchBar'],
div[class^='channels-'] > div:nth-last-child(2):not([class^='flex'])
{
box-shadow: none;
border: none !important;
}
.account > .btn-group,
#voice-connection > .btn-group
{
border: none;
}
.account > .btn-group > .btn,
#voice-connection > .btn-group > .btn
{
border-right: none;
background: #2f2f2f;
}
div[class^='userPopout-'] > div[class^='body-'],
div[class^='userPopout-'] > div[class^='footer-'],
div[class^='userPopout-'] > div[class^='footer-'] .quick-message
{
color: #ddd;
border-bottom: none !important;
}
div[class^='userPopout-'] > div[class^='footer-'] > input[class^='quickMessage-']
{
border: none !important;
}
div[class^='userPopout-'] > div[class^='headerNormal-'],
div[class^='userPopout-'] > div[class^='headerPlaying-']
{
background: #111;
}
.member-roles .member-role
{
background: #333;
color: #ddd;
border-color: #333;
}
.member-roles .member-role:hover
{
border-color: #444 !important;
}
div[class^='userPopout-'] > div[class^='headerNormal-'] > div > div[class^='avatarWrapperNormal-'] > div[class^='avatar-'],
div[class^='userPopout-'] > div[class^='headerNormal-'] > div > div[class^='avatarWrapperNormal-'] > div[class^='avatar-'] > div[class^='avatarStatusNormal-']
{
border-color: #111 !important;
}
.status.status-online,
div[class*='online-'].status,
div[class*='online-'][class*='status-']
{
background: #007fff;
}
.status.status-idle,
div[class*='idle-'].status,
div[class*='idle-'][class*='status-']
{
background: #ff7f00;
}
div[class^='chat'] > div[class^='titleWrapper-'] > div,
.friends-header,
.search-header,
#friends > div:first-child,
div[class^='channels-'] > div[class^='privateChannels-'] > div[class^='searchBar']
{
border-bottom: none !important;
box-shadow: none !important;
}
.friends-column-separator
{
background-color: transparent !important;
}
.friends-row
{
border-top: none !important;
}
.message.mentioned > .body > .message-text
{
background: rgba(0, 127, 255, 0.2);
}
.message.mentioned > .body > .message-text::after
{
background: rgba(0, 127, 255, 0.2);
border-left-color: #007fff;
}
div[class^='channels-'] div[class^='scroller-'] > div> div > div:not([class^='wrapperDefaultVoice']):not([class^='wrapperHoveredVoice']):not([class^='wrapperSelectedVoice']):not([class^='flex']) > div > div:last-of-type > div > div,
div[class^='guild-'] > div[class*='badge-']
{
background-color: #ff3300 !important;
}
div[class^='messagesWrapper-'],
div[class^='typing-'],
div[class^='chat'] > div[class^='content'],
div[class^='chat'] > div[class^='content'] > div > form,
div[class^='emojiPicker-'],
div[class^='emojiPicker-'] div[class^='category-'],
.search-bar.search-bar-light,
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div[class^='contentHoveredText'],
div[class^='privateChannels-'] div[class^='scroller-'] > div[class^='channel-']:hover > a,
.search-filter,
.friends-table,
#friends,
#user-profile-modal > .header,
#user-profile-modal > .tab-bar-container,
#user-profile-modal > .avatar-wrapper,
#user-profile-modal > .scroller-wrap > .guilds.scroller,
.popout > .option-popout > .btn-item:hover,
.popout > .context-menu > .item:hover,
div[class^='userPopout-'] > div[class^='footer-'] > input[class^='quickMessage-'],
.app > .layers > .layer,
.search-result-message.hit,
div[class^='scroller-'][class*='members-'] > div[class*='member-']:hover > div
{
background-color: #333333 !important;
}
div[class^='channels-'] div[class^='scrollerWrap'],
.channels-wrap .private-channels header,
div[class^='scroller-'][class*='members-'],
.diversity-selector .popout,
.invite-button,
div[class^='channels-'] div[class^='scroller-'] > div > div > div[class^='wrapperDefaultVoice'] > div > div:last-of-type > div > div,
div[class^='channels-'] div[class^='scroller-'] > div > div > div[class^='wrapperHoveredVoice'] > div > div:last-of-type > div > div,
div[class^='channels-'] div[class^='scroller-'] > div > div > div[class^='wrapperSelectedVoice'] > div > div:last-of-type > div > div,
.friends-row:hover,
#user-profile-modal > .scroller-wrap > .scroller[class^='guilds-'] > div[class^='guild-']:hover,
.popout > .option-popout,
.popout > .context-menu,
.search-results-wrap,
.search-header,
.search-results-wrap .channel-separator .channel-name
{
background-color: #2f2f2f !important;
}
div[class^='channels-'] > div:last-of-type,
div[class^='chat'] > div[class^='titleWrapper-'] > div,
.channels-wrap > div:nth-last-child(2):not([class^='flex']),
div[class^='channels-'] > div[class^='container']:nth-last-child(2),
div[class^='channels-'] header[class^='header-'],
div[class^='channels-'] > div[class^='privateChannels-'] > div[class^='searchBar'],
div[class^='guildsWrapper'],
div[class^='emojiItem-'][class~='selected-'],
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div[class^='contentSelectedText'],
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div[class^='contentDefaultVoice']:active,
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div[class^='contentHoveredVoice']:active,
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div[class^='contentSelectedVoice']:active,
div[class^='privateChannels-'] div[class^='scroller-'] > div[class^='channel-'][class*='selected-'] > a,
.search-answer,
#user-profile-modal .connected-account,
div[class^='userPopout-'] > div[class^='body-'],
div[class^='userPopout-'] > div[class^='footer-'],
.popout > div[class^='userPopout-'] > div[class^='body-'] > .note > textarea,
.ui-video,
#friends > div:first-child,
div[class^='scroller-'][class*='members-'] > div[class*='member-'].popout-open > div
{
background-color: #222222 !important;
}
#user-profile-modal > .header::after
{
background: none;
}
#user-profile-modal > .header,
#user-profile-modal > .tab-bar-container,
#user-profile-modal > .tab-bar-container .tab-bar-item,
#user-profile-modal > .scroller-wrap > .scroller[class^='guilds-'] > div[class^='guild-'],
.popout > .option-popout > .btn-item,
.popout > .context-menu > .item,
.search-result::before,
.search-result::after
{
color: #ddd;
background-image: none !important;
}
#user-profile-modal > .header > .header-info *
{
color: #ddd;
}
#user-profile-modal > .tab-bar-container
{
box-shadow: 0 2px 3px 0 #000 !important;
border-bottom: none;
}
#user-profile-modal > .tab-bar-container > .tab-bar > .tab-bar-item.selected
{
border-bottom-color: #111;
}
#user-profile-modal > .tab-bar-container > .tab-bar > .tab-bar-item:hover
{
border-bottom-color: #222;
}
#user-profile-modal > .tab-bar-container .tab-bar-item.selected
{
color: #fff;
}
#user-profile-modal > .header > .header-info .discriminator,
#user-profile-modal > .header > .header-info .activity,
#user-profile-modal .guilds > .section > .section-header,
.popout > div[class^='userPopout-'] > div[class^='body-'] > div[class^='flex-'] > div,
.popout > div[class^='userPopout-'] > div[class^='headerNormal-'] > div[class^='flex-'] > div[class^='headerTagNormal-'] > span
{
color: #bbb !important;
}
#user-profile-modal .status
{
border-color: #333 !important;
}
#user-profile-modal .connected-account
{
border: none !important;
}
#user-profile-modal .connected-account > .connected-account-name-inner > .connected-account-name,
#user-profile-modal .guilds > .section > .note,
.popout > div[class^='userPopout-'] > div[class^='headerNormal-'] > div[class^='flex-'] > div[class^='headerName-']
{
color: #ddd !important;
}
#user-profile-modal .guilds > .section + .section
{
border-top: none;
}
.popout > .option-popout,
.popout > .context-menu
{
border-color: #2f2f2f;
}
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div > div[class^='name']
{
font-size: 11pt;
}
div[class^='channels-'] div[class^='scroller-'] > div > div > div > div > div[class^='marginReset'] > svg
{
height: 10pt;
}
.guilds-add
{
background-color: #1d1d1d !important;
}
div[class^='emojiPicker-'] div[class^='category-']
{
color: #999;
}
div[class^='guildInner-']
{
background-color: #2f2f2f !important;
}
#user-profile-modal > .scroller-wrap > .guilds.scroller > .guild > .guild-inner
{
background-color: transparent !important;
}
div[class^='newMessagesBar-']
{
background-color: rgba(0, 127, 255, 0.9) !important;
}
div[class^='jumpToPresentBar']
{
background-color: rgba(102, 102, 102, 0.9) !important;
}
.search-bar > .search-bar-inner
{
background-color: #333 !important;
}
.dimmer.visible
{
background-color: rgba(51, 51, 51, 0.3) !important;
z-index: 1;
}
div[class^='emojiPicker-'] div[class^='category-']
{
z-index: 0;
}
.search-bar > .search-bar-inner > input
{
color: #999 !important;
}
.diversity-selector .popout,
.invite-button
{
border: none;
}
.scroller-wrap .scroller::-webkit-scrollbar
{
width: 8px;
}
.scroller-wrap .scroller::-webkit-scrollbar-thumb
{
background: #222;
border: none;
border-radius: 4px;
}
.scroller-wrap .scroller::-webkit-scrollbar-track-piece
{
background: #333 !important;
border: 3px solid #333 !important;
border-radius: 4px;
}
div[class^='messageGroupBlockedBtn-']
{
display: none;
}
div[class^='messageGroupBlocked-']
{
background: transparent !important;
box-sizing: content-box;
height: 0;
border: none;
border-bottom: 1px solid;
border-color: hsla(0,0%,100%,.04) !important;
}
.search-results-wrap .search-result .hit
{
box-shadow: none !important;
border-color: #222 !important;
}
.emoji
{
margin: 0 !important;
}
.message-group .comment .markup pre
{
border: 1px solid #111;
border-radius: 2px;
border-color: #222 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment