browser/metro/theme/firstruncontent.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 %filter substitution
   6 %include defines.inc
   7
   8 /* Disable firstrun in some cases */
   9 #stack[startpage] .firstrun-content {
  10   display: none;
  11 }
  12
  13 @media (max-width: 900px) {
  14   .firstrun-content {
  15     display: none;
  16   }
  17 }
  18
  19 /* bg transparent pane --------------- */
  20
  21 #firstrun-bg-pane {
  22   position: absolute;
  23   background-color: rgba(0, 0, 0, .8);
  24   left: 0;
  25   right: 0;
  26   top: 0;
  27   bottom: 0;
  28 }
  29
  30 /* Got it button ---------------------- */
  31
  32 #firstrun-gotit {
  33   position: fixed;
  34   bottom: calc(@toolbar_height@ + 64px);
  35   left: 64px;
  36 }
  37
  38 #firstrun-gotit:-moz-locale-dir(rtl) {
  39   left: auto;
  40   right: 64px;
  41 }
  42
  43 .firstrun-button {
  44   padding: 15px 45px;
  45   font-family: "Segoe UI", sans-serif;
  46   font-size: 25px;
  47   background-image: -moz-linear-gradient(0deg, rgb(255, 128, 0) 0%, rgb(255, 149, 0) 100%);
  48   border: 0;
  49   color: #FFF;
  50 }
  51
  52 /* Instructions arrows ---------------- */
  53
  54 .instruction-arrow {
  55   width: 76px;
  56   height: 76px;
  57   background-repeat: no-repeat;
  58 }
  59
  60 .instruction-arrow.arrow-top,
  61 .instruction-arrow.arrow-down,
  62 .instruction-arrow.arrow-down-reverse {
  63   background-image: url("chrome://browser/skin/images/arrow-top-light.png");
  64 }
  65
  66 .instruction-arrow.arrow-down,
  67 .instruction-arrow.arrow-down-reverse:-moz-locale-dir(rtl) {
  68   transform: rotate(180deg);
  69 }
  70
  71 .instruction-arrow.arrow-down-reverse,
  72 .instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
  73   transform: rotate(180deg) scaleX(-1);
  74 }
  75
  76 .instruction-arrow.arrow-back,
  77 .instruction-arrow.arrow-forward {
  78   background-image: url("chrome://browser/skin/images/arrow-left-light.png");
  79 }
  80
  81 .instruction-arrow.arrow-forward,
  82 .instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
  83   transform: rotate(180deg) scaleY(-1);
  84 }
  85
  86 .instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
  87   transform: none;
  88 }
  89
  90 /* Instructions text ------------------ */
  91
  92 .instruction-content-container {
  93   width: 380px;
  94   vertical-align: bottom;
  95 }
  96
  97 #instruction-back .instruction-content-container,
  98 #instruction-plus .instruction-content-container {
  99   width: 320px;
 100 }
 101
 102 .instruction-label {
 103   font-size: 18px;
 104   color: #BBB;
 105   line-height: 22px;
 106 }
 107
 108 #instruction-tabs {
 109   position: fixed;
 110   top: 10px;
 111   left: 50%;
 112   transform: translateX(-50%);
 113 }
 114
 115 #instruction-back {
 116   position: fixed;
 117   top: 50%;
 118   left: 100px;
 119 }
 120
 121 #instruction-back:-moz-locale-dir(rtl)  {
 122   left: auto;
 123   right: 100px;
 124 }
 125
 126 #instruction-plus {
 127   position: fixed;
 128   top: 50%;
 129   right: 100px;
 130 }
 131
 132 #instruction-plus:-moz-locale-dir(rtl)  {
 133   right: auto;
 134   left: 100px;
 135 }
 136
 137 #instruction-star {
 138   position: fixed;
 139   bottom: @toolbar_height@;
 140   right: 145px;
 141 }
 142
 143 #instruction-star:-moz-locale-dir(rtl)  {
 144   right: auto;
 145   left: 145px;
 146 }
 147
 148 #instruction-star .instruction-label {
 149   max-width: 250px;
 150 }
 151
 152 #instruction-star .instruction-content-container:-moz-locale-dir(rtl) {
 153   -moz-box-align: start;
 154   vertical-align: top;
 155 }
 156
 157 #instruction-pin {
 158   position: fixed;
 159   bottom: @toolbar_height@;
 160   right: 10px;
 161 }
 162
 163 #instruction-pin:-moz-locale-dir(rtl)  {
 164   right: auto;
 165   left: 10px;
 166 }
 167
 168 #instruction-pin .instruction-label {
 169   max-width: 250px;
 170   margin-bottom: 20px;
 171 }
 172
 173 #instruction-pin .instruction-arrow {
 174   -moz-margin-end: 65px;
 175 }
 176
 177 /* Higher resolution images ---------------------- */
 178
 179 @media (min-resolution: @min_res_140pc@) {
 180   /* Load 140% image when scaled by 140% */
 181   .instruction-arrow.arrow-top,
 182   .instruction-arrow.arrow-down,
 183   .instruction-arrow.arrow-down-reverse {
 184     background-image: url("chrome://browser/skin/images/arrow-top-light@1.4x.png");
 185   }
 186
 187   .instruction-arrow.arrow-back,
 188   .instruction-arrow.arrow-forward {
 189     background-image: url("chrome://browser/skin/images/arrow-left-light@1.4x.png");
 190   }
 191 }
 192
 193 @media (min-resolution: @min_res_180pc@) {
 194   /* Load 180% image when scaled by 180% */
 195   .instruction-arrow.arrow-top,
 196   .instruction-arrow.arrow-down,
 197   .instruction-arrow.arrow-down-reverse {
 198     background-image: url("chrome://browser/skin/images/arrow-top-light@1.8x.png");
 199   }
 200
 201   .instruction-arrow.arrow-back,
 202   .instruction-arrow.arrow-forward {
 203     background-image: url("chrome://browser/skin/images/arrow-left-light@1.8x.png");
 204   }
 205 }