browser/metro/theme/firstrun.css@7e26c7da4463
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
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/. */
5 /* Rearrange about:start ---------------------- */
7 /* Disable all instructions in snapped mode */
8 #start-container[viewstate="snapped"] .firstrun {
9 display: none;
10 }
12 /* Keep only first column of tiles */
13 #start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
14 #start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
15 #start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
16 -moz-column-count: 1 !important;
17 }
19 /* Add some bottom padding to make sure bottom tile will not be
20 below instruction */
21 #start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
22 padding-bottom: 30px;
23 }
25 /* Keep only first few items */
26 #start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
27 #start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
28 #start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
29 display: none;
30 }
32 /* Add some space for the instructions */
33 #start-container[viewstate="portrait"] {
34 padding-top: 120px;
35 padding-bottom: 120px;
36 }
38 /* Remove watermark */
39 .meta {
40 background-image: none;
41 }
44 /* Welcome pane ---------------------- */
46 /* Logo and welcome message */
47 #firstrun-welcome {
48 width: 550px;
49 font-family: "Segoe UI", sans-serif;
50 padding: 30px 0;
51 }
53 .welcome-image {
54 background-image: url("chrome://branding/content/metro_firstrun_logo.png");
56 width: 220px;
57 height: 220px;
58 }
60 #firstrun-welcome .welcome-title {
61 font-size: 25px;
62 color: #4d4e53;
63 line-height: 30px;
64 padding-top: 20px;
65 }
67 #firstrun-welcome .welcome-subtitle {
68 font-size: 16px;
69 color: #808080;
70 line-height: 22px;
71 padding-top: 10px;
72 }
74 /* Instructions ---------------------- */
76 .instruction-content-container {
77 width: 380px;
78 }
80 .instruction-label {
81 font-size: 16px;
82 color: #808080;
83 line-height: 22px;
84 }
86 .instruction-arrow {
87 width: 76px;
88 height: 76px;
89 }
91 .instruction-arrow.arrow-top,
92 .instruction-arrow.arrow-down {
93 background-image: url("chrome://browser/skin/images/arrow-top.png");
94 }
96 .instruction-arrow.arrow-down {
97 transform: rotate(180deg);
98 }
99 .instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
100 transform: scaleY(-1);
101 }
103 .instruction-arrow.arrow-back,
104 .instruction-arrow.arrow-forward,
105 .instruction-arrow.arrow-back-straight,
106 .instruction-arrow.arrow-forward-straight {
107 background-image: url("chrome://browser/skin/images/arrow-left.png");
108 }
110 .instruction-arrow.arrow-back,
111 .instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
112 transform: rotate(0) scaleY(1);
113 }
115 .instruction-arrow.arrow-forward,
116 .instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
117 transform: rotate(180deg) scaleY(-1);
118 }
120 .instruction-arrow.arrow-back-straight,
121 .instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
122 transform: rotate(220deg) scaleX(-1);
123 }
125 .instruction-arrow.arrow-forward-straight,
126 .instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
127 transform: rotate(-220deg);
128 }
130 #instruction-tabs {
131 position: absolute;
132 top: 10px;
133 transform: translateX(calc(630px - 50%));
134 }
135 #instruction-tabs:-moz-locale-dir(rtl) {
136 right: 0;
137 left: auto;
138 transform: translateX(calc(50% - 630px));
139 }
141 #start-container[viewstate="portrait"] #instruction-tabs {
142 transform: translateX(calc(50vw - 50%));
143 }
144 #start-container[viewstate="portrait"] #instruction-tabs:-moz-locale-dir(rtl) {
145 transform: translateX(calc(-50vw + 50%));
146 }
148 #start-container[viewstate="landscape"] #instruction-topsites {
149 position: absolute;
150 bottom: 15%;
151 }
153 #start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
154 -moz-box-align: start;
155 }
157 #start-container[viewstate="portrait"] #instruction-topsites-box {
158 margin-bottom: 20px;
159 }
161 #start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
162 -moz-box-align: center;
163 }
165 #start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
166 display: none;
167 }
169 #start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
170 display: block;
171 }
173 #start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
174 display: block;
175 }
177 #start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
178 display: none;
179 }
181 #start-container[viewstate="landscape"] #instruction-history,
182 #start-container[viewstate="landscape"] #instruction-bookmarks {
183 position: absolute;
184 top: 310px;
185 transform: translateX(calc(-300px - 50%));
186 }
187 #start-container[viewstate="landscape"] #instruction-history:-moz-locale-dir(rtl),
188 #start-container[viewstate="landscape"] #instruction-bookmarks:-moz-locale-dir(rtl) {
189 transform: translateX(calc(300px + 50%));
190 }
192 #start-container[viewstate="portrait"] #instruction-history,
193 #start-container[viewstate="portrait"] #instruction-bookmarks,
194 #start-container[viewstate="portrait"] #instruction-topsites {
195 transform: translateX(-55px);
196 }
197 #start-container[viewstate="portrait"] #instruction-history:-moz-locale-dir(rtl),
198 #start-container[viewstate="portrait"] #instruction-bookmarks:-moz-locale-dir(rtl),
199 #start-container[viewstate="portrait"] #instruction-topsites:-moz-locale-dir(rtl) {
200 transform: translateX(55px);
201 }
203 #start-container[viewstate="landscape"] #instruction-menu {
204 position: fixed;
205 bottom: 16px;
206 right: 37px;
207 }
208 #start-container[viewstate="landscape"] #instruction-menu:-moz-locale-dir(rtl) {
209 left: 37px;
210 right: auto;
211 }
213 #start-container[viewstate="portrait"] #instruction-menu {
214 position: absolute;
215 right: 37px;
216 transform: translateY(40px);
217 }
218 #start-container[viewstate="portrait"] #instruction-menu:-moz-locale-dir(rtl) {
219 left: 37px;
220 right: auto;
221 }
223 #start-container #instruction-menu .instruction-label {
224 max-width: 300px;
225 }
227 #start-container[viewstate="landscape"] #start-history {
228 padding-left: 50px;
229 }
231 /* Higher resolution images ---------------------- */
233 @media (min-resolution: @min_res_140pc@) {
234 /* Load 140% image when scaled by 140% */
235 .instruction-arrow.arrow-top,
236 .instruction-arrow.arrow-down {
237 background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
238 }
240 .instruction-arrow.arrow-back,
241 .instruction-arrow.arrow-forward {
242 background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
243 }
245 .welcome-image {
246 background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
247 }
248 }
250 @media (min-resolution: @min_res_180pc@) {
251 /* Load 180% image when scaled by 180% */
252 .instruction-arrow.arrow-top,
253 .instruction-arrow.arrow-down {
254 background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
255 }
257 .instruction-arrow.arrow-back,
258 .instruction-arrow.arrow-forward {
259 background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
260 }
262 .welcome-image {
263 background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
264 }
265 }
