Userstyle: Mastodon - Thin Image CW

README.md

Userstyle: Mastodon - Thin Image CW**

Put this in a userstyles manager like Stylus or the like and tell it what your instance address is and stop having gigantic blurred image previews which fill up your timeline.

Install

You'll need a userstyle manager like Stylus installed in your browser, and: Install.

Mastodon-image-cw-thin.user.css

/* ==UserStyle==
@name           Mastodon - Thin Image CW
@description    Make the Sensitive Content warning on images a lot smaller to take up less space on the timeline.
@namespace      shadenexus.com
@version        1.1.3
@homepageURL    https://gist.github.com/GwyndolynMarchant/feeb96da3effd053f73168c799802c43
@author         Gwyndolyn Marchant <gwyn@shadenexus.com> (https://gist.github.com/GwyndolynMarchant)
==/UserStyle== */

@-moz-document domain("slime.global"), domain("toomanycooks.social") {
    .media-gallery {
        height: auto !important;
    }
    
    /*n-siblings code based on: https://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ */
    
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(1),
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(2),
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(2) ~ .media-gallery__item {
        height: 5em !important;
    }

    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(3),
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(3) ~ .media-gallery__item,
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(4),
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(4) ~ .media-gallery__item {
        height: 2.5em !important;
    }
    
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(1),
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(2),
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(2) ~ .media-gallery__item {
        height: 274px !important;
    }
    
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(3),
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(3) ~ .media-gallery__item,
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(4),
    .media-gallery > .spoiler-button--minified ~ .media-gallery__item:nth-child(2):nth-last-child(4) ~ .media-gallery__item {
        height: 137px !important;
    }
    
    /* Specific fixes for 3-item galleries */
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(3),
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(3) ~ .media-gallery__item {
        inset: 0px 0px 0px 0px !important;
        margin: 3px 4px 0px 0px;
        width: calc(50% - 4px) !important;
    }
    
    .media-gallery > .spoiler-button ~ .media-gallery__item:nth-child(2):nth-last-child(3) ~ .media-gallery__item:nth-child(4) {
        width: calc(100% - 4px) !important;
    }
}