Greasy Fork is available in English.
Expand avatars on hover for Kiwifarms Users
// ==UserScript== // @name Kiwifarms - Expand Avatars on Hover // @namespace typpi.online // @version 1.2.1 // @description Expand avatars on hover for Kiwifarms Users // @author Nick2bad4u // @match kiwifarms.com/* // @match kiwifarms.net/* // @match kiwifarms.ms/* // @match kiwifarms.ru/* // @match kiwifarms.is/* // @match kiwifarms.top/* // @match kiwifarms.tw/* // @match kiwifarms.hk/* // @match kiwifarms.nl/* // @match sneed.today/* // @match kiwifarms.pl/* // @match kiwifarms.st/* // @connect kiwifarms.st/* // @grant GM_registerMenuCommand // @grant GM_setValue // @grant GM_getValue // @homepageURL https://github.com/Nick2bad4u/UserStyles // @license Unlicense // @resource https://www.google.com/s2/favicons?sz=64&domain=kiwifarms.st // @icon https://www.google.com/s2/favicons?sz=64&domain=kiwifarms.st // @icon64 https://www.google.com/s2/favicons?sz=64&domain=kiwifarms.st // @tag kiwifarms // ==/UserScript== /* eslint-disable no-undef */ (function () { 'use strict'; // Default settings const defaultSize = 400; const defaultScale = 2; let avatarSize = GM_getValue('avatarSize', defaultSize); let avatarScale = GM_getValue('avatarScale', defaultScale); // Add custom styles for the expanded avatar const style = document.createElement('style'); style.textContent = ` .expanded-avatar { position: absolute; border: 2px solid #000; border-radius: 50%; max-width: ${avatarSize}px; max-height: ${avatarSize}px; z-index: 9999; display: none; transform: scale(${avatarScale}); } `; document.head.appendChild(style); // Create an element to show the expanded avatar const expandedAvatar = document.createElement('img'); expandedAvatar.className = 'expanded-avatar'; document.body.appendChild(expandedAvatar); // Function to show the expanded avatar function showExpandedAvatar(event) { const avatar = event.target; expandedAvatar.src = avatar.src; expandedAvatar.style.left = `${event.pageX + 60}px`; expandedAvatar.style.top = `${event.pageY + 60}px`; expandedAvatar.style.display = 'block'; } // Function to hide the expanded avatar function hideExpandedAvatar() { expandedAvatar.style.display = 'none'; } // Attach event listeners to avatar images document.querySelectorAll('.avatar img').forEach((avatar) => { avatar.addEventListener('mouseover', showExpandedAvatar); avatar.addEventListener('mouseout', hideExpandedAvatar); }); // Update avatar position on mouse move document.addEventListener('mousemove', (event) => { if (expandedAvatar.style.display === 'block') { expandedAvatar.style.left = `${event.pageX + 60}px`; expandedAvatar.style.top = `${event.pageY + 60}px`; } }); // Function to set avatar size function setAvatarSize() { const size = prompt('Enter the avatar size (in pixels, max 400):', avatarSize); if (size !== null) { // Check if the input is a valid number and within the limit const parsedSize = parseInt(size, 10); if (!isNaN(parsedSize) && parsedSize > 0 && parsedSize <= 400) { avatarSize = parsedSize; GM_setValue('avatarSize', avatarSize); updateStyle(); } else { alert('Please enter a valid positive number up to 400 for avatar size.'); } } } // Function to set avatar scale function setAvatarScale() { const scale = prompt('Enter the avatar scale (e.g., 2 for 200%):', avatarScale); if (scale !== null) { // Check if the input is a valid number const parsedScale = parseFloat(scale); if (!isNaN(parsedScale) && parsedScale > 0 && parsedScale <= 2) { avatarScale = parsedScale; GM_setValue('avatarScale', avatarScale); updateStyle(); } else { alert('Please enter a valid positive number for avatar scale.'); } } } // Function to update the custom styles function updateStyle() { style.textContent = ` .expanded-avatar { position: absolute; border: 2px solid #000; border-radius: 50%; max-width: ${avatarSize}px; max-height: ${avatarSize}px; z-index: 9999; display: none; transform: scale(${avatarScale}); } `; } // Register menu commands to set avatar size and scale GM_registerMenuCommand('Set Avatar Hover Size', setAvatarSize); GM_registerMenuCommand('Set Avatar Hover Scale', setAvatarScale); })();