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
  18
  19 .video-js.vjs-peertube-skin {
  20   width: 100%;
  21   height: 100%;
  22   overflow: hidden;
  23
  24   .vjs-poster {
  25     background-size: 100% auto;
  26   }
  27
  28   .vjs-peertube-link {
  29     color: #fff;
  30     text-decoration: none;
  31     font-size: $font-size;
  32     line-height: $control-bar-height;
  33     transition: all .4s;
  34     font-weight: $font-semibold;
  35     margin-right: 3px;
  36     padding: 0 5px;
  37   }
  38
  39   .vjs-peertube-link:hover {
  40     text-shadow: 0 0 1em #fff;
  41   }
  42
  43   // Fix volume panel because we added a new component (PeerTube link)
  44   .vjs-volume-panel {
  45     margin-right: 137px !important;
  46   }
  47
  48   @media screen and (max-width: 350px) {
  49     .vjs-play-control {
  50       padding: 0 5px !important;
  51       width: 25px !important;
  52     }
  53
  54     .vjs-volume-control {
  55       display: none !important;
  56     }
  57
  58     .vjs-volume-panel {
  59       width: 26px !important;
  60       margin-right: 140px !important;
  61     }
  62
  63     .vjs-peertube-link {
  64       padding: 0;
  65     }
  66   }
  67 }