client/src/app/videos/+video-watch/video-watch.component.scss

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