client/src/app/videos/+video-watch/video-watch.component.scss

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