app/assets/stylesheets/components/comments.scss
/* COMMENTS WITHIN ACCORDIONS */
#home_comments_area,
#user_comments_area,
.comments_area {
.box {
.asset {
border-top: 1px solid $track-border-bottom;
border-bottom: 1px solid $track-border-bottom;
&:first-child {
border-top: 0;
}
}
}
}
/* RECENT COMMENTS PAGE */
.comments_columns {
.columns_header {
@media #{$mobile} {
padding-left: 0;
}
}
h2 {
padding-left: 16px;
color: $accent;
margin-bottom: 16px;
margin-top: 0px;
line-height: 1;
}
.comments_area {
margin-bottom: 0;
}
#left {
@media #{$one-column} {
margin-bottom: $baseline * 2;
}
}
}
/* ADDING COMMENTS */
.comment_track {
position: relative;
clear: both;
margin-top: 0;
margin-right: 10px;
margin-left: 10px;
.comment_asset {
div.submit_wrapper {
position: relative;
top: -18px;
display: flex;
flex-direction: row;
clear: both;
justify-content: flex-end;
margin-left: 110px;
@media #{$mobile} {
display: block;
.ajax_waiting {
margin-right: 0;
float: right;
border-width: 0;
&.ajax_fail,
&.ajax_success {
margin-bottom: 12px;
border-width: 1px;
}
}
}
@media #{$two-column-narrow} {
display: block;
.ajax_waiting {
margin-right: 0;
float: right;
border-width: 0;
&.ajax_fail,
&.ajax_success {
margin-bottom: 12px;
border-width: 1px;
}
}
}
}
}
}
/* SHARED BY TRACK AND TRACK_CONTENT */
.comment_asset {
.comment_form.private_banner_visible {
form textarea {
border-radius: 6px 6px 0 0;
}
}
.comment_form {
overflow: hidden;
form {
> .comment_as {
font-size: 12px;
line-height: 20px;
overflow: auto;
color: $comment-as-text;
font-family: $medium-sans-font;
padding-left: 10px;
span.comment_as_guest {
text-transform: capitalize;
color: $comment-as-guest-text;
}
span.comment_as_user {
color: $comment-as-user-text;
}
a {
color: $comment-as-user-text;
}
img {
float: left;
width: 27px;
height: 27px;
margin-right: 10px;
}
}
textarea {
font-family: $sans-font;
display: block;
box-sizing: border-box;
width: 100%;
margin-bottom: 15px;
padding: $baseline / 4;
margin-top: 8px;
resize: none;
color: $comment-form-text;
border: 1px solid $comment-form-border;
border-radius: 6px;
background-color: $comment-form-background;
@media #{$one-column} {
font-size: 16px;
}
&:focus {
border: 1px solid $comment-form-border-focus;
}
}
.private_check_box {
font-size: 11px;
float: left;
clear: both;
position: relative;
top: 1px;
label {
user-select: none;
text-transform: unset;
font-size: 14px;
color: $comment-make-private-text;
margin-bottom: 2px !important;
}
}
span.private {
position: relative;
top: -15px;
display: block;
height: auto;
line-height: 17px;
margin-top: 0;
border-radius: 0 0 6px 6px;
&.hidden {
display: none;
}
}
input.comment_submit {
margin-bottom: 0;
float: right;
clear: right;
@include default_button();
background-color: $comment-submit-background;
color: $comment-submit-text;
&:hover {
background-color: $comment-submit-background-hover;
}
&:active {
background-color: $comment-submit-background-active;
}
}
}
}
}
.comment {
position: relative;
background-color: $comment-background;
&:last-child {
border-bottom: 0;
border-radius: 0 0 6px 6px;
}
.comment_user {
position: absolute;
z-index: 2;
top: 6px;
left: 6px;
img {
float: left;
width: 32px;
height: 32px;
border-radius: 2px;
}
}
.comment_right {
@include samo-shadow-and-radius();
position: relative;
margin: 0px 20px 16px 20px;
padding: 16px 24px 10px 28px;
border-radius: 0px 0px 6px 6px;
background-color: $comment-right-background;
box-shadow: none;
.comment_user_text {
font-size: 11px;
font-family: $medium-sans-font;
color: $comment-user-text;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
span {
color: $comment-ip-text;
}
}
.comment_body {
overflow: hidden;
i {
float: left;
margin-right: 8px;
}
p {
line-height: 18px;
margin: 16px 0 0 0;
margin-top: 13px;
color: $comment-body-text;
}
div.private_message {
font-size: 9px;
font-weight: bold;
line-height: 15px;
position: relative;
top: 29px;
width: 96px;
height: 14px;
text-align: center;
text-transform: uppercase;
color: $private-message-flag-text;
border-radius: 2px;
background-color: $private-message-flag-background;
text-indent: 0;
}
@media only screen and (max-width: 375px) {
.private_message {
margin-left: auto;
}
.private_message + .comment_controls {
float: none;
margin-top: 40px;
text-align: right;
}
}
@media #{$two-column-narrow} {
.private_message {
margin-left: auto;
}
.private_message + .comment_controls {
float: none;
margin-top: 40px;
text-align: right;
}
}
.comment_controls {
font-size: 12px;
font-weight: normal;
float: right;
margin-top: 15px;
text-transform: capitalize;
margin-bottom: 1px;
a:first-child {
font-weight: bold;
margin-right: 22px;
color: $comment-spam-text
}
a:last-child {
font-weight: bold;
color: $comment-delete-text;
}
}
h1,
h2,
h3 {
font-size: 16px;
font-weight: bold;
margin-top: 32px;
margin-bottom: 12px;
}
}
}
}