michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* Rearrange about:start ---------------------- */
michael@0: 
michael@0: /* Disable all instructions in snapped mode */
michael@0: #start-container[viewstate="snapped"] .firstrun {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* Keep only first column of tiles */
michael@0: #start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
michael@0: #start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
michael@0: #start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
michael@0:   -moz-column-count: 1 !important;
michael@0: }
michael@0: 
michael@0: /* Add some bottom padding to make sure bottom tile will not be
michael@0: below instruction */
michael@0: #start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
michael@0:   padding-bottom: 30px;
michael@0: }
michael@0: 
michael@0: /* Keep only first few items */
michael@0: #start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
michael@0: #start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
michael@0: #start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* Add some space for the instructions */
michael@0: #start-container[viewstate="portrait"] {
michael@0:   padding-top: 120px;
michael@0:   padding-bottom: 120px;
michael@0: }
michael@0: 
michael@0: /* Remove watermark */
michael@0: .meta {
michael@0:   background-image: none;
michael@0: }
michael@0: 
michael@0: 
michael@0: /* Welcome pane ---------------------- */
michael@0: 
michael@0: /* Logo and welcome message */
michael@0: #firstrun-welcome {
michael@0:   width: 550px;
michael@0:   font-family: "Segoe UI", sans-serif;
michael@0:   padding: 30px 0;
michael@0: }
michael@0: 
michael@0: .welcome-image {
michael@0:   background-image: url("chrome://branding/content/metro_firstrun_logo.png");
michael@0: 
michael@0:   width: 220px;
michael@0:   height: 220px;
michael@0: }
michael@0: 
michael@0: #firstrun-welcome .welcome-title {
michael@0:   font-size: 25px;
michael@0:   color: #4d4e53;
michael@0:   line-height: 30px;
michael@0:   padding-top: 20px;
michael@0: }
michael@0: 
michael@0: #firstrun-welcome .welcome-subtitle {
michael@0:   font-size: 16px;
michael@0:   color: #808080;
michael@0:   line-height: 22px;
michael@0:   padding-top: 10px;
michael@0: }
michael@0: 
michael@0: /* Instructions ---------------------- */
michael@0: 
michael@0: .instruction-content-container {
michael@0:     width: 380px;
michael@0: }
michael@0: 
michael@0: .instruction-label {
michael@0:   font-size: 16px;
michael@0:   color: #808080;
michael@0:   line-height: 22px;
michael@0: }
michael@0: 
michael@0: .instruction-arrow {
michael@0:   width: 76px;
michael@0:   height: 76px;
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-top,
michael@0: .instruction-arrow.arrow-down {
michael@0:   background-image: url("chrome://browser/skin/images/arrow-top.png");
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-down {
michael@0:   transform: rotate(180deg);
michael@0: }
michael@0: .instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
michael@0:   transform: scaleY(-1);
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-back,
michael@0: .instruction-arrow.arrow-forward,
michael@0: .instruction-arrow.arrow-back-straight,
michael@0: .instruction-arrow.arrow-forward-straight {
michael@0:   background-image: url("chrome://browser/skin/images/arrow-left.png");
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-back,
michael@0: .instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
michael@0:   transform: rotate(0) scaleY(1);
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-forward,
michael@0: .instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
michael@0:   transform: rotate(180deg) scaleY(-1);
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-back-straight,
michael@0: .instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
michael@0:   transform: rotate(220deg) scaleX(-1);
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-forward-straight,
michael@0: .instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
michael@0:   transform: rotate(-220deg);
michael@0: }
michael@0: 
michael@0: #instruction-tabs {
michael@0:   position: absolute;
michael@0:   top: 10px;
michael@0:   transform: translateX(calc(630px - 50%));
michael@0: }
michael@0: #instruction-tabs:-moz-locale-dir(rtl) {
michael@0:   right: 0;
michael@0:   left: auto;
michael@0:   transform: translateX(calc(50% - 630px));
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-tabs {
michael@0:   transform: translateX(calc(50vw - 50%));
michael@0: }
michael@0: #start-container[viewstate="portrait"] #instruction-tabs:-moz-locale-dir(rtl) {
michael@0:   transform: translateX(calc(-50vw + 50%));
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #instruction-topsites {
michael@0:   position: absolute;
michael@0:   bottom: 15%;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
michael@0:   -moz-box-align: start;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-topsites-box {
michael@0:   margin-bottom: 20px;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
michael@0:   -moz-box-align: center;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #instruction-history,
michael@0: #start-container[viewstate="landscape"] #instruction-bookmarks {
michael@0:   position: absolute;
michael@0:   top: 310px;
michael@0:   transform: translateX(calc(-300px - 50%));
michael@0: }
michael@0: #start-container[viewstate="landscape"] #instruction-history:-moz-locale-dir(rtl),
michael@0: #start-container[viewstate="landscape"] #instruction-bookmarks:-moz-locale-dir(rtl) {
michael@0:   transform: translateX(calc(300px + 50%));
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-history,
michael@0: #start-container[viewstate="portrait"] #instruction-bookmarks,
michael@0: #start-container[viewstate="portrait"] #instruction-topsites {
michael@0:   transform: translateX(-55px);
michael@0: }
michael@0: #start-container[viewstate="portrait"] #instruction-history:-moz-locale-dir(rtl),
michael@0: #start-container[viewstate="portrait"] #instruction-bookmarks:-moz-locale-dir(rtl),
michael@0: #start-container[viewstate="portrait"] #instruction-topsites:-moz-locale-dir(rtl) {
michael@0:   transform: translateX(55px);
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #instruction-menu {
michael@0:   position: fixed;
michael@0:   bottom: 16px;
michael@0:   right: 37px;
michael@0: }
michael@0: #start-container[viewstate="landscape"] #instruction-menu:-moz-locale-dir(rtl) {
michael@0:   left: 37px;
michael@0:   right: auto;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="portrait"] #instruction-menu {
michael@0:   position: absolute;
michael@0:   right: 37px;
michael@0:   transform: translateY(40px);
michael@0: }
michael@0: #start-container[viewstate="portrait"] #instruction-menu:-moz-locale-dir(rtl) {
michael@0:   left: 37px;
michael@0:   right: auto;
michael@0: }
michael@0: 
michael@0: #start-container #instruction-menu .instruction-label {
michael@0:     max-width: 300px;
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="landscape"] #start-history {
michael@0:   padding-left: 50px;
michael@0: }
michael@0: 
michael@0: /* Higher resolution images ---------------------- */
michael@0: 
michael@0: @media (min-resolution: @min_res_140pc@) {
michael@0:   /* Load 140% image when scaled by 140% */
michael@0:   .instruction-arrow.arrow-top,
michael@0:   .instruction-arrow.arrow-down {
michael@0:     background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
michael@0:   }
michael@0: 
michael@0:   .instruction-arrow.arrow-back,
michael@0:   .instruction-arrow.arrow-forward {
michael@0:     background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
michael@0:   }
michael@0: 
michael@0:   .welcome-image {
michael@0:     background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media (min-resolution: @min_res_180pc@) {
michael@0:   /* Load 180% image when scaled by 180% */
michael@0:   .instruction-arrow.arrow-top,
michael@0:   .instruction-arrow.arrow-down {
michael@0:     background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
michael@0:   }
michael@0: 
michael@0:   .instruction-arrow.arrow-back,
michael@0:   .instruction-arrow.arrow-forward {
michael@0:     background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
michael@0:   }
michael@0: 
michael@0:   .welcome-image {
michael@0:     background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
michael@0:   }
michael@0: }