diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch/comment/video-comment.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/comment/video-comment.component.scss | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss new file mode 100644 index 000000000..e7ef79561 --- /dev/null +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss | |||
@@ -0,0 +1,189 @@ | |||
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 calc(1rem + 1px); | ||
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 | word-break: break-all; | ||
67 | font-weight: 600; | ||
68 | font-size: 90%; | ||
69 | |||
70 | a { | ||
71 | @include disable-default-a-behaviour; | ||
72 | |||
73 | color: pvar(--mainForegroundColor); | ||
74 | } | ||
75 | |||
76 | .comment-account-fid { | ||
77 | opacity: .6; | ||
78 | } | ||
79 | } | ||
80 | |||
81 | .comment-date { | ||
82 | font-size: 90%; | ||
83 | color: pvar(--greyForegroundColor); | ||
84 | margin-left: 5px; | ||
85 | text-decoration: none; | ||
86 | } | ||
87 | } | ||
88 | |||
89 | .comment-html { | ||
90 | @include peertube-word-wrap; | ||
91 | |||
92 | // Mentions | ||
93 | ::ng-deep a { | ||
94 | |||
95 | &:not(.linkified-url) { | ||
96 | @include disable-default-a-behaviour; | ||
97 | |||
98 | color: pvar(--mainForegroundColor); | ||
99 | |||
100 | font-weight: $font-semibold; | ||
101 | } | ||
102 | |||
103 | } | ||
104 | |||
105 | // Paragraphs | ||
106 | ::ng-deep p { | ||
107 | margin-bottom: .3rem; | ||
108 | } | ||
109 | |||
110 | &.comment-html-deleted { | ||
111 | color: pvar(--greyForegroundColor); | ||
112 | margin-bottom: 1rem; | ||
113 | } | ||
114 | } | ||
115 | |||
116 | .comment-actions { | ||
117 | margin-bottom: 10px; | ||
118 | display: flex; | ||
119 | |||
120 | ::ng-deep .dropdown-toggle, | ||
121 | .comment-action-reply, | ||
122 | .comment-action-delete { | ||
123 | color: pvar(--greyForegroundColor); | ||
124 | cursor: pointer; | ||
125 | margin-right: 10px; | ||
126 | |||
127 | &:hover { | ||
128 | color: pvar(--mainForegroundColor); | ||
129 | } | ||
130 | } | ||
131 | |||
132 | ::ng-deep .action-button { | ||
133 | background-color: transparent; | ||
134 | padding: 0; | ||
135 | font-weight: unset; | ||
136 | } | ||
137 | } | ||
138 | |||
139 | my-video-comment-add { | ||
140 | ::ng-deep form { | ||
141 | margin-top: 1rem; | ||
142 | margin-bottom: 0; | ||
143 | } | ||
144 | } | ||
145 | } | ||
146 | |||
147 | .children { | ||
148 | // Reduce avatars size for replies | ||
149 | .comment-avatar { | ||
150 | @include avatar(25px); | ||
151 | } | ||
152 | |||
153 | .left { | ||
154 | margin-right: 6px; | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | |||
159 | @media screen and (max-width: 1200px) { | ||
160 | .children { | ||
161 | margin-left: -10px; | ||
162 | } | ||
163 | } | ||
164 | |||
165 | @media screen and (max-width: 600px) { | ||
166 | .root-comment { | ||
167 | .children { | ||
168 | margin-left: -20px; | ||
169 | |||
170 | .left { | ||
171 | align-items: flex-start; | ||
172 | |||
173 | .vertical-border { | ||
174 | margin-left: 2px; | ||
175 | } | ||
176 | } | ||
177 | } | ||
178 | |||
179 | .comment { | ||
180 | .comment-account-date { | ||
181 | flex-direction: column; | ||
182 | |||
183 | .comment-date { | ||
184 | margin-left: 0; | ||
185 | } | ||
186 | } | ||
187 | } | ||
188 | } | ||
189 | } | ||