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.

gaia/apps/email/style/common.css

@@ -0,0 +1,397 @@
+/* Common/framework styling */
+
+.collapsed {
+  display: none !important;
+}
+.hidden {
+  visibility: hidden !important;
+}
+
+* {
+  /* By default do not allow any user text selection, only enable for certain
+     parts on a per-element/region area */
+  -moz-user-select: none;
+}
+
+/* Enforce default alignment for everything, even with dir="auto" and unicode-bidi: -moz-plaintext */
+html[dir="ltr"] { text-align: left; }
+html[dir="rtl"] { text-align: right; }
+
+/* Allow inputs to be selectable, and to allow cut/copy operations. Copy/paste
+select all could reach across the whole DOM so only scope the selection to the
+center "active" card. Bug 1152172. */
+.center input[type="email"],
+.center input[type="password"],
+.center input[type="search"],
+.center input[type="text"],
+.center input[type="url"] {
+  -moz-user-select: text;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  font-size: 10px;
+  overflow: hidden;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+/* Using white because of bug 1077605, but only want to do this once we have
+   content, to avoid a flash of white for showing too long on initial load. */
+body.content-visible {
+  background-color: white;
+}
+
+#cardContainer,
+#cards {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Set an explicit z-index of 0 so that #cardContainer gets its own stacking
+   context. Without this, the z-index usage inside it by .card nodes could lead
+   to a z-index that is quite high and may hide other elements like dialogs,
+   that could be placed outside #cardContainer at a z-index value, but not with
+   as high of value as the topmost card. Creating a stacking context for
+   #cardContainer avoids that by keeping the stacking context for the .card
+   elements as a child context of this one. */
+#cardContainer {
+  z-index: 0;
+}
+
+.card {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  transition-property: transform;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease;
+  transition-delay: 0s;
+
+}
+
+/*
+* Temp shim because building blocks target a section element for some styles,
+* where we now use a custom element instead. Ideally bb would use a class
+* target instead.
+*/
+.card > section.bbshim {
+  height: 100%;
+}
+
+.card.anim-fade {
+  transition-property: opacity;
+  transition-duration: .3s;
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+.card.no-anim {
+  transition-property: none;
+}
+
+.card.center {
+  transform: translateX(0);
+}
+
+.card.center.anim-vertical {
+  transform: translateY(0);
+}
+
+.card.center.anim-fade {
+  opacity: 1;
+}
+
+html[dir="ltr"] .card.before { transform: translateX(-100%); }
+html[dir="rtl"] .card.before { transform: translateX(100%); }
+
+.card.before.anim-vertical {
+  transform: translateY(100%);
+}
+
+.card.before.anim-fade {
+  transform: translateX(0);
+  opacity: 0;
+}
+
+.card.before.upflow.anim-vertical {
+  transform: translateY(-100%);
+}
+
+html[dir="ltr"] .card.after { transform: translateX(100%); }
+html[dir="rtl"] .card.after { transform: translateX(-100%); }
+
+.card.after.anim-vertical {
+  transform: translateY(-100%);
+}
+
+.card.after.upflow.anim-vertical {
+  transform: translateY(100%);
+}
+
+.card.after.anim-fade {
+  transform: translateX(0);
+  opacity: 0;
+}
+
+.form-card {
+  overflow: auto;
+}
+
+.header-label {
+  color: white;
+  line-height: 5.2rem;
+  margin: 0;
+  margin-inline-start: 4rem;
+  font-size: 2.2rem;
+  font-weight: normal;
+}
+
+.header-btn, .header-start-btn, .header-end-btn {
+  position: absolute;
+  top: 0;
+  height: 5.2rem;
+  width: 3.2rem;
+  border: none;
+  background: none;
+  font-size: 2.4rem;
+}
+
+.header-start-btn {
+  offset-inline-start: 0;
+  background: url("images/ui/separator-large.png") no-repeat scroll transparent;
+  background-size: auto 100%;
+}
+html[dir="ltr"] .header-start-btn { background-position: left 3rem center; }
+html[dir="rtl"] .header-start-btn { background-position: right 3rem center; }
+
+.header-end-btn {
+  offset-inline-end: 0;
+  background: url("images/ui/separator.png") no-repeat scroll transparent;
+  width: 5rem;
+}
+html[dir="ltr"] .header-end-btn { background-position: left 0 center; }
+html[dir="rtl"] .header-end-btn { background-position: right 0 center; }
+
+.scrollregion {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.scrollregion-below-header {
+  overflow-x: hidden;
+  height: calc(100% - 5rem);
+  will-change: scroll-position;
+}
+
+.scrollregion-below-header.scrollregion-horizontal-too {
+  overflow-x: auto !important;
+}
+
+.bottom-toolbar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 4rem;
+  background-color: rgba(0, 0, 0, 0.75);
+  z-index: 10;
+}
+
+.bottom-btn {
+  height: 4rem;
+  border: none;
+  width: 6rem;
+  background: transparent no-repeat center / 3rem !important;
+  margin: 0 calc((100% - 25rem) / 8);
+}
+
+.popup {
+  position: absolute;
+  margin: 0;
+}
+.popup-mask {
+  pointer-events: none;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.menu {
+  width: 26rem;
+  padding: 0.8rem;
+  border: 0.1rem solid black;
+  border-radius: 0.6rem;
+  background-color: white;
+}
+
+.menu-item {
+  padding: 0.4rem;
+  font-size: 160%;
+  border-bottom: 0.1rem solid gray;
+  display: block;
+}
+
+.menu-item:last-child {
+  border-bottom: none;
+}
+
+.highlight {
+  background-color: #ffe3d6;
+  font-weight: bolder;
+}
+
+.icon-download {
+  background: url("images/icons/download.png") no-repeat center / 3rem;
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.icon-view {
+  background: url("images/icons/view.png") no-repeat center / 3rem;
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+}
+
+/*Disabled a tag style extend*/
+section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+/* Toaster */
+section[role="status"].toaster {
+  bottom: 4.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  color: white;
+  background: #5F5F5F;
+}
+section[role="status"].toaster p {
+  margin: 1.5rem;
+  flex: 1;
+  font-size: 1.6rem;
+}
+section[role="status"].toaster-action-target {
+  display: inline-block;
+}
+
+section[role="status"].toaster button {
+  display: inline-block;
+  margin: 1rem 1.5rem;
+  width: 4rem;
+  height: 3rem;
+  font-size: 0;
+  background-color: #00c9f1;
+  background-repeat: no-repeat;
+  background-size: 2.4rem;
+  background-position: center;
+}
+
+section[role="status"].toaster button.undo {
+  background-image: url("images/icons/undo.png");
+}
+
+
+section[role="status"].toaster button:disabled {
+  display: none;
+}
+section[role="status"].fadeout {
+  transition: opacity 500ms ease;
+  opacity: 0;
+}
+
+/* General helpers for opacity transition */
+.anim-opacity {
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+.transparent {
+  opacity: 0;
+}
+
+/*
+These folder-depth* styles are here instead of folder_cards.css
+because they are also used by the value_selector for showing
+the list of folders.
+*/
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth0,
+.fld-folder-depth0 {
+  padding-inline-start: 1.5rem;
+}
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth1,
+.fld-folder-depth1 {
+  padding-inline-start: 3rem;
+}
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth2,
+.fld-folder-depth2 {
+  padding-inline-start: 4.5rem;
+}
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth3,
+.fld-folder-depth3 {
+  padding-inline-start: 6rem;
+}
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth4,
+
+.fld-folder-depth4 {
+  padding-inline-start: 7.5rem;
+}
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth5,
+.fld-folder-depth5 {
+  padding-inline-start: 9rem;
+}
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth6,
+.fld-folder-depth6,
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depthmax,
+.fld-folder-depthmax {
+  padding-inline-start: 10.5rem;
+}
+
+.email-value-selector[role="dialog"][data-type="value-selector"] menu {
+  padding: 0 1.5rem;
+}
+
+/* Styles for errors that could appear at any time. */
+.error-card h2 {
+  font-size: 1.6rem;
+  font-weight: 400;
+}
+
+.error-card .scrollregion-below-header {
+  margin: 1rem 2rem;
+}
+
+.error-card .actions {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.error-card .sup-bad-password-account {
+  margin: 1.4rem 0;
+  font-size: 1.4rem;
+}
+
+cards-setup-fix-gmail .sup-gmail-account {
+  text-align: center;
+  font-size: 1.4rem;
+}

gaia/apps/email/style/compose_cards.css

@@ -0,0 +1,348 @@
+.cmp-addr-label, .cmp-subject-label {
+  color: #888888;
+  width: -moz-min-content;
+  white-space: nowrap;
+  line-height: 3.3rem;
+}
+
+.cmp-subject-label {
+  line-height: 3.2rem;
+}
+
+.cmp-addr-label::after, .cmp-subject-label::after {
+  content: ':';
+}
+
+.cmp-addr-container, .cmp-subject-text {
+  flex:1;
+  min-width: 0;
+}
+
+.cmp-bubble-container {
+  width: calc(100% - 1rem);
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+html[dir="ltr"] .cmp-bubble-container { float: left; }
+html[dir="rtl"] .cmp-bubble-container { float: right; }
+
+/* Make sure these styles take precedence over the base msg-peep-bubble styles
+   by using both class names */
+.cmp-peep-bubble.msg-peep-bubble {
+  margin: 0.3rem 0.6rem;
+  border: 0;
+  border-radius: 1.4rem;
+  font-size: 1.6rem;
+  font-style: italic;
+  color: #2c2c2c;
+  background-color: white;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.cmp-peep-bubble.msg-peep-bubble:active {
+  color: white;
+  background-color: #00aacc;
+}
+
+.cmp-to-text-container {
+  overflow: hidden;
+}
+
+/* Override base shared style that adds a focus highlight */
+body cards-compose input[type="text"],
+body cards-compose input[type="email"] {
+  margin-bottom: 0;
+  padding: 0;
+}
+body cards-compose input:invalid:focus,
+body cards-compose input:focus {
+  box-shadow: none;
+  border-bottom: 0;
+}
+
+input.cmp-addr-text,
+input.cmp-subject-text {
+  height: 3.3rem;
+  font-size: 1.4rem;
+  border: 0;
+  background: none;
+}
+html[dir="ltr"] input.cmp-addr-text,
+html[dir="ltr"] input.cmp-subject-text {
+  margin-left: 0.5rem;
+}
+html[dir="rtl"] input.cmp-addr-text,
+html[dir="rtl"] input.cmp-subject-text {
+  margin-right: 0.5rem;
+}
+
+input.cmp-addr-text, input.cmp-dot-text {
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-wrap: normal;
+  white-space: nowrap;
+}
+
+input.cmp-subject-text {
+  font-size: 1.6rem;
+  text-overflow: ellipsis;
+}
+
+/* Allows the position absolute autocomplete list to be relative to this
+   element */
+.cmp-autocomplete-origin {
+  position: relative;
+}
+
+.cmp-autocomplete-input-container {
+  background-color: #f2f2f2;
+}
+
+.cmp-autocomplete-input-list {
+  transition: transform 200ms ease;
+}
+
+/* Prevents scrolling of areas under the autocomplete list to avoid confusing
+   dueling scrollbars */
+.cmp-autocomplete-noscroll {
+  overflow: hidden;
+}
+
+/* When the autocomplete is active, change the flex alignment so that the label
+and + buttons are visible when typing */
+.cmp-autocomplete-input-label.cmp-autocomplete-active {
+  align-items: flex-end;
+}
+
+.cmp-autocomplete-list {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  font-size: 1.4rem;
+  background-color: white;
+}
+
+.cmp-autocomplete-item {
+  overflow: hidden;
+  border-bottom: 0;
+}
+
+.cmp-autocomplete-item-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.cmp-autocomplete-item-link:focus,
+.cmp-autocomplete-item-link:active,
+.cmp-autocomplete-item-link:hover {
+  background-color: #b1f1ff;
+  outline: none;
+  color: inherit;
+}
+
+.cmp-autocomplete-item-details {
+  margin: 0 1.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 0.1rem solid #DBD9D9;
+}
+
+.cmp-autocomplete-name,
+.cmp-autocomplete-email {
+  display: block;
+  line-height: 2.4rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.cmp-autocomplete-email {
+  color: #858585;
+}
+
+.cmp-contact-add {
+  background: url("images/icons/actionicon_email_addrecipient.png") no-repeat center center / 3rem auto;
+  width: 3rem;
+  height: 3.3rem;
+}
+
+.cmp-envelope-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: calc(100% - 2.8rem);
+  color: #575757;
+  background-color: #f2f2f2;
+  padding: 0.4rem 1.4rem;
+  font-size: 1.4rem;
+}
+
+.cmp-envelope-line.cmp-subject {
+  margin: 0 1.5rem;
+  padding: 0.4rem 0;
+  background-color: white;
+  border-bottom: 0.1rem solid #dfdfdf;
+}
+
+.cmp-subject input {
+  color: #2c2c2c;
+}
+
+.cmp-body-text {
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-height: none;
+  display: block;
+  padding: 1rem 1.5rem 0;
+  font-family: inherit;
+  /* be careful about specifying a line-height different than the font-size,
+     as it may result in the text visuall shifting upwards when typing the
+     first character on a blank/new line and then back down when deleted. */
+  font-size: 1.6rem;
+  font-weight: normal;
+  color: #333333;
+  border: none;
+  box-shadow: none;
+  background: #fff;
+  outline: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  unicode-bidi: -moz-plaintext;
+  text-align: initial;
+}
+
+
+/* Copy/paste select all could reach across the whole DOM so only scope the
+selection to the center "active" card. Bug 1152172. */
+.center .cmp-body-text {
+  -moz-user-select: text;
+}
+/* This style allows newlines to be copied. This catches br tags and is
+extensible to the future where other tags could be in the contenteditable
+field. Bug 1127160. */
+.center .cmp-body-text * {
+  -moz-user-select: text;
+}
+
+.cmp-body-html {
+  margin: 0 1.5rem 1.5rem;
+}
+
+/* Attachment */
+/* Super specific style to override base styles */
+section[role="region"] .cmp-attachment-btn .icon.icon-attachment {
+  background: url("images/icons/actionicon_attachments.png") no-repeat scroll center / 3rem;
+}
+
+.cmp-attachment-total {
+  margin: 0 1.5rem;
+  padding: 0.6rem 0;
+  border-top: 0.1rem solid #dfdfdf;
+  color: #a6a6a6;
+  background-color: white;
+}
+
+.cmp-attachment-label {
+  line-height: 1.4rem;
+  color: inherit;
+}
+
+.cmp-attachment-size {
+  white-space: nowrap;
+  line-height: 1.4rem;
+  -moz-padding-start: 0.5rem;
+}
+
+.cmp-attachment-container {
+  padding: 0;
+  margin: 0 1.5rem;
+  font-size: 1.2rem;
+  border-bottom: 0.1rem solid #dfdfdf;
+}
+
+.cmp-attachment-container li:last-child {
+  margin-bottom: 0.6rem;
+}
+
+.cmp-attachment-container li:only-child {
+  margin-bottom: 0;
+}
+
+/* More specific selector to override shared styles */
+.cmp-attachment-container .cmp-attachment-item {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  height: 4rem;
+  min-height: 4rem;
+  border-bottom: none;
+}
+
+.cmp-attachment-icon {
+  background: url("images/icons/icon_default.png") no-repeat;
+  background-size: 3rem auto;
+  width: 3.6rem;
+  height: 4rem;
+}
+
+html[dir="ltr"] .cmp-attachment-icon { background-position: center left; }
+html[dir="rtl"] .cmp-attachment-icon { background-position: center right; }
+
+.mime-image .cmp-attachment-icon {
+  background-image: url("images/icons/icon_image.png");
+}
+.mime-audio .cmp-attachment-icon {
+  background-image: url("images/icons/icon_music.png");
+}
+.mime-video .cmp-attachment-icon {
+  background-image: url("images/icons/icon_video.png");
+}
+
+.cmp-attachment-fileinfo {
+  flex-grow: 2;
+  max-width: calc(100% - 6.4rem);
+}
+
+.cmp-attachment-filename,
+.cmp-attachment-filesize {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #393d3e;
+}
+
+.cmp-attachment-filesize {
+  max-width: 6.5rem;
+  color: #a6a6a6;
+}
+
+.cmp-attachment-remove {
+  background: url("images/icons/actionicon_email_removeattachment.png") no-repeat scroll center / 2rem;
+  width: 2rem;
+  border: 0.4rem solid transparent;
+  height: 100%;
+}
+
+.cmp-messages-sending p {
+  text-align: center;
+}
+
+.cmp-error-message {
+  background-color: black;
+  color: #fff;
+  padding: 0.8rem;
+  font-size: 120%;
+  text-align: center;
+}

gaia/apps/email/style/folder_cards.css

@@ -0,0 +1,377 @@
+cards-folder-picker .fld-header-placeholder {
+  height: 5rem;
+  overflow: hidden;
+}
+
+cards-folder-picker.card .fld-header-placeholder .fld-header-back {
+  position: absolute;
+  top: 0;
+  width: 5rem;
+  height: 5rem;
+  background: transparent;
+  border: 0;
+  font-size: 0;
+}
+html[dir="ltr"] cards-folder-picker.card .fld-header-placeholder .fld-header-back {
+  left: 0;
+}
+html[dir="rtl"] cards-folder-picker.card .fld-header-placeholder .fld-header-back {
+  right: 0;
+}
+
+cards-folder-picker .fld-acct-header {
+  position: relative;
+  display: flex;
+  clear: both;
+  padding: 0.6rem 0;
+  padding-inline-start: 3rem;
+  font-size: 1.7rem;
+  line-height: 3.8rem;
+  color: #5f5f5f;
+  background: white;
+  border-bottom: 0.1rem solid #dfdfdf;
+}
+
+cards-folder-picker.one-account .fld-acct-header,
+cards-folder-picker.one-account .fld-accountlist-container {
+  display: none;
+}
+
+cards-folder-picker.one-account .fld-folders-container {
+  border-top: 0;
+}
+
+.fld-content-container {
+  position: absolute;
+  top: 5rem;
+  width: 100%;
+   /* Our goal is to leave the bottom toolbar visible, so 5rem for the header
+   from the message_list, and 4.5rem so that the bottom toolbar from the
+   message_list is viewable through the translucent shield div to help indicate
+   the drawer is overlaid in front of the message list. */
+  height: calc(100% - 9.5rem);
+  overflow: hidden;
+}
+
+.fld-content {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  transform: translateY(-100%);
+  transition-property: transform;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+cards-folder-picker.opened .fld-content {
+  transform: translateY(0);
+}
+
+.fld-shield {
+  position: absolute;
+  top: 5rem;
+  width: 100%;
+  /* Height is -5rem so that it only covers the message_list area below the
+  message_list's 5rem header, and this div's top is at 5rem. */
+  height: calc(100% - 5rem);
+  background-color: black;
+
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+cards-folder-picker.opened .fld-shield {
+  opacity: .6;
+}
+
+.fld-shield.transparent,
+.fld-shield.hidden {
+  opacity: 0;
+}
+
+cards-folder-picker .fld-acct-scrollouter {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* Like with .fld-content-container, be short enough to show the bottom
+  toolbar from the message_list. Since this is inside .fld-content-container,
+  it only needs to account for the toolbar area, not the header, as this
+  div is already below the header. */
+  height: calc(100% - 4.5rem);
+  background-color: #e7e7e7;
+}
+
+.fld-acct-scrollinner {
+  overflow: hidden;
+}
+
+.fld-acct-container {
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+}
+
+.fld-acct-container.animated {
+  transition-property: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+.fld-accountlist-container {
+  background: #e7e7e7;
+}
+
+/*.fld-accountlist-container.closed {
+  display: none;
+}*/
+
+.fld-folders-container {
+  background-color: #eeeeee;
+}
+
+/*.fld-folders-container.closed {
+  transform: translateY(0);
+}
+*/
+cards-folder-picker.one-account .fld-folders-container {
+  padding-top: 0;
+}
+
+cards-folder-picker.card {
+  background-color: transparent;
+  color: white;
+}
+
+.fld-nav-toolbar.bottom-toolbar {
+  text-align: center;
+  background: white;
+  color: black;
+  bottom: 0;
+  height: 4.5rem;
+  line-height: 4.5rem;
+}
+
+.fld-accounts-header-label {
+  color: red;
+}
+
+.fld-account-item,
+.fld-folder-item,
+.fld-folder-list-header {
+  position: relative;
+  display: block;
+  line-height: 3.5rem;
+  padding: 0.6rem 2rem;
+  border-bottom: 0.1rem solid #333b41;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #5f5f5f;
+}
+
+.fld-folder-item {
+  color: #5f5f5f;
+  background-color: #eeeeee;
+  border-bottom: 0.1rem solid #dfdfdf;
+}
+
+.fld-account-item {
+  padding-inline-start: 2rem;
+  border-bottom: 0.1rem solid #dfdfdf;
+  color: #5f5f5f;
+  background-color: white;
+}
+
+.fld-account-name {
+  direction: ltr;
+  font-size: 1.7rem;
+  padding: 0 1rem;
+}
+
+.fld-account-lastsync {
+  color: #c7c7c7;
+  font-size: 150%;
+  font-weight: normal;
+  padding: 0 1rem;
+}
+
+.fld-accounts-btn {
+  font-size: 1.2rem;
+}
+
+.fld-acct-header-account-header,
+.fld-acct-header-account-label {
+  flex-grow: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/**
+ * this element contains the mail address, which needs to be displayed with a
+ * LTR direction */
+.fld-acct-header-account-label {
+  direction: ltr;
+}
+
+.fld-acct-header .fld-acct-header-account-label,
+.fld-acct-header.closed .fld-acct-header-account-header {
+  display: none;
+}
+
+.fld-acct-header.closed .fld-acct-header-account-label,
+.fld-acct-header .fld-acct-header-account-header {
+  display: block;
+}
+
+.fld-account-switch-arrow {
+  width: 3rem;
+  height: 3.8rem;
+  margin: 0 1rem;
+  border: 0;
+  color: #5F5F5F;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-color: transparent;
+  background-size: 2rem auto;
+}
+
+/* TODO these could be added to gaia-icons font */
+.fld-account-switch-arrow {
+  background-image: url(images/icons/arrow_up.png);
+}
+
+.fld-acct-header:active .fld-account-switch-arrow {
+  background-image: url(images/icons/arrow_up_press.png);
+}
+
+.fld-acct-header.closed .fld-account-switch-arrow {
+  background-image: url(images/icons/arrow_down.png);
+}
+
+.fld-acct-header.closed:active .fld-account-switch-arrow {
+  background-image: url(images/icons/arrow_down_press.png);
+}
+
+.fld-folder-item:last-child {
+  border-bottom: none;
+}
+
+.fld-folder-item .selected-indicator,
+.fld-account-item .selected-indicator {
+  position: absolute;
+  top: 2rem;
+  display: none;
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 0.8rem;
+  background-color: #ff8019;
+}
+html[dir="ltr"] .fld-folder-item .selected-indicator,
+html[dir="ltr"] .fld-account-item .selected-indicator {
+  left: 1.1rem;
+}
+html[dir="rtl"] .fld-folder-item .selected-indicator,
+html[dir="rtl"] .fld-account-item .selected-indicator {
+  right: 1.1rem;
+}
+
+.fld-folder-item.fld-folder-selected .selected-indicator,
+.fld-account-item.fld-account-selected .selected-indicator {
+  display: block;
+}
+
+.fld-folders-container .fld-folder-depth0 {
+  padding-inline-start: 3rem;
+}
+.fld-folders-container .fld-folder-depth1 {
+  padding-inline-start: 3rem;
+}
+.fld-folders-container .fld-folder-depth2 {
+  padding-inline-start: 4.5rem;
+}
+.fld-folders-container .fld-folder-depth3 {
+  padding-inline-start: 6rem;
+}
+.fld-folders-container .fld-folder-depth4 {
+  padding-inline-start: 7.5rem;
+}
+.fld-folders-container .fld-folder-depth5 {
+  padding-inline-start: 9rem;
+}
+.fld-folders-container .fld-folder-depthmax {
+  padding-inline-start: 10.5rem;
+}
+
+.fld-acct-header:active,
+.fld-account-item:active,
+.fld-folder-item:active,
+.fld-folder-list-header:active,
+.fld-settings-link:active,
+.fld-nav-toolbar:active,
+.fld-nav-toolbar:active .fld-settings-link {
+  color: white;
+  border-color: #00caf2;
+  background: #00caf2;
+}
+.fld-folder-name {
+  font-size: 1.7rem;
+}
+.fld-folder-unread {
+  display: none;
+}
+
+/*
+There are fld-folder-depth* styles in common.css because they are
+also used in value_selector.
+*/
+
+.fld-folder-depthnonzero .fld-folder-name {
+  background: url('images/icons/folder_icon.png') no-repeat;
+  background-size: 1.6rem auto;
+}
+/**
+ * Explicitly using right/left, since text is dir=auto, and want to add the
+ * spacing based on overall UI direction choice, not specific text item
+ * direction, so that the folder icons appear correctly. */
+html[dir="ltr"] .fld-folder-depthnonzero .fld-folder-name {
+  padding-left: 2.2rem;
+  background-position: left center;
+}
+html[dir="rtl"] .fld-folder-depthnonzero .fld-folder-name {
+  padding-right: 2.2rem;
+  background-position: right center;
+}
+
+.fld-folder-depthnonzero .fld-folder-name:active,
+.fld-folder-depthnonzero:active .fld-folder-name {
+  background-image: url('images/icons/folder_icon_press.png');
+}
+
+.fld-settings-link {
+  color: #858585;
+  font-size: 0;
+}
+
+.fld-settings-link:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4.5rem;
+  background: url("images/icons/settings_icon.png") no-repeat 50% 50% / 3rem auto;
+}
+
+.fld-settings-link:active:after {
+  background-image: url("images/icons/settings_icon_press.png");
+}