client/src/standalone/videos/embed.scss

   1 @use '_variables';
   2 @use '_mixins';
   3 @use '~video.js/dist/video-js.css';
   4 @use '~videojs-dock/dist/videojs-dock.css';
   5
   6 $assets-path: '../../assets/';
   7 @use '../../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,
  25 body {
  26   height: 100%;
  27   margin: 0;
  28   background-color: #000;
  29 }
  30
  31 #video-wrapper {
  32   width: 100%;
  33   height: 100%;
  34 }
  35
  36 .video-js.vjs-peertube-skin {
  37   width: 100%;
  38   height: 100%;
  39   overflow: hidden;
  40
  41   .vjs-poster {
  42     background-size: 100% auto;
  43   }
  44
  45   @media screen and (max-width: 350px) {
  46     .vjs-play-control {
  47       padding: 0 5px !important;
  48       width: 25px !important;
  49     }
  50
  51     .vjs-volume-control {
  52       display: none !important;
  53     }
  54
  55     .vjs-volume-panel {
  56       width: 26px !important;
  57     }
  58
  59     .vjs-peertube-link {
  60       padding: 0;
  61     }
  62   }
  63 }
  64
  65 #error-block {
  66   display: none;
  67
  68   flex-direction: column;
  69   align-content: center;
  70   justify-content: center;
  71   text-align: center;
  72   width: 100%;
  73   height: 100%;
  74   color: #fff;
  75   box-sizing: border-box;
  76   font-family: sans-serif;
  77 }
  78
  79 #error-title {
  80   font-size: 45px;
  81   margin-bottom: 5px;
  82 }
  83
  84 #error-content {
  85   font-size: 24px;
  86 }
  87
  88 #placeholder-preview {
  89   position: absolute;
  90   top: 0;
  91   left: 0;
  92   background-size: 100% auto;
  93   width: 100%;
  94   height: 100%;
  95   background-position: 50% 50%;
  96 }
  97
  98 @media screen and (max-width: 300px) {
  99   #error-block {
 100     font-size: 36px;
 101   }
 102
 103   #error-content {
 104     font-size: 14px;
 105   }
 106 }
 107