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