Standardize font size, revert justified text, replace fonts with sans-serif/serif/monospace, dodge colored text from the background and lightly pastelize, detect centered text and add Uncenter toggle. Auto-hiding navbar sticky with style button (Light/Dark style selector + font size + padding widget).
当前为
// ==UserScript==
// @name AH/QQ/SB/SV Mobile readability
// @description Standardize font size, revert justified text, replace fonts with sans-serif/serif/monospace, dodge colored text from the background and lightly pastelize, detect centered text and add Uncenter toggle. Auto-hiding navbar sticky with style button (Light/Dark style selector + font size + padding widget).
// @version 1.31
// @author C89sd
// @namespace https://greasyfork.org/users/1376767
// @match https://*.spacebattles.com/*
// @match https://*.sufficientvelocity.com/*
// @match https://*.questionablequesting.com/*
// @match https://*.alternatehistory.com/*
// @grant GM_getValue
// @grant GM_setValue
// @run-at document-body
// @noframes
// ==/UserScript==
'use strict';
const DISABLE_STICKY_HIDE = false;
const FONT_SCALE_MONO = 0.8917;
const FONT_SCALE_SERIF = 0.9108;
const IS_THREAD = document.URL.includes('/threads/');
// ======================== Global State and Core Functions (Run at document-start) ======================== //
let currentFontSize, currentPaddingSize;
let styleBbTable, styleSbStats; /* script el */
let cssBbTable, cssSbStats; /* templates */
const toPx = (base, factor) => (base * factor).toFixed(2) + 'px';
/* ───── 1. Site-specific style IDs + path ───── */
const site = location.hostname.split('.').slice(-2, -1)[0];
const [LIGHT_ID, DARK_ID] = {
spacebattles : [ 6, 2],
sufficientvelocity : [19, 20],
questionablequesting: [ 1, 31],
alternatehistory : [13, 15]
}[site];
const STYLE_PATH = site === 'alternatehistory' ? '/forum/misc/style' : '/misc/style';
/* ───── 2. Inject Static CSS ASAP ───── */
let staticCss = `
.ffss { font-family: Roboto, Segoe UI, Ubuntu, sans-serif !important; }
.ffm { font-family: monospace !important; }
.ffs { font-family: serif !important; }
.p-nav { border-top: none !important; }
.gm-navStyleBtn{
cursor:pointer;
-webkit-user-select:none; /* stop long-press text selection */
user-select:none;
}
/* popup */
#gmStylePopup{
position:fixed;top:64px;right:20px;background:#fff;color:#000;
border:1px solid #666;border-radius:8px;padding:16px;z-index:9999;
box-shadow:0 4px 14px rgba(0,0,0,.25);display:none;
flex-direction:column;gap:16px;min-width:280px;font-size:14px}
@media (max-width:600px){#gmStylePopup{transform:scale(1.1);transform-origin:top right}}
/* Light / Dark tiles */
.gm-tile-row{display:flex;width:100%;gap:8px}
.gm-style-tile{
flex:1 1 50%;height:60px;line-height:60px;font-size:1.05em;
border-radius:6px;text-align:center;cursor:pointer;user-select:none;
border:1px solid #666;text-decoration:none}
.gm-light{background:#eaeaea;color:#000}.gm-light:hover{background:#dbdbdb}
.gm-dark {background:#222;color:#fff}.gm-dark:hover {background:#2d2d2d}
/* Font-size block */
.gm-font-row{display:flex;align-items:center;gap:6px;justify-content:center}
.gm-font-row button{
width:41.1px;height:50px;font-size:15px;cursor:pointer;
border:1px solid #666;border-radius:6px;background:#f5f5f5;color:#000}
.gm-font-row button:hover{background:#e4e4e4}
.gm-font-row input{
width:70px;height:50px;text-align:center;font-size:16px;
border:1px solid #666;border-radius:6px}
.gmStickyNav{
position:sticky;
top:0; /* docks here once we reach it */
z-index:1010;
will-change:transform; /* we only translate it, no repaint */
}
`;
document.head.appendChild(Object.assign(document.createElement('style'), {textContent: staticCss}));
document.querySelector('html').classList.add('ffss');
/* ───── 3. Dynamic Style Templates ───── */
if (IS_THREAD) {
cssBbTable = px => `
.bbTable{
font-size:${toPx(px, 14.0 / 15)};
overflow:scroll;
table-layout:auto;
}
.bbTable td{
vertical-align:top;
white-space:normal;
word-wrap:normal;
}`;
/* 2) SB weekly-stats */
if (document.URL.includes('.1140820/')) {
cssSbStats = px => `
/* Indicator */
.bbTable td > b:first-of-type:has(code.bbCodeInline){display:inline-block;padding:2px 0;}
.bbTable td > b:first-of-type code.bbCodeInline {font-size:${toPx(px, 11 / 15)};}
/* Name / Metric */
.bbTable span:has(.username) {font-size:${toPx(px, 11.5 / 15)};}
.bbTable span:has(.bbc-abbr) {font-size:${toPx(px, 12.5 / 15)};}
/* Bottom Tags */
.bbTable td > span:last-child:has(>code.bbCodeInline){display:inline-flex;flex-wrap:wrap;gap:1px;padding-top:6px;}
.bbTable td > span:last-child > code.bbCodeInline {font-size:${toPx(px, 9 / 15)};padding:1px 3px;}`;
}
}
/* ───── 4. Core Helper Functions ───── */
function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
const colorCache = new Map();
const adjustTextColor = (textRGBStr) => {
if (colorCache.has(textRGBStr)) {
return colorCache.get(textRGBStr);
}
function toRGB(str) { // can return up to 3 values [] to [r,g,b]
const nums = str.match(/\d+/g);
return nums ? nums.map(Number).slice(0, 3) : [];
}
let fg = toRGB(textRGBStr);
// The background color for comparison is hardcoded here (rgb(39, 39, 39)).
// Consider making this dynamic based on the actual page background if needed.
const bg = [39, 39, 39]; // Represents the dark background color value (from "rgb(39, 39, 39)")
if (fg.length !== 3) { return textRGBStr }
const pastelize = ([r, g, b]) => {
const neutral = 128;
const whiteBoost = Math.pow((r + g + b) / (3 * 255), 10);
const factor = 0.8 + 0.1*whiteBoost;
return [
neutral + factor * (r - neutral),
neutral + factor * (g - neutral),
neutral + factor * (b - neutral)
].map(c => clamp(c, 0, 255));
};
fg = pastelize(fg);
let positiveDiff = 0;
positiveDiff += Math.max(0, fg[0] - bg[0]);
positiveDiff += Math.max(0, fg[1] - bg[1]);
positiveDiff += Math.max(0, fg[2] - bg[2]);
const threshold = 180;
if (positiveDiff < threshold) {
fg[0] = Math.max(fg[0], bg[0]);
fg[1] = Math.max(fg[1], bg[1]);
fg[2] = Math.max(fg[2], bg[2]);
const avg = (fg[0]+fg[1]+fg[2])/3;
const boost = Math.min(1.0, (Math.abs(fg[0]-avg)+Math.abs(fg[1]-avg)+Math.abs(fg[2]-avg))/255/0.2); // grays = 0, colors >= 1
let correction = Math.round((threshold - positiveDiff) / 3 + boost*40);
fg = fg.map(c => Math.min(c + correction, 255));
}
const result = `rgb(${fg[0]}, ${fg[1]}, ${fg[2]})`;
colorCache.set(textRGBStr, result);
return result;
};
function applyFontSizeToElement(wrapper, pxStr) {
const SANS_SERIF = /arial|tahoma|trebuchet ms|verdana/;
const MONOSPACE = /courier new/;
const SERIF = /times new roman|georgia|book antiqua/;
const scale = (val, factor) => (parseFloat(val) * factor).toFixed(2) + "px";
wrapper.style.fontSize = pxStr;
wrapper.classList.add('ffss');
const children = wrapper.querySelectorAll('*');
for (let child of children) {
const style = child.style;
if (style.fontSize) {
style.fontSize = ''; // Reset explicit font sizes for consistency
}
if (style.fontFamily) {
const font = style.fontFamily;
if (SANS_SERIF.test(font)) {
child.classList.add('ffss');
} else if (MONOSPACE.test(font)) {
child.classList.add('ffm');
style.fontSize = scale(pxStr, FONT_SCALE_MONO);
} else if (SERIF.test(font)) {
child.classList.add('ffs');
style.fontSize = scale(pxStr, FONT_SCALE_SERIF);
}
}
if (style.textAlign) {
// Keep 'center' and 'right', clear others for readability
if (style.textAlign !== 'center' && style.textAlign !== 'right') {
style.textAlign = '';
}
}
if (style.color && style.color.startsWith('rgb')) {
style.color = adjustTextColor(style.color);
}
}
}
function applyPaddingToElement(cell, pxStr) {
cell.style.paddingLeft = pxStr;
cell.style.paddingRight = pxStr;
}
const mo_map = new Map();
function applyOnElement(selector, cb) {
document.querySelectorAll(selector).forEach(cb);
if (document.readyState !== 'loading') {
const mo = mo_map.get(selector);
if (mo) { mo.disconnect(); mo_map.delete(selector); }
return;
}
if (mo_map.has(selector)) return; // Observer already set up
const mo = new MutationObserver(m => m.forEach(u => u.addedNodes.forEach(n => {
if (n.nodeType === 1) {
if (n.matches(selector)) cb(n);
n.querySelectorAll(selector).forEach(cb);
}
})));
mo.observe(document.documentElement, { childList: true, subtree: true });
mo_map.set(selector, mo);
document.addEventListener('DOMContentLoaded', () => { mo.disconnect(); mo_map.delete(selector); }, { once: true });
}
/* ───── 5. Unified Style Controller ───── */
function updateDynamicStyles() {
if (!IS_THREAD) return;
if (cssBbTable) {
styleBbTable = styleBbTable || document.head.appendChild(Object.assign(document.createElement('style'), { id: 'gmStyleBbTable' }));
styleBbTable.textContent = cssBbTable(currentFontSize);
}
if (cssSbStats) {
styleSbStats = styleSbStats || document.head.appendChild(Object.assign(document.createElement('style'), { id: 'gmStyleSbStats' }));
styleSbStats.textContent = cssSbStats(currentFontSize);
}
}
let lastUpdate = 0;
function updateAndApplyStyles(force = false) {
const now = Date.now();
if (!force && now - lastUpdate < 500) return;
lastUpdate = now;
const newFontSize = clamp(Number(GM_getValue('fontSize', 15.7)), 10, 25);
const newPaddingSize = clamp(Number(GM_getValue('paddingSize', 10)), 0, 80);
if (newFontSize !== currentFontSize) {
currentFontSize = newFontSize;
const pxStr = currentFontSize + 'px';
applyOnElement('.bbWrapper', el => applyFontSizeToElement(el, pxStr));
updateDynamicStyles();
}
if (newPaddingSize !== currentPaddingSize) {
currentPaddingSize = newPaddingSize;
const pxStr = currentPaddingSize + 'px';
applyOnElement('.message-cell.message-cell--main', el => applyPaddingToElement(el, pxStr));
}
}
/* ───── 6. Live Update Listeners ───── */
// Initial application
updateAndApplyStyles(true);
// ======================== UI and DOM-Dependent Code (Run at DOMContentLoaded) ======================== //
let CORRUPTED = false;
document.addEventListener('DOMContentLoaded', () => {
let popup;
/* ───── Sticky bar injection ───── */
if (!DISABLE_STICKY_HIDE) {
const sticky = document.querySelector('.p-navSticky.p-navSticky--primary') || document.querySelector('.p-nav');
sticky.classList.add('gmStickyNav');
sticky.classList.remove('p-navSticky', 'p-navSticky--primary', 'is-sticky');
sticky.removeAttribute('data-xf-init');
/* 3. state common to both algorithms */
let barH = sticky.offsetHeight;
let offset = 0;
let lastY = scrollY;
let stuck = false; // “is the bar currently touching the viewport top?”
function onScrollNew() {
const y = scrollY;
const top = sticky.getBoundingClientRect().top; // distance to viewport top
/* bar still in normal flow */
if (top > 0) {
if (stuck) {
stuck = false;
offset = 0;
sticky.style.transform = '';
}
lastY = y;
return;
}
/* bar just became sticky */
if (!stuck) {
stuck = true;
lastY = y; // reset baseline: no initial jump
return;
}
/* regular retract / reveal */
const dy = y - lastY; // + down, – up
lastY = y;
offset = clamp(offset + dy, 0.1, barH); // 0.1 prevent fully open top artifact
sticky.style.transform = `translateY(${-offset}px)`;
}
addEventListener('scroll', onScrollNew, { passive: true });
addEventListener('resize', () => { barH = sticky.offsetHeight; });
}
/* 4. Remove old XF button, add our own to the right of Jump */
let btn;
document.querySelector('.p-nav-opposite > div[data-xf-click="sv-font-size-chooser-form"]')?.remove();
const navOpposite = document.querySelector('#top .p-nav-opposite');
if (navOpposite) {
navOpposite.querySelector('#js-XFUniqueId1')?.closest('div')?.remove();
btn = document.createElement('div');
btn.className = 'p-navgroup-link gm-navStyleBtn';
btn.setAttribute('role', 'button'); // accessibility
btn.textContent = 'Style';
const firstLink = navOpposite.querySelector('.p-navgroup-link');
if (firstLink && firstLink.textContent.trim() === 'Jump')
firstLink.after(btn);
else
navOpposite.insertBefore(btn, navOpposite.firstChild);
btn.onclick = (event) => {
event.preventDefault();
event.stopPropagation();
togglePopup();
};
}
/* ───── 5. Build popup once ───── */
popup = buildPopup();
document.body.appendChild(popup);
/* ───── 6. Popup builder ───── */
function buildPopup() {
const p = Object.assign(document.createElement('div'), { id: 'gmStylePopup' });
/* Light / Dark */
const tiles = Object.assign(document.createElement('div'), { className: 'gm-tile-row' });
tiles.append(makeTile('Light', LIGHT_ID, 'gm-light'),
makeTile('Dark', DARK_ID, 'gm-dark'));
p.appendChild(tiles);
/* Font size */
const fsRow = Object.assign(document.createElement('div'), { className: 'gm-font-row' });
const num = Object.assign(document.createElement('input'), {
type: 'number', step: '0.1', min: '10', max: '25', value: currentFontSize.toFixed(1)
});
fsRow.append(
makeFSBtn('-1', -1), makeFSBtn('-0.1', -.1),
num,
makeFSBtn('+0.1', .1),makeFSBtn('+1', 1)
);
p.appendChild(fsRow);
num.addEventListener('change', () => applyFS(parseFloat(num.value)));
/* Padding size */
const padRow = Object.assign(document.createElement('div'), { className: 'gm-font-row' });
const padNum = Object.assign(document.createElement('input'), {
type: 'number', step: '0.1', min: '0', max: '80', value: currentPaddingSize.toFixed(1)
});
padRow.append(
makePadBtn('-1', -1), makePadBtn('-0.1', -.1),
padNum,
makePadBtn('+0.1', .1),makePadBtn('+1', 1)
);
p.appendChild(padRow);
padNum.addEventListener('change', () => applyPad(parseFloat(padNum.value)));
function makePadBtn(txt, delta) {
const b = document.createElement('button');
b.textContent = txt;
b.addEventListener('click', () => applyPad(parseFloat(padNum.value) + delta));
return b;
}
function applyPad(px) {
px = clamp(Math.round(px * 10) / 10, 0, 80);
padNum.value = px.toFixed(1);
GM_setValue('paddingSize', px);
updateAndApplyStyles(true); // Force immediate update on click
}
function makeFSBtn(txt, delta) {
const b = document.createElement('button');
b.textContent = txt;
b.addEventListener('click', () => applyFS(parseFloat(num.value) + delta));
return b;
}
function applyFS(px) {
px = clamp(Math.round(px * 10) / 10, 10, 25);
num.value = px.toFixed(1);
GM_setValue('fontSize', px);
updateAndApplyStyles(true); // Force immediate update on click
}
return p;
}
/* ───── 7. Style tiles ───── */
function makeTile(label, id, cls) {
const token = document.querySelector('input[name="_xfToken"]')?.value || '';
const url = `${STYLE_PATH}?style_id=${id}&_xfRedirect=/&t=${encodeURIComponent(token)}`;
const a = Object.assign(document.createElement('a'), {
className: `gm-style-tile ${cls}`,
textContent: label,
href: url
});
a.addEventListener('click', ev => {
ev.preventDefault();
fetch(url, { credentials: 'same-origin', mode: 'same-origin' })
.then(r => { if (!r.ok) throw 0; return r.text(); })
.then(() => location.reload())
.catch(() => (location.href = url));
});
return a;
}
/* ───── 8. Popup show / hide ───── */
function togglePopup() {
popup.style.display = popup.style.display === 'flex' ? 'none' : 'flex';
}
document.addEventListener('click', e => {
if (popup && !popup.contains(e.target) && !e.target.closest('.gm-navStyleBtn'))
popup.style.display = 'none';
});
// refresh style on alt-tab
window.addEventListener('pageshow', (e) => { if (!e.persisted) return;
CORRUPTED = false; // you just cant updateAndApplyStyles() until tab change
});
document.addEventListener('focus', () => { if (!CORRUPTED) setTimeout(() => updateAndApplyStyles(), 100); });
document.addEventListener("visibilitychange", () => { if (!document.hidden && !CORRUPTED) updateAndApplyStyles(); });
// ========================================================== //
if (!IS_THREAD) return;
/* Post-processing for specific threads */
if (document.URL.includes('.1140820/')) {
const width = { 2: '50%', 3: '33.33%' };
document.querySelectorAll('.bbTable table').forEach(t => {
const cells = t.rows[0]?.cells;
const n = cells?.length;
if (width[n]) {
t.style.cssText = 'table-layout:fixed;width:100%';
[...cells].forEach(c => (c.style.width = width[n]));
}
});
}
// Centered text toggle
const OP = document.querySelector('.username.u-concealed')?.textContent || '!';
let foundCentered = false;
for (let message of document.getElementsByClassName('message')) {
if (message.getAttribute('data-author') === OP || message.classList.contains('hasThreadmark')) {
const centeredDiv = message.querySelector('.bbWrapper:first-of-type > div[style*="text-align: center"], .bbWrapper > div.uncentered');
if (centeredDiv) {
foundCentered = true;
break;
}
}
}
if (foundCentered) {
let buttonGrp = document.querySelector('.block-outer-threadmarks .buttonGroup');
let centered = true;
if (buttonGrp) {
buttonGrp.insertAdjacentHTML('afterbegin', '<div class="buttonGroup buttonGroup-buttonWrapper"><span class="button--link button" style="cursor:pointer" title="Toggle center text">Uncenter</span></div>');
buttonGrp.firstElementChild.firstElementChild.addEventListener('click', function() {
document.querySelectorAll(centered ? '.bbWrapper > div[style*="text-align: center"]' : '.bbWrapper > div.uncentered').forEach(el => {
if (centered) {
el.classList.add('uncentered');
el.style.textAlign = '';
} else {
el.style.textAlign = 'center';
}
});
centered = !centered;
});
}
}
});