.comments-area { margin-top: 75px; margin-bottom: 35px; } .single .comments-area { margin-bottom: 0; } .comments-title { padding-top: 5px; } .comments-area > .button { float: right; } .comments-area .show-hide-comments { display: none; min-width: 110px; padding: 9px 9px; @include rem('font-size',$font__tiny-size); text-transform: uppercase; } .comments-area .show-hide-comments .show, .comments-area .show-hide-comments.active .hide { display: none; } .comments-area .show-hide-comments.active .show { display: inline; } .comment-list { margin: 60px 0 0; padding: 0; list-style: none; // border-bottom: 2px solid $color__border; } .comment-list .children { margin-left: 100px; padding: 0; list-style: none; } .comment-list .children .children .children { margin-left: 0; } .bypostauthor { display: block; } .pingback .comment-body, .comment-author { @include rem('font-size',$font__small-size); font-weight: bold; line-height: 1; text-transform: uppercase; } .comment-list .pingback .comment-body { padding-top: 45px; padding-bottom: 45px; &:before { content:"\f461"; font-family:"Genericons-Neue"; display:inline-block; vertical-align:top; line-height:inherit; font-weight:normal; font-style:normal; speak:none; text-decoration:inherit; text-transform:none; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; margin-right: 5px; } } .comment-list .pingback .comment-body .url { display: block; @include rem('font-size',$font__tiny-size); font-weight: bold; line-height: 2.16666667; text-transform: uppercase; color: $color__text-light; &:hover { color: $color__text; } } .comment-list .pingback .comment-body .edit-link a { display: block; @include rem('font-size',$font__tiny-size); font-weight: bold; text-transform: uppercase; color: $color__text-light; &:hover { color: $color__text; } } .comment-metadata { @include rem('font-size',$font__tiny-size); font-weight: bold; line-height: 2.16666667; text-transform: uppercase; } .comment-metadata a { color: $color__text-light; } .comment-metadata a:hover, .comment-metadata a:focus, .comment-metadata a:active { color: inherit; text-decoration: none; } .comment-metadata a:hover { color: $color__text; } .comment .avatar { float: left; width: 70px; max-width: inherit; height: 70px; margin-right: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .comment-metadata time { margin-right: 5px; } .comment-metadata .reply { margin-left: 5px; } .comment-author-metadata { overflow: hidden; padding-top: 12px; } .comment-content { overflow: hidden; margin-left: 100px; padding-top: 10px; @include rem('font-size',$font__main-size); color: $color__text; } #master .comment-content { h1, h2, h3, h4, h5, h6, > div, p { margin-top: 1em; margin-bottom: 1em; } > hr { @include rem('margin-top',50px); @include rem('margin-bottom',50px); } blockquote { margin: 40px 0 50px 100px; } ul, ol { li { margin-bottom: 0.5em; } li:last-child { margin-bottom: 0; } } a img { vertical-align: top; } > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; } } @media (max-width: 959px) { .comment-content { margin-left: 0; } } .comment-body { padding-top: 45px; } #master .comment-list > li:first-child > .comment-body { // border-top-width: 0; } .comment-list > .comment:not(.parent) > .comment-body { padding-bottom: 45px; // border-top: 2px solid $color__border; } .comment-list .parent > .comment-body .comment-content, .comment-list .children .comment-content { margin-left: 100px; } .comment-list .comment-body { padding-bottom: 27px; // border-top: 2px solid $color__border; } @media screen and (max-width: 959px) { .comment-list .parent > .comment-body .comment-content, .comment-list .children .comment-content { margin-left: 0; } } .comment-content a { word-wrap: break-word; } .comment-respond { margin-top: 62px; margin-bottom: 62px; } .comment .comment-respond { margin-top: 0; margin-left: 100px; } .comment-reply-title { margin-top: 0; display: block; } .comment-form .comment-form-comment { margin-bottom: 17px; } .comment-form .form-submit { margin-bottom: 1em; } .comment-form input, .comment-form textarea { width: 100%; } .comment-form textarea { height: 160px; } .comment-form .form-submit input { width: auto; padding: 16px 46px; } .comment-form label { color: $color__text; } @media screen and (max-width: 959px) { .comments-title { padding-top: 0; } .comments-area .show-hide-comments { display: inline-block; margin-top: 4px; } .comments-area .submit-comment { display: none; } .comment .avatar { display: none; } .comment-author-metadata { padding-top: 0; } .grid__col + .grid__col.comment-form-email { padding-top: 0; } .comment-form p { margin-bottom: 25px; } .comment-form .form-submit input { width: 100%; } } @media screen and (max-width: 640px) { .comments-area { margin-top: 50px; } .comment-reply-title { margin-bottom: 44px; } .comment-reply-link { margin-top: 0; } .comments-title { float: none; padding-bottom: 20px; } .comments-area > .button { float: none; } .comment-respond { margin-top: 49px; } .comment-list { margin-top: 38px; } .comment-list .parent > .comment-body .comment-content, .comment-list .children .comment-content { } .comment-body { } .comment-list .children { margin-left: 0; } .comment-list .children .comment-meta, .comment-list .children .comment-content { padding-left: 0px; } .comment-list .children .comment-reply-link { margin-top: 0; margin-left: 0px; } .comment-list .children .children .comment-meta, .comment-list .children .children .comment-content { padding-left: 0px; } .comment-list .children .children .comment-reply-link { margin-top: 0; margin-left: 0px; } .comment-list .children .children .children .comment-meta, .comment-list .children .children .children .comment-content { padding-left: 0px; } .comment-list .children .children .children .comment-reply-link { margin-top: 0; margin-left: 0px; } .comment .comment-respond { margin-left: 0; } } .comment-awaiting-moderation { display: inline-block; padding-top: 30px; @include rem('font-size',$font__small-size); } .comment-reply-link { display: inline-block; margin-top: 0; padding: 5px 10px; border-radius: $button__radius; color: #fff; @include rem('font-size',$font__tiny-size); font-weight: bold; line-height: 1; background-color: #000000; text-transform: uppercase; margin-top: 25px; } .comment-reply-link:hover { color: #fff; background: #1c2220; } @media (min-width: 960px) { .comment-reply-link { margin-left: 100px; } } @media (max-width: 640px) { .comment-reply-link { margin-top: 0; } } .logged-in-as, .comment-notes { @include rem('font-size',$font__small-size); margin-bottom: 0.7em; } .no-comments { margin-top: 2em; }