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: 800px) {
  14       height: auto;
  15     }
  16
  17     // VideoJS create an inner video player
  18     video {
  19       outline: 0;
  20       position: relative !important;
  21     }
  22   }
  23 }
  24
  25 #video-not-found {
  26   height: 300px;
  27   line-height: 300px;
  28   margin-top: 50px;
  29   text-align: center;
  30   font-weight: $font-semibold;
  31   font-size: 15px;
  32 }
  33
  34 .video-bottom {
  35   margin-top: 40px;
  36   display: flex;
  37
  38   .video-info {
  39     flex-grow: 1;
  40     margin-right: 28px;
  41
  42     .video-info-first-row {
  43       display: flex;
  44
  45       & > div:first-child {
  46         flex-grow: 1;
  47       }
  48
  49       .video-info-name {
  50         margin-right: 30px;
  51         min-height: 40px; // Align with the action buttons
  52         font-size: 27px;
  53         font-weight: $font-semibold;
  54         flex-grow: 1;
  55       }
  56
  57       .video-info-date-views {
  58         font-size: 16px;
  59         margin-bottom: 10px;
  60         flex-grow: 1;
  61       }
  62
  63       .video-info-channel {
  64         font-weight: $font-semibold;
  65         font-size: 15px;
  66       }
  67
  68       .video-info-by {
  69         display: flex;
  70         align-items: center;
  71         font-size: 13px;
  72
  73         img {
  74           @include avatar(18px);
  75
  76           margin-left: 7px;
  77         }
  78       }
  79
  80       .video-actions-rates {
  81         display: flex;
  82         flex-direction: column;
  83         align-items: flex-end;
  84
  85         .video-actions {
  86           height: 40px; // Align with the title
  87           display: flex;
  88           align-items: center;
  89
  90           .action-button:not(:first-child), .action-more {
  91             margin-left: 10px;
  92           }
  93
  94           .action-button {
  95             @include peertube-button;
  96             @include grey-button;
  97
  98             font-size: 15px;
  99             font-weight: $font-semibold;
 100             display: inline-block;
 101             padding: 0 10px 0 10px;
 102             white-space: nowrap;
 103
 104             .icon {
 105               @include icon(21px);
 106
 107               position: relative;
 108               top: -2px;
 109
 110               &.icon-like {
 111                 background-image: url('../../../assets/images/video/like-grey.svg');
 112               }
 113
 114               &.icon-dislike {
 115                 background-image: url('../../../assets/images/video/dislike-grey.svg');
 116               }
 117
 118               &.icon-support {
 119                 background-image: url('../../../assets/images/video/heart.svg');
 120               }
 121
 122               &.icon-share {
 123                 background-image: url('../../../assets/images/video/share.svg');
 124               }
 125
 126               &.icon-more {
 127                 background-image: url('../../../assets/images/video/more.svg');
 128                 top: -1px;
 129               }
 130             }
 131
 132             &.action-button-share {
 133               width: 82px;
 134             }
 135
 136             &.action-button-like.activated {
 137               background-color: #39CC0B;
 138
 139               .icon-like {
 140                 background-image: url('../../../assets/images/video/like-white.svg');
 141               }
 142             }
 143
 144             &.action-button-dislike.activated {
 145               background-color: #FF0000;
 146
 147               .icon-dislike {
 148                 background-image: url('../../../assets/images/video/dislike-white.svg');
 149               }
 150             }
 151           }
 152
 153           .action-more {
 154             display: inline-block;
 155
 156             .dropdown-menu .dropdown-item {
 157               padding: 6px 24px;
 158
 159               .icon {
 160                 @include icon(24px);
 161
 162                 margin-right: 10px;
 163                 position: relative;
 164                 top: -1px;
 165
 166                 &.icon-download {
 167                   background-image: url('../../../assets/images/video/download-black.svg');
 168                 }
 169
 170                 &.icon-edit {
 171                   background-image: url('../../../assets/images/global/edit-black.svg');
 172                 }
 173
 174                 &.icon-alert {
 175                   background-image: url('../../../assets/images/video/alert.svg');
 176                 }
 177
 178                 &.icon-blacklist {
 179                   background-image: url('../../../assets/images/video/blacklist.svg');
 180                 }
 181               }
 182             }
 183           }
 184         }
 185
 186         .video-info-likes-dislikes-bar {
 187           height: 5px;
 188           width: 186px;
 189           background-color: #E5E5E5;
 190           margin-top: 25px;
 191
 192           .likes-bar {
 193             height: 100%;
 194             background-color: #39CC0B;
 195           }
 196         }
 197       }
 198     }
 199
 200     .video-info-description {
 201       margin: 20px 0;
 202       font-size: 15px;
 203
 204       .video-info-description-html {
 205         word-break: break-all;
 206       }
 207
 208       .description-loading {
 209         display: inline-block;
 210       }
 211
 212       .video-info-description-more {
 213         cursor: pointer;
 214         font-weight: $font-semibold;
 215         color: #585858;
 216         font-size: 14px;
 217
 218         .glyphicon {
 219           position: relative;
 220           top: 2px;
 221         }
 222       }
 223     }
 224
 225     .video-attributes .video-attribute {
 226       font-size: 13px;
 227       display: block;
 228       margin-bottom: 12px;
 229
 230       .video-attribute-label {
 231         width: 86px;
 232         display: inline-block;
 233         color: #585858;
 234         font-weight: $font-bold;
 235       }
 236     }
 237   }
 238
 239   .other-videos {
 240     .title-page {
 241       margin-top: 0;
 242     }
 243
 244     /deep/ .video-miniature {
 245       display: flex;
 246       height: 100%;
 247       margin-bottom: 20px;
 248
 249       .video-miniature-information {
 250         margin-left: 10px;
 251       }
 252     }
 253   }
 254 }
 255
 256
 257 @media screen and (max-width: 1600px) {
 258   .video-bottom {
 259     .video-info {
 260       margin-right: 0;
 261
 262       .video-info-first-row {
 263         flex-direction: column;
 264         margin-bottom: 30px;
 265
 266         .video-actions-rates {
 267           margin-top: 20px;
 268           align-items: left;
 269
 270           .video-info-likes-dislikes-bar {
 271             margin-top: 10px;
 272           }
 273         }
 274       }
 275
 276       .video-info-date-views {
 277         flex-direction: column;
 278         margin-bottom: 30px;
 279
 280         .video-info-likes-dislikes-bar {
 281           margin-top: 0;
 282         }
 283       }
 284
 285       .video-attributes .video-attribute {
 286         margin-bottom: 5px;
 287       }
 288     }
 289   }
 290 }
 291
 292 @media screen and (max-width: 1200px) {
 293   .other-videos {
 294     display: none;
 295   }
 296 }
 297
 298 @media screen and (max-width: 600px) {
 299   .video-bottom {
 300     margin: 20px 0 0 0;
 301
 302     .video-info {
 303
 304       .video-info-first-row {
 305
 306         .video-info-name {
 307           font-size: 20px;
 308           height: auto;
 309         }
 310       }
 311     }
 312   }
 313 }
 314
 315 @media screen and (max-width: 450px) {
 316   .video-bottom  .action-button .icon-text {
 317     display: none !important;
 318   }
 319 }