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
  45 #error-block {
  46   display: none;
  47
  48   flex-direction: column;
  49   align-content: center;
  50   justify-content: center;
  51   text-align: center;
  52   width: 100%;
  53   height: 100%;
  54   color: #fff;
  55   box-sizing: border-box;
  56   font-family: sans-serif;
  57 }
  58
  59 #error-title {
  60   font-size: 45px;
  61   margin-bottom: 5px;
  62 }
  63
  64 #error-content {
  65   font-size: 24px;
  66 }
  67
  68 #placeholder-preview {
  69   position: absolute;
  70   top: 0;
  71   left: 0;
  72   background-size: 100% auto;
  73   width: 100%;
  74   height: 100%;
  75   background-position: 50% 50%;
  76   background-repeat: no-repeat;
  77 }
  78
  79 .player-information {
  80   width: 100%;
  81   color: #fff;
  82   background: rgba(0, 0, 0, 0.6);
  83   padding: 20px 0;
  84   position: absolute;
  85   bottom: 0;
  86   text-align: center;
  87 }
  88
  89 @media screen and (max-width: 300px) {
  90   #error-block {
  91     font-size: 36px;
  92   }
  93
  94   #error-content {
  95     font-size: 14px;
  96   }
  97 }
  98