☰

Twitch Stream Banner Fix

Moves the broadcast information block down the page on Twitch, ensures visibility of viewer count, timestamp, and shifts the block slightly to the right to avoid covering the online streamer list.

// ==UserScript==
// @name         Twitch Stream Banner Fix 
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Moves the broadcast information block down the page on Twitch, ensures visibility of viewer count, timestamp, and shifts the block slightly to the right to avoid covering the online streamer list.
// @author       Gullampis810
// @match        *://www.twitch.tv/*
// @license      MIT
// @grant        none
// @icon https://cdn-icons-png.flaticon.com/512/684/684131.png
// ==/UserScript==

(function() {
    'use strict';

    // Function to apply custom styles
    function addCustomStyles() {
        const style = document.createElement('style');
        style.textContent = `
            /* Move the broadcast info block down */
            .channel-root__upper-watch {
                position: fixed !important;
                bottom: 0 !important;
                left: 240px !important; /* Shift the block slightly to the right */
                width: calc(100% - 20px) !important; /* Adjust width to fit */
                z-index: 1000 !important;
                background: rgba(0, 0, 0, 0.8) !important; /* Dark semi-transparent background */
                color: #fff !important; /* Ensure text is visible */
                padding: 10px !important; /* Add some spacing for better readability */
                display: flex !important; /* Maintain layout */
                align-items: center !important;
                justify-content: space-between !important; /* Ensure elements are well spaced */
            }

            /* Ensure viewer count, timestamp, and other elements remain visible */
            .channel-root__upper-watch .Layout-sc-1xcs6mc-0 {
                margin: 0 !important;
                display: flex !important;
                align-items: center !important;
            }

            /* Adjust viewer count styling */
            .channel-root__upper-watch [data-a-target="channel-viewers-count"] {
                font-size: 14px !important;
                color: #ffb700 !important; /* Highlight viewer count */
                margin-left: 10px !important;
            }

            /* Adjust timestamp styling */
            .channel-root__upper-watch [data-a-target="stream-time"] {
                font-size: 14px !important;
                color: #00ff00 !important; /* Highlight timestamp */
                margin-left: 20px !important;
            }

            .Layout-sc-1xcs6mc-0.PziIi {
                background: #f9f9f900 !important; /* New dark gray with transparency */
            }

            /* Shift avatar to the right to avoid covering online streamer list */
            .channel-root__upper-watch .channel-root__info {
                margin-left: 30px !important; /* Add margin to shift avatar */
            }

            /* Add custom styling for .jxLMqv */
            .jxLMqv {
                -webkit-box-flex: 999 !important;
                flex-grow: 999 !important;
                flex-shrink: 1 !important;
                width: 0px !important;
                max-width: fit-content !important;
                min-width: 95rem !important;
            }
        `;

        // Append styles to the head of the document
        document.head.appendChild(style);
    }

    // Wait for the page to load before applying styles
    const observer = new MutationObserver(() => {
        const targetElement = document.querySelector('.channel-root__upper-watch');
        if (targetElement) {
            addCustomStyles();
            observer.disconnect(); // Stop observer after styles are applied
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();