1 @use '_variables' as *;
9 @include margin-right(10px);
12 flex-direction: column;
18 background-color: rgba(0, 0, 0, 0.05);
19 margin: 10px calc(1rem + 1px);
29 @include actor-avatar-size(36px);
34 // Fix word-wrap with flex
38 .highlighted-comment {
39 display: inline-block;
40 background-color: #F5F5F5;
45 font-weight: $font-semibold;
49 .comment-account-date {
55 @include padding-right(6px);
56 @include padding-left(6px);
59 background-color: #888888;
63 box-sizing: border-box;
67 color: #fff !important;
71 word-break: break-all;
76 @include disable-default-a-behaviour;
78 color: pvar(--mainForegroundColor);
81 text-decoration: underline;
85 .comment-account-fid {
91 @include margin-left(5px);
94 color: pvar(--greyForegroundColor);
95 text-decoration: none;
98 text-decoration: underline;
103 @include peertube-word-wrap;
108 &:not(.linkified-url) {
109 @include disable-default-a-behaviour;
111 color: pvar(--mainForegroundColor);
113 font-weight: $font-semibold;
120 margin-bottom: .3rem;
123 &.comment-html-deleted {
124 color: pvar(--greyForegroundColor);
133 ::ng-deep .dropdown-toggle,
134 .comment-action-reply {
135 @include margin-right(10px);
137 color: pvar(--greyForegroundColor);
144 color: pvar(--mainForegroundColor);
148 ::ng-deep .action-button {
149 background-color: transparent;
155 my-video-comment-add {
163 // Reduce avatars size for replies
165 @include actor-avatar-size(25px);
169 @include margin-right(6px);
173 @media screen and (max-width: 1200px) {
175 @include margin-left(-10px);
179 @media screen and (max-width: 600px) {
181 @include margin-left(-20px);
184 align-items: flex-start;
187 @include margin-left(2px);
192 .comment-account-date {
193 flex-direction: column;
196 @include margin-left(0);