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/app-deck/style/app_deck.css

@@ -0,0 +1,76 @@
+html {
+  font-size: 10px;
+  /* We have Fira Sans as default font in real device. But it isn't default in
+   * browser. That's the main reason this line is here.*/
+  font-family: "Fira Sans";
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  background-color: white;
+}
+
+a {
+  outline: 0;
+}
+
+a:hover, a:active, a:focus {
+  outline: 0;
+}
+
+section {
+  font-size: 1.6rem;
+}
+
+#main-section {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app-deck-grid-view-container {
+  width: 100%;
+  height: calc(100% - 46.6rem);
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-color: #e0e0e0;
+}
+
+#app-deck-grid-view {
+  /* top = (6 - 5.8)rem */
+  padding: 0.2rem 14.2rem 0;
+  height: 100%;
+  overflow: hidden;
+  scroll-behavior: smooth;
+}
+
+#app-deck-grid-view:after {
+  content: "";
+  display: block;
+  /* app-deck-grid-view has padding-top 0.2rem, and the buttons in the first row
+     have margin-top 5.8rem, so app-deck-grid-view bottom should have height
+     5.8 + 0.2 - 2.9(button margin-bottom) = 3.1rem */
+  height: 3.1rem;
+}
+
+smart-button[type="app-button"] {
+  width: 18rem;
+  height: 18rem;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  margin: 5.8rem 2.6rem 2.9rem 2.6rem;
+  background-size: 100% auto;
+}
+
+/** we use :after as label */
+smart-button[type="app-button"]:after {
+  width: 18rem;
+  height: 5rem;
+  font-size: 1.6rem;
+}

gaia/tv_apps/app-deck/style/app_deck_list.css

@@ -0,0 +1,152 @@
+
+#jumbotron {
+  width: 100%;
+  height: 46.6rem;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+  background-color: #323232;
+}
+
+.app-deck-main-banner, .app-deck-animation-banner  {
+  position: absolute;
+  left: -1rem;
+  top: -1rem;
+  width: calc(100% + 2rem);
+  height: calc(100% + 2rem);
+}
+
+.app-deck-animation-banner.hidden {
+  display: none;
+}
+
+.app-deck-animation-banner.standby .banner-background,
+.app-deck-animation-banner.standby .banner-title,
+.app-deck-animation-banner.standby .banner-description {
+  transform: translate(12rem, 0);
+}
+
+.app-deck-animation-banner.sliding .banner-background,
+.app-deck-animation-banner.sliding .banner-title,
+.app-deck-animation-banner.sliding .banner-description {
+  transform: translate(0, 0);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1.0);
+  transition-duration: 0.66s;
+}
+
+.app-deck-animation-banner.sliding .banner-description {
+  transition-delay: 0.0s;
+}
+
+.app-deck-animation-banner.sliding .banner-title {
+  transition-delay: 0.06s;
+}
+
+.app-deck-animation-banner.sliding .banner-background {
+  transition-delay: 0.12s;
+}
+
+.app-deck-main-banner.sliding {
+  width: 0;
+  transition-property: width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1.0);
+  transition-duration: 0.66s;
+  overflow: hidden;
+
+  background-position: left center;
+}
+
+.banner-background {
+  position: absolute;
+  /* to have slide-in transition work, we need to write a width to banner,
+     like => width: 194rem;. This task will be done at JavaScript in runtime. */
+  height: 100%;
+
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% auto;
+}
+
+.banner-background:before {
+  content: ' ';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.banner-text-container {
+  position: absolute;
+  top: 0;
+  /* 24rem = 21.8rem banner list + 2.2rem spacing */
+  bottom: 24rem;
+  margin-top: auto;
+  margin-bottom: auto;
+
+  /* to have slide-in transition work, we need to write a width to banner,
+     like => width: 194rem;. This task will be done at JavaScript in runtime. */
+
+  /* 15rem = 7.2 header + 7.2 desc + 0.6 spacing */
+  max-height: 15rem;
+  text-align: center;
+  font-style: italic;
+  color: #ffffff;
+}
+
+.banner-title {
+  width: 120rem;
+  height: 7.2rem;
+  line-height: 7.2rem;
+  font-size: 5.2rem;
+  margin: 0;
+  padding: 0;
+
+  display: inline-block;
+}
+
+.banner-description {
+  display: inline-block;
+
+  color: #ffffff;
+  font-size: 2.4rem;
+  font-weight: bold;
+  line-height: 3.6rem;
+
+  width: 120rem;
+  max-height: 7.2rem;
+
+  margin-top: 0.6rem;
+}
+
+#app-deck-list-frame {
+  position: absolute;
+  top: 22.6rem;
+  width: 100%;
+  height: 21.8rem;
+  overflow: hidden;
+}
+
+#app-deck-list {
+  position: relative;
+  transition: transform 0.2s ease;
+  transform-origin: 0 50%;
+}
+
+.app-banner {
+  display: inline-block;
+  width: 38.4rem;
+  height: 21.8rem;
+  left: 0;
+  position: absolute;
+}
+
+smart-button.app-deck-list-item {
+  width: 100%;
+  height: 100%;
+  background-position: center center, center center;
+  background-size: 120% auto, 12rem auto;
+}