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/shared/elements/gaia_menu/style.css

@@ -0,0 +1,314 @@
+/* ----------------------------------
+ * gaia_menu
+ * ---------------------------------- */
+
+/* default alignment follows the UI direction, not the content direction */
+:-moz-dir(ltr) [dir] { text-align: left; }
+:-moz-dir(rtl) [dir] { text-align: right; }
+
+/* Main dialog setup */
+gaia-menu {
+  background-color: #2d2d2d;
+  overflow: hidden;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 0 7rem;
+  /**
+   * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
+   * by white spaces and line breaks in the code between inline-block elements.
+   */
+  font-size: 0;
+  color: #fff;
+  display: block;
+  transition: transform ease-in-out var(--transition-duration),
+              visibility var(--transition-duration);
+}
+
+gaia-menu[hidden] {
+  transform: translateY(100%);
+  visibility: hidden;
+}
+
+gaia-menu:before {
+  content: '';
+  display: inline-block;
+  vertical-align: top;
+  width: 0.1rem;
+  height: 100%;
+  margin-inline-start: -0.1rem;
+}
+
+header {
+  -moz-box-sizing: border-box;
+  font-size: 1.6rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 5rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  font-weight: normal;
+  padding: 0 3rem;
+  border-bottom: 0.1rem solid #616262;
+}
+
+header h1 {
+  font-size: 1.6rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  height: 100%;
+  font-weight: normal;
+}
+
+/* Generic set of actions in toolbar */
+header menu.toolbar {
+  height: 100%;
+  margin: 0 -3rem;
+  margin-inline-start: 1rem;
+  padding: 0;
+}
+header:-moz-dir(ltr) menu.toolbar { float: right; }
+header:-moz-dir(rtl) menu.toolbar { float: left; }
+
+header menu.toolbar a,
+header menu.toolbar button {
+  -moz-box-sizing: border-box;
+  position: relative;
+  width: auto;
+  min-width: 5rem;
+  height: 4.9rem;
+  margin-bottom: 0;
+  padding: 0 1rem;
+  border-radius: 0;
+  line-height: 4.9rem;
+  background: none;
+  text-align: center;
+  text-shadow: none;
+  z-index: 5;
+}
+header:-moz-dir(ltr) menu.toolbar a,
+header:-moz-dir(ltr) menu.toolbar button {
+  float: left;
+}
+header:-moz-dir(rtl) menu.toolbar a,
+header:-moz-dir(rtl) menu.toolbar button {
+  float: right;
+}
+
+header a,
+header button {
+  border: none;
+  padding: 0;
+  overflow: hidden;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.1em;
+  color: #fff;
+  border-radius: 0;
+  text-decoration: none;
+}
+
+button::-moz-focus-inner {
+  outline: none;
+  border: none;
+}
+
+/* Pressed state */
+header a:active .icon:after,
+header button:active .icon:after,
+header menu.toolbar a:active,
+header menu.toolbar button:active  {
+  background: #008aaa;
+}
+
+/* Disabled state */
+header menu.toolbar a[aria-disabled="true"],
+header menu.toolbar button[disabled]  {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Icon definitions */
+header .icon {
+  position: relative;
+  float: none;
+  display: inline-block;
+  vertical-align: top;
+  width: 4rem;
+  height: 4.9rem;
+  margin: 0 -1rem;
+  background: transparent no-repeat center center / 3rem auto;
+  font-size: 0;
+  overflow: hidden;
+}
+
+header .icon.icon-close {
+  background-image: image-set(url("images/icons/close.png") 1x, url("images/icons/close@1.5x.png") 1.5x, url("images/icons/close@2x.png") 2x, url("images/icons/close@2.25x.png") 2.25x);
+}
+
+header .icon.icon-back {
+  background-image: image-set(url("images/icons/back.png") 1x, url("images/icons/back@1.5x.png") 1.5x, url("images/icons/back@2x.png") 2x, url("images/icons/back@2.25x.png") 2.25x);
+}
+
+/* Navigation links (back, cancel, etc) */
+header > button,
+header > a {
+  width: 5rem;
+  height: 4.9rem;
+  background: none;
+  overflow: visible;
+  margin: 0 -1rem;
+  margin-inline-start: -3rem;
+  position: relative;
+}
+header:-moz-dir(ltr) > button,
+header:-moz-dir(ltr) > a {
+  float: left;
+}
+header:-moz-dir(rtl) > button,
+header:-moz-dir(rtl) > a {
+  float: right;
+}
+
+header > button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+header > button .icon,
+header > a .icon {
+  position: static;
+  display: block;
+  width: 3rem;
+  height: 4.9rem;
+  margin: 0;
+  overflow: visible;
+  font-size: 0;
+}
+
+header > button .icon:after,
+header > a .icon:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: 0;
+  top: 0;
+  z-index: -1;
+  width: 3rem;
+  height: 4.9rem;
+}
+
+/* Content */
+section {
+  color: #fff;
+  position: absolute;
+  top: 7rem;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 2rem;
+  font-size: 1.6rem;
+  overflow: scroll;
+}
+
+/* Specific component code */
+menu {
+  margin: 0;
+  padding: 0;
+  max-height: calc(100% - 13.5rem); /*header(5rem) + footer(7rem) + padding(1.5rem)*/
+  height: auto;
+  padding-top: 1.5rem;
+  overflow: auto;
+  width: auto;
+  border: none;
+  background: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 7rem;
+}
+
+button {
+  width: calc(100% - 3rem);
+  height: 4rem;
+  -moz-box-sizing: border-box;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: normal;
+  line-height: 4rem;
+  outline: none;
+  font-size: 1.6rem;
+  text-shadow: none;
+  padding: 0 1.2rem;
+  margin: 0 1.5rem 1rem;
+  background: rgba(87, 87, 87, 0.8);
+  border: none;
+  border-radius: 0;
+  position: relative;
+  color: #fff;
+  font-family: sans-serif;
+  font-style: italic;
+}
+button:-moz-dir(ltr) { text-align: left; }
+button:-moz-dir(rtl) { text-align: right; }
+
+span.gaia-menu-cancel {
+  position: fixed;
+  width: 100%;
+  background: #4d4d4d;
+  height: 7rem;
+  offset-inline-start: 0;
+  bottom: 0;
+}
+
+span.gaia-menu-cancel button {
+  position: fixed;
+  bottom: 0;
+  offset-inline-start: 0;
+  color: #333;
+  background: #d8d8d8;
+  text-align: center;
+  border: none;
+  margin-bottom: 1.5rem;
+  border-radius: 2rem;
+}
+
+button:nth-last-child(2) {
+  margin-bottom: 1.5rem;
+}
+
+/* Press state */
+button:active,
+span.gaia-menu-cancel button:active {
+  background: #00aacc;
+  color: #fff;
+}
+
+/* Disabled */
+button[disabled] {
+  background-color: rgba(87, 87, 87, 0.8);
+  color: rgba(255, 255, 255, 0.4);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+button[disabled]:last-child {
+  background-color: #e7e7e7;
+  color: #a6a6a6;
+  opacity: 1;
+}

overrides/sms.gaiamobile.org/shared/style/action_menu.css

@@ -0,0 +1,321 @@
+/* ----------------------------------
+ * Action menu
+ * ---------------------------------- */
+
+html[dir="ltr"] [role="dialog"][data-type="action"] [dir],
+html[dir="ltr"] [role="dialog"][data-type="action"] button {
+  text-align: left;
+}
+html[dir="rtl"] [role="dialog"][data-type="action"] [dir],
+html[dir="rtl"] [role="dialog"][data-type="action"] button {
+  text-align: right;
+}
+
+/* Main dialog setup */
+[role="dialog"][data-type="action"] {
+  background: #2d2d2d;
+  overflow: hidden;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 0 7rem;
+  /**
+   * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
+   * by white spaces and line breaks in the code between inline-block elements.
+   */
+  font-size: 0;
+  color: #fff;
+}
+
+[role="dialog"][data-type="action"]:before {
+  content: '';
+  display: inline-block;
+  vertical-align: top;
+  width: 0.1rem;
+  height: 100%;
+  margin-inline-start: -0.1rem;
+}
+
+[role="dialog"][data-type="action"] > header {
+  box-sizing: border-box;
+  font-size: 1.6rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 5rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  font-weight: normal;
+  padding: 0 3rem;
+  border-bottom: 0.1rem solid #616262;
+}
+[role="dialog"][data-type="action"] > header * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[role="dialog"][data-type="action"] > header h1 {
+  font-size: 1.6rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  height: 100%;
+  font-weight: normal;
+}
+
+/* Generic set of actions in toolbar */
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] {
+  height: 100%;
+  margin: 0 -3rem;
+  margin-inline-start: 1rem;
+  padding: 0;
+}
+html[dir="ltr"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] { float: right; }
+html[dir="rtl"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] { float: left; }
+
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] a,
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] button {
+  box-sizing: border-box;
+  position: relative;
+  width: auto;
+  min-width: 5rem;
+  height: 4.9rem;
+  margin-bottom: 0;
+  padding: 0 1rem;
+  border-radius: 0;
+  line-height: 4.9rem;
+  background: none;
+  text-align: center;
+  text-shadow: none;
+  z-index: 5;
+}
+html[dir="ltr"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] a,
+html[dir="ltr"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] button {
+  float: left;
+}
+html[dir="rtl"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] a,
+html[dir="rtl"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] button {
+  float: right;
+}
+
+[role="dialog"][data-type="action"] > header a,
+[role="dialog"][data-type="action"] > header button {
+  border: none;
+  padding: 0;
+  overflow: hidden;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.1em;
+  color: #fff;
+  border-radius: 0;
+  text-decoration: none;
+}
+
+[role="dialog"][data-type="action"] button::-moz-focus-inner {
+  outline: none;
+  border: none;
+}
+
+/* Pressed state */
+[role="dialog"][data-type="action"] > header a:active .icon:after,
+[role="dialog"][data-type="action"] > header button:active .icon:after,
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] a:active,
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] button:active  {
+  background: #008aaa !important;
+}
+
+/* Disabled state */
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] a[aria-disabled="true"],
+[role="dialog"][data-type="action"] > header menu[type="toolbar"] button[disabled]  {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Icon definitions */
+[role="dialog"][data-type="action"] > header .icon {
+  position: relative;
+  float: none;
+  display: inline-block;
+  vertical-align: top;
+  width: 4rem;
+  height: 4.9rem;
+  margin: 0 -1rem;
+  background: transparent no-repeat center center / 3rem auto;
+  font-size: 0;
+  overflow: hidden;
+}
+
+[role="dialog"][data-type="action"] > header .icon.icon-close {
+  background-image: image-set(url("action_menu/images/icons/close.png") 1x, url("action_menu/images/icons/close@1.5x.png") 1.5x, url("action_menu/images/icons/close@2x.png") 2x, url("action_menu/images/icons/close@2.25x.png") 2.25x);
+}
+
+html[dir="ltr"] [role="dialog"][data-type="action"] > header .icon.icon-back {
+  background-image: image-set(url("action_menu/images/icons/left.png") 1x, url("action_menu/images/icons/left@1.5x.png") 1.5x, url("action_menu/images/icons/left@2x.png") 2x, url("action_menu/images/icons/left@2.25x.png") 2.25x);
+}
+html[dir="rtl"] [role="dialog"][data-type="action"] > header .icon.icon-back {
+  background-image: image-set(url("action_menu/images/icons/right.png") 1x, url("action_menu/images/icons/right@1.5x.png") 1.5x, url("action_menu/images/icons/right@2x.png") 2x, url("action_menu/images/icons/right@2.25x.png") 2.25x);
+}
+
+/* Navigation links (back, cancel, etc) */
+[role="dialog"][data-type="action"] > header > button,
+[role="dialog"][data-type="action"] > header > a {
+  width: 5rem;
+  height: 4.9rem;
+  background: none;
+  overflow: visible;
+  margin: 0 -1rem;
+  margin-inline-start: -3rem;
+  position: relative;
+}
+html[dir="ltr"] [role="dialog"][data-type="action"] > header > button,
+html[dir="ltr"] [role="dialog"][data-type="action"] > header > a {
+  float: left;
+}
+html[dir="rtl"] [role="dialog"][data-type="action"] > header > button,
+html[dir="rtl"] [role="dialog"][data-type="action"] > header > a {
+  float: right;
+}
+
+[role="dialog"][data-type="action"] > header > button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+[role="dialog"][data-type="action"] > header > button .icon,
+[role="dialog"][data-type="action"] > header > a .icon {
+  position: static;
+  display: block;
+  width: 3rem;
+  height: 4.9rem;
+  margin: 0;
+  overflow: visible;
+  font-size: 0;
+}
+
+[role="dialog"][data-type="action"] > header > button .icon:after,
+[role="dialog"][data-type="action"] > header > a .icon:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: 0;
+  top: 0;
+  z-index: -1;
+  width: 3rem;
+  height: 4.9rem;
+}
+
+/* Content */
+[role="dialog"][data-type="action"] > section {
+  color: #fff;
+  position: absolute;
+  top: 7rem;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 2rem;
+  font-size: 1.6rem;
+  overflow: scroll;
+}
+
+/* Specific component code */
+[role="dialog"][data-type="action"] > menu {
+  margin: 0;
+  padding: 0;
+  max-height: calc(100% - 13.5rem); /*header(5rem) + footer(7rem) + padding(1.5rem)*/
+  height: auto;
+  padding-top: 1.5rem;
+  overflow: auto;
+  width: auto;
+  border: none;
+  background: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 7rem;
+}
+
+[role="dialog"][data-type="action"] > menu > button {
+  width: calc(100% - 3rem);
+  height: 4rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: normal;
+  line-height: 4rem;
+  outline: none;
+  font-size: 1.6rem;
+  text-shadow: none;
+  padding: 0 1.2rem;
+  margin: 0 1.5rem 1rem;
+  background: rgba(87, 87, 87, 0.8);
+  border: none;
+  border-radius: 0;
+  position: relative;
+  color: #fff;
+  font-family: sans-serif;
+  font-style: italic;
+}
+
+[role="dialog"][data-type="action"] > menu > .last-button-container {
+  position: fixed;
+  width: 100%;
+  background-color: #4d4d4d;
+  height: 7rem;
+  offset-inline-start: 0;
+  bottom: 0;
+}
+
+[role="dialog"][data-type="action"] > menu > .last-button-container button {
+  width: calc(100% - 3rem);
+  position: fixed;
+  bottom: 0;
+  margin: 0 1.5rem 1.5rem;
+  offset-inline-start: 0;
+  color: #333;
+  background: #d8d8d8;
+  text-align: center;
+  border: none;
+  border-radius: 2rem;
+  line-height: 4rem;
+  font-size: 1.6rem;
+  height: 4rem;
+  font-family: sans-serif;
+  font-style: italic;
+}
+
+[role="dialog"][data-type="action"] > menu > button:nth-last-child(2) {
+  margin-bottom: 1.5rem;
+}
+
+/* Press state */
+[role="dialog"][data-type="action"] > menu button:active {
+  background: #00aacc;
+  color: #fff;
+}
+
+/* Disabled */
+[role="dialog"][data-type="action"] > menu > button[disabled] {
+  background-color: rgba(87, 87, 87, 0.8);
+  color: rgba(255, 255, 255, 0.4);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+[role="dialog"][data-type="action"] > menu > .last-button-container button[disabled] {
+  background-color: #e7e7e7;
+  color: #a6a6a6;
+  opacity: 1;
+}

overrides/sms.gaiamobile.org/shared/style/input_areas.css

@@ -0,0 +1,575 @@
+/* ----------------------------------
+ * Input areas
+ * ---------------------------------- */
+
+/**
+ * BiDi notes:
+ *
+ *  - as the <input>, <textarea> and [contentEditable] elements are filled by
+ *    the user, they need a `unicode-bidi: -moz-plaintext` attribute for their
+ *    content to be displayed properly (e.g. LTR content in an RTL document,
+ *    or vice-versa);
+ *
+ *  - consequence: *-inline-start/end properties can still be used on such
+ *    elements content direction doesn't impact element's direction
+ *
+ *  - however, the one-line inputs must still be aligned along with the
+ *    *document* direction: to the left in LTR, to the right in RTL
+ *    -- no matter what the *content* direction is.
+ */
+
+html[dir="ltr"] input { text-align: left; }
+html[dir="rtl"] input { text-align: right; }
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+textarea {
+  font-family: sans-serif;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 4rem;
+  line-height: 4rem;
+  resize: none;
+  padding: 0 1.5rem;
+  font-size: 1.6rem;
+  border: 0.1rem solid #c7c7c7;
+  border-radius: 0;
+  box-shadow: none; /* override the box-shadow from the system (performance issue) */
+  color: #333;
+  background: #fff;
+  margin: 0 0 1rem;
+  unicode-bidi: -moz-plaintext;
+}
+
+label:active {
+  background-color: transparent;
+}
+
+textarea {
+  height: 10rem;
+  max-height: 10rem;
+  line-height: 2rem;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #a9a9a9;
+  opacity: 1;
+  font-style: italic;
+  font-weight: 400;
+}
+
+input[disabled],
+textarea[disabled] {
+  opacity: 0.5;
+}
+
+.skin-dark input[type="text"],
+.skin-dark input[type="password"],
+.skin-dark input[type="email"],
+.skin-dark input[type="tel"],
+.skin-dark input[type="search"],
+.skin-dark input[type="url"],
+.skin-dark input[type="number"],
+.skin-dark textarea  {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+
+form p {
+  position: relative;
+  margin: 0;
+}
+
+form p input + button[type="reset"],
+form p textarea + button[type="reset"] {
+  position: absolute;
+  top: 0;
+  width: 4rem;
+  height: 4rem;
+  padding: 0;
+  border: none;
+  font-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  background: image-set(url("input_areas/images/clear.png") 1x, url("input_areas/images/clear@1.5x.png") 1.5x, url("input_areas/images/clear@2x.png") 2x, url("input_areas/images/clear@2.25x.png") 2.25x) no-repeat 50% 50% / 2.4rem auto;
+}
+html[dir="ltr"] form p input + button[type="reset"],
+html[dir="ltr"] form p textarea + button[type="reset"] {
+  right: -0.3rem;
+}
+html[dir="rtl"] form p input + button[type="reset"],
+html[dir="rtl"] form p textarea + button[type="reset"] {
+  left: -0.3rem;
+}
+
+.skin-dark p input + button[type="reset"],
+.skin-dark p textarea + button[type="reset"] {
+  background-image: image-set(url("input_areas/images/clear_dark.png") 1x, url("input_areas/images/clear_dark@1.5x.png") 1.5x, url("input_areas/images/clear_dark@2x.png") 2x, url("input_areas/images/clear_dark@2.25x.png") 2.25x);
+}
+
+/* To avoid colission with BB butons */
+li input + button[type="reset"]:after,
+li textarea + button[type="reset"]:after {
+  background: none;
+}
+
+textarea {
+  padding: 1.2rem;
+}
+
+html[dir="ltr"] form p input:focus { padding-right: 3rem; }
+html[dir="rtl"] form p input:focus { padding-left: 3rem; }
+
+form p input:focus + button[type="reset"],
+form p textarea:focus + button[type="reset"] {
+  opacity: 1;
+  pointer-events: all;
+}
+
+/* Fieldset */
+fieldset {
+  position: relative;
+  overflow: hidden;
+  margin: 1.5rem 0 0;
+  padding: 0;
+  font-size: 2rem;
+  line-height: 1em;
+  background: none;
+  border: 0;
+}
+
+fieldset legend,
+input[type="date"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"] {
+  border: 0.1rem solid #c7c7c7;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 1.6rem;
+  margin: 0 0 1.5rem;
+  padding: 0 1.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 4rem;
+  color: #333;
+  border-radius: 0;
+  background-color: #fff;
+  background-repeat: no-repeat;
+}
+html[dir="ltr"] fieldset legend,
+html[dir="ltr"] input[type="date"],
+html[dir="ltr"] input[type="time"],
+html[dir="ltr"] input[type="datetime"],
+html[dir="ltr"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog.svg);
+  background-position: right 1rem bottom 1rem;
+}
+html[dir="rtl"] fieldset legend,
+html[dir="rtl"] input[type="date"],
+html[dir="rtl"] input[type="time"],
+html[dir="rtl"] input[type="datetime"],
+html[dir="rtl"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog_rtl.svg);
+  background-position: left 1rem bottom 1rem;
+}
+
+fieldset legend {
+  margin: 0 0 1rem;
+  padding: 1rem 1.5rem 0;
+  background-color: rgba(0,0,0,0.05);
+}
+
+fieldset[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.skin-dark fieldset legend,
+.skin-dark input[type="date"],
+.skin-dark input[type="time"],
+.skin-dark input[type="datetime"],
+.skin-dark input[type="datetime-local"] {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+
+fieldset[disabled] legend,
+input[type="date"][disabled],
+input[type="time"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled] {
+  background-color: transparent;
+}
+html[dir="ltr"] fieldset[disabled] legend,
+html[dir="ltr"] input[type="date"][disabled],
+html[dir="ltr"] input[type="time"][disabled],
+html[dir="ltr"] input[type="datetime"][disabled],
+html[dir="ltr"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled.svg);
+}
+html[dir="rtl"] fieldset[disabled] legend,
+html[dir="rtl"] input[type="date"][disabled],
+html[dir="rtl"] input[type="time"][disabled],
+html[dir="rtl"] input[type="datetime"][disabled],
+html[dir="rtl"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled_rtl.svg);
+}
+
+input[type="date"]:focus,
+input[type="time"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #c7c7c7;
+}
+
+.skin-dark input[type="date"]:focus,
+.skin-dark input[type="time"]:focus,
+.skin-dark input[type="datetime"]:focus,
+.skin-dark input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #454545;
+}
+
+input[type="date"]:active,
+input[type="time"]:active,
+input[type="datetime"]:active,
+input[type="datetime-local"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+.skin-dark input[type="date"]:active,
+.skin-dark input[type="time"]:active,
+.skin-dark input[type="datetime"]:active,
+.skin-dark input[type="datetime-local"]:active {
+  background-color: #00aacc;
+  background-image: url(input_areas/images/dialog_active.svg);
+}
+
+/* fix for required inputs with wrong or empty value e.g. [type=email] */
+input:invalid,
+textarea:invalid,
+.skin-dark input:invalid,
+.skin-dark textarea:invalid {
+  color: #b90000;
+}
+
+input:focus,
+textarea:focus,
+.skin-dark input:focus,
+.skin-dark textarea:focus {
+  box-shadow: inset 0 -0.1rem 0 #00caf2;
+  border-bottom-color: #00caf2;
+}
+
+input:invalid:focus,
+textarea:invalid:focus,
+.skin-dark input:invalid:focus,
+.skin-dark textarea:invalid:focus {
+  box-shadow: inset 0 -0.1rem 0 #820000;
+  border-bottom-color: #820000;
+}
+
+input[type="range"]:focus,
+.skin-dark input[type="range"]:focus {
+  box-shadow: none;
+  border-bottom: 0;
+}
+
+/* Tidy (search/submit) */
+form[role="search"] {
+  position: relative;
+  height: 3.7rem;
+  background: #f4f4f4;
+}
+
+form[role="search"].skin-dark {
+  background: #202020;
+}
+
+form[role="search"] p {
+  padding: 0 1.5rem;
+  padding-inline-start: 3rem;
+  overflow: hidden;
+  position: relative;
+}
+
+form[role="search"] p input,
+form[role="search"] p textarea {
+  height: 3.7rem;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+}
+
+form[role="search"] p textarea {
+  padding: 1rem 0 0;
+}
+
+form[role="search"] p input::-moz-placeholder {
+  background-image: url(input_areas/images/search.svg);
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="search"] p input::-moz-placeholder {
+  background-position: right -0.5rem center;
+}
+html[dir="rtl"] form[role="search"] p input::-moz-placeholder {
+  background-position: left -0.5rem center;
+}
+
+form[role="search"].skin-dark p input::-moz-placeholder {
+  background-image: url(input_areas/images/search_dark.svg);
+}
+
+form[role="search"] p input:focus::-moz-placeholder {
+  background: none;
+}
+
+form[role="search"] p input:invalid,
+form[role="search"] p textarea:invalid,
+form[role="search"] p input:focus,
+form[role="search"] p textarea:focus {
+  border: none;
+  box-shadow: none;
+}
+
+form[role="search"].skin-dark p input,
+form[role="search"].skin-dark p textarea {
+  color: #fff;
+  background: none;
+  box-shadow: none;
+}
+
+form[role="search"] button[type="submit"] {
+  min-width: 6rem;
+  height: 3.7rem;
+  padding: 0 1.5rem;
+  border: none;
+  color: #00aac5;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 3.7rem;
+  width: auto;
+  border-radius: 0;
+  margin: 0;
+  position: relative;
+  background-image: none;
+  background-color: unset;
+  font-style: italic;
+  overflow: visible;
+}
+html[dir="ltr"] form[role="search"] button[type="submit"] { float: right; }
+html[dir="rtl"] form[role="search"] button[type="submit"] { float: left; }
+
+form[role="search"] button[type="submit"]:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: -0.1rem;
+  top: 0.7rem;
+  bottom: 0.7rem;
+  width: 0.1rem;
+  background: #c7c7c7;
+}
+
+form[role="search"] button[type="submit"].icon {
+  font-size: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 3rem;
+}
+
+form[role="search"] p input + button[type="reset"]{
+  height: 3.7rem;
+  offset-inline-end: 0.5rem;
+}
+
+form[role="search"].skin-dark button[type="submit"]:after {
+  background-color: #575757;
+}
+
+form[role="search"] button[type="submit"] + p > textarea {
+  height: 3.7rem;
+  line-height: 2rem;
+}
+
+form[role="search"] button[type="submit"] + p button {
+  height: 3.7rem;
+}
+
+form[role="search"].full button[type="submit"] {
+  display: none;
+}
+
+form[role="search"] button.icon:active,
+form[role="search"] button[type="submit"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+form[role="search"].skin-dark button.icon:active,
+form[role="search"].skin-dark button[type="submit"]:active {
+  background: #00aacc;
+}
+
+form[role="search"] button[type="submit"][disabled] {
+  color: #adadad;
+  pointer-events: none;
+}
+
+form button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+/* .bb-editable - e.g email & SMS recipients */
+.bb-editable [contenteditable] {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  max-width: calc(100% - 1.4rem);
+  overflow: hidden;
+  padding: 0 1.5rem;
+  margin: 0 0 0.6rem;
+  line-height: 2.8rem;
+  border-radius: 1.4rem;
+  text-overflow: ellipsis;
+  font-size: 1.6rem;
+  font-style: italic;
+  white-space: nowrap;
+  color: #333;
+  background: #fff;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon {
+  padding-left: 3.7rem;
+}
+
+.bb-editable [contenteditable="false"].invalid {
+  background-color: #fedcdc;
+  padding: 0 1.5rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid { padding-left: 3.3rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid { padding-right: 3.3rem; }
+
+.bb-editable [contenteditable="false"].invalid:before {
+    content: "!";
+    position: absolute;
+    top: 0.6rem;
+    display: block;
+    width: 1.7rem;
+    height: 1.6rem;
+    padding: 0;
+    border-radius: 50%;
+    line-height: 1.6rem;
+    font-size: 1.2rem;
+    text-align: center;
+    text-indent: -0.1rem;
+    font-style: normal;
+    font-weight: 600;
+    color: #fff;
+    background-color: #b80404;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid:before { left: 0.8rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid:before { right: 0.8rem; }
+
+.bb-editable [contenteditable="false"].invalid:hover:before,
+.bb-editable [contenteditable="false"].invalid:active:before {
+  color: #b2f2ff;
+  background-color: #fff;
+}
+
+.bb-editable [contenteditable]:hover,
+.bb-editable [contenteditable]:active,
+.bb-editable [contenteditable].invalid:hover,
+.bb-editable [contenteditable].invalid:active {
+  color: #fff;
+  background-color: #b2f2ff;
+}
+
+.bb-editable [contenteditable].icon:after {
+  content: "";
+  position: absolute;
+  top: 0.7rem;
+  width: 3rem;
+  height: 3rem;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].icon:after {
+  right: 0;
+  background-position: -0.7rem -3.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:after {
+  left: 0;
+  background-position: 0.7rem -3.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon {
+  padding-left: 3.7rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: -0.7rem -6.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: 0.7rem -6.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+
+.bb-editable [contenteditable="true"],
+.bb-editable [contenteditable="true"]:hover,
+.skin-comms .bb-editable [contenteditable="true"]:hover {
+    padding: 0 0.2rem;
+    white-space: normal;
+    font-size: 1.8rem;
+    font-style: normal;
+    color: #000;
+    background: none repeat scroll 0 0 transparent;
+}
+
+.skin-comms .bb-editable [contenteditable]:hover,
+.skin-comms .bb-editable [contenteditable]:active {
+  color: #fff;
+  background-color: #29bbb5;
+}
+

overrides/sms.gaiamobile.org/shared/style/progress_activity.css

@@ -0,0 +1,121 @@
+/* ----------------------------------
+ * Progress + activities
+ * ---------------------------------- */
+
+/* Spinner */
+progress:not([value]) {
+  background: image-set(url("progress_activity/images/ui/default.png") 1x, url("progress_activity/images/ui/default@1.5x.png") 1.5x, url("progress_activity/images/ui/default@2x.png") 2x, url("progress_activity/images/ui/default@2.25x.png") 2.25x) no-repeat center center / 100% auto;
+  animation: 0.9s rotate infinite steps(30);
+  width: 2.9rem;
+  height: 2.9rem;
+  border: none;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+progress:not([value]).light {
+  background-image: image-set(url("progress_activity/images/ui/light.png") 1x, url("progress_activity/images/ui/light@1.5x.png") 1.5x, url("progress_activity/images/ui/light@2x.png") 2x, url("progress_activity/images/ui/light@2.25x.png") 2.25x);
+}
+
+progress:not([value])::-moz-progress-bar {
+ background: none;
+}
+
+/* Progress bar */
+progress[value] {
+  width: 100%;
+  background: #333;
+  border: none;
+  border-radius: 0;
+  height: 0.4rem;
+  display: block;
+}
+
+progress[value]::-moz-progress-bar {
+  background: #01c5ed;
+  border-radius: 0;
+}
+
+/* Progress bar */
+progress[value].pack-activity {
+  background-size: 15rem;
+}
+html[dir="ltr"] progress[value].pack-activity {
+  animation: 1.5s move-right steps(15) infinite;
+  background-image: repeating-linear-gradient(135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
+}
+html[dir="rtl"] progress[value].pack-activity {
+  animation: 1.5s move-left steps(15) infinite;
+  background-image: repeating-linear-gradient(-135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
+}
+
+/* Labels */
+p[role="status"] {
+  padding: 0.5rem;
+  font-weight: 300;
+  font-size: 2.25rem;
+  line-height: 1.4em;
+  color: #fff;
+}
+
+p[role="status"] progress:not([value]) {
+  margin-inline-end: 0.5rem;
+}
+
+p[role="status"] progress:not([value]) + span {
+  margin-bottom: 0;
+}
+
+p[role="status"] span {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 0.5rem;
+}
+
+/* Progress steps */
+.bb-steps {
+  position: relative;
+  height: 0.3rem;
+}
+html[dir="ltr"] .bb-steps { transform: scaleX(1); }
+html[dir="rtl"] .bb-steps { transform: scaleX(-1); }
+
+.bb-steps:before {
+  position: absolute;
+  content: "";
+  height: 0;
+  left: 0;
+  top: 0.1rem;
+  right: 0;
+  border-top: 0.1rem solid #b7b7b7;
+  border-bottom: 0.1rem solid #fff;
+}
+
+.bb-steps progress[value] {
+  position: absolute;
+  height: 0.3rem;
+  left: 0;
+  top: 0;
+  background: #858585;
+  transition: transform 0.35s cubic-bezier(0, 1, 0.5, 1.1);
+}
+
+.bb-steps progress[value]::-moz-progress-bar {
+  background: none;
+}
+
+/* Animations */
+@keyframes rotate {
+  from { transform: rotate(1deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes move-right {
+  from { background-position: -15rem 0; }
+  to   { background-position: 0 0; }
+}
+
+@keyframes move-left {
+  from { background-position: 0 0; }
+  to   { background-position: -15rem 0; }
+}

overrides/sms.gaiamobile.org/shared/style/switches.css

@@ -0,0 +1,114 @@
+/* ----------------------------------
+ * CHECKBOXES / RADIOS
+ * ---------------------------------- */
+
+label.pack-checkbox,
+label.pack-switch {
+  display: inline-block;
+  vertical-align: middle;
+  width: 5rem;
+  height: 5rem;
+  position: relative;
+  background: none;
+}
+
+label.pack-checkbox input,
+label.pack-switch input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  /* the conflict between left/right/width is resolved differently in LTR and
+   * RTL. The goal here is to keep "input" invisible */
+  left: 0;
+  right: 0;
+  width: 0;
+}
+
+label.pack-checkbox input ~ span:after {
+  content: '';
+  position: absolute;
+  /* CSS will resolve the conflict among left, right, and width "intelligently"
+     and pick left+width for LTR and right+width for RTL. */
+  left: 50%;
+  right: 50%;
+  top: 50%;
+  margin: 0;
+  margin-top: -1.1rem;
+  margin-inline-start: -1.1rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  pointer-events: none;
+}
+
+label.pack-checkbox input ~ span:after {
+  background: image-set(url("switches/images/check/default.png") 1x, url("switches/images/check/default@1.5x.png") 1.5x, url("switches/images/check/default@2x.png") 2x, url("switches/images/check/default@2.25x.png") 2.25x) no-repeat center top / 2.2rem auto;
+}
+
+/* checkbox & radio: disabled state */
+label.pack-checkbox input:disabled ~ span:after {
+  opacity: 0.4;
+}
+
+label.pack-checkbox input:checked ~ span:after,
+label.pack-switch input:checked ~ span:after {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' switches */
+
+label.pack-checkbox.danger input ~ span:after {
+  background-image: image-set(url("switches/images/check/danger.png") 1x, url("switches/images/check/danger@1.5x.png") 1.5x, url("switches/images/check/danger@2x.png") 2x, url("switches/images/check/danger@2.25x.png") 2.25x);
+}
+
+/* ----------------------------------
+ * ON/OFF SWITCHES
+ * ---------------------------------- */
+
+label.pack-switch input ~ span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  width: 6rem;
+  margin: -1.4rem 0 0;
+  height: 2.7rem;
+  pointer-events: none;
+  border-radius: 1.35rem;
+  overflow: hidden;
+  background-color: #e6e6e6;
+  background-image: image-set(url("switches/images/switch/background_off.png") 1x, url("switches/images/switch/background_off@1.5x.png") 1.5x, url("switches/images/switch/background_off@2.25x.png") 2.25x);
+  background-repeat: no-repeat;
+  background-size: 9.2rem 2.7rem;
+  transition: background 0.2s ease;
+}
+html[dir="ltr"] label.pack-switch input ~ span:after {
+  background-position: -3.2rem 0;
+}
+html[dir="rtl"] label.pack-switch input ~ span:after {
+  background-position: 0;
+}
+
+/* switch: 'ON' state */
+label.pack-switch input:checked ~ span:after {
+  background-color: #e6e6e6;
+  background-repeat: no-repeat;
+  background-size: 9.2rem 2.7rem;
+}
+html[dir="ltr"] label.pack-switch input:checked ~ span:after {
+  background-image: image-set(url("switches/images/switch/background.png") 1x, url("switches/images/switch/background@1.5x.png") 1.5x, url("switches/images/switch/background@2.25x.png") 2.25x);
+  background-position: 0 0;
+}
+html[dir="rtl"] label.pack-switch input:checked ~ span:after {
+  background-image: image-set(url("switches/images/switch/background_rtl.png") 1x, url("switches/images/switch/background_rtl@1.5x.png") 1.5x, url("switches/images/switch/background_rtl@2.25x.png") 2.25x);
+  background-position: -3.2rem 0;
+}
+
+/* switch: disabled state */
+label.pack-switch input:disabled ~ span:after {
+  opacity: 0.4;
+}
+
+label.pack-switch input.uninit ~ span:after {
+  transition: none;
+}

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