Twitch chat transparent popout for OBS

obs_twitch_chat.css

/*
Twitch chat browsersource CSS for OBS
Original by twitch.tv/starvingpoet modified by github.com/Bluscream

Just set the URL as either one of
- https://www.twitch.tv/%%TWITCHCHANNEL%%/chat?popout=true
- https://www.twitch.tv/popout/%%TWITCHCHANNEL%%/chat
- https://www.twitch.tv/embed/%%TWITCHCHANNEL%%/chat?parent=localhost
And paste this entire file into the CSS box or paste direct import css like

@import url("https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003/raw/obs_twitch_chat.css");

For Youtube use https://chatv2.septapus.com/
*/

/* Define CSS Variables */
:root {
    --background-color: rgba(0,0,0,0); /* general background color/transparency */
    --chat-message-color: unset; /* foreground color of chat messages */
    --chat-message-font-size: unset; /* font size of chat messages */
    --chat-message-font-family: unset; /* font-family of chat messages (example: "Comic Sans MS", cursive, sans-serif;) */
    --text-color: #FFFFFF; /* general font color */
    --font-size: 18px; /* general font size */
    --line-height: 20px; /* general chat line height */
    --text-shadow: -1px -1px 1px #000000, -1px 1px 1px #000000, 1px -1px 1px #000000, 1px 1px 1px #000000; /* general text shadow */
    --margin: 0 auto; /* general margins */
    --overflow: hidden; /* general overflow */
}

/* Badge Removal
To remove additional badge types - moderator, bits, etc - just make a copy of the one of the following badge selectors and replace the word inbetween the quotes with the hover text
*/
/*img.chat-badge[alt="Broadcaster"],*/
/*img.chat-badge[alt="Moderator"],*/
/*img.chat-badge[alt*="Subscriber"],*/
img.chat-badge[alt="Twitch Prime"],
img.chat-badge[alt="Turbo"],
img.chat-badge[alt="Verified"]
{
    display: none!important;
}

/* Reverse chat
.chat-scrollable-area__message-container { 
    display: flex;
    flex-direction: column-reverse;
}
*/

/* Hide chat statuses like "Welcome to the chat room!" or "yournamehere cleared chat for this room." by @Adobe-Android (https://gist.github.com/Adobe-Android/05deea9001b83a763d2dbfceb5eb0a9e/revisions#diff-ecaa2404815e8e26cf91e016648328814f069f13f25559b17446c1b40ca29625)*/
/*
div.chat-line__status {
    display: none!important;
}
*/

/* Remove the header section */
.ember-chat .chat-room {
    top: 0!important;
}
.ember-chat .chat-header,
.room-selector__header,
.ember-chat .chat-messages .chat-line.admin,
.stream-chat-header, [data-test-selector="channel-leaderboard-container"] { /* by @milochristiansen (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003?permalink_comment_id=4502487#gistcomment-4502487) */
    display: none!important;
}

/* Remove the footer section */
.ember-chat .chat-room, .chat-input {
    display: none!important;
    bottom: -112px!important;
}

/* Small fix to remove the "Stream Chat" Header and the Gift/Cheer Leaderboard header by @ScarVite (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3803252) */
.stream-chat-header, .channel-leaderboard, [data-test-selector="channel-leaderboard-container"] {
  display: none !important;
}

/* Get rid of the "Gift the sub now to be #1!" message by @KokoseiJ (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003?permalink_comment_id=4767266#gistcomment-4767266) */
.channel-leaderboard-header-rotating__users, .tw-interactable > * {
  display: none!important;
}

/* Remove pinned message */
.community-highlight-stack__card {
    display: none;
}

/* Hide community highlights */
.community-highlight,
.community-highlight-stack__backlog-card {
  display: none !important;
}

/* Remove chat rules consent banner by @mjbogusz */
.consent-banner {
	display: none !important;
}

/* General Settings */
body {
    color: var(--text-color) !important;
    margin: var(--margin) !important;
    overflow: var(--overflow) !important;
    text-shadow: var(--text-shadow) !important;
}

/* Change background elements according to --background-color variable (color/transparency) */
html, body,
.room-selector, .room-selector__header,
.twilight-minimal-root, .tw-root--theme-light,
.popout-chat-page, .chat-room, .tw-c-background-alt,
.chat-container, .ember-chat-container, .stream-chat-container
.first-message-highlight-line {
    background: var(--background-color) !important;
    background-color: var(--background-color) !important;
}

/* Font size fix by @DamienDabernat (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3770724) */
html {
    font-size: 100% !important;
}
/* Font Size */
.stream-chat .chat-messages .chat-line, .ember-chat .chat-messages .chat-line {
    font-size: var(--font-size) !important;
    line-height: var(--line-height) !important;
}

/* Font Color */
.chat-container, .ember-chat-container {
    color: var(--text-color) !important;
}

/* chat message color and size by @iggy12345 */
.chat-line__message {
    color: var(--chat-message-color) !important;
    font-size: var(--chat-message-font-size) !important;
    font-family: var(--chat-message-font-family) !important;
}

@DespicableGreen can you send your code

This is fantastic thanks for posting!
However when I add:

.chat-line__message {
font-size: px;
}

The font size stays the same.
On mobile it's entirely illegible;
Unless I have chat take up a quarter of the screen.
Is there a way around this?

This is fantastic thanks for posting!
However when I add:

.chat-line__message {
font-size: px;
}

The font size stays the same.
On mobile it's entirely illegible;
Unless I have chat take up a quarter of the screen.
Is there a way around this?

I found a fix, simply add :

html {
    font-size: 100% !important;
}

Small fix to remove the "Stream Chat" Header and the Gift/Cheer Leaderboard header just add this:

.stream-chat-header, .channel-leaderboard {
  display: none !important;
}

Any ideas how to add BetterTTV emotes? Is it even possible to add them there?

Any ideas how to add BetterTTV emotes? Is it even possible to add them there?

no, i don't think CSS can do that. you'd have to inject javascript somehow

If you want to reverse the chat's display order, you can turn the container into a flex box like so:

.chat-scrollable-area__message-container {
    display: flex;
    flex-direction: column-reverse;
}

Is there a common reason as to why this doesn't work for me at all? 😅 In OBS, followed the annotations to a T, the full chat appears with no alteration. Thanks!

Dosnt work for me either.

Works great with default Twitch chat!

Modifications

I have some corrections for the badge removal code. Twitch changed the "badge" class on the image tag to "chat-badge" so it no longer worked. I verified the code below fixes Broadcaster, Moderator, Turbo, Verified, Subscriber, and Prime Gaming (formerly Twitch Prime) .

Source: https://www.theverge.com/2020/8/10/21358463/amazon-twitch-prime-gaming-rebrand

Subscriber got a tad trickier. Here are examples I've seen. This was addressed with my changes.

3-Month Subscriber
1-Month Subscriber

Here's a fairly comprehensive list of badges. These are the most common.
https://help.twitch.tv/s/article/twitch-chat-badges-guide?language=en_US

There are more, I have not added here but verified a few alt tags are identical to their name.
https://twitchinsights.net/badges

Additions

Added VIP badge to bade removal.

Code

/*
Badge Removal
To remove additional badge types - moderator, bits, etc - just make a copy of the one of the following badge selectors and replace the word in between the quotes with the hover text
*/
img.chat-badge[alt="Broadcaster"],
img.chat-badge[alt="Moderator"],
img.chat-badge[alt="Prime Gaming"],
img.chat-badge[alt="Turbo"],
img.chat-badge[alt="Verified"],
img.chat-badge[alt="VIP"],
img.chat-badge[alt*="Subscriber"] 
{
    display: none!important;
}

Hi! regarding the "subs will appear here" header, you can remove it with this line

.last-x-events_container{
display: none!important;
}

anyone konw how to make chat slides in from the side or add animation when new chat pops in? I have no idea how to do it.

Another optional for white chat messages:

[data-a-target="chat-line-message"] {
    color: #FFFFFF;
}

sry im kind of a potato but how do you change the length and width of the box without altering the scale?

sry im kind of a potato but how do you change the length and width of the box without altering the scale?

In OBS you would set the width and height in the source property, as dragging the corners for example would only change the scale (if that's what you mean).

My man, thank you so much

Updated code to kill the header:

.stream-chat-header, [data-test-selector="channel-leaderboard-container"] {
  display: none !important;
}

how can i add a good visibility to the chat text? for example my chat text is white, and my scene is also white rendering the chat text can't be seen.

Just change this line here to whatever color you want. In this case, the hex color below is black.

.chat-line__message {
    color: #000000;
}

Just change this line here to whatever color you want. In this case, the hex color below is black.

.chat-line__message {
    color: #000000;
}

Then there would be another problem that, when the video is black, the text also can't be seen. This way I have to keep changing the text color just to have a good visibility depending on the video's color as well

edit:
Nevermind, the stock css code works well with the visibility with the help of the text shadow. No modification needed

You could always get rid of the background transparency if you're concerned with text being unreadable on a variable background. You can either comment out this section of the code or change the background color to something you prefer.

html, body,
.room-selector, .room-selector__header,
.twilight-minimal-root, .tw-root--theme-light,
.popout-chat-page, .chat-room, .tw-c-background-alt,
.chat-container, .ember-chat-container {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
}

Hello, the question is, how do I make a unique one for each user? I mean, so that the moderator has one background, the VIP has another background, and then

This should get rid of the "Gift the sub now to be #1!" message if anyone is still bothering to use this:

.channel-leaderboard-header-rotating__users, .tw-interactable > * {
  display: none!important;
}

I use this with extension.

User JavaScript and CSS (Chrome Extension)

Url List:

https://www.twitch.tv/*/chat?popout=true
https://www.twitch.tv/embed/*/chat*

how to remove the PINNED MESSAGE ON TOP?

And how do I add badges? I'm completely new to this, but it's something I really wanted to do. It's for my twitch chat. Help

how to remove the PINNED MESSAGE ON TOP?

.community-highlight-stack__card {
    display: none;
}

@Fxzzi thanks. added to the code.

Also i restructured comments a bit and gave more credits + added more code from forks. Wasn't really happy with it.
In addition, some stuff is now customizable through css variables at the top of the file so no need to search for it anymore (i hope unset; works in the OBS browser)

In the end, here's how I've gotten mine looking:

:root {
  --color-background-body: rgba(0,0,0,0.4);
}

/* fade animation for new messages */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.chat-room {
    background: none !important
}


/*
Hide various parts of the site.
- chat input box
- "Welcome to the chat room!" text
- stream chat header
- scrollbars
- pinned messages
*/
.chat-input,
.chat-line__status,
.stream-chat-header,
.simplebar-track,
.community-highlight-stack__card,
img.chat-badge
{
    display: none !important;
}

/* Animation on new messages, other visual changes including text outline */
.chat-line__message {
    animation: fadeInUp .5s ease-out !important;
    font-size: 18pt !important;
    line-height: 100% !important;
    color: #c0caf5 !important;
    font-family: Noto Sans !important;
    text-shadow: -1px -1px 0 #1a1b26, 1px -1px 0 #1a1b26, -1px 1px 0 #1a1b26, 1px 1px 0 #1a1b26 !important;
    /* padding: .5rem 0rem 0.5rem 0rem  !important; */
}

EDIT: added code to hide scrollbar. Annoyed me when someone would send a new message and the scrollbar would show for a second before hiding again. Feel free to add to your gist, the class is .simplebar-track

Hello, I need help, I managed to place a badge, but I left it more ornate near the text box, but I already tried and couldn't position it.
Does anyone know how to do this?

->(Like I said, I don't really understand this, and I did my best.)<-

-image with example

-And this is the code I have (important note: I used this css code directly in @obs)

.badges {
display: {{badgesVisibility}};
position: relative;
height: {{badgeSize}}px 20;
width: {{badgeSize}}px 10;
min-width: {{badgeSize}}px10;
vertical-align: text-bottom;
margin-left: 5px;
}

.chat-badge{
display: flex;
float: left;
box-sizing: border-box;
height: 100%;
min-width: var(--badge-box);
line-height: {{userSize}}px;
margin-top: auto;
vertical-align: text-bottom;
padding-bottom: 2px;
align-items: flex-start;
flex-direction: row-reverse;
background: transparent;
}

Like I said, I don't really understand this, and I did my best.

@Bluscream @ramazansancar @footforhire @Adobe-Android @milochristiansen