Last active
January 24, 2024 18:57
-
-
Save ivan/3cfa15b854103690f266ecacf4f81504 to your computer and use it in GitHub Desktop.
Fix Discord / discordapp.com to use an aligned xchat/hexchat-like nick gutter
This file contains hidden or 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
| // ==UserScript== | |
| // @name Discord: use aligned nick gutter and fix styles | |
| // @description Discord: use xchat-like aligned nick gutter and fix styles | |
| // @namespace discord_styles | |
| // @include https://discordapp.com/* | |
| // @version 1.1 | |
| // @grant GM_addStyle | |
| // @run-at document-start | |
| // ==/UserScript== | |
| // NOTE: designed ONLY for use with Light theme, Compact message display, 90% text scaling | |
| // (Hit the User Settings gear icon in the bottom-left -> Appearance section) | |
| GM_addStyle(` | |
| body { | |
| font-family: sans-serif; | |
| } | |
| /* Make chat messages darker */ | |
| .message-group .comment .markup { | |
| color: #000; | |
| } | |
| /* Make timestamps darker */ | |
| .message-group.compact .timestamp { | |
| color: #555; | |
| } | |
| /* Make channel topic darker */ | |
| .chat>.title-wrap>.topic { | |
| color: #4f545c; | |
| } | |
| /* Make input box text darker */ | |
| textarea { | |
| color: #000 !important; | |
| font-family: sans-serif; | |
| } | |
| /* Less blinding-white background */ | |
| .chat, .messages-wrapper { | |
| background-color: #f7f7f7; | |
| } | |
| /* Align usernames like in the xchat nick gutter */ | |
| div.markup { | |
| padding-left: 0 !important; | |
| text-indent: 0 !important; | |
| } | |
| div.markup span.timestamp, | |
| div.markup span.username-wrapper, | |
| div.markup span.message-content { | |
| display: inline-block; | |
| } | |
| span.username-wrapper { | |
| min-width: 170px; | |
| text-align: right; | |
| } | |
| span.timestamp, | |
| span.username-wrapper { | |
| vertical-align: top !important; | |
| padding-top: 2px; | |
| } | |
| strong.user-name { | |
| text-align: right; | |
| } | |
| span.message-content { | |
| max-width: 40em; | |
| } | |
| /* Prevent 'Month Day, Year' dividers from overlapping messages */ | |
| .chat .divider>span { | |
| background-color: initial; | |
| font-size: 12px; | |
| } | |
| /* Reduce padding between messages of different users */ | |
| .message-group.compact.message-group { | |
| padding: 0; | |
| } | |
| /* Remove vertical margin between messages */ | |
| div.message { | |
| margin: 0 !important; | |
| } | |
| div.markup { | |
| margin-top: 0 !important; | |
| } | |
| /* Increase line height in paragraphs in messages */ | |
| span.message-content { | |
| line-height: 140%; | |
| } | |
| /* Remove padding around input box */ | |
| .channel-text-area-default { | |
| margin: 0 !important; | |
| } | |
| .chat form { | |
| margin: 0 !important; | |
| } | |
| /* I do not care if someone is typing (indicator also overlaps our modified textarea with 0 margin) */ | |
| div.typing { | |
| display: none; | |
| } | |
| `); |
Author
ivan
commented
Sep 27, 2017
How do you use this in a web browser?
Okay i got it working through tampermonkey but unfortunately it doesn't seem to do anything
i created https://userstyles.world/style/14315/ircord which is inspired by this and currently works
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment