TelegramPWA/src/components/middle/MessageList.scss

@import '../../styles/mixins';

.MessageList {
  flex: 1;
  width: 100%;
  margin-bottom: .5rem;

  overflow-anchor: none;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto;
  @include overflow-y-overlay();

  .mask-image-enabled & {
    mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);
  }

  @media (pointer: coarse) {
    user-select: none;
    touch-callout: none;

    &.select-mode-active {
      user-select: auto;
      touch-callout: default;
    }
  }

  &.no-avatars .Message > .Avatar {
    display: none;
  }

  .messages-container {
    width: 100%;
    max-width: var(--messages-container-width);
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: 1rem 1rem 0 1.125rem;

    .force-messages-scroll & {
      margin-top: 100vh !important;
    }

    @media (max-width: 600px) {
      width: 100vw;
      padding: 2.75rem 0.5rem 0;
      // Patch for an issue on Android when rotating device
      margin: 0;
    }
  }

  &.no-composer {
    margin-bottom: 0;

    .last-in-list {
      margin-bottom: 1rem;
    }
  }

  &.select-mode-active, &.type-pinned {
    margin-bottom: 0;

    .last-in-list {
      margin-bottom: 5.625rem;

      @media (max-width: 600px) {
        margin-bottom: 4.25rem;
      }

      &.ActionMessage {
        padding-bottom: 0.125rem;
      }
    }
  }

  .Message,
  .ActionMessage {
    position: relative;

    opacity: 1;
    transform: scale(1);
    transition: opacity .2s ease, transform .2s ease;

    &:not(.open) {
      transform: scale(0.8);
      opacity: 0;
    }

    // Restore stacking context
    // https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
    &.open.shown {
      transform: none;
    }

    &::before {
      content: "";
      position: absolute;
      top: -0.1875rem;
      bottom: -0.1875rem;
      left: -50vw;
      right: -50vw;
      background: black;
      z-index: -1;

      opacity: 0;
      transition: opacity var(--select-transition);

      body.animation-level-0 & {
        transition: none !important;
      }
    }

    &:not(.last-in-group) {
      &::before {
        bottom: -0.1875rem;
      }
    }

    &:not(.first-in-group) {
      &::before {
        top: -0.1875rem;
      }
    }

    &.focused::before {
      // @optimization
      transition: none !important;
    }

    &.focused,
    &.is-forwarding,
    &.is-selected,
    &.has-menu-open {
      &::before {
        opacity: 0.1;
      }
    }
  }

  > .empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sticky-date,
  .local-action-message,
  .ActionMessage,
  .empty {
    text-align: center;

    > span {
      display: inline-block;
      background: var(--pattern-color);
      color: white;
      font-size: calc(var(--message-text-size, 1rem) - .0625rem);
      font-weight: 500;
      line-height: 1.75;
      padding: 0 .5rem;
      border-radius: 2rem;
      word-break: break-word;

      body.is-ios &,
      body.is-macos & {
        font-size: calc(var(--message-text-size, 1rem) - .125rem);
      }

      .emoji-small {
        vertical-align: text-bottom;
        width: calc(1.25 * var(--message-text-size, 1rem));
        height: calc(1.25 * var(--message-text-size, 1rem));
        background-size: calc(1.25 * var(--message-text-size, 1rem));
      }
    }

    &.rich {
      > span {
        max-width: 80%;
        text-align: left;
      }

      a {
        &, &:visited {
          color: var(--color-links-darker) !important;
        }

        &:hover, &:active {
          color: var(--color-links-darker-hover) !important;
        }
      }
    }
  }

  .sticky-date {
    margin-top: 1rem;
    margin-bottom: 1rem;
    z-index: var(--z-sticky-date);
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease;

    body:not(.is-scrolling-messages) &.stuck {
      opacity: 0;

      span {
        pointer-events: none;
      }
    }

    body.animation-level-0 & {
      transition: none;
    }

    &.interactive {
      cursor: pointer;
    }

    span {
      pointer-events: auto;
    }
  }

  &.scrolled:not(.is-animating) .sticky-date {
    position: sticky;
    top: 0.625rem;
  }

  &.is-animating {
    overflow: hidden;
  }

  &.is-animating .message-select-control {
    display: none !important;
  }

  .has-header-tools & .sticky-date {
    top: 3.75rem;
  }

  .local-action-message,
  .ActionMessage {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .ActionMessage {
    .action-link {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .sticky-date + .ActionMessage {
    margin-top: -0.5rem;
  }

  @media (min-width: 1276px) {
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);

    .messages-container {
      width: calc(100% - var(--right-column-width));
    }

    body.animation-level-0 & {
      transition: none;
    }

    #Main.right-column-open & {
      transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
    }

    body:not(.animating-right-column) #Main.right-column-open &.select-mode-active,
    #Main.right-column-open &:not(.select-mode-active),
    body.animating-right-column &:not(.select-mode-active) {
      width: calc(100% - var(--right-column-width));

      .messages-container {
        width: 100%;
      }
    }
  }

  @media (max-width: 600px) {
    transition: transform var(--layer-transition);

    body.enable-symbol-menu-transforms & {
      transform: translate3d(0, 0, 0);
    }

    body.is-symbol-menu-open & {
      transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
    }
  }
}