penpot/frontend/src/app/main/ui/comments.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.grayed-text {
  color: var(--comment-subtitle-color);
}

.location {
  color: var(--comment-subtitle-color);
  display: flex;
  align-items: center;
  gap: $s-8;
}

.location-icon {
  display: flex;
}

.location-text {
  @include textEllipsis;
}

.author {
  @include bodySmallTypography;
  display: flex;
  align-items: center;
  gap: $s-8;
}

.author-identity {
  flex-grow: 1;
}

.author-fullname {
  @include textEllipsis;
  color: var(--comment-title-color);
}

.author-timeago {
  @include textEllipsis;
  color: var(--comment-subtitle-color);
}

.avatar {
  position: relative;
  height: $s-24;
  width: $s-24;
  border-radius: $br-circle;
}

.avatar-lg {
  height: $s-32;
  width: $s-32;
}

.avatar-read {
  border: $s-2 solid var(--color-background-tertiary);
}

.avatar-unread {
  border: $s-2 solid var(--color-accent-primary);
}

.avatar-solved {
  border: $s-2 solid var(--color-background-tertiary);
}

.avatar-image {
  border-radius: $br-circle;
}

.avatar-mask {
  border-radius: $br-circle;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.avatar-darken {
  background: rgba(0, 0, 0, 0.5);
}

.cover {
  @include bodySmallTypography;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: $s-8;
  padding: $s-20;
  border-bottom: $s-1 solid var(--color-background-quaternary);
}

.item {
  @include bodySmallTypography;
  color: var(--color-foreground-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: pre-wrap;
}

.replies {
  @include bodySmallTypography;
  display: flex;
  gap: $s-8;
}

.replies-total {
  color: var(--color-foreground-secondary);
}
.replies-unread {
  color: var(--color-accent-primary);
}

.floating-preview-wrapper {
  z-index: $z-index-1;
  position: absolute;
  user-select: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(calc(-1 * $s-16), calc(-1 * $s-16));
}

.floating-preview-bubble {
  z-index: initial;
}

.floating-preview-displacement {
  margin-left: calc(-1 * ($s-12 + $s-2));
  margin-top: calc(-1 * ($s-8 + $s-2));
}

.grabbing {
  cursor: grabbing;
}

.floating-thread-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: $s-12;
  width: $s-284;
  padding: $s-8 $s-12 $s-8 $s-12;
  pointer-events: auto;
  border-radius: $br-8;
  border: $s-2 solid var(--modal-border-color);
  background-color: var(--comment-modal-background-color);
  max-height: var(--comment-height);
  --translate-x: 0%;
  --translate-y: 0%;
  transform: translate(var(--translate-x), var(--translate-y));
  &.left {
    --translate-x: -100%;
  }
  &.top {
    --translate-y: -100%;
  }
}

.floating-thread-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $s-32;
}

.floating-thread-header-left {
  @include bodySmallTypography;
  color: var(--color-foreground-primary);
}

.floating-thread-header-right {
  display: flex;
  align-items: center;
}

.floating-thread-main {
  display: flex;
  flex-direction: column;
  gap: $s-16;
  overflow-y: auto;
  padding-bottom: $s-16;
}

.floating-thread-item-wrapper {
  position: relative;
}

.floating-thread-item {
  display: flex;
  flex-direction: column;
  gap: $s-8;
  @include bodySmallTypography;
}

.checkbox-wrapper {
  @include flexCenter;
  width: $s-16;
  height: $s-24;
  margin-right: $s-8;
}

.checkbox {
  @extend .checkbox-icon;
}

.dropdown-menu {
  @extend .dropdown-wrapper;
  position: absolute;
  width: fit-content;
  max-width: $s-200;
  right: $s-32;
  top: 0;
  left: unset;
}

.dropdown-menu-option {
  @extend .dropdown-element-base;
}

.form {
  display: flex;
  flex-direction: column;
  gap: $s-8;
  max-height: calc(var(--comment-height) - $s-132);

  textarea {
    @extend .input-element;
    @include bodySmallTypography;
    line-height: 1.45;
    height: 100%;
    width: 100%;
    max-width: $s-260;
    padding: $s-8;
    margin-top: $s-4;
    color: var(--input-foreground-color-active);
    resize: vertical;
    &:focus {
      border: $s-1 solid var(--input-border-color-active);
      outline: none;
    }
  }
}

.form-buttons-wrapper {
  display: grid;
  grid-template-columns: 1fr auto auto;
  justify-content: flex-end;
  gap: $s-8;
}

.open-mentions-button {
  cursor: pointer;
  stroke: none;
  fill: var(--color-foreground-secondary);

  &.is-toggled {
    fill: var(--color-accent-primary);
  }
}

.comments-mentions-choice {
  background: var(--color-background-tertiary);
  border-radius: $s-8;
  border: none;
  display: flex;
  flex-direction: column;
  left: calc(-1 * $s-2);
  margin-top: $s-8;
  overflow: hidden;
  padding: $s-2;
  position: absolute;
  top: 100%;
  width: calc(100% + $s-4);
}

.comments-mentions-entry {
  cursor: pointer;
  display: grid;
  grid-template-areas:
    "avatar name"
    "avatar email";
  grid-template-columns: $s-32 1fr;
  column-gap: $s-8;
  margin: $s-4 $s-8;
  padding: 0 $s-4;
  border-radius: $br-8;
  border: $s-1 solid transparent;

  &:hover {
    background: var(--color-background-quaternary);
  }

  .comments-mentions-avatar {
    grid-area: avatar;
    border-radius: 50%;
  }

  .comments-mentions-name {
    grid-area: name;
    font-size: $fs-12;
    color: var(--color-foreground-primary);
  }

  .comments-mentions-email {
    grid-area: email;
    font-size: $fs-12;
    color: var(--color-foreground-secondary);
  }

  &.is-selected {
    border: 1px solid var(--color-accent-primary-muted);
    background: var(--color-background-quaternary);
  }
}

.comment-input {
  @include bodySmallTypography;
  white-space: pre-line;
  background: var(--input-background-color);
  border-radius: $br-8;
  border: $s-1 solid var(--input-border-color);
  color: var(--input-foreground-color);
  height: $s-36;
  margin-bottom: $s-8;
  max-width: $s-260;
  overflow-y: auto;
  padding: $s-8;
  resize: vertical;
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;

  &:focus {
    border: $s-1 solid var(--input-border-color-active);
    outline: none;
  }

  [data-type="mention"] {
    color: var(--color-accent-primary);
  }

  [data-type="text"] {
    color: var(--color-foreground-primary);
  }

  &::before {
    content: var(--placeholder);
  }
}

.comment-mention {
  color: var(--color-accent-primary);
}

.comments-mentions-empty {
  font-size: $fs-12;
  color: var(--color-foreground-secondary);
  padding: $s-6 $s-8;
}