1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/theme/firstruncontent.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,205 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +%filter substitution
1.9 +%include defines.inc
1.10 +
1.11 +/* Disable firstrun in some cases */
1.12 +#stack[startpage] .firstrun-content {
1.13 + display: none;
1.14 +}
1.15 +
1.16 +@media (max-width: 900px) {
1.17 + .firstrun-content {
1.18 + display: none;
1.19 + }
1.20 +}
1.21 +
1.22 +/* bg transparent pane --------------- */
1.23 +
1.24 +#firstrun-bg-pane {
1.25 + position: absolute;
1.26 + background-color: rgba(0, 0, 0, .8);
1.27 + left: 0;
1.28 + right: 0;
1.29 + top: 0;
1.30 + bottom: 0;
1.31 +}
1.32 +
1.33 +/* Got it button ---------------------- */
1.34 +
1.35 +#firstrun-gotit {
1.36 + position: fixed;
1.37 + bottom: calc(@toolbar_height@ + 64px);
1.38 + left: 64px;
1.39 +}
1.40 +
1.41 +#firstrun-gotit:-moz-locale-dir(rtl) {
1.42 + left: auto;
1.43 + right: 64px;
1.44 +}
1.45 +
1.46 +.firstrun-button {
1.47 + padding: 15px 45px;
1.48 + font-family: "Segoe UI", sans-serif;
1.49 + font-size: 25px;
1.50 + background-image: -moz-linear-gradient(0deg, rgb(255, 128, 0) 0%, rgb(255, 149, 0) 100%);
1.51 + border: 0;
1.52 + color: #FFF;
1.53 +}
1.54 +
1.55 +/* Instructions arrows ---------------- */
1.56 +
1.57 +.instruction-arrow {
1.58 + width: 76px;
1.59 + height: 76px;
1.60 + background-repeat: no-repeat;
1.61 +}
1.62 +
1.63 +.instruction-arrow.arrow-top,
1.64 +.instruction-arrow.arrow-down,
1.65 +.instruction-arrow.arrow-down-reverse {
1.66 + background-image: url("chrome://browser/skin/images/arrow-top-light.png");
1.67 +}
1.68 +
1.69 +.instruction-arrow.arrow-down,
1.70 +.instruction-arrow.arrow-down-reverse:-moz-locale-dir(rtl) {
1.71 + transform: rotate(180deg);
1.72 +}
1.73 +
1.74 +.instruction-arrow.arrow-down-reverse,
1.75 +.instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
1.76 + transform: rotate(180deg) scaleX(-1);
1.77 +}
1.78 +
1.79 +.instruction-arrow.arrow-back,
1.80 +.instruction-arrow.arrow-forward {
1.81 + background-image: url("chrome://browser/skin/images/arrow-left-light.png");
1.82 +}
1.83 +
1.84 +.instruction-arrow.arrow-forward,
1.85 +.instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
1.86 + transform: rotate(180deg) scaleY(-1);
1.87 +}
1.88 +
1.89 +.instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
1.90 + transform: none;
1.91 +}
1.92 +
1.93 +/* Instructions text ------------------ */
1.94 +
1.95 +.instruction-content-container {
1.96 + width: 380px;
1.97 + vertical-align: bottom;
1.98 +}
1.99 +
1.100 +#instruction-back .instruction-content-container,
1.101 +#instruction-plus .instruction-content-container {
1.102 + width: 320px;
1.103 +}
1.104 +
1.105 +.instruction-label {
1.106 + font-size: 18px;
1.107 + color: #BBB;
1.108 + line-height: 22px;
1.109 +}
1.110 +
1.111 +#instruction-tabs {
1.112 + position: fixed;
1.113 + top: 10px;
1.114 + left: 50%;
1.115 + transform: translateX(-50%);
1.116 +}
1.117 +
1.118 +#instruction-back {
1.119 + position: fixed;
1.120 + top: 50%;
1.121 + left: 100px;
1.122 +}
1.123 +
1.124 +#instruction-back:-moz-locale-dir(rtl) {
1.125 + left: auto;
1.126 + right: 100px;
1.127 +}
1.128 +
1.129 +#instruction-plus {
1.130 + position: fixed;
1.131 + top: 50%;
1.132 + right: 100px;
1.133 +}
1.134 +
1.135 +#instruction-plus:-moz-locale-dir(rtl) {
1.136 + right: auto;
1.137 + left: 100px;
1.138 +}
1.139 +
1.140 +#instruction-star {
1.141 + position: fixed;
1.142 + bottom: @toolbar_height@;
1.143 + right: 145px;
1.144 +}
1.145 +
1.146 +#instruction-star:-moz-locale-dir(rtl) {
1.147 + right: auto;
1.148 + left: 145px;
1.149 +}
1.150 +
1.151 +#instruction-star .instruction-label {
1.152 + max-width: 250px;
1.153 +}
1.154 +
1.155 +#instruction-star .instruction-content-container:-moz-locale-dir(rtl) {
1.156 + -moz-box-align: start;
1.157 + vertical-align: top;
1.158 +}
1.159 +
1.160 +#instruction-pin {
1.161 + position: fixed;
1.162 + bottom: @toolbar_height@;
1.163 + right: 10px;
1.164 +}
1.165 +
1.166 +#instruction-pin:-moz-locale-dir(rtl) {
1.167 + right: auto;
1.168 + left: 10px;
1.169 +}
1.170 +
1.171 +#instruction-pin .instruction-label {
1.172 + max-width: 250px;
1.173 + margin-bottom: 20px;
1.174 +}
1.175 +
1.176 +#instruction-pin .instruction-arrow {
1.177 + -moz-margin-end: 65px;
1.178 +}
1.179 +
1.180 +/* Higher resolution images ---------------------- */
1.181 +
1.182 +@media (min-resolution: @min_res_140pc@) {
1.183 + /* Load 140% image when scaled by 140% */
1.184 + .instruction-arrow.arrow-top,
1.185 + .instruction-arrow.arrow-down,
1.186 + .instruction-arrow.arrow-down-reverse {
1.187 + background-image: url("chrome://browser/skin/images/arrow-top-light@1.4x.png");
1.188 + }
1.189 +
1.190 + .instruction-arrow.arrow-back,
1.191 + .instruction-arrow.arrow-forward {
1.192 + background-image: url("chrome://browser/skin/images/arrow-left-light@1.4x.png");
1.193 + }
1.194 +}
1.195 +
1.196 +@media (min-resolution: @min_res_180pc@) {
1.197 + /* Load 180% image when scaled by 180% */
1.198 + .instruction-arrow.arrow-top,
1.199 + .instruction-arrow.arrow-down,
1.200 + .instruction-arrow.arrow-down-reverse {
1.201 + background-image: url("chrome://browser/skin/images/arrow-top-light@1.8x.png");
1.202 + }
1.203 +
1.204 + .instruction-arrow.arrow-back,
1.205 + .instruction-arrow.arrow-forward {
1.206 + background-image: url("chrome://browser/skin/images/arrow-left-light@1.8x.png");
1.207 + }
1.208 +}
