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             }
  74           }
  75
  76           &.activated {
  77             @include orange-button;
  78
  79             .icon-like {
  80               background-image: url('../../../assets/images/video/like-white.svg');
  81             }
  82
  83             .icon-dislike {
  84               background-image: url('../../../assets/images/video/dislike-white.svg');
  85             }
  86           }
  87         }
  88
  89         .action-more {
  90           display: inline-block;
  91
  92           .dropdown-menu .icon {
  93             display: inline-block;
  94             background-repeat: no-repeat;
  95             background-size: contain;
  96             width: 21px;
  97             height: 21px;
  98             vertical-align: middle;
  99             margin-right: 5px;
 100             position: relative;
 101             top: -1px;
 102
 103             &.icon-download {
 104               background-image: url('../../../assets/images/video/download-grey.svg');
 105             }
 106
 107             &.icon-alert {
 108               background-image: url('../../../assets/images/video/alert.svg');
 109             }
 110
 111             &.icon-blacklist {
 112               background-image: url('../../../assets/images/video/eye-closed.svg');
 113             }
 114           }
 115         }
 116       }
 117     }
 118
 119     .video-info-date-views-bar {
 120       display: flex;
 121
 122       .video-info-date-views {
 123         font-size: 16px;
 124         margin-bottom: 10px;
 125         flex-grow: 1;
 126       }
 127
 128       .video-info-likes-dislikes-bar {
 129         height: 5px;
 130         width: 186px;
 131         background-color: #E5E5E5;
 132         margin-top: 25px;
 133
 134         .likes-bar {
 135           height: 100%;
 136           background-color: #39CC0B;
 137         }
 138       }
 139     }
 140
 141     .video-info-channel {
 142       font-weight: $font-semibold;
 143       font-size: 15px;
 144     }
 145
 146     .video-info-by {
 147       display: flex;
 148       align-items: center;
 149       font-size: 13px;
 150
 151       img {
 152         width: 16px;
 153         height: 16px;
 154         margin-left: 3px;
 155       }
 156     }
 157
 158     .video-info-description {
 159       margin: 20px 0;
 160       font-size: 15px;
 161
 162       .description-loading {
 163         display: inline-block;
 164       }
 165
 166       .video-info-description-more {
 167         cursor: pointer;
 168         font-weight: $font-semibold;
 169         color: #585858;
 170         font-size: 14px;
 171
 172         .glyphicon {
 173           position: relative;
 174           top: 2px;
 175         }
 176       }
 177     }
 178
 179     .video-attributes {
 180       .video-attribute {
 181         font-size: 13px;
 182         display: block;
 183         margin-bottom: 12px;
 184
 185         .video-attribute-label {
 186           width: 86px;
 187           display: inline-block;
 188           color: #585858;
 189           font-weight: $font-bold;
 190         }
 191       }
 192     }
 193   }
 194
 195   .other-videos {
 196     .title-page {
 197       margin-top: 0;
 198     }
 199
 200     /deep/ .video-miniature {
 201       display: flex;
 202       height: 100%;
 203       margin-bottom: 20px;
 204
 205       .video-miniature-information {
 206         margin-left: 10px;
 207       }
 208     }
 209   }
 210 }
 211