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
   6 $assets-path: '../../assets/';
   7 @import '../../sass/player/index';
   8
   9 [hidden] {
  10   display: none !important;
  11 }
  12
  13 body {
  14   font-family: $main-fonts;
  15   font-weight: $font-regular;
  16   color: #000;
  17 }
  18
  19 video {
  20   width: 99%;
  21 }
  22
  23 /* fill the entire space */
  24 html, body {
  25   height: 100%;
  26   margin: 0;
  27   background-color: #000;
  28 }
  29
  30 #video-wrapper {
  31   width: 100%;
  32   height: 100%;
  33 }
  34
  35 .video-js.vjs-peertube-skin {
  36   width: 100%;
  37   height: 100%;
  38   overflow: hidden;
  39
  40   .vjs-poster {
  41     background-size: 100% auto;
  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     }
  57
  58     .vjs-peertube-link {
  59       padding: 0;
  60     }
  61   }
  62 }
  63
  64 #error-block {
  65   display: none;
  66
  67   flex-direction: column;
  68   align-content: center;
  69   justify-content: center;
  70   text-align: center;
  71   width: 100%;
  72   height: 100%;
  73   color: white;
  74   box-sizing: border-box;
  75   font-family: sans-serif;
  76
  77   #error-title {
  78     font-size: 45px;
  79     margin-bottom: 5px;
  80   }
  81
  82   #error-content {
  83     font-size: 24px;
  84   }
  85 }
  86
  87 #placeholder-preview {
  88   position: absolute;
  89   top: 0;
  90   left: 0;
  91   background-size: 100% auto;
  92   width: 100%;
  93   height: 100%;
  94   background-position: 50% 50%;
  95 }
  96
  97 @media screen and (max-width: 300px) {
  98   #error-block {
  99     font-size: 36px;
 100
 101     #error-content {
 102       font-size: 14px;
 103     }
 104   }
 105 }
 106