☰

Greasy Fork is available in English.

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

  1. // ==UserScript==
  2. // @name         Gartic.io VIP theme (Optimized)
  3. // @namespace    gartic.io tema script(vip) (sadece mobil) - gartic.io theme script(vip) (mobile only)
  4. // @version      1.1
  5. // @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
  6. // @author       Enes
  7. // @match        https://gartic.io/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. // insta: @enwss00
  12. // discord: @lawisx1
  13.  
  14. (function() { 
  15.     'use strict';
  16.  
  17.     GM_addStyle(`
  18.         body {
  19.             background: #080808 !important;
  20.             background-image: radial-gradient(circle at center, #1E0533 0%, #080808 80%) !important;
  21.             color: #ffffff !important;
  22.             font-family: 'Nunito', sans-serif !important;
  23.         }
  24.  
  25.         .btBlueBig, .btBlueBig:hover, .btBlueBig:active {
  26.             background-color: #A020F0 !important;
  27.             border-top-color: #C77DFD !important;
  28.             border-bottom-color: #8F00FF !important;
  29.             box-shadow: 0 0 0 5px #002043, 0 0 0 6px #7c92b0;
  30.         }
  31.         .btBlueBig:hover {
  32.             background-color: #B230FF !important;
  33.             border-top-color: #D89EFF !important;
  34.         }
  35.         .btBlueBig:active {
  36.             background-color: #9010E0 !important;
  37.             border-top-color: #9010E0 !important;
  38.             border-bottom-color: #9010E0 !important;
  39.         }
  40.  
  41.  
  42.         #screenRoom.common .ctt #interaction #answer,
  43.         #screenRoom.common .ctt .users-tools #users {
  44.             background: linear-gradient(to bottom, #1E0533, #000000) !important;
  45.             border-radius: 10px;
  46.             box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.3);
  47.             padding: 10px;
  48.             margin-bottom: 10px;
  49.             overflow: hidden;
  50.         }
  51.         #screenRoom.common .ctt #interaction #answer {
  52.             margin-right: 23px;
  53.         }
  54.         #screenRoom.common .ctt #users-tools #users {
  55.             margin-bottom: 23px;
  56.         }
  57.  
  58.         @media (max-width: 640px) {
  59.             #screenRoom.common .ctt {
  60.                 background: radial-gradient(circle at center, #1E0533 0%, #000000 100%) !important;
  61.             }
  62.  
  63.             #screens.common > div,
  64.             #screens.common header,
  65.             #screens.common .actions,
  66.             #screens.common .title .filter,
  67.              #screenRoom.common .ctt #interaction #answer,
  68.              #screenRoom.common .ctt #users-tools #users {
  69.                 background: transparent !important;
  70.                 box-shadow: none !important;
  71.                 border-radius: 8px;
  72.                 padding: 10px;
  73.                 margin: 10px;
  74.             }
  75.              #screens.common .title .filter {
  76.                  margin: 10px 10px 0 10px;
  77.             }
  78.             #screens.common .actions {
  79.                  margin: 0 10px 10px 10px;
  80.             }
  81.  
  82.  
  83.             #screenRoom.common .ctt #interaction #chat .history .msg.you > div > span {
  84.                 border: 2px solid transparent;
  85.                 padding: 10px 15px;
  86.                 background-color: rgba(0, 0, 0, 0.5);
  87.                 border-radius: 20px;
  88.                 box-shadow: 0 0 10px rgba(102, 0, 153, 0.8);
  89.                 overflow: hidden;
  90.                 display: inline-block;
  91.                 max-width: calc(100% - 40px);
  92.                 word-wrap: break-word;
  93.                 color: white !important;
  94.                 font-weight: bold !important;
  95.             }
  96.  
  97.             #screenRoom.common .ctt #interaction #chat .history .msg:not(.you) > div > span {
  98.                 background-color: white !important;
  99.                 color: black !important;
  100.                 border-radius: 15px;
  101.                 padding: 8px 12px;
  102.                 font-weight: normal !important;
  103.                 box-shadow: none !important;
  104.                 animation: none !important; 
  105.             }
  106.  
  107.             #screenRoom.common .ctt #interaction #chat .history .msg > div {
  108.                 display: flex;
  109.                 align-items: flex-start;
  110.             }
  111.             #screenRoom.common .ctt #interaction #chat .history .msg .avatar {
  112.                 margin-right: 10px;
  113.                 margin-top: 5px;
  114.             }
  115.  
  116.             #screenRoom.common .ctt #interaction #chat {
  117.                 backdrop-filter: blur(5px);
  118.                 background-color: rgba(0, 0, 0, 0.5) !important;
  119.             }
  120.         }
  121.  
  122.  
  123.         #screenRoom.common .ctt #interaction #chat .history .msg.you strong {
  124.             color: #FF4136 !important;
  125.         }
  126.  
  127.         #screenRoom.common .ctt #interaction #chat .history .msg:not(.you) strong {
  128.             color: yellow !important;
  129.         }
  130.  
  131.  
  132.         #screenRoom.common .ctt #users-tools #users .user .infosPlayer .nick,
  133.         #screenRoom.common .ctt #users-tools #users .user .infosPlayer .points {
  134.             color: #40E0D0 !important;
  135.         }
  136.  
  137.         #screenRoom.common .ctt #users-tools #users ul li {
  138.             border-bottom: 1px solid rgba(255, 204, 0, 0.2);
  139.         }
  140.         #screenRoom.common .ctt #interaction #answer .scroll::-webkit-scrollbar-thumb,
  141.         #screenRoom.common .ctt #interaction #chat .scroll::-webkit-scrollbar-thumb,
  142.         #screenRoom.common .ctt #users-tools #users .scroll::-webkit-scrollbar-thumb {
  143.             background-color: rgba(255, 204, 0, 0.3);
  144.         }
  145.  
  146.         .my-username-red {
  147.             color: #FF4136 !important;
  148.             text-shadow: none;
  149.         }
  150.  
  151.         #screenRoom.common .ctt #users-tools #users .user.you .avatar {
  152.             box-shadow: 0 0 0 4px linear-gradient(to right, red, purple);
  153.         }
  154.     `);
  155.  
  156.     function highlightMyUsername(messageElement) {
  157.         if (!messageElement) return;
  158.         if (messageElement.classList.contains('you')) {
  159.             const usernameElement = messageElement.querySelector('strong');
  160.             if (usernameElement) {
  161.                 usernameElement.classList.add('my-username-red');
  162.             }
  163.         }
  164.     }
  165.  
  166.     const chatHistory = document.querySelector('#screenRoom.common .ctt #interaction #chat .history .scroll .scrollElements');
  167.     if (chatHistory) {
  168.         const observer = new MutationObserver(mutationsList => {
  169.             for (const mutation of mutationsList) {
  170.                 if (mutation.type === 'childList') {
  171.                     mutation.addedNodes.forEach(node => {
  172.                         if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('msg')) {
  173.                             highlightMyUsername(node);
  174.                         }
  175.                     });
  176.                 }
  177.             }
  178.         });
  179.  
  180.         observer.observe(chatHistory, { childList: true, subtree: false });
  181.     } else {
  182.         console.error("hata: ");
  183.     }
  184.  
  185.     const initialMessages = chatHistory ? chatHistory.querySelectorAll('.msg') : [];
  186.     initialMessages.forEach(highlightMyUsername);
  187.  
  188.  
  189. })();