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