Greasy Fork is available in English.
Reduce gap between messages, optionally unbrighten name of selected channel
// ==UserScript==
// @name Discord Tweaks
// @namespace https://greasyfork.org/en/users/8615-joeytwiddle
// @version 0.1.9
// @description Reduce gap between messages, optionally unbrighten name of selected channel
// @author joeytwiddle
// @match https://discord.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=discord.com
// @license MIT
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
//// Options
// Around 21/10/2022 Discord put a larger vertical gap between messages.
// his reduces the gap size similar to how it was before.
const reduceGapBetweenMessages = false; // Turned off while I try Appearance > Compact Mode. I also see some settings in Discord we could play with.
// When a channel has activity (new messages), Discord makes the name of that channel bold and white, which is fine.
// But Discord also does that for the selected channel, which makes it look like it has new activity, when maybe it doesn't.
// I can't stand that behaviour, so I disable it.
const doNotBrightenSelectedChannel = true;
// It turns out that on Windows, my Discord tab was zoomed to 70%, although I'm not sure how, because that wasn't in zoomValues. Was it copying the zoom from Linux?
const usePreferredFont = false; // navigator.userAgent.match(/Linux/);
const giveTextInputBoxADarkBackground = true;
//// End Options
//
if (reduceGapBetweenMessages) {
GM_addStyle(`
/* Original fix for 21/10/2022 */
.group-spacing-16 .groupStart-3Mlgv1 {
margin: 0.25em;
}
/* New CSS classes. It looks like [role=article] will be the most resilient. I haven't seen it used for any other elements on a standard page, but it could be used in some Discord UI / menus. */
[role=article], .message-2CShn3, .cozy-VmLDNB, .zalgo-26OfGz {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
margin-top: 0.05rem !important;
}
`);
}
if (doNotBrightenSelectedChannel) {
// The problem is this CSS rule, specifically the .modeSelected selector, which highlights the currently selected channel the same as channels with unread activity.
/*
.modeConnected-NrO4cP .name-28HaxV,
.modeConnected-NrO4cP:hover .name-28HaxV,
.modeSelected-3DmyhH .name-28HaxV,
.modeSelected-3DmyhH:hover .name-28HaxV,
.modeUnread-3Cxepe .name-28HaxV,
.modeUnread-3Cxepe:hover .name-28HaxV,
.notInteractive-2tFrlE.modeConnected-NrO4cP .name-28HaxV,
.notInteractive-2tFrlE.modeSelected-3DmyhH .name-28HaxV {
color: var(--interactive-active);
}
*/
// Let's try to fix it
GM_addStyle(`
.modeSelected-3DmyhH .name-28HaxV {
color: var(--channels-default);
}
/* But if it really IS unread, then we will brighten the channel name */
.modeSelected-3DmyhH.modeUnread-3Cxepe .name-28HaxV {
color: var(--interactive-active);
}
`);
}
if (usePreferredFont) {
// TODO: Isn't `font-family` set to `inherit` for this selector? If so, we should just set this rule on `body`, to override `--font-primary` for the entire page.
// I note that Windows uses "gg sans", but "Noto Sans" also looks ok for me (slightly more dense and maybe slighly thicker)
GM_addStyle(`
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
font-family: "Bitstream Vera Sans", "Sans", "Open Sans", "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
/*
html {
font-size: 91%;
}
*/
`);
//const fontScale = '91%'; // when using Firefox with zoom 80%
const fontScale = '102%'; // when using Firefox with zoom 67%
document.firstElementChild.style.fontSize = fontScale;
window.addEventListener('focus', () => { setTimeout(() => { document.firstElementChild.style.fontSize = fontScale; }, 1); })
window.addEventListener('blur', () => { setTimeout(() => { document.firstElementChild.style.fontSize = fontScale; }, 1); })
}
if (giveTextInputBoxADarkBackground) {
GM_addStyle(`
/*
The text input box used this (quite light):
background: var(--bg-overlay-3,var(--channeltextarea-background));
background: hsl(225, 6.5%, 23.5%);
The search textbox used this (nicely dark):
background: var(--bg-overlay-3,var(--background-tertiary));
background: hsl(225, 6.5%, 12.5%);
*/
/* But we will do something different, for both: slightly dark when unfocused, quite dark when focused */
/* Old selector, no longer working:
.channelTextArea-1FufC0 .scrollableContainer-15eg7h,
.searchBar-jGtisZ {
*/
/* This new selector might last a bit longer than the class, but it requires !important, and I couldn't find a new selector for the search box */
main > form > div > div,
.searchBar_e0c60b {
background: hsl(225, 6.5%, 18%) !important;
}
main > form > div > div:focus-within,
.searchBar_e0c60b:focus-within {
background: hsl(225, 6.5%, 17%) !important;
}
`);
}
})();