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