Twitter of Zen Mode by KABA

/* ==UserStyle==
@name         Twitter of Zen Mode
@version      20241214.19.32
@namespace    https://userstyles.world/user/KABA
@description  As the title says.
@author       KABA
@license      No License
==/UserStyle== */

@-moz-document regexp("https://(x|twitter).com/.*") {
/* Base */
:root {
    --show-duration: .64s;
    --hide-duration: .4s;
}

/* - Navbar & Sidebar column */
header,
[data-testid="sidebarColumn"] {
    transition: var(--show-duration) ease-in-out;

    &:not(:hover, :has(:focus)) {
        transition-duration: var(--hide-duration);
        opacity: 0;
    }
}

/* - Primary column */
[data-testid="primaryColumn"] {
    border-color: #0000;
}
}

@-moz-document regexp("https://(x|twitter).com/home") {
/* Home */

/* - Primary column */
[data-testid="primaryColumn"] {

    /* Post block end */
    :has(> * > [role="progressbar"]) + * {
        /* Subsequent siblings */
        ~ * { transition: var(--show-duration) ease-in-out }

        &:not(:has(~ * :is(:hover, :focus, [aria-expanded="true"]))) {
            ~ * {
                transition-duration: var(--hide-duration);
                opacity: 0;
            }
        }
    }
}
}

@-moz-document regexp("https://(x|twitter).com/.+/status/.+") {
/* Post details */
/* NOTE: Applies to home if modal is open */

/* - Primary column */
[data-testid="primaryColumn"] {
    [data-testid="cellInnerDiv"] {
        /* has h2 with text -- HACK: Exclude `Who to follow` on home */
        &:has(h2 ~ div) {
            /* with Subsequent siblings */
            &, ~ * { transition: var(--show-duration) ease-in-out }

            &:not(:hover, :has(~ :hover,~ :focus)) {
                &, ~ * { transition-duration: var(--hide-duration) }

                opacity: .2;
                ~ * { opacity: 0 }
            }
        }
    }
}
}