xilly/xilly-custom-timeline.user.js

// ==UserScript==
// @name         Xilly - Custom Timeline
// @namespace    http://experimenting.website/
// @version      0.1
// @description  Customize X timeline color
// @author       EXPERIMENTING
// @match        https://x.com/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';

    function getSetting(key, defaultValue) {
        const value = GM_getValue(key);
        return value !== undefined ? value : defaultValue;
    }

    let OPACITY_LEVEL = getSetting('opacityLevel', 0.8);
    let BACKGROUND_COLOR = getSetting('backgroundColor', '30,44,59'); // RGB
    let BLUR_LEVEL = getSetting('blurLevel', 5);

    function updateCSS() {
        const rgb = BACKGROUND_COLOR.split(',');
        const css = `
            /* Mengatur transparansi dan warna untuk elemen utama timeline */
            [data-testid="primaryColumn"] {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important; /* Untuk kompatibilitas Safari */
            }

            /* Mengatur transparansi dan warna untuk elemen tweet individual */
            article[role="article"] {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
            }

            .css-1dbjc4n.r-1habvwh {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
            }

            .r-kritb0.r-1h8ys4a.css-175oi2r {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
            }

            .r-1awozwy.r-yfoy6g.r-18u37iz.r-1wtj0ep.r-13qz1uu.r-184en5c {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
            }

            .r-8oi148 {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            .r-ii8lfi {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            .r-yfoy6g {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            /* Drawer */
            .r-105ug2t.r-yfoy6g.r-1867qdf.r-xnswec.r-13awgt0.r-1ce3o0f.r-1udh08x.r-u8s1d.r-13qz1uu {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            .r-g6ijar {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            /* Make post */
            .r-1h8ys4a.r-dq6lxq.r-hucgq0 {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            .r-1iud8zs.r-1e5uvyk.r-ii8lfi.r-ne48ov.r-1nna3df {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            .r-yfoy6g.r-jumn1c.r-xd6kpl.r-gtdqiz.r-ipm5af.r-184en5c {
                background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1) !important;
                backdrop-filter: blur(${BLUR_LEVEL}px) !important;
                -webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;

            }

            /* Menjaga agar teks tetap terlihat jelas */
            .css-901oao, .css-16my406, .css-1hf3ou5 {
                background-color: transparent !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
        `;
        GM_addStyle(css);
    }

    updateCSS();

    const settingsPanel = document.createElement('div');
    settingsPanel.style.position = 'fixed';
    settingsPanel.style.top = '50px';
    settingsPanel.style.right = '10px';
    settingsPanel.style.zIndex = '1000';
    settingsPanel.style.backgroundColor = 'black';
    settingsPanel.style.border = '1px solid #ccc';
    settingsPanel.style.padding = '10px';
    settingsPanel.style.display = 'none';
    settingsPanel.innerHTML = `
        <h3>Timeline Settings</h3>
        <label for="opacitySlider">Opacity: <span id="opacityValue">${OPACITY_LEVEL}</span></label><br>
        <input type="range" id="opacitySlider" min="0" max="1" step="0.1" value="${OPACITY_LEVEL}"><br>
        <label for="blurSlider">Timeline Background Blur (px): <span id="blurValue">${BLUR_LEVEL}</span></label><br>
        <input type="range" id="blurSlider" min="0" max="20" step="1" value="${BLUR_LEVEL}"><br>
        <label for="colorPicker">Background Color:</label><br>
        <input type="color" id="colorPicker" value="#${parseInt(BACKGROUND_COLOR.split(',')[0]).toString(16).padStart(2, '0')}${parseInt(BACKGROUND_COLOR.split(',')[1]).toString(16).padStart(2, '0')}${parseInt(BACKGROUND_COLOR.split(',')[2]).toString(16).padStart(2, '0')}"><br>
        <button id="saveSettings">Save</button>
    `;
    document.body.appendChild(settingsPanel);

    const opacitySlider = settingsPanel.querySelector('#opacitySlider');
    const opacityValue = settingsPanel.querySelector('#opacityValue');
    opacitySlider.addEventListener('input', () => {
        OPACITY_LEVEL = opacitySlider.value;
        opacityValue.innerText = OPACITY_LEVEL;
    });

    const blurSlider = settingsPanel.querySelector('#blurSlider');
    const blurValue = settingsPanel.querySelector('#blurValue');
    blurSlider.addEventListener('input', () => {
        BLUR_LEVEL = blurSlider.value;
        blurValue.innerText = BLUR_LEVEL;
    });

    const colorPicker = settingsPanel.querySelector('#colorPicker');
    colorPicker.addEventListener('input', () => {
        const hex = colorPicker.value;
        const r = parseInt(hex.substr(1,2),16);
        const g = parseInt(hex.substr(3,2),16);
        const b = parseInt(hex.substr(5,2),16);
        BACKGROUND_COLOR = `${r},${g},${b}`;
    });

    const saveSettingsButton = settingsPanel.querySelector('#saveSettings');
    saveSettingsButton.addEventListener('click', () => {
        GM_setValue('opacityLevel', OPACITY_LEVEL);
        GM_setValue('backgroundColor', BACKGROUND_COLOR);
        GM_setValue('blurLevel', BLUR_LEVEL);
        updateCSS();
        settingsPanel.style.display = 'none';
    });

    GM_registerMenuCommand('Setting Timeline', () => {
        settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'block' : 'none';
    });
})();