]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/videos/+video-watch/video-watch.component.scss
Add commentor name alongside fid for video comments
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.scss
1 @import '_variables';
2 @import '_mixins';
3 @import '_bootstrap-variables';
4 @import '_miniature';
5
6 $player-factor: 1.7; // 16/9
7 $video-info-margin-left: 44px;
8
9 @function getPlayerHeight($width){
10 @return calc(#{$width} / #{$player-factor})
11 }
12
13 @function getPlayerWidth($height){
14 @return calc(#{$height} * #{$player-factor})
15 }
16
17 @mixin playlist-below-player {
18 width: 100% !important;
19 height: auto !important;
20 max-height: 300px !important;
21 max-width: initial;
22 border-bottom: 1px solid $separator-border-color !important;
23 }
24
25 .root {
26 &.theater-enabled #video-wrapper {
27 flex-direction: column;
28 justify-content: center;
29
30 #videojs-wrapper {
31 width: 100%;
32 }
33
34 ::ng-deep .video-js {
35 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
36
37 height: $height;
38 width: 100%;
39 max-width: initial;
40 }
41
42 my-video-watch-playlist ::ng-deep .playlist {
43 @include playlist-below-player;
44 }
45 }
46 }
47
48 .blacklisted-label {
49 font-weight: $font-semibold;
50 }
51
52 #video-wrapper {
53 background-color: #000;
54 display: flex;
55 justify-content: center;
56 margin: 0 -15px;
57
58 #videojs-wrapper {
59 display: flex;
60 justify-content: center;
61 flex-grow: 1;
62 }
63
64 .remote-server-down {
65 color: #fff;
66 display: flex;
67 flex-direction: column;
68 align-items: center;
69 text-align: center;
70 justify-content: center;
71 background-color: #141313;
72 width: 100%;
73 font-size: 24px;
74 height: 500px;
75
76 @media screen and (max-width: 1000px) {
77 font-size: 20px;
78 }
79
80 @media screen and (max-width: 600px) {
81 font-size: 16px;
82 }
83 }
84
85 ::ng-deep .video-js {
86 width: 100%;
87 max-width: getPlayerWidth(66vh);
88 height: 66vh;
89
90 // VideoJS create an inner video player
91 video {
92 outline: 0;
93 position: relative !important;
94 }
95 }
96
97 @media screen and (max-width: 600px) {
98 .remote-server-down,
99 ::ng-deep .video-js {
100 width: 100vw;
101 height: getPlayerHeight(100vw)
102 }
103 }
104 }
105
106 .alert {
107 text-align: center;
108 border-radius: 0;
109 }
110
111 .flex-direction-column {
112 flex-direction: column;
113 }
114
115 #video-not-found {
116 height: 300px;
117 line-height: 300px;
118 margin-top: 50px;
119 text-align: center;
120 font-weight: $font-semibold;
121 font-size: 15px;
122 }
123
124 .video-bottom {
125 display: flex;
126 margin-top: 40px;
127
128 .video-info {
129 flex-grow: 1;
130 // Set min width for flex item
131 min-width: 1px;
132 max-width: 100%;
133
134 .video-info-first-row {
135 display: flex;
136
137 & > div:first-child {
138 flex-grow: 1;
139 }
140
141 .video-info-name {
142 margin-right: 30px;
143 min-height: 40px; // Align with the action buttons
144 font-size: 27px;
145 font-weight: $font-semibold;
146 flex-grow: 1;
147 }
148
149 .video-info-first-row-bottom {
150 display: grid;
151 grid-template-columns: 1fr auto;
152 align-items: center;
153 width: 100%;
154 }
155
156 .video-info-date-views {
157 flex-grow: 1;
158 align-self: start;
159 margin-bottom: 10px;
160 margin-right: 10px;
161 font-size: 1em;
162 }
163
164 .video-info-channel {
165 font-weight: $font-semibold;
166 font-size: 15px;
167
168 a {
169 @include disable-default-a-behaviour;
170
171 color: var(--mainForegroundColor);
172
173 &:hover {
174 opacity: 0.8;
175 }
176
177 img {
178 @include avatar(18px);
179
180 margin: -2px 5px 0 0;
181 }
182 }
183
184 .video-info-channel-left {
185 flex-grow: 1;
186
187 .video-info-channel-left-links {
188 display: flex;
189 flex-direction: column;
190 position: relative;
191 line-height: 1.3;
192
193 a:nth-of-type(2) {
194 font-weight: 500;
195 font-size: 90%;
196 }
197 }
198 }
199
200 my-subscribe-button {
201 margin-left: 5px;
202 }
203 }
204
205 my-feed {
206 margin-left: 5px;
207 margin-top: 1px;
208 }
209
210 .video-actions-rates {
211 margin: 0 0 10px 0;
212 align-items: start;
213 align-self: end;
214 width: max-content;
215
216 .video-actions {
217 height: 40px; // Align with the title
218 display: flex;
219 align-items: center;
220
221 .action-button:not(:first-child),
222 .action-dropdown,
223 my-video-actions-dropdown {
224 margin-left: 10px;
225 }
226
227 .action-button {
228 @include peertube-button;
229 @include grey-button;
230 @include button-with-icon(21px, 0, -1px);
231 @include apply-svg-color($grey-foreground-color);
232
233 font-size: 15px;
234 font-weight: $font-semibold;
235 display: inline-block;
236 padding: 0 10px 0 10px;
237 white-space: nowrap;
238
239 &::after {
240 display: none;
241 }
242
243 .action-button-like,
244 .action-button-dislike {
245 .count {
246 margin-right: 5px;
247 }
248 }
249
250 &.action-button-like.activated {
251 background-color: $green;
252
253 .count {
254 color: #fff;
255 }
256
257 my-global-icon {
258 @include apply-svg-color(#fff);
259 }
260 }
261
262 &.action-button-dislike.activated {
263 background-color: $red;
264
265 .count {
266 color: #fff;
267 }
268
269 my-global-icon {
270 @include apply-svg-color(#fff);
271 }
272 }
273
274 &.action-button-support {
275 color: var(--supportButtonColor);
276 background-color: var(--supportButtonBackgroundColor);
277
278 &:hover {
279 opacity: 0.9;
280 }
281
282 my-global-icon {
283 @include apply-svg-color(var(--supportButtonColor));
284 }
285 }
286
287 &.action-button-save {
288 my-global-icon {
289 top: 0 !important;
290 right: -1px;
291 }
292 }
293
294 .icon-text {
295 margin-left: 3px;
296 }
297 }
298 }
299
300 .video-info-likes-dislikes-bar-outerContainer {
301 position: relative;
302 }
303
304 .video-info-likes-dislikes-bar-innerContainer {
305 position: absolute;
306 height: 30px;
307 }
308
309 .video-info-likes-dislikes-bar {
310 $likes-bar-height: 2px;
311 height: $likes-bar-height;
312 margin-top: -$likes-bar-height;
313 width: 186px;
314 background-color: $red;
315 position: relative;
316 top: 10px;
317
318 .likes-bar {
319 height: 100%;
320 background-color: $green;
321 }
322 }
323 }
324 }
325
326 .video-info-description {
327 margin: 20px 0;
328 margin-left: $video-info-margin-left;
329 font-size: 15px;
330
331 .video-info-description-html {
332 @include peertube-word-wrap;
333
334 /deep/ a {
335 text-decoration: none;
336 }
337 }
338
339 .glyphicon, .description-loading {
340 margin-left: 3px;
341 }
342
343 .description-loading {
344 display: inline-block;
345 }
346
347 .video-info-description-more {
348 cursor: pointer;
349 font-weight: $font-semibold;
350 color: $grey-foreground-color;
351 font-size: 14px;
352
353 .glyphicon {
354 position: relative;
355 top: 2px;
356 }
357 }
358 }
359
360 .video-attributes {
361 margin-left: $video-info-margin-left;
362 }
363
364 .video-attributes .video-attribute {
365 font-size: 13px;
366 display: block;
367 margin-bottom: 12px;
368
369 .video-attribute-label {
370 min-width: 142px;
371 padding-right: 5px;
372 display: inline-block;
373 color: $grey-foreground-color;
374 font-weight: $font-bold;
375 }
376
377 a.video-attribute-value {
378 @include disable-default-a-behaviour;
379 color: var(--mainForegroundColor);
380
381 &:hover {
382 opacity: 0.9;
383 }
384 }
385
386 &.video-attribute-tags {
387 .video-attribute-value:not(:nth-child(2)) {
388 &::before {
389 content: ', '
390 }
391 }
392 }
393 }
394 }
395
396 ::ng-deep .other-videos {
397 padding-left: 15px;
398
399 .title-page {
400 margin: 0 !important;
401 }
402
403 .video-miniature {
404 display: flex;
405 width: max-content;
406 height: 100%;
407 margin-bottom: 20px;
408 flex-wrap: wrap;
409 }
410
411 .video-bottom {
412 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
413 margin-left: 1rem;
414 }
415 @media screen and (max-width: 500px) {
416 margin-left: 0;
417 margin-top: .5rem;
418 }
419 }
420 }
421 }
422
423 my-video-comments {
424 display: inline-block;
425 width: 100%;
426 margin-bottom: 20px;
427 }
428
429 // If the view is not expanded, take into account the menu
430 .privacy-concerns {
431 width: calc(100% - #{$menu-width});
432 }
433
434 @media screen and (max-width: $small-view) {
435 .privacy-concerns {
436 margin-left: $menu-width - 15px; // Menu is absolute
437 }
438 }
439
440 :host-context(.expanded) {
441 .privacy-concerns {
442 width: 100%;
443 margin-left: -15px;
444 }
445 }
446
447 .privacy-concerns {
448 position: fixed;
449 bottom: 0;
450
451 padding: 5px 15px;
452
453 display: flex;
454 flex-wrap: nowrap;
455 align-items: center;
456 justify-content: flex-start;
457 background-color: rgba(0, 0, 0, 0.9);
458 color: #fff;
459
460 .privacy-concerns-text {
461 margin: 0 5px;
462 }
463
464 a {
465 @include disable-default-a-behaviour;
466
467 color: var(--mainColor);
468 transition: color 0.3s;
469
470 &:hover {
471 color: #fff;
472 }
473 }
474
475 .privacy-concerns-okay {
476 background-color: var(--mainColor);
477 padding: 5px 8px 5px 7px;
478 margin-left: auto;
479 border-radius: 3px;
480 cursor: pointer;
481 transition: background-color 0.3s;
482 font-weight: $font-semibold;
483
484 &:hover {
485 background-color: #000;
486 }
487 }
488 }
489
490 @media screen and (max-width: 1600px) {
491 .video-bottom .video-info .video-attributes .video-attribute {
492 margin-bottom: 5px;
493 }
494 }
495
496 @media screen and (max-width: 1300px) {
497 .privacy-concerns {
498 font-size: 12px;
499 padding: 2px 5px;
500
501 .privacy-concerns-text {
502 margin: 0;
503 }
504 }
505 }
506
507 @media screen and (max-width: 1100px) {
508 #video-wrapper {
509 flex-direction: column;
510 justify-content: center;
511
512 my-video-watch-playlist ::ng-deep .playlist {
513 @include playlist-below-player;
514 }
515 }
516
517 .video-bottom {
518 flex-direction: column;
519
520 ::ng-deep .other-videos {
521 padding-left: 0 !important;
522
523 ::ng-deep .video-miniature {
524 flex-direction: row;
525 width: auto;
526 }
527 }
528 }
529 }
530
531 @media screen and (max-width: 600px) {
532 .video-bottom {
533 margin: 20px 0 0 0 !important;
534
535 .video-info {
536 padding: 0;
537
538 .video-info-first-row {
539
540 .video-info-name {
541 font-size: 20px;
542 height: auto;
543 }
544 }
545 }
546 }
547
548 ::ng-deep .other-videos .video-miniature {
549 flex-direction: column;
550 }
551
552 .privacy-concerns {
553 width: 100%;
554
555 strong {
556 display: none;
557 }
558 }
559 }
560
561 @media screen and (max-width: 450px) {
562 .video-bottom {
563 .action-button .icon-text {
564 display: none !important;
565 }
566
567 .video-info .video-info-first-row {
568 .video-info-name {
569 font-size: 18px;
570 }
571
572 .video-info-date-views {
573 font-size: 14px;
574 }
575
576 .video-actions-rates {
577 margin-top: 10px;
578 }
579 }
580
581 .video-info-description {
582 font-size: 14px !important;
583 }
584 }
585 }