Skip to content

Instantly share code, notes, and snippets.

@OleVik
Last active November 22, 2018 13:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save OleVik/f080c37f5ed9cbe4c234511adb22e021 to your computer and use it in GitHub Desktop.
Save OleVik/f080c37f5ed9cbe4c234511adb22e021 to your computer and use it in GitHub Desktop.
TamperMonkey-script to tighten up Discord interface
// ==UserScript==
// @name Discord Custom CSS
// @version 1.4
// @author OleVik
// @include https://discordapp.com/*
// @include http://discordapp.com/*
// @exclude https://discordapp.com/invite/*
// @exclude http://discordapp.com/invite/*
// @exclude https://discordapp.com/oauth2/*
// @exclude http://discordapp.com/oauth2/*
// @exclude https://discordapp.com/developers/*
// @exclude http://discordapp.com/developers/*
// @grant GM_addStyle
// @run-at document-end
// ==/UserScript==
GM_addStyle ( `
[class*="membersGroup-"] {
height: 26px;
padding-top: 8px;
padding-left: 8px;
}
[draggable="true"] [class*="containerDefault-"] {
padding-top: 12px;
}
[class*="channels-"] {
width: auto;
}
[class*="username-"] {
color: #23262a !important;
font-weight: bold !important;
}
[class*="message-"] [class*="markup-"],
[class*="message-"] [class*="timestampCozy-"] {
color: black !important;
}
[class*="membersWrap-"] {
width: auto;
max-width: 180px;
overflow: auto;
}
[class*="messages-"] > [class*="containerCozy-"] {
padding-bottom: 8px;
padding-top: 8px;
}
[class*="messages-"] > [class*="containerCompact-"] {
padding: 4px 0;
}
[class*="textArea-"] {
color: black !important;
background: white;
}
div[class^="ckbx-style-"] input[type=checkbox] {
position: absolute;
opacity: 0;
}
.ckbx {
font-size: 23px;
}
.ckbx input[type=checkbox] {
position: absolute;
opacity: 0;
}
.ckbx label {
width: 2em;
height: 1em;
position: relative;
cursor: pointer;
display: block;
}
.ckbx label:before {
content: '';
position: absolute;
width: 2em;
height: 1em;
left: 0.1em;
transition: background 0.1s 0.1s ease;
background: rgba(0,0,0,0.4);
border-radius: 50px;
}
.ckbx label:after {
content: '';
position: absolute;
width: 1em;
height: 1em;
border-radius: 50px;
left: 0;
transition: all 0.2s ease;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
background: #303030;
z-index: 2;
}
.ckbx input[type=checkbox]:checked + label:before {
background: #333;
}
.ckbx input[type=checkbox]:checked + label:after {
left: 1.1em;
background: #fcfff4;
}
.serverToggle-wrapper {
margin: 0 4px;
}
.serverToggle {
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 2px solid #999ca1;
width: 16px;
}
.serverToggle::-moz-focus-inner {
border: 0;
padding: 0;
}
.serverToggle:before {
content: "";
display: block;
border-bottom: 2px solid #999ca1;
width: 100%;
margin-bottom: 5px;
}
.serverToggle:after {
content: "";
display: block;
border-bottom: 2px solid #999ca1;
width: 100%;
margin-bottom: 5px;
}
.toggle-servers {
display: none;
}
.toggle-servers:checked ~ .serverToggle {
border-bottom-color: #4f545c;
}
.toggle-servers:checked ~ .serverToggle:before {
border-bottom-color: #4f545c;
}
.toggle-servers:checked ~ .serverToggle:after {
border-bottom-color: #4f545c;
}
` );
function toggleServers(){
var checkbox = document.getElementById('toggle-servers');
var isChecked = checkbox.checked;
if (isChecked){
document.getElementsByClassName('guildsWrapper-5TJh6A')[0].style.display = 'flex';
} else{
document.getElementsByClassName('guildsWrapper-5TJh6A')[0].style.display = 'none';
}
}
function toggleChannels(){
var checkbox = document.getElementById('toggle-channels');
var isChecked = checkbox.checked;
if (isChecked){
document.getElementsByClassName('channels-Ie2l6A')[0].style.display = 'flex';
} else{
document.getElementsByClassName('channels-Ie2l6A')[0].style.display = 'none';
}
}
function ready() {
document.getElementsByClassName("iconMargin-2YXk4F")[0].insertAdjacentHTML('beforebegin', '<span class="serverToggle-wrapper" tabindex="0" role="button"><input class="toggle-servers" id="toggle-servers" type="checkbox" checked><label for="toggle-servers" class="serverToggle"></label></span>');
var checkbox1 = document.getElementById('toggle-servers');
checkbox1.addEventListener("change", toggleServers, false);
document.getElementsByClassName("downloadAppButton-3EFlA6")[0].insertAdjacentHTML('afterend', '<button type="button" class="downloadAppButton-3EFlA6">Channel</button><div class="ckbx"><input type="checkbox" id="toggle-channels" value="0" name="ckbx" checked><label for="toggle-channels"></label></div>');
var checkbox2 = document.getElementById('toggle-channels');
checkbox2.addEventListener("change", toggleChannels, false);
}
window.onload = setTimeout(ready, 5000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment