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

@@ -0,0 +1,161 @@
+/**
+ * Deck smart-button
+ */
+
+smart-button .icon[data-icon] {
+  position: relative;
+  color: white;
+  display: inline-block;
+  line-height: 28rem;
+}
+
+smart-button .icon[data-icon]:before {
+  font-size: 30rem;
+}
+
+smart-button[type="app-button"].deck-tv {
+  background-color: #D70270;
+}
+
+smart-button[type="app-button"].deck-application {
+  background-color: #07CAB0;
+}
+
+smart-button[type="app-button"].deck-device {
+  background-color: #0074D4;
+}
+
+smart-button[type="app-button"].deck-dashboard {
+  background-color: #FF7E00;
+}
+
+.card smart-button {
+  text-align: center;
+}
+
+.card smart-button[type="app-button"]::after {
+  left: 0;
+}
+
+/**
+ * Deck wave effect
+ */
+
+.deck-wave {
+  position: absolute;
+  width: 134.4rem;
+  height: 67.2rem;
+  transform: scale(1.2);
+  animation: defaultWaveAnimation 5.0s linear 0s infinite normal;
+  animation-play-state: paused;
+}
+
+.card.focused .deck-wave {
+  animation-play-state: running;
+}
+
+#main-section[data-mode="edit"] .deck-wave,
+#main-section[data-mode="arrange"] .deck-wave {
+  animation-play-state: paused;
+}
+
+.wave-front {
+  animation-duration: 3.05s
+}
+
+.wave-back {
+  animation-duration: 3.0s;
+}
+
+.tv-wave-front {
+  bottom: -16rem;
+  animation-name: tvWaveFrontAnimation;
+  background-image: url('images/wave_pink_01.png');
+}
+
+.tv-wave-back {
+  bottom: -14rem;
+  animation-name: tvWaveBackAnimation;
+  background-image: url('images/wave_pink_02.png');
+}
+
+.application-wave-front {
+  bottom: -16rem;
+  animation-name: applicationWaveFrontAnimation;
+  background-image: url('images/wave_green_01.png');
+}
+
+.application-wave-back {
+  bottom: -14rem;
+  animation-name: applicationWaveBackAnimation;
+  background-image: url('images/wave_green_02.png');
+}
+
+.device-wave-front {
+  bottom: -16rem;
+  animation-name: deviceWaveFrontAnimation;
+  background-image: url('images/wave_blue_01.png');
+}
+
+.device-wave-back {
+  bottom: -13rem;
+  animation-name: deviceWaveBackAnimation;
+  background-image: url('images/wave_blue_02.png');
+}
+
+.dashboard-wave-front {
+  bottom: -16rem;
+  animation-name: dashboardWaveFrontAnimation;
+  background-image: url('images/wave_orange_01.png');
+}
+
+.dashboard-wave-back {
+  bottom: -13rem;
+  animation-name: dashboardWaveBackAnimation;
+  background-image: url('images/wave_orange_02.png');
+}
+
+@keyframes defaultWaveAnimation {
+  from {transform: translateX(0);}
+  to {transform: translateX(-67.2rem);}
+}
+
+@keyframes tvWaveFrontAnimation {
+  from {transform: translateX(0);}
+  to {transform: translateX(-67.2rem);}
+}
+
+@keyframes tvWaveBackAnimation {
+  from {transform: translateX(-3rem);}
+  to {transform: translateX(-70.2rem);}
+}
+
+@keyframes applicationWaveFrontAnimation {
+  from {transform: translateX(-16rem);}
+  to {transform: translateX(-83.2rem);}
+}
+
+@keyframes applicationWaveBackAnimation {
+  from {transform: translateX(-23rem);}
+  to {transform: translateX(-90.2rem);}
+}
+
+@keyframes deviceWaveFrontAnimation {
+  from {transform: translateX(-22rem);}
+  to {transform: translateX(-89.2rem);}
+}
+
+@keyframes deviceWaveBackAnimation {
+  from {transform: translateX(-25rem);}
+  to {transform: translateX(-92.2rem);}
+}
+
+@keyframes dashboardWaveFrontAnimation {
+  from {transform: translateX(-35rem);}
+  to {transform: translateX(-102.2rem);}
+}
+
+@keyframes dashboardWaveBackAnimation {
+  from {transform: translateX(-32rem);}
+  to {transform: translateX(-99.2rem);}
+}

gaia/tv_apps/smart-home/style/edit.css

@@ -0,0 +1,147 @@
+#main-section[data-mode="edit"] #nav-regular,
+#main-section[data-mode="arrange"] #nav-regular,
+#main-section:not([data-mode="edit"]) #nav-edit-title,
+#main-section:not([data-mode="edit"]) #nav-edit {
+  transform: translateY(-16rem);
+}
+
+#main-section[data-mode="arrange"] #card-viewer.current-scrollable {
+  z-index: 1;
+}
+
+#main-section[data-mode="edit"] #folder-list-frame,
+#main-section[data-mode="arrange"] #folder-list-frame {
+  height: 0;
+}
+
+#main-section[data-mode="arrange"] .app-button.focused {
+  transform: scale(1.72);
+}
+
+#main-section[data-mode="edit"] .card.focused > .card-panel {
+  visibility: visible;
+}
+
+#main-section[data-mode="edit"] .card.delete > .card-panel {
+  display: none;
+}
+
+#main-section[data-mode="edit"] .card.focused > smart-button {
+  transform: scale(1.4);
+}
+
+#main-section[data-mode="arrange"] .card.hovered > smart-button {
+  transform: scale(1.75);
+  transition-delay: 0.1s;
+}
+
+#main-section[data-mode="arrange"] .card.focused.hover > smart-button {
+  transform: scale(1.2);
+  transition-delay: 0.1s;
+}
+
+#main-section[data-mode="edit"] .card.delete > smart-button {
+  transform: scale(1.4) translateY(20rem);
+  opacity: 0;
+}
+
+#main-section[data-mode="edit"] .card.focused > .card-panel smart-button {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+#main-section[data-mode="edit"] .card.focused > .card-panel smart-button.focused {
+  /* Override the transform of smart-button.focused, otherwise, the smart-button
+     may drops down when focused */
+  transform: scale(1.2) translateY(0);
+}
+
+#main-section[data-mode="edit"] .card > .card-panel smart-button:nth-child(2) {
+  transition-delay: 0.1s;
+}
+
+/* Delete button may have 0.1s delay when focused */
+#main-section[data-mode="edit"] .card.focused > smart-button:not(.focused) + .card-panel smart-button {
+  transition-delay: 0s;
+}
+
+#main-section[data-mode="edit"] .card.focused > smart-button[app-type='deck'] ~ .card-panel,
+#main-section[data-mode="edit"] .card.focused > smart-button.animation-bubble-start ~ .card-panel {
+  display: none;
+}
+
+#main-section[data-mode="arrange"] .card.focused:after {
+  position: absolute;
+  left: -25.1rem;
+  right: -25.1rem;
+  top: -25.1rem;
+  bottom: -25.1rem;
+  content: ' ';
+}
+
+#card-list.exiting-edit-mode {
+  transition: transform 0.8s cubic-bezier(.6, 0, 0, 1);
+}
+
+#main-section[data-mode="arrange"] .card:not(.focused) {
+  filter: url(filter.svg#brightness50percent);
+}
+
+#main-section[data-mode="arrange"] .card.focused.left_arrow:after {
+  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.right_arrow:after {
+  background: url(images/animated_arrows_right.png) no-repeat right center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.up_arrow:after {
+  background: url(images/animated_arrows_up.png) no-repeat top center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.left_arrow.down_arrow:after {
+  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
+              url(images/animated_arrows_down.png) no-repeat bottom center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.right_arrow.down_arrow:after {
+  background: url(images/animated_arrows_right.png) no-repeat right center / 13rem,
+              url(images/animated_arrows_down.png) no-repeat bottom center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.left_arrow.up_arrow:after {
+  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
+              url(images/animated_arrows_up.png) no-repeat top center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.right_arrow.up_arrow:after {
+  background: url(images/animated_arrows_right.png) no-repeat right center / 13rem,
+              url(images/animated_arrows_up.png) no-repeat top center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.left_arrow.right_arrow:after {
+  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
+              url(images/animated_arrows_right.png) no-repeat right center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.left_arrow.right_arrow.down_arrow:after {
+  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
+              url(images/animated_arrows_right.png) no-repeat right center / 13rem,
+              url(images/animated_arrows_down.png) no-repeat bottom center / 13rem;
+}
+
+#main-section[data-mode="arrange"] .card.focused.left_arrow.right_arrow.up_arrow:after {
+  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
+              url(images/animated_arrows_right.png) no-repeat right center / 13rem,
+              url(images/animated_arrows_up.png) no-repeat top center / 13rem;
+}
+
+#main-section[data-mode="edit"] .background,
+#main-section[data-mode="arrange"] .background {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+#main-section[data-mode="edit"] #card-list,
+#main-section[data-mode="arrange"] #card-list {
+  transition: transform 0.66s cubic-bezier(.25, 0, 0, 1);
+}

gaia/tv_apps/smart-home/style/filter.svg

@@ -0,0 +1,9 @@
+<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="brightness50percent">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="0.5"/>
+      <feFuncG type="linear" slope="0.5"/>
+      <feFuncB type="linear" slope="0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>

gaia/tv_apps/smart-home/style/fte.css

@@ -0,0 +1,124 @@
+#fte {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: RGBA(0, 0, 0, 0.3);
+  opacity: 1;
+  transition: opacity 0.5s linear;
+}
+
+#fte.finish {
+  opacity: 0;
+}
+
+.fte-page {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: url(images/fte_bg.png) 100%;
+  font-size: 3.6rem;
+  color: white;
+  font-style: italic;
+  opacity: 1;
+  transition: opacity 0.5s linear;
+}
+
+.fte-page.hidden {
+  opacity: 0;
+  pointer-events: none;
+  transition-delay: 0.5s;
+}
+
+.fte-content-image {
+  position: absolute;
+  left: calc(50vw - 74.9rem);
+  top: calc(50vh - 42.1rem);
+  width: 149.8rem;
+  height: 84.2rem;
+  background: url(images/fte_content_image.png) 100%;
+  overflow: visible;
+  box-shadow: 0.5rem 1rem 1rem RGBA(0, 0, 0, 0.5);
+}
+
+.fte-indicator-p1 {
+  position: absolute;
+  left: -21.1rem;
+  top: -11.9rem;
+  width: 192rem;
+  height: 108rem;
+  background: url(images/fte_indicator_p1.png) 100%;
+}
+
+.fte-indicator-p2 {
+  position: absolute;
+  left: -21.1rem;
+  top: -11.9rem;
+  width: 192rem;
+  height: 108rem;
+  background: url(images/fte_indicator_p2.png) 100%;
+}
+
+.fte-panel {
+  position: absolute;
+  bottom: calc(50vh - 42.1rem - 4rem);
+  text-align: center;
+  width: 100%;
+}
+
+.fte-panel > .fte-button {
+  width: 30.4rem;
+  position: relative;
+}
+
+#fte-tvdeck-detail {
+  position: relative;
+}
+
+.fte-content-image > div {
+  position: absolute;
+  font-weight: 400;
+}
+
+#fte-tvdeck-detail {
+  left: 27.7rem;
+  top: 15.9rem;
+}
+
+#fte-appdeck-detail {
+  right: 51.9rem;
+  bottom: 16.5rem;
+}
+
+#fte-devicedeck-detail {
+  left: 84.9rem;
+  top: 15.9rem;
+}
+
+#fte-browser-detail {
+  left: 105.9rem;
+  bottom: 16.5rem;
+}
+
+#fte-search-detail {
+  left: -10.6rem;
+  top: -7.2rem;
+}
+
+#fte-settings-detail {
+  left: 8.7rem;
+  top: -7.2rem;
+}
+
+#fte-addfolder-detail {
+  left: 30.2rem;
+  top: -7.2rem;
+}
+
+#fte-filter-detail {
+  left: -10.6rem;
+  bottom: 16.5rem;
+}

gaia/tv_apps/smart-home/style/header.css

@@ -0,0 +1,13 @@
+.left-top-panel {
+  left: 6rem;
+  top: 4rem;
+  position: absolute;
+}
+#header-buttons > smart-button {
+  margin-right: 1.8rem;
+}
+smart-button[type="text-and-icon"] {
+  min-width: 15rem;
+  text-align: center;
+  box-sizing: border-box;
+}

gaia/tv_apps/smart-home/style/home.css

@@ -0,0 +1,314 @@
+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: transparent;
+}
+
+#main-section {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+a {
+  outline: 0;
+}
+
+a:hover, a:active, a:focus {
+  outline: 0;
+}
+
+section {
+  font-size: 1.6rem;
+}
+
+/* Card list */
+#card-viewer {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+#card-list-frame {
+  position: absolute;
+  width: 100%;
+  height: 33.6rem;
+  top: 32.41%;
+  overflow: visible;
+}
+
+#card-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
+  transform-origin: 0 50%;
+}
+
+#card-list.hidden {
+  /* Using display none here would prevent animation, and using visibility
+     hidden causes some bugs in rendering */
+  opacity: 0;
+}
+
+#card-list.no-transition,
+#folder-list.no-transition {
+  transition-property: none;
+}
+
+.card {
+  margin: 0;
+  left: 0;
+  top: 0;
+  position: absolute;
+  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1), filter 0.3s ease;
+}
+
+.card smart-button[type="app-button"].tv-channel {
+  background-color: #272727;
+}
+
+.card smart-button[type="app-button"].tv-channel:before {
+  font-size: 30rem;
+  color: white;
+}
+
+.card smart-button[type="app-button"].new-card {
+  opacity: 0;
+  transform: scale(0.5, 0.5);
+}
+
+.card smart-button[type="app-button"].new-card-transition {
+  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1) 0.2s,
+              opacity 0.4s cubic-bezier(0.25, 0, 0, 1) 0.2s;
+}
+
+.card smart-button[type="app-button"].new-card-transition.last-card {
+  transition-delay: 0s;
+}
+
+#folder-list .card smart-button[type="app-button"].new-card {
+  opacity: 1;
+  transform: translateY(-44rem);
+}
+
+#folder-list .card smart-button[type="app-button"].new-card-transition {
+  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1),
+              opacity 0.4s cubic-bezier(0.25, 0, 0, 1);
+}
+
+.card-panel {
+  position: absolute;
+  top: -23.14rem;
+  width: 100%;
+  height: 14.926rem;
+  text-align: center;
+  /* Use visibility hidden instead of display none here because display none
+     may prevent transition happens */
+  visibility: hidden;
+  z-index: 0;
+}
+
+.card-panel smart-button {
+  position: relative;
+  margin-left: 1.86em;
+  width: 14.926rem;
+  height: 14.926rem;
+  transform: translateY(12rem);
+  opacity: 0;
+}
+
+.card-panel smart-button:first-child {
+  margin-left: 0;
+}
+
+.card-panel smart-button[data-icon]::before {
+  width: 10.074rem;
+  left: 2.43rem;
+  font-size: 10.07rem;
+  line-height: 15.47rem;
+
+}
+
+.card smart-button.app-button {
+  /* smart-button should be in front of card-panel */
+  z-index: 1;
+}
+
+.card.focused {
+  z-index: 100;
+}
+
+/**
+ * folder list
+ */
+
+#folder-viewer {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+#folder-list-frame {
+  position: absolute;
+  width: 100%;
+  height: 33.6rem;
+  top: calc(32.41% + 32.3rem);
+  overflow: visible;
+}
+
+#folder-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
+  transform-origin: 0 50%;
+}
+
+/**
+ * filters
+**/
+.filter-tab-container {
+  position: absolute;
+  left: 6rem;
+  bottom: 5.4rem;
+}
+
+.filter-tab-group.hidden {
+  display: none;
+}
+
+/**
+ * background section
+**/
+.background {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  transition: background-color 0.66s linear;
+}
+
+.background:before {
+  content: "";
+  height: 29rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
+}
+
+.background:after {
+  content: "";
+  height: 29rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
+}
+
+#edit-menu {
+  position: absolute;
+  top: 4rem;
+  right: 6rem;
+}
+
+/**
+ * nav bars
+ */
+nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transition: transform 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+nav header {
+  padding-left: 7rem;
+  padding-top: 5rem;
+
+  font-size: 5.4rem;
+  font-style: italic;
+  color: white;
+}
+
+#main-section[data-mode="edit"] #nav-regular,
+#main-section[data-mode="arrange"] #nav-regular,
+#main-section:not([data-mode="edit"]) #nav-edit-title,
+#main-section:not([data-mode="edit"]) #nav-edit {
+  transform: translateY(-16rem);
+}
+
+smart-button.hidden {
+  display: none;
+}
+
+
+/* For smart-button, we put card name in pseudo-element :after. However, we need
+ * to localize card name and l10n library do not support localizing element with
+ * children elements.
+ * Instead of using :after, we create a 'span' element under smart-button and
+ * put card name in it.
+ */
+smart-button[type="app-button"]:after {
+  content: none;
+}
+
+smart-button[type="app-button"] > span.name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 33.6rem;
+  height: 8rem;
+
+  padding-top: 1rem;
+
+  line-height: 3rem;
+  text-align: center;
+
+  font-size: 2.8rem;
+  font-style: italic;
+  color: #ffffff;
+}
+
+smart-button[type="app-button"][app-type="deck"] > span.name {
+  background-color: transparent;
+}
+
+smart-button[type="app-button"][app-type="tv"] > span.name {
+  background-color: #d90c83;
+}
+
+smart-button[type="app-button"][app-type="app"] > span.name,
+smart-button[type="app-button"][app-type="appbookmark"] > span.name {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+smart-button[type="app-button"][app-type="device"] > span.name {
+  background-color: #4a82ea;
+}
+

gaia/tv_apps/smart-home/style/info-bar.css

@@ -0,0 +1,97 @@
+
+.information-bar {
+  position: absolute;
+  right: 2.4rem;
+  top: 3rem;
+  color: #ffffff;
+}
+
+.weather-info {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 25rem;
+  height: 10rem;
+}
+
+.weather-image {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 10rem;
+  height: 10rem;
+  background-image: url(images/img_weather_mostly_cloudy.png);
+  background-size: 10rem auto;
+  background-repeat: no-repeat;
+}
+
+.temperature {
+  display: inline-block;
+  position: absolute;
+  
+  bottom: 3rem;
+  left: 10rem; /* sit at the right of weather-image */
+  height: 5.6rem;
+  line-height: 5.6rem;
+  
+  font-size: 6rem;
+  font-weight: 100;
+}
+
+.degree-marker {
+  font-size: 2.4rem;
+  line-height: 2.4rem;
+  font-weight: 100;
+  position: relative;
+  top: -2.4rem;
+}
+
+.weather-text {
+  display: inline-block;
+  position: absolute;
+  
+  bottom: 0;
+  left: 10rem; /* sit at the right of weather-image */
+  
+  font-size: 1.8rem;
+  font-style: italic;
+  font-weight: 300;
+}
+
+.clock-info {
+  position: absolute;
+  top: 0;
+  /* right align to weather-info(25rem) + 1rem spacing */
+  right: 26.2rem;
+  width: 26rem;
+  height: 10rem;
+
+  border-right: solid 0.2rem #ffffff;
+}
+
+.time:before {
+  content: attr(data-ampm);
+  position: absolute;
+  height: 1.8rem;
+  line-height: 1.8rem;
+
+  font-size: 1.8rem;
+  bottom: 1.8rem;
+  left: -2.8rem;
+}
+
+.time {
+  position: absolute;
+  top: 0;
+  right: 1.2rem;
+  height: 10rem;
+  line-height: 10rem;
+
+  display: inline-block;
+  text-align: left;
+
+  font-weight: 100;
+  font-size: 10.6rem;
+
+}

gaia/tv_apps/smart-home/style/search-bar.css

@@ -0,0 +1,123 @@
+.search-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 1);
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
+  transition-duration: 0.92s;
+}
+
+.search-bar.hidden {
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0);
+  transition-property: none;
+}
+
+smart-button.search-mic-button {
+  opacity: 1;
+  background-color: #5d6368;
+  position: absolute;
+  left: 28.6rem;
+  top: 4rem;
+}
+
+.search-bar.hidden .search-input {
+  left: 6rem;
+  right: auto;
+  top: 4rem;
+  width: 8rem;
+  border-radius: 4rem;
+  padding-left: 0;
+  transition-property: none;
+}
+
+.search-input span {
+  opacity: 0;
+}
+
+.search-bar.opened .search-input span {
+  opacity: 1;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
+  transition-duration: 0.92s;
+}
+
+/* icon parts */
+.search-bar.hidden [data-icon].search-input:before {
+  left: 1.3rem;
+  right: auto;
+}
+
+[data-icon].search-input:before {
+  width: 5.4rem;
+  right: 1.2rem;
+  font-size: 5.4rem;
+  line-height: 8rem;
+  text-align: center;
+  color: #2d2d2d;
+  white-space: normal;
+  top: 0;
+  position: absolute;
+}
+
+.search-input {
+  /* 38.4rem = 28.6rem (left) + 8rem (voice button) + 1.8rem (margin) */
+  left: 38.4rem;
+  /* 77rem = left: 38.4rem + right 38.6rem */
+  width: calc(100% - 77rem);
+  top: 4rem;
+  height: 8rem;
+  position: absolute;
+
+  display: inline-block;
+  background-color: #ffffff;
+
+  color: #808080;
+
+  font-size: 3.2rem;
+  line-height: 8rem;
+
+  overflow: hidden;
+  padding-left: 4rem;
+  border-radius: 4rem;
+
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
+  transition-duration: 0.92s;
+}
+
+/* blue underline */
+.search-input:after {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  content: ' ';
+  border-bottom: 0.6rem #61acd7 solid;
+  box-sizing: border-box;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
+  transition-duration: 0.92s;
+}
+
+.search-bar.hidden .search-input:after {
+  opacity: 0;
+  transition-property: none;
+}
+
+.search-bar.opened .search-mic-button {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
+  transition-duration: 0.66s;
+  opacity: 1;
+}
+
+.search-bar .search-mic-button {
+  transition-property: none;
+  opacity: 0;
+}