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-alert {
 130                 background-image: url('../../../assets/images/video/alert.svg');
 131               }
 132
 133               &.icon-blacklist {
 134                 background-image: url('../../../assets/images/video/blacklist.svg');
 135               }
 136             }
 137           }
 138         }
 139       }
 140     }
 141
 142     .video-info-date-views-bar {
 143       display: flex;
 144
 145       .video-info-date-views {
 146         font-size: 16px;
 147         margin-bottom: 10px;
 148         flex-grow: 1;
 149       }
 150
 151       .video-info-likes-dislikes-bar {
 152         height: 5px;
 153         width: 186px;
 154         background-color: #E5E5E5;
 155         margin-top: 25px;
 156
 157         .likes-bar {
 158           height: 100%;
 159           background-color: #39CC0B;
 160         }
 161       }
 162     }
 163
 164     .video-info-channel {
 165       font-weight: $font-semibold;
 166       font-size: 15px;
 167     }
 168
 169     .video-info-by {
 170       display: flex;
 171       align-items: center;
 172       font-size: 13px;
 173
 174       img {
 175         width: 16px;
 176         height: 16px;
 177         margin-left: 3px;
 178       }
 179     }
 180
 181     .video-info-description {
 182       margin: 20px 0;
 183       font-size: 15px;
 184
 185       .description-loading {
 186         display: inline-block;
 187       }
 188
 189       .video-info-description-more {
 190         cursor: pointer;
 191         font-weight: $font-semibold;
 192         color: #585858;
 193         font-size: 14px;
 194
 195         .glyphicon {
 196           position: relative;
 197           top: 2px;
 198         }
 199       }
 200     }
 201
 202     .video-attributes {
 203       .video-attribute {
 204         font-size: 13px;
 205         display: block;
 206         margin-bottom: 12px;
 207
 208         .video-attribute-label {
 209           width: 86px;
 210           display: inline-block;
 211           color: #585858;
 212           font-weight: $font-bold;
 213         }
 214       }
 215     }
 216   }
 217
 218   .other-videos {
 219     .title-page {
 220       margin-top: 0;
 221     }
 222
 223     /deep/ .video-miniature {
 224       display: flex;
 225       height: 100%;
 226       margin-bottom: 20px;
 227
 228       .video-miniature-information {
 229         margin-left: 10px;
 230       }
 231     }
 232   }
 233 }
 234
 235
 236 @media screen and (max-width: 1300px) {
 237   .other-videos {
 238     display: none;
 239   }
 240
 241   .video-bottom {
 242     .video-info {
 243       margin-right: 0;
 244
 245       .video-info-name-actions {
 246         align-items: left;
 247         flex-direction: column;
 248         margin-bottom: 30px;
 249       }
 250
 251       .video-info-date-views-bar {
 252         align-items: left;
 253         flex-direction: column;
 254         margin-bottom: 30px;
 255
 256         .video-info-likes-dislikes-bar {
 257           margin-top: 0;
 258         }
 259       }
 260     }
 261   }
 262 }
 263
 264 @media screen and (max-width: 800px) {
 265   .video-bottom {
 266     margin: 20px 0 0 0;
 267   }
 268 }