Twitch chat transparent popout for OBS

obs_twitch_chat.css

/*
Twitch chat browsersource CSS for OBS
Just set the URL as https://www.twitch.tv/%%TWITCHCHANNEL%%/chat?popout=true
And paste this entire file into the CSS box
Original by twitch.tv/starvingpoet modified by github.com/Bluscream and later github.com/Adobe-Android

General Settings
*/
body {
    color: #FFFFFF!important;
    margin: 0 auto!important;
    overflow: hidden!important;
    text-shadow:
        -1px -1px 1px #000000,
        -1px  1px 1px #000000,
         1px -1px 1px #000000,
         1px  1px 1px #000000!important;
}

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;
}

/*
Badge Removal
To remove additional badge types - moderator, bits, etc. 
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;
}

/*
Hide chat statuses like "Welcome to the chat room!" or "yournamehere cleared chat for this room."
*/
.chat-line__status
{
    display: none!important;
}

/*
Easily resize chat font size.
[thanks to @Twocoolguy]
https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003?permalink_comment_id=3535128#gistcomment-3535128
*/
.chat-line__message {
	font-size: 22px;
}

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

/*
 * Remove the header section
 */
.ember-chat .chat-room {
    top: 0!important;
}

.ember-chat .chat-header, .room-selector__header {
    display: none!important;
}

.ember-chat .chat-messages .chat-line.admin {
    display: none!important;
}

/**
 * Remove the footer section
 */

.ember-chat .chat-room, .chat-input {
    display: none!important;
    bottom: -112px!important;
}

/**
 * Make the chat text white (optional) [thanks to @iggy12345]
**/
.chat-line__message {
    color: #FFFFFF;
}

/**
 * https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3770724
**/
html {
    font-size: 100% !important;
}

/**
 * Small fix to remove the "Stream Chat" Header and the Gift/Cheer Leaderboard header
 * https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3803252
 * Updated code to kill the header
 * https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-4502487
**/

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

/**
 * If you want to reverse the chat's display order, you can turn the container into a flex box like so
 * https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3883262
**/

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