diff options
author | Chocobozzz <me@florianbigard.com> | 2021-06-29 17:18:30 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-06-29 17:18:39 +0200 |
commit | 911186dae411d78788ccede093c251303187589a (patch) | |
tree | 967a07cd985ae4e2ea5249855726455fe929471d /client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss | |
parent | b0c43e36dbdc2c964f6828a78b146faebfb75b21 (diff) | |
download | PeerTube-911186dae411d78788ccede093c251303187589a.tar.gz PeerTube-911186dae411d78788ccede093c251303187589a.tar.zst PeerTube-911186dae411d78788ccede093c251303187589a.zip |
Reorganize watch components
Diffstat (limited to 'client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss new file mode 100644 index 000000000..87e313d41 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss | |||
@@ -0,0 +1,199 @@ | |||
1 | @use '_variables' as *; | ||
2 | @use '_mixins' as *; | ||
3 | |||
4 | .root-comment { | ||
5 | font-size: 15px; | ||
6 | display: flex; | ||
7 | |||
8 | .left { | ||
9 | @include margin-right(10px); | ||
10 | |||
11 | display: flex; | ||
12 | flex-direction: column; | ||
13 | align-items: center; | ||
14 | |||
15 | .vertical-border { | ||
16 | width: 2px; | ||
17 | height: 100%; | ||
18 | background-color: rgba(0, 0, 0, 0.05); | ||
19 | margin: 10px calc(1rem + 1px); | ||
20 | } | ||
21 | } | ||
22 | |||
23 | .right { | ||
24 | width: 100%; | ||
25 | } | ||
26 | } | ||
27 | |||
28 | my-actor-avatar { | ||
29 | @include actor-avatar-size(36px); | ||
30 | } | ||
31 | |||
32 | .comment { | ||
33 | flex-grow: 1; | ||
34 | // Fix word-wrap with flex | ||
35 | min-width: 1px; | ||
36 | } | ||
37 | |||
38 | .highlighted-comment { | ||
39 | display: inline-block; | ||
40 | background-color: #F5F5F5; | ||
41 | color: #3d3d3d; | ||
42 | padding: 0 5px; | ||
43 | font-size: 13px; | ||
44 | margin-bottom: 5px; | ||
45 | font-weight: $font-semibold; | ||
46 | border-radius: 3px; | ||
47 | } | ||
48 | |||
49 | .comment-account-date { | ||
50 | display: flex; | ||
51 | margin-bottom: 4px; | ||
52 | } | ||
53 | |||
54 | .video-author { | ||
55 | @include padding-right(6px); | ||
56 | @include padding-left(6px); | ||
57 | |||
58 | height: 20px; | ||
59 | background-color: #888888; | ||
60 | border-radius: 12px; | ||
61 | margin-bottom: 2px; | ||
62 | max-width: 100%; | ||
63 | box-sizing: border-box; | ||
64 | flex-direction: row; | ||
65 | align-items: center; | ||
66 | display: inline-flex; | ||
67 | color: #fff !important; | ||
68 | } | ||
69 | |||
70 | .comment-account { | ||
71 | word-break: break-all; | ||
72 | font-weight: 600; | ||
73 | font-size: 90%; | ||
74 | |||
75 | a { | ||
76 | @include disable-default-a-behaviour; | ||
77 | |||
78 | color: pvar(--mainForegroundColor); | ||
79 | |||
80 | &:hover { | ||
81 | text-decoration: underline; | ||
82 | } | ||
83 | } | ||
84 | |||
85 | .comment-account-fid { | ||
86 | opacity: .6; | ||
87 | } | ||
88 | } | ||
89 | |||
90 | .comment-date { | ||
91 | @include margin-left(5px); | ||
92 | |||
93 | font-size: 90%; | ||
94 | color: pvar(--greyForegroundColor); | ||
95 | text-decoration: none; | ||
96 | |||
97 | &:hover { | ||
98 | text-decoration: underline; | ||
99 | } | ||
100 | } | ||
101 | |||
102 | .comment-html { | ||
103 | @include peertube-word-wrap; | ||
104 | |||
105 | // Mentions | ||
106 | ::ng-deep a { | ||
107 | |||
108 | &:not(.linkified-url) { | ||
109 | @include disable-default-a-behaviour; | ||
110 | |||
111 | color: pvar(--mainForegroundColor); | ||
112 | |||
113 | font-weight: $font-semibold; | ||
114 | } | ||
115 | |||
116 | } | ||
117 | |||
118 | // Paragraphs | ||
119 | ::ng-deep p { | ||
120 | margin-bottom: .3rem; | ||
121 | } | ||
122 | |||
123 | &.comment-html-deleted { | ||
124 | color: pvar(--greyForegroundColor); | ||
125 | margin-bottom: 1rem; | ||
126 | } | ||
127 | } | ||
128 | |||
129 | .comment-actions { | ||
130 | margin-bottom: 10px; | ||
131 | display: flex; | ||
132 | |||
133 | ::ng-deep .dropdown-toggle, | ||
134 | .comment-action-reply { | ||
135 | @include margin-right(10px); | ||
136 | |||
137 | color: pvar(--greyForegroundColor); | ||
138 | cursor: pointer; | ||
139 | |||
140 | &:hover, | ||
141 | &:active, | ||
142 | &:focus, | ||
143 | &:focus-visible { | ||
144 | color: pvar(--mainForegroundColor); | ||
145 | } | ||
146 | } | ||
147 | |||
148 | ::ng-deep .action-button { | ||
149 | background-color: transparent; | ||
150 | padding: 0; | ||
151 | font-weight: unset; | ||
152 | } | ||
153 | } | ||
154 | |||
155 | my-video-comment-add { | ||
156 | ::ng-deep form { | ||
157 | margin-top: 1rem; | ||
158 | margin-bottom: 0; | ||
159 | } | ||
160 | } | ||
161 | |||
162 | .is-child { | ||
163 | // Reduce avatars size for replies | ||
164 | my-actor-avatar { | ||
165 | @include actor-avatar-size(25px); | ||
166 | } | ||
167 | |||
168 | .left { | ||
169 | @include margin-right(6px); | ||
170 | } | ||
171 | } | ||
172 | |||
173 | @media screen and (max-width: 1200px) { | ||
174 | .children { | ||
175 | @include margin-left(-10px); | ||
176 | } | ||
177 | } | ||
178 | |||
179 | @media screen and (max-width: 600px) { | ||
180 | .children { | ||
181 | @include margin-left(-20px); | ||
182 | |||
183 | .left { | ||
184 | align-items: flex-start; | ||
185 | |||
186 | .vertical-border { | ||
187 | @include margin-left(2px); | ||
188 | } | ||
189 | } | ||
190 | } | ||
191 | |||
192 | .comment-account-date { | ||
193 | flex-direction: column; | ||
194 | |||
195 | .comment-date { | ||
196 | @include margin-left(0); | ||
197 | } | ||
198 | } | ||
199 | } | ||