userstyles/mastodon/mastodon4.user.css

/* ==UserStyle==
@name           xenua's mastodon 4 frontend tweaks
@namespace      git.xenua.me/xenua
@version        1.1.0
@description    makes the mastodon *advanced* webinterface more compact and pleasant to look at
@author         xenua
@license        CNPLv7+
@homepageURL    https://git.xenua.me/xenua/userstyles/
@supportURL     https://chaos.social/@julialuna
@updateURL      https://git.xenua.me/xenua/userstyles/raw/branch/main/mastodon/mastodon4.user.css
==/UserStyle== */
@-moz-document domain("chaos.social") {

    /* narrower, flexibly sized columns */
    @media screen and (min-width: 1025px) {

        .layout-multiple-columns .column,
        .layout-multiple-columns .drawer {
            flex: 1 1 auto;
            min-width: 300px;
            max-width: 400px;
        }
    }

    /* fix up content warnings and filters */
    .content-warning {
        border-width: 0px 5px 0px 5px;
        border-radius: 4px;
        border-color: #9baec8;
        border-style: solid;

        &:after,
        &:before {
            content: unset;
        }

        p {
            margin-top: 1.5em;
            margin-bottom: 0px;
        }

        button.link-button {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;

            &:hover {
                text-decoration: none;
            }

            span {
                position: absolute;
                top: 8px;
                left: 0;
                text-indent: 13px;
                color: #9baec8;
                visibility: hidden;
                height: 20px;
                width: 100%;
                overflow: hidden;
                text-align: left;

                &:before {
                    content: "Show post with CN:";
                    display: block;
                    visibility: visible;
                }
            }
        }

        &:has(+ .status__content, notification-group__embedded-status__content) {
            button.link-button span {
                &:before {
                    content: "Hide post with CN:";
                    display: block;
                    visibility: visible;
                }
            }
        }

        &:has(+ .notification-group__embedded-status__content) {
            button.link-button span {
                &:before {
                    content: "Hide post with CN:";
                    display: block;
                    visibility: visible;
                }
            }
        }
    }

    .content-warning--filter {
        border-color: #ff4253;

        button.link-button span {
            &:before {
                content: "Show filtered post:";
                display: block;
                visibility: visible;
            }
        }

        &:has(+ .status__content, notification-group__embedded-status__content) {
            button.link-button span {
                &:before {
                    content: "Hide filtered post:";
                    display: block;
                    visibility: visible;
                }
            }
        }

        &:has(+ .notification-group__embedded-status__content) {
            button.link-button span {
                &:before {
                    content: "Hide filtered post:";
                    display: block;
                    visibility: visible;
                }
            }
        }
    }

    /* much more compact general spacing */
    .status__prepend {
        padding: 8px 8px 0;
    }

    .status {
        padding: 8px 0;

        .poll {
            padding: 0 8px;
            margin-top: 6px;
        }

        .media-gallery {
            margin-top: 6px;
        }

        .hashtag-bar {
            padding: 0 8px;
            margin-top: 6px;

            a {
                padding: 4px;
            }
        }
    }

    .status__info {
        padding: 0 12px 8px;
    }

    .status__content {
        padding: 0;
    }

    .status__content__text {
        padding: 0 8px;
    }

    .reply-indicator__content p,
    .status__content p {
        line-height: 21px;
        margin-bottom: 12px;
    }

    .status__content__text blockquote {
        padding-inline-start: 8px;
    }

    .status__content__read-more-button {
        padding: 0 8px;
    }

    .status-card {
        margin: 8px 8px 0;
    }

    .status-card,
    .status-card__actions>div {
        border-radius: 4px;
    }

    .status-card__title {
        font-size: 16px;
        line-height: 18px;
    }

    .status-card__content {
        padding: 8px 12px;
    }

    .status-card__image {
        flex: 0 0 auto;
    }

    .status-card__image,
    .status-card__image-image,
    .status-card__image-preview {
        border-start-start-radius: 4px;
    }

    .status-card.expanded .status-card__image,
    .status-card.expanded .status-card__image-image,
    .status-card.expanded .status-card__image-preview {
        border-start-end-radius: 4px;
    }

    .status__action-bar {
        margin-top: 12px;
        padding: 0 12px 0;
    }

    .layout-multiple-columns .compose-form {
        gap: 12px;
        padding: 8px;

        textarea {
            padding: 8px;
        }

        .compose-form__footer {
            padding: 0px 8px 8px;
        }

        .compose-form__highlightable {
            border-radius: 8px;
        }
    }

    .notification-ungrouped {
        padding: 8px 0;

        .status__action-bar {
            margin-inline-start: 0;
            width: calc(100% - 24px);
        }

        .status__content {
            margin-inline-start: 0;
            width: 100%;
        }

        .media-gallery,
        .content-warning {
            margin-inline-start: 0;
            width: 100%;
        }
    }

    .notification-ungrouped__header {
        margin-bottom: 6px;
    }

    .notification-group {
        padding: 8px;
    }

    .notification-group__main {
        margin-left: -48px;
    }

    .notification-group__avatar-group {
        margin-left: 48px;
    }

    .notification-group__main__header__label {
        padding: 0 8px;
    }

    .scrollable:has(> .item-list > .account-timeline__header) {
        margin-top: -50px;
    }

    .account__header__bar {
        padding: 0 12px;
    }

    .column-back-button {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(1px);
    }

    .account__header__image {
        height: 165px;
    }

    .media-gallery__actions {
        inset-inline-end: 4px;
        top: 4px;
    }

    .media-gallery__item__badges {
        bottom: -1px;
        inset-inline-end: -1px;
    }

    .column>.scrollable {
        border: none;
    }

    .column-header,
    .notification__filter-bar,
    .column-back-button {
        border: none;
        border-bottom: 1px solid var(--background-border-color);
    }

    .column-back-button {
        border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    }

    .status--in-thread {

        .content-warning,
        .status__content,
        .status__action-bar,
        .media-gallery,
        .status-card {
            margin-inline-start: 16px;
            width: calc(100% - 16px);
        }

        .status__action-bar {
            margin-top: 8px;
            padding: 0;
            padding-left: 12px;
            width: calc(100% - 44px);
        }

        .status-card {
            width: calc(100% - 20px);
        }

        .status__content__text {
            padding-left: 4px;
        }
    }

    .detailed-status {
        padding: 8px 0;

        .media-gallery {
            margin-top: 8px;
        }
    }

    .detailed-status__display-name {
        margin-bottom: 8px;
        padding: 0 12px;
    }

    .detailed-status__meta {
        margin-top: 12px;
    }

    .detailed-status__meta__line {
        padding: 8px;
    }

    .detailed-status__action-bar {
        padding: 6px 0;
    }

    .status__line {
        inset-inline-start: 12px;
    }

    /* enlarge emoji on hover */
    .emoji-mart-emoji:hover>* {
        transform: scale(2);
    }

    .emojione:hover {
        transform: scale(1.5);
        overflow: visible;
    }

    /* make the toot button say toot again */
    .compose-form__submit>button::before {
        content: "Toot!";
        font-size: 15px;
    }

    .compose-form__actions>.compose-form__submit>button {
        font-size: 0;
    }

    /* rainbow toot button on hover because you're about to send something incredible */
    .compose-form__submit>button:hover,
    /* rainbow boost button */
    .icon-button.active svg.icon-retweet {
        animation: 4s linear 0s infinite rainbowfade;
    }

    @keyframes rainbowfade {
        from {
            filter: hue-rotate(0deg) saturate(1) brightness(1.15);
        }

        to {
            filter: hue-rotate(360deg) saturate(1) brightness(1.15);
        }
    }

    /* hide the "posts on mastodon aren't end to end encrypted" warning */
    .follow_requests-unlocked_explanation {
        display: none;
    }

    /* colorful status visibility icons */
    .status__visibility-icon .icon-globe,
    .detailed-status__meta .icon-globe {
        color: #1976d2;
    }

    .status__visibility-icon .icon-unlock,
    .detailed-status__meta .icon-unlock {
        color: #43aa48;
    }

    .status__visibility-icon .icon-lock,
    .detailed-status__meta .icon-lock {
        color: #ffa000;
    }

    .status__visibility-icon .icon-at,
    .detailed-status__meta .icon-at {
        color: #d32f2f;
    }

    /* lighten the columns to be able to distinguish them from the background */
    @supports (color: hsl(from white h s l)) {
        .columns-area>*>* {
            background: hsl(from var(--background-color) h calc(s + 4) calc(l + 4));
        }

        .column-back-button {
            background: rgba(0, 0, 0, 0.5);
        }
    }
}