client/src/standalone/videos/embed.scss

   1 @import '~video.js/dist/video-js.css';
   2 @import '~videojs-dock/dist/videojs-dock.css';
   3 @import '../../sass/video-js-custom.scss';
   4
   5 video {
   6   width: 99%;
   7 }
   8
   9 /* fill the entire space */
  10 html, body {
  11   height: 100%;
  12   margin: 0;
  13 }
  14
  15 .video-js {
  16   width: 100%;
  17   height: 100%;
  18   overflow: hidden;
  19 }
  20
  21 .vjs-poster {
  22   background-size: 100% auto;
  23 }
  24
  25 .vjs-peertube-link {
  26   color: #fff;
  27   text-decoration: none;
  28   font-size: $font-size;
  29   line-height: $control-bar-height;
  30   transition: all .4s;
  31   font-weight: $font-semibold;
  32   margin-right: 3px;
  33 }
  34
  35 .vjs-peertube-link:hover {
  36   text-shadow: 0 0 1em #fff;
  37 }
  38
  39 // Fix volume panel because we added a new component (PeerTube link)
  40 .vjs-volume-panel {
  41   margin-right: 121px !important;
  42 }
  43
  44 @media screen and (max-width: 350px) {
  45   .vjs-play-control {
  46     padding: 0 5px !important;
  47     width: 25px !important;
  48   }
  49
  50   .vjs-volume-control {
  51     display: none !important;
  52   }
  53
  54   .vjs-volume-panel {
  55     width: 26px !important;
  56     margin-right: 140px !important;
  57   }
  58 }