[Summary view] [Print] [Text view]

   1  /**
   2   * Comments Wrapper
   3   */
   4  .comments-area {
   5  
   6      > * {
   7          margin-top: var(--global--spacing-vertical);
   8          margin-bottom: var(--global--spacing-vertical);
   9  
  10          &:first-child {
  11              margin-top: 0;
  12          }
  13  
  14          &:last-child {
  15              margin-bottom: 0;
  16          }
  17      }
  18  
  19      &.show-avatars {
  20  
  21          .avatar {
  22              border-radius: 50%;
  23              position: absolute;
  24              top: 10px;
  25          }
  26  
  27          .fn {
  28              display: inline-block;
  29              padding-left: 85px;
  30          }
  31  
  32          .comment-metadata {
  33              padding: 8px 0 9px 85px;
  34          }
  35  
  36      }
  37  }
  38  
  39  /**
  40   * Comment Title
  41   */
  42  
  43  .comments-title,
  44  .comment-reply-title {
  45      font-size: var(--heading--font-size-h2);
  46      letter-spacing: var(--heading--letter-spacing-h2);
  47  }
  48  
  49  .comment-reply-title {
  50      display: flex;
  51      justify-content: space-between;
  52  
  53      small {
  54  
  55          a {
  56              font-family: var(--global--font-secondary);
  57              font-size: var(--global--font-size-xs);
  58              font-style: normal;
  59              font-weight: normal;
  60              letter-spacing: normal;
  61          }
  62      }
  63  }
  64  
  65  /* Nested comment reply title*/
  66  .comment .comment-respond .comment-reply-title {
  67      font-size: var(--global--font-size-lg);
  68  }
  69  
  70  /**
  71   * Comment Lists
  72   */
  73  .comment-list {
  74      padding-left: 0;
  75      list-style: none;
  76  
  77      > li {
  78          margin-top: var(--global--spacing-vertical);
  79          margin-bottom: var(--global--spacing-vertical);
  80      }
  81  
  82  }
  83  
  84  .comment-list .children {
  85      list-style: none;
  86      padding-left: 0;
  87  
  88      > li {
  89          margin-top: var(--global--spacing-vertical);
  90          margin-bottom: var(--global--spacing-vertical);
  91      }
  92  
  93  }
  94  
  95  .comment-list .depth-2,
  96  .comment-list .depth-3 {
  97      @include media(mobile) {
  98          padding-left: calc(4 * var(--global--spacing-horizontal));
  99      }
 100  }
 101  
 102  /**
 103   * Comment Meta
 104   */
 105  .comment-meta {
 106  
 107      .comment-author {
 108          line-height: var(--global--line-height-heading);
 109          margin-bottom: calc(0.25 * var(--global--spacing-unit));
 110  
 111          @include media(mobile) {
 112              margin-bottom: 0;
 113              padding-right: 0;
 114          }
 115  
 116          .fn {
 117              font-family: var(--global--font-secondary);
 118              font-weight: normal;
 119              font-size: var(--global--font-size-lg);
 120              hyphens: auto;
 121              word-wrap: break-word;
 122              word-break: break-word;
 123          }
 124  
 125      }
 126  
 127      .comment-metadata {
 128          color: var(--global--color-primary);
 129          font-size: var(--global--font-size-xs);
 130          padding: 8px 0 9px 0;
 131  
 132          .edit-link {
 133              margin-left: var(--global--spacing-horizontal);
 134          }
 135  
 136      }
 137  
 138      @include media(mobile) {
 139          margin-right: inherit;
 140  
 141          .comment-author {
 142              max-width: inherit;
 143          }
 144      }
 145  }
 146  
 147  .reply {
 148      font-size: var(--global--font-size-sm);
 149      line-height: var(--global--line-height-heading);
 150  }
 151  
 152  .bypostauthor {
 153      display: block;
 154  }
 155  
 156  .says {
 157      display: none;
 158  }
 159  
 160  .pingback .url,
 161  .trackback .url {
 162      font-family: var(--global--font-primary);
 163  }
 164  
 165  // Comment body
 166  .comment-body {
 167      position: relative;
 168      margin-bottom: calc(1.7 * var(--global--spacing-vertical));
 169  
 170      > * {
 171          margin-top: var(--global--spacing-vertical);
 172          margin-bottom: var(--global--spacing-vertical);
 173      }
 174  
 175      .reply {
 176          margin: 0;
 177      }
 178  }
 179  
 180  .comment-content {
 181      word-wrap: break-word;
 182  }
 183  
 184  // Pingbacks & Trackbacks
 185  .pingback .comment-body,
 186  .trackback .comment-body {
 187      margin-top: var(--global--spacing-vertical);
 188      margin-bottom: var(--global--spacing-vertical);
 189  }
 190  
 191  .comment-respond {
 192      margin-top: var(--global--spacing-vertical);
 193  }
 194  
 195  .comment-respond > * {
 196      margin-top: var(--global--spacing-unit);
 197      margin-bottom: var(--global--spacing-unit);
 198  
 199      &:first-child {
 200          margin-top: 0;
 201      }
 202  
 203      &:last-child {
 204          margin-bottom: 0;
 205  
 206          &.comment-form {
 207              margin-bottom: var(--global--spacing-vertical);
 208          }
 209      }
 210  }
 211  
 212  .comment-author {
 213      padding-top: 3px;
 214  
 215      .url {
 216          color: currentColor;
 217      }
 218  }
 219  
 220  .comment-form {
 221      display: flex;
 222      flex-wrap: wrap;
 223  
 224      > * {
 225          flex-basis: 100%;
 226      }
 227  
 228      .comment-notes {
 229          font-size: var(--global--font-size-sm);
 230      }
 231  
 232      .comment-form-url,
 233      .comment-form-comment {
 234          width: 100%;
 235      }
 236  
 237      .comment-form-author,
 238      .comment-form-email {
 239          flex-basis: 0;
 240          flex-grow: 1;
 241  
 242          @include media(mobile-only) {
 243              flex-basis: 100%;
 244          }
 245      }
 246  
 247      .comment-form-cookies-consent > label,
 248      .comment-notes {
 249          font-size: var(--global--font-size-xs);
 250          font-weight: normal;
 251      }
 252  }
 253  
 254  .comment-form > p {
 255      margin-bottom: var(--global--spacing-unit);
 256  
 257      &:first-of-type {
 258          margin-top: 0;
 259      }
 260  
 261      &:last-of-type {
 262          margin-bottom: 0;
 263      }
 264  
 265      label,
 266      input[type="email"],
 267      input[type="text"],
 268      input[type="url"],
 269      textarea {
 270          display: block;
 271          font-size: var(--global--font-size-sm);
 272          margin-bottom: calc(.5 * var(--global--spacing-unit));
 273          width: 100%;
 274          font-weight: var(--form--label-weight);
 275      }
 276  
 277      &.comment-form-cookies-consent {
 278          display: flex;
 279      }
 280  
 281      @include media(mobile) {
 282  
 283          &.comment-form-author {
 284              margin-right: calc(1.5 * var(--global--spacing-horizontal));
 285          }
 286  
 287          &.comment-notes,
 288          &.logged-in-as {
 289              display: block;
 290          }
 291      }
 292  }