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

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