10 flex-direction: column;
17 background-color: rgba(0, 0, 0, 0.05);
18 margin: 10px calc(1rem + 1px);
28 @include actor-avatar-size(36px);
33 // Fix word-wrap with flex
37 .highlighted-comment {
38 display: inline-block;
39 background-color: #F5F5F5;
44 font-weight: $font-semibold;
48 .comment-account-date {
55 background-color: #888888;
59 box-sizing: border-box;
65 color: white !important;
69 word-break: break-all;
74 @include disable-default-a-behaviour;
76 color: pvar(--mainForegroundColor);
79 text-decoration: underline;
83 .comment-account-fid {
90 color: pvar(--greyForegroundColor);
92 text-decoration: none;
95 text-decoration: underline;
100 @include peertube-word-wrap;
105 &:not(.linkified-url) {
106 @include disable-default-a-behaviour;
108 color: pvar(--mainForegroundColor);
110 font-weight: $font-semibold;
117 margin-bottom: .3rem;
120 &.comment-html-deleted {
121 color: pvar(--greyForegroundColor);
130 ::ng-deep .dropdown-toggle,
131 .comment-action-reply {
132 color: pvar(--greyForegroundColor);
136 &:hover, &:active, &:focus, &:focus-visible {
137 color: pvar(--mainForegroundColor);
141 ::ng-deep .action-button {
142 background-color: transparent;
148 my-video-comment-add {
156 // Reduce avatars size for replies
158 @include actor-avatar-size(25px);
166 @media screen and (max-width: 1200px) {
172 @media screen and (max-width: 600px) {
177 align-items: flex-start;
185 .comment-account-date {
186 flex-direction: column;