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