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         flex-grow: 1;
 102         margin-bottom: 10px;
 103         margin-right: 10px;
 104         font-size: 16px;
 105       }
 106
 107       .video-info-channel {
 108         font-weight: $font-semibold;
 109         font-size: 15px;
 110
 111         a {
 112           @include disable-default-a-behaviour;
 113
 114           color: var(--mainForegroundColor);
 115
 116           &:hover {
 117             opacity: 0.8;
 118           }
 119
 120           img {
 121             @include avatar(18px);
 122
 123             margin: -2px 2px 0 5px;
 124           }
 125         }
 126
 127         my-subscribe-button {
 128           margin-left: 5px;
 129         }
 130       }
 131
 132       .video-info-by {
 133
 134         a {
 135           @include disable-default-a-behaviour;
 136
 137           display: inline;
 138           align-items: center;
 139           font-size: 13px;
 140           color: var(--mainForegroundColor);
 141
 142           span:hover {
 143             opacity: 0.8;
 144           }
 145
 146           img {
 147             @include avatar(18px);
 148
 149             margin-top: -2px;
 150             margin-left: 7px;
 151           }
 152         }
 153
 154         my-help {
 155           position: relative;
 156           top: 1px;
 157           margin-left: 2px;
 158         }
 159       }
 160
 161       my-video-feed {
 162         margin-left: 5px;
 163         margin-top: 1px;
 164       }
 165
 166       .video-actions-rates {
 167         margin: 20px 0 10px 0;
 168         align-items: start;
 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: $red;
 289           position: relative;
 290           top: 10px;
 291
 292           .likes-bar {
 293             height: 100%;
 294             background-color: $green;
 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: var(--mainForegroundColor);
 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   /deep/ .other-videos {
 362     padding-left: 1em;
 363     width: 260px;
 364
 365     .title-page {
 366       margin-top: 0 !important;
 367     }
 368
 369     .video-miniature {
 370       display: flex;
 371       height: 100%;
 372       margin-bottom: 20px;
 373       flex-wrap: wrap;
 374
 375       .video-miniature-information {
 376         flex-grow: 1;
 377       }
 378
 379       .video-thumbnail {
 380         margin-right: 10px
 381       }
 382     }
 383   }
 384 }
 385
 386 my-video-comments {
 387   display: inline-block;
 388   width: 100%;
 389   margin-bottom: 20px;
 390 }
 391
 392 // If the view is not expanded, take into account the menu
 393 .privacy-concerns {
 394   width: calc(100% - #{$menu-width});
 395 }
 396
 397 @media screen and (max-width: $small-view) {
 398   .privacy-concerns {
 399     margin-left: $menu-width;
 400   }
 401 }
 402
 403 :host-context(.expanded) {
 404   .privacy-concerns {
 405     width: 100%;
 406     margin-left: 0;
 407   }
 408 }
 409
 410 .privacy-concerns {
 411   position: fixed;
 412   bottom: 0;
 413
 414   padding: 5px 15px;
 415
 416   display: flex;
 417   align-items: center;
 418   justify-content: flex-start;
 419   background-color: rgba(0, 0, 0, 0.9);
 420   color: #fff;
 421
 422   .privacy-concerns-text {
 423     margin: 0 5px;
 424   }
 425
 426   a {
 427     @include disable-default-a-behaviour;
 428
 429     color: var(--mainColor);
 430     transition: color 0.3s;
 431
 432     &:hover {
 433       color: #fff;
 434     }
 435   }
 436
 437   .privacy-concerns-okay {
 438     background-color: var(--mainColor);
 439     padding: 5px 8px 5px 7px;
 440     margin-left: auto;
 441     border-radius: 3px;
 442     cursor: pointer;
 443     transition: background-color 0.3s;
 444     font-weight: $font-semibold;
 445
 446     &:hover {
 447       background-color: #000;
 448     }
 449   }
 450 }
 451
 452
 453 @media screen and (max-width: 1600px) {
 454   .video-bottom .video-info .video-attributes .video-attribute {
 455     margin-bottom: 5px;
 456   }
 457 }
 458
 459 @media screen and (max-width: 1300px) {
 460   /deep/ .other-videos {
 461     padding-left: 0 !important;
 462   }
 463
 464   .privacy-concerns {
 465     font-size: 12px;
 466     padding: 2px 5px;
 467
 468     .privacy-concerns-text {
 469       margin: 0;
 470     }
 471   }
 472 }
 473
 474 @media screen and (max-width: 600px) {
 475   .video-bottom {
 476     margin: 20px 0 0 0;
 477
 478     .video-info {
 479
 480       .video-info-first-row {
 481
 482         .video-info-name {
 483           font-size: 20px;
 484           height: auto;
 485         }
 486       }
 487     }
 488   }
 489
 490   /deep/ .other-videos {
 491     /deep/ .video-miniature  {
 492       flex-direction: column;
 493     }
 494   }
 495
 496   .privacy-concerns {
 497     width: 100%;
 498
 499     strong {
 500       display: none;
 501     }
 502   }
 503 }
 504
 505 @media screen and (max-width: 450px) {
 506   .video-bottom  .action-button .icon-text {
 507     display: none !important;
 508   }
 509 }