spreed-webrtc/src/styles/components/_presentation.scss

/*
 * Spreed WebRTC.
 * Copyright (C) 2013-2015 struktur AG
 *
 * This file is part of Spreed WebRTC.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */


.mainPresentation #presentation { // scss-lint:disable IdSelector
  display: block;
}

.presentation {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  .overlaybar {
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;

    .overlaybar-content {
      // scss-lint:disable NestingDepth
      max-width: 100%;

      .pagecontrol {
        height: 30px;
      }
    }

    .btn-prev {
      left: 40px;
    }

    .btn-next {
      left: auto;
      right: 0;
    }

    .overlaybar-button {
      font-size: 20px;
      line-height: 28px;
      padding: 4px 6px;
      position: absolute;
      top: 0;
    }
  }

  .thumbnail {
    color: #333;
    display: inline-block;
    height: 122px;
    margin-left: 20px;
    margin-top: 20px;
    position: relative;
    text-shadow: none;
    vertical-align: middle;
    width: 160px;

    &:first-child {
      margin-left: 0;
    }

    &.presentable {
      cursor: pointer;
    }

    &:hover .presentation-action {
      display: block;
    }

    &:hover .notavailable {
      display: block;
    }

    .caption {
      // scss-lint:disable NestingDepth
      overflow: hidden;
      padding-bottom: 0;
      text-overflow: ellipsis;

      .size {
        font-size: 10px;
      }

      .progress {
        position: relative;
      }

      .download-info {
        bottom: 0;
        color: $text-color;
        left: 0;
        line-height: 20px;
        position: absolute;
        right: 0;
        text-shadow: 1px 1px 1px #fff;
        top: 0;
      }
    }

    .active {
      bottom: 0;
      color: #84b819;
      font-size: 10em;
      left: 0;
      opacity: .7;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
    }

    .notavailable {
      bottom: 0;
      color: #d2322d;
      display: none;
      font-size: 10em;
      left: 0;
      opacity: .25;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
    }

    .presentation-action {
      display: none;
      position: absolute;
      top: 1px;
    }

    .download {
      left: 1px;
    }

    .delete {
      right: 1px;
    }

    .filetype {
      font-size: 5em;
    }
  }
}

.presentationpane {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;

  .welcome {
    padding: 0;

    h1 {
      white-space: normal;
    }

    .btn {
      margin-top: 30px;
    }

    .progress span {
      text-shadow: none;
    }

    .progress .download-info {
      color: $text-color;
      left: 0;
      position: absolute;
      text-shadow: 1px 1px 1px #fff;
      width: 100%;
    }
  }

  .canvasContainer {
    height: 100%;
    width: 100%;
    overflow: hidden;

    iframe {
      border: 0;
      height: 100%;
      width: 100%;
    }
  }
}

.pageinfo input {
  display: inline;
  width: 70px;
}

.presentations {
  height: 156px;
  margin-left: -25px;
  margin-right: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}