Color lines to assist eye transistion similar to BeeLine Reader. Uses Lining.js for (responsive) DOM wrapping of paragraph text.
// ==UserScript==
// @name Readability Line Gradient
// @namespace https://neekleer.tacden.net/
// @version 0.1
// @description Color lines to assist eye transistion similar to BeeLine Reader. Uses Lining.js for (responsive) DOM wrapping of paragraph text.
// @author neekleer
// @include /https?:\/\/(www.)?storiesonline.net\/s\/.+/
// @grant GM_addStyle
// @require https://cdn.jsdelivr.net/lining.js/0.3.3/lining.min.js
// ==/UserScript==
(function() {
'use strict';
if (typeof window.lining !== 'function') return;
var colorA = '#000';
var colorB = '#0F52BA';
var colorC = '#E34234';
var elements = document.querySelectorAll('p');
for (var i = 0, l = elements.length; i < l; i++) {
window.lining(elements[i], { 'autoResize': true });
}
var lineSpec = [
['3n - 2', colorA, colorA, colorB],
['3n - 1', colorB, colorA, colorC],
['3n', colorC, colorA, colorA]
];
for (i = 0, l = lineSpec.length; i < l; i++) {
var multExpr = lineSpec[i].shift();
var colorList = lineSpec[i];
lineSpec[i] = `p .line:nth-of-type(${multExpr}){background:linear-gradient(90deg,${colorList.join()});color:transparent;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}`;
if (colorList.pop() !== colorA) {
colorList.push(colorA);
lineSpec[i] += `\np .line[last]:nth-of-type(${multExpr}){background:linear-gradient(90deg,${colorList.join()});color:transparent;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}`;
}
}
GM_addStyle(lineSpec.join('\n'));
})();