mastodon-stylus.css

/* ***********************************************
  Styles for Mastodon

  Adapted from different sources
  - https://write.as/panais/styles-pour-mastodon-avec-stylus
  - https://mastodon.social/@matuzo/109284559864791077
  - https://mastodon.social/@matuzo/109284628517006156
  - https://gist.github.com/justmarkup/e4f6d52bef604e170815aaf44f459fbc
*********************************************** */
/* Private messages */
:root {
  --h: 280;
  --s: 100%;
  --l: 75%;
}

.status-direct .fa-envelope {
  color: hsla(var(--h), var(--s), var(--l), .6);
}

.status__wrapper-direct {
  background: hsla(var(--h), var(--s), var(--l), .1);
  padding-inline-end: 20px;
}

.status__wrapper-direct::after {
  content: "private";
  background-color: hsla(var(--h), var(--s), var(--l), .3);
  display: inline-block;
  padding: 0rem 0.2rem;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  writing-mode: vertical-rl;
  height: 100%;
  text-align: center;
  border-bottom: 1px solid hsla(var(--h), var(--s), var(--l), .5);
}

/* Account header image */
.account__header__image {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* More space for feed column */
body:not(.layout-single-column) .columns-area {
  display: grid !important;
  grid-template-columns: 3fr 4fr 3fr 3fr 3fr;
}
.drawer,
.column {
  width: 100% !important;
}

/* show when images have alt text */
.media-gallery__item {
  --alt-crop-x: 6ch;
  --alt-crop-y: 2em;
  background: darkgreen;
  color: white;
}

/* only revealed by cutaway when alt is defined */
.media-gallery__item::after {
  content: "alt";
  display: grid;
  inset-block-end: 0;
  inset-inline-start: 0;
  min-height: var(--alt-crop-y);
  min-width: var(--alt-crop-x);
  place-content: center;
  position: absolute;
}

/* cut away to reveal badge */
.media-gallery__item img[alt] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--alt-crop-x) 100%, var(--alt-crop-x) calc(100% - var(--alt-crop-y)), 0 calc(100% - var(--alt-crop-y)));
}

/* Remove the clip path if we can do better with :has() */
.media-gallery__item:has(img) img[alt] {
  clip-path: none;
}

/* Apply better alt-text badge over top of image */
.media-gallery__item:has(img)::after {
  --alt-crop-x: initial;
  --alt-crop-y: initial;
  background: darkgreen;
  border: thin solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  inset-block-end: 0.5em;
  inset-inline-start: 0.5em;
  padding: 0.25rem 0.5rem;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* Change badge when no alt is defined */
.media-gallery__item:has(img:not([alt]))::after {
  background: maroon;
  content: "no alt";
}