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 | 240 |
1 files changed, 118 insertions, 122 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 index 866293eea..cf33a5b0e 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss | |||
@@ -22,140 +22,140 @@ | |||
22 | .right { | 22 | .right { |
23 | width: 100%; | 23 | width: 100%; |
24 | } | 24 | } |
25 | } | ||
25 | 26 | ||
26 | .comment { | 27 | .comment { |
27 | flex-grow: 1; | 28 | flex-grow: 1; |
28 | // Fix word-wrap with flex | 29 | // Fix word-wrap with flex |
29 | min-width: 1px; | 30 | min-width: 1px; |
30 | 31 | } | |
31 | .highlighted-comment { | ||
32 | display: inline-block; | ||
33 | background-color: #F5F5F5; | ||
34 | color: #3d3d3d; | ||
35 | padding: 0 5px; | ||
36 | font-size: 13px; | ||
37 | margin-bottom: 5px; | ||
38 | font-weight: $font-semibold; | ||
39 | border-radius: 3px; | ||
40 | } | ||
41 | |||
42 | .comment-account-date { | ||
43 | display: flex; | ||
44 | margin-bottom: 4px; | ||
45 | |||
46 | .video-author { | ||
47 | height: 20px; | ||
48 | background-color: #888888; | ||
49 | border-radius: 12px; | ||
50 | margin-bottom: 2px; | ||
51 | max-width: 100%; | ||
52 | box-sizing: border-box; | ||
53 | flex-direction: row; | ||
54 | align-items: center; | ||
55 | display: inline-flex; | ||
56 | padding-right: 6px; | ||
57 | padding-left: 6px; | ||
58 | color: white !important; | ||
59 | } | ||
60 | 32 | ||
61 | .comment-account { | 33 | .highlighted-comment { |
62 | word-break: break-all; | 34 | display: inline-block; |
63 | font-weight: 600; | 35 | background-color: #F5F5F5; |
64 | font-size: 90%; | 36 | color: #3d3d3d; |
37 | padding: 0 5px; | ||
38 | font-size: 13px; | ||
39 | margin-bottom: 5px; | ||
40 | font-weight: $font-semibold; | ||
41 | border-radius: 3px; | ||
42 | } | ||
65 | 43 | ||
66 | a { | 44 | .comment-account-date { |
67 | @include disable-default-a-behaviour; | 45 | display: flex; |
46 | margin-bottom: 4px; | ||
47 | } | ||
68 | 48 | ||
69 | color: pvar(--mainForegroundColor); | 49 | .video-author { |
50 | height: 20px; | ||
51 | background-color: #888888; | ||
52 | border-radius: 12px; | ||
53 | margin-bottom: 2px; | ||
54 | max-width: 100%; | ||
55 | box-sizing: border-box; | ||
56 | flex-direction: row; | ||
57 | align-items: center; | ||
58 | display: inline-flex; | ||
59 | padding-right: 6px; | ||
60 | padding-left: 6px; | ||
61 | color: white !important; | ||
62 | } | ||
70 | 63 | ||
71 | &:hover { | 64 | .comment-account { |
72 | text-decoration: underline; | 65 | word-break: break-all; |
73 | } | 66 | font-weight: 600; |
74 | } | 67 | font-size: 90%; |
75 | 68 | ||
76 | .comment-account-fid { | 69 | a { |
77 | opacity: .6; | 70 | @include disable-default-a-behaviour; |
78 | } | ||
79 | } | ||
80 | 71 | ||
81 | .comment-date { | 72 | color: pvar(--mainForegroundColor); |
82 | font-size: 90%; | ||
83 | color: pvar(--greyForegroundColor); | ||
84 | margin-left: 5px; | ||
85 | text-decoration: none; | ||
86 | 73 | ||
87 | &:hover { | 74 | &:hover { |
88 | text-decoration: underline; | 75 | text-decoration: underline; |
89 | } | ||
90 | } | ||
91 | } | 76 | } |
77 | } | ||
92 | 78 | ||
93 | .comment-html { | 79 | .comment-account-fid { |
94 | @include peertube-word-wrap; | 80 | opacity: .6; |
81 | } | ||
82 | } | ||
95 | 83 | ||
96 | // Mentions | 84 | .comment-date { |
97 | ::ng-deep a { | 85 | font-size: 90%; |
86 | color: pvar(--greyForegroundColor); | ||
87 | margin-left: 5px; | ||
88 | text-decoration: none; | ||
98 | 89 | ||
99 | &:not(.linkified-url) { | 90 | &:hover { |
100 | @include disable-default-a-behaviour; | 91 | text-decoration: underline; |
92 | } | ||
93 | } | ||
101 | 94 | ||
102 | color: pvar(--mainForegroundColor); | 95 | .comment-html { |
96 | @include peertube-word-wrap; | ||
103 | 97 | ||
104 | font-weight: $font-semibold; | 98 | // Mentions |
105 | } | 99 | ::ng-deep a { |
106 | 100 | ||
107 | } | 101 | &:not(.linkified-url) { |
102 | @include disable-default-a-behaviour; | ||
108 | 103 | ||
109 | // Paragraphs | 104 | color: pvar(--mainForegroundColor); |
110 | ::ng-deep p { | ||
111 | margin-bottom: .3rem; | ||
112 | } | ||
113 | 105 | ||
114 | &.comment-html-deleted { | 106 | font-weight: $font-semibold; |
115 | color: pvar(--greyForegroundColor); | ||
116 | margin-bottom: 1rem; | ||
117 | } | ||
118 | } | 107 | } |
119 | 108 | ||
120 | .comment-actions { | 109 | } |
121 | margin-bottom: 10px; | ||
122 | display: flex; | ||
123 | 110 | ||
124 | ::ng-deep .dropdown-toggle, | 111 | // Paragraphs |
125 | .comment-action-reply { | 112 | ::ng-deep p { |
126 | color: pvar(--greyForegroundColor); | 113 | margin-bottom: .3rem; |
127 | cursor: pointer; | 114 | } |
128 | margin-right: 10px; | ||
129 | 115 | ||
130 | &:hover, &:active, &:focus, &:focus-visible { | 116 | &.comment-html-deleted { |
131 | color: pvar(--mainForegroundColor); | 117 | color: pvar(--greyForegroundColor); |
132 | } | 118 | margin-bottom: 1rem; |
133 | } | 119 | } |
120 | } | ||
134 | 121 | ||
135 | ::ng-deep .action-button { | 122 | .comment-actions { |
136 | background-color: transparent; | 123 | margin-bottom: 10px; |
137 | padding: 0; | 124 | display: flex; |
138 | font-weight: unset; | ||
139 | } | ||
140 | } | ||
141 | 125 | ||
142 | my-video-comment-add { | 126 | ::ng-deep .dropdown-toggle, |
143 | ::ng-deep form { | 127 | .comment-action-reply { |
144 | margin-top: 1rem; | 128 | color: pvar(--greyForegroundColor); |
145 | margin-bottom: 0; | 129 | cursor: pointer; |
146 | } | 130 | margin-right: 10px; |
131 | |||
132 | &:hover, &:active, &:focus, &:focus-visible { | ||
133 | color: pvar(--mainForegroundColor); | ||
147 | } | 134 | } |
148 | } | 135 | } |
149 | 136 | ||
150 | .children { | 137 | ::ng-deep .action-button { |
151 | // Reduce avatars size for replies | 138 | background-color: transparent; |
152 | .comment-avatar { | 139 | padding: 0; |
153 | @include avatar(25px); | 140 | font-weight: unset; |
154 | } | 141 | } |
142 | } | ||
155 | 143 | ||
156 | .left { | 144 | my-video-comment-add { |
157 | margin-right: 6px; | 145 | ::ng-deep form { |
158 | } | 146 | margin-top: 1rem; |
147 | margin-bottom: 0; | ||
148 | } | ||
149 | } | ||
150 | |||
151 | .children { | ||
152 | // Reduce avatars size for replies | ||
153 | .comment-avatar { | ||
154 | @include avatar(25px); | ||
155 | } | ||
156 | |||
157 | .left { | ||
158 | margin-right: 6px; | ||
159 | } | 159 | } |
160 | } | 160 | } |
161 | 161 | ||
@@ -166,27 +166,23 @@ | |||
166 | } | 166 | } |
167 | 167 | ||
168 | @media screen and (max-width: 600px) { | 168 | @media screen and (max-width: 600px) { |
169 | .root-comment { | 169 | .children { |
170 | .children { | 170 | margin-left: -20px; |
171 | margin-left: -20px; | ||
172 | 171 | ||
173 | .left { | 172 | .left { |
174 | align-items: flex-start; | 173 | align-items: flex-start; |
175 | 174 | ||
176 | .vertical-border { | 175 | .vertical-border { |
177 | margin-left: 2px; | 176 | margin-left: 2px; |
178 | } | ||
179 | } | 177 | } |
180 | } | 178 | } |
179 | } | ||
181 | 180 | ||
182 | .comment { | 181 | .comment-account-date { |
183 | .comment-account-date { | 182 | flex-direction: column; |
184 | flex-direction: column; | ||
185 | 183 | ||
186 | .comment-date { | 184 | .comment-date { |
187 | margin-left: 0; | 185 | margin-left: 0; |
188 | } | ||
189 | } | ||
190 | } | 186 | } |
191 | } | 187 | } |
192 | } | 188 | } |