tubestation/browser/components/loop/content/css/contacts.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 {
  font-size: 10px;
  font-family: sans-serif; /* XXX will be changed to a system font in bug 1191398 */
}

.contact-import-spinner {
  display: none;
}

.contact-import-spinner.busy {
  display: inline-block;
  vertical-align: middle;
  -moz-margin-start: 10px;
}

.contact-filter-container {
  display: flex;
  height: 2em;
}

.contact-filter {
  margin: 0;
  -moz-padding-start: 34px;
  width: 100%;
  height: 28px;
  border: 0;
  border-bottom: 1px solid #ddd;
  background-image: url("../shared/img/icons-14x14.svg#magnifier");
  background-position: 10px center;
  background-size: 14px;
  background-repeat: no-repeat;
  color: #999;
  font-size: 1.2rem;
  flex: 2 1 auto;
  align-self: stretch;
}

html[dir="rtl"] .contact-filter {
  background-position: right 10px center;
}

.contact-filter:focus + .clear-search,
.contact-filter:focus {
  border-bottom: 1px solid #5cccee;
  color: #4a4a4a;
}

.clear-search {
  width: 34px;
  height: 28px;
  border: none;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  background-image: url("../shared/img/icons-14x14.svg#clear");
  background-position: center;
  background-size: 14px;
  background-repeat: no-repeat;
  cursor: pointer;
  flex: 0 1 auto;
  align-self: stretch;
}

.contact-list {
  overflow-x: hidden;
  overflow-y: auto;
  /* Space for six contacts, not affected by filtering.  This is enough space
     to show the dropdown menu when there is only one contact. */
  height: 306px;
  /* Contact list title goes away when searching, needed for spacing. */
  margin-top: 4px;
}

.contact-list-title {
  padding: 0 1rem;
  color: #666;
  font-weight: 500;
  font-size: .9em;
  margin-top: 1rem;
}

.contact,
.contact-separator {
  padding: .5rem 15px;
  font-size: 13px;
}

.contact {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #666;
}

.contact-separator {
  background-color: #eee;
  color: #888;
}

.contact-separator:not(:first-child) {
  border-top: 1px solid #ccc;
}

.contact:hover {
  background-color: #E3F7FE;
}

.contact:hover > .icons {
  display: block;
  z-index: 1;
}

.contact > .details {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact:hover > .details {
  /* Hovering the contact shows the icons/ buttons, which takes up horizontal
   * space. This causes the fixed-size avatar to resize horizontally, so we assign
   * a flex value equivalent to the maximum pixel value to avoid the resizing
   * to happen. Consider this a hack. */
  flex: 190;
}

.contact > .avatar {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  -moz-margin-end: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  background-image: url("../shared/img/audio-call-avatar.svg");
  background-repeat: no-repeat;
  background-color: #4ba6e7;
  background-size: contain;
  -moz-user-select: none;
}

/*
 * Loop through all 12 default avatars.
 */
.contact:nth-child(12n + 1) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#blue-avatar");
  background-color: #4A90E2;
}

.contact:nth-child(12n + 2) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#orange-avatar");
  background-color: #F3A35C;
}

.contact:nth-child(12n + 3) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#mintgreen-avatar");
  background-color: #50E2C2;
}

.contact:nth-child(12n + 4) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#lightpink-avatar");
  background-color: #E364A1;
}

.contact:nth-child(12n + 5) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#grey-avatar");
  background-color: #9B9B9B;
}

.contact:nth-child(12n + 6) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#yellow-avatar");
  background-color: #F3E968;
}

.contact:nth-child(12n + 7) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#purple-avatar");
  background-color: #9C61AF;
}

.contact:nth-child(12n + 8) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#lightgreen-avatar");
  background-color: #9AC967;
}

.contact:nth-child(12n + 9) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#darkblue-avatar");
  background-color: #607CAE;
}

.contact:nth-child(12n + 10) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#darkpink-avatar");
  background-color: #CE4D6E;
}

.contact:nth-child(12n + 11) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#brown-avatar");
  background-color: #8A572A;
}

.contact:nth-child(12n + 12) > .avatar.defaultAvatar {
  background-image: url("../shared/img/avatars.svg#green-avatar");
  background-color: #56B397;
}

.contact > .avatar > img {
  width: 100%;
}

.contact-list-empty,
.contact-search-list-empty {
  background-image: url("../shared/img/empty_contacts.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 128px;
  margin-top: 4rem;
  padding-top: 12rem;
  padding-bottom: 5rem;
  text-align: center;
  color: #4a4a4a;
}

.contact-search-list-empty {
  background-image: url("../shared/img/empty_search.svg");
}

.panel-text-medium,
.panel-text-large {
  margin: 3px;
  color: #4a4a4a;
}

.panel-text-medium {
  font-size: 1.2rem;
}

.panel-text-large {
  font-size: 2.2rem;
}

.contact > .details > .username {
  font-size: 1.3rem;
  line-height: 20px;
  color: #000;
}

.contact.blocked > .details > .username {
  color: #d74345;
}

.contact > .details > .username > strong {
  font-weight: bold;
}

.contact > .details > .username > i.icon-blocked {
  display: inline-block;
  width: 10px;
  height: 20px;
  -moz-margin-start: 3px;
  background-image: url("../shared/img/icons-16x16.svg#block-red");
  background-position: center;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}

.contact > .details > .email {
  color: #4a4a4a;
  font-size: 11px;
  line-height: 14px;
}

.icons {
  cursor: pointer;
  display: none;
  -moz-margin-start: auto;
  color: #fff;
  -moz-user-select: none;
}

.icons:hover {
  display: block;
}

.icons i {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-contact-video-call {
  padding: 15px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #5bc0a4;
  background-image: url("../shared/img/icons-14x14.svg#video-white");
  background-size: 14px 14px;
}

.icon-contact-video-call:hover {
  background-color: #47b396;
}

.icon-contact-video-call:active {
  background-color: #3aa689;
}

.icon-vertical-ellipsis {
  /* Added padding for a larger click area. */
  padding: 0 10px;
  margin: 6px 0;
  -moz-margin-start: 5px;
  -moz-margin-end: -8px;
  width: 4px;
  height: 20px;
  background-image: url("../shared/img/ellipsis-v.svg");
  background-size: contain;
}

.contact > .dropdown-menu {
  z-index: 2;
  top: 37px;
  right: 22px;
  bottom: auto;
  left: auto;
  z-index: 2;
}

html[dir="rtl"] .contact > .dropdown-menu {
  right: auto;
  left: 22px;
}

.contact > .dropdown-menu-up {
  bottom: 25px;
  top: auto;
}

.contact-form {
  padding: 14px; /* Override based on spacing in Mockup */
}
/* This will effect the header displayed at the top of the contact details form
 */
.contact-form header {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  color: #4a4a4a;
}

.contact-form .form-content-container {
  height: 24.1rem; /* This height is needed to keep the panel height at 400px and
                      the bottom elements at the bottom of the panel
                      Can likely go away if we switched this pane to flexbox model */
  padding-top: 4px; /* Based on spacing in Mockup
                    replaced margin-top
                    See http://stackoverflow.com/questions/6204670/css-clean-solution-to-the-margin-collapse-issue-when-floating-an-element
                    */
}

.contacts-gravatar-promo {
  border: 1px solid #5cccee;
  border-radius: 2px;
  background-color: #fff;
  font-size: 1.2rem;
  margin: 1.5rem;
  padding: 1.5rem 1rem;
  position: relative;
}

.contacts-gravatar-promo > p {
  margin-top: 0;
  word-wrap: break-word;
}

.contacts-gravatar-promo > p > a {
  color: #0295df;
  text-decoration: none;
}

.contacts-gravatar-promo > p > a:hover {
  text-decoration: underline;
}

.contacts-gravatar-promo > .button-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

html[dir="rtl"] .contacts-gravatar-promo > .button-close {
  right: auto;
  left: 8px;
}

.contacts-gravatar-avatars {
  height: 50px;
  margin: 1.5rem auto;
  text-align: center;
  width: 200px;
}

.contacts-gravatar-avatars img {
  margin: 0 1.5rem;
  vertical-align: middle;
  width: 50px;
}

/* Adjust the Firefox avatar because it has pointy ears. */
.contacts-gravatar-avatars img:last-child {
  transform: scale(1.08) translateY(-2px);
}

.contacts-gravatar-arrow {
  border-color: #9b9b9b;
  border-style: solid solid none none;
  border-width: 2px;
  display: inline-block;
  height: 1.5rem;
  -moz-margin-start: -.75rem;
  transform: rotateZ(45deg);
  vertical-align: middle;
  width: 1.5rem;
}

html[dir="rtl"] .contacts-gravatar-arrow {
  transform: rotateZ(225deg);
}

.contacts-gravatar-buttons {
  padding: 0 .5rem;
}

.contact-controls {
  padding: 0 16px;
}

.contact-controls > .button {
  padding: .5em;
  border: none;
  border-radius: 5px;
}

.button.primary {
  background: #00A9DC;
  color: #fff;
}

.button.primary:active,
.button.primary:hover {
  background: #5cccee;
}

.button.secondary {
  background: #ebebeb;
  color: #4D4D4D;
}

.button.secondary:hover,
.button.secondary:active {
  background: #dad6d6;
  color: #4D4D4D;
}

.contact-controls > .primary {
  flex: 5;
}

.contact-controls > .secondary {
  flex: 3;
}