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