YouTube Fullscreen Stream w/ Twitch-style Chat by loopy750

/* ==UserStyle==
@name         YouTube Fullscreen Stream w/ Twitch-style Chat
@namespace    USO Archive
@author       loopy750
@description  Prefer the look of Twitch chat? YouTube's chat room design leaves a lot to be desired, but this code allows for a more enjoyable experience. Watching on the big screen? Press F11 to enjoy the fullscreen goodness of YouTube live streams with chat room.    BTTV emotes on YouTube? Now supported, download from: <a href="https://betterttv.com/" target="_blank">https://betterttv.com/</a> & <a href="https://7tv.app/" target="_blank">https://7tv.app/</a>
@version      20231128.20.37
@license      NONE
@preprocessor uso
@advanced dropdown 7tv-emote-fix "7TV Emote Fix" {
    default "Default*" <<<EOT  EOT;
    enabled "Enabled" <<<EOT /* 7TV Emote Fix *\/
.seventv-yt-message-content img,
img.chat-image.chat-line__message--emote {
    min-width: 24px !important;
    min-height: 24px !important;
    margin: -2px 0 -8px 0 !important
}

img.emoji.style-scope.yt-formatted-string {
    min-width: 28px !important;
    min-height: 28px !important
}
 EOT;

}
@advanced dropdown ambient-mode "Enhance Ambient Mode" {
    disabled "Disabled*" <<<EOT  EOT;
    enabled "Enabled" <<<EOT /* Enhance Ambient Mode *\/
ytd-app #player #cinematics canvas {
    margin: -10px 0 0 -10px !important;
    width: 103% !important;
    height: 103% !important;
    filter: brightness(118%) contrast(103%) blur(25px) saturate(250%) opacity(1) !important
}
 EOT;
    enabled-133 "Enabled (133%)" <<<EOT /* Enhance Ambient Mode *\/
ytd-app #player #cinematics canvas {
    margin: -9% 0 0 -18% !important;
    width: 133% !important;
    height: 133% !important;
    filter: brightness(125%) contrast(108%) blur(18px) saturate(280%) opacity(1) !important
}
 EOT;
    enabled_msp-133 "Enabled + Move Side Panel (133%)" <<<EOT /* Enhance Ambient Mode *\/
ytd-app #player #cinematics canvas {
    margin: -9% 0 0 -18% !important;
    width: 133% !important;
    height: 133% !important;
    filter: brightness(125%) contrast(108%) blur(18px) saturate(280%) opacity(1) !important
}

#secondary .style-scope.ytd-watch-flexy {
    margin-top: 90% !important
}
 EOT;
    enabled_rsp-133 "Enabled + Remove Side Panel (133%)" <<<EOT /* Enhance Ambient Mode *\/
ytd-app #player #cinematics canvas {
    margin: -9% 0 0 -18% !important;
    width: 133% !important;
    height: 133% !important;
    filter: brightness(125%) contrast(108%) blur(18px) saturate(280%) opacity(1) !important
}

#secondary.style-scope.ytd-watch-flexy {
    display: none !important
}
 EOT;

}
@advanced dropdown chat-room-a-colour "Chat Room Author Colour" {
    cadet-blue "Cadet Blue*" <<<EOT #5F9EA0 EOT;
    blue "Blue" <<<EOT #0000FF EOT;
    blue-violet "Blue Violet" <<<EOT #8A2BE2 EOT;
    coral "Coral" <<<EOT #FF7F50 EOT;
    default "Default" <<<EOT color(0) EOT;
    dodger-blue "Dodger Blue" <<<EOT #1E90FF EOT;
    goldenrod "Goldenrod" <<<EOT #DAA520 EOT;
    green "Green" <<<EOT #008000 EOT;
    grey "Grey" <<<EOT #9E9E9E EOT;
    orange-red "Orange Red" <<<EOT #FF4500 EOT;
    red "Red" <<<EOT #FF0000 EOT;
    sea-green "Sea Green" <<<EOT #2E8B57 EOT;
    spring-green "Spring Green" <<<EOT #00FF7F EOT;
    yellow-green "Yellow Green" <<<EOT #9ACD32 EOT;

}
@advanced dropdown chat-room-images "Chat Room Profile Images" {
    default "Default*" <<<EOT     width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important EOT;
    20px "Smaller (20px)" <<<EOT     width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important EOT;
    hidden "Hidden" <<<EOT     visibility: hidden !important;
    max-width: 0px !important;
    margin-right: 0px !important EOT;
    square-border "Square Border" <<<EOT     width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    margin-right: 10px !important
}

/* Donation Tab *\/
#author-photo.style-scope.yt-live-chat-ticker-sponsor-item-renderer,
#author-photo.style-scope.yt-live-chat-ticker-paid-message-item-renderer {
    margin-left: 3px !important;
    border-radius: 4px !important
}

#card #header #author-photo {
    border-radius: 4px !important EOT;

}
@advanced dropdown darker-theme "Darker Theme" {
    disabled "Disabled*" <<<EOT  EOT;
    enabled "Enabled" <<<EOT /* Chat message *\/
#message.style-scope.yt-live-chat-text-message-renderer:not([is-highlighted]) {
    color: #F0F0F2 !important;
    font-weight: 500 !important
}

/* Chat room background colours *\/
/*
    DOESN'T FUNCTION PROPERLY ONCE CHAT BUFFER IS FULL,
    HOPEFULLY SOMEONE CAN SOMEDAY WORK IT OUT.
    FOR NOW ONLY ONE COLOUR WILL BE USED.
*\/
#chat-messages #items .style-scope.yt-live-chat-item-list-renderer:nth-child(odd) {
    /* #18141A *\/
    background-color: #101318 !important
}

#chat-messages #items .style-scope.yt-live-chat-item-list-renderer:nth-child(even) {
    /* #0F0E11 *\/
    background-color: #101318 !important
}

/* Pending message background *\/
#chat-messages #items.style-scope.yt-live-chat-item-list-renderer {
    background-color: #101318 !important
}

#chat-messages #items .style-scope.yt-live-chat-item-list-renderer:nth-child(1n)[author-type=owner] {
    background-color: #303030 !important
}

@media all and (display-mode: fullscreen) {
    body,
    html,
    ytd-app,
    .style-scope .ytd-watch-flexy,
    .style-scope .ytd-page-manager.hide-skeleton,
    #left-arrow .yt-chip-cloud-renderer,
    #right-arrow .yt-chip-cloud-renderer,
    #panel-pages.style-scope.yt-live-chat-renderer,
    #contents.style-scope.yt-live-chat-item-list-renderer {
        background-color: #030303 !important
    }
}
 EOT;

}
@advanced dropdown debug "Debug (Do not use!)" {
    none "None*" <<<EOT  EOT;
    chat-buffer "Limit chat buffer" <<<EOT /* Debug: Limit chat buffer displayed to 50 lines *\/
/*        for reduced browser lag                 *\/
#chat-messages #items .style-scope.yt-live-chat-item-list-renderer:nth-child(-n+200) {
    display: none !important;
    visibility: hidden !important;
}

/*
#chat-messages #items {
    counter-reset: chatCounter !important;
}

#chat-messages #items .style-scope.yt-live-chat-item-list-renderer::before {
    counter-increment: chatCounter !important;
    content: ' ' counter(chatCounter) ' ' !important;
    white-space: pre !important;
}
*\/
 EOT;
    chat-buffer-narrow "Limit chat buffer + Narrow width" <<<EOT /* Debug: Limit chat buffer displayed to 48 lines *\/
/*        for reduced browser lag                 *\/
#chat-messages #items .style-scope.yt-live-chat-item-list-renderer:nth-child(-n+200) {
    display: none !important;
    visibility: hidden !important;
}

@media all and (display-mode: fullscreen) {
#chat,
#show-hide-button,
iframe#chatframe,
#columns #secondary.style-scope.ytd-watch-flexy {
    max-width: 214px !important;
    --ytd-watch-flexy-sidebar-min-width: 0 !important;
    direction: ltr !important
}

#container.style-scope.yt-live-chat-restricted-participation-renderer {
    font-size: 85% !important
}

.cbox.yt-spec-button-shape-next--button-text-content {
    font-size: 80% !important
}

#chat:hover,
#show-hide-button:hover,
iframe#chatframe:hover,
#columns #secondary.style-scope.ytd-watch-flexy:hover {
    max-width: 300px !important;
    --ytd-watch-flexy-sidebar-min-width: 0 !important
}
}
 EOT;

}
@advanced dropdown f11 "Press [F11] for fullscreen" {
    f12 "-*" <<<EOT  EOT;
    f13 "-" <<<EOT  EOT;

}
@advanced dropdown font-size "Chat Room Font Size" {
    larger "Larger*" <<<EOT     font-size: 14px !important
}

#chat-messages #timestamp {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding-bottom: 0px !important; EOT;
    default "Default" <<<EOT     font-size: inherit !important;
}

#chat-messages #timestamp { EOT;

}
@advanced dropdown fullscreen-mode "Fullscreen Mode" {
    default "Default*" <<<EOT /* Fullscreen mode - Default *\/
@media all and (display-mode: fullscreen) {
    ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy {
        padding-left: 10px !important;
        padding-right: 10px !important
    }

    #bottom-row.style-scope.ytd-watch-metadata {
        max-width: 0 !important;
        margin: -12px 0 0 0 !important;
        display: block !important
    }

    #bottom-row.style-scope.ytd-watch-metadata > * {
        margin-left: -8px !important;
        background: transparent !important
    }

    #flexible-item-buttons.style-scope.ytd-menu-renderer,
    #description-inner .style-scope.ytd-watch-metadata:nth-child(3),
    .ryd-tooltip .ryd-tooltip-bar-container,
    #info.style-scope.ytd-watch-flexy {
        display: none !important
    }

    ytd-app #player #cinematics canvas {
        visibility: hidden !important
    }
}
 EOT;
    info-overlay "Info Overlay" <<<EOT /* Fullscreen mode - Info overlay *\/
@media all and (display-mode: fullscreen) {
    #flexible-item-buttons.style-scope.ytd-menu-renderer,
   .yt-core-attributed-string.yt-core-attributed-string--white-space-pre-wrap,
    ytd-text-inline-expander#description-inline-expander,
    yt-formatted-string span.yt-formatted-string:nth-child(5),
    yt-formatted-string .yt-simple-endpoint.style-scope.yt-formatted-string,
    ytd-text-inline-expander#description-inline-expander > tp-yt-paper-button:nth-child(3),
    yt-formatted-string.button.style-scope.ytd-text-inline-expander,
    yt-formatted-string.ytd-text-inline-expander:nth-child(1),
    yt-formatted-string.ytd-watch-metadata:nth-child(2),
    ytd-button-renderer.ytd-menu-renderer:nth-child(3),
    ytd-button-renderer.ytd-menu-renderer:nth-child(4),
    ytd-button-renderer.ytd-menu-renderer:nth-child(5),
    #dot.style-scope.ytd-video-prima...