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