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

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