sms.css

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 10px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}


/* Style for the attachment options menu, mimics style for shared
 * options menu element.
 * TODO: We should remove this once we used the shared options menu for the
 *       attachment menu.
 */
#attachment-options {
  visibility: hidden;
  transform: translateY(100%);
  transition: transform ease-in-out .3s, visibility .3s;
}

#attachment-options.visible {
  visibility: visible;
  transform: translateY(0);
}

/*
  Override BB. Some CSS tweaks for having a better confirm readability
*/
form[role="dialog"][data-type="confirm"] p {
  white-space: pre-line;
}

form[role="dialog"].error-dialog-show-recipient ul {
  border: none;
}

form[role="dialog"].error-dialog-show-recipient ul li {
  padding: 0;
}

/* This does not override the building block, that's why we use a shorter
 * selector */
.error-dialog-show-recipient li {
  /* future-proof in case BB moves to "text-align: start" */
  width: -moz-fit-content;

  /* List items are phone numbers */
  direction: ltr;
  unicode-bidi: -moz-isolate;
}

gaia-header {
  position: relative;
  z-index: 10;
}

.group-header-title {
  display: flex;
  justify-content: center;
}

/* Override Building Block [Input areas] styles */
form.bottom[role="search"] {
  z-index: 3;
}

/* Override Building Block [Edit mode] styles */
form[role="dialog"][data-type="edit"] gaia-header {
  transform: translateY(-110%);
}

form[role="dialog"][data-type="edit"] > menu {
  transform: translateY(110%);
}

/* Override Building Block [Lists] styles */
[data-type="list"] {
  padding: 0;
}

#main-wrapper.edit [data-type="list"] li a {
  pointer-events: none;
}

#threads-container[data-type="list"] .mms-icon {
  display: none;

  font-size: 1.5rem;
  color: #ff6622;
}

#threads-container[data-type="list"] [data-last-message-type="mms"] .mms-icon {
  display: inline;
}

.edit .bottom-tab[role="region"] {
  visibility: visible;
}

.bottom-tab[role="region"] {
  visibility: hidden;
}

#threads-container[data-type="list"] [data-last-message-type="mms"] .body-text {
  display: none;
}

[data-type="list"] header {
  margin: 0 1.5rem;
}

#sticky {
  position: absolute;

  /* The sticky element is positioned at the beginning of the list. */
  top: 5rem;

  /* The width is not 100% so the scrollbar is visible. */
  width: calc(100% - 2rem);

  /* The height needs to be kept in sync with the header height. */
  height: 3.1rem;

  /* Leaving 1rem margin for both side to makes scrollbar visible in LTR/RTL */
  margin: 0 1rem;

  /* The sticky element needs to be above the list. */
  z-index: 2;

  /* Hide sticky header when content is not ready */
  visibility: hidden;

  /* Those style will affect the backgroundImage: -moz-element. */
  background-repeat: no-repeat;
  background-position: center top;
  background-color: white;
}

#sticky.has-content {
  /* Set sticky header visible only when content is ready */
  visibility: visible;
}

.edit #threads-container[data-type="list"] {
  height: calc(100% - 10rem);
}

#threads-container[data-type="list"] header {
  background: #fff;
}

#threads-container[data-type="list"] ul {
  padding: 0 1.0rem;
  background-color: #fff;
}

.threadlist-item-picture {
  display: none;
}

.threadlist-item-picture.has-picture {
  display: block;
}

.threadlist-item .default-picture > span[data-type=img],
.threadlist-item .group-picture > span[data-type=img] {
  /* Please keep this image in sync with what is used in JS/ThreadListUI */
  background-image: url('images/default_contact_image.png');
  background-position: top left;
}

.threadlist-item:nth-child(even) .default-picture > span[data-type=img],
.threadlist-item:nth-child(even) .group-picture > span[data-type=img] {
  background-position: bottom right;
}

.threadlist-item:nth-child(3n+1) .default-picture > span[data-type=img],
.threadlist-item:nth-child(3n+1) .group-picture > span[data-type=img] {
  background-position: top right;
}

.threadlist-item:nth-child(4n+4) .default-picture > span[data-type=img],
.threadlist-item:nth-child(4n+4) .group-picture > span[data-type=img] {
  background-position: center center;
}

.threadlist-item-picture.group-picture > span[data-type=img] {
  display: flex;

  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 2.5rem;
}

/* Override Building Block Tabs styles */
form[role="dialog"][data-type="edit"] .bb-tablist:before {
  bottom: 5.5rem ;
}

form[role="dialog"][data-type="edit"] .bb-tablist > li {
  height: 5.5rem ;
}

.bb-tablist > li button {
  background-position: 50% 50% ;
}

.bb-tablist > li button[data-action="delete-button"] {
  background-image: url("images/icons/delete.png");
}

.bb-tablist > li button[data-action="mark-as-read"] {
  background-image: url("images/icons/ico_in_markasread_30x30.png");
}

.bb-tablist > li button[data-action="mark-as-unread"] {
  background-image: url("images/icons/ico_in_markasunread_30x30.png");
}

/**
 * Bug 967878, 979018 -[Messages] Background doesn't
 * scroll with the threads causing expensive over-invalidation
 */
#threads-container > div {
  background-color: #fff;
}

[data-type="list"] li > label {
  display: block;
  overflow: hidden;
  opacity: 0;
}

[data-type="list"] aside.icon-unread {
  margin: 0;
  width: 1.9rem;
  visibility: hidden;
}

[data-type="list"] aside.pack-end {
  margin: 0 .5rem;
}

[data-type="list"] .unread aside.icon-unread {
  background: url("../style/images/unread.png") no-repeat left center / 1rem;
  visibility: visible;
}

[data-type="list"] .threadlist-item a * {
  pointer-events: none;
}

[data-type="list"] .summary {
  display: flex;
}

/* Override time margin for flex layout */
[data-type="list"] .summary time {
  -moz-margin-end: 1rem;
}

[data-type="list"] .draft .icon-draft {
  background: url("../style/images/draft.png") no-repeat left center / 1.2rem;
  visibility: visible;
}

[data-type="list"] .is-draft .pack-end {
  opacity: 0.5;
}

[data-type="list"] .is-draft .threadlist-item-title {
  font-style: italic;
  color: #5f5f5f;
}

[data-type="list"] p time {
  display: inline-block;
}

[data-type="list"] .unread p time {
  color: #1D8399;
}

/* Lists: edit mode */
.edit [data-type="list"] li > a {
  transform: translateX(-1.5rem);
}

.edit [data-type="list"] li > label {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(2rem);
}

.edit [data-type="list"] .danger {
  transform: translateX(2.5rem);
}

.edit [data-type="list"] li > .pack-checkbox input ~ span:after {
  opacity: 1;
  transform: translateX(2.5rem);
}

.edit [data-type="list"] li > a > aside.icon-unread {
  transform: translateX(5rem);
}

.edit [data-type="list"] li > a > p {
  transform: translateX(5.0rem);
  -moz-margin-end: 3.4rem;
}

.edit #threads-container aside.pack-end {
  -moz-margin-start: 4rem;
}

.edit #threads-container[data-type="list"] aside.pack-end span {
  transform: translateX(1.5rem);
}

/* Panel handling */
#main-wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
}

.panel {
  position: absolute;
  left: 100%;
  width: 100%;
  height: 100%;

  transition: transform 0.4s ease;
}

.default-panel {
  left: 0;
}

#main-wrapper[data-position='left'] .panel {
  transform: translateX(-100%);
}

#threads-container, #thread-messages, #information-participants, #information-report {
  z-index: 10;
  background: white;
}

#messages-contact-pick-button {
  display: none;
}

#messages-new-message-notice {
  display: flex;
  flex-direction: row;

  padding: 1rem;
  -moz-padding-start: 2rem;
  -moz-padding-end: 1.5rem;
  overflow: hidden;

  white-space: nowrap;
  line-height: 2rem;
  font-size: 1.8rem;
}

#messages-new-message-notice a {
  margin: 0;
}

#messages-new-message-notice .contact {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

#messages-new-message-notice > .text-container {
  flex: auto;

  overflow: hidden;
}

#messages-new-message-notice > .button-container {
  flex: none;

  padding: 0.2rem;
  -moz-padding-start: 1.5rem;
  -moz-padding-end: 0;
}

/*
  Styles for Edit mode in Thread List
*/

form[role="dialog"][data-type="edit"] {
  visibility: hidden;
}

.edit form[role="dialog"][data-type="edit"] {
  visibility: visible;
}

.edit form[role="dialog"][data-type="edit"] > menu {
  transform: translateY(0);
}

.edit form[role="dialog"][data-type="edit"] gaia-header {
  transform: translateY(0);
}

/*
  Styles for new message
*/

section[role="region"].new > gaia-header h1 {
  pointer-events: none;
}

.new #messages-contact-pick-button {
  display: block;

  width: 5rem;
  height: 4rem;
}

#messages-contact-pick-button .icon-user {
  position: absolute;
  top: 0.6rem;
  right: 1rem;

  display: block;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;

  color: #575757;
  background-color: #FFF;
}

#messages-contact-pick-button .icon-user:after {
  content: "+";
  position: absolute;

  display: block;
  width: 2.8rem;
  height: 2.8rem;

  line-height: 2.8rem;
  font-size: 2.1rem;
  font-weight: 500;
  text-align: center;
}

#messages-contact-pick-button .icon-user:active {
  color: #FFF;
  background-color: #29bbb5;
}
/*
  Messages Style as 'bubbles'
*/

.carrier-wrapper {
  display: none;

  box-sizing: border-box;
  height: 2.2rem;
  padding: 0 1.5rem;

  font-size: 1.4rem;
  line-height: 2.2rem;
  text-align: start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  background: rgba(255, 255, 255, 0.95);
  color: #333;
}

.carrier-wrapper .phone-carrier {
  color: #008787;
}

.has-carrier .carrier-wrapper {
  display: block;
}

#messages-container .messages-date-group-header {
  position: sticky;
  top: 0;
  z-index: 1;

  height: 2.2rem;
  margin: 0;
  padding: 0.6rem 3rem;

  font-size: 1.4rem;
  line-height: 2.2rem;
  text-transform: uppercase;

  background: rgba(225, 240, 236, 0.85);
  color: #008787;
}

/* If has carrier change top position */
.has-carrier #messages-container .messages-date-group-header {
  top: 2.2rem;
}

.has-carrier #messages-container > .messages-date-group:first-child > .messages-date-group-header {
  margin-top: 2.2rem;
}

/* TODO: check whether we need this rule */
#messages-container .messages-date-group-header.hidden {
  display: none;
}

.article-list[data-type="list"] .message {
  z-index: 0; /* bug 970422 */

  overflow: hidden;
  width: 100%;
  height: auto;
  padding-bottom: 1rem;
  border-bottom: none;
}

.article-list[data-type="list"] .message.hidden {
  display: none;
}

/* remove margin for notice-button class of button */
.notice-button {
  margin: 0;
}

#messages-container[data-type="list"] .message.mms .bubble img {
  height: auto;
  width: auto;
}

/* transition in and out edit mode, both for LTR and RTL contexts */
.message .bubble {
  transition: transform 0.4s ease 0s;
}

/*
  Styles for Edit mode in Messages Container
*/

.edit #messages-container {
  margin-bottom: 5.5rem;
}

.edit .article-list[data-type="list"] .message {
  border-color: #e7e7e7;
}

.edit [data-type="list"] .message .bubble {
  pointer-events: none;
}

.edit .message .bubble {
  pointer-events: none;
}

.edit .message.incoming .bubble {
  transform: translateX(2.5rem);
}

.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.edit #messages-compose-form {
  display: none;
}

/* Add a margin at the end of the last thread or message node to avoid overlay
 * with the edit mode menu */
.edit .edit-container {
  padding-bottom: 7rem;
}

/*
  Loading screen while deleting
*/

#loading.show-loading {
  display: block;
}

#loading {
  display: none;
}

.loading-header {
  text-align: start;
}

#loading [role="status"] {
  text-align: center;
  height: 4rem;
}

#loading p {
  border-bottom: none;
}

/*
  No result container
*/

#threads-no-messages {
  background-image: url('images/SMS_200x200_bubble.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20rem;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 5rem);
  width: 100%;
}

#no-result-message {
  position: relative;
  top: 50%;

  width: 27rem;
  padding: 2rem 0.5rem;
  margin: -8rem auto;
  border-top: .1rem solid rgba(96,96,96,.5);

  line-height: 3rem;
  text-align: start;
  font-weight: 300;
  font-size: 2.2rem;
  color: #606060;
}

/*
  Styles related to the layout of the composer
*/

section[role="region"].new .subheader {
  height: 0;
}

#messages-to-field {
  position: relative;
  /* To be above .article-list's with z-index = 5 */
  z-index: 6;

  display: none;
  min-height: 5.5rem;

  text-align: start;
  color: black;
  font-size: 1.465rem;
  background-color: #f2f2f2;
  transition: transform 0.2s ease-in-out 0s;
  transform: translateY(calc(-100% + 4rem));
}

.multiline-recipients-mode #messages-to-field {
  transform: translateY(calc(-100% + 5.5rem));
}

section[role="region"].new #messages-to-field {
  display: flex;
  align-items: flex-end;
}


section[role="region"].new #messages-to-field.multiline {
  transform: translateY(0);
}

#to-label {
  flex-shrink: 0;

  height: 4rem;
  -moz-padding-start: 1.5rem;
  -moz-padding-end: 0.7rem;

  line-height: 4rem;
  font-weight: 200;
  font-size: 1.465rem;
  color: #000;
}

#messages-recipients-list-container {
  min-height: 4rem;
  min-width: 0;
  box-sizing: border-box;

  flex-grow: 1;
}

#messages-recipients-list {
  box-sizing: border-box;
  min-height: 4rem;
  padding-top: 0;
  -moz-padding-end: 0.6rem;
  padding-bottom: 0.6rem;
  -moz-padding-start: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/*
Used by Recipients.View to display multi or single line.
Do not remove.
*/
#messages-recipients-list.singleline {
  overflow-y: hidden;
}

#messages-recipients-list.multiline {
  /* max-height = viewport - header - minimum composer - list margin */
  max-height: calc(100vh - 5rem - 4rem - 0.6rem);
  margin-bottom: 0.6rem;
  padding-bottom: 0;

  overflow-y: scroll;
}

.recipient[contenteditable] {
  overflow: hidden;
  /**
   * We don't use -moz-margin-end\-start here because margin location shouldn't
   * depend on text direction of recipient element content itself. For LTR mode
   * both LTR and RTL recipient elements should have right margin, for RTL mode
   * it should have left margin, so to align it correctly we should override
   * margin depending on text direction of parent element.
   */
  margin: 0.6rem 0.6rem 0 0;

  display: block;

  /* override BB selector */
  height: auto;
  width: auto;
}

.recipient[contenteditable].email {
  /**
   * We don't use -moz-padding-start here because padding location shouldn't
   * depend on text direction of recipient element content itself. For LTR mode
   * both LTR and RTL email recipient elements should have left padding to
   * accommodate email icon, for RTL mode it should be on the right side, so to
   * align it correctly we should override padding depending on text direction
   * of parent element.
   */
  padding-left: 3.8rem;
  background: #fff url(images/icons/icon_sms_compose_email.png) left 1.5rem
              center / 1.7rem no-repeat;
}

#messages-recipients-list > .recipient[contenteditable=true] {
  flex-grow: 1;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 0;

  word-wrap: unset;

  /* Building blocks override (bug xxx) */
  background: none;
  color: #000;
}

#messages-recipients-list > .recipient[contenteditable=true]:focus {
  /**
   * To workaround bug 1103011, we just collapse editable recipient on focus so
   * that caret position looks correct for the user, while in fact it is not
   * true - caret is still in wrong position, but zero-width editable element is
   * aligned correctly inside parent.
   */
  flex-grow: unset;
}

.recipient[contenteditable=true]:empty:not(:last-of-type) {
  display: none;
}

/* Disable padding and give negative margin-end on empty contenteditable
 * recipients when they do not have focus. This allows the Recipients List
 * to intelligently collapse when the final row contains no "assimilated"
 * (i.e. non-contenteditable) recipients. */
.recipient[contenteditable=true]:empty {
  /**
   * We don't use -moz-margin-end here because of the bug 1103011, as currently
   * directionality of empty contenteditable isn't inherited from parent, but
   * always LTR, so -moz-margin-end equals to margin-right in both LTR and RTL
   * modes. So to align it correctly we should override margin depending on text
   * direction of parent element manually.
   */
  margin-right: -0.5rem;
  padding: 0;
}

.recipient[contenteditable=true]:focus,
.recipient[contenteditable=true]:hover,
.recipient[contenteditable=true]:empty:focus {
  -moz-margin-end: 0.5rem;
  -moz-padding-end: 0.3rem;
}

#messages-recipient-suggestions {
  position: absolute;
  /* 9rem (5 rem from app header + 4rem from "To" panel heights) */
  top: 9rem;

  overflow-y: auto;

  max-height: calc(100% - 9rem);
  width: 100%;
}

.recipient-suggestions-list {
  border-bottom: 0.1rem solid #E7E7E7;
}

.multiline-recipients-mode #messages-recipient-suggestions {
  top: 10.5rem;

  max-height: calc(100% - 10.5rem);
}

#messages-recipient-suggestions li {
  pointer-events: auto;
}

.article-list[data-type="list"] ul.contact-list {
  overflow-x: hidden;
  overflow-y: auto;

  width: calc(100% - 3.1rem);
  padding: 0 1.5rem;

  background: #fff;
}

/**
 * TODO: It's an adjustment for line-height/padding to prevent bottom of chars
 * been cut. This fix will be moved to shared list.css once Bug 1144588 landed
 */
.contact-list .suggestion > .name {
  line-height: 2.4rem;
  padding-top: 0.8rem;
}

form[role="dialog"][data-type="action"].contact-prompt > header {
  height: auto;
  min-height: 5rem;
  font-weight: 300;
}

.unknown-contact-header {
  line-height: 2.5rem;
  padding: 1.3rem 0;
  margin: 0;
  overflow: hidden;

  text-overflow: ellipsis;
  font-size: 2.3rem;
}

.contact-header {
  /* bottom padding is .9rem because we need .1rem more for the
   * nice shadow line at the header bottom, defined as a :after element */
  padding: 0.8rem 0 0.9rem;
}

.contact-header .name {
  line-height: 3.3rem;
  padding: 0.1rem 0 0.4rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 2.3rem;
}

.contact-header .details {
  line-height: 1.5rem;
  padding: 0 0 0.7rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5rem;
}

.contact-header span[data-type=img] {
  display: block;
  width: 6rem;
  height: 6rem;
  background-size: cover;
  background-position: center;
}

.contact-header aside.pack-end {
  float: right;
  -moz-margin-end: -1.5rem; /* compensate the header's 3rem padding */
}

.suggestion * {
  pointer-events: none;
}

.subheader {
  position: absolute;
  z-index: 6; /* should be between 4 and 9 (inclusive). 3 is the z-index for
                 the input form, 10 is the z-index for the header */
  left: 0;
  right: 0;
  top: 5rem;
}

form[role="dialog"][data-type="action"] > header {
 text-align: start;
}

.subheader menu {
  position: relative;
  flex-shrink: 0;

  width: 5rem;
  height: 4rem;
}

#messages-back-button:hover {
  background-color: transparent;
}

/* Activity mode specific style */
#messages-close-button {
  display: none;
}

/* Phone details label styles */
.phone-type,
.phone-type-separator,
.phone-carrier,
.phone-carrier-separator {
  display: none;
}

.has-phone-type > .phone-type,
.has-phone-type > .phone-type-separator,
.has-phone-carrier > .phone-carrier,
.has-phone-carrier > .phone-carrier-separator {
  display: unset;
}

/* RTL View */
/* RTL for lists and edit mode */
html[dir="rtl"] [data-type="list"] .unread aside.icon-unread,
html[dir="rtl"] [data-type="list"] .draft .icon-draft {
  background-position: right center;
}

html[dir="rtl"] .edit [data-type="list"] li > a {
  transform: translateX(1.5rem);
}

html[dir="rtl"] .edit [data-type="list"] li > label {
  transform: translateX(-2rem);
}

html[dir="rtl"] .edit [data-type="list"] .danger {
  transform: translateX(-2.5rem);
}

html[dir="rtl"] .edit [data-type="list"] li > .pack-checkbox input ~ span:after {
  transform: translateX(-2.5rem);
}

html[dir="rtl"] .edit [data-type="list"] li > a > aside.icon-unread {
  transform: translateX(-5rem);
}

html[dir="rtl"] .edit [data-type="list"] li > a > p {
  transform: translateX(-5rem);
}

html[dir="rtl"] .edit #threads-container[data-type="list"] aside.pack-end span {
  transform: translateX(-1.5rem);
}

/* RTL for thread view */

html[dir="rtl"] .edit .message.outgoing .bubble {
  transform: translateX(0);
}

html[dir="rtl"] .edit .message.incoming .bubble {
  transform: translateX(-2.5rem);
}

html[dir="rtl"] #messages-contact-pick-button .icon-user {
  left: 1rem;
  right: unset;
}

/* RTL for recipient panel */
:-moz-dir(rtl) > .recipient[contenteditable] {
  margin-left: 0.6rem;
  margin-right: 0;

  /**
   * We need "text-align: right" only for the cases when currently editable
   * recipient looses focus but not yet assimilated: case №1 - when we tap on
   * thread-container - maybe fixed soon, case №2 - when we use screen reader,
   * eg. single touch on message input steals focus from currently editable
   * recipient, but doesn't yet give it to the message input. As the result
   * flex-grow (see workaround for bug 1103011) returns and because of dir=auto
   * LTR\RTL name would be always left\right aligned in both LTR and RTL modes.
   */
  text-align: right;
}

:-moz-dir(rtl) > .recipient[contenteditable].email {
  /**
   * See LTR ".recipient[contenteditable].email" rule above for the explanation
   * why we don't use -moz-padding-start/-end here.
   */
  padding: 0 3.8rem 0 1.5rem;

  background-position: right 1.5rem center;
}

:-moz-dir(rtl) > .recipient[contenteditable=true]:empty {
  /**
   * See LTR ".recipient[contenteditable=true]:empty" rule above for the
   * explanation why we don't use -moz-margin-start/-end here.
   */
  margin-left: -0.5rem;
  margin-right: 0;
}

/* RTL for contact prompt header */
html[dir="rtl"] .contact-header aside.pack-end {
  float: left;
}

/* ellipsis direction hack before bug 883884 fixed */
.ellipsis-dir-fix {
  display: block;
  width: -moz-fit-content;
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
}

#messages-header-text .ellipsis-dir-fix {
  width: auto;
}

/* Text selection control */
html {
  -moz-user-select: none;
}
.editable-select-mode [contenteditable] {
  -moz-user-select: text;
}

/* Empty threadlist layout. */
#threads-no-messages, .threadlist-is-empty #threads-container {
  display: none;
}

/* Using !important to override scoped style in gaia-header component. */
#threads-settings-button, .threadlist-is-empty #threads-options-button {
  display: none !important;
}

/* Using flex to center the content. */
.threadlist-is-empty #threads-settings-button {
  display: flex !important;
}

.threadlist-is-empty #threads-no-messages {
  display: block;
}