MARL-Mastodon-Archive-Reader-Lite/css/_toot.scss

$meta-visible: 100ch;

.toot {
  @container (width >= #{$meta-visible}) {
    display: grid;
    grid-template-areas:
      "header meta"
      "pretty meta"
      "infos  meta"
      "raw    meta";
    grid-template-columns: 50% 50%;
    grid-template-rows: min-content min-content 1fr min-content;
  }

  background: var(--bg1);

  &:last-child {
    border-bottom: none;
  }

  h3,
  h4 {
    margin: 0;
  }
}

.toot-pretty {
  grid-area: pretty;
  padding: 1rem;

  .fetch-boost-data {
    padding-top: 1rem;
    text-align: right;
  }
}

.toot-summary {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  color: var(--fg-inv0);
  background: repeating-linear-gradient(
    45deg,
    var(--accent-dark),
    var(--accent-dark) 10px,
    var(--accent) 10px,
    var(--accent) 20px
  );
  @include box-shadow-inner();
  border-radius: 0.5rem;
  @media (forced-colors: active) {
    outline: 1px solid Highlight;
  }
}

.toot-content {
  margin: 0;
  padding: 1rem;
  color: var(--fg0);
  line-height: 1.3;
  overflow-wrap: break-word;
  background-color: var(--bg0);
  border-radius: 0.5rem;
  box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);

  @media (forced-colors: active) {
    border: 1px solid CanvasText;
  }

  .toot-type-boost & {
    position: relative;
    overflow-wrap: break-word;
    background: radial-gradient(circle at 100% 100%, var(--bg2), var(--bg0));
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      background: transparent url("../svg/light/type-boost.svg") no-repeat
        calc(100% - 1rem) calc(100% - 0.5rem) / auto 50% scroll;
    }

    a {
      position: relative;
      z-index: 2;
    }
    .toot-content-inner {
      position: relative;
      z-index: 2;
    }
  }

  .toot-visibility-mentioned & {
    background-color: var(--accent-light-bg);
    border: 2px dashed var(--accent-light2);
  }
}

.toot-attachments {
  margin: 1rem 0 0;
  ul,
  li {
    list-style: none;
  }

  .att-description {
    font-size: 0.85em;
    line-height: 1.4;
  }
  .no-alt-text {
    .att-description {
      font-style: italic;
    }
  }
  .desc-source {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    word-break: break-all;
    line-height: 1.2;
    strong {
      color: var(--accent);
      font-weight: normal;
    }
  }
}

.att-img {
  & + .att-img {
    margin-top: 1rem;
  }

  .att-wrapper {
    display: flex;
    align-items: flex-start;
  }

  .att-img-wrapper {
    width: clamp(75px, 7.5dvw, 150px);
    flex: 0 0 clamp(75px, 7.5dvw, 150px);
    padding: 0;
    background: transparent;
    border-radius: 0.5rem;
    box-shadow: none;
    cursor: pointer;
    background: #fff;
    @media (prefers-reduced-motion: no-preference) {
      transition: background-color 0.35s ease-out;
    }
    &:hover,
    &:focus {
      box-shadow: none;
      border-radius: 0.5rem;
    }
    &:hover {
      transition-duration: 0.2s;
      background: var(--accent-light3);
      img {
        filter: grayscale(50%);
        @media (forced-colors: active) {
          filter: none;
        }
      }
    }
  }
  img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    font-size: 0.6em;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
    mix-blend-mode: multiply;
    @media (prefers-reduced-motion: no-preference) {
      transition: filter 0.2s ease-out;
    }
    @media (forced-colors: active) {
      mix-blend-mode: normal;
    }
  }

  .att-description {
    padding: 0 1rem;
  }

  .no-alt-text .att-img-wrapper {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      right: -0.5rem;
      bottom: -0.25rem;
      z-index: 2;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 10rem;
      background: #c00 url("../svg/light/no-alt-text.svg") no-repeat 50% 50% /
        contain scroll;
    }
  }
}

.att-sound {
  padding: 1rem;
  background-color: var(--bg2);
  border-radius: 0.5rem;
  @include box-shadow-inner();

  & + .att-sound {
    margin-top: 1rem;
  }

  audio {
    display: block;
    width: 100%;
    margin: 0 0 1rem 0;
    border-radius: 0.3rem;
  }
}

.att-video {
  & + .att-video {
    margin-top: 1rem;
  }

  video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 75dvh;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  }
  .att-description {
    padding: 1rem;
  }
}

.toot-meta {
  @container (width < #{$meta-visible}) {
    display: none;
  }
  grid-area: meta;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  padding-left: 0;
  dl {
    margin: 0;
    display: grid;
    grid-template-columns: min-content 1fr;
  }
  dt {
    white-space: nowrap;
  }

  & > div {
    flex-basis: calc((100% - 2rem) / 3);
    max-width: calc((100% - 2rem) / 2);
    flex-grow: 1;
    flex-shrink: 0;
    padding: 1rem;
    background-color: var(--bg2);
    border-radius: 0.5rem;
    @include box-shadow-inner();

    @media (forced-colors: active) {
      border: 1px solid CanvasText;
    }
  }
  .toot-links {
    flex-grow: 1;
    a {
      word-break: break-all;
    }
  }

  h4 {
    margin-bottom: 0.5rem;
  }

  li {
    list-style: none;
    padding: 0.35rem 0 0;
    a {
      display: block;
      padding-left: 1.5rem;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: auto 1.2rem;
      word-break: break-all;

      @media (forced-colors: active) {
        padding-left: 0;
      }
    }
  }
  .toot-people li a {
    background-image: url("../svg/dark/person.svg");
  }
  .toot-hashtags li a {
    background-image: url("../svg/dark/hashtag.svg");
  }
  .toot-links li a {
    background-image: url("../svg/dark/link.svg");
  }
}

.toot-infos {
  grid-area: infos;
  margin: 0 1rem;
  padding: 1rem;
  font-size: 0.8em;
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  container-type: inline-size;
  background: var(--bg2);
  border-radius: 0.5rem;
  @include box-shadow-inner();

  & > span {
    margin-bottom: 0.25rem;
  }

  .type,
  .visibility,
  .published,
  .link a {
    padding-left: 1.6em;
    background: transparent none no-repeat 0 0 / 1rem auto scroll;

    @media (forced-colors: active) {
      padding-left: 0;
    }
  }
  .published {
    padding-left: 0;
    &::before {
      content: "-";
      margin: 0 1ch;
    }
  }

  .published,
  .visibility {
    margin-right: 1rem;
  }
  .visibility {
    margin-bottom: 0;
  }

  .link {
    margin-left: auto;
  }

  .type {
    order: 1;
  }
  .author {
    order: 2;
  }
  .published {
    order: 4;
  }
  .visibility {
    order: 5;
  }
  .link {
    order: 3;
  }

  .published {
    flex: 0 0 100%;
    margin-right: 0;
    padding-left: 1.6em;
    background-image: url("../svg/dark/calendar.svg");

    @media (forced-colors: active) {
      padding-left: 0;
    }
    &::before {
      content: none;
    }
    .updated {
      display: block;
    }
  }
}

.toot-type-post .toot-infos .type {
  background-image: url("../svg/dark/type-post.svg");
}
.toot-type-boost .toot-infos .type {
  background-image: url("../svg/dark/type-boost.svg");
}
.toot-visibility-public .toot-infos .visibility {
  background-image: url("../svg/dark/visibility-public.svg");
}
.toot-visibility-unlisted .toot-infos .visibility {
  background-image: url("../svg/dark/visibility-unlisted.svg");
}
.toot-visibility-followers .toot-infos .visibility {
  background-image: url("../svg/dark/visibility-followers.svg");
}
.toot-visibility-mentioned .toot-infos .visibility {
  background-image: url("../svg/dark/visibility-mentioned.svg");
}
.toot-infos .link a {
  padding-left: 0;
  padding-right: 1.6em;
  background-position: 100% 50%;
  background-image: url("../svg/dark/open-in-new.svg");
  @media (forced-colors: active) {
    padding-right: 0;
    background: none;
  }
}

.toot-raw {
  grid-area: raw;
  margin-top: 0.5rem;
  padding: 0 1rem 2rem;
  details {
    border-radius: 0.5rem;
  }
  summary {
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    font-size: 0.8em;
    text-align: right;
    opacity: 0.8;
    user-select: none;
    &:hover,
    &:focus-visible {
      opacity: 1;
      border-radius: 0.5rem;
      background-color: var(--bg2);
    }
  }
  .summary-icon {
    display: flex;
  }

  details[open] {
    background-color: var(--bg2);
    @include box-shadow-inner();

    @media (forced-colors: active) {
      border: 1px solid CanvasText;
    }

    summary {
      opacity: 1;
      background-color: transparent;
      box-shadow: none;
    }
  }

  .details-content {
    padding: 1rem;
    overflow-wrap: break-word;
  }
}

.toots-no-results {
  padding: 4rem 1rem;
  text-align: center;
  background: var(--bg1);
  p {
    margin: 1em 0;
  }
}