Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save FiXato/3de505b04efefd49a1e3568b70545234 to your computer and use it in GitHub Desktop.
Save FiXato/3de505b04efefd49a1e3568b70545234 to your computer and use it in GitHub Desktop.
CSS user style to add a red border around media (images, audio, video and animated 'gifv') that lacks a description. Based on code by Paul: https://linernotes.club/@balrogboogie
/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
related discussions: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]),
.media-gallery__gifv video:not([title])
{
border: 1px dashed rgba(255, 0, 0, 0.5);
box-sizing: border-box;
}
/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
related discussion: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]),
.media-gallery__gifv video:not([title])
{
border: 2px solid red;
box-sizing: border-box;
}
@lukaprincic
Copy link

hi all,
I'm currently using this in the custom css on my instance:

.media-gallery__item-thumbnail img:not([alt]), 
.media-gallery__item-thumbnail img[alt|=""], 
.media-gallery__item-thumbnail img[alt^=" "],
.media-gallery__preview img:not([alt]),
.media-gallery__preview img[alt|=""],
.media-gallery__preview img[alt^=" "],
.audio-player__canvas:not([title]), 
.audio-player__canvas[title|=""], 
.audio-player__canvas[title^=" "], 
.video-player video:not([title]), 
.video-player video[title|=""], 
.video-player video[title^=" "],
.media-gallery__gifv video:not([title]), 
.media-gallery__gifv video[title|=""],
.media-gallery__gifv video[title^=" "] 
{
    border: 8px dashed red;
    box-sizing: border-box;
}

just to note @quokka79 's code above will not work correctly because there is a comma before the { and it seems this makes it invalid css (by mastodon?, not sure)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment