Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

overrides/sms.gaiamobile.org/views/conversation/style/attachment.css

@@ -0,0 +1,214 @@
+/**
+ * Attachment containers are either:
+ *  - <div> elements, in the message thread;
+ *  - <iframe> elements, in the Compose area (draft attachments).
+ * Both containers have an `attachment-container' class, but only <iframe>
+ * containers have an `attachment-draft' class.
+ */
+.attachment-container {
+  position: relative;
+  margin-bottom: 0.5rem;
+
+  display: block;
+  border: none;
+  height: 10rem;
+  width: 10rem;
+
+  -moz-user-select: none;
+}
+
+.attachment-draft {
+  margin: 0;
+  padding: 0;
+
+  font-family: sans-serif;
+}
+
+/* make sure all pointer events are sent to the main container */
+.attachment-draft *,
+.attachment-container * {
+  pointer-events: none;
+}
+
+.attachment-container.nopreview { /* 100x100 px placeholder + filename below */
+  height: 12.7rem; /* font-size = 1.7rem + 1rem margin */
+}
+
+/* Internal height of the iframe that contains the attachment draft */
+.attachment-container.nopreview[data-attachment-type="vcard"] {
+  /* 40x40 px placeholder + filename below */
+  height: 6.7rem; /* font-size = 1.7rem + 1rem margin */
+}
+
+/* The internal height of the attachment itself */
+.attachment[data-attachment-type="vcard"] {
+  height: 100%;
+}
+
+/* Allow to display the filename properly */
+#messages-input > [data-attachment-type="vcard"] {
+  width: 20rem;
+}
+
+.article-list[data-type="list"] .message .attachment-container {
+  margin: 1rem 0;
+}
+
+/**
+ * Attachments that occur at the bounds of an MMS message do not need
+ * additional spacing.
+ */
+#messages-container[data-type="list"] .message .attachment-container:first-child {
+  margin-top: 0;
+}
+#messages-container[data-type="list"] .message .attachment-container:last-child {
+  margin-bottom: 0;
+}
+
+.attachment {
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+
+  width: 10rem;
+  height: 10rem;
+}
+
+.outgoing .attachment {
+  offset-inline-start: auto;
+  offset-inline-end: 0;
+}
+
+.preview .attachment {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  background-color: #ececec;
+  border: 2px solid #fff;
+}
+
+.preview .attachment:active,
+.preview .attachment:hover {
+  background-color: #b2f2ff;
+}
+
+.size-indicator {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  padding: 0 0.4rem;
+  display: none;
+
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  font-size: 1.5rem;
+}
+
+.attachment-draft > :not([data-attachment-type="vcard"]) .size-indicator {
+  display: block;
+}
+
+.file-name {
+  position: absolute;
+  bottom: 0.5rem;
+
+  height: 2rem;
+  display: none;
+
+  line-height: 2rem;
+  font-size: 1.6rem;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* .file-name has a dir="auto". Moreover, sms.css in not included in attachment
+ * iframe, so we cannot leverage the general alignment rules. */
+html[dir="ltr"] .file-name {
+  text-align: left;
+  left: 1px; /* Avoid issues related to being too much on the left */
+  right: 0;
+}
+html[dir="rtl"] .file-name {
+  text-align: right;
+  left: 0;
+  right: 1px;
+}
+
+.attachment-draft .file-name {
+  color: #4a4a4a;
+}
+
+.nopreview .file-name {
+  display: block;
+
+  unicode-bidi: -moz-plaintext;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+
+  background: none no-repeat center center / cover;
+}
+
+.thumbnail-placeholder {
+  width: 100%;
+  height: 100%;
+
+  /* BiDi-proof: CSS sprites */
+  background: image-set(url("images/attachments.png") 1x, url("images/attachments@1.5x.png") 1.5x, url("images/attachments@2x.png") 2x, url("images/attachments@2.25x.png") 2.25x) no-repeat left top / 10rem;
+}
+
+.attachment-container .thumbnail,
+.attachment-container .thumbnail-placeholder {
+  position: absolute;
+  top: 0
+}
+
+.attachment-draft:hover .thumbnail-placeholder:not(.vcard-placeholder),
+.attachment-draft:active .thumbnail-placeholder:not(.vcard-placeholder),
+.attachment-container:not([data-attachment-type="vcard"]):hover .thumbnail-placeholder,
+.attachment-container:not([data-attachment-type="vcard"]):active .thumbnail-placeholder {
+  background-color: #33cccc;
+  background-blend-mode: luminosity;
+}
+
+.img-placeholder {
+  background-position: left -10rem; /* BiDi proof: CSS sprites */
+}
+
+.audio-placeholder {
+  background-position: left -20rem; /* BiDi proof: CSS sprites */
+}
+
+.video-placeholder {
+  background-position: left -30rem; /* BiDi proof: CSS sprites */
+}
+
+.vcard-placeholder {
+  background: image-set(url("images/attachment-vcard.png") 1x, url("images/attachment-vcard@1.5x.png") 1.5x, url("images/attachment-vcard@2x.png") 2x, url("images/attachment-vcard@2.25x.png") 2.25x) no-repeat;
+  background-size: 4rem;
+}
+html[dir="ltr"] .vcard-placeholder { background-position: left top; }
+html[dir="rtl"] .vcard-placeholder { background-position: right top; }
+
+.incoming.received .vcard-placeholder {
+  background-image: image-set(url("images/attachment-vcard-incoming.png") 1x, url("images/attachment-vcard-incoming@1.5x.png") 1.5x, url("images/attachment-vcard-incoming@2x.png") 2x, url("images/attachment-vcard-incoming@2.25x.png") 2.25x);
+}
+
+.attachment.corrupted .thumbnail-placeholder:after {
+  display: block;
+
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  height: 100%;
+  width: 100%;
+
+  content: '';
+  background: image-set(url("icons/corrupted.png") 1x, url("icons/corrupted@1.5x.png") 1.5x, url("icons/corrupted@2x.png") 2x, url("icons/corrupted@2.25x.png") 2.25x) no-repeat center center / 10rem;
+}

overrides/sms.gaiamobile.org/views/conversation/style/message.css

@@ -0,0 +1,238 @@
+.message.incoming {
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 4rem;
+}
+
+.message.outgoing {
+  padding-inline-start: 4rem;
+  padding-inline-end: 1.5rem;
+}
+
+.message .bubble {
+  box-sizing: border-box;
+  height: 100%;
+  max-width: 100%;
+  padding: 1rem 1.5rem;
+  overflow: visible;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+
+.bubble .message-content-body:focus {
+  -moz-user-select: text;
+}
+
+.message.outgoing .bubble {
+  background: #fff;
+}
+html[dir="ltr"] .message.outgoing .bubble {
+  float: right;
+  border-radius: 1.5rem 0 1.5rem 1.5rem;
+}
+html[dir="rtl"] .message.outgoing .bubble {
+  float: left;
+  border-radius: 0 1.5rem 1.5rem 1.5rem;
+}
+
+
+.message.outgoing .bubble,
+.message.outgoing a:active {
+  color: #333;
+}
+
+.message.incoming .bubble {
+  background: #39c3c2;
+}
+html[dir="ltr"] .message.incoming .bubble {
+  float: left;
+  border-radius: 0 1.5rem 1.5rem 1.5rem;
+}
+html[dir="rtl"] .message.incoming .bubble {
+  float: right;
+  border-radius: 1.5rem 0 1.5rem 1.5rem;
+}
+
+.message.incoming .bubble,
+.message.incoming a:active {
+  color: #fff;
+}
+
+.message p.message-content-body {
+  white-space: pre-wrap;
+
+  outline: none;
+}
+
+/* BB overrides */
+.message.outgoing p:first-of-type:last-of-type,
+.message.incoming p:first-of-type:last-of-type {
+  padding-top: 0.5rem;
+
+  line-height: 2rem;
+}
+
+.message.incoming p:first-of-type {
+  color: #fff;
+}
+
+.message.sending p:first-of-type {
+  color: #6e6e6e;
+}
+
+/* End of BB overrides */
+
+.outgoing.error .bubble {
+  background: #fae1df;
+}
+
+.incoming.error .bubble {
+  background: #ff9898;
+}
+
+.message.sending .bubble,
+.message.sending a,
+.message.sending a:active {
+  color: #6e6e6e;
+}
+
+.message.sending .message-subject,
+.message.sending .message-content-body {
+  opacity: 0.5;
+}
+
+/* Message Subject */
+.message .message-subject {
+  display: none;
+
+  margin-bottom: 1rem;
+
+  font-size: 1.4rem;
+  font-style: italic;
+  line-height: 1.7rem;
+
+  unicode-bidi: -moz-plaintext;
+}
+
+.message.has-subject .message-subject {
+  display: block;
+}
+
+/* Message content styles */
+.message-content a {
+  color: #004eff;
+  text-decoration: underline;
+}
+
+.message-content > p {
+  unicode-bidi: -moz-plaintext;
+}
+
+.message-details {
+  display: flex;
+
+  margin-top: 0.5rem;
+
+  font-size: 1.4rem;
+  line-height: 2rem;
+}
+
+.message.sending time,
+.message.sending .message-sim-information {
+  display: none;
+}
+
+.message.outgoing .message-details {
+  color: #858585;
+}
+
+.message.outgoing.error .message-details {
+  color: #e97f79;
+}
+
+.message.incoming .message-details {
+  color: #d1eeee;
+}
+
+.message.incoming .late-arrival-notice {
+  color: #026a69;
+}
+
+.message.incoming .late-arrival-icon {
+  margin-inline-start: 1rem;
+  margin-inline-end: 0.1rem;
+  min-width: 1.5rem;
+  height: 2rem;
+
+  background: no-repeat center center / 1.5rem;
+  background-image: image-set(url("images/icons/late_clock.png") 1x, url("images/icons/late_clock@1.5x.png") 1.5x, url("images/icons/late_clock@2x.png") 2x, url("images/icons/late_clock@2.25x.png") 2.25x);
+}
+
+.message.incoming.error .message-details {
+  color: #ffe0dc;
+}
+
+.message-sim-information {
+  margin-inline-end: 0.4rem;
+}
+
+.message-sim-information::after {
+  content: ' ‧ ';
+}
+
+/* Message status aside panel */
+.message .message-status {
+  height: 2rem;
+  min-width: 3rem;
+
+  background: no-repeat center center / 1.6rem;
+  font-size: 1.4rem;
+}
+
+.message.error .message-status {
+  background-image: image-set(url("images/icons/exclamation.png") 1x, url("images/icons/exclamation@1.5x.png") 1.5x, url("images/icons/exclamation@2x.png") 2x, url("images/icons/exclamation@2.25x.png") 2.25x);
+}
+
+.message.delivered .message-status {
+  background-image: image-set(url("images/icons/deliveredtick.png") 1x, url("images/icons/deliveredtick@1.5x.png") 1.5x, url("images/icons/deliveredtick@2x.png") 2x, url("images/icons/deliveredtick@2.25x.png") 2.25x);
+}
+
+.message.read .message-status {
+  background-image: image-set(url("images/icons/message_read.png") 1x, url("images/icons/message_read@1.5x.png") 1.5x, url("images/icons/message_read@2x.png") 2x, url("images/icons/message_read@2.25x.png") 2.25x);
+}
+
+.message.pending .message-status,
+.message.sending .message-status {
+  background: none;
+}
+
+
+/* Message download button */
+.message .download {
+  display: block;
+
+  min-height: initial;
+  width: auto;
+  padding: 0;
+  /* Eliminating container paragraph line-height */
+  margin: -1.5rem 0 0;
+
+  background: none;
+  color: #fff;
+  border: none;
+  /* We're using border-bottom instead of just underline style as line is too
+     close to the text and doesn't look similar to visual spec. */
+  border-bottom: 1px solid #fff;
+}
+
+.message .download:active {
+  opacity: 0.85;
+}
+
+/* hide download button via css on expired messages */
+.message.expired .download {
+  display: none;
+}
+
+.message.pending .download {
+  border-color: transparent;
+  opacity: 0.8;
+}

overrides/sms.gaiamobile.org/views/conversation/style/report_view.css

@@ -0,0 +1,167 @@
+/* Message information page for report details*/
+.report-view {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.report-view > .description {
+  padding-top: 2rem;
+  padding-inline-end: 1.5rem;
+  padding-bottom: 3rem;
+  padding-inline-start: 3rem;
+}
+
+.report-view p,
+.report-view span {
+  font-size: 1.5rem;
+  line-height: 1rem;
+  color: #858585;
+}
+
+.report-view p {
+  padding-top: 1.5rem;
+}
+
+.report-view .description > .type {
+  padding-top: 0;
+
+  font-size: 1.6rem;
+  color: #ff4e00;
+}
+
+.report-view .description .detail {
+  color: #333;
+}
+
+.report-view .description > .type[data-l10n-id="message-type-sms"] {
+  color: #000;
+}
+
+/* Hiding some elements for some states */
+.report-view[data-delivery="error"] .sent-title,
+.report-view[data-delivery="sending"] .sent-timestamp,
+.outgoing-message .received-block,
+.outgoing-message .lateness-block {
+  display: none;
+}
+
+
+/* Hide sent timestamp label if we don't have valid value to display */
+.report-view.no-valid-sent-timestamp .sent-block {
+  display: none;
+}
+
+.report-view .contact-title {
+  color: #008787;
+  font-size: 1.6rem;
+  padding-inline-start: 3rem;
+}
+
+.report-view > ul.contact-list {
+  /* Showing 4 complete contacts and part of the contact name if list
+     contains more than 4 contacts */
+  position: static;
+
+  margin-top: 0.5rem;
+  flex-grow: 1;
+}
+
+.report-view > .contact-list > li {
+  height: auto;
+  min-height: 9rem;
+  padding-top: 0.7rem;
+  padding-bottom: 1rem;
+  padding-inline-end: 0;
+  padding-inline-start: 1.5rem;
+
+  border-top: solid 0.1rem #e7e7e7;
+  border-bottom: medium none;
+}
+
+.report-view > .contact-list p,
+.report-view > .contact-list span {
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+}
+
+.report-view > .contact-list .name {
+  padding-top: 0;
+
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 2.6rem;
+}
+
+.report-view > .contact-list aside {
+  /* margin-top = (li - padding - aside) / 2 = (9rem - 2rem - 5.5rem) / 2 */
+  margin-top: 0.8rem;
+}
+
+.report-view > .contact-list .number {
+  padding-top: 0.6rem;
+}
+
+.report-view .network-status {
+  padding-top: 0.7rem;
+}
+
+.report-view .name + .network-status {
+  padding-top: 1rem;
+}
+
+.report-view .network-status,
+.report-view .network-status span {
+  line-height: 1.4rem;
+}
+
+.contact-list p.number .phone-carrier {
+  color: #008787;
+}
+
+.report-view > .contact-list .icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  margin: -0.1rem 0 0.1rem;
+  margin-inline-end: 0.7rem;
+
+  background: no-repeat center center / 1.6rem transparent;
+}
+html[dir="ltr"] .report-view > .contact-list .icon { float: left; }
+html[dir="rtl"] .report-view > .contact-list .icon { float: right; }
+
+.contact-list [data-delivery-status="delivered"] .icon {
+  background-image: image-set(url("images/icons/deliveredtick.png") 1x, url("images/icons/deliveredtick@1.5x.png") 1.5x, url("images/icons/deliveredtick@2x.png") 2x, url("images/icons/deliveredtick@2.25x.png") 2.25x);
+}
+
+.contact-list [data-delivery-status="read"] .icon {
+  background-image: image-set(url("images/icons/message_read.png") 1x, url("images/icons/message_read@1.5x.png") 1.5x, url("images/icons/message_read@2x.png") 2x, url("images/icons/message_read@2.25x.png") 2.25x);
+}
+
+.contact-list [data-delivery-status="error"] .icon {
+  background-image: image-set(url("images/icons/exclamation.png") 1x, url("images/icons/exclamation@1.5x.png") 1.5x, url("images/icons/exclamation@2x.png") 2x, url("images/icons/exclamation@2.25x.png") 2.25x);
+}
+
+.contact-list [data-delivery-status="not-applicable"],
+.contact-list [data-delivery-status="pending"] .icon,
+.contact-list [data-delivery-status="pending"] .timestamp,
+.contact-list [data-delivery-status="error"] .timestamp,
+.contact-list [data-delivery-status="rejected"] .icon,
+.contact-list [data-delivery-status="rejected"] .timestamp{
+  display: none;
+}
+
+.report-view .resend-btn {
+  display: none;
+  width: calc(100% - 3rem);
+
+  flex-shrink: 0;
+  margin: 0 1.5rem 2rem;
+
+  background-color: #00caf2;
+  color: #fff;
+}
+
+.report-view[data-delivery="error"] .resend-btn {
+  display: block;
+}

overrides/sms.gaiamobile.org/views/inbox/style/edit-mode.css

@@ -0,0 +1,36 @@
+/*
+ * This file contains styles for Inbox view edit mode. They complement styles
+ * from views/shared/style/edit-mode.css that are applied as well.
+ * View edit mode is activated via Options -> Select threads.
+ */
+
+
+.bb-tablist > li button[data-action="mark-as-read"] {
+  background-image: image-set(url("images/icons/ico_in_markasread_30x30.png") 1x, url("images/icons/ico_in_markasread_30x30@1.5x.png") 1.5x, url("images/icons/ico_in_markasread_30x30@2x.png") 2x, url("images/icons/ico_in_markasread_30x30@2.25x.png") 2.25x);
+}
+
+.bb-tablist > li button[data-action="mark-as-unread"] {
+  background-image: image-set(url("images/icons/ico_in_markasunread_30x30.png") 1x, url("images/icons/ico_in_markasunread_30x30@1.5x.png") 1.5x, url("images/icons/ico_in_markasunread_30x30@2x.png") 2x, url("images/icons/ico_in_markasunread_30x30@2.25x.png") 2.25x);
+}
+
+.edit #threads-container[data-type="list"] {
+  height: calc(100% - 10rem);
+}
+
+html[dir="ltr"] .edit [data-type="list"] li > a > aside.icon-unread {
+  transform: translateX(5rem);
+}
+html[dir="rtl"] .edit [data-type="list"] li > a > aside.icon-unread {
+  transform: translateX(-5rem);
+}
+
+.edit #threads-container aside.pack-end {
+  margin-inline-start: 4rem;
+}
+
+html[dir="ltr"] .edit #threads-container[data-type="list"] aside.pack-end span {
+  transform: translateX(1.5rem);
+}
+html[dir="rtl"] .edit #threads-container[data-type="list"] aside.pack-end span {
+  transform: translateX(-1.5rem);
+}

overrides/sms.gaiamobile.org/views/inbox/style/inbox.css

@@ -0,0 +1,191 @@
+#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: white no-repeat center top;
+}
+
+#sticky.has-content {
+  /* Set sticky header visible only when content is ready */
+  visibility: visible;
+}
+
+#threads-container[data-type="list"] header {
+  background: #fff;
+}
+
+#threads-container[data-type="list"] ul {
+  padding: 0 1.0rem;
+  background-color: #fff;
+}
+
+#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;
+}
+
+#threads-container[data-type="list"] [data-last-message-type="mms"] .body-text {
+  display: none;
+}
+
+.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/inbox.js */
+  background: image-set(url("images/default_contact_image.png") 1x, url("images/default_contact_image@1.5x.png") 1.5x, url("images/default_contact_image@2x.png") 2x, url("images/default_contact_image@2.25x.png") 2.25x) top left; /* BiDi proof: CSS sprites */
+}
+
+.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; /* BiDi proof: CSS sprites */
+}
+
+.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; /* BiDi proof: CSS sprites */
+}
+
+.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;
+}
+
+/**
+ * Bug 967878, 979018 -[Messages] Background doesn't
+ * scroll with the threads causing expensive over-invalidation
+ */
+#threads-container > div {
+  background-color: #fff;
+}
+
+[data-type="list"] aside.icon-unread {
+  margin: 0;
+  width: 1.9rem;
+  visibility: hidden;
+}
+
+[data-type="list"] .unread aside.icon-unread {
+  background: image-set(url("images/unread.png") 1x, url("images/unread@1.5x.png") 1.5x, url("images/unread@2x.png") 2x, url("images/unread@2.25x.png") 2.25x) no-repeat;
+  background-size: 1rem;
+  visibility: visible;
+}
+
+[data-type="list"] .threadlist-item a * {
+  pointer-events: none;
+}
+
+[data-type="list"] .summary {
+  display: flex;
+}
+
+[data-type="list"] .draft .icon-draft {
+  background: image-set(url("images/draft.png") 1x, url("images/draft@1.5x.png") 1.5x, url("images/draft@2x.png") 2x, url("images/draft@2.25x.png") 2.25x) no-repeat;
+  background-size: 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;
+}
+
+/* Override time margin for flex layout */
+[data-type="list"] .summary time {
+  display: inline-block;
+  margin-inline-end: 1rem;
+}
+
+[data-type="list"] .unread .summary time {
+  color: #1D8399;
+}
+
+/* Empty Inbox layout */
+
+#threads-no-messages {
+  background: image-set(url("images/SMS_200x200_bubble.png") 1x, url("images/SMS_200x200_bubble@1.5x.png") 1.5x, url("images/SMS_200x200_bubble@2x.png") 2x, url("images/SMS_200x200_bubble@2.25x.png") 2.25x)
+              no-repeat 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;
+}
+
+#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;
+}

overrides/sms.gaiamobile.org/views/new_message/style/recipients.css

@@ -0,0 +1,180 @@
+html[dir="ltr"] [dir] { text-align: left; }
+html[dir="rtl"] [dir] { text-align: right; }
+
+#messages-to-field {
+  position: relative;
+  /* To be above .article-list's with z-index = 5 */
+  z-index: 6;
+
+  display: none;
+  min-height: 5.5rem;
+
+  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;
+  padding-inline-start: 1.5rem;
+  padding-inline-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;
+  padding-inline-end: 0.6rem;
+  padding-bottom: 0.6rem;
+  padding-inline-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;
+}
+
+/**
+ * BiDi note: all [contenteditable] blocks must carry a `dir="auto"` attribute,
+ * so we cannot use *-inline-{start,end} properties on them, because the
+ * direction of a dir="auto" element (and therefore the position of start/end)
+ * depends on its content. We want our margin/padding to depend on the document
+ * direction, not element's content.
+ */
+.recipient[contenteditable] {
+  overflow: hidden;
+  margin: 0.6rem 0 0;
+
+  display: block;
+
+  /* override BB selector */
+  height: auto;
+  width: auto;
+}
+html[dir="ltr"] .recipient[contenteditable] { margin-right: 0.6rem; }
+html[dir="rtl"] .recipient[contenteditable] { margin-left: 0.6rem; }
+
+.recipient[contenteditable].email {
+  background: #fff image-set(url("images/icons/icon_sms_compose_email.png") 1x, url("images/icons/icon_sms_compose_email@1.5x.png") 1.5x, url("images/icons/icon_sms_compose_email@2x.png") 2x, url("images/icons/icon_sms_compose_email@2.25x.png") 2.25x) no-repeat;
+  background-size: 1.7rem;
+}
+/* see BiDi note above */
+html[dir="ltr"] .recipient[contenteditable].email {
+  padding-left: 3.8rem;
+  background-position: left 1.5rem center;
+}
+html[dir="rtl"] .recipient[contenteditable].email {
+  padding-right: 3.8rem;
+  background-position: right 1.5rem center;
+}
+
+#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 {
+  padding: 0;
+}
+/**
+ * We don't use margin-inline-end here because of the bug 1103011, as currently
+ * directionality of empty contenteditable isn't inherited from parent, but
+ * always LTR, so margin-inline-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.
+ */
+html[dir="ltr"] .recipient[contenteditable=true]:empty {
+  margin-right: -0.5rem;
+}
+html[dir="rtl"] .recipient[contenteditable=true]:empty {
+  margin-left: -0.5rem;
+}
+
+/* see BiDi note above */
+html[dir="ltr"] .recipient[contenteditable=true]:focus,
+html[dir="ltr"] .recipient[contenteditable=true]:hover,
+html[dir="ltr"] .recipient[contenteditable=true]:empty:focus {
+  margin-right: 0.5rem;
+  padding-right: 0.3rem;
+}
+html[dir="rtl"] .recipient[contenteditable=true]:focus,
+html[dir="rtl"] .recipient[contenteditable=true]:hover,
+html[dir="rtl"] .recipient[contenteditable=true]:empty:focus {
+  margin-left: 0.5rem;
+  padding-left: 0.3rem;
+}
+

overrides/sms.gaiamobile.org/views/shared/style/composer.css

@@ -0,0 +1,278 @@
+#messages-compose-form {
+  display: flex;
+  flex-direction: column;
+
+  height: auto; /* overrides building blocks */
+  min-height: 4rem;
+
+  background-color: #fff;
+}
+
+/* Overwrite. No more fixed height */
+form[role="search"] p input,
+form[role="search"] p textarea,
+form[role="search"] button[type="submit"] + p > textarea {
+  height: auto;
+}
+
+/*
+ * Input now are contentEditable containers. We define
+ * placeholder management here as well.
+ */
+
+#messages-input {
+  position: relative; /* to position its generated content */
+
+  overflow: auto;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding-inline-end: 0.5rem;
+
+  color: #474747;
+  border-inline-end: 0.1rem solid #ccc;
+
+  font-size: 1.7rem;
+  line-height: 2.1rem;
+
+  unicode-bidi: -moz-plaintext;
+}
+
+#messages-input.placeholder {
+  unicode-bidi: unset;
+}
+
+#messages-input:after {
+  content: attr(title);
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  right: 0;
+
+  color: #9b9b9b;
+  font-style: italic;
+  white-space: nowrap;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+#messages-input.placeholder:after {
+  visibility: visible;
+}
+
+/* Overwrite BB because of the previous rule */
+form[role="search"] button[type="submit"]:after {
+    content: "";
+    background: none;
+}
+
+.mms-label-line {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  background-color: #e1f0ec;
+}
+
+.subject-composer {
+  position: relative;
+
+  flex-grow: 1;
+  min-width: 0;
+  padding: 1rem 0 0.3rem;
+}
+
+.mms-label {
+  padding: 1rem 0 0.3rem;
+}
+
+.mms-label,
+.message-counter {
+  display: none;
+  flex: none;
+  text-align: center;
+
+  box-sizing: border-box;
+  width: 6rem;
+
+  color: #575757;
+
+  font-size: 1.4rem;
+}
+
+.message-counter {
+  padding-top: .7rem;
+}
+
+/**
+ * 1. "MMS" label is displayed near the subject field when subject input is
+ *    visible and message type is MMS;
+ * 2. Remaining characters counter is displayed in bottom section if character
+ *    count exceeds predefined threshold and message type is SMS.
+ */
+[data-message-type='mms'] .mms-label,
+[data-message-type='sms'] .message-counter:not(:empty) {
+  display: block;
+}
+
+.content-composer {
+  display: flex;
+  flex-direction: row;
+
+  min-height: 0;
+}
+
+.subject-composer-input {
+  position: relative;
+
+  box-sizing: border-box;
+  min-height: 2.2rem;
+  padding: 0;
+  padding-bottom: 0.1rem;
+  padding-inline-start: 1.5rem;
+
+  color: #008787;
+
+  font-size: 1.7rem;
+}
+
+.subject-composer-placeholder {
+  position: absolute;
+  top: 1rem;
+  /* adding both left/right so that it behaves correctly in RTL */
+  left: 1.5rem;
+  right: 1.5rem;
+
+  color: #00adad;
+  font-size: 1.7rem;
+  font-weight: normal;
+  font-style: italic;
+
+  pointer-events: none;
+}
+
+.composer-message-input-container {
+  position: relative;
+
+  flex: auto;
+
+  box-sizing: border-box;
+  min-width: 0;
+  height: 100%;
+  min-height: 4rem;
+  padding: 1rem 0;
+}
+
+.composer-button-container {
+  position: relative;
+
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  justify-content: center;
+  align-content: space-between;
+  flex-wrap: wrap;
+
+  width: 6rem;
+
+  -moz-user-select: none; /* without this, tapping on the element selects its content */
+}
+
+.messages-attach-container {
+  display: flex;
+}
+
+#messages-send-button {
+  height: 4rem;
+  overflow: visible;
+  background: #fff no-repeat center center / 3rem;
+
+  align-self: flex-end;
+}
+html[dir="ltr"] #messages-send-button {
+  background-image: image-set(url("images/icons/actionicon_sms_send_30x30.png") 1x, url("images/icons/actionicon_sms_send_30x30@1.5x.png") 1.5x, url("images/icons/actionicon_sms_send_30x30@2x.png") 2x, url("images/icons/actionicon_sms_send_30x30@2.25x.png") 2.25x);
+  /* When we put the icon at the center, an optical illusion makes it look to be
+   * slightly to the left, so we offset the button by 2px to the right to
+   * counteract this illusion */
+  transform: translate(.2rem);
+}
+html[dir="rtl"] #messages-send-button {
+  background-image: url(images/icons/actionicon_sms_send_30x30_rtl.png);
+  transform: translate(-.2rem);
+}
+
+#messages-send-button:after {
+  display: none
+}
+
+#messages-send-button[disabled] {
+  background-blend-mode: luminosity;
+  opacity: 0.625;
+}
+
+#messages-attach-button {
+  align-self: flex-end;
+  flex: none;
+
+  box-sizing: content-box;
+  width: 3rem;
+  margin: 0;
+  padding: 0;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 1rem;
+
+  background: transparent
+              image-set(url("images/icons/actionicon_sms_add_attachment_30x30.png") 1x, url("images/icons/actionicon_sms_add_attachment_30x30@1.5x.png") 1.5x, url("images/icons/actionicon_sms_add_attachment_30x30@2x.png") 2x, url("images/icons/actionicon_sms_add_attachment_30x30@2.25x.png") 2.25x)
+              no-repeat center / 3rem;
+}
+
+#messages-attach-button[disabled] {
+  background-blend-mode: luminosity;
+  opacity: 0.3;
+}
+
+/*
+  DSDS
+*/
+
+.sim-indication {
+  position: absolute;
+  offset-inline-end: 1.8rem;
+  bottom: 0.4rem;
+
+  display: none;
+  line-height: 1;
+
+  color: #5f5f5f;
+  font-size: 1.4rem;
+  font-style: normal;
+}
+
+.sim-indication:before {
+  position: absolute;
+  /* 2.6rem from the end; means .8rem from .sim-indication */
+  offset-inline-end: .8rem;
+  bottom: -0.1rem;
+
+  content: '...';
+
+  color: #b2b2b2;
+  font-size: 1.6rem;
+}
+
+button[disabled] .sim-indication {
+  color: inherit;
+}
+
+.has-preferred-sim .sim-indication {
+  display: block;
+}
+
+/**
+ * Override Building Block [Input areas] styles
+ * We should get rid of all [role="search"] Messages rules in bug 1055357.
+ */
+form.bottom[role="search"] {
+  z-index: 3;
+}

overrides/sms.gaiamobile.org/views/shared/style/edit-mode.css

@@ -0,0 +1,108 @@
+/*
+ * This file contains styles shared between views when they're in edit mode.
+ * View edit mode is activated via Options -> Select threads/messages.
+ */
+
+
+/* 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%);
+}
+
+/* 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;
+}
+
+#main-wrapper.edit [data-type="list"] li a {
+  pointer-events: none;
+}
+
+.edit .bottom-tab[role="region"] {
+  visibility: visible;
+}
+
+/* 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: image-set(url("images/icons/delete.png") 1x, url("images/icons/delete@1.5x.png") 1.5x, url("images/icons/delete@2x.png") 2x, url("images/icons/delete@2.25x.png") 2.25x);
+}
+
+/* Lists: edit mode */
+html[dir="ltr"] .edit [data-type="list"] li > a {
+  transform: translateX(-1.5rem);
+}
+html[dir="rtl"] .edit [data-type="list"] li > a {
+  transform: translateX(1.5rem);
+}
+
+.edit [data-type="list"] li > label {
+  opacity: 1;
+  pointer-events: auto;
+}
+html[dir="ltr"] .edit [data-type="list"] li > label {
+  transform: translateX(2rem);
+}
+html[dir="rtl"] .edit [data-type="list"] li > label {
+  transform: translateX(-2rem);
+}
+
+.edit [data-type="list"] li > .pack-checkbox input ~ span:after {
+  opacity: 1;
+}
+html[dir="ltr"] .edit [data-type="list"] li > .pack-checkbox input ~ span:after {
+  transform: translateX(2.5rem);
+}
+html[dir="rtl"] .edit [data-type="list"] li > .pack-checkbox input ~ span:after {
+  transform: translateX(-2.5rem);
+}
+
+.edit [data-type="list"] li > a > p {
+  margin-inline-end: 3.4rem;
+}
+html[dir="ltr"] .edit [data-type="list"] li > a > p {
+  transform: translateX(5rem);
+}
+html[dir="rtl"] .edit [data-type="list"] li > a > p {
+  transform: translateX(-5rem);
+}
+
+/* Currently is used in ConversationView only */
+html[dir="ltr"] .edit [data-type="list"] .danger {
+  transform: translateX(2.5rem);
+}
+html[dir="rtl"] .edit [data-type="list"] .danger {
+  transform: translateX(-2.5rem);
+}
+
+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);
+}