Last active
September 18, 2018 15:55
Discord CSS (for kicks and giggles). This mostly just removes lines and makes colour less blue.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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