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
 103             .icon {
 104               @include icon(21px);
 105
 106               position: relative;
 107               top: -2px;
 108
 109               &.icon-like {
 110                 background-image: url('../../../assets/images/video/like-grey.svg');
 111               }
 112
 113               &.icon-dislike {
 114                 background-image: url('../../../assets/images/video/dislike-grey.svg');
 115               }
 116
 117               &.icon-share {
 118                 background-image: url('../../../assets/images/video/share.svg');
 119               }
 120
 121               &.icon-more {
 122                 background-image: url('../../../assets/images/video/more.svg');
 123                 top: -1px;
 124               }
 125             }
 126
 127             &.action-button-share {
 128               width: 82px;
 129             }
 130
 131             &.action-button-like.activated {
 132               background-color: #39CC0B;
 133
 134               .icon-like {
 135                 background-image: url('../../../assets/images/video/like-white.svg');
 136               }
 137             }
 138
 139             &.action-button-dislike.activated {
 140               background-color: #FF0000;
 141
 142               .icon-dislike {
 143                 background-image: url('../../../assets/images/video/dislike-white.svg');
 144               }
 145             }
 146           }
 147
 148           .action-more {
 149             display: inline-block;
 150
 151             .dropdown-menu .dropdown-item {
 152               padding: 6px 24px;
 153
 154               .icon {
 155                 @include icon(24px);
 156
 157                 margin-right: 10px;
 158                 position: relative;
 159                 top: -1px;
 160
 161                 &.icon-download {
 162                   background-image: url('../../../assets/images/video/download-black.svg');
 163                 }
 164
 165                 &.icon-edit {
 166                   background-image: url('../../../assets/images/global/edit-black.svg');
 167                 }
 168
 169                 &.icon-alert {
 170                   background-image: url('../../../assets/images/video/alert.svg');
 171                 }
 172
 173                 &.icon-blacklist {
 174                   background-image: url('../../../assets/images/video/blacklist.svg');
 175                 }
 176               }
 177             }
 178           }
 179         }
 180
 181         .video-info-likes-dislikes-bar {
 182           height: 5px;
 183           width: 186px;
 184           background-color: #E5E5E5;
 185           margin-top: 25px;
 186
 187           .likes-bar {
 188             height: 100%;
 189             background-color: #39CC0B;
 190           }
 191         }
 192       }
 193     }
 194
 195     .video-info-description {
 196       margin: 20px 0;
 197       font-size: 15px;
 198
 199       .video-info-description-html {
 200         word-break: break-all;
 201       }
 202
 203       .description-loading {
 204         display: inline-block;
 205       }
 206
 207       .video-info-description-more {
 208         cursor: pointer;
 209         font-weight: $font-semibold;
 210         color: #585858;
 211         font-size: 14px;
 212
 213         .glyphicon {
 214           position: relative;
 215           top: 2px;
 216         }
 217       }
 218     }
 219
 220     .video-attributes .video-attribute {
 221       font-size: 13px;
 222       display: block;
 223       margin-bottom: 12px;
 224
 225       .video-attribute-label {
 226         width: 86px;
 227         display: inline-block;
 228         color: #585858;
 229         font-weight: $font-bold;
 230       }
 231     }
 232   }
 233
 234   .other-videos {
 235     .title-page {
 236       margin-top: 0;
 237     }
 238
 239     /deep/ .video-miniature {
 240       display: flex;
 241       height: 100%;
 242       margin-bottom: 20px;
 243
 244       .video-miniature-information {
 245         margin-left: 10px;
 246       }
 247     }
 248   }
 249 }
 250
 251
 252 @media screen and (max-width: 1300px) {
 253   .other-videos {
 254     display: none;
 255   }
 256
 257   .video-bottom {
 258     .video-info {
 259       margin-right: 0;
 260
 261       .video-info-first-row {
 262         flex-direction: column;
 263         margin-bottom: 30px;
 264
 265         .video-actions-rates {
 266           margin-top: 20px;
 267           align-items: left;
 268
 269           .video-info-likes-dislikes-bar {
 270             margin-top: 10px;
 271           }
 272         }
 273       }
 274
 275       .video-info-date-views {
 276         flex-direction: column;
 277         margin-bottom: 30px;
 278
 279         .video-info-likes-dislikes-bar {
 280           margin-top: 0;
 281         }
 282       }
 283
 284       .video-attributes .video-attribute {
 285         margin-bottom: 5px;
 286       }
 287     }
 288   }
 289 }
 290
 291 @media screen and (max-width: 600px) {
 292   .video-bottom {
 293     margin: 20px 0 0 0;
 294
 295     .video-info {
 296
 297       .video-info-first-row {
 298
 299         .video-info-name {
 300           font-size: 20px;
 301           height: auto;
 302         }
 303       }
 304     }
 305   }
 306 }