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