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: 888px;
  41     height: 500px;
  42
  43     &.vjs-theater-enabled {
  44       height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
  45       width: 100%;
  46     }
  47
  48     // VideoJS create an inner video player
  49     video {
  50       outline: 0;
  51       position: relative !important;
  52     }
  53   }
  54
  55   @media screen and (max-width: 600px) {
  56     .remote-server-down,
  57     /deep/ .video-js {
  58       width: 100vw;
  59       height: calc(100vw / 1.7); // 16/9
  60     }
  61   }
  62 }
  63
  64 .alert {
  65   text-align: center;
  66 }
  67
  68 #video-not-found {
  69   height: 300px;
  70   line-height: 300px;
  71   margin-top: 50px;
  72   text-align: center;
  73   font-weight: $font-semibold;
  74   font-size: 15px;
  75 }
  76
  77 .video-bottom {
  78   margin-top: 40px;
  79
  80   .video-info {
  81     flex-grow: 1;
  82     // Set min width for flex item
  83     min-width: 1px;
  84     max-width: 100%;
  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: 15px;
 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   width: 100%;
 390   margin-bottom: 20px;
 391 }
 392
 393 // If the view is not expanded, take into account the menu
 394 .privacy-concerns {
 395   width: calc(100% - #{$menu-width});
 396 }
 397
 398 @media screen and (max-width: $small-view) {
 399   .privacy-concerns {
 400     margin-left: $menu-width;
 401   }
 402 }
 403
 404 :host-context(.expanded) {
 405   .privacy-concerns {
 406     width: 100%;
 407     margin-left: 0;
 408   }
 409 }
 410
 411 .privacy-concerns {
 412   position: fixed;
 413   bottom: 0;
 414
 415   padding: 5px 15px;
 416
 417   display: flex;
 418   align-items: center;
 419   justify-content: flex-start;
 420   background-color: rgba(0, 0, 0, 0.9);
 421   color: #fff;
 422
 423   .privacy-concerns-text {
 424     margin: 0 5px;
 425   }
 426
 427   a {
 428     @include disable-default-a-behaviour;
 429
 430     color: var(--mainColor);
 431     transition: color 0.3s;
 432
 433     &:hover {
 434       color: #fff;
 435     }
 436   }
 437
 438   .privacy-concerns-okay {
 439     background-color: var(--mainColor);
 440     padding: 5px 8px 5px 7px;
 441     margin-left: auto;
 442     border-radius: 3px;
 443     cursor: pointer;
 444     transition: background-color 0.3s;
 445     font-weight: $font-semibold;
 446
 447     &:hover {
 448       background-color: #000;
 449     }
 450   }
 451 }
 452
 453
 454 @media screen and (max-width: 1600px) {
 455   .video-bottom .video-info .video-attributes .video-attribute {
 456     margin-bottom: 5px;
 457   }
 458 }
 459
 460 @media screen and (max-width: 1300px) {
 461   .privacy-concerns {
 462     font-size: 12px;
 463     padding: 2px 5px;
 464
 465     .privacy-concerns-text {
 466       margin: 0;
 467     }
 468   }
 469 }
 470
 471 @media screen and (max-width: 600px) {
 472   .video-bottom {
 473     margin: 20px 0 0 0;
 474
 475     .video-info {
 476
 477       .video-info-first-row {
 478
 479         .video-info-name {
 480           font-size: 20px;
 481           height: auto;
 482         }
 483       }
 484     }
 485   }
 486
 487   /deep/ .other-videos {
 488     /deep/ .video-miniature  {
 489       flex-direction: column;
 490     }
 491   }
 492
 493   .privacy-concerns {
 494     width: 100%;
 495
 496     strong {
 497       display: none;
 498     }
 499   }
 500 }
 501
 502 @media screen and (max-width: 450px) {
 503   .video-bottom  .action-button .icon-text {
 504     display: none !important;
 505   }
 506 }