playback.css

/*

BigBlueButton open source conferencing system - http://www.bigbluebutton.org/

Copyright (c) 2012 BigBlueButton Inc. and by respective authors (see below).

This program is free software; you can redistribute it and/or modify it under the
terms of the GNU Lesser General Public License as published by the Free Software
Foundation; either version 3.0 of the License, or (at your option) any later
version.

BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along
with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.

*/

/* Visually hides text
 * see: yaccessibilityblog.com/library/css-clip-hidden-content.html
 */
.visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

/* Foundation overrides */
.row {
  max-width: 100%; /* Foundation restricts the rows to ~1000px */
}
button, .button {
  margin-bottom: 0; /* this has impact in the media player buttons */
}
body {
  color: #111;
  font-size: 14px;
}

/* Main containers need to fill the entire page height */
body, #playback-content, #playback-row, #main-section, #side-section {
  height: 100%;
}

/* Restrict the page to a minimum width */
html, .acorn-controls {
  min-width: 310px;
}

p {
  font-size: inherit;
}


/* Swappable components have different settings depending on where they are */
#main-section #presentation-area {
  height: 100%;
  margin-bottom: 5px;
}
#main-section #video-area, #main-section #audio-area {
  height: 100%;
  margin-bottom: 5px;
  background: #fff;
}
#side-section #presentation-area {
  height: 30%; /* we HAVE to set a height here, otherwise the slides won't scale properly */
  min-height: 250px;
}
#side-section #video-area, #side-section #audio-area {
  height: auto;
}

#presentation-area {
  position: relative;
}

/* Some internal elements should just fill the entire size of their parents,
   that will control their size. */
#slide {
  width: 100%;
  height: 100%;
  margin: 0 auto;

  /* vertical and horizontal alignment */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#deskshare-video {
  display: block;
  visibility: hidden;

  width: 100%;
  height: 100%;
  margin: 0 auto;

  /* vertical and horizontal alignment */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#chat {
  width: 100%;
  height: 100%;
}
#video-area, #video {
  width: 100%;
  height: 100%;
  /* can't set height:100% here because the height is controlled automatically
     to maintain the aspect ratio. */
}
.acorn-player {
  width: 100%;
  height: 100%;
}


/* The playback bar is moved out of the video/audio area into a more
   generic place in the page, making it look like the controls are not
   only for audio and video, but for all playback. */
#audio-area .acorn-controls, #video-area .acorn-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

/* Prevent unwanted scrollbars and "leaking" elements in the page */
body {
  overflow: hidden;
  /* background: #f6f6f6; */
}
#main-section {
  border-right: 1px solid #e2e2e2;
  background: #f6f6f6;
}

/* Chat style */
#chat {
  padding: 0 10px;
  overflow-y: auto;
  word-wrap: break-word;
  background: #fff;

  /* we use borders here instead of padding because the top/bottom
     padding doesn't really work with a vertical scrollbar */
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
}
#chat strong {
  color: #888;
}
#chat-area {
  border-bottom: 1px solid #e2e2e2;
}
#chat > div {
  margin-bottom: 4px;
}

/* Navbar style */
#navbar {
  height: 48px;
  border-bottom: 1px solid #e2e2e2;
  background: white;
  padding: 0 10px 0 0;
}
#recording-title {
  font-size: 1.45rem;
  padding-top: 8px;
  margin: 0;
  color: #666666;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#navbar .sidebar-icon {
  font-size: 1.65em;
  margin-right: 15px;
  padding-right: 15px;
  padding-left: 15px;
  border-right: 1px solid #e2e2e2;
  float: left;
  color: #666;
  padding-top: 8px;
  height: 48px;
}

/* Presentation and related elements */
#slide {
  background-size: 160px 160px;
  background-repeat: no-repeat;
  background-position: center center;
}
#slide.no-background {
  background-size: 0px 0px;
}
#slide svg {
  width: 100%;
  height: auto;
}
#cursor {
  visibility: hidden;
  width: 12px;
  height: 12px;
  transform: translate(-6px, -6px);
  border-radius: 50%;
  position: fixed;
  background: red;
  z-index: 10;
}
#main-section {
  padding: 10px 10px 25px 10px;
}
#copyright {
  width: 100%;
  font-size: 0.65rem;
  text-align: center;
  color: #888;
  bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Thumbnails */
#thumbnails {
  padding: 10px;
  text-align: center;
}
#thumbnails .thumbnail-wrapper {
	position: relative;
	margin: 0;
  padding: 5px 0;
	cursor: pointer;
}
#thumbnails .thumbnail-wrapper.active,
#thumbnails .thumbnail-wrapper.active:hover {
	background-color: #D9EDF7;
}
#thumbnails .thumbnail-wrapper.active img,
#thumbnails .thumbnail-wrapper.active:hover img {
	border-color: #289ad6; /* #314b5d; */
}
#thumbnails .thumbnail-wrapper:hover img {
	border-color: #289ad6; /* #314b5d; */
}
#thumbnails img {
  max-height: 125px;
  border: 1px solid #eee;
}
#thumbnails .thumbnail-wrapper.hovered .thumbnail-label,
#thumbnails .thumbnail-wrapper.active .thumbnail-label {
  display: block;
}
#thumbnails .thumbnail-label {
	color: #fff;
	background: #289ad6;
	font-weight: bold;
	font-size: 12px;
	position: absolute;
	bottom: 5px;
	left: 0;
  right: 0;
	width: 50%;
  margin: 0 auto;
	text-align: center;
	display: none;
	padding: 2px 5px;
}

/* Sliding sidebar */
.inner-wrap {
  height: 100%;
}
.left-off-canvas-menu {
  background: #fff;
  width: 13rem;
  border-right: 1px solid #e2e2e2;
}
.move-right > .inner-wrap {
  -webkit-transform: translate3d(13rem, 0, 0);
  -moz-transform: translate3d(13rem, 0, 0);
  -ms-transform: translate(13rem, 0);
  -o-transform: translate3d(13rem, 0, 0);
  transform: translate3d(13rem, 0, 0);
}
ul.off-canvas-list li label {
  background: #2a2d34;
  color: #eee;
}
.exit-off-canvas {
  box-shadow: none !important;
}

/* Video style */
#video, #deskshare-video {
  background-color: #f6f6f6;
}

#loading {
  visibility: hidden;
  width: 100%;
  height: 100%;
}

#load-msg {
  font-size: 1.45rem;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  bottom: 30px;
  font-weight: bold;
  width: 100%;
  left: 0;
  right: 0;
}

/* Small screens only */
@media only screen and (max-width: 40em) {
  #copyright {
    font-size: 0.6rem;
  }
  #chat {
    font-size: 12px;
  }
  #side-section #presentation-area {
    min-height: 100px;
  }
}

/* Medium screens up */
@media only screen and (min-width: 40.063em) {
  #side-section #presentation-area {
    min-height: 150px;
  }
}

/* Large screens up */
/* @media only screen and (min-width: 64.063em) { */
/* } */

@media (orientation: portrait) {
  #main-section, #side-section {
    float: none;
    width: 100%;
  }
  #slide {
    /* background-size: contain; */
  }
  #side-section #video-area {
    width: 60%;
    margin: 0 auto;
  }
  #chat {
    font-size: 12px;
  }

  /* show only video or only presentation, not both */
  #side-section #video-area video, #side-section #presentation-area {
    display: none;
  }
  #chat-area {
    border: none;
  }
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-progress {
  background: #35383e;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 4px;
}

.pace-inactive {
  display: none;
}

/* https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text */
@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.animate {
  -webkit-animation: flickerAnimation 1s infinite;
  -moz-animation: flickerAnimation 1s infinite;
  -o-animation: flickerAnimation 1s infinite;
  animation: flickerAnimation 1s infinite;
}

.loading-img {
  position: absolute;
  margin: 0px 0px 0px 0px;
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}