Ninjastic
PostEdited versionsQuotes to this post
Post was edited
 11 days ago (view)
Post
Topic
Board Meta
Merits 12 from 3 users
Re: Little things that bug you/me about the forum
by
mcdouglasx
on 04/08/2025, 17:32:58 UTC
⭐ Merited by vapourminer (8) ,Cricktor (2) ,hosemary (2)
Quote from: coinlary on July 27, 2025, 08:56:53 PM
I will suggest turning it off when the user is outside the forum or trying to enter any sensitive info.  i use darkmode too but my browser allows dark mode and i don't trust extensions because of the exact permission i have to give it

I sometimes use a userscript with Tampermonkey because I'm not a big fan of the extension mentioned, as it simply doesn't work as it should in some ways, or the Darkmode isn't set up properly.

I'm sharing the userscript for anyone who might be interested.

Code:
// ==UserScript==
// @name          Bitcointalk Dark
// @namespace     bitcointalk-dark
// @version       3.17
// @description   Dark theme for Bitcointalk
// @author        mcdouglasx
// @match         https://bitcointalk.org/*
// @grant         GM_addStyle
// @run-at        document-start
// ==/UserScript==

(function() {
    const cssVariables = `
        :root {
            --dark-background: #1A1A1A;
            --medium-background: #252525;
            --light-background: #2f2f2f;
            --border-color: #404040;
            --text-color: #e0e0e0;
            --secondary-text-color: #bbbbbb;
            --link-color: #6A97D9;
            --link-hover-color: #8CB0E6;
            --button-color: #3E6F9F;
            --button-hover-color: #5A8ABA;
            --input-background: #333333;
            --input-text-color: #eeeeee;
            --avatar-background: #ffffff;
            --avatar-border: #dddddd;
            --post-background: #181818;
            --post-alternate-background: #2C2C2C;
            --banner-background: #181818;
            --banner-text-color: #f0f0f0;
            --tab-background: #2a2a2a;
            --active-tab: #004488;
            --dark-text-background: #3a3a3a;
            --moderator-color: #FFCCCC;
            --trust-good: #66CC66;
            --trust-neutral: #DDDD99;
            --trust-bad: #FF6666;
        }
    `;

    const mainStyles = `
        html, body, .tborder {
            background-color: var(--dark-background) !important;
            color: var(--text-color) !important;
            border-color: var(--border-color) !important;
        }
        tbody {
            background-color: var(--dark-background) !important;
            color: var(--text-color) !important;
        }
        .tborder {
            border: 1px solid var(--border-color) !important;
        }
        .tborder table, .tborder tr, .tborder td {
            background-color: var(--dark-background) !important;
            border-color: var(--border-color) !important;
        }
        .catbg, .catbg2, .catbg3 {
            background: none !important;
            background-color: var(--light-background) !important;
            color: #ffffff !important;
            border-color: var(--border-color) !important;
            background-image: none !important;
        }
        tr.catbg td {
            background: none !important;
            background-color: var(--light-background) !important;
            color: #ffffff !important;
        }
        div.bordercolor table tr.catbg td {
            background: none !important;
            background-color: var(--light-background) !important;
            color: #ffffff !important;
        }
        tr.catbg3 td {
            background: none !important;
            background-color: var(--light-background) !important;
            color: #ffffff !important;
            border-color: var(--border-color) !important;
        }

        table.tborder tr.windowbg {
            background-color: var(--post-background) !important;
            color: var(--text-color) !important;
        }
        table.tborder tr.windowbg2 {
            background-color: var(--post-alternate-background) !important;
            color: var(--text-color) !important;
        }

        table.tborder tr.windowbg td.td_headerandpost {
            background-color: var(--post-background) !important;
        }
        table.tborder tr.windowbg2 td.td_headerandpost {
            background-color: var(--post-alternate-background) !important;
        }

        table.tborder tr.windowbg td.poster_info {
            background-color: var(--post-background) !important;
        }
        table.tborder tr.windowbg2 td.poster_info {
            background-color: var(--post-alternate-background) !important;
        }

        td.windowbg {
             background-color: var(--post-background) !important;
             color: var(--text-color) !important;
             border-color: var(--border-color) !important;
        }
        td.windowbg2 {
             background-color: var(--post-alternate-background) !important;
             color: var(--text-color) !important;
             border-color: var(--border-color) !important;
        }

        .tborder .titlebg, .tborder .titlebg2 {
            background-color: var(--light-background) !important;
            color: #ffffff !important;
            border-color: var(--border-color) !important;
            background-image: none !important;
        }
        .moderator {
            color: var(--moderator-color) !important;
            font-weight: bold !important;
            background-color: transparent !important;
        }
        .catbg a[href*="action=moderate"], .catbg b {
            color: var(--text-color) !important;
            font-weight: normal !important;
        }
        .nav, .nav b {
            color: var(--text-color) !important;
        }
        .nav a.nav {
            color: var(--link-color) !important;
        }
        .nav a.nav:hover {
            color: var(--link-hover-color) !important;
        }
        .nav span {
            color: var(--text-color) !important;
        }
        .windowbg3 {
            background-color: var(--dark-background) !important;
            color: var(--text-color) !important;
        }
        .catbg3 #top_subject {
            color: var(--text-color) !important;
            font-weight: bold !important;
            font-size: 1.1em !important;
        }
        #bodyarea {
            background-color: var(--dark-background) !important;
        }
        #bodyarea table.bordercolor {
            background-color: var(--medium-background) !important;
            border-color: var(--border-color) !important;
        }
        .titlebg, .titlebg2,
        tr.titlebg td, tr.titlebg2 td,
        td.titlebg, td.titlebg2 {
            background-color: var(--light-background) !important;
            color: #ffffff !important;
            border-color: var(--border-color) !important;
            background-image: none !important;
            background: none !important;
        }
        #bodyarea td[width="180"] table.bordercolor {
            background-color: var(--medium-background) !important;
            border-color: var(--border-color) !important;
        }
        #bodyarea td[width="180"] table.bordercolor td.catbg {
            background-color: var(--light-background) !important;
            color: #ffffff !important;
            border-color: var(--border-color) !important;
            background-image: none !important;
            background: none !important;
        }
        #bodyarea td[width="180"] table.bordercolor tr.windowbg2 td.smalltext {
            background-color: var(--post-alternate-background) !important;
            color: var(--text-color) !important;
        }
        #bodyarea td[width="180"] table.bordercolor tr.windowbg2 td.smalltext a {
            color: var(--link-color) !important;
        }
        #bodyarea td[width="180"] table.bordercolor tr.windowbg2 td.smalltext a:hover {
            color: var(--link-hover-color) !important;
        }
        table.bordercolor td.catbg {
            background-color: var(--light-background) !important;
            color: #ffffff !important;
            border-color: var(--border-color) !important;
        }
        #smfheader {
            background-color: var(--banner-background) !important;
            border-bottom: 1px solid var(--border-color) !important;
            background-image: none !important;
        }
        #smfheader td.catbg {
            background: none !important;
            background-color: var(--banner-background) !important;
            color: var(--banner-text-color) !important;
        }
        #smfheader img {
            filter: brightness(0.7) contrast(1.2) grayscale(0.2) !important;
            opacity: 0.9 !important;
        }
        #upshrinkHeader, #upshrinkHeaderIC {
            background-color: var(--medium-background) !important;
        }
        #upshrinkHeader2 {
            background-color: var(--medium-background) !important;
            color: var(--banner-text-color) !important;
            border-color: var(--border-color) !important;
        }
        #upshrinkHeader2 td.titlebg2 {
            background-color: var(--medium-background) !important;
            color: var(--banner-text-color) !important;
            background-image: none !important;
            background: none !important;
            border-color: var(--border-color) !important;
        }
        #footerarea {
            background-color: var(--dark-background) !important;
            color: var(--secondary-text-color) !important;
            border-top: 1px solid var(--border-color) !important;
        }
        .maintab_back, .maintab_first, .maintab_last, .mirrortab_back, .mirrortab_first, .mirrortab_last {
            background-color: var(--tab-background) !important;
            background-image: none !important;
            border-color: var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .maintab_active_back, .maintab_active_first, .maintab_active_last {
            background-color: var(--active-tab) !important;
            background-image: none !important;
            border-color: var(--border-color) !important;
            color: #ffffff !important;
        }
        .maintab_back a, .maintab_active_back a, .mirrortab_back a, .mirrortab_first a, .mirrortab_last a, .maintab_active_first a, .maintab_active_last a {
            color: inherit !important;
        }
        .maintab_back a:hover, .mirrortab_back a:hover {
            color: var(--link-hover-color) !important;
        }
        a, a:visited, .smalltext, .middletext, .normaltext, .largetext {
            color: var(--link-color) !important;
        }
        a:hover {
            color: var(--link-hover-color) !important;
        }
        body, .smalltext, .middletext, .normaltext, .largetext, td {
            color: var(--text-color) !important;
        }
        .subject a {
            color: var(--link-color) !important;
            font-weight: bold !important;
        }
        .subject a:hover {
            color: var(--link-hover-color) !important;
        }
        .bordercolor, table, tr, td, .tborder table, .tborder tr, .tborder td {
            border-color: var(--border-color) !important;
        }
        hr, .hrcolor {
            border-top: 1px solid var(--border-color) !important;
            background-color: transparent !important;
            height: 1px !important;
        }
        input, select, textarea {
            background-color: var(--input-background) !important;
            color: var(--input-text-color) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 4px;
        }
        input[type="submit"], input[type="button"], .button_submit {
            background-color: var(--button-color) !important;
            color: #ffffff !important;
            border: 1px solid var(--button-color) !important;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }
        input[type="submit"]:hover, input[type="button"]:hover, .button_submit:hover {
            background-color: var(--button-hover-color) !important;
            border-color: var(--button-hover-color) !important;
        }
        img {
            opacity: 0.9;
            filter: brightness(0.9);
        }
        img:hover {
            opacity: 1;
            filter: brightness(1);
        }
        .messageicon {
            filter: invert(0.9) brightness(0.9);
        }
        img.avatar {
            background-color: var(--avatar-background) !important;
            border: 1px solid var(--avatar-border) !important;
            padding: 2px !important;
            border-radius: 4px !important;
            filter: none !important;
            opacity: 1 !important;
        }
        table.tborder {
            border-collapse: separate !important;
            border-spacing: 0 !important;
            table-layout: fixed !important;
            width: 100% !important;
        }
        table.tborder td.poster_info {
            border-right: 1px solid var(--border-color) !important;
            border-bottom-color: var(--avatar-border) !important;
            box-sizing: border-box;
            width: 16% !important;
            vertical-align: top;
            min-width: 100px !important;
            color: var(--secondary-text-color) !important;
        }
        .poster_info .smalltext,
        .poster_info span.membergroup,
        .poster_info .profile_text,
        .poster_info > font,
        .poster_info > span,
        .poster_info > b,
        .poster_info > i {
            color: var(--text-color) !important;
        }
        #profile_content .normaltext,
        #profile_content .smalltext,
        #profile_content table.tborder td,
        #profile_content td.profilebg,
        #profile_content td.profilebg .normaltext,
        #profile_content td.profilebg .smalltext {
            color: var(--text-color) !important;
        }
        #profile_content td span.trustscore {
            color: #FFFFFF !important;
            background-color: transparent !important;
        }
        #profile_content td span.trustscore b {
            color: #FFFFFF !important;
        }

        .poster_info .smalltext span,
        .poster_info .smalltext font,
        #profile_content .smalltext span,
        #profile_content .smalltext font {
            color: var(--text-color) !important;
        }
        .trust_good {
            color: var(--trust-good) !important;
        }
        .trust_neutral {
            color: var(--trust-neutral) !important;
        }
        .trust_bad {
            color: var(--trust-bad) !important;
        }
        #profile_content .trust_good {
            color: var(--trust-good) !important;
        }
        #profile_content .trust_neutral {
            color: var(--trust-neutral) !important;
        }
        #profile_content .trust_bad {
            color: var(--trust-bad) !important;
        }
        td.td_headerandpost {
            border-bottom-color: var(--avatar-border) !important;
            border-right-color: var(--avatar-border) !important;
            border-left: none !important;
            width: auto !important;
            min-width: 1px !important;
            box-sizing: border-box;
            overflow-x: hidden !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            white-space: normal !important;
            padding: 15px 8px 15px 8px !important;
            vertical-align: top !important;
        }
        table.tborder td.poster_info img {
            filter: none !important;
            opacity: 1 !important;
        }
        .quoteheader {
            background-color: var(--light-background) !important;
            color: var(--secondary-text-color) !important;
            border-bottom: 1px solid var(--border-color) !important;
            padding: 4px 8px !important;
            font-weight: bold;
        }
        .quote {
            background-color: var(--medium-background) !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
            padding: 8px !important;
            margin: 0px !important;
            margin-bottom: 10px !important;
            border-radius: 0px !important;
            box-sizing: border-box;
            width: 100% !important;
            max-width: 100% !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            white-space: normal !important;
            overflow-x: hidden !important;
            line-height: 1.5 !important;
        }
        .codeheader {
            background-color: var(--light-background) !important;
            color: var(--secondary-text-color) !important;
            border-bottom: 1px solid var(--border-color) !important;
            padding: 4px 8px !important;
            font-weight: bold;
        }
        .code {
            background-color: #2b2b2b !important;
            border: 1px solid var(--border-color) !important;
            color: #a9b7c6 !important;
            padding: 8px !important;
            margin-bottom: 10px !important;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
            overflow-x: auto !important;
            word-wrap: normal !important;
            overflow-wrap: normal !important;
            word-break: normal !important;
            white-space: pre !important;
            border-radius: 4px;
        }
        .poster_info {
            color: var(--secondary-text-color) !important;
        }
        .poster_info a {
            color: var(--link-color) !important;
        }
        .post {
            color: var(--text-color) !important;
            background-color: transparent !important;
            padding: 0px !important;
            border-radius: 4px;
            box-sizing: border-box !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            white-space: normal !important;
        }
        .td_headerandpost {
            color: var(--text-color) !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            white-space: normal !important;
            overflow-x: hidden !important;
            min-width: 1px !important;
            box-sizing: border-box !important;
            padding: 15px 8px 15px 8px !important;
            vertical-align: top !important;
        }
        table.tborder tr.windowbg td, table.tborder tr.windowbg2 td, table.tborder tr.windowbg3 td {
            border-color: var(--border-color) !important;
        }
        .pagelinks {
            background-color: var(--medium-background) !important;
            border: 1px solid var(--border-color) !important;
            padding: 5px 10px !important;
            margin-top: 10px !important;
            border-radius: 4px;
            color: var(--text-color) !important;
        }
        .pagelinks a {
            color: var(--link-color) !important;
            padding: 2px 5px;
            text-decoration: none;
        }
        .pagelinks a:hover {
            background-color: var(--light-background) !important;
            color: var(--link-hover-color) !important;
            border-radius: 3px;
        }
        .pagelinks strong {
            background-color: var(--button-color) !important;
            color: #ffffff !important;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .error, .success, .warning {
            background-color: #3d2d2d !important;
            color: #ff9999 !important;
            border: 1px solid #663333 !important;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #2d3d2d !important;
            color: #99ff99 !important;
            border-color: #336633 !important;
        }
        .warning {
            background-color: #3d3d2d !important;
            color: #ffff99 !important;
            border-color: #666633 !important;
        }
        .dropmenu {
            background-color: var(--light-background) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 4px;
        }
        .dropmenu ul li a {
            color: var(--text-color) !important;
        }
        .dropmenu ul li a:hover {
            background-color: var(--medium-background) !important;
            color: var(--link-hover-color) !important;
        }
        #footerarea span.smalltext {
            color: var(--secondary-text-color) !important;
        }
        .img_normal, .img_new, .img_locked, .img_sticky, .img_announcement {
            filter: invert(0.8) brightness(0.9);
        }
        td.windowbg[width="20"][valign="middle"][align="center"] {
            background-color: var(--post-background) !important;
        }
        td.windowbg2[width="100%"][colspan="2"] {
            background-color: var(--post-alternate-background) !important;
        }
        table.bordercolor tr.windowbg td[width="48%"],
        table.bordercolor tr.windowbg2 td[width="14%"],
        table.bordercolor tr.windowbg2 td[width="5%"] {
            background-color: inherit !important;
        }

        body.profile #bodyarea table.tborder > tbody > tr > td[width]:not([width="180"]) {
            width: 100% !important;
            display: block !important;
            box-sizing: border-box !important;
            padding: 0 !important;
        }
        body.profile #profile_content {
            width: 100% !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }
        body.profile #profile_content table {
            width: 100% !important;
            table-layout: auto !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        body.profile td.windowbg[colspan="2"] {
            width: 100% !important;
            display: block !important;
            box-sizing: border-box !important;
            padding: 8px !important;
            overflow-x: hidden !important;
        }
        body.profile .signature {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }
        body.profile .signature-wrapper {
            border: 1px dashed var(--border-color) !important;
            padding: 5px !important;
            margin: 10px auto !important;
            box-sizing: border-box !important;
            max-width: calc(100% - 20px) !important;
            display: block !important;
        }
        body.profile .signature-wrapper > div[style*="inline-block"] {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
    `;

    GM_addStyle(cssVariables + mainStyles);

    function isolateSignatures() {
        const signatures = document.querySelectorAll('.signature');

        signatures.forEach(signature => {
            if (signature.classList.contains('processed')) return;
            signature.classList.add('processed');

            const parentTd = signature.closest('td');
            if (parentTd) {
                parentTd.style.padding = '0';
                parentTd.style.margin = '0';
            }

            const container = document.createElement('div');
            container.style.display = 'inline-block';
            container.style.marginTop = '0px';
            container.style.maxWidth = '100%';
            container.style.overflowX = 'hidden';

            const clone = signature.cloneNode(true);

            const shadow = container.attachShadow({ mode: 'open' });

            const style = document.createElement('style');
            style.textContent = `
                :host {
                    display: block !important;
                    text-align: center !important;
                    max-width: 100% !important;
                    overflow-x: hidden !important;
                    word-wrap: break-word !important;
                    overflow-wrap: break-word !important;
                }
                img {
                    max-width: 100% !important;
                    height: auto !important;
                    display: block !important;
                    margin: 0 auto !important;
                }
                a {
                    text-decoration: none !important;
                }
                a:hover {
                    text-decoration: underline !important;
                }
                table {
                    border-collapse: collapse !important;
                    width: auto !important;
                    max-width: 100% !important;
                    margin: 0 auto !important;
                    table-layout: auto !important;
                }
                td {
                    padding: 3px !important;
                    vertical-align: top !important;
                    word-wrap: break-word !important;
                    overflow-wrap: break-word !important;
                }
                span, font, div {
                    display: inline-block;
                    max-width: 100%;
                    box-sizing: border-box;
                }
                p {
                    margin: 0 !important;
                    padding: 0 !important;
                }
            `;

            shadow.appendChild(style);
            shadow.appendChild(clone);

            const wrapperForCentering = document.createElement('div');
            wrapperForCentering.classList.add('signature-wrapper');
            wrapperForCentering.style.textAlign = 'center';
            wrapperForCentering.style.width = '100%';
            wrapperForCentering.appendChild(container);

            signature.parentNode.replaceChild(wrapperForCentering, signature);
        });
    }

    function applyTrustColorFix() {
        const profileContent = document.getElementById('profile_content');
        if (profileContent) {
            const trustSpan = profileContent.querySelector('span.trustscore');
            if (trustSpan) {
                trustSpan.style.setProperty('color', '#FFFFFF', 'important');
                trustSpan.style.backgroundColor = 'transparent';
                const boldElement = trustSpan.querySelector('b');
                if (boldElement) {
                    boldElement.style.setProperty('color', '#FFFFFF', 'important');
                }
            }

            const trustTd = profileContent.querySelector('td[width="50%"][valign="middle"][align="left"]');
            if (trustTd && trustTd.firstChild && trustTd.firstChild.nodeType === Node.TEXT_NODE && trustTd.firstChild.nodeValue.includes('Trust:')) {
                trustTd.style.setProperty('color', '#FFFFFF', 'important');
            }
        }
    }

    function setupProfileContentObserver() {
        const profileContent = document.getElementById('profile_content');
        if (profileContent) {
            const observer = new MutationObserver(mutations => {
                let signatureMutated = false;
                let trustScoreMutated = false;

                for (const mutation of mutations) {
                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                        for (const node of mutation.addedNodes) {
                            if (node.nodeType === 1) {
                                if (node.classList.contains('signature') || node.querySelector('.signature')) {
                                    signatureMutated = true;
                                }
                                if (node.matches('span.trustscore') || node.querySelector('span.trustscore')) {
                                    trustScoreMutated = true;
                                }
                            }
                        }
                    } else if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                        if (mutation.target.matches('span.trustscore')) {
                            trustScoreMutated = true;
                        }
                    }
                }

                if (signatureMutated) {
                    isolateSignatures();
                }
                if (trustScoreMutated) {
                    applyTrustColorFix();
                }
            });

            observer.observe(profileContent, {
                attributes: true,
                childList: true,
                subtree: true
            });
        }
    }

    function setupBodyObserver() {
        const bodyObserver = new MutationObserver((mutations, observer) => {
            const profileContent = document.getElementById('profile_content');
            if (profileContent) {
                applyTrustColorFix();
                isolateSignatures();
                setupProfileContentObserver();
                observer.disconnect();
            }
        });

        bodyObserver.observe(document.body, { childList: true, subtree: true });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            applyTrustColorFix();
            isolateSignatures();
            setupProfileContentObserver();
        });
    } else {
        applyTrustColorFix();
        isolateSignatures();
        setupProfileContentObserver();
    }

    setupBodyObserver();
})();