danbooru/app/javascript/src/styles/specific/comments.scss

@import "../base/000_vars.scss";

div.comments-for-post {
  div.hidden-comments-notice {
    margin: 1em 0;
  }

  div.list-of-comments {
    article.comment {
      display: flex;
      margin-top: 2em;
      word-wrap: break-word;
      padding: 5px;
      flex: 1;

      &:first-of-type {
        margin-top: 1em;
      }

      &[data-is-sticky="true"] {
        background: var(--comment-sticky-background-color);
      }

      &[data-is-voted="true"] {
        .comment-vote-up-link, .comment-vote-down-link {
          display: none;
        }
      }

      &[data-is-voted="false"] {
        .comment-unvote-link {
          display: none;
        }
      }

      &[data-below-threshold="true"][data-is-sticky="false"] {
        opacity: 0.3;

        &:hover {
          opacity: 1.0;
        }
      }

      div.author {
        flex-basis: 12em;
        margin-right: 1em;

        time {
          font-style: italic;
        }
      }

      div.content {
        flex: 1;

        menu {
          li {
            margin-right: 1em;
          }
        }
      }
    }
  }
}

div#c-comments {
  div#a-index, div#a-show {
    div.header {
      span.info {
        margin-right: 1.5em;
      }

      strong, time {
        margin-right: 0.3em;
      }
    }

    div.post-preview {
      &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
        div.preview {
          position: relative;

          &:before {
            @include animated-icon;
          }
        }
      }

      &[data-has-sound=true] {
        div.preview {
          position: relative;

          &:before {
            @include sound-icon;
          }
        }
      }
    }

    div.post {
      display: flex;
      margin-bottom: 4em;

      div.preview {
        width: 154px;
        height: 154px;
        margin-right: 30px;
        overflow: hidden;
        text-align: center;
      }

      div.comments-for-post {
        flex: 1;
      }
    }
  }
}

form.edit_comment div.input.boolean {
  display: inline-block;

  label {
    font-weight: normal;
    vertical-align: initial;
  }
}

@media screen and (max-width: 660px) {
  div.comments-for-post div.list-of-comments article.comment {
    display: block;
    margin-top: 3em;
    padding: 5px;

    div.author {
      margin: 0 0 1em;

      h4 {
        display: inline;
        margin-right: 0.5em;
      }

      time {
        display: inline;
        color: var(--muted-text-color);
        font-size: 0.8em;
      }
    }
  }

  div#c-comments div#a-index, div#c-comments div#a-show {
    margin: 0 0.5em;

    div.post {
      display: block;
      margin: 4em 0;

      &:first-of-type {
        margin: 1em 0;
      }

      div.preview {
        margin: 1em auto;
        width: auto;
        height: auto;
      }

      div.comments-for-post {
        div.header div.row span.info {
          display: block;
        }
      }
    }
  }

  div.new-comment {
    margin: 1em 0;
  }
}