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/default_theme.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/default_theme.gaiamobile.org/shared/style/contacts/contacts_buttons.css

@@ -0,0 +1,170 @@
+/* Hidden elements */
+.hide, [data-template] {
+  display: none !important;
+}
+
+li .icon-call:before {
+  background-image: image-set(url("/shared/style/contacts/images/call.png") 1x, url("/shared/style/contacts/images/call@1.5x.png") 1.5x, url("/shared/style/contacts/images/call@2x.png") 2x, url("/shared/style/contacts/images/call@2.25x.png") 2.25x) !important;
+}
+
+li button.icon-message:before {
+  background-image: image-set(url("/shared/style/contacts/images/sms.png") 1x, url("/shared/style/contacts/images/sms@1.5x.png") 1.5x, url("/shared/style/contacts/images/sms@2x.png") 2x, url("/shared/style/contacts/images/sms@2.25x.png") 2.25x) !important;
+}
+
+li button.send-sms {
+  width: 0;
+}
+li button.icon-email:before {
+  background-image: image-set(url("/shared/style/contacts/images/mail.png") 1x, url("/shared/style/contacts/images/mail@1.5x.png") 1.5x, url("/shared/style/contacts/images/mail@2x.png") 2x, url("/shared/style/contacts/images/mail@2.25x.png") 2.25x) !important;
+} 
+
+.has-preferred-sim .button.icon-call {
+  display: flex;
+  align-items: center;
+  padding: 0 1.2rem;
+}
+
+.has-preferred-sim .button.icon-call b {
+  position: unset;
+  order: 1;
+  flex: 1 1 auto;
+}
+
+.has-preferred-sim .activity.icon-call:before {
+  margin-top: 0;
+  background-size: 3rem !important;
+  position: unset;
+  order: 2;
+  flex: 0 0 auto;
+}
+
+.call-action .js-sim-indication {
+  display: none;
+  font-size: 1.3rem;
+  color: #5F5F5F;
+  font-style: normal;
+  line-height: 4rem;
+  height: 4rem;
+  text-align: end;
+  margin: 0;
+  background: image-set(url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png") 1x, url("/shared/elements/gaia_sim_picker/images/long-tap-indicator@1.5x.png") 1.5x, url("/shared/elements/gaia_sim_picker/images/long-tap-indicator@2x.png") 2x) no-repeat right bottom 0.2rem / 1.4rem 1rem;
+  order: 3;
+}
+
+.has-preferred-sim .call-action .js-sim-indication {
+  display: block;
+}
+
+#sim-picker {
+  text-align: start;
+}
+
+#contact-detail h2 {
+  display: flex;
+  margin: 0 1.5rem 0.2rem;
+  text-transform: uppercase;
+  font-size: 1.8rem;
+  color: #4997a7;
+  font-weight: normal;
+}
+
+#contact-detail .carrier {
+  font-size: 1.4rem;
+  color: #5f5f5f;
+  text-transform: none;
+}
+
+/* LAYOUT */
+/* ITEM: The smallest complete structure; */
+.item {
+  display: block;
+  overflow: hidden;
+}
+
+#contact-detail .item {
+  display: flex;
+}
+
+.item-media {
+  float: left;
+  -moz-margin-end: 1rem;
+}
+
+.item-media.pull-right {
+  -moz-margin-start: 1rem;
+  -moz-margin-end: 0;
+}
+
+.item-media.pull-right .activity {
+  -moz-padding-end: 3rem;
+}
+
+.item-body {
+  display: table;
+}
+
+.item-body-exp {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#contact-detail .item-body-exp {
+  flex-grow: 1;
+}
+
+/* PULLS: Float an element to the desired position; */
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+li .activity > b {
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  position: absolute;
+  left: 1.5rem;
+  right: 3rem;
+  top: 1rem;
+  bottom: 0;
+}
+
+.remark {
+  color: #339999 !important;
+}
+
+.remark-missed {
+  color: #CC0000 !important;
+}
+
+/* RTL View */
+html[dir="rtl"] .call-action .js-sim-indication {
+  background-position: left bottom 0.2rem;
+}
+
+html[dir="rtl"] .item-media {
+  float: right;
+}
+
+html[dir="rtl"] .pull-left {
+  float: right;
+}
+
+html[dir="rtl"] .pull-right {
+  float: left;
+}
+
+html[dir="rtl"] li .activity > b {
+  left: 3rem;
+  right: 1.5rem;
+}
+
+html[dir="rtl"] li .icon-call {
+  text-align: right;
+}

overrides/default_theme.gaiamobile.org/shared/style/dialer/keypad.css

@@ -0,0 +1,370 @@
+/*
+ * The code is being shared between system/emergency-call/js/keypad.js
+ * and dialer/js/keypad.js. Be sure to update both files when you commit!
+ *
+ * BiDi note: keypads are always displayed in LTR (hardware legacy).
+ * This stylesheet must *NOT* be mirrored for RTL.
+ */
+
+.reset-button {
+  border: 0;
+  background: none;
+}
+
+.reset-button::-moz-focus-inner {
+  border: 0;
+  outline: none;
+}
+
+#phone-number-view-container {
+  width: 100%;
+  height: 28%;
+  background: var(--header-background);
+  text-align: center;
+  display: flex;
+  font-weight: 300;
+  overflow: hidden;
+}
+
+#phone-number-view-container .phone-number-view-wrapper-input {
+  width: 100%;
+  margin-bottom: 4.5rem;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem 0 2rem;
+}
+
+#phone-number-view-container.keypad-visible {
+  height: calc(100% - 34.5rem);
+  visibility: hidden;
+}
+
+#phone-number-view {
+  font-size: 4.1rem;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  background: transparent;
+  color: var(--header-color);
+  text-align: left;
+  cursor: none;
+  padding: 0;
+  pointer-events: auto;
+  -moz-user-select: text;
+}
+
+#fake-phone-number-view {
+  position: absolute;
+  left: 2rem;
+  line-height: 0;
+  visibility: hidden;
+}
+
+#keypad-delete {
+  margin-bottom: 4.5rem;
+  padding: 0 2.5rem 0 0;
+  visibility: hidden;
+  text-align: right;
+}
+
+#keypad-delete::before {
+  content: "";
+  background: image-set(url("keypad/images/keypad/actionicon_dialer_delete.png") 1x, url("keypad/images/keypad/actionicon_dialer_delete@1.5x.png") 1.5x, url("keypad/images/keypad/actionicon_dialer_delete@2x.png") 2x, url("keypad/images/keypad/actionicon_dialer_delete@2.25x.png") 2.25x) no-repeat;
+  width: 3rem;
+  height: 2rem;
+  display: inline-block;
+  background-size: 100%;
+}
+
+#keypad-delete:active {
+  opacity: 0.6;
+}
+
+#keyboard-container {
+  height: 72%;
+  padding: 0 1rem;
+}
+
+#keypad {
+  width: 100%;
+  height: 80%;
+  display: table;
+  table-layout: fixed;
+}
+
+.keypad-row {
+  display: table-row;
+}
+
+.keypad-key {
+  display: table-cell;
+  padding: 1.3rem 0 0 2rem;
+  box-sizing: border-box;
+  height: 20%;
+  vertical-align: middle;
+  color: #333;
+  font-weight: 300;
+  font-size: 5rem;
+  line-height: 1rem;
+  overflow: hidden;
+  text-align: left;
+}
+
+.keypad-key span {
+  width: 1.5rem;
+  display: inline-block;
+  overflow: visible;
+}
+
+.keypad-key em {
+  display: inline-block;
+  font-weight: 300;
+  font-size: 1.5rem;
+  color: #038282;
+  font-style: normal;
+  width: 4.5rem;
+  overflow: visible;
+  text-align: left;
+}
+
+.keypad-key.active {
+  background: #94eee9;
+  color: #fff;
+}
+
+.keypad-key * {
+  pointer-events: none;
+}
+
+#keypad-delete * {
+  pointer-events: none;
+}
+
+.keypad-key .font-size-plus {
+  font-size: 2rem;
+}
+
+.keypad-subicon {
+  background-repeat: no-repeat;
+  background-position: center bottom;
+
+  -moz-user-select: none;
+  pointer-events: none;
+
+  display: inline-block;
+  width: 3rem;
+  height: 2rem;
+}
+
+.voicemail {
+  background-image: image-set(url("keypad/images/keypad/actionicon_dialer_voicemail.png") 1x, url("keypad/images/keypad/actionicon_dialer_voicemail@1.5x.png") 1.5x, url("keypad/images/keypad/actionicon_dialer_voicemail@2x.png") 2x, url("keypad/images/keypad/actionicon_dialer_voicemail@2.25x.png") 2.25x);
+  background-size: 3rem;
+  background-position: -0.4rem -0.1rem;
+}
+
+.asterisk {
+  width: 4rem;
+  margin-top: 1rem;
+  margin-left: 0.2rem;
+  overflow: visible;
+}
+
+.sharp {
+  font-size: 4.5rem;
+  width: 4rem;
+  line-height: 0;
+  margin-top: -0.5rem;
+  margin-left: 0.2rem;
+  overflow: visible;
+}
+
+#keypad-callbar {
+  height: 20%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  border-bottom: 0;
+  border-left: 0;
+  box-sizing: border-box;
+}
+
+.keypad-callbar-button {
+  position: relative;
+  width: 9rem;
+  background: #e7e7e7;
+  background-size: auto 100%;
+  border-radius: 2rem;
+  overflow: hidden;
+  height: 4rem;
+  text-align: center;
+}
+
+.keypad-callbar-button.cancel {
+  background: #575757;
+  line-height: 4rem;
+  font-size: 1.8rem;
+  font-style: italic;
+}
+
+.keypad-callbar-button.cancel:active {
+  background: #9ef2e7;
+}
+
+#keypad-callbar-call-action {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  align-items: center;
+  flex-direction: row-reverse;
+  background-image: image-set(url("keypad/images/keypad/actionicon_activecall_pickup.png") 1x, url("keypad/images/keypad/actionicon_activecall_pickup@1.5x.png") 1.5x, url("keypad/images/keypad/actionicon_activecall_pickup@2x.png") 2x, url("keypad/images/keypad/actionicon_activecall_pickup@2.25x.png") 2.25x);
+  background-color: #00adad;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 4rem 4rem;
+  border-radius: 2rem;
+  margin-inline-start: 1rem;
+  height: 4rem;
+}
+
+#keypad-callbar-call-action:active {
+  background-color: #94eee9;
+}
+
+.icon-add-contact::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: image-set(url("keypad/images/keypad/actionicon_activecall_addcontact_40x80.png") 1x, url("keypad/images/keypad/actionicon_activecall_addcontact_40x80@1.5x.png") 1.5x, url("keypad/images/keypad/actionicon_activecall_addcontact_40x80@2x.png") 2x, url("keypad/images/keypad/actionicon_activecall_addcontact_40x80@2.25x.png") 2.25x);
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: 4rem 8rem;
+}
+
+/* we won't do anything on click but this prevents fluffing/rendering issues */
+.icon-add-contact:disabled {
+  pointer-events: all;
+}
+
+.icon-add-contact:disabled::before {
+  opacity: 0.4;
+}
+
+.icon-add-contact:not(:disabled):active::before {
+  background-position: center -4rem;
+}
+
+.js-sim-indication {
+  display: none;
+  font-size: 1.3rem;
+  text-align: right;
+  margin-right: 0.6rem;
+  color: #fff;
+}
+
+.has-preferred-sim .js-sim-indication {
+  display: initial;
+}
+
+.has-preferred-sim #keypad-callbar-call-action:after {
+  content: "";
+  position: absolute;
+  width: 1.4rem;
+  height: 1rem;
+  bottom: 0;
+  right: 1.7rem;
+  background-image: image-set(url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png") 1x, url("/shared/elements/gaia_sim_picker/images/long-tap-indicator@1.5x.png") 1.5x, url("/shared/elements/gaia_sim_picker/images/long-tap-indicator@2x.png") 2x);
+  background-repeat: no-repeat;
+  background-size: 1.4rem 1rem;
+}
+
+#keypad-hidebar {
+  border: 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  height: 7.5rem;
+}
+
+.kh__button {
+  width: 5rem;
+  height: 5rem;
+  background: #ded9d6;
+  border: none;
+  border-radius: 100%;
+  margin-top: 1rem;
+  position: relative;
+}
+
+.kh__button::before {
+  content: "";
+
+  position: absolute;
+  top: .5rem;
+  left: .5rem;
+  width: 4rem;
+  height: 4rem;
+
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: cover;
+}
+
+.kh__button:active::before {
+  background-position: 0 -4rem;
+}
+
+.kh__button:active {
+  background-color: #9ef2e7;
+}
+
+.kh__button.active-state::before {
+  background-position: 0 -8rem;
+}
+
+.kh__button--mute::before {
+  background-image: image-set(url("keypad/images/keypad/actionicon_activecall_mute.png") 1x, url("keypad/images/keypad/actionicon_activecall_mute@1.5x.png") 1.5x, url("keypad/images/keypad/actionicon_activecall_mute@2x.png") 2x, url("keypad/images/keypad/actionicon_activecall_mute@2.25x.png") 2.25x);
+}
+
+.kh__button--hide::before {
+  background-image: image-set(url("keypad/images/keypad/actionicon_activecall_dismisskeyboard.png") 1x, url("keypad/images/keypad/actionicon_activecall_dismisskeyboard@1.5x.png") 1.5x, url("keypad/images/keypad/actionicon_activecall_dismisskeyboard@2x.png") 2x, url("keypad/images/keypad/actionicon_activecall_dismisskeyboard@2.25x.png") 2.25x);
+}
+
+.kh__call-end-button {
+  width: 6.5rem;
+  height: 6.5rem;
+  background: #e00;
+  border: none;
+  border-radius: 100%;
+  position: relative;
+}
+
+.kh__call-end-button::before {
+  content: "";
+
+  position: absolute;
+  top: 1.1rem;
+  left: 1.2rem;
+  width: 4rem;
+  height: 4rem;
+
+  background-image: image-set(url("keypad/images/actionicon_activecall_hangup.png") 1x, url("keypad/images/actionicon_activecall_hangup@1.5x.png") 1.5x, url("keypad/images/actionicon_activecall_hangup@2x.png") 2x, url("keypad/images/actionicon_activecall_hangup@2.25x.png") 2.25x);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: cover;
+}
+
+.kh__call-end-button:active::before {
+  background-position: 1.2rem 6rem;
+}
+
+.phone-number-font {
+  color: #fff;
+}
+
+.full-height {
+  height: 100%;
+}

overrides/default_theme.gaiamobile.org/shared/style/drawer.css

@@ -0,0 +1,254 @@
+/* ----------------------------------
+* Drawer
+* ---------------------------------- */
+
+/* Main region */
+section[role="region"] {
+  width: 100%;
+  transition: all 0.25s ease;
+  position: relative;
+  z-index: 100;
+}
+
+section[role="region"]:target {
+  transform: translateX(80%);
+}
+
+/* Hide anchor to change target */
+section[role="region"] > header:first-child > a:first-of-type {
+  display: none;
+}
+section[role="region"]:target > header:first-child > a:first-of-type {
+  display: block;
+}
+section[role="region"] > header:first-child > a:last-of-type {
+  display: block;
+}
+section[role="region"]:target > header:first-child > a:last-of-type {
+  display: none;
+}
+
+
+/* Sidebar */
+section[data-type="sidebar"] {
+  position: absolute;
+  width: 80%;
+  background: url(drawer/images/ui/pattern.png) repeat;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+/* Sidebar header */
+section[data-type="sidebar"] > header {
+  position: relative;
+  z-index: 10;
+  height: 5rem;
+  color: #fff;
+  background: url(drawer/images/ui/header.png) repeat-x left bottom / 100% auto;
+}
+
+section[data-type="sidebar"] > header:after {
+  content: "";
+  height: 0.3rem;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: image-set(url("drawer/images/ui/shadow_header.png") 1x, url("drawer/images/ui/shadow_header@1.5x.png") 1.5x, url("drawer/images/ui/shadow_header@2x.png") 2x) repeat-x left top;
+  background-size: auto 100%;
+}
+
+section[data-type="sidebar"] > header h1 {
+  font-size: 2.2rem;
+  line-height: 4.8rem;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0 0 0 3rem;
+  height: 100%
+}
+
+section[data-type="sidebar"] > header h1 em {
+  font-weight: bold;
+  font-size: 1.5rem;
+  line-height: 1em;
+}
+
+/* Generic set of actions in toolbar */
+section[data-type="sidebar"] > header menu[type="toolbar"] {
+  height: 100%;
+  float: right;
+}
+
+section[data-type="sidebar"] > header menu[type="toolbar"] a,
+section[data-type="sidebar"] > header menu[type="toolbar"] button {
+  height: 4.9rem;
+  line-height: 4.9rem;
+  float: left;
+  background: none;
+  padding: 0 1.75rem;
+  -moz-box-sizing: border-box;
+  min-width: 5rem;
+  text-align: center;
+}
+
+section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
+section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
+  background: url(drawer/images/ui/separator.png) no-repeat left center / auto 3.1rem;
+}
+
+section[data-type="sidebar"] > header menu[type="toolbar"] {
+  padding: 0;
+  margin: 0;
+}
+
+section[data-type="sidebar"] > header a,
+section[data-type="sidebar"] > header button {
+  border: none;
+  background: none;
+  padding: 0;
+  overflow: hidden;
+  font-weight: 600;
+  font-size: 1.4rem;
+  line-height: 1.1em;
+  color: #fff;
+}
+
+section[data-type="sidebar"] > header a:first-letter,
+section[data-type="sidebar"] > header button:first-letter {
+  text-transform: uppercase;
+}
+
+/* Icon definitions */
+section[data-type="sidebar"] > header .icon {
+  display: inline-block;
+  width: 3rem;
+  height: 4.9rem;
+  margin: 0 -1rem;
+  background: transparent no-repeat center center / 100% auto;
+  font-size: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+section[data-type="sidebar"]:after {
+  content: "";
+  width: 1rem;
+  background: image-set(url("drawer/images/ui/shadow.png") 1x, url("drawer/images/ui/shadow@1.5x.png") 1.5x, url("drawer/images/ui/shadow@2x.png") 2x) right top repeat-y;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+}
+
+section[data-type="sidebar"] > nav {
+  overflow-y: auto;
+  max-height: 100%;
+  margin-right: -0.8rem;
+}
+
+section[data-type="sidebar"] > nav > h2 {
+  font-weight: bold;
+  font-size: 1.4rem;
+  line-height: 3.3rem;
+  text-indent: 3rem;
+  color: #fff;
+  background: url(drawer/images/ui/pattern_subheader.png) repeat left top;
+  border-bottom: 0.1rem solid #596068;
+  margin: 0;
+  padding-right: 0.8rem;
+}
+
+section[data-type="sidebar"] [role="toolbar"] {
+  position: absolute;
+}
+
+section[data-type="sidebar"] > nav > ul {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+section[data-type="sidebar"] > nav > ul > li {
+  color: #fff;
+  list-style: none;
+  transition: background 0.2s ease;
+}
+
+section[data-type="sidebar"] > nav > ul > li:active {
+  background: #00ABCC;
+}
+
+section[data-type="sidebar"] > nav > ul > li > a {
+  text-decoration: none;
+  color: #fff;
+  font-size: 1.6rem;
+  line-height: 4.35rem;
+  border-bottom: 0.1rem solid #596068;
+  text-indent: 3rem;
+  padding-right: 0.8rem;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* RTL View */
+
+html[dir="rtl"] section[role="region"]:target {
+  transform: translateX(-80%);
+}
+
+/* Sidebar */
+html[dir="rtl"] section[data-type="sidebar"] {
+  left: auto;
+  right: 0;
+}
+
+/* Sidebar header */
+html[dir="rtl"] section[data-type="sidebar"] > header {
+  background-position: right bottom;
+}
+
+html[dir="rtl"] section[data-type="sidebar"] > header:after {
+  background-position: right top;
+}
+
+html[dir="rtl"] section[data-type="sidebar"] > header h1 {
+  text-align: right;
+  margin: 0 3rem 0 0;
+}
+
+/* Generic set of actions in toolbar */
+html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] {
+  float: left;
+}
+
+html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] a,
+html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] button {
+  float: left;
+}
+
+html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
+html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
+  background-position: right center;
+}
+
+html[dir="rtl"] section[data-type="sidebar"]:after {
+  background-image: image-set(url("drawer/images/ui/shadow_rtl.png") 1x, url("drawer/images/ui/shadow_rtl@1.5x.png") 1.5x, url("drawer/images/ui/shadow_rtl@2x.png") 2x);
+  background-position: left top;
+  left: 0;
+  right: auto;
+}
+html[dir="rtl"] section[data-type="sidebar"] > nav > h2 {
+  background-position: right top;
+  padding-left: 0.8rem;
+  padding-right: unset;
+}

overrides/default_theme.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;
+}