The Tor Browser / file comparison
comparison: browser/metro/theme/firstruncontent.css
browser/metro/theme/firstruncontent.css
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:1c5f341cf654 |
|---|---|
| 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 } |
