Minimal Twitter by misaelk

/* ==UserStyle==
@name         Minimal Twitter
@version      20240126.05.44
@namespace    userstyles.world/user/misaelk
@description  Removes bloat from twitter.com. Menu is still accessible but it's collapsed by default, and shows on hover.
@author       misaelk
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://twitter.com"), domain("mobile.twitter.com") {
/* hide ads, trends, dms, menu, and view count */
[data-testid='placementTracking'] article,
[data-testid='sidebarColumn'],
[data-testid='DMDrawer'],
article [aria-label][role='group'] > div:nth-child(4),
article a[href*='/status/'] + span,
article a[href*='/status/'] + span + span {
    display: none;
}
[role='banner'] {
    position: absolute;
    margin-left: -315px;
    transition: all 0.2s;
    height: 100%;
}
/* prevent the "back to tweet" menu from being sticky */
[data-testid='primaryColumn'] > div > div:first-child {
    position: static;
}
/* center and enlarge content */
[role='main'] > div {
    width: 100%;
}
@media (min-width: 600px) {
    [data-testid='primaryColumn'] {
        margin-left: calc((100% - 600px) / 2);
        max-width: 600px !important;
    }
}
@media (min-width: 950px) {
    [data-testid='primaryColumn'] {
        margin-left: calc((100% - 800px) / 2);
        max-width: 800px !important;
    }
    /* repurpose screen reader item for show-menu-on-hover feature */
    [aria-label="Skip to trending"] {
        position: fixed;
        top: 0; left: 0;
        width: 20px; 
        height: 100vh;
        background: rgb(29, 161, 242) !important;
        z-index: 4;
        clip: auto;
        border-radius: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    [aria-label="Skip to trending"]:hover + [role='banner'],
    [role='banner']:hover {
        margin-left: -40px;
    }
}
/* add labels to menu */
@media (max-width: 1281px) {
    [role="navigation"] > [aria-label]:after {
        content: attr(aria-label);
        position: fixed;
        margin-left: 55px;
        margin-top: 10px;
        background: rgb(29, 161, 242);
        color: #fff;
        font: bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        padding: 6px;
        border-radius: 5px;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    [role="navigation"] > [aria-label]:hover:after {
        opacity: 1;
    }
}

/* images and gifs are contained within the tweet, fully visible */
a [data-testid="tweetPhoto"] > div {
    background-size: contain;
    object-fit: contain;
}
a [data-testid="tweetPhoto"] {
    margin: 0 !important;
}

/* debug assist */
html:after {
    _content: "debug";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 610px;
    height: 100vh;
    background: rgba(127, 0, 127, 0.5);
    pointer-events: none;
}
}