client/src/app/videos/+video-watch/video-watch.component.scss

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