display: flex;
.left {
+ @include margin-right(10px);
+
display: flex;
flex-direction: column;
align-items: center;
- margin-right: 10px;
.vertical-border {
width: 2px;
.right {
width: 100%;
}
+}
- .comment-avatar {
- @include avatar(36px);
- }
+my-actor-avatar {
+ @include actor-avatar-size(36px);
+}
- .comment {
- flex-grow: 1;
- // Fix word-wrap with flex
- min-width: 1px;
+.comment {
+ flex-grow: 1;
+ // Fix word-wrap with flex
+ min-width: 1px;
+}
- .highlighted-comment {
- display: inline-block;
- background-color: #F5F5F5;
- color: #3d3d3d;
- padding: 0 5px;
- font-size: 13px;
- margin-bottom: 5px;
- font-weight: $font-semibold;
- border-radius: 3px;
- }
+.highlighted-comment {
+ display: inline-block;
+ background-color: #F5F5F5;
+ color: #3d3d3d;
+ padding: 0 5px;
+ font-size: 13px;
+ margin-bottom: 5px;
+ font-weight: $font-semibold;
+ border-radius: 3px;
+}
- .comment-account-date {
- display: flex;
- margin-bottom: 4px;
-
- .video-author {
- height: 20px;
- background-color: #888888;
- border-radius: 12px;
- margin-bottom: 2px;
- max-width: 100%;
- box-sizing: border-box;
- flex-direction: row;
- align-items: center;
- display: inline-flex;
- padding-right: 6px;
- padding-left: 6px;
- color: white !important;
- }
+.comment-account-date {
+ display: flex;
+ margin-bottom: 4px;
+}
- .comment-account {
- word-break: break-all;
- font-weight: 600;
- font-size: 90%;
+.video-author {
+ @include padding-right(6px);
+ @include padding-left(6px);
+
+ height: 20px;
+ background-color: #888888;
+ border-radius: 12px;
+ margin-bottom: 2px;
+ max-width: 100%;
+ box-sizing: border-box;
+ flex-direction: row;
+ align-items: center;
+ display: inline-flex;
+ color: #fff !important;
+}
- a {
- @include disable-default-a-behaviour;
+.comment-account {
+ word-break: break-all;
+ font-weight: 600;
+ font-size: 90%;
- color: pvar(--mainForegroundColor);
- }
+ a {
+ @include disable-default-a-behaviour;
- .comment-account-fid {
- opacity: .6;
- }
- }
+ color: pvar(--mainForegroundColor);
- .comment-date {
- font-size: 90%;
- color: pvar(--greyForegroundColor);
- margin-left: 5px;
- text-decoration: none;
- }
+ &:hover {
+ text-decoration: underline;
}
+ }
- .comment-html {
- @include peertube-word-wrap;
+ .comment-account-fid {
+ opacity: .6;
+ }
+}
- // Mentions
- ::ng-deep a {
+.comment-date {
+ @include margin-left(5px);
- &:not(.linkified-url) {
- @include disable-default-a-behaviour;
+ font-size: 90%;
+ color: pvar(--greyForegroundColor);
+ text-decoration: none;
- color: pvar(--mainForegroundColor);
+ &:hover {
+ text-decoration: underline;
+ }
+}
- font-weight: $font-semibold;
- }
+.comment-html {
+ @include peertube-word-wrap;
- }
+ // Mentions
+ ::ng-deep a {
- // Paragraphs
- ::ng-deep p {
- margin-bottom: .3rem;
- }
+ &:not(.linkified-url) {
+ @include disable-default-a-behaviour;
- &.comment-html-deleted {
- color: pvar(--greyForegroundColor);
- margin-bottom: 1rem;
- }
+ color: pvar(--mainForegroundColor);
+
+ font-weight: $font-semibold;
}
- .comment-actions {
- margin-bottom: 10px;
- display: flex;
+ }
+
+ // Paragraphs
+ ::ng-deep p {
+ margin-bottom: .3rem;
+ }
- ::ng-deep .dropdown-toggle,
- .comment-action-reply,
- .comment-action-delete {
- color: pvar(--greyForegroundColor);
- cursor: pointer;
- margin-right: 10px;
+ &.comment-html-deleted {
+ color: pvar(--greyForegroundColor);
+ margin-bottom: 1rem;
+ }
+}
- &:hover {
- color: pvar(--mainForegroundColor);
- }
- }
+.comment-actions {
+ margin-bottom: 10px;
+ display: flex;
- ::ng-deep .action-button {
- background-color: transparent;
- padding: 0;
- font-weight: unset;
- }
- }
+ ::ng-deep .dropdown-toggle,
+ .comment-action-reply {
+ @include margin-right(10px);
- my-video-comment-add {
- ::ng-deep form {
- margin-top: 1rem;
- margin-bottom: 0;
- }
+ color: pvar(--greyForegroundColor);
+ cursor: pointer;
+
+ &:hover,
+ &:active,
+ &:focus,
+ &:focus-visible {
+ color: pvar(--mainForegroundColor);
}
}
- .children {
- // Reduce avatars size for replies
- .comment-avatar {
- @include avatar(25px);
- }
+ ::ng-deep .action-button {
+ background-color: transparent;
+ padding: 0;
+ font-weight: unset;
+ }
+}
- .left {
- margin-right: 6px;
- }
+my-video-comment-add {
+ ::ng-deep form {
+ margin-top: 1rem;
+ margin-bottom: 0;
+ }
+}
+
+.is-child {
+ // Reduce avatars size for replies
+ my-actor-avatar {
+ @include actor-avatar-size(25px);
+ }
+
+ .left {
+ @include margin-right(6px);
}
}
@media screen and (max-width: 1200px) {
.children {
- margin-left: -10px;
+ @include margin-left(-10px);
}
}
@media screen and (max-width: 600px) {
- .root-comment {
- .children {
- margin-left: -20px;
+ .children {
+ @include margin-left(-20px);
- .left {
- align-items: flex-start;
+ .left {
+ align-items: flex-start;
- .vertical-border {
- margin-left: 2px;
- }
+ .vertical-border {
+ @include margin-left(2px);
}
}
+ }
- .comment {
- .comment-account-date {
- flex-direction: column;
+ .comment-account-date {
+ flex-direction: column;
- .comment-date {
- margin-left: 0;
- }
- }
+ .comment-date {
+ @include margin-left(0);
}
}
}