lbry-desktop/ui/scss/component/_comments.scss

448 lines
7.8 KiB
SCSS
Raw Normal View History

2020-10-07 21:14:52 +02:00
$thumbnailWidth: 1.5rem;
$thumbnailWidthSmall: 1rem;
2020-08-24 19:35:21 +02:00
.comments {
2020-08-24 19:35:21 +02:00
list-style-type: none;
font-size: var(--font-small);
2020-08-25 21:54:06 +02:00
margin-top: var(--spacing-l);
2020-08-24 19:35:21 +02:00
}
.comments--replies {
list-style-type: none;
2020-10-07 21:14:52 +02:00
margin-left: var(--spacing-s);
2020-08-24 19:35:21 +02:00
flex: 1;
}
.comment__sort {
margin: var(--spacing-s) 0;
2021-04-23 21:59:48 +02:00
margin-right: var(--spacing-s);
display: block;
@media (min-width: $breakpoint-small) {
margin-top: 0;
display: inline;
}
}
2020-08-24 19:35:21 +02:00
.comment__create {
font-size: var(--font-small);
}
.comment__create--reply {
2020-10-07 21:14:52 +02:00
margin-top: var(--spacing-m);
2020-08-24 19:35:21 +02:00
position: relative;
}
2021-04-26 21:19:17 +02:00
.comment__create--bottom {
padding-bottom: 0;
}
2019-06-27 01:59:27 +02:00
.comment {
width: 100%;
2019-12-04 20:23:43 +01:00
display: flex;
flex-direction: column;
2020-08-24 19:35:21 +02:00
font-size: var(--font-small);
2019-12-04 19:07:40 +01:00
margin: 0;
2021-04-23 21:59:48 +02:00
position: relative;
2019-12-04 19:07:40 +01:00
2020-08-24 19:35:21 +02:00
&:not(:first-child) {
margin-top: var(--spacing-l);
2019-05-22 20:59:46 +02:00
}
2020-06-03 17:09:02 +02:00
.comment__author-thumbnail {
2020-08-24 19:35:21 +02:00
@include handleChannelGif($thumbnailWidthSmall);
margin-right: 0;
@media (min-width: $breakpoint-small) {
@include handleChannelGif($thumbnailWidth);
}
.channel-staked__wrapper {
2021-04-23 21:59:48 +02:00
padding: 0;
left: calc(#{$thumbnailWidthSmall} / 4);
bottom: -1rem;
padding: -1rem;
margin-left: 0;
}
2021-04-26 21:19:17 +02:00
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
}
}
2020-06-03 17:09:02 +02:00
}
2019-05-22 20:59:46 +02:00
}
.comment__thumbnail-wrapper {
2020-10-12 21:21:03 +02:00
flex: 0;
margin-top: var(--spacing-xxs);
2020-10-12 21:21:03 +02:00
}
.comment__content {
display: flex;
flex-direction: row;
}
2020-08-24 19:35:21 +02:00
.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));
}
2020-03-20 20:09:45 +01:00
}
.comment--reply {
2020-08-24 19:35:21 +02:00
margin: 0;
2020-04-14 19:43:59 +02:00
2020-08-24 19:35:21 +02:00
&:not(:first-child) {
margin-top: var(--spacing-m);
2020-04-14 19:43:59 +02:00
}
2020-02-05 04:55:00 +01:00
}
2020-10-07 21:14:52 +02:00
.comment--top-level {
&:not(:first-child) {
margin-top: var(--spacing-l);
}
}
.comment--slimed {
opacity: 0.6;
}
2021-04-23 21:59:48 +02:00
.comment__sc-preview {
display: flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--spacing-s);
margin: var(--spacing-s) 0;
}
.comment__edit-input {
margin-top: var(--spacing-xxs);
}
.comment__scpreview-amount {
margin-right: var(--spacing-m);
font-size: var(--font-large);
}
2020-08-24 19:35:21 +02:00
.comment__threadline {
@extend .button--alt;
height: auto;
align-self: stretch;
2020-10-07 21:14:52 +02:00
padding: 1px;
2020-08-24 19:35:21 +02:00
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);
}
2020-10-07 21:14:52 +02:00
@media (min-width: $breakpoint-small) {
padding: 2px;
}
2020-08-24 19:35:21 +02:00
}
.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 {
2020-08-24 19:35:21 +02:00
background: var(--color-comment-highlighted);
box-shadow: 0 0 0 5px var(--color-comment-highlighted);
2020-08-24 19:35:21 +02:00
border-radius: 4px;
2020-02-05 04:55:00 +01:00
}
2021-04-23 21:59:48 +02:00
.comment__body-container {
flex: 1;
2020-08-24 19:35:21 +02:00
margin-left: var(--spacing-xs);
@media (min-width: $breakpoint-small) {
2021-04-23 21:59:48 +02:00
margin-left: var(--spacing-s);
2020-08-24 19:35:21 +02:00
}
2019-10-24 19:24:53 +02:00
}
.comment__dead {
display: flex;
align-items: center;
.icon {
margin-left: var(--spacing-s);
}
}
2019-05-22 20:59:46 +02:00
.comment__meta {
display: flex;
justify-content: space-between;
}
2020-02-10 21:49:43 +01:00
.comment__meta-information {
display: flex;
2021-04-05 20:13:27 +02:00
justify-content: flex-start;
align-items: center;
2020-08-24 19:35:21 +02:00
height: 100%;
2020-02-10 21:49:43 +01:00
}
.comment__pin {
margin-left: var(--spacing-s);
2020-10-20 05:20:38 +02:00
.icon {
padding-top: 1px;
}
}
.comment__message {
word-break: break-word;
2020-08-24 20:44:41 +02:00
max-width: 35rem;
ul li,
ol li {
list-style-position: inside;
}
p {
& + p {
margin-top: var(--spacing-xxs);
}
}
}
.comment__author {
2021-01-29 19:03:06 +01:00
max-width: 10rem;
2019-12-04 19:07:40 +01:00
text-overflow: ellipsis;
margin-right: var(--spacing-xs);
2020-08-24 19:35:21 +02:00
height: 100%;
}
.comment__author--creator {
2021-04-05 20:13:27 +02:00
padding: 0 3px;
background-color: var(--color-primary-alt);
border-radius: var(--border-radius);
2021-04-05 20:13:27 +02:00
&.button--uri-indicator {
color: var(--color-link);
}
}
.comment__time {
@extend .button--uri-indicator;
opacity: 0.5;
2019-12-04 19:07:40 +01:00
white-space: nowrap;
2020-08-24 19:35:21 +02:00
height: 100%;
2021-04-23 21:59:48 +02:00
margin-right: var(--spacing-xs);
&:focus {
@include linkFocus;
}
2019-05-21 23:15:37 +02:00
}
.comment__menu {
align-self: flex-end;
line-height: 1;
button {
border-radius: var(--border-radius);
&:focus {
@include linkFocus;
}
}
}
.comment__char-count {
font-size: var(--font-xsmall);
}
.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;
2020-06-01 19:03:19 +02:00
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);
}
2020-07-23 16:22:57 +02:00
.comment__menu-list {
box-shadow: var(--card-box-shadow);
border-radius: var(--card-radius);
padding: var(--spacing-s);
}
2020-08-24 19:35:21 +02:00
.comment__menu-title {
@extend .help;
margin-top: 0;
2021-02-11 06:40:13 +01:00
padding-left: var(--spacing-xs);
padding-right: var(--spacing-xl);
2021-02-11 06:40:13 +01:00
padding-bottom: var(--spacing-xs);
font-size: var(--font-small);
border-bottom: 1px solid var(--color-border);
2021-04-26 21:19:17 +02:00
2021-06-16 04:27:58 +02:00
&:not(:first-child) {
margin-top: var(--spacing-xs);
padding-top: var(--spacing-xs);
border-top: 1px solid var(--color-border);
}
2021-04-26 21:19:17 +02:00
&: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;
}
2020-08-24 19:35:21 +02:00
.comment__actions {
display: flex;
margin-top: var(--spacing-s);
2020-10-27 17:24:31 +01:00
> *:not(:last-of-type) {
2020-10-01 20:43:44 +02:00
margin-right: var(--spacing-m);
2020-08-24 19:35:21 +02:00
}
.button__label {
2020-10-27 17:24:31 +01:00
margin-left: var(--spacing-xs);
2020-08-24 19:35:21 +02:00
}
}
2020-08-24 19:35:21 +02:00
.comment__actions--nested {
@extend .comment__actions;
2020-09-29 22:42:24 +02:00
margin-left: calc((#{$thumbnailWidthSmall} + var(--spacing-xs)));
margin-top: var(--spacing-m);
2020-09-29 22:42:24 +02:00
@media (min-width: $breakpoint-small) {
margin-left: calc((#{$thumbnailWidth} + var(--spacing-m)));
}
2020-08-24 19:35:21 +02:00
}
.comment__action {
@extend .button--uri-indicator;
height: auto;
font-size: var(--font-xsmall);
}
2020-10-27 17:24:31 +01:00
.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);
}
}
2020-08-24 19:35:21 +02:00
.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);
}
2020-10-27 17:24:31 +01:00
.comment__creator-like {
2020-10-28 03:16:46 +01:00
height: 0.8rem;
width: 0.8rem;
2020-10-27 17:24:31 +01:00
margin-left: 3px;
z-index: 3;
2020-10-28 03:16:46 +01:00
position: absolute;
top: 0.4rem;
left: 0.4rem;
2020-10-27 17:24:31 +01:00
}
.comment__menu-active {
2021-02-11 06:40:13 +01:00
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);
}
2021-04-23 21:59:48 +02:00
.comment__tip-input {
margin: var(--spacing-s) 0;
}
.comment--blocked {
opacity: 0.5;
}