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         flex-grow: 1;
 103         margin-bottom: 10px;
 104         margin-right: 10px;
 105         font-size: 16px;
 106       }
 107
 108       .video-info-channel {
 109         font-weight: $font-semibold;
 110         font-size: 15px;
 111
 112         a {
 113           @include disable-default-a-behaviour;
 114
 115           color: var(--mainForegroundColor);
 116
 117           &:hover {
 118             opacity: 0.8;
 119           }
 120
 121           img {
 122             @include avatar(18px);
 123
 124             margin: -2px 2px 0 5px;
 125           }
 126         }
 127
 128         my-subscribe-button {
 129           margin-left: 5px;
 130         }
 131       }
 132
 133       .video-info-by {
 134
 135         a {
 136           @include disable-default-a-behaviour;
 137
 138           display: inline;
 139           align-items: center;
 140           font-size: 13px;
 141           color: var(--mainForegroundColor);
 142
 143           span:hover {
 144             opacity: 0.8;
 145           }
 146
 147           img {
 148             @include avatar(18px);
 149
 150             margin-top: -2px;
 151             margin-left: 7px;
 152           }
 153         }
 154
 155         my-help {
 156           position: relative;
 157           top: 1px;
 158           margin-left: 2px;
 159         }
 160       }
 161
 162       my-video-feed {
 163         margin-left: 5px;
 164         margin-top: 1px;
 165       }
 166
 167       .video-actions-rates {
 168         margin: 20px 0 10px 0;
 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: $red;
 290           position: relative;
 291           top: 10px;
 292
 293           .likes-bar {
 294             height: 100%;
 295             background-color: $green;
 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: var(--mainForegroundColor);
 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     width: 260px;
 365
 366     .title-page {
 367       margin-top: 0 !important;
 368     }
 369
 370     .video-miniature {
 371       display: flex;
 372       height: 100%;
 373       margin-bottom: 20px;
 374       flex-wrap: wrap;
 375
 376       .video-miniature-information {
 377         flex-grow: 1;
 378       }
 379
 380       .video-thumbnail {
 381         margin-right: 10px
 382       }
 383     }
 384   }
 385 }
 386
 387 my-video-comments {
 388   display: inline-block;
 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 }