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
  18 #torrent-info {
  19   font-size: 10px;
  20   margin-top: 10px;
  21   text-align: center;
  22
  23   div {
  24     min-width: 60px;
  25   }
  26 }
  27
  28 .embed-responsive {
  29   @media screen and (max-width: 600px) {
  30     height: 300px;
  31   }
  32 }
  33
  34 #video-info {
  35   .video-name-views {
  36     font-weight: bold;
  37     font-size: 18px;
  38     height: $video-watch-title-height;
  39     line-height: $video-watch-title-height;
  40     padding: 0 30px;
  41
  42     .video-views {
  43       text-align: right;
  44     }
  45   }
  46
  47   .video-small-blocks {
  48     height: 150px;
  49     color: $video-watch-info-color;
  50     border-color: $video-watch-border-color;
  51     border-width: 1px 0px;
  52     border-style: solid;
  53
  54     .video-small-block {
  55       height: $video-watch-info-height;
  56       display: flex;
  57       flex-direction: column;
  58       justify-content: center;
  59       text-align: center;
  60
  61       a {
  62         cursor: pointer;
  63         transition: color 0.3s;
  64
  65         &, &:hover {
  66           color: inherit;
  67           text-decoration:none;
  68         }
  69
  70         &:hover {
  71           color: #000 !important;
  72         }
  73       }
  74
  75       .option .glyphicon {
  76         font-size: 22px;
  77         color: inherit;
  78         opacity: 0.9;
  79         margin-bottom: 10px;
  80       }
  81
  82       .video-small-block-text {
  83         font-size: 15px;
  84         font-weight: bold;
  85       }
  86     }
  87
  88     .video-small-block:not(:last-child) {
  89       border-width: 0 1px 0 0;
  90       border-color: $video-watch-border-color;
  91       border-style: solid;
  92     }
  93
  94     .video-small-block-author {
  95       font-size: 15px;
  96       font-weight: bold;
  97     }
  98
  99     .video-small-block-share, .video-small-block-more {
 100       a.option {
 101         display: block;
 102
 103         .glyphicon {
 104           display: block;
 105         }
 106       }
 107     }
 108
 109     .video-small-block-more .video-small-block-dropdown {
 110       position: relative;
 111
 112       .dropdown-item .glyphicon {
 113         margin-right: 5px;
 114       }
 115     }
 116
 117     .video-small-block-rating {
 118
 119       .video-small-block-like {
 120         margin-bottom: 10px;
 121       }
 122
 123       .video-small-block-text {
 124         vertical-align: top;
 125       }
 126
 127       .glyphicon {
 128         font-size: 18px;
 129         margin: 0 10px 0 0;
 130       }
 131
 132       .interactive {
 133         cursor: pointer;
 134         transition: color 0.3s;
 135
 136         &.activated, &:hover {
 137           color: #000;
 138         }
 139       }
 140     }
 141   }
 142
 143   .video-details {
 144     margin-top: 30px;
 145
 146     .video-details-date-description {
 147       padding-left: 30px;
 148
 149       .video-details-date {
 150         font-weight: bold;
 151         margin-bottom: 30px;
 152       }
 153     }
 154
 155     .video-details-attributes {
 156       font-weight: bold;
 157       font-size: 12px;
 158
 159       .video-details-attribute-label {
 160         color: $video-watch-info-color;
 161         display: inline-block;
 162         width: 60px;
 163         margin-right: 5px;
 164       }
 165     }
 166   }
 167 }