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