/* ==UserStyle==
@name           mastodon 4 ui tweaks
@namespace      mastodon4
@version        1.0.0
@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") {
    /* 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;
    }
    .media-gallery {
        margin-top: 12px !important;
    }
    .status__action-bar {
        margin-top: 8px;
        padding: 0 20px;
    }
    .conversation .status__action-bar {
        padding: 0;
    }
    .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;
    }
    
    /* it's the toot button and it never will 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;
    }
    
    /* 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 boost button */
    .icon-button.active i.fa-retweet {
        animation: 4s linear 0s infinite rainbowrt;
    }
    
    @keyframes rainbowrt {
        from {
            filter: hue-rotate(0deg) saturate(1) brightness(1.1);
        }
        to {
            filter: hue-rotate(360deg) saturate(1) brightness(1.1);
        }
    }
}