Skip to content

Instantly share code, notes, and snippets.

@teknogeek
Last active January 3, 2023 22:10
Show Gist options
  • Save teknogeek/71fac6d8c1e233f1458af79b55530ef7 to your computer and use it in GitHub Desktop.
Save teknogeek/71fac6d8c1e233f1458af79b55530ef7 to your computer and use it in GitHub Desktop.
Discord OBS Overlay CSS (Browser Source)
body {
zoom: 1.5;
}
div[class*="sidebar-"],
div[class*="notice-"],
nav[class*="guilds-"],
form[class*="form-"],
div[class*="newMessagesBar-"],
#---new-messages-bar,
img[class*="avatar-"],
div[id*="message-reply-context-"],
div[class*="reactionBtn-"],
img[class*="replyAvatar-"],
img[class*="avatarDecoration-"],
div[class*="repliedMessage-"]:before,
div[class*="toolbar-"],
div[class*="scroller-"]::-webkit-scrollbar,
div[class*="buttonContainer-"],
div[class*="menu-"],
div[class*="focusLock-"],
div[class*="text-"],
video[class*="ready-"],
div[class*="noChannel-"],
div[class*="jumpToPresentBar-"],
span[class*="timestamp-"] {
display: none !important;
}
div[id*="popout_"] {
display: none !important;
}
div[class*="cozy-"] {
padding-left: 10px !important;
}
div[class*="message-"]:hover {
background-color: unset !important;
}
div[class*="message-"] {
margin-top: 0px !important;
padding-right: 10px !important;
}
div[class*="groupStart-"] {
border-top: solid rgb(30, 33, 36) 2px !important;
}
div[class*="cozyMessage-"] {
min-height: 0px !important;
padding-bottom: 0px !important;
}
div[class*="headerText-"] {
display: flex !important;
justify-content: flex-end !important;
}
div[class*="header-"] {
overflow: none !important;
}
div[class*="contents-"] {
text-align: right !important;
}
h3[class*="header-"] {
margin: 0px !important;
width: 30% !important;
display: inline-block !important;
vertical-align: top !important;
text-align: left !important;
}
div[id*="message-content-"] {
padding-left: 0px !important;
text-align: right !important;
margin-left: auto !important;
margin-right: 0px !important;
display: inline-block !important;
width: 70% !important;
}
div[id*="message-content-"] > pre:has(> code) {
max-width: unset !important;
}
div[id*="message-content-"] > pre > code {
display: inline-block !important;
text-align: left !important;
}
div[id*="message-accessories-"] *:not(svg[class*="boostedGuildIconGem-"]) {
margin-left: auto;
}
div[class*="reactions-"] {
margin-left: auto !important;
margin-right: 0px !important;
}
span[class*="clickableSticker-"] {
margin-left: auto !important;
margin-right: 0px !important;
}
*:not(div[class*="content-"], section[class*="title-"]) {
background-color: rgba(30, 33, 36, 0) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment