Publish Vulpes Preview 15 sources for desktop, Android and Tundra

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

overrides/system.gaiamobile.org/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: image-set(url("images/battery_empty_small.png") 1x, url("images/battery_empty_small@1.5x.png") 1.5x, url("images/battery_empty_small@2x.png") 2x);
+  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);
+  }
+}

overrides/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: image-set(url("../icons/pb_icon.png") 1x, url("../icons/pb_icon@1.5x.png") 1.5x, url("../icons/pb_icon@2x.png") 2x, url("../icons/pb_icon@2.25x.png") 2.25x);
+  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: image-set(url("../icons/Default.png") 1x, url("../icons/Default@1.5x.png") 1.5x, url("../icons/Default@2x.png") 2x);
+  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: image-set(url("../task-manager/light/close.png") 1x, url("../task-manager/light/close@1.5x.png") 1.5x, url("../task-manager/light/close@2x.png") 2x, url("../task-manager/light/close@2.25x.png") 2.25x);
+}
+
+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: image-set(url("../task-manager/dark/close.png") 1x, url("../task-manager/dark/close@1.5x.png") 1.5x, url("../task-manager/dark/close@2x.png") 2x, url("../task-manager/dark/close@2.25x.png") 2.25x);
+}
+
+#cards-view .card-tray .favorite-button {
+  background-image: image-set(url("../task-manager/light/favorite.png") 1x, url("../task-manager/light/favorite@1.5x.png") 1.5x, url("../task-manager/light/favorite@2x.png") 2x, url("../task-manager/light/favorite@2.25x.png") 2.25x);
+  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: image-set(url("../task-manager/dark/favorite.png") 1x, url("../task-manager/dark/favorite@1.5x.png") 1.5x, url("../task-manager/dark/favorite@2x.png") 2x);
+}
+
+#cards-view .card-tray > button.appIcon {
+  top: 1rem;
+  left: calc(50% - 2rem);
+  width: 4rem;
+  height: 4rem;
+  background-image: image-set(url("../icons/Default.png") 1x, url("../icons/Default@1.5x.png") 1.5x, url("../icons/Default@2x.png") 2x);
+  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: image-set(url("../task-manager/light/close.png") 1x, url("../task-manager/light/close@1.5x.png") 1.5x, url("../task-manager/light/close@2x.png") 2x, url("../task-manager/light/close@2.25x.png") 2.25x);
+}
+
+/* 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: image-set(url("../chrome/images/dark/ssl.png") 1x, url("../chrome/images/dark/ssl@1.5x.png") 1.5x, url("../chrome/images/dark/ssl@2x.png") 2x, url("../chrome/images/dark/ssl@2.25x.png") 2.25x);
+}
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-image: image-set(url("../chrome/images/dark/ssl_broken.png") 1x, url("../chrome/images/dark/ssl_broken@1.5x.png") 1.5x, url("../chrome/images/dark/ssl_broken@2x.png") 2x, url("../chrome/images/dark/ssl_broken@2.25x.png") 2.25x);
+}
+
+#task-manager.filtered .card.show-subtitle[data-ssl="secure"] p.subtitle {
+  background-image: image-set(url("../chrome/images/light/ssl.png") 1x, url("../chrome/images/light/ssl@1.5x.png") 1.5x, url("../chrome/images/light/ssl@2x.png") 2x, url("../chrome/images/light/ssl@2.25x.png") 2.25x);
+}
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-image: image-set(url("../chrome/images/light/ssl_broken.png") 1x, url("../chrome/images/light/ssl_broken@1.5x.png") 1.5x, url("../chrome/images/light/ssl_broken@2x.png") 2x, url("../chrome/images/light/ssl_broken@2.25x.png") 2.25x);
+}
+
+
+/* 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: image-set(url("../task-manager/images/tm_pb_tab.png") 1x, url("../task-manager/images/tm_pb_tab@1.5x.png") 1.5x, url("../task-manager/images/tm_pb_tab@2x.png") 2x, url("../task-manager/images/tm_pb_tab@2.25x.png") 2.25x) no-repeat center;
+  background-size: 3.5rem 1.8rem;
+}
+
+#task-manager-new-sheet-button {
+  width: 6.4rem;
+  height: 4.8rem;
+  border: none;
+  background: image-set(url("../task-manager/images/tm_new_tab.png") 1x, url("../task-manager/images/tm_new_tab@1.5x.png") 1.5x, url("../task-manager/images/tm_new_tab@2x.png") 2x, url("../task-manager/images/tm_new_tab@2.25x.png") 2.25x) no-repeat center;
+  background-size: 2.4rem 2.4rem;
+}
+
+#task-manager-new-private-sheet-button:active {
+  background-image: image-set(url("../task-manager/images/tm_pb_tab_press.png") 1x, url("../task-manager/images/tm_pb_tab_press@1.5x.png") 1.5x, url("../task-manager/images/tm_pb_tab_press@2x.png") 2x, url("../task-manager/images/tm_pb_tab_press@2.25x.png") 2.25x);
+}
+
+#task-manager-new-sheet-button:active {
+  background-image: image-set(url("../task-manager/images/tm_new_tab_press.png") 1x, url("../task-manager/images/tm_new_tab_press@1.5x.png") 1.5x, url("../task-manager/images/tm_new_tab_press@2x.png") 2x, url("../task-manager/images/tm_new_tab_press@2.25x.png") 2.25x);
+}
+
+#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);
+}

overrides/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: image-set(url("images/search.png") 1x, url("images/search@1.5x.png") 1.5x, url("images/search@2x.png") 2x, url("images/search@2.25x.png") 2.25x);
+  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: image-set(url("images/arrow.png") 1x, url("images/arrow@1.5x.png") 1.5x, url("images/arrow@2x.png") 2x, url("images/arrow@2.25x.png") 2.25x);
+  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: image-set(url("images/light/ssl.png") 1x, url("images/light/ssl@1.5x.png") 1.5x, url("images/light/ssl@2x.png") 2x, url("images/light/ssl@2.25x.png") 2.25x);
+}
+
+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: image-set(url("images/pin.png") 1x, url("images/pin@1.5x.png") 1.5x, url("images/pin@2x.png") 2x, url("images/pin@2.25x.png") 2.25x);
+}
+
+@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: image-set(url("images/pb_rocketbar.png") 1x, url("images/pb_rocketbar@1.5x.png") 1.5x, url("images/pb_rocketbar@2x.png") 2x, url("images/pb_rocketbar@2.25x.png") 2.25x);
+  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: image-set(url("images/light/ssl.png") 1x, url("images/light/ssl@1.5x.png") 1.5x, url("images/light/ssl@2x.png") 2x, url("images/light/ssl@2.25x.png") 2.25x);
+}
+
+.maximized .chrome-has-ssl-indicator[data-ssl="broken"] .chrome-ssl-indicator {
+  background-image: image-set(url("images/light/ssl_broken.png") 1x, url("images/light/ssl_broken@1.5x.png") 1.5x, url("images/light/ssl_broken@2x.png") 2x, url("images/light/ssl_broken@2.25x.png") 2.25x);
+}
+
+.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: image-set(url("images/dark/left.png") 1x, url("images/dark/left@1.5x.png") 1.5x, url("images/dark/left@2x.png") 2x, url("images/dark/left@2.25x.png") 2.25x); }
+html[dir="rtl"] .controls .back-button { background-image: image-set(url("images/dark/right.png") 1x, url("images/dark/right@1.5x.png") 1.5x, url("images/dark/right@2x.png") 2x, url("images/dark/right@2.25x.png") 2.25x); }
+
+html[dir="ltr"] .controls .back-button:active { background-image: image-set(url("images/dark/left_active.png") 1x, url("images/dark/left_active@1.5x.png") 1.5x, url("images/dark/left_active@2x.png") 2x, url("images/dark/left_active@2.25x.png") 2.25x); }
+html[dir="rtl"] .controls .back-button:active { background-image: image-set(url("images/dark/right_active.png") 1x, url("images/dark/right_active@1.5x.png") 1.5x, url("images/dark/right_active@2x.png") 2x, url("images/dark/right_active@2.25x.png") 2.25x); }
+
+html[dir="ltr"] .controls .forward-button { background-image: image-set(url("images/dark/right.png") 1x, url("images/dark/right@1.5x.png") 1.5x, url("images/dark/right@2x.png") 2x, url("images/dark/right@2.25x.png") 2.25x); }
+html[dir="rtl"] .controls .forward-button { background-image: image-set(url("images/dark/left.png") 1x, url("images/dark/left@1.5x.png") 1.5x, url("images/dark/left@2x.png") 2x, url("images/dark/left@2.25x.png") 2.25x); }
+
+html[dir="ltr"] .controls .forward-button:active { background-image: image-set(url("images/dark/right_active.png") 1x, url("images/dark/right_active@1.5x.png") 1.5x, url("images/dark/right_active@2x.png") 2x, url("images/dark/right_active@2.25x.png") 2.25x); }
+html[dir="rtl"] .controls .forward-button:active { background-image: image-set(url("images/dark/left_active.png") 1x, url("images/dark/left_active@1.5x.png") 1.5x, url("images/dark/left_active@2x.png") 2x, url("images/dark/left_active@2.25x.png") 2.25x); }
+
+.controls .menu-button {
+  background-image: image-set(url("images/dark/options.png") 1x, url("images/dark/options@1.5x.png") 1.5x, url("images/dark/options@2x.png") 2x, url("images/dark/options@2.25x.png") 2.25x);
+}
+
+.controls .menu-button:active {
+  background-image: image-set(url("images/dark/options_active.png") 1x, url("images/dark/options_active@1.5x.png") 1.5x, url("images/dark/options_active@2x.png") 2x, url("images/dark/options_active@2.25x.png") 2.25x);
+}
+
+.controls .reload-button {
+  background-image: image-set(url("images/dark/reload.png") 1x, url("images/dark/reload@1.5x.png") 1.5x, url("images/dark/reload@2x.png") 2x, url("images/dark/reload@2.25x.png") 2.25x);
+}
+
+.controls .reload-button:active {
+  background-image: image-set(url("images/dark/reload_active.png") 1x, url("images/dark/reload_active@1.5x.png") 1.5x, url("images/dark/reload_active@2x.png") 2x, url("images/dark/reload_active@2.25x.png") 2.25x);
+}
+
+.controls .stop-button {
+  background-image: image-set(url("images/dark/stop.png") 1x, url("images/dark/stop@1.5x.png") 1.5x, url("images/dark/stop@2x.png") 2x, url("images/dark/stop@2.25x.png") 2.25x);
+}
+
+.controls .stop-button:active {
+  background-image: image-set(url("images/dark/stop_active.png") 1x, url("images/dark/stop_active@1.5x.png") 1.5x, url("images/dark/stop_active@2x.png") 2x, url("images/dark/stop_active@2.25x.png") 2.25x);
+}
+
+.controls .windows-button {
+  background-image: image-set(url("images/dark/windows.png") 1x, url("images/dark/windows@1.5x.png") 1.5x, url("images/dark/windows@2x.png") 2x, url("images/dark/windows@2.25x.png") 2.25x);
+}
+
+.controls .windows-button:active {
+  background-image: image-set(url("images/dark/windows_active.png") 1x, url("images/dark/windows_active@1.5x.png") 1.5x, url("images/dark/windows_active@2x.png") 2x, url("images/dark/windows_active@2.25x.png") 2.25x);
+}
+
+/* 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: image-set(url("images/light/left.png") 1x, url("images/light/left@1.5x.png") 1.5x, url("images/light/left@2x.png") 2x, url("images/light/left@2.25x.png") 2.25x); }
+html[dir="rtl"] .light .controls .back-button { background-image: image-set(url("images/light/right.png") 1x, url("images/light/right@1.5x.png") 1.5x, url("images/light/right@2x.png") 2x, url("images/light/right@2.25x.png") 2.25x); }
+
+html[dir="ltr"] .light .controls .back-button:active { background-image: image-set(url("images/light/left_active.png") 1x, url("images/light/left_active@1.5x.png") 1.5x, url("images/light/left_active@2x.png") 2x, url("images/light/left_active@2.25x.png") 2.25x); }
+html[dir="rtl"] .light .controls .back-button:active { background-image: image-set(url("images/light/right_active.png") 1x, url("images/light/right_active@1.5x.png") 1.5x, url("images/light/right_active@2x.png") 2x, url("images/light/right_active@2.25x.png") 2.25x); }
+
+html[dir="ltr"] .light .controls .forward-button { background-image: image-set(url("images/light/right.png") 1x, url("images/light/right@1.5x.png") 1.5x, url("images/light/right@2x.png") 2x, url("images/light/right@2.25x.png") 2.25x); }
+html[dir="rtl"] .light .controls .forward-button { background-image: image-set(url("images/light/left.png") 1x, url("images/light/left@1.5x.png") 1.5x, url("images/light/left@2x.png") 2x, url("images/light/left@2.25x.png") 2.25x); }
+
+html[dir="ltr"] .light .controls .forward-button:active { background-image: image-set(url("images/light/right_active.png") 1x, url("images/light/right_active@1.5x.png") 1.5x, url("images/light/right_active@2x.png") 2x, url("images/light/right_active@2.25x.png") 2.25x); }
+html[dir="rtl"] .light .controls .forward-button:active { background-image: image-set(url("images/light/left_active.png") 1x, url("images/light/left_active@1.5x.png") 1.5x, url("images/light/left_active@2x.png") 2x, url("images/light/left_active@2.25x.png") 2.25x); }
+
+.light .controls .menu-button {
+  background-image: image-set(url("images/light/options.png") 1x, url("images/light/options@1.5x.png") 1.5x, url("images/light/options@2x.png") 2x, url("images/light/options@2.25x.png") 2.25x);
+}
+
+.light .controls .menu-button:active {
+  background-image: image-set(url("images/light/options_active.png") 1x, url("images/light/options_active@1.5x.png") 1.5x, url("images/light/options_active@2x.png") 2x, url("images/light/options_active@2.25x.png") 2.25x);
+}
+
+.light .controls .reload-button {
+  background-image: image-set(url("images/light/reload.png") 1x, url("images/light/reload@1.5x.png") 1.5x, url("images/light/reload@2x.png") 2x, url("images/light/reload@2.25x.png") 2.25x);
+}
+
+.light .controls .reload-button:active {
+  background-image: image-set(url("images/light/reload_active.png") 1x, url("images/light/reload_active@1.5x.png") 1.5x, url("images/light/reload_active@2x.png") 2x, url("images/light/reload_active@2.25x.png") 2.25x);
+}
+
+.light .controls .stop-button {
+  background-image: image-set(url("images/light/stop.png") 1x, url("images/light/stop@1.5x.png") 1.5x, url("images/light/stop@2x.png") 2x, url("images/light/stop@2.25x.png") 2.25x);
+}
+
+.light .controls .stop-button:active {
+  background-image: image-set(url("images/light/stop_active.png") 1x, url("images/light/stop_active@1.5x.png") 1.5x, url("images/light/stop_active@2x.png") 2x, url("images/light/stop_active@2.25x.png") 2.25x);
+}
+
+.light .controls .windows-button {
+  background-image: image-set(url("images/light/windows.png") 1x, url("images/light/windows@1.5x.png") 1.5x, url("images/light/windows@2x.png") 2x, url("images/light/windows@2.25x.png") 2.25x);
+}
+
+.light .controls .windows-button:active {
+  background-image: image-set(url("images/light/windows_active.png") 1x, url("images/light/windows_active@1.5x.png") 1.5x, url("images/light/windows_active@2x.png") 2x, url("images/light/windows_active@2.25x.png") 2.25x);
+}
+
+.light .controls .menu-button:active {
+  background-image: url("images/light/overflow_active.png");
+}
+
+/* Overflow menu */
+
+gaia-overflow-menu button#new-window {
+  background-image: image-set(url("images/menu_new_window.png") 1x, url("images/menu_new_window@1.5x.png") 1.5x, url("images/menu_new_window@2x.png") 2x, url("images/menu_new_window@2.25x.png") 2.25x);
+}
+
+gaia-overflow-menu button#add-to-home {
+  background-image: image-set(url("images/menu_add_to_homescreen.png") 1x, url("images/menu_add_to_homescreen@1.5x.png") 1.5x, url("images/menu_add_to_homescreen@2x.png") 2x, url("images/menu_add_to_homescreen@2.25x.png") 2.25x);
+}
+
+gaia-overflow-menu button#share {
+  background-image: image-set(url("images/menu_share.png") 1x, url("images/menu_share@1.5x.png") 1.5x, url("images/menu_share@2x.png") 2x, url("images/menu_share@2.25x.png") 2.25x);
+}
+
+/* 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%);
+}