// ==UserScript==
// @name QQ/SB/SV Color Thread Replies
// @description Visually separate story posts from replies, tinted background and quotes with per-theme color.
// @author C89sd
// @version 1.7
// @match https://questionablequesting.com/*
// @match https://forum.questionablequesting.com/*
// @match https://forums.spacebattles.com/*
// @match https://forums.sufficientvelocity.com/*
// @grant GM_addStyle
// @namespace https://greasyfork.org/users/1376767
// @noframes
// ==/UserScript==
'use strict';
const url = document.URL;
const IS_THREAD = url.includes('/threads/');
if (!IS_THREAD) return;
const IS_SB = url.includes('spacebattles.com');
const IS_SV = url.includes('sufficientvelocity.com');
const IS_QQ = url.includes('questionablequesting.com');
GM_addStyle(`
@media (max-width: 650px) {
.mobile-only {
background-color: transparent !important;
}
}
`);
const styleChooser = document.querySelector('.p-footer-linkList a[href="/misc/style"]');
let styleName;
if (styleChooser) {
const title = styleChooser.getAttribute('title');
if (title?.startsWith('Style: ')) {
styleName = title.replace(/^Style:\s*/, '').trim();
} else {
styleName = styleChooser.innerText.trim();
}
}
// console.log(`title="${styleChooser.getAttribute('title')}", inner="${styleChooser.innerText.trim()}" -> extracted="${styleName}"`, styleChooser)
const DEFAULT_DARK = 'rgb(25, 45, 27)';
const DEFAULT_LIGHT = 'rgb(254, 255, 225)';
// Old: dark "#152E18", light "#F5F6CE", gray "#424242"
const COLOR_BY_THEME = {
"Default" : ['rgb(25, 45, 27)', 50],
// SpaceBattles.com[
"SpaceBattles" : ['rgb(25, 45, 27)', 50], // rgb(21, 46, 24)
"SpaceBattles - Light" : ['rgb(254, 255, 225)', 160],
// SufficientVelocity.com[
"Neptune" : ['rgb(12, 41, 39)', 0],
"Starscape" : ['rgb(12, 41, 39)', 0],
"Sunlight" : ['rgb(254, 255, 225)', 140],
"Industrial" : ['rgb(26, 47, 28)', 60],
// QuestionableQuesting.com
"Xenforo Default" : ['rgb(254, 255, 225)', 140],
"Light" : ['rgb(235, 236, 192)', 60],
"Dark" : ['rgb(36, 55, 38)', 100],
"Blackened" : ['rgb(70, 34, 34)', 200],
"Blackened Green" : ['rgb(25, 45, 27)', 20],
"Blackened Blue" : ['rgb(35, 44, 66)', 180], // rgb(31, 41, 66)
"Blackened Purple" : ['rgb(49, 37, 66)', 200],
"Blackened High Contrast" : ['rgb(11, 32, 14)', 0],
"Lightened" : ['rgb(237, 238, 214)', 60],
};
let [base, quoteBias] = COLOR_BY_THEME[styleName];
if (!base) {
console.error(`${styleName} not in COLOR_BY_THEME!`);
const DM = IS_QQ && window.getComputedStyle(document.body).color.match(/\d+/g)[0] > 128;
base = DM ? DEFAULT_DARK : DEFAULT_LIGHT;
quoteBias = DM ? 255 : 0;
}
// console.log(styleName, COLOR_BY_THEME[styleName], base)
const darken = (hex, factor) => {
const [r, g, b] = hex.replace('#', '').match(/\w\w/g).map(c => parseInt(c, 16)); // Remove #, to hex
const toHex = c => Math.min(255, Math.max(0, Math.round(c * factor))).toString(16).padStart(2, '0');
return '#' + toHex(r) + toHex(g) + toHex(b);
};
const rgbToHex = rgb => '#' + rgb.match(/\d+/g).map(c => (+c).toString(16).padStart(2, '0')).join('');
base = base.startsWith('#') ? base : rgbToHex(base); // convert to hex, applyBgTint() depends on it
const darker = darken(base, 0.4);
const lighter = darken(base, 2.3);
const quoteBg = `rgba(${quoteBias}, ${quoteBias}, ${quoteBias}, 0.05)` // opaque lighten or darken, cant read color to target
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [ h, s, l ];
}
function hslToRgb(h, s, l) {
let r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [ r * 255, g * 255, b * 255 ];
}
const bgTintCache = new Map();
function applyBgTint(node) {
const rgb = getComputedStyle(node).backgroundColor;
if (bgTintCache.has(rgb)) {
node.style.backgroundColor = bgTintCache.get(rgb);
return;
}
const hex = base;
const [r1, g1, b1] = rgb.match(/\d+/g).map(Number);
const hexVal = hex.startsWith('#') ? hex.slice(1) : hex;
const r2 = parseInt(hexVal.slice(0, 2), 16);
const g2 = parseInt(hexVal.slice(2, 4), 16);
const b2 = parseInt(hexVal.slice(4, 6), 16);
const baseHsl = rgbToHsl(r2, g2, b2);
const rgbHsl = rgbToHsl(r1, g1, b1);
const out = hslToRgb(baseHsl[0], baseHsl[1], rgbHsl[2]);
const outputColor = `rgb(${out[0]}, ${out[1]}, ${out[2]})`;
bgTintCache.set(rgb, outputColor);
node.style.backgroundColor = outputColor;
}
const OP = document.querySelector('.username.u-concealed')?.textContent || '!';
const USER = document.querySelector('.p-navgroup-linkText')?.textContent || '!';
// console.log(OP, USER);
const messages = document.querySelectorAll('article.message');
for (const message of messages) {
const author = message.getAttribute('data-author');
if (author == USER || message.classList.contains('hasThreadmark')) continue;
if (author === OP) {
message.querySelector('.username')?.insertAdjacentHTML('afterbegin', '<strong style="color:crimson">AUTHOR:</strong><br/>');
} else {
message.style.backgroundColor = base;
const quotes = message.querySelectorAll('blockquote');
for (const quote of quotes) {
const quoteTitle = quote.querySelector('div.bbCodeBlock-title');
const quoteBlock = quote.querySelector('div.bbCodeBlock-content');
applyBgTint(quote);
if (quoteTitle) applyBgTint(quoteTitle);
if (quoteBlock) quoteBlock.style.backgroundColor = quoteBg;
}
const left = message.querySelector('div.message-cell.message-cell--user');
const right = message.querySelector('div.message-cell.message-cell--main');
if (left && right) left.style.backgroundColor = getComputedStyle(right).backgroundColor;
const reactionbar = message.querySelector('div.reactionsBar');
if (reactionbar) applyBgTint(reactionbar);
const rating = message.querySelector('div.sv-rating');
if (rating) applyBgTint(rating);
const icons = message.querySelectorAll('div.sv-rating__count');
for (const icon of icons) { applyBgTint(icon); }
if (IS_SB) {
const detail1 = message.querySelector('div.message-userDetails');
const detail2 = message.querySelector('div.message-userExtras');
if (detail1) {
applyBgTint(detail1);
detail1.classList.add('mobile-only');
}
if (detail2) {
applyBgTint(detail2);
detail2.classList.add('mobile-only');
}
}
}
}
