client/src/standalone/videos/embed.scss

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