gecko-dev/browser/metro/theme/firstrun.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Rearrange about:start ---------------------- */

/* Disable all instructions in snapped mode */
#start-container[viewstate="snapped"] .firstrun {
  display: none;
}

/* Keep only first column of tiles */
#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
#start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
#start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
  -moz-column-count: 1 !important;
}

/* Add some bottom padding to make sure bottom tile will not be
below instruction */
#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
  padding-bottom: 30px;
}

/* Keep only first few items */
#start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
#start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
#start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
  display: none;
}

/* Add some space for the instructions */
#start-container[viewstate="portrait"] {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Remove watermark */
.meta {
  background-image: none;
}


/* Welcome pane ---------------------- */

/* Logo and welcome message */
#firstrun-welcome {
  width: 550px;
  font-family: "Segoe UI", sans-serif;
  padding: 30px 0;
}

.welcome-image {
  background-image: url("chrome://branding/content/metro_firstrun_logo.png");

  width: 220px;
  height: 220px;
}

#firstrun-welcome .welcome-title {
  font-size: 25px;
  color: #4d4e53;
  line-height: 30px;
  padding-top: 20px;
}

#firstrun-welcome .welcome-subtitle {
  font-size: 16px;
  color: #808080;
  line-height: 22px;
  padding-top: 10px;
}

/* Instructions ---------------------- */

.instruction-content-container {
    width: 380px;
}

.instruction-label {
  font-size: 16px;
  color: #808080;
  line-height: 22px;
}

.instruction-arrow {
  width: 76px;
  height: 76px;
}

.instruction-arrow.arrow-top,
.instruction-arrow.arrow-down {
  background-image: url("chrome://browser/skin/images/arrow-top.png");
}

.instruction-arrow.arrow-down {
  transform: rotate(180deg);
}
.instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
  transform: scaleY(-1);
}

.instruction-arrow.arrow-back,
.instruction-arrow.arrow-forward,
.instruction-arrow.arrow-back-straight,
.instruction-arrow.arrow-forward-straight {
  background-image: url("chrome://browser/skin/images/arrow-left.png");
}

.instruction-arrow.arrow-back,
.instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
  transform: rotate(0) scaleY(1);
}

.instruction-arrow.arrow-forward,
.instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
  transform: rotate(180deg) scaleY(-1);
}

.instruction-arrow.arrow-back-straight,
.instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
  transform: rotate(220deg) scaleX(-1);
}

.instruction-arrow.arrow-forward-straight,
.instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
  transform: rotate(-220deg);
}

#instruction-tabs {
  position: absolute;
  top: 10px;
  transform: translateX(calc(630px - 50%));
}
#instruction-tabs:-moz-locale-dir(rtl) {
  right: 0;
  left: auto;
  transform: translateX(calc(50% - 630px));
}

#start-container[viewstate="portrait"] #instruction-tabs {
  transform: translateX(calc(50vw - 50%));
}
#start-container[viewstate="portrait"] #instruction-tabs:-moz-locale-dir(rtl) {
  transform: translateX(calc(-50vw + 50%));
}

#start-container[viewstate="landscape"] #instruction-topsites {
  position: absolute;
  bottom: 15%;
}

#start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
  -moz-box-align: start;
}

#start-container[viewstate="portrait"] #instruction-topsites-box {
  margin-bottom: 20px;
}

#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
  -moz-box-align: center;
}

#start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
  display: none;
}

#start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
  display: block;
}

#start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
  display: block;
}

#start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
  display: none;
}

#start-container[viewstate="landscape"] #instruction-history,
#start-container[viewstate="landscape"] #instruction-bookmarks {
  position: absolute;
  top: 310px;
  transform: translateX(calc(-300px - 50%));
}
#start-container[viewstate="landscape"] #instruction-history:-moz-locale-dir(rtl),
#start-container[viewstate="landscape"] #instruction-bookmarks:-moz-locale-dir(rtl) {
  transform: translateX(calc(300px + 50%));
}

#start-container[viewstate="portrait"] #instruction-history,
#start-container[viewstate="portrait"] #instruction-bookmarks,
#start-container[viewstate="portrait"] #instruction-topsites {
  transform: translateX(-55px);
}
#start-container[viewstate="portrait"] #instruction-history:-moz-locale-dir(rtl),
#start-container[viewstate="portrait"] #instruction-bookmarks:-moz-locale-dir(rtl),
#start-container[viewstate="portrait"] #instruction-topsites:-moz-locale-dir(rtl) {
  transform: translateX(55px);
}

#start-container[viewstate="landscape"] #instruction-menu {
  position: fixed;
  bottom: 16px;
  right: 37px;
}
#start-container[viewstate="landscape"] #instruction-menu:-moz-locale-dir(rtl) {
  left: 37px;
  right: auto;
}

#start-container[viewstate="portrait"] #instruction-menu {
  position: absolute;
  right: 37px;
  transform: translateY(40px);
}
#start-container[viewstate="portrait"] #instruction-menu:-moz-locale-dir(rtl) {
  left: 37px;
  right: auto;
}

#start-container #instruction-menu .instruction-label {
    max-width: 300px;
}

#start-container[viewstate="landscape"] #start-history {
  padding-left: 50px;
}

/* Higher resolution images ---------------------- */

@media (min-resolution: @min_res_140pc@) {
  /* Load 140% image when scaled by 140% */
  .instruction-arrow.arrow-top,
  .instruction-arrow.arrow-down {
    background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
  }

  .instruction-arrow.arrow-back,
  .instruction-arrow.arrow-forward {
    background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
  }

  .welcome-image {
    background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
  }
}

@media (min-resolution: @min_res_180pc@) {
  /* Load 180% image when scaled by 180% */
  .instruction-arrow.arrow-top,
  .instruction-arrow.arrow-down {
    background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
  }

  .instruction-arrow.arrow-back,
  .instruction-arrow.arrow-forward {
    background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
  }

  .welcome-image {
    background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
  }
}