[Summary view] [Print] [Text view]

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