The Tor Browser / file comparison

comparison: browser/metro/theme/firstrun.css

browser/metro/theme/firstrun.css

changeset 2
7e26c7da4463
equal deleted inserted replaced
-1:000000000000 0:b845533f87b8
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 /* Rearrange about:start ---------------------- */
6
7 /* Disable all instructions in snapped mode */
8 #start-container[viewstate="snapped"] .firstrun {
9 display: none;
10 }
11
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 }
18
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 }
24
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 }
31
32 /* Add some space for the instructions */
33 #start-container[viewstate="portrait"] {
34 padding-top: 120px;
35 padding-bottom: 120px;
36 }
37
38 /* Remove watermark */
39 .meta {
40 background-image: none;
41 }
42
43
44 /* Welcome pane ---------------------- */
45
46 /* Logo and welcome message */
47 #firstrun-welcome {
48 width: 550px;
49 font-family: "Segoe UI", sans-serif;
50 padding: 30px 0;
51 }
52
53 .welcome-image {
54 background-image: url("chrome://branding/content/metro_firstrun_logo.png");
55
56 width: 220px;
57 height: 220px;
58 }
59
60 #firstrun-welcome .welcome-title {
61 font-size: 25px;
62 color: #4d4e53;
63 line-height: 30px;
64 padding-top: 20px;
65 }
66
67 #firstrun-welcome .welcome-subtitle {
68 font-size: 16px;
69 color: #808080;
70 line-height: 22px;
71 padding-top: 10px;
72 }
73
74 /* Instructions ---------------------- */
75
76 .instruction-content-container {
77 width: 380px;
78 }
79
80 .instruction-label {
81 font-size: 16px;
82 color: #808080;
83 line-height: 22px;
84 }
85
86 .instruction-arrow {
87 width: 76px;
88 height: 76px;
89 }
90
91 .instruction-arrow.arrow-top,
92 .instruction-arrow.arrow-down {
93 background-image: url("chrome://browser/skin/images/arrow-top.png");
94 }
95
96 .instruction-arrow.arrow-down {
97 transform: rotate(180deg);
98 }
99 .instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
100 transform: scaleY(-1);
101 }
102
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 }
109
110 .instruction-arrow.arrow-back,
111 .instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
112 transform: rotate(0) scaleY(1);
113 }
114
115 .instruction-arrow.arrow-forward,
116 .instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
117 transform: rotate(180deg) scaleY(-1);
118 }
119
120 .instruction-arrow.arrow-back-straight,
121 .instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
122 transform: rotate(220deg) scaleX(-1);
123 }
124
125 .instruction-arrow.arrow-forward-straight,
126 .instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
127 transform: rotate(-220deg);
128 }
129
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 }
140
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 }
147
148 #start-container[viewstate="landscape"] #instruction-topsites {
149 position: absolute;
150 bottom: 15%;
151 }
152
153 #start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
154 -moz-box-align: start;
155 }
156
157 #start-container[viewstate="portrait"] #instruction-topsites-box {
158 margin-bottom: 20px;
159 }
160
161 #start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
162 -moz-box-align: center;
163 }
164
165 #start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
166 display: none;
167 }
168
169 #start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
170 display: block;
171 }
172
173 #start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
174 display: block;
175 }
176
177 #start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
178 display: none;
179 }
180
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 }
191
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 }
202
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 }
212
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 }
222
223 #start-container #instruction-menu .instruction-label {
224 max-width: 300px;
225 }
226
227 #start-container[viewstate="landscape"] #start-history {
228 padding-left: 50px;
229 }
230
231 /* Higher resolution images ---------------------- */
232
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 }
239
240 .instruction-arrow.arrow-back,
241 .instruction-arrow.arrow-forward {
242 background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
243 }
244
245 .welcome-image {
246 background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
247 }
248 }
249
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 }
256
257 .instruction-arrow.arrow-back,
258 .instruction-arrow.arrow-forward {
259 background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
260 }
261
262 .welcome-image {
263 background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
264 }
265 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial