Advertisement
Guest User

Untitled

a guest
May 16th, 2024
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.04 KB | None | 0 0
  1. .chat-container {
  2.   background-color: #fff;
  3.   display: flex;
  4.   max-width: 480px;
  5.   width: 100%;
  6.   flex-direction: column;
  7.   color: #000;
  8.   font-weight: 500;
  9.   justify-content: center;
  10.   margin: 0 auto;
  11. }
  12. .chat-header {
  13.   background-color: #fff;
  14.   display: flex;
  15.   width: 100%;
  16.   padding-top: 15px;
  17.   flex-direction: column;
  18.   align-items: center;
  19. }
  20. .chat-timestamp {
  21.   display: flex;
  22.   width: 100%;
  23.   max-width: 352px;
  24.   align-items: start;
  25.   gap: 20px;
  26.   font-weight: 600;
  27.   white-space: nowrap;
  28.   text-align: center;
  29.   justify-content: space-between;
  30. }
  31. .text-time {
  32.   display: flex;
  33.   flex-direction: column;
  34.   font-size: 15px;
  35.   letter-spacing: -0.33px;
  36.   padding: 0 20px;
  37. }
  38. .time {
  39.   font-family: SF Pro Text, sans-serif;
  40. }
  41. .clock-icon {
  42.   aspect-ratio: 0.57;
  43.   object-fit: auto;
  44.   object-position: center;
  45.   width: 12px;
  46.   fill: #000;
  47.   margin-top: 28px;
  48. }
  49. .profile-info {
  50.   display: flex;
  51.   flex-direction: column;
  52.   font-size: 17px;
  53.   letter-spacing: -0.41px;
  54.   line-height: 129%;
  55.   padding: 0 20px;
  56. }
  57. .profile-picture {
  58.   aspect-ratio: 4.17;
  59.   object-fit: auto;
  60.   object-position: center;
  61.   width: 68px;
  62.   align-self: end;
  63. }
  64. .profile-name {
  65.   font-family: SF Pro Text, sans-serif;
  66.   margin-top: 29px;
  67. }
  68. .message-section {
  69.   display: flex;
  70.   margin-top: 43px;
  71.   width: 100%;
  72.   max-width: 343px;
  73.   gap: 16px;
  74.   font-size: 13px;
  75.   font-weight: 400;
  76.   line-height: 18px;
  77. }
  78. .avatar {
  79.   aspect-ratio: 1;
  80.   object-fit: auto;
  81.   object-position: center;
  82.   width: 28px;
  83.   border-radius: 50%;
  84.   align-self: start;
  85. }
  86. .message-text {
  87.   font-family: Roboto, sans-serif;
  88.   border-radius: 0 6px 6px 6px;
  89.   background-color: rgba(0, 0, 0, 0.03);
  90.   justify-content: center;
  91.   flex-grow: 1;
  92.   width: fit-content;
  93.   padding: 18px 16px;
  94. }
  95. .reply-section {
  96.   display: flex;
  97.   margin-top: 24px;
  98.   width: 100%;
  99.   max-width: 343px;
  100.   gap: 16px;
  101.   font-size: 13px;
  102.   color: #8e1de8;
  103.   line-height: 18px;
  104. }
  105. .reply-text {
  106.   font-family: Roboto, sans-serif;
  107.   border-radius: 6px 0 6px 6px;
  108.   background-color: rgba(0, 0, 0, 0.03);
  109.   justify-content: center;
  110.   flex-grow: 1;
  111.   width: fit-content;
  112.   padding: 18px 16px;
  113. }
  114. .reply-avatar {
  115.   aspect-ratio: 1;
  116.   object-fit: auto;
  117.   object-position: center;
  118.   width: 28px;
  119.   border-radius: 50%;
  120.   align-self: start;
  121. }
  122. .thank-you-section {
  123.   display: flex;
  124.   margin-top: 24px;
  125.   width: 100%;
  126.   max-width: 343px;
  127.   gap: 16px;
  128.   font-size: 13px;
  129.   color: #d82e57;
  130.   line-height: 138%;
  131. }
  132. .thank-you-avatar {
  133.   aspect-ratio: 1;
  134.   object-fit: auto;
  135.   object-position: center;
  136.   width: 28px;
  137.   border-radius: 50%;
  138.   align-self: start;
  139. }
  140. .thank-you-text {
  141.   font-family: Roboto, sans-serif;
  142.   font-style: italic;
  143.   border-radius: 0 6px 6px 6px;
  144.   background-color: rgba(0, 0, 0, 0.03);
  145.   align-items: start;
  146.   justify-content: center;
  147.   flex-grow: 1;
  148.   width: fit-content;
  149.   padding: 19px 16px;
  150. }
  151. .large-image {
  152.   aspect-ratio: 4.55;
  153.   object-fit: auto;
  154.   object-position: center;
  155.   width: 100%;
  156.   align-self: stretch;
  157.   margin-top: 343px;
  158. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement