Skip to content

No 'ALT' badge yes 'NO ALT' badge by rsholmes

Write a review Install Get Stylus

Details

Authorrsholmes

LicenseNo License

Categoryvmst.io

Created

Updated

Size1.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Remove the ALT badge from images that have alt text and add a NO ALT badge to images that don't. Make NO ALT badge and hide image button semitransparent

Notes

Based on a user style I found somewhere — can't remember where, let me know who I should credit

Source code

/* ==UserStyle==
@name           No 'ALT' badge yes 'NO ALT' badge
@namespace      ?
@version        20241008
@description    Hide Alt badge on mastodon, add No Alt badge, make it and hide button semitransparent
@author         rsholmes
==/UserStyle== */
@-moz-document domain("vmst.io"),
domain("mastodon.social"),
domain("folksocial.org") {
    .media-gallery__alt__label {
        display: none
    }

    a.media-gallery__item-thumbnail:has(img:not([alt])) + .media-gallery__item__badges::before {
        /* Copied from/matching .media-gallery__alt__label ruleset in
        mastodon/app/javascript/styles/mastodon/components.scss */
        align-items: center;
        -webkit-backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
        backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
        background: rgba(0, 0, 0, .65);
        border-radius: 4px;
        color: #fff;
        display: flex;
        font-size: 11px;
        font-weight: 700;
        justify-content: center;
        line-height: 18px;
        padding: 2px 6px;
        pointer-events: none;
        z-index: 1;
        opacity: 0.5;

        content: "NO ALT";
    }
    
    /* Also make the hide image button (or any overlayed button I suppose) translucent */
    button.overlayed, button.media-gallery__actions__pill {
        opacity: 0.5;
    }
    
}

Reviews

No reviews yet.