discourse/plugins/discourse-post-voting/assets/stylesheets/common/post-voting.scss

@use "lib/viewport";

.post-voting-topic {
  .time-gap,
  .topic-post-visited-line,
  .timeline-date-wrapper,
  .timeline-last-read,
  .timeline-ago {
    display: none;
  }

  .time-gap + .topic-post,
  .topic-post-visited + .topic-post {
    .topic-avatar,
    .topic-body {
      border-top: 1px solid var(--primary-low);
    }
  }

  .posts-filtered-notice:empty {
    display: none;
  }

  @include viewport.until(sm) {
    .topic-body .cooked {
      margin-left: calc(48px + var(--space-2));
    }
  }
}

.post-voting-answers-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: var(--space-4);

  @include viewport.until(sm) {
    margin-bottom: var(--space-4);
  }

  @include viewport.from(sm) {
    width: 100%;
  }

  &__count {
    margin: 0;
    font-size: var(--font-0);
  }

  &__sort {
    margin: 0;
    margin-left: auto;

    .rtl & {
      margin-right: auto;
    }
  }

  .--votes,
  .--activity {
    font-size: var(--font-down-1-rem);
  }
}

.post-voting-comments {
  margin-top: var(--space-1);

  &__comment {
    font-size: var(--font-down-1-rem);
    border-top: 1px solid var(--primary-low);
    display: flex;
    align-items: flex-start;
    padding: var(--space-3) 0;
    word-break: break-word;

    &.--deleted {
      background-color: var(--danger-low);
    }

    &:hover:not(.--deleted) .post-voting-comments__comment-actions {
      display: inline-block;
    }
  }

  &__comment-cooked {
    p {
      display: inline;
    }
  }

  &__vote {
    margin-right: var(--space-2);
    display: inline-flex;
    align-items: center;

    .post-voting-button {
      font-size: var(--font-up-1);
      padding: 0;

      .d-icon {
        color: var(--primary-low-mid);
      }

      &.--voted {
        .d-icon {
          color: var(--success);
        }
      }

      &:focus-visible,
      .discourse-no-touch &:hover {
        .d-icon {
          color: var(--primary-high);
        }
      }
    }
  }

  &__vote-count {
    color: var(--primary-high);
    min-width: 3ch;
    text-align: center;

    &.--none {
      color: var(--primary-low-mid);
    }
  }

  &__separator {
    margin: 0 var(--space-1);
  }

  &__username {
    display: inline;
    margin-right: var(--space-1);

    &.--deleted {
      color: var(--primary-med-or-secondary-med);
    }
  }

  &__created {
    color: var(--primary-med-or-secondary-med);
  }

  &__comment-actions {
    display: none;
    margin-left: var(--space-1);
  }

  &__comment-actions-edit-link,
  &__comment-actions-delete-link,
  &__comment-actions-flag-link {
    padding: 0 var(--space-1);
    height: 100%;
  }

  &__comment-actions-delete-link:hover,
  &__comment-actions-flag-link:hover {
    .discourse-no-touch & {
      color: var(--danger) !important;
    }
  }

  &__comment-editor {
    margin: var(--space-2) 0;
    width: 100%;

    textarea {
      width: 100%;
      margin-bottom: 0;
      font-size: var(--font-down-1-rem);
    }
  }

  &__comment-editor-cancel {
    margin-left: var(--space-2);
  }

  &__composer {
    width: 100%;
    position: relative;
  }

  &__composer-textarea {
    width: 100%;
    margin: var(--space-2) 0;
  }

  &__composer-flash {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    width: auto;
    margin: 0;
    transform: translateY(+50%);
    color: var(--primary-medium);
    font-size: var(--font-down-1-rem);

    &.has-error {
      color: var(--danger);
    }
  }

  &__composer-add {
    font-size: var(--font-down-1);
    margin: 0;
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.post-voting-post {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: var(--space-2);

  @include viewport.until(sm) {
    position: absolute;
    left: 0;
    top: var(--space-11);
    width: var(--space-11);
  }

  .post-voting-button {
    padding: var(--space-half) var(--space-1);
    color: var(--primary-low-mid);

    .d-icon {
      color: inherit;
    }

    &.--downvote {
      .d-icon {
        transform: rotate(180deg);
      }
    }

    &:focus-visible,
    .discourse-no-touch &:hover {
      .d-icon {
        color: var(--primary-high);
      }
    }

    &.--voted {
      .d-icon {
        color: var(--success);
      }

      &.--downvote {
        .d-icon {
          color: var(--danger);
        }
      }
    }
  }

  &__toggle-voters {
    font-size: var(--font-down-1);
    padding: var(--space-half) var(--space-2);
    text-align: center;
    color: var(--primary-high);
  }
}

// DMenu
.post-voting-popup-content {
  .fk-d-menu__inner-content {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    width: max-content;
    max-width: 90vw;
  }

  &__wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);

    // &:first-child {
    //   padding-bottom: var(--space-2);
    // }
    &:nth-child(2) {
      border-top: 1px solid var(--primary-low);
      padding-top: var(--space-2);
      margin-top: var(--space-2);
    }
  }

  &__voters {
    .small-user-list-content {
      gap: var(--space-1);
      justify-content: flex-start;
    }
  }

  &__count {
    color: var(--primary-high);
  }

  &__icon {
    &.--upvote {
      .d-icon {
        color: var(--success);
      }
    }

    &.--downvote {
      .d-icon {
        color: var(--danger);
        transform: rotate(180deg);
      }
    }
  }
}