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.

assets/webapps/system.gaiamobile.org/style/accessibility/accessibility.css

@@ -0,0 +1,58 @@
+.accessibility-invert {
+  filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter);
+}
+
+#accessibility-captions-box {
+  padding: 0.5rem;
+  font-size: 1.6rem;
+  position: fixed;
+  bottom: 0;
+  left: calc(15% - 0.5rem);
+  pointer-events: none;
+  background-color: black;
+  width: 70%;
+  margin: 0 auto;
+  visibility: hidden;
+  opacity: 0;
+  text-align: center;
+  transition: visibility var(--transition-duration), opacity var(--transition-duration);
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+#accessibility-captions-box.visible {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+#accessibility-quicknav {
+  visibility: hidden;
+  position: absolute;
+  padding: 0;
+}
+
+#accessibility-quicknav.visible {
+  visibility: visible;
+}
+
+#accessibility-quicknav-container,
+#accessibility-quicknav-container > section,
+#accessibility-quicknav-container > section > ul {
+  height: 100%;
+  max-height: inherit;
+}
+
+#accessibility-quicknav-container > section > ul {
+  display: flex;
+  flex-direction: column;
+}
+
+#accessibility-quicknav-container > section > ul > li {
+  flex-grow: 1;
+}
+
+#accessibility-quicknav-container > section > ul > li > label {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

assets/webapps/system.gaiamobile.org/style/action_menu/action_menu_extended.css

@@ -0,0 +1,164 @@
+#screen:not(.locked).fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"],
+#screen:not(.locked).fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="object"],
+#screen.locked.secure-app.software-button-enabled [role="dialog"][data-type="action"],
+#screen.locked.secure-app.software-button-enabled [role="dialog"][data-type="object"],
+#screen:not(.locked).software-button-enabled [role="dialog"][data-type="action"],
+#screen:not(.locked).software-button-enabled [role="dialog"][data-type="object"] {
+  bottom: var(--software-home-button-height);
+}
+
+/* Dialogs inside an appWindow don't need to take the SHB into account */
+#screen.software-button-enabled .appWindow [role="dialog"][data-type="object"],
+#screen.software-button-enabled .appWindow [role="dialog"][data-type="action"] {
+  bottom: 0;
+}
+
+
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"] {
+  height: calc(100% - 7rem - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="object"],
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"],
+  #screen:not(.locked).software-button-enabled [role="dialog"][data-type="action"],
+  #screen:not(.locked).software-button-enabled [role="dialog"][data-type="object"],
+  #screen.software-button-enabled [role="dialog"][data-type="object"],
+  #screen.software-button-enabled [role="dialog"][data-type="action"] {
+    height: calc(100% - 7rem);
+    bottom: 0;
+    /* BiDi note: the software home button should not be mirrored in RTL. */
+    right: var(--software-home-button-height);
+  }
+
+  /* Dialogs inside an appWindow don't need to take the SHB into account */
+  #screen.software-button-enabled .appWindow [role="dialog"][data-type="object"],
+  #screen.software-button-enabled .appWindow [role="dialog"][data-type="action"] {
+    right: 0;
+  }
+}
+
+/* Extending action menu with icon capability & transition*/
+
+form[role="dialog"][data-type="action"] > menu > button.icon,
+form[role="dialog"][data-type="object"] > menu > button.icon {
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="dialog"][data-type="action"] > menu > button.icon,
+html[dir="ltr"] form[role="dialog"][data-type="object"] > menu > button.icon {
+  background-position: left 0.5rem top 0.5rem;
+  padding-left: 4rem;
+}
+html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button.icon,
+html[dir="rtl"] form[role="dialog"][data-type="object"] > menu > button.icon {
+  background-position: right 0.5rem top 0.5rem;
+  padding-right: 4rem;
+}
+
+form[role="dialog"][data-type="action"],
+form[role="dialog"][data-type="object"] {
+  /* Forcing position absolute when hidden in order to avoid
+  unwanted scroll events due to Bug 1077474 */
+  position: absolute;
+
+  visibility: hidden;
+  transform: translateY(100%);
+  transition: transform ease-in-out .3s, visibility .3s;
+  pointer-events: none;
+}
+
+form[role="dialog"][data-type="action"].visible,
+form[role="dialog"][data-type="object"].visible {
+  position: fixed;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Extending action menu to display checkbox */
+form[role="dialog"][data-type="action"] > menu > gaia-checkbox {
+  padding-bottom: 0.8rem;
+  padding-inline-start: 1.5rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  form[role="dialog"][data-type="action"],
+  form[role="dialog"][data-type="object"] {
+    box-sizing: border-box;
+    background-color: rgba(0,0,0,0.6);
+  }
+
+  form[role="dialog"][data-type="action"] > header,
+  form[role="dialog"][data-type="object"] > header {
+    background: none;
+    top: calc(50% - 24rem);
+    width: 68rem;
+    height: 7rem;
+    padding: 0 6rem;
+    font-size: 2.2rem;
+    line-height: 7rem;
+    background-color: #333333;
+    box-shadow: 0 0 1rem #222222;
+    border: 0.1rem solid #282828;
+    border-bottom: none;
+    offset-inline-start: calc(50% - 34rem);
+  }
+
+  form[role="dialog"][data-type="action"] > header:after,
+  form[role="dialog"][data-type="object"] > header:after {
+    background: #222323;
+    width: 54rem;
+    offset-inline-start: 6rem;
+  }
+
+  form[role="dialog"][data-type="action"] > menu,
+  form[role="dialog"][data-type="object"] > menu {
+    top: calc(50% - 24rem + 7rem);
+    offset-inline-start: calc(50% - 34rem);
+    width: 56rem; /* 68 - 12 */
+    height: 31rem; /* 38 - 7 */
+    padding: 0 6rem;
+    font-size: 2.2rem;
+    background-color: #4d4d4d;
+    border: none;
+    z-index:1;
+  }
+
+  form[role="dialog"][data-type="action"] > menu > button,
+  form[role="dialog"][data-type="object"] > menu > button {
+    box-shadow: 0 0 1rem #222222;
+    border: 0.1rem solid #282828;
+    background: none no-repeat 1rem 50%;
+    background-color: #898989;
+    height: 4.7rem;
+    font-size: 2.3rem;
+    line-height: 3rem;
+    font-weight: 400;
+    padding: 1rem 6rem;
+    margin: 2.4rem 0 0;
+  }
+
+  form[role="dialog"][data-type="action"] > menu > button:last-child,
+  form[role="dialog"][data-type="object"] > menu > button:last-child {
+    position: absolute;
+    margin-top: 1.5rem;
+    margin-inline-start: calc(50% - 9rem);
+    font-size: 2.3rem;
+    line-height: 2.3rem;
+    font-weight: 400;
+    width: 18rem;
+    height: 4rem;
+  }
+
+  form[role="dialog"][data-type="action"] > menu > button:last-child:before,
+  form[role="dialog"][data-type="object"] > menu > button:last-child:before {
+    background: none;
+    background-color: #333333;
+    width: 67.8rem;
+    offset-inline-start: calc(50% - 33.9rem);
+    bottom: calc(50% - 14rem);
+    z-index: -1;
+  }
+}

assets/webapps/system.gaiamobile.org/style/app_install_manager/app_install_manager.css

@@ -0,0 +1,173 @@
+/* dialog */
+/* FIXME we have to see why we need such specific style here and why
+ * the general style in confirm.css isn't sufficient */
+#setup-installed-app-dialog,
+#ime-layout-dialog,
+#app-install-dialog,
+#app-install-cancel-dialog,
+#app-download-cancel-dialog {
+  display: none;
+  top: 3rem;
+  pointer-events: none;
+}
+
+/* Shift the bottom of the prompt to account for the height of the
+   software home button */
+#screen.software-button-enabled #setup-installed-app-dialog,
+#screen.software-button-enabled #ime-layout-dialog,
+#screen.software-button-enabled #app-install-dialog,
+#screen.software-button-enabled #app-install-cancel-dialog,
+#screen.software-button-enabled #app-download-cancel-dialog {
+  bottom: var(--software-home-button-height);
+}
+
+@media (orientation: landscape) {
+  #screen.software-button-enabled #setup-installed-app-dialog,
+  #screen.software-button-enabled #ime-layout-dialog,
+  #screen.software-button-enabled #app-install-dialog,
+  #screen.software-button-enabled #app-install-cancel-dialog,
+  #screen.software-button-enabled #app-download-cancel-dialog {
+    bottom: 0;
+    /* BiDi note: the software home button should not be mirrored in RTL. */
+    right: var(--software-home-button-height);
+  }
+}
+
+#setup-installed-app-dialog.visible,
+#ime-layout-dialog.visible,
+#app-install-dialog.visible,
+#app-install-cancel-dialog.visible,
+#app-download-cancel-dialog.visible {
+  display: inline-block;
+  pointer-events: auto;
+}
+
+#app-uninstall-dialog {
+  position: absolute;
+}
+
+#setup-installed-app-dialog section,
+#ime-layout-dialog section,
+#app-install-dialog section,
+#app-install-cancel-dialog section,
+#app-download-cancel-dialog section {
+  height: auto;
+}
+
+#setup-installed-app-dialog h1,
+#ime-layout-dialog h1,
+#app-install-dialog h1,
+#app-install-cancel-dialog h1,
+#app-download-cancel-dialog h1 {
+  border-bottom: none;
+  background: none;
+}
+
+#app-install-dialog dl > dt {
+  width: 8rem;
+  margin-inline-end: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#app-install-dialog p {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: normal;
+  border-top: none;
+}
+#app-install-dialog #system-addon-warning p + p {
+  margin-top: 0;
+}
+#app-install-dialog span {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: normal;
+  color: inherit;
+}
+#app-install-dialog #system-addon-icon {
+  height: 3rem;
+  width: 3rem;
+}
+html[dir="ltr"] #app-install-dialog #system-addon-icon {
+  float: left;
+  margin: 1.5rem 0 0 1.5rem;
+}
+html[dir="rtl"] #app-install-dialog #system-addon-icon {
+  float: right;
+  margin: 1.5rem 1.5rem 0 0;
+}
+
+#app-install-author-url {
+  direction: ltr;
+}
+
+#app-install-cancel-dialog small:first-child {
+  margin-bottom: 1rem;
+}
+
+/* ... end of dialog */
+
+/* notification */
+#install-manager-notification-container > .fake-notification {
+  position: relative;
+  border-bottom: none;
+}
+
+#install-manager-notification-container > .fake-notification > * {
+  pointer-events: none;
+}
+
+#install-manager-notification-container [data-icon] {
+  color: #9ab0c0;
+  background-color: #edf1f4;
+}
+
+#install-manager-notification-container .title-container {
+  margin: 1.4rem 0 0;
+  line-height: 3rem;
+}
+html[dir="ltr"] #install-manager-notification-container .title-container {
+  margin-left: 3.7rem;
+}
+html[dir="rtl"] #install-manager-notification-container .title-container {
+  margin-right: 3.7rem;
+}
+
+#install-manager-notification-container progress {
+  position: absolute;
+  width: 100%;
+  height: 0.4rem;
+  left: 0;
+  top: 5.6rem;
+  border: none;
+}
+
+#install-manager-notification-container progress::-moz-progress-bar {
+  background: url(../shared/progress.gif) repeat-x;
+}
+
+/* ... end of notification */
+
+/* ... start of keyboard layout */
+ul#ime-list {
+  padding-inline-start: 1.5rem;
+}
+
+ul#ime-list > li {
+  /* Positioning */
+  position: relative;
+
+  /* Display & Box Model */
+  width: 100%;
+  height: 3rem;
+  padding-top: 2rem;
+
+  /* Other */
+  list-style: none;
+}
+
+ul#ime-list > li label {
+  text-transform: none;
+}
+
+/* ... end of keyboard layout */

assets/webapps/system.gaiamobile.org/style/app_install_manager/images/alert-icon.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Alert_Icon.svg"
+   x="0px"
+   y="0px"
+   width="30px"
+   height="30px"
+   viewBox="-9 11 30 30"
+   enable-background="new -9 11 30 30"
+   xml:space="preserve"><metadata
+     id="metadata3392"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs3390" /><sodipodi:namedview
+     id="namedview3969"
+     inkscape:cy="15"
+     guidetolerance="10"
+     borderopacity="1"
+     inkscape:cx="15"
+     inkscape:zoom="7.8666667"
+     objecttolerance="10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     showgrid="false"
+     gridtolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="967"
+     inkscape:window-height="764"
+     inkscape:window-x="114"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><g
+     id="g3412"
+     transform="matrix(1.25,0,0,1.25,-1.5,-6.5)"><g
+       id="g3414"><circle
+         id="ellipse3416"
+         cx="6"
+         cy="26"
+         r="12"
+         style="fill:#b90000" /></g></g><path
+     id="path3426"
+     d="M 4.625,34.5 C 5,34.875 5.5,35.125 6,35.125 c 0.625,0 1.125,-0.25 1.5,-0.625 0.375,-0.375 0.625,-0.875 0.625,-1.375 0,-0.625 -0.25,-1 -0.625,-1.375 C 7.125,31.25 6.5,31 5.875,31 5.25,31 4.875,31.25 4.5,31.625 4.125,32 3.875,32.5 3.875,33 4,33.625 4,34.125 4.625,34.5 Z M 7.375,28.625 8,16.875 l -3.5,0 0.25,11.75 2.625,0 z"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /></svg>

assets/webapps/system.gaiamobile.org/style/app_titlebar.css

@@ -0,0 +1,60 @@
+.appWindow .titlebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: var(--statusbar-height);
+  overflow: hidden;
+  z-index: 6;
+}
+
+.appWindow .titlebar .statusbar-shadow {
+  height: 100%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+html[dir="ltr"] .appWindow .titlebar .statusbar-shadow { background-position: bottom right; }
+html[dir="rtl"] .appWindow .titlebar .statusbar-shadow { background-position: bottom left; }
+
+#screen:not(.attention):not(.rocketbar-focused):not(.utility-tray):not(.locked) #statusbar.light,
+#screen:not(.rocketbar-focused):not(.utility-tray):not(.locked) .appWindow.light > .titlebar .statusbar-shadow {
+  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in=\'SourceGraphic\' color-interpolation-filters=\'sRGB\' type=\'matrix\' values=\'1 -1 0.3019 0 0 0 0.3019 0 0 0 0 0 0.3019 0 0 0 0 0 1 0\'/></filter></svg>#invert");
+}
+
+.appWindow:not(.lockScreenWindow) .titlebar .notifications-shadow {
+  background-image: -moz-element(#ambient-indicator);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  height: .2rem;
+}
+
+/* Statusbar shadow hidden by default */
+.appWindow .titlebar {
+  visibility: hidden;
+}
+
+/* Statusbar shadow visible on app transitions */
+.appWindow.transition-opening > .titlebar,
+.appWindow.transition-opening > .titlebar > .titlebar-icons,
+.appWindow.transition-closing > .titlebar,
+.appWindow.transition-closing > .titlebar > .titlebar-icons,
+/* Statusbar shadow visible on edge gestures */
+.appWindow.inside-edges > .titlebar,
+.appWindow.outside-edges-right > .titlebar,
+.appWindow.outside-edges-left > .titlebar,
+.appWindow.will-become-active > .titlebar,
+/* Statusbar shadow visible on utility tray transitions */
+#screen.utility-tray-in-transition .appWindow > .titlebar,
+/* Statusbar shadow visible on fullscreen dragging */
+#screen:not(.minimized-tray) .appWindow > .chrome.dragging + .titlebar > .titlebar-icons {
+  visibility: visible;
+}
+
+.appWindow > .titlebar .titlebar-icons {
+  position: absolute;
+  right: 0;
+  background-image: -moz-element(#statusbar-wrapper);
+  width: 100%;
+}
+

assets/webapps/system.gaiamobile.org/style/authentication_dialog.css

@@ -0,0 +1,35 @@
+.authentication-dialog {
+  display: block;
+  position: absolute;
+  top: var(--statusbar-height);
+  left: 0;
+  width: 100%;
+  height: calc(100% - var(--statusbar-height));
+  background-color: #EEEEEE;
+  font-weight: normal;
+}
+
+#screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
+  height: calc(100% - var(--statusbar-height) - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
+    height: calc(100% - var(--statusbar-height));
+  }
+}
+
+.authentication-dialog-http-authentication-message {
+  display: block;
+  font-size: 1.5rem;
+  margin: 1rem 2rem;
+  color: #000;
+}
+
+.authentication-dialog label {
+  display: block;
+  margin: 1rem 2rem;
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  color: #000;
+ }

assets/webapps/system.gaiamobile.org/style/battery_overlay/battery_overlay.css

@@ -0,0 +1,77 @@
+#system-overlay.battery {
+  visibility: visible;
+}
+
+#system-overlay.battery #battery {
+  display: block;
+}
+
+#battery {
+  display: none;
+  background-image: url('images/header_bg.png');
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+  padding: 1rem 0;
+  pointer-events: auto;
+}
+
+.icon-battery {
+  display: block;
+  width: 4.2rem;
+  height: 1.8rem;
+  margin: 0 1.3rem;
+  background-image: url('images/battery_empty_small.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 4.2rem;
+}
+html[dir="ltr"] .icon-battery { float: left; }
+html[dir="rtl"] .icon-battery { float: right; }
+
+#battery span.icon-battery {
+  height: 4rem;
+}
+
+#battery span {
+  vertical-align: middle;
+  line-height: 2rem;
+}
+
+.battery-notification {
+  display: inline-block;
+  width: calc(100% - 6.8rem);
+}
+
+.battery-notification span {
+  display: block;
+}
+
+html[dir="ltr"] #battery.disappearing {
+  animation: notification-disappear-ltr 1.5s;
+}
+html[dir="rtl"] #battery.disappearing {
+  animation: notification-disappear-rtl 1.5s;
+}
+
+@keyframes notification-disappear-ltr {
+  to {
+    transform: translateX(100%);
+  }
+  from {
+    transform: translateX(0);
+  }
+}
+
+@keyframes notification-disappear-rtl {
+  to {
+    transform: translateX(-100%);
+  }
+  from {
+    transform: translateX(0);
+  }
+}

assets/webapps/system.gaiamobile.org/style/bluetooth_transfer/bluetooth_transfer.css

@@ -0,0 +1,46 @@
+#bluetooth-transfer-status {
+  position: relative;
+  border-bottom: none;
+}
+
+#bluetooth-transfer-status .title-container {
+  margin: 1.4rem 0 0;
+  line-height: 3rem;
+}
+html[dir="ltr"] #bluetooth-transfer-status .title-container { margin-left: 3.7rem; }
+html[dir="rtl"] #bluetooth-transfer-status .title-container { margin-right: 3.7rem; }
+
+#bluetooth-transfer-status progress {
+  position: absolute;
+  top: 5.6rem;
+  left: 0;
+  width: 100%;
+  height: 0.4rem;
+  padding: 0;
+
+  background-color: hsla(255, 100%, 100%, 0.1);
+  border: none;
+}
+
+#bluetooth-transfer-status progress::-moz-progress-bar {
+  background-color: #00caf2;
+  transform: skew(-45deg);
+  margin-inline-start: -1rem;
+}
+
+/* In use? */
+#bluetooth-transfer-status.applying .icon {
+  background-image: url(images/spinner.png);
+
+  animation: spin 1.75s infinite linear;
+  transform-origin: center center;
+}
+
+@-moz-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

assets/webapps/system.gaiamobile.org/style/browser_frame/browser_frame.css

@@ -0,0 +1,4 @@
+iframe.browser {
+  border: none;
+}
+

assets/webapps/system.gaiamobile.org/style/browser_frame/private_browser.css

@@ -0,0 +1,30 @@
+* {
+  -moz-user-select: none;
+}
+
+html {
+  font-size: 10px;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 20.6rem 3rem 0;
+  -moz-box-sizing: border-box;
+  background: #392E54 url(images/pb_dialog.png) no-repeat center 5rem / 10.2rem 11.6rem;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+a, p {
+  color: #fff;
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+  margin-bottom: 1rem;
+}

assets/webapps/system.gaiamobile.org/style/cards_view/cards_view.css

@@ -0,0 +1,465 @@
+#task-manager {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -moz-user-select: none;
+  background-color: rgb(51, 51, 51);
+}
+
+#cards-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* NOTE: We can't use scroll-snap-destination, even though it's what we want,
+     because it thinks every element is positioned at 0px since everything
+     is positioned using CSS transforms. */
+  scroll-snap-points-x: repeat(calc(50% + 25px));
+  /* Requires that scrolling always end at a snap point
+     when the operation completes (hard snap). */
+  scroll-snap-type: mandatory;
+  direction: ltr;
+}
+
+@media not all and (-moz-physical-home-button) {
+  #screen:not(.software-button-disabled) #task-manager {
+    height: calc(100% - var(--software-home-button-height));
+    bottom: var(--software-home-button-height);
+  }
+}
+
+/* This reduce overpaint while the cards view is active */
+#screen.cards-view #windows {
+  opacity: 0;
+}
+
+#screen.software-button-enabled #task-manager {
+  /* clip the horizontal scrollbar */
+  height: calc(100% - var(--software-home-button-height));
+  bottom: var(--software-home-button-height);
+}
+
+@media (orientation:landscape) {
+  /* not currently in use, see bug 1174325 */
+  #screen.software-button-enabled #task-manager {
+    height: 100%;
+    width: calc(100% - var(--software-home-button-height));
+    bottom: 0;
+    right: var(--software-home-button-height);
+  }
+}
+
+#task-manager.active {
+  visibility: inherit;
+}
+
+#task-manager .no-recent-apps {
+  display: none;
+  position: absolute;
+  top: calc(50% - 1rem);
+  width: calc(100% - 6rem);
+  height: 2rem;
+  text-align: center;
+  color: #52b6cc;
+  font-size: 2rem;
+  font-weight: 500;
+}
+html[dir="ltr"] #cards-view .no-recent-apps { left: 3rem; }
+html[dir="rtl"] #cards-view .no-recent-apps { right: 3rem; }
+
+#task-manager.empty .no-recent-apps {
+  display: block;
+}
+
+#task-manager.empty.active {
+  background-color: rgba(51, 51, 51, .85);
+}
+
+#cards-list {
+  list-style: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+}
+
+
+/* Cards */
+
+#cards-view .card {
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 50vw;
+  height: 50%;
+  transform: translateY(0);
+  /* Defines the left of each card (column) as the
+     coordinate that should be used for snapping */
+  scroll-snap-coordinate: 0 0;
+  left: 0; /* BiDi proof */
+}
+
+#task-manager.active .card {
+  transition: transform var(--transition-duration) cubic-bezier(.27,.02,.74,1.14);
+}
+
+#cards-view .card > * {
+  pointer-events: none;
+}
+
+/* Screenshots */
+
+#cards-view .screenshotView {
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+html[dir="ltr"] #cards-view .screenshotView {
+  background-position: left top;
+}
+html[dir="rtl"] #cards-view .screenshotView {
+  background-position: right top;
+}
+
+#cards-view .screenshotView.rotate-90 {
+  transform: rotate(90deg);
+}
+
+#cards-view .screenshotView.rotate-270 {
+  transform: rotate(270deg);
+}
+
+#cards-view .screenshotView.rotate-180 {
+  transform: rotate(180deg);
+  transform-origin: 50% 50%;
+}
+
+#cards-view .card .privateOverlay {
+  display: none;
+  pointer-events: none;
+}
+
+#cards-view .card.private .privateOverlay {
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
+  position: absolute;
+  left: 0; top: 0;
+  background-color: rgba(57, 46, 84, 0.9);
+  background-image: url(../icons/pb_icon.png);
+  background-repeat: no-repeat;
+  background-size: 50%;
+  background-position: center center;
+}
+
+
+/* Various */
+
+#cards-view .card.appIconPreview {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+#cards-view .card > .appIconView {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(../icons/Default.png);
+  background-position: center center;
+  background-size: 8rem 8rem;
+  background-repeat: no-repeat;
+  opacity: 0;
+}
+
+#cards-view .card.appIconPreview > .appIconView {
+  opacity: 1;
+}
+
+#task-manager.filtered {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+#task-manager.filtered .card .screenshotView {
+  outline: solid 1px rgba(133, 133, 133, 0.8);
+}
+
+/* Card Tray */
+
+#cards-view .card-tray {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  height: 3rem;
+  width: 100%;
+  overflow: visible;
+  padding: 0;
+  box-sizing: border-box;
+  color: #fff;
+  background-color: rgb(95, 95, 95);
+  opacity: 0;
+}
+
+.cards-view .card-tray {
+  animation-name: card-tray-fade-in;
+  animation-duration: var(--transition-duration);
+  animation-fill-mode: both;
+}
+
+@keyframes card-tray-fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+#task-manager.filtered .card-tray {
+  background-color: rgb(244, 244, 244);
+}
+
+#task-manager.filtered .private .card-tray {
+  background-color: rgb(95, 95, 95);
+}
+
+#cards-view .card-tray > menu.buttonbar {
+  margin: 0;
+  padding: 0;
+}
+
+#cards-view .card-tray > menu.buttonbar > button {
+  position: absolute;
+  top: 0;
+  width: 20%;
+  height: 100%;
+
+  border: none;
+  pointer-events: auto;
+
+  background-size: 20px 20px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+#cards-view .card-tray .close-button {
+  background-image: url(../task-manager/light/close.png);
+}
+
+html[dir="ltr"] #cards-view .card-tray .close-button { left: 0; }
+html[dir="rtl"] #cards-view .card-tray .close-button { right: 0; }
+
+#task-manager.filtered .card-tray .close-button {
+  background-image: url(../task-manager/dark/close.png);
+}
+
+#cards-view .card-tray .favorite-button {
+  background-image: url(../task-manager/light/favorite.png);
+  display: none;
+}
+
+html[dir="ltr"] #cards-view .card-tray .favorite-button { right: 0; }
+html[dir="rtl"] #cards-view .card-tray .favorite-button { left: 0; }
+
+#task-manager.filtered .card-tray .favorite-button {
+  background-image: url(../task-manager/dark/favorite.png);
+}
+
+#cards-view .card-tray > button.appIcon {
+  top: 1rem;
+  left: calc(50% - 2rem);
+  width: 4rem;
+  height: 4rem;
+  background-image: url(../icons/Default.png);
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: block;
+  border: none;
+  position: absolute;
+  pointer-events: auto;
+  opacity: 1;
+  transition: opacity var(--transition-duration);
+}
+html[dir="ltr"] #cards-view .card-tray > button.appIcon { left: calc(50% - 2rem); }
+html[dir="rtl"] #cards-view .card-tray > button.appIcon { right: calc(50% - 2rem); }
+#cards-view .card.browser .card-tray > button.appIcon {
+  background-image: url('../../shared/resources/branding/browser_126.png');
+}
+
+#cards-view .card .card-tray > button.appIcon.pending {
+  opacity: 0;
+}
+
+#cards-view .private .close-button,
+#task-manager.filtered .private .close-button {
+  background-image: url(../task-manager/light/close.png);
+}
+
+/* Titles */
+#cards-view .card .titles {
+  position: absolute;
+  top: -4rem;
+  left: 0;
+  width: 100%;
+}
+
+#cards-view .card .title {
+  width: 100%;
+  height: 2rem;
+  line-height: 2rem;
+
+  overflow-x: hidden;
+  margin: 0;
+
+  font-size: 1.4rem;
+  font-weight: 300;
+  font-style: italic;
+
+  text-overflow: ellipsis;
+  text-align: center;
+
+  pointer-events: auto;
+}
+
+#task-manager.filtered .card .titles h1 {
+  color: #4d4d4d;
+}
+
+#cards-view .card p.subtitle {
+  display: none;
+  pointer-events: auto;
+  overflow: hidden;
+  margin: 0;
+  text-align: center;
+  font-weight: normal;
+}
+
+#cards-view .card.show-subtitle p.subtitle {
+  display: block;
+}
+
+#cards-view .card.browser p.subtitle {
+  color: #e7e7e7;
+  pointer-events: auto;
+  font-style: italic;
+}
+
+#task-manager.filtered .card p.subtitle {
+  color: #858585;
+}
+
+#cards-view .titles .subtitle-url {
+  direction: ltr;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle,
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  padding-inline-start: 2rem;
+  padding-inline-end: 1rem;
+  min-height: 2rem;
+  background-repeat: no-repeat;
+  background-size: 3rem 3rem;
+}
+html[dir="ltr"] #cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle,
+html[dir="ltr"] #cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-position: left -0.5rem top -1rem;
+}
+html[dir="rtl"] #cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle,
+html[dir="rtl"] #cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-position: right -0.5rem top -1rem;
+}
+
+#cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle {
+  background-image: url("../chrome/images/dark/ssl.png");
+}
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-image: url("../chrome/images/dark/ssl_broken.png");
+}
+
+#task-manager.filtered .card.show-subtitle[data-ssl="secure"] p.subtitle {
+  background-image: url("../chrome/images/light/ssl.png");
+}
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-image: url("../chrome/images/light/ssl_broken.png");
+}
+
+
+/* Animations */
+#task-manager.from-home {
+  animation: cardview-from-home 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
+}
+
+#task-manager.to-home {
+  animation: cardview-to-home 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
+  animation-fill-mode: forwards;
+}
+
+@keyframes cardview-from-home {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes cardview-to-home {
+  0%   { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+
+
+
+#task-manager-buttons {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+#task-manager-new-private-sheet-button {
+  width: 7.5rem;
+  height: 4.8rem;
+  border: none;
+  background: url("../task-manager/images/tm_pb_tab.png") no-repeat center;
+  background-size: 3.5rem 1.8rem;
+}
+
+#task-manager-new-sheet-button {
+  width: 6.4rem;
+  height: 4.8rem;
+  border: none;
+  background: url("../task-manager/images/tm_new_tab.png") no-repeat center;
+  background-size: 2.4rem 2.4rem;
+}
+
+#task-manager-new-private-sheet-button:active {
+  background-image: url("../task-manager/images/tm_pb_tab_press.png");
+}
+
+#task-manager-new-sheet-button:active {
+  background-image: url("../task-manager/images/tm_new_tab_press.png");
+}
+
+#task-manager.filtered #task-manager-new-private-sheet-button:not(:active) {
+  filter: brightness(0.5);
+}
+
+#task-manager.filtered #task-manager-new-sheet-button:not(:active) {
+  filter: brightness(0.5);
+}

assets/webapps/system.gaiamobile.org/style/chrome/chrome.css

@@ -0,0 +1,839 @@
+.appWindow:not(.bar) > .chrome {
+  pointer-events: none;
+  top: 0;
+  height: calc(var(--statusbar-height) + var(--rocketbar-urlbar-height));
+  transform: scaleY(var(--rocketbar-scale)) translateY(calc(var(--statusbar-height) * -1));
+  transition: transform var(--transition-duration) ease-in-out,
+              background-color var(--transition-duration) ease;
+
+  background-color: black;
+  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
+  color: white;
+}
+html[dir="ltr"] .appWindow:not(.bar) > .chrome { transform-origin: top left; }
+html[dir="rtl"] .appWindow:not(.bar) > .chrome { transform-origin: top right; }
+
+:not(.browser).appWindow[data-shrinking-state="true"] > .chrome {
+  height: calc(var(--statusbar-height) / var(--rocketbar-scale));
+  transform: scaleY(var(--rocketbar-scale)) translateY(0);
+}
+
+.appWindow.light > .chrome {
+  background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
+  background-color: white;
+  color: #4d4d4d;
+}
+
+.appWindow.private > .chrome {
+  background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
+  background-color: #392e54;
+  color: #fff;
+}
+
+.appWindow:not(.bar) > .chrome.maximized {
+  transform: scaleY(1) translateY(0);
+}
+
+.appWindow.fullscreen-app:not(.bar) > .chrome:not(.maximized) {
+  height: var(--statusbar-height);
+  top: 0;
+}
+
+.appWindow:not(.bar).fullscreen-app > .chrome.maximized {
+  top: 0;
+  transform: scaleY(1) translateY(-7.6rem);
+}
+
+.controls {
+  pointer-events: auto;
+  background-color: transparent;
+  position: absolute;
+  top: calc(var(--statusbar-height) + .3rem);
+  width: 100%;
+  font-size: 0;
+}
+
+.chrome .controls .windows-button {
+  display: none;
+}
+
+/* Special cases */
+.searchWindow > .chrome {
+  display: none;
+}
+
+[data-manifest-name="FTU"]:not(.bar) > .chrome .controls,
+[data-manifest-name="FTU"]:not(.bar) > .chrome .progress,
+.lockScreenWindow:not(.bar) > .chrome .controls,
+.lockScreenWindow:not(.bar) > .chrome gaia-progress,
+.homescreen:not(.bar) > .chrome gaia-progress,
+.globalOverlayWindow:not(.bar) > .chrome .controls,
+.globalOverlayWindow:not(.bar) > .chrome gaia-progress {
+  visibility: hidden;
+}
+
+.lockScreenWindow:not(.bar) > .chrome,
+.globalOverlayWindow:not(.bar) > .chrome {
+  background-color: transparent;
+}
+
+#screen.attention .lockScreenWindow:not(.bar) > .chrome {
+  background-color: black;
+}
+
+/* Special cases for Rocketbar in apps with browser chrome */
+.appWindow:not(.browser) .chrome .controls .menu-button {
+  display: none;
+}
+
+/* Maximized rocketbar size when the 'Windows' button is not displayed */
+.appWindow.fullscreen-app:not(.browser) .chrome.maximized .controls .urlbar,
+.appWindow:not(.browser):not(.search-app) .chrome.maximized .controls .urlbar {
+  width: calc(100% - 1rem);
+}
+
+/* Special cases for rocketbar on the Top Sites view and homescreens */
+.homescreen .menu-button,
+.homescreen .controls .reload-button,
+.homescreen .controls .stop-button,
+.search-app .menu-button,
+.search-app .controls .reload-button,
+.search-app .controls .stop-button,
+.chrome .controls .windows-button {
+  display: none;
+}
+
+.chrome:not(.maximized) .controls .urlbar {
+  width: calc(100% - 8rem);
+}
+
+/* Give the urlbar an extra hit target reaching toward the top of the screen. */
+.chrome:not(.maximized) .controls .urlbar-hit-area {
+  position: absolute;
+  width: 100%;
+  height: 3.2rem;
+  top: -0.8rem;
+}
+
+.search-app .chrome .controls .windows-button {
+  display: inline;
+}
+
+/* URL bar */
+.chrome .controls .urlbar {
+  width: calc(100% - 4.5rem);
+  height: 3.2rem;
+  line-height: 3.2rem;
+  margin: 0.2rem 0 0.5rem;
+  border-radius: 1.8rem;
+  color: inherit;
+  overflow: visible;
+  background-color: transparent;
+  margin-inline-start: .5rem;
+  position: absolute;
+}
+html[dir="ltr"] .chrome .controls .urlbar { text-align: left; }
+html[dir="rtl"] .chrome .controls .urlbar { text-align: right; }
+
+.maximized .controls .urlbar {
+  background-color: rgba(204,204,204,0.2);
+}
+
+.appWindow.light.collapsible .controls .urlbar {
+  background-color: rgb(242, 242, 242); /* 255 * 0.95 */
+}
+
+.appWindow.light .maximized .controls .urlbar {
+  background-color: rgba(204,204,204,0.4);
+}
+
+.appWindow.private.collapsible .controls .urlbar {
+  background-color: #392e54;
+}
+
+.appWindow.private .maximized .controls .urlbar {
+  background-color: rgba(204, 204, 204, 0.2);
+}
+
+.chrome-combined .chrome-title-container {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-inline-start: 3.85rem;
+  padding-inline-end: 0.8rem;
+  box-sizing: padding-box;
+  overflow: hidden;
+  float: none;
+  background-color: rgba(204,204,204,0.2);
+  border-radius: 1.8rem;
+}
+.chrome-combined.private .chrome-title-container {
+  padding-inline-start: 1.45rem;
+}
+
+.chrome-combined .title {
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 300;
+  font-size: 1.8rem;
+  font-style: italic;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.chrome-combined.maximized .title {
+  width: calc(100% - 3.2rem);
+}
+
+.chrome-plain .title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.search-app .chrome.maximized .controls .urlbar:after {
+  content: '';
+  width: 2rem;
+  height: 100%;
+  top: 0;
+  offset-inline-end: 0.8rem;
+  position: absolute;
+  background-image: url('images/search.png');
+  background-repeat: no-repeat;
+  background-size: 2rem auto;
+  background-position: center right;
+}
+
+.appWindow.light .chrome-combined:not(.maximized) .chrome-title-container {
+  background-color: rgba(204,204,204,0.4);
+}
+
+.chrome-combined.maximized .chrome-title-container {
+  background-color: transparent;
+}
+
+.homescreen .chrome-combined .chrome-title-container {
+  width: calc(100% - 2rem);
+  padding-inline-start: 2rem;
+}
+
+.chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+.chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  width: calc(100% - 8rem);
+}
+html[dir="ltr"] .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="ltr"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(3.5rem);
+}
+html[dir="rtl"] .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="rtl"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(-3.5rem);
+}
+
+.chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 12rem);
+}
+html[dir="ltr"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(7.5rem);
+}
+html[dir="rtl"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(-7.5rem);
+}
+
+.appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+.appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  width: calc(100% - 4.5rem);
+}
+html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(3.5rem);
+}
+html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(-3.5rem);
+}
+
+.appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 8.5rem);
+}
+html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(7.5rem);
+}
+html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(-7.5rem);
+}
+
+.controls .urlbar {
+  transform: scaleX(var(--rocketbar-scale)) translateY(0.1rem);
+  transition: transform 0.2s ease-in-out;
+}
+html[dir="ltr"] .controls .urlbar { transform-origin: top left; }
+html[dir="rtl"] .controls .urlbar { transform-origin: top right; }
+
+.appWindow.fullscreen-app .chrome.dragged,
+.appWindow.fullscreen-app .chrome.dragging {
+  visibility: visible;
+}
+
+.appWindow.attentionWindow .chrome,
+.appWindow.fullscreen-app .chrome {
+  visibility: hidden;
+}
+
+.appWindow.collapsible.active .urlbar {
+  will-change: transform;
+}
+
+.appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar {
+  transform: scale(var(--rocketbar-scale)) translateY(-6.1rem);
+}
+html[dir="ltr"] .appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar { transform-origin: bottom left; }
+html[dir="rtl"] .appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar { transform-origin: bottom right; }
+
+.maximized .controls .urlbar {
+  transform: scaleX(1);
+}
+
+/* Pinning the web */
+
+.urlbar::before {
+  content: "";
+  bottom: -1.5rem;
+  height: 1.5rem;
+  width: 2.4rem;
+  position: absolute;
+  background-size: cover;
+  background-image: url("images/arrow.png");
+  transform: translateY(0) translateX(0) scale(1);
+  transition: opacity var(--transition-duration), transform var(--transition-duration);
+}
+html[dir="ltr"] .urlbar::before { left: 0.35rem; }
+html[dir="rtl"] .urlbar::before { right: 0.35rem; }
+
+.pin-dialog.hidden ~ .controls .urlbar::before {
+  opacity: 0;
+}
+html[dir="ltr"] .pin-dialog.hidden ~ .controls .urlbar::before {
+  transform: translateY(-50%) translateX(-50%) scale(.3);
+}
+html[dir="rtl"] .pin-dialog.hidden ~ .controls .urlbar::before {
+  transform: translateY(-50%) translateX(50%) scale(.3);
+}
+
+section.pin-dialog {
+  visibility: visible;
+  display: block;
+  position: absolute;
+  margin: 0 1rem;
+  width: calc(100% - 2rem);
+  top: calc(var(--statusbar-height) + var(--rocketbar-urlbar-height) + 0.8rem);
+  background-color: #F4F4F4;
+  font-size: 1.2rem;
+  color: #858585;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  transform: translateY(0) translateX(0) scale(1);
+  transition: visibility var(--transition-duration), opacity var(--transition-duration), transform var(--transition-duration);
+}
+
+section.pin-dialog.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+html[dir="ltr"] section.pin-dialog.hidden {
+  transform: translateY(-50%) translateX(-50%) scale(.3);
+}
+html[dir="rtl"] section.pin-dialog.hidden {
+  transform: translateY(-50%) translateX(50%) scale(.3);
+}
+
+.pin-scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Note: we cannot use bottom: 0 because the parent (.chrome) has a
+     transition defined, which creates a new stacking context for it.
+     So any coordinates (top, left, etc.) will be relative to this parent
+     element instead of the viewport.
+     see https://bugzilla.mozilla.org/show_bug.cgi?id=879443
+  */
+  height: 100vh;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, 0.45);
+  transition: opacity var(--transition-duration);
+  pointer-events: auto;
+}
+
+section.pin-dialog.hidden + .pin-scrim {
+  visibility: hidden;
+  opacity: 0;
+}
+
+section.pin-dialog .card-container {
+  overflow: hidden;
+  text-align: center;
+}
+
+section.pin-dialog .pin-site-icon {
+  font-weight: 300;
+  width: 6.4rem;
+  height: 6.4rem;
+  margin: 0 auto;
+  background-size: 6.4rem;
+  background-image: url('images/loading_icon_white.svg');
+}
+
+section.pin-dialog .pin-site-name {
+  margin: 0;
+  line-height: 6.5rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  font-style: italic;
+}
+
+section.pin-dialog header h2 {
+  margin: 0;
+  line-height: 6.2rem;
+  font-size: 1.8rem;
+  font-weight: 400;
+  font-family: sans-serif;
+  font-style: italic;
+  white-space: nowrap;
+  text-align: center;
+}
+
+section.pin-dialog footer {
+  padding: 2.3rem 0;
+}
+
+section.pin-dialog button {
+  position: relative;
+  display: block;
+  margin: 0 auto;
+  float: none;
+  width: -moz-fit-content;
+  background-color: white;
+  font-size: 1.6rem;
+  font-style: italic;
+}
+
+section.pin-dialog footer span {
+  display: block;
+  text-align: center;
+  line-height: 1.6rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  font-style: italic;
+}
+
+section.pin-dialog .origin {
+  padding: 0;
+  margin: 0 auto;
+  width: -moz-fit-content;
+  font-size: 1.4rem;
+  font-weight: 400;
+  font-style: italic;
+}
+
+section.pin-dialog .origin .tld {
+  display: inline;
+}
+
+section.pin-dialog .origin::before {
+  content: "";
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin: -0.7rem -2.5rem;
+  background-size: cover;
+  position: absolute;
+}
+
+section.pin-dialog.secure .origin {
+  padding-inline-start: 1.5rem;
+}
+
+section.pin-dialog.secure .origin::before {
+  background-image: url("images/light/ssl.png");
+}
+
+section.pin-dialog button[data-action="pin"] {
+  padding-inline-start: 4rem;
+  padding-inline-end: 2rem;
+}
+
+section.pin-dialog button[data-action="pin"]::before {
+  content: "";
+  width: 1.6rem;
+  height: 1.6rem;
+  position: absolute;
+  top: 1.2rem;
+  offset-inline-start: 2rem;
+  background-size: 1.6rem 1.6rem;
+  background-image: url("images/pin.png");
+}
+
+@media (orientation: landscape) {
+  section.pin-dialog {
+    width: 26rem;
+  }
+
+  section.pin-dialog header h2 {
+    line-height: 5rem;
+  }
+
+  section.pin-dialog .pin-site-name {
+    line-height: 4rem;
+  }
+
+  section.pin-dialog footer {
+    padding: 1.7rem 0;
+  }
+}
+
+/* Private browser icon in rocketbar */
+.appWindow.private > .chrome-plain.maximized .chrome-title-container,
+.appWindow.private > .chrome-combined.maximized .chrome-title-container {
+  padding-inline-start: 4rem;
+}
+
+.appWindow.private > .chrome.maximized .pb-icon {
+  display: block;
+  width: 4rem;
+  height: 100%;
+  position: absolute;
+  top: 0.1rem;
+  left: 0.3rem;
+  right: 0.3rem;
+  background-image: url("images/pb_rocketbar.png");
+  background-repeat: no-repeat;
+  background-size: 2.5rem;
+}
+html[dir="ltr"] .appWindow.private > .chrome.maximized .pb-icon { background-position: left 0.8rem center; }
+html[dir="rtl"] .appWindow.private > .chrome.maximized .pb-icon { background-position: right 0.8rem center; }
+
+
+/* SSL Lock Icons in rocketbar */
+.chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  padding-inline-start: 5.5rem;
+
+  background-repeat: no-repeat;
+  background-size: 3rem;
+  height: 3.2rem;
+}
+html[dir="ltr"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: left 3rem center;
+}
+html[dir="rtl"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: right 3rem center;
+}
+
+
+.private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  padding-inline-start: 6.5rem;
+}
+html[dir="ltr"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: left 3.7rem top 0.1rem;
+}
+html[dir="rtl"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: right 3.7rem top 0.1rem;
+}
+
+.chrome-plain .chrome-ssl-indicator {
+  display: none;
+
+  width: 1rem;
+
+  background: no-repeat center / 3rem content-box;
+}
+
+.chrome-ssl-indicator-ltr {
+  padding-right: .5rem; /* give some space between the indicator and the title */
+}
+
+.chrome-ssl-indicator-rtl {
+  padding-left: .5rem; /* give some space between the indicator and the title */
+  padding-right: 1rem; /* give some space between the indicator and the window's edge */
+}
+
+.chrome-plain:-moz-dir(ltr) .chrome-has-ssl-indicator .chrome-ssl-indicator-ltr,
+.chrome-plain:-moz-dir(rtl) .chrome-has-ssl-indicator .chrome-ssl-indicator-rtl {
+  display: unset;
+}
+
+.maximized .chrome-has-ssl-indicator[data-ssl="secure"] .chrome-ssl-indicator {
+  background-image: url("images/light/ssl.png");
+}
+
+.maximized .chrome-has-ssl-indicator[data-ssl="broken"] .chrome-ssl-indicator {
+  background-image: url("images/light/ssl_broken.png");
+}
+
+.site-icon {
+  width: 3.4rem;
+  height: 3.4rem;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url('images/loading_icon_white.svg');
+  position: absolute;
+  /* The icon renderer adds 4px padding for getting a smoother
+     rounded icon. Reallocating to fit with the url bar
+  */
+  top: -.1rem;
+  offset-inline-start: -.1rem;
+}
+
+.light .site-icon,
+.light section.pin-dialog .pin-site-icon {
+  background-image: url('images/loading_icon_dark.svg');
+}
+
+.homescreen > .chrome .site-icon,
+.private > .chrome .site-icon {
+  display: none;
+}
+
+/* Handle urlbar sizing when back or forward buttons are disabled */
+.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
+.collapsible .chrome:not(.maximized) .forward-button:not([disabled]) + .urlbar {
+  transform: scaleX(var(--rocketbar-scale));
+}
+
+.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: scaleX(var(--rocketbar-scale));
+}
+
+
+/* Buttons */
+.controls button {
+  -moz-appearance: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 4rem;
+  width: 4rem;
+  height: 4rem;
+  line-height: 4rem;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-size: contain;
+  opacity: 1;
+  border-radius: 0;
+}
+html[dir="ltr"] .controls button { float: left; }
+html[dir="rtl"] .controls button { float: right; }
+
+/* Remove focus outline from button */
+.controls button::-moz-focus-inner {
+  border: 0;
+}
+
+.controls .reload-button,
+.controls .stop-button {
+  background-size: 3rem auto;
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: absolute;
+  bottom: 0.1rem;
+  offset-inline-end: 0;
+  padding: 0 0.3rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.controls .reload-button::before,
+.controls .stop-button::before {
+  content: '';
+  position: relative;
+  offset-inline-end: 0.2rem;
+  display: block;
+  height: 2.4rem;
+  border-inline-start: .1rem solid rgba(0,0,0,0.05);
+}
+
+/* Vertically align butons outside of urlbar. */
+.controls > button {
+  position: relative;
+  top: -0.2rem;
+}
+
+.controls > button.menu-button,
+.controls > button.windows-button {
+  position: absolute;
+  offset-inline-end: 0;
+}
+
+.controls .reload-button[disabled],
+.loading .controls .reload-button {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.controls .stop-button {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.loading .controls .stop-button {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.controls .back-button[disabled],
+.controls .forward-button[disabled] {
+  display: none;
+}
+
+.chrome.maximized .controls .menu-button[disabled] {
+  opacity: 0.2;
+}
+
+.appWindow:not(.bar) > .chrome button {
+  opacity: 0;
+  transition: opacity 0.15s ease-in;
+  pointer-events: none;
+}
+
+.appWindow:not(.bar) > .chrome.maximized button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+
+/* Default (dark) theme button styles */
+html[dir="ltr"] .controls .back-button { background-image: url("images/dark/left.png"); }
+html[dir="rtl"] .controls .back-button { background-image: url("images/dark/right.png"); }
+
+html[dir="ltr"] .controls .back-button:active { background-image: url("images/dark/left_active.png"); }
+html[dir="rtl"] .controls .back-button:active { background-image: url("images/dark/right_active.png"); }
+
+html[dir="ltr"] .controls .forward-button { background-image: url("images/dark/right.png"); }
+html[dir="rtl"] .controls .forward-button { background-image: url("images/dark/left.png"); }
+
+html[dir="ltr"] .controls .forward-button:active { background-image: url("images/dark/right_active.png"); }
+html[dir="rtl"] .controls .forward-button:active { background-image: url("images/dark/left_active.png"); }
+
+.controls .menu-button {
+  background-image: url("images/dark/options.png");
+}
+
+.controls .menu-button:active {
+  background-image: url("images/dark/options_active.png");
+}
+
+.controls .reload-button {
+  background-image: url("images/dark/reload.png");
+}
+
+.controls .reload-button:active {
+  background-image: url("images/dark/reload_active.png");
+}
+
+.controls .stop-button {
+  background-image: url("images/dark/stop.png");
+}
+
+.controls .stop-button:active {
+  background-image: url("images/dark/stop_active.png");
+}
+
+.controls .windows-button {
+  background-image: url('images/dark/windows.png');
+}
+
+.controls .windows-button:active {
+  background-image: url('images/dark/windows_active.png');
+}
+
+/* Light theme button styles */
+.light .controls .menu-button:active {
+  background-image: url("images/light/overflow_active.png");
+}
+
+html[dir="ltr"] .light .controls .back-button { background-image: url("images/light/left.png"); }
+html[dir="rtl"] .light .controls .back-button { background-image: url("images/light/right.png"); }
+
+html[dir="ltr"] .light .controls .back-button:active { background-image: url("images/light/left_active.png"); }
+html[dir="rtl"] .light .controls .back-button:active { background-image: url("images/light/right_active.png"); }
+
+html[dir="ltr"] .light .controls .forward-button { background-image: url("images/light/right.png"); }
+html[dir="rtl"] .light .controls .forward-button { background-image: url("images/light/left.png"); }
+
+html[dir="ltr"] .light .controls .forward-button:active { background-image: url("images/light/right_active.png"); }
+html[dir="rtl"] .light .controls .forward-button:active { background-image: url("images/light/left_active.png"); }
+
+.light .controls .menu-button {
+  background-image: url("images/light/options.png");
+}
+
+.light .controls .menu-button:active {
+  background-image: url("images/light/options_active.png");
+}
+
+.light .controls .reload-button {
+  background-image: url("images/light/reload.png");
+}
+
+.light .controls .reload-button:active {
+  background-image: url("images/light/reload_active.png");
+}
+
+.light .controls .stop-button {
+  background-image: url("images/light/stop.png");
+}
+
+.light .controls .stop-button:active {
+  background-image: url("images/light/stop_active.png");
+}
+
+.light .controls .windows-button {
+  background-image: url('images/light/windows.png');
+}
+
+.light .controls .windows-button:active {
+  background-image: url('images/light/windows_active.png');
+}
+
+.light .controls .menu-button:active {
+  background-image: url("images/light/overflow_active.png");
+}
+
+/* Overflow menu */
+
+gaia-overflow-menu button#new-window {
+  background-image: url("images/menu_new_window.png");
+}
+
+gaia-overflow-menu button#add-to-home {
+  background-image: url("images/menu_add_to_homescreen.png");
+}
+
+gaia-overflow-menu button#share {
+  background-image: url("images/menu_share.png");
+}
+
+/* Progress */
+.appWindow.collapsible > .chrome gaia-progress,
+.appWindow.scrollable > .chrome gaia-progress {
+  top: 7.3rem;
+}
+.appWindow.bar > .chrome gaia-progress,
+.appWindow.fullscreen-app > .chrome gaia-progress,
+.appWindow.popupWindow > .chrome gaia-progress,
+.appWindow.trustedWindow > .chrome gaia-progress {
+  top: 0;
+}
+
+/* App specifics */
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls button {
+  display: none;
+}
+
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .urlbar {
+  width: calc(100% - 8rem);
+}
+
+.appWindow:not(.collapsible) > .chrome-combined .title {
+  width: calc(100%);
+}

assets/webapps/system.gaiamobile.org/style/chrome/images/loading_icon_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" fill="#858585" d="M5.7 25.4l-1.7 1c1.2 1.7 2.8 3.2 4.7 4.3l.9-1.6c-1.5-1-2.8-2.2-3.9-3.7zM4.1 11.2l-1.6-.9c-.9 2-1.4 4.1-1.5 6.4h1.9c0-2 .5-3.8 1.2-5.5zm5.1-6l-1-1.6c-2 1.3-3.7 3-4.9 5.1l1.7.9c1.1-1.8 2.5-3.3 4.2-4.4zm21.9 11.5H33c0-2.2-.5-4.3-1.4-6.2l-1.6.9c.7 1.6 1.1 3.4 1.1 5.3zm-2-7l1.6-1c-1.1-1.9-2.7-3.5-4.4-4.8l-1 1.7c1.5 1.1 2.8 2.5 3.8 4.1zM3 18.6H1.1c.2 2.2.9 4.3 2 6.2l1.6-.9c-.9-1.6-1.5-3.4-1.7-5.3zm21.9 10.1l.9 1.6c1.6-1.1 3.1-2.5 4.2-4.1l-1.6-.9c-.9 1.3-2.1 2.5-3.5 3.4zm-7-25.8c2.1.1 4.1.7 5.8 1.7l.9-1.6c-2-1.1-4.3-1.8-6.7-1.9v1.8zm-7.5 28.7c1.8.8 3.7 1.3 5.7 1.4v-1.9c-1.7-.1-3.3-.5-4.8-1.2l-.9 1.7zm19-7.9l1.6.9c1-1.8 1.6-3.9 1.9-6.1H31c-.2 1.9-.7 3.6-1.6 5.2zm-11.5 7.4V33c2.3-.1 4.4-.7 6.3-1.7l-.9-1.6c-1.6.8-3.4 1.3-5.4 1.4zm-7-26.8c1.6-.8 3.3-1.3 5.2-1.4V1c-2.2.1-4.3.7-6.2 1.6l1 1.7z" opacity=".5"/></svg>

assets/webapps/system.gaiamobile.org/style/chrome/images/loading_icon_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M31.1 16.7H33c0-2.2-.5-4.3-1.4-6.2l-1.6.9c.7 1.6 1.1 3.4 1.1 5.3zM5.7 25.4l-1.7 1c1.2 1.7 2.8 3.2 4.7 4.3l.9-1.6c-1.5-1-2.8-2.2-3.9-3.7zM3 18.6H1.1c.2 2.2.9 4.3 2 6.2l1.6-.9c-.9-1.6-1.5-3.4-1.7-5.3zM9.2 5.2l-1-1.6c-2 1.3-3.7 3-4.9 5.1l1.7.9c1.1-1.8 2.5-3.3 4.2-4.4zm19.9 4.5l1.6-1c-1.1-1.9-2.7-3.5-4.4-4.8l-1 1.7c1.5 1.1 2.8 2.5 3.8 4.1zm-25 1.5l-1.6-.9c-.9 2-1.4 4.1-1.5 6.4h1.9c0-2 .5-3.8 1.2-5.5zm20.8 17.5l.9 1.6c1.6-1.1 3.1-2.5 4.2-4.1l-1.6-.9c-.9 1.3-2.1 2.5-3.5 3.4zm-7-25.8c2.1.1 4.1.7 5.8 1.7l.9-1.6c-2-1.1-4.3-1.8-6.7-1.9v1.8zm11.5 20.8l1.6.9c1-1.8 1.6-3.9 1.9-6.1H31c-.2 1.9-.7 3.6-1.6 5.2zM10.9 4.3c1.6-.8 3.3-1.3 5.2-1.4V1c-2.2.1-4.3.7-6.2 1.6l1 1.7zm-.5 27.3c1.8.8 3.7 1.3 5.7 1.4v-1.9c-1.7-.1-3.3-.5-4.8-1.2l-.9 1.7zm7.5-.5V33c2.3-.1 4.4-.7 6.3-1.7l-.9-1.6c-1.6.8-3.4 1.3-5.4 1.4z" opacity=".75"/></svg>

assets/webapps/system.gaiamobile.org/style/cost_control/cost_control.css

@@ -0,0 +1,14 @@
+/* Resetting */
+#utility-tray-footer > #cost-control-widget,
+#cost-control-widget iframe {
+  height: 5.2rem;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+#cost-control-widget iframe {
+  margin: 0 1.5rem;
+  width: calc(100% - 3rem);
+  border-bottom: .1rem solid rgba(255, 255, 255, .05);
+}

assets/webapps/system.gaiamobile.org/style/crash_reporter/crash_reporter.css

@@ -0,0 +1,66 @@
+#crash-dialog h1 {
+  border-bottom: none;
+}
+
+#crash-dialog p {
+  overflow: visible;
+}
+
+#crash-dialog p:not(:first-of-type) {
+  border-top: none;
+}
+
+#crash-dialog a {
+  text-decoration: underline;
+  margin-top: 2rem;
+}
+
+#crash-dialog.learn-more > form {
+  display: none;
+}
+
+#crash-dialog:not(.learn-more) > section {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* "Crash Reports" information page */
+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;
+}
+
+#crash-dialog > section {
+  background-color: #fff;
+  color: #000;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+#crash-dialog > section > div > ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#crash-dialog .description {
+  font-size: 1.5rem;
+  word-wrap: break-word;
+  -moz-hyphens: auto;
+  white-space: normal;
+  padding: 1rem 3rem;
+}

assets/webapps/system.gaiamobile.org/style/date_selector/date_selector_extended.css

@@ -0,0 +1,9 @@
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="date-selector"] {
+  height: calc(100% - 7rem - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="date-selector"] {
+    height: calc(100% - 7rem);
+  }
+}

assets/webapps/system.gaiamobile.org/style/definitions.css

@@ -0,0 +1,11 @@
+/*csslint empty-rules: false*/
+/* See bug 1053721 */
+:root {
+  --software-home-button-height: 5rem;
+  --statusbar-height: 3rem;
+
+  /* The scale factor for the shrinking rocketbar */
+  /* 0.682 = --statusbar-height (3rem) / rocketbar height (4.4rem) */
+  --rocketbar-scale: 0.682;
+  --rocketbar-urlbar-height: 4.4rem;
+}

assets/webapps/system.gaiamobile.org/style/devtools/developer_hud.css

@@ -0,0 +1,28 @@
+.developer-hud {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+
+  flex-wrap: wrap-reverse;
+  align-content: flex-start;
+  justify-content: flex-end;
+}
+
+#screen > .developer-hud {
+  flex-wrap: wrap;
+}
+
+.hidden-developer-hud .developer-hud {
+  display: none;
+}
+
+.developer-hud > .widgets {
+  width: 100%;
+  height: 30px;
+  opacity: 0.6;
+}

assets/webapps/system.gaiamobile.org/style/devtools/devtools_auth.css

@@ -0,0 +1,36 @@
+#devtools-auth-dialog:before {
+  display: none;
+}
+
+#devtools-auth-dialog {
+  padding: 0;
+}
+
+#devtools-auth-dialog .container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#devtools-auth-dialog header {
+  font-size: 1.5rem;
+  font-weight: normal;
+  padding: 1rem 1.5rem;
+  white-space: normal;
+}
+
+#devtools-auth-dialog .video-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#devtools-auth-dialog video {
+  height: 100%;
+  object-fit: cover;
+}
+
+#devtools-auth-dialog menu {
+  position: static;
+}

assets/webapps/system.gaiamobile.org/style/edges/edges.css

@@ -0,0 +1,63 @@
+#screen.dialog #left-panel,
+#screen.dialog #right-panel,
+#screen.screenreader .gesture-panel,
+.gesture-panel.disabled {
+  visibility: hidden;
+}
+
+#top-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2rem;
+}
+
+#screen.rocketbar-focused #left-panel,
+#screen.rocketbar-focused #right-panel {
+  pointer-events: none;
+}
+
+#left-panel {
+  position: absolute;
+  height: calc(100% - 10rem);
+  width: 2rem;
+  left: 0;
+  top: 6rem;
+
+  border-radius: 0 4rem 4rem 0;
+
+  background-color: red;
+  opacity: 0;
+}
+
+#right-panel {
+  position: absolute;
+  height: calc(100% - 10rem);
+  width: 2rem;
+  right: 0;
+  top: 6rem;
+
+  border-radius: 4rem 0 0 4rem;
+
+  background-color: green;
+  opacity: 0;
+}
+
+#screen.edges-debug .gesture-panel {
+  opacity: 0.5;
+}
+
+@media (orientation: portrait) {
+  #screen.software-button-enabled #right-panel,
+  #screen.software-button-enabled #left-panel {
+    height: calc(100% - 10rem - var(--software-home-button-height));
+  }
+}
+
+@media (orientation: landscape) {
+  #screen:not(:-moz-full-screen-ancestor).software-button-enabled #right-panel {
+    width: 7rem;
+    border-radius: 2rem 0 0 2rem;
+  }
+}

assets/webapps/system.gaiamobile.org/style/emergency_callback_manager/emergency_callback_manager.css

@@ -0,0 +1,115 @@
+#emergency-callback-notification {
+  display: none;
+}
+
+#emergency-callback-notification.displayed {
+  display: block;
+}
+
+@keyframes fn-rotate {
+  from {
+    transform: rotate(1deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#emergency-callback-notification > .title-container {
+  margin: 1rem 0 0;
+  margin-inline-start: 3.7rem;
+}
+
+#emergency-callback-notification > .timer {
+  margin: 0;
+  margin-inline-start: 3.7rem;
+}
+
+/* Toaster */
+#emergency-callback-toaster > .icon {
+  background-image: url('images/emergency-callback-icon.png');
+  background-size: 2.4rem;
+  display: block;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin: 1.3rem;
+}
+html[dir="ltr"] #emergency-callback-toaster > .icon { float: left; }
+html[dir="rtl"] #emergency-callback-toaster > .icon { float: right; }
+
+#emergency-callback-toaster > .message {
+  position: absolute;
+  offset-inline-start: 5rem;
+  top: 1rem;
+  width: calc(100% - 9.5rem);
+  line-height: 2.8rem;
+}
+
+#emergency-callback-toaster > .timer {
+  position: absolute;
+  offset-inline-end: 0;
+  top: 1rem;
+  width: 4rem;
+  line-height: 2.8rem;
+}
+
+#emergency-callback-toaster {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 5rem;
+  color: #52b8cc;
+  font-size: 1.5rem;
+  font-weight: 500;
+  overflow: hidden;
+  background-image: url('images/grey-noise-bg.png');
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  box-sizing: border-box;
+  border-bottom: 0.1rem #2c2c2c solid;
+  transform: translateY(-5rem);
+  transition: transform .3s ease-in-out;
+}
+
+#emergency-callback-toaster.displayed {
+  transform: translateY(0);
+}
+
+/* Dialog */
+#emergency-callback-dialog {
+  /* Increasing padding size form 1.5 to 3.5rem for confirm dialogs with statusbar active */
+  padding-top: 3.5rem;
+  display: none;
+}
+#screen.software-button-enabled #emergency-callback-dialog {
+  bottom: var(--software-home-button-height);
+}
+
+
+#emergency-callback-dialog.visible {
+  display: inline-block;
+  pointer-events: auto;
+}
+
+#emergency-callback-dialog img {
+  position: absolute;
+}
+
+#emergency-callback-dialog img {
+  position: absolute;
+  top: calc(50% - 3.2rem);
+}
+
+#emergency-callback-dialog-wrapper > :not(img) {
+  display: block;
+  margin-inline-start: 8rem;
+}
+
+#emergency-callback-icon {
+  background-image: url('images/emergency-callback-icon.png');
+  width: 6.4rem;
+  height: 6.4rem;
+  margin-inline-start: -0.5rem;
+}

assets/webapps/system.gaiamobile.org/style/entry_sheet/entry_sheet.css

@@ -0,0 +1,83 @@
+.entrySheet {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 2.4rem);
+  top: 2.4rem;
+  left: 0;
+  opacity: 1;
+  visibility: visible;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.entrySheet .throbber {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.3rem;
+  z-index: 1;
+}
+
+.entrySheet.disappearing {
+  pointer-events: none;
+  transition: visibility ease .6s, opacity ease .6s;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.entrySheet .throbber[data-loading="true"] {
+  height: 0.3rem;
+  background-image: url('../shared/progress.gif');
+  background-size: auto 0.3rem;
+}
+
+.entrySheet.active .content,
+.entrySheet.active .header {
+  transform: translateY(0);
+}
+
+.entrySheet .header {
+  transition: transform .6s ease;
+  transform: translateY(-100%);
+  height: 5rem;
+  width: 100%;
+  top: 0;
+  offset-inline-start: 0;
+  position: absolute;
+}
+
+/*
+ * We need to style the title placed in the entrySheet's gaia-header
+ * To ensure it overflows and truncates for the correct direction
+ * for the content placed in there
+ */
+gaia-header h1 > bdi.entrySheet-title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  unicode-bidi: -moz-plaintext;
+}
+
+
+.entrySheet .content {
+  position: absolute;
+  top: 5rem;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 5rem);
+
+  background-color: #fff;
+  transform: translateY(100%);
+  transition: transform .6s ease;
+}
+
+.entrySheet .content > iframe {
+  z-index: 1;
+}
+
+.entrySheet .content > * {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+

assets/webapps/system.gaiamobile.org/style/fake-notification.css

@@ -0,0 +1,54 @@
+.fake-notification {
+  height: 6rem;
+  padding: 0 1.2rem;
+  font: 1.53rem/1.8rem auto;
+  color: #e7e7e7;
+  overflow: hidden;
+  border-bottom: .1rem solid rgba(255, 255, 255, .05);
+}
+
+.fake-notification [data-icon] {
+  width: 3rem;
+  height: 3rem;
+  margin: 1.5rem 0;
+}
+html[dir="ltr"] .fake-notification [data-icon] { float: left; }
+html[dir="rtl"] .fake-notification [data-icon] { float: right; }
+
+/* alert icon: white on red background */
+[data-icon].alert {
+  color: #fff;
+  background-color: #b90000;
+  border-radius: 50%;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin: 1.8rem 0;
+}
+
+[data-icon].alert:before {
+  overflow: hidden;
+  display: block;
+  border-radius: 50%;
+  font-size: 2rem; /* Slightly decreasing font-size to get the icon to fit in the circle */
+  margin-top: -0.2rem;
+  text-align: center;
+}
+
+.fake-notification .title-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fake-notification .detail {
+  color: #858585;
+  font-size: 1.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notification.attention-notification {
+  background-color: rgba(0, 202, 242, 0.3);
+}
+

assets/webapps/system.gaiamobile.org/style/firefox_account/firefox_account_container.css

@@ -0,0 +1,29 @@
+#fxa-dialog,
+#fxa-iframe {
+  width: 100%;
+  height: 100%;
+  background: white;
+  border: 0;
+}
+
+#fxa-dialog:before {
+  display: none;
+}
+
+#fxa-dialog.fxa-dialog {
+  animation: show-fx-acct .5s;
+}
+
+#fxa-dialog.fxa-dialog.closing {
+  animation: hide-fx-acct .5s;
+}
+
+@keyframes show-fx-acct {
+  0% { transform: translateY(100%); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes hide-fx-acct {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(100%); }
+}

assets/webapps/system.gaiamobile.org/style/icc.css

@@ -0,0 +1,143 @@
+
+#icc-view.visible,
+#icc-view .visible {
+  display: block;
+}
+
+#icc-view {
+  display: none;
+  position: fixed;
+  width: 100%;
+  top: var(--statusbar-height);
+  background: #f4f4f4;
+  color: #000;
+  -moz-box-sizing: border-box;
+}
+
+#icc-view > section {
+  display: none;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  height: 100%;
+}
+
+#icc-view > section > p {
+  width: calc(100% - 6rem);
+  padding: 0 3rem;
+  overflow: scroll;
+  margin: 0;
+}
+
+#icc-view > section > form {
+  padding: 0 1.5rem;
+  width: calc(100% - 3rem);
+  overflow: scroll;
+  margin: 0;
+}
+
+#icc-view p {
+  color: black;
+  white-space: pre-line;
+}
+
+#icc-view > section > form > p {
+  margin: 0 1.5rem 1.4rem;
+  overflow: scroll;
+  padding: 0;
+}
+
+#icc-view > section[data-icons] > form > p.stk-no-text {
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+#icc-view > section[data-icons] > form > input {
+  margin: 0 0 2rem;
+}
+
+#icc-view > section[data-icons=true] > form > input {
+  margin: 0 0 2rem;
+}
+
+#icc-view > section span.icons {
+  display: block;
+  width: calc(100% - 6rem);
+  padding: 2rem 3rem 0;
+}
+
+#icc-view > section > form span.icons {
+  padding: 2rem 1.5rem 0;
+}
+
+#icc-view > section[data-icons=true] span.icons,
+#icc-view > section[data-icons=true] > form span.icons {
+  padding-bottom: 1.4rem;
+}
+
+#icc-view > section[data-icons=true] span.icons canvas {
+  margin-right: 1.5rem;
+}
+
+#icc-view > section[data-icons=true] span.icons canvas:last-of-type {
+  margin-right: 0;
+}
+
+#icc-input menu button:first-child,
+#icc-confirm menu button:first-child {
+  margin: 0;
+}
+
+#icc-input menu button,
+#icc-input .yesnodisabled  {
+  width: calc((100% - 2rem) / 2);
+  margin-left: 1rem;
+}
+
+#icc-input .yesnoenabled {
+  display: none;
+}
+.yesnomode menu button {
+  width: calc((100% - 2rem) / 3);
+  margin-left: 1rem;
+}
+#icc-input.yesnomode .yesnoenabled {
+  display: inline-block;
+}
+
+#icc-input.yesnomode button,
+#icc-input.yesnomode menu span {
+  width: calc((100% - 3rem) / 3);
+}
+#icc-input.yesnomode menu .yesnoenabled {
+  margin-left: 1rem;
+}
+#icc-input.yesnomode menu .yesnoenabled button {
+  width: 100%;
+}
+
+#icc-input.yesnomode .yesnodisabled {
+  display: none;
+}
+
+#icc-input .yesnodisabled button[disabled] {
+  background: none repeat scroll 0 0 rgb(95, 95, 95);
+  color: rgb(77, 77, 77);
+  text-shadow: none;
+  border-color: rgb(77, 77, 77);
+  pointer-events: none;
+}
+
+#icc-input-box.full {
+  animation: full-dance .5s;
+  animation-iteration-count: 2;
+}
+
+@keyframes full-dance {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(10px); }
+  50% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+  100% { transform: translateX(0); }
+}

assets/webapps/system.gaiamobile.org/style/ime_menu.css

@@ -0,0 +1,55 @@
+#screen.software-button-enabled .ime-menu {
+  bottom: var(--software-home-button-height);
+}
+
+@media (orientation: landscape) {
+  #screen.software-button-enabled .ime-menu {
+    bottom: 0;
+    /* BiDi note: the software home button should not be mirrored in RTL. */
+    right: var(--software-home-button-height);
+  }
+}
+
+.ime-menu .item-label {
+  font-size: 1.8rem;
+  color: #FFF;
+  font-weight: 400;  /* Regular */
+}
+
+.ime-menu .item-note {
+  font-size: 1.6rem;
+  color: #C3C3C3;
+  font-weight: 300; /* Light */
+}
+
+/* To override the styling in building block */
+.ime-menu[role="dialog"][data-type="value-selector"] [role="listbox"] .item-label {
+  line-height: normal;
+  padding: 0.9rem 2.6rem 0;
+  padding-inline-start: 1.5rem;
+}
+
+.ime-menu[role="dialog"][data-type="value-selector"] [role="listbox"] .item-note {
+  line-height: normal;
+  padding: 0.3rem 2.6rem 0.9rem;
+  padding-inline-start: 1.5rem;
+}
+
+/* For IME Menu buttons */
+.ime-menu-button-container {
+  white-space: nowrap;
+  margin: 0;
+  padding: 1.5rem;
+  background: #4d4d4d;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+/* Need 2 selectors to override the general rule */
+.ime-menu-button-container > .ime-menu-button {
+  margin: 0;
+}

assets/webapps/system.gaiamobile.org/style/media_playback/media_playback.css

@@ -0,0 +1,92 @@
+.media-playback-container {
+  height: auto;
+  padding: 0 1.8rem;
+}
+
+.media-playback-container.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.media-playback-nowplaying {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  height: 2.4rem;
+}
+
+.media-playback-nowplaying > .track {
+  display: table-cell;
+  vertical-align: bottom;
+  padding: 0 1.5rem;
+  font: italic 1.4rem auto;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-playback-controls {
+  height: 5.6rem;
+  width: 100%;
+  overflow: hidden;
+  text-align: center;
+  font-size: 0; /* ensure there's no space between the buttons */
+
+  /* If we inherit the tray visibility, we end up causing Bug 1155091 when
+   * the icon font loads in the playback controls.
+   */
+  visibility: visible;
+}
+
+.media-playback-controls > [data-icon] {
+  width: calc(100% / 3);
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: #e7e7e7;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+.media-playback-controls > [data-icon]:before {
+  font-size: 4rem;
+  line-height: 5.6rem;
+}
+
+/* to override the .fake-notification [data-icon] rule */
+html[dir="rtl"] .media-playback-controls [data-icon] {
+  float: left;
+}
+
+.media-playback-controls > .previous {
+  text-align: left;
+}
+
+.media-playback-controls > .next {
+  text-align: right;
+}
+
+.media-playback-controls > div {
+  transition: 0s var(--transition-duration); /* Delay transition post tap by some milliseconds. */
+}
+
+/* This selector applies on the lockscreen too. */
+[role="dialog"] .media-playback-controls > div:active,
+.media-playback-controls > div:active {
+  background-color: transparent;
+  color: #0ac;
+  transition: 0s;
+}
+
+/* Lock screen music player */
+#lockscreen-media-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 9.3rem;
+  background: rgba(51, 51, 51, 0.3);
+  z-index: 1;
+}

assets/webapps/system.gaiamobile.org/style/media_recording/media_recording.css

@@ -0,0 +1,39 @@
+#media-recording-status-list {
+  display: none;
+}
+
+#media-recording-status-list.displayed {
+  display: block;
+}
+
+.media-recording-status > .title-container {
+  padding-top: 1rem;
+  margin-inline-start: 3.7rem;
+  display: flex;
+}
+
+.media-recording-status > .title-container .title {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-inline-end: .5rem;
+}
+
+.media-recording-status > .title-container .timestamp {
+  flex: initial;
+  top: -.2rem;
+  offset-inline-end: 1.5rem;
+  padding: 0;
+  max-width: 7.5rem;
+  font-size: 1.4rem;
+  font-style: italic;
+  color: #858585;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-recording-status > .message {
+  margin-inline-start: 3.7rem;
+}

assets/webapps/system.gaiamobile.org/style/mobileid/mobileid.css

@@ -0,0 +1,26 @@
+#mobileid-dialog,
+#mobileid-iframe {
+  width: 100%;
+  height: 100%;
+  background: white;
+  border: 0;
+}
+
+
+#mobileid-dialog.opening {
+  animation: show-mob-id .5s;
+}
+
+#mobileid-dialog.closing {
+  animation: hide-mob-id .5s;
+}
+
+@keyframes show-mob-id {
+  0% { transform: translateY(100%); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes hide-mob-id {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(100%); }
+}

assets/webapps/system.gaiamobile.org/style/modal_dialog/modal_dialog.css

@@ -0,0 +1,122 @@
+#modal-dialog-alert,
+#modal-dialog-confirm,
+#modal-dialog-prompt,
+#modal-dialog-custom-prompt,
+#modal-dialog-error,
+#modal-dialog-select-one {
+  display: none;
+}
+
+#modal-dialog input {
+  border-radius: 0.2rem;
+  height: 4rem;
+  font-size: 2rem;
+  width: 100%;
+  color: white;
+  background: none;
+  box-sizing: border-box;
+}
+
+#screen.modal-dialog #modal-dialog,
+#modal-dialog-alert.visible,
+#modal-dialog-confirm.visible,
+#modal-dialog-prompt.visible,
+#modal-dialog-custom-prompt.visible,
+#modal-dialog-error.visible,
+#modal-dialog-select-one.visible {
+  display: block;
+}
+
+.appWindow > .modal-dialog .modal-dialog-custom-prompt {
+  height: auto;
+  padding: 0 0 7rem;
+}
+
+#screen.fullscreen-layout-app.software-button-enabled .appWindow > .modal-dialog {
+  height: calc(100% - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled .appWindow > .modal-dialog {
+    height: 100%;
+  }
+}
+
+.appWindow > .modal-dialog .modal-dialog-custom-prompt p {
+  display: block !important;
+}
+
+.modal-dialog-custom-prompt.visible .hidden {
+  display: none;
+}
+
+#modal-dialog-error {
+  background-color: #2d2d2d;
+}
+
+#modal-dialog-sad-face {
+  font-size: 7.2rem;
+  margin-inline-end: 0.2rem;
+}
+html[dir="ltr"] #modal-dialog-sad-face { float: left; }
+html[dir="rtl"] #modal-dialog-sad-face { float: right; }
+
+/* Confirm dialog */
+.modal-dialog-message-container p {
+  display: block;
+  word-wrap: break-word;
+  padding: 0 1.5rem;
+  margin: 0;
+}
+
+/* Select one dialog */
+
+#modal-dialog-select-one .modal-dialog-message-container {
+  display: block;
+  padding: 0 1.5rem;
+  position: absolute;
+  offset-inline-start: 0;
+  bottom: 6.8rem;
+}
+
+#modal-dialog-select-one h3 {
+  line-height: 1.8rem;
+}
+
+#modal-dialog-select-one ul {
+  width: 100%;
+  height: auto;
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 2rem;
+  display: block;
+  overflow: hidden;
+}
+
+#modal-dialog-select-one ul > li {
+  width: 100%;
+  padding-top: 1rem;
+  margin: 0;
+  display: block;
+  overflow: hidden;
+  border: none;
+  height: auto;
+  line-height: normal;
+}
+
+#modal-dialog-select-one ul > li > button {
+  color: #fff;
+  text-shadow: none;
+  text-align: start;
+  margin: 0;
+  background: #4E4E4E padding-box;
+  border: solid 1px rgba(0, 0, 0, 0.25);
+  padding-inline-start: 1.5rem;
+  line-height: 2rem;
+}
+
+#modal-dialog-select-one ul > li > button:active {
+  background-color: #006f86;
+  color: #333;
+  text-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.25);
+}

assets/webapps/system.gaiamobile.org/style/modal_dialog/prompt.css

@@ -0,0 +1,52 @@
+/* ----------------------------------
+ * STYLES FOR PROMPT
+ * Requires:
+    menu-dialoges/core.css
+    other/buttons/style.css
+ * ---------------------------------- */
+
+[role="dialog"] p {
+  font-weight: 300;
+  font-size: 2.2rem;
+  color: #FAFAFA;
+  margin: 1rem 0 0;
+  padding: 1rem 1.5rem;
+}
+
+[role="dialog"] p:last-child {
+  overflow-x: hidden;
+  overflow-y: auto;
+  word-wrap: break-word;
+}
+
+[role="dialog"] .content {
+  font-weight: 300;
+  font-size: 2.2rem;
+  color: #fff;
+  border-bottom: 0.1rem solid #777;
+  margin: 0;
+  padding: 2.5rem 0 2rem;
+}
+
+[role="dialog"] .content img {
+  margin-inline-end: 2rem;
+}
+html[dir="ltr"] [role="dialog"] .content img { float: left; }
+html[dir="rtl"] [role="dialog"] .content img { float: right; }
+
+[role="dialog"] .content strong {
+  font-weight: 300;
+}
+
+[role="dialog"] .content small {
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #cbcbcb;
+  display: block;
+}
+
+/* Since considering 20px height of status bar,
+   overwrite padding top which is defined in shared/style/confirm.css*/
+form[role="dialog"][data-type="confirm"] {
+  padding: 2rem 0 7rem;
+}

assets/webapps/system.gaiamobile.org/style/net_error.css

@@ -0,0 +1,132 @@
+html {
+  font-size: 10px;
+}
+
+#net-error.hidden {
+  display: none;
+}
+
+#net-error #actions {
+  display: none;
+}
+
+#net-error.no-frame #actions {
+  display: flex;
+}
+
+#net-error.framed form[role="dialog"] {
+  background-image: none;
+  background-color: #f4f4f4;
+  color: black;
+  padding-bottom: 0;
+}
+
+#net-error.framed form[role="dialog"] p {
+  border-top-color: rgba(0, 0, 0, 0.10);
+  padding-top: 1.2rem;
+}
+
+#net-error.framed .title {
+  color: black;
+}
+
+#net-error.framed .message {
+  color: black;
+  font-size: 1.5rem;
+  width: calc(100% - 3rem);
+  line-height: 1.9rem;
+}
+
+#net-error #retry-icon {
+  display: none;
+}
+
+#net-error.framed #retry-icon {
+  display: inline-block;
+  height: 3rem;
+  width: 3rem;
+  padding-top: 0.2rem;
+}
+html[dir="ltr"] #net-error.framed #retry-icon { float: right; }
+html[dir="rtl"] #net-error.framed #retry-icon { float: left; }
+
+#net-error.framed #retry-icon.still {
+  background: url(net_error/iframe_reload_icon.png) center / 3rem no-repeat;
+  animation: none;
+}
+
+#net-error.framed.netOffline #retry-icon {
+  background: url(net_error/iframe_settings_icon.png) center / 3rem no-repeat;
+}
+
+form[role="dialog"][data-type="action"] > menu > button.icon {
+  background-repeat: no-repeat;
+  padding-inline-start: 4rem;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="dialog"][data-type="action"] > menu > button.icon { background-position: left 0.5rem center; }
+html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button.icon { background-position: right 0.5rem center; }
+
+form[role="dialog"][data-type="action"] > menu > button.icon-settings {
+  background-image: url(net_error/settings.png);
+}
+
+#net-error.no-frame.dialog .message {
+  line-height: 3rem;
+  font-size: 2.2rem;
+  color: #fff;
+  font-weight: normal;
+}
+
+#net-error.no-frame.alert .close {
+  width: 100%;
+}
+
+#net-error.no-frame.alert .reload {
+  display: none;
+}
+
+#net-error.no-frame.netOffline form[role="dialog"] > section {
+  text-align: center;
+  margin-top: -7rem;
+  bottom: 14rem;
+}
+
+#net-error.no-frame.netOffline .title {
+  font-size: 2.3rem;
+  line-height: 3.6rem;
+  font-weight: normal;
+}
+
+#failed-logo {
+  display: inline-block;
+  width: 7.4rem;
+  height: 12.5rem;
+  background-image: url(net_error/no_connectivity.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+@media (max-height: 380px) and (orientation: landscape) {
+  html[dir="ltr"] #net-error.no-frame.netOffline form[role="dialog"] > section {
+    text-align: left;
+  }
+  html[dir="rtl"] #net-error.no-frame.netOffline form[role="dialog"] > section {
+    text-align: right;
+  }
+
+  #net-error.no-frame.netOffline .title {
+    font-size: 2rem;
+    line-height: 2.8rem;
+    margin-inline-start: 6.8rem;
+  }
+
+  #failed-logo {
+    position: absolute;
+    top: 2rem;
+    offset-inline-start: 0;
+    width: 5rem;
+    height: 8.5rem;
+  }
+}
+

assets/webapps/system.gaiamobile.org/style/nfcconnect.css

@@ -0,0 +1,11 @@
+#nfc-connect-dialog .container {
+  position: absolute;
+  white-space: pre-wrap;
+  top: 6rem;
+  offset-inline-start: 0;
+  padding: 0 2rem;
+  font-size: 3rem;
+  height: calc(100% - 16rem);
+  width: calc(100% - 4rem);
+  overflow-y: scroll;
+}