Twitch Stream Channel Banner Fix Improved

Moves the broadcast information block down the page on Twitch and ensures visibility of viewer count and timestamp.
目前为 2024-12-15 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         Twitch Stream Channel Banner Fix Improved
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Moves the broadcast information block down the page on Twitch and ensures visibility of viewer count and timestamp.
// @author       sandEulle
// @match        *://www.twitch.tv/* 
// @license      MIT
// @grant        none
// ==/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: 0 !important;
                width: 100% !important;
                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;
            }
        `;

        // 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 });
})();
欢迎访问Greasy Fork镜像
