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