NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Discord Custom Styling
// @namespace http://your.namespace.com
// @version 1.2
// @description Custom styles for Discord
// @author sam_speak
// @match https://discord.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Function to add CSS styles to the page
function addStyles() {
// Styles for NSFW labeling
const nsfwStyle = document.createElement('style');
nsfwStyle.innerHTML = `
[class*=linkTop_]:has(> [class*=iconContainer__] [d^="M18.09 1.63"]) > [class*=children_]::after {
content: "NSFW";
background: var(--status-danger-background);
color: var(--status-danger-text);
padding: 0 6px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
line-height: 16px;
margin-left: 4px;
}
`;
document.head.appendChild(nsfwStyle);
// Additional styles for custom scrollbar
const scrollbarStyle = document.createElement('style');
scrollbarStyle.innerHTML = `
[class*="none_"]::-webkit-scrollbar {
width: 5px;
background: transparent;
border: none;
}
[class*="none_"]::-webkit-scrollbar-thumb {
background: #101115;
}
`;
document.head.appendChild(scrollbarStyle);
// Styles for rotating buttons
const rotateStyle = document.createElement('style');
rotateStyle.innerHTML = `
button.button__4f306 {
border-radius: 50%;
}
.button__4f306:last-child,
.attachButton_b1db83 .attachButtonInner__3ce2b,
.emojiButton__30ec7 .contents_fb6220,
.closeButton__34341 {
transition: transform 1s ease;
}
.button__4f306:last-child:hover,
.attachButton_b1db83:hover .attachButtonInner__3ce2b,
.emojiButton__30ec7:hover .contents_fb6220,
.closeButton__34341:hover {
transform: rotate(360deg);
}
`;
document.head.appendChild(rotateStyle);
// Styles for user popout customization
const popoutStyle = document.createElement('style');
popoutStyle.innerHTML = `
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 {
margin-left: 22px;
}
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:first-child::before,
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(2)::before,
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(3)::before {
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
padding: 7px;
margin-left: -17px;
margin-top: 2px;
content: '';
background-color: var(--header-primary);
position: absolute;
}
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:first-child::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-music-4'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Cpath d='m9 9 12-2'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3Cline x1='12' x2='12' y1='19' y2='22'%3E%3C/line%3E%3C/svg%3E");
}
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(2)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-mic'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'%3E%3C/path%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'%3E%3C/path%3E%3Cline x1='12' x2='12' y1='19' y2='22'%3E%3C/line%3E%3C/svg%3E");
}
.activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(3)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-disc-2'%3E%3Ccircle cx='12' cy='12' r='4'%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'%3E%3C/line%3E%3C/svg%3E");
}
`;
document.head.appendChild(popoutStyle);
// Custom styles for mentions
const mentionStyle = document.createElement('style');
mentionStyle.innerHTML = `
/* Make My Mention Different From Other Mentions without affecting #CHANNEL */
.theme-dark .mentioned__58017 .mention {
color: red !important;
}
.theme-dark .mention {
color: grey;
background-color: transparent;
}
/* Better Mentions Pulse (after fix) */
.mentioned__58017 .mention {
background-color: transparent !important;
}
.theme-dark .mentioned__58017 .mention {
cursor: pointer;
box-shadow: 0 0 0 red;
animation: pulse 1.6s infinite;
}
.cozy_f5c119 .messageContent__21e69 {
padding-top: 1px;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 2px 2px transparent;
}
70% {
-webkit-box-shadow: 0 0 2px 2px red;
}
100% {
-webkit-box-shadow: 0 0 0 0 transparent;
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 transparent;
box-shadow: 0 0 0 0 transparent;
}
70% {
-moz-box-shadow: 0 0 2px 2px red;
box-shadow: 0 0 2px 2px red;
}
100% {
-moz-box-shadow: 0 0 0 0 transparent;
box-shadow: 0 0 0 0 transparent;
}
}
`;
document.head.appendChild(mentionStyle);
// Additional styles for sidebar and panels
const sidebarPanelStyle = document.createElement('style');
sidebarPanelStyle.innerHTML = `
[class^="sidebar_"] [class^="panels_"] {
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border: 1px solid var(--background-modifier-accent);
border-radius: 20px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.45);
}
[class^="sidebar_"] [class^="panels_"] [class^="container_"],
[class^="sidebar_"] [class^="panels_"] [class^="panel_"] {
background: transparent !important;
}
[class^="sidebar_"] [class^="panels_"] [class^="container_"] [class^="avatarWrapper_"] + [class^="flex_"] {
margin-left: -10px;
}
#vc-spotify-player {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
/* Nitro Theme Shit */
html.custom-theme-background [class^="sidebar_"] {
background: var(--bg-overlay-3);
}
html.custom-theme-background [class^="sidebar_"] [class^="panels_"] {
background: var(--bg-overlay-1);
}
`;
// Additional styles for timestamp opacity
const timestampOpacityStyle = document.createElement('style');
timestampOpacityStyle.innerHTML = `
[class*="timestamp"][class*="CompactTimeStamp"] {
opacity: 0;
will-change: opacity;
}
[class*="messageListItem"] > [class*="message"]:hover [class*="timestamp"][class*="CompactTimeStamp"] {
opacity: 1;
}
`;
document.head.appendChild(timestampOpacityStyle);
document.head.appendChild(sidebarPanelStyle);
// Custom styles for channel, members, dms, and settings
const customHoverStyle = document.createElement('style');
customHoverStyle.innerHTML = `
.wrapper__7bcde .link__95dc0,
.container__4f20e,
.channel_c21703,
.side_b4b3f6 .item__48dda {
transition: margin-left 0.2s ease;
}
.wrapper__7bcde:hover .link__95dc0,
.side_b4b3f6 .item__48dda:hover {
margin-left: 10px;
}
.container__4f20e:hover,
.channel_c21703:hover {
margin-left: 18px;
}
`;
document.head.appendChild(customHoverStyle);
// Additional styles for user context menu
const userContextMenuStyle = document.createElement('style');
userContextMenuStyle.innerHTML = `
#user-context-close-dm,
#user-context-remove-friend,
#user-context-block {
color: var(--status-danger);
}
#user-context-close-dm:active,
#user-context-remove-friend:active,
#user-context-block:active {
background-color: var(--red-500) !important;
color: var(--white-500) !important;
}
#user-context-close-dm[class*="focused-"],
#user-context-remove-friend[class*="focused-"],
#user-context-block[class*="focused-"] {
background-color: var(--button-danger-background);
color: var(--white-500);
}
`;
document.head.appendChild(userContextMenuStyle);
// Additional styles for sidebar view and layer
const customStyles = document.createElement('style');
customStyles.innerHTML = `
.standardSidebarView__1129a {
top: 0 !important;
}
.layer__2efaa + .layer__2efaa {
border-radius: 10px !important;
box-shadow: 5px 5px 25px black;
border: 1px solid var(--border-strong);
width: 1100px !important;
height: 80vh !important;
margin: auto !important;
padding: 0 !important;
}
#app-mount .baseLayer__8fda3 {
opacity: 1 !important;
transform: unset !important;
}
`;
document.head.appendChild(customStyles);
// Additional styles for avatar customization
const avatarCustomizationStyle = document.createElement('style');
avatarCustomizationStyle.innerHTML = `
.contents-2MsGLg .avatar-2e8lTP {
transform: scale(0.85);
margin-top: -0.25em;
border: 4px solid transparent;
box-shadow: 0 0 0 2px #747f8d;
}
.contents-2MsGLg .vc-platform-indicator > svg {
display: none;
}
.contents-2MsGLg:has(svg[fill="var(--green-360)"]) .avatar-2e8lTP {
box-shadow: 0 0 0 2.5px #43b581;
}
.contents-2MsGLg:has(svg[fill="var(--yellow-300)"]) .avatar-2e8lTP {
box-shadow: 0 0 0 2.5px #faa61a;
}
.contents-2MsGLg:has(svg[fill="var(--red-400)"]) .avatar-2e8lTP {
box-shadow: 0 0 0 2.5px #f04747;
}
.contents-2MsGLg:has(span[data-tag="bot"]) .avatar-2e8lTP {
box-shadow: 0 0 0 2.5px #5865f2;
}
`;
document.head.appendChild(avatarCustomizationStyle);
// Additional styles for matching channel text area to user container
const channelTextAreaStyle = document.createElement('style');
channelTextAreaStyle.innerHTML = `
/* Match channel text area to user container */
.form__13a2c {
padding: 0;
}
.channelTextArea__2e60f {
margin: 0;
}
.scrollableContainer__33e06 {
border-radius: 0;
}
.inner__9fd0b {
min-height: 48px;
padding-top: 4px;
}
/* Move typing indicators */
.typing__6fd1d {
top: -24px;
left: 0px;
width: fit-content;
padding-right: 9px;
border-radius: 0 8px 0 0;
background: var(--bg-overlay-3, var(--channeltextarea-background));
}
/* Remove single pixel padding from user container */
.container_ca50b9 {
margin: 0;
}
/* End Match channel text area to user container */
`;
document.head.appendChild(channelTextAreaStyle);
const jumpToPresentBarStyle = document.createElement('style');
jumpToPresentBarStyle.innerHTML = `
/* Jump To Present Bar Revamp */
[class*="jumpToPresentBar"] {
display: contents;
}
[class*="jumpToPresentBar"] > button:first-child {
display: none;
}
[class*="jumpToPresentBar"] > button:last-child {
position: absolute;
z-index: 1;
bottom: 24px;
right: 22px;
padding: 8px !important;
height: auto;
background-color: #2e353b20;
box-shadow: var(--elevation-high);
border-radius: 100px;
display: flex;
font-size: 0px;
color: transparent;
transition: font-size .2s .1s, color .2s, padding .4s .1s;
}
[class*="jumpToPresentBar"] > button svg {
order: -1;
margin: 0px;
height: 24px;
width: 24px;
top: auto;
margin-right: 0px;
margin-left: 0px;
color: #FFFFFF;
transition: margin .6s;
}
[class*="jumpToPresentBar"]:hover > button {
padding: 8px 18px !important;
font-size: 14px;
color: #FFFFFF;
transition: font-size .2s, color .2s .1s, padding .4s;
}
[class*="jumpToPresentBar"]:hover > button svg {
margin-right: 2px;
margin-left: -6px;
}
`;
document.head.appendChild(jumpToPresentBarStyle);
const list = document.createElement('style');
list.innerHTML = `
.background_b61fcc {
background-color: transparent;
padding: 0;
}
.fieldList_aab0de {
background-color: transparent;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
.field__9e8e2 {
width: 100%;
border-radius: 8px;
background-color: var(--background-primary);
max-height: unset;
flex-direction: column;
display: flex;
padding: 15px;
margin-top: 0;
overflow-y: auto;
height: 120px;
margin-bottom: 0;
}
.field__9e8e2 .fieldButton_a93f59 {
background-color: var(--button-secondary-background);
border-radius: 6px;
-webkit-transition: background-color .17s ease,color .17s ease;
transition: background-color .17s ease,color .17s ease;
}
.field__9e8e2 .fieldButton_a93f59:hover {
background-color: var(--button-secondary-background-hover);
}
.field__9e8e2 .fieldButton_a93f59:hover > div {
background: none;
}
.field__9e8e2 .fieldButton_a93f59 {
width: 100%;
margin-right: 0;
position: relative;
}
.field__9e8e2 .fieldButtonList__7db82 {
gap: 5px;
}
.field__9e8e2::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.field__9e8e2::-webkit-scrollbar-corner {
background-color: transparent;
}
.field__9e8e2::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
min-height: 40px;
}
.field__9e8e2::-webkit-scrollbar-track {
background-color: var(--scrollbar-auto-track);
}
.field__9e8e2::-webkit-scrollbar-thumb,
.field__9e8e2::-webkit-scrollbar-track {
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 8px;
}
`;
document.head.appendChild(list);
}
// Call the function to add styles when the page loads
window.addEventListener('load', addStyles);
})();