// ==UserScript== // @name GitHub - Gengar EX Pokemon Theme // @namespace tweeks.io // @version 1.0 // @description Transforms GitHub with a Gengar EX Pokemon card theme and animated Pikachu in the background // @author Tweeks // @match *://github.com/* // @grant none // ==/UserScript== (function () { 'use strict'; // ----------------------------------------------------------------------- // SVG / inline art assets (drawn with SVG paths, no external images) // ----------------------------------------------------------------------- // Gengar silhouette SVG (simplified iconic shape) const GENGAR_SVG = ` `; // Pikachu SVG (simplified cute Pikachu) const PIKACHU_SVG = ` `; // Pokeball SVG for decorative use const POKEBALL_SVG = ` `; // ----------------------------------------------------------------------- // CSS injection // ----------------------------------------------------------------------- const style = document.createElement('style'); style.id = 'pokemon-gengar-theme'; style.textContent = ` /* ===== GENGAR EX POKEMON THEME FOR GITHUB ===== */ /* Force dark mode variables to Gengar purple palette */ html, body { background-color: #1a0a2e !important; color: #e8d5ff !important; } /* Override GitHub color tokens */ :root, [data-color-mode="auto"], [data-color-mode="dark"], [data-color-mode="light"] { --color-canvas-default: #1a0a2e !important; --color-canvas-subtle: #2d1b4e !important; --color-canvas-inset: #120720 !important; --color-border-default: #6b3fa0 !important; --color-border-muted: #4a2d6e !important; --color-fg-default: #e8d5ff !important; --color-fg-muted: #c4a0e8 !important; --color-fg-subtle: #9966cc !important; --color-accent-fg: #cc99ff !important; --color-accent-emphasis: #7b5ea7 !important; --color-btn-bg: #2d1b4e !important; --color-btn-border: #6b3fa0 !important; --color-btn-text: #e8d5ff !important; --color-btn-hover-bg: #4a2d6e !important; --color-btn-primary-bg: #7b5ea7 !important; --color-btn-primary-hover-bg: #9966cc !important; --color-btn-primary-text: #ffffff !important; --color-header-bg: #120720 !important; --color-header-text: #e8d5ff !important; --color-header-logo: #cc99ff !important; --color-header-search-bg: #2d1b4e !important; --color-header-search-border: #6b3fa0 !important; --color-neutral-muted: rgba(123, 94, 167, 0.2) !important; --color-neutral-subtle: rgba(123, 94, 167, 0.1) !important; --color-success-fg: #66ff99 !important; --color-success-emphasis: #00cc55 !important; --color-danger-fg: #ff6699 !important; --color-danger-emphasis: #cc0044 !important; --color-attention-fg: #ffcc44 !important; --color-attention-emphasis: #cc9900 !important; --color-done-fg: #cc99ff !important; --color-done-emphasis: #7b5ea7 !important; --color-sponsors-fg: #ff6699 !important; --color-scale-purple-1: #2d1b4e !important; --color-scale-purple-2: #4a2d6e !important; --color-scale-purple-3: #6b3fa0 !important; --color-scale-purple-4: #7b5ea7 !important; --color-scale-purple-5: #9966cc !important; --color-scale-purple-6: #cc99ff !important; --bgColor-default: #1a0a2e !important; --bgColor-muted: #2d1b4e !important; --bgColor-inset: #120720 !important; --fgColor-default: #e8d5ff !important; --fgColor-muted: #c4a0e8 !important; --borderColor-default: #6b3fa0 !important; --borderColor-muted: #4a2d6e !important; --button-default-bgColor-rest: #2d1b4e !important; --button-default-bgColor-hover: #4a2d6e !important; --button-primary-bgColor-rest: #7b5ea7 !important; --button-primary-bgColor-hover: #9966cc !important; --control-bgColor-rest: #2d1b4e !important; --control-bgColor-hover: #4a2d6e !important; --control-borderColor-rest: #6b3fa0 !important; --header-bgColor: #120720 !important; --overlay-bgColor: #2d1b4e !important; --overlay-borderColor: #6b3fa0 !important; --color-prettylights-syntax-comment: #9966cc !important; --color-prettylights-syntax-constant: #cc99ff !important; --color-prettylights-syntax-entity: #ff99cc !important; --color-prettylights-syntax-storage-modifier-import: #e8d5ff !important; --color-prettylights-syntax-entity-tag: #66ffcc !important; --color-prettylights-syntax-keyword: #ff6699 !important; --color-prettylights-syntax-string: #ffcc66 !important; --color-prettylights-syntax-variable: #cc99ff !important; } /* ===== BACKGROUND - Pikachu lives here ===== */ body { background-color: #1a0a2e !important; background-image: radial-gradient(ellipse at 20% 50%, rgba(123, 94, 167, 0.15) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(204, 153, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(74, 45, 110, 0.2) 0%, transparent 60%) !important; min-height: 100vh !important; } /* ===== HEADER / NAV ===== */ .GlobalNav, header[aria-label="Global Navigation Menu"], .styles-module__appHeader__YzYWk { background: linear-gradient(135deg, #120720 0%, #1e0d35 50%, #120720 100%) !important; border-bottom: 2px solid #7b5ea7 !important; box-shadow: 0 2px 20px rgba(123, 94, 167, 0.5), 0 0 40px rgba(204, 153, 255, 0.1) !important; } /* ===== REPO HEADER ===== */ #repository-container-header, .tmp-pt-3 { background: linear-gradient(180deg, #1e0d35 0%, #1a0a2e 100%) !important; border-bottom: 1px solid #4a2d6e !important; } /* ===== NAVIGATION TABS ===== */ .UnderlineNav, [role="tablist"], nav[aria-label] { background: transparent !important; border-bottom: 1px solid #4a2d6e !important; } .UnderlineNav-item, [role="tab"] { color: #c4a0e8 !important; } .UnderlineNav-item:hover, [role="tab"]:hover { color: #cc99ff !important; border-bottom-color: #9966cc !important; } .UnderlineNav-item[aria-current="page"], [role="tab"][aria-selected="true"] { color: #cc99ff !important; border-bottom-color: #cc99ff !important; font-weight: 600 !important; } /* ===== BOXES / CARDS ===== */ .Box, .BorderGrid, .BorderGrid-cell, [class*="Box-"], .prc-Box-Box-XNgDl { background-color: #2d1b4e !important; border-color: #4a2d6e !important; } .Box-header, .BorderGrid-row { background-color: #1e0d35 !important; border-bottom-color: #4a2d6e !important; } /* ===== BUTTONS ===== */ .btn, .prc-Button-ButtonBase-9n-Xk, button[class*="prc-Button"] { background-color: #2d1b4e !important; border-color: #6b3fa0 !important; color: #e8d5ff !important; transition: all 0.2s ease !important; } .btn:hover, .prc-Button-ButtonBase-9n-Xk:hover, button[class*="prc-Button"]:hover { background-color: #4a2d6e !important; border-color: #9966cc !important; box-shadow: 0 0 10px rgba(153, 102, 204, 0.4) !important; } .btn-primary { background-color: #7b5ea7 !important; border-color: #9966cc !important; color: #ffffff !important; } .btn-primary:hover { background-color: #9966cc !important; box-shadow: 0 0 15px rgba(153, 102, 204, 0.6) !important; } /* ===== LINKS ===== */ a { color: #cc99ff !important; } a:hover { color: #e8d5ff !important; text-decoration: underline !important; } /* ===== INPUTS / SEARCH ===== */ input, textarea, select, .form-control, [class*="search"] input { background-color: #2d1b4e !important; border-color: #6b3fa0 !important; color: #e8d5ff !important; } input:focus, textarea:focus, select:focus, .form-control:focus { border-color: #9966cc !important; box-shadow: 0 0 0 3px rgba(153, 102, 204, 0.3) !important; outline: none !important; } /* ===== CODE BLOCKS ===== */ pre, code, .highlight, .blob-code, .blob-wrapper { background-color: #120720 !important; border-color: #4a2d6e !important; color: #e8d5ff !important; } .blob-num { background-color: #1e0d35 !important; color: #6b3fa0 !important; border-right-color: #4a2d6e !important; } /* ===== SIDEBAR / PANELS ===== */ .Layout-sidebar, [class*="sidebar"], .discussion-sidebar { background-color: #1e0d35 !important; } /* ===== LABELS / BADGES ===== */ .Label, .Counter, .badge { background-color: #4a2d6e !important; border-color: #6b3fa0 !important; color: #cc99ff !important; } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } ::-webkit-scrollbar-track { background: #120720 !important; } ::-webkit-scrollbar-thumb { background: #4a2d6e !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb:hover { background: #7b5ea7 !important; } /* ===== SELECTION ===== */ ::selection { background: rgba(123, 94, 167, 0.5) !important; color: #ffffff !important; } /* ===== GENGAR EX CARD BANNER ===== */ #pokemon-gengar-banner { position: relative; width: 100%; background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #4a2d6e 50%, #2d1b4e 70%, #1a0a2e 100%); border-bottom: 3px solid #7b5ea7; padding: 0; overflow: hidden; box-shadow: 0 4px 30px rgba(123, 94, 167, 0.6); z-index: 10; } #pokemon-gengar-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(204, 153, 255, 0.15) 0%, transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(123, 94, 167, 0.2) 0%, transparent 60%); pointer-events: none; } /* Holographic shimmer effect */ #pokemon-gengar-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(204, 153, 255, 0.08) 45%, rgba(255, 255, 255, 0.05) 50%, rgba(204, 153, 255, 0.08) 55%, transparent 60% ); background-size: 200% 100%; animation: holoShimmer 4s linear infinite; pointer-events: none; } @keyframes holoShimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .pokemon-banner-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; } .pokemon-card-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .pokemon-card-label .card-type { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #ffcc44; text-shadow: 0 0 8px rgba(255, 204, 68, 0.8); } .pokemon-card-label .card-name { font-size: 28px; font-weight: 900; color: #cc99ff; text-shadow: 0 0 10px rgba(204, 153, 255, 0.8), 0 0 20px rgba(123, 94, 167, 0.6), 2px 2px 0 #1a0a2e; letter-spacing: 1px; line-height: 1; } .pokemon-card-label .card-ex { font-size: 18px; font-weight: 900; color: #ffcc44; text-shadow: 0 0 10px rgba(255, 204, 68, 0.9); margin-left: 4px; } .pokemon-card-label .card-hp { font-size: 12px; color: #c4a0e8; letter-spacing: 1px; } .pokemon-card-label .card-hp span { font-size: 20px; font-weight: 800; color: #ff6699; text-shadow: 0 0 8px rgba(255, 102, 153, 0.7); } .pokemon-banner-gengar { position: relative; filter: drop-shadow(0 0 15px rgba(123, 94, 167, 0.9)) drop-shadow(0 0 30px rgba(204, 153, 255, 0.4)); animation: gengarFloat 3s ease-in-out infinite; } @keyframes gengarFloat { 0%, 100% { transform: translateY(0px) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } } .pokemon-banner-attacks { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .pokemon-attack { display: flex; align-items: center; gap: 8px; background: rgba(74, 45, 110, 0.5); border: 1px solid #6b3fa0; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: #e8d5ff; backdrop-filter: blur(4px); } .pokemon-attack .attack-cost { display: flex; gap: 2px; } .energy-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,0.3); } .energy-psychic { background: radial-gradient(circle at 35% 35%, #ff99cc, #cc0066); } .energy-dark { background: radial-gradient(circle at 35% 35%, #9966cc, #330066); } .energy-colorless { background: radial-gradient(circle at 35% 35%, #cccccc, #888888); } .pokemon-attack .attack-name { font-weight: 700; color: #cc99ff; } .pokemon-attack .attack-damage { font-weight: 900; color: #ffcc44; font-size: 14px; text-shadow: 0 0 6px rgba(255, 204, 68, 0.7); } .pokemon-banner-pokeballs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } .pokeball-deco { position: absolute; opacity: 0.07; animation: pokeballSpin 12s linear infinite; } @keyframes pokeballSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===== PIKACHU BACKGROUND CHARACTER ===== */ #pikachu-bg { position: fixed; bottom: 20px; right: 20px; z-index: 9999; pointer-events: none; opacity: 0.18; filter: drop-shadow(0 0 20px rgba(245, 197, 24, 0.6)); animation: pikachuBob 2.5s ease-in-out infinite; transform-origin: bottom center; } @keyframes pikachuBob { 0%, 100% { transform: translateY(0px) scale(1); } 25% { transform: translateY(-6px) scale(1.02); } 75% { transform: translateY(-3px) scale(0.99); } } /* Pikachu lightning sparks */ #pikachu-bg::after { content: ''; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background: radial-gradient(circle, #ffcc00, transparent); border-radius: 50%; animation: sparkle 1.5s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.5); } } /* ===== FLOATING SPARKLES ===== */ .pokemon-sparkle { position: fixed; pointer-events: none; z-index: 9998; border-radius: 50%; animation: floatUp linear forwards; } @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-80px) scale(0.3); } } /* ===== GITHUB LOGO GLOW ===== */ .octicon-mark-github, [aria-label="Homepage"] svg, .header-logo svg { filter: drop-shadow(0 0 8px rgba(204, 153, 255, 0.9)) !important; color: #cc99ff !important; fill: #cc99ff !important; } /* ===== REPO NAME STYLING ===== */ [itemprop="name"], .AppHeader-context-item, strong[class*="repo"] { color: #cc99ff !important; text-shadow: 0 0 8px rgba(204, 153, 255, 0.5) !important; } /* ===== DIFF / FILE CHANGES ===== */ .blob-code-addition { background-color: rgba(0, 204, 85, 0.1) !important; } .blob-code-deletion { background-color: rgba(204, 0, 68, 0.1) !important; } /* ===== TOOLTIPS ===== */ [class*="tooltip"], .Tooltip { background-color: #2d1b4e !important; border-color: #6b3fa0 !important; color: #e8d5ff !important; } /* ===== DROPDOWN MENUS ===== */ .dropdown-menu, .SelectMenu, [class*="overlay"], [class*="Overlay"], [class*="popover"], [class*="Popover"] { background-color: #2d1b4e !important; border-color: #6b3fa0 !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(123, 94, 167, 0.3) !important; } .dropdown-item:hover, .SelectMenu-item:hover { background-color: #4a2d6e !important; color: #cc99ff !important; } /* ===== PROGRESS BARS ===== */ .Progress, [class*="progress"] { background-color: #2d1b4e !important; } .Progress-item { background-color: #7b5ea7 !important; } /* ===== CONTRIBUTION GRAPH ===== */ .ContributionCalendar-day[data-level="1"] { fill: #2d1b4e !important; } .ContributionCalendar-day[data-level="2"] { fill: #4a2d6e !important; } .ContributionCalendar-day[data-level="3"] { fill: #7b5ea7 !important; } .ContributionCalendar-day[data-level="4"] { fill: #cc99ff !important; } /* ===== POKEMON CARD FOOTER ===== */ #pokemon-card-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #7b5ea7 0%, #cc99ff 25%, #ffcc44 50%, #cc99ff 75%, #7b5ea7 100% ); background-size: 200% 100%; animation: cardFooterSlide 3s linear infinite; z-index: 99999; pointer-events: none; } @keyframes cardFooterSlide { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* ===== WEAKNESS / RESISTANCE BADGE ===== */ #pokemon-stats-badge { position: fixed; bottom: 20px; left: 20px; z-index: 9999; background: linear-gradient(135deg, #1e0d35, #2d1b4e); border: 1px solid #6b3fa0; border-radius: 10px; padding: 8px 12px; font-size: 10px; color: #c4a0e8; pointer-events: none; opacity: 0.75; box-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 0 10px rgba(123, 94, 167, 0.3); line-height: 1.6; font-family: monospace; } #pokemon-stats-badge .stat-row { display: flex; gap: 8px; align-items: center; } #pokemon-stats-badge .stat-label { color: #9966cc; font-weight: 700; min-width: 80px; } #pokemon-stats-badge .stat-value { color: #e8d5ff; } #pokemon-stats-badge .weakness-icon { color: #ff6699; font-weight: 700; } #pokemon-stats-badge .resistance-icon { color: #66ff99; font-weight: 700; } /* ===== STAR / WATCH / FORK BUTTONS ===== */ .BtnGroup .btn, [class*="social-count"] { background-color: #2d1b4e !important; border-color: #6b3fa0 !important; color: #cc99ff !important; } /* ===== MISC OVERRIDES ===== */ .color-bg-default { background-color: #1a0a2e !important; } .color-bg-subtle { background-color: #2d1b4e !important; } .color-bg-inset { background-color: #120720 !important; } .color-fg-default { color: #e8d5ff !important; } .color-fg-muted { color: #c4a0e8 !important; } .color-border-default { border-color: #4a2d6e !important; } .color-border-muted { border-color: #3a2060 !important; } /* Ensure text is readable everywhere */ p, span, div, li, td, th, label, h1, h2, h3, h4, h5, h6 { color: inherit; } /* ===== PIKACHU HOVER TOOLTIP ===== */ #pikachu-bg-wrapper { position: fixed; bottom: 20px; right: 20px; z-index: 9999; pointer-events: auto; cursor: pointer; } #pikachu-bg-wrapper:hover #pikachu-bg { opacity: 0.5; animation: pikachuExcited 0.3s ease-in-out infinite; } @keyframes pikachuExcited { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-10px) rotate(5deg); } } #pikachu-tooltip { position: absolute; bottom: 100%; right: 0; background: linear-gradient(135deg, #1e0d35, #2d1b4e); border: 1px solid #ffcc44; border-radius: 8px; padding: 6px 10px; font-size: 11px; color: #ffcc44; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; box-shadow: 0 0 10px rgba(255, 204, 68, 0.4); margin-bottom: 6px; font-weight: 700; } #pikachu-bg-wrapper:hover #pikachu-tooltip { opacity: 1; } `; document.head.appendChild(style); // ----------------------------------------------------------------------- // DOM elements injection // ----------------------------------------------------------------------- // 1. Pikachu fixed background character (bottom-right) const pikachuWrapper = document.createElement('div'); pikachuWrapper.id = 'pikachu-bg-wrapper'; pikachuWrapper.innerHTML = `

${PIKACHU_SVG}

`; document.body.appendChild(pikachuWrapper); // 2. Animated footer bar const footer = document.createElement('div'); footer.id = 'pokemon-card-footer'; document.body.appendChild(footer); // 3. Pokemon stats badge (bottom-left) const statsBadge = document.createElement('div'); statsBadge.id = 'pokemon-stats-badge'; statsBadge.innerHTML = `

Pokemon Gengar EX

Type Psychic / Ghost

HP 170

Weakness x2 Dark

Resistance -20 Fight

Retreat 2

`; document.body.appendChild(statsBadge); // 4. Gengar EX banner - inject after the global nav function injectGengarBanner() { if (document.getElementById('pokemon-gengar-banner')) return; const nav = document.querySelector('header.GlobalNav, header[aria-label="Global Navigation Menu"]'); if (!nav) return; const banner = document.createElement('div'); banner.id = 'pokemon-gengar-banner'; banner.innerHTML = `

Ghost / Psychic

GengarEX

HP 170

`; nav.insertAdjacentElement('afterend', banner); } // 5. Floating sparkle particles function createSparkle() { const sparkle = document.createElement('div'); sparkle.className = 'pokemon-sparkle'; const size = Math.random() * 6 + 3; const colors = ['#cc99ff', '#ffcc44', '#ff6699', '#66ffcc', '#ffffff']; const color = colors[Math.floor(Math.random() * colors.length)]; const x = Math.random() * window.innerWidth; const y = Math.random() * window.innerHeight; const duration = Math.random() * 2 + 1.5; sparkle.style.cssText = ` width: ${size}px; height: ${size}px; background: ${color}; left: ${x}px; top: ${y}px; box-shadow: 0 0 ${size * 2}px ${color}; animation-duration: ${duration}s; `; document.body.appendChild(sparkle); setTimeout(() => sparkle.remove(), duration * 1000); } // ----------------------------------------------------------------------- // Initialization // ----------------------------------------------------------------------- function init() { injectGengarBanner(); // Spawn sparkles periodically setInterval(createSparkle, 600); // Re-inject banner on turbo navigation (GitHub uses Turbo) document.addEventListener('turbo:render', () => { setTimeout(injectGengarBanner, 100); }); document.addEventListener('pjax:end', () => { setTimeout(injectGengarBanner, 100); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();