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/player';
   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-js.vjs-peertube-skin {
  31   width: 100%;
  32   height: 100%;
  33   overflow: hidden;
  34
  35   .vjs-poster {
  36     background-size: 100% auto;
  37   }
  38
  39   @media screen and (max-width: 350px) {
  40     .vjs-play-control {
  41       padding: 0 5px !important;
  42       width: 25px !important;
  43     }
  44
  45     .vjs-volume-control {
  46       display: none !important;
  47     }
  48
  49     .vjs-volume-panel {
  50       width: 26px !important;
  51     }
  52
  53     .vjs-peertube-link {
  54       padding: 0;
  55     }
  56   }
  57 }
  58
  59 #error-block {
  60   display: none;
  61
  62   flex-direction: column;
  63   align-content: center;
  64   justify-content: center;
  65   text-align: center;
  66   width: 100%;
  67   height: 100%;
  68   color: white;
  69   box-sizing: border-box;
  70   font-family: sans-serif;
  71
  72   #error-title {
  73     font-size: 45px;
  74     margin-bottom: 5px;
  75   }
  76
  77   #error-content {
  78     font-size: 24px;
  79   }
  80 }
  81
  82 @media screen and (max-width: 300px) {
  83   #error-block {
  84     font-size: 36px;
  85
  86     #error-content {
  87       font-size: 14px;
  88     }
  89   }
  90 }
  91