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 [hidden] {
   8   display: none !important;
   9 }
  10
  11 body {
  12   font-family: $main-fonts;
  13   font-weight: $font-regular;
  14   color: #000;
  15 }
  16
  17 video {
  18   width: 99%;
  19 }
  20
  21 /* fill the entire space */
  22 html, body {
  23   height: 100%;
  24   margin: 0;
  25   background-color: #000;
  26 }
  27
  28 .video-js.vjs-peertube-skin {
  29   width: 100%;
  30   height: 100%;
  31   overflow: hidden;
  32
  33   .vjs-poster {
  34     background-size: 100% auto;
  35   }
  36
  37   @media screen and (max-width: 350px) {
  38     .vjs-play-control {
  39       padding: 0 5px !important;
  40       width: 25px !important;
  41     }
  42
  43     .vjs-volume-control {
  44       display: none !important;
  45     }
  46
  47     .vjs-volume-panel {
  48       width: 26px !important;
  49     }
  50
  51     .vjs-peertube-link {
  52       padding: 0;
  53     }
  54   }
  55 }
  56
  57 #error-block {
  58   display: none;
  59
  60   flex-direction: column;
  61   align-content: center;
  62   justify-content: center;
  63   text-align: center;
  64   background-color: #141313;
  65   width: 100%;
  66   height: 100%;
  67   color: white;
  68   box-sizing: border-box;
  69   font-family: sans-serif;
  70
  71   #error-title {
  72     font-size: 45px;
  73     margin-bottom: 5px;
  74   }
  75
  76   #error-content {
  77     font-size: 24px;
  78   }
  79 }
  80
  81 @media screen and (max-width: 300px) {
  82   #error-block {
  83     font-size: 36px;
  84
  85     #error-content {
  86       font-size: 14px;
  87     }
  88   }
  89 }
  90