browser/metro/theme/tiles.css@7e26c7da4463
browser/metro/theme/tiles.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 /* Tile grid ------------------------------------------------------------- */
7 %filter substitution
8 %include defines.inc
10 /*
11 *****************************************************
12 The following rules define the key tile dimensions
13 They are (also) snarfed via the CSSOM as the dimensions used in the #richgrid binding
14 *****************************************************
15 */
16 richgriditem {
17 width: @grid_double_column_width@;
18 height: @grid_row_height@;
19 }
20 richgriditem[tiletype="thumbnail"] {
21 width: @grid_double_column_width@;
22 height: @grid_double_row_height@;
23 }
24 richgriditem[search] {
25 width: @grid_search_width@;
26 height: @grid_row_height@;
27 }
28 richgriditem[compact] {
29 width: auto;
30 height: @compactgrid_row_height@;
31 }
32 /*
33 *****************************************************
34 */
35 richgrid {
36 display: -moz-box;
37 overflow: hidden;
38 }
40 richgrid > .richgrid-grid {
41 -moz-column-width: @grid_double_column_width@; /* tile width (2x unit + gutter) */
42 min-width: @grid_double_column_width@; /* min 1 column */
43 min-height: @grid_double_row_height@; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
44 -moz-column-fill: auto; /* do not attempt to balance content between columns */
45 -moz-column-gap: 0;
46 -moz-column-count: auto;
47 display: block;
48 box-sizing: content-box;
49 overflow-x: hidden; /* clipping will only kick in if an explicit width is set */
50 transition: 100ms transform ease-out;
51 }
53 richgrid[search] > .richgrid-grid {
54 -moz-column-width: auto;
55 min-width: 0;
56 }
58 richgriditem {
59 display: block;
60 position: relative;
61 width: @grid_double_column_width@;
62 height: @grid_row_height@;
63 box-sizing: border-box;
64 -moz-column-gap: 0;
65 overflow:hidden;
66 cursor: default;
67 }
69 .tile-content {
70 display: block;
71 position: absolute;
72 /* background-color colors the tile-edge,
73 and will normally be overridden with a favicon-based color */
74 background-color: #ccc;
75 background-origin: padding-box;
76 /* content positioning within the grid "cell"
77 gives us the gutters/spacing between tiles */
78 top: 2px; right: @tile_side_margin@; bottom: 10px; left: @tile_side_margin@;
79 border: @metro_border_thin@ solid @tile_border_color@;
80 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
81 transition: 150ms transform ease-out,
82 @metro_animation_duration@ background-color @metro_animation_easing@;
83 }
85 .tile-start-container {
86 position: absolute;
87 top: 0;
88 bottom: 0;
89 right: 0;
90 left: 10px;
91 padding: 8px;
92 background-color: #fff;
93 }
94 richgriditem:-moz-locale-dir(rtl) .tile-start-container {
95 right: 10px;
96 left: 0;
97 }
99 richgriditem[search] .tile-start-container {
100 background-color: transparent;
101 }
103 richgriditem:not([tiletype="thumbnail"]) .tile-start-container {
104 background-image: none!important;
105 }
107 .tile-icon-box {
108 position: absolute;
109 top: 50%;
110 margin-top: -17px;
111 padding: 8px;
112 /* default color, may be overriden by a favicon-based color */
113 background-color: white;
114 border: 1px solid #ccc;
115 border-radius: 1px;
116 opacity: 1.0;
117 }
119 .tile-icon-box > image {
120 display: block;
121 width: 16px;
122 height: 16px;
123 list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
124 }
126 /* for larger favicons (which includes the fallback icon) */
127 richgriditem:not([iconURI]) .tile-icon-box,
128 richgriditem[iconURI=""] .tile-icon-box,
129 richgriditem[iconsize="large"] .tile-icon-box {
130 border-color: transparent!important;
131 padding: 4px;
132 }
134 richgriditem[iconsize="large"] .tile-icon-box > image,
135 .tile-icon-box > image[src=""] {
136 width: 24px;
137 height: 24px;
138 }
140 richgriditem[search] .tile-icon-box {
141 padding: 0;
142 border: 0;
143 left: 50%;
144 -moz-margin-start: -13px;
145 margin-top: -8px;
146 }
148 richgriditem[search]:-moz-locale-dir(rtl) .tile-icon-box {
149 right: 50%;
150 left: auto;
151 }
154 richgriditem[search][iconsize="large"] .tile-icon-box {
155 left: 0;
156 top: 0;
157 margin: 0;
158 }
159 richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-icon-box {
160 right: 0;
161 left: auto;
162 }
164 richgriditem[search][iconsize="large"] .tile-start-container {
165 left: 0;
166 padding: 0;
167 }
168 richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-start-container {
169 left: auto;
170 right: 0;
171 }
173 richgriditem[search][iconsize="large"] .tile-icon-box > image {
174 width: 74px;
175 height: 74px;
176 }
178 richgriditem[search] .tile-desc {
179 display: none;
180 }
182 richgriditem[search] .tile-content {
183 border: 0;
184 }
186 .tile-desc {
187 display: block;
188 position: absolute;
189 top: 6px;
190 left: 52px; /* label goes to the end (right) of the favicon */
191 right: 0;
192 padding-top: 1em;
193 -moz-padding-end: 6px;
194 padding-bottom: 6px;
195 -moz-padding-start: 12px;
196 background: white;
197 color: #333;
198 margin: 0;
199 -moz-margin-start: 0;
200 display: block;
201 font-size: 16px;
202 overflow: hidden;
203 white-space: nowrap;
204 text-overflow: ellipsis;
205 transition: @metro_animation_duration@ background-color @metro_animation_easing@;
206 }
207 richgriditem:-moz-locale-dir(rtl) .tile-desc {
208 right: 52px; /* label goes to the end (left) of the favicon */
209 left: 0;
210 }
212 richgriditem:not([tiletype="thumbnail"]) .tile-desc {
213 background-color: transparent!important;
214 }
217 richgriditem.collapsed {
218 height: 0!important;
219 overflow: hidden;
220 opacity: 0;
221 }
223 richgriditem.collapsed > .tile-content {
224 transform: scaleY(0);
225 transition: 150ms transform ease-out 150ms;
226 }
228 richgriditem:active {
229 z-index: 2;
230 }
232 /* thumbnail variation */
234 richgriditem[tiletype="thumbnail"] {
235 width: @grid_double_column_width@;
236 height: @grid_double_row_height@;
237 -moz-box-pack: end;
238 padding: 0px;
239 color: #1a1a1a;
240 }
242 richgriditem[tiletype="thumbnail"] .tile-desc {
243 margin: 0;
244 top: auto;
245 bottom: 0;
246 left: 0;
247 right: 0;
248 padding-top: 4px;
249 -moz-padding-end: 8px;
250 padding-bottom: 4px;
251 -moz-padding-start: 56px;
252 }
254 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-desc {
255 /* ensure thumbnail labels get their color from the parent richgriditem element */
256 color: inherit;
257 }
259 /* thumbnail tiles use a screenshot thumbnail as the background */
261 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container,
262 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
263 background-size: cover;
264 background-position: top left;
265 background-repeat: no-repeat;
266 position: absolute;
267 top: 0;
268 bottom: 0;
269 right: 0;
270 left: 0;
271 }
273 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
274 pointer-events:none;
275 content: "";
276 display: block;
277 opacity: 0;
278 background-color: #fff;
279 background-image: url("chrome://browser/skin/images/firefox-watermark.png")!important;
280 transition: @metro_animation_duration@ opacity ease-in;
281 }
283 richgriditem[tiletype="thumbnail"]:not([customImage]) > .tile-content > .tile-start-container::after {
284 opacity: 1;
285 }
287 richgriditem[tiletype="thumbnail"] .tile-icon-box {
288 top: auto;
289 left: 10px;
290 bottom: 6px;
291 margin-top: 0;
292 z-index: 1;
293 box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(0, 0, 0, 0.1);
294 }
295 richgriditem[tiletype="thumbnail"]:-moz-locale-dir(rtl) .tile-icon-box {
296 left: auto;
297 right: 10px;
298 }
300 /* selected tile indicator */
301 richgriditem[selected] > .tile-content::after {
302 content: "";
303 pointer-events: none;
304 display: block;
305 position: absolute;
306 top: 0;
307 right: 0;
308 bottom: 0;
309 left: 0;
310 z-index: 1;
311 background-image: url(chrome://browser/skin/images/tile-selected-check-hdpi.png);
312 background-origin: border-box;
313 background-repeat: no-repeat;
314 background-position: right 0 top 0;
315 /* scale the image whatever the dppx */
316 background-size: 35px 35px;
317 border: @metro_border_xthick@ solid @selected_color@;
318 }
319 richgriditem[selected]:-moz-locale-dir(rtl) > .tile-content::after {
320 background-position: left 0 top 0;
321 background-image: url(chrome://browser/skin/images/tile-selected-check-rtl-hdpi.png);
322 }
324 richgriditem[crosssliding] {
325 z-index: 10;
326 }
328 /* ease the return to original position when cross-sliding */
329 richgriditem:not([crosssliding]) {
330 transition: transform ease-out 0.2s;
331 }
334 /* tile pinned-state indication */
335 richgriditem[pinned] > .tile-content::before {
336 pointer-events:none;
337 content: "";
338 display: block;
339 position: absolute;
340 top: 0;
341 right: 0;
342 left: auto;
343 z-index: 1;
344 width: 35px;
345 height: 35px;
346 background-image: url(chrome://browser/skin/images/pinned-hdpi.png);
347 background-position: center;
348 background-repeat: no-repeat;
349 /* scale the image whatever the dppx */
350 background-size: 70px 70px;
351 }
352 richgriditem[pinned]:-moz-locale-dir(rtl) > .tile-content::before {
353 left: 0;
354 right: auto;
355 -moz-transform: scaleX(-1);
356 }
359 /* Selected _and_ pinned tiles*/
360 richgriditem[selected][pinned] > .tile-content::before {
361 background-position: right -@metro_border_xthick@ top -@metro_border_xthick@;
362 width: 70px;
363 height: 70px;
364 }
365 richgriditem[selected][pinned]:-moz-locale-dir(rtl) > .tile-content::before {
366 background-position: left -@metro_border_xthick@ top -@metro_border_xthick@;
367 }
369 richgriditem[customColor] {
370 color: #f1f1f1;
371 }
373 richgriditem[bending] > .tile-content {
374 transform-origin: center center;
375 }
377 richgriditem[tiletype="thumbnail"]:not([value]) {
378 visibility: visible;
379 }
380 richgriditem:not([value]) > .tile-content {
381 padding: 10px 14px;
382 }
383 /* Empty/unused tiles */
384 richgriditem:not([value]) > .tile-content {
385 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
386 background-image: url("chrome://browser/skin/images/firefox-watermark.png");
387 background-origin: content-box;
388 background-repeat: no-repeat;
389 background-color: rgba(255,255,255, 0.2);
390 background-position: center center;
391 background-size: @compactgrid_row_height@;
392 }
393 richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
394 background-size: @grid_row_height@;
395 }
397 /* Snapped-view variation
398 We use the compact, single-column grid treatment for <=320px */
400 @media (max-width: 330px) {
402 richgrid:not([search]) > .richgrid-grid {
403 -moz-column-width: auto!important; /* let it flow */
404 -moz-column-count: auto!important; /* let it flow */
405 height: auto; /* let it flow */
406 min-width: 280px;
407 transition: 100ms transform ease-out;
408 }
410 richgriditem {
411 width: @grid_double_column_width@;
412 overflow: hidden;
413 height: @compactgrid_row_height@;
414 }
416 .tile-desc {
417 padding-top: 0.5em;
418 -moz-padding-end: 4px;
419 padding-bottom: 4px;
420 -moz-padding-start: 4px;
421 }
423 richgriditem:not([search]) > .tile-content {
424 left: 0;
425 right: 0;
426 }
428 richgriditem {
429 width: auto;
430 }
431 }
