client/src/standalone/videos/embed.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use 'video.js/dist/video-js';
   4
   5 $assets-path: '../../assets/';
   6 @use '../../sass/player/index';
   7
   8 [hidden] {
   9   display: none !important;
  10 }
  11
  12 body {
  13   font-family: $main-fonts;
  14   font-weight: $font-regular;
  15   color: #000;
  16 }
  17
  18 video {
  19   width: 99%;
  20 }
  21
  22 /* fill the entire space */
  23 html,
  24 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: #fff;
  74   box-sizing: border-box;
  75   font-family: sans-serif;
  76 }
  77
  78 #error-title {
  79   font-size: 45px;
  80   margin-bottom: 5px;
  81 }
  82
  83 #error-content {
  84   font-size: 24px;
  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   background-repeat: no-repeat;
  96 }
  97
  98 .player-information {
  99   width: 100%;
 100   color: #fff;
 101   background: rgba(0, 0, 0, 0.6);
 102   padding: 20px 0;
 103   position: absolute;
 104   bottom: 0;
 105   text-align: center;
 106 }
 107
 108 @media screen and (max-width: 300px) {
 109   #error-block {
 110     font-size: 36px;
 111   }
 112
 113   #error-content {
 114     font-size: 14px;
 115   }
 116 }
 117