client/src/app/videos/+video-watch/video-watch.component.scss

   1 #video-container {
   2   background-color: #000;
   3   display: flex;
   4   justify-content: center;
   5
   6   #video-element {
   7     width: 888px;
   8     height: 500px;
   9
  10     // VideoJS create an inner video player
  11     video {
  12       outline: 0;
  13     }
  14   }
  15 }
  16
  17 #video-not-found {
  18   height: 300px;
  19   line-height: 300px;
  20   margin-top: 50px;
  21   text-align: center;
  22   font-weight: bold;
  23 }
  24
  25 .video-bottom {
  26   margin-top: 40px;
  27   display: flex;
  28
  29   .video-info {
  30     flex-grow: 1;
  31     margin-right: 28px;
  32
  33     .video-info-name-actions {
  34       display: flex;
  35       align-items: center;
  36
  37       .video-info-name {
  38         font-size: 27px;
  39         font-weight: $font-semibold;
  40         flex-grow: 1;
  41       }
  42
  43       .video-info-actions {
  44         .action-button {
  45           @include peertube-button;
  46           @include grey-button;
  47
  48           font-size: 15px;
  49           font-weight: $font-semibold;
  50           display: inline-block;
  51           padding: 0 10px 0 10px;
  52
  53           .icon {
  54             @include icon(21px);
  55
  56             position: relative;
  57             top: -2px;
  58
  59             &.icon-like {
  60               background-image: url('../../../assets/images/video/like-grey.svg');
  61             }
  62
  63             &.icon-dislike {
  64               background-image: url('../../../assets/images/video/dislike-grey.svg');
  65             }
  66
  67             &.icon-share {
  68               background-image: url('../../../assets/images/video/share.svg');
  69             }
  70
  71             &.icon-more {
  72               background-image: url('../../../assets/images/video/more.svg');
  73               top: -1px;
  74             }
  75           }
  76
  77           &.activated {
  78             @include orange-button;
  79
  80             .icon-like {
  81               background-image: url('../../../assets/images/video/like-white.svg');
  82             }
  83
  84             .icon-dislike {
  85               background-image: url('../../../assets/images/video/dislike-white.svg');
  86             }
  87           }
  88         }
  89
  90         .action-more {
  91           display: inline-block;
  92
  93           .dropdown-menu .icon {
  94             display: inline-block;
  95             background-repeat: no-repeat;
  96             background-size: contain;
  97             width: 21px;
  98             height: 21px;
  99             vertical-align: middle;
 100             margin-right: 5px;
 101             position: relative;
 102             top: -1px;
 103
 104             &.icon-download {
 105               background-image: url('../../../assets/images/video/download-grey.svg');
 106             }
 107
 108             &.icon-alert {
 109               background-image: url('../../../assets/images/video/alert.svg');
 110             }
 111
 112             &.icon-blacklist {
 113               background-image: url('../../../assets/images/video/eye-closed.svg');
 114             }
 115           }
 116         }
 117       }
 118     }
 119
 120     .video-info-date-views-bar {
 121       display: flex;
 122
 123       .video-info-date-views {
 124         font-size: 16px;
 125         margin-bottom: 10px;
 126         flex-grow: 1;
 127       }
 128
 129       .video-info-likes-dislikes-bar {
 130         height: 5px;
 131         width: 186px;
 132         background-color: #E5E5E5;
 133         margin-top: 25px;
 134
 135         .likes-bar {
 136           height: 100%;
 137           background-color: #39CC0B;
 138         }
 139       }
 140     }
 141
 142     .video-info-channel {
 143       font-weight: $font-semibold;
 144       font-size: 15px;
 145     }
 146
 147     .video-info-by {
 148       display: flex;
 149       align-items: center;
 150       font-size: 13px;
 151
 152       img {
 153         width: 16px;
 154         height: 16px;
 155         margin-left: 3px;
 156       }
 157     }
 158
 159     .video-info-description {
 160       margin: 20px 0;
 161       font-size: 15px;
 162
 163       .description-loading {
 164         display: inline-block;
 165       }
 166
 167       .video-info-description-more {
 168         cursor: pointer;
 169         font-weight: $font-semibold;
 170         color: #585858;
 171         font-size: 14px;
 172
 173         .glyphicon {
 174           position: relative;
 175           top: 2px;
 176         }
 177       }
 178     }
 179
 180     .video-attributes {
 181       .video-attribute {
 182         font-size: 13px;
 183         display: block;
 184         margin-bottom: 12px;
 185
 186         .video-attribute-label {
 187           width: 86px;
 188           display: inline-block;
 189           color: #585858;
 190           font-weight: $font-bold;
 191         }
 192       }
 193     }
 194   }
 195
 196   .other-videos {
 197     .title-page {
 198       margin-top: 0;
 199     }
 200
 201     /deep/ .video-miniature {
 202       display: flex;
 203       height: 100%;
 204       margin-bottom: 20px;
 205
 206       .video-miniature-information {
 207         margin-left: 10px;
 208       }
 209     }
 210   }
 211 }
 212