gecko-dev/browser/components/loop/standalone/content/css/webapp.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

html,
body,
#main {
  /* Required for `justify-content: space-between` to divide space equally
   * based on the full height of the page */
  height: 100%;
}

.standalone {
  width: 100%;
  background: #fbfbfb;
  color: #666;
  text-align: center;
  font-family: Open Sans,sans-serif;
}

.standalone-header {
  border-radius: 4px;
  background: #fff;
  border: 1px solid #E7E7E7;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.03);
}

.header-box {
  padding: 1rem 5rem;
  margin-top: 2rem;
}

/*
 * Top/Bottom spacing
 **/
.standalone-footer {
  margin-bottom: 2rem;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  /* prevent the video conversation elements to occupy the whole available
   width hence the height while keeping aspect ratio */
  width: 30%;
  min-width: 400px;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.container-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-content: center;
}

.terms-service,
.terms-service a {
  font-size: .6rem;
  font-weight: 400;
  color: #adadad;
}

  .terms-service a {
    text-decoration: none;
  }

  .terms-service a:hover {
    text-decoration: underline;
  }

  .terms-service a {
    color: #777;
  }

.footer-external-links a {
  padding: .2rem .7rem;
  margin: 0 .5rem;
  text-decoration: none;
}

  .footer-external-links a:hover {
    color: #111;
  }

.footer-logo {
  width: 100px;
  margin: 0 auto;
  height: 30px;
  background-size: contain;
  background-image: url("../shared/img/mozilla-logo.png");
  background-repeat: no-repeat;
}

.loop-logo {
  width: 100px;
  height: 100px;
  margin: 1rem auto;
  background-image: url("../shared/img/firefox-logo.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.standalone-header-title,
.standalone-btn-label {
  font-weight: lighter;
}

.standalone-header-title {
  font-size: 1.8rem;
  line-height: 2.2rem;
}

p.standalone-btn-label {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

.light-color-font {
  opacity: .4;
  font-weight: normal;
}

.standalone-btn-chevron-menu-group {
  display: flex;
  justify-content: space-between;
  flex: 2;
}

.start-audio-only-call,
.standalone-call-btn-video-icon {
  width: 1.2rem;
  height: 1.2rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.start-audio-only-call {
  width: 100%;
  border: none;
  color: #111;
  background-color: #fff;
  background-size: 10px;
  background-image: url("../shared/img/audio-default-16x16@1.5x.png");
  background-position: 90% center;
}

.start-audio-only-call:hover {
  background-image: url("../shared/img/audio-inverse-14x14.png");
}

.standalone-call-btn-video-icon {
  background-image: url("../shared/img/video-inverse-14x14.png");
  display: inline-block;
  background-size: 1.2rem;
  margin-left: .5rem;
}

/* Ellipsed text content of audio-video call btn */
.standalone-call-btn-text {
  /* make some room for the video icon */
  max-width: 85%;
  vertical-align: bottom;
}

.standalone-call-btn-video-icon {
  vertical-align: top;
}

@media (min-resolution: 2dppx) {
  .start-audio-only-call {
    background-image: url("../shared/img/audio-default-16x16@2x.png");
  }
  .start-audio-only-call:hover {
    background-image: url("../shared/img/audio-inverse-14x14@2x.png");
  }
  .standalone-call-btn-video-icon {
    background-image: url("../shared/img/video-inverse-14x14@2x.png");
  }
}

.btn-pending-cancel-group > .btn-cancel {
  flex: 2 1 auto;
}

.btn-large {
  /* Dimensions from spec
   * https://people.mozilla.org/~dhenein/labs/loop-link-spec/#call-start */
  font-size: 1rem;
  padding: .3em .5rem;
}

  .btn-large + .btn-chevron {
    padding: 1rem;
    height: 100%; /* match full height of button */
  }

/*
 * Left / Right padding elements
 * used to center components
 * */
.flex-padding-1 {
  display: flex;
  flex: 1;
}

/**
 * Feedback form overlay (standalone only)
 */
.standalone .ended-conversation {
  position: relative;
  height: 100%;
  background-color: #444;
  text-align: left; /* as backup */
  text-align: start;
}

.standalone .ended-conversation .feedback {
  position: absolute;
  width: 50%;
  max-width: 400px;
  margin: 10px auto;
  top: 20px;
  left: 10%;
  right: 10%;
  background: #FFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  z-index: 1002; /* ensures the form is always on top of the control bar */
}

.standalone .ended-conversation .local-stream {
  /* Hide  local media stream when feedback form is shown. */
  display: none;
}

@media screen and (max-width:640px) {
  .standalone .ended-conversation .feedback {
    width: 92%;
    top: 10%;
    left: 5px;
    right: 5px;
  }
}