☰

Readability Line Gradient

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

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

// ==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'));
})();