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/system.gaiamobile.org/shared/elements/gaia_checkbox/style.css

@@ -0,0 +1,71 @@
+gaia-checkbox {
+  display: inline-block;
+  width: 100%;
+}
+
+#checkbox {
+  display: block;
+  width: 100%;
+  /* Normal gaia-checkboxes are the heights of their parents. */
+  height: 100%;
+  position: relative;
+  background: none;
+}
+
+#checkbox span {
+  font-size: 1.9rem;
+  font-weight: normal;
+  color: var(--label-color);
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+  width: 100%;
+  padding-inline-end: 2.2rem;
+  /* Override inheriting nowrap from legacy lists building blocks. */
+  white-space: normal;
+}
+
+/* Inline gaia-checkboxes are the heights of their parents. */
+#checkbox.inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#checkbox:not(.invisible) span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+  width: 2.2rem;
+  height: 2.2rem;
+}
+
+#checkbox.inline span {
+  padding-inline-start: 3rem;
+  padding-inline-end: 0;
+  height: auto;
+}
+
+#checkbox.inline span:after {
+  offset-inline-start: 1.2rem;
+  offset-inline-end: unset;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+}
+
+#checkbox:not(.invisible) span:after {
+  background: image-set(url("images/default.png") 1x, url("images/default@1.5x.png") 1.5x, url("images/default@2x.png") 2x, url("images/default@2.25x.png") 2.25x) no-repeat center top / 2.2rem auto;
+}
+
+#checkbox.checked span:after {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' checkboxes */
+#checkbox.danger span:after {
+  background-image: image-set(url("images/danger.png") 1x, url("images/danger@1.5x.png") 1.5x, url("images/danger@2x.png") 2x, url("images/danger@2.25x.png") 2.25x);
+}

overrides/system.gaiamobile.org/shared/elements/gaia_grid/style.css

@@ -0,0 +1,409 @@
+.icon[data-app-state="loading"]:after {
+  content: "";
+  background: no-repeat top center image-set(url("images/app_install_spinner.png") 1x, url("images/app_install_spinner@1.5x.png") 1.5x, url("images/app_install_spinner@2x.png") 2x, url("images/app_install_spinner@2.25x.png") 2.25x);
+  background-size: contain;
+  height: 8.4rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  /**
+  Keyframe must be defined outside of the web component.
+  See bug 1018269
+  */
+
+  animation: rotate 2.25s linear infinite;
+}
+
+.icon[data-app-state="loading"] {
+  /**
+  We must align this value with the value of [data-app-state]:after height the background size
+  here is overridden at the element level elsewhere which causes the spinner to be aligned too
+  low.
+  */
+  background-size: 8.4rem !important;
+  background-image: image-set(url("images/app_installing.png") 1x, url("images/app_installing@1.5x.png") 1.5x, url("images/app_installing@2x.png") 2x, url("images/app_installing@2.25x.png") 2.25x) !important;
+}
+
+.icon[data-app-state="unrecoverable"] {
+  background-image: image-set(url("images/app_install_unrecoverable.png") 1x, url("images/app_install_unrecoverable@1.5x.png") 1.5x, url("images/app_install_unrecoverable@2x.png") 2x, url("images/app_install_unrecoverable@2.25x.png") 2.25x) !important;
+}
+
+.icon[data-app-state="error"] {
+  background-image: image-set(url("images/app_install_failed.png") 1x, url("images/app_install_failed@1.5x.png") 1.5x, url("images/app_install_failed@2x.png") 2x, url("images/app_install_failed@2.25x.png") 2.25x) !important;
+}
+
+.icon[data-app-state="paused"] {
+  background-image: image-set(url("images/app_install_canceled.png") 1x, url("images/app_install_canceled@1.5x.png") 1.5x, url("images/app_install_canceled@2x.png") 2x, url("images/app_install_canceled@2.25x.png") 2.25x) !important;
+}
+
+.icon {
+  position: absolute;
+  transform-origin: 0 0;
+  display: inline-block;
+  text-align: center;
+  background: no-repeat top center;
+  z-index: 3;
+  outline: 0;
+}
+
+.icon.launching {
+  opacity: .65;
+}
+
+/* XXX: Override the .remove element  */
+.edit-mode .collection.hovered .remove {
+  background: image-set(url("images/add.png") 1x, url("images/add@1.5x.png") 1.5x, url("images/add@2x.png") 2x, url("images/add@2.25x.png") 2.25x) no-repeat;
+  background-size: 2rem;
+}
+
+.icon p {
+  pointer-events: none;
+  height: 3.2rem;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.icon .title {
+  display: inline-block;
+  margin-top: 0.1rem;
+  /* We need this rule in order not to hide the drop shadow */
+  padding: 0 0.2rem 1rem;
+  text-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3),
+               0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.4);
+  font-size: 1.4rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: calc(100% - 0.4rem);
+  box-sizing: border-box;
+  vertical-align: top;
+  transition: opacity var(--transition-duration);
+}
+
+/* We allow more space for text in the search app by hooking into the text-rows attribute on gaia-grid. */
+[text-rows="3"] .icon .title {
+  height: 5.8rem;
+}
+
+[cols="4"] .icon .title {
+  /* Font size is the same independent on grid configuration */
+  font-size: calc(1.2rem * 1.333);
+  margin-top: 0.5rem;
+  line-height: 1.94rem;
+}
+
+.edit-mode .icon.collapsed {
+  pointer-events: none;
+}
+
+.icon.collapsed .title {
+  opacity: 0;
+}
+
+.icon.hidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.divider {
+  position: absolute;
+  width: 100%;
+  padding-top: 2.3rem;
+  border-left: 0.6rem solid transparent;
+  border-right: 0.6rem solid transparent;
+  box-sizing: border-box;
+  z-index: 2;
+}
+
+[cols="4"] .divider {
+  padding-top: 1.6rem;
+}
+
+.divider span.spacer {
+  position: absolute;
+  bottom: 0;
+  display: block;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5));
+  margin: 0 25%;
+  width: 50%;
+  height: 0.2rem;
+  transition: opacity var(--transition-duration);
+}
+
+.dragging .icon.active:not(.hidden) {
+  z-index: 6;
+  opacity: 0.65;
+}
+
+.dragging .divider:not(.group),
+.icon:not(.active),
+.dropped {
+  transition: transform var(--transition-duration),
+              opacity var(--transition-duration);
+}
+
+.icon.active {
+  will-change: transform;
+}
+
+.edit-mode .icon .remove {
+  display: block;
+  position: absolute;
+  top: 0.1rem;
+  left: 0.5rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  background: image-set(url("images/remove.png") 1x, url("images/remove@1.5x.png") 1.5x, url("images/remove@2x.png") 2x, url("images/remove@2.25x.png") 2.25x) no-repeat;
+  background-size: 2rem;
+  /*
+  Ensure that remove is on top of the icon and has some extra
+  padding so it is easy to click.
+  */
+  z-index: 200;
+  padding: 0.5rem;
+}
+
+.icon .remove,
+.icon.collapsed .remove,
+.edit-mode .icon.active .remove {
+  display: none;
+}
+
+.edit-mode .icon.editable .title {
+  background-color: rgba(132, 132, 132, 0.7);
+  border-radius: 2rem;
+  margin-top: .4rem;
+  padding: 0 1rem;
+  width: auto;
+  max-width: 100%;
+}
+
+/*
+Disable events for placeholders, so we don't trigger touch events in edit mode.
+We only do this in edit-mode, otherwise we might trigger entering edit mode
+instead of the context menu.
+*/
+.edit-mode .placeholder {
+  pointer-events: none;
+}
+
+#confirm-message {
+  z-index: 100;
+}
+
+.dragging .group.active {
+  z-index: 5;
+}
+
+.divider.group {
+  border: none;
+  padding: 0;
+}
+
+.group > span {
+  display: block;
+  position: absolute;
+  width: 100%;
+  transition: background-color var(--transition-duration),
+              opacity var(--transition-duration);
+}
+
+.group:not(.active):not(.newly-created) > span {
+  transition: background-color var(--transition-duration),
+              opacity var(--transition-duration),
+              transform var(--transition-duration);
+}
+
+.group.active > span {
+  will-change: transform;
+}
+
+.group .header {
+  height: 4rem;
+  z-index: 4;
+}
+
+.group .header span,
+.group .header button {
+  position: absolute;
+  height: 4rem;
+  top: 0;
+
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: 100% 2rem;
+
+  transition: transform 0.25s, opacity 0.25s;
+}
+
+.group .header .gripper {
+  left: calc(50% - 4.2rem);
+  width: 8.4rem;
+  background-image: image-set(url("images/move_gripper.png") 1x, url("images/move_gripper@1.5x.png") 1.5x, url("images/move_gripper@2x.png") 2x, url("images/move_gripper@2.25x.png") 2.25x);
+  opacity: 0;
+  transform: translate(0, -100%);
+  pointer-events: none;
+}
+
+.edit-mode .group:not(.collapsed) .header .gripper {
+  opacity: 1;
+  transform: translate(0, 0);
+  pointer-events: auto;
+}
+
+.group .header .toggle {
+  width: 5.34rem;
+  right: 0;
+
+  border: none;
+  margin: 0;
+  padding: 0;
+
+  background-color: transparent;
+  background-image: image-set(url("images/collapse_arrow.png") 1x, url("images/collapse_arrow@1.5x.png") 1.5x, url("images/collapse_arrow@2x.png") 2x, url("images/collapse_arrow@2.25x.png") 2.25x);
+  transform-origin: 50% 1.6rem;
+  pointer-events: auto;
+}
+
+.group .header .toggle.toggling {
+  opacity: 0.5;
+  transition: transform 0.25s;
+}
+
+.group.collapsed .header .toggle {
+  transform: translateY(2rem) rotateZ(180deg);
+}
+
+.group.active .header .toggle {
+  opacity: 0.5;
+}
+
+.group .background {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 0;
+  pointer-events: none;
+  height: 0.1rem;
+  transform-origin: 0 0;
+}
+
+.group.odd:not(.newly-created) .background,
+.edit-mode .group:not(.newly-created) .background {
+  opacity: 1;
+}
+
+.group.active .background {
+  background-color: rgba(51, 51, 51, 0.9);
+}
+
+.group.hovering .background,
+.group.drop-target .background {
+  background-color: rgba(27, 185, 225, 0.5);
+}
+
+.group .shadow {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.edit-mode .group.active .shadow {
+  background-color: transparent;
+  box-shadow: 0 0.9rem 1.2rem rgba(0, 0, 0, 0.63);
+  opacity: 1;
+}
+
+.group .separator {
+  margin: 0;
+  height: 0.8rem;
+  pointer-events: none;
+}
+
+.group .separator > span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.25s, opacity 0.25s;
+  opacity: 0;
+}
+
+.group.odd .separator {
+  opacity: 1;
+}
+
+.group.odd .separator > span {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 1;
+}
+
+.edit-mode .group .separator,
+.edit-mode .group .separator > span {
+  opacity: 0;
+}
+
+/* For preventing entering edit mode when long-pressing on a placeholder */
+.edit-mode .group .background,
+.edit-mode .group .shadow,
+
+.group.collapsed .header,
+.group.collapsed .background,
+.group.collapsed .shadow {
+  pointer-events: none;
+}
+
+.edit-mode .group.collapsed .background {
+  pointer-events: auto;
+}
+
+.dragging .group:not(.active) .separator {
+  opacity: 1;
+}
+
+.dragging .group:not(.active):not(.invalid-drop) .separator > span {
+  background-color: #0095dd;
+  transform: scaleY(0.325);
+  opacity: 0.4;
+}
+
+.dragging .group.hovered:not(.active) .separator > span {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+/* A hint element for dragging items to the top of the group */
+.edit-mode::after {
+  content: ' ';
+  display: block;
+  width: 100%;
+  height: 0.8rem;
+  z-index: 2;
+  opacity: 0;
+  background-color: #0095dd;
+
+  position: relative;
+  top: -0.8rem;
+  transition: opacity 0.25s;
+}
+
+.edit-mode.hover-over-top::after {
+  opacity: 1;
+}
+
+/* Shift container downwards when hovering over the top to reveal the group
+ * creation hint.
+ */
+.edit-mode {
+  transition: transform 0.25s;
+}
+
+.edit-mode.hover-over-top {
+  transform: translateY(0.8rem);
+}
+
+/* RTL View */
+:-moz-dir(rtl) .group .header .toggle {
+  left: 0;
+  right: unset;
+}

overrides/system.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/system.gaiamobile.org/shared/elements/gaia_pin_card/style.css

@@ -0,0 +1,99 @@
+.pin-card {
+  position: relative;
+  box-sizing: border-box;
+  background-color: #fff;
+  background-size: cover;
+  color: #000;
+  font-weight: 500;
+  font-family: sans-serif;
+  line-height: normal;
+  white-space: normal;
+  font-size: 1.2rem;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+}
+
+.pin-card > * {
+  pointer-events: none;
+}
+
+.pin-card .background {
+  position: relative;
+  width: 100%;
+  height: 47%;
+  opacity: 0.7;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  background-size: cover;
+}
+
+.pin-card i {
+  position: absolute;
+  top: .15rem;
+  left: .15rem;
+  width: 3.03rem;
+  height: 3.03rem;
+  background: image-set(url("images/default_icon.png") 1x, url("images/default_icon@1.5x.png") 1.5x, url("images/default_icon@2x.png") 2x, url("images/default_icon@2.25x.png") 2.25x);
+  background-size: 3.5rem 3.5rem;
+  background-position: center center;
+  border-radius: 50%;
+}
+
+.icon-container {
+  position: absolute;
+  top: 4.8rem;
+  display: block;
+  overflow: hidden;
+  left: calc(50% - 1.65rem);
+  width: 3.33rem;
+  height: 3.33rem;
+  border-radius: 50%;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  background-color: white;
+  z-index: 1;
+}
+
+.pin-card .content {
+  position: relative;
+  height: 53%;
+  width: 100%;
+}
+
+.pin-card header {
+  position: relative;
+  height: 1.6rem;
+  color: #5f5f5f;
+  font-size: 1.4rem;
+  font-style: italic;
+  padding: 0 0.8rem;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+  top: 1.5rem;
+}
+
+.pin-card.no-content header {
+  top: 2.5rem;
+}
+
+.pin-card.no-content .description {
+  display: none;
+}
+
+.pin-card .description p {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  text-align: left;
+  height: 3rem;
+  line-height: 1.4rem;
+  font-size: 1.2rem;
+  font-weight: 300;
+  color: #5f5f5f;
+  padding: 0 0.8rem;
+  margin: 2rem 0;
+}
+

overrides/system.gaiamobile.org/shared/elements/gaia_switch/style.css

@@ -0,0 +1,116 @@
+gaia-switch {
+  display: inline-block;
+  width: 100%;
+}
+
+#switch {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+  background: none;
+}
+
+#switch span {
+  font-size: 1.9rem;
+  color: var(--label-color);
+  padding: 1rem 0;
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  /* Override inheriting nowrap from legacy lists building blocks. */
+  white-space: normal;
+}
+#switch span:-moz-dir(ltr) { float: left; }
+#switch span:-moz-dir(rtl) { float: right; }
+
+#switch span:not(:empty) {
+  padding-inline-end: 6rem;
+}
+
+#switch input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+}
+
+#switch input:checked ~ span::after {
+  background-position: center bottom;
+}
+
+/* ----------------------------------
+ * ON/OFF SWITCHES
+ * ---------------------------------- */
+
+#switch input ~ span::after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 2.5rem;
+  width: 6rem;
+  margin: -1.4rem 0 0;
+  height: 2.7rem;
+  border-radius: 1.35rem;
+  overflow: hidden;
+  background-color: #e6e6e6;
+  background-image: image-set(url("images/background_off.png") 1x, url("images/background_off@1.5x.png") 1.5x, url("images/background_off@2.25x.png") 2.25x);
+  background-repeat: no-repeat;
+  background-size: 9.2rem 2.7rem;
+  transition: background 0.2s ease;
+}
+#switch input ~ span:-moz-dir(ltr)::after { background-position: -3.2rem 0; }
+#switch input ~ span:-moz-dir(rtl)::after { background-position: 0 0; }
+
+/* switch: 'ON' state */
+#switch input:checked ~ span:-moz-dir(ltr)::after {
+  background-image: image-set(url("images/background.png") 1x, url("images/background@1.5x.png") 1.5x);
+  background-position: 0 0;
+}
+#switch input:checked ~ span:-moz-dir(rtl)::after {
+  background-image: image-set(url("images/background_rtl.png") 1x, url("images/background_rtl@1.5x.png") 1.5x);
+  background-position: -3.2rem 0;
+}
+
+/* switch: disabled state */
+#switch input:disabled ~ span::after {
+  opacity: 0.4;
+}
+
+#switch input.uninit ~ span::after {
+  transition: none;
+}
+
+/**
+ * A <details> slot may be specified in addition the the <label>.
+ * When provided, it appears under the <label> and can provide additional context.
+ */
+#switch div.details {
+  clear: both;
+  position: relative;
+  top: -1.5rem;
+  display: block;
+  margin: 0;
+  padding-top: 0.5rem;
+  padding-inline-start: 0;
+  padding-inline-end: 8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  color: #505859;
+  font-style: normal;
+  white-space: normal;
+}
+
+/**
+ * A <a> link slow may be specified in addition to the <label> and <details>.
+ * When provided, it will appear under the <details> section.
+ */
+gaia-switch a {
+  position: relative;
+  top: -0.8rem;
+  font-size: 1.7rem;
+  line-height: 2.4rem;
+  font-weight: 400;
+  color: #35679a;
+}

overrides/system.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/system.gaiamobile.org/shared/style/headers.css

@@ -0,0 +1,378 @@
+/* -------------------------------------------------------------------
+  HEADERS: layout
+  Form factor or Skin dependent styles should NOT be defined here.
+------------------------------------------------------------------- */
+
+section[role="region"] > header:first-child {
+  position: relative;
+  display: block;
+  z-index: 10;
+  padding: 0;
+  height: 5rem;
+  border: none;
+}
+
+section[role="region"] > header:first-child h1 {
+  font-size: 2.3rem;
+  line-height: 5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 1rem;
+  height: 100%;
+  font-weight: 300;
+  font-style: italic;
+  text-align: center;
+}
+
+section[role="region"] > header:first-child h1 em {
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1em;
+  font-style: normal;
+}
+
+section[role="region"] > header:first-child menu {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+html[dir="ltr"] section[role="region"] > header:first-child menu {
+  float: right;
+}
+html[dir="rtl"] section[role="region"] > header:first-child menu {
+  float: left;
+}
+
+/* ----------------------------------
+  Buttons
+---------------------------------- */
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 5rem;
+  width: auto;
+  height: 5rem;
+  border: none;
+  background: none;
+  padding: 0 1rem;
+  margin: 0;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 5rem;
+  border-radius: 0;
+  text-decoration: none;
+  text-align: center;
+  text-shadow: none;
+  font-style: italic;
+}
+html[dir="ltr"] section[role="region"] > header:first-child a,
+html[dir="ltr"] section[role="region"] > header:first-child button {
+  float: left;
+}
+html[dir="rtl"] section[role="region"] > header:first-child a,
+html[dir="rtl"] section[role="region"] > header:first-child button {
+  float: right;
+}
+
+/* Pressed state */
+section[role="region"] > header:first-child a:focus {
+  outline: none;
+}
+
+section[role="region"] > header:first-child button::-moz-focus-inner {
+  outline: none;
+  border: none;
+  margin-top: -0.2rem; /* To fix line-height bug (697451) */
+  padding: 0;
+}
+
+/* Disabled state */
+section[role="region"] > header:first-child a[aria-disabled="true"],
+section[role="region"] > header:first-child button[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+section[role="region"] > header:first-child .icon {
+  display: block;
+  width: 3rem;
+  height: 5rem;
+  background: transparent no-repeat center / 3rem auto;
+  font-size: 0;
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"] > header {
+  z-index: 0;
+  height: auto;
+}
+
+section[role="region"] header h2 {
+  margin: 0;
+  padding: 0.8rem 3rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: default
+  Default values in case we are not overriding them using
+  class="skin-*"
+----------------------------------------------------------------- */
+
+section[role="region"] > header:first-child {
+  color: #fff;
+  background-color: #f97c17;
+}
+
+section[role="region"] > header:first-child h1 {
+  color: #fff;
+}
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  color: rgba(0,0,0,0.6);
+}
+
+section[role="region"] > header:first-child a:active,
+section[role="region"] > header:first-child button:active,
+section[role="region"] > header:first-child a:hover,
+section[role="region"] > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.07);
+}
+
+section[role="region"] > header:first-child a:focus,
+section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+section[role="region"] > header:first-child .icon-add {
+  background-image: image-set(url("headers/images/icons/add.png") 1x, url("headers/images/icons/add@1.5x.png") 1.5x, url("headers/images/icons/add@2x.png") 2x, url("headers/images/icons/add@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-compose {
+  background-image: image-set(url("headers/images/icons/compose.png") 1x, url("headers/images/icons/compose@1.5x.png") 1.5x, url("headers/images/icons/compose@2x.png") 2x, url("headers/images/icons/compose@2.25x.png") 2.25x);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/edit.png") 1x, url("headers/images/icons/edit@1.5x.png") 1.5x, url("headers/images/icons/edit@2x.png") 2x, url("headers/images/icons/edit@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/edit-rtl.png") 1x, url("headers/images/icons/edit-rtl@1.5x.png") 1.5x, url("headers/images/icons/edit-rtl@2x.png") 2x, url("headers/images/icons/edit-rtl@2.25x.png") 2.25x);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
+  background-image: image-set(url("headers/images/icons/send.png") 1x, url("headers/images/icons/send@1.5x.png") 1.5x, url("headers/images/icons/send@2x.png") 2x, url("headers/images/icons/send@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
+  background-image: image-set(url("headers/images/icons/send_rtl.png") 1x, url("headers/images/icons/send_rtl@1.5x.png") 1.5x, url("headers/images/icons/send_rtl@2x.png") 2x, url("headers/images/icons/send_rtl@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-close {
+  background-image: image-set(url("headers/images/icons/close.png") 1x, url("headers/images/icons/close@1.5x.png") 1.5x, url("headers/images/icons/close@2x.png") 2x, url("headers/images/icons/close@2.25x.png") 2.25x);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/left.png") 1x, url("headers/images/icons/left@1.5x.png") 1.5x, url("headers/images/icons/left@2x.png") 2x, url("headers/images/icons/left@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/right.png") 1x, url("headers/images/icons/right@1.5x.png") 1.5x, url("headers/images/icons/right@2x.png") 2x, url("headers/images/icons/right@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-menu {
+  background-image: image-set(url("headers/images/icons/menu.png") 1x, url("headers/images/icons/menu@1.5x.png") 1.5x, url("headers/images/icons/menu@2x.png") 2x, url("headers/images/icons/menu@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-user {
+  background-image: image-set(url("headers/images/icons/user.png") 1x, url("headers/images/icons/user@1.5x.png") 1.5x, url("headers/images/icons/user@2x.png") 2x, url("headers/images/icons/user@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-up {
+  background-image: image-set(url("headers/images/icons/up.png") 1x, url("headers/images/icons/up@1.5x.png") 1.5x, url("headers/images/icons/up@2x.png") 2x, url("headers/images/icons/up@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-down {
+  background-image: image-set(url("headers/images/icons/down.png") 1x, url("headers/images/icons/down@1.5x.png") 1.5x, url("headers/images/icons/down@2x.png") 2x, url("headers/images/icons/down@2.25x.png") 2.25x);
+}
+
+section[role="region"] > header:first-child .icon-options {
+  background-image: image-set(url("headers/images/icons/options.png") 1x, url("headers/images/icons/options@1.5x.png") 1.5x, url("headers/images/icons/options@2x.png") 2x, url("headers/images/icons/options@2.25x.png") 2.25x);
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"] header h2 {
+  color: #424242;
+  border-bottom: solid 0.1rem #e6e6e6;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: comms
+  .skin-comms will override default values
+----------------------------------------------------------------- */
+
+.skin-comms section[role="region"] > header:first-child,
+section[role="region"].skin-comms > header:first-child {
+  background-color: #00adad;
+}
+
+.skin-comms section[role="region"] > header:first-child a,
+.skin-comms section[role="region"] > header:first-child button,
+section[role="region"].skin-comms > header:first-child a,
+section[role="region"].skin-comms > header:first-child button {
+  color: rgba(0,0,0,0.5);
+}
+
+.skin-comms section[role="region"] > header:first-child a:active,
+.skin-comms section[role="region"] > header:first-child button:active,
+.skin-comms section[role="region"] > header:first-child a:hover,
+.skin-comms section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-comms > header:first-child a:active,
+section[role="region"].skin-comms > header:first-child button:active,
+section[role="region"].skin-comms > header:first-child a:hover,
+section[role="region"].skin-comms > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.skin-comms section[role="region"] > header:first-child a:focus,
+.skin-comms section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-comms > header:first-child a:focus,
+section[role="region"].skin-comms > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: dark
+  .skin-dark will override default values
+----------------------------------------------------------------- */
+
+section[role="region"].skin-dark > header:first-child,
+.skin-dark > section[role="region"] > header:first-child {
+  background-color: #242d33;
+}
+
+.skin-dark section[role="region"] > header:first-child a,
+.skin-dark section[role="region"] > header:first-child button,
+section[role="region"].skin-dark > header:first-child a,
+section[role="region"].skin-dark > header:first-child button {
+  color: #00aac5;
+}
+
+.skin-dark section[role="region"] > header:first-child a:active,
+.skin-dark section[role="region"] > header:first-child button:active,
+.skin-dark section[role="region"] > header:first-child a:hover,
+.skin-dark section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-dark > header:first-child a:active,
+section[role="region"].skin-dark > header:first-child button:active,
+section[role="region"].skin-dark > header:first-child a:hover,
+section[role="region"].skin-dark > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.4);
+}
+
+.skin-dark section[role="region"] > header:first-child a:focus,
+.skin-dark section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-dark > header:first-child a:focus,
+section[role="region"].skin-dark > header:first-child button:focus {
+  background-color: transparent;
+}
+
+section[role="region"].skin-dark header h2,
+.skin-dark > section[role="region"] header h2 {
+  background-color: #2c353b;
+  color: #fff;
+  border: none;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: organic
+  .skin-organic will override default values
+----------------------------------------------------------------- */
+
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child {
+  color: #868692;
+  background-color: #f4f4f4;
+}
+
+section[role="region"].skin-organic > header:first-child h1,
+.skin-organic section[role="region"] > header:first-child h1 {
+  color: #868692;
+}
+
+section[role="region"].skin-organic > header:first-child a,
+section[role="region"].skin-organic > header:first-child button,
+.skin-organic section[role="region"] > header:first-child a,
+.skin-organic section[role="region"] > header:first-child button {
+  color: #00aac5;
+}
+
+section[role="region"].skin-organic > header:first-child a:focus,
+section[role="region"].skin-organic > header:first-child button:focus,
+.skin-organic section[role="region"] > header:first-child a:focus,
+.skin-organic section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/organic/left.png") 1x, url("headers/images/icons/organic/left@1.5x.png") 1.5x, url("headers/images/icons/organic/left@2x.png") 2x, url("headers/images/icons/organic/left@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/organic/right.png") 1x, url("headers/images/icons/organic/right@1.5x.png") 1.5x, url("headers/images/icons/organic/right@2x.png") 2x, url("headers/images/icons/organic/right@2.25x.png") 2.25x);
+}
+
+section[role="region"].skin-organic > header:first-child .icon-close,
+.skin-organic section[role="region"] > header:first-child .icon-close {
+  background-image: image-set(url("headers/images/icons/organic/close.png") 1x, url("headers/images/icons/organic/close@1.5x.png") 1.5x, url("headers/images/icons/organic/close@2x.png") 2x, url("headers/images/icons/organic/close@2.25x.png") 2.25x);
+}
+
+section[role="region"].skin-organic > header:first-child .icon-add,
+.skin-organic section[role="region"] > header:first-child .icon-add {
+  background-image: image-set(url("headers/images/icons/organic/add.png") 1x, url("headers/images/icons/organic/add@1.5x.png") 1.5x, url("headers/images/icons/organic/add@2x.png") 2x, url("headers/images/icons/organic/add@2.25x.png") 2.25x);
+}
+
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/organic/edit.png") 1x, url("headers/images/icons/organic/edit@1.5x.png") 1.5x, url("headers/images/icons/organic/edit@2x.png") 2x, url("headers/images/icons/organic/edit@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/organic/edit-rtl.png") 1x, url("headers/images/icons/organic/edit-rtl@1.5x.png") 1.5x, url("headers/images/icons/organic/edit-rtl@2x.png") 2x, url("headers/images/icons/organic/edit-rtl@2.25x.png") 2.25x);
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"].skin-organic header h2,
+.skin-organic section[role="region"] header h2 {
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+  border: none;
+}