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

/*
 * Spreed WebRTC.
 * Copyright (C) 2013-2014 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 {
  left: 0;
  min-height: $minbarheight;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

.bar {
  background-color: $componentbg;
  box-shadow: 0 2px 10px 0 $componentfg3;
  color: $componentfg1;
  font: bold 1em/40px $font-sans-serif;
  // without height bar jumps and disappears on reload, use em to scale with text.
  height: #{$minbarheight/$base-font-size}em;
  text-align: center;
  touch-callout: none;
  user-select: none;
  // @include debug-vertical-alignment();
  @include breakpt($breakpoint-medium) {
    z-index: 40;
    box-shadow: none;
  }
  .btn {
    position: relative;
  }
}

.bar .left {
  bottom: 0;
  left: 0;
  top: 0;
  padding-left: 12px;
  position: absolute;
  .logo {
    background: url(../img/logo-small.png) no-repeat;
    background-size: 100%;
    display: inline-block;
    color: black;
    height: 32px;
    font: normal 11px/11px $font-sans-serif;
    text-align: left;
    width: 90px;
    vertical-align: middle;
    span {
      font-style: italic;
      left: 38px;
      position: relative;
      top: 26px;
    }
    span a {
      color: $bar-logo-text-desc;
    }
  }
}

.bar .middle {
  background-color: $componentbg;
  display: inline-block;
  font-weight: bold;
  min-height: 44px;
  padding: 0 1em;
  position: relative;
  margin-left: -70px;
  z-index: 5;
  @include breakpt($breakpoint-medium) {
    display: block;
    margin-left: 0px;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .userpicture {
    border-radius: 2px;
    display: inline-block;
    height: 46px;
    margin: -5px .5em 0 .5em;
    width: 46px;
  }
  img {
    @include breakpt($breakpoint-medium) {
      display: none;
    }
  }
  &.status-connected,
  &.status-conference {
    @include breakpt($breakpoint-medium) {
      max-width: 100%;
      left: 0;
      position: absolute;
      right: 0;
    }
  }
  &.status-connecting,
  &.status-closed,
  &.status-reconnecting,
  &.status-error,
  &.status-ringing  {
    @include breakpt($breakpoint-medium) {
      border-bottom: 1px solid $bordercolor;
      max-width: 100%;
      min-height: 45px;
    }
  }
  // TODO(theurere): cleanup
  &.status-connecting .actions,
  &.status-closed .actions,
  &.status-reconnecting .actions,
  &.status-error .actions,
  &.status-ringing .actions {
    @include breakpt($breakpoint-medium) {
      display: block;
      padding: .2em 0 .8em 0;
    }
  }
}

.bar .right {
  bottom: 1px;
  padding-right: 8px;
  position: absolute;
  right: 0;
  top: 1px;
  .badge {
    background-color: $actioncolor1;
    border: 1px solid white;
    font-size: .4em;
    position: absolute;
    right: 0;
    top: 2px;
  }
  .btn {
    background: transparent;
    border-color: transparent;
    color: $bar-btn-action-color;
    display: inline-block;
    height: 42px;
    font: 24px/40px $font-sans-serif;
    margin-left: -4px;
    padding: 0;
    text-align: center;
    width: 42px;
    &:focus {
      border: none;
      outline: none;
      box-shadow: 0;
    }
    &:hover {
      background-color: none;
      border-color: $bordercolor;
      color: $bar-btn-action-hover;
    }
    &.active {
      background-color: none;
      border-color: $bordercolor;
      color: $bar-btn-action-hover;
    }
    &.active.amutebtn {
      background-color: $bar-btn-action-mute;
      border-color: $bar-btn-action-mute;
      color: white;
    }
    &.active.aenablebtn {
      background-color: $bar-btn-action-enable;
      border-color: $bar-btn-action-enable;
      color: white;
    }
  }
}

@keyframes shakeityeah {
  0% { transform: translate(2px, 1px) rotate(0deg); }
  2% { transform: translate(-1px, -2px) rotate(-1deg); }
  4% { transform: translate(-3px, 0px) rotate(1deg); }
  8% { transform: translate(0px, 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(0px, 0px) rotate(0deg); }
}

.btn-shakeityeah {
  animation-name: shakeityeah;
  animation-duration: 4.0s;
  transform-origin:50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}