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/tv_apps/smart-system/style/accessibility/accessibility.css

@@ -0,0 +1,25 @@
+.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 0.5s, opacity 0.5s;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+#accessibility-captions-box.visible {
+  visibility: visible;
+  opacity: 0.9;
+}

gaia/tv_apps/smart-system/style/action_menu/action_menu_extended.css

@@ -0,0 +1,64 @@
+#screen.software-button-enabled [role="dialog"][data-type="action"],
+#screen.software-button-enabled [role="dialog"][data-type="object"] {
+  bottom: 0;
+}
+
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"] {
+  height: calc(100% - 7rem);
+}
+
+/* Extending action menu with icon capability & transition */
+form[role="dialog"][data-type="action"],
+form[role="dialog"][data-type="object"] {
+	visibility: hidden;
+	transform: translateY(100%);
+	transition: transform ease-in-out .3s, visibility .3s;
+}
+
+form[role="dialog"][data-type="action"].visible,
+form[role="dialog"][data-type="object"].visible {
+	visibility: visible;
+	transform: translateY(0);
+}
+
+form[role="dialog"][data-type="action"],
+form[role="dialog"][data-type="object"] {
+  -moz-box-sizing: border-box;
+  background-color: rgba(0,0,0,0.9);
+}
+
+form[role="dialog"][data-type="action"] > header,
+form[role="dialog"][data-type="object"] > header {
+  top: 5rem;
+  left: 7.6rem;
+  font-size: 5.4rem;
+  font-style: italic;
+  height: 10rem;
+  color: white;
+  border: none;
+  padding: 0;
+}
+
+form[role="dialog"][data-type="action"] > div,
+form[role="dialog"][data-type="object"] > div {
+  margin: 0 auto;
+  width: 100%;
+  height: 30rem;
+  padding-top: 3rem;
+  top: calc(50% - 15rem);
+  left: 0;
+  text-align: center;
+  overflow: hidden;
+  position: absolute;
+}
+
+form[role="dialog"][data-type="action"] > div > menu {
+  transition: transform 0.2s ease;
+}
+
+form[role="dialog"][data-type="action"] > div > menu > div,
+form[role="dialog"][data-type="action"] > div > menu > div {
+  position: absolute;
+  left: 0;
+  margin: 0 3rem;
+}

gaia/tv_apps/smart-system/style/app_install_manager/app_install_manager.css

@@ -0,0 +1,85 @@
+/* dialogs */
+#app-install-dialogs h1,
+#app-install-dialogs p {
+  font-size: 3.8rem;
+  font-style: italic;
+  font-weight: lighter;
+  color: #9f9f9f;
+}
+/* ... end of dialogs */
+
+/* ... start of keyboard layout */
+#ime-layout-dialog {
+  display: none;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+#ime-layout-dialog.visible {
+  display: inline-block;
+  pointer-events: auto;
+}
+
+#ime-layout-dialog section {
+  width: 96rem;
+  /*height: 20rem;*/
+  height: auto;
+}
+
+#ime-layout-dialog h1 {
+  font-size: 3.8rem;
+  font-style: italic;
+  font-weight: lighter;
+  color: #9f9f9f;
+  border-bottom: none;
+  background: none;
+}
+
+ul#ime-list {
+  padding-left: 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;
+}
+
+ul#ime-list > li > label:not([for]),
+ul#ime-list > li > label.pack-checkbox.ime {
+  /* Positioning */
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  /* Display & Box Model */
+  width: 100%;
+  height: 100%;
+}
+
+ul#ime-list > li > label.pack-checkbox.ime > span {
+  left: auto;
+  right: 3rem;
+}
+
+ul#ime-list > li > label.pack-checkbox.ime ~ a {
+  padding-right: 6.1rem;
+}
+
+/* ... end of keyboard layout */

gaia/tv_apps/smart-system/style/app_titlebar.css

@@ -0,0 +1,79 @@
+.appWindow .titlebar {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  z-index: 6;
+}
+
+.appWindow:not(.lockScreenWindow) .titlebar .notifications-shadow {
+  background-image: -moz-element(#ambient-indicator);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  height: .2rem;
+}
+
+.appWindow .titlebar .titlebar-maximized {
+  width: 100%;
+}
+
+.appWindow .titlebar .titlebar-minimized {
+  background-size: cover;
+  width: calc(100% - 100% * var(--rocketbar-scale) + 8rem * var(--rocketbar-scale) - 0.5rem);
+  right: 0;
+  position: absolute;
+}
+
+/* Transitions between the maximized / minimized status bars */
+.chrome + .titlebar .titlebar-maximized {
+  opacity: 0;
+}
+
+.chrome.maximized + .titlebar .titlebar-maximized {
+  opacity: 1;
+}
+
+.chrome + .titlebar .titlebar-minimized {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.chrome.maximized + .titlebar .titlebar-minimized {
+  opacity: 0;
+}
+
+[data-manifest-name="FTU"]:not(.bar) > .chrome + .titlebar .titlebar-minimized,
+.homescreen:not(.bar) > .chrome + .titlebar .titlebar-minimized,
+.lockScreenWindow:not(.bar) > .chrome + .titlebar .titlebar-minimized,
+.attentionWindow:not(.bar) > .chrome + .titlebar .titlebar-minimized {
+  opacity: 0;
+}
+
+[data-manifest-name="FTU"]:not(.bar) > .chrome + .titlebar .titlebar-maximized,
+.homescreen:not(.bar) > .chrome + .titlebar .titlebar-maximized,
+.lockScreenWindow:not(.bar) > .chrome + .titlebar .titlebar-maximized,
+.attentionWindow:not(.bar) > .chrome + .titlebar .titlebar-maximized {
+  opacity: 1;
+}
+
+/* Special cases */
+#screen.utility-tray .appWindow .titlebar {
+  visibility: hidden;
+}
+
+/* Homescreen must show the maximized status bar */
+#homescreen .chrome + .titlebar .titlebar-maximized {
+  opacity: 1;
+}
+
+#homescreen .chrome + .titlebar .titlebar-minimized {
+  opacity: 0;
+}
+
+/* RTL View */
+html[dir="rtl"] .appWindow .titlebar .titlebar-minimized {
+  left: 0;
+  right: unset;
+}

gaia/tv_apps/smart-system/style/attention_indicator.css

@@ -0,0 +1,36 @@
+.attention-indicator {
+  background: none #00bec3 repeat;
+  height: 0.2666rem;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
+.attention-indicator.visible {
+  display: block;
+}
+
+.attention-indicator > .handle {
+  background: none #b2f2ff repeat;
+  animation: handle 1s infinite;
+  height: 0.2666rem;
+  width: 8.6rem;
+  margin: 0 auto;
+}
+
+.attention-indicator > .handle2 {
+  animation-delay: 333ms;
+  margin: -0.2666rem auto;
+}
+
+.attention-indicator > .handle3 {
+  animation-delay: 666ms;
+  margin: -0.5333rem auto;
+}
+
+@keyframes handle {
+  0%   { transform: scaleX(1.0); opacity: 1;}
+  100% { transform: scaleX(4.0); opacity: 0;}
+}

gaia/tv_apps/smart-system/style/authentication_dialog.css

@@ -0,0 +1,35 @@
+.authentication-dialog {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #EEEEEE;
+  font-weight: normal;
+}
+
+#screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
+  height: 100%;
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
+    height: 100%;
+  }
+}
+
+.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;
+ }

gaia/tv_apps/smart-system/style/battery_manager/battery_manager.css

@@ -0,0 +1,63 @@
+#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;
+}
+
+.icon-battery {
+  display: block;
+  float: left;
+  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;
+}
+
+#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;
+}
+
+#battery.disappearing {
+  animation: notification-disappear 1.5s;
+}
+
+@keyframes notification-disappear {
+  to {
+    transform: translateX(100%);
+  }
+  from {
+    transform: translateX(0);
+  }
+}

gaia/tv_apps/smart-system/style/bluetooth_transfer/bluetooth_transfer.css

@@ -0,0 +1,44 @@
+#bluetooth-transfer-status {
+  position: relative;
+  border-bottom: none;
+}
+
+#bluetooth-transfer-status .title-container {
+  margin: 1.4rem 0 0 3.7rem;
+  line-height: 3rem;
+}
+
+#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-left: -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);
+  }
+}

gaia/tv_apps/smart-system/style/browser_context_menu/browser_context_menu.css

@@ -0,0 +1,49 @@
+smart-button[type="contextmenu"] > .icon {
+  content: attr(data-icon);
+  background-position: center top 4.8rem;
+  background-size: 10rem;
+  background-repeat: no-repeat;
+  left: 0;
+  top: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+smart-button[type="contextmenu"].focused:not(.pressed) > .icon {
+  filter: url(invert.svg#invert);
+  opacity: 0.824;
+}
+
+smart-button[type="contextmenu"] {
+  /* position: relative for putting icon at absolute position */
+  position: relative;
+  width: 24rem;
+  height: 24rem;
+  border-radius: 12rem;
+  background-color: #5f5f5f;
+  padding-top: 14.8rem;
+  padding-bottom: 5rem;
+  font-size: 2rem;
+  font-style: italic;
+  text-align: center;
+  color: white;
+  line-height: 2.8rem;
+  box-sizing: border-box;
+}
+
+smart-button[type="contextmenu"].focused {
+  transform: scale(1.2);
+  color: #2d2d2d;
+  background-color: white;
+}
+
+smart-button[type="contextmenu"].pressed {
+  transform: scale(1);
+  background-color: #00caf2;
+  color: white;
+}
+
+smart-button[type="contextmenu"].focused.demo {
+  transform: scale(1.6667); /* scale to 40rem */
+}

gaia/tv_apps/smart-system/style/browser_context_menu/invert.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="invert">
+    <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1
+                                                            0 -1 0 0 1
+                                                            0 0 -1 0 1
+                                                            0 0  0 1 0"/>
+  </filter>
+</svg>

gaia/tv_apps/smart-system/style/browser_frame/browser_frame.css

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

gaia/tv_apps/smart-system/style/chrome/chrome.css

@@ -0,0 +1,461 @@
+.appWindow:not(.bar) > .chrome {
+  pointer-events: none;
+  top: 0;
+  height: calc(4.4rem);
+  transform: scaleY(var(--rocketbar-scale)) translateY(0);
+  transform-origin: top left;
+  transition: transform 0.2s ease-in-out, background-color 0.5s ease;
+
+  background-color: black;
+  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
+  color: white;
+}
+
+.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:not(.bar) > .chrome.maximized {
+  transform: scaleY(1) translateY(0);
+}
+
+.appWindow.fullscreen-app:not(.bar) > .chrome:not(.maximized) {
+  height: 0;
+  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;
+  bottom: 0.1rem;
+  width: 100%;
+  font-size: 0;
+}
+
+.chrome .controls .windows-button {
+  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 .controls,
+.homescreen:not(.bar) > .chrome gaia-progress {
+  visibility: hidden;
+}
+
+.lockScreenWindow:not(.bar) > .chrome {
+  background-color: transparent;
+}
+
+.homescreen:not(.bar) > .chrome {
+  background-image: none;
+}
+
+#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;
+}
+
+.appWindow.fullscreen-app:not(.browser) .chrome .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 */
+.search-app .menu-button,
+.search-app .controls .reload-button,
+.search-app .controls .stop-button
+.chrome .controls .windows-button {
+  display: none;
+}
+
+.appWindow.search-app .chrome .controls .urlbar {
+  width: calc(100% - 4.5rem);
+}
+
+.search-app .chrome .controls .windows-button {
+  display: inline;
+}
+
+/* URL bar */
+.chrome .controls .urlbar {
+  width: calc(100% - 4.5rem);
+  height: 3.4rem;
+  line-height: 3.4rem;
+  margin: 0 0 0.5rem;
+  border-radius: 1.8rem;
+  color: inherit;
+  overflow: hidden;
+  background-color: transparent;
+  float: left;
+  -moz-margin-start: 0.5rem;
+}
+
+.collapsible .chrome .controls button:not([disabled]) + button[disabled] + .urlbar,
+.collapsible .chrome .controls button:not([disabled]) + .urlbar {
+  -moz-margin-start: 0;
+}
+
+.maximized .controls .urlbar {
+  background-color: rgba(204,204,204,0.2);
+}
+
+.appWindow.light .maximized .controls .urlbar {
+  background-color: rgba(204,204,204,0.4);
+}
+
+.chrome .controls .urlbar .title {
+  width: calc(100% - 3.2rem);
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: 1.45rem;
+  -moz-padding-end: 0.8rem;
+  box-sizing: padding-box;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 300;
+  font-size: 1.8rem;
+  float: none;
+  background-color: rgba(204,204,204,0.2);
+  border-radius: 1.8rem;
+  text-overflow: ellipsis;
+  font-style: italic;
+}
+
+.search-app .chrome.maximized .controls .urlbar:after {
+  content: '';
+  width: 2rem;
+  height: 100%;
+  top: 0;
+  right: 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:not(.maximized) .controls .urlbar .title {
+  background-color: rgba(204,204,204,0.4);
+}
+
+.maximized .controls .urlbar .title {
+  background-color: transparent;
+}
+
+
+.controls .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 8rem);
+}
+
+.controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  width: calc(100% - 8rem);
+}
+
+.controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 12rem);
+}
+
+.appWindow:not(.browser) .controls .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 4.5rem);
+}
+
+.appWindow:not(.browser) .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  width: calc(100% - 4.5rem);
+}
+
+.appWindow:not(.browser) .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 8.5rem);
+}
+
+.controls .urlbar {
+  transform: scaleX(var(--rocketbar-scale)) translateY(0.1rem);
+  transform-origin: top left;
+  transition: transform 0.2s ease-in-out;
+}
+
+.appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar {
+  transform: scale(var(--rocketbar-scale)) translateY(0.3rem);
+  transform-origin: bottom left;
+}
+
+.maximized .controls .urlbar {
+  transform: scaleX(1);
+}
+
+.chrome.maximized .title[data-ssl="secure"] {
+  -moz-padding-start: 3rem;
+  background: url("images/light/ssl.png") no-repeat 0.1rem center / 3rem 3rem;
+  background-position: 5rem;
+}
+
+.chrome.maximized .title[data-ssl="broken"] {
+  -moz-padding-start: 3rem;
+  background: url("images/light/ssl_broken.png") no-repeat 0.1rem center / 3rem 3rem;
+}
+
+.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)) translateX(-5.5rem);
+}
+
+.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: scaleX(var(--rocketbar-scale)) translateX(-12rem);
+}
+
+
+/* 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;
+  float: left;
+  border-radius: 0;
+}
+
+.controls .reload-button,
+.controls .stop-button {
+  background-size: 3rem auto;
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: absolute;
+  bottom: 0.3rem;
+  right: 0;
+  padding: 0 0.3rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.controls .reload-button::before,
+.controls .stop-button::before {
+  content: '';
+  position: relative;
+  right: 0.2rem;
+  display: block;
+  height: 2.4rem;
+  border-left: 1px solid rgba(0,0,0,0.05);
+}
+
+/* Vertically align butons outside of urlbar. */
+.controls > button {
+  position: relative;
+  top: -0.2rem;
+}
+
+.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;
+}
+
+.appWindow:not(.bar) > .chrome.maximized button {
+  opacity: 1;
+}
+
+
+/* Default (dark) theme button styles */
+.controls .back-button {
+  background-image: url("images/dark/back.png");
+}
+
+.controls .back-button:active {
+  background-image: url("images/dark/back_active.png");
+}
+
+.controls .forward-button {
+  background-image: url("images/dark/forward.png");
+}
+
+.controls .forward-button:active {
+  background-image: url("images/dark/forward_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");
+}
+
+.light .controls .back-button {
+  background-image: url("images/light/back.png");
+}
+
+.light .controls .back-button:active {
+  background-image: url("images/light/back_active.png");
+}
+
+.light .controls .forward-button {
+  background-image: url("images/light/forward.png");
+}
+
+.light .controls .forward-button:active {
+  background-image: url("images/light/forward_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:not(.bar).collapsible > .chrome gaia-progress {
+  top: 7.3rem;
+}
+
+/* App specifics */
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls button {
+  display: none;
+}
+
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .forward-button:not([disabled]) + .urlbar,
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar,
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .urlbar {
+  width: calc(100% - 8rem);
+}
+
+.appWindow:not(.collapsible) > .chrome .controls .urlbar .title {
+  width: calc(100%);
+}
+
+/* RTL View */
+html[dir="rtl"] .appWindow:not(.bar) > .chrome {
+  transform-origin: top right;
+}
+
+html[dir="rtl"] .chrome .controls .urlbar {
+  float: right;
+}
+
+html[dir="rtl"] .search-app .chrome.maximized .controls .urlbar:after {
+  left: 0.8rem;
+  right: unset;
+  background-position: center left;
+}
+
+html[dir="rtl"] .controls .urlbar {
+  transform-origin: top right;
+}