Publish Vulpes Preview 15 sources for desktop, Android and Tundra

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

gaia/apps/settings/style/achievements.css

@@ -0,0 +1,38 @@
+/**
+ * Achievements
+ */
+
+.achievements-item {
+  opacity: 0.4;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.5rem 0;
+}
+
+.achievements-item.rewarded {
+  opacity: 1;
+}
+
+.achievements-item .icon {
+  width: 5rem;
+  height: 5rem;
+  flex-shrink: 0;
+}
+
+.achievements-item:not(.rewarded) .icon {
+  filter: grayscale(1);
+}
+
+.achievements-item .details {
+  display: flex;
+  flex-direction: column;
+  white-space: normal;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.achievements-item .details .description {
+  font-size: 1.4rem;
+  color: #505859;
+}

gaia/apps/settings/style/apps.css

@@ -0,0 +1,778 @@
+/**
+ * Application Permissions
+ */
+#appPermissions ul li img,
+.my-home-screens li img {
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  offset-inline-start: 1.6rem;
+  top: 1.5rem;
+}
+
+#addon-detail-toggle,
+#appPermissions ul li > a {
+  padding-inline-start: 7.4rem;
+}
+
+#addons ul li img {
+  position: absolute;
+  width: 5rem;
+  height: 5rem;
+  offset-inline-start: 0.6rem;
+  top: 0.5rem;
+}
+
+#addons ul li > a {
+  padding-inline-start: 8.4rem;
+}
+
+#addons .get-more-addons {
+  padding-inline-start: 3rem;
+}
+
+.uninstall-app {
+  margin: 1rem 1.5rem 0;
+  padding: 1.5rem 0 0.5rem;
+  border-top: 0.1rem solid #E6E6E3;
+}
+
+#appPermissions .cb-alert {
+  position: fixed;
+}
+
+/**
+ * App permissions details panel
+ */
+.developer-infos > a > small {
+  color: #00e;
+}
+
+/*
+ * styles for the addons and addon-details panels
+ */
+.addon-paragraph {
+  font-size: 1.7rem;
+  line-height: 2.3rem;
+  font-weight: 400;
+  padding: 0.5rem 1rem 1.5rem;
+  padding-inline-start: 1.5rem;
+  white-space: unset;
+}
+
+.addon-targets {
+  padding-bottom: 0.5rem;
+}
+
+/* For overriding the style from building block */
+ul li > label:not([for]).addon-details-info {
+  padding-inline-start: 8.1rem;
+  padding-inline-end: 5.9rem;
+  padding-top: 1rem;
+  width: calc(100% - 12.5rem);
+  display: block;
+}
+
+.addon-details-icon {
+  position: absolute;
+  width: 5rem;
+  height: 5rem;
+  offset-inline-start: 1.4rem;
+}
+
+.addon-details-version {
+  font-weight: bold;
+  padding-bottom: 0;
+  color: #858585;
+}
+
+.addon-details-name {
+  white-space: normal;
+  padding-top: 0.4rem;
+}
+
+.addon-obsolete {
+  background-color: #F0AD4E;
+  color: #FFF;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 0;
+}
+
+.addon-obsolete-icon {
+  padding-inline-start: 1.5rem;
+}
+
+.addon-obsolete-info {
+  font-size: 1.6rem;
+  white-space: normal;
+  padding: 1.5rem;
+}
+
+/******************************************************************************
+ * Wi-Fi settings
+ */
+
+/* three-state items: on|off|ready */
+
+ul[data-state="off"] ~ *,
+ul[data-state] li[data-state] {
+  display: none;
+}
+
+ul[data-state="on"]    li[data-state="on"],
+ul[data-state="off"]   li[data-state="off"],
+ul[data-state="ready"] li[data-state="ready"] {
+  display: block;
+}
+
+ul[data-state="ready"] li > a {
+  padding-inline-end: 6.2rem; /* 3rem (initial padding) + 3.2rem (wifi icon width) */
+}
+
+/******************************************************************************
+ * Wi-Fi authentication fields:
+ *   - hide password field on open networks
+ *   - hide identifier field on non-EAP networks
+ */
+
+section li.password,
+section li.password[hidden],
+section li.eap,
+section li.auth-phase2,
+section li.server-certificate,
+section li.server-certificate-description,
+section li.identity {
+  display: none;
+}
+
+section[data-security*="WEP"] li.password,
+section[data-security*="WPA"] li.password,
+section[data-security*="EAP"] li.eap,
+section[data-security*="EAP"] li.auth-phase2,
+section[data-security*="EAP"] li.server-certificate,
+section[data-security*="EAP"] li.server-certificate-description,
+section[data-security*="EAP"] li.identity {
+  display: inherit;
+}
+
+section li.password {
+  display: inherit; /*asf*/
+  height: 12rem;
+  padding-inline-end: 0;
+}
+
+section li.password > label {
+  height: 3rem;
+  min-height: 0;
+  margin-top: 0.5rem;
+  margin-inline-start: 0;
+}
+
+section li.password > label > span:after {
+  offset-inline-start: 0;
+  offset-inline-end: auto;
+  margin-inline-start: 0;
+}
+
+section li.password > label > span {
+  padding-inline-start: 3rem;
+  height: 3rem;
+  color: #848484;
+  font-size: 1.7rem;
+  line-height: 3rem;
+  margin-inline-end: 1.5rem;
+}
+
+section li.password > label:active {
+  background-color: transparent;
+  color: #848484;
+}
+
+section li.password > p {
+  padding: 0.5rem 1.5rem 0;
+  line-height: 3.3rem;
+}
+
+#pwd-auth {
+  -moz-user-focus: ignore;
+}
+
+section ul.operate-certificate {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: url(images/document_bg.png);
+}
+
+/******************************************************************************
+ * Call settings
+ */
+
+ #call .cw-alert .cw-alert-sub-p {
+   border-top: none;
+ }
+
+ #call .cw-alert .cw-alert-checkbox {
+   offset-inline-end: 0;
+   height: 2.7rem;
+   width: 100%;
+ }
+
+ #call li[aria-disabled="true"] .icon-dialog,
+ #call li[aria-disabled="true"] label {
+   opacity: 0.6;
+   pointer-events: none;
+ }
+
+ #call li[aria-disabled="true"] label > span {
+   color: #797e80;
+ }
+
+ /** Call Barring Settings *****************************************************/
+ #call-cbSettings span {
+   /* two lines instead of wrapped text */
+   white-space: normal;
+ }
+
+ /** Call barring password **/
+ #cb-passcode section {
+   padding: 0;
+ }
+ #cb-passcode-title {
+   border-top: 0;
+   border-bottom: 0.1rem solid #686868;
+   padding: 1.5rem 3.5rem;
+   margin-bottom: 2rem;
+   font-size: 1.7rem;
+ }
+ #cb-passcode-pseudo-input {
+   width: 80%;
+ }
+ #cb-passcode-def {
+   display: block;
+   border: 0;
+   padding-inline-start: 3.5rem;
+   line-height: 2rem;
+   font-size: 1.4rem;
+   font-weight: lighter;
+   color: #CBCBCB;
+ }
+
+ /** Call Barring Password Change
+   * copied from panels/screen_lock_passcode
+   * this should dissapear if we unify both screens
+   */
+ #call-barring-passcode-change .passcode-error {
+   clear: both;
+   display: none;
+   height: 4.2rem;
+   padding-inline-start: 3rem;
+   color: red;
+   font-size: 1.5rem;
+   line-height: 4.2rem;
+ }
+
+ #call-barring-passcode-change[data-passcode-status="error"] .passcode-error {
+   display: block;
+ }
+
+ .passcode-change div.passcode-overlay {
+   position: relative;
+ }
+
+ #call-barring-passcode-change label {
+   box-sizing: border-box;
+   display: block;
+   width: auto;
+   height: auto;
+   margin: 1.6rem 0 0.4rem;
+   padding: 0 2rem;
+   color: #000;
+   font-size: 1.8rem;
+ }
+
+ /**
+  * 1. Important required to override styles
+  *    inside <gaia-header> <style scoped>
+  *    Once we have ::content selector we
+  *    can drop the <style scoped> and this
+  *    !important won't be needed anymore.
+  */
+ #call-barring-passcode-change [data-mode] {
+   display: none !important; /* 1 */
+ }
+
+ #call-barring-passcode-change[data-mode="edit"] [data-mode*="edit"],
+ #call-barring-passcode-change[data-mode="new"]  [data-mode*="new"] {
+   display: block !important; /* 1 */
+ }
+
+ #call-barring-passcode-change #passcode-confirm {
+   opacity: 0.3;
+   pointer-events: none;
+ }
+
+ #call-barring-passcode-change[data-passcode-status="success"] #passcode-confirm {
+   opacity: 1;
+   pointer-events: auto;
+ }
+
+ .passcode-input {
+   z-index: -1;
+   position: absolute;
+   top: -5rem;
+   offset-inline-start: 0;
+ }
+
+ .passcode-container {
+   position: absolute;
+   z-index: 1;
+   width: 100%;
+   top: 0;
+   left: 0;
+   background: url(images/document-bg.png);
+ }
+
+ .passcode {
+   width: calc(100% - 2rem);
+   margin: 0 auto;
+   overflow: hidden;
+ }
+
+ .passcode-digit {
+   box-sizing: border-box;
+   position: relative;
+   float: left; /* BiDi-proof: passcodes are not mirrored */
+   width: calc(25% - 1rem);
+   height: 4rem;
+   margin: 0 0.5rem;
+   border: 0.1rem solid #c2c2c2;
+   text-align: center;
+   background-color: #fff;
+   border-radius: 0.3rem;
+ }
+
+ span.passcode-digit[data-dot]::before {
+   content: '';
+   display: block;
+   position: absolute;
+   width: 1.5rem;
+   height: 1.5rem;
+   background-color: #3e3b39;
+   border-radius: 0.75rem;
+   top: 50%;
+   left: 50%;             /* BiDi-proof: passcodes are not mirrored in RTL */
+   margin-left: -0.75rem; /* BiDi-proof: passcodes are not mirrored in RTL */
+   margin-top: -0.75rem;
+ }
+
+ /******************************************************************************
+  * APN settings
+  */
+
+ .apnSettings-custom {
+   font-style: italic;
+ }
+
+ .apnSettings-advanced {
+   padding-bottom: 1em;
+ }
+
+ .apn-item .name {
+  unicode-bidi: -moz-plaintext;
+}
+
+ /******************************************************************************
+  * Internet sharing (Wi-Fi HotSpot)
+  */
+
+ #hotspot ul #hotspot-settings-section > a span {
+   max-width: 100%;
+ }
+
+ /******************************************************************************
+  * Display settings
+  */
+
+
+  #screen-timeout {
+    height: auto !important;
+  }
+
+  #display li {
+    height: 6.2rem;
+  }
+  #display li:last-child {
+    border-bottom: none;
+  }
+
+  /******************************************************************************
+   * Sound settings
+   */
+
+  .manage-tones-button {
+    padding-inline-start: 3rem;
+  }
+
+  /******************************************************************************
+   * Volume & Brightness: min/max icons
+   */
+
+  ul li > label.range-icons:before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1.5rem);
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0 auto;
+    width: calc(100% - 2.3rem);
+    height: 3rem;
+    pointer-events: none;
+  }
+
+  ul li > label.range-icons span {
+    position: absolute;
+    top: 0;
+    offset-inline-start: 0;
+    height: 100%;
+    padding: 0;
+    margin: 0 1.5rem;
+    pointer-events: none;
+    color: #657073;
+    line-height: 6rem;
+  }
+
+  ul li > label.range-icons span:last-child {
+    offset-inline-start: auto;
+    offset-inline-end: 0;
+  }
+
+  ul li > label.range-icons.volume span {
+    line-height: 12rem;
+    margin: 0 1.6rem;
+  }
+
+  ul li.brightness-manual > label input[type="range"] {
+    width: calc(100% - 10.8rem);
+  }
+
+  li.brightness-manual div {
+    position: relative;
+    top: calc(50% - 1.5rem);
+    offset-inline-start: 5rem;
+    height: 3rem;
+    width: calc(100% - 10.7rem);
+  }
+
+  ul li > label.range-icons.volume input {
+    position: inherit;
+    margin-inline-start: 5.8rem;
+    width: calc(100% - 7.5rem);
+    opacity: 0;
+    transition: opacity .6s ease 0s;
+  }
+
+  /******************************************************************************
+   * Accessibility
+   */
+
+  #accessibility ul li > a.menu-item {
+    padding: 0 3rem;
+  }
+
+  /******************************************************************************
+   * SIM Toolkit
+   */
+
+  #icc .hiddenheader {
+    height: 0;
+    padding: 0;
+    background: none;
+  }
+
+  /**
+   * 1. !important required to override scoped
+   *    styles in <gaia-header>. When we have
+   *    ::content selector in the platform, this
+   *    shouldn't be requireed anymore.
+   */
+  #icc .hidden {
+    display: none !important; /* 1 */
+  }
+
+  /******************************************************************************
+   * Messaging
+   */
+  #messaging .simcards-container[hidden] {
+    display: none;
+  }
+
+  /******************************************************************************
+   * Date & Time
+   */
+
+  #dateTime ul.disabled p,
+  #dateTime ul.disabled a,
+  #dateTime .time-manual.disabled span {
+    color: #797e80;
+  }
+
+  #dateTime .time-manual span {
+    pointer-events: none;
+  }
+
+  #dateTime .time-manual input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    offset-inline-start: 0;
+    opacity: 0;
+  }
+
+  #dateTime .time-manual label {
+    min-height: 0;
+    height: 0;
+    display: block;
+  }
+
+  #dateTime .timeformat.disabled span {
+    pointer-events: none;
+  }
+
+  /******************************************************************************
+   * Improve Browser OS
+   */
+  #improveBrowserOS-chooseFeedback li,
+  #improveBrowserOS-sendFeedback li {
+    border: none;
+  }
+
+  #improveBrowserOS-sendFeedback li:first-child {
+    min-height: 3rem;
+  }
+
+  #improveBrowserOS .link-text {
+    white-space: nowrap;
+  }
+
+  ul li p.metrics-explain {
+    font-size: 1.35rem;
+    line-height: 1.8rem;
+    color: #949494;
+    margin: 0;
+    padding: 0;
+  }
+
+  #feedback-description {
+    display: block;
+    height: 10rem;
+    padding: 1rem 1rem 1.2rem;
+    resize: none;
+    white-space: normal;
+  }
+
+  #sendFeedback gaia-checkbox label {
+    offset-inline-start: 3rem;
+    offset-inline-end: auto;
+    top: 2rem;
+  }
+
+  .feedback-choose-face {
+    display: block;
+    background: url(images/feedback_faces.png);
+    width: 10rem;
+    min-height: 10rem;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    background-size: 20rem;
+  }
+
+  #feedback-mood {
+    text-align: center;
+  }
+
+  #feedback-mood li {
+    display: inline-block;
+    max-width: 11rem;
+  }
+
+  .feedback-face-caption {
+    overflow: visible;
+    white-space: normal;
+    line-height: 2.6rem;
+    padding-top: 1rem;
+    min-height: 6rem;
+    height: auto;
+  }
+
+  /* can be replaced by `float: inline-start` when bug 1122918 lands */
+  html[dir="ltr"] #feedback-happy { float: left; }
+  html[dir="rtl"] #feedback-happy { float: right; }
+
+  /* can be replaced by `float: inline-end` when bug 1122918 lands */
+  html[dir="ltr"] #feedback-sad { float: right; }
+  html[dir="rtl"] #feedback-sad { float: left; }
+
+  #feedback-happy .feedback-choose-face {
+    display: inline-block;
+    background-position: 0;
+  }
+
+  #feedback-sad .feedback-choose-face {
+    display: inline-block;
+    background-position: 100%;
+  }
+
+  .feedback-feel {
+    text-align: center;
+  }
+
+  #feedback-email.hidden {
+    display: none;
+  }
+
+  #feedback-send-btn {
+    text-align: center;
+  }
+
+  /******************************************************************************
+   * OS License
+   */
+
+  #obtain-sc,
+  #os-license {
+    width: 100%;
+    height: calc(100% - 5rem);
+    border: 0;
+  }
+
+  /******************************************************************************
+   * Help
+   */
+
+  #call-support-link, #online-support-link {
+    height: auto;
+  }
+
+  #help-call-support-numbers, #help-online-support-text {
+    display: block;
+    line-height: 3rem;
+    margin-bottom: 2rem;
+  }
+
+  #help-call-support-numbers a, #help-online-support-text a {
+    display: block;
+  }
+
+  #help[data-has-support-info] .no-support-info,
+  #help:not([data-has-support-info]) .support-info {
+    display: none;
+  }
+
+  /******************************************************************************
+   * Firefox Accounts
+   */
+
+  .fxa-logo {
+    background-image: url('images/fxa_logo.png');
+    background-repeat: no-repeat;
+    background-size: 16.4rem;
+    margin: 3rem auto 0;
+    width: 17rem;
+    height: 19.5rem;
+  }
+
+  #fxa-unverified .description {
+    padding-top: 1.5rem;
+  }
+
+  #fxa-unverified .description:before {
+    position: absolute;
+    content: "";
+    width: 7rem;
+    height: 7rem;
+    background-image: url('images/fxa_envelope.png');
+    background-repeat: no-repeat;
+    background-size: 7rem;
+  }
+
+  #fxa-unverified .disabled {
+    color: #ccc;
+  }
+
+  #fxa-unverified-text {
+    padding-top: 0.8rem;
+    margin-inline-start: 6rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /******************************************************************************
+   * Firefox Sync
+   */
+
+  .fxsync-intro {
+    background-image: url('images/fxsync_intro.png');
+    background-repeat: no-repeat;
+    background-size: 16.4rem;
+    margin: 3rem auto 0;
+    width: 17rem;
+    height: 21.5rem;
+  }
+
+  p.fxsync-warning {
+    background-image: url('images/fxsync_error.png');
+    background-repeat: no-repeat;
+    background-size: 2rem;
+    background-position: left center;
+    padding-inline-start: 3rem;
+    padding-top: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /******************************************************************************
+   * Developer and Developer HUD
+   *
+   * Override default behavior to let checkbox text wrap on multiple lines
+   */
+
+  #developer ul li > label > span,
+  #developer-hud ul li > label > span {
+    overflow: visible;
+    white-space: normal;
+    min-height: 6rem;
+    height: auto;
+    line-height: 2.3rem;
+    padding: 1.9rem 4rem 1.5rem;
+    padding-inline-start: 3rem;
+  }
+
+  /* Style components in developer panel to match existing styles. */
+  #developer ul li > gaia-checkbox,
+  #developer-hud ul li > gaia-checkbox {
+    padding: 1.5rem 0;
+  }
+
+  #developer-hud ul li > label > span.color-preview {
+    padding-inline-start: 5rem;
+  }
+
+  #developer-hud ul li.hud-separator {
+    border-top: 0.1rem solid #e6e6e3;
+  }
+
+  /******************************************************************************
+  * App Permissions
+  *
+  * Note: The reason why we need this style is because element.hidden will make
+  * the CSS specificity 0,0,1,0 (Yes, it is a pseudo class). And because our BB
+  * 's CSS specificity is much higher than this, we have to override it again
+  * to make sure it will display as hidden.
+  */
+  .clear-bookmarks-app[hidden] {
+    display: none;
+  }

gaia/apps/settings/style/developer_service_workers.css

@@ -0,0 +1,13 @@
+#service-workers-empty-section {
+  height: calc(100% - 5rem);
+  text-align: center;
+}
+
+#empty-text {
+  font-size: 1.8rem;
+  color: #1CABCB;
+}
+
+.hidden {
+  display: none
+}

gaia/apps/settings/style/dialog.css

@@ -0,0 +1,95 @@
+/* align according to the document direction rather than the content direction */
+html[dir="ltr"] section[role="region"].dialog [dir] { text-align: left; }
+html[dir="rtl"] section[role="region"].dialog [dir] { text-align: right; }
+
+.settings-dialog-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.5;
+  z-index: 2;
+}
+
+/**
+ * Base style for settings dialog, need to override original transform
+ */
+html[dir="ltr"] section[role="region"].dialog,
+html[dir="rtl"] section[role="region"].dialog {
+  /**
+   * IMPORTANT:
+   *
+   * we have to unset all predefined transform properties here, so we can
+   * easily customize our own animation and would not get influenced by
+   * previously defined transform.
+   */
+  transform: unset;
+  z-index: 3;
+}
+
+body[data-ready="true"] section[role="region"].dialog {
+  transition: transform var(--transition-duration),
+              visibility var(--transition-duration),
+              opacity var(--transition-duration);
+}
+
+/**
+ * Bottom-up style
+ */
+section[role="region"].dialog.bottom-up {
+  transform: translateY(100%);
+}
+
+section[role="region"].dialog.bottom-up.current {
+  transform: translateY(0);
+}
+
+/**
+ * zoom-in
+ */
+section[role="region"].dialog.zoom-in {
+  transform: scale(0);
+}
+
+section[role="region"].dialog.zoom-in.current {
+  transform: scale(1);
+}
+
+/**
+ * zoom-in-80
+ */
+section[role="region"].dialog.zoom-in-80 {
+  transform: translate(-50%, -50%) scale(0);
+  top: 50%;
+  left: 50%; /* BiDi-proof */
+  width: 80%;
+  height: 80%;
+}
+
+section[role="region"].dialog.zoom-in-80.current {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/**
+ * zoom-out
+ */
+section[role="region"].dialog.zoom-out {
+  transform: scale(1);
+}
+
+section[role="region"].dialog.zoom-out.current {
+  transform: scale(0);
+}
+
+/**
+ * fade
+ */
+section[role="region"].dialog.fade {
+  opacity: 0;
+}
+
+section[role="region"].dialog.fade.current {
+  opacity: 1;
+}

gaia/apps/settings/style/downloads.css

@@ -0,0 +1,241 @@
+#download-list-empty {
+  height: calc(100% - 5rem);
+  text-align: center;
+}
+
+#dle-vertical {
+  height: 100%;
+  display: inline-block;
+  width: 0;
+  vertical-align: middle;
+}
+
+#dle-text {
+  font-size: 1.8rem;
+  color: #1CABCB;
+}
+
+#downloadList {
+  font-weight: 400;
+  padding: 0;
+  overflow: hidden;
+  height: calc(100% - 5rem);
+}
+
+
+/*
+ * Edit mode styles
+ */
+
+#downloads gaia-checkbox {
+  position: absolute;
+  top: 1.2rem;
+  /* Important is necessary to override scoped component styles */
+  width: 2.8rem !important;
+  display: none !important;
+}
+
+/**
+ * 1. Important required to override styles
+ *    inside <gaia-header> <style scoped>
+ *    Once we have ::content selector we
+ *    can drop the <style scoped> and this
+ *    !important won't be needed anymore.
+ */
+#downloads-edit-header {
+  display: none !important; /* 1 */
+}
+
+#downloads.edit #downloads-edit-header {
+  display: block !important; /* 1 */
+}
+
+#downloads.edit #downloads-header {
+  display: none !important; /* 1 */
+}
+
+#downloads.edit aside {
+  display: none;
+}
+
+#downloads.edit ul {
+  height: calc(100% - 5rem);
+}
+
+#downloads.edit gaia-checkbox label {
+  z-index: 100;
+}
+
+#downloads.edit gaia-checkbox:active label {
+  background: none;
+}
+
+#downloads.edit gaia-checkbox {
+  display: block !important;
+}
+
+#downloads.edit #downloadList li {
+  pointer-events: all;
+  margin: 0 1.5rem;
+}
+
+/* End of the styles while editing*/
+
+#downloadList ul{
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+}
+
+#downloadList strong {
+  font-weight: 500;
+}
+
+/* Text */
+.fileName {
+  padding: 1rem 6rem;
+  box-sizing: border-box;
+}
+html[dir="ltr"] .fileName { padding-left: 3.5rem; }
+html[dir="rtl"] .fileName { padding-right: 3.5rem; }
+
+.info {
+  font-size: 1.2rem;
+  padding: 0 6rem;
+  padding-inline-start: 3.5rem;
+  box-sizing: border-box;
+}
+
+/* List items */
+#downloadList li {
+  margin: 0;
+  position: relative;
+  pointer-events: none;
+}
+
+#downloadList li * {
+  pointer-events: none;
+}
+
+#downloadList ul li progress {
+  width: 100%;
+}
+
+/* Graphic content */
+#downloadList aside {
+  margin: 1.75rem 0.5rem 0 0;
+  background-position: center;
+  position: absolute;
+}
+
+#downloadList .edit-check {
+  margin: 0;
+  position: absolute;
+  width: 3rem;
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  padding-top: 1rem;
+}
+
+#downloadList aside.pack-end {
+  padding: 1.4rem;
+  margin: 0;
+  pointer-events: all;
+  offset-inline-end: 0;
+}
+
+/* Progress */
+
+#downloadList ul > li progress[value] {
+  width: calc(100% - 0.2rem);
+  height: 0.5rem;
+  margin: 0;
+  background: #e7e7e7;
+  border: 0.1rem solid #b6b6b6;
+}
+
+#downloadList ul > li progress[value]::-moz-progress-bar {
+  margin: .1rem;
+  height: calc(100% - 0.2rem);
+  border-radius: 0.2rem;
+  background-color: #01c5ed;
+}
+
+#downloadList progress[value].pack-activity {
+  background-image: url(images/activity.png);
+  background-repeat: repeat;
+  background-size: auto 100%;
+  animation: 0.5s move infinite steps(15);
+}
+
+#downloadList ul > li[data-state="stopped"] progress,
+#downloadList ul > li[data-state="succeeded"] progress {
+  display: none;
+}
+
+#downloadList li[data-state="succeeded"] {
+  pointer-events: all;
+}
+
+
+/*
+ * Conditional Download Item style
+ */
+
+/* Error icon */
+#downloadList ul > li[data-state="downloading"] .download-status,
+#downloadList ul > li[data-state="succeeded"] .download-status,
+#downloadList ul > li[data-state="stopped"] .download-status {
+  display: none;
+}
+#downloadList ul > li[data-state="failed"] .download-status {
+  width: 3rem;
+  height: 3rem;
+  background: url('images/download_exclamation.png') no-repeat center center;
+  offset-inline-start: 0.2rem;
+}
+
+/* Progress Bar */
+#downloadList ul > li[data-state="failed"] progress{
+  display: none;
+}
+
+/* Action in the element. */
+
+#downloadList aside.pack-end {
+  width: 2.6rem;
+  height: 2.3rem;
+  padding: 0;
+  margin: 1.2rem;
+  pointer-events: all;
+  offset-inline-end: 0;
+}
+
+#downloadList ul > li[data-state="downloading"] .pack-end {
+  background-image: url('images/download_close.png');
+  background-repeat: no-repeat;
+  background-size: 2.2rem;
+}
+
+#downloadList ul > li[data-state="stopped"] .pack-end,
+#downloadList ul > li[data-state="failed"] .pack-end {
+  background-image: url('images/download_refresh.png');
+  background-repeat: no-repeat;
+  background-size: 2.5rem 2.2rem;
+}
+
+html[dir="ltr"] #downloadList ul > li[data-state="downloading"] .pack-end,
+html[dir="ltr"] #downloadList ul > li[data-state="stopped"] .pack-end,
+html[dir="ltr"] #downloadList ul > li[data-state="failed"] .pack-end {
+  background-position: left center;
+}
+html[dir="rtl"] #downloadList ul > li[data-state="downloading"] .pack-end,
+html[dir="rtl"] #downloadList ul > li[data-state="stopped"] .pack-end,
+html[dir="rtl"] #downloadList ul > li[data-state="failed"] .pack-end {
+  background-position: right center;
+}
+
+#downloadList ul > li[data-state="succeeded"] .pack-end {
+  display: none;
+}

gaia/apps/settings/style/homescreens.css

@@ -0,0 +1,58 @@
+#homescreens section[data-type="list"] header:last-of-type {
+  margin-top: 0.5rem;
+}
+
+.current-homescreen {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  white-space: nowrap;
+}
+
+#homescreen-details .addon-details-info {
+  padding-bottom: 0;
+  padding-inline-end: 0;
+  width: calc(100% - 6.7rem);
+}
+
+#homescreen-details .url a {
+  pointer-events: auto;
+}
+
+#homescreen-details .title {
+  padding-top: 0.4rem;
+}
+
+#homescreen-details .name {
+  padding-top: 0;
+}
+
+#homescreen-details .version,
+#homescreen-details .description,
+#homescreen-details .url {
+  font-size: 1.7rem;
+  line-height: 2.3rem;
+  font-weight: 400;
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 1rem;
+  white-space: unset;
+}
+
+#homescreen-details .description,
+#homescreen-details .url {
+  padding-top: 0;
+}
+
+#homescreen-details .url {
+  padding-bottom: 1.2rem;
+  line-height: unset;
+}
+
+.uninstall-homescreen-container {
+  border-top: 0.1rem solid #E6E6E3;
+  margin: 0.6rem 1.5rem 0;
+}
+
+.uninstall-homescreen-container li {
+  margin: 0;
+}

gaia/apps/settings/style/icc.css

@@ -0,0 +1,28 @@
+#icc-entries[data-custom-icon] li > a {
+  padding-inline-start: 5.5rem;
+}
+
+#icc-stk-list[data-custom-icon] li > a {
+  padding-inline-start: 7rem;
+}
+
+#icc-entries[data-custom-icon] li > span,
+#icc-stk-list[data-custom-icon] li > span {
+  display: flex;
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  offset-inline-start: 1.5rem;
+  top: calc(50% - 1.5rem);
+  box-sizing: content-box;
+  padding: 0;
+}
+
+#icc-stk-list[data-custom-icon] li > span {
+  offset-inline-start: 3rem;
+}
+
+#icc-entries[data-custom-icon] li > span > canvas,
+#icc-stk-list[data-custom-icon] li > span > canvas {
+  margin: auto;
+}

gaia/apps/settings/style/icons.css

@@ -0,0 +1,279 @@
+
+/******************************************************************************
+ * Setting icons
+ */
+
+.menu-item {
+  position: static;
+}
+
+.menu-item[data-icon] {
+  padding-inline-start: 5.5rem;
+}
+
+a.menu-item:after {
+  font-family: "gaia-icons";
+  position: absolute;
+  top: 0;
+  offset-inline-end: 0;
+  font-size: 25px;
+  line-height: 6rem;
+  color: #a5acae;
+}
+html[dir="ltr"] a.menu-item:after { content: "right-light"; }
+html[dir="rtl"] a.menu-item:after { content: "left-light"; }
+
+a.menu-item:active:after {
+  color: #91aab0;
+}
+
+gaia-switch .menu-item[data-icon] {
+  -moz-padding-start: 4rem;
+}
+
+gaia-switch .menu-item[data-icon] ~ details {
+  -moz-padding-start: 4rem;
+}
+
+.menu-item::before {
+  position: absolute;
+  offset-inline-start: 0;
+  top: 50%;
+  width: 3rem;
+  text-align: center;
+  line-height: 0;
+  color: #657073;
+}
+
+label > .menu-item::before {
+  offset-inline-start: 1.5rem;
+}
+
+label > .menu-item + small {
+  margin: 0;
+  margin-inline-start: 4rem;
+  padding: 0;
+}
+
+.menu-item-desc {
+  offset-inline-start: 4rem;
+}
+
+#suggestions-desc {
+  offset-inline-start: 0;
+}
+
+#menuItem-suggestions {
+  padding-inline-start: 1.5rem;
+}
+
+#menuItem-suggestions::before {
+  background: none;
+}
+
+
+/******************************************************************************
+ * Wi-Fi icons
+ */
+
+aside.pack-end {
+  position: absolute;
+  z-index: 2;
+  offset-inline-end: 1.5rem;
+  margin: 0;
+  margin-inline-start: 0.5rem;
+  text-align: end;
+}
+aside.wifi-icon {
+  background-repeat: no-repeat;
+  background-position: 0 center;
+  background-size: 16rem;
+  width: 3.2rem;
+  height: 5.6rem;
+}
+
+/*
+ * States of Wifi signal
+ */
+aside.wifi-signal       { background-image: url(images/wifi_disconnected_sprite.png);}
+aside.connected         { background-image: url(images/wifi_connected_sprite.png);}
+aside.secured           { background-image: url(images/wifi_disconnected_locked_sprite.png);}
+aside.secured.connected { background-image: url(images/wifi_connected_locked_sprite.png);}
+aside.level-0 { background-position:     0    center;}
+aside.level-1 { background-position:  -3.2rem center;}
+aside.level-2 { background-position:  -6.4rem center;}
+aside.level-3 { background-position:  -9.6rem center;}
+aside.level-4 { background-position: -12.8rem center;}
+
+aside.secured.connecting { background-image: url(images/wifi_connected_locked_sprite.png);}
+aside.connecting {
+  background-image: url(images/wifi_connected_sprite.png);
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: step-start;
+  animation-name: wifi-signal;
+}
+@keyframes wifi-signal {
+ 0%     { background-position:     0    center; }
+ 25%    { background-position:  -3.2rem center; }
+ 50%    { background-position:  -6.4rem center; }
+ 75%    { background-position:  -9.6rem center; }
+ 100%   { background-position: -12.8rem center; }
+}
+
+
+/******************************************************************************
+ * Call Settings icons
+ */
+
+#menuItem-callWaiting span.cw-alert-icon::after {
+  content: '';
+  position: absolute;
+  z-index: 10;
+  top: 1.2rem;
+  offset-inline-end: 0;
+  width: 6rem;
+  height: 3rem;
+  background: #F4F4F4 url("images/call_waiting_disabled.png") no-repeat center/3rem;
+}
+
+
+/******************************************************************************
+ * Bluetooth devices
+ */
+
+.bluetooth-device {
+  background-repeat: no-repeat;
+  background-position: right 3rem top 50%; /* same position as for Wi-Fi signal levels */
+  padding-inline-end: 2rem;
+}
+
+.bluetooth-device:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  background: url(images/bluetooth_sprite.png) no-repeat 3rem 3rem / 39rem;
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin-top: -1.5rem;
+}
+
+/* device icons */
+.bluetooth-type-audio-card:before {
+  background-position: 0 0;
+}
+
+.bluetooth-type-audio-input-microphone:before {
+  background-position: -3rem 0;
+}
+
+.bluetooth-type-battery:before {
+  background-position: -6rem 0;
+}
+
+.bluetooth-type-camera-photo:before {
+  background-position: -9rem 0;
+}
+
+.bluetooth-type-camera-video:before {
+  background-position: -12rem 0;
+}
+
+.bluetooth-type-camera-web:before {
+  background-position: -15rem 0;
+}
+
+.bluetooth-type-computer:before {
+  background-position: -18rem 0;
+}
+
+.bluetooth-type-drive-harddisk:before {
+  background-position: -21rem 0;
+}
+
+.bluetooth-type-drive-optical:before {
+  background-position: -24rem 0;
+}
+
+.bluetooth-type-drive-removable-media:before {
+  background-position: -27rem 0;
+}
+
+.bluetooth-type-input-gaming:before {
+  background-position: -30rem 0;
+}
+
+.bluetooth-type-input-keyboard:before {
+  background-position: -33rem 0;
+}
+
+.bluetooth-type-input-mouse:before {
+  background-position: -36rem 0;
+}
+
+.bluetooth-type-input-tablet:before {
+  background-position: 0 -3rem;
+}
+
+.bluetooth-type-media-flash:before {
+  background-position: -3rem -3rem;
+}
+
+.bluetooth-type-media-floppy:before {
+  background-position: -6rem -3rem;
+}
+
+.bluetooth-type-media-optical:before {
+  background-position: -9rem -3rem;
+}
+
+.bluetooth-type-media-tape:before {
+  background-position: -12rem -3rem;
+}
+
+.bluetooth-type-modem:before {
+  background-position: -15rem -3rem;
+}
+
+.bluetooth-type-multimedia-player:before {
+  background-position: -18rem -3rem;
+}
+
+.bluetooth-type-network-wired:before {
+  background-position: -21rem -3rem;
+}
+
+.bluetooth-type-network-wireless:before {
+  background-position: -24rem -3rem;
+}
+
+.bluetooth-type-pda:before,
+.bluetooth-type-phone:before {
+  background-position: -27rem -3rem;
+}
+
+.bluetooth-type-printer:before {
+  background-position: -30rem -3rem;
+}
+
+.bluetooth-type-scanner:before {
+  background-position: -33rem -3rem;
+}
+
+.bluetooth-type-video-display:before {
+  background-position: -36rem -3rem;
+}
+
+
+/******************************************************************************
+ * Privacy icons
+ */
+
+.privacy-browserOS:before {
+  background-position: 0 0;
+}
+
+.privacy-marketPlace:before {
+  background-position: -6.4rem 0;
+}

gaia/apps/settings/style/lists.css

@@ -0,0 +1,434 @@
+/**
+ * Table View
+ * line height = 6rem, border included
+ */
+
+ul {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  list-style: none;
+}
+
+ul li {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0 1.5rem;
+  border-top: 0.1rem solid #e6e6e3;
+  color: #000;
+}
+
+ul li:first-child {
+  border-top: none;
+}
+
+/* Provide additional margin around web components to match spacing with legacy components */
+ul li > gaia-radio,
+/* Switches in the root panel ignore the extra margin due to having icon style applied. */
+section:not(#root) ul li > gaia-switch,
+ul li > gaia-checkbox:not(.inline) {
+  margin-inline-start: 1.5rem;
+  /* The !important is necessary to override gaia-swtich scoped style. */
+  width: calc(100% - 1.5rem) !important;
+}
+
+ul+ul li:first-child {
+  border-top: 0.1rem solid #e6e6e3;
+}
+
+ul li.sound-setting {
+  min-height: 7.9rem;
+}
+
+ul li label:not([for]) {
+  background: none;
+}
+
+ul li > a,
+ul li > span,
+ul li > small,
+ul li > label > span,
+ul li > label > small {
+  text-decoration: none;
+  outline: 0;
+  color: #000;
+  box-sizing: border-box;
+  font-size: 1.9rem;
+  padding: 0 3rem;
+  margin: 0 -1.5rem;
+}
+
+ul li,
+ul li > a,
+ul li > label {
+  min-height: 6rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+ul li > a,
+ul li > label {
+  min-height: 6rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+ul li[hidden] {
+  display: none;
+}
+
+ul li > a > span {
+  pointer-events: none;
+}
+
+ul li.active a,
+ul li.active span,
+ul li:not([aria-disabled="true"]) > small + a:active,
+ul li:not([aria-disabled="true"]) > a:active,
+ul li:not([aria-disabled="true"]) > small + a:focus,
+ul li:not([aria-disabled="true"]) > a:focus {
+  background-color: #b2f2ff;
+  color: #222;
+}
+
+ul li[aria-disabled="true"] > a,
+ul li[aria-disabled="true"] > p {
+  color: #797e80;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+ul > li > progress {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+ul > li > progress + span {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+  padding-inline-start: 1rem;
+  color: #505b5b;
+  font-size: 1.4rem;
+  line-height: 6rem;
+}
+
+/* description + value on the same line */
+ul li .info-item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+ul li .info-item .info-item-title {
+  order: 1;
+  flex: 1 0 auto;
+}
+
+ul li .info-item .info-item-space {
+  order: 2;
+  flex: 0 0 2rem;
+}
+
+ul li .info-item .info-item-content {
+  order: 3;
+  flex: 1 1 auto;
+  color: #505859;
+  text-align: end;
+}
+
+/* backward compatible */
+ul li > a:not(.info-item) span:nth-of-type(2):not(.button) {
+  position: absolute;
+  offset-inline-end: 1.5rem;
+  color: #505859;
+  line-height: 6rem;
+  height: 6rem;
+  top: 0;
+}
+
+/* text ellipsis */
+ul li > *,
+ul li > label > *,
+ul li > a > * {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* sublines */
+ul li > small,
+ul li > label > small,
+ul li > a > small {
+  display: block;
+  font-size: 1.4rem;
+  color: #505859;
+  /* click/tap events should be caught by the <a> element below the <small> */
+  pointer-events: none;
+}
+
+small.multiline > span {
+  display: block;
+}
+
+ul li > label {
+  font-size: 1.9rem;
+  line-height: 1.9rem;
+  font-weight: 400;
+  margin: 0;
+}
+
+ul li > label ~ input {
+  margin-bottom: 1.5rem;
+}
+
+/* color previews */
+ul li > gaia-checkbox.color-preview:before {
+  height: 2rem;
+  width: 2rem;
+  content: "";
+  margin: -1.1rem 0 0;
+  margin-inline-start: -1.8rem;
+  top: 50%;
+  position: absolute;
+}
+
+ul li > gaia-checkbox.color-preview label {
+  margin-inline-start: 1rem;
+}
+
+ul.disabled li > gaia-checkbox.color-preview:before {
+  opacity: 0.4;
+}
+
+ul li > gaia-checkbox.warning-counter:before {
+  background-color: orange;
+}
+
+ul li > gaia-checkbox.error-counter:before {
+  background-color: red;
+}
+
+ul li > gaia-checkbox.security-counter:before {
+  background-color: black;
+}
+
+ul li > gaia-checkbox.reflow-counter:before {
+  background-color: purple;
+}
+
+ul li > gaia-checkbox.jank-monitor:before {
+  background-color: cornflowerblue;
+}
+
+ul li > gaia-checkbox.fps-monitor:before {
+  background-color: fuchsia;
+}
+
+ul li > gaia-checkbox.ttl-monitor:before {
+  background-color: darkgreen;
+}
+
+ul li > gaia-checkbox.uss-monitor:before {
+  background-color: dimgrey;
+}
+
+ul li > gaia-checkbox.memory-monitor:before {
+  background-color: lightslategrey;
+}
+
+ul li > gaia-checkbox.memory-item:before {
+  background-color: lightslategrey;
+  height: 2rem;
+  width: 2rem;
+  margin: -1.1rem 0 0;
+  margin-inline-start: -1.8rem;
+}
+
+
+/******************************************************************************
+ * Boolean buttons
+ */
+
+ul li button {
+  display: inline-block;
+  margin: 1rem 0;
+  white-space: normal;
+}
+
+/******************************************************************************
+ * Boolean inputs
+ */
+
+/* custom styles for boolean inputs (see /shared/style/switches.css) */
+ul li label {
+  text-transform: none;
+}
+
+ul li > label:not([for]) {
+  margin-inline-start: -1.5rem;
+  margin-inline-end: -1.5rem;
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 1.5rem;
+  width: 100%;
+  height: calc(100% - 1rem);
+  min-height: 5rem;
+  overflow: visible;
+  display: flex;
+}
+
+ul li > label:not([for]) > span {
+  line-height: normal;
+  height: auto;
+}
+
+
+/******************************************************************************
+ * Split panel
+ */
+ul li.pack-split .name:active {
+  background-color: #B2F2FF;
+}
+
+ul li.pack-split .name {
+  position: relative;
+  width: calc(100% - 9rem);
+}
+
+ul li.pack-split:after {
+  content: '';
+  position: absolute;
+  background-color: #E6E6E3;
+  offset-inline-end: 7.5rem;
+  width: 0.1rem;
+  height: calc(100% - 2rem);
+  top: 1rem;
+}
+
+ul li.pack-split > span {
+  background-color: transparent;
+}
+
+
+/******************************************************************************
+ * Field inputs
+ */
+
+ul li p {
+  font-size: 1.9rem;
+  line-height: 1.9rem;
+  font-weight: 400;
+  margin: 0;
+  padding: 1.5rem 1.5rem 1rem;
+}
+
+ul li p + label:not([for]) {
+  top: 2.5rem;
+  height: calc(100% - 2.5rem);
+}
+
+
+/******************************************************************************
+ * Range inputs
+ */
+
+input[type=range] {
+  -moz-appearance: none;
+  border: none;
+  background: none;
+}
+
+input[type=range]::-moz-focus-outer {
+  border: 0;
+}
+
+ul li > label input[type="range"] {
+  height: 3rem;
+  width: calc(100% - 3rem);
+  margin: 1.5rem;
+}
+
+input[type=range]::-moz-range-track {
+  height: 0.1rem;
+  background-color: #7e7e7e;
+}
+
+input[type=range]::-moz-range-progress {
+  height: 0.3rem;
+  background-color: #01c5ed;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 2.8rem;
+  height: 2.8rem;
+  border: solid 0.1rem transparent;
+  border-radius: 3rem;
+  transition: border 0.15s ease;
+  box-sizing: border-box;
+  background: url(images/range_thumb.png) no-repeat 50% 50%;
+  background-size: 2.8rem 2.8rem;
+}
+
+input[type=range]:active::-moz-range-thumb {
+  border: solid 0.4rem #01c5ed;
+}
+
+ul li.sound-setting > label input[type="range"] {
+  margin: 0 auto;
+  width: calc(100% - 3rem);
+  offset-inline-start: 1.5rem;
+}
+
+ul li.brightness-manual > label input[type="range"] {
+  margin: 0 auto;
+  width: calc(100% - 10rem);
+  display: inline;
+}
+
+/******************************************************************************
+ * Progress, Meter
+ */
+
+ul > li progress[value] {
+  display: block;
+  width: calc(100% - 3rem);
+  height: 3rem;
+  margin: 3rem auto;
+  background: #e7e7e7;
+  border: 0.1rem solid #b6b6b6;
+  border-radius: 0.3rem;
+}
+
+ul > li progress[value]::-moz-progress-bar {
+  margin: 1px;
+  height: calc(100% - 0.2rem);
+  border-radius: 0.2rem;
+  background-color: #82c72c;
+}
+
+
+/******************************************************************************
+ * Definition lists
+ */
+
+dl > * {
+  font-size: 1.7rem;
+}
+
+dl dt {
+  padding-inline-start: 3rem;
+  font-weight: 500;
+  border-bottom: 0.1rem solid black;
+}
+
+dl dd {
+  margin: 0;
+  padding: 1rem 3rem;
+  border-bottom: 0.1rem solid #e6e6e3; /* same as "ul li" */
+}

gaia/apps/settings/style/screen_lock.css

@@ -0,0 +1,143 @@
+/**
+ * BiDi note: as a passcode is a number, it should *NOT* be mirrored in RTL.
+ */
+
+#screenLock li.lockscreen-enabled,
+#screenLock li.passcode-enabled {
+  display: none;
+}
+
+#screenLock[data-lockscreen-enabled="true"] li.lockscreen-enabled,
+#screenLock[data-lockscreen-enabled="true"][data-passcode-enabled="true"] li.passcode-enabled {
+  display: block;
+}
+
+#screenLock-passcode .passcode-error {
+  clear: both;
+  display: none;
+  height: 4.2rem;
+  padding-inline-start: 3rem;
+  color: red;
+  font-size: 1.5rem;
+  line-height: 4.2rem;
+}
+
+#screenLock-passcode[data-passcode-status="error"][data-mode="confirm"] div.passcode-error[data-type="incorrect"],
+#screenLock-passcode[data-passcode-status="error"][data-mode="confirmLock"] div.passcode-error[data-type="incorrect"],
+#screenLock-passcode[data-passcode-status="error"][data-mode="edit"] div.passcode-error[data-type="incorrect"] {
+  display: block;
+}
+
+#screenLock-passcode[data-passcode-status="error"][data-mode="new"] div.passcode-error[data-type="mismatch"],
+#screenLock-passcode[data-passcode-status="error"][data-mode="create"] div.passcode-error[data-type="mismatch"] {
+  display: block;
+}
+
+#screenLock-passcode[data-passcode-status="error"] menu[data-mode="new"] {
+  display: none;
+}
+
+#screenLock-passcode label {
+  box-sizing: border-box;
+  display: block;
+  width: auto;
+  height: auto;
+  margin: 1.6rem 0 0.4rem;
+  padding: 0 2rem;
+  color: #000;
+  font-size: 1.8rem;
+}
+
+/**
+ * 1. Important required to override styles
+ *    inside <gaia-header> <style scoped>
+ *    Once we have ::content selector we
+ *    can drop the <style scoped> and this
+ *    !important won't be needed anymore.
+ */
+
+#screenLock-passcode [data-mode] {
+  display: none !important; /* 1 */
+}
+
+#screenLock-passcode menu[type="toolbar"] {
+  width: 9rem;
+}
+
+#screenLock-passcode menu[type="toolbar"] button {
+  width: 100%;
+}
+
+/**
+ * 1. Important required to override styles
+ *    inside <gaia-header> <style scoped>
+ *    Once we have ::content selector we
+ *    can drop the <style scoped> and this
+ *    !important won't be needed anymore.
+ */
+
+#screenLock-passcode[data-mode="create"]  [data-mode*="create"],
+#screenLock-passcode[data-mode="confirm"] [data-mode*="confirm"],
+#screenLock-passcode[data-mode="confirmLock"] [data-mode*="confirmLock"],
+#screenLock-passcode[data-mode="edit"]    [data-mode*="edit"],
+#screenLock-passcode[data-mode="new"]     [data-mode*="new"] {
+  display: block !important; /* 1 */
+}
+
+#passcode-confirm {
+  display: none;
+}
+
+#screenLock-passcode[data-status="success"] #passcode-confirm {
+  display: inherit;
+}
+
+.passcode-input {
+  z-index: -1;
+  position: absolute;
+  top: -5rem;
+  left: 0; /* BiDi-proof: passcodes are not mirrored in RTL */
+}
+
+.passcode-container {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: url(images/document-bg.png);
+}
+
+.passcode {
+  width: calc(100% - 2rem);
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.passcode-digit {
+  box-sizing: border-box;
+  position: relative;
+  float: left; /* BiDi-proof: passcodes are not mirrored in RTL */
+  width: calc(25% - 1rem);
+  height: 4rem;
+  margin: 0 0.5rem;
+  border: 0.1rem solid #c2c2c2;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 0.3rem;
+}
+
+span.passcode-digit[data-dot]::before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #3e3b39;
+  border-radius: 0.75rem;
+  top: 50%;
+  left: 50%;             /* BiDi-proof: passcodes are not mirrored in RTL */
+  margin-left: -0.75rem; /* BiDi-proof: passcodes are not mirrored in RTL */
+  margin-top: -0.75rem;
+}
+

gaia/apps/settings/style/settings.css

@@ -0,0 +1,451 @@
+/**
+ * Settings style & layout
+ * note: `lists.css' must be loaded before this stylesheet
+ */
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 10px;
+  overflow: hidden;
+}
+
+/**
+ * Disable selection by default except for input, text area, and elements with
+ * "contenteditable".
+ */
+* {
+  -moz-user-select: none;
+}
+
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+textarea,
+[contenteditable="true"] {
+  -moz-user-select: text;
+}
+
+/******************************************************************************
+ * Setting panels: full-size <section role="region"> blocks
+ */
+
+/* Setting panels: full-size <section role="region"> blocks */
+section[role="region"] {
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+
+/**
+ * Panel targets -- transitions
+ * the `.previous', '.current' classes are set by settings.js
+ */
+
+/**
+ * bug 976299 non-visible regions take an extra layer
+ * in the layer tree. Remove them to improve scroll performance
+ * in exchange for a reflow on section transitions.
+ *
+ * bug 976630 non-visible regions should have a visibility of hidden
+ * for accessibility purposes. Removing the visibility transition
+ * in hidden->visible avoids flashing.
+ */
+
+section[role="region"],
+section[role="region"].previous {
+  visibility: hidden;
+}
+
+section[role="region"].current {
+  visibility: visible;
+}
+
+html[dir="ltr"] section[role="region"] { transform: translateX(+100%); }
+html[dir="rtl"] section[role="region"] { transform: translateX(-100%); }
+
+html[dir="ltr"] section[role="region"].previous { transform: translateX(-100%); }
+html[dir="rtl"] section[role="region"].previous { transform: translateX(+100%); }
+
+html[dir="ltr"] section[role="region"].current { transform: translateX(0); }
+html[dir="rtl"] section[role="region"].current { transform: translateX(0); }
+
+/**
+ * We have to make icon-back as a `x` icon
+ * Notice, we have to differenate with section[data-dialog] to make sure
+ * we won't mess up the style together.
+ */
+.skin-organic section.dialog > header:first-child .icon.icon-back {
+  background-image: url(/shared/style/headers/images/icons/organic/close.png);
+}
+
+section.dialog > header:first-child .icon.icon-back {
+  background-image: url(/shared/style/headers/images/icons/close.png);
+}
+
+/**
+ * Only use the animation when ready
+ */
+body[data-ready="true"] section[role="region"] {
+  transition: transform .4s ease, visibility .4s;
+}
+
+body[data-ready="true"] section[role="region"].current {
+  transition: transform .4s ease;
+}
+
+/**
+ * Headers should not scroll with the rest of the page, except for #root.
+ */
+section[role="region"] > header {
+  position: absolute;
+}
+
+section[role="region"] > div {
+  position: absolute;
+  top: 5rem;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 5rem);
+  overflow-y: scroll;
+  will-change: scroll-position;
+}
+
+/**
+ * The back button icon shouldn't be
+ * the same color as other icons.
+ */
+
+gaia-header a:first-child,
+gaia-header button:first-child,
+gaia-header [data-icon="close"] {
+  color: var(--header-action-button-color) !important;
+}
+
+/*
+ * Need this for scrollable background layer
+ * optimization in gecko. See Bug 950250
+ */
+section[role="region"],
+section[role="region"] > div > ul {
+  background-color: #f4f4f4;
+}
+
+/**
+ * 1. Localized text in buttons
+ *    should be hidden.
+ */
+
+gaia-header [data-icon] > span {
+  font-size: 0; /* 1 */
+}
+
+ul li > a.menu-item > * {
+  overflow: unset;
+  text-overflow: unset;
+  white-space: initial;
+}
+
+/******************************************************************************
+ * Frame section
+ */
+#frame iframe {
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/******************************************************************************
+ * Activities section = "root" and filtered by category
+ */
+
+/**
+ * 1. !important required to override scoped
+ *    styles in <gaia-header>
+ */
+
+#activityDoneButton {
+  display: none !important; /* 1 */
+}
+
+body[data-filter-by] #activityDoneButton {
+  display: inherit !important; /* 1 */
+}
+
+body[data-filter-by] #root > div header,
+body[data-filter-by] #root > div li {
+  display: none;
+}
+
+/* These rules show the "Network & Connectivity" header and items related to
+   connectivity (airplane mode, Wi-Fi and cellular & data) */
+body[data-filter-by="connectivity"] #root > div [data-category="connectivity"] {
+  display: block;
+}
+
+/******************************************************************************
+ * Explanation texts
+ */
+
+.explanation {
+  padding: 0.5rem 3rem;
+  font-style: italic;
+  font-size: 1.4rem;
+  color: #505859;
+}
+
+.description {
+  font-size: 1.7rem;
+  line-height: 2.3rem;
+  white-space: normal;
+  -moz-hyphens: auto;
+}
+
+.description p,
+.description a,
+.description label {
+  font-size: 1.7rem;
+  line-height: 2.3rem;
+  white-space: normal;
+}
+
+.description label {
+    padding: 0;
+}
+
+.description label span {
+  height: auto;
+  min-height: 6rem;
+  padding-top: 1.2rem;
+  padding-bottom: 1.2rem;
+  font-size: 1.7rem;
+  line-height: 2.3rem;
+  white-space: normal;
+}
+
+.description small {
+  font-size: 1.7rem;
+  color: #505859;
+}
+
+.link-text {
+  font-size: 1.4rem;
+  color: #35679A;
+  text-decoration: underline;
+}
+
+.link-text:active {
+  background-color: #c1d6e6;
+}
+
+.hint label span {
+  top: 2.9rem !important;
+}
+
+.hint span {
+  line-height: 6rem;
+}
+
+.hint .explanation {
+  font-style: normal;
+  position: relative;
+  margin-top: -2rem;
+  padding: 0.5rem 4rem 1.3rem;
+  padding-inline-start: 1.5rem;
+  white-space: normal;
+}
+
+.hint > gaia-switch ~ .explanation,
+.hint > label:not([for]) ~ .explanation {
+  padding-inline-end: 8rem;
+}
+
+.hint .explanation[hidden] {
+  display: none;
+}
+
+/******************************************************************************
+ * Disabled items
+ */
+
+.disabled a,
+.disabled p,
+.disabled h2,
+.disabled label,
+.disabled select,
+gaia-checkbox[disabled],
+gaia-radio[disabled],
+gaia-switch[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/******************************************************************************
+* Media Storage settings
+*/
+
+#mediaStorage .space-stackedbar {
+  background-color: #E7E7E7;
+  border: solid 0.1rem #A6A6A6;
+  border-radius: 0.3rem;
+  display: inline-block;
+  height: 3rem;
+  margin: 0.8rem 5%;
+  padding: 0.1rem;
+  width: 90%;
+}
+
+#mediaStorage .space-stackedbar .stackedbar-item {
+  display: inline-block;
+  height: 3rem;
+}
+
+#mediaStorage .space-stackedbar .color-music,
+#mediaStorage .color-music .stackedbar-color-label {
+  background-color: #82C72C;
+}
+
+#mediaStorage .space-stackedbar .color-pictures,
+#mediaStorage .color-pictures .stackedbar-color-label {
+  background-color: #00CAF2;
+}
+
+#mediaStorage .space-stackedbar .color-videos,
+#mediaStorage .color-videos .stackedbar-color-label {
+  background-color: #2295D3;
+}
+
+#mediaStorage .space-stackedbar .color-free,
+#mediaStorage .color-free .stackedbar-color-label {
+  background-color: #E7E7E7;
+}
+
+#mediaStorage .color-free .stackedbar-color-label {
+  border: solid 0.1rem #A6A6A6;
+}
+
+#mediaStorage .color-music .stackedbar-color-label,
+#mediaStorage .color-pictures .stackedbar-color-label,
+#mediaStorage .color-videos .stackedbar-color-label,
+#mediaStorage .color-free .stackedbar-color-label {
+  border-radius: 0.3rem;
+}
+
+#mediaStorage .stackedbar-color-label {
+  display: inline-block;
+  height: 2rem;
+  offset-inline-start: 1.5rem;
+  padding: 0;
+  position: absolute;
+  top: 2.1rem;
+  width: 2rem;
+}
+
+#mediaStorage .stackedbar-color-label + a {
+  padding-inline-start: 4rem;
+}
+
+/******************************************************************************
+ * Call settings
+ */
+
+/* three-state items: on|off|unknown */
+#menuItem-callWaiting[data-state="on"] span,
+#menuItem-callWaiting[data-state="off"] span {
+  display: inherit;
+}
+
+#menuItem-callWaiting span.cw-alert-icon,
+#menuItem-callWaiting[data-state="on"] span.cw-alert-icon,
+#menuItem-callWaiting[data-state="off"] span.cw-alert-icon {
+  display: none;
+}
+
+#menuItem-callWaiting[data-state="unknown"] label {
+  pointer-events: none;
+  opacity: 0.3;
+}
+
+#menuItem-callWaiting[data-state="unknown"] span.cw-alert-icon {
+  display: inherit;
+}
+
+/******************************************************************************
+ * Wallpaper snapshot
+ */
+
+#wallpaper-header { border: none; }
+
+.wallpaper {
+  position: relative;
+  overflow: hidden;
+  height: 17rem;
+}
+
+.wallpaper .wallpaper-button {
+  position: absolute;
+  border: none;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  offset-inline-start: 0;
+  margin: 0;
+  background: none;
+}
+
+.wallpaper .wallpaper-button > span {
+  position: absolute;
+  offset-inline-end: 0;
+  bottom: 0;
+  width: 4.6rem;
+  height: 4.6rem;
+  margin: 1.5rem;
+  font-size: 21px;
+  line-height: 4.6rem;
+  text-align: center;
+  background: rgba(0,0,0,0.5);
+  border-radius: 50%;
+  color: #fff;
+}
+
+.wallpaper .wallpaper-button:active > span {
+ background: #00C7EF;
+}
+
+.wallpaper .wallpaper-button > span:before {
+  font-size: 40px;
+  margin-inline-end: -2px;
+}
+
+.wallpaper .wallpaper-preview {
+  margin-top: -10rem;
+  position: absolute;
+  width: 100%;
+}
+
+/******************************************************************************
+ * Toaster
+ */
+section[role="status"] {
+  transition: opacity .6s ease 0s;
+  opacity: 0;
+}
+
+section[role="status"].toast-visible {
+  opacity: 1;
+}

gaia/apps/settings/style/settings_large.css

@@ -0,0 +1,410 @@
+/**
+ * style & layout for tablet (two-column)
+ */
+@media (min-width: 768px) and (orientation: portrait) {
+
+  section[role="region"]:not(#root).current {
+    z-index: 2;
+  }
+
+  /**
+   * media storage
+   */
+  section[role="region"]#mediaStorage .color-music.stackedbar-item,
+  section[role="region"]#mediaStorage .color-music > .stackedbar-color-label {
+    background-color: #82c82d;
+    border: 0.3rem #82c82d;
+  }
+
+  section[role="region"]#mediaStorage .color-pictures.stackedbar-item,
+  section[role="region"]#mediaStorage .color-pictures > .stackedbar-color-label {
+    background-color: #efd600;
+    border: 0.3rem #efd600;
+  }
+
+  section[role="region"]#mediaStorage .color-videos.stackedbar-item,
+  section[role="region"]#mediaStorage .color-videos > .stackedbar-color-label {
+    background-color: #00aacc;
+    border: 0.3rem #00aacc;
+  }
+
+  section[role="region"]#mediaStorage .color-free.stackedbar-item,
+  section[role="region"]#mediaStorage .color-free > .stackedbar-color-label {
+    background-color: #858585;
+    border: 0.3rem #858585;
+  }
+}
+
+@media (min-width: 768px) and (orientation: landscape) {
+
+  section[role="region"]#root {
+    transform: none;
+    transition: none;
+    offset-inline-start: 0;
+    width: 40rem;
+    visibility: visible;
+  }
+
+  section[role="region"],
+  section[role="region"].previous,
+  section[role="region"].current {
+    transition: none;
+    offset-inline-start: 40rem;
+    width: calc(100% - 40rem);
+  }
+
+  section[role="region"]#root header {
+    background: url("images/ui/tablet_menu_header.png") repeat-x scroll 0 0 / auto 100% transparent;
+  }
+
+  section[role="region"]#root header:after {
+    background-image: url("images/ui/tablet_separator.png");
+    background-repeat: no-repeat;
+    background-size: 0.2rem;
+    background-color: transparent;
+    height: 95%;
+    top: 0;
+  }
+  html[dir="ltr"] section[role="region"]#root header:after { background-position: right; }
+  html[dir="rtl"] section[role="region"]#root header:after { background-position: left; }
+
+  /* no back button at first level */
+  section[role="region"]:not([id*='-']) header > a {
+    display: none;
+  }
+
+  /**
+   * lists
+   */
+  section[role="region"] header h2 {
+    padding-inline-start: 2rem;
+  }
+
+  section[role="region"]#root ul li {
+    margin: 0 1.5rem 0 3.5rem;
+  }
+
+  section[role="region"]:not([id='root']) ul li {
+    margin: 0 4rem;
+    padding: 0;
+  }
+
+  section[role="region"]#root ul li > a.menu-item {
+    margin: 0 -3.5rem;
+    padding-inline-start: 7.5rem;
+  }
+
+  section[role="region"]#root .menu-item::before {
+    offset-inline-start: calc(-2.5rem / 2);
+  }
+
+  section[role="region"]:not([id='root']) ul li > gaia-checkbox > label {
+    padding-inline-start: 1.5rem;
+  }
+
+  section[role="region"]:not([id='root']) ul li > a,
+  section[role="region"]:not([id='root']) ul li > span:not(.button),
+  section[role="region"]:not([id='root']) ul li > p {
+    margin: 0 -4rem;
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  section[role="region"]:not([id='root']) ul li > progress + span:not(.button) {
+    padding-inline-start: 6rem;
+  }
+
+  section[role="region"]:not([id='root']) ul:not([class='wifi-availableNetworks']) li > progress {
+    width: 100%;
+  }
+
+  section[role="region"]:not([id='root']) ul li > a span {
+    offset-inline-end: 0;
+  }
+
+  section[role="region"]:not([id='root']) ul li > small {
+    offset-inline-start: 0;
+  }
+
+  section[role="region"]:not([id='root']) ul li.hint .explanation {
+    padding-inline-start: 4rem;
+  }
+
+  /**
+   * button
+   */
+  section[role="region"]:not([id='root']) ul li button,
+  section[role="region"]:not([id='root']) ul li .button {
+    width: 29rem;
+    offset-inline-start: calc(100% - 29rem);
+    height: 3.5rem;
+  }
+
+  section[role="region"]#findmydevice ul li button {
+    width: 100%;
+    offset-inline-start: 0;
+  }
+
+  section[role="region"]:not([id='root']) ul li span > select {
+    width: 200%;
+  }
+
+  /**
+   * wifi auth / hotspot wifi settings
+   */
+  section[role="region"]#hotspot-wifiSettings ul li.password > label > span,
+  section[role="region"]#wifi-auth ul li.password > label > span {
+    padding-inline-start: 3rem;
+  }
+
+  /**
+   * wallpaper
+   */
+  section[role="region"].wallpaper {
+    height: 33.5rem;
+  }
+
+  section[role="region"].wallpaper .wallpaper-button {
+    background-position: 95% 24%;
+  }
+
+  html[dir="ltr"] section[role="region"].wallpaper .wallpaper-button {
+    background-position: right 4rem top 2.5rem;
+  }
+  html[dir="rtl"] section[role="region"].wallpaper .wallpaper-button {
+    background-position: left 4rem top 2.5rem;
+  }
+
+  /**
+   * sound
+   */
+  section[role="region"] ul li.sound-setting {
+    min-height: 6rem;
+  }
+
+  ul li > label.range-icons.volume span {
+    position: absolute;
+    offset-inline-start: unset;
+    offset-inline-end: 50%;
+    height: 100%;
+    line-height: 6rem;
+  }
+
+  ul li > label.range-icons.volume span:before {
+    display: none;
+  }
+
+  ul li > label.range-icons.volume input {
+    margin-inline-start: 0;
+  }
+
+  ul li > label.range-icons.volume p {
+    padding-inline-start: 0;
+  }
+
+  ul li > label.range-icons span {
+    margin: 0;
+    text-align: center;
+  }
+
+  /**
+   * media storage
+   */
+  section[role="region"]#mediaStorage div[id*='-space-stackedbar'] {
+    margin: 1.5rem 0;
+    width: 100%;
+    border: 0.3rem #e7e7e7;
+    border-radius: 5rem;
+    height: 2.5rem;
+  }
+
+  section[role="region"]#mediaStorage .stackedbar-color-label {
+    offset-inline-start: 4rem;
+    border-radius: 5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    top: 1.8rem;
+  }
+
+  section[role="region"]#mediaStorage .stackedbar-color-label + a {
+    padding-inline-start: 8rem;
+  }
+
+  section[role="region"]#mediaStorage .color-music.stackedbar-item,
+  section[role="region"]#mediaStorage .color-music > .stackedbar-color-label {
+    background-color: #82c82d;
+    border: 0.3rem #82c82d;
+  }
+
+  section[role="region"]#mediaStorage .color-pictures.stackedbar-item,
+  section[role="region"]#mediaStorage .color-pictures > .stackedbar-color-label {
+    background-color: #efd600;
+    border: 0.3rem #efd600;
+  }
+
+  section[role="region"]#mediaStorage .color-videos.stackedbar-item,
+  section[role="region"]#mediaStorage .color-videos > .stackedbar-color-label {
+    background-color: #00aacc;
+    border: 0.3rem #00aacc;
+  }
+
+  section[role="region"]#mediaStorage .color-free.stackedbar-item,
+  section[role="region"]#mediaStorage .color-free > .stackedbar-color-label {
+    background-color: #858585;
+    border: 0.3rem #858585;
+  }
+
+  section[role="region"]#about-yourPrivacy .privacy-menuitem {
+    margin: 0 -4rem;
+    padding-inline-start: 8.7rem;
+    padding-inline-end: 4rem;
+  }
+
+  section[role="region"]#about-yourPrivacy .privacy-menuitem:before {
+    offset-inline-start: 0;
+  }
+
+  /**
+   * display
+   */
+  section[role="region"] ul li.brightness-manual > label input[type="range"] {
+    display: inline;
+    width: calc(100% - 8rem);
+    offset-inline-start: 4rem;
+  }
+
+  /**
+   * slider
+   */
+  section[role="region"] ul li > label input[type='range'] {
+    top: 0;
+    width: 49.5%;
+    height: 100%;
+    offset-inline-start: 50%;
+    position: absolute;
+  }
+
+  /**
+   * button
+   */
+  section[role="region"]:not([id='root']) ul li p + .button {
+    position: absolute;
+    top: 1.2rem;
+  }
+
+  section[role="region"] ul li p + label:not([for]) {
+    top: 1.5rem;
+  }
+
+  /**
+   * description
+   */
+  section[role="region"]:not([id='root']) .two-column-description {
+    color: #6d7374;
+  }
+
+}
+
+/*
+ * XXX Bug 943173
+ * All lines below are polyfill of styles of Building Block.
+ * Remove them if bug 905065 were landed.
+ */
+@media (min-width: 768px) {
+  section[role="region"].skin-organic > header:first-child h1,
+  .skin-organic section[role="region"] > header:first-child h1,
+  section[role="region"].skin-dark > header:first-child,
+  .skin-dark section[role="region"] > header:first-child {
+    color: white;
+  }
+
+  section[role="region"] > header:first-child h1 {
+    font-size: 2.4rem;
+    line-height: 5rem;
+    color: #fff;
+    padding: 0 1rem 0 2rem;
+  }
+
+  section[role="region"] > header:first-child menu[type="toolbar"] a,
+  section[role="region"] > header:first-child menu[type="toolbar"] button {
+    width: 8.2rem;
+  }
+
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:after,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:after,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:after,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:after  {
+    content: "";
+    position: absolute;
+    offset-inline-start: 0;
+    top: 0;
+    z-index: -1;
+    height: 5rem;
+    width: 8.2rem;
+    background: url("images/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
+  }
+
+  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
+  section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
+  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
+  section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active,
+  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
+  section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
+  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
+  section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active {
+    background: url("images/ui/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
+  }
+
+  section[role="region"] > header:first-child > button,
+  section[role="region"] > header:first-child > a {
+    position: relative;
+    width: 5rem;
+    height: 5rem;
+    background: none;
+    float: left;
+    overflow: visible;
+    margin: 0;
+  }
+
+  section[role="region"] > header:first-child > button:after,
+  section[role="region"] > header:first-child > a:after {
+    width: 5.2rem;
+    height: 5rem;
+  }
+
+  section[role="region"] > header:first-child .icon {
+    width: 5rem;
+  }
+
+  section[role="region"] > header:first-child .icon.icon-back,
+  section[role="region"].skin-organic > header:first-child .icon.icon-back,
+  .skin-organic section[role="region"] > header:first-child .icon.icon-back {
+    background-image: url("images/icon/back_tablet.png");
+  }
+
+  section[role="region"].skin-dark  > header:first-child,
+  .skin-dark  section[role="region"] > header:first-child,
+  section[role="region"].skin-organic > header:first-child,
+  .skin-organic section[role="region"] > header:first-child {
+    background: url("images/ui/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
+  }
+
+  section[role="region"].skin-dark > header:first-child a:after,
+  .skin-dark section[role="region"] > header:first-child a:after,
+  section[role="region"].skin-dark > header:first-child button:after,
+  .skin-dark section[role="region"] > header:first-child button:after,
+  section[role="region"].skin-organic > header:first-child a:after,
+  .skin-organic section[role="region"] > header:first-child a:after,
+  section[role="region"].skin-organic > header:first-child button:after,
+  .skin-organic section[role="region"] > header:first-child button:after {
+    background: url("images/ui/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
+  }
+}