peer-calls/src/less/main.less

@import "fonts.less";

@font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-monospace: Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;

@color-bg: #086788;
@color-fg: #07A0C3;
@color-btn: #FFF1D0;
@icon-size: 48px;

@color-primary: white;
@color-info: #31EF40;
@color-warning: #F0C808;
@color-error: #EE7600;

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  z-index: -99;
}

body {
  background-color: @color-bg;
  color: @color-fg;
  margin: 0 0;
  font-family: @font-sans-serif;
}

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;
}

#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;
  }

  .button(@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);
    padding: 1rem 1rem;
  }

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

  input:hover {
    .button(@color-primary, darken(@color-warning, 5%));
  }

  input:active {
    transform: translate(0px, 1px);
    .button(@color-primary, darken(@color-warning, 10%));
  }

  input:active,
  input:focus {
    outline: none;
  }

  input[type="submit"] {
    cursor: pointer;
  }

  ::-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 {

  .alert {
    background-color: black;
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    transition: visibility 100ms ease-in, opacity 100ms ease-in;
    z-index: 4;

    span {
      display: inline-block;
      margin: 1rem 0;
      padding: 0 1rem;
    }

    button {
      line-height: 1.4rem;
      border: none;
      border-radius: 0.3rem;
      color: @color-info;
      background-color: @color-fg;
      vertical-align: middle;
    }
  }

  .alert.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .notifications {
    font-family: @font-monospace;
    font-size: 10px;
    left: 1rem;
    position: fixed;
    right: 1rem;
    text-align: right;
    top: 1rem;
    z-index: 3;

    .notification {
      color: @color-info;
      text-shadow: 0 0 0.1rem @color-info;
    }

    .notification.error {
      color: @color-error;
      text-shadow: 0 0 0.1rem @color-error;
    }

    .notification.warning {
      color: @color-warning;
      text-shadow: 0 0 0.1rem @color-warning;
    }

  }

  .videos {
    position: fixed;
    height: 100px;
    bottom: 15px;
    right: 0px;
    text-align: right;

    @video-size: 100px;

    .video-container {
      background-color: black;
      box-shadow: 0px 0px 5px black;
      border-radius: @video-size / 2;
      display: inline-block;
      margin-right: 10px;
      width: @video-size;
      height: 100%;
      z-index: 2;

      video {
        border-radius: @video-size / 2;
        cursor: pointer;
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .video-container.active {
      background-color: transparent;
      box-shadow: none;
      border-radius: 0;
      position: fixed;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;

      video {
        border-radius: 0;
        cursor: inherit;
      }
    }
  }
}

.fade-enter {
  opacity: 0.01;
}

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

.fade-leave {
  opacity: 1;
}

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