diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch')
7 files changed, 28 insertions, 20 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss index 54e61eac4..7743bd41d 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss | |||
@@ -31,7 +31,7 @@ form { | |||
31 | padding-right: $markdown-icon-width + 15px !important; | 31 | padding-right: $markdown-icon-width + 15px !important; |
32 | 32 | ||
33 | @media screen and (max-width: 600px) { | 33 | @media screen and (max-width: 600px) { |
34 | padding-right: $markdown-icon-width + 19px !important; | 34 | padding-right: $markdown-icon-width + 19px !important; |
35 | } | 35 | } |
36 | 36 | ||
37 | &:focus::placeholder { | 37 | &:focus::placeholder { |
@@ -57,7 +57,9 @@ form { | |||
57 | } | 57 | } |
58 | } | 58 | } |
59 | 59 | ||
60 | &:focus, &:active, &:hover { | 60 | &:focus, |
61 | &:active, | ||
62 | &:hover { | ||
61 | my-global-icon svg { | 63 | my-global-icon svg { |
62 | background-color: #C6C6C6; | 64 | background-color: #C6C6C6; |
63 | color: pvar(--mainBackgroundColor); | 65 | color: pvar(--mainBackgroundColor); |
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 f0dcc08b8..a4d2e237c 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 | |||
@@ -62,7 +62,7 @@ my-actor-avatar { | |||
62 | display: inline-flex; | 62 | display: inline-flex; |
63 | padding-right: 6px; | 63 | padding-right: 6px; |
64 | padding-left: 6px; | 64 | padding-left: 6px; |
65 | color: white !important; | 65 | color: #fff !important; |
66 | } | 66 | } |
67 | 67 | ||
68 | .comment-account { | 68 | .comment-account { |
@@ -133,7 +133,10 @@ my-actor-avatar { | |||
133 | cursor: pointer; | 133 | cursor: pointer; |
134 | margin-right: 10px; | 134 | margin-right: 10px; |
135 | 135 | ||
136 | &:hover, &:active, &:focus, &:focus-visible { | 136 | &:hover, |
137 | &:active, | ||
138 | &:focus, | ||
139 | &:focus-visible { | ||
137 | color: pvar(--mainForegroundColor); | 140 | color: pvar(--mainForegroundColor); |
138 | } | 141 | } |
139 | } | 142 | } |
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss index e6778e1a9..a7e858069 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss | |||
@@ -11,7 +11,8 @@ | |||
11 | cursor: pointer; | 11 | cursor: pointer; |
12 | } | 12 | } |
13 | 13 | ||
14 | .glyphicon, .comment-thread-loading { | 14 | .glyphicon, |
15 | .comment-thread-loading { | ||
15 | margin-right: 5px; | 16 | margin-right: 5px; |
16 | display: inline-block; | 17 | display: inline-block; |
17 | font-size: 13px; | 18 | font-size: 13px; |
@@ -40,7 +41,7 @@ | |||
40 | #dropdown-sort-comments { | 41 | #dropdown-sort-comments { |
41 | font-weight: 600; | 42 | font-weight: 600; |
42 | text-transform: uppercase; | 43 | text-transform: uppercase; |
43 | border: none; | 44 | border: 0; |
44 | transform: translateY(-7%); | 45 | transform: translateY(-7%); |
45 | } | 46 | } |
46 | 47 | ||
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss index c9fae6f27..5e0373afc 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss | |||
@@ -8,7 +8,8 @@ | |||
8 | margin-bottom: 25px; | 8 | margin-bottom: 25px; |
9 | flex-wrap: wrap-reverse; | 9 | flex-wrap: wrap-reverse; |
10 | 10 | ||
11 | .title-page.active, .title-page.title-page-single { | 11 | .title-page.active, |
12 | .title-page.title-page-single { | ||
12 | margin-bottom: unset; | 13 | margin-bottom: unset; |
13 | margin-right: .5rem !important; | 14 | margin-right: .5rem !important; |
14 | } | 15 | } |
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss index 0b0a2a899..b3f93b83c 100644 --- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss | |||
@@ -45,7 +45,7 @@ | |||
45 | 45 | ||
46 | my-global-icon { | 46 | my-global-icon { |
47 | &:not(.active) { | 47 | &:not(.active) { |
48 | opacity: .5 | 48 | opacity: .5; |
49 | } | 49 | } |
50 | 50 | ||
51 | ::ng-deep { | 51 | ::ng-deep { |
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html index eadb2148a..4779602d2 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html | |||
@@ -79,7 +79,7 @@ | |||
79 | <span [innerHTML]="getRatePopoverText()"></span> | 79 | <span [innerHTML]="getRatePopoverText()"></span> |
80 | </ng-template> | 80 | </ng-template> |
81 | 81 | ||
82 | <div class="video-actions fullWidth justify-content-end"> | 82 | <div class="video-actions full-width justify-content-end"> |
83 | <button | 83 | <button |
84 | [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()" | 84 | [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()" |
85 | class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike" | 85 | class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike" |
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 e8ad10a11..301762695 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -6,12 +6,12 @@ | |||
6 | $player-factor: 16/9; | 6 | $player-factor: 16/9; |
7 | $video-info-margin-left: 44px; | 7 | $video-info-margin-left: 44px; |
8 | 8 | ||
9 | @function getPlayerHeight($width){ | 9 | @function getPlayerHeight ($width) { |
10 | @return calc(#{$width} / #{$player-factor}) | 10 | @return calc(#{$width} / #{$player-factor}); |
11 | } | 11 | } |
12 | 12 | ||
13 | @function getPlayerWidth($height){ | 13 | @function getPlayerWidth ($height) { |
14 | @return calc(#{$height} * #{$player-factor}) | 14 | @return calc(#{$height} * #{$player-factor}); |
15 | } | 15 | } |
16 | 16 | ||
17 | @mixin playlist-below-player { | 17 | @mixin playlist-below-player { |
@@ -24,11 +24,11 @@ $video-info-margin-left: 44px; | |||
24 | 24 | ||
25 | .root { | 25 | .root { |
26 | &.theater-enabled #video-wrapper { | 26 | &.theater-enabled #video-wrapper { |
27 | $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); | ||
28 | |||
27 | flex-direction: column; | 29 | flex-direction: column; |
28 | justify-content: center; | 30 | justify-content: center; |
29 | 31 | ||
30 | $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); | ||
31 | |||
32 | #videojs-wrapper { | 32 | #videojs-wrapper { |
33 | width: 100%; | 33 | width: 100%; |
34 | height: $height; | 34 | height: $height; |
@@ -141,7 +141,7 @@ $video-info-margin-left: 44px; | |||
141 | .video-info-first-row { | 141 | .video-info-first-row { |
142 | display: flex; | 142 | display: flex; |
143 | 143 | ||
144 | & > div:first-child { | 144 | > div:first-child { |
145 | flex-grow: 1; | 145 | flex-grow: 1; |
146 | } | 146 | } |
147 | 147 | ||
@@ -207,7 +207,7 @@ $video-info-margin-left: 44px; | |||
207 | } | 207 | } |
208 | 208 | ||
209 | .video-actions-rates { | 209 | .video-actions-rates { |
210 | margin: 0 0 10px 0; | 210 | margin: 0 0 10px; |
211 | align-items: start; | 211 | align-items: start; |
212 | width: max-content; | 212 | width: max-content; |
213 | margin-left: auto; | 213 | margin-left: auto; |
@@ -231,7 +231,7 @@ $video-info-margin-left: 44px; | |||
231 | font-size: 100%; | 231 | font-size: 100%; |
232 | font-weight: $font-semibold; | 232 | font-weight: $font-semibold; |
233 | display: inline-block; | 233 | display: inline-block; |
234 | padding: 0 10px 0 10px; | 234 | padding: 0 10px; |
235 | white-space: nowrap; | 235 | white-space: nowrap; |
236 | background-color: transparent !important; | 236 | background-color: transparent !important; |
237 | color: pvar(--actionButtonColor); | 237 | color: pvar(--actionButtonColor); |
@@ -346,7 +346,8 @@ $video-info-margin-left: 44px; | |||
346 | } | 346 | } |
347 | } | 347 | } |
348 | 348 | ||
349 | .glyphicon, .description-loading { | 349 | .glyphicon, |
350 | .description-loading { | ||
350 | margin-left: 3px; | 351 | margin-left: 3px; |
351 | } | 352 | } |
352 | 353 | ||
@@ -396,7 +397,7 @@ $video-info-margin-left: 44px; | |||
396 | &.video-attribute-tags { | 397 | &.video-attribute-tags { |
397 | .video-attribute-value:not(:nth-child(2)) { | 398 | .video-attribute-value:not(:nth-child(2)) { |
398 | &::before { | 399 | &::before { |
399 | content: ', ' | 400 | content: ', '; |
400 | } | 401 | } |
401 | } | 402 | } |
402 | } | 403 | } |