lbry-desktop/ui/scss/component/_comments.scss
2020-09-29 17:12:32 -04:00

235 lines
4.4 KiB
SCSS

$thumbnailWidth: 3rem;
$thumbnailWidthSmall: 2rem;
.comments {
list-style-type: none;
font-size: var(--font-small);
margin-top: var(--spacing-l);
}
.comments--replies {
margin-left: var(--spacing-m);
flex: 1;
}
.comment__create {
padding-bottom: var(--spacing-m);
font-size: var(--font-small);
}
.comment__create--reply {
margin-top: var(--spacing-m);
margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
position: relative;
}
.comment {
display: flex;
flex-direction: row;
font-size: var(--font-small);
margin: 0;
&:not(:first-child) {
margin-top: var(--spacing-l);
}
.channel-thumbnail {
@include handleChannelGif($thumbnailWidthSmall);
margin-right: 0;
@media (min-width: $breakpoint-small) {
@include handleChannelGif($thumbnailWidth);
}
}
}
.comment__replies-container {
margin: 0;
}
.comment__replies {
display: flex;
margin-top: var(--spacing-m);
margin-left: calc(#{$thumbnailWidthSmall} + var(--spacing-xs));
@media (min-width: $breakpoint-small) {
margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
}
}
.comment__reply {
margin: 0;
&:not(:first-child) {
margin-top: var(--spacing-m);
}
}
.comment__threadline {
@extend .button--alt;
height: auto;
align-self: stretch;
padding: 2px;
border-radius: 3px;
background-color: var(--color-comment-threadline);
&:hover {
box-shadow: 0 0 0 1px var(--color-comment-threadline-hover);
background-color: var(--color-comment-threadline-hover);
border-color: var(--color-comment-threadline-hover);
}
}
.comment-new__label-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
flex-wrap: wrap;
width: 100%;
@media (min-width: $breakpoint-small) {
fieldset-section {
max-width: 10rem;
}
}
}
.comment-new__label {
white-space: nowrap;
margin-right: var(--spacing-xs);
}
.comment__highlighted {
background: var(--color-comment-highlighted);
box-shadow: 0 0 0 var(--spacing-xs) var(--color-comment-highlighted);
border-radius: 4px;
}
.comment__body_container {
flex: 1;
margin-left: var(--spacing-xs);
@media (min-width: $breakpoint-small) {
margin-left: var(--spacing-m);
}
}
.comment__meta {
display: flex;
justify-content: space-between;
text-overflow: ellipsis;
}
.comment__meta-information {
justify-content: flex-start;
display: flex;
height: 100%;
}
.comment__message {
word-break: break-word;
max-width: 35rem;
p {
& + p {
margin-top: var(--spacing-xxs);
}
}
}
.comment__author {
text-overflow: ellipsis;
padding-right: var(--spacing-xs);
height: 100%;
}
.comment__time {
opacity: 0.3;
white-space: nowrap;
height: 100%;
}
.comment__menu {
align-self: flex-end;
}
.comment__char-count {
align-self: flex-end;
font-size: var(--font-xsmall);
padding-top: var(--spacing-xs);
}
.comment__char-count-mde {
align-self: flex-end;
font-size: var(--font-xsmall);
padding-right: var(--spacing-xs); // Align with SimpleMDE's status bar
padding-bottom: 0;
}
.comment__menu-option {
display: flex;
align-items: center;
padding: var(--spacing-s);
font-size: var(--font-small);
}
.comment__menu-icon--hovering {
stroke: var(--color-comment-menu-hovering);
}
.comment__menu-icon {
stroke: var(--color-comment-menu);
}
.comment__menu-list {
box-shadow: var(--card-box-shadow);
border-radius: var(--card-radius);
padding: var(--spacing-s);
}
.comment__actions {
display: flex;
margin-top: var(--spacing-s);
margin-left: calc(#{$thumbnailWidthSmall} + var(--spacing-xs));
> *:not(:last-child) {
margin-right: var(--spacing-xs);
}
.icon {
margin-right: var(--spacing-xxs);
}
.button__label {
margin-left: 0;
}
@media (min-width: $breakpoint-small) {
margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
}
}
.comment__action {
@extend .button--uri-indicator;
height: auto;
font-size: var(--font-xsmall);
}
.comment__action--nested {
@extend .comment__action;
}
.comment__action--nested,
.comment__create--nested-reply {
margin-top: var(--spacing-s);
margin-left: calc((#{$thumbnailWidthSmall} + var(--spacing-xs)) * 2 + var(--spacing-m) + 4px);
@media (min-width: $breakpoint-small) {
margin-left: calc((#{$thumbnailWidth} + var(--spacing-m)) * 2 + var(--spacing-m) + 4px);
}
}
.comment__more-below {
margin-top: var(--spacing-l);
}