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

   1 #video-container {
   2   width: 100%;
   3   height: 100%;
   4 }
   5
   6 #video-not-found {
   7   height: 300px;
   8   line-height: 300px;
   9   margin-top: 50px;
  10   text-align: center;
  11   font-weight: bold;
  12 }
  13
  14 .embed-responsive {
  15   height: 500px;
  16
  17   @media screen and (max-width: 600px) {
  18     height: 300px;
  19   }
  20 }
  21
  22 #torrent-info {
  23   font-size: 10px;
  24   margin-top: 10px;
  25   text-align: center;
  26
  27   div {
  28     min-width: 60px;
  29   }
  30 }
  31
  32 #video-info {
  33   .video-name-views {
  34     font-weight: bold;
  35     font-size: 18px;
  36     min-height: $video-watch-title-height;
  37     display: flex;
  38     align-items: center;
  39
  40     .video-name {
  41       padding-left: $video-watch-info-padding-left;
  42     }
  43
  44     .video-views {
  45       text-align: right;
  46       // Keep a symmetry with the video name
  47       padding-right: $video-watch-info-padding-left
  48     }
  49
  50   }
  51
  52   .video-small-blocks {
  53     height: $video-watch-info-height;
  54     color: $video-watch-info-color;
  55     border-color: $video-watch-border-color;
  56     border-width: 1px 0px;
  57     border-style: solid;
  58
  59     .video-small-block {
  60       height: $video-watch-info-height;
  61       display: flex;
  62       flex-direction: column;
  63       justify-content: center;
  64       text-align: center;
  65
  66       a {
  67         cursor: pointer;
  68         transition: color 0.3s;
  69         white-space: nowrap;
  70         overflow: hidden;
  71         text-overflow: ellipsis;
  72
  73         &, &:hover {
  74           color: inherit;
  75           text-decoration:none;
  76         }
  77
  78         &:hover {
  79           color: #000 !important;
  80         }
  81
  82         &:hover > .glyphicon {
  83           opacity: 1 !important;
  84         }
  85       }
  86
  87       .option .glyphicon {
  88         font-size: 22px;
  89         color: inherit;
  90         opacity: 0.15;
  91         margin-bottom: 10px;
  92         transition: opacity 0.3s;
  93       }
  94
  95       .video-small-block-text {
  96         font-size: 15px;
  97         font-weight: bold;
  98       }
  99     }
 100
 101     .video-small-block:not(:last-child) {
 102       border-width: 0 1px 0 0;
 103       border-color: $video-watch-border-color;
 104       border-style: solid;
 105     }
 106
 107     .video-small-block-account, .video-small-block-more {
 108       a.option {
 109         display: block;
 110
 111         .glyphicon {
 112           display: block;
 113         }
 114       }
 115     }
 116
 117     .video-small-block-share, .video-small-block-more {
 118       a.option {
 119         display: block;
 120
 121         .glyphicon {
 122           display: block;
 123         }
 124       }
 125     }
 126
 127     .video-small-block-more .video-small-block-dropdown {
 128       position: relative;
 129
 130       .dropdown-item .glyphicon {
 131         margin-right: 5px;
 132       }
 133     }
 134
 135     .video-small-block-rating {
 136
 137       .video-small-block-like {
 138         margin-bottom: 10px;
 139       }
 140
 141       .video-small-block-text {
 142         vertical-align: top;
 143       }
 144
 145       .glyphicon {
 146         font-size: 18px;
 147         margin: 0 10px 0 0;
 148         opacity: 0.3;
 149       }
 150
 151       .interactive {
 152         cursor: pointer;
 153         transition: opacity, color 0.3s;
 154
 155         &.activated, &:hover {
 156           opacity: 1;
 157           color: #000;
 158         }
 159       }
 160     }
 161   }
 162
 163   .video-details {
 164     margin-top: 30px;
 165
 166     .video-details-date-description {
 167       padding-left: $video-watch-info-padding-left;
 168
 169       .description-loading {
 170         display: inline-block;
 171       }
 172
 173       .video-details-date {
 174         font-weight: bold;
 175         margin-bottom: 30px;
 176       }
 177
 178       .video-details-description-more {
 179         cursor: pointer;
 180         margin-top: 15px;
 181         font-weight: bold;
 182         color: #acaeb7;
 183
 184         .glyphicon {
 185           position: relative;
 186           top: 2px;
 187         }
 188       }
 189     }
 190
 191     .video-details-attributes {
 192       font-weight: bold;
 193       font-size: 12px;
 194
 195       .video-details-attribute {
 196         display: flex;
 197
 198         .video-details-attribute-label {
 199           color: $video-watch-info-color;
 200           flex-basis: 60px;
 201           flex-grow: 0;
 202           flex-shrink: 0;
 203           margin-right: 5px;
 204         }
 205       }
 206     }
 207
 208     .video-details-tags {
 209       display: flex;
 210       flex-wrap: wrap;
 211
 212       a {
 213         margin: 0 3px 3px 0;
 214         font-size: 11px;
 215       }
 216     }
 217   }
 218
 219   @media screen and (max-width: 800px) {
 220     .video-name-views {
 221       .video-name {
 222         padding-left: 5px;
 223         padding-right: 0px;
 224       }
 225
 226       .video-views {
 227         padding-left: 0px;
 228         padding-right: 5px;
 229       }
 230     }
 231
 232     .video-small-blocks {
 233       a, .video-small-block-text {
 234         font-size: 13px !important;
 235       }
 236
 237       .glyphicon {
 238         font-size: 18px !important;
 239       }
 240
 241       .video-small-block-account {
 242         padding-left: 10px;
 243         padding-right: 10px;
 244       }
 245     }
 246
 247     .video-details {
 248       .video-details-date-description {
 249         padding-left: 10px;
 250         font-size: 13px !important;
 251       }
 252
 253       .video-details-attributes {
 254         font-size: 11px !important;
 255
 256         .video-details-attribute-label {
 257           width: 50px;
 258         }
 259       }
 260     }
 261   }
 262
 263   @media screen and (max-width: 500px) {
 264     .video-name-views {
 265       font-size: 16px !important;
 266     }
 267
 268     // Keep the same hierarchy than max-width: 800px
 269     .video-small-blocks {
 270       a, .video-small-block-text {
 271         font-size: 10px !important;
 272       }
 273
 274       .video-small-block-account {
 275         padding-left: 5px;
 276         padding-right: 5px;
 277       }
 278     }
 279
 280     .video-details {
 281       .video-details-date-description {
 282         margin-bottom: 30px;
 283         width: 100%;
 284
 285         .video-details-date {
 286           margin-bottom: 15px;
 287         }
 288       }
 289
 290       .video-details-attributes {
 291         padding-left: 10px;
 292         padding-right: 10px;
 293       }
 294     }
 295   }
 296 }