diff options
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 | 51 |
1 files changed, 32 insertions, 19 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 af807a208..4a2e05c62 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -152,7 +152,7 @@ $video-info-margin-left: 44px; | |||
152 | .video-info-name { | 152 | .video-info-name { |
153 | @include peertube-word-wrap; | 153 | @include peertube-word-wrap; |
154 | 154 | ||
155 | margin-right: 30px; | 155 | @include margin-right(30px); |
156 | min-height: 40px; // Align with the action buttons | 156 | min-height: 40px; // Align with the action buttons |
157 | font-size: 27px; | 157 | font-size: 27px; |
158 | font-weight: $font-semibold; | 158 | font-weight: $font-semibold; |
@@ -167,9 +167,10 @@ $video-info-margin-left: 44px; | |||
167 | } | 167 | } |
168 | 168 | ||
169 | .video-info-date-views { | 169 | .video-info-date-views { |
170 | align-self: start; | 170 | @include margin-right(10px); |
171 | |||
171 | margin-bottom: 10px; | 172 | margin-bottom: 10px; |
172 | margin-right: 10px; | 173 | align-self: start; |
173 | font-size: 1em; | 174 | font-size: 1em; |
174 | } | 175 | } |
175 | 176 | ||
@@ -209,15 +210,19 @@ $video-info-margin-left: 44px; | |||
209 | } | 210 | } |
210 | 211 | ||
211 | my-subscribe-button { | 212 | my-subscribe-button { |
212 | margin-left: 5px; | 213 | @include margin-left(5px); |
213 | } | 214 | } |
214 | } | 215 | } |
215 | 216 | ||
216 | .video-actions-rates { | 217 | .video-actions-rates { |
217 | margin: 0 0 10px; | 218 | @include margin-left(auto); |
219 | @include margin-right(0); | ||
220 | |||
221 | margin-top: 0; | ||
222 | margin-bottom: 10px; | ||
223 | |||
218 | align-items: start; | 224 | align-items: start; |
219 | width: max-content; | 225 | width: max-content; |
220 | margin-left: auto; | ||
221 | 226 | ||
222 | .video-actions { | 227 | .video-actions { |
223 | height: 40px; // Align with the title | 228 | height: 40px; // Align with the title |
@@ -227,7 +232,7 @@ $video-info-margin-left: 44px; | |||
227 | .action-button:not(:first-child), | 232 | .action-button:not(:first-child), |
228 | .action-dropdown, | 233 | .action-dropdown, |
229 | my-video-actions-dropdown { | 234 | my-video-actions-dropdown { |
230 | margin-left: 5px; | 235 | @include margin-left(5px); |
231 | } | 236 | } |
232 | 237 | ||
233 | ::ng-deep.action-button { | 238 | ::ng-deep.action-button { |
@@ -305,7 +310,7 @@ $video-info-margin-left: 44px; | |||
305 | } | 310 | } |
306 | 311 | ||
307 | .icon-text { | 312 | .icon-text { |
308 | margin-left: 3px; | 313 | @include margin-left(3px); |
309 | } | 314 | } |
310 | } | 315 | } |
311 | } | 316 | } |
@@ -341,8 +346,11 @@ $video-info-margin-left: 44px; | |||
341 | } | 346 | } |
342 | 347 | ||
343 | .video-info-description { | 348 | .video-info-description { |
344 | margin: 20px 0; | 349 | @include margin-left($video-info-margin-left); |
345 | margin-left: $video-info-margin-left; | 350 | @include margin-right(0); |
351 | |||
352 | margin-top: 20px; | ||
353 | margin-bottom: 20px; | ||
346 | font-size: 15px; | 354 | font-size: 15px; |
347 | 355 | ||
348 | .video-info-description-html { | 356 | .video-info-description-html { |
@@ -355,7 +363,7 @@ $video-info-margin-left: 44px; | |||
355 | 363 | ||
356 | .glyphicon, | 364 | .glyphicon, |
357 | .description-loading { | 365 | .description-loading { |
358 | margin-left: 3px; | 366 | @include margin-left(3px); |
359 | } | 367 | } |
360 | 368 | ||
361 | .description-loading { | 369 | .description-loading { |
@@ -376,7 +384,7 @@ $video-info-margin-left: 44px; | |||
376 | } | 384 | } |
377 | 385 | ||
378 | .video-attributes { | 386 | .video-attributes { |
379 | margin-left: $video-info-margin-left; | 387 | @include margin-left($video-info-margin-left); |
380 | } | 388 | } |
381 | 389 | ||
382 | .video-attributes .video-attribute { | 390 | .video-attributes .video-attribute { |
@@ -385,8 +393,9 @@ $video-info-margin-left: 44px; | |||
385 | margin-bottom: 12px; | 393 | margin-bottom: 12px; |
386 | 394 | ||
387 | .video-attribute-label { | 395 | .video-attribute-label { |
396 | @include padding-right(5px); | ||
397 | |||
388 | min-width: 142px; | 398 | min-width: 142px; |
389 | padding-right: 5px; | ||
390 | display: inline-block; | 399 | display: inline-block; |
391 | color: pvar(--greyForegroundColor); | 400 | color: pvar(--greyForegroundColor); |
392 | font-weight: $font-bold; | 401 | font-weight: $font-bold; |
@@ -413,8 +422,9 @@ $video-info-margin-left: 44px; | |||
413 | } | 422 | } |
414 | 423 | ||
415 | my-recommended-videos { | 424 | my-recommended-videos { |
425 | @include padding-left(15px); | ||
426 | |||
416 | display: block; | 427 | display: block; |
417 | padding-left: 15px; | ||
418 | min-width: 250px; | 428 | min-width: 250px; |
419 | } | 429 | } |
420 | 430 | ||
@@ -432,14 +442,15 @@ my-video-comments { | |||
432 | 442 | ||
433 | @media screen and (max-width: $small-view) { | 443 | @media screen and (max-width: $small-view) { |
434 | .privacy-concerns { | 444 | .privacy-concerns { |
435 | margin-left: $menu-width - 15px; // Menu is absolute | 445 | @include margin-left($menu-width - 15px); // Menu is absolute |
436 | } | 446 | } |
437 | } | 447 | } |
438 | 448 | ||
439 | :host-context(.expanded) { | 449 | :host-context(.expanded) { |
440 | .privacy-concerns { | 450 | .privacy-concerns { |
451 | @include margin-left(-15px); | ||
452 | |||
441 | width: 100%; | 453 | width: 100%; |
442 | margin-left: -15px; | ||
443 | } | 454 | } |
444 | } | 455 | } |
445 | 456 | ||
@@ -473,8 +484,9 @@ my-video-comments { | |||
473 | } | 484 | } |
474 | 485 | ||
475 | .privacy-concerns-button { | 486 | .privacy-concerns-button { |
487 | @include margin-left(auto); | ||
488 | |||
476 | padding: 5px 8px 5px 7px; | 489 | padding: 5px 8px 5px 7px; |
477 | margin-left: auto; | ||
478 | border-radius: 3px; | 490 | border-radius: 3px; |
479 | white-space: nowrap; | 491 | white-space: nowrap; |
480 | cursor: pointer; | 492 | cursor: pointer; |
@@ -487,8 +499,9 @@ my-video-comments { | |||
487 | } | 499 | } |
488 | 500 | ||
489 | .privacy-concerns-okay { | 501 | .privacy-concerns-okay { |
502 | @include margin-left(10px); | ||
503 | |||
490 | background-color: pvar(--mainColor); | 504 | background-color: pvar(--mainColor); |
491 | margin-left: 10px; | ||
492 | } | 505 | } |
493 | } | 506 | } |
494 | 507 | ||
@@ -525,7 +538,7 @@ my-video-comments { | |||
525 | } | 538 | } |
526 | 539 | ||
527 | my-recommended-videos { | 540 | my-recommended-videos { |
528 | padding-left: 0; | 541 | @include padding-left(0); |
529 | } | 542 | } |
530 | } | 543 | } |
531 | 544 | ||