lbry-desktop/ui/scss/component/_comments.scss
Sean Yesmunt 2e87b2fd22 odysee
Naomi

comment websockets

increase slow mode time to 5 seconds

fix to prevent duplicate comments

update livestream details

fix channel

pin electron boom

fix rebase

prune unused icons

updating meme

updating meme

update livestream for naomi

fix rebase

DigitalCashNetwork

remove electroboom pin

Slavguns

Joel

So he can edit his claims

add streamTypes param to claimTilesDiscover so following section can search for all types of content

fix typo

update meme

fixes

publish page fixes

pending

fix notifications

fix comments finally

fix claim preview

no mature for simplesite

Revert "no mature for simplesite"

This reverts commit 9f89242d85.

fix livestream preview click

no mature on simple site

try fixing invite page crash

probably needs more changes.
2021-03-26 18:47:28 -04:00

412 lines
7.1 KiB
SCSS

$thumbnailWidth: 1.5rem;
$thumbnailWidthSmall: 1rem;
.comments {
list-style-type: none;
font-size: var(--font-small);
margin-top: var(--spacing-l);
}
.comments--replies {
list-style-type: none;
margin-left: var(--spacing-s);
flex: 1;
}
.comment__sort {
margin: var(--spacing-s) 0;
display: block;
@media (min-width: $breakpoint-small) {
margin-top: 0;
display: inline;
}
}
.comment__create {
padding-bottom: var(--spacing-m);
font-size: var(--font-small);
}
.comment__create--reply {
margin-top: var(--spacing-m);
position: relative;
}
.comment__create--bottom {
padding-bottom: 0;
}
.comment {
width: 100%;
display: flex;
flex-direction: column;
font-size: var(--font-small);
margin: 0;
&:not(:first-child) {
margin-top: var(--spacing-l);
}
.comment__author-thumbnail {
@include handleChannelGif($thumbnailWidthSmall);
margin-right: 0;
@media (min-width: $breakpoint-small) {
@include handleChannelGif($thumbnailWidth);
}
.channel-staked__wrapper {
@media (max-width: $breakpoint-small) {
padding: 0;
left: 0;
bottom: -1rem;
padding: -1rem;
margin-left: 0;
}
}
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
}
}
}
}
.comment__thumbnail-wrapper {
flex: 0;
margin-top: var(--spacing-xxs);
}
.comment__content {
display: flex;
flex-direction: row;
}
.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--top-level {
&:not(:first-child) {
margin-top: var(--spacing-l);
}
}
.comment--livestream {
margin-right: 0;
}
.comment--slimed {
opacity: 0.6;
}
.comment__threadline {
@extend .button--alt;
height: auto;
align-self: stretch;
padding: 1px;
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);
}
@media (min-width: $breakpoint-small) {
padding: 2px;
}
}
.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 5px 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__dead {
display: flex;
align-items: center;
.icon {
margin-left: var(--spacing-s);
}
}
.comment__meta {
display: flex;
justify-content: space-between;
}
.comment__meta-information {
justify-content: flex-start;
display: flex;
height: 100%;
}
.comment__pin {
margin-left: var(--spacing-s);
.icon {
padding-top: 1px;
}
}
.comment__message {
word-break: break-word;
max-width: 35rem;
ul li,
ol li {
list-style-position: inside;
}
p {
& + p {
margin-top: var(--spacing-xxs);
}
}
}
.comment__author {
max-width: 10rem;
text-overflow: ellipsis;
margin-right: var(--spacing-xs);
height: 100%;
}
.comment__time {
@extend .button--uri-indicator;
opacity: 0.5;
white-space: nowrap;
height: 100%;
margin-left: var(--spacing-xs);
&:focus {
@include linkFocus;
}
}
.comment__menu {
align-self: flex-end;
line-height: 1;
button {
border-radius: var(--border-radius);
&:focus {
@include linkFocus;
}
}
}
.comment__char-count {
align-self: flex-end;
font-size: var(--font-xsmall);
padding-top: var(--spacing-xxs);
}
.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-xsmall);
.menu__link {
padding: 0;
}
}
.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__menu-title {
@extend .help;
margin-top: 0;
padding-left: var(--spacing-xs);
padding-right: var(--spacing-xl);
padding-bottom: var(--spacing-xs);
font-size: var(--font-small);
border-bottom: 1px solid var(--color-border);
&:not(:last-child) {
margin-bottom: var(--spacing-xs);
}
}
.comment__menu-help {
@extend .help;
margin-top: var(--spacing-xs);
padding-left: calc(18px + var(--spacing-s));
max-width: 15rem;
white-space: pre-line;
}
.comment__actions {
display: flex;
margin-top: var(--spacing-s);
> *:not(:last-of-type) {
margin-right: var(--spacing-m);
}
.button__label {
margin-left: var(--spacing-xs);
}
}
.comment__actions--nested {
@extend .comment__actions;
margin-left: calc((#{$thumbnailWidthSmall} + var(--spacing-xs)));
margin-top: var(--spacing-m);
@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--creator-like {
&:disabled {
opacity: 1;
}
}
.comment__action,
.comment__author {
&:focus {
@include linkFocus;
}
}
.comment__action--active {
.icon {
fill: var(--color-primary-alt);
stroke: var(--color-primary);
}
}
.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);
}
.comment__creator-like {
height: 0.8rem;
width: 0.8rem;
margin-left: 3px;
z-index: 3;
position: absolute;
top: 0.4rem;
left: 0.4rem;
}
.comment__menu-active {
padding: var(--spacing-xs);
padding-bottom: 0;
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-s);
display: flex;
align-items: center;
.channel-thumbnail {
margin-right: var(--spacing-xs);
height: 1.8rem;
width: 1.8rem;
}
}
.comment__menu-channel {
@extend .help;
font-size: var(--font-xsmall);
margin-top: 0;
max-width: 10rem;
white-space: pre-line;
margin-right: var(--spacing-s);
}