nitter/src/sass/tweet/media.scss

@import "_variables";

.gallery-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  flex-grow: 1;
  max-height: 379.5px;
  max-width: 533px;
  pointer-events: all;

  &.mixed-row {
    .attachment {
      min-width: 0;
      min-height: 0;
      flex: 1 1 0;
      max-height: 379.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #101010;
    }

    .still-image,
    .still-image img,
    .attachment > video,
    .attachment > img {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
    }

    .still-image {
      display: flex;
      align-self: stretch;
    }

    .still-image img {
      flex-basis: auto;
      flex-grow: 0;
      object-fit: cover;
    }

    .attachment > video,
    .attachment > img {
      object-fit: cover;
    }

    .attachment > video {
      object-fit: contain;
    }
  }
}

.attachments {
  margin-top: 0.35em;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 600px;
  border-radius: 7px;
  overflow: hidden;
  flex-flow: column;
  background-color: var(--bg_color);
  align-items: center;
  pointer-events: all;
}

.attachment {
  position: relative;
  line-height: 0;
  overflow: hidden;
  margin: 0 0.25em 0 0;
  flex-grow: 1;
  box-sizing: border-box;
  min-width: 2em;

  &:last-child {
    margin: 0;
    max-height: 530px;
  }
}

.media-gif {
  display: table;
  background-color: unset;
  width: unset;
  max-height: unset;
}

.media-gif video,
.media-gif img {
  width: 100%;
  height: 100%;
  max-height: 530px;
  background-color: #101010;
}

.still-image {
  max-height: 379.5px;
  max-width: 533px;

  img {
    object-fit: cover;
    max-width: 100%;
    max-height: 379.5px;
    flex-basis: 300px;
    flex-grow: 1;
  }
}

.alt-text {
  margin: 0px;
  padding: 11px 7px;
  box-sizing: border-box;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 2.98em;
  max-height: 25px;
  white-space: pre;
  overflow: hidden;
  border-radius: 10px;
  color: var(--fg_color);
  font-size: 12px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.alt-text:hover {
  padding: 7px;
  width: Min(230px, calc(100% - 10px * 2));
  max-height: calc(100% - 10px);
  line-height: 1.2em;
  white-space: pre-wrap;
  transition-duration: 0.4s;
  transition-property: max-height;
}

.overlay-circle {
  border-radius: 50%;
  background-color: var(--dark_grey);
  width: 40px;
  height: 40px;
  align-items: center;
  display: flex;
  border-width: 5px;
  border-color: var(--play_button);
  border-style: solid;
}

.overlay-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 17px;
  border-color: transparent transparent transparent var(--play_button);
  margin-left: 14px;
}

.media-body {
  flex: 1;
  padding: 0;
  white-space: pre-wrap;
}