frontend/marko/page/story-content/components/comment/style.less

div.comment {
  position: relative;

  div.options {
    width: 100%;
    max-width: 95ch;
  }
}

div.comment.mode-message {
  margin-bottom: 1.5em;
  font-size: 1em;

  .metadata {
    padding-bottom: 0.5em;
  }

  .content {
    outline: 1px solid;
    padding: 0.25em 1ch;

    font-size: 1.25em;
  
    table.header {
      border-bottom: 0.5px solid;
      margin: 0;
      width: 100%;
  
      tbody {
        tr {
          text-align: left;
  
          th {
            width: 12ch;
            padding-right: 1ch;
          }
  
          td {
            width: 100%;
          }
        }
      }
    }
  }

  div.body {
    padding-top: 0.5em;

    p:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }
  }
}

div.comment.mode-chat {
  div.options {
    display: none;
    bottom: -0.25em;

    a {
      background: black;
      opacity: 0.666;
    }
    a:hover {
      opacity: 1;
    }
  }

  div.content {    
    line-height: 2em;
    font-size: 1.125em;

    div.tooltip-content {
      text-indent: 0;
    }

    div.message-text {
      vertical-align: top;
      padding-left: 2ch;
      text-indent: -2ch;

      div.body {
        p:first-of-type {
          display: inline;
        }

        p:last-of-type {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        p {
          line-height: 1.5em;
        }
      }
    }
  }
}

div.comment.mode-article {
  margin-bottom: 1em;
  
  .content {
    font-size: 1.25em;
  }
}

div.comment.mode-chat:hover {
  div.options {
    display: block;
  }
}