[Summary view] [Print] [Text view]

   1  .comment-content a {
   2      word-wrap: break-word;
   3  }
   4  
   5  .bypostauthor {
   6      display: block;
   7  }
   8  
   9  .comments-area {
  10      -webkit-hyphens: auto;
  11      -moz-hyphens: auto;
  12      -ms-hyphens: auto;
  13      hyphens: auto;
  14      margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
  15      word-wrap: break-word;
  16      @include postContentMaxWidth();
  17  
  18      @include media(tablet) {
  19          margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
  20      }
  21  
  22      & > * {
  23          margin-top: calc(2 * #{$size__spacing-unit});
  24          margin-bottom: calc(2 * #{$size__spacing-unit});
  25  
  26          @include media(tablet) {
  27              margin-top: calc(3 * #{$size__spacing-unit});
  28              margin-bottom: calc(3 * #{$size__spacing-unit});
  29          }
  30      }
  31  
  32      /* Add extra margin when the comments section is located immediately after the
  33       * post itself (this happens on pages).
  34       */
  35      .entry + & {
  36          margin-top: calc(3 * #{$size__spacing-unit});
  37      }
  38  
  39      .comments-title-wrap {
  40  
  41          @include media(tablet) {
  42              align-items: baseline;
  43              display: flex;
  44              justify-content: space-between;
  45          }
  46  
  47          .comments-title {
  48              @include post-section-dash;
  49              margin: 0;
  50  
  51              @include media(tablet) {
  52                  flex: 1 0 calc(3 * (100vw / 12));
  53              }
  54          }
  55  
  56          .discussion-meta {
  57              @include media(tablet) {
  58                  flex: 0 0 calc(2 * (100vw / 12));
  59                  margin-left: #{$size__spacing-unit};
  60              }
  61          }
  62      }
  63  }
  64  
  65  #comment {
  66      max-width: 100%;
  67      box-sizing: border-box;
  68  }
  69  
  70  #respond {
  71      position: relative;
  72  
  73      .comment-user-avatar {
  74          margin: $size__spacing-unit 0 -#{$size__spacing-unit};
  75      }
  76  
  77      .comment .comment-form {
  78          padding-left: 0;
  79      }
  80  
  81      > small {
  82          display: block;
  83          font-size: $font__size_base;
  84          position: absolute;
  85          left: calc(#{$size__spacing-unit} + 100%);
  86          top: calc(-3.5 * #{$size__spacing-unit});
  87          width: calc(100vw / 12 );
  88      }
  89  }
  90  
  91  #comments {
  92  
  93      > .comments-title:last-child {
  94          display: none;
  95      }
  96  }
  97  
  98  .comment-form-flex {
  99      display: flex;
 100      flex-direction: column;
 101  
 102      .comments-title {
 103          display: none;
 104          margin: 0;
 105          order: 1;
 106      }
 107  
 108      #respond {
 109          order: 2;
 110  
 111          + .comments-title {
 112              display: block;
 113          }
 114      }
 115  }
 116  
 117  .comment-form-wrapper,
 118  .comment-form-wrapper .comments-title {
 119      display: block;
 120  }
 121  
 122  .comment-list {
 123      list-style: none;
 124      padding: 0;
 125  
 126      .children {
 127          margin: 0;
 128          padding: 0 0 0 $size__spacing-unit;
 129      }
 130  
 131      > .comment:first-child {
 132          margin-top: 0;
 133      }
 134  
 135      .pingback,
 136      .trackback {
 137  
 138          .comment-body {
 139              color: $color__text-light;
 140              @include font-family( $font__heading );
 141              font-size: $font__size-xs;
 142              font-weight: 500;
 143              margin-top: $size__spacing-unit;
 144              margin-bottom: $size__spacing-unit;
 145  
 146              a:not(.comment-edit-link) {
 147                  font-weight: bold;
 148                  font-size: $font__size-base / (1 * $font__size-ratio);
 149                  line-height: 1.5;
 150                  padding-right: #{0.5 * $size__spacing-unit};
 151                  display: block;
 152              }
 153  
 154              .comment-edit-link {
 155                  color: $color__text-light;
 156                  @include font-family( $font__heading );
 157                  font-weight: 500;
 158              }
 159          }
 160      }
 161  }
 162  
 163  .comment-reply {
 164  
 165      #respond + & {
 166          display: none;
 167      }
 168  
 169      .comment-reply-link {
 170          display: inline-block;
 171      }
 172  }
 173  
 174  .comment {
 175      list-style: none;
 176      position: relative;
 177  
 178      @include media(tablet) {
 179          padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 180  
 181          &.depth-1,
 182          .children {
 183              padding-left: 0;
 184          }
 185  
 186          &.depth-1 {
 187              margin-left: calc(3.25 * #{$size__spacing-unit});
 188          }
 189      }
 190  
 191      .comment-body {
 192          margin: calc(2 * #{$size__spacing-unit}) 0 0;
 193      }
 194  
 195  
 196      .comment-meta {
 197          position: relative;
 198      }
 199  
 200      .comment-author {
 201  
 202          .avatar {
 203              float: left;
 204              margin-right: $size__spacing-unit;
 205              position: relative;
 206  
 207              @include media(tablet) {
 208                  float: inherit;
 209                  margin-right: inherit;
 210                  position: absolute;
 211                  top: 0;
 212                  right: calc(100% + #{$size__spacing-unit});
 213              }
 214          }
 215  
 216          .fn {
 217              position: relative;
 218              display: block;
 219  
 220              a {
 221                  color: inherit;
 222  
 223                  &:hover {
 224                      color: $color__link-hover;
 225                  }
 226              }
 227          }
 228  
 229          .post-author-badge {
 230              border-radius: 100%;
 231              display: block;
 232              height: 18px;
 233              position: absolute;
 234              background: lighten( $color__link, 8% );
 235              right: calc(100% - #{$size__spacing-unit * 2.5});
 236              top: -3px;
 237              width: 18px;
 238  
 239              @include media(tablet) {
 240                  right: calc(100% + #{$size__spacing-unit * .75});
 241              }
 242  
 243              svg {
 244                  width: inherit;
 245                  height: inherit;
 246                  display: block;
 247                  fill: white;
 248                  transform: scale(0.875);
 249              }
 250          }
 251      }
 252  
 253      .comment-metadata {
 254  
 255          > a,
 256          .comment-edit-link {
 257              display: inline;
 258              font-weight: 500;
 259              color: $color__text-light;
 260              vertical-align: baseline;
 261  
 262              time {
 263                  vertical-align: baseline;
 264              }
 265  
 266              &:hover {
 267                  color: $color__link-hover;
 268                  text-decoration: none;
 269              }
 270          }
 271  
 272          > * {
 273              display: inline-block;
 274          }
 275  
 276          .edit-link-sep {
 277              color: $color__text-light;
 278              margin: 0 0.2em;
 279              vertical-align: baseline;
 280          }
 281  
 282          .edit-link {
 283              color: $color__text-light;
 284  
 285              svg {
 286                  transform: scale(0.8);
 287                  vertical-align: baseline;
 288                  margin-right: 0.1em;
 289              }
 290          }
 291  
 292          .comment-edit-link {
 293              position: relative;
 294              padding-left: $size__spacing-unit;
 295              margin-left: -#{$size__spacing-unit};
 296              z-index: 1;
 297  
 298              &:hover {
 299                  color: $color__link;
 300              }
 301          }
 302      }
 303  
 304      .comment-content {
 305  
 306          margin: $size__spacing-unit 0;
 307  
 308          @include media(desktop) {
 309              padding-right: $size__spacing-unit;
 310          }
 311  
 312          > *:first-child {
 313              margin-top: 0;
 314          }
 315  
 316          > *:last-child {
 317              margin-bottom: 0;
 318          }
 319  
 320          blockquote {
 321              margin-left: 0;
 322          }
 323  
 324          a {
 325              text-decoration: underline;
 326              text-decoration-thickness: 2px;
 327  
 328              &:hover {
 329                  text-decoration: none;
 330              }
 331          }
 332      }
 333  }
 334  
 335  .comment-reply-link,
 336  #cancel-comment-reply-link {
 337      font-weight: 500;
 338  
 339      &:hover {
 340          color: $color__link-hover;
 341      }
 342  }
 343  
 344  .discussion-avatar-list {
 345      @include clearfix;
 346  
 347      margin: 0;
 348      padding: 0;
 349  
 350      li {
 351          position: relative;
 352          list-style: none;
 353          margin: 0 -8px 0 0;
 354          padding: 0;
 355          float: left;
 356      }
 357  
 358      .comment-user-avatar {
 359  
 360          img {
 361              height: calc(1.5 * #{$size__spacing-unit});
 362              width: calc(1.5 * #{$size__spacing-unit});
 363          }
 364      }
 365  }
 366  
 367  .discussion-meta {
 368  
 369      .discussion-meta-info {
 370          margin: 0;
 371  
 372          .svg-icon {
 373              vertical-align: middle;
 374              fill: currentColor;
 375              transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
 376              margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
 377          }
 378      }
 379  
 380  }
 381  
 382  .comment-form {
 383  
 384      .comment-notes,
 385      label {
 386          @include font-family( $font__heading );
 387          font-size: $font__size-xs;
 388          color: $color__text-light;
 389      }
 390  
 391      #wp-comment-cookies-consent {
 392          margin: 0 10px 0 0;
 393      }
 394  
 395      .comment-form-author,
 396      .comment-form-email {
 397          @include media(tablet) {
 398              width: calc(50% - #{$size__spacing-unit / 2});
 399              float: left;
 400          }
 401      }
 402  
 403      .comment-form-email {
 404          @include media(tablet) {
 405              margin-left: $size__spacing-unit;
 406          }
 407      }
 408  
 409      input[name="author"],
 410      input[name="email"],
 411      input[name="url"] {
 412          display: block;
 413          width: 100%;
 414      }
 415  }