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.2.1
// @description Color lines to assist eye transistion similar to BeeLine Reader. Uses Lining.js for (responsive) DOM wrapping of paragraph text.
// @author neekleer
// @match http*://*.storiesonline.net/s/*
// @match http*://*.novelfull.com/*/*.html
// @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
const colorA = '#000'
const colorB = '#0F52BA'
const colorC = '#E34234'
const elements = document.querySelectorAll('p:not(:empty)')
setTimeout(() => {
for (let i = elements.length - 1; i >= 0; i--) {
window.lining(elements[i], { autoResize: true })
}
}, 1000)
const lineSpec = [
['3n - 2', colorA, colorA, colorB],
['3n - 1', colorB, colorA, colorC],
['3n', colorC, colorA, colorA]
]
for (let i = 0, l = lineSpec.length; i < l; i++) {
const multExpr = lineSpec[i].shift()
const 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'))
})()