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         width: 86px;
 305         display: inline-block;
 306         color: #585858;
 307         font-weight: $font-bold;
 308       }
 309
 310       a.video-attribute-value {
 311         @include disable-default-a-behaviour;
 312         color: #000;
 313
 314         &:hover {
 315           opacity: 0.9;
 316         }
 317       }
 318
 319       &.video-attribute-tags {
 320         .video-attribute-value:not(:nth-child(2)) {
 321           &::before {
 322             content: ', '
 323           }
 324         }
 325       }
 326     }
 327   }
 328
 329   .other-videos {
 330     padding-left: 1em;
 331
 332     .title-page {
 333       margin-top: 0;
 334     }
 335
 336     /deep/ .video-miniature {
 337       display: flex;
 338       height: 100%;
 339       margin-bottom: 20px;
 340       flex-wrap: wrap;
 341
 342       .video-miniature-information {
 343         flex-grow: 1;
 344       }
 345     }
 346   }
 347 }
 348
 349 // If the view is not expanded, take into account the menu
 350 .privacy-concerns {
 351   width: calc(100% - #{$menu-width});
 352 }
 353
 354 :host-context(.expanded) {
 355   .privacy-concerns {
 356     width: 100%;
 357   }
 358 }
 359
 360 .privacy-concerns {
 361   position: fixed;
 362   bottom: 0;
 363
 364   padding: 5px 15px;
 365
 366   display: flex;
 367   align-items: center;
 368   justify-content: flex-start;
 369   background-color: rgba(0, 0, 0, 0.9);
 370   color: #fff;
 371
 372   .privacy-concerns-text {
 373     margin: 0 5px;
 374   }
 375
 376   a {
 377     @include disable-default-a-behaviour;
 378
 379     color: $orange-color;
 380     transition: color 0.3s;
 381
 382     &:hover {
 383       color: #fff;
 384     }
 385   }
 386
 387   .privacy-concerns-okay {
 388     background-color: $orange-color;
 389     padding: 5px 8px 5px 7px;
 390     margin-left: auto;
 391     border-radius: 3px;
 392     cursor: pointer;
 393     transition: background-color 0.3s;
 394     font-weight: $font-semibold;
 395
 396     &:hover {
 397       background-color: #000;
 398     }
 399   }
 400 }
 401
 402
 403 @media screen and (max-width: 1600px) {
 404   .video-bottom {
 405     .video-info {
 406       margin-right: 20px;
 407
 408       .video-info-first-row {
 409         flex-direction: column;
 410         margin-bottom: 30px;
 411
 412         .video-actions-rates {
 413           margin-top: 20px;
 414           align-items: start;
 415
 416           .video-info-likes-dislikes-bar {
 417             margin-top: 10px;
 418           }
 419         }
 420       }
 421
 422       .video-info-date-views {
 423         flex-direction: column;
 424         margin-bottom: 30px;
 425
 426         .video-info-likes-dislikes-bar {
 427           margin-top: 0;
 428         }
 429       }
 430
 431       .video-attributes .video-attribute {
 432         margin-bottom: 5px;
 433       }
 434     }
 435   }
 436 }
 437
 438 @media screen and (max-width: 1300px) {
 439   .video-bottom {
 440     flex-direction: column;
 441   }
 442
 443   .other-videos {
 444     padding-left: 0;
 445
 446     /deep/ .video-miniature .video-miniature-information {
 447       margin-left: 10px;
 448     }
 449   }
 450
 451   .privacy-concerns {
 452     font-size: 12px;
 453     padding: 2px 5px;
 454
 455     .privacy-concerns-text {
 456       margin: 0;
 457     }
 458   }
 459 }
 460
 461 @media screen and (max-width: 600px) {
 462   .video-bottom {
 463     margin: 20px 0 0 0;
 464
 465     .video-info {
 466
 467       .video-info-first-row {
 468
 469         .video-info-name {
 470           font-size: 20px;
 471           height: auto;
 472         }
 473       }
 474     }
 475   }
 476
 477   .privacy-concerns {
 478     width: 100%;
 479
 480     strong {
 481       display: none;
 482     }
 483   }
 484 }
 485
 486 @media screen and (max-width: 450px) {
 487   .video-bottom  .action-button .icon-text {
 488     display: none !important;
 489   }
 490 }