diff options
author | Chocobozzz <me@florianbigard.com> | 2021-06-29 17:57:59 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-06-29 18:01:02 +0200 |
commit | 06a555797929d4867264b096c8420cdedd50f496 (patch) | |
tree | e68b0038d3f3f8ccae43b3bd22509200888a699a /client/src/app/+videos/+video-watch/video-watch.component.scss | |
parent | 6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6 (diff) | |
download | PeerTube-06a555797929d4867264b096c8420cdedd50f496.tar.gz PeerTube-06a555797929d4867264b096c8420cdedd50f496.tar.zst PeerTube-06a555797929d4867264b096c8420cdedd50f496.zip |
Move watch action buttons in a dedicated component
Diffstat (limited to 'client/src/app/+videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/video-watch.component.scss | 125 |
1 files changed, 17 insertions, 108 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index e075fc57e..1d83fa139 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -151,6 +151,7 @@ | |||
151 | @include peertube-word-wrap; | 151 | @include peertube-word-wrap; |
152 | 152 | ||
153 | @include margin-right(30px); | 153 | @include margin-right(30px); |
154 | |||
154 | min-height: 40px; // Align with the action buttons | 155 | min-height: 40px; // Align with the action buttons |
155 | font-size: 27px; | 156 | font-size: 27px; |
156 | font-weight: $font-semibold; | 157 | font-weight: $font-semibold; |
@@ -211,106 +212,6 @@ | |||
211 | @include margin-left(5px); | 212 | @include margin-left(5px); |
212 | } | 213 | } |
213 | } | 214 | } |
214 | |||
215 | .video-actions-rates { | ||
216 | @include margin-left(auto); | ||
217 | @include margin-right(0); | ||
218 | |||
219 | margin-top: 0; | ||
220 | margin-bottom: 10px; | ||
221 | |||
222 | align-items: start; | ||
223 | width: max-content; | ||
224 | |||
225 | .video-actions { | ||
226 | height: 40px; // Align with the title | ||
227 | display: flex; | ||
228 | align-items: center; | ||
229 | |||
230 | .action-button:not(:first-child), | ||
231 | .action-dropdown, | ||
232 | my-video-actions-dropdown { | ||
233 | @include margin-left(5px); | ||
234 | } | ||
235 | |||
236 | ::ng-deep.action-button { | ||
237 | @include peertube-button; | ||
238 | @include button-with-icon(21px, 0, -1px); | ||
239 | |||
240 | font-size: 100%; | ||
241 | font-weight: $font-semibold; | ||
242 | display: inline-block; | ||
243 | padding: 0 10px; | ||
244 | white-space: nowrap; | ||
245 | background-color: transparent !important; | ||
246 | color: pvar(--actionButtonColor); | ||
247 | text-transform: uppercase; | ||
248 | |||
249 | &::after { | ||
250 | display: none; | ||
251 | } | ||
252 | |||
253 | &:hover { | ||
254 | opacity: 0.9; | ||
255 | } | ||
256 | |||
257 | &.action-button-support { | ||
258 | color: pvar(--supportButtonColor); | ||
259 | |||
260 | my-global-icon { | ||
261 | @include apply-svg-color(pvar(--supportButtonColor)); | ||
262 | } | ||
263 | } | ||
264 | |||
265 | &.action-button-support { | ||
266 | my-global-icon { | ||
267 | ::ng-deep path:first-child { | ||
268 | fill: pvar(--supportButtonHeartColor) !important; | ||
269 | } | ||
270 | } | ||
271 | } | ||
272 | |||
273 | &.action-button-save { | ||
274 | my-global-icon { | ||
275 | top: 0 !important; | ||
276 | right: -1px; | ||
277 | } | ||
278 | } | ||
279 | |||
280 | .icon-text { | ||
281 | @include margin-left(3px); | ||
282 | } | ||
283 | } | ||
284 | } | ||
285 | |||
286 | .video-info-likes-dislikes-bar-outer-container { | ||
287 | position: relative; | ||
288 | } | ||
289 | |||
290 | .video-info-likes-dislikes-bar-inner-container { | ||
291 | position: absolute; | ||
292 | height: 20px; | ||
293 | } | ||
294 | |||
295 | .video-info-likes-dislikes-bar { | ||
296 | $likes-bar-height: 2px; | ||
297 | height: $likes-bar-height; | ||
298 | margin-top: -$likes-bar-height; | ||
299 | width: 120px; | ||
300 | background-color: #ccc; | ||
301 | position: relative; | ||
302 | top: 10px; | ||
303 | |||
304 | .likes-bar { | ||
305 | height: 100%; | ||
306 | background-color: #909090; | ||
307 | |||
308 | &.liked { | ||
309 | background-color: pvar(--activatedActionButtonColor); | ||
310 | } | ||
311 | } | ||
312 | } | ||
313 | } | ||
314 | } | 215 | } |
315 | 216 | ||
316 | .video-attributes { | 217 | .video-attributes { |
@@ -351,6 +252,18 @@ | |||
351 | } | 252 | } |
352 | } | 253 | } |
353 | 254 | ||
255 | my-action-buttons { | ||
256 | @include margin-left(auto); | ||
257 | @include margin-right(0); | ||
258 | |||
259 | display: block; | ||
260 | margin-top: 0; | ||
261 | margin-bottom: 10px; | ||
262 | |||
263 | align-items: start; | ||
264 | width: max-content; | ||
265 | } | ||
266 | |||
354 | my-recommended-videos { | 267 | my-recommended-videos { |
355 | @include padding-left(15px); | 268 | @include padding-left(15px); |
356 | 269 | ||
@@ -411,10 +324,6 @@ my-video-comments { | |||
411 | 324 | ||
412 | @media screen and (max-width: 450px) { | 325 | @media screen and (max-width: 450px) { |
413 | .video-bottom { | 326 | .video-bottom { |
414 | .action-button .icon-text { | ||
415 | display: none !important; | ||
416 | } | ||
417 | |||
418 | .video-info .video-info-first-row { | 327 | .video-info .video-info-first-row { |
419 | .video-info-name { | 328 | .video-info-name { |
420 | font-size: 18px; | 329 | font-size: 18px; |
@@ -423,12 +332,12 @@ my-video-comments { | |||
423 | .video-info-date-views { | 332 | .video-info-date-views { |
424 | font-size: 14px; | 333 | font-size: 14px; |
425 | } | 334 | } |
426 | |||
427 | .video-actions-rates { | ||
428 | margin-top: 10px; | ||
429 | } | ||
430 | } | 335 | } |
431 | } | 336 | } |
337 | |||
338 | my-action-buttons { | ||
339 | margin-top: 10px; | ||
340 | } | ||
432 | } | 341 | } |
433 | 342 | ||
434 | 343 | ||