☰

Readability Line Gradient

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

当前为 2020-03-08 提交的版本，查看 最新版本。

// ==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
// @match        http*://*.novelplanet.com/Novel/*/*
// @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'))
})()