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 }
  11
  12 #video-not-found {
  13   height: 300px;
  14   line-height: 300px;
  15   margin-top: 50px;
  16   text-align: center;
  17   font-weight: bold;
  18 }
  19
  20 .video-bottom {
  21   margin-top: 40px;
  22   display: flex;
  23
  24   .video-info {
  25     flex-grow: 1;
  26     margin-right: 28px;
  27
  28     .video-info-name-actions {
  29       display: flex;
  30       align-items: center;
  31
  32       .video-info-name {
  33         font-size: 27px;
  34         font-weight: $font-semibold;
  35         flex-grow: 1;
  36       }
  37
  38       .video-info-actions {
  39         .action-button {
  40           @include peertube-button;
  41
  42           font-size: 15px;
  43           font-weight: $font-semibold;
  44           color: #585858;
  45           background-color: #E5E5E5;
  46           display: inline-block;
  47           padding: 0 10px 0 10px;
  48
  49           &:hover {
  50             background-color: #EFEFEF;
  51           }
  52         }
  53
  54         .action-more {
  55           display: inline-block;
  56         }
  57
  58         .icon {
  59           display: inline-block;
  60           background-repeat: no-repeat;
  61           background-size: contain;
  62           width: 21px;
  63           height: 21px;
  64           vertical-align: middle;
  65           position: relative;
  66           top: -2px;
  67
  68           &.icon-like {
  69             background-image: url('../../../assets/images/video/like.svg');
  70           }
  71
  72           &.icon-dislike {
  73             background-image: url('../../../assets/images/video/dislike.svg');
  74           }
  75
  76           &.icon-share {
  77             background-image: url('../../../assets/images/video/share.svg');
  78           }
  79
  80           &.icon-more {
  81             background-image: url('../../../assets/images/video/more.svg');
  82           }
  83         }
  84       }
  85     }
  86
  87     .video-info-date-views-bar {
  88       display: flex;
  89
  90       .video-info-date-views {
  91         font-size: 16px;
  92         margin-bottom: 10px;
  93         flex-grow: 1;
  94       }
  95
  96       .video-info-likes-dislikes-bar {
  97         height: 5px;
  98         width: 186px;
  99         background-color: #E5E5E5;
 100         margin-top: 25px;
 101
 102         .likes-bar {
 103           height: 100%;
 104           background-color: #39CC0B;
 105         }
 106       }
 107     }
 108
 109     .video-info-channel {
 110       font-weight: $font-semibold;
 111       font-size: 15px;
 112     }
 113
 114     .video-info-by {
 115       display: flex;
 116       align-items: center;
 117       font-size: 13px;
 118
 119       img {
 120         width: 16px;
 121         height: 16px;
 122         margin-left: 3px;
 123       }
 124     }
 125
 126     .video-info-description {
 127       margin: 20px 0;
 128       font-size: 15px;
 129
 130       .description-loading {
 131         display: inline-block;
 132       }
 133
 134       .video-info-description-more {
 135         cursor: pointer;
 136         font-weight: $font-semibold;
 137         color: #585858;
 138         font-size: 14px;
 139
 140         .glyphicon {
 141           position: relative;
 142           top: 2px;
 143         }
 144       }
 145     }
 146
 147     .video-attributes {
 148       .video-attribute {
 149         font-size: 13px;
 150         display: block;
 151         margin-bottom: 12px;
 152
 153         .video-attribute-label {
 154           width: 86px;
 155           display: inline-block;
 156           color: #585858;
 157           font-weight: $font-bold;
 158         }
 159       }
 160     }
 161
 162   }
 163 }