userstyles/mastodon/mastodon4.user.css

/* ==UserStyle==
@name           mastodon 4 ui tweaks
@namespace      mastodon4
@version        1.0.12
@description    fixes the weird spacing on the new mastodon web ui. intended for the advanced user interface, may also work with the single column one.
@author         xenua
@license        CNPLv7+
==/UserStyle== */

@-moz-document domain("chaos.social") {
    /* mastodon 4 ui tweaks that go hard maybe */
    /* optional features at the bottom */
    
    /* compact, space-optimized timeline look */
    .status__prepend {
        padding-top: 8px;
    }
    .status, .detailed-status {
        padding: 8px 0;
    }
    .status > *, .detailed-status > * {
        padding: 0 12px;
    }
    .status > .status__content, .detailed-status > .status__content {
        padding: 0 16px;
    }
    .status > .media-gallery, .detailed-status > .media-gallery {
        padding: 0 !important;
        margin-left: 4px;
        margin-right: 4px;
        width: calc(100% - 8px);
    }
    .status--in-thread > .status__line {
        inset-inline-start: 4px;
        height: 100%;
    }
    .status--in-thread > .status__line::before {
        display: none;
    }
    .status__line--first {
        top: 0;
    }
    .status__line {
        border-inline-start: 2px solid #565e76;
        padding: 0
    }
    .status--in-thread > .status__content {
        padding: 0;
        margin-inline-start: 16px;
    }
    .status--in-thread .video-player {
        margin-inline-start: 8px;
        width: calc(100% - 8px);
    }
    .status--in-thread .hashtag-bar {
        margin-inline-start: 8px;
        width: calc(100% - 32px);
    }
    .status-card {
        margin-inline-start: 0 !important;
        width: calc(100% - 24px) !important;
        margin: 12px 12px 0 12px !important;
        padding: 0;
        border: 2px solid #565e76;
    }
    .status-card__content {
        padding: 8px;
    }
    .status-card__content > .status-card__host {
        margin-bottom: 4px;
        border-bottom: 2px solid #565e76;
    }
    .status-card__content > .status-card__title {
        font-size: 110%;
        line-height: 20px;

    }
    .status-card__content > .status-card__description {
        display: inline-block;
        line-height: 16px;
        max-height: 48px;
        white-space: unset;
    }
    .media-gallery {
        margin-top: 12px !important;
    }
    .status__action-bar {
        margin-top: 8px;
        padding: 0 20px;
    }
    .conversation .status__action-bar {
        padding: 0;
    }
    .status--in-thread .status__action-bar {
        padding: 0 20px;
        margin-inline-start: 0;
        width: calc(100% - 40px);
    }
    .detailed-status > .detailed-status__meta {
        margin-top: 12px;
        padding: 0 16px;
    }
    .status__info {
        margin-bottom: 12px;
    }
    .detailed-status__display-name {
        margin-bottom: 12px;
    }
    .notification > .notification__message {
        padding: 8px 8px 0 8px;
    }
    .detailed-status > .status__prepend {
        margin-bottom: 8px;
        padding-left: 12px;
    }
    .status__prepend {
        padding-left: 12px;
    }

    /* change the pm symbol back to what it should be */
    .fa-at::before {
        content: "";
    }

    /* it's the toot button and that will never ever change */
    .compose-form__publish-button-wrapper > button::before {
        content: "Toot";
        font-size: 15px;
    }
    .compose-form__publish-button-wrapper > button {
        font-size: 0px;
        padding-bottom: 2px;
    }
    
    /* speaking of toot button, it might as well be wide */
    .compose-form__publish-button-wrapper {
        width: 100%;
    }
    
    /* consistent spacing in some ui elements */
    .compose-form, .navigation-bar, .reply-indicator, .search-input, .link-footer {
        padding: 8px;
    }
    
    /* spoiler image button less intrusive */
    .icon-button.overlayed {
        background: rgba(0,0,0,.4) /* default rgba(0,0,0,.6) */
    }
    
    /* rainbow toot button on hover because you're about to send something incredible */
    .compose-form__publish-button-wrapper:hover {
        animation: 4s linear 0s infinite rainbowfade;
    }
    
    /* rainbow boost button */
    .icon-button.active i.fa-retweet {
        animation: 4s linear 0s infinite rainbowfade;
    }
    
    @keyframes rainbowfade {
        from {
            filter: hue-rotate(0deg) saturate(1) brightness(1.1);
        }
        to {
            filter: hue-rotate(360deg) saturate(1) brightness(1.1);
        }
    }

    /*========
    misc stuff
    ========*/

    /* compact dropdown menu */
    /*
    .dropdown-menu__container a {
        padding: 6px 8px;
        font-size: 14px;
    }
    */

    /* get rid of images in fav/boost notifs */
    /*
    .notification .media-gallery {
        display: flex;
        flex-flow: column nowrap;
        aspect-ratio: unset !important;
        margin-top: 4px !important;
        min-height: 0;
    }
    .notification .media-gallery > .spoiler-button {
        display: none;
    }
    .notification .media-gallery > .media-gallery__preview {
        display: none;
    }
    .notification .media-gallery > .media-gallery__item img {
        display: none;
    }
    .notification .media-gallery > .media-gallery__item > .media-gallery__item__badges {
        display: none;
    }
    .notification .media-gallery > .media-gallery__item > .media-gallery__item-thumbnail::after {
        content: "🖼️ Image.";
        padding: 0 16px;
        font-size: 110%;
        line-height: 125%
    }
    */

    /* hide pm notice about e2ee */
    /*
    .follow_requests-unlocked_explanation {
        display: none;
    }
    */
    
    /* hide follow request indicator */
    /*
    .column-link[title="Follow requests"] > .column-link__badge {
        display: none;
    }
    */
    
    /* disable clicking on it as well */
    /*
    .column-link[title="Follow requests"] {
        pointer-events: none;
    }
    */
    
    /*enlarge custom emoji on hover*/
    /*
    .emoji-mart-emoji:hover > * {
        height: 34px !important;
        width: 34px !important;
    }
    .emoji-mart-emoji:hover {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
    }
    :not(.emoji-button) > .emojione:hover {
        width: 34px !important;
        height: 34px !important;
    }
    */

    /* colored visibility icons */
    /*    
    .status__visibility-icon > .fa-globe, .detailed-status__meta > .fa-globe {
        color: #1976d2;
    }
    .status__visibility-icon > .fa-unlock, .detailed-status__meta > .fa-unlock {
        color: #388e3c;
    }
    .status__visibility-icon > .fa-lock, .detailed-status__meta > .fa-lock {
        color: #ffa000;
    }
    .status__visibility-icon > .fa-at, .detailed-status__meta > .fa-at {
        color: #d32f2f;
    }
    */
}