Skip to content

Instantly share code, notes, and snippets.

@claus
Last active February 19, 2023 22:18
Show Gist options
  • Save claus/704eedb06bd64678943bc6cfd1db6af6 to your computer and use it in GitHub Desktop.
Save claus/704eedb06bd64678943bc6cfd1db6af6 to your computer and use it in GitHub Desktop.
Mastodon: Add red border to images without description
/* Fix image gallery styles */
/* Add red border-bottom to media without description */
/* Left image */
.media-gallery__item[style^="inset: auto 2px auto auto"] {
margin-right: 2px;
}
/* Top left image */
.media-gallery__item[style^="inset: auto 2px 2px auto"] {
margin-bottom: 2px;
margin-right: 2px;
}
/* Bottom left image */
.media-gallery__item[style^="inset: 2px 2px auto auto"] {
margin-top: 2px;
margin-right: 2px;
}
/* Right image */
.media-gallery__item[style^="inset: auto auto auto 2px"] {
margin-left: 2px;
}
/* Top right image */
.media-gallery__item[style^="inset: auto auto 2px 2px"] {
margin-bottom: 2px;
margin-left: 2px;
}
/* Bottom right image */
.media-gallery__item[style^="inset: 2px auto auto 2px"] {
margin-top: 2px;
margin-left: 2px;
}
/* Reset for full height items (2-up, 3-up left) */
.media-gallery__item[style$="width: 50%; height: 100%;"] {
inset: 0 !important;
width: calc(50% - 2px) !important;
}
/* Reset for half height items (3-up right, 4-up) */
.media-gallery__item[style$="width: 50%; height: 50%;"] {
inset: 0 !important;
width: calc(50% - 2px) !important;
height: calc(50% - 2px) !important;
}
/* Add a border if no description is present */
.media-gallery__gifv:has(> video:not([title]), > video[title=""]),
.media-gallery__item-thumbnail:has(> img:not([alt]), > img[alt=""]),
.video-player:has(> video:not([title]), > video[title=""]),
.audio-player:has(> .audio-player__canvas:not([title]), > .audio-player__canvas[title=""]) {
border-bottom: 8px solid red;
box-sizing: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment