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