The Tor Browser: browser/metro/theme/firstrun.css@7e26c7da4463 (annotated)

browser/metro/theme/firstrun.css@7e26c7da4463 (annotated)

browser/metro/theme/firstrun.css

Wed, 31 Dec 2014 06:55:50 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:55:50 +0100
changeset 2: 7e26c7da4463
permissions: -rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

 /* 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");
   }
 }

The Tor Browser / annotate

browser/metro/theme/firstrun.css@7e26c7da4463 (annotated)

browser/metro/theme/firstrun.css