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

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