]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/videos/+video-watch/comment/video-comment.component.scss
Add commentor name alongside fid for video comments
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / comment / video-comment.component.scss
1 @import '_variables';
2 @import '_mixins';
3
4 .root-comment {
5 font-size: 15px;
6 display: flex;
7
8 .left {
9 display: flex;
10 flex-direction: column;
11 align-items: center;
12 margin-right: 10px;
13
14 .vertical-border {
15 width: 2px;
16 height: 100%;
17 background-color: rgba(0, 0, 0, 0.05);
18 margin: 10px 0;
19 }
20 }
21
22 .right {
23 width: 100%;
24 }
25
26 .comment-avatar {
27 @include avatar(36px);
28 }
29
30 .comment {
31 flex-grow: 1;
32 // Fix word-wrap with flex
33 min-width: 1px;
34
35 .highlighted-comment {
36 display: inline-block;
37 background-color: #F5F5F5;
38 color: #3d3d3d;
39 padding: 0 5px;
40 font-size: 13px;
41 margin-bottom: 5px;
42 font-weight: $font-semibold;
43 border-radius: 3px;
44 }
45
46 .comment-account-date {
47 display: flex;
48 margin-bottom: 4px;
49
50 .video-author {
51 height: 20px;
52 background-color: #888888;
53 border-radius: 12px;
54 margin-bottom: 2px;
55 max-width: 100%;
56 box-sizing: border-box;
57 flex-direction: row;
58 align-items: center;
59 display: inline-flex;
60 padding-right: 6px;
61 padding-left: 6px;
62 color: white !important;
63 }
64
65 .comment-account {
66 @include disable-default-a-behaviour;
67
68 word-break: break-all;
69 color: var(--mainForegroundColor);
70 font-weight: 600;
71 font-size: 90%;
72
73 .comment-account-fid {
74 opacity: .6;
75 }
76 }
77
78 .comment-date {
79 font-size: 90%;
80 color: $grey-foreground-color;
81 margin-left: 5px;
82 text-decoration: none;
83 }
84 }
85
86 .comment-html {
87 @include peertube-word-wrap;
88
89 // Mentions
90 ::ng-deep a {
91
92 &:not(.linkified-url) {
93 @include disable-default-a-behaviour;
94
95 color: var(--mainForegroundColor);
96
97 font-weight: $font-semibold;
98 }
99
100 }
101
102 // Paragraphs
103 ::ng-deep p {
104 margin-bottom: .3rem;
105 }
106
107 &.comment-html-deleted {
108 color: $grey-foreground-color;
109 }
110 }
111
112 .comment-actions {
113 margin-bottom: 10px;
114 display: flex;
115
116 .comment-action-reply,
117 .comment-action-delete {
118 color: $grey-foreground-color;
119 cursor: pointer;
120 margin-right: 10px;
121
122 &:hover {
123 color: var(--mainForegroundColor);
124 }
125 }
126 }
127 }
128
129 .children {
130 // Reduce avatars size for replies
131 .comment-avatar {
132 @include avatar(25px);
133 }
134
135 .left {
136 margin-right: 6px;
137 }
138 }
139 }
140
141 @media screen and (max-width: 1200px) {
142 .children {
143 margin-left: -10px;
144 }
145 }
146
147 @media screen and (max-width: 600px) {
148 .root-comment {
149 .children {
150 margin-left: -20px;
151
152 .left {
153 align-items: flex-start;
154
155 .vertical-border {
156 margin-left: 2px;
157 }
158 }
159 }
160
161 .comment {
162 .comment-account-date {
163 flex-direction: column;
164
165 .comment-date {
166 margin-left: 0;
167 }
168 }
169 }
170 }
171 }