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