tweb-i2p/src/scss/partials/_chatPinned.scss

.pinned-message {
  &-border {
    position: relative;
    height: 35px;
    width: 2px;
    padding: 1.5px 0;
    //padding: 0 0 6px 6px;
    //overflow: hidden;

    &-wrapper-1 {
      height: 32px;
      width: 2px;
      border-radius: 1px;
      background: $color-blue;
    }

    &-mask {
      mask-image: linear-gradient(to bottom, transparent 0, black 6px, black 38px, transparent 44px);
    }

    &-wrapper {
      color: $color-blue;
      background: #50a2e988;
      position: relative;
      will-change: transform;
      transition: transform 0.25s ease-in-out;
    }

    &-bars {
      stroke: currentColor;
      stroke-width: 2px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &-mark {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      background: currentColor;
      border-radius: 1px;
      will-change: transform;
      transition: transform 0.25s ease-in-out;
    }
  }
}

.pinned-message, .reply {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  margin-right: 1rem;
  max-height: 35px;
  position: relative;
  user-select: none;
  /* padding: .25rem; */

  &.is-media {
    .emoji:first-child {
      margin-right: .25rem;
    }
  }
  
  &-content {
    margin-left: 8px;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    pointer-events: none;
    position: relative;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  &-title {
    color: $color-blue;
  }
  
  &-title, &-subtitle {
    font-size: 14px;
    //line-height: 18px;
    //line-height: 1;
    //line-height: 15px;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    // @include respond-to(handhelds) {
    // 	line-height: 13px;
    // }
  }
  
  &-subtitle {
    color: #111;
  }

  &-media {
    height: 2rem;
    width: 2rem;
    border-radius: .5rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    /* > img, > video {

    } */

    // sticker
    /* > img {
      object-fit: contain !important;
      max-width: 100%;
      max-height: 100%;
    } */
    > img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  i {
    font-style: normal;
    //color: $color-blue;
    color: #707579;

    /* &.document-title {
      color: #707579;
    } */
  }

  img.emoji {
    height: 1rem;
    width: 1rem;
    vertical-align: top;
  }

  /* span.emoji {
    font-size: 1rem;
    vertical-align: unset;
  } */
}

.reply {
  &.is-media {
    .reply-content {
      padding-left: 2.5rem;
    }
  }

  html.no-touch &:hover {
    background-color: var(--color-gray-hover);
  }

  &-border {
    height: 2rem;
    border-radius: 1px;
    min-width: 2px;
    background: $color-blue;
  }
}

.pinned-container {
  flex: 0 0 auto;
  overflow: visible;

  &.is-floating {
    position: absolute !important;
    top: 100%;
    width: 100% !important;
    background: #fff !important;
    left: 0;
    max-height: 100% !important;
    height: 52px;

    .pinned-container-close {
      position: absolute;
      font-size: 1.4rem;
      right: 9px;
      display: flex;
    }

    .pinned-container-wrapper {
      padding: 0 1rem;
      height: 100%;
    }
  }

  @include respond-to(handhelds) {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);

    &:before {
      width: 100%;
      content: " ";
      height: 52px;
      left: 0;
      top: 0;
      position: absolute;
      /* box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .15); */
      box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, .15);
    }
  }

  &-content {
    width: 100%;
    overflow: hidden;
  }

  &-close, .pinned-audio-ico {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    z-index: 1;
    flex: 0 0 auto;
  }

  &-close {
    display: none;
  }

  &-wrapper {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    align-items: center;
    padding: .25rem;
    border-radius: 4px;

    html.no-touch &:hover {
      background-color: var(--color-gray-hover);
    }
  }
}

.pinned-message {
  display: none;
  width: auto;

  &-content {
    overflow: visible !important; // * fix blinking in Safari iOS, transform overflow
  }

  &-media-container {
    width: 2rem;
    height: 2rem;
    position: absolute;
    transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
  }

  /* &-media {
    transform: none !important;

    &.is-hiding {
      &.backwards {
        
      }
    }
  } */
  
  // * fix blink in safari, can't add translateX from nowhere...
  &-title, &-subtitle {
    transform: translateX(0);
  }

  &.is-media {
    .pinned-message-title, .pinned-message-subtitle {
      transform: translateX(2.5rem);
      width: calc(100% - 2.5rem);
      //overflow: hidden !important;
    }
  }

  &:not(.is-media) &-media-container {
    transform: scale(0);
    //opacity: 0;
  }

  &:not(.is-floating) {
    width: 15.5rem;

    .pinned-message-close {
      display: flex;
      margin-right: .75rem;
    }
  }

  &.is-floating .pinned-message-subtitle {
    max-width: 280px;
  }

  &-content {
    > .pinned-message-title, > .pinned-message-subtitle {
      position: relative;
      height: 50%;
      overflow: visible;
      transition: transform var(--pm-transition);
    }
  }

  &-subtitle {
    .animated-super-row {
      font-size: 14px;
      line-height: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .animated-counter {
    transition: transform var(--pm-transition), opacity var(--pm-transition);

    &:before {
      content: "#";
    }

    &.is-last {
      &:not(.backwards) {
        transform: scale(0.68);
        opacity: 0;
      }
      
      /* .animated-super-row {
        transition: none !important;
      } */
    }
  }

  .animated-super-row {
    --translateY: 16px;
  }
  
  .pinned-message-media {
    --translateY: 32px;
  }

  /* .animated-super-row.is-hiding {
    &.from-top {
      transform: translateY(-16px);
    }
  
    &.from-bottom {
      transform: translateY(16px);
    }
  }
  
  .pinned-message-media.is-hiding {
    &.from-top {
      transform: translateY(-32px);
    }
  
    &.from-bottom {
      transform: translateY(32px);
    }
  } */
 

  &.hide ~ .tgico-pinlist, &:not(.is-many) ~ .tgico-pinlist {
    display: none; 
  }

  &.is-many {
    .pinned-message-close {
      display: none;
    }
    
    &:not(.is-floating) {
      .pinned-message-pinlist {
        display: none;
      }
    }
  
    &.is-floating {
      .pinned-message-close {
        display: none;
      }
    }
  }

  &:not(.is-many) {
    .pinned-message-pinlist {
      display: none;
    }
  }
}

.pinned-audio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  //width: 210px;

  &:not(.is-floating) {
    padding-right: 1.75rem;
    max-width: 210px;
    position: relative;
  }

  &.is-floating .pinned-audio-ico {
    margin-left: -.25rem;
  }

  &-ico {
    color: #50a2e9;
    margin-right: .375rem;

    &:before {
      content: $tgico-largeplay;
    }

    &.flip-icon:before {
      content: $tgico-largepause;
    }
  }

  &-title {
    font-weight: 500;
    width: 100%;
    max-width: 100%;
  }

  &-subtitle {
    color: #707579;
  }

  &-title, &-subtitle {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    max-width: 240px;
  }
}