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