www.aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/src/css/components/_layout.scss

   1 .video-js {
   2   // display:inline-block would be closer to the video el's display:inline
   3   // but it results in flash reloading when going into fullscreen [#2205]
   4   display: block;
   5   // Make video.js videos align top when next to video elements
   6   vertical-align: top;
   7   box-sizing: border-box;
   8
   9   color: $primary-foreground-color;
  10   background-color: #000;
  11   position: relative;
  12   padding: 0;
  13   // Start with 10px for base font size so other dimensions can be em based and
  14   // easily calculable.
  15   font-size: 10px;
  16   line-height: 1;
  17
  18   // Provide some basic defaults for fonts
  19   font-weight: normal;
  20   font-style: normal;
  21   // Avoiding helvetica: issue #376
  22   font-family: $text-font-family;
  23
  24   @include user-select(none);
  25
  26   // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
  27   // checking fullScreenEnabled.
  28   &:-moz-full-screen { position: absolute; }
  29
  30   &:-webkit-full-screen {
  31     width: 100% !important;
  32     height: 100% !important;
  33   }
  34 }
  35
  36 // All elements inherit border-box sizing
  37 .video-js *,
  38 .video-js *:before,
  39 .video-js *:after {
  40   box-sizing: inherit;
  41 }
  42
  43 // List style reset
  44 .video-js ul {
  45   font-family: inherit;
  46   font-size: inherit;
  47   line-height: inherit;
  48   list-style-position: outside;
  49
  50   // Important to specify each
  51   margin-left: 0;
  52   margin-right: 0;
  53   margin-top: 0;
  54   margin-bottom: 0;
  55 }
  56
  57 // Fill the width of the containing element and use padding to create the
  58 // desired aspect ratio. Default to 16x9 unless another ratio is given.
  59 @mixin apply-aspect-ratio($width, $height) {
  60   padding-top: 100% * ($height/$width);
  61 }
  62
  63 // Not including a default AR in vjs-fluid because it would override
  64 // the user set AR injected into the header.
  65 .video-js.vjs-fluid,
  66 .video-js.vjs-16-9,
  67 .video-js.vjs-4-3 {
  68   width: 100%;
  69   max-width: 100%;
  70   height: 0;
  71 }
  72
  73 .video-js.vjs-16-9 {
  74   @include apply-aspect-ratio(16, 9);
  75 }
  76
  77 .video-js.vjs-4-3 {
  78   @include apply-aspect-ratio(4, 3);
  79 }
  80
  81 .video-js.vjs-fill {
  82   width: 100%;
  83   height: 100%;
  84 }
  85
  86 // Playback technology elements expand to the width/height of the containing div
  87 // <video> or <object>
  88 .video-js .vjs-tech {
  89   position: absolute;
  90   top: 0;
  91   left: 0;
  92   width: 100%;
  93   height: 100%;
  94 }
  95
  96 // Fullscreen Styles
  97 body.vjs-full-window {
  98   padding: 0;
  99   margin: 0;
 100   height: 100%;
 101   // Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html
 102   overflow-y: auto;
 103 }
 104 .vjs-full-window .video-js.vjs-fullscreen {
 105   position: fixed;
 106   overflow: hidden;
 107   z-index: 1000;
 108   left: 0;
 109   top: 0;
 110   bottom: 0;
 111   right: 0;
 112 }
 113 .video-js.vjs-fullscreen {
 114   width: 100% !important;
 115   height: 100% !important;
 116   // Undo any aspect ratio padding for fluid layouts
 117   padding-top: 0 !important;
 118 }
 119 .video-js.vjs-fullscreen.vjs-user-inactive {
 120   cursor: none;
 121 }
 122
 123
 124 // Hide disabled or unsupported controls.
 125 .vjs-hidden { display: none !important; }
 126
 127 .vjs-disabled {
 128   opacity: 0.5;
 129   cursor: default;
 130 }
 131
 132 // Visually hidden offscreen, but accessible to screen readers.
 133 .video-js .vjs-offscreen {
 134   height: 1px;
 135   left: -9999px;
 136   position: absolute;
 137   top: 0;
 138   width: 1px;
 139 }
 140
 141 .vjs-lock-showing {
 142   display: block !important;
 143   opacity: 1;
 144   visibility: visible;
 145 }
 146
 147 //  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
 148 // The .video-js classname on the video tag also isn't considered.
 149 // This optional paragraph inside the video tag can provide a message to users
 150 // about what's required to play video.
 151 .vjs-no-js {
 152   padding: 20px;
 153   color: #fff;
 154   background-color: #000;
 155   font-size: 18px;
 156   font-family: $text-font-family;
 157   text-align: center;
 158   width: 300px;
 159   height: 150px;
 160   margin: 0px auto;
 161 }
 162
 163 .vjs-no-js a,
 164 .vjs-no-js a:visited {
 165   color: #66A8CC;
 166 }