spreed-webrtc/src/styles/components/_bar.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/>.
 *
 */

.bar {
  // scss-lint:disable PropertySpelling
  background: $bar-background;
  color: $componentfg1;
  font: bold 1em/50px $font-sans-serif;
  text-align: center;
  touch-callout: none;
  user-select: none;
  z-index: 60;
}

.bar .left {
  padding: 5px 5px 5px 15px;

  @include breakpt($breakpoint-medium) {
    padding: 2px 5px 0 11px;
    padding: 2px 5px 0 11px;
  }
}

.logo {
  background: $logo no-repeat;
  background-size: 100%;
  color: #000;
  display: inline-block;
  font: normal 11px/11px $font-sans-serif;
  height: 32px;
  text-align: left;
  vertical-align: middle;
  width: 90px;

  @include breakpt($breakpoint-medium) {
    background: $scalable-logo no-repeat center;
    height: 46px;
    width: 46px;

    .desc {
      display: none;
    }
  }

  .desc {
    font-style: italic;
    left: 38px;
    position: relative;
    top: 26px;

    a {
      color: $bar-logo-text-desc;
    }
  }
}

.bar .middle {
  // scss-lint:disable SelectorDepth
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 60px;
  text-align: center;
  top: 0;

  > span {
    background: $bar-background;
    display: inline-block;
    min-height: 50px;
    pointer-events: auto;
  }

  .userpicture {
    border-radius: 2px;
    display: inline-block;
    height: 46px;
    margin: -1px .5em 0;
    width: 46px;

    @include breakpt($breakpoint-medium) {
      display: none;
    }
  }

  .status-connected,
  .status-conference,
  .status-connecting,
  .status-closed,
  .status-reconnecting,
  .status-error,
  .status-ringing {

    @include breakpt($breakpoint-medium) {
      left: 0;
      max-width: 100%;
      position: absolute;
      right: 0;
    }
  }

  .status-connecting .actions,
  .status-closed .actions,
  .status-reconnecting .actions,
  .status-error .actions,
  .status-ringing .actions {
  }
}

.bar .right {
  margin-top: -1px;
  padding-right: 4px;

  .badge {
    background-color: $actioncolor1;
    border: 1px solid #fff;
    font-size: .4em;
    position: absolute;
    right: 0;
    top: 2px;
  }

  .btn {
    background: $bar-btn-action-normal;
    border-color: $bar-btn-action-normal-border;
    color: $bar-btn-action-color;
    font: 24px/40px $font-sans-serif;
    height: 42px;
    margin-left: -2px;
    padding: 0;
    position: relative;
    text-align: center;
    width: 42px;

    &:focus {
      border: 0;
      box-shadow: 0;
      outline: none;
    }

    &:hover {
      background-color: transparent;
      border-color: $bar-btn-action-border;
      color: $bar-btn-action-hover;
    }

    &.active {
      background-color: transparent;
      border-color: $bordercolor;
      color: $bar-btn-action-hover;
    }

    &.active.amutebtn {
      background-color: $bar-btn-action-mute;
      border-color: $bar-btn-action-mute;
      color: #fff;
    }

    &.active.aenablebtn {
      background-color: $bar-btn-action-enable;
      border-color: $bar-btn-action-enable;
      color: #fff;
    }
  }
}

.btn-mutemicrophone i:before {
  content: '\f130';
}

.btn-mutemicrophone.active i:before {
  content: '\f131';
}

.btn-mutecamera i:before {
  content: '\f06e';
}

.btn-mutecamera.active i:before {
  content: '\f070';
}

@keyframes shakeityeah {
  0% { transform: translate(2px, 1px) rotate(0deg); }
  2% { transform: translate(-1px, -2px) rotate(-1deg); }
  4% { transform: translate(-3px, 0) rotate(1deg); }
  8% { transform: translate(0, 2px) rotate(0deg); }
  10% { transform: translate(1px, -1px) rotate(1deg); }
  12% { transform: translate(-1px, 2px) rotate(-1deg); }
  14% { transform: translate(-3px, 1px) rotate(0deg); }
  16% { transform: translate(2px, 1px) rotate(-1deg); }
  18% { transform: translate(-1px, -1px) rotate(1deg); }
  20% { transform: translate(2px, 2px) rotate(0deg); }
  22% { transform: translate(1px, -2px) rotate(-1deg); }
  24% { transform: translate(0, 0) rotate(0deg); }
}

.btn-shakeityeah {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: shakeityeah;
  animation-timing-function: steps(5);
  transform-origin: 50% 50%;
}