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