ING Watchlist Compact

Lindert die visuellen Verbrechen des ING-Watchlist-Redesigns auf ein knapp erträgliches Maß
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         ING Watchlist Compact
// @match        https://wertpapiere.ing.de/investieren/watchlist*
// @version      1.0
// @description  Lindert die visuellen Verbrechen des ING-Watchlist-Redesigns auf ein knapp erträgliches Maß
// @author       DiggusBickus
// @license      MIT
// @run-at       document-idle
// @namespace https://greasyfork.org/users/1599422
// ==/UserScript==

(function () {
    'use strict';
    const NEGATIVE_COLOR = 'rgb(255, 0, 0)';
    const POSITIVE_COLOR = 'rgb(0, 200, 0)';

    function colorBadge(el, color) {
        el.style.color = color;
        el.querySelectorAll('*').forEach(child => child.style.color = color);
    }

    function applyStyles(root) {

        // Zeugs verkleinern
        root.querySelectorAll('a.font-200:not(.bold)').forEach(el => {
            el.style.fontSize = 'smaller';
            el.style.lineHeight = '1';
        });
        root.querySelectorAll('table td').forEach(el => el.style.padding = '0');
        root.querySelectorAll('tr').forEach(el => {
            el.style.height = 'auto';
            el.style.minHeight = '0';
        });
        root.querySelectorAll('td *').forEach(el => {
            el.style.lineHeight = '1.1';
            el.style.minHeight = '0';
        });
        root.querySelectorAll('.has-value.font-200, .has-value.font-300').forEach(el => el.style.padding = '0');

        // .negative/.positive direkt von ING übernehmen
        root.querySelectorAll('.negative, .negative *').forEach(el => el.style.color = NEGATIVE_COLOR);
        root.querySelectorAll('.positive, .positive *').forEach(el => el.style.color = POSITIVE_COLOR);

        // Badges mit Vorzeichen oder % einfärben
        root.querySelectorAll('ui-price-badge').forEach(badge => {
            if (badge.classList.contains('color-subtle')) return;
            if (badge.closest('.font-color-subtle')) return;

            const text = badge.textContent.trim();

            if (text.includes('-') || text.includes('%')) {
                // Eindeutig: direkt nach Inhalt einfärben
                colorBadge(badge, text.includes('-') ? NEGATIVE_COLOR : POSITIVE_COLOR);
            } else if (badge.classList.contains('color-default') && badge.classList.contains('lower')) {
                // EUR-Beträge ohne Vorzeichen: Farbe vom Geschwister-Badge ableiten
                const leftCol = badge.closest('.left-column');
                if (!leftCol) return;
                const ref = leftCol.querySelector('.badge.positive, .badge.negative');
                if (!ref) return;
                colorBadge(badge, ref.classList.contains('negative') ? NEGATIVE_COLOR : POSITIVE_COLOR);
            }
        });

        // Badge BG Color entfernen
        root.querySelectorAll('.badge').forEach(el => el.style.backgroundColor = 'transparent');

    }

    //ShadowRoot Erkennung (dynamischer Content)
    function scan(root = document) {
        applyStyles(root);
        root.querySelectorAll('*').forEach(el => {
            if (el.shadowRoot) scan(el.shadowRoot);
        });
    }

    scan();
    //Bei Änderungen ausführen
    const observer = new MutationObserver(() => scan());
    observer.observe(document.body, { childList: true, subtree: true });
})();