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

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