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

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