[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      .comment-reply-title small {
  91          margin-left: 0.5em;
  92      }
  93  }
  94  
  95  #comments {
  96  
  97      > .comments-title:last-child {
  98          display: none;
  99      }
 100  }
 101  
 102  .comment-form-flex {
 103      display: flex;
 104      flex-direction: column;
 105  
 106      .comments-title {
 107          display: none;
 108          margin: 0;
 109          order: 1;
 110      }
 111  
 112      #respond {
 113          order: 2;
 114  
 115          + .comments-title {
 116              display: block;
 117          }
 118      }
 119  }
 120  
 121  .comment-form-wrapper,
 122  .comment-form-wrapper .comments-title {
 123      display: block;
 124  }
 125  
 126  .comment-list {
 127      list-style: none;
 128      padding: 0;
 129  
 130      .children {
 131          margin: 0;
 132          padding: 0 0 0 $size__spacing-unit;
 133      }
 134  
 135      > .comment:first-child {
 136          margin-top: 0;
 137      }
 138  
 139      .pingback,
 140      .trackback {
 141  
 142          .comment-body {
 143              color: $color__text-light;
 144              @include font-family( $font__heading );
 145              font-size: $font__size-xs;
 146              font-weight: 500;
 147              margin-top: $size__spacing-unit;
 148              margin-bottom: $size__spacing-unit;
 149  
 150              a:not(.comment-edit-link) {
 151                  font-weight: bold;
 152                  font-size: $font__size-base / (1 * $font__size-ratio);
 153                  line-height: 1.5;
 154                  padding-right: #{0.5 * $size__spacing-unit};
 155                  display: block;
 156              }
 157  
 158              .comment-edit-link {
 159                  color: $color__text-light;
 160                  @include font-family( $font__heading );
 161                  font-weight: 500;
 162              }
 163          }
 164      }
 165  }
 166  
 167  .comment-reply {
 168  
 169      #respond + & {
 170          display: none;
 171      }
 172  
 173      .comment-reply-link {
 174          display: inline-block;
 175      }
 176  }
 177  
 178  .comment {
 179      list-style: none;
 180      position: relative;
 181  
 182      @include media(tablet) {
 183          padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 184  
 185          &.depth-1,
 186          .children {
 187              padding-left: 0;
 188          }
 189  
 190          &.depth-1 {
 191              margin-left: calc(3.25 * #{$size__spacing-unit});
 192          }
 193      }
 194  
 195      .comment-body {
 196          margin: calc(2 * #{$size__spacing-unit}) 0 0;
 197      }
 198  
 199  
 200      .comment-meta {
 201          position: relative;
 202      }
 203  
 204      .comment-author {
 205  
 206          .avatar {
 207              float: left;
 208              height: calc(2.25 * #{$size__spacing-unit});
 209              margin-right: $size__spacing-unit;
 210              position: relative;
 211              width: calc(2.25 * #{$size__spacing-unit});
 212  
 213              @include media(tablet) {
 214                  float: inherit;
 215                  margin-right: inherit;
 216                  position: absolute;
 217                  top: 0;
 218                  right: calc(100% + #{$size__spacing-unit});
 219              }
 220          }
 221  
 222          .fn {
 223              position: relative;
 224              display: block;
 225  
 226              a {
 227                  color: inherit;
 228  
 229                  &:hover {
 230                      color: $color__link-hover;
 231                  }
 232              }
 233          }
 234  
 235          .post-author-badge {
 236              border-radius: 100%;
 237              display: block;
 238              height: 18px;
 239              position: absolute;
 240              background: lighten( $color__link, 8% );
 241              right: calc(100% - #{$size__spacing-unit * 2.5});
 242              top: -3px;
 243              width: 18px;
 244  
 245              @include media(tablet) {
 246                  right: calc(100% + #{$size__spacing-unit * .75});
 247              }
 248  
 249              svg {
 250                  width: inherit;
 251                  height: inherit;
 252                  display: block;
 253                  fill: white;
 254                  transform: scale(0.875);
 255              }
 256          }
 257      }
 258  
 259      .comment-metadata {
 260  
 261          > a,
 262          .comment-edit-link {
 263              display: inline;
 264              font-weight: 500;
 265              color: $color__text-light;
 266              vertical-align: baseline;
 267  
 268              time {
 269                  vertical-align: baseline;
 270              }
 271  
 272              &:hover {
 273                  color: $color__link-hover;
 274                  text-decoration: none;
 275              }
 276          }
 277  
 278          > * {
 279              display: inline-block;
 280          }
 281  
 282          .edit-link-sep {
 283              color: $color__text-light;
 284              margin: 0 0.2em;
 285              vertical-align: baseline;
 286          }
 287  
 288          .edit-link {
 289              color: $color__text-light;
 290  
 291              svg {
 292                  transform: scale(0.8);
 293                  vertical-align: baseline;
 294                  margin-right: 0.1em;
 295              }
 296          }
 297  
 298          .comment-edit-link {
 299              position: relative;
 300              padding-left: $size__spacing-unit;
 301              margin-left: -#{$size__spacing-unit};
 302              z-index: 1;
 303  
 304              &:hover {
 305                  color: $color__link;
 306              }
 307          }
 308      }
 309  
 310      .comment-content {
 311  
 312          margin: $size__spacing-unit 0;
 313  
 314          @include media(desktop) {
 315              padding-right: $size__spacing-unit;
 316          }
 317  
 318          > *:first-child {
 319              margin-top: 0;
 320          }
 321  
 322          > *:last-child {
 323              margin-bottom: 0;
 324          }
 325  
 326          blockquote {
 327              margin-left: 0;
 328          }
 329  
 330          a {
 331              text-decoration: underline;
 332              text-decoration-thickness: 2px;
 333  
 334              &:hover {
 335                  text-decoration: none;
 336              }
 337          }
 338      }
 339  }
 340  
 341  .comment-reply-link,
 342  #cancel-comment-reply-link {
 343      font-weight: 500;
 344  
 345      &:hover {
 346          color: $color__link-hover;
 347      }
 348  }
 349  
 350  .discussion-avatar-list {
 351      @include clearfix;
 352  
 353      margin: 0;
 354      padding: 0;
 355  
 356      li {
 357          position: relative;
 358          list-style: none;
 359          margin: 0 -8px 0 0;
 360          padding: 0;
 361          float: left;
 362      }
 363  
 364      .comment-user-avatar {
 365  
 366          img {
 367              height: calc(1.5 * #{$size__spacing-unit});
 368              width: calc(1.5 * #{$size__spacing-unit});
 369          }
 370      }
 371  }
 372  
 373  .discussion-meta {
 374  
 375      .discussion-meta-info {
 376          margin: 0;
 377  
 378          .svg-icon {
 379              vertical-align: middle;
 380              fill: currentColor;
 381              transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
 382              margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
 383          }
 384      }
 385  
 386  }
 387  
 388  .comment-form {
 389  
 390      .comment-notes,
 391      label {
 392          @include font-family( $font__heading );
 393          font-size: $font__size-xs;
 394          color: $color__text-light;
 395      }
 396  
 397      #wp-comment-cookies-consent {
 398          margin: 0 10px 0 0;
 399      }
 400  
 401      .comment-form-author,
 402      .comment-form-email {
 403          @include media(tablet) {
 404              width: calc(50% - #{$size__spacing-unit / 2});
 405              float: left;
 406          }
 407      }
 408  
 409      .comment-form-email {
 410          @include media(tablet) {
 411              margin-left: $size__spacing-unit;
 412          }
 413      }
 414  
 415      input[name="author"],
 416      input[name="email"],
 417      input[name="url"] {
 418          display: block;
 419          width: 100%;
 420      }
 421  }