LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity
lbry-desktop/ui/scss/component/_comments.scss

448 lines
7.8 KiB
SCSS
Raw Normal View History

comments v69
2020-10-07 21:14:52 +02:00
$thumbnailWidth: 1.5rem;
improve styling on comment thumbnails on staked indicator placement
2021-02-16 22:59:05 +01:00
$thumbnailWidthSmall: 1rem;
new comments
2020-08-24 19:35:21 +02:00
File downloads and refactoring (#3918) * am I done? * post diff * unused selector cleanup * missed commit * mess with button styles * fix flow Co-authored-by: Jeremy Kauffman <jeremy@lbry.io> Co-authored-by: Sean Yesmunt <sean@lbry.io>
2020-04-01 20:43:50 +02:00
.comments {
new comments
2020-08-24 19:35:21 +02:00
list-style-type: none;
font-size: var(--font-small);
wip with channel prompts on comments
2020-08-25 21:54:06 +02:00
margin-top: var(--spacing-l);
new comments
2020-08-24 19:35:21 +02:00
}
.comments--replies {
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
list-style-type: none;
comments v69
2020-10-07 21:14:52 +02:00
margin-left: var(--spacing-s);
new comments
2020-08-24 19:35:21 +02:00
flex: 1;
}
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
.comment__sort {
margin: var(--spacing-s) 0;
hyperchats
2021-04-23 21:59:48 +02:00
margin-right: var(--spacing-s);
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
display: block;
@media (min-width: $breakpoint-small) {
margin-top: 0;
display: inline;
}
}
new comments
2020-08-24 19:35:21 +02:00
.comment__create {
font-size: var(--font-small);
}
.comment__create--reply {
comments v69
2020-10-07 21:14:52 +02:00
margin-top: var(--spacing-m);
new comments
2020-08-24 19:35:21 +02:00
position: relative;
File downloads and refactoring (#3918) * am I done? * post diff * unused selector cleanup * missed commit * mess with button styles * fix flow Co-authored-by: Jeremy Kauffman <jeremy@lbry.io> Co-authored-by: Sean Yesmunt <sean@lbry.io>
2020-04-01 20:43:50 +02:00
}
unify some styles with master
2021-04-26 21:19:17 +02:00
.comment__create--bottom {
padding-bottom: 0;
}
cleanup
2019-06-27 01:59:27 +02:00
.comment {
use comment component for livestream comments
2021-03-24 03:53:33 +01:00
width: 100%;
fix rebase
2019-12-04 20:23:43 +01:00
display: flex;
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
flex-direction: column;
new comments
2020-08-24 19:35:21 +02:00
font-size: var(--font-small);
clean up styles
2019-12-04 19:07:40 +01:00
margin: 0;
hyperchats
2021-04-23 21:59:48 +02:00
position: relative;
clean up styles
2019-12-04 19:07:40 +01:00
new comments
2020-08-24 19:35:21 +02:00
&:not(:first-child) {
margin-top: var(--spacing-l);
Finalized styling
2019-05-22 20:59:46 +02:00
}
fix channel gif alignment on comments
2020-06-03 17:09:02 +02:00
refactor floatingUri to allow inline players in comments/markdown
2020-10-20 19:10:02 +02:00
.comment__author-thumbnail {
new comments
2020-08-24 19:35:21 +02:00
@include handleChannelGif($thumbnailWidthSmall);
margin-right: 0;
@media (min-width: $breakpoint-small) {
@include handleChannelGif($thumbnailWidth);
}
improve styling on comment thumbnails on staked indicator placement
2021-02-16 22:59:05 +01:00
.channel-staked__wrapper {
hyperchats
2021-04-23 21:59:48 +02:00
padding: 0;
left: calc(#{$thumbnailWidthSmall} / 4);
bottom: -1rem;
padding: -1rem;
margin-left: 0;
improve styling on comment thumbnails on staked indicator placement
2021-02-16 22:59:05 +01:00
}
unify some styles with master
2021-04-26 21:19:17 +02:00
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
}
}
fix channel gif alignment on comments
2020-06-03 17:09:02 +02:00
}
Finalized styling
2019-05-22 20:59:46 +02:00
}
refactor floatingUri to allow inline players in comments/markdown
2020-10-20 19:10:02 +02:00
.comment__thumbnail-wrapper {
fix mobile comments on ios devices
2020-10-12 21:21:03 +02:00
flex: 0;
improve styling on comment thumbnails on staked indicator placement
2021-02-16 22:59:05 +01:00
margin-top: var(--spacing-xxs);
fix mobile comments on ios devices
2020-10-12 21:21:03 +02:00
}
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
.comment__content {
display: flex;
flex-direction: row;
}
new comments
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));
}
merge CommentReply and CommentCreate
2020-03-20 20:09:45 +01:00
}
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
.comment--reply {
new comments
2020-08-24 19:35:21 +02:00
margin: 0;
fix comment reply style
2020-04-14 19:43:59 +02:00
new comments
2020-08-24 19:35:21 +02:00
&:not(:first-child) {
margin-top: var(--spacing-m);
fix comment reply style
2020-04-14 19:43:59 +02:00
}
Added the ability to reply to comments
2020-02-05 04:55:00 +01:00
}
comments v69
2020-10-07 21:14:52 +02:00
.comment--top-level {
&:not(:first-child) {
margin-top: var(--spacing-l);
}
}
hide comments that were slimed to death TM
2020-10-08 21:55:16 +02:00
.comment--slimed {
opacity: 0.6;
}
hyperchats
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);
}
new comments
2020-08-24 19:35:21 +02:00
.comment__threadline {
@extend .button--alt;
height: auto;
align-self: stretch;
comments v69
2020-10-07 21:14:52 +02:00
padding: 1px;
new comments
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);
}
comments v69
2020-10-07 21:14:52 +02:00
@media (min-width: $breakpoint-small) {
padding: 2px;
}
new comments
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);
}
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
.comment--highlighted {
new comments
2020-08-24 19:35:21 +02:00
background: var(--color-comment-highlighted);
add style for comments with is_pinned=true
2020-10-08 17:31:36 +02:00
box-shadow: 0 0 0 5px var(--color-comment-highlighted);
new comments
2020-08-24 19:35:21 +02:00
border-radius: 4px;
Added the ability to reply to comments
2020-02-05 04:55:00 +01:00
}
hyperchats
2021-04-23 21:59:48 +02:00
.comment__body-container {
Adds comment actions menu & implements their actions
2020-01-30 02:02:21 +01:00
flex: 1;
new comments
2020-08-24 19:35:21 +02:00
margin-left: var(--spacing-xs);
@media (min-width: $breakpoint-small) {
hyperchats
2021-04-23 21:59:48 +02:00
margin-left: var(--spacing-s);
new comments
2020-08-24 19:35:21 +02:00
}
Comments are adjacent to the thumbnail
2019-10-24 19:24:53 +02:00
}
hide comments that were slimed to death TM
2020-10-08 21:55:16 +02:00
.comment__dead {
display: flex;
align-items: center;
.icon {
margin-left: var(--spacing-s);
}
}
Finalized styling
2019-05-22 20:59:46 +02:00
.comment__meta {
Adds comment actions menu & implements their actions
2020-01-30 02:02:21 +01:00
display: flex;
justify-content: space-between;
improves comment display adds channel link adds support for newline better handles long channel names
2019-07-17 22:56:36 +02:00
}
cleanup
2020-02-10 21:49:43 +01:00
.comment__meta-information {
display: flex;
style updates
2021-04-05 20:13:27 +02:00
justify-content: flex-start;
align-items: center;
new comments
2020-08-24 19:35:21 +02:00
height: 100%;
cleanup
2020-02-10 21:49:43 +01:00
}
add style for comments with is_pinned=true
2020-10-08 17:31:36 +02:00
.comment__pin {
margin-left: var(--spacing-s);
initial comment pin PR with new commit
2020-10-20 05:20:38 +02:00
.icon {
padding-top: 1px;
}
add style for comments with is_pinned=true
2020-10-08 17:31:36 +02:00
}
improves comment display adds channel link adds support for newline better handles long channel names
2019-07-17 22:56:36 +02:00
.comment__message {
Fix [ff0cc861] that broke regular word-wrap in comments. Now, both regular text and "long text without spaces" will wrap correctly.
2020-06-09 09:20:33 +02:00
word-break: break-word;
comment cleanup
2020-08-24 20:44:41 +02:00
max-width: 35rem;
fix notification link to comment not working in some cases the router scroll handling was interefering. I turned that off if exists as a search param
2020-08-25 21:25:33 +02:00
Change list style in comments to be inside.
2021-01-02 21:32:35 +01:00
ul li,
ol li {
list-style-position: inside;
}
fix notification link to comment not working in some cases the router scroll handling was interefering. I turned that off if exists as a search param
2020-08-25 21:25:33 +02:00
p {
& + p {
margin-top: var(--spacing-xxs);
}
}
improves comment display adds channel link adds support for newline better handles long channel names
2019-07-17 22:56:36 +02:00
}
.comment__author {
Small change based on code review
2021-01-29 19:03:06 +01:00
max-width: 10rem;
clean up styles
2019-12-04 19:07:40 +01:00
text-overflow: ellipsis;
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
margin-right: var(--spacing-xs);
new comments
2020-08-24 19:35:21 +02:00
height: 100%;
improves comment display adds channel link adds support for newline better handles long channel names
2019-07-17 22:56:36 +02:00
}
Highlight comments made by content owner
2021-04-02 21:14:53 +02:00
.comment__author--creator {
style updates
2021-04-05 20:13:27 +02:00
padding: 0 3px;
Highlight comments made by content owner
2021-04-02 21:14:53 +02:00
background-color: var(--color-primary-alt);
border-radius: var(--border-radius);
style updates
2021-04-05 20:13:27 +02:00
&.button--uri-indicator {
color: var(--color-link);
}
Highlight comments made by content owner
2021-04-02 21:14:53 +02:00
}
improves comment display adds channel link adds support for newline better handles long channel names
2019-07-17 22:56:36 +02:00
.comment__time {
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
@extend .button--uri-indicator;
handle comment time display correctly immediately after posting
2020-10-05 17:44:38 +02:00
opacity: 0.5;
clean up styles
2019-12-04 19:07:40 +01:00
white-space: nowrap;
new comments
2020-08-24 19:35:21 +02:00
height: 100%;
hyperchats
2021-04-23 21:59:48 +02:00
margin-right: var(--spacing-xs);
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
&:focus {
@include linkFocus;
}
Optimizing
2019-05-21 23:15:37 +02:00
}
Add char count and max char info near textarea of comments area
2019-09-30 23:16:46 +02:00
Adds comment actions menu & implements their actions
2020-01-30 02:02:21 +01:00
.comment__menu {
align-self: flex-end;
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
line-height: 1;
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
button {
border-radius: var(--border-radius);
&:focus {
@include linkFocus;
}
}
Adds comment actions menu & implements their actions
2020-01-30 02:02:21 +01:00
}
Add char count and max char info near textarea of comments area
2019-09-30 23:16:46 +02:00
.comment__char-count {
SimpleMDE: Add character-count display and standardize look with basic editor's.
2020-06-13 05:58:53 +02:00
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;
Add char count and max char info near textarea of comments area
2019-09-30 23:16:46 +02:00
}
Adds comment actions menu & implements their actions
2020-01-30 02:02:21 +01:00
.comment__menu-option {
display: flex;
align-items: center;
moonpay
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
font-size: var(--font-xsmall);
.menu__link {
padding: 0;
}
Adds comment actions menu & implements their actions
2020-01-30 02:02:21 +01:00
}
.comment__menu-icon--hovering {
stroke: var(--color-comment-menu-hovering);
}
.comment__menu-icon {
stroke: var(--color-comment-menu);
}
add comments behind a flag
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);
}
new comments
2020-08-24 19:35:21 +02:00
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
.comment__menu-title {
@extend .help;
margin-top: 0;
cleanup styles
2021-02-11 06:40:13 +01:00
padding-left: var(--spacing-xs);
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
padding-right: var(--spacing-xl);
cleanup styles
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);
unify some styles with master
2021-04-26 21:19:17 +02:00
Moderator Delegation GUI
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);
}
unify some styles with master
2021-04-26 21:19:17 +02:00
&:not(:last-child) {
margin-bottom: var(--spacing-xs);
}
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
}
.comment__menu-help {
@extend .help;
margin-top: var(--spacing-xs);
padding-left: calc(18px + var(--spacing-s));
max-width: 15rem;
white-space: pre-line;
}
new comments
2020-08-24 19:35:21 +02:00
.comment__actions {
display: flex;
margin-top: var(--spacing-s);
creator only like reactions
2020-10-27 17:24:31 +01:00
> *:not(:last-of-type) {
put comment reactions behind flag
2020-10-01 20:43:44 +02:00
margin-right: var(--spacing-m);
new comments
2020-08-24 19:35:21 +02:00
}
.button__label {
creator only like reactions
2020-10-27 17:24:31 +01:00
margin-left: var(--spacing-xs);
new comments
2020-08-24 19:35:21 +02:00
}
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
}
new comments
2020-08-24 19:35:21 +02:00
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
.comment__actions--nested {
@extend .comment__actions;
fix rebase
2020-09-29 22:42:24 +02:00
margin-left: calc((#{$thumbnailWidthSmall} + var(--spacing-xs)));
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
margin-top: var(--spacing-m);
fix rebase
2020-09-29 22:42:24 +02:00
@media (min-width: $breakpoint-small) {
margin-left: calc((#{$thumbnailWidth} + var(--spacing-m)));
}
new comments
2020-08-24 19:35:21 +02:00
}
.comment__action {
@extend .button--uri-indicator;
height: auto;
font-size: var(--font-xsmall);
}
creator only like reactions
2020-10-27 17:24:31 +01:00
.comment__action--creator-like {
&:disabled {
opacity: 1;
}
}
add comment sorting and improve comment focus styles
2020-10-06 21:35:13 +02:00
.comment__action,
.comment__author {
&:focus {
@include linkFocus;
}
}
add placeholder upvote/downvote buttons on comments
2020-09-11 19:51:31 +02:00
.comment__action--active {
.icon {
fill: var(--color-primary-alt);
stroke: var(--color-primary);
}
}
new comments
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);
}
creator only like reactions
2020-10-27 17:24:31 +01:00
.comment__creator-like {
update creator like style
2020-10-28 03:16:46 +01:00
height: 0.8rem;
width: 0.8rem;
creator only like reactions
2020-10-27 17:24:31 +01:00
margin-left: 3px;
z-index: 3;
update creator like style
2020-10-28 03:16:46 +01:00
position: absolute;
top: 0.4rem;
left: 0.4rem;
creator only like reactions
2020-10-27 17:24:31 +01:00
}
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
.comment__menu-active {
cleanup styles
2021-02-11 06:40:13 +01:00
padding: var(--spacing-xs);
padding-bottom: 0;
add initial support for comment API outside of SDK
2021-02-11 06:12:41 +01:00
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);
}
hyperchats
2021-04-23 21:59:48 +02:00
.comment__tip-input {
margin: var(--spacing-s) 0;
}
Restore comment pagination This reverts commit e6addb8c2a198fb78ba808ff4e29be2d575e08c3, reversing changes made to 47b594107a89827d4b8c2f80738c1b0f2a785a24.
2021-07-15 16:43:28 +02:00
.comment--blocked {
opacity: 0.5;
}
Reference in a new issue Copy permalink