// Copyright 2022 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only .TextAttachment { max-height: 100%; max-width: 100%; display: flex; justify-content: center; align-items: center; &__story { align-items: center; display: flex; flex-direction: column; justify-content: center; overflow: hidden; user-select: none; height: 1280px; max-height: 1280px; max-width: 720px; min-height: 1280px; min-width: 720px; width: 720px; } &__text { border-radius: 36px; padding: 28px; margin-left: 56px; margin-right: 56px; &--with-bg { margin-left: 36px; margin-right: 36px; } &__container { overflow: hidden; user-select: none; } &__textarea { background: inherit; border: none; padding: 0; resize: none; text-align: center; width: 100%; &:disabled { color: inherit; cursor: inherit; } &:focus { border: none; outline: none; } } } &__preview-container { margin-left: 56px; margin-right: 56px; margin-top: 36px; position: relative; } &__preview { align-items: center; background: $color-black-alpha-40; border-radius: 28px; display: flex; flex-direction: row; height: 112px; justify-content: center; padding: 16px; &__no-image { margin-right: 16px; } &__location { color: $color-white; font: bold 22px Inter; max-width: 422px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @include dark-theme { color: $color-white; } .TextAttachment__preview-container--large & { color: $color-white-alpha-60; font: 18px Inter; max-width: 352px; } } &__remove { align-items: center; backdrop-filter: blur(26px); background: $color-black-alpha-40; border-radius: 100%; display: flex; height: 48px; justify-content: center; position: absolute; right: -16px; top: -16px; width: 48px; z-index: $z-index-base; button { @include button-reset; height: 24px; width: 24px; @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15); } } .TextAttachment__preview-container--large & { height: 140px; } &__no-image { .TextAttachment__preview-container--large & { height: 105px; width: 105px; } } &__content { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start; margin: 0; max-width: 422px; .TextAttachment__preview-container--large & { max-width: 352px; } } &__title { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: $color-white; display: -webkit-box; font: bold 22px Inter; overflow: hidden; @include dark-theme { color: $color-white; } } &__tooltip { align-items: center; background: $color-black-alpha-90; border-radius: 12px; color: $color-white; display: flex; font-size: 13px; font-weight: 400; justify-content: center; line-height: 18px; max-width: 656px; padding: 12px; position: absolute; text-decoration: none; z-index: $z-index-above-base; &::after { border-color: black transparent transparent transparent; border-style: solid; border-width: 14px; content: ''; left: 50%; margin-left: -14px; position: absolute; top: 100%; } &__title { font-size: 14px; font-weight: 600; } &__url { margin-top: 4px; max-width: 566px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &__arrow { @include color-svg( '../images/icons/v2/chevron-right-24.svg', $color-white ); height: 24px; width: 24px; } } } }