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: calc(66vh * 1.77);
  44     height: 66vh;
  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-dropdown {
 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             &.action-button-save {
 216               my-global-icon {
 217                 top: 0 !important;
 218                 right: -1px;
 219               }
 220             }
 221
 222             .icon-text {
 223               margin-left: 3px;
 224             }
 225           }
 226
 227           .action-dropdown {
 228             display: inline-block;
 229
 230             .dropdown-menu .dropdown-item {
 231               padding: 6px 24px;
 232
 233               my-global-icon {
 234                 width: 24px;
 235
 236                 margin-right: 10px;
 237                 position: relative;
 238                 top: -2px;
 239               }
 240             }
 241           }
 242         }
 243
 244         .video-info-likes-dislikes-bar {
 245           $likes-bar-height: 2px;
 246           height: $likes-bar-height;
 247           margin-top: -$likes-bar-height;
 248           width: 186px;
 249           background-color: $red;
 250           position: relative;
 251           top: 10px;
 252
 253           .likes-bar {
 254             height: 100%;
 255             background-color: $green;
 256           }
 257         }
 258       }
 259     }
 260
 261     .video-info-description {
 262       margin: 20px 0;
 263       font-size: 15px;
 264
 265       .video-info-description-html {
 266         @include peertube-word-wrap;
 267       }
 268
 269       .glyphicon, .description-loading {
 270         margin-left: 3px;
 271       }
 272
 273       .description-loading {
 274         display: inline-block;
 275       }
 276
 277       .video-info-description-more {
 278         cursor: pointer;
 279         font-weight: $font-semibold;
 280         color: $grey-foreground-color;
 281         font-size: 14px;
 282
 283         .glyphicon {
 284           position: relative;
 285           top: 2px;
 286         }
 287       }
 288     }
 289
 290     .video-attributes .video-attribute {
 291       font-size: 13px;
 292       display: block;
 293       margin-bottom: 12px;
 294
 295       .video-attribute-label {
 296         min-width: 142px;
 297         padding-right: 5px;
 298         display: inline-block;
 299         color: $grey-foreground-color;
 300         font-weight: $font-bold;
 301       }
 302
 303       a.video-attribute-value {
 304         @include disable-default-a-behaviour;
 305         color: var(--mainForegroundColor);
 306
 307         &:hover {
 308           opacity: 0.9;
 309         }
 310       }
 311
 312       &.video-attribute-tags {
 313         .video-attribute-value:not(:nth-child(2)) {
 314           &::before {
 315             content: ', '
 316           }
 317         }
 318       }
 319     }
 320   }
 321
 322   /deep/ .other-videos {
 323     padding-left: 15px;
 324     width: $other-videos-width;
 325
 326     .title-page {
 327       margin-top: 0 !important;
 328     }
 329
 330     .video-miniature {
 331       display: flex;
 332       height: 100%;
 333       margin-bottom: 20px;
 334       flex-wrap: wrap;
 335
 336       .video-miniature-information {
 337         flex-grow: 1;
 338       }
 339
 340       .video-thumbnail {
 341         margin-right: 10px
 342       }
 343     }
 344   }
 345 }
 346
 347 my-video-comments {
 348   display: inline-block;
 349   width: 100%;
 350   margin-bottom: 20px;
 351 }
 352
 353 // If the view is not expanded, take into account the menu
 354 .privacy-concerns {
 355   width: calc(100% - #{$menu-width});
 356 }
 357
 358 @media screen and (max-width: $small-view) {
 359   .privacy-concerns {
 360     margin-left: $menu-width;
 361   }
 362 }
 363
 364 :host-context(.expanded) {
 365   .privacy-concerns {
 366     width: 100%;
 367     margin-left: 0;
 368   }
 369 }
 370
 371 .privacy-concerns {
 372   position: fixed;
 373   bottom: 0;
 374
 375   padding: 5px 15px;
 376
 377   display: flex;
 378   align-items: center;
 379   justify-content: flex-start;
 380   background-color: rgba(0, 0, 0, 0.9);
 381   color: #fff;
 382
 383   .privacy-concerns-text {
 384     margin: 0 5px;
 385   }
 386
 387   a {
 388     @include disable-default-a-behaviour;
 389
 390     color: var(--mainColor);
 391     transition: color 0.3s;
 392
 393     &:hover {
 394       color: #fff;
 395     }
 396   }
 397
 398   .privacy-concerns-okay {
 399     background-color: var(--mainColor);
 400     padding: 5px 8px 5px 7px;
 401     margin-left: auto;
 402     border-radius: 3px;
 403     cursor: pointer;
 404     transition: background-color 0.3s;
 405     font-weight: $font-semibold;
 406
 407     &:hover {
 408       background-color: #000;
 409     }
 410   }
 411 }
 412
 413 @media screen and (min-width: map-get($grid-breakpoints, xl)) {
 414   .video-bottom .video-info {
 415     max-width: calc(100% - #{$other-videos-width});
 416   }
 417 }
 418
 419 @media screen and (max-width: 1600px) {
 420   .video-bottom .video-info .video-attributes .video-attribute {
 421     margin-bottom: 5px;
 422   }
 423 }
 424
 425 @media screen and (max-width: 1300px) {
 426   .privacy-concerns {
 427     font-size: 12px;
 428     padding: 2px 5px;
 429
 430     .privacy-concerns-text {
 431       margin: 0;
 432     }
 433   }
 434 }
 435
 436 @media screen and (max-width: 600px) {
 437   .video-bottom {
 438     margin: 20px 0 0 0;
 439
 440     .video-info {
 441       padding: 0;
 442
 443       .video-info-first-row {
 444
 445         .video-info-name {
 446           font-size: 20px;
 447           height: auto;
 448         }
 449       }
 450     }
 451   }
 452
 453   /deep/ .other-videos {
 454     padding-left: 0 !important;
 455
 456     /deep/ .video-miniature  {
 457       flex-direction: column;
 458     }
 459   }
 460
 461   .privacy-concerns {
 462     width: 100%;
 463
 464     strong {
 465       display: none;
 466     }
 467   }
 468 }
 469
 470 @media screen and (max-width: 450px) {
 471   .video-bottom {
 472     .action-button .icon-text {
 473       display: none !important;
 474     }
 475
 476     .video-info .video-info-first-row {
 477       .video-info-name {
 478         font-size: 18px;
 479       }
 480
 481       .video-info-date-views {
 482         font-size: 14px;
 483       }
 484
 485       .video-actions-rates {
 486         margin-top: 10px;
 487       }
 488     }
 489
 490     .video-info-description {
 491       font-size: 14px !important;
 492     }
 493   }
 494 }