Improved navigation in Twitter/X by menndouyukkuri

/* ==UserStyle==
@name         Improved navigation in Twitter/X
@namespace    twitter.com
@namespace    x.com
@author       menndouyukkuri
@description  Auto show/hide left navigation on narrow window when the browser is narrow.
@version      1.0.6
@license      CC-BY-NC-SA-4.0
==/UserStyle== */

/* Improved navigation in Twitter/X */
/* Ver.1.0.6 by menndouyukkuri is licensed under CC BY-NC-SA */
/* Originaly uploaded: https://userstyles.world/style/12049/ as "Compact Twitter/X" */
/* Mirror uploaded (original): https://drive.google.com/file/d/1HHB2qXz88F3Hh8bku_cP2rY8_AWjmXxB/view as "Compact Twitter/X" */
/* Created: November 30, 2023 */
/* Updated: February 18, 2024 */

@-moz-document url("https://twitter.com/home"), url("https://x.com/home") {

/* remove "Home" indicator at top of timeline */
[data-testid="primaryColumn"] > div > div > div > div.css-175oi2r.r-136ojw6.r-1loqt21 {
    max-height: 0;
    max-width: 44px;
    margin: 0 0 0 auto;
}
[data-testid="primaryColumn"] > div > div > div > div.css-175oi2r.r-136ojw6.r-1loqt21 > div {
    height: auto;
    border-bottom: 1px solid rgb(239, 243, 244);
}
[data-testid="primaryColumn"] > div > div > div > div.css-175oi2r.r-136ojw6.r-1loqt21 > div > div > div > div > div.css-175oi2r.r-16y2uox.r-1wbh5a2.r-1pi2tsx.r-1777fci {
    display: none;
}
[data-testid="primaryColumn"] > div > div.css-175oi2r.r-aqfbo4.r-gtdqiz.r-1gn8etr.r-1g40b8q > div.css-175oi2r.r-1e5uvyk.r-6026j > div > div > div.css-175oi2r.r-j5o65s.r-rull8r.r-qklmqi.r-1777fci.r-1pn2ns4,
[data-testid="primaryColumn"] > div > div > div > div.css-175oi2r.r-136ojw6.r-1loqt21 > div > div > div > div > div.css-175oi2r.r-1pz39u2.r-1777fci.r-15ysp7h.r-obd0qt.r-s8bhmr {
    background-color: rgba(255, 255, 255, 0.85);
}
[data-testid="primaryColumn"] > div > div > div > div.css-175oi2r.r-136ojw6.r-1loqt21 > div > div > div > div > div.css-175oi2r.r-1pz39u2.r-1777fci.r-15ysp7h.r-obd0qt.r-s8bhmr {
    min-width: 44px;
    padding-right: 8px;
}
[data-testid="primaryColumn"] > div > div > div > div:not(.r-14lw9ot.r-1h8ys4a):nth-child(2) {
    max-width: calc(100% - 44px);
}
}

@-moz-document domain("twitter.com"), domain("x.com") {

/* Compact Twitter */
/* Ver.20231229 by nukumori.org is licensed under CC BY-NC-SA */
/* Originaly uploaded: https://userstyles.org/styles/179967/ as "Fast Twitter" */
/* Created: February 8, 2020 */
/* Updated: November 29, 2023 */

/* *** font-color bright theme or dark theme *** */
:root {
    --custom-footer-background: #fff;
    --custom-shadow-color-dark: rgba(0,0,0,.4);
    --custom-shadow-color-light: rgba(0,0,0,.2);
}
body:not([style*="background-color: rgb(255, 255, 255);"]):not([style*="background-color: #FFFFFF;"]) {
    --custom-footer-background: #000;
    --custom-shadow-color-dark: rgba(255,255,255,.7);
    --custom-shadow-color-light: rgba(255,255,255,.2);
}
body[style*="background-color: rgb(21, 32, 43);"] {
    --custom-footer-background: rgb(21, 32, 43);
}

/* *** when narrow most *** */
@media (max-width: 599px) {
    /* header */
    :root {
        --min-header-width: calc(44px + 16px * 2);
    }
    .r-1gymjhz {
        width: var(--min-header-width);
        background-color: var(--custom-footer-background, inherit);
    }
    /* narrow padding around icon */
    [data-testid="SideNav_AccountSwitcher_Button"] {
        padding: 7px;
    }
    /* make timeline narrow 202308 */
    /*[data-testid="cellInnerDiv"] {
    }*/
    [data-testid="cellInnerDiv"] .r-i023vh:not([data-testid="tweet"]) {
        padding-right: 8px;
    }
    [data-testid="cellInnerDiv"] .r-1qhn6m8:not([data-testid="tweet"]) {
        padding-left: 8px;
    }
    /* icon area */
    [data-testid="cellInnerDiv"] .r-1b7u577 {
        margin-right: 6px;
    }

    /* ********************* */
    /* auto hide/show header */
    /* ********************* */
    header {
        will-change: auto;
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 9 !important;
        background-color: var(--custom-footer-background); /* tbd: rename for theme dark and dim */
        box-shadow: 0 0 2px var(--custom-shadow-color-light) !important;
        transform: translateX(calc(-1 * var(--min-header-width))) !important;
        transition: 330ms linear, 500ms box-shadow, 0ms background-color;
    }
    header:before {
        content: "";
        display: block;
        position: fixed;
        left: 100%;
        top: 0;
        bottom: 0;
        width: 16px;
        height: 100vh;
        background-color: transparent;
        transition: 0ms;
    }
    header:hover {
        transform: translateX(0) !important;
        box-shadow: 0 0 10px var(--custom-shadow-color-dark) !important;
        transition: 17ms ease-in;
    }
    header:hover:before {
        width: 32px;
    }
}

/* profile icon/fix dm multi patients */
[href*="/participants"] .r-4gszlv {
    background-size: cover;
}

/* fix analysis page overflows when narrow */
@media (max-width: 1199px) {
    body[data-page=home] .full-page {
        min-width: 0;
        width: auto;
        max-width: 1000px;
    }
    .navbar-fixed-top {
        width: 100%;
    }
    .SharedNavBar-contents {
        width: calc(100% - 44px);
    }
    .container {
        width: calc(100% - 16px);
    }
    .home-summary-panel {
        display: flex;
        align-items: flex-end;
    }
}

/* avoid footer hidden by dm pop up window header */
@media (min-width: 1078px) and (max-width: 1960px) {
    [data-testid="sidebarColumn"] nav[aria-label][role="navigation"] {
        padding-bottom: 62px;
    }
}
}