peer-calls/src/scss/style.scss

@import '_fonts';
@import '_variables';

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

html, body {
  z-index: -99;
}

body {
  background-color: $color-bg;
  color: $color-fg;
  margin: 0;
  font-family: $font-sans-serif;
  min-height: 100%;
  padding-bottom: 3rem;
  position: relative;
}

footer {
  position: absolute;
  padding: 1rem 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

body.call {
  background-image: url('../res/peer-calls.svg');
  background-size: 200px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

#github-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
}

@mixin button-style($color-fg, $color-bg) {
  background-color: $color-bg;
  border: none;
  border-bottom: 2px solid darken($color-bg, 10%);
  border-radius: 4px;
  box-sizing: border-box;
  color: $color-fg;
  // font-size: 1.2rem;
  text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.6);
}

@mixin button($color-fg, $color-bg) {
  @include button-style($color-fg, $color-bg);
  cursor: pointer;

  &:hover {
    outline: none;
    @include button-style($color-fg, darken($color-bg, 5%));
  }

  &:active {
    outline: none;
    transform: translate(0px, 1px);
    @include button-style($color-fg, darken($color-bg, 10%));
  }
}

#form {
  padding-top: 50px;
  text-align: center;
  width: 300px;
  margin: 0 auto;

  h1 {
    margin: 0;
    line-height: 0;

    img {
    }
  }

  p {
    margin: 50px 0;
    color: $color-primary;
  }

  input {
    font-family: $font-monospace;
    @include button($color-primary, $color-warning);
    font-size: 1.1rem;
    padding: 1rem 1rem;
  }

  ::-webkit-input-placeholder {
    color: $color-fg;
    text-align: center;
  }

  :-moz-placeholder { /* Firefox 18- */
    color: $color-fg;
    text-align: center;
  }

  ::-moz-placeholder {  /* Firefox 19+ */
    color: $color-fg;
    text-align: center;
  }

  :-ms-input-placeholder {
    color: $color-fg;
    text-align: center;
  }
}

.warning {
  color: $color-warning;
}

.error {
  color: $color-error;
}

.info {
  color: $color-info;
}

.app {
  @import '_alert';
  @import '_notification';
  @import '_video';
  @import '_chat';
  @import '_media';
  @import '_toolbar';
}

.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0.01;
  transition: opacity 100ms ease-in;
}

.side {
  position: absolute;
  display: flex;

  &.left {
    flex-direction: row;
    left: 0;
    top: 0;
    bottom: 0;
  }

  &.right {
    flex-direction: row;
    right: 0;
    top: 0;
    bottom: 0;
  }

  &.top {
    flex-direction: column;
    top: 0;
    left: 0;
    right: 0;
  }

  &.bottom {
    flex-direction: column;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.chat-visible {
  transform: translateX(-330px);
}