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