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: bold;
  31 }
  32
  33 .video-bottom {
  34   margin-top: 40px;
  35   display: flex;
  36
  37   .video-info {
  38     flex-grow: 1;
  39     margin-right: 28px;
  40
  41     .video-info-name-actions {
  42       display: flex;
  43       align-items: center;
  44
  45       .video-info-name {
  46         margin-right: 30px;
  47         font-size: 27px;
  48         font-weight: $font-semibold;
  49         flex-grow: 1;
  50       }
  51
  52       .video-info-actions {
  53         min-width: 215px;
  54
  55         .action-button {
  56           @include peertube-button;
  57           @include grey-button;
  58
  59           font-size: 15px;
  60           font-weight: $font-semibold;
  61           display: inline-block;
  62           padding: 0 10px 0 10px;
  63
  64           .icon {
  65             @include icon(21px);
  66
  67             position: relative;
  68             top: -2px;
  69
  70             &.icon-like {
  71               background-image: url('../../../assets/images/video/like-grey.svg');
  72             }
  73
  74             &.icon-dislike {
  75               background-image: url('../../../assets/images/video/dislike-grey.svg');
  76             }
  77
  78             &.icon-share {
  79               background-image: url('../../../assets/images/video/share.svg');
  80             }
  81
  82             &.icon-more {
  83               background-image: url('../../../assets/images/video/more.svg');
  84               top: -1px;
  85             }
  86           }
  87
  88           &.activated {
  89             @include orange-button;
  90
  91             .icon-like {
  92               background-image: url('../../../assets/images/video/like-white.svg');
  93             }
  94
  95             .icon-dislike {
  96               background-image: url('../../../assets/images/video/dislike-white.svg');
  97             }
  98           }
  99         }
 100
 101         .action-more {
 102           display: inline-block;
 103
 104           .dropdown-menu .dropdown-item {
 105             padding: 6px 24px;
 106
 107             .icon {
 108               @include icon(24px);
 109
 110               margin-right: 10px;
 111               position: relative;
 112               top: -1px;
 113
 114               &.icon-download {
 115                 background-image: url('../../../assets/images/video/download-black.svg');
 116               }
 117
 118               &.icon-alert {
 119                 background-image: url('../../../assets/images/video/alert.svg');
 120               }
 121
 122               &.icon-blacklist {
 123                 background-image: url('../../../assets/images/video/blacklist.svg');
 124               }
 125             }
 126           }
 127         }
 128       }
 129     }
 130
 131     .video-info-date-views-bar {
 132       display: flex;
 133
 134       .video-info-date-views {
 135         font-size: 16px;
 136         margin-bottom: 10px;
 137         flex-grow: 1;
 138       }
 139
 140       .video-info-likes-dislikes-bar {
 141         height: 5px;
 142         width: 186px;
 143         background-color: #E5E5E5;
 144         margin-top: 25px;
 145
 146         .likes-bar {
 147           height: 100%;
 148           background-color: #39CC0B;
 149         }
 150       }
 151     }
 152
 153     .video-info-channel {
 154       font-weight: $font-semibold;
 155       font-size: 15px;
 156     }
 157
 158     .video-info-by {
 159       display: flex;
 160       align-items: center;
 161       font-size: 13px;
 162
 163       img {
 164         width: 16px;
 165         height: 16px;
 166         margin-left: 3px;
 167       }
 168     }
 169
 170     .video-info-description {
 171       margin: 20px 0;
 172       font-size: 15px;
 173
 174       .description-loading {
 175         display: inline-block;
 176       }
 177
 178       .video-info-description-more {
 179         cursor: pointer;
 180         font-weight: $font-semibold;
 181         color: #585858;
 182         font-size: 14px;
 183
 184         .glyphicon {
 185           position: relative;
 186           top: 2px;
 187         }
 188       }
 189     }
 190
 191     .video-attributes {
 192       .video-attribute {
 193         font-size: 13px;
 194         display: block;
 195         margin-bottom: 12px;
 196
 197         .video-attribute-label {
 198           width: 86px;
 199           display: inline-block;
 200           color: #585858;
 201           font-weight: $font-bold;
 202         }
 203       }
 204     }
 205   }
 206
 207   .other-videos {
 208     .title-page {
 209       margin-top: 0;
 210     }
 211
 212     /deep/ .video-miniature {
 213       display: flex;
 214       height: 100%;
 215       margin-bottom: 20px;
 216
 217       .video-miniature-information {
 218         margin-left: 10px;
 219       }
 220     }
 221   }
 222 }
 223
 224
 225 @media screen and (max-width: 1200px) {
 226   .other-videos {
 227     display: none;
 228   }
 229
 230   .video-bottom {
 231     .video-info {
 232       margin-right: 0;
 233
 234       .video-info-name-actions {
 235         align-items: left;
 236         flex-direction: column;
 237         margin-bottom: 30px;
 238       }
 239
 240       .video-info-date-views-bar {
 241         align-items: left;
 242         flex-direction: column;
 243         margin-bottom: 30px;
 244
 245         .video-info-likes-dislikes-bar {
 246           margin-top: 0;
 247         }
 248       }
 249     }
 250   }
 251 }
 252
 253 @media screen and (max-width: 800px) {
 254   .video-bottom {
 255     margin: 20px 0 0 0;
 256   }
 257 }