Custom Twitch Chat OBS Widget

TwitchChatOverlay.css

/**
This is just the very basic CSS for having a Twitch Chat widget on OBS

How to use:
1. Add a Browser Widget to your OBS Sources (I use SE.Live [https://streamelements.com/obslive] since newer versions of OBS don't have a 
   Browser widget, but any Browser widget that allow custom CSS should work)
2. Set the URL to your channel's popup chat (https://www.twitch.tv/popout/<channel>/chat?popout=)
3. Copy paste the CSS below into the Custom CSS text box, or the equivalent for your widget. 
4. Adjust the values of font-size and line-height as needed for how you want it to appear on stream.

(Optional) Set Transparent Background:
1. Right-click the widget in your sources and click "Filters". 
2. In the window that pops up, under "Effect Filters" add a new "Color Key" filter.
3. Set "Key Color Type" to Custom Color, then hit the "Select Color" button. 
4. In the window that pops up, click on the "Pick Screen Color" button, and then click an empty spot in chat preview window to select the 
   background color for chat (for me, I get the color #18181b for Dark Mode chat) and hit OK.

That should make chat background transparent, and if you want to reenable the background, you can just click the eye logo next to the 
filter to turn it on or off.
**/

.simplebar-scroll-content {
	font-size: 30px;
	line-height: 1.6;
}

.chat-input, .chat-room__notifications, .chat-room__viewer-card, .hMQljH, .stream-chat-header, .bMXbNC, .fYQDgF, [data-a-target="chat-welcome-message"] {
	display: none !important;
}