gecko/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-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-left,
.instruction-arrow.arrow-right {
  background-image: url("chrome://browser/skin/images/arrow-left.png");
}

.instruction-arrow.arrow-right {
  transform: rotate(180deg) scaleY(-1);
}

#instruction-tabs {
  position: absolute;
  top: 10px;
  transform: translateX(calc(630px - 50%));
}

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

#start-container[viewstate="landscape"] #instruction-topsites {
  position: absolute;
  bottom: 20px;
  transform: translateX(-50%);
  margin-left: 20px;
}

#start-container[viewstate="portrait"] #instruction-topsites {
  transform: translateX(calc(150px + 50%)) translateY(-60px);
}

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

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

#start-container[viewstate="landscape"] #instruction-menu {
  position: fixed;
  bottom: 16px;
  right: 37px;
}

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

#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-left,
  .instruction-arrow.arrow-right {
    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-left,
  .instruction-arrow.arrow-right {
    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");
  }
}