Gartic.io VIP theme (Optimized)

premium hissiyatı veren chat mesaj efekti olan güzel neon siyah ve mor karışımı bir tema - a beautiful neon black and purple theme with a premium feel and chat message effect
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
Wrap lines
// ==UserScript==
// @name         Gartic.io VIP theme (Optimized)
// @namespace    gartic.io tema script(vip) (sadece mobil) - gartic.io theme script(vip) (mobile only)
// @version      1.1
// @description  premium hissiyatı veren chat mesaj efekti olan güzel neon siyah ve mor karışımı bir tema - a beautiful neon black and purple theme with a premium feel and chat message effect
// @author       Enes
// @match        https://gartic.io/*
// @grant        GM_addStyle
// ==/UserScript==

// insta: @enwss00
// discord: @lawisx1

(function() { 
    'use strict';

    GM_addStyle(`
        body {
            background: #080808 !important;
            background-image: radial-gradient(circle at center, #1E0533 0%, #080808 80%) !important;
            color: #ffffff !important;
            font-family: 'Nunito', sans-serif !important;
        }

        .btBlueBig, .btBlueBig:hover, .btBlueBig:active {
            background-color: #A020F0 !important;
            border-top-color: #C77DFD !important;
            border-bottom-color: #8F00FF !important;
            box-shadow: 0 0 0 5px #002043, 0 0 0 6px #7c92b0;
        }
        .btBlueBig:hover {
            background-color: #B230FF !important;
            border-top-color: #D89EFF !important;
        }
        .btBlueBig:active {
            background-color: #9010E0 !important;
            border-top-color: #9010E0 !important;
            border-bottom-color: #9010E0 !important;
        }


        #screenRoom.common .ctt #interaction #answer,
        #screenRoom.common .ctt .users-tools #users {
            background: linear-gradient(to bottom, #1E0533, #000000) !important;
            border-radius: 10px;
            box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.3);
            padding: 10px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        #screenRoom.common .ctt #interaction #answer {
            margin-right: 23px;
        }
        #screenRoom.common .ctt #users-tools #users {
            margin-bottom: 23px;
        }

        @media (max-width: 640px) {
            #screenRoom.common .ctt {
                background: radial-gradient(circle at center, #1E0533 0%, #000000 100%) !important;
            }

            #screens.common > div,
            #screens.common header,
            #screens.common .actions,
            #screens.common .title .filter,
             #screenRoom.common .ctt #interaction #answer,
             #screenRoom.common .ctt #users-tools #users {
                background: transparent !important;
                box-shadow: none !important;
                border-radius: 8px;
                padding: 10px;
                margin: 10px;
            }
             #screens.common .title .filter {
                 margin: 10px 10px 0 10px;
            }
            #screens.common .actions {
                 margin: 0 10px 10px 10px;
            }


            #screenRoom.common .ctt #interaction #chat .history .msg.you > div > span {
                border: 2px solid transparent;
                padding: 10px 15px;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 20px;
                box-shadow: 0 0 10px rgba(102, 0, 153, 0.8);
                overflow: hidden;
                display: inline-block;
                max-width: calc(100% - 40px);
                word-wrap: break-word;
                color: white !important;
                font-weight: bold !important;
            }

            #screenRoom.common .ctt #interaction #chat .history .msg:not(.you) > div > span {
                background-color: white !important;
                color: black !important;
                border-radius: 15px;
                padding: 8px 12px;
                font-weight: normal !important;
                box-shadow: none !important;
                animation: none !important; 
            }

            #screenRoom.common .ctt #interaction #chat .history .msg > div {
                display: flex;
                align-items: flex-start;
            }
            #screenRoom.common .ctt #interaction #chat .history .msg .avatar {
                margin-right: 10px;
                margin-top: 5px;
            }

            #screenRoom.common .ctt #interaction #chat {
                backdrop-filter: blur(5px);
                background-color: rgba(0, 0, 0, 0.5) !important;
            }
        }


        #screenRoom.common .ctt #interaction #chat .history .msg.you strong {
            color: #FF4136 !important;
        }

        #screenRoom.common .ctt #interaction #chat .history .msg:not(.you) strong {
            color: yellow !important;
        }


        #screenRoom.common .ctt #users-tools #users .user .infosPlayer .nick,
        #screenRoom.common .ctt #users-tools #users .user .infosPlayer .points {
            color: #40E0D0 !important;
        }

        #screenRoom.common .ctt #users-tools #users ul li {
            border-bottom: 1px solid rgba(255, 204, 0, 0.2);
        }
        #screenRoom.common .ctt #interaction #answer .scroll::-webkit-scrollbar-thumb,
        #screenRoom.common .ctt #interaction #chat .scroll::-webkit-scrollbar-thumb,
        #screenRoom.common .ctt #users-tools #users .scroll::-webkit-scrollbar-thumb {
            background-color: rgba(255, 204, 0, 0.3);
        }

        .my-username-red {
            color: #FF4136 !important;
            text-shadow: none;
        }

        #screenRoom.common .ctt #users-tools #users .user.you .avatar {
            box-shadow: 0 0 0 4px linear-gradient(to right, red, purple);
        }
    `);

    function highlightMyUsername(messageElement) {
        if (!messageElement) return;
        if (messageElement.classList.contains('you')) {
            const usernameElement = messageElement.querySelector('strong');
            if (usernameElement) {
                usernameElement.classList.add('my-username-red');
            }
        }
    }

    const chatHistory = document.querySelector('#screenRoom.common .ctt #interaction #chat .history .scroll .scrollElements');
    if (chatHistory) {
        const observer = new MutationObserver(mutationsList => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach(node => {
                        if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('msg')) {
                            highlightMyUsername(node);
                        }
                    });
                }
            }
        });

        observer.observe(chatHistory, { childList: true, subtree: false });
    } else {
        console.error("hata: ");
    }

    const initialMessages = chatHistory ? chatHistory.querySelectorAll('.msg') : [];
    initialMessages.forEach(highlightMyUsername);


})();
欢迎访问Greasy Fork镜像
