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       .video-details-date {
 170         font-weight: bold;
 171         margin-bottom: 30px;
 172       }
 173
 174       .video-details-description-more {
 175         cursor: pointer;
 176         margin-top: 15px;
 177         font-weight: bold;
 178         color: #acaeb7;
 179
 180         .glyphicon {
 181           position: relative;
 182           top: 2px;
 183         }
 184       }
 185     }
 186
 187     .video-details-attributes {
 188       font-weight: bold;
 189       font-size: 12px;
 190
 191       .video-details-attribute {
 192         display: flex;
 193
 194         .video-details-attribute-label {
 195           color: $video-watch-info-color;
 196           flex-basis: 60px;
 197           flex-grow: 0;
 198           flex-shrink: 0;
 199           margin-right: 5px;
 200         }
 201       }
 202     }
 203
 204     .video-details-tags {
 205       display: flex;
 206       flex-wrap: wrap;
 207
 208       a {
 209         margin: 0 3px 3px 0;
 210         font-size: 11px;
 211       }
 212     }
 213   }
 214
 215   @media screen and (max-width: 800px) {
 216     .video-name-views {
 217       .video-name {
 218         padding-left: 5px;
 219         padding-right: 0px;
 220       }
 221
 222       .video-views {
 223         padding-left: 0px;
 224         padding-right: 5px;
 225       }
 226     }
 227
 228     .video-small-blocks {
 229       a, .video-small-block-text {
 230         font-size: 13px !important;
 231       }
 232
 233       .glyphicon {
 234         font-size: 18px !important;
 235       }
 236
 237       .video-small-block-account {
 238         padding-left: 10px;
 239         padding-right: 10px;
 240       }
 241     }
 242
 243     .video-details {
 244       .video-details-date-description {
 245         padding-left: 10px;
 246         font-size: 13px !important;
 247       }
 248
 249       .video-details-attributes {
 250         font-size: 11px !important;
 251
 252         .video-details-attribute-label {
 253           width: 50px;
 254         }
 255       }
 256     }
 257   }
 258
 259   @media screen and (max-width: 500px) {
 260     .video-name-views {
 261       font-size: 16px !important;
 262     }
 263
 264     // Keep the same hierarchy than max-width: 800px
 265     .video-small-blocks {
 266       a, .video-small-block-text {
 267         font-size: 10px !important;
 268       }
 269
 270       .video-small-block-account {
 271         padding-left: 5px;
 272         padding-right: 5px;
 273       }
 274     }
 275
 276     .video-details {
 277       .video-details-date-description {
 278         margin-bottom: 30px;
 279         width: 100%;
 280
 281         .video-details-date {
 282           margin-bottom: 15px;
 283         }
 284       }
 285
 286       .video-details-attributes {
 287         padding-left: 10px;
 288         padding-right: 10px;
 289       }
 290     }
 291   }
 292 }