Rehber Techolay tema eklentisi kurulumu (Matrix&RGB)

Omerta Silenzio dedi:

Dark Reader'ı kapatırsanız tema sayfa yenilense de gitmeyecektir

Genişletmek için tıkla...

Küçültmek için tıkla...

Omerta Silenzio dedi:

Selam.
Biliyosunuz uzun zamandır forumun varsayılan teması bir noktadan sonra insanı sıkıyor. canım sıkıldı tve³ (Techolay Visual Engine) projesini yazdım. Tamamen açık kaynak. Değiştirilebilir, geliştirilebilir.

Ekstra olay sadece renk değiştiren bir sistem yapmak değil, arayüzü komple modernize etmek.

nedir bu?​

Öncelikle scripti kurunca sol alta ufak, modern bir ayar butonu geliyor. Tıklayınca ekranın ortasına glassmorphism (buzlu cam) efektli bir kontrol paneli açılıyor. Buradan anlık olarak tema değiştirebiliyosunuz.
Eki Görüntüle 221285
Sayfayı yenileseniz de ayarınız gitmez (localstorage'a kaydettiriyorum).

şu anlık 2 mod var:​

RGB Chroma Elite (oyuncu modu):​

Bunu yaparken Razer Synapse'ten ilham aldım.
Eki Görüntüle 221281Eki Görüntüle 221282

• animasyonlar için standart CSS yerine CSS houdini API (@property) kullandım. Bu ne işe yarıyor derseniz; renk geçişleri "sıvı" gibi akıyor ve piksellenme yapmıyor.​
• profil fotoğrafları ve üst bar komple RGB senkronize çalışıyor.​
• animasyonlar için standart CSS yerine CSS houdini API (@property) kullandım. Bu ne işe yarıyor derseniz; renk geçişleri "sıvı" gibi akıyor ve piksellenme yapmıyor.​
• profil fotoları ve üst bar komple RGB senkronize çalışıyor.​

matrix netrunner (hacker modu):​

Gece takılanlar veya kodlama yapanların bayılacagını düşündüm.
Eki Görüntüle 221283Eki Görüntüle 221284

• komple siyah (AMOLED dostu) arka plan.​
• fosforlu yeşil terminal fontları.​
• CRT efekti: ekranda çok hafif, göz yormayan bir "tarama çizgisi" (scanline) animasyonu var. Tüplü monitör hissiyatı veriyor ama içeriği bozmuyor.​
• tüm butonlar ve kutular köşeli, tam terminal havasında.​

varsayılan(stock):​

Sıkılırsanız tek tıkla orijinale dönebiliyorsun, scripti silmene gerek yok.

performans konusu (önemli)​

En çok buna kastım arkadaşlar. Genelde bu tarz görsel modlar tarayıcıyı kasar, fan açtırır.

• bu scriptte animasyonların hepsi GPU accelerated (donanım hızlandırmalı) çalışıyor.​
• yani yükü işlemciye (CPU) değil, ekran kartına yıktım.​
• telefonda (Mobile Firefox/Kiwi browser) bizzat test ettim, pil sömürme veya ısınma sorunu yok. 60 FPS yağ gibi akıor. Eski cihazlarda ufak tefek pürüzler olabilir buna yapacak bir şeyim yok maalesef.​

kurulum​

Tarayıcınızda Tampermonkey veya Violentmonkey eklentisi olması lazım (yoksa mağazadan indirin 2 saniye).

1. eklentiye tıklayıp "yeni script ekle" deyin.​
2. açılan yere aşağıdaki kodun tamamını yapıştırın.​
3. kaydet (CTRL+s) deyip çıkın.​
4. Techolay'a girip F5 atın, sol altta butonu görüceksiniz zaten.​

dw:​

JavaScript:

// ==UserScript==
// @name TVE³ — Visual Override.
// @namespace https://github.com/0bfsc4t0r
// @version 3.0.1
// @description Premium visual overhaul for Techolay Sosyal.
// @author 0bfsc4t0r.
// @match *://www.techolay.net/sosyal/*
// @match *://techolay.net/sosyal/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=techolay.net
// @grant GM_addStyle.
// @run-at document-idle
// @license MIT.
// ==/UserScript==

(function() {
 'use strict';
 const CFG = {
 KEY: 'tve3_cfg',
 MODE: {
 OFF: 'off',
 RGB: 'rgb',
 MTX: 'mtx'.
 },
 Z: {
 BTN: 999998,
 MODAL: 999999,
 OVL: 999997.
 }
 };
 let mode = CFG.MODE.OFF;
 let panelOpen = false;
 const $ = {
 save: (m) => {
 try {
 localStorage.setItem(CFG.KEY, JSON.stringify({
 m,
 v: '3.0.1'
 }));
 } catch (e) {}
 },
 load: () => {
 try {
 const d = localStorage.getItem(CFG.KEY);
 return d ? JSON.parse(d).m : CFG.MODE.OFF;
 } catch (e) {
 return CFG.MODE.OFF;
 }
 },
 el: (t, a = {}, c = []) => {
 const e = document.createElement(t);
 Object.entries(a).forEach(([k, v]) => {
 if (k === 'cls') e.className = v;
 else if (k === 'html') e.innerHTML = v;
 else if (k.startsWith('on')) e.addEventListener(k.slice(2).toLowerCase(), v);
 else e.setAttribute(k, v);
 });
 c.forEach(x => e.appendChild(typeof x === 'string' ? document.createTextNode(x) : x));
 return e;
 },
 inj: (id, css) => {
 const s = document.createElement('style');
 s.id = id;
 s.textContent = css;
 document.head.appendChild(s);
 }
 };
 const baseCSS = () => ` :root{--tve-speed:0.35s;--tve-ease:cubic-bezier(0.4,0,0.2,1)} .tve-btn{position:fixed;bottom:24px;left:24px;width:56px;height:56px;border-radius:16px;border:none;cursor:pointer;z-index:${CFG.Z.BTN};display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#1a1a2e,#16213e);box-shadow:0 4px 15px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.1);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden} .tve-btn::before{content:'';position:absolute;inset:0;border-radius:16px;padding:2px;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#f5576c,#4facfe,#667eea);background-size:300% 300%;animation:tve-gr 4s ease infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.7;transition:opacity 0.3s ease} .tve-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(102,126,234,0.4),0 0 0 1px rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.15)} .tve-btn:hover::before{opacity:1} .tve-btn:active{transform:translateY(-1px) scale(0.98)} .tve-btn svg{width:26px;height:26px;fill:none;stroke:#e0e0e0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);filter:drop-shadow(0 0 4px rgba(102,126,234,0.5))} .tve-btn:hover svg{transform:rotate(90deg);stroke:#fff} .tve-btn.open svg{transform:rotate(180deg)} .tve-ovl{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:${CFG.Z.OVL};opacity:0;visibility:hidden;transition:all 0.3s ease} .tve-ovl.show{opacity:1;visibility:visible} .tve-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);width:min(440px,90vw);max-height:85vh;z-index:${CFG.Z.MODAL};opacity:0;visibility:hidden;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)} .tve-modal.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)} .tve-card{background:linear-gradient(135deg,rgba(30,30,50,0.97) 0%,rgba(20,20,35,0.99) 100%);border-radius:24px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 25px 50px -12px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05),inset 0 1px 0 rgba(255,255,255,0.1);overflow:hidden;position:relative} .tve-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent)} .tve-hdr{padding:24px 28px;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,255,255,0.03) 0%,transparent 100%)} .tve-title{display:flex;align-items:center;gap:12px;margin:0;font-size:18px;font-weight:600;color:#fff;letter-spacing:0.5px} .tve-ico{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(102,126,234,0.4)} .tve-ico svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2} .tve-x{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease} .tve-x:hover{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.3)} .tve-x svg{width:18px;height:18px;stroke:#a0a0a0;transition:stroke 0.2s ease} .tve-x:hover svg{stroke:#ef4444} .tve-body{padding:24px 28px 28px} .tve-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:#888;margin-bottom:16px;display:flex;align-items:center;gap:8px} .tve-lbl::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.1),transparent)} .tve-grid{display:flex;flex-direction:column;gap:12px} .tve-opt{position:relative;padding:18px 20px;border-radius:16px;border:2px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:16px;overflow:hidden} .tve-opt::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.3s ease} .tve-opt:hover{border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.04);transform:translateX(4px)} .tve-opt.on{border-color:transparent;background:rgba(102,126,234,0.15)} .tve-opt.on::before{opacity:1;background:linear-gradient(135deg,rgba(102,126,234,0.1),rgba(118,75,162,0.1))} .tve-tico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden} .tve-tico.t0{background:linear-gradient(145deg,#3a3a4a,#2a2a3a);border:1px solid rgba(255,255,255,0.1)} .tve-tico.t1{background:linear-gradient(135deg,#1a1a2e,#0d0d1a);border:2px solid transparent;background-clip:padding-box} .tve-tico.t1::before{content:'';position:absolute;inset:-2px;border-radius:14px;background:conic-gradient(from 0deg,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);animation:tve-spin 2s linear infinite;z-index:-1} .tve-tico.t2{background:#0a0a0a;border:1px solid #00ff41;box-shadow:0 0 10px rgba(0,255,65,0.3),inset 0 0 15px rgba(0,255,65,0.1)} .tve-tico svg{width:24px;height:24px;stroke-width:1.5;position:relative;z-index:1} .tve-tico.t0 svg{stroke:#8a8a9a} .tve-tico.t1 svg{stroke:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,0.5))} .tve-tico.t2 svg{stroke:#00ff41;filter:drop-shadow(0 0 4px rgba(0,255,65,0.8))} .tve-cnt{flex:1;min-width:0} .tve-nm{font-size:15px;font-weight:600;color:#fff;margin-bottom:4px;display:flex;align-items:center;gap:8px} .tve-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 6px;border-radius:4px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff} .tve-desc{font-size:12px;color:#888;line-height:1.4} .tve-rad{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s ease} .tve-rad::after{content:'';width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);transform:scale(0);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)} .tve-opt.on .tve-rad{border-color:#667eea} .tve-opt.on .tve-rad::after{transform:scale(1)} .tve-ftr{padding:16px 28px 20px;border-top:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between} .tve-ftr-txt{font-size:11px;color:#666;display:flex;align-items:center;gap:6px} .tve-ver{background:rgba(255,255,255,0.08);padding:2px 8px;border-radius:4px;font-weight:600;color:#888} @keyframes tve-gr{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes tve-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @media(max-width:640px){.tve-btn{bottom:16px;left:16px;width:50px;height:50px;border-radius:14px}.tve-btn svg{width:22px;height:22px}.tve-modal{width:calc(100vw - 32px)}.tve-hdr{padding:20px 22px}.tve-body{padding:20px 22px 24px}.tve-title{font-size:16px}.tve-opt{padding:14px 16px}.tve-tico{width:42px;height:42px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}} `;
 const rgbCSS = () => ` :root{--rgb-bg:#0d0d14;--rgb-bg2:#12121a;--rgb-bg3:#181822} @property --rgb-deg{syntax:'<angle>';initial-value:0deg;inherits:false} @keyframes tve-chr{to{--rgb-deg:360deg}} @keyframes tve-hdr-glow{0%{background-position:0% 50%}100%{background-position:200% 50%}} body.tve-rgb{background:var(--rgb-bg)!important;background-image:radial-gradient(ellipse at 20% 20%,rgba(102,126,234,0.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(118,75,162,0.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(245,87,108,0.04) 0%,transparent 70%)!important} body.tve-rgb .p-body,body.tve-rgb .p-body-inner,body.tve-rgb .p-body-main{background:transparent!important} body.tve-rgb .p-header,body.tve-rgb .p-nav{background:linear-gradient(180deg,rgba(13,13,20,0.98) 0%,rgba(18,18,26,0.95) 100%)!important;border-bottom:1px solid transparent!important;box-shadow:0 4px 30px rgba(0,0,0,0.4),0 1px 0 rgba(255,255,255,0.05),inset 0 -1px 0 rgba(255,255,255,0.03);position:relative} body.tve-rgb .p-header::after,body.tve-rgb .p-nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#ff0000 10%,#ff8000 20%,#ffff00 30%,#80ff00 40%,#00ff80 50%,#00ffff 60%,#0080ff 70%,#8000ff 80%,#ff0080 90%,transparent 100%);background-size:200% 100%;animation:tve-hdr-glow 4s linear infinite;opacity:0.8} body.tve-rgb .block-container,body.tve-rgb .block--messages{background:linear-gradient(145deg,rgba(18,18,26,0.9) 0%,rgba(13,13,20,0.95) 100%)!important;border:1px solid rgba(255,255,255,0.06)!important;border-radius:16px!important;box-shadow:0 10px 40px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.03),inset 0 1px 0 rgba(255,255,255,0.03);position:relative;overflow:hidden} body.tve-rgb .message,body.tve-rgb .message--post{background:linear-gradient(145deg,rgba(24,24,34,0.8) 0%,rgba(18,18,26,0.9) 100%)!important;border:1px solid rgba(255,255,255,0.05)!important;border-radius:12px!important;margin:12px!important;padding:16px!important;position:relative;transition:all 0.3s ease;box-shadow:0 4px 20px rgba(0,0,0,0.2)} body.tve-rgb .message:hover,body.tve-rgb .message--post:hover{border-color:rgba(102,126,234,0.3)!important;box-shadow:0 8px 30px rgba(0,0,0,0.3),0 0 20px rgba(102,126,234,0.1),0 0 40px rgba(118,75,162,0.05);transform:translateY(-2px)} body.tve-rgb .message::before{content:'';position:absolute;inset:-1px;border-radius:13px;padding:1px;background:conic-gradient(from var(--rgb-deg,0deg),rgba(255,0,0,0.4),rgba(255,128,0,0.4),rgba(255,255,0,0.4),rgba(0,255,0,0.4),rgba(0,255,255,0.4),rgba(0,128,255,0.4),rgba(128,0,255,0.4),rgba(255,0,255,0.4),rgba(255,0,0,0.4));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tve-chr 4s linear infinite;opacity:0;transition:opacity 0.3s ease;z-index:-1} body.tve-rgb .message:hover::before{opacity:1} body.tve-rgb .avatar,body.tve-rgb .message-avatar{position:relative;z-index:1} body.tve-rgb .avatar img,body.tve-rgb .message-avatar img,body.tve-rgb .avatar-u{border-radius:50%!important;box-shadow:0 0 0 3px rgba(13,13,20,1),0 0 20px rgba(102,126,234,0.4),0 0 40px rgba(118,75,162,0.2)!important;position:relative} body.tve-rgb .avatar::after,body.tve-rgb .message-avatar::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from var(--rgb-deg,0deg),#ff0000,#ff8000,#ffff00,#00ff00,#00ffff,#0000ff,#8000ff,#ff00ff,#ff0000);animation:tve-chr 2s linear infinite;z-index:-1;filter:blur(1px)} body.tve-rgb{color:#e4e4e7!important} body.tve-rgb .message-body,body.tve-rgb .bbWrapper,body.tve-rgb p{color:#d4d4d8!important} body.tve-rgb a{color:#a5b4fc!important;transition:all 0.2s ease} body.tve-rgb a:hover{color:#c4b5fd!important;text-shadow:0 0 10px rgba(196,181,253,0.5)} body.tve-rgb .username,body.tve-rgb .message-userDetails a{background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#f9a8d4)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;font-weight:600!important} body.tve-rgb .button,body.tve-rgb button:not(.tve-btn):not(.tve-x):not(.tve-opt){background:linear-gradient(145deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2))!important;border:1px solid rgba(102,126,234,0.3)!important;border-radius:8px!important;color:#e4e4e7!important;transition:all 0.3s ease!important} body.tve-rgb .button:hover,body.tve-rgb button:not(.tve-btn):not(.tve-x):not(.tve-opt):hover{background:linear-gradient(145deg,rgba(102,126,234,0.3),rgba(118,75,162,0.3))!important;box-shadow:0 4px 15px rgba(102,126,234,0.3),0 0 20px rgba(118,75,162,0.2)!important;transform:translateY(-1px)} body.tve-rgb input,body.tve-rgb textarea,body.tve-rgb select{background:rgba(13,13,20,0.8)!important;border:1px solid rgba(102,126,234,0.2)!important;border-radius:8px!important;color:#e4e4e7!important;transition:all 0.3s ease} body.tve-rgb input:focus,body.tve-rgb textarea:focus{border-color:rgba(102,126,234,0.5)!important;box-shadow:0 0 0 3px rgba(102,126,234,0.1),0 0 20px rgba(102,126,234,0.2)!important;outline:none!important} body.tve-rgb ::-webkit-scrollbar{width:10px;height:10px} body.tve-rgb ::-webkit-scrollbar-track{background:rgba(13,13,20,0.8);border-radius:5px} body.tve-rgb ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(102,126,234,0.5),rgba(118,75,162,0.5));border-radius:5px;border:2px solid rgba(13,13,20,0.8)} body.tve-rgb ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(102,126,234,0.7),rgba(118,75,162,0.7))} body.tve-rgb .p-body-sidebar{background:transparent!important} body.tve-rgb .block{background:linear-gradient(145deg,rgba(18,18,26,0.9) 0%,rgba(13,13,20,0.95) 100%)!important;border:1px solid rgba(255,255,255,0.06)!important;border-radius:12px!important;overflow:hidden} body.tve-rgb .block-header{background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,transparent 100%)!important;border-bottom:1px solid rgba(255,255,255,0.05)!important} body.tve-rgb .bbCodeBlock--quote{background:rgba(102,126,234,0.05)!important;border-left:3px solid rgba(102,126,234,0.5)!important;border-radius:0 8px 8px 0!important} body.tve-rgb .bbCodeBlock--code{background:rgba(13,13,20,0.9)!important;border:1px solid rgba(102,126,234,0.2)!important;border-radius:8px!important} `;
 const mtxCSS = () => ` :root{--mtx:#00ff41;--mtx-dim:#00cc33;--mtx-glow:rgba(0,255,65,0.5);--mtx-bg:#0a0a0a;--mtx-brd:rgba(0,255,65,0.2)} @keyframes tve-scan{0%,100%{opacity:1}50%{opacity:0.98}} @keyframes tve-mline{0%{opacity:0.3;transform:scaleX(0.5)}50%{opacity:1;transform:scaleX(1)}100%{opacity:0.3;transform:scaleX(0.5)}} @keyframes tve-blink{50%{opacity:0}} body.tve-mtx::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999990;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15) 0px,rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);animation:tve-scan 0.1s infinite} body.tve-mtx::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999989;background:radial-gradient(ellipse at center,transparent 0%,transparent 60%,rgba(0,0,0,0.4) 100%)} body.tve-mtx{background:var(--mtx-bg)!important;background-image:linear-gradient(rgba(0,255,65,0.01) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,65,0.01) 1px,transparent 1px)!important;background-size:20px 20px!important;color:var(--mtx)!important;font-family:'Courier New','Lucida Console',Monaco,monospace!important} body.tve-mtx .p-body,body.tve-mtx .p-body-inner{background:transparent!important} body.tve-mtx *{font-family:'Courier New','Lucida Console',Monaco,monospace!important} body.tve-mtx h1,body.tve-mtx h2,body.tve-mtx h3,body.tve-mtx .block-header{font-weight:bold!important;text-transform:uppercase!important;letter-spacing:2px!important;color:var(--mtx)!important;text-shadow:0 0 5px var(--mtx-glow),0 0 10px var(--mtx-glow),0 0 20px rgba(0,255,65,0.3)!important} body.tve-mtx p,body.tve-mtx span,body.tve-mtx .message-body,body.tve-mtx .bbWrapper{color:var(--mtx-dim)!important;text-shadow:0 0 3px rgba(0,255,65,0.3)!important;line-height:1.6!important} body.tve-mtx a{color:var(--mtx)!important;text-decoration:none!important;border-bottom:1px dashed var(--mtx-brd)!important;transition:all 0.2s ease!important} body.tve-mtx a:hover{color:#fff!important;text-shadow:0 0 10px var(--mtx),0 0 20px var(--mtx-glow)!important;border-bottom-color:var(--mtx)!important} body.tve-mtx .p-header,body.tve-mtx .p-nav{background:linear-gradient(180deg,rgba(10,10,10,0.98) 0%,rgba(13,13,13,0.95) 100%)!important;border-bottom:1px solid var(--mtx-brd)!important;box-shadow:0 0 20px rgba(0,255,65,0.1),inset 0 -1px 0 var(--mtx-brd)!important} body.tve-mtx .p-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--mtx),transparent);animation:tve-mline 2s linear infinite} body.tve-mtx .block-container,body.tve-mtx .block--messages,body.tve-mtx .block{background:rgba(10,10,10,0.95)!important;border:1px solid var(--mtx-brd)!important;border-radius:0!important;box-shadow:0 0 15px rgba(0,255,65,0.05),inset 0 0 30px rgba(0,255,65,0.02)!important;position:relative} body.tve-mtx .block-header{background:rgba(0,255,65,0.05)!important;border-bottom:1px solid var(--mtx-brd)!important;padding:12px 16px!important} body.tve-mtx .block-header::before{content:'> ';color:var(--mtx)} body.tve-mtx .message,body.tve-mtx .message--post{background:rgba(13,13,13,0.9)!important;border:1px solid rgba(0,255,65,0.15)!important;border-left:3px solid var(--mtx)!important;border-radius:0!important;margin:8px 12px!important;position:relative;transition:all 0.3s ease} body.tve-mtx .message:hover{border-left-color:#fff!important;background:rgba(0,255,65,0.03)!important;box-shadow:0 0 20px rgba(0,255,65,0.1),inset 0 0 30px rgba(0,255,65,0.02)!important} body.tve-mtx .avatar img,body.tve-mtx .message-avatar img,body.tve-mtx .avatar-u{border-radius:0!important;border:2px solid var(--mtx)!important;box-shadow:0 0 10px rgba(0,255,65,0.3),inset 0 0 10px rgba(0,255,65,0.1)!important;filter:grayscale(50%) brightness(0.9) contrast(1.2)!important;transition:all 0.3s ease} body.tve-mtx .avatar:hover img,body.tve-mtx .message-avatar:hover img{filter:grayscale(0%) brightness(1) contrast(1)!important;box-shadow:0 0 20px rgba(0,255,65,0.5),inset 0 0 15px rgba(0,255,65,0.2)!important} body.tve-mtx .username,body.tve-mtx .message-userDetails a{color:var(--mtx)!important;font-weight:bold!important;text-shadow:0 0 8px var(--mtx-glow)!important} body.tve-mtx .username::before{content:'@';opacity:0.5} body.tve-mtx .button,body.tve-mtx button:not(.tve-btn):not(.tve-x):not(.tve-opt){background:transparent!important;border:1px solid var(--mtx)!important;border-radius:0!important;color:var(--mtx)!important;text-transform:uppercase!important;letter-spacing:1px!important;font-weight:bold!important;transition:all 0.3s ease!important;position:relative;overflow:hidden} body.tve-mtx .button::before,body.tve-mtx button:not(.tve-btn):not(.tve-x):not(.tve-opt)::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,65,0.2),transparent);transition:left 0.3s ease} body.tve-mtx .button:hover,body.tve-mtx button:not(.tve-btn):not(.tve-x):not(.tve-opt):hover{background:rgba(0,255,65,0.1)!important;box-shadow:0 0 15px rgba(0,255,65,0.3),inset 0 0 20px rgba(0,255,65,0.1)!important;color:#fff!important} body.tve-mtx .button:hover::before{left:100%} body.tve-mtx input,body.tve-mtx textarea,body.tve-mtx select{background:rgba(0,0,0,0.8)!important;border:1px solid var(--mtx-brd)!important;border-radius:0!important;color:var(--mtx)!important;caret-color:var(--mtx)!important} body.tve-mtx input:focus,body.tve-mtx textarea:focus{border-color:var(--mtx)!important;box-shadow:0 0 10px rgba(0,255,65,0.3),inset 0 0 20px rgba(0,255,65,0.05)!important;outline:none!important} body.tve-mtx input::placeholder,body.tve-mtx textarea::placeholder{color:rgba(0,255,65,0.4)!important} body.tve-mtx .bbCodeBlock--quote{background:rgba(0,255,65,0.03)!important;border-left:2px solid var(--mtx)!important;border-radius:0!important;position:relative} body.tve-mtx .bbCodeBlock--quote::before{content:'// QUOTE:';display:block;font-size:10px;color:rgba(0,255,65,0.5);margin-bottom:8px;text-transform:uppercase;letter-spacing:2px} body.tve-mtx .bbCodeBlock--code{background:rgba(0,0,0,0.9)!important;border:1px solid var(--mtx)!important;border-radius:0!important} body.tve-mtx ::-webkit-scrollbar{width:8px;height:8px} body.tve-mtx ::-webkit-scrollbar-track{background:#0a0a0a;border-left:1px solid var(--mtx-brd)} body.tve-mtx ::-webkit-scrollbar-thumb{background:rgba(0,255,65,0.3);border:1px solid var(--mtx)} body.tve-mtx ::-webkit-scrollbar-thumb:hover{background:rgba(0,255,65,0.5)} body.tve-mtx ::selection{background:rgba(0,255,65,0.3);color:#fff} body.tve-mtx .p-nav-list>li>a{color:var(--mtx)!important;text-transform:uppercase!important;letter-spacing:1px!important} body.tve-mtx .p-nav-list>li>a:hover{text-shadow:0 0 10px var(--mtx)!important} body.tve-mtx .message-userDetails::after{content:'_';animation:tve-blink 1s step-end infinite;color:var(--mtx);margin-left:2px} body.tve-mtx .p-body-main::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='10' y='20' fill='%2300ff41' font-family='monospace' font-size='12'%3E01%3C/text%3E%3Ctext x='30' y='40' fill='%2300ff41' font-family='monospace' font-size='12'%3E10%3C/text%3E%3Ctext x='60' y='60' fill='%2300ff41' font-family='monospace' font-size='12'%3E11%3C/text%3E%3Ctext x='20' y='80' fill='%2300ff41' font-family='monospace' font-size='12'%3E00%3C/text%3E%3Ctext x='70' y='30' fill='%2300ff41' font-family='monospace' font-size='12'%3E01%3C/text%3E%3Ctext x='50' y='90' fill='%2300ff41' font-family='monospace' font-size='12'%3E10%3C/text%3E%3C/svg%3E");z-index:0} `;
 const Theme = {
 apply(m) {
 document.body.classList.remove('tve-rgb', 'tve-mtx');
 const old = document.getElementById('tve-theme');
 if (old) old.remove();
 if (m === CFG.MODE.RGB) {
 document.body.classList.add('tve-rgb');
 $.inj('tve-theme', rgbCSS());
 } else if (m === CFG.MODE.MTX) {
 document.body.classList.add('tve-mtx');
 $.inj('tve-theme', mtxCSS());
 }
 mode = m;
 $.save(m);
 this.sync();
 },
 sync() {
 document.querySelectorAll('.tve-opt').forEach(o => {
 o.classList.toggle('on', o.dataset.m === mode);
 });
 }
 };
 const UI = {
 btn: null,
 ovl: null,
 modal: null,
 init() {
 this.mkBtn();
 this.mkModal();
 this.bind();
 },
 mkBtn() {
 const b = $.el('button', {
 cls: 'tve-btn',
 title: 'TVE³ Settings',
 html: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>`
 });
 document.body.appendChild(b);
 this.btn = b;
 },
 mkModal() {
 const o = $.el('div', {
 cls: 'tve-ovl'
 });
 document.body.appendChild(o);
 this.ovl = o;
 const m = $.el('div', {
 cls: 'tve-modal'
 });
 m.innerHTML = ` <div class="tve-card"> <div class="tve-hdr"> <h2 class="tve-title"><div class="tve-ico"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>TVE³</h2> <button class="tve-x" title="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button> </div> <div class="tve-body"> <div class="tve-lbl">Tema Seç</div> <div class="tve-grid"> <div class="tve-opt${mode===CFG.MODE.OFF?' on':''}" data-m="${CFG.MODE.OFF}"> <div class="tve-tico t0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg></div> <div class="tve-cnt"><div class="tve-nm">VARSAYILAN</div><div class="tve-desc">Orijinal site görünümü, değişiklik yok</div></div> <div class="tve-rad"></div> </div> <div class="tve-opt${mode===CFG.MODE.RGB?' on':''}" data-m="${CFG.MODE.RGB}"> <div class="tve-tico t1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div> <div class="tve-cnt"><div class="tve-nm">RGB CHROMA ELITE<span class="tve-tag">PRO</span></div><div class="tve-desc">Animasyonlu sıvı ışık kenarlıkları & neon efektler</div></div> <div class="tve-rad"></div> </div> <div class="tve-opt${mode===CFG.MODE.MTX?' on':''}" data-m="${CFG.MODE.MTX}"> <div class="tve-tico t2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><path d="M6 8h.01M10 8h.01"/></svg></div> <div class="tve-cnt"><div class="tve-nm">MATRIX NETRUNNER<span class="tve-tag">NEW</span></div><div class="tve-desc">CRT tarama çizgileri, fosfor yeşili & terminal estetiği</div></div> <div class="tve-rad"></div> </div> </div> </div> <div class="tve-ftr"><span class="tve-ftr-txt"><span class="tve-ver">v3.0.1</span>by 0bfsc4t0r</span></div> </div>`;
 document.body.appendChild(m);
 this.modal = m;
 },
 bind() {
 this.btn.addEventListener('click', () => this.toggle());
 this.ovl.addEventListener('click', () => this.close());
 this.modal.querySelector('.tve-x').addEventListener('click', () => this.close());
 this.modal.querySelectorAll('.tve-opt').forEach(o => {
 o.addEventListener('click', () => Theme.apply(o.dataset.m));
 });
 document.addEventListener('keydown', e => {
 if (e.key === 'Escape' && panelOpen) this.close();
 });
 },
 toggle() {
 panelOpen ? this.close() : this.open();
 },
 open() {
 panelOpen = true;
 this.btn.classList.add('open');
 this.ovl.classList.add('show');
 this.modal.classList.add('show');
 Theme.sync();
 },
 close() {
 panelOpen = false;
 this.btn.classList.remove('open');
 this.ovl.classList.remove('show');
 this.modal.classList.remove('show');
 }
 };

 function boot() {
 $.inj('tve-base', baseCSS());
 mode = $.load();
 if (mode !== CFG.MODE.OFF) Theme.apply(mode);
 UI.init();
 console.log('%c⚡ TVE³ %c v3.0.1 ', 'background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:6px 10px;border-radius:4px 0 0 4px;font-weight:bold', 'background:#1a1a2e;color:#a5b4fc;padding:6px 10px;border-radius:0 4px 4px 0');
 }
 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
 else boot();
})();

Genişletmek için tıkla...

Küçültmek için tıkla...