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: %filter substitution
michael@0: %include defines.inc
michael@0: 
michael@0: /* Disable firstrun in some cases */
michael@0: #stack[startpage] .firstrun-content {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: @media (max-width: 900px) {
michael@0:   .firstrun-content {
michael@0:     display: none;
michael@0:   }
michael@0: }
michael@0: 
michael@0: /* bg transparent pane --------------- */
michael@0: 
michael@0: #firstrun-bg-pane {
michael@0:   position: absolute;
michael@0:   background-color: rgba(0, 0, 0, .8);
michael@0:   left: 0;
michael@0:   right: 0;
michael@0:   top: 0;
michael@0:   bottom: 0;
michael@0: }
michael@0: 
michael@0: /* Got it button ---------------------- */
michael@0: 
michael@0: #firstrun-gotit {
michael@0:   position: fixed;
michael@0:   bottom: calc(@toolbar_height@ + 64px);
michael@0:   left: 64px;
michael@0: }
michael@0: 
michael@0: #firstrun-gotit:-moz-locale-dir(rtl) {
michael@0:   left: auto;
michael@0:   right: 64px;
michael@0: }
michael@0: 
michael@0: .firstrun-button {
michael@0:   padding: 15px 45px;
michael@0:   font-family: "Segoe UI", sans-serif;
michael@0:   font-size: 25px;
michael@0:   background-image: -moz-linear-gradient(0deg, rgb(255, 128, 0) 0%, rgb(255, 149, 0) 100%);
michael@0:   border: 0;
michael@0:   color: #FFF;
michael@0: }
michael@0: 
michael@0: /* Instructions arrows ---------------- */
michael@0: 
michael@0: .instruction-arrow {
michael@0:   width: 76px;
michael@0:   height: 76px;
michael@0:   background-repeat: no-repeat;
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-top,
michael@0: .instruction-arrow.arrow-down,
michael@0: .instruction-arrow.arrow-down-reverse {
michael@0:   background-image: url("chrome://browser/skin/images/arrow-top-light.png");
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-down,
michael@0: .instruction-arrow.arrow-down-reverse:-moz-locale-dir(rtl) {
michael@0:   transform: rotate(180deg);
michael@0: }
michael@0: 
michael@0: .instruction-arrow.arrow-down-reverse,
michael@0: .instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
michael@0:   transform: rotate(180deg) scaleX(-1);
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-light.png");
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-forward:-moz-locale-dir(rtl) {
michael@0:   transform: none;
michael@0: }
michael@0: 
michael@0: /* Instructions text ------------------ */
michael@0: 
michael@0: .instruction-content-container {
michael@0:   width: 380px;
michael@0:   vertical-align: bottom;
michael@0: }
michael@0: 
michael@0: #instruction-back .instruction-content-container,
michael@0: #instruction-plus .instruction-content-container {
michael@0:   width: 320px;
michael@0: }
michael@0: 
michael@0: .instruction-label {
michael@0:   font-size: 18px;
michael@0:   color: #BBB;
michael@0:   line-height: 22px;
michael@0: }
michael@0: 
michael@0: #instruction-tabs {
michael@0:   position: fixed;
michael@0:   top: 10px;
michael@0:   left: 50%;
michael@0:   transform: translateX(-50%);
michael@0: }
michael@0: 
michael@0: #instruction-back {
michael@0:   position: fixed;
michael@0:   top: 50%;
michael@0:   left: 100px;
michael@0: }
michael@0: 
michael@0: #instruction-back:-moz-locale-dir(rtl)  {
michael@0:   left: auto;
michael@0:   right: 100px;
michael@0: }
michael@0: 
michael@0: #instruction-plus {
michael@0:   position: fixed;
michael@0:   top: 50%;
michael@0:   right: 100px;
michael@0: }
michael@0: 
michael@0: #instruction-plus:-moz-locale-dir(rtl)  {
michael@0:   right: auto;
michael@0:   left: 100px;
michael@0: }
michael@0: 
michael@0: #instruction-star {
michael@0:   position: fixed;
michael@0:   bottom: @toolbar_height@;
michael@0:   right: 145px;
michael@0: }
michael@0: 
michael@0: #instruction-star:-moz-locale-dir(rtl)  {
michael@0:   right: auto;
michael@0:   left: 145px;
michael@0: }
michael@0: 
michael@0: #instruction-star .instruction-label {
michael@0:   max-width: 250px;
michael@0: }
michael@0: 
michael@0: #instruction-star .instruction-content-container:-moz-locale-dir(rtl) {
michael@0:   -moz-box-align: start;
michael@0:   vertical-align: top;
michael@0: }
michael@0: 
michael@0: #instruction-pin {
michael@0:   position: fixed;
michael@0:   bottom: @toolbar_height@;
michael@0:   right: 10px;
michael@0: }
michael@0: 
michael@0: #instruction-pin:-moz-locale-dir(rtl)  {
michael@0:   right: auto;
michael@0:   left: 10px;
michael@0: }
michael@0: 
michael@0: #instruction-pin .instruction-label {
michael@0:   max-width: 250px;
michael@0:   margin-bottom: 20px;
michael@0: }
michael@0: 
michael@0: #instruction-pin .instruction-arrow {
michael@0:   -moz-margin-end: 65px;
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:   .instruction-arrow.arrow-down-reverse {
michael@0:     background-image: url("chrome://browser/skin/images/arrow-top-light@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-light@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:   .instruction-arrow.arrow-down-reverse {
michael@0:     background-image: url("chrome://browser/skin/images/arrow-top-light@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-light@1.8x.png");
michael@0:   }
michael@0: }