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