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