yaffs.net Git - yaffs-website/blob - node_modules/video.js/src/css/components/_adaptive.scss

   1 // When the player is absurdly tiny, display nothing but:
   2 // - Play button
   3 // - Fullscreen Button
   4 .video-js.vjs-layout-tiny:not(.vjs-fullscreen) {
   5   .vjs-custom-control-spacer { @include flex(auto); }
   6   &.vjs-no-flex .vjs-custom-control-spacer { width: auto; }
   7
   8   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
   9   .vjs-playback-rate, .vjs-progress-control,
  10   .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
  11   .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
  12   .vjs-subtitles-button, .vjs-audio-button { display: none; }
  13 }
  14
  15 // When the player is x-small, display nothing but:
  16 // - Play button
  17 // - Progress bar
  18 // - Fullscreen Button
  19 .video-js.vjs-layout-x-small:not(.vjs-fullscreen) {
  20   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
  21   .vjs-playback-rate,
  22   .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
  23   .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
  24   .vjs-subtitles-button, .vjs-audio-button { display: none; }
  25 }
  26
  27
  28 // When the player is small, display nothing but:
  29 // - Play button
  30 // - Progress bar
  31 // - Volume menu button
  32 // - Captions Button
  33 // - Fullscreen button
  34 .video-js.vjs-layout-small:not(.vjs-fullscreen) {
  35   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
  36   .vjs-playback-rate,
  37   .vjs-mute-control, .vjs-volume-control,
  38   .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
  39   .vjs-subtitles-button .vjs-audio-button { display: none; }
  40 }