Readability Line Gradient

Color lines to assist eye transistion similar to BeeLine Reader. Uses Lining.js for (responsive) DOM wrapping of paragraph text.

Versão de: 08/03/2020. Veja: a última versão.

// ==UserScript==
// @name         Readability Line Gradient
// @namespace    https://neekleer.tacden.net/
// @version      0.2
// @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\/.+/?
// @include      /https?:\/\/(www.)?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'))
  })()