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