Skip to content

Instantly share code, notes, and snippets.

@erisdev
Last active August 9, 2017 14:40
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 erisdev/98ba52158cf7af694283ebc9e1934e79 to your computer and use it in GitHub Desktop.
Save erisdev/98ba52158cf7af694283ebc9e1934e79 to your computer and use it in GitHub Desktop.
make discord chats not 99% whitespace and move that pesky channel list out of the way

install betterdiscord then paste this in the custom CSS textbox

@import url("https://cdn.rawgit.com/erisdev/98ba52158cf7af694283ebc9e1934e79/raw/4ec50b6510ea94c09502ad78be83407cd51c5c9d/deflatediscord.css");

which can be found in preferences

where to find the custom CSS option

@import url(https://fonts.googleapis.com/css?family=Fira+Sans+Condensed);
@charset "UTF-8";
.chat,
.chat .content > :first-child {
z-index: 1; }
.guilds-wrapper {
z-index: 3; }
.channels-wrap {
width: 240px;
margin-right: -240px;
z-index: 2;
position: relative;
margin-right: -240px;
transform: translateX(-100%);
transition: transform 200ms ease 200ms, box-shadow 200ms ease 200ms; }
.channels-wrap.vec-expanded, .guilds-wrapper:hover ~ .channels-wrap, .channels-wrap:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !important;
transform: translateX(0); }
@media (max-width: 1000px) {
.channel-members-wrap {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !important;
width: 240px;
margin-left: -240px;
z-index: 2; } }
/* fit more messages onscreen */
.messages {
padding: 4px 0; }
.message-group {
margin: 0 8px;
padding: 5px 0; }
.message-group .avatar-large {
margin-right: 8px; }
.message-group h2 strong {
font-family: "Fira Sans Condensed", "Whitney", "Symbola", sans-serif;
font-size: smaller !important; }
.divider {
margin: 1em 0; }
/* shrink the top bar! measure space between its contents in pixels, not miles */
#friends .friends-header,
.chat .title-wrap {
height: 40px;
min-height: auto;
font-family: "Fira Sans Condensed", "Whitney", "Symbola", sans-serif; }
.chat .title-wrap .topic {
margin-left: 4px;
padding-left: 0; }
.guild-header header {
height: 40px;
padding: 0 16px; }
.header-toolbar {
margin-left: 8px; }
.header-toolbar button + button {
margin-left: 0; }
.header-toolbar .search {
margin: 4px; }
/* deflate that ridiculous textbox */
.account {
height: auto;
padding: 4px 8px; }
.chat form {
display: flex;
flex-direction: column;
margin: 0;
padding: 6px 8px 0;
border: none; }
.channel-text-area-default {
margin: 0;
margin-bottom: 26px; }
.typing {
position: static;
margin-top: -26px; }
/* compress the user list */
.channel-members {
padding: 0; }
.channel-members h2,
.channel-members .member + h2 {
margin: 12px 0 4px 0;
padding: 0 8px; }
.channel-members .member {
padding: 4px 8px; }
/* just fucking hide all this extraneous shit */
.header-toolbar .separator,
.chat .title-wrap .topic:before {
display: none; }
.header-toolbar {
display: flex; }
.header-toolbar *:not(button):nth-child(4) {
order: -1; }
@media (max-width: 600px) {
.header-toolbar {
flex-direction: column;
margin-left: -40px;
padding: 5px;
padding-top: 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
transform: translateY(calc(-50% + 20px));
transition: transform 200ms ease 300ms; }
.header-toolbar:after {
content: "\25BC";
width: 30px;
height: 30px;
line-height: 30px;
text-align: center; }
.header-toolbar:hover {
transform: translateY(calc(50% - 20px)); }
.header-toolbar:hover:after {
content: "\25B2"; }
.header-toolbar :not(button) {
display: none; }
.theme-dark .header-toolbar {
background: rgba(0, 0, 0, 0.7);
color: #d2d2d2; }
.theme-light .header-toolbar {
background: rgba(255, 255, 255, 0.7);
color: #595d63; } }
.guild-header header,
.search-bar input,
.search-bar.search-bar-light input,
.channel-textarea-inner textarea,
.quickswitcher .result,
.quickswitcher .result .result-type,
.quickswitcher .result .result-username,
.quickswitcher .result .result-note,
.user-settings-games .game-input,
.message-group .edit-message .edit-operation,
.ui-text-input.ui-text-area .input,
body, input, textarea, button {
font-family: "Whitney", "Symbola", sans-serif; }
.message-group .comment .markup pre,
.message-group .comment .markup code.inline,
.markdown-modal pre,
.markdown-modal code.inline,
code {
font-family: "Consolas", "Liberation Mono", "Menlo", monospace; }
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJidW5kbGUuY3NzIiwic291cmNlUm9vdCI6IiJ9*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment