StackOverflow custom styles

Post #552 written by Khodok in Code

Content

Yeah I got annoyed

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Track processed elements
const processedElements = new WeakSet();

// MutationObserver to catch newly loaded dates
const observer = new MutationObserver(() => {
    checkDates();
});

const checkDates = () => {
    const dateElements = document.querySelectorAll(
        '.relativetime-clean, .relativetime'
    );
    const fiveYearsAgo = new Date();
    fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);

    dateElements.forEach((el) => {
        if (processedElements.has(el)) return;

        try {
            const title = el.getAttribute('title');
            const dateStr = title?.split(',')[0] ?? el.textContent.split(' at')[0];
            const itemDate = new Date(dateStr);

            if (!isNaN(itemDate) && itemDate < fiveYearsAgo) {
                el.classList.add('too-old-and-rusty');
            } else if (!isNaN(itemDate) && itemDate >= fiveYearsAgo) {
                el.classList.add('yay-and-new');
            }

            processedElements.add(el);
        } catch {}
    });
};

// Initial check
checkDates();

// Observe DOM changes, focusing on content areas where "more" buttons exist
observer.observe(document.body, {
    childList: true,
    subtree: true,
});
CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.votecell:has(.js-accepted-answer-indicator.d-none) + .answercell:has(.too-old-and-rusty) {
    opacity: 50%;
}

:is(.comment-text, .post-signature):has(.too-old-and-rusty) {
    opacity: 50%;

    .too-old-and-rusty {
        color: red;
    }
}

.answercell:has(.yay-and-new):not(:has(.too-old-and-rusty)) {
    border: 1px green dashed;
    padding: 0.5rem;
    background-color: rgba(0, 255, 0, 0.0625);
}

:is(.comment-text, .post-signature):has(.yay-and-new) {
    border: 1px green dotted !important;
    background-color: rgba(0, 255, 0, 0.0625);
    margin-block: 0.5rem;

    & + & {
        margin-inline: 0.25rem;
    }

    .yay-and-new {
        color: green;
    }
}
Comments

Please Log in to leave a comment.

No comments yet.