// ==UserScript== // @name X Hand-Drawn Homefeed // @namespace https://tweeks.io/ // @version 1.2.16 // @description Adds a theme-aware hand-drawn visual treatment to the X/Twitter home feed and tweet pages. // @author Tweeks // @match https://x.com/* // @match https://twitter.com/* // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // @grant GM_registerMenuCommand // @grant GM_xmlhttpRequest // @connect fonts.gstatic.com // @run-at document-idle // @noframes // ==/UserScript== (function () { 'use strict'; const STYLE_ID = 'xhd-style-v40'; const FILTER_ID = 'xhd-line-filters'; const STORAGE_KEY = 'x_hand_drawn_homefeed_settings_v5'; const PROCESS_DEBOUNCE_MS = 260; const THEME_REFRESH_MS = 1000; const TWEET_VARIANT_CLASSES = Object.freeze(['xhd-variant-0', 'xhd-variant-1', 'xhd-variant-2', 'xhd-variant-3']); const RELEVANT_MUTATION_SELECTOR = [ '[data-testid="primaryColumn"]', '[data-testid="sidebarColumn"]', 'header[role="banner"]', 'article[data-testid="tweet"]', '[role="tablist"]', '[data-testid="tweetTextarea_0"]', '[data-testid="toolBar"]', '[data-testid="tweetPhoto"]', '[data-testid="videoPlayer"]', '[data-testid="card.wrapper"]', ].join(','); const DEFAULT_SETTINGS = Object.freeze({ enabled: true, mediaSketch: true, strongerText: true, experimentalShapes: true, }); const GLORIA_FONT = Object.freeze({ family: 'XHD Gloria Hallelujah', font: '"XHD Gloria Hallelujah"', url: 'https://fonts.gstatic.com/s/gloriahallelujah/v24/LYjYdHv3kUk9BMV96EIswT9DIbW-MLSy.ttf', scale: '0.98em', lineHeight: '1.6', shadow: '0.3px 0.1px 0 currentColor', displayShadow: '0.42px 0.14px 0 currentColor', }); let settings = { ...DEFAULT_SETTINGS }; let observer = null; let processTimer = null; let lastThemeRefresh = 0; let lastUrl = location.href; let gloriaFontLoaded = false; let gloriaFontLoadPromise = null; function safeJsonParse(value, fallback) { try { return value ? JSON.parse(value) : fallback; } catch (_) { return fallback; } } function gmGet(key, fallback) { try { if (typeof GM_getValue === 'function') { const value = GM_getValue(key, null); if (value !== null && value !== undefined) { return typeof value === 'string' ? safeJsonParse(value, fallback) : value; } } } catch (_) {} try { return safeJsonParse(localStorage.getItem(key), fallback); } catch (_) { return fallback; } } function gmSet(key, value) { try { if (typeof GM_setValue === 'function') GM_setValue(key, value); } catch (_) {} try { localStorage.setItem(key, JSON.stringify(value)); } catch (_) {} } function loadSettings() { const stored = gmGet(STORAGE_KEY, DEFAULT_SETTINGS); settings = { ...DEFAULT_SETTINGS }; for (const key of Object.keys(DEFAULT_SETTINGS)) { if (typeof stored?.[key] === typeof DEFAULT_SETTINGS[key]) settings[key] = stored[key]; } } function saveSettings() { gmSet(STORAGE_KEY, settings); } function registerMenu(label, handler) { try { if (typeof GM_registerMenuCommand === 'function') GM_registerMenuCommand(label, handler); } catch (_) {} } function applyGloriaFont() { const root = document.documentElement; if (!root) return; const variant = GLORIA_FONT; root.style.setProperty('--xhd-font', `${variant.font}, "Comic Sans MS", "Chalkboard SE", "Bradley Hand", "Marker Felt", "Segoe Print", cursive, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`); root.style.setProperty('--xhd-display-font', `${variant.font}, "Comic Sans MS", "Chalkboard SE", cursive, sans-serif`); root.style.setProperty('--xhd-text-scale', variant.scale); root.style.setProperty('--xhd-text-line-height', variant.lineHeight); root.style.setProperty('--xhd-text-shadow', variant.shadow); root.style.setProperty('--xhd-display-shadow', variant.displayShadow); } function gmFetchArrayBuffer(url) { return new Promise((resolve, reject) => { if (typeof GM_xmlhttpRequest !== 'function') { reject(new Error('GM_xmlhttpRequest is unavailable')); return; } GM_xmlhttpRequest({ method: 'GET', url, responseType: 'blob', timeout: 15000, onload: async (response) => { const body = response.response; if (response.status >= 200 && response.status < 300 && body) { try { if (body instanceof ArrayBuffer) { resolve(body); } else if (ArrayBuffer.isView(body)) { resolve(body.buffer); } else { resolve(await body.arrayBuffer()); } } catch (error) { reject(error); } return; } reject(new Error(`Font request failed with status ${response.status}`)); }, onerror: () => reject(new Error('Font request failed')), ontimeout: () => reject(new Error('Font request timed out')), }); }); } async function ensureGloriaFontLoaded() { if (gloriaFontLoaded) return 'loaded'; if (gloriaFontLoadPromise) return gloriaFontLoadPromise; if (typeof FontFace !== 'function' || !document.fonts || typeof document.fonts.add !== 'function') return 'unavailable'; gloriaFontLoadPromise = (async () => { try { const buffer = await gmFetchArrayBuffer(GLORIA_FONT.url); const font = new FontFace(GLORIA_FONT.family, buffer, { style: 'normal', weight: '400', display: 'swap', }); const loadedFont = await font.load(); document.fonts.add(loadedFont); gloriaFontLoaded = true; return 'loaded'; } catch (error) { console.warn('[X Hand-Drawn Homefeed] Gloria Hallelujah font load failed:', error); gloriaFontLoadPromise = null; return 'fallback'; } })(); return gloriaFontLoadPromise; } function registerMenus() { registerMenu('Toggle hand-drawn X', () => { settings.enabled = !settings.enabled; saveSettings(); applyRootState(); scheduleProcess(); }); registerMenu('Toggle media sketch frames', () => { settings.mediaSketch = !settings.mediaSketch; saveSettings(); applyRootState(); }); registerMenu('Toggle stronger handwritten text', () => { settings.strongerText = !settings.strongerText; saveSettings(); applyRootState(); }); registerMenu('Toggle experimental CSS shapes', () => { settings.experimentalShapes = !settings.experimentalShapes; saveSettings(); applyRootState(); }); } function parseRgb(value) { if (!value || typeof value !== 'string') return null; const match = value.match(/rgba?$([^)]+)$/i); if (!match) return null; const raw = match[1].trim(); const [channelsRaw, alphaRaw] = raw.split('/').map((part) => part.trim()); const parts = channelsRaw.includes(',') ? channelsRaw.split(',').map((part) => part.trim()) : channelsRaw.split(/\s+/).map((part) => part.trim()); if (parts.length < 3) return null; const parseChannel = (part) => { if (part.endsWith('%')) return (Number.parseFloat(part) / 100) * 255; return Number.parseFloat(part); }; const parseAlpha = (part) => { if (!part) return 1; if (part.endsWith('%')) return Number.parseFloat(part) / 100; return Number.parseFloat(part); }; const r = parseChannel(parts[0]); const g = parseChannel(parts[1]); const b = parseChannel(parts[2]); const alphaPart = alphaRaw || (channelsRaw.includes(',') ? parts[3] : null); const a = parseAlpha(alphaPart); if ([r, g, b, a].some((part) => Number.isNaN(part))) return null; return { r: Math.max(0, Math.min(255, r)), g: Math.max(0, Math.min(255, g)), b: Math.max(0, Math.min(255, b)), a: Math.max(0, Math.min(1, a)), }; } function rgba(color, alpha) { const parsed = parseRgb(color); if (!parsed) return `rgba(15, 20, 25, ${alpha})`; return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${alpha})`; } function getVisibleBackground(element) { let current = element; while (current && current !== document.documentElement) { const color = getComputedStyle(current).backgroundColor; const parsed = parseRgb(color); if (parsed && parsed.a > 0.05) return color; current = current.parentElement; } return getComputedStyle(document.body || document.documentElement).backgroundColor || 'rgb(255, 255, 255)'; } function isSupportedRoute() { const path = location.pathname.replace(/\/+$/, '') || '/'; return path === '/home' || path === '/' || /^\/(?:i\/)?status\/\d+(?:\/.*)?$/.test(path) || /^\/[^/]+\/status\/\d+(?:\/.*)?$/.test(path); } function refreshThemeVariables(force = false) { const now = Date.now(); if (!force && now - lastThemeRefresh < THEME_REFRESH_MS) return; lastThemeRefresh = now; const root = document.documentElement; const body = document.body; if (!root || !body) return; const primary = document.querySelector('[data-testid="primaryColumn"]') || body; const textColor = getComputedStyle(primary).color || getComputedStyle(body).color || 'rgb(15, 20, 25)'; const backgroundColor = getVisibleBackground(primary); root.style.setProperty('--xhd-ink', textColor); root.style.setProperty('--xhd-bg', backgroundColor); root.style.setProperty('--xhd-line', rgba(textColor, 0.72)); root.style.setProperty('--xhd-line-soft', rgba(textColor, 0.32)); root.style.setProperty('--xhd-accent', 'rgb(29, 155, 240)'); } function applyRootState() { const html = document.documentElement; const body = document.body; if (!html || !body) return; const active = settings.enabled && isSupportedRoute(); html.classList.toggle('xhd-active', active); body.classList.toggle('xhd-active', active); html.classList.toggle('xhd-media-sketch', active && settings.mediaSketch); body.classList.toggle('xhd-media-sketch', active && settings.mediaSketch); html.classList.toggle('xhd-strong-text', active && settings.strongerText); body.classList.toggle('xhd-strong-text', active && settings.strongerText); html.classList.toggle('xhd-use-border-shape', active && settings.experimentalShapes); body.classList.toggle('xhd-use-border-shape', active && settings.experimentalShapes); applyGloriaFont(); refreshThemeVariables(true); } function addClasses(element, classNames) { if (!element) return; for (const className of classNames.split(/\s+/)) { if (className) element.classList.add(className); } } function collectSidebarPanel(start, boundary) { let current = start; const candidates = []; while (current && current !== boundary) { if (current instanceof HTMLElement) { const rect = current.getBoundingClientRect(); if (rect.width >= 260 && rect.height >= 110 && rect.height <= 720) { candidates.push({ element: current, height: rect.height }); } } current = current.parentElement; } candidates.sort((a, b) => a.height - b.height); return candidates[0]?.element || null; } function isNestedInsidePanel(element, panels) { for (const panel of panels) { if (panel !== element && panel.contains(element)) return true; } return false; } function findComposerShell(composer) { if (!composer) return null; let current = composer.closest('div'); let best = null; for (let depth = 0; current && depth < 10; depth += 1) { const rect = current.getBoundingClientRect(); if (rect.width >= 480 && rect.height >= 86) best = current; current = current.parentElement; } return best; } function findPhotoFrameShell(photo) { if (!(photo instanceof HTMLElement)) return null; const article = photo.closest('article[data-testid="tweet"]'); const photoRect = photo.getBoundingClientRect(); let current = photo.parentElement; let best = null; for (let depth = 0; current && current !== article && depth < 9; depth += 1) { if (current instanceof HTMLElement) { const rect = current.getBoundingClientRect(); const position = getComputedStyle(current).position; const isMediaSized = rect.width >= Math.max(220, photoRect.width - 8) && rect.width <= photoRect.width + 48 && rect.height >= Math.max(72, photoRect.height - 8) && rect.height <= photoRect.height + 48; if (isMediaSized && position !== 'absolute' && position !== 'fixed') best = current; } current = current.parentElement; } return best || photo.closest('[role="link"]') || photo.parentElement; } function markSidebarPanels() { const sidebar = document.querySelector('[data-testid="sidebarColumn"]'); if (!sidebar) return; addClasses(sidebar, 'xhd-sidebar'); const searchInput = sidebar.querySelector('[data-testid="SearchBox_Search_Input"]'); let searchShell = null; let searchFallback = null; let current = searchInput instanceof HTMLElement ? searchInput : null; while (current && current !== sidebar) { const rect = current.getBoundingClientRect(); if (rect.width >= 260 && rect.width <= 460 && rect.height >= 36 && rect.height <= 76) { if (!searchFallback || rect.width > searchFallback.getBoundingClientRect().width) searchFallback = current; if (current.querySelector('svg')) searchShell = current; } current = current.parentElement; } addClasses(searchShell || searchInput?.closest('[role="search"]') || searchFallback || searchInput?.closest('div'), 'xhd-outline xhd-pill xhd-search-box'); const headingPattern = /^(Today.+News|What.+happening|Who to follow|Subscribe|Relevant people|Trends for you)$/i; const candidates = Array.from(sidebar.querySelectorAll('span, div, h1, h2, h3')).slice(0, 500); const panels = new Set(); for (const candidate of candidates) { const text = candidate.textContent ? candidate.textContent.trim().replace(/\s+/g, ' ') : ''; if (!text || text.length > 60 || !headingPattern.test(text)) continue; const panel = collectSidebarPanel(candidate, sidebar); if (panel) panels.add(panel); } for (const panel of panels) { if (!isNestedInsidePanel(panel, panels)) addClasses(panel, 'xhd-outline xhd-panel xhd-sidebar-panel'); } } function markFeedElements() { addClasses(document.querySelector('[data-testid="primaryColumn"]'), 'xhd-primary-column'); addClasses(document.querySelector('header[role="banner"]'), 'xhd-left-nav'); for (const tablist of document.querySelectorAll('[role="tablist"]')) { const text = tablist.textContent ? tablist.textContent.trim().replace(/\s+/g, ' ') : ''; if (/For you|Following/i.test(text)) addClasses(tablist, 'xhd-outline xhd-panel xhd-tablist'); } for (const tab of document.querySelectorAll('[role="tab"]')) addClasses(tab, 'xhd-tab'); let tweetIndex = 0; for (const article of document.querySelectorAll('article[data-testid="tweet"]')) { addClasses(article, 'xhd-outline xhd-tweet'); article.classList.remove(...TWEET_VARIANT_CLASSES); article.classList.add(`xhd-variant-${tweetIndex % 4}`); tweetIndex += 1; } const composer = document.querySelector('[data-testid="tweetTextarea_0"]'); addClasses(findComposerShell(composer), 'xhd-outline xhd-panel xhd-composer'); for (const toolbar of document.querySelectorAll('[data-testid="toolBar"]')) addClasses(toolbar, 'xhd-toolbar'); for (const photo of document.querySelectorAll('article[data-testid="tweet"] [data-testid="tweetPhoto"]')) { photo.classList.remove('xhd-media-frame', 'xhd-nested-card'); addClasses(findPhotoFrameShell(photo), 'xhd-media-frame'); } for (const video of document.querySelectorAll('article[data-testid="tweet"] [data-testid="videoPlayer"]')) { addClasses(video, 'xhd-media-frame'); } for (const card of document.querySelectorAll('article[data-testid="tweet"] [data-testid="card.wrapper"], article[data-testid="tweet"] [role="link"]')) { if (!(card instanceof HTMLElement)) continue; if (card.closest('.xhd-media-frame')) continue; if (card.querySelector('[data-testid="tweetPhoto"], [data-testid="videoPlayer"], img, video, canvas')) { card.classList.remove('xhd-nested-card'); continue; } const rect = card.getBoundingClientRect(); if (rect.width >= 260 && rect.height >= 72) addClasses(card, 'xhd-nested-card'); } markSidebarPanels(); } function processPage() { if (!settings.enabled || !isSupportedRoute()) return; refreshThemeVariables(); markFeedElements(); } function scheduleProcess() { clearTimeout(processTimer); processTimer = setTimeout(processPage, PROCESS_DEBOUNCE_MS); } function elementTouchesRelevant(element, includeDescendants = false) { if (!(element instanceof Element)) return false; if (element.matches(RELEVANT_MUTATION_SELECTOR) || element.closest(RELEVANT_MUTATION_SELECTOR)) return true; return includeDescendants && Boolean(element.querySelector(RELEVANT_MUTATION_SELECTOR)); } function nodeTouchesRelevant(node, includeDescendants = false) { if (node instanceof Element) return elementTouchesRelevant(node, includeDescendants); if (node?.parentElement) return elementTouchesRelevant(node.parentElement); return false; } function mutationTouchesRelevant(mutations) { for (const mutation of mutations) { if (nodeTouchesRelevant(mutation.target)) return true; for (const node of mutation.addedNodes) { if (nodeTouchesRelevant(node, true)) return true; } for (const node of mutation.removedNodes) { if (nodeTouchesRelevant(node, true)) return true; } } return false; } function installObserver() { if (observer || !document.body) return; observer = new MutationObserver((mutations) => { let routeChanged = false; if (location.href !== lastUrl) { lastUrl = location.href; routeChanged = true; applyRootState(); } if (settings.enabled && isSupportedRoute() && (routeChanged || mutationTouchesRelevant(mutations))) scheduleProcess(); }); observer.observe(document.body, { childList: true, subtree: true }); } function removeLegacyArtifacts() { document.getElementById('xhd-drawn-lines')?.remove(); for (const style of document.querySelectorAll('style[id^="xhd-style-"]')) { if (style.id !== STYLE_ID) style.remove(); } for (const sketch of document.querySelectorAll('.xhd-local-sketch')) sketch.remove(); } function injectFilter() { if (document.getElementById(FILTER_ID)) return; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.id = FILTER_ID; svg.setAttribute('aria-hidden', 'true'); svg.setAttribute('width', '0'); svg.setAttribute('height', '0'); svg.style.position = 'absolute'; svg.style.width = '0'; svg.style.height = '0'; svg.style.overflow = 'hidden'; svg.innerHTML = ` `; document.documentElement.appendChild(svg); } function injectStyles() { if (document.getElementById(STYLE_ID)) return; const css = ` :root { --xhd-font: "XHD Gloria Hallelujah", "Comic Sans MS", "Chalkboard SE", "Bradley Hand", "Marker Felt", "Segoe Print", cursive, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --xhd-display-font: "XHD Gloria Hallelujah", "Comic Sans MS", "Chalkboard SE", cursive, sans-serif; --xhd-text-scale: 0.98em; --xhd-text-line-height: 1.6; --xhd-text-shadow: 0.3px 0.1px 0 currentColor; --xhd-display-shadow: 0.42px 0.14px 0 currentColor; } .xhd-active .xhd-primary-column, .xhd-active .xhd-left-nav, .xhd-active .xhd-sidebar, .xhd-active [data-testid="SideNav_NewTweet_Button"], .xhd-active [data-testid="tweetButtonInline"], .xhd-active [data-testid="tweetButton"] { font-family: var(--xhd-font) !important; letter-spacing: 0 !important; font-synthesis: none; } .xhd-active .xhd-primary-column [dir], .xhd-active .xhd-left-nav [dir], .xhd-active .xhd-sidebar [dir], .xhd-active.xhd-strong-text [data-testid="primaryColumn"] [dir], .xhd-active.xhd-strong-text header[role="banner"] [dir], .xhd-active.xhd-strong-text [data-testid="sidebarColumn"] [dir] { font-family: var(--xhd-font) !important; letter-spacing: 0 !important; font-synthesis: none; } .xhd-active article[data-testid="tweet"] [data-testid="tweetText"], .xhd-active article[data-testid="tweet"] [lang] { line-height: var(--xhd-text-line-height) !important; font-size: var(--xhd-text-scale) !important; font-weight: 400 !important; text-shadow: var(--xhd-text-shadow); } .xhd-active .xhd-primary-column { position: relative !important; border-left-color: transparent !important; border-right-color: transparent !important; background-image: none !important; } .xhd-active .xhd-primary-column::before, .xhd-active .xhd-primary-column::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px; pointer-events: none; background: var(--xhd-line); filter: url(#xhd-subtle-wobble); z-index: 2; } .xhd-active .xhd-primary-column::before { left: 0; } .xhd-active .xhd-primary-column::after { right: 0; } .xhd-active .xhd-outline, .xhd-active article[data-testid="tweet"] { position: relative !important; border-color: transparent !important; box-shadow: none !important; } .xhd-active .xhd-outline::after, .xhd-active article[data-testid="tweet"]::after { content: ""; position: absolute; inset: 1px; border: 1.35px solid var(--xhd-line); border-radius: 17px 12px 16px 13px / 12px 18px 13px 17px; box-shadow: 0.65px 0.45px 0 var(--xhd-line-soft), -0.35px -0.25px 0 rgba(127, 127, 127, 0.08); filter: url(#xhd-subtle-wobble); opacity: 0.82; pointer-events: none; transform: rotate(-0.1deg); transform-origin: center; z-index: 2; } .xhd-active .xhd-panel::after { inset: 1px; border-radius: 18px 12px 16px 13px / 13px 19px 12px 17px; } .xhd-active .xhd-pill::after { inset: 1px; border-radius: 999px; } .xhd-active .xhd-search-box, .xhd-active .xhd-search-box > div { border-color: transparent !important; box-shadow: none !important; } .xhd-active .xhd-search-box { overflow: visible !important; } .xhd-active .xhd-search-box::after { inset: -1px 0 !important; border-width: 1.45px; border-radius: 999px 930px 960px 900px / 860px 999px 900px 980px !important; opacity: 0.72; transform: rotate(-0.35deg); z-index: 2; } .xhd-active .xhd-search-box::before { content: ""; position: absolute; inset: 0 3px -1px 1px; border: 1.05px solid var(--xhd-line); border-radius: 930px 999px 900px 960px / 999px 880px 980px 910px; filter: url(#xhd-subtle-wobble); opacity: 0.34; pointer-events: none; transform: rotate(0.22deg); transform-origin: center; z-index: 2; } .xhd-active .xhd-search-box:focus-within::after { border-color: var(--xhd-accent); opacity: 0.94; } .xhd-active .xhd-tweet::after, .xhd-active article[data-testid="tweet"]::after { inset: 2px 8px; } .xhd-active .xhd-sidebar-panel::after { inset: 1px; border-radius: 18px 12px 17px 13px / 13px 19px 12px 17px; transform: rotate(-0.18deg); } .xhd-active .xhd-sidebar-panel:nth-of-type(even)::after { border-radius: 15px 18px 13px 17px / 18px 12px 17px 13px; transform: rotate(0.16deg); } .xhd-active .xhd-variant-1::after { border-radius: 14px 18px 13px 17px / 18px 12px 17px 13px; transform: rotate(0.08deg); } .xhd-active .xhd-variant-2::after { border-radius: 18px 13px 16px 12px / 12px 17px 13px 18px; transform: rotate(-0.06deg); } .xhd-active .xhd-variant-3::after { border-radius: 16px 13px 18px 12px / 14px 18px 12px 16px; transform: rotate(0.12deg); } .xhd-active .xhd-tab[aria-selected="true"] { text-decoration-line: underline; text-decoration-thickness: 3px; text-decoration-color: var(--xhd-accent); text-decoration-style: wavy; text-underline-offset: 9px; } .xhd-active .xhd-tab, .xhd-active .xhd-left-nav nav a, .xhd-active .xhd-left-nav nav button, .xhd-active .xhd-sidebar h1, .xhd-active .xhd-sidebar h2, .xhd-active .xhd-sidebar h3 { font-family: var(--xhd-display-font) !important; font-weight: 400 !important; text-shadow: var(--xhd-display-shadow); } .xhd-active article[data-testid="tweet"] [role="group"] button:nth-child(odd) svg { transform: rotate(-1.2deg); } .xhd-active article[data-testid="tweet"] [role="group"] button:nth-child(even) svg { transform: rotate(1deg); } .xhd-active .xhd-toolbar svg { stroke: currentColor; stroke-width: 0.25px; } .xhd-active article[data-testid="tweet"] [data-testid="User-Name"], .xhd-active article[data-testid="tweet"] [data-testid="UserName"] { text-shadow: 0.35px 0.2px 0 var(--xhd-line-soft); } .xhd-active article[data-testid="tweet"] [role="group"] button, .xhd-active [data-testid="SideNav_NewTweet_Button"], .xhd-active [data-testid="tweetButtonInline"], .xhd-active [data-testid="tweetButton"] { border-radius: 999px 900px 950px 880px / 890px 999px 870px 940px !important; } .xhd-active.xhd-media-sketch .xhd-media-frame { position: relative !important; border-radius: 17px 13px 18px 14px / 13px 18px 14px 17px !important; border-color: transparent !important; box-shadow: none !important; } .xhd-active .xhd-nested-card { position: relative !important; border-color: transparent !important; box-shadow: none !important; border-radius: 17px 13px 18px 14px / 13px 18px 14px 17px !important; } .xhd-active.xhd-media-sketch .xhd-media-frame::after, .xhd-active .xhd-nested-card::after { content: ""; position: absolute; inset: -1px; border: 1.3px solid var(--xhd-line); border-radius: 17px 13px 18px 14px / 13px 18px 14px 17px; filter: url(#xhd-subtle-wobble); opacity: 0.74; pointer-events: none; z-index: 1; } @supports (corner-shape: bevel) { .xhd-active.xhd-use-border-shape .xhd-outline, .xhd-active.xhd-use-border-shape article[data-testid="tweet"] { border-radius: 18px 14px 19px 13px / 13px 20px 12px 18px !important; corner-shape: squircle; } .xhd-active.xhd-use-border-shape .xhd-outline::after, .xhd-active.xhd-use-border-shape article[data-testid="tweet"]::after { corner-shape: squircle; } .xhd-active.xhd-use-border-shape .xhd-variant-1::after, .xhd-active.xhd-use-border-shape .xhd-sidebar-panel:nth-of-type(even)::after { corner-shape: squircle superellipse(1.25) squircle superellipse(1.4); } .xhd-active.xhd-use-border-shape .xhd-variant-2::after { corner-shape: superellipse(1.35) squircle superellipse(1.2) squircle; } .xhd-active.xhd-use-border-shape .xhd-pill::after { corner-shape: squircle; } } @supports (border-shape: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) { .xhd-active.xhd-use-border-shape .xhd-outline::after, .xhd-active.xhd-use-border-shape article[data-testid="tweet"]::after { inset: 3px 7px; border: 1.45px solid var(--xhd-line); border-radius: 0 !important; corner-shape: bevel; border-shape: polygon( 1.05% 2.25%, 2.25% 0.95%, 17% 0.72%, 33% 1.02%, 51% 0.74%, 72% 0.98%, 97.35% 0.86%, 98.74% 2.35%, 99.08% 4.85%, 98.64% 21%, 98.25% 39%, 98.75% 58%, 98.3% 78%, 98.55% 98.8%, 80% 99.4%, 59% 98.8%, 38% 99.7%, 18% 98.9%, 1.35% 99.4%, 1.85% 76%, 1.1% 56%, 1.75% 35%, 1.05% 17%, 0.85% 4.4%, 1.05% 2.25% ); box-shadow: none; filter: none; opacity: 0.88; } .xhd-active.xhd-use-border-shape .xhd-pill::after { inset: 1px; border-shape: polygon( 7% 19%, 20% 7%, 43% 5%, 66% 7%, 88% 4%, 98% 30%, 95% 63%, 86% 90%, 63% 94%, 38% 90%, 15% 94%, 2% 63%, 5% 33% ); } .xhd-active.xhd-use-border-shape .xhd-search-box::after { inset: -1px 0 !important; border-radius: 999px !important; corner-shape: squircle !important; border-shape: none !important; filter: url(#xhd-subtle-wobble); } .xhd-active.xhd-use-border-shape .xhd-sidebar-panel::after { inset: 2px; border-shape: polygon( 2% 1.1%, 23% 0.35%, 47% 0.9%, 76% 0.4%, 98% 1.2%, 97% 32%, 99% 63%, 97% 98.9%, 73% 99.5%, 47% 98.8%, 22% 99.6%, 2% 98.8%, 1.2% 69%, 2.5% 41% ); } .xhd-active.xhd-use-border-shape.xhd-media-sketch .xhd-media-frame::after, .xhd-active.xhd-use-border-shape .xhd-nested-card::after { border-radius: 0 !important; border-shape: polygon( 1.2% 1%, 24% 0.45%, 51% 1.1%, 76% 0.55%, 98.5% 1.1%, 98.9% 35%, 98.1% 67%, 98.7% 98.6%, 75% 99.2%, 48% 98.7%, 22% 99.15%, 1.4% 98.7%, 1% 66%, 1.7% 33% ); } } @supports (border-shape: shape(from 0% 0%, curve to 100% 0% with 35% 1% / 65% -1%, close)) { .xhd-active.xhd-use-border-shape .xhd-outline::after, .xhd-active.xhd-use-border-shape article[data-testid="tweet"]::after { filter: url(#xhd-subtle-wobble); border-shape: shape( from 1.05% 2.25%, line to 2.25% 0.95%, curve to 19% 0.72% with 6% 0.66% / 12% 1.18%, curve to 39% 1.08% with 26% 1.22% / 32% 0.72%, curve to 62% 0.78% with 47% 0.68% / 54% 1.12%, curve to 82% 1.06% with 69% 1.18% / 75% 0.74%, curve to 97.35% 0.86% with 90% 0.7% / 94% 1.12%, line to 98.74% 2.35%, line to 99.08% 4.85%, curve to 98.6% 25% with 98.9% 8.5% / 98.52% 17%, curve to 98.68% 49% with 98.08% 32% / 98.94% 41%, curve to 98.5% 74% with 98.8% 57% / 98.1% 66%, curve to 98.65% 98.55% with 98.95% 83% / 98.25% 92%, curve to 78% 99.1% with 91% 98.35% / 85% 99.85%, curve to 55% 98.35% with 70% 97.95% / 63% 99.4%, curve to 33% 99.3% with 47% 99.75% / 41% 98.45%, curve to 13% 98.55% with 25% 97.95% / 19% 99.55%, curve to 1.25% 98.9% with 7% 99.45% / 2.55% 98.25%, curve to 1.55% 75% with 0.85% 90% / 2.0% 82%, curve to 1.1% 50% with 2.05% 66% / 0.65% 58%, curve to 1.45% 24% with 0.75% 42% / 1.95% 33%, line to 0.85% 4.4%, line to 1.05% 2.25%, close ); } .xhd-active.xhd-use-border-shape .xhd-variant-1::after { border-shape: shape( from 1.35% 0.96%, curve to 27% 1.12% with 10% 1.2% / 18% 0.82%, curve to 51% 0.84% with 36% 0.72% / 43% 1.18%, curve to 77% 1.08% with 61% 1.18% / 69% 0.78%, curve to 98.45% 0.94% with 88% 0.78% / 94% 1.12%, curve to 98.65% 35% with 98.25% 12% / 98.95% 24%, curve to 98.45% 68% with 98.9% 47% / 98.15% 57%, curve to 98.55% 98.55% with 98.25% 80% / 98.85% 91%, curve to 72% 98.85% with 90% 99.25% / 82% 98.15%, curve to 46% 99.25% with 63% 99.55% / 55% 98.55%, curve to 19% 98.75% with 37% 98.25% / 29% 99.45%, curve to 1.35% 98.95% with 12% 99.25% / 5% 98.45%, curve to 1.55% 67% with 1.05% 87% / 1.95% 77%, curve to 1.2% 34% with 0.85% 55% / 1.75% 45%, curve to 1.35% 1.0% with 1.75% 23% / 1.0% 12%, close ); } .xhd-active.xhd-use-border-shape .xhd-tablist::after, .xhd-active.xhd-use-border-shape .xhd-composer::after { border-shape: shape( from 0.7% 5%, curve to 26% 3.5% with 8% 2.5% / 17% 7%, curve to 52% 5.5% with 36% 8% / 44% 2.5%, curve to 77% 3.75% with 61% 2.5% / 69% 7%, curve to 99.1% 5% with 88% 2.5% / 95% 6.5%, curve to 99.2% 95% with 99.4% 34% / 98.9% 66%, curve to 73% 96% with 91% 96.5% / 82% 94%, curve to 48% 94.5% with 64% 93% / 56% 98%, curve to 22% 96% with 39% 98% / 31% 93.5%, curve to 0.8% 95% with 13% 96.5% / 6% 94%, curve to 0.7% 5% with 0.55% 66% / 0.95% 34%, close ); } .xhd-active.xhd-use-border-shape .xhd-variant-2::after, .xhd-active.xhd-use-border-shape .xhd-sidebar-panel::after { border-shape: shape( from 1.2% 1.1%, curve to 24% 0.75% with 9% 0.35% / 16% 1.45%, curve to 50% 1.2% with 35% 1.75% / 43% 0.45%, curve to 75% 0.9% with 60% 0.55% / 68% 1.55%, curve to 98.55% 1.25% with 88% 0.45% / 94% 1.6%, curve to 98.45% 34% with 98.8% 12% / 98.15% 24%, curve to 98.65% 67% with 98.05% 46% / 98.95% 57%, curve to 98.45% 98.8% with 98.75% 80% / 98.15% 91%, curve to 74% 99.2% with 91% 99.45% / 83% 98.45%, curve to 48% 98.7% with 65% 98.25% / 57% 99.45%, curve to 22% 99.15% with 39% 99.55% / 31% 98.35%, curve to 1.45% 98.65% with 13% 98.55% / 6% 99.3%, curve to 1.2% 66% with 0.85% 87% / 1.65% 77%, curve to 1.5% 33% with 1.95% 55% / 0.95% 44%, curve to 1.2% 1.1% with 1.1% 22% / 1.7% 11%, close ); } .xhd-active.xhd-use-border-shape .xhd-pill::after { border-shape: shape( from 7% 50%, curve to 50% 5% with 11% 12% / 29% 4%, curve to 94% 50% with 74% 6% / 98% 15%, curve to 50% 94% with 96% 83% / 73% 96%, curve to 7% 50% with 30% 91% / 4% 82%, close ); } .xhd-active.xhd-use-border-shape .xhd-search-box::after { corner-shape: squircle !important; border-shape: none !important; filter: url(#xhd-subtle-wobble); } .xhd-active.xhd-use-border-shape.xhd-media-sketch .xhd-media-frame::after, .xhd-active.xhd-use-border-shape .xhd-nested-card::after { border-shape: shape( from 1.2% 1.0%, curve to 25% 0.55% with 8% 0.45% / 17% 1.45%, curve to 52% 1.1% with 36% 1.65% / 44% 0.5%, curve to 76% 0.7% with 61% 0.45% / 68% 1.35%, curve to 98.6% 1.1% with 87% 0.35% / 94% 1.5%, curve to 98.8% 33% with 99% 11% / 98.35% 22%, curve to 98.25% 66% with 99.1% 44% / 97.8% 55%, curve to 98.65% 98.6% with 98.45% 78% / 99.05% 91%, curve to 73% 99.05% with 91% 98.85% / 82% 99.45%, curve to 47% 98.65% with 64% 98.35% / 56% 99.25%, curve to 21% 99.0% with 38% 99.45% / 30% 98.45%, curve to 1.35% 98.75% with 13% 99.35% / 6% 98.45%, curve to 1.05% 66% with 0.8% 88% / 1.6% 77%, curve to 1.55% 33% with 0.45% 55% / 2.05% 44%, curve to 1.2% 1.0% with 1.2% 22% / 0.65% 11%, close ); } } `; if (typeof GM_addStyle === 'function') { const style = GM_addStyle(css); if (style) style.id = STYLE_ID; return; } const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = css; document.head.appendChild(style); } async function waitForBody() { if (document.body) return; await new Promise((resolve) => { const bodyObserver = new MutationObserver(() => { if (document.body) { bodyObserver.disconnect(); resolve(); } }); bodyObserver.observe(document.documentElement, { childList: true, subtree: true }); }); } async function init() { await waitForBody(); loadSettings(); removeLegacyArtifacts(); injectFilter(); injectStyles(); applyRootState(); ensureGloriaFontLoaded().then(() => applyGloriaFont()); registerMenus(); processPage(); installObserver(); } init(); })();