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
  41     .video-name {
  42       padding-left: $video-watch-info-padding-left;
  43     }
  44
  45     .video-views {
  46       text-align: right;
  47       // Keep a symmetry with the video name
  48       padding-right: $video-watch-info-padding-left
  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
  70         &, &:hover {
  71           color: inherit;
  72           text-decoration:none;
  73         }
  74
  75         &:hover {
  76           color: #000 !important;
  77         }
  78       }
  79
  80       .option .glyphicon {
  81         font-size: 22px;
  82         color: inherit;
  83         opacity: 0.9;
  84         margin-bottom: 10px;
  85       }
  86
  87       .video-small-block-text {
  88         font-size: 15px;
  89         font-weight: bold;
  90       }
  91     }
  92
  93     .video-small-block:not(:last-child) {
  94       border-width: 0 1px 0 0;
  95       border-color: $video-watch-border-color;
  96       border-style: solid;
  97     }
  98
  99     .video-small-block-author {
 100       font-size: 15px;
 101       font-weight: bold;
 102       text-align: left;
 103       padding-left: $video-watch-info-padding-left;
 104     }
 105
 106     .video-small-block-share, .video-small-block-more {
 107       a.option {
 108         display: block;
 109
 110         .glyphicon {
 111           display: block;
 112         }
 113       }
 114     }
 115
 116     .video-small-block-more .video-small-block-dropdown {
 117       position: relative;
 118
 119       .dropdown-item .glyphicon {
 120         margin-right: 5px;
 121       }
 122     }
 123
 124     .video-small-block-rating {
 125
 126       .video-small-block-like {
 127         margin-bottom: 10px;
 128       }
 129
 130       .video-small-block-text {
 131         vertical-align: top;
 132       }
 133
 134       .glyphicon {
 135         font-size: 18px;
 136         margin: 0 10px 0 0;
 137       }
 138
 139       .interactive {
 140         cursor: pointer;
 141         transition: color 0.3s;
 142
 143         &.activated, &:hover {
 144           color: #000;
 145         }
 146       }
 147     }
 148   }
 149
 150   .video-details {
 151     margin-top: 30px;
 152
 153     .video-details-date-description {
 154       padding-left: $video-watch-info-padding-left;
 155
 156       .video-details-date {
 157         font-weight: bold;
 158         margin-bottom: 30px;
 159       }
 160     }
 161
 162     .video-details-attributes {
 163       font-weight: bold;
 164       font-size: 12px;
 165
 166       .video-details-attribute-label {
 167         color: $video-watch-info-color;
 168         display: inline-block;
 169         width: 60px;
 170         margin-right: 5px;
 171       }
 172     }
 173   }
 174 }